/*! * Kizumi 皮肤 —— 织物质感 (Fabric Texture) * * 独立皮肤：通过 作用域隔离，完全脱离原主题选项配置。 * 以亚麻/帆布的平铺编织纹理 + 柔和阴影 + 缝线细节，营造可触摸的暖色手作界面。 * * 配色：暖米色织物质地 + 陶土色点缀 + 牛仔灰蓝辅色；文字保持高对比。 * 交互：hover 提升高光与阴影（模拟光源移动），active 轻微下沉；动效 180–260ms，避免大幅缩放。 */ /* ---------- 调色盘点 + 覆盖 Bootstrap 变量 ---------- */ [data-skin="fabric"] { /* 织物专属色板 */ --fb-bg: #efe6d6; /* 暖亚麻背景 */ --fb-bg-deep: #e7dcc7; /* 织物深处 */ --fb-surface: #fbf6ec; /* 布面（卡片） */ --fb-surface-2: #f5edde; /* 布面（次层级） */ --fb-ink: #43392c; /* 高对比墨色 */ --fb-ink-soft: #5a4e3e; /* 柔和墨色 */ --fb-muted: #8a7c68; /* 弱色文字 */ --fb-accent: #b0704f; /* 陶土点缀色 */ --fb-accent-strong: #9a5f41; /* 点缀加深（按压） */ --fb-accent-2: #7f93a3; /* 牛仔灰蓝辅色 */ --fb-stitch: rgba(120, 96, 70, 0.32); /* 缝线/描边 */ --fb-stitch-strong: rgba(120, 96, 70, 0.52);/* 缝线增强 */ --fb-shadow: rgba(96, 74, 48, 0.28); /* 柔和投影 */ --fb-shadow-soft: rgba(96, 74, 48, 0.12); /* 更柔投影 */ /* 覆盖 Bootstrap 变量，把整站换到暖色织物质地 */ --bs-primary: var(--fb-accent); --bs-primary-rgb: 176, 112, 79; --bs-secondary: var(--fb-surface-2); --bs-secondary-rgb: 245, 237, 222; --bs-light: #f8f2e7; --bs-light-rgb: 248, 242, 231; --bs-dark: var(--fb-ink); --bs-dark-rgb: 67, 57, 44; --bs-black: #322a20; --bs-white: #fdf9f0; --bs-white-rgb: 253, 249, 240; --bs-body-bg: var(--fb-bg); --bs-body-color: var(--fb-ink); --bs-link-color: var(--fb-accent); --bs-link-hover-color: var(--fb-accent-strong); --bs-border-color: var(--fb-stitch); --bs-hui: var(--fb-stitch); --bs-primary-bg-subtle: #f0ddc7; --bs-primary-text-emphasis: #6d3f2a; --bs-primary-border-subtle: #ddbf9f; --bs-gray-600: #6f6250; --bs-gray-700: #5a4e3e; --bs-gray-800: var(--fb-ink); --bs-gray-900: var(--fb-ink); color-scheme: light; } /* ---------- 画布：亚麻平铺编织 + 细噪点 ---------- */ [data-skin="fabric"] body { background-color: var(--fb-bg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"), repeating-linear-gradient(90deg, rgba(120, 96, 70, 0.028) 0 1px, transparent 1px 5px), repeating-linear-gradient(0deg, rgba(120, 96, 70, 0.028) 0 1px, transparent 1px 5px); background-size: 140px 140px, 5px 5px, 5px 5px; background-attachment: fixed, fixed, fixed; color: var(--fb-ink); } /* 内容区底衬，避免文字直接压在噪点上 */ [data-skin="fabric"] .site-main, [data-skin="fabric"] .kizumi-container { color: var(--fb-ink); } /* ---------- 顶部导航：半透明布面 ---------- */ [data-skin="fabric"] .kizumi_header .navbar { background: rgba(251, 246, 236, 0.86); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px dashed var(--fb-stitch); } [data-skin="fabric"] .kizumi_header .navbar.scrolled { background: rgba(251, 246, 236, 0.96); box-shadow: 0 10px 24px -16px var(--fb-shadow); border-bottom: 1px dashed var(--fb-stitch); } [data-skin="fabric"] .kizumi_header .navbar-nav .nav-link, [data-skin="fabric"] .kizumi_header .navbar-nav .nav-link i { color: var(--fb-ink); } [data-skin="fabric"] .kizumi_header .navbar-nav .nav-link:hover, [data-skin="fabric"] .kizumi_header .navbar-nav .nav-link.active { color: var(--fb-accent-strong); border-color: var(--fb-stitch-strong); background: rgba(176, 112, 79, 0.08); } [data-skin="fabric"] .kizumi_header .search-input, [data-skin="fabric"] .kizumi_header .mobile-search-input { background-color: var(--fb-surface); border-color: var(--fb-stitch); color: var(--fb-ink); } [data-skin="fabric"] .kizumi_header .user-login, [data-skin="fabric"] .kizumi_header .user-reg { background-color: var(--fb-accent); color: #fff6ea; } [data-skin="fabric"] .kizumi_header .divider { background-color: var(--fb-surface); color: var(--fb-accent-strong); border-color: var(--fb-stitch); } /* ---------- 布面卡片：缝线边框 + 柔和阴影 ---------- */ [data-skin="fabric"] .post-list, [data-skin="fabric"] .list-one.post-list, [data-skin="fabric"] .blog-single, [data-skin="fabric"] .post-single, [data-skin="fabric"] .card, [data-skin="fabric"] .vip-card, [data-skin="fabric"] .widget, [data-skin="fabric"] .blog-sidebar .widget, [data-skin="fabric"] .pagination-wrapper, [data-skin="fabric"] .comment-item { background-color: var(--fb-surface); color: var(--fb-ink); border: 1px solid var(--fb-stitch) !important; border-radius: 16px; box-shadow: 0 14px 34px -18px var(--fb-shadow), 0 2px 8px var(--fb-shadow-soft); /* 内侧跑针缝线框：不占布局、不拦截事件 */ outline: 1px dashed var(--fb-stitch); outline-offset: -9px; } /* 覆盖原「布局边框」配置产生的伪元素装饰，保证皮肤独立 */ [data-skin="fabric"] .blog-border::after, [data-skin="fabric"] .blog-lines::before, [data-skin="fabric"] .blog-lines::after { content: none !important; border: none !important; background: none !important; animation: none !important; } /* 卡片内部构件：避免默认纯白/硬边 */ [data-skin="fabric"] .card .card-body, [data-skin="fabric"] .post-single, [data-skin="fabric"] .post-list-content { color: var(--fb-ink-soft); } [data-skin="fabric"] .card-title, [data-skin="fabric"] .widget-title, [data-skin="fabric"] .post-list-title, [data-skin="fabric"] .post-title { color: var(--fb-ink); } [data-skin="fabric"] .widget-title { border-color: var(--fb-stitch); } /* ---------- 链接与高对比文字 ---------- */ [data-skin="fabric"] a { color: var(--fb-accent); } [data-skin="fabric"] a:hover { color: var(--fb-accent-strong); } [data-skin="fabric"] .text-inverse, [data-skin="fabric"] .navbar-brand, [data-skin="fabric"] .offcanvas-header a.text-inverse { filter: none; color: var(--fb-ink); } /* ---------- 按钮 / CTA：布标 + 缝线圆角矩形 ---------- */ [data-skin="fabric"] .btn:not(.btn-icon):not(.btn-close):not(.btn-social) { background-color: var(--fb-accent); border: 1px solid var(--fb-accent-strong); color: #fff6ea; border-radius: 12px; box-shadow: 0 8px 18px -12px var(--fb-shadow); transition: box-shadow 0.2s ease, transform 0.2s ease, background-color 0.2s ease, filter 0.2s ease; position: relative; } [data-skin="fabric"] .btn:not(.btn-icon):not(.btn-close):not(.btn-social)::after { content: ""; position: absolute; inset: 4px; border: 1px dashed rgba(255, 240, 220, 0.55); border-radius: 8px; pointer-events: none; } [data-skin="fabric"] .btn:not(.btn-icon):not(.btn-close):not(.btn-social):hover { background-color: var(--fb-accent-strong); box-shadow: 0 12px 26px -12px var(--fb-shadow); transform: translateY(-2px); filter: brightness(1.02); } [data-skin="fabric"] .btn:not(.btn-icon):not(.btn-close):not(.btn-social):active { transform: translateY(1px); box-shadow: 0 4px 10px -6px var(--fb-shadow); filter: brightness(0.96); } /* 浅色/次要按钮 */ [data-skin="fabric"] .btn-light, [data-skin="fabric"] .btn-outline-light { background-color: var(--fb-surface-2); border-color: var(--fb-stitch); color: var(--fb-ink); } [data-skin="fabric"] .btn-light:hover, [data-skin="fabric"] .btn-outline-light:hover { background-color: var(--fb-surface); color: var(--fb-accent-strong); border-color: var(--fb-stitch-strong); } /* ---------- 悬浮按钮（返回顶部等） ---------- */ [data-skin="fabric"] .float-btn { background-color: var(--fb-surface); border: 1px solid var(--fb-stitch); color: var(--fb-accent-strong); box-shadow: 0 8px 20px -12px var(--fb-shadow); } /* ---------- 表单输入 ---------- */ [data-skin="fabric"] input[type="text"], [data-skin="fabric"] input[type="email"], [data-skin="fabric"] input[type="password"], [data-skin="fabric"] input[type="search"], [data-skin="fabric"] input[type="url"], [data-skin="fabric"] textarea, [data-skin="fabric"] select { background-color: var(--fb-surface); border: 1px solid var(--fb-stitch); color: var(--fb-ink); border-radius: 10px; } [data-skin="fabric"] input:focus, [data-skin="fabric"] textarea:focus, [data-skin="fabric"] select:focus { border-color: var(--fb-accent); box-shadow: 0 0 0 3px rgba(176, 112, 79, 0.16); outline: none; } /* ---------- 分页 / 操作条 ---------- */ [data-skin="fabric"] .pagination-wrapper .page-numbers, [data-skin="fabric"] .post-navigation a, [data-skin="fabric"] .action-btn { background-color: var(--fb-surface); border-color: var(--fb-stitch); color: var(--fb-ink); } [data-skin="fabric"] .pagination-wrapper .page-numbers:hover, [data-skin="fabric"] .post-navigation a:hover, [data-skin="fabric"] .action-btn:hover { background-color: var(--fb-surface-2); color: var(--fb-accent-strong); border-color: var(--fb-stitch-strong); box-shadow: 0 6px 16px -10px var(--fb-shadow); } /* ---------- 页脚：深色布面 ---------- */ [data-skin="fabric"] footer { background-color: var(--fb-bg-deep); border-top: 1px dashed var(--fb-stitch-strong); color: var(--fb-ink-soft); } [data-skin="fabric"] footer .horizontal.dark { border-color: var(--fb-stitch); } [data-skin="fabric"] footer a, [data-skin="fabric"] footer .text-reset { color: var(--fb-accent-strong); } /* ---------- 织物质感皮肤下隐藏明暗切换，保持皮肤独立性 ---------- */ [data-skin="fabric"] .bd-theme, [data-skin="fabric"] .theme-lighting { display: none !important; } /* ---------- 平滑过渡 ---------- */ [data-skin="fabric"] .post-list, [data-skin="fabric"] .blog-single, [data-skin="fabric"] .card, [data-skin="fabric"] .widget, [data-skin="fabric"] .btn, [data-skin="fabric"] a { transition: box-shadow 0.22s ease, transform 0.22s ease, background-color 0.22s ease, color 0.22s ease, border-color 0.22s ease, filter 0.22s ease; } /* ---------- 移动端微调 ---------- */ @media (max-width: 991px) { [data-skin="fabric"] .kizumi_header .offcanvas-body { border-color: var(--fb-stitch); } [data-skin="fabric"] .kizumi_header .lighting { border-color: var(--fb-stitch); background-color: var(--fb-surface); } [data-skin="fabric"] .kizumi_header .lighting li.active { background-color: var(--fb-accent); color: #fff6ea; } }