/* --------------------------------------------------------------------------- Terminal web page — styles Themes are driven by CSS custom properties keyed off . Default + extras live in the [data-theme="..."] blocks below. --------------------------------------------------------------------------- */ /* Solarized Dark (default) */ [data-theme="solarized-dark"] { --bg: #002b36; /* base03 */ --bg-alt: #073642; /* base02 */ --chrome: #073642; --fg: #839496; /* base0 */ --fg-bright: #93a1a1; /* base1 */ --dim: #586e75; /* base01 */ --user: #859900; /* green */ --host: #268bd2; /* blue */ --path: #2aa198; /* cyan */ --sep: #586e75; --dir: #268bd2; /* blue */ --link: #2aa198; /* cyan */ --locked: #dc322f; /* red */ --accent: #b58900; /* yellow */ --border: #586e75; } /* Solarized Light */ [data-theme="solarized-light"] { --bg: #fdf6e3; /* base3 */ --bg-alt: #eee8d5; /* base2 */ --chrome: #eee8d5; --fg: #657b83; /* base00 */ --fg-bright: #586e75; /* base01 */ --dim: #93a1a1; /* base1 */ --user: #859900; --host: #268bd2; --path: #2aa198; --sep: #93a1a1; --dir: #268bd2; --link: #2aa198; --locked: #dc322f; --accent: #b58900; --border: #93a1a1; } /* Dracula */ [data-theme="dracula"] { --bg: #282a36; --bg-alt: #21222c; --chrome: #21222c; --fg: #f8f8f2; --fg-bright: #ffffff; --dim: #6272a4; --user: #50fa7b; --host: #bd93f9; --path: #8be9fd; --sep: #6272a4; --dir: #bd93f9; --link: #8be9fd; --locked: #ff5555; --accent: #f1fa8c; --border: #44475a; } /* Gruvbox Dark */ [data-theme="gruvbox"] { --bg: #282828; --bg-alt: #1d2021; --chrome: #1d2021; --fg: #ebdbb2; --fg-bright: #fbf1c7; --dim: #928374; --user: #b8bb26; --host: #83a598; --path: #8ec07c; --sep: #928374; --dir: #83a598; --link: #8ec07c; --locked: #fb4934; --accent: #fabd2f; --border: #504945; } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; } body { background: #000; color: var(--fg); font-family: Hack, "DejaVu Sans Mono", "SF Mono", Menlo, Consolas, monospace; font-size: 15px; line-height: 1.5; padding: 16px; } .window { position: relative; /* anchors the CRT scanline overlay (body.crt ::after) */ height: calc(100vh - 32px); height: calc(100dvh - 32px); /* dvh tracks mobile browser chrome; vh fallback above */ display: flex; flex-direction: column; border-radius: 8px; overflow: hidden; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5); border: 1px solid var(--border); } /* fake macOS-style title bar */ .titlebar { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: var(--chrome); border-bottom: 1px solid var(--border); user-select: none; flex: 0 0 auto; } .titlebar .dots { display: flex; gap: 8px; } .titlebar .dots i { width: 12px; height: 12px; border-radius: 50%; display: block; } .titlebar .dots i:nth-child(1) { background: #ff5f56; } .titlebar .dots i:nth-child(2) { background: #ffbd2e; } .titlebar .dots i:nth-child(3) { background: #27c93f; } .titlebar .title { font-size: 12px; color: var(--dim); margin: 0 auto; padding-right: 52px; /* visually center, accounting for the dots */ } #screen { flex: 1 1 auto; overflow-y: auto; padding: 16px; background: var(--bg); } #screen::-webkit-scrollbar { width: 10px; } #screen::-webkit-scrollbar-thumb { background: var(--dim); border-radius: 5px; } .line { white-space: pre-wrap; word-break: break-word; } /* wide pre-formatted output (banner, neofetch, tree, weather): scroll instead of wrap-breaking the alignment. No-op on desktop where it already fits. */ .line.block { white-space: pre; word-break: normal; overflow-x: auto; -webkit-overflow-scrolling: touch; } .line.block::-webkit-scrollbar { height: 6px; } .line.block::-webkit-scrollbar-thumb { background: var(--dim); border-radius: 3px; } .dim { color: var(--dim); } /* prompt */ .prompt .p-user { color: var(--user); font-weight: 700; } .prompt .p-at { color: var(--dim); } .prompt .p-host { color: var(--host); font-weight: 700; } .prompt .p-path { color: var(--path); } .prompt .p-sep { color: var(--sep); } /* filesystem coloring (ls) */ .fs-dir { color: var(--dir); font-weight: 700; } .fs-link { color: var(--link); text-decoration: underline; } .fs-locked { color: var(--locked); } .fs-file { color: var(--fg); } /* input line with a custom block cursor */ .input-line { display: flex; align-items: baseline; /* override the pre-wrap inherited from .line so HTML indentation between the prompt and the input doesn't render as a leading gap */ white-space: normal; /* normal white-space trims the prompt's trailing space, so add the gap back (matches the one-space gap on echoed command lines) */ gap: 1ch; } .input-line.hidden { display: none; } .input-wrap { position: relative; flex: 1 1 auto; min-width: 0; } .input-render { display: inline-block; white-space: pre; pointer-events: none; color: var(--fg-bright); } .input-real { position: absolute; inset: 0; width: 100%; border: none; margin: 0; padding: 0; background: transparent; color: transparent; caret-color: transparent; font: inherit; line-height: inherit; outline: none; } .cursor { background: var(--fg-bright); color: var(--bg); animation: blink 1s steps(1) infinite; } @keyframes blink { 50% { background: transparent; color: inherit; } } /* Jurassic Park lock shake */ .shake { animation: shake 0.4s; } @keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } } /* matrix easter egg */ .matrix-overlay { position: fixed; inset: 0; z-index: 9999; background: #000; } /* Jurassic Park easter egg overlay */ .jp-overlay { position: fixed; inset: 0; z-index: 9998; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 16px; background: rgba(0, 0, 0, 0.9); cursor: pointer; } .jp-overlay img { max-width: 80vw; max-height: 68vh; border-radius: 4px; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6); } .jp-caption { margin: 0; color: var(--accent); font-size: 20px; text-align: center; } .jp-hint { margin: 0; color: var(--dim); font-size: 12px; } /* sl — steam locomotive chugging across the screen */ .sl-train { position: fixed; top: 50%; left: 100%; /* start just past the right edge */ margin: 0; z-index: 9997; pointer-events: none; white-space: pre; font-family: inherit; font-size: 13px; line-height: 1.1; color: var(--fg-bright); transform: translate(0, -50%); animation: sl-run 5s linear forwards; } @keyframes sl-run { from { transform: translate(0, -50%); } to { transform: translate(calc(-100vw - 100%), -50%); } } /* hack — Hollywood hacking overlay */ .hack-overlay { position: fixed; inset: 0; z-index: 9998; background: #000; overflow: hidden; cursor: pointer; } .hack-stream { margin: 0; padding: 10px; height: 100%; overflow: hidden; white-space: pre-wrap; word-break: break-all; font-family: inherit; font-size: 14px; line-height: 1.3; color: #1aff1a; opacity: 0.75; text-shadow: 0 0 6px #1aff1a; } .hack-granted { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.55); color: #1aff1a; font-size: clamp(28px, 8vw, 96px); font-weight: 700; letter-spacing: 0.1em; text-shadow: 0 0 16px #1aff1a; } .hack-granted.show { display: flex; animation: hack-pop 0.4s ease-out; } @keyframes hack-pop { from { transform: scale(0.7); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* Konami code — CRT scanline effect */ body.crt #screen { text-shadow: 0 0 3px var(--fg-bright); } body.crt .window::after { content: ""; position: absolute; inset: 0; z-index: 60; pointer-events: none; background: repeating-linear-gradient( to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0.22) 3px ); animation: crt-flicker 0.12s steps(2) infinite; } @keyframes crt-flicker { 0% { opacity: 0.88; } 100% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .cursor { animation: none; } .shake { animation: none; } .sl-train { animation-duration: 0s; } .hack-granted.show { animation: none; } body.crt .window::after { animation: none; } } /* vi/vim editor overlay (full-screen textarea + status line) */ .editor-overlay { position: fixed; inset: 0; z-index: 9998; display: flex; flex-direction: column; background: var(--bg); } .editor-buffer { flex: 1; width: 100%; margin: 0; border: 0; padding: 8px 12px; resize: none; background: var(--bg); color: var(--fg); font-family: inherit; font-size: inherit; line-height: 1.4; outline: none; caret-color: var(--fg-bright); tab-size: 4; } .editor-status { display: flex; align-items: center; gap: 12px; padding: 3px 12px; background: var(--bg-alt); color: var(--fg-bright); border-top: 1px solid var(--border); font-size: 0.9em; min-height: 1.6em; } .editor-status-msg { flex: 1; white-space: pre; overflow: hidden; text-overflow: ellipsis; } .editor-cmd { flex: 2; border: 0; padding: 0; background: transparent; color: var(--fg-bright); font-family: inherit; font-size: inherit; outline: none; } .editor-hint { color: var(--dim); white-space: nowrap; } @media (max-width: 768px) { .editor-hint { display: none; } /* no room for the keybinding hint on phones */ } /* mobile */ @media (max-width: 768px) { /* iOS Safari auto-zooms when focusing an input under 16px, so the input must be >=16px. Keep the whole UI at 16px (not a split size) so the prompt line doesn't visually jump from the output — wide content scrolls via .block. */ body { font-size: 16px; padding: 0; } .window { height: 100vh; height: 100dvh; /* avoids the URL bar clipping the input line */ border-radius: 0; border: none; } .titlebar .title { display: none; } /* full-bleed: keep content clear of the notch / home indicator */ .titlebar { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); padding-top: max(8px, env(safe-area-inset-top)); } #screen { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); padding-bottom: max(16px, env(safe-area-inset-bottom)); } }