| 1 | /* tpl-presenter-mode-reveal · scoped styles |
| 2 | * Presenter-mode demo deck. Inherits tokens from active theme. |
| 3 | * Minimal overrides — focus is on content + notes structure. |
| 4 | */ |
| 5 | |
| 6 | .tpl-presenter-mode-reveal .slide { |
| 7 | padding: 72px 96px; |
| 8 | } |
| 9 | |
| 10 | .tpl-presenter-mode-reveal .kicker { |
| 11 | font-family: var(--font-mono, monospace); |
| 12 | font-size: 13px; |
| 13 | color: var(--text-3); |
| 14 | letter-spacing: 0.14em; |
| 15 | text-transform: uppercase; |
| 16 | margin: 0 0 18px 0; |
| 17 | } |
| 18 | |
| 19 | .tpl-presenter-mode-reveal .h1 { |
| 20 | font-size: clamp(44px, 5.6vw, 76px); |
| 21 | line-height: 1.12; |
| 22 | letter-spacing: -0.02em; |
| 23 | margin: 0 0 24px 0; |
| 24 | } |
| 25 | |
| 26 | .tpl-presenter-mode-reveal .h2 { |
| 27 | font-size: clamp(32px, 3.6vw, 48px); |
| 28 | line-height: 1.22; |
| 29 | letter-spacing: -0.01em; |
| 30 | margin: 0 0 28px 0; |
| 31 | } |
| 32 | |
| 33 | .tpl-presenter-mode-reveal .lede { |
| 34 | font-size: 20px; |
| 35 | line-height: 1.55; |
| 36 | color: var(--text-2); |
| 37 | } |
| 38 | |
| 39 | .tpl-presenter-mode-reveal .mono { |
| 40 | font-family: var(--font-mono, monospace); |
| 41 | font-size: 0.9em; |
| 42 | padding: 2px 8px; |
| 43 | border-radius: 6px; |
| 44 | background: rgba(255,255,255,0.08); |
| 45 | color: var(--accent, #58a6ff); |
| 46 | } |
| 47 | |
| 48 | .tpl-presenter-mode-reveal .accent { |
| 49 | color: var(--accent, #f0883e); |
| 50 | font-weight: 700; |
| 51 | } |
| 52 | |
| 53 | .tpl-presenter-mode-reveal .speaker { |
| 54 | display: flex; |
| 55 | align-items: center; |
| 56 | gap: 12px; |
| 57 | margin-top: 32px; |
| 58 | } |
| 59 | .tpl-presenter-mode-reveal .speaker .av { |
| 60 | width: 42px; |
| 61 | height: 42px; |
| 62 | border-radius: 50%; |
| 63 | background: linear-gradient(135deg, var(--accent, #58a6ff), #bc8cff); |
| 64 | } |
| 65 | .tpl-presenter-mode-reveal .speaker b { |
| 66 | display: block; |
| 67 | font-size: 16px; |
| 68 | } |
| 69 | .tpl-presenter-mode-reveal .speaker span { |
| 70 | font-size: 13px; |
| 71 | color: var(--text-3); |
| 72 | } |
| 73 | |
| 74 | /* Agenda rows */ |
| 75 | .tpl-presenter-mode-reveal .agenda-row { |
| 76 | display: grid; |
| 77 | grid-template-columns: 48px 1fr auto; |
| 78 | gap: 16px; |
| 79 | align-items: center; |
| 80 | padding: 14px 18px; |
| 81 | border: 1px solid var(--border, rgba(255,255,255,0.1)); |
| 82 | border-radius: 10px; |
| 83 | margin-bottom: 10px; |
| 84 | background: var(--surface, rgba(255,255,255,0.03)); |
| 85 | } |
| 86 | .tpl-presenter-mode-reveal .agenda-row .num { |
| 87 | font-family: var(--font-mono, monospace); |
| 88 | font-size: 14px; |
| 89 | color: var(--accent, #58a6ff); |
| 90 | font-weight: 700; |
| 91 | } |
| 92 | .tpl-presenter-mode-reveal .agenda-row .t { |
| 93 | font-size: 17px; |
| 94 | font-weight: 500; |
| 95 | color: var(--text-1); |
| 96 | } |
| 97 | .tpl-presenter-mode-reveal .agenda-row .d { |
| 98 | font-family: var(--font-mono, monospace); |
| 99 | font-size: 12px; |
| 100 | color: var(--text-3); |
| 101 | } |
| 102 | |
| 103 | /* Cards */ |
| 104 | .tpl-presenter-mode-reveal .card { |
| 105 | background: var(--surface, rgba(255,255,255,0.03)); |
| 106 | border: 1px solid var(--border, rgba(255,255,255,0.1)); |
| 107 | border-radius: 12px; |
| 108 | padding: 22px 24px; |
| 109 | } |
| 110 | .tpl-presenter-mode-reveal .card-accent { |
| 111 | border-top: 3px solid var(--accent, #58a6ff); |
| 112 | } |
| 113 | .tpl-presenter-mode-reveal .card h4 { |
| 114 | margin: 0 0 10px 0; |
| 115 | font-size: 18px; |
| 116 | color: var(--text-1); |
| 117 | } |
| 118 | .tpl-presenter-mode-reveal .card .dim { |
| 119 | color: var(--text-2); |
| 120 | font-size: 14px; |
| 121 | line-height: 1.6; |
| 122 | margin: 0; |
| 123 | } |
| 124 | |
| 125 | /* Feature rows (presenter view features) */ |
| 126 | .tpl-presenter-mode-reveal .feature-row { |
| 127 | display: flex; |
| 128 | gap: 14px; |
| 129 | padding: 14px 0; |
| 130 | border-bottom: 1px solid var(--border, rgba(255,255,255,0.08)); |
| 131 | } |
| 132 | .tpl-presenter-mode-reveal .feature-row:last-child { border-bottom: none; } |
| 133 | .tpl-presenter-mode-reveal .feature-row .num { |
| 134 | font-size: 24px; |
| 135 | font-weight: 700; |
| 136 | line-height: 1; |
| 137 | flex-shrink: 0; |
| 138 | } |
| 139 | .tpl-presenter-mode-reveal .feature-row b { |
| 140 | display: block; |
| 141 | font-size: 17px; |
| 142 | margin-bottom: 4px; |
| 143 | color: var(--text-1); |
| 144 | } |
| 145 | .tpl-presenter-mode-reveal .feature-row .dim { |
| 146 | font-size: 14px; |
| 147 | color: var(--text-2); |
| 148 | line-height: 1.55; |
| 149 | margin: 0; |
| 150 | } |
| 151 | .tpl-presenter-mode-reveal .blue { color: #58a6ff; } |
| 152 | .tpl-presenter-mode-reveal .green { color: #3fb950; } |
| 153 | .tpl-presenter-mode-reveal .orange { color: #f0883e; } |
| 154 | .tpl-presenter-mode-reveal .purple { color: #bc8cff; } |
| 155 | .tpl-presenter-mode-reveal .red { color: #f85149; } |
| 156 | |
| 157 | /* Rule rows (3 铁律) */ |
| 158 | .tpl-presenter-mode-reveal .rule-row { |
| 159 | display: grid; |
| 160 | grid-template-columns: 56px 1fr; |
| 161 | gap: 20px; |
| 162 | align-items: start; |
| 163 | padding: 18px 22px; |
| 164 | border: 1px solid var(--border, rgba(255,255,255,0.1)); |
| 165 | border-radius: 12px; |
| 166 | margin-bottom: 14px; |
| 167 | background: var(--surface, rgba(255,255,255,0.03)); |
| 168 | } |
| 169 | .tpl-presenter-mode-reveal .rule-row .num { |
| 170 | font-size: 28px; |
| 171 | font-weight: 800; |
| 172 | font-family: var(--font-mono, monospace); |
| 173 | line-height: 1; |
| 174 | } |
| 175 | .tpl-presenter-mode-reveal .rule-row b { |
| 176 | display: block; |
| 177 | font-size: 18px; |
| 178 | margin-bottom: 6px; |
| 179 | color: var(--text-1); |
| 180 | } |
| 181 | .tpl-presenter-mode-reveal .rule-row .dim { |
| 182 | font-size: 15px; |
| 183 | color: var(--text-2); |
| 184 | line-height: 1.6; |
| 185 | margin: 0; |
| 186 | } |
| 187 | |
| 188 | /* Code block */ |
| 189 | .tpl-presenter-mode-reveal .code-block { |
| 190 | background: #0d1117; |
| 191 | border: 1px solid rgba(255,255,255,0.1); |
| 192 | border-radius: 12px; |
| 193 | padding: 20px 26px; |
| 194 | font-family: var(--font-mono, "SF Mono", monospace); |
| 195 | font-size: 15px; |
| 196 | line-height: 1.8; |
| 197 | color: #e6edf3; |
| 198 | white-space: pre-wrap; |
| 199 | text-align: left; |
| 200 | } |
| 201 | .tpl-presenter-mode-reveal .code-block .comment { color: #8b949e; } |
| 202 | .tpl-presenter-mode-reveal .code-block .cmd { color: #3fb950; font-weight: 600; } |
| 203 | .tpl-presenter-mode-reveal .code-block .flag { color: #f0883e; } |
| 204 | |
| 205 | /* Stack helper */ |
| 206 | .tpl-presenter-mode-reveal .stack > * + * { margin-top: 0; } |
| 207 | |
| 208 | /* Grid helpers */ |
| 209 | .tpl-presenter-mode-reveal .grid { display: grid; gap: 20px; } |
| 210 | .tpl-presenter-mode-reveal .grid.g2 { grid-template-columns: 1fr 1fr; } |
| 211 | .tpl-presenter-mode-reveal .grid.g3 { grid-template-columns: repeat(3, 1fr); } |
| 212 | |
| 213 | .tpl-presenter-mode-reveal .mt-m { margin-top: 20px; } |
| 214 | .tpl-presenter-mode-reveal .mt-l { margin-top: 32px; } |
| 215 | .tpl-presenter-mode-reveal .mt-s { margin-top: 10px; } |
| 216 | .tpl-presenter-mode-reveal .tc { text-align: center; } |
| 217 |