/* ============================================================= Optional theme: "PRINT" — clean white silkscreen look using the Google brand palette. Activated by adding `theme-google` to . The default WYSE-terminal theme remains untouched. Palette: Google Blue #4285F4 coarse halftone dots on cells Google Green #34A853 primary / start cell / valid status Google Yellow #FBBC04 visited cells / win status Google Red #EA4335 probed-blocked cells / error status ============================================================= */ body.theme-google { /* Re-map the design-system tokens to the print palette. Anything in the base CSS that references var(--phosphor)/var(--amber)/etc picks up automatically. */ --bg: #f1f3f4; --panel: #ffffff; --panel-2: #f8f9fa; --border: #dadce0; --border-bright: #9aa0a6; --text: #202124; --text-dim: #5f6368; --text-muted: #80868b; --phosphor: #34A853; --phosphor-bright: #2e9748; --amber: #FBBC04; --error: #EA4335; --google-blue: #4285F4; } /* --- background: drop the green CRT scanlines, go flat white --- */ body.theme-google { background-image: none; background-color: var(--bg); } /* --- app shell: subtle paper drop-shadow instead of phosphor glow --- */ body.theme-google #app { border-color: var(--border); box-shadow: 0 0 0 1px rgba(0,0,0,0.03), 0 4px 16px -2px rgba(0,0,0,0.10), 0 12px 40px -10px rgba(0,0,0,0.15); } body.theme-google #app::before { /* status pulse dot — keep it, but make it Google Green without glow */ box-shadow: none; } /* --- header: kill the phosphor text shadow, keep the VT323 character --- */ body.theme-google .ascii-title { text-shadow: none; } /* --- pills (board / L-move buttons): outlined, Google-Green active --- */ body.theme-google .pill { background: var(--panel-2); color: var(--text-dim); } body.theme-google .pill:hover { color: var(--phosphor); } body.theme-google .pill.active { background: rgba(52, 168, 83, 0.08); box-shadow: none; /* no glow in print mode */ } /* --- info panel: kill all the phosphor text-shadows --- */ body.theme-google .info { background: var(--panel-2); } body.theme-google .info-row .val.status, body.theme-google .info-row .val.status.error, body.theme-google .info-row .val.status.win { text-shadow: none; } /* --- grid: light frame --- */ body.theme-google .grid { background: var(--panel-2); border-color: var(--border); } /* --- cells: coarse blue halftone silkscreen on white ----------------- The dot grid is sized so each 56px cell shows ~7×7 dots. The dots have a slightly randomized-feeling alignment by offsetting the pattern, and we use radial-gradient with a hard cutoff to avoid anti-aliased fuzz that would soften the silkscreen vibe. */ body.theme-google .cell { background-color: #ffffff; background-image: radial-gradient(circle at center, var(--google-blue) 0, var(--google-blue) 1.7px, transparent 2px); background-size: 8px 8px; background-position: 4px 4px; /* offsets the dots off the grid lines */ border-color: var(--border); color: var(--text); } body.theme-google .cell:hover:not(.visited):not([data-locked="1"]) { border-color: var(--phosphor); color: var(--phosphor); } /* Probed-blocked cells: same halftone idea but in Google Red, slightly denser to read as "deny". */ body.theme-google .cell.blocked { background-color: #ffffff; background-image: radial-gradient(circle at center, var(--error) 0, var(--error) 2px, transparent 2.4px); background-size: 7px 7px; background-position: 3.5px 3.5px; border-color: rgba(234, 67, 53, 0.35); color: transparent; cursor: not-allowed; } body.theme-google .cell.blocked:hover { border-color: rgba(234, 67, 53, 0.35); color: transparent; } /* Start cell: keep the dashed ring, Google Green */ body.theme-google .cell.start::before { border-color: var(--phosphor); } /* Visited / current: solid Google Yellow, no halftone, no glow */ body.theme-google .cell.visited { background-image: none; background-color: var(--amber); border-color: #e3a700; color: #202124; text-shadow: none; } body.theme-google .cell.current { background-image: none; background-color: var(--amber); box-shadow: 0 0 0 2px #c79100; } body.theme-google .cell .step { color: var(--amber); background: #202124; } /* --- PIN display: no glow, crisp digits --- */ body.theme-google .pin { background: var(--panel-2); } body.theme-google .pin code, body.theme-google .pin code.complete { text-shadow: none; } /* --- legend dots: match the cell rendering at miniature scale --- */ body.theme-google .cell-dot.blocked { background-color: #ffffff; background-image: radial-gradient(circle at center, var(--error) 0, var(--error) 0.9px, transparent 1.2px); background-size: 3px 3px; border-color: rgba(234, 67, 53, 0.35); } body.theme-google .cell-dot.open { background-color: #ffffff; background-image: radial-gradient(circle at center, var(--google-blue) 0, var(--google-blue) 0.9px, transparent 1.2px); background-size: 3px 3px; border-color: var(--border); } body.theme-google .cell-dot.start { background: #ffffff; border-color: var(--phosphor); } body.theme-google .cell-dot.visited { background: var(--amber); border-color: #e3a700; } body.theme-google .cell-dot.current { background: var(--amber); border-color: #c79100; box-shadow: 0 0 0 1px #c79100; } /* --- toast: white card with red border --- */ body.theme-google .toast { background: #ffffff; color: var(--error); border-color: var(--error); box-shadow: 0 4px 16px rgba(0,0,0,0.12); } /* --- offline / error states inherit from --error which is now red --- */ body.theme-google #app.offline::before { box-shadow: none; } /* --- theme toggle button itself, in the header corner --- */ body.theme-google .theme-toggle:hover { border-color: var(--phosphor); color: var(--phosphor); }