/* ===================================================================== CCVAR CMS — 极简内容站样式系统 设计目标：简约 / 大气 / 编辑感 / 高可读性 / 高性能（零外部字体请求） 说明：本表同时供静态演示页与后续 Go html/template 复用。 ===================================================================== */ /* ---------- 设计令牌 ---------- */ :root { /* 中性色（暖纸张调） */ --bg: #fbfaf7; --surface: #ffffff; --ink: #1b1a17; --ink-soft: #3a3833; --muted: #76726a; --faint: #9c978d; --line: #e8e4db; --line-soft: #f0ede5; /* 强调色（克制的赭石/陶土，编辑气质） */ --accent: #9a3b2f; --accent-soft: #b9543f; --accent-wash: #f6eee9; --code-bg: #1c1a17; /* hero 图形内嵌代码块底色 */ /* 排版尺度 */ --serif: Georgia, "Times New Roman", "Songti SC", "STSong", "Noto Serif CJK SC", "Source Han Serif SC", serif; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif; --mono: "SF Mono", "JetBrains Mono", "Menlo", "Consolas", monospace; /* 宽度 */ --w-read: 720px; /* 正文阅读宽度 */ --w-wide: 1080px; /* 页面外框宽度 */ /* 其它 */ --radius: 10px; --shadow: 0 1px 2px rgba(27,26,23,.04), 0 8px 24px rgba(27,26,23,.05); --speed: .18s; } @media (prefers-color-scheme: dark) { :root { --bg: #131210; --surface: #1a1815; --ink: #f0ede6; --ink-soft: #d8d4cb; --muted: #a39e93; --faint: #7c776d; --line: #2c2924; --line-soft: #221f1b; --accent: #e0816e; --accent-soft: #ec9582; --accent-wash: #251b17; --code-bg: #0d0c0a; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35); } } /* ---------- 重置 ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.7; letter-spacing: .01em; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: var(--accent); text-decoration: none; transition: color var(--speed); } a:hover { color: var(--accent-soft); } h1, h2, h3, h4 { font-family: var(--serif); color: var(--ink); font-weight: 600; line-height: 1.25; letter-spacing: 0; } hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; } ::selection { background: var(--accent-wash); color: var(--accent); } /* ---------- 布局容器 ---------- */ .wrap { width: 100%; max-width: var(--w-wide); margin: 0 auto; padding: 0 24px; } .read { max-width: var(--w-read); margin: 0 auto; } .muted { color: var(--muted); } .center { text-align: center; } /* ---------- 顶部导航 ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 86%, transparent); -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--line); } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; } .brand { display: flex; align-items: baseline; gap: .5rem; font-family: var(--serif); font-size: 1.3rem; font-weight: 600; color: var(--ink); letter-spacing: .02em; } .brand .dot { color: var(--accent); } .brand small { font-family: var(--sans); font-size: .68rem; letter-spacing: .28em; text-transform: uppercase; color: var(--faint); font-weight: 600; } .nav { display: flex; align-items: center; gap: 1.6rem; } .nav a { color: var(--ink-soft); font-size: .94rem; font-weight: 500; position: relative; } .nav a:hover { color: var(--accent); } .nav a[aria-current="page"] { color: var(--accent); } .nav a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -22px; height: 2px; background: var(--accent); } .nav .search-ico { display: inline-flex; opacity: .65; } .nav .search-ico:hover { opacity: 1; } .menu-toggle { display: none; } /* ---------- 页脚 ---------- */ .site-footer { border-top: 1px solid var(--line); margin-top: 5rem; padding: 3rem 0; background: var(--surface); } .site-footer .wrap { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: space-between; align-items: flex-start; } .site-footer .brand { font-size: 1.1rem; margin-bottom: .4rem; } .site-footer .f-col h4 { font-family: var(--sans); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); margin: 0 0 .8rem; } .site-footer .f-col a { display: block; color: var(--ink-soft); font-size: .92rem; padding: .22rem 0; } .site-footer .f-col a:hover { color: var(--accent); } .site-footer .copy { color: var(--faint); font-size: .85rem; margin-top: .4rem; } .f-cols { display: flex; gap: 3.5rem; flex-wrap: wrap; } /* ---------- 首页 Hero ---------- */ .hero { padding: 4.5rem 0 3.5rem; border-bottom: 1px solid var(--line); } .hero-inner { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 3rem; align-items: center; } .hero .eyebrow { font-size: .76rem; letter-spacing: .26em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: 1.1rem; } .hero h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); margin: 0 0 1.1rem; letter-spacing: -.01em; } .hero-sub { font-size: 1.18rem; color: var(--muted); max-width: 42ch; margin: 0; } /* Hero 科技感图形 */ .hero-visual { position: relative; } .hero-svg { width: 100%; height: auto; max-width: 520px; margin-inline: auto; display: block; overflow: visible; } .hero-img { width: 100%; height: auto; max-width: 520px; margin-inline: auto; display: block; border-radius: var(--radius); object-fit: contain; } .hero-embed { width: 100%; max-width: 520px; margin-inline: auto; } .hero-embed svg, .hero-embed img { width: 100%; height: auto; display: block; } .hero-svg .hv-grid { fill: var(--ink); opacity: .05; } .hero-svg .hv-orbit { fill: none; stroke: var(--line); stroke-width: 1.4; stroke-dasharray: 2 7; stroke-linecap: round; opacity: .9; } .hero-svg .hv-node { fill: var(--accent); } .hero-svg .hv-ring { fill: none; stroke: var(--accent); stroke-width: 2; transform-origin: 240px 80px; } .hero-svg .hv-flow { fill: var(--accent); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 70%, transparent)); offset-path: path('M55,220 A185,140 0 1,1 425,220 A185,140 0 1,1 55,220'); offset-distance: 0%; } .hero-svg .hv-panel { fill: var(--surface); stroke: var(--line); stroke-width: 1.5; } .hero-svg .hv-panel.back { opacity: .5; } .hero-svg .hv-panel.mid { opacity: .8; } .hero-svg .hv-card { fill: var(--surface); stroke: var(--line); stroke-width: 1.5; } .hero-svg .hv-bar { stroke: var(--line); stroke-width: 1.5; } .hero-svg .hv-tdot { fill: var(--faint); } .hero-svg .hv-tdot.accent { fill: var(--accent); } .hero-svg .hv-line { fill: var(--line); } .hero-svg .hv-line.accent { fill: var(--accent); } .hero-svg .hv-code { fill: var(--code-bg); } .hero-svg .hv-codeline { opacity: .55; } .hero-svg .hv-codeline.a { fill: var(--accent); opacity: .9; } .hero-svg .hv-codeline.b { fill: #fff; opacity: .22; } .hero-svg .hv-codeline.c { fill: #fff; opacity: .32; } @keyframes hvFlow { to { offset-distance: 100%; } } @keyframes hvPing { 0% { transform: scale(1); opacity: .9; } 70%,100% { transform: scale(3.6); opacity: 0; } } .hero-svg .hv-flow { animation: hvFlow 7s linear infinite; } .hero-svg .hv-ring { animation: hvPing 3.2s ease-out infinite; } @media (prefers-reduced-motion: reduce) { .hero-svg .hv-flow { animation: none; offset-distance: 32%; } .hero-svg .hv-ring { animation: none; opacity: .35; } } /* ---------- 默认动画（动画二）：SQLite 数据 → 单文件二进制 → 多语种页面 ---------- */ .hero-svg .hv2-grid { fill: var(--ink); opacity: .05; } .hero-svg .hv2-glow { fill: var(--accent); filter: blur(20px); opacity: .5; transform-origin: 240px 206px; animation: hv2Glow 4.6s ease-in-out infinite; } .hero-svg .hv2-pulse { fill: none; stroke: var(--accent); stroke-width: 1.5; opacity: 0; transform-origin: 240px 206px; animation: hv2Pulse 3.6s ease-out infinite; } .hero-svg .hv2-pulse.p2 { animation-delay: 1.8s; } .hero-svg .hv2-orbit { fill: none; stroke: var(--line); stroke-width: 1.4; stroke-dasharray: 1.5 7; stroke-linecap: round; opacity: .85; } .hero-svg .hv2-orbiter { transform-origin: 240px 206px; animation: hv2Spin 9s linear infinite; } .hero-svg .hv2-orbnode { fill: var(--accent); } .hero-svg .hv2-wire { fill: none; stroke: var(--line); stroke-width: 1.6; stroke-dasharray: 2 6; stroke-linecap: round; } .hero-svg .hv2-pkt { fill: var(--accent); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 70%, transparent)); } .hero-svg .hv2-db ellipse, .hero-svg .hv2-db path { fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linejoin: round; } .hero-svg .hv2-db .hv2-db-top { fill: color-mix(in srgb, var(--accent) 14%, var(--surface)); } .hero-svg .hv2-globe line, .hero-svg .hv2-globe ellipse, .hero-svg .hv2-globe path { fill: none; stroke: var(--muted); stroke-width: 1.4; } .hero-svg .hv2-globe .hv2-globe-face { fill: var(--surface); stroke: var(--muted); stroke-width: 1.6; } .hero-svg .hv2-win { fill: var(--surface); stroke: var(--line); stroke-width: 1.6; } .hero-svg .hv2-win-bar { stroke: var(--line); stroke-width: 1.4; } .hero-svg .hv2-win-dot { fill: var(--faint); } .hero-svg .hv2-win-dot.accent { fill: var(--accent); } .hero-svg .hv2-win-line { fill: var(--line); } .hero-svg .hv2-win-line.accent { fill: var(--accent); } .hero-svg .hv2-pins line { stroke: var(--accent); stroke-width: 2; stroke-linecap: round; opacity: .6; } .hero-svg .hv2-chip { fill: var(--surface); stroke: var(--accent); stroke-width: 2; } .hero-svg .hv2-chip-glow { fill: none; stroke: var(--accent); stroke-width: 2.4; opacity: 0; animation: hv2Chip 3.6s ease-in-out infinite; } .hero-svg .hv2-cl { fill: var(--line); } .hero-svg .hv2-cl.accent { fill: var(--accent); } .hero-svg .hv2-cl.dim { fill: var(--faint); } .hero-svg .hv2-cursor { fill: var(--accent); animation: hv2Blink 1.1s step-end infinite; } @keyframes hv2Glow { 0%, 100% { opacity: .42; } 50% { opacity: .9; } } @keyframes hv2Pulse { 0% { opacity: .5; transform: scale(.5); } 100% { opacity: 0; transform: scale(1.9); } } @keyframes hv2Spin { to { transform: rotate(360deg); } } @keyframes hv2Chip { 0%, 100% { opacity: 0; } 50% { opacity: .5; } } @keyframes hv2Blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .hero-svg .hv2-glow, .hero-svg .hv2-pulse, .hero-svg .hv2-orbiter, .hero-svg .hv2-chip-glow, .hero-svg .hv2-cursor { animation: none; } .hero-svg .hv2-glow { opacity: .5; } .hero-svg .hv2-pulse { opacity: .22; } .hero-svg .hv2-pkt { display: none; } } /* ---------- 区块标题 ---------- */ .section-head { display: flex; align-items: baseline; justify-content: space-between; margin: 3rem 0 1.6rem; } .section-head h2 { font-size: 1.05rem; font-family: var(--sans); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); margin: 0; } .section-head a { font-size: .9rem; } /* ---------- 精选文章（大卡） ---------- */ .feature { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2.5rem; align-items: center; padding: 2.5rem 0; } .feature.no-cover { grid-template-columns: 1fr; } .feature-more { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 1rem; } .card-excerpt { margin: .5rem 0 0; font-size: .92rem; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } @media (max-width: 860px) { .feature-more { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .feature-more { grid-template-columns: 1fr; } } .feature .cover { aspect-ratio: 16/10; border-radius: var(--radius); background: linear-gradient(135deg, #d9c7bd, #b79b8c 55%, #8d6f63); box-shadow: var(--shadow); position: relative; overflow: hidden; } .feature .cover::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 80% at 20% 10%, rgba(255,255,255,.35), transparent 60%); } .feature .meta { margin-bottom: .9rem; } .feature h3 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin: 0 0 .9rem; } .feature h3 a { color: var(--ink); } .feature h3 a:hover { color: var(--accent); } .feature p { color: var(--muted); margin: 0 0 1.2rem; font-size: 1.02rem; } /* ---------- 文章列表 ---------- */ .post-list { display: flex; flex-direction: column; } .post-item { display: grid; grid-template-columns: 88px 1fr; gap: 1.6rem; padding: 1.8rem 0; border-top: 1px solid var(--line); transition: background var(--speed); } .post-item:hover { background: linear-gradient(90deg, transparent, var(--line-soft) 50%, transparent); } .post-item .num { font-family: var(--serif); font-size: 1.1rem; color: var(--faint); padding-top: .2rem; } .post-item h3 { font-size: 1.35rem; margin: .2rem 0 .5rem; } .post-item h3 a { color: var(--ink); } .post-item h3 a:hover { color: var(--accent); } .post-item p { color: var(--muted); margin: 0 0 .7rem; font-size: .98rem; } /* ---------- 元信息行 ---------- */ .meta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; font-size: .82rem; color: var(--faint); } .meta time, .meta .read-time { white-space: nowrap; } .meta .sep { opacity: .5; } .tag { display: inline-block; font-size: .76rem; font-weight: 600; letter-spacing: .03em; color: var(--accent); background: var(--accent-wash); padding: .18rem .6rem; border-radius: 100px; line-height: 1.5; } .tag:hover { background: var(--accent); color: #fff; } /* ---------- 按钮 ---------- */ .btn { display: inline-flex; align-items: center; gap: .5rem; font-size: .92rem; font-weight: 600; padding: .6rem 1.2rem; border-radius: 8px; border: 1px solid var(--line); color: var(--ink); background: var(--surface); transition: all var(--speed); } .btn:hover { border-color: var(--accent); color: var(--accent); } .btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); } .btn-primary:hover { background: var(--accent-soft); border-color: var(--accent-soft); color: #fff; } /* 禁用态（脏检查：无改动时保存置灰；防重复点击） */ .btn:disabled, .btn[disabled] { opacity: .42; cursor: default; pointer-events: none; } .btn-primary:disabled, .btn-primary[disabled] { background: var(--accent); border-color: var(--accent); color: #fff; } .arrow { transition: transform var(--speed); } .btn:hover .arrow, a:hover .arrow { transform: translateX(3px); } /* ---------- 面包屑 ---------- */ .breadcrumb { font-size: .82rem; color: var(--faint); padding: 1.8rem 0 0; } .breadcrumb a { color: var(--muted); } .breadcrumb a:hover { color: var(--accent); } .breadcrumb .sep { margin: 0 .5rem; opacity: .5; } /* ---------- 文章详情 ---------- */ .article-head { padding: 1.6rem 0 2rem; border-bottom: 1px solid var(--line); margin-bottom: 2.5rem; } .article-head .kicker { color: var(--accent); font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 1rem; } .article-head h1 { font-size: clamp(2rem, 4.5vw, 3rem); margin: 0 0 1.2rem; letter-spacing: -.01em; } .article-head .lead { font-size: 1.18rem; color: var(--muted); margin: 0 0 1.5rem; } .byline { display: flex; align-items: center; gap: .8rem; } .avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-soft)); display: grid; place-items: center; color: #fff; font-weight: 600; font-family: var(--serif); } .byline .who { font-size: .92rem; color: var(--ink-soft); font-weight: 600; } .byline .when { font-size: .8rem; color: var(--faint); } .article-cover { aspect-ratio: 21/9; border-radius: var(--radius); margin-bottom: 2.5rem; background: linear-gradient(135deg, #cbb6a6, #9c7b6c 60%, #6f5348); box-shadow: var(--shadow); } /* ---------- 正文排版（prose） ---------- */ .prose { font-size: 1.08rem; line-height: 1.85; color: var(--ink-soft); } .prose > * { margin: 0; } .prose > * + * { margin-top: 1.4rem; } .prose h2 { font-size: 1.6rem; margin: 2.8rem 0 1rem; padding-top: .4rem; } .prose h3 { font-size: 1.25rem; margin: 2.2rem 0 .8rem; } .prose a { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; } .prose a:hover { text-decoration-color: var(--accent); } .prose strong { color: var(--ink); font-weight: 650; } .prose ul, .prose ol { margin: 1.2rem 0; padding-left: 1.4rem; } .prose li { margin: .5rem 0; } .prose li::marker { color: var(--accent); } .prose blockquote { margin: 2rem 0; padding: .4rem 0 .4rem 1.6rem; border-left: 3px solid var(--accent); color: var(--muted); font-family: var(--serif); font-style: italic; font-size: 1.15rem; } .prose code { font-family: var(--mono); font-size: .88em; background: var(--line-soft); padding: .15em .45em; border-radius: 5px; color: var(--accent); } .prose pre { background: #1c1a17; color: #ece7df; padding: 1.2rem 1.4rem; border-radius: var(--radius); overflow-x: auto; font-size: .9rem; line-height: 1.6; margin: 1.8rem 0; } .prose pre code { background: none; padding: 0; color: inherit; font-size: inherit; } .prose figure { margin: 2rem 0; } .prose figcaption { font-size: .82rem; color: var(--faint); text-align: center; margin-top: .6rem; } .prose img { border-radius: var(--radius); } .prose table { width: 100%; border-collapse: collapse; margin: 1.8rem 0; font-size: .95rem; } .prose th, .prose td { text-align: left; padding: .7rem 1rem; border-bottom: 1px solid var(--line); } .prose th { color: var(--ink); font-weight: 600; border-bottom: 2px solid var(--line); } /* 文章底部：标签 + 分享 */ .article-foot { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; } .tag-row { display: flex; flex-wrap: wrap; gap: .5rem; } /* 上一篇/下一篇 */ .pager { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2.5rem; } .pager a { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.3rem; color: var(--ink); transition: border-color var(--speed); } .pager a:hover { border-color: var(--accent); } .pager .dir { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin-bottom: .35rem; } .pager .t { font-weight: 600; font-size: .98rem; } .pager .next { text-align: right; } /* 相关阅读 */ .related { margin-top: 4rem; } .related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } /* 链接（资源 / 产品展示）卡片网格 */ .link-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.4rem; margin: 1.6rem 0; } .link-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); color: var(--ink); transition: border-color var(--speed), box-shadow var(--speed), transform var(--speed); } .link-card:hover { border-color: var(--accent); box-shadow: 0 12px 32px rgba(0,0,0,.08); transform: translateY(-3px); } .lc-cover { aspect-ratio: 16 / 9; overflow: hidden; background: var(--line-soft); display: grid; place-items: center; } .lc-cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .lc-mono { width: 100%; height: 100%; display: grid; place-items: center; font-family: var(--serif); font-size: 2.6rem; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 50%, #1a1a1a)); } .lc-body { flex: 1; padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .5rem; } .lc-title { font-size: 1.05rem; margin: 0; display: flex; align-items: center; justify-content: space-between; gap: .5rem; line-height: 1.4; } .lc-arrow { color: var(--accent); opacity: 0; transform: translateX(-4px); transition: opacity var(--speed), transform var(--speed); } .link-card:hover .lc-arrow { opacity: 1; transform: none; } .lc-intro { flex: 1; margin: 0; font-size: .9rem; line-height: 1.6; color: var(--ink-soft); } .lc-foot { margin-top: .15rem; } /* 链接详情：访问按钮行 + 网址 */ .link-visit-row { display: flex; align-items: center; flex-wrap: wrap; gap: .7rem 1rem; margin-top: 1rem; } .link-url { font-size: .85rem; word-break: break-all; } .ext-url { color: var(--ink-soft); } .ext-url:hover { color: var(--accent); } @media (max-width: 480px) { .link-grid { grid-template-columns: 1fr; } } .card { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; background: var(--surface); transition: transform var(--speed), border-color var(--speed); } .card:hover { transform: translateY(-3px); border-color: var(--accent); } .card .meta { margin-bottom: .6rem; } .card h4 { font-size: 1.08rem; margin: 0; } .card h4 a { color: var(--ink); } .card h4 a:hover { color: var(--accent); } /* ---------- 分页器 ---------- */ .pagination { display: flex; gap: .4rem; justify-content: center; margin: 3rem 0 0; } .pagination a, .pagination span { min-width: 40px; height: 40px; display: grid; place-items: center; border-radius: 8px; font-size: .92rem; border: 1px solid var(--line); color: var(--ink-soft); } .pagination a:hover { border-color: var(--accent); color: var(--accent); } .pagination .cur { background: var(--accent); color: #fff; border-color: var(--accent); } /* ---------- 分类/页面 头部 ---------- */ .page-head { padding: 4rem 0 2.5rem; border-bottom: 1px solid var(--line); } .page-head .eyebrow { font-size: .76rem; letter-spacing: .24em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: .9rem; } .page-head h1 { font-size: clamp(2rem, 4vw, 2.8rem); margin: 0 0 .8rem; } .page-head p { color: var(--muted); font-size: 1.1rem; margin: 0; max-width: 52ch; } /* 分类导航药丸 */ .cat-nav { display: flex; flex-wrap: wrap; gap: .6rem; margin: 2rem 0; } .cat-nav a { padding: .45rem 1rem; border-radius: 100px; border: 1px solid var(--line); font-size: .9rem; color: var(--ink-soft); } .cat-nav a:hover { border-color: var(--accent); color: var(--accent); } .cat-nav a.active { background: var(--ink); color: var(--bg); border-color: var(--ink); } /* ---------- 搜索框 ---------- */ .searchbox { display: flex; gap: .6rem; margin: 1.5rem 0; max-width: 520px; } .searchbox input { flex: 1; padding: .7rem 1rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font-size: 1rem; font-family: inherit; } .searchbox input:focus { outline: none; border-color: var(--accent); } /* ---------- 404 ---------- */ .notfound { text-align: center; padding: 7rem 0; } .notfound .code { font-family: var(--serif); font-size: clamp(5rem, 18vw, 11rem); line-height: 1; color: var(--accent); opacity: .25; } .notfound h1 { font-size: 2rem; margin: -1rem 0 1rem; } .notfound p { color: var(--muted); margin: 0 0 2rem; } /* ---------- 通用网格 ---------- */ .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } /* ---------- 响应式 ---------- */ @media (max-width: 860px) { .feature { grid-template-columns: 1fr; } .feature .cover { order: -1; } .related-grid, .grid-3 { grid-template-columns: 1fr 1fr; } } @media (max-width: 620px) { body { font-size: 16px; } .nav { gap: 1rem; } .nav a:not(.search-ico) { display: none; } .menu-toggle { display: inline-flex; } .hero { padding: 3rem 0 2.2rem; } .post-item { grid-template-columns: 1fr; gap: .5rem; } .post-item .num { display: none; } .related-grid, .grid-3 { grid-template-columns: 1fr; } .pager { grid-template-columns: 1fr; } .f-cols { gap: 2rem; } } /* ---------- 打印 ---------- */ @media print { .site-header, .site-footer, .pager, .related, .article-foot { display: none; } body { background: #fff; color: #000; } } /* ===================================================================== 后台管理（Admin） ===================================================================== */ body.admin { background: var(--line-soft); } .admin-top { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; } .admin-top .wrap { display: flex; align-items: center; justify-content: space-between; height: 60px; } .admin-nav { display: flex; align-items: center; gap: .25rem; } .admin-nav a { display: inline-flex; align-items: center; gap: .32rem; color: var(--ink-soft); font-size: .9rem; padding: .4rem .7rem; border-radius: 7px; } .admin-nav a svg { width: 14px; height: 14px; flex: none; opacity: .7; } .admin-nav a:hover { color: var(--accent); background: var(--line-soft); } .admin-nav a:hover svg { opacity: 1; } .admin-nav a.ext { color: var(--muted); } .admin-nav-sep { width: 1px; height: 18px; background: var(--line); margin: 0 .45rem; flex: none; } .admin-nav form { margin: 0; } .admin-nav .btn-logout { padding: .24rem .62rem; margin-left: .25rem; border: 1px solid var(--line); border-radius: 7px; background: none; color: var(--muted); font: inherit; font-size: .8rem; line-height: 1.4; cursor: pointer; } .admin-nav .btn-logout:hover { border-color: var(--accent); color: var(--accent); } .admin-burger { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink-soft); cursor: pointer; } .admin-burger:hover { border-color: var(--accent); color: var(--accent); } .admin-burger svg { display: block; } .linkbtn { background: none; border: 0; color: var(--muted); font: inherit; font-size: .92rem; cursor: pointer; padding: 0; } .linkbtn:hover { color: var(--accent); } .admin-main { padding: 2.5rem 0 5rem; } .flash { background: var(--accent-wash); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); border-radius: 8px; padding: .8rem 1.1rem; margin-bottom: 1.5rem; font-size: .92rem; } .form-err { background: #fdecea; color: #b3261e; border-radius: 8px; padding: .8rem 1.1rem; margin-bottom: 1.2rem; font-size: .92rem; } @media (prefers-color-scheme: dark) { .form-err { background: #3a1d1a; color: #f0a9a0; } } .admin-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.8rem; } .admin-head h1 { font-size: 1.7rem; margin: 0; } .admin-head .muted { font-size: .9rem; } /* 顶部操作按钮更紧凑协调 */ .admin-head .btn { padding: .42rem .85rem; font-size: .85rem; border-radius: 7px; } .admin-head .btn svg { width: 14px; height: 14px; } /* 默认密码提示横幅 */ .pw-warn { display: flex; align-items: center; gap: .7rem; margin-bottom: 1.5rem; padding: .65rem .95rem; border: 1px solid #ecc56a; background: #fdf6e3; color: #7a5b16; border-radius: 10px; font-size: .9rem; } .pw-warn-ico { flex: none; color: #c8860a; } .pw-warn-text { flex: 1; } .pw-warn-text strong { color: #5e4612; } .pw-warn-link { flex: none; color: #b3261e; font-weight: 600; white-space: nowrap; } .pw-warn-link:hover { text-decoration: underline; } .pw-warn-close { flex: none; border: 0; background: none; color: #b08a3a; cursor: pointer; font-size: .95rem; line-height: 1; padding: .25rem .35rem; border-radius: 5px; } .pw-warn-close:hover { background: rgba(0,0,0,.06); color: #7a5b16; } /* 编辑页：顶部操作栏（查看 / 取消 / 保存）滚动时吸顶 */ .edit-head { position: sticky; top: 60px; z-index: 30; align-items: center; background: var(--line-soft); padding: .85rem 0; margin-bottom: 1.4rem; border-bottom: 1px solid var(--line); } .edit-head h1 { font-size: 1.45rem; } .edit-actions { display: flex; align-items: center; gap: .5rem; flex: none; } .edit-actions .btn { white-space: nowrap; } .edit-actions .act-view { margin-right: .1rem; } /* 表单控件 */ .field { margin-bottom: 1.1rem; } .field label { display: block; font-size: .82rem; font-weight: 600; color: var(--ink-soft); margin-bottom: .4rem; } .field input, .field select, .field textarea { width: 100%; padding: .6rem .8rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font-family: inherit; font-size: .95rem; line-height: 1.45; } .field textarea { resize: vertical; line-height: 1.7; } #content { font-family: var(--mono); font-size: .9rem; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); } .field .hint { display: block; font-size: .76rem; color: var(--faint); margin-top: .35rem; } /* 登录卡片 */ .login-card { max-width: 380px; margin: 4rem auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 2.2rem; box-shadow: var(--shadow); } .login-card h1 { font-size: 1.5rem; margin: 0 0 .4rem; } .login-card .muted { font-size: .85rem; margin: 0 0 1.5rem; } .login-card code { font-family: var(--mono); font-size: .85em; background: var(--line-soft); padding: .1em .4em; border-radius: 4px; color: var(--accent); } /* 文章列表表格 */ .admin-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .admin-table th { text-align: left; font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); padding: .9rem 1.1rem; border-bottom: 1px solid var(--line); } .admin-table td { padding: 1rem 1.1rem; border-bottom: 1px solid var(--line-soft); font-size: .92rem; vertical-align: middle; } .admin-table tr:last-child td { border-bottom: 0; } .admin-table .t { font-weight: 600; color: var(--ink); font-family: var(--serif); } .admin-table .t:hover { color: var(--accent); } .admin-table .slug { font-size: .76rem; color: var(--faint); font-family: var(--mono); margin-top: .2rem; } .title-cell { display: flex; align-items: flex-start; gap: .55rem; } .pin-form { margin: 0; flex: none; } .pin { background: none; border: 0; cursor: pointer; padding: 2px 0; color: var(--faint); opacity: 0; transition: opacity .15s, color .15s; line-height: 0; } .pin svg { fill: none; display: block; } .admin-table tr:hover .pin { opacity: .5; } .pin:hover { opacity: 1; color: var(--accent); } .pin.on { opacity: 1; color: var(--accent); } .pin.on svg { fill: currentColor; } .admin-table .right { text-align: right; } .badge { display: inline-block; font-size: .74rem; font-weight: 600; padding: .15rem .6rem; border-radius: 100px; } .badge.pub { background: #e6f4ea; color: #137333; } .badge.draft { background: var(--line-soft); color: var(--muted); } .badge.sched { background: #fff4e5; color: #9a6700; } .schedule-field { margin-top: .6rem; } @media (prefers-color-scheme: dark) { .badge.pub { background: #16301f; color: #7ed99f; } } .actions { white-space: nowrap; } .actions a, .actions form { display: inline-block; margin-left: .9rem; } .actions a { font-size: .88rem; } .actions form { margin: 0 0 0 .9rem; } .actions .del { background: none; border: 0; color: var(--faint); font: inherit; font-size: .88rem; cursor: pointer; padding: 0; } .actions .del:hover { color: #b3261e; } /* 操作列图标按钮（查看 / 删除） */ .actions .act-ico { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; padding: .25rem; border-radius: 6px; color: var(--muted); } .actions button.act-ico { border: 0; background: none; font: inherit; cursor: pointer; } .actions .act-ico svg { display: block; } .ext-arrow { font-weight: 500; line-height: 1; } .actions .act-ico .ext-arrow { font-size: 1.15rem; } .actions a.act-ico:hover, .actions button.act-ico:hover { color: var(--accent); background: var(--line-soft); } .actions .del.act-ico { color: var(--faint); } .actions .del.act-ico:hover { color: #b3261e; background: rgba(179,38,30,.08); } .actions .action-icons { display: inline-flex; align-items: center; justify-content: flex-end; gap: .42rem; } .actions .action-icons form { margin: 0; } /* 编辑器双栏：form 用 display:contents 摊平成网格项 —— 标题/正文/SEO/跨语种在左列叠放， 右列为粘性侧栏（状态/封面/分类…），这样 SEO 与互译在「正文下方」而非独占整行。 */ .edit-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.4rem 2rem; align-items: start; } .edit-grid > .edit-form { display: contents; } .edit-grid .form-main { grid-column: 1; min-width: 0; } .edit-grid .form-side { grid-column: 2; grid-row: 1 / span 3; } .edit-grid .seo-box { grid-column: 1; } .edit-grid .trans-box { grid-column: 1; margin-top: 0; } .form-side { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; position: sticky; top: 150px; } .seo-box { margin: 0; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.4rem 1.4rem; background: var(--surface); } .seo-box legend { font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); padding: 0 .5rem; } @media (max-width: 820px) { .edit-grid { grid-template-columns: 1fr; } .edit-grid .form-side, .edit-grid .seo-box, .edit-grid .trans-box { grid-column: 1; } .edit-grid .form-side { grid-row: auto; position: static; } } /* 设置页：双列与主题选择卡 */ .form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.2rem; } @media (max-width: 560px) { .form-2col { grid-template-columns: 1fr; } } .theme-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } @media (max-width: 680px) { .theme-picker { grid-template-columns: 1fr; } } .theme-card { position: relative; display: block; border: 1.5px solid var(--line); border-radius: 10px; padding: .8rem; cursor: pointer; transition: border-color .15s, box-shadow .15s; } .theme-card:hover { border-color: var(--accent); } .theme-card input { position: absolute; opacity: 0; width: 0; height: 0; } .theme-card.sel, .theme-card:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); } .tc-prev { display: block; position: relative; aspect-ratio: 16 / 10; border-radius: 8px; padding: 0; margin-bottom: .8rem; overflow: hidden; border: 1px solid rgba(0,0,0,.08); background: var(--line-soft); } .tc-prev iframe { position: absolute; inset: 0 auto auto 0; width: 560%; height: 560%; border: 0; transform: scale(.18); transform-origin: 0 0; pointer-events: none; background: #fff; opacity: 0; transition: opacity .22s ease; } .tc-live::before { content: "加载预览…"; position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; color: var(--muted); font-size: .78rem; font-weight: 600; background: linear-gradient(135deg, var(--line-soft), var(--surface)); } .tc-live::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(105deg, transparent 0 36%, rgba(255,255,255,.72) 47%, transparent 58%); transform: translateX(-100%); animation: previewShimmer 1.25s ease-in-out infinite; } .tc-live.is-loaded iframe { opacity: 1; } .tc-live.is-loaded::before, .tc-live.is-loaded::after { opacity: 0; pointer-events: none; } .tc-live.is-error::before { content: "预览加载失败"; color: var(--accent); } .tc-live.is-error::after { display: none; } @keyframes previewShimmer { to { transform: translateX(100%); } } @media (prefers-reduced-motion: reduce) { .tc-live::after { animation: none; } .tc-prev iframe { transition: none; } } .tc-prev i { display: block; border-radius: 3px; flex: 1; } .tc-name { display: block; font-weight: 600; font-size: .95rem; color: var(--ink); } .tc-desc { display: block; font-size: .8rem; color: var(--muted); margin-top: .25rem; line-height: 1.5; } .tc-editorial { background: #fbfaf7; } .tc-editorial .b1 { background: #9a3b2f; flex: 0 0 32%; } .tc-editorial .b2, .tc-editorial .b3 { background: #e2ddd2; } .tc-magazine { background: #fff; } .tc-magazine i { background: #c7d4ff; } .tc-magazine .b1 { background: #1f5fff; } .tc-terminal { background: #0d1117; } .tc-terminal .b1 { background: #3fb950; flex: 0 0 26%; } .tc-terminal .b2 { background: #1f6f3f; } .tc-terminal .b3 { background: #26313c; } /* 设置页：左侧菜单 + 分区表单 */ .settings-shell { display: grid; grid-template-columns: 190px 1fr; gap: 2rem; align-items: start; } .settings-menu { display: flex; flex-direction: column; gap: .15rem; position: sticky; top: 80px; } .settings-menu a { display: flex; align-items: center; gap: .6rem; padding: .6rem .8rem; border-radius: 8px; color: var(--ink-soft); font-size: .92rem; } .settings-menu a svg { width: 17px; height: 17px; flex: none; opacity: .6; } .settings-menu a:hover { background: var(--line-soft); color: var(--accent); } .settings-menu a:hover svg { opacity: .9; } .settings-menu a.active { background: var(--accent-wash); color: var(--accent); font-weight: 600; } .settings-menu a.active svg { opacity: 1; } .settings-body { max-width: 640px; min-width: 0; } /* 文案/外观分区里的语义分组 */ .field-group { margin: 0 0 1.5rem; padding: 0 0 1.3rem; border-bottom: 1px solid var(--line-soft); } .field-group:last-of-type { border-bottom: none; padding-bottom: 0; margin-bottom: 0; } .group-head { font-size: .76rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin: 0 0 .9rem; } .hero-visual-set .uploader { max-width: 340px; } .hero-visual-set textarea { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .82rem; line-height: 1.5; } .api-base { padding: .75rem .9rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); margin-bottom: .8rem; overflow-x: auto; } .api-base code, .api-secret input { font-family: var(--mono); } .api-secret { margin: 0 0 1.2rem; padding: .85rem; border: 1px solid #ecc56a; border-radius: 8px; background: #fdf6e3; } .api-secret strong { display: block; margin-bottom: .5rem; color: #5e4612; } .api-secret input { width: 100%; padding: .6rem .75rem; border: 1px solid #e0bf67; border-radius: 7px; background: #fffdf6; color: #372a10; font-size: .88rem; } .secret-copy { display: grid; grid-template-columns: minmax(0, 1fr) 38px; gap: .45rem; align-items: center; } .secret-copy .icon-btn { width: 38px; height: 38px; border: 1px solid #e0bf67; border-radius: 7px; background: #fffdf6; color: #7b5b16; display: grid; place-items: center; cursor: pointer; } .secret-copy .icon-btn:hover { border-color: var(--accent); color: var(--accent); } .secret-copy .icon-btn svg { width: 18px; height: 18px; } .secret-actions { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .65rem; } .secret-actions form { margin: 0; } .api-secret label { display: block; margin: .85rem 0 .4rem; color: #5e4612; font-size: .82rem; font-weight: 700; } .api-secret textarea { width: 100%; padding: .7rem .8rem; border: 1px solid #e0bf67; border-radius: 7px; background: #fffdf6; color: #372a10; font-family: var(--mono); font-size: .78rem; line-height: 1.55; resize: vertical; } .api-secret > .btn { margin-top: .75rem; } .cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-bottom: 1rem; } .cap-card { border: 1px solid var(--line); border-radius: 8px; padding: .9rem; background: var(--surface); } .cap-card strong { display: block; color: var(--ink); font-size: .96rem; margin-bottom: .35rem; } .cap-card p { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.55; } .cap-title, .help-title, .group-head.with-icon { display: flex; align-items: center; gap: .55rem; } .cap-title { margin-bottom: .55rem; } .cap-title strong, .automation-help .help-title strong { margin: 0; } .cap-icon, .kit-icon { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--accent); background: color-mix(in srgb, var(--accent-wash) 78%, var(--surface)); } .cap-icon svg, .kit-icon svg { width: 16px; height: 16px; } .group-head.with-icon { gap: .4rem; } .group-head.with-icon > svg { flex: none; width: 15px; height: 15px; color: var(--accent); opacity: .85; } .automation-note { margin: -.2rem 0 .85rem; font-size: .85rem; } .key-warning { display: flex; align-items: flex-start; gap: .55rem; margin: -.15rem 0 .85rem; padding: .72rem .85rem; border: 1px solid #ecc56a; border-radius: 8px; background: #fff7df; color: #6d4c08; font-size: .84rem; line-height: 1.55; } .key-warning svg { flex: none; width: 17px; height: 17px; margin-top: .08rem; color: #a66b00; } .automation-help { margin: 0 0 .85rem; padding: .85rem .95rem; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--surface) 78%, var(--accent-wash)); } .automation-help strong { display: block; color: var(--ink); font-size: .92rem; margin-bottom: .45rem; } .automation-help .help-title { margin-bottom: .55rem; } .automation-help ol { margin: 0; padding-left: 1.15rem; color: var(--ink-soft); font-size: .84rem; line-height: 1.65; } .automation-help li + li { margin-top: .2rem; } .automation-help p { margin: .55rem 0 0; color: var(--muted); font-size: .82rem; line-height: 1.55; } .automation-help code { font-size: .8rem; } .kit-list { display: grid; gap: .75rem; } .kit-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .75rem .9rem; align-items: center; border: 1px solid var(--line); border-radius: 8px; padding: .9rem; background: var(--surface); } .kit-item strong { display: block; color: var(--ink); font-size: .95rem; margin-bottom: .3rem; } .kit-item p { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.55; } .dev-doc-link { display: flex; align-items: flex-start; gap: .65rem; padding: .75rem 1rem; border-bottom: 1px solid var(--line-soft); background: color-mix(in srgb, var(--surface) 86%, var(--accent-wash)); } .dev-doc-link .cap-icon { margin-top: .05rem; } .dev-doc-link p { margin: 0; color: var(--muted); font-size: .84rem; line-height: 1.55; } .dev-doc-link a { color: var(--accent); font-weight: 700; } .dev-doc-link p > span { display: block; margin-top: .1rem; } .copy-line { display: flex; align-items: center; gap: .45rem; min-width: 0; } .copy-line input { min-width: 180px; max-width: 280px; padding: .55rem .65rem; font-size: .78rem; font-family: var(--mono); } .secret-actions .btn, .copy-line .btn, .kit-item > .btn, .automation-toolbar .btn { padding: .48rem .85rem; font-size: .85rem; border-radius: 7px; line-height: 1.35; } .key-next { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--line-soft); } .automation-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; } .automation-toolbar .group-head { margin: 0; } .scope-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; } .scope-groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; } .scope-group { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); padding: .75rem; } .scope-group > strong { display: block; color: var(--ink); font-size: .9rem; margin-bottom: .55rem; } .scope-group label { display: grid; grid-template-columns: 16px minmax(3rem, auto) 1fr; gap: .45rem; align-items: center; padding: .42rem 0; border-top: 1px solid var(--line-soft); cursor: pointer; } .scope-group label:first-of-type { border-top: 0; } .scope-group input { width: 16px; height: 16px; accent-color: var(--accent); } .scope-group span { color: var(--ink); font-size: .84rem; font-weight: 600; } .scope-group small { color: var(--muted); font-size: .74rem; line-height: 1.35; } .scope-card { display: flex; align-items: flex-start; gap: .55rem; border: 1px solid var(--line); border-radius: 8px; padding: .75rem; cursor: pointer; background: var(--surface); } .scope-card:hover { border-color: var(--accent); } .scope-card input { flex: none; width: 16px; height: 16px; margin-top: .15rem; accent-color: var(--accent); } .scope-card strong { display: block; color: var(--ink); font-size: .9rem; } .scope-card small { display: block; margin-top: .25rem; color: var(--muted); font-size: .76rem; line-height: 1.45; } .scope-list { display: inline-flex; flex-wrap: wrap; gap: .25rem; } .automation-key-table th { white-space: nowrap; } .automation-key-table th:nth-child(3), .automation-key-table td:nth-child(3) { width: 5.8rem; white-space: nowrap; } .automation-key-table th:nth-child(4), .automation-key-table td:nth-child(4) { width: 6.8rem; white-space: nowrap; } .key-actions { font-size: .78rem; } .key-actions .linkbtn, .key-actions .del { font-size: .78rem; line-height: 1.25; } .key-actions.actions a, .key-actions.actions form { margin-left: .55rem; } .key-actions > .linkbtn { margin-left: .55rem; } .key-actions > .linkbtn:first-child { margin-left: 0; } .key-actions.actions form:first-child { margin-left: 0; } .api-endpoints th { width: 4.5rem; } .dev-details .api-base { margin: 0; border-width: 0 0 1px; border-radius: 0; } .api-key-modal:not(:target) { display: none; } .api-key-modal:target { display: grid; } .api-key-modal .modal-card { width: min(620px, 92vw); max-height: 90vh; overflow: auto; } .api-secret-modal[hidden] { display: none; } .api-secret-modal .secret-modal-card { width: min(820px, 92vw); max-height: 90vh; overflow: auto; } .secret-modal-note { margin: -.45rem 0 1rem; font-size: .86rem; line-height: 1.55; } .secret-modal-card .api-secret { margin: 0; } .secret-modal-card .api-secret textarea { min-height: 230px; max-height: 42vh; } .secret-modal-card .btn { padding: .46rem .85rem; border-radius: 7px; font-size: .85rem; line-height: 1.35; } .modal-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1rem; } @media (max-width: 680px) { .scope-grid, .scope-groups, .cap-grid { grid-template-columns: 1fr; } .kit-item { grid-template-columns: auto minmax(0, 1fr); align-items: start; } .kit-item .copy-line { grid-column: 1 / -1; } .automation-toolbar, .copy-line { align-items: stretch; flex-direction: column; } .copy-line input { max-width: none; width: 100%; } .secret-modal-card .api-secret textarea { max-height: 34vh; } } /* 当前主题标签 */ .current-theme-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 1rem; } .current-theme-row .current-theme { margin: 0; } @media (max-width: 560px) { .current-theme-row { flex-direction: column; align-items: stretch; } } .current-theme { margin: 0 0 1rem; font-size: .95rem; } .current-theme strong { color: var(--accent); font-weight: 600; } /* 自定义语种小标签 + 新增预设网格 */ .mini-tag { display: inline-block; font-size: .64rem; font-weight: 700; letter-spacing: .03em; padding: .06rem .35rem; border-radius: 5px; background: var(--accent-wash); color: var(--accent); vertical-align: middle; margin-left: .25rem; } .preset-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem; } .preset-grid .field label { font-size: .8rem; } @media (max-width: 620px) { .preset-grid { grid-template-columns: 1fr 1fr; } } /* 系统更新：默认只展示版本、状态和动作，技术细节折叠。 */ .update-summary { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); overflow: hidden; } .update-versions { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 1rem; align-items: center; padding: 1rem; border-bottom: 1px solid var(--line-soft); } .update-block { min-width: 0; } .update-block strong, .update-task strong { display: inline-block; font-size: 1.05rem; line-height: 1.4; color: var(--ink); } .update-label { display: block; margin: 0 0 .28rem; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); } .update-meta { display: block; margin-top: .28rem; color: var(--muted); font-size: .82rem; line-height: 1.5; overflow-wrap: anywhere; } .update-sep { color: var(--faint); font-size: 1.05rem; } .update-task { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1rem; } .update-task p { margin: .25rem 0 0; color: var(--muted); font-size: .88rem; line-height: 1.55; } .update-action { flex: none; margin: 0; } .update-action .btn { max-width: 100%; justify-content: center; white-space: normal; text-align: center; } .update-details { margin-top: 1rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); overflow: hidden; } .update-details > summary { list-style: none; cursor: pointer; padding: .75rem 1rem; color: var(--ink-soft); font-size: .9rem; font-weight: 600; } .update-details > summary::-webkit-details-marker { display: none; } .update-details > summary::after { content: "▾"; float: right; color: var(--faint); transition: transform .15s; } .update-details[open] > summary { border-bottom: 1px solid var(--line-soft); } .update-details[open] > summary::after { transform: rotate(180deg); } .update-details .admin-table { border: 0; border-radius: 0; } .update-notes { white-space: pre-wrap; margin: 0; padding: 1rem; border-top: 1px solid var(--line-soft); background: var(--line-soft); font: inherit; font-size: .88rem; line-height: 1.6; } @media (max-width: 560px) { .update-versions { grid-template-columns: 1fr; gap: .85rem; } .update-sep { display: none; } .update-task { display: block; } .update-action { margin-top: .9rem; } .update-action .btn { width: 100%; } } @media (max-width: 720px) { .settings-shell { grid-template-columns: 1fr; gap: 1rem; } .settings-menu { flex-direction: row; position: static; overflow-x: auto; border-bottom: 1px solid var(--line); padding-bottom: .4rem; } .settings-menu a { white-space: nowrap; } /* 后台移动端：折叠导航 */ .admin-top .wrap { position: relative; height: 54px; } .admin-burger { display: inline-flex; } .admin-nav { display: none; position: absolute; top: calc(100% + 1px); right: 0; left: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: 0 18px 36px rgba(0,0,0,.12); padding: .5rem; z-index: 60; } .admin-nav.open { display: flex; } .admin-nav a { padding: .7rem .8rem; border-radius: 8px; font-size: .98rem; } .admin-nav a svg { width: 16px; height: 16px; } .admin-nav-sep { width: auto; height: 1px; margin: .35rem .2rem; align-self: stretch; } .admin-nav form { width: 100%; } .admin-nav .btn-logout { width: 100%; text-align: left; padding: .7rem .8rem; margin-left: 0; font-size: .98rem; } /* 后台移动端：表格横向滚动 + 头部堆叠 */ .admin-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; } .admin-head { flex-direction: column; align-items: flex-start; gap: .8rem; } .admin-head .btn { width: 100%; text-align: center; } .lang-tabs { overflow-x: auto; } .admin-main { padding: 1.6rem 0 4rem; } } /* Hero 响应式 */ @media (max-width: 860px) { .hero-inner { grid-template-columns: 1fr; gap: 2rem; } .hero-sub { max-width: none; } .hero-svg { max-width: 360px; } } /* ===================================================================== 主题二 · 杂志 Magazine —— 无衬线、居中刊头、卡片网格 ===================================================================== */ :root[data-theme="magazine"] { --bg: #ffffff; --surface: #ffffff; --ink: #14171f; --ink-soft: #2b3140; --muted: #5b6473; --faint: #98a1b0; --line: #e7e9ef; --line-soft: #f2f4f8; --accent: #1f5fff; --accent-soft: #4178ff; --accent-wash: #ebf1ff; --code-bg: #0f1320; } [data-theme="magazine"] h1, [data-theme="magazine"] h2, [data-theme="magazine"] h3, [data-theme="magazine"] h4 { font-family: var(--sans); letter-spacing: -.015em; } [data-theme="magazine"] .site-header { background: var(--surface); border-bottom: 2px solid var(--ink); } [data-theme="magazine"] .site-header .wrap { flex-direction: column; height: auto; padding: 1.1rem 24px .85rem; gap: .7rem; } [data-theme="magazine"] .site-header .brand { font-size: 1.75rem; letter-spacing: .18em; text-transform: uppercase; } [data-theme="magazine"] .site-header .brand small { display: none; } [data-theme="magazine"] .nav { gap: 2rem; } [data-theme="magazine"] .nav a:not(.search-ico) { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; } [data-theme="magazine"] .nav a[aria-current="page"]::after { display: none; } [data-theme="magazine"] .hero { text-align: center; padding: 4rem 0 3rem; } [data-theme="magazine"] .hero-inner { grid-template-columns: 1fr; gap: 1.6rem; } [data-theme="magazine"] .hero-text { order: 2; max-width: 700px; margin: 0 auto; } [data-theme="magazine"] .hero-sub { max-width: none; margin: 0 auto; } [data-theme="magazine"] .hero h1 { font-size: clamp(2.4rem, 6vw, 4.1rem); } [data-theme="magazine"] .hero-visual { order: 1; } [data-theme="magazine"] .hero-svg { max-width: 280px; } [data-theme="magazine"] .section-head { justify-content: center; gap: 1.2rem; border-bottom: 1px solid var(--line); padding-bottom: .9rem; margin-bottom: 2rem; } [data-theme="magazine"] .section-head h2 { color: var(--ink); font-size: 1.15rem; letter-spacing: .04em; text-transform: none; } [data-theme="magazine"] .feature { grid-template-columns: 1fr; gap: 0; padding: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); } [data-theme="magazine"] .feature .cover { aspect-ratio: 21/8; border-radius: 0; background: linear-gradient(135deg, #c7d4ff, #8aa6ff 55%, #5f7fe0); } [data-theme="magazine"] .feature > div:not(.cover) { padding: 1.7rem 2rem 2rem; } [data-theme="magazine"] .post-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; } [data-theme="magazine"] .post-item { display: block; padding: 0; border: 1px solid var(--line); border-top: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); transition: transform .15s, box-shadow .15s; } [data-theme="magazine"] .post-item:hover { background: var(--surface); transform: translateY(-4px); box-shadow: 0 10px 30px rgba(20,23,31,.08); } [data-theme="magazine"] .post-item::before { content: ""; display: block; height: 8px; background: linear-gradient(90deg, var(--accent), var(--accent-soft)); } [data-theme="magazine"] .post-item .num { display: none; } [data-theme="magazine"] .post-item > div:not(.num) { padding: 1.3rem 1.4rem 1.5rem; } [data-theme="magazine"] .post-item h3 { font-size: 1.18rem; } [data-theme="magazine"] .article-cover { background: linear-gradient(135deg, #c7d4ff, #8aa6ff 55%, #5f7fe0); } @media (max-width: 860px) { [data-theme="magazine"] .post-list { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { [data-theme="magazine"] .post-list { grid-template-columns: 1fr; } } /* ===================================================================== 主题三 · 极客 Terminal —— 等宽字体、深色、终端清单式 ===================================================================== */ :root[data-theme="terminal"] { --bg: #0b0f14; --surface: #0f141b; --ink: #cdd6e3; --ink-soft: #aeb9c9; --muted: #7d8799; --faint: #586575; --line: #1e2630; --line-soft: #161c24; --accent: #3fb950; --accent-soft: #56d364; --accent-wash: #11251a; --code-bg: #060a0e; --shadow: 0 1px 2px rgba(0,0,0,.5), 0 12px 32px rgba(0,0,0,.5); } [data-theme="terminal"] body { font-family: var(--mono); letter-spacing: 0; } [data-theme="terminal"] h1, [data-theme="terminal"] h2, [data-theme="terminal"] h3, [data-theme="terminal"] h4 { font-family: var(--mono); font-weight: 600; letter-spacing: -.01em; } [data-theme="terminal"] ::selection { background: var(--accent-wash); color: var(--accent-soft); } [data-theme="terminal"] .site-header { background: var(--surface); border-bottom: 1px solid var(--line); } [data-theme="terminal"] .site-header .brand { font-family: var(--mono); font-size: 1.05rem; } [data-theme="terminal"] .site-header .brand::before { content: "~/"; color: var(--accent); margin-right: .12rem; } [data-theme="terminal"] .site-header .brand .dot { display: none; } [data-theme="terminal"] .site-header .brand small { color: var(--faint); letter-spacing: .12em; } [data-theme="terminal"] .nav a { font-family: var(--mono); font-size: .86rem; } [data-theme="terminal"] .nav a:not(.search-ico)::before { content: "["; color: var(--faint); } [data-theme="terminal"] .nav a:not(.search-ico)::after { content: "]"; color: var(--faint); position: static; height: auto; background: none; inset: auto; } [data-theme="terminal"] .nav a[aria-current="page"] { color: var(--accent); } [data-theme="terminal"] .hero { padding: 3.5rem 0 3rem; } [data-theme="terminal"] .hero .eyebrow::before { content: "// "; } [data-theme="terminal"] .hero h1 { font-family: var(--mono); } [data-theme="terminal"] .hero h1::after { content: "▋"; color: var(--accent); margin-left: .08em; animation: tBlink 1.1s step-end infinite; } [data-theme="terminal"] .hero-sub::before { content: "> "; color: var(--accent); } @keyframes tBlink { 50% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { [data-theme="terminal"] .hero h1::after { animation: none; } } [data-theme="terminal"] .section-head h2 { color: var(--accent); } [data-theme="terminal"] .section-head h2::before { content: "$ "; opacity: .8; } [data-theme="terminal"] .feature { grid-template-columns: 1fr; gap: 1.2rem; padding: 1.4rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); } [data-theme="terminal"] .feature .cover { aspect-ratio: 21/7; border-radius: 6px; border: 1px solid var(--line); box-shadow: none; background: linear-gradient(135deg, #10271a, #0a1c12 70%); } [data-theme="terminal"] .feature .cover::after { background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(63,185,80,.06) 3px 4px); } [data-theme="terminal"] .post-list { display: block; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface); } [data-theme="terminal"] .post-item { display: block; padding: 1rem 1.3rem; border-top: 1px solid var(--line); background: none; } [data-theme="terminal"] .post-item:first-child { border-top: 0; } [data-theme="terminal"] .post-item:hover { background: var(--line-soft); } [data-theme="terminal"] .post-item .num { display: none; } [data-theme="terminal"] .post-item h3 { font-family: var(--mono); font-size: 1.04rem; margin: .15rem 0 .4rem; } [data-theme="terminal"] .post-item h3 a::before { content: "> "; color: var(--accent); } [data-theme="terminal"] .post-item p { font-size: .9rem; } [data-theme="terminal"] .tag { background: none; border: 1px solid var(--line); color: var(--accent); border-radius: 4px; } [data-theme="terminal"] .tag::before { content: "#"; opacity: .65; } [data-theme="terminal"] .btn { border-radius: 6px; font-family: var(--mono); } [data-theme="terminal"] .btn-primary { color: #04150a; } [data-theme="terminal"] .card { border-radius: 6px; } [data-theme="terminal"] .article-cover { background: linear-gradient(135deg, #10271a, #0a1c12 70%); border: 1px solid var(--line); } [data-theme="terminal"] .pagination a, [data-theme="terminal"] .pagination span { border-radius: 5px; font-family: var(--mono); } /* ===================================================================== 文章大纲（TOC）与带右栏的文章布局 ===================================================================== */ .article-grid { display: grid; justify-content: center; column-gap: 3rem; align-items: start; grid-template-columns: minmax(0, var(--w-read)); } .article-grid.has-toc { grid-template-columns: minmax(0, var(--w-read)) 240px; } /* 面包屑横跨整行（第 1 行），与正文左缘一致 */ .article-bc { grid-column: 1 / -1; grid-row: 1; padding-bottom: .3rem; } /* 正文与目录同在第 2 行起始 → 目录顶部与文章标题齐平 */ .article-col { grid-column: 1; grid-row: 2; min-width: 0; } /* 让网格项本身 sticky：它在「与正文同高」的网格区域内有移动空间 */ .toc-rail { grid-column: 2; grid-row: 2; position: sticky; top: calc(var(--header-h, 72px) + 16px); align-self: start; } .toc { font-size: .9rem; } .toc > summary { list-style: none; pointer-events: none; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); font-weight: 700; margin-bottom: .8rem; padding-left: .9rem; } .toc > summary::-webkit-details-marker { display: none; } .toc ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); } .toc li { margin: 0; } .toc a { display: block; padding: .32rem .9rem; color: var(--muted); border-left: 2px solid transparent; margin-left: -1px; line-height: 1.45; transition: color .15s, border-color .15s; } .toc li.lv3 a { padding-left: 1.7rem; font-size: .84rem; } .toc a:hover { color: var(--accent); } .toc a.active { color: var(--accent); border-left-color: var(--accent); font-weight: 600; } .prose h2, .prose h3 { scroll-margin-top: calc(var(--header-h, 72px) + 20px); } /* 阅读进度条 + 回到顶部（文章页） */ .read-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 100; pointer-events: none; } .read-progress > i { display: block; height: 100%; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; will-change: transform; } .to-top { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 90; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink); display: grid; place-items: center; cursor: pointer; opacity: 0; transform: translateY(12px); transition: opacity .2s, transform .2s, border-color .2s, color .2s; box-shadow: var(--shadow); } .to-top.show { opacity: 1; transform: translateY(0); } .to-top:hover { border-color: var(--accent); color: var(--accent); } @media (max-width: 1100px) { .article-grid.has-toc { grid-template-columns: minmax(0, var(--w-read)); } .article-bc { grid-row: 1; } .toc-rail { grid-column: 1; grid-row: 2; position: static; margin-bottom: 1.6rem; } .article-col { grid-row: 3; } .toc { border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1.2rem; background: var(--surface); } .toc > summary { pointer-events: auto; cursor: pointer; margin-bottom: 0; padding-left: 0; } .toc > summary::after { content: "▾"; float: right; transition: transform .2s; } .toc[open] > summary { margin-bottom: .8rem; } .toc[open] > summary::after { transform: rotate(180deg); } .toc ul { border-left: 0; } .toc a { padding-left: 0; } .toc li.lv3 a { padding-left: .9rem; } } /* 设置页主题预览色板（扩展主题） */ .tc-brutalist { background: #f3f3ee; } .tc-brutalist i { border-radius: 0; } .tc-brutalist .b1 { background: #1f23ff; flex: 0 0 28%; } .tc-brutalist .b2, .tc-brutalist .b3 { background: #000; } .tc-notebook { background: #fbf7ec; } .tc-notebook .b1 { background: #c2691f; flex: 0 0 30%; } .tc-notebook .b2, .tc-notebook .b3 { background: #e3d8c0; } .tc-swiss { background: #fff; } .tc-swiss .b1 { background: #e30613; flex: 0 0 22%; } .tc-swiss .b2, .tc-swiss .b3 { background: #111; } .tc-pastel { background: linear-gradient(135deg, #f3e9ff, #ffe9f3); } .tc-pastel .b1 { background: #8b5cf6; } .tc-pastel .b2 { background: #ff7eb6; } .tc-pastel .b3 { background: #7ad7ff; } .tc-newspaper { background: #f6f4ee; } .tc-newspaper i { background: #1a1a1a; } .tc-newspaper .b1 { background: #8b0000; flex: 0 0 24%; } .tc-darkpro { background: #0e1016; } .tc-darkpro .b1 { background: #7c7cf8; flex: 0 0 28%; } .tc-darkpro .b2 { background: #db2777; } .tc-darkpro .b3 { background: #232838; } /* ===================================================================== 主题四 · 粗野 Brutalist —— 黑白高对比、粗黑边、硬阴影、无圆角 ===================================================================== */ :root[data-theme="brutalist"] { --bg: #f3f3ee; --surface: #ffffff; --ink: #000; --ink-soft: #111; --muted: #333; --faint: #555; --line: #000; --line-soft: #e6e6e0; --accent: #1f23ff; --accent-soft: #1f23ff; --accent-wash: #e6e7ff; --code-bg: #000; } [data-theme="brutalist"] h1, [data-theme="brutalist"] h2, [data-theme="brutalist"] h3, [data-theme="brutalist"] h4 { font-family: var(--sans); font-weight: 800; letter-spacing: -.02em; } [data-theme="brutalist"] .site-header { background: var(--surface); border-bottom: 3px solid #000; } [data-theme="brutalist"] .site-header .brand { font-weight: 900; text-transform: uppercase; } [data-theme="brutalist"] .nav a { font-weight: 700; } [data-theme="brutalist"] .nav a[aria-current="page"]::after { display: none; } [data-theme="brutalist"] .hero { border-bottom: 3px solid #000; } [data-theme="brutalist"] .hero h1 { font-weight: 900; font-size: clamp(2.4rem, 6vw, 4.2rem); text-transform: uppercase; } [data-theme="brutalist"] .hero .eyebrow { display: inline-block; background: #000; color: #fff; padding: .25rem .7rem; } [data-theme="brutalist"] .hero-svg .hv-card, [data-theme="brutalist"] .hero-svg .hv-panel { stroke: #000; stroke-width: 2.5; } [data-theme="brutalist"] .section-head h2 { display: inline-block; background: #000; color: #fff; padding: .2rem .6rem; } [data-theme="brutalist"] .feature { grid-template-columns: 1fr; gap: 0; padding: 0; border: 3px solid #000; border-radius: 0; overflow: hidden; background: #fff; box-shadow: 8px 8px 0 #000; } [data-theme="brutalist"] .feature .cover { aspect-ratio: 21/8; border-radius: 0; border-bottom: 3px solid #000; background: var(--accent); } [data-theme="brutalist"] .feature > div:not(.cover) { padding: 1.6rem; } [data-theme="brutalist"] .post-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; } [data-theme="brutalist"] .post-item { display: block; border: 2.5px solid #000; border-radius: 0; padding: 1.3rem; background: #fff; box-shadow: 6px 6px 0 #000; transition: transform .1s, box-shadow .1s; } [data-theme="brutalist"] .post-item:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--accent); background: #fff; } [data-theme="brutalist"] .post-item .num { display: none; } [data-theme="brutalist"] .post-item > div:not(.num) { padding: 0; } [data-theme="brutalist"] .tag { border: 2px solid #000; border-radius: 0; background: #fff; color: #000; font-weight: 700; } [data-theme="brutalist"] .tag:hover { background: var(--accent); color: #fff; } [data-theme="brutalist"] .btn { border: 2.5px solid #000; border-radius: 0; box-shadow: 4px 4px 0 #000; font-weight: 700; } [data-theme="brutalist"] .btn-primary { background: var(--accent); color: #fff; } [data-theme="brutalist"] .pagination a, [data-theme="brutalist"] .pagination span { border: 2px solid #000; border-radius: 0; } [data-theme="brutalist"] .pagination .cur { background: var(--accent); } [data-theme="brutalist"] .card { border: 2.5px solid #000; border-radius: 0; box-shadow: 5px 5px 0 #000; } @media (max-width: 860px) { [data-theme="brutalist"] .post-list { grid-template-columns: 1fr; } } /* ===================================================================== 主题五 · 手账 Notebook —— 米黄横格纸、衬线、暖橙、虚线分隔 ===================================================================== */ :root[data-theme="notebook"] { --bg: #fbf7ec; --surface: #fffdf6; --ink: #3a3326; --ink-soft: #52493a; --muted: #857a64; --faint: #a99c80; --line: #e6dcc4; --line-soft: #f0e9d8; --accent: #c2691f; --accent-soft: #d67c2c; --accent-wash: #f6ead7; --code-bg: #2a2418; } [data-theme="notebook"] body { background-color: var(--bg); background-image: repeating-linear-gradient(transparent, transparent 31px, var(--line) 31px, var(--line) 32px); } [data-theme="notebook"] .site-header { background: color-mix(in srgb, var(--bg) 92%, transparent); border-bottom: 1px dashed var(--accent); } [data-theme="notebook"] .hero { border-bottom: 1px dashed var(--line); } [data-theme="notebook"] .hero .eyebrow { color: var(--accent); } [data-theme="notebook"] .hero-sub { font-family: var(--serif); font-style: italic; } [data-theme="notebook"] .section-head h2 { color: var(--accent); } [data-theme="notebook"] .feature { grid-template-columns: 1fr; gap: 0; padding: 0; border: 1px dashed var(--accent); border-radius: 8px; overflow: hidden; background: var(--surface); } [data-theme="notebook"] .feature .cover { aspect-ratio: 21/8; border-radius: 0; background: linear-gradient(135deg, #e8cfa6, #d8a86a); } [data-theme="notebook"] .feature > div:not(.cover) { padding: 1.5rem 1.8rem; } [data-theme="notebook"] .post-item { border-top: 1px dashed var(--line); } [data-theme="notebook"] .post-item .num { font-family: var(--serif); color: var(--accent); } [data-theme="notebook"] .post-item h3 a::before { content: "✦ "; color: var(--accent); } [data-theme="notebook"] .tag { background: var(--accent-wash); color: var(--accent); border-radius: 4px; } [data-theme="notebook"] .card { border-style: dashed; } /* ===================================================================== 主题六 · 瑞士 Swiss —— 国际主义网格、红黑、巨号编号、无衬线 ===================================================================== */ :root[data-theme="swiss"] { --bg: #ffffff; --surface: #ffffff; --ink: #111; --ink-soft: #222; --muted: #555; --faint: #999; --line: #111; --line-soft: #e6e6e6; --accent: #e30613; --accent-soft: #ff1a2b; --accent-wash: #ffe8ea; --code-bg: #111; } [data-theme="swiss"] h1, [data-theme="swiss"] h2, [data-theme="swiss"] h3, [data-theme="swiss"] h4 { font-family: var(--sans); font-weight: 700; letter-spacing: -.02em; } [data-theme="swiss"] .site-header { background: #fff; border-bottom: 2px solid #111; } [data-theme="swiss"] .site-header .brand { font-weight: 800; text-transform: uppercase; } [data-theme="swiss"] .site-header .brand small { display: none; } [data-theme="swiss"] .nav a { text-transform: uppercase; font-size: .8rem; letter-spacing: .1em; font-weight: 600; } [data-theme="swiss"] .nav a[aria-current="page"] { color: var(--accent); } [data-theme="swiss"] .nav a[aria-current="page"]::after { display: none; } [data-theme="swiss"] .hero { border-bottom: 2px solid #111; } [data-theme="swiss"] .hero h1 { font-weight: 800; font-size: clamp(2.6rem, 6.5vw, 4.6rem); letter-spacing: -.03em; line-height: 1.05; } [data-theme="swiss"] .hero .eyebrow { color: var(--accent); } [data-theme="swiss"] .section-head { border-top: 2px solid #111; padding-top: .7rem; } [data-theme="swiss"] .section-head h2 { color: #111; } [data-theme="swiss"] .feature { border-top: 2px solid #111; padding-top: 1.5rem; } [data-theme="swiss"] .feature .cover { border-radius: 0; background: var(--accent); } [data-theme="swiss"] .post-item { border-top: 1px solid #111; grid-template-columns: 64px 1fr; } [data-theme="swiss"] .post-item .num { font-family: var(--sans); font-size: 1.7rem; font-weight: 800; color: var(--accent); } [data-theme="swiss"] .post-item h3 { font-weight: 700; } [data-theme="swiss"] .tag { background: #111; color: #fff; border-radius: 0; } [data-theme="swiss"] .btn { border-radius: 0; border-color: #111; } [data-theme="swiss"] .btn-primary { background: var(--accent); border-color: var(--accent); } [data-theme="swiss"] .pagination a, [data-theme="swiss"] .pagination span { border-radius: 0; border-color: #111; } [data-theme="swiss"] .pagination .cur { background: var(--accent); border-color: var(--accent); } /* ===================================================================== 主题七 · 柔彩 Pastel —— 浅彩渐变、大圆角卡片、友好柔和 ===================================================================== */ :root[data-theme="pastel"] { --bg: #faf7ff; --surface: #ffffff; --ink: #3a3357; --ink-soft: #4d4670; --muted: #8a83a6; --faint: #b1abc7; --line: #ece6fa; --line-soft: #f5f1fd; --accent: #8b5cf6; --accent-soft: #a780f8; --accent-wash: #f0e9ff; --code-bg: #2b2440; --radius: 18px; } [data-theme="pastel"] h1, [data-theme="pastel"] h2, [data-theme="pastel"] h3, [data-theme="pastel"] h4 { font-family: var(--sans); } [data-theme="pastel"] body { background: linear-gradient(160deg, #f6efff, #eef5ff 45%, #fff0f7); background-attachment: fixed; } [data-theme="pastel"] .site-header { background: rgba(255,255,255,.72); border-bottom: 1px solid var(--line); } [data-theme="pastel"] .nav a[aria-current="page"]::after { background: var(--accent); height: 3px; border-radius: 3px; } [data-theme="pastel"] .hero h1 { background: linear-gradient(100deg, #8b5cf6, #ec4899); -webkit-background-clip: text; background-clip: text; color: transparent; } [data-theme="pastel"] .section-head h2 { color: var(--accent); } [data-theme="pastel"] .feature { grid-template-columns: 1fr; gap: 0; padding: 0; border-radius: 24px; overflow: hidden; background: #fff; box-shadow: 0 20px 50px rgba(139,92,246,.13); } [data-theme="pastel"] .feature .cover { aspect-ratio: 21/8; border-radius: 0; background: linear-gradient(135deg, #c4b5fd, #fbcfe8 60%, #a7f3d0); } [data-theme="pastel"] .feature > div:not(.cover) { padding: 1.8rem 2rem; } [data-theme="pastel"] .post-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; } [data-theme="pastel"] .post-item { display: block; border: 0; border-radius: 20px; padding: 1.6rem; background: #fff; box-shadow: 0 10px 30px rgba(139,92,246,.10); transition: transform .15s, box-shadow .15s; } [data-theme="pastel"] .post-item:hover { transform: translateY(-5px); box-shadow: 0 18px 44px rgba(139,92,246,.20); background: #fff; } [data-theme="pastel"] .post-item .num { display: none; } [data-theme="pastel"] .post-item > div:not(.num) { padding: 0; } [data-theme="pastel"] .tag { border-radius: 100px; background: var(--accent-wash); color: var(--accent); } [data-theme="pastel"] .btn { border-radius: 100px; } [data-theme="pastel"] .btn-primary { background: linear-gradient(100deg, #8b5cf6, #ec4899); border: 0; color: #fff; } [data-theme="pastel"] .pagination a, [data-theme="pastel"] .pagination span { border-radius: 50%; border-color: var(--line); } [data-theme="pastel"] .pagination .cur { background: var(--accent); border-color: var(--accent); } [data-theme="pastel"] .card { border: 0; border-radius: 18px; box-shadow: 0 10px 30px rgba(139,92,246,.10); } @media (max-width: 760px) { [data-theme="pastel"] .post-list { grid-template-columns: 1fr; } } /* ===================================================================== 主题八 · 报纸 Newspaper —— 刊头双线、衬线小型大写、多栏流式 ===================================================================== */ :root[data-theme="newspaper"] { --bg: #f6f4ee; --surface: #f6f4ee; --ink: #1a1a1a; --ink-soft: #2a2a2a; --muted: #555; --faint: #888; --line: #1a1a1a; --line-soft: #d8d4c8; --accent: #8b0000; --accent-soft: #a52020; --accent-wash: #f0e2e2; --code-bg: #1a1a1a; } [data-theme="newspaper"] .site-header { background: var(--bg); border-bottom: 1px solid #1a1a1a; } [data-theme="newspaper"] .site-header .wrap { flex-direction: column; height: auto; padding: 1rem 24px .6rem; gap: .5rem; } [data-theme="newspaper"] .site-header .brand { font-family: var(--serif); font-size: 2.2rem; font-weight: 800; letter-spacing: .02em; } [data-theme="newspaper"] .site-header .brand small { display: none; } [data-theme="newspaper"] .nav { gap: 1.6rem; border-top: 1px solid #1a1a1a; border-bottom: 1px solid #1a1a1a; padding: .35rem 0; width: 100%; justify-content: center; } [data-theme="newspaper"] .nav a { font-family: var(--serif); font-variant: small-caps; letter-spacing: .06em; font-size: 1rem; } [data-theme="newspaper"] .nav a[aria-current="page"]::after { display: none; } [data-theme="newspaper"] .hero { text-align: center; border-bottom: 3px double #1a1a1a; } [data-theme="newspaper"] .hero-inner { grid-template-columns: 1fr; } [data-theme="newspaper"] .hero-text { order: 2; max-width: 820px; margin: 0 auto; } [data-theme="newspaper"] .hero-visual { order: 1; } [data-theme="newspaper"] .hero-svg { max-width: 250px; } [data-theme="newspaper"] .hero h1 { font-family: var(--serif); font-size: clamp(2.6rem, 6vw, 4.4rem); font-weight: 800; } [data-theme="newspaper"] .hero .eyebrow { color: var(--accent); } [data-theme="newspaper"] .section-head { justify-content: center; border-top: 3px double #1a1a1a; border-bottom: 1px solid #1a1a1a; padding: .5rem 0; } [data-theme="newspaper"] .section-head h2 { font-family: var(--serif); color: #1a1a1a; text-transform: uppercase; letter-spacing: .1em; } [data-theme="newspaper"] .feature .cover { filter: grayscale(1) contrast(1.05); border-radius: 0; } [data-theme="newspaper"] .feature h3 { font-family: var(--serif); } [data-theme="newspaper"] .post-list { display: block; column-count: 2; column-gap: 2.5rem; } [data-theme="newspaper"] .post-item { display: block; break-inside: avoid; grid-template-columns: none; border-top: 1px solid #1a1a1a; padding: .9rem 0; } [data-theme="newspaper"] .post-item:hover { background: none; } [data-theme="newspaper"] .post-item .num { display: none; } [data-theme="newspaper"] .post-item h3 { font-family: var(--serif); font-size: 1.25rem; } [data-theme="newspaper"] .tag { background: none; color: var(--accent); border-radius: 0; padding: 0; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } [data-theme="newspaper"] .tag:hover { background: none; color: var(--accent-soft); } @media (max-width: 760px) { [data-theme="newspaper"] .post-list { column-count: 1; } } /* ===================================================================== 主题九 · 暗夜 Dark Pro —— 现代暗色、靛蓝/品红霓虹、卡片网格 ===================================================================== */ :root[data-theme="darkpro"] { --bg: #0e1016; --surface: #161a24; --ink: #e7eaf3; --ink-soft: #c2c8d6; --muted: #8b93a7; --faint: #5f6678; --line: #252b3a; --line-soft: #1b2030; --accent: #7c7cf8; --accent-soft: #9a8cff; --accent-wash: #1c1e3a; --code-bg: #0a0c12; --shadow: 0 1px 2px rgba(0,0,0,.5), 0 16px 40px rgba(0,0,0,.5); } [data-theme="darkpro"] h1, [data-theme="darkpro"] h2, [data-theme="darkpro"] h3, [data-theme="darkpro"] h4 { font-family: var(--sans); } [data-theme="darkpro"] .site-header { background: rgba(14,16,22,.82); border-bottom: 1px solid var(--line); } [data-theme="darkpro"] .site-header .brand { background: linear-gradient(100deg, #a78bfa, #f0abfc); -webkit-background-clip: text; background-clip: text; color: transparent; } [data-theme="darkpro"] .site-header .brand .dot { color: #f0abfc; -webkit-text-fill-color: #f0abfc; } [data-theme="darkpro"] .nav a[aria-current="page"]::after { background: linear-gradient(90deg, #7c7cf8, #f0abfc); } [data-theme="darkpro"] .hero h1 { background: linear-gradient(100deg, #c4b5fd, #f5d0fe); -webkit-background-clip: text; background-clip: text; color: transparent; } [data-theme="darkpro"] .hero .eyebrow { color: var(--accent-soft); } [data-theme="darkpro"] .hero-svg .hv-card { filter: drop-shadow(0 0 18px rgba(124,124,248,.30)); } [data-theme="darkpro"] .section-head h2 { color: var(--muted); } [data-theme="darkpro"] .feature { grid-template-columns: 1fr; gap: 0; padding: 0; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--surface); box-shadow: var(--shadow); } [data-theme="darkpro"] .feature .cover { aspect-ratio: 21/8; border-radius: 0; background: linear-gradient(135deg, #4c1d95, #7c3aed 50%, #db2777); } [data-theme="darkpro"] .feature > div:not(.cover) { padding: 1.7rem 2rem; } [data-theme="darkpro"] .post-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; } [data-theme="darkpro"] .post-item { display: block; border: 1px solid var(--line); border-radius: 14px; padding: 1.5rem; background: var(--surface); position: relative; overflow: hidden; transition: transform .15s, border-color .15s, box-shadow .15s; } [data-theme="darkpro"] .post-item::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, #7c7cf8, #f0abfc); opacity: 0; transition: opacity .15s; } [data-theme="darkpro"] .post-item:hover { transform: translateY(-4px); border-color: #3a3f6a; background: var(--surface); box-shadow: 0 16px 40px rgba(124,124,248,.16); } [data-theme="darkpro"] .post-item:hover::before { opacity: 1; } [data-theme="darkpro"] .post-item .num { display: none; } [data-theme="darkpro"] .post-item > div:not(.num) { padding: 0; } [data-theme="darkpro"] .tag { background: var(--accent-wash); color: var(--accent-soft); border-radius: 6px; } [data-theme="darkpro"] .btn-primary { background: linear-gradient(100deg, #7c3aed, #db2777); border: 0; color: #fff; } [data-theme="darkpro"] .card { background: var(--surface); border-color: var(--line); } @media (max-width: 760px) { [data-theme="darkpro"] .post-list { grid-template-columns: 1fr; } } /* 封面图与 logo */ img.cover, img.article-cover { object-fit: cover; width: 100%; display: block; } .brand-logo { height: 30px; width: auto; display: block; } .brand.has-logo { padding: 0; } .brand.has-logo::before, .brand.has-logo::after { content: none !important; } .brand.with-name { gap: .55rem; align-items: center; } .brand-name { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; color: var(--ink); letter-spacing: .02em; } /* ===================================================================== 后台组件：上传、自定义下拉、编辑器切换、气泡工具栏、主题微调 ===================================================================== */ .uploader { border: 1px solid var(--line); border-radius: 10px; padding: .8rem; background: var(--surface); } .up-preview { position: relative; aspect-ratio: 16/9; border-radius: 7px; background: var(--line-soft) center/cover no-repeat; border: 1px dashed var(--line); margin-bottom: .6rem; cursor: pointer; display: grid; place-items: center; outline: none; transition: border-color .15s; } .up-preview:hover, .up-preview:focus-visible { border-color: var(--accent); } .up-preview.has { border-style: solid; } .uploader[data-name="site_favicon"] .up-preview.has, .uploader[data-name="site_logo"] .up-preview.has { background-size: contain; } .uploader-sm .up-preview { aspect-ratio: 1; max-width: 72px; } .up-hint { color: var(--muted); font-size: .85rem; pointer-events: none; } .uploader-sm .up-hint { font-size: .76rem; } .up-preview.has .up-hint { display: none; } .up-remove { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(0,0,0,.55); color: #fff; cursor: pointer; display: none; place-items: center; } .up-preview.has .up-remove { display: grid; } .up-remove:hover { background: rgba(0,0,0,.78); } .uploader-sm .up-remove { width: 22px; height: 22px; top: 3px; right: 3px; } .up-url { width: 100%; padding: .5rem .7rem; border: 1px solid var(--line); border-radius: 7px; font-size: .85rem; background: var(--bg); color: var(--ink); font-family: inherit; } .up-status { font-size: .8rem; color: var(--muted); margin-top: .4rem; min-height: 1em; } .dropdown { position: relative; } .dd-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .6rem .8rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; font-size: .95rem; line-height: 1.45; cursor: pointer; text-align: left; } .dd-toggle:hover { border-color: var(--muted); } .dropdown.open .dd-toggle { border-color: var(--accent); } .dd-caret { color: var(--faint); transition: transform .15s; flex: none; } .dropdown.open .dd-caret { transform: rotate(180deg); } .dd-menu { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0; margin: 0; padding: .3rem; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); max-height: 260px; overflow: auto; display: none; } .dropdown.open .dd-menu { display: block; } .dd-menu li { padding: .5rem .7rem; border-radius: 6px; font-size: .92rem; cursor: pointer; } .dd-menu li:hover { background: var(--line-soft); } .dd-menu li[aria-selected="true"] { color: var(--accent); font-weight: 600; } .dd-menu li[aria-selected="true"]::after { content: "✓"; float: right; } .editor-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: .4rem; } .editor-bar label { margin: 0; } .seg { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 7px; background: var(--line-soft); } .seg-btn { padding: .18rem .55rem; font-family: inherit; font-size: .72rem; line-height: 1.5; border: 0; border-radius: 5px; background: transparent; color: var(--muted); cursor: pointer; } .seg-btn:hover { color: var(--ink); } .seg-btn.is-on { background: var(--surface); color: var(--ink); font-weight: 500; box-shadow: 0 1px 2px rgba(0,0,0,.08); } .rich { min-height: 440px; border: 1px solid var(--line); border-radius: 8px; padding: 1.5rem 1.7rem 1.5rem 2.5rem; background: var(--surface); color: var(--ink-soft); font-size: 1.08rem; line-height: 1.85; outline: none; } .rich:focus { border-color: var(--accent); } .rich:empty::before { content: attr(data-placeholder); color: var(--faint); } /* 所见即所得：块间距 / 字号 / 字体与前台 .prose 完全一致 */ .rich > * { margin: 0; position: relative; } .rich > * + * { margin-top: 1.4rem; } .rich h2 { font-size: 1.6rem; font-family: var(--serif); margin: 2.8rem 0 1rem; padding-top: .4rem; color: var(--ink); } .rich h3 { font-size: 1.25rem; font-family: var(--serif); margin: 2.2rem 0 .8rem; color: var(--ink); } .rich strong { color: var(--ink); font-weight: 650; } .rich blockquote { margin: 2rem 0; padding: .4rem 0 .4rem 1.6rem; border-left: 3px solid var(--accent); color: var(--muted); font-family: var(--serif); font-style: italic; font-size: 1.15rem; } .rich ul, .rich ol { margin: 1.2rem 0; padding-left: 1.4rem; } .rich li { margin: .5rem 0; } .rich li::marker { color: var(--accent); } .rich code { font-family: var(--mono); font-size: .88em; background: var(--line-soft); padding: .15em .45em; border-radius: 5px; color: var(--accent); } .rich pre { background: #1c1a17; color: #ece7df; padding: 1.2rem 1.4rem; border-radius: var(--radius); overflow-x: auto; font-size: .9rem; line-height: 1.6; font-family: var(--mono); } .rich pre code { background: none; padding: 0; color: inherit; font-size: inherit; } .rich img { max-width: 100%; border-radius: var(--radius); display: block; } .rich hr { border: 0; border-top: 2px solid var(--line); width: 40%; margin-left: auto; margin-right: auto; } .rich a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } .rich table { width: 100%; border-collapse: collapse; font-size: .95rem; } .rich th, .rich td { border: 1px solid var(--line); padding: .5rem .7rem; text-align: left; } .rich th { background: var(--line-soft); font-weight: 600; } /* 块拖动：悬停块左侧出现把手（浮于编辑器外，不污染内容） */ .blk-handle { position: absolute; z-index: 55; width: 22px; height: 24px; display: none; align-items: center; justify-content: center; color: var(--faint); cursor: grab; border-radius: 5px; background: var(--surface); } .blk-handle.show { display: flex; } .blk-handle:hover { color: var(--accent); background: var(--line-soft); } .blk-handle.grabbing { cursor: grabbing; } .blk-handle svg { display: block; pointer-events: none; } /* 拖动中：源块「抬起」效果（淡色背景 + 虚线描边 + 降透明度） */ .rich > .blk-dragging { opacity: .4; background: var(--accent-wash); outline: 1px dashed var(--accent); outline-offset: 3px; border-radius: 6px; } body.blk-dragging-active, body.blk-dragging-active * { cursor: grabbing !important; } body.blk-dragging-active { user-select: none; } /* 跟随光标的拖动幻影（类似导航/分类的原生拖动效果） */ .blk-ghost { position: fixed; z-index: 80; pointer-events: none; max-width: 460px; max-height: 96px; overflow: hidden; padding: .5rem .8rem; background: var(--surface); color: var(--ink-soft); border: 1px solid var(--accent); border-radius: 9px; box-shadow: 0 14px 34px rgba(0,0,0,.20); opacity: .92; transform: rotate(-1.5deg); font-size: .95rem; line-height: 1.5; } .blk-ghost > * { margin: 0 !important; font-size: 1rem !important; } /* 落点指示线：更醒目（圆角 + 起点圆点） */ .blk-drop { position: absolute; z-index: 54; height: 3px; background: var(--accent); border-radius: 3px; display: none; pointer-events: none; box-shadow: 0 0 0 3px var(--accent-wash); } .blk-drop::before { content: ""; position: absolute; left: -4px; top: 50%; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); transform: translateY(-50%); } .blk-drop.show { display: block; } /* 气泡默认浮在选区「上方」（尾巴朝下指向选区），不遮挡所选文字；空间不足时翻转到下方 */ .bubble { position: absolute; z-index: 60; display: flex; gap: 2px; padding: 4px; background: #16161a; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.3); transform: translate(-50%, calc(-100% - 10px)); } .bubble.below { transform: translate(-50%, 10px); } .bubble button { width: 34px; height: 32px; border: 0; background: none; color: #fff; cursor: pointer; border-radius: 6px; font-size: .92rem; display: grid; place-items: center; } .bubble button:hover, .bubble button.on { background: rgba(255,255,255,.2); } .bubble button svg { display: block; } .bubble-sep { width: 1px; background: rgba(255,255,255,.22); margin: 5px 2px; } .bubble::after { content: ""; position: absolute; left: 50%; bottom: -5px; top: auto; width: 10px; height: 10px; background: #16161a; transform: translateX(-50%) rotate(45deg); } .bubble.below::after { top: -5px; bottom: auto; } .link-pop { position: absolute; z-index: 61; display: flex; gap: 5px; padding: 5px; background: #16161a; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.32); transform: translate(-50%, calc(-100% - 10px)); } .link-pop.below { transform: translate(-50%, 10px); } .link-pop::after { content: ""; position: absolute; left: 50%; bottom: -5px; top: auto; width: 10px; height: 10px; background: #16161a; transform: translateX(-50%) rotate(45deg); } .link-pop.below::after { top: -5px; bottom: auto; } .link-input { width: 240px; border: 0; background: rgba(255,255,255,.12); color: #fff; padding: .42rem .6rem; border-radius: 6px; font-size: .85rem; outline: none; } .link-input::placeholder { color: rgba(255,255,255,.5); } .link-apply { width: 34px; border: 0; background: var(--accent); color: #fff; border-radius: 6px; cursor: pointer; display: grid; place-items: center; } .link-apply:hover { filter: brightness(1.08); } .link-close { width: 30px; border: 0; background: rgba(255,255,255,.12); color: #fff; border-radius: 6px; cursor: pointer; display: grid; place-items: center; } .link-close:hover { background: rgba(255,255,255,.24); } /* [hidden] 必须真正隐藏：.bubble/.link-pop 的 display:flex 会盖过 UA 的 [hidden]，这里补回 */ .bubble[hidden], .link-pop[hidden] { display: none; } .plus { position: absolute; z-index: 55; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--muted); cursor: pointer; display: none; place-items: center; font-size: 1.1rem; line-height: 1; } .plus.show { display: grid; } .plus:hover { border-color: var(--accent); color: var(--accent); } .plus-menu { position: absolute; z-index: 56; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); padding: .3rem; display: none; min-width: 130px; } .plus-menu.show { display: block; } .plus-menu button { display: flex; align-items: center; gap: .5rem; width: 100%; text-align: left; padding: .45rem .8rem; border: 0; background: none; cursor: pointer; font: inherit; font-size: .9rem; color: var(--ink); border-radius: 6px; } .plus-menu button svg { color: var(--muted); flex: none; } .plus-menu button:hover { background: var(--line-soft); color: var(--accent); } .plus-menu button:hover svg { color: var(--accent); } .table-tools { position: absolute; z-index: 58; display: none; gap: 2px; padding: 3px; background: #16161a; border-radius: 7px; box-shadow: 0 6px 18px rgba(0,0,0,.28); } .table-tools.show { display: flex; } .table-tools button { border: 0; background: none; color: #fff; font: inherit; font-size: .76rem; padding: .2rem .5rem; border-radius: 5px; cursor: pointer; } .table-tools button:hover { background: rgba(255,255,255,.2); } /* 模态框（分类新增/编辑） */ .cat-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } /* 分类：类型切换 + 新增 同一行；语种切换单独成行、带标签、紧贴列表上方 */ .cat-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .cat-toolbar .lang-tabs { margin: 0; } .category-table th { white-space: nowrap; } .category-table th:nth-child(4), .category-table td:nth-child(4) { width: 4.5rem; white-space: nowrap; } .category-table th:nth-child(5), .category-table td:nth-child(5) { width: 5.2rem; white-space: nowrap; } .cat-lang-bar { display: flex; align-items: center; gap: .7rem; margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--line); } .cat-lang-label { font-size: .82rem; font-weight: 600; color: var(--muted); flex: none; } .modal[hidden] { display: none; } .modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; } .modal-backdrop { position: absolute; inset: 0; background: rgba(20,20,20,.45); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .modal-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 24px 64px rgba(0,0,0,.28); padding: 1.6rem 1.8rem; width: min(480px, 92vw); animation: modalIn .16s ease; } .modal-card h3 { margin: 0 0 1.1rem; font-size: 1.2rem; } @keyframes modalIn { from { transform: translateY(8px); opacity: 0; } } /* 统一确认弹层 */ .confirm-modal .modal-card { width: min(400px, 92vw); } .confirm-msg { margin: 0 0 1.4rem; color: var(--ink-soft); line-height: 1.55; font-size: .95rem; } .confirm-actions { display: flex; gap: .6rem; justify-content: flex-end; } .confirm-actions .btn { padding: .46rem .9rem; min-width: 72px; border-radius: 7px; font-size: .86rem; line-height: 1.35; justify-content: center; } .btn-danger { background: #c0392b; border-color: #c0392b; color: #fff; } .btn-danger:hover { background: #a93226; border-color: #a93226; color: #fff; } /* 分类拖动排序 */ .cat-row { cursor: grab; } .cat-row.dragging { opacity: .45; background: var(--accent-wash); } .drag-handle { color: var(--faint); cursor: grab; text-align: center; user-select: none; font-size: 1.1rem; line-height: 1; } .cat-row:hover .drag-handle { color: var(--accent); } /* Hero CTA（默认隐藏，需要产品化首页的主题自行打开） */ .hero-cta { display: none; } .tc-landing { background: #f4f6ff; } .tc-landing .b1 { background: #4f46e5; flex: 0 0 30%; } .tc-landing .b2 { background: #a5b4fc; } .tc-landing .b3 { background: #e0e7ff; } .tc-product { background: #f8fafc; } .tc-product .b1 { background: #0f7cff; flex: 0 0 32%; } .tc-product .b2 { background: #16c7b7; } .tc-product .b3 { background: #111827; } .tc-prism { background: #09090b; } .tc-prism .b1 { background: #d7ff4a; flex: 0 0 34%; } .tc-prism .b2 { background: #ff5e5b; } .tc-prism .b3 { background: #41ead4; } .tc-exchange { background: #05080d; } .tc-exchange .b1 { background: #00f5a0; flex: 0 0 34%; } .tc-exchange .b2 { background: #35a7ff; } .tc-exchange .b3 { background: #16212b; } .tc-academy { background: #f6f9ff; } .tc-academy .b1 { background: #2563eb; flex: 0 0 30%; } .tc-academy .b2 { background: #8b5cf6; } .tc-academy .b3 { background: #f6c453; } .tc-garment { background: #f7f8f5; } .tc-garment .b1 { background: #0f766e; flex: 0 0 30%; } .tc-garment .b2 { background: #223047; } .tc-garment .b3 { background: #e05a47; } .tc-institution { background: #f7f4ef; } .tc-institution .b1 { background: #8a1f2d; flex: 0 0 30%; } .tc-institution .b2 { background: #25364d; } .tc-institution .b3 { background: #d6c7ad; } .tc-studio { background: #f7f7f2; } .tc-studio .b1 { background: #111111; flex: 0 0 38%; } .tc-studio .b2 { background: #ff4f5e; } .tc-studio .b3 { background: #d9d4c7; } .tc-lifestyle { background: #fbf7ef; } .tc-lifestyle .b1 { background: #2f7d57; flex: 0 0 30%; } .tc-lifestyle .b2 { background: #f2a65a; } .tc-lifestyle .b3 { background: #7a4e2d; } /* ===================================================================== 主题十 · 官网 Landing —— 产品/项目官网风：大居中 hero + CTA + 特性卡片 ===================================================================== */ :root[data-theme="landing"] { --bg: #fbfcff; --surface: #ffffff; --ink: #0f172a; --ink-soft: #1e293b; --muted: #475569; --faint: #94a3b8; --line: #e6eaf3; --line-soft: #f1f4fb; --accent: #4f46e5; --accent-soft: #6366f1; --accent-wash: #eef0ff; --code-bg: #0f1220; --radius: 14px; } [data-theme="landing"] h1, [data-theme="landing"] h2, [data-theme="landing"] h3, [data-theme="landing"] h4 { font-family: var(--sans); letter-spacing: -.02em; } [data-theme="landing"] body { background: radial-gradient(920px 420px at 50% -140px, #e9ecff, transparent), var(--bg); } [data-theme="landing"] .site-header { background: rgba(255,255,255,.82); border-bottom: 1px solid var(--line); } [data-theme="landing"] .site-header .brand { font-weight: 800; } [data-theme="landing"] .hero { text-align: center; padding: 4.5rem 0 3.5rem; border-bottom: 0; } [data-theme="landing"] .hero-inner { grid-template-columns: 1fr; gap: 1.4rem; } [data-theme="landing"] .hero-text { order: 2; max-width: 740px; margin: 0 auto; } [data-theme="landing"] .hero-visual { order: 1; } [data-theme="landing"] .hero-svg { max-width: 340px; } [data-theme="landing"] .hero h1 { font-size: clamp(2.6rem, 6.2vw, 4.4rem); font-weight: 800; } [data-theme="landing"] .hero .eyebrow { display: inline-block; background: var(--accent-wash); color: var(--accent); padding: .32rem .9rem; border-radius: 100px; letter-spacing: .06em; } [data-theme="landing"] .hero-sub { max-width: 600px; margin: 0 auto; font-size: 1.2rem; } [data-theme="landing"] .hero-cta { display: flex; justify-content: center; gap: 1rem; margin-top: 2rem; } [data-theme="landing"] .hero-cta .btn { padding: .8rem 1.7rem; font-size: 1rem; border-radius: 11px; } [data-theme="landing"] .btn-primary { background: linear-gradient(100deg, #4f46e5, #7c3aed); border: 0; color: #fff; box-shadow: 0 10px 24px rgba(79,70,229,.26); } [data-theme="landing"] .section-head { flex-direction: column; align-items: center; gap: .3rem; justify-content: center; text-align: center; margin: 3.6rem 0 1.8rem; } [data-theme="landing"] .section-head h2 { font-size: 1.7rem; color: var(--ink); text-transform: none; letter-spacing: -.01em; } [data-theme="landing"] .feature { grid-template-columns: 1fr; gap: 0; padding: 0; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; background: #fff; box-shadow: 0 20px 50px rgba(15,23,42,.08); } [data-theme="landing"] .feature .cover { aspect-ratio: 21/8; border-radius: 0; background: linear-gradient(135deg, #c7d2fe, #a5b4fc 50%, #ddd6fe); } [data-theme="landing"] .feature > div:not(.cover) { padding: 2rem 2.4rem; text-align: center; } [data-theme="landing"] .feature h3 { font-size: 1.8rem; } [data-theme="landing"] .feature .meta { justify-content: center; } [data-theme="landing"] .post-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } [data-theme="landing"] .post-item { display: block; border: 1px solid var(--line); border-radius: 16px; padding: 1.6rem; background: #fff; transition: transform .15s, box-shadow .15s; } [data-theme="landing"] .post-item:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(15,23,42,.10); background: #fff; } [data-theme="landing"] .post-item .num { display: grid; width: 38px; height: 38px; place-items: center; background: var(--accent-wash); color: var(--accent); border-radius: 10px; font-family: var(--sans); font-size: 1rem; font-weight: 700; margin-bottom: .9rem; } [data-theme="landing"] .post-item > div { padding: 0; } [data-theme="landing"] .post-item h3 { font-size: 1.18rem; } [data-theme="landing"] .tag { border-radius: 100px; background: var(--accent-wash); color: var(--accent); } [data-theme="landing"] .card { border-radius: 16px; box-shadow: 0 10px 30px rgba(15,23,42,.06); } [data-theme="landing"] .btn { border-radius: 10px; } [data-theme="landing"] .pagination a, [data-theme="landing"] .pagination span { border-radius: 10px; } @media (max-width: 860px) { [data-theme="landing"] .post-list { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { [data-theme="landing"] .post-list { grid-template-columns: 1fr; } } /* ===================================================================== 主题十一 · 产品 Product —— 开源项目 / 互联网产品官网、文档入口、更新日志 ===================================================================== */ :root[data-theme="product"] { --bg: #f8fafc; --surface: #ffffff; --ink: #111827; --ink-soft: #334155; --muted: #64748b; --faint: #94a3b8; --line: #dbe4ef; --line-soft: #eef4fb; --accent: #0f7cff; --accent-soft: #16c7b7; --accent-wash: #e8f3ff; --code-bg: #0f172a; --radius: 14px; --shadow: 0 1px 2px rgba(17,24,39,.04), 0 18px 48px rgba(15,124,255,.10); } [data-theme="product"] body { font-family: var(--sans); letter-spacing: 0; background-color: var(--bg); background-image: linear-gradient(90deg, rgba(15,124,255,.055) 1px, transparent 1px), linear-gradient(180deg, rgba(22,199,183,.045) 1px, transparent 1px), radial-gradient(circle at 12% 0, rgba(15,124,255,.11), transparent 32%), radial-gradient(circle at 86% 6%, rgba(22,199,183,.11), transparent 30%); background-size: 44px 44px, 44px 44px, auto, auto; } [data-theme="product"] h1, [data-theme="product"] h2, [data-theme="product"] h3, [data-theme="product"] h4 { font-family: var(--sans); font-weight: 800; letter-spacing: 0; } [data-theme="product"] .site-header { background: rgba(248,250,252,.86); border-bottom: 1px solid rgba(15,124,255,.14); } [data-theme="product"] .site-header .wrap { height: 68px; } [data-theme="product"] .site-header .brand { font-family: var(--sans); font-weight: 850; color: var(--ink); } [data-theme="product"] .site-header .brand::before { content: ""; flex: none; width: 30px; height: 30px; border-radius: 10px; background: linear-gradient(90deg, rgba(255,255,255,.72) 1px, transparent 1px), linear-gradient(180deg, rgba(255,255,255,.64) 1px, transparent 1px), linear-gradient(135deg, var(--accent), var(--accent-soft)); background-size: 8px 8px, 8px 8px, auto; box-shadow: 0 12px 26px rgba(15,124,255,.18); } [data-theme="product"] .brand small { color: var(--muted); } [data-theme="product"] .nav { gap: .5rem; } [data-theme="product"] .nav a { color: var(--ink-soft); padding: .34rem .72rem; border-radius: 999px; } [data-theme="product"] .nav a:hover, [data-theme="product"] .nav a[aria-current="page"] { color: var(--accent); background: rgba(15,124,255,.08); } [data-theme="product"] .nav a[aria-current="page"]::after { display: none; } [data-theme="product"] .hero { padding: 4.9rem 0 4rem; border-bottom: 0; overflow: hidden; } [data-theme="product"] .hero-inner { grid-template-columns: minmax(0, .95fr) minmax(360px, 1.05fr); gap: 3.2rem; } [data-theme="product"] .hero .eyebrow { display: inline-flex; align-items: center; gap: .45rem; padding: .32rem .76rem; border: 1px solid rgba(15,124,255,.16); border-radius: 999px; background: rgba(255,255,255,.78); color: var(--accent); letter-spacing: 0; text-transform: none; box-shadow: 0 8px 22px rgba(15,124,255,.06); } [data-theme="product"] .hero .eyebrow::before { content: ""; width: .46rem; height: .46rem; border-radius: 50%; background: var(--accent-soft); box-shadow: 0 0 0 5px rgba(22,199,183,.14); } [data-theme="product"] .hero h1 { max-width: 10.5em; font-size: clamp(2.45rem, 5.8vw, 4.45rem); line-height: 1.04; } [data-theme="product"] .hero-sub { max-width: 48ch; color: var(--ink-soft); font-size: 1.14rem; } [data-theme="product"] .hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; } [data-theme="product"] .hero-cta .btn { padding: .72rem 1.22rem; border-radius: 10px; } [data-theme="product"] .hero-visual { position: relative; justify-self: end; width: min(100%, 580px); padding: 0; border: 0; border-radius: 0; background: radial-gradient(circle at 48% 48%, rgba(15,124,255,.15), transparent 43%), radial-gradient(circle at 76% 18%, rgba(22,199,183,.12), transparent 35%); box-shadow: none; } [data-theme="product"] .hero-visual::before, [data-theme="product"] .hero-visual::after { position: absolute; z-index: 2; border: 1px solid rgba(15,124,255,.16); border-radius: 14px; background: rgba(255,255,255,.88); color: var(--ink); font-family: var(--mono); box-shadow: 0 18px 44px rgba(17,24,39,.12); } [data-theme="product"] .hero-visual::before { content: "$ npm install gcms"; left: .5rem; top: 1rem; padding: .58rem .72rem; font-size: .76rem; } [data-theme="product"] .hero-visual::after { content: "docs api releases"; right: .3rem; bottom: 1.2rem; padding: .56rem .76rem; color: var(--accent); font-size: .73rem; } [data-theme="product"] .hero-svg { max-width: 500px; } [data-theme="product"] .hero-svg .hv2-glow { fill: var(--accent); opacity: .46; } [data-theme="product"] .hero-svg .hv2-win, [data-theme="product"] .hero-svg .hv-card, [data-theme="product"] .hero-svg .hv-panel { fill: #ffffff; stroke: rgba(15,124,255,.22); } [data-theme="product"] .hero-svg .hv2-chip, [data-theme="product"] .hero-svg .hv-code { fill: var(--code-bg); } [data-theme="product"] .section-head { align-items: flex-end; margin: 3.2rem 0 1.15rem; padding-bottom: .75rem; border-bottom: 1px solid var(--line); } [data-theme="product"] .section-head h2 { position: relative; display: inline-flex; align-items: center; gap: .58rem; color: var(--ink); font-size: 1.12rem; text-transform: none; letter-spacing: 0; } [data-theme="product"] .section-head h2::before { content: ""; width: .68rem; height: .68rem; border-radius: 3px; background: linear-gradient(135deg, var(--accent), var(--accent-soft)); } [data-theme="product"] .section-head a { color: var(--accent); } [data-theme="product"] .feature { grid-template-columns: minmax(280px, .82fr) minmax(0, 1.18fr); gap: 0; padding: 0; border: 1px solid rgba(15,124,255,.14); border-radius: 20px; overflow: hidden; background: rgba(255,255,255,.90); box-shadow: var(--shadow); } [data-theme="product"] .feature.no-cover { grid-template-columns: 1fr; } [data-theme="product"] .feature .cover { min-height: 300px; height: 100%; border-radius: 0; box-shadow: none; background: linear-gradient(135deg, rgba(15,124,255,.76), rgba(22,199,183,.68)), linear-gradient(180deg, #eef4fb, #fff); } [data-theme="product"] .feature .cover::after { background: linear-gradient(90deg, rgba(255,255,255,.30) 1px, transparent 1px), linear-gradient(180deg, rgba(255,255,255,.28) 1px, transparent 1px), linear-gradient(135deg, transparent 0 44%, rgba(17,24,39,.16) 44% 48%, transparent 48%); background-size: 24px 24px, 24px 24px, auto; } [data-theme="product"] .feature > div:not(.cover) { padding: 2.1rem 2.3rem; } [data-theme="product"] .feature h3 { font-size: 1.7rem; max-width: 14em; } [data-theme="product"] .feature-more { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } [data-theme="product"] .card { border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.88); box-shadow: 0 12px 32px rgba(17,24,39,.05); } [data-theme="product"] .link-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } [data-theme="product"] .link-card { border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.90); box-shadow: 0 10px 30px rgba(17,24,39,.05); } [data-theme="product"] .link-card:hover, [data-theme="product"] .card:hover { border-color: rgba(15,124,255,.32); box-shadow: var(--shadow); } [data-theme="product"] .lc-cover, [data-theme="product"] .article-cover { background: linear-gradient(90deg, rgba(255,255,255,.28) 1px, transparent 1px), linear-gradient(180deg, rgba(255,255,255,.24) 1px, transparent 1px), linear-gradient(135deg, var(--accent), var(--accent-soft)); background-size: 18px 18px, 18px 18px, auto; } [data-theme="product"] .lc-mono { background: linear-gradient(135deg, var(--accent), var(--accent-soft)); color: #fff; } [data-theme="product"] .post-list { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: .82rem; } [data-theme="product"] .post-list::before { content: ""; position: absolute; left: 24px; top: .7rem; bottom: .7rem; width: 2px; background: linear-gradient(var(--accent), rgba(22,199,183,.18)); } [data-theme="product"] .post-item { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 1rem; padding: 1.05rem 1.15rem; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.92); box-shadow: 0 10px 28px rgba(17,24,39,.04); } [data-theme="product"] .post-item:hover { background: #fff; border-color: rgba(15,124,255,.32); } [data-theme="product"] .post-item .num { position: relative; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid rgba(15,124,255,.18); border-radius: 14px; background: #fff; color: var(--accent); font-family: var(--mono); font-size: .84rem; font-weight: 800; } [data-theme="product"] .post-item > div:not(.num) { padding: 0; } [data-theme="product"] .post-item h3 { margin-top: 0; font-size: 1.18rem; } [data-theme="product"] .post-item p { color: var(--muted); } [data-theme="product"] .tag { border-radius: 7px; background: var(--accent-wash); color: var(--accent); } [data-theme="product"] .tag:hover { background: var(--accent); color: #fff; } [data-theme="product"] .btn { border-radius: 10px; border-color: var(--line); color: var(--ink-soft); } [data-theme="product"] .btn:hover { border-color: var(--accent); color: var(--accent); } [data-theme="product"] .btn-primary { background: var(--ink); border-color: var(--ink); color: #fff; box-shadow: 0 14px 32px rgba(17,24,39,.18); } [data-theme="product"] .btn-primary:hover { background: var(--accent); border-color: var(--accent); color: #fff; } [data-theme="product"] .pager a, [data-theme="product"] .toc, [data-theme="product"] .searchbox input { border-color: var(--line); background: rgba(255,255,255,.92); } [data-theme="product"] .page-head, [data-theme="product"] .article-head, [data-theme="product"] .article-foot { border-color: var(--line); } [data-theme="product"] .article-head .kicker, [data-theme="product"] .page-head .eyebrow { color: var(--accent); letter-spacing: 0; } [data-theme="product"] .article-head h1 { font-family: var(--sans); font-weight: 850; } [data-theme="product"] .prose blockquote { border-left-color: var(--accent); background: var(--accent-wash); border-radius: 0 14px 14px 0; } [data-theme="product"] .prose code { background: var(--accent-wash); } [data-theme="product"] .prose pre { background: var(--code-bg); } [data-theme="product"] .pagination a, [data-theme="product"] .pagination span { border-radius: 10px; } [data-theme="product"] .pagination .cur, [data-theme="product"] .cat-nav a.active { background: var(--accent); border-color: var(--accent); color: #fff; } [data-theme="product"] .site-footer { background: #fff; border-top-color: var(--line); } /* ===================================================================== 主题十二 · 光谱 Prism —— 深色海报、多色信号线、错层内容卡 ===================================================================== */ :root[data-theme="prism"] { --bg: #09090b; --surface: #111116; --ink: #fff8ea; --ink-soft: #ded6c8; --muted: #aaa193; --faint: #726b63; --line: #292832; --line-soft: #17171d; --accent: #d7ff4a; --accent-soft: #ff5e5b; --accent-wash: rgba(215,255,74,.12); --code-bg: #050507; --radius: 18px; --shadow: 0 1px 2px rgba(0,0,0,.45), 0 24px 70px rgba(0,0,0,.42); } [data-theme="prism"] body { font-family: var(--sans); letter-spacing: 0; background-color: var(--bg); background-image: linear-gradient(90deg, rgba(255,248,234,.035) 1px, transparent 1px), linear-gradient(180deg, rgba(255,248,234,.035) 1px, transparent 1px), linear-gradient(135deg, rgba(215,255,74,.10), transparent 34%), linear-gradient(225deg, rgba(255,94,91,.10), transparent 36%); background-size: 72px 72px, 72px 72px, auto, auto; } [data-theme="prism"] h1, [data-theme="prism"] h2, [data-theme="prism"] h3, [data-theme="prism"] h4 { font-family: var(--sans); font-weight: 850; letter-spacing: 0; } [data-theme="prism"] .site-header { background: rgba(9,9,11,.78); border-bottom: 1px solid rgba(255,248,234,.10); } [data-theme="prism"] .site-header .wrap { height: 68px; } [data-theme="prism"] .site-header .brand { font-family: var(--sans); font-weight: 850; color: var(--ink); } [data-theme="prism"] .site-header .brand::before { content: ""; display: block; flex: none; width: .68rem; height: .68rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(215,255,74,.13), 0 0 18px rgba(215,255,74,.45); } [data-theme="prism"] .brand small { color: var(--muted); } [data-theme="prism"] .nav { gap: .7rem; } [data-theme="prism"] .nav a { color: var(--ink-soft); padding: .24rem .58rem; border-radius: 999px; border: 1px solid transparent; } [data-theme="prism"] .nav a:hover, [data-theme="prism"] .nav a[aria-current="page"] { color: var(--accent); border-color: rgba(215,255,74,.28); background: rgba(215,255,74,.08); } [data-theme="prism"] .nav a[aria-current="page"]::after { display: none; } [data-theme="prism"] .hero { position: relative; padding: 5rem 0 4.2rem; border-bottom: 1px solid rgba(255,248,234,.10); overflow: hidden; } [data-theme="prism"] .hero::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: linear-gradient(90deg, var(--accent), #ff5e5b, #41ead4); } [data-theme="prism"] .hero-inner { position: relative; grid-template-columns: .92fr 1.08fr; } [data-theme="prism"] .hero .eyebrow { display: inline-flex; padding: .26rem .74rem; border: 1px solid rgba(215,255,74,.34); border-radius: 999px; background: rgba(215,255,74,.08); color: var(--accent); letter-spacing: .08em; } [data-theme="prism"] .hero h1 { font-weight: 900; line-height: 1.02; background: linear-gradient(100deg, #fff8ea 0%, var(--accent) 48%, #41ead4 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } [data-theme="prism"] .hero-sub { color: var(--ink-soft); } [data-theme="prism"] .hero-visual { justify-self: end; width: min(100%, 560px); padding: 1rem; border: 1px solid rgba(255,248,234,.12); border-radius: 24px; background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); box-shadow: 0 30px 80px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.08); transform: rotate(-1deg); } [data-theme="prism"] .hero-svg { max-width: 500px; } [data-theme="prism"] .hero-img, [data-theme="prism"] .hero-embed { border-radius: 16px; overflow: hidden; } [data-theme="prism"] .hero-svg .hv2-glow { fill: var(--accent); opacity: .65; } [data-theme="prism"] .hero-svg .hv2-globe .hv2-globe-face, [data-theme="prism"] .hero-svg .hv2-win, [data-theme="prism"] .hero-svg .hv-card, [data-theme="prism"] .hero-svg .hv-panel { fill: #111116; } [data-theme="prism"] .hero-svg .hv2-globe line, [data-theme="prism"] .hero-svg .hv2-globe ellipse, [data-theme="prism"] .hero-svg .hv2-globe path, [data-theme="prism"] .hero-svg .hv2-globe .hv2-globe-face, [data-theme="prism"] .hero-svg .hv2-win, [data-theme="prism"] .hero-svg .hv-card, [data-theme="prism"] .hero-svg .hv-panel { stroke: rgba(255,248,234,.24); } [data-theme="prism"] .section-head { align-items: center; margin: 3.2rem 0 1.25rem; padding-top: .9rem; border-top: 1px solid rgba(255,248,234,.10); } [data-theme="prism"] .section-head h2 { font-family: var(--mono); font-size: .86rem; letter-spacing: .08em; color: var(--accent); } [data-theme="prism"] .section-head a { color: #41ead4; } [data-theme="prism"] .feature { position: relative; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 0; padding: 0; border: 1px solid rgba(255,248,234,.13); border-radius: 22px; overflow: hidden; background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); box-shadow: var(--shadow); } [data-theme="prism"] .feature.no-cover { grid-template-columns: 1fr; } [data-theme="prism"] .feature .cover { min-height: 260px; height: 100%; border-radius: 0; box-shadow: none; background: conic-gradient(from 140deg, var(--accent), #ff5e5b, #41ead4, var(--accent)); } [data-theme="prism"] .feature .cover::after { background: linear-gradient(135deg, rgba(255,255,255,.32), transparent 55%); } [data-theme="prism"] .feature > div:not(.cover) { padding: 2rem 2.2rem; } [data-theme="prism"] .feature-more { gap: 1rem; } [data-theme="prism"] .post-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } [data-theme="prism"] .post-item { position: relative; display: block; min-height: 210px; padding: 1.35rem; border: 1px solid rgba(255,248,234,.12); border-radius: 18px; background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025)); overflow: hidden; transition: transform var(--speed), border-color var(--speed), box-shadow var(--speed); } [data-theme="prism"] .post-item::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--accent), #ff5e5b, #41ead4); } [data-theme="prism"] .post-item:hover { transform: translateY(-3px); border-color: rgba(215,255,74,.55); background: linear-gradient(145deg, rgba(215,255,74,.11), rgba(255,255,255,.03)); box-shadow: 0 18px 46px rgba(0,0,0,.34); } [data-theme="prism"] .post-item .num { position: absolute; right: .9rem; bottom: .35rem; padding: 0; font-family: var(--mono); font-size: 3rem; line-height: 1; color: rgba(215,255,74,.16); } [data-theme="prism"] .post-item > div:not(.num) { position: relative; padding: 0; } [data-theme="prism"] .post-item h3 { padding-right: 3.2rem; font-size: 1.18rem; } [data-theme="prism"] .post-item p { color: var(--muted); } [data-theme="prism"] .tag { border: 1px solid rgba(215,255,74,.30); background: rgba(215,255,74,.10); color: var(--accent); } [data-theme="prism"] .tag:hover { background: var(--accent); color: #08090b; } [data-theme="prism"] .btn { border-color: rgba(255,248,234,.16); border-radius: 999px; background: rgba(255,255,255,.04); color: var(--ink); } [data-theme="prism"] .btn:hover { border-color: rgba(215,255,74,.50); color: var(--accent); } [data-theme="prism"] .btn-primary { background: var(--accent); border-color: var(--accent); color: #08090b; box-shadow: 0 14px 34px rgba(215,255,74,.20); } [data-theme="prism"] .btn-primary:hover { background: #ecff8a; border-color: #ecff8a; color: #08090b; } [data-theme="prism"] .card, [data-theme="prism"] .link-card, [data-theme="prism"] .pager a, [data-theme="prism"] .toc, [data-theme="prism"] .searchbox input { border-color: rgba(255,248,234,.12); background: rgba(255,255,255,.045); } [data-theme="prism"] .card:hover, [data-theme="prism"] .link-card:hover { border-color: rgba(65,234,212,.45); box-shadow: 0 18px 46px rgba(0,0,0,.34); } [data-theme="prism"] .lc-cover, [data-theme="prism"] .article-cover { background: conic-gradient(from 140deg, var(--accent), #ff5e5b, #41ead4, var(--accent)); } [data-theme="prism"] .lc-mono { background: conic-gradient(from 140deg, var(--accent), #ff5e5b, #41ead4, var(--accent)); color: #08090b; } [data-theme="prism"] .page-head, [data-theme="prism"] .article-head, [data-theme="prism"] .article-foot { border-color: rgba(255,248,234,.12); } [data-theme="prism"] .article-head .kicker, [data-theme="prism"] .page-head .eyebrow { color: #41ead4; } [data-theme="prism"] .article-head h1 { font-family: var(--sans); font-weight: 850; } [data-theme="prism"] .avatar { background: linear-gradient(135deg, var(--accent), #ff5e5b); color: #08090b; font-family: var(--sans); } [data-theme="prism"] .article-cover { border: 1px solid rgba(255,248,234,.13); box-shadow: var(--shadow); } [data-theme="prism"] .prose blockquote { padding: .9rem 1rem .9rem 1.2rem; border-left-color: var(--accent); border-radius: 0 14px 14px 0; background: rgba(215,255,74,.08); } [data-theme="prism"] .prose code { background: rgba(255,255,255,.08); } [data-theme="prism"] .prose pre { background: #050507; border: 1px solid rgba(255,248,234,.12); } [data-theme="prism"] .cat-nav a { border-color: rgba(255,248,234,.14); background: rgba(255,255,255,.035); } [data-theme="prism"] .cat-nav a.active, [data-theme="prism"] .pagination .cur { background: var(--accent); border-color: var(--accent); color: #08090b; } [data-theme="prism"] .site-footer { background: #0c0c10; border-top-color: rgba(255,248,234,.12); } @media (max-width: 860px) { [data-theme="prism"] .hero-inner, [data-theme="prism"] .feature, [data-theme="prism"] .post-list, [data-theme="prism"] .feature-more { grid-template-columns: 1fr; } [data-theme="prism"] .hero-visual { justify-self: stretch; transform: none; } } /* ===================================================================== 主题十三 · 交易所 Exchange —— Web3 增长页、行情仪表盘、强转化 ===================================================================== */ :root[data-theme="exchange"] { --bg: #05080d; --surface: #0b1118; --ink: #f4fff8; --ink-soft: #c9d8d2; --muted: #8aa19a; --faint: #50665f; --line: #1d2b31; --line-soft: #0a1518; --accent: #00f5a0; --accent-soft: #35a7ff; --accent-wash: rgba(0,245,160,.12); --code-bg: #020409; --radius: 16px; --shadow: 0 1px 2px rgba(0,0,0,.55), 0 26px 70px rgba(0,0,0,.42); } [data-theme="exchange"] body { font-family: var(--sans); letter-spacing: 0; background-color: var(--bg); background-image: linear-gradient(90deg, rgba(0,245,160,.05) 1px, transparent 1px), linear-gradient(180deg, rgba(53,167,255,.04) 1px, transparent 1px), linear-gradient(120deg, rgba(0,245,160,.10), transparent 42%), linear-gradient(240deg, rgba(53,167,255,.10), transparent 44%); background-size: 96px 96px, 96px 96px, auto, auto; } [data-theme="exchange"] h1, [data-theme="exchange"] h2, [data-theme="exchange"] h3, [data-theme="exchange"] h4 { font-family: var(--sans); font-weight: 850; letter-spacing: 0; } [data-theme="exchange"] .site-header { background: rgba(5,8,13,.86); border-bottom: 1px solid rgba(0,245,160,.16); } [data-theme="exchange"] .site-header .wrap { height: 70px; } [data-theme="exchange"] .site-header .brand { font-family: var(--sans); font-weight: 850; color: var(--ink); } [data-theme="exchange"] .site-header .brand::before { content: ""; flex: none; width: 28px; height: 28px; border-radius: 9px; background: linear-gradient(135deg, var(--accent), var(--accent-soft)); box-shadow: 0 0 28px rgba(0,245,160,.28); } [data-theme="exchange"] .brand small { color: var(--muted); } [data-theme="exchange"] .nav { gap: .55rem; } [data-theme="exchange"] .nav a { color: var(--ink-soft); padding: .34rem .7rem; border: 1px solid transparent; border-radius: 999px; } [data-theme="exchange"] .nav a:hover, [data-theme="exchange"] .nav a[aria-current="page"] { color: var(--accent); border-color: rgba(0,245,160,.26); background: rgba(0,245,160,.08); } [data-theme="exchange"] .nav a[aria-current="page"]::after { display: none; } [data-theme="exchange"] .hero { padding: 4.8rem 0 4.4rem; border-bottom: 1px solid rgba(0,245,160,.16); overflow: hidden; } [data-theme="exchange"] .hero-inner { grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr); gap: 3.4rem; } [data-theme="exchange"] .hero .eyebrow { display: inline-flex; align-items: center; gap: .48rem; padding: .28rem .72rem; border-radius: 999px; background: rgba(0,245,160,.10); color: var(--accent); letter-spacing: 0; } [data-theme="exchange"] .hero .eyebrow::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 18px rgba(0,245,160,.65); } [data-theme="exchange"] .hero h1 { font-size: clamp(2.45rem, 5.8vw, 4.6rem); line-height: 1.03; max-width: 9.5em; } [data-theme="exchange"] .hero-sub { color: var(--ink-soft); font-size: 1.12rem; } [data-theme="exchange"] .hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; } [data-theme="exchange"] .hero-cta .btn { padding: .72rem 1.25rem; } [data-theme="exchange"] .hero-visual { position: relative; justify-self: end; width: min(100%, 590px); padding: 0; border: 0; border-radius: 0; background: radial-gradient(circle at 50% 48%, rgba(0,245,160,.18), transparent 42%), radial-gradient(circle at 74% 24%, rgba(53,167,255,.12), transparent 36%); box-shadow: none; } [data-theme="exchange"] .hero-visual::before, [data-theme="exchange"] .hero-visual::after { position: absolute; z-index: 2; border: 1px solid rgba(0,245,160,.20); border-radius: 14px; background: rgba(5,8,13,.88); color: var(--accent); font-family: var(--mono); line-height: 1.35; box-shadow: 0 18px 40px rgba(0,0,0,.30); } [data-theme="exchange"] .hero-visual::before { content: "BTC/USDT +2.38%"; top: 1.15rem; left: .45rem; padding: .55rem .7rem; font-size: .78rem; } [data-theme="exchange"] .hero-visual::after { content: "24H VOL $2.4B"; right: .15rem; bottom: 1rem; padding: .58rem .75rem; color: var(--accent-soft); font-size: .76rem; } [data-theme="exchange"] .hero-svg { max-width: 520px; } [data-theme="exchange"] .hero-svg .hv2-glow { fill: var(--accent); opacity: .7; } [data-theme="exchange"] .hero-svg .hv2-win, [data-theme="exchange"] .hero-svg .hv-card, [data-theme="exchange"] .hero-svg .hv-panel { fill: #0b1118; stroke: rgba(0,245,160,.24); } [data-theme="exchange"] .section-head { align-items: center; margin: 3.2rem 0 1.2rem; padding: .85rem 0; border-top: 1px solid rgba(0,245,160,.14); } [data-theme="exchange"] .section-head h2 { font-family: var(--mono); color: var(--accent); letter-spacing: 0; } [data-theme="exchange"] .section-head a { color: var(--accent-soft); } [data-theme="exchange"] .feature { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 0; padding: 0; border: 1px solid rgba(0,245,160,.18); border-radius: 22px; overflow: hidden; background: linear-gradient(135deg, rgba(0,245,160,.09), rgba(53,167,255,.05)); box-shadow: var(--shadow); } [data-theme="exchange"] .feature.no-cover { grid-template-columns: 1fr; } [data-theme="exchange"] .feature .cover { min-height: 300px; height: 100%; border-radius: 0; box-shadow: none; background: linear-gradient(140deg, rgba(0,245,160,.88), rgba(53,167,255,.72)), linear-gradient(90deg, #0b1118, #111827); } [data-theme="exchange"] .feature .cover::after { background: linear-gradient(135deg, transparent 0 42%, rgba(5,8,13,.38) 42% 48%, transparent 48%), linear-gradient(25deg, rgba(255,255,255,.30), transparent 50%); } [data-theme="exchange"] .feature > div:not(.cover) { padding: 2rem 2.2rem; } [data-theme="exchange"] .post-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } [data-theme="exchange"] .post-item { position: relative; display: block; min-height: 230px; padding: 1.25rem; border: 1px solid rgba(0,245,160,.14); border-radius: 18px; background: rgba(11,17,24,.84); overflow: hidden; transition: transform var(--speed), border-color var(--speed), box-shadow var(--speed); } [data-theme="exchange"] .post-item::before { content: ""; position: absolute; left: 1rem; right: 1rem; bottom: 1rem; height: 44px; border-bottom: 2px solid rgba(0,245,160,.52); border-left: 2px solid rgba(0,245,160,.28); transform: skewX(-18deg); opacity: .34; } [data-theme="exchange"] .post-item:hover { transform: translateY(-4px); border-color: rgba(0,245,160,.48); box-shadow: 0 18px 44px rgba(0,0,0,.38); } [data-theme="exchange"] .post-item .num { display: inline-grid; place-items: center; width: 42px; height: 28px; margin-bottom: .8rem; padding: 0; border-radius: 8px; background: rgba(0,245,160,.11); color: var(--accent); font-family: var(--mono); font-size: .86rem; } [data-theme="exchange"] .post-item > div:not(.num) { position: relative; padding: 0; } [data-theme="exchange"] .post-item h3 { font-size: 1.08rem; } [data-theme="exchange"] .post-item p { color: var(--muted); } [data-theme="exchange"] .tag { border: 1px solid rgba(0,245,160,.24); background: rgba(0,245,160,.10); color: var(--accent); } [data-theme="exchange"] .tag:hover { background: var(--accent); color: #03100b; } [data-theme="exchange"] .btn { border-color: rgba(255,255,255,.14); border-radius: 999px; background: rgba(255,255,255,.04); color: var(--ink); } [data-theme="exchange"] .btn:hover { border-color: var(--accent); color: var(--accent); } [data-theme="exchange"] .btn-primary { background: linear-gradient(100deg, var(--accent), var(--accent-soft)); border: 0; color: #03100b; box-shadow: 0 16px 38px rgba(0,245,160,.22); } [data-theme="exchange"] .card, [data-theme="exchange"] .link-card, [data-theme="exchange"] .pager a, [data-theme="exchange"] .toc, [data-theme="exchange"] .searchbox input { border-color: rgba(0,245,160,.14); background: rgba(11,17,24,.84); } [data-theme="exchange"] .card:hover, [data-theme="exchange"] .link-card:hover { border-color: rgba(53,167,255,.42); box-shadow: 0 18px 42px rgba(0,0,0,.34); } [data-theme="exchange"] .lc-cover, [data-theme="exchange"] .article-cover { background: linear-gradient(135deg, var(--accent), var(--accent-soft)); } [data-theme="exchange"] .lc-mono { background: linear-gradient(135deg, var(--accent), var(--accent-soft)); color: #03100b; } [data-theme="exchange"] .page-head, [data-theme="exchange"] .article-head, [data-theme="exchange"] .article-foot { border-color: rgba(0,245,160,.16); } [data-theme="exchange"] .article-head .kicker, [data-theme="exchange"] .page-head .eyebrow { color: var(--accent); letter-spacing: 0; } [data-theme="exchange"] .article-head h1 { font-family: var(--sans); font-weight: 850; } [data-theme="exchange"] .prose blockquote { border-left-color: var(--accent); background: rgba(0,245,160,.08); border-radius: 0 14px 14px 0; } [data-theme="exchange"] .prose code { background: rgba(255,255,255,.08); } [data-theme="exchange"] .prose pre { background: #020409; border: 1px solid rgba(0,245,160,.16); } [data-theme="exchange"] .pagination .cur, [data-theme="exchange"] .cat-nav a.active { background: var(--accent); border-color: var(--accent); color: #03100b; } [data-theme="exchange"] .site-footer { background: #070b10; border-top-color: rgba(0,245,160,.16); } /* ===================================================================== 主题十四 · 智课 Academy —— AI 教材科普、课程目录、长文友好 ===================================================================== */ :root[data-theme="academy"] { --bg: #f6f9ff; --surface: #ffffff; --ink: #162033; --ink-soft: #334155; --muted: #64748b; --faint: #94a3b8; --line: #dce7f7; --line-soft: #edf4ff; --accent: #2563eb; --accent-soft: #8b5cf6; --accent-wash: #eaf1ff; --code-bg: #101828; --radius: 16px; --shadow: 0 1px 2px rgba(22,32,51,.04), 0 18px 42px rgba(37,99,235,.09); } [data-theme="academy"] body { font-family: var(--sans); letter-spacing: 0; background-color: var(--bg); background-image: linear-gradient(180deg, rgba(37,99,235,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(139,92,246,.04) 1px, transparent 1px); background-size: 100% 32px, 32px 100%; } [data-theme="academy"] h1, [data-theme="academy"] h2, [data-theme="academy"] h3, [data-theme="academy"] h4 { font-family: var(--sans); font-weight: 800; letter-spacing: 0; } [data-theme="academy"] .site-header { background: rgba(246,249,255,.88); border-bottom: 1px solid rgba(37,99,235,.14); } [data-theme="academy"] .site-header .brand { font-family: var(--sans); font-weight: 850; color: var(--ink); } [data-theme="academy"] .site-header .brand::before { content: ""; width: 28px; height: 28px; border-radius: 9px; background: linear-gradient(90deg, transparent 46%, rgba(255,255,255,.72) 46% 54%, transparent 54%), linear-gradient(135deg, var(--accent), var(--accent-soft)); box-shadow: 0 12px 24px rgba(37,99,235,.18); } [data-theme="academy"] .brand small { color: var(--muted); } [data-theme="academy"] .nav a { color: var(--ink-soft); padding: .28rem .62rem; border-radius: 999px; } [data-theme="academy"] .nav a:hover, [data-theme="academy"] .nav a[aria-current="page"] { color: var(--accent); background: var(--accent-wash); } [data-theme="academy"] .nav a[aria-current="page"]::after { display: none; } [data-theme="academy"] .hero { padding: 4.4rem 0 3.4rem; border-bottom: 0; } [data-theme="academy"] .hero-inner { grid-template-columns: minmax(0, 1.04fr) minmax(320px, .96fr); gap: 3rem; } [data-theme="academy"] .hero .eyebrow { display: inline-flex; padding: .3rem .72rem; border-radius: 10px; background: #fff7da; color: #9a5b00; letter-spacing: 0; } [data-theme="academy"] .hero h1 { max-width: 10em; font-size: clamp(2.35rem, 5.4vw, 4rem); line-height: 1.08; } [data-theme="academy"] .hero-sub { color: var(--ink-soft); font-size: 1.12rem; } [data-theme="academy"] .hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.5rem; } [data-theme="academy"] .hero-visual { position: relative; width: min(100%, 540px); padding: 0; border: 0; border-radius: 0; background: radial-gradient(circle at 48% 48%, rgba(37,99,235,.13), transparent 42%), radial-gradient(circle at 78% 22%, rgba(139,92,246,.10), transparent 34%); box-shadow: none; } [data-theme="academy"] .hero-visual::before { content: "AI 101"; position: absolute; top: 1rem; left: .8rem; z-index: 2; padding: .42rem .62rem; border-radius: 10px; background: var(--accent); color: #fff; font-family: var(--mono); font-size: .78rem; box-shadow: 0 12px 26px rgba(37,99,235,.20); } [data-theme="academy"] .hero-visual::after { content: "prompt agents safety"; position: absolute; right: .8rem; bottom: 1rem; z-index: 2; padding: .5rem .7rem; border-radius: 999px; background: #fff7da; color: #7c4a00; font-family: var(--mono); font-size: .72rem; } [data-theme="academy"] .hero-svg { max-width: 450px; } [data-theme="academy"] .hero-svg .hv2-glow { opacity: .42; } [data-theme="academy"] .hero-svg .hv2-win, [data-theme="academy"] .hero-svg .hv-card, [data-theme="academy"] .hero-svg .hv-panel { fill: #fff; stroke: #c8d8f2; } [data-theme="academy"] .section-head { margin: 3.4rem 0 1.2rem; align-items: center; } [data-theme="academy"] .section-head h2 { display: inline-flex; align-items: center; gap: .55rem; color: var(--ink); font-size: 1.15rem; text-transform: none; letter-spacing: 0; } [data-theme="academy"] .section-head h2::before { content: ""; width: .68rem; height: .68rem; border-radius: 4px; background: linear-gradient(135deg, var(--accent), var(--accent-soft)); } [data-theme="academy"] .feature { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 0; padding: 0; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; background: var(--surface); box-shadow: var(--shadow); } [data-theme="academy"] .feature.no-cover { grid-template-columns: 1fr; } [data-theme="academy"] .feature .cover { min-height: 280px; height: 100%; border-radius: 0; box-shadow: none; background: linear-gradient(120deg, rgba(37,99,235,.80), rgba(139,92,246,.72)), linear-gradient(180deg, #eef4ff, #fff7da); } [data-theme="academy"] .feature .cover::after { background: linear-gradient(90deg, rgba(255,255,255,.34) 1px, transparent 1px), linear-gradient(180deg, rgba(255,255,255,.28) 1px, transparent 1px); background-size: 36px 36px; } [data-theme="academy"] .feature > div:not(.cover) { padding: 2.1rem 2.3rem; } [data-theme="academy"] .feature-more { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } [data-theme="academy"] .card { border-radius: 18px; box-shadow: 0 12px 34px rgba(37,99,235,.07); } [data-theme="academy"] .post-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: .9rem; } [data-theme="academy"] .post-item { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: start; gap: 1rem; padding: 1.2rem; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.86); box-shadow: 0 10px 28px rgba(37,99,235,.05); } [data-theme="academy"] .post-item:hover { background: #fff; border-color: rgba(37,99,235,.34); } [data-theme="academy"] .post-item .num { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border-radius: 14px; background: var(--accent-wash); color: var(--accent); font-family: var(--mono); font-size: .9rem; font-weight: 800; } [data-theme="academy"] .post-item > div:not(.num) { padding: 0; } [data-theme="academy"] .post-item h3 { font-size: 1.22rem; margin-top: 0; } [data-theme="academy"] .tag { border-radius: 9px; background: var(--accent-wash); color: var(--accent); } [data-theme="academy"] .tag:hover { background: var(--accent); color: #fff; } [data-theme="academy"] .btn { border-radius: 12px; border-color: var(--line); box-shadow: 0 8px 20px rgba(37,99,235,.05); } [data-theme="academy"] .btn-primary { background: linear-gradient(100deg, var(--accent), var(--accent-soft)); border: 0; color: #fff; } [data-theme="academy"] .link-card, [data-theme="academy"] .pager a, [data-theme="academy"] .toc, [data-theme="academy"] .searchbox input { border-color: var(--line); background: rgba(255,255,255,.88); } [data-theme="academy"] .link-card:hover { border-color: rgba(37,99,235,.32); box-shadow: var(--shadow); } [data-theme="academy"] .lc-cover, [data-theme="academy"] .article-cover { background: linear-gradient(135deg, #bfdbfe, #ddd6fe 52%, #fde68a); } [data-theme="academy"] .lc-mono { background: linear-gradient(135deg, var(--accent), var(--accent-soft)); color: #fff; } [data-theme="academy"] .page-head, [data-theme="academy"] .article-head { border-bottom: 0; padding-bottom: 1.6rem; } [data-theme="academy"] .article-head { background: linear-gradient(180deg, rgba(234,241,255,.72), transparent); border-radius: 22px; padding: 1.8rem; } [data-theme="academy"] .article-head .kicker, [data-theme="academy"] .page-head .eyebrow { color: var(--accent); letter-spacing: 0; } [data-theme="academy"] .prose { font-size: 1.07rem; line-height: 1.86; } [data-theme="academy"] .prose blockquote { border-left-color: var(--accent-soft); background: #fff7da; border-radius: 0 14px 14px 0; } [data-theme="academy"] .prose code { background: var(--accent-wash); } [data-theme="academy"] .prose pre { background: #101828; } [data-theme="academy"] .pagination a, [data-theme="academy"] .pagination span { border-radius: 12px; } [data-theme="academy"] .site-footer { background: #ffffff; } /* ===================================================================== 主题十五 · 制衣 Garment —— 外贸服装工厂、样衣目录、B2B 展示 ===================================================================== */ :root[data-theme="garment"] { --bg: #f7f8f5; --surface: #ffffff; --ink: #172033; --ink-soft: #344256; --muted: #64706f; --faint: #8a9794; --line: #dde6df; --line-soft: #edf2ec; --accent: #0f766e; --accent-soft: #e05a47; --accent-wash: #e8f4f1; --code-bg: #172033; --radius: 12px; --shadow: 0 1px 2px rgba(23,32,51,.04), 0 16px 38px rgba(15,118,110,.08); } [data-theme="garment"] body { font-family: var(--sans); letter-spacing: 0; background-color: var(--bg); background-image: linear-gradient(90deg, rgba(15,118,110,.055) 1px, transparent 1px), linear-gradient(180deg, rgba(224,90,71,.045) 1px, transparent 1px); background-size: 48px 48px; } [data-theme="garment"] h1, [data-theme="garment"] h2, [data-theme="garment"] h3, [data-theme="garment"] h4 { font-family: var(--sans); font-weight: 780; letter-spacing: 0; } [data-theme="garment"] .site-header { background: rgba(247,248,245,.9); border-bottom: 1px solid var(--line); } [data-theme="garment"] .site-header .wrap { height: 72px; } [data-theme="garment"] .site-header .brand { font-family: var(--sans); font-weight: 850; color: var(--ink); } [data-theme="garment"] .site-header .brand::before { content: ""; width: 30px; height: 30px; border-radius: 4px 14px 4px 14px; background: linear-gradient(90deg, rgba(255,255,255,.62) 1px, transparent 1px), linear-gradient(180deg, rgba(255,255,255,.50) 1px, transparent 1px), linear-gradient(135deg, var(--accent), var(--accent-soft)); background-size: 8px 8px, 8px 8px, auto; } [data-theme="garment"] .brand small { color: var(--muted); } [data-theme="garment"] .nav a { color: var(--ink-soft); padding: .3rem .65rem; border-radius: 8px; } [data-theme="garment"] .nav a:hover, [data-theme="garment"] .nav a[aria-current="page"] { color: var(--accent); background: var(--accent-wash); } [data-theme="garment"] .nav a[aria-current="page"]::after { display: none; } [data-theme="garment"] .hero { padding: 4rem 0 3.5rem; border-bottom: 1px solid var(--line); } [data-theme="garment"] .hero-inner { grid-template-columns: minmax(0, .92fr) minmax(360px, 1.08fr); gap: 3rem; } [data-theme="garment"] .hero .eyebrow { display: inline-flex; padding: .25rem .65rem; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--accent); letter-spacing: 0; } [data-theme="garment"] .hero h1 { max-width: 10em; font-size: clamp(2.35rem, 5.2vw, 4rem); line-height: 1.05; } [data-theme="garment"] .hero-sub { color: var(--ink-soft); font-size: 1.1rem; } [data-theme="garment"] .hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.5rem; } [data-theme="garment"] .hero-visual { position: relative; justify-self: end; width: min(100%, 560px); padding: 0; border: 0; border-radius: 0; background: radial-gradient(circle at 50% 48%, rgba(15,118,110,.10), transparent 44%), radial-gradient(circle at 78% 22%, rgba(224,90,71,.08), transparent 34%); box-shadow: none; } [data-theme="garment"] .hero-visual::before, [data-theme="garment"] .hero-visual::after { content: ""; position: absolute; z-index: 2; border: 1px solid rgba(23,32,51,.10); border-radius: 14px; box-shadow: 0 14px 30px rgba(23,32,51,.10); } [data-theme="garment"] .hero-visual::before { width: 116px; height: 76px; right: .55rem; top: .75rem; background: linear-gradient(90deg, rgba(255,255,255,.34) 1px, transparent 1px), linear-gradient(180deg, rgba(255,255,255,.34) 1px, transparent 1px), #223047; background-size: 10px 10px; } [data-theme="garment"] .hero-visual::after { width: 96px; height: 62px; left: .75rem; bottom: .9rem; background: repeating-linear-gradient(45deg, rgba(255,255,255,.32) 0 2px, transparent 2px 8px), var(--accent); } [data-theme="garment"] .hero-svg { max-width: 500px; } [data-theme="garment"] .hero-svg .hv2-glow { opacity: .35; } [data-theme="garment"] .hero-svg .hv2-win, [data-theme="garment"] .hero-svg .hv-card, [data-theme="garment"] .hero-svg .hv-panel { fill: #fff; stroke: #cfdad3; } [data-theme="garment"] .section-head { margin: 3.3rem 0 1.25rem; align-items: center; padding-bottom: .7rem; border-bottom: 1px solid var(--line); } [data-theme="garment"] .section-head h2 { color: var(--ink); font-size: 1.1rem; text-transform: none; letter-spacing: 0; } [data-theme="garment"] .section-head a { color: var(--accent); } [data-theme="garment"] .feature { grid-template-columns: minmax(280px, .78fr) minmax(0, 1.22fr); gap: 0; padding: 0; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; background: #fff; box-shadow: var(--shadow); } [data-theme="garment"] .feature.no-cover { grid-template-columns: 1fr; } [data-theme="garment"] .feature .cover { min-height: 340px; height: 100%; border-radius: 0; box-shadow: none; background: linear-gradient(135deg, rgba(15,118,110,.72), rgba(224,90,71,.62)), linear-gradient(180deg, #f7f8f5, #dde6df); } [data-theme="garment"] .feature .cover::after { background: linear-gradient(90deg, rgba(255,255,255,.30) 1px, transparent 1px), linear-gradient(180deg, rgba(255,255,255,.24) 1px, transparent 1px); background-size: 18px 18px; } [data-theme="garment"] .feature > div:not(.cover) { padding: 2.1rem 2.4rem; } [data-theme="garment"] .feature h3 { max-width: 13em; } [data-theme="garment"] .feature-more { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } [data-theme="garment"] .post-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } [data-theme="garment"] .post-item { display: block; padding: 1.15rem; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.90); box-shadow: 0 10px 30px rgba(23,32,51,.05); } [data-theme="garment"] .post-item:hover { background: #fff; border-color: rgba(15,118,110,.36); transform: translateY(-3px); } [data-theme="garment"] .post-item .num { display: inline-grid; place-items: center; width: 38px; height: 38px; margin-bottom: .85rem; padding: 0; border-radius: 10px; background: var(--accent-wash); color: var(--accent); font-family: var(--mono); font-size: .86rem; font-weight: 800; } [data-theme="garment"] .post-item > div:not(.num) { padding: 0; } [data-theme="garment"] .post-item h3 { font-size: 1.12rem; } [data-theme="garment"] .post-item p { color: var(--muted); } [data-theme="garment"] .tag { border-radius: 7px; background: var(--accent-wash); color: var(--accent); } [data-theme="garment"] .tag:hover { background: var(--accent); color: #fff; } [data-theme="garment"] .btn { border-radius: 10px; border-color: var(--line); } [data-theme="garment"] .btn:hover { border-color: var(--accent); color: var(--accent); } [data-theme="garment"] .btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 12px 28px rgba(15,118,110,.18); } [data-theme="garment"] .link-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } [data-theme="garment"] .link-card, [data-theme="garment"] .card, [data-theme="garment"] .pager a, [data-theme="garment"] .toc, [data-theme="garment"] .searchbox input { border-color: var(--line); background: rgba(255,255,255,.92); } [data-theme="garment"] .link-card:hover, [data-theme="garment"] .card:hover { border-color: rgba(15,118,110,.36); box-shadow: var(--shadow); } [data-theme="garment"] .lc-cover, [data-theme="garment"] .article-cover { background: linear-gradient(90deg, rgba(255,255,255,.24) 1px, transparent 1px), linear-gradient(180deg, rgba(255,255,255,.22) 1px, transparent 1px), linear-gradient(135deg, var(--accent), var(--accent-soft)); background-size: 18px 18px, 18px 18px, auto; } [data-theme="garment"] .lc-mono { background: linear-gradient(135deg, var(--accent), var(--accent-soft)); color: #fff; } [data-theme="garment"] .page-head, [data-theme="garment"] .article-head, [data-theme="garment"] .article-foot { border-color: var(--line); } [data-theme="garment"] .article-head .kicker, [data-theme="garment"] .page-head .eyebrow { color: var(--accent); letter-spacing: 0; } [data-theme="garment"] .article-head h1 { font-family: var(--sans); font-weight: 800; } [data-theme="garment"] .prose blockquote { border-left-color: var(--accent-soft); background: #fff4f1; border-radius: 0 12px 12px 0; } [data-theme="garment"] .prose code { background: var(--accent-wash); } [data-theme="garment"] .prose pre { background: var(--code-bg); } [data-theme="garment"] .pagination a, [data-theme="garment"] .pagination span { border-radius: 10px; } [data-theme="garment"] .site-footer { background: #fff; } /* ===================================================================== 主题十六 · 机构 Institution —— 专业服务、咨询、律所、协会可信官网 ===================================================================== */ :root[data-theme="institution"] { --bg: #f7f4ef; --surface: #fffdf8; --ink: #20262e; --ink-soft: #394555; --muted: #6b706d; --faint: #9b968c; --line: #d9cfbd; --line-soft: #efe8dc; --accent: #8a1f2d; --accent-soft: #25364d; --accent-wash: #f5e7e4; --code-bg: #20262e; --radius: 8px; --shadow: 0 1px 2px rgba(32,38,46,.05), 0 18px 42px rgba(37,54,77,.10); } [data-theme="institution"] body { font-family: var(--sans); letter-spacing: 0; background-color: var(--bg); background-image: linear-gradient(180deg, rgba(138,31,45,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(37,54,77,.035) 1px, transparent 1px); background-size: 100% 44px, 44px 100%; } [data-theme="institution"] h1, [data-theme="institution"] h2, [data-theme="institution"] h3, [data-theme="institution"] h4 { font-family: var(--serif); font-weight: 700; letter-spacing: 0; } [data-theme="institution"] .site-header { background: rgba(247,244,239,.92); border-bottom: 1px solid var(--line); } [data-theme="institution"] .site-header .wrap { height: 74px; } [data-theme="institution"] .site-header .brand { font-family: var(--serif); font-weight: 700; color: var(--ink); } [data-theme="institution"] .site-header .brand::before { content: ""; width: 28px; height: 32px; flex: none; border: 1px solid rgba(138,31,45,.32); border-radius: 8px 8px 12px 12px; background: linear-gradient(135deg, rgba(255,255,255,.42), transparent 45%), linear-gradient(180deg, var(--accent), #6f1724); box-shadow: inset 0 -8px 0 rgba(37,54,77,.18); } [data-theme="institution"] .brand small { color: var(--muted); } [data-theme="institution"] .nav { gap: .9rem; } [data-theme="institution"] .nav a { color: var(--ink-soft); padding: .35rem 0; border-bottom: 2px solid transparent; } [data-theme="institution"] .nav a:hover, [data-theme="institution"] .nav a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); } [data-theme="institution"] .nav a[aria-current="page"]::after { display: none; } [data-theme="institution"] .hero { padding: 4.5rem 0 3.8rem; border-bottom: 1px solid var(--line); } [data-theme="institution"] .hero-inner { grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr); gap: 3.2rem; } [data-theme="institution"] .hero .eyebrow { display: inline-flex; align-items: center; gap: .7rem; color: var(--accent); letter-spacing: 0; text-transform: none; } [data-theme="institution"] .hero .eyebrow::before { content: ""; width: 2.6rem; height: 1px; background: var(--accent); } [data-theme="institution"] .hero h1 { max-width: 9.5em; font-size: clamp(2.45rem, 5.4vw, 4.2rem); line-height: 1.05; } [data-theme="institution"] .hero-sub { color: var(--ink-soft); font-size: 1.12rem; } [data-theme="institution"] .hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; } [data-theme="institution"] .hero-visual { position: relative; justify-self: end; width: min(100%, 560px); padding: 1rem; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(90deg, rgba(37,54,77,.06) 1px, transparent 1px), linear-gradient(180deg, rgba(138,31,45,.05) 1px, transparent 1px), rgba(255,253,248,.78); background-size: 34px 34px, 34px 34px, auto; box-shadow: var(--shadow); } [data-theme="institution"] .hero-visual::before, [data-theme="institution"] .hero-visual::after { position: absolute; z-index: 2; border: 1px solid var(--line); background: #fffdf8; color: var(--accent-soft); font-family: var(--serif); box-shadow: 0 14px 28px rgba(32,38,46,.10); } [data-theme="institution"] .hero-visual::before { content: "Review"; left: -.35rem; top: 1rem; padding: .7rem .9rem; border-radius: 12px; color: var(--accent); } [data-theme="institution"] .hero-visual::after { content: "Policy Trust Advisory"; right: -.25rem; bottom: 1.1rem; padding: .65rem .8rem; border-radius: 999px; font-family: var(--mono); font-size: .72rem; } [data-theme="institution"] .hero-svg { max-width: 500px; } [data-theme="institution"] .hero-svg .hv2-glow { fill: var(--accent); opacity: .34; } [data-theme="institution"] .hero-svg .hv2-win, [data-theme="institution"] .hero-svg .hv-card, [data-theme="institution"] .hero-svg .hv-panel { fill: #fffdf8; stroke: #d9cfbd; } [data-theme="institution"] .section-head { margin: 3.2rem 0 1.15rem; padding-bottom: .7rem; border-bottom: 1px solid var(--line); align-items: flex-end; } [data-theme="institution"] .section-head h2 { color: var(--ink); font-size: 1.22rem; text-transform: none; letter-spacing: 0; } [data-theme="institution"] .section-head a { color: var(--accent); } [data-theme="institution"] .feature { grid-template-columns: minmax(280px, .82fr) minmax(0, 1.18fr); gap: 0; padding: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface); box-shadow: var(--shadow); } [data-theme="institution"] .feature.no-cover { grid-template-columns: 1fr; } [data-theme="institution"] .feature .cover { min-height: 310px; height: 100%; border-radius: 0; box-shadow: none; background: linear-gradient(140deg, rgba(138,31,45,.76), rgba(37,54,77,.72)), linear-gradient(180deg, #fffdf8, #d9cfbd); } [data-theme="institution"] .feature .cover::after { background: linear-gradient(90deg, rgba(255,255,255,.22) 1px, transparent 1px), linear-gradient(180deg, rgba(255,255,255,.20) 1px, transparent 1px); background-size: 28px 28px; } [data-theme="institution"] .feature > div:not(.cover) { padding: 2.2rem 2.5rem; } [data-theme="institution"] .feature h3 { max-width: 13em; } [data-theme="institution"] .feature-more { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } [data-theme="institution"] .post-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: .9rem; } [data-theme="institution"] .post-item { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line); background: transparent; } [data-theme="institution"] .post-item:hover { background: rgba(255,253,248,.62); } [data-theme="institution"] .post-item .num { padding: 0; color: var(--accent); font-family: var(--serif); font-size: 1.72rem; line-height: 1; } [data-theme="institution"] .post-item > div:not(.num) { padding: 0; } [data-theme="institution"] .post-item h3 { margin-top: 0; font-size: 1.24rem; } [data-theme="institution"] .post-item p { color: var(--muted); } [data-theme="institution"] .tag { border: 1px solid rgba(138,31,45,.18); border-radius: 999px; background: var(--accent-wash); color: var(--accent); } [data-theme="institution"] .tag:hover { background: var(--accent); color: #fff; } [data-theme="institution"] .btn { border-radius: 8px; border-color: var(--line); background: var(--surface); } [data-theme="institution"] .btn:hover { border-color: var(--accent); color: var(--accent); } [data-theme="institution"] .btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 12px 26px rgba(138,31,45,.20); } [data-theme="institution"] .link-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); } [data-theme="institution"] .card, [data-theme="institution"] .link-card, [data-theme="institution"] .pager a, [data-theme="institution"] .toc, [data-theme="institution"] .searchbox input { border-color: var(--line); background: rgba(255,253,248,.90); } [data-theme="institution"] .card:hover, [data-theme="institution"] .link-card:hover { border-color: rgba(138,31,45,.34); box-shadow: var(--shadow); } [data-theme="institution"] .lc-cover, [data-theme="institution"] .article-cover { background: linear-gradient(90deg, rgba(255,255,255,.24) 1px, transparent 1px), linear-gradient(180deg, rgba(255,255,255,.22) 1px, transparent 1px), linear-gradient(135deg, var(--accent), var(--accent-soft)); background-size: 24px 24px, 24px 24px, auto; } [data-theme="institution"] .lc-mono { background: linear-gradient(135deg, var(--accent), var(--accent-soft)); color: #fff; } [data-theme="institution"] .page-head, [data-theme="institution"] .article-head, [data-theme="institution"] .article-foot { border-color: var(--line); } [data-theme="institution"] .article-head .kicker, [data-theme="institution"] .page-head .eyebrow { color: var(--accent); letter-spacing: 0; } [data-theme="institution"] .article-head h1 { font-family: var(--serif); } [data-theme="institution"] .prose blockquote { border-left-color: var(--accent); background: var(--accent-wash); border-radius: 0 10px 10px 0; } [data-theme="institution"] .prose code { background: var(--line-soft); } [data-theme="institution"] .prose pre { background: var(--code-bg); } [data-theme="institution"] .pagination a, [data-theme="institution"] .pagination span { border-radius: 8px; } [data-theme="institution"] .site-footer { background: #fffdf8; border-top-color: var(--line); } /* ===================================================================== 主题十七 · 作品 Studio —— 设计、摄影、建筑、品牌工作室作品集 ===================================================================== */ :root[data-theme="studio"] { --bg: #f7f7f2; --surface: #ffffff; --ink: #111111; --ink-soft: #333333; --muted: #6d6a64; --faint: #aaa59a; --line: #d8d4c9; --line-soft: #efeee7; --accent: #ff4f5e; --accent-soft: #111111; --accent-wash: #fff0f1; --code-bg: #151515; --radius: 4px; --shadow: 0 1px 2px rgba(17,17,17,.04), 0 20px 52px rgba(17,17,17,.11); } [data-theme="studio"] body { font-family: var(--sans); letter-spacing: 0; background-color: var(--bg); background-image: linear-gradient(90deg, rgba(17,17,17,.045) 1px, transparent 1px), linear-gradient(180deg, rgba(255,79,94,.035) 1px, transparent 1px); background-size: 64px 64px, 64px 64px; } [data-theme="studio"] h1, [data-theme="studio"] h2, [data-theme="studio"] h3, [data-theme="studio"] h4 { font-family: var(--sans); font-weight: 850; letter-spacing: 0; } [data-theme="studio"] .site-header { background: rgba(247,247,242,.90); border-bottom: 1px solid var(--ink); } [data-theme="studio"] .site-header .wrap { height: 68px; } [data-theme="studio"] .site-header .brand { font-family: var(--sans); font-weight: 900; color: var(--ink); text-transform: uppercase; } [data-theme="studio"] .site-header .brand::before { content: ""; width: 30px; height: 30px; flex: none; border-radius: 50%; background: linear-gradient(90deg, var(--accent) 0 50%, var(--ink) 50% 100%); } [data-theme="studio"] .brand small { color: var(--muted); } [data-theme="studio"] .nav { gap: .65rem; } [data-theme="studio"] .nav a { color: var(--ink-soft); padding: .28rem .58rem; border: 1px solid transparent; border-radius: 999px; } [data-theme="studio"] .nav a:hover, [data-theme="studio"] .nav a[aria-current="page"] { color: var(--ink); border-color: var(--ink); background: #fff; } [data-theme="studio"] .nav a[aria-current="page"]::after { display: none; } [data-theme="studio"] .hero { padding: 5rem 0 4rem; border-bottom: 1px solid var(--ink); overflow: hidden; } [data-theme="studio"] .hero-inner { grid-template-columns: minmax(0, .88fr) minmax(380px, 1.12fr); gap: 3.5rem; } [data-theme="studio"] .hero .eyebrow { display: inline-flex; padding: .28rem .7rem; border: 1px solid var(--ink); border-radius: 999px; background: #fff; color: var(--ink); letter-spacing: 0; text-transform: uppercase; } [data-theme="studio"] .hero h1 { max-width: 8.6em; font-size: clamp(2.7rem, 6.6vw, 5rem); line-height: .98; text-transform: uppercase; } [data-theme="studio"] .hero-sub { color: var(--ink-soft); font-size: 1.12rem; } [data-theme="studio"] .hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.7rem; } [data-theme="studio"] .hero-visual { position: relative; justify-self: end; width: min(100%, 590px); padding: 0; border: 0; border-radius: 0; background: linear-gradient(135deg, rgba(255,79,94,.18) 0 26%, transparent 26% 100%), linear-gradient(45deg, transparent 0 58%, rgba(17,17,17,.08) 58% 100%); box-shadow: none; } [data-theme="studio"] .hero-visual::before, [data-theme="studio"] .hero-visual::after { content: ""; position: absolute; z-index: 2; border: 1px solid var(--ink); background: #fff; box-shadow: 10px 10px 0 var(--accent); } [data-theme="studio"] .hero-visual::before { width: 120px; height: 84px; left: .4rem; top: 1rem; } [data-theme="studio"] .hero-visual::after { width: 92px; height: 120px; right: .2rem; bottom: 1rem; box-shadow: -10px 10px 0 var(--ink); } [data-theme="studio"] .hero-svg { max-width: 520px; } [data-theme="studio"] .hero-svg .hv2-glow { fill: var(--accent); opacity: .36; } [data-theme="studio"] .hero-svg .hv2-win, [data-theme="studio"] .hero-svg .hv-card, [data-theme="studio"] .hero-svg .hv-panel { fill: #fff; stroke: #111; } [data-theme="studio"] .section-head { margin: 3.3rem 0 1rem; padding: .85rem 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); align-items: center; } [data-theme="studio"] .section-head h2 { color: var(--ink); font-family: var(--mono); font-size: .9rem; text-transform: uppercase; letter-spacing: 0; } [data-theme="studio"] .section-head a { color: var(--accent); } [data-theme="studio"] .feature { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 0; padding: 0; border: 1px solid var(--ink); border-radius: 0; overflow: hidden; background: #fff; box-shadow: var(--shadow); } [data-theme="studio"] .feature.no-cover { grid-template-columns: 1fr; } [data-theme="studio"] .feature .cover { min-height: 340px; height: 100%; border-radius: 0; box-shadow: none; background: linear-gradient(135deg, rgba(17,17,17,.88), rgba(255,79,94,.78)), linear-gradient(180deg, #ffffff, #d8d4c9); } [data-theme="studio"] .feature .cover::after { background: linear-gradient(135deg, transparent 0 44%, rgba(255,255,255,.30) 44% 48%, transparent 48%), linear-gradient(45deg, rgba(255,255,255,.20), transparent 58%); } [data-theme="studio"] .feature > div:not(.cover) { padding: 2rem 2.2rem; } [data-theme="studio"] .feature h3 { font-family: var(--sans); font-size: clamp(1.7rem, 3.4vw, 2.4rem); } [data-theme="studio"] .feature-more { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } [data-theme="studio"] .card { border-radius: 0; border-color: var(--ink); background: #fff; } [data-theme="studio"] .post-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } [data-theme="studio"] .post-item { position: relative; display: block; min-height: 260px; padding: 1.25rem; border: 1px solid var(--ink); border-radius: 0; background: #fff; overflow: hidden; transition: transform var(--speed), box-shadow var(--speed); } [data-theme="studio"] .post-item:nth-child(3n+2) { min-height: 310px; } [data-theme="studio"] .post-item::before { content: ""; position: absolute; inset: auto 1rem 1rem auto; width: 72px; height: 72px; background: var(--accent); opacity: .16; } [data-theme="studio"] .post-item:hover { transform: translateY(-4px); box-shadow: 10px 10px 0 var(--accent); } [data-theme="studio"] .post-item .num { display: inline-flex; margin-bottom: .9rem; padding: 0; color: var(--accent); font-family: var(--mono); font-size: .9rem; font-weight: 800; } [data-theme="studio"] .post-item > div:not(.num) { position: relative; padding: 0; } [data-theme="studio"] .post-item h3 { max-width: 13em; font-size: 1.26rem; text-transform: uppercase; } [data-theme="studio"] .post-item p { color: var(--muted); } [data-theme="studio"] .tag { border: 1px solid var(--ink); border-radius: 999px; background: #fff; color: var(--ink); } [data-theme="studio"] .tag:hover { background: var(--ink); color: #fff; } [data-theme="studio"] .btn { border-radius: 999px; border-color: var(--ink); background: #fff; color: var(--ink); } [data-theme="studio"] .btn:hover { background: var(--ink); color: #fff; } [data-theme="studio"] .btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 14px 28px rgba(255,79,94,.22); } [data-theme="studio"] .link-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); } [data-theme="studio"] .link-card, [data-theme="studio"] .pager a, [data-theme="studio"] .toc, [data-theme="studio"] .searchbox input { border-color: var(--ink); border-radius: 0; background: #fff; } [data-theme="studio"] .link-card:hover { border-color: var(--accent); box-shadow: 8px 8px 0 var(--accent-wash); } [data-theme="studio"] .lc-cover, [data-theme="studio"] .article-cover { background: linear-gradient(135deg, rgba(255,255,255,.24) 0 18%, transparent 18% 100%), linear-gradient(135deg, var(--ink), var(--accent)); } [data-theme="studio"] .lc-mono { background: var(--ink); color: #fff; } [data-theme="studio"] .page-head, [data-theme="studio"] .article-head, [data-theme="studio"] .article-foot { border-color: var(--ink); } [data-theme="studio"] .article-head .kicker, [data-theme="studio"] .page-head .eyebrow { color: var(--accent); letter-spacing: 0; } [data-theme="studio"] .article-head h1 { font-family: var(--sans); font-weight: 900; text-transform: uppercase; } [data-theme="studio"] .article-cover { border-radius: 0; border: 1px solid var(--ink); } [data-theme="studio"] .prose blockquote { border-left-color: var(--ink); background: var(--accent-wash); border-radius: 0; } [data-theme="studio"] .prose code { background: var(--accent-wash); } [data-theme="studio"] .prose pre { background: var(--code-bg); } [data-theme="studio"] .pagination a, [data-theme="studio"] .pagination span { border-radius: 999px; } [data-theme="studio"] .site-footer { background: #fff; border-top-color: var(--ink); } /* ===================================================================== 主题十八 · 生活 Lifestyle —— 咖啡、民宿、餐厅、买手店、小品牌官网 ===================================================================== */ :root[data-theme="lifestyle"] { --bg: #fbf7ef; --surface: #fffaf2; --ink: #24332a; --ink-soft: #405646; --muted: #786d5d; --faint: #b0a08c; --line: #e6d9c6; --line-soft: #f3eadc; --accent: #2f7d57; --accent-soft: #f2a65a; --accent-wash: #eaf5ee; --code-bg: #263329; --radius: 18px; --shadow: 0 1px 2px rgba(36,51,42,.04), 0 18px 46px rgba(47,125,87,.10); } [data-theme="lifestyle"] body { font-family: var(--sans); letter-spacing: 0; background-color: var(--bg); background-image: linear-gradient(90deg, rgba(47,125,87,.045) 1px, transparent 1px), linear-gradient(180deg, rgba(242,166,90,.055) 1px, transparent 1px); background-size: 52px 52px, 52px 52px; } [data-theme="lifestyle"] h1, [data-theme="lifestyle"] h2, [data-theme="lifestyle"] h3, [data-theme="lifestyle"] h4 { font-family: var(--serif); font-weight: 700; letter-spacing: 0; } [data-theme="lifestyle"] .site-header { background: rgba(251,247,239,.90); border-bottom: 1px solid var(--line); } [data-theme="lifestyle"] .site-header .wrap { height: 72px; } [data-theme="lifestyle"] .site-header .brand { font-family: var(--serif); font-weight: 700; color: var(--ink); } [data-theme="lifestyle"] .site-header .brand::before { content: ""; width: 32px; height: 32px; flex: none; border-radius: 14px 14px 14px 4px; background: linear-gradient(135deg, rgba(255,255,255,.46), transparent 48%), linear-gradient(135deg, var(--accent), var(--accent-soft)); box-shadow: 0 12px 24px rgba(47,125,87,.14); } [data-theme="lifestyle"] .brand small { color: var(--muted); } [data-theme="lifestyle"] .nav a { color: var(--ink-soft); padding: .32rem .66rem; border-radius: 999px; } [data-theme="lifestyle"] .nav a:hover, [data-theme="lifestyle"] .nav a[aria-current="page"] { color: var(--accent); background: var(--accent-wash); } [data-theme="lifestyle"] .nav a[aria-current="page"]::after { display: none; } [data-theme="lifestyle"] .hero { padding: 4.4rem 0 3.4rem; border-bottom: 0; } [data-theme="lifestyle"] .hero-inner { grid-template-columns: minmax(0, 1fr); gap: 2rem; text-align: center; } [data-theme="lifestyle"] .hero-text { max-width: 760px; margin: 0 auto; } [data-theme="lifestyle"] .hero .eyebrow { display: inline-flex; padding: .32rem .82rem; border-radius: 999px; background: #fff3df; color: #9a5a13; letter-spacing: 0; text-transform: none; } [data-theme="lifestyle"] .hero h1 { max-width: 10em; margin-left: auto; margin-right: auto; font-size: clamp(2.45rem, 5.8vw, 4.25rem); line-height: 1.06; } [data-theme="lifestyle"] .hero-sub { max-width: 54ch; margin-left: auto; margin-right: auto; color: var(--ink-soft); font-size: 1.12rem; } [data-theme="lifestyle"] .hero-cta { display: flex; justify-content: center; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; } [data-theme="lifestyle"] .hero-visual { position: relative; width: min(100%, 760px); margin: 0 auto; padding: 1rem; border: 1px solid var(--line); border-radius: 32px; background: linear-gradient(135deg, rgba(47,125,87,.10), transparent 42%), linear-gradient(45deg, rgba(242,166,90,.12), transparent 52%), rgba(255,250,242,.72); box-shadow: var(--shadow); } [data-theme="lifestyle"] .hero-visual::before, [data-theme="lifestyle"] .hero-visual::after { position: absolute; z-index: 2; border: 1px solid var(--line); background: #fffaf2; color: var(--accent); box-shadow: 0 12px 28px rgba(36,51,42,.10); } [data-theme="lifestyle"] .hero-visual::before { content: "Seasonal"; left: 1rem; top: .9rem; padding: .55rem .78rem; border-radius: 999px; font-family: var(--serif); } [data-theme="lifestyle"] .hero-visual::after { content: "menu stay shop"; right: 1rem; bottom: .9rem; padding: .55rem .75rem; border-radius: 14px; color: #9a5a13; font-family: var(--mono); font-size: .72rem; } [data-theme="lifestyle"] .hero-svg { max-width: 500px; } [data-theme="lifestyle"] .hero-svg .hv2-glow { fill: var(--accent-soft); opacity: .38; } [data-theme="lifestyle"] .hero-svg .hv2-win, [data-theme="lifestyle"] .hero-svg .hv-card, [data-theme="lifestyle"] .hero-svg .hv-panel { fill: #fffaf2; stroke: #e6d9c6; } [data-theme="lifestyle"] .section-head { flex-direction: column; align-items: center; justify-content: center; gap: .35rem; margin: 3.2rem 0 1.2rem; text-align: center; } [data-theme="lifestyle"] .section-head h2 { color: var(--ink); font-size: 1.32rem; text-transform: none; letter-spacing: 0; } [data-theme="lifestyle"] .section-head h2::after { content: ""; display: block; width: 46px; height: 2px; margin: .6rem auto 0; background: var(--accent-soft); } [data-theme="lifestyle"] .section-head a { color: var(--accent); } [data-theme="lifestyle"] .feature { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 0; padding: 0; border: 1px solid var(--line); border-radius: 28px; overflow: hidden; background: var(--surface); box-shadow: var(--shadow); } [data-theme="lifestyle"] .feature.no-cover { grid-template-columns: 1fr; } [data-theme="lifestyle"] .feature .cover { min-height: 320px; height: 100%; border-radius: 0; box-shadow: none; background: linear-gradient(135deg, rgba(47,125,87,.72), rgba(242,166,90,.66)), linear-gradient(180deg, #fffaf2, #e6d9c6); } [data-theme="lifestyle"] .feature .cover::after { background: linear-gradient(135deg, rgba(255,255,255,.30), transparent 58%), repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 1px, transparent 1px 16px); } [data-theme="lifestyle"] .feature > div:not(.cover) { padding: 2.2rem 2.5rem; } [data-theme="lifestyle"] .feature h3 { font-size: clamp(1.7rem, 3.2vw, 2.3rem); } [data-theme="lifestyle"] .feature-more { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } [data-theme="lifestyle"] .card { border-radius: 20px; border-color: var(--line); background: rgba(255,250,242,.90); box-shadow: 0 10px 28px rgba(47,125,87,.06); } [data-theme="lifestyle"] .post-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } [data-theme="lifestyle"] .post-item { display: block; padding: 1.2rem; border: 1px solid var(--line); border-radius: 24px; background: rgba(255,250,242,.92); box-shadow: 0 12px 28px rgba(47,125,87,.06); } [data-theme="lifestyle"] .post-item:hover { transform: translateY(-3px); border-color: rgba(47,125,87,.36); box-shadow: var(--shadow); } [data-theme="lifestyle"] .post-item .num { display: inline-grid; place-items: center; width: 40px; height: 40px; margin-bottom: .85rem; padding: 0; border-radius: 14px; background: #fff3df; color: #9a5a13; font-family: var(--mono); font-size: .86rem; font-weight: 800; } [data-theme="lifestyle"] .post-item > div:not(.num) { padding: 0; } [data-theme="lifestyle"] .post-item h3 { font-size: 1.18rem; } [data-theme="lifestyle"] .post-item p { color: var(--muted); } [data-theme="lifestyle"] .tag { border-radius: 999px; background: var(--accent-wash); color: var(--accent); } [data-theme="lifestyle"] .tag:hover { background: var(--accent); color: #fff; } [data-theme="lifestyle"] .btn { border-radius: 999px; border-color: var(--line); background: var(--surface); } [data-theme="lifestyle"] .btn:hover { border-color: var(--accent); color: var(--accent); } [data-theme="lifestyle"] .btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 14px 30px rgba(47,125,87,.18); } [data-theme="lifestyle"] .link-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } [data-theme="lifestyle"] .link-card, [data-theme="lifestyle"] .pager a, [data-theme="lifestyle"] .toc, [data-theme="lifestyle"] .searchbox input { border-color: var(--line); border-radius: 22px; background: rgba(255,250,242,.92); } [data-theme="lifestyle"] .link-card:hover { border-color: rgba(47,125,87,.36); box-shadow: var(--shadow); } [data-theme="lifestyle"] .lc-cover, [data-theme="lifestyle"] .article-cover { background: linear-gradient(135deg, rgba(255,255,255,.24), transparent 52%), linear-gradient(135deg, var(--accent), var(--accent-soft)); } [data-theme="lifestyle"] .lc-mono { background: linear-gradient(135deg, var(--accent), var(--accent-soft)); color: #fff; } [data-theme="lifestyle"] .page-head, [data-theme="lifestyle"] .article-head, [data-theme="lifestyle"] .article-foot { border-color: var(--line); } [data-theme="lifestyle"] .article-head .kicker, [data-theme="lifestyle"] .page-head .eyebrow { color: var(--accent); letter-spacing: 0; } [data-theme="lifestyle"] .article-head h1 { font-family: var(--serif); } [data-theme="lifestyle"] .prose blockquote { border-left-color: var(--accent-soft); background: #fff3df; border-radius: 0 16px 16px 0; } [data-theme="lifestyle"] .prose code { background: var(--accent-wash); } [data-theme="lifestyle"] .prose pre { background: var(--code-bg); } [data-theme="lifestyle"] .pagination a, [data-theme="lifestyle"] .pagination span { border-radius: 999px; } [data-theme="lifestyle"] .site-footer { background: #fffaf2; border-top-color: var(--line); } @media (max-width: 980px) { [data-theme="exchange"] .post-list, [data-theme="garment"] .post-list, [data-theme="lifestyle"] .post-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 860px) { [data-theme="product"] .hero-inner, [data-theme="product"] .feature, [data-theme="exchange"] .hero-inner, [data-theme="exchange"] .feature, [data-theme="academy"] .hero-inner, [data-theme="academy"] .feature, [data-theme="garment"] .hero-inner, [data-theme="garment"] .feature, [data-theme="institution"] .hero-inner, [data-theme="institution"] .feature, [data-theme="studio"] .hero-inner, [data-theme="studio"] .feature, [data-theme="lifestyle"] .feature { grid-template-columns: 1fr; } [data-theme="product"] .hero-visual, [data-theme="exchange"] .hero-visual, [data-theme="garment"] .hero-visual, [data-theme="institution"] .hero-visual, [data-theme="studio"] .hero-visual { justify-self: stretch; } } @media (max-width: 700px) { [data-theme="product"] .feature-more, [data-theme="exchange"] .post-list, [data-theme="exchange"] .feature-more, [data-theme="academy"] .feature-more, [data-theme="garment"] .post-list, [data-theme="garment"] .feature-more, [data-theme="institution"] .feature-more, [data-theme="studio"] .post-list, [data-theme="studio"] .feature-more, [data-theme="lifestyle"] .post-list, [data-theme="lifestyle"] .feature-more { grid-template-columns: 1fr; } [data-theme="institution"] .post-item { grid-template-columns: 52px minmax(0, 1fr); } [data-theme="academy"] .post-item { grid-template-columns: 52px minmax(0, 1fr); padding: 1rem; } } .tweak { margin-top: 1.6rem; border-top: 1px solid var(--line); padding-top: 1.2rem; } .tweak-toggle { display: flex; align-items: center; gap: .6rem; font-size: .92rem; cursor: pointer; } .tweak-row { display: grid; grid-template-columns: auto 1fr; gap: 1.6rem; margin-top: 1rem; align-items: center; } .color-field { display: flex; align-items: center; gap: .6rem; } .color-field input[type=color] { width: 46px; height: 36px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: none; cursor: pointer; } .color-hex { font-family: var(--mono); font-size: .85rem; color: var(--muted); } .radius-val { font-family: var(--mono); font-size: .82rem; color: var(--accent); } input[type=range] { accent-color: var(--accent); } @media (max-width: 560px) { .tweak-row { grid-template-columns: 1fr; } } /* ===== 多语种 i18n ===== */ /* 页眉语言切换器（零 JS 的 details/summary 下拉） */ /* 语言切换器：比主导航更小更弱，并用细分隔线与导航区分 */ .lang-switch { position: relative; display: flex; align-items: center; align-self: center; margin-left: .3rem; padding-left: .9rem; border-left: 1px solid var(--line); } .lang-switch > summary { list-style: none; display: inline-flex; align-items: center; gap: .3rem; line-height: 1; cursor: pointer; color: var(--muted); font-size: .8rem; font-weight: 500; user-select: none; } .lang-switch > summary::-webkit-details-marker { display: none; } .lang-switch > summary::marker { content: ""; } .lang-switch > summary:hover, .lang-switch[open] > summary { color: var(--accent); } .lang-switch .lang-globe { display: block; flex: none; width: 14px; height: 14px; } .lang-switch .lang-cur { line-height: 1; } .lang-menu { position: absolute; right: 0; top: calc(100% + .55rem); margin: 0; padding: .3rem; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.12); min-width: 150px; z-index: 60; } .lang-menu li a { display: block; padding: .45rem .7rem; border-radius: 7px; color: var(--ink-soft); font-size: .9rem; white-space: nowrap; } .lang-menu li a:hover { background: var(--accent-wash); color: var(--accent); } .lang-menu li a.on { color: var(--accent); font-weight: 600; } @media (max-width: 720px) { .lang-switch .lang-cur { display: none; } } /* 后台：内容语种切换标签 */ .lang-tabs { display: inline-flex; gap: .25rem; margin: 0 0 1.2rem; padding: .25rem; background: var(--line-soft); border-radius: 10px; } .lang-tabs a { padding: .4rem .9rem; border-radius: 7px; font-size: .86rem; color: var(--muted); font-weight: 500; } .lang-tabs a:hover { color: var(--ink); } .lang-tabs a.active { background: var(--surface); color: var(--accent); box-shadow: 0 1px 2px rgba(0,0,0,.08); } /* 语种小标 */ .lang-chip { display: inline-block; font-family: var(--mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; background: var(--accent-wash); color: var(--accent); padding: .12rem .42rem; border-radius: 5px; font-weight: 700; } .lang-static { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; } /* 后台：互译版本卡片 */ .trans-box { margin-top: 1.5rem; padding: 1.2rem 1.4rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); } .trans-box h3 { font-family: var(--serif); font-size: 1.05rem; margin: 0 0 .2rem; } .trans-list { display: flex; flex-direction: column; gap: .45rem; margin-bottom: .9rem; } .trans-link { display: flex; align-items: center; gap: .6rem; padding: .55rem .75rem; border: 1px solid var(--line); border-radius: 9px; color: var(--ink-soft); } .trans-link:hover { border-color: var(--accent); color: var(--accent); } .trans-link .trans-title { font-weight: 600; flex: 1; } .trans-actions { display: flex; flex-wrap: wrap; gap: .5rem; } .trans-actions form { display: inline; margin: 0; } /* 语言设置表 */ .lang-table th.center, .lang-table td.center { text-align: center; } .lang-table input[type=checkbox], .lang-table input[type=radio] { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; } /* 柔色按钮（翻译动作） */ .btn-soft { background: var(--accent-wash); color: var(--accent); border-color: transparent; } .btn-soft:hover { background: var(--accent); color: #fff; } /* 页脚社交链接 */ .site-footer .f-col a.soc { display: flex; align-items: center; gap: .45rem; } .site-footer .f-col a.soc svg { width: 16px; height: 16px; flex: none; opacity: .85; } /* 后台社交链接行编辑 */ .social-rows { margin-bottom: .6rem; } .social-row { display: grid; grid-template-columns: 1fr 150px 36px; gap: .5rem; margin-bottom: .5rem; align-items: center; } .social-row input { width: 100%; padding: .5rem .7rem; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--ink); font: inherit; font-size: .9rem; line-height: 1.45; } .social-row input:focus { outline: none; border-color: var(--accent); } .social-del { display: grid; place-items: center; height: 36px; border: 1px solid var(--line); border-radius: 7px; background: none; color: var(--muted); cursor: pointer; } .social-del:hover { border-color: var(--accent); color: var(--accent); } @media (max-width: 560px) { .social-row { grid-template-columns: 1fr 36px; } .social-row input[name="social_label"] { grid-column: 1; } } .social-del svg, .menu-del svg { display: block; } /* 导航菜单编辑器 */ .menu-row { display: flex; align-items: flex-start; gap: .6rem; padding: .7rem; margin-bottom: .55rem; border: 1px solid var(--line); border-radius: 9px; background: var(--line-soft); } .menu-row.dragging { opacity: .45; } .menu-row .drag-handle { cursor: grab; color: var(--faint); user-select: none; padding-top: .5rem; line-height: 1; } .menu-fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .45rem; } .menu-url { width: 100%; padding: .5rem .7rem; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--ink); font: inherit; font-size: .9rem; line-height: 1.45; } .menu-url:focus { outline: none; border-color: var(--accent); } .menu-labels { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .45rem; } .menu-label { display: flex; align-items: center; gap: .4rem; } .menu-label .ml-lang { flex: none; font-size: .74rem; color: var(--muted); min-width: 2.4rem; } .menu-label input { flex: 1; min-width: 0; padding: .42rem .6rem; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--ink); font: inherit; font-size: .88rem; line-height: 1.45; } .menu-label input:focus { outline: none; border-color: var(--accent); } .menu-del { flex: none; display: grid; place-items: center; width: 32px; height: 32px; margin-top: .1rem; border: 1px solid var(--line); border-radius: 7px; background: none; color: var(--muted); cursor: pointer; } .menu-del:hover { border-color: #b3261e; color: #b3261e; background: rgba(179,38,30,.07); } .menu-foot { display: flex; gap: .6rem; align-items: center; margin-top: .2rem; }