50 lines
3.8 KiB
CSS
50 lines
3.8 KiB
CSS
/* tech-sharing — 技术分享 dark, code-forward */
|
|
.tpl-tech-sharing{
|
|
--bg:#0d1117;--bg-soft:#161b22;--surface:#161b22;--surface-2:#1c2230;
|
|
--border:rgba(139,148,158,.22);--border-strong:rgba(139,148,158,.4);
|
|
--text-1:#e6edf3;--text-2:#8b949e;--text-3:#6e7681;
|
|
--accent:#7ee787;--accent-2:#79c0ff;--accent-3:#ff7b72;
|
|
--grad:linear-gradient(120deg,#7ee787 0%,#79c0ff 60%,#d2a8ff 100%);
|
|
--radius:14px;--radius-lg:20px;
|
|
--shadow:0 20px 60px rgba(0,0,0,.5);
|
|
font-family:'Inter','Noto Sans SC',sans-serif;
|
|
}
|
|
.tpl-tech-sharing{background:#0d1117;color:var(--text-1)}
|
|
.tpl-tech-sharing .slide{padding:72px 96px;background:#0d1117;color:var(--text-1)}
|
|
.tpl-tech-sharing .slide::before{content:"";position:absolute;inset:0;background:
|
|
radial-gradient(60% 50% at 90% 10%,rgba(121,192,255,.12),transparent 60%),
|
|
radial-gradient(50% 50% at 10% 90%,rgba(126,231,135,.08),transparent 60%);
|
|
pointer-events:none;z-index:0}
|
|
.tpl-tech-sharing .slide>*{position:relative;z-index:1}
|
|
.tpl-tech-sharing .h1{font-size:78px;line-height:1.03;font-weight:800;letter-spacing:-.03em;color:#fff}
|
|
.tpl-tech-sharing .h2{font-size:54px;font-weight:700;letter-spacing:-.025em;color:#fff}
|
|
.tpl-tech-sharing h3,.tpl-tech-sharing h4{color:#fff}
|
|
.tpl-tech-sharing .kicker{color:var(--accent);font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:600;text-transform:none;letter-spacing:.02em}
|
|
.tpl-tech-sharing .kicker::before{content:"> "}
|
|
.tpl-tech-sharing .mono{font-family:'JetBrains Mono','IBM Plex Mono',monospace}
|
|
.tpl-tech-sharing .terminal{background:#010409;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.6);font-family:'JetBrains Mono',monospace;font-size:15px;line-height:1.65}
|
|
.tpl-tech-sharing .terminal .bar{display:flex;align-items:center;gap:8px;padding:12px 16px;background:#161b22;border-bottom:1px solid var(--border);font-size:12px;color:var(--text-3)}
|
|
.tpl-tech-sharing .terminal .dot{width:12px;height:12px;border-radius:50%;background:#ff5f56}
|
|
.tpl-tech-sharing .terminal .dot:nth-child(2){background:#ffbd2e}
|
|
.tpl-tech-sharing .terminal .dot:nth-child(3){background:#27c93f}
|
|
.tpl-tech-sharing .terminal pre{margin:0;padding:24px 28px;color:#e6edf3;overflow:auto;max-height:440px}
|
|
.tpl-tech-sharing .kw{color:#ff7b72}
|
|
.tpl-tech-sharing .fn{color:#d2a8ff}
|
|
.tpl-tech-sharing .str{color:#a5d6ff}
|
|
.tpl-tech-sharing .cmt{color:#8b949e;font-style:italic}
|
|
.tpl-tech-sharing .num{color:#79c0ff}
|
|
.tpl-tech-sharing .card{background:var(--surface);border:1px solid var(--border);box-shadow:none}
|
|
.tpl-tech-sharing .card-accent{border-top:3px solid var(--accent)}
|
|
.tpl-tech-sharing .pill{background:var(--surface-2);color:var(--text-2);border-color:var(--border)}
|
|
.tpl-tech-sharing .pill-accent{background:rgba(126,231,135,.12);color:var(--accent);border-color:rgba(126,231,135,.35)}
|
|
.tpl-tech-sharing .tag{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:6px;font-family:'JetBrains Mono',monospace;font-size:12px;background:var(--surface-2);border:1px solid var(--border);color:var(--text-2)}
|
|
.tpl-tech-sharing .agenda-row{display:flex;align-items:baseline;gap:24px;padding:18px 0;border-bottom:1px dashed var(--border);font-family:'JetBrains Mono',monospace}
|
|
.tpl-tech-sharing .agenda-row .num{color:var(--accent);flex:none;width:48px}
|
|
.tpl-tech-sharing .agenda-row .t{color:#fff;font-size:24px;flex:1;font-family:'Inter',sans-serif;font-weight:600}
|
|
.tpl-tech-sharing .agenda-row .d{color:var(--text-3);font-size:13px}
|
|
.tpl-tech-sharing .speaker{display:flex;align-items:center;gap:14px;margin-top:28px}
|
|
.tpl-tech-sharing .speaker .av{width:56px;height:56px;border-radius:50%;background:var(--grad)}
|
|
.tpl-tech-sharing .speaker b{display:block;color:#fff;font-size:18px}
|
|
.tpl-tech-sharing .speaker span{color:var(--text-3);font-size:13px;font-family:'JetBrains Mono',monospace}
|
|
.tpl-tech-sharing .lede{color:var(--text-2)}
|