| 1 | /* dir-key-nav-minimal — 方向键极简 · 8 种 mono-background 切换 */ |
| 2 | .tpl-dir-key-nav-minimal{ |
| 3 | --dk-font:'Inter','Noto Sans SC','PingFang SC',-apple-system,sans-serif; |
| 4 | --dk-mono:'JetBrains Mono',monospace; |
| 5 | background:#000; |
| 6 | color:#fff; |
| 7 | font-family:var(--dk-font); |
| 8 | } |
| 9 | .tpl-dir-key-nav-minimal .slide{padding:80px 104px;overflow:hidden;position:absolute;inset:0} |
| 10 | /* 8 background themes */ |
| 11 | .tpl-dir-key-nav-minimal .t-indigo{background:linear-gradient(135deg,#0f172a 0%,#1e1b4b 100%);color:#fff} |
| 12 | .tpl-dir-key-nav-minimal .t-cream{background:#F5F0E8;color:#1a1a1a} |
| 13 | .tpl-dir-key-nav-minimal .t-crimson{background:linear-gradient(135deg,#7f1d1d 0%,#991b1b 100%);color:#fff} |
| 14 | .tpl-dir-key-nav-minimal .t-emerald{background:linear-gradient(135deg,#052e16 0%,#064e3b 100%);color:#ecfdf5} |
| 15 | .tpl-dir-key-nav-minimal .t-slate{background:linear-gradient(135deg,#0f1923 0%,#1a2942 100%);color:#e6edf3} |
| 16 | .tpl-dir-key-nav-minimal .t-violet{background:linear-gradient(135deg,#1e0a2e 0%,#2e1065 100%);color:#f5f3ff} |
| 17 | .tpl-dir-key-nav-minimal .t-white{background:#ffffff;color:#111216} |
| 18 | .tpl-dir-key-nav-minimal .t-charcoal{background:linear-gradient(135deg,#111827 0%,#1f2937 100%);color:#f3f4f6} |
| 19 | |
| 20 | .tpl-dir-key-nav-minimal .dk-snum{position:absolute;top:30px;right:48px;font-size:11px;font-weight:700;letter-spacing:3px;text-transform:uppercase;font-family:var(--dk-mono)} |
| 21 | .tpl-dir-key-nav-minimal .t-cream .dk-snum, |
| 22 | .tpl-dir-key-nav-minimal .t-white .dk-snum{color:#999} |
| 23 | .tpl-dir-key-nav-minimal .t-indigo .dk-snum, |
| 24 | .tpl-dir-key-nav-minimal .t-crimson .dk-snum, |
| 25 | .tpl-dir-key-nav-minimal .t-emerald .dk-snum, |
| 26 | .tpl-dir-key-nav-minimal .t-slate .dk-snum, |
| 27 | .tpl-dir-key-nav-minimal .t-violet .dk-snum, |
| 28 | .tpl-dir-key-nav-minimal .t-charcoal .dk-snum{color:rgba(255,255,255,.38)} |
| 29 | |
| 30 | .tpl-dir-key-nav-minimal .dk-eyebrow{font-size:12px;font-weight:700;letter-spacing:3.5px;text-transform:uppercase;opacity:.55;margin-bottom:22px;display:flex;align-items:center;gap:14px} |
| 31 | .tpl-dir-key-nav-minimal .dk-eyebrow::after{content:'';flex:1;max-width:120px;height:1px;background:currentColor;opacity:.3} |
| 32 | .tpl-dir-key-nav-minimal .dk-h0{font-size:160px;font-weight:900;line-height:.9;letter-spacing:-5px;margin:0 0 20px} |
| 33 | .tpl-dir-key-nav-minimal .dk-h1{font-size:100px;font-weight:900;line-height:.98;letter-spacing:-3px;margin:0 0 18px} |
| 34 | .tpl-dir-key-nav-minimal .dk-h2{font-size:72px;font-weight:800;line-height:1.05;letter-spacing:-2px;margin:0 0 16px} |
| 35 | .tpl-dir-key-nav-minimal .dk-lede{font-size:26px;line-height:1.45;opacity:.72;max-width:900px;font-weight:300} |
| 36 | .tpl-dir-key-nav-minimal .dk-lede strong{font-weight:700;opacity:1} |
| 37 | .tpl-dir-key-nav-minimal .dk-big{font-family:var(--dk-mono);font-size:240px;font-weight:800;line-height:.9;letter-spacing:-10px} |
| 38 | |
| 39 | .tpl-dir-key-nav-minimal .dk-line{display:block;width:90px;height:4px;background:currentColor;margin:30px 0;opacity:.85} |
| 40 | .tpl-dir-key-nav-minimal .t-indigo .dk-accent{color:#a5b4fc} |
| 41 | .tpl-dir-key-nav-minimal .t-cream .dk-accent{color:#B5392A} |
| 42 | .tpl-dir-key-nav-minimal .t-crimson .dk-accent{color:#fecaca} |
| 43 | .tpl-dir-key-nav-minimal .t-emerald .dk-accent{color:#6ee7b7} |
| 44 | .tpl-dir-key-nav-minimal .t-slate .dk-accent{color:#7dd3fc} |
| 45 | .tpl-dir-key-nav-minimal .t-violet .dk-accent{color:#c4b5fd} |
| 46 | .tpl-dir-key-nav-minimal .t-white .dk-accent{color:#6366f1} |
| 47 | .tpl-dir-key-nav-minimal .t-charcoal .dk-accent{color:#fbbf24} |
| 48 | |
| 49 | .tpl-dir-key-nav-minimal .dk-list{list-style:none;padding:0;margin:28px 0 0;font-family:var(--dk-mono);font-size:22px;line-height:2} |
| 50 | .tpl-dir-key-nav-minimal .dk-list li{padding-left:30px;position:relative;font-weight:400;opacity:.85} |
| 51 | .tpl-dir-key-nav-minimal .dk-list li::before{content:'→';position:absolute;left:0;opacity:.5} |
| 52 | .tpl-dir-key-nav-minimal .dk-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-top:36px} |
| 53 | .tpl-dir-key-nav-minimal .dk-col h3{font-size:28px;font-weight:700;margin-bottom:10px} |
| 54 | .tpl-dir-key-nav-minimal .dk-col p{font-size:19px;line-height:1.55;opacity:.72;font-weight:300} |
| 55 | .tpl-dir-key-nav-minimal .dk-code{font-family:var(--dk-mono);font-size:16px;line-height:1.9;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:24px 28px;margin-top:24px;white-space:pre} |
| 56 | .tpl-dir-key-nav-minimal .t-cream .dk-code, |
| 57 | .tpl-dir-key-nav-minimal .t-white .dk-code{background:rgba(0,0,0,.05);border-color:rgba(0,0,0,.1)} |
| 58 | .tpl-dir-key-nav-minimal .dk-keyhint{position:absolute;bottom:34px;left:104px;font-family:var(--dk-mono);font-size:12px;letter-spacing:2px;text-transform:uppercase;opacity:.45} |
| 59 | .tpl-dir-key-nav-minimal .dk-keyhint kbd{display:inline-block;padding:2px 10px;margin:0 3px;border:1px solid currentColor;border-radius:4px;font-size:12px} |
| 60 | .tpl-dir-key-nav-minimal .dk-page{position:absolute;bottom:34px;right:48px;font-family:var(--dk-mono);font-size:12px;letter-spacing:2px;opacity:.45} |
| 61 |