/** * Light theme for reveal.js * Dark-on-light, readable, minimal * * Works with White Default base theme from reveal.js * Drop into ~/.revealjs/reveal.js/dist/theme/ */ :root { --bg: #ffffff; --bg-secondary: #f4f4f4; --bg-code: #e8e8e8; --text: #1a1a1a; --text-muted: #555555; --accent: #2563eb; --accent-hover: #1d4ed8; --font-body: "Adwaita Sans", Helvetica, sans-serif; --font-mono: ui-monospace, "SF Mono", Consolas, monospace; --h1-size: 2em; --h2-size: 1.4em; --body-size: 25px; --small-size: 0.65em; --code-size: 0.85em; --pre-size: 0.75em; } .reveal { font-family: var(--font-mono); font-size: var(--body-size); color: var(--text); text-align: left; } .reveal .slides { text-align: left; } .reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 { font-family: var(--font-mono); font-weight: 600; color: var(--text); line-height: 1.1; margin: 0 0 0.5em 0; text-shadow: none; text-transform: uppercase; word-wrap: break-word; } .reveal h1 { font-size: var(--h1-size); font-weight: 700; margin-bottom: 1.6em; } .reveal h2 { font-size: var(--h2-size); margin-bottom: 0.7em; } .reveal h3 { font-size: 1.15em; } .reveal h4 { font-size: 0.9em; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); } .reveal p { line-height: 1.35; margin: 0 0 0.6em 0; } .reveal strong { font-weight: 700; } .reveal em { font-style: italic; } .reveal ul, .reveal ol { display: block; text-align: left; margin: 0 0 0.5em 0; padding-left: 1.2em; } .reveal ul { list-style-type: disc; } .reveal ul ul { list-style-type: square; } .reveal ul ul ul { list-style-type: circle; } .reveal li { margin-bottom: 0.15em; line-height: 1.3; } .reveal li::marker { color: var(--accent); } .reveal code { font-family: var(--font-mono); font-size: var(--code-size); background: var(--bg-code); padding: 0.1em 0.3em; border-radius: 3px; } .reveal pre { font-family: var(--font-mono); font-size: var(--pre-size); background: var(--bg-code); padding: 0.6em 1em; border-radius: 4px; margin: 0 0 0.6em 0; width: 100%; box-sizing: border-box; text-align: left; line-height: 1.4; box-shadow: none; } .reveal pre code { background: none; padding: 0; font-size: 1em; } .reveal blockquote { font-style: italic; color: var(--text-muted); border-left: 4px solid var(--accent); padding: 0.5em 1em; margin: 0 0 1em 0; background: var(--bg-secondary); box-shadow: none; } .reveal blockquote p { margin: 0; } .reveal blockquote p:first-child::before { content: none; } .reveal table { margin: 0 0 0.5em 0; border-collapse: collapse; border-spacing: 0; width: 100%; font-size: 1em; } .reveal table th { font-weight: 600; text-align: left; padding: 0.4em 0.8em; background: var(--bg-secondary); border-bottom: 2px solid var(--accent); border-top: 1px solid rgba(0,0,0,0.1); vertical-align: bottom; } .reveal table td { text-align: left; padding: 0.35em 0.8em; border-bottom: 1px solid rgba(0,0,0,0.08); border-top: 1px solid rgba(0,0,0,0.04); vertical-align: top; } .reveal table tr:first-child td, .reveal table tr:first-child th { border-top: none; } .reveal table tr:last-child td { border-bottom: none; } .reveal table tbody tr:hover td { background: rgba(0,0,0,0.02); } .reveal table th[align="center"], .reveal table td[align="center"] { text-align: center; } .reveal table th[align="right"], .reveal table td[align="right"] { text-align: right; } .reveal table font[size="1"] { font-size: 0.8em; } .reveal table font[size="2"] { font-size: 1em; } .reveal table font[size="3"] { font-size: 1.2em; } .reveal table table { margin: 0; font-size: 1em; } .reveal figure { margin: 0 0 0.5em 0; display: inline-block; max-width: 98%; } .reveal img, .reveal video, .reveal iframe { max-width: 100%; max-height: 75vh; width: auto; height: auto; display: block; } .reveal section img { background: transparent; border: none; box-shadow: none; border-radius: 4px; } .reveal figcaption { font-size: 0.8em; color: var(--text-muted); margin-top: 0.3em; } .reveal a { color: var(--accent); text-decoration: none; transition: color 0.2s ease; } .reveal a:hover { color: var(--accent-hover); text-shadow: none; } .reveal .controls .navigate-left, .reveal .controls .navigate-left.enabled { border-right-color: var(--accent); } .reveal .controls .navigate-right, .reveal .controls .navigate-right.enabled { border-left-color: var(--accent); } .reveal .controls .navigate-up, .reveal .controls .navigate-up.enabled { border-bottom-color: var(--accent); } .reveal .controls .navigate-down, .reveal .controls .navigate-down.enabled { border-top-color: var(--accent); } .reveal .controls .navigate-left.enabled:hover { border-right-color: var(--accent-hover); } .reveal .controls .navigate-right.enabled:hover { border-left-color: var(--accent-hover); } .reveal .controls .navigate-up.enabled:hover { border-bottom-color: var(--accent-hover); } .reveal .controls .navigate-down.enabled:hover { border-top-color: var(--accent-hover); } .reveal .progress { background: rgba(0,0,0,0.1); height: 4px; } .reveal .progress span { background: var(--accent); } .reveal ::selection { background: var(--accent); color: white; } .reveal .columns { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5em; text-align: left; } .reveal .callout { background: var(--bg-secondary); border-left: 4px solid var(--accent); padding: 0.5em 0.8em; margin: 0 0 0.5em 0; border-radius: 0 4px 4px 0; } .reveal .callout-title { font-size: 0.8em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); margin-bottom: 0.3em; } .reveal .tag { display: inline-block; font-size: 0.7em; font-weight: 600; padding: 0.2em 0.6em; background: var(--accent); color: white; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.05em; vertical-align: middle; } .reveal small { font-size: var(--small-size); line-height: 1.4; vertical-align: top; background: transparent; }