diff --git a/web/static/themes/win95.css b/web/static/themes/win95.css index 0d92213..828651d 100644 --- a/web/static/themes/win95.css +++ b/web/static/themes/win95.css @@ -1,89 +1,141 @@ /* =============================== Windows 95 — Nostalgia Mode =============================== */ -/* Palette: - 3D light #FFFFFF - Face #C0C0C0 - Shadow #808080 - Dark #000000 - TitleBar #000080 +/* Palette + notes: + - 3D light: #FFFFFF + - Face: #C0C0C0 + - Dark face: #A0A0A0 + - Shadow: #808080 + - Dark: #000000 + - Title Bar: #000080 + - Text: #000000 */ -html[data-theme="win95"] :root{ - --win95-face: #C0C0C0; - --win95-face-dk: #B3B3B3; /* a touch darker for emphasis (username) */ - --win95-light: #FFFFFF; - --win95-shadow: #808080; - --win95-dark: #000000; - --win95-blue: #000080; - /* keep the top-nav controls consistent everywhere */ - --win95-nav-h: 36px; - --win95-nav-pad-x: 16px; - --win95-font: "Tahoma","MS Sans Serif",system-ui,Segoe UI,Arial,sans-serif; +html[data-theme="win95"] { + --w95-face: #C0C0C0; + --w95-face-dark: #A0A0A0; + --w95-light: #FFFFFF; + --w95-shadow: #808080; + --w95-dark: #000000; + --w95-blue: #000080; } -/* Base */ html[data-theme="win95"] body{ background:#00808010; /* faint teal tint */ color:#000; min-height:100vh; - font-family:var(--win95-font); + font-family: "Tahoma","MS Sans Serif",system-ui,Segoe UI,Arial,sans-serif; } /* Selection */ html[data-theme="win95"] ::selection{ - background:var(--win95-blue); + background:var(--w95-blue); color:#fff; } -/* ---------- Top bar (Title Bar) ---------- */ +/* ---------- Top bar ---------- */ html[data-theme="win95"] .topbar-wrap{ - background:var(--win95-blue); - border-bottom:2px solid var(--win95-dark); + background:var(--w95-blue); + border-bottom:2px solid var(--w95-dark); box-shadow:none; - position:sticky; top:0; z-index:1000; + position: sticky; + top: 0; + z-index: 1000; } html[data-theme="win95"] .brand-title, html[data-theme="win95"] .brand .tagline, html[data-theme="win95"] .version-link{ - color:#fff !important; text-decoration:none; + color:#fff !important; + text-decoration:none; +} +html[data-theme="win95"] .version-link:hover{ + text-decoration:underline; } -html[data-theme="win95"] .version-link:hover{ text-decoration:underline; } -/* ---------- 3D Windows (cards/panels/menus) ---------- */ +/* ---------- Nav Buttons (Find/Create/Insights) ---------- */ +html[data-theme="win95"] .topbar .nav-btn{ + background:var(--w95-face) !important; + color:#000 !important; + border:2px solid var(--w95-face) !important; + border-top-color:var(--w95-light) !important; + border-left-color:var(--w95-light) !important; + border-right-color:var(--w95-shadow) !important; + border-bottom-color:var(--w95-shadow) !important; + border-radius:0 !important; + display:inline-flex !important; + align-items:center !important; + justify-content:center !important; + padding:6px 14px !important; /* consistent size */ + font-size:15px !important; + line-height:1 !important; + box-shadow: inset -1px -1px 0 var(--w95-dark) !important; +} +html[data-theme="win95"] .topbar .nav-btn:active{ + border-top-color:var(--w95-shadow) !important; + border-left-color:var(--w95-shadow) !important; + border-right-color:var(--w95-light) !important; + border-bottom-color:var(--w95-light) !important; + box-shadow: inset 1px 1px 0 var(--w95-dark) !important; +} + +/* ---------- Username Chip ---------- */ +html[data-theme="win95"] .topbar .user-chip{ + background:var(--w95-face-dark) !important; + color:#000 !important; + border:2px solid var(--w95-face-dark) !important; + border-top-color:var(--w95-light) !important; + border-left-color:var(--w95-light) !important; + border-right-color:var(--w95-shadow) !important; + border-bottom-color:var(--w95-shadow) !important; + border-radius:0 !important; + display:inline-flex !important; + align-items:center !important; + justify-content:center !important; + padding:6px 14px !important; + font-size:15px !important; + box-shadow: inset -1px -1px 0 var(--w95-dark) !important; +} + +/* ---------- 3D Windows (cards/panels) ---------- */ html[data-theme="win95"] .card, html[data-theme="win95"] .result-card, html[data-theme="win95"] .search-form, html[data-theme="win95"] .form-card, html[data-theme="win95"] .mobile-menu-inner, html[data-theme="win95"] .user-menu{ - background:var(--win95-face); + background:var(--w95-face); color:#000; - border:2px solid var(--win95-face); - border-top-color:var(--win95-light); - border-left-color:var(--win95-light); - border-right-color:var(--win95-shadow); - border-bottom-color:var(--win95-shadow); - border-radius:0; - box-shadow:1px 1px 0 var(--win95-dark) inset; + border: 2px solid var(--w95-face); + border-top-color: var(--w95-light); + border-left-color: var(--w95-light); + border-right-color: var(--w95-shadow); + border-bottom-color: var(--w95-shadow); + border-radius: 0; + box-shadow: 1px 1px 0 var(--w95-dark) inset; } -/* Section headings & muted text */ +/* Section headers */ html[data-theme="win95"] .cc-panel-head, html[data-theme="win95"] .page-title, -html[data-theme="win95"] .cc-panel-title{ color:#000; } +html[data-theme="win95"] .cc-panel-title{ + color:#000; +} html[data-theme="win95"] .cc-kicker, html[data-theme="win95"] .muted, html[data-theme="win95"] .page-subtitle, html[data-theme="win95"] .meta-label, -html[data-theme="win95"] .section-label{ color:#000; opacity:.75; } +html[data-theme="win95"] .section-label{ + color:#000; + opacity:.75; +} /* Tables */ html[data-theme="win95"] table{ border-collapse:collapse; } html[data-theme="win95"] th, html[data-theme="win95"] td{ - border:1px solid var(--win95-shadow); - background:#DFDFDF; color:#000; + border:1px solid var(--w95-shadow); + background:#DFDFDF; + color:#000; } /* ---------- Inputs ---------- */ @@ -92,115 +144,80 @@ html[data-theme="win95"] .form-control, html[data-theme="win95"] .login-input, html[data-theme="win95"] .tool-input, html[data-theme="win95"] textarea{ - background:#fff; color:#000; - border:2px solid var(--win95-face); - border-top-color:var(--win95-light); - border-left-color:var(--win95-light); - border-right-color:var(--win95-shadow); - border-bottom-color:var(--win95-shadow); - border-radius:0; box-shadow:none; + background:#fff; + color:#000; + border:2px solid var(--w95-face); + border-top-color:var(--w95-light); + border-left-color:var(--w95-light); + border-right-color:var(--w95-shadow); + border-bottom-color:var(--w95-shadow); + border-radius:0; + box-shadow:none; } html[data-theme="win95"] .search-input:focus, html[data-theme="win95"] .form-control:focus, html[data-theme="win95"] .login-input:focus, html[data-theme="win95"] .tool-input:focus{ - outline:1px dotted #000; outline-offset:0; + outline: 1px dotted #000; } -/* Check pills / chips */ +/* ---------- Pills & Chips ---------- */ html[data-theme="win95"] .check-pill, html[data-theme="win95"] .chip, html[data-theme="win95"] .chip-link, html[data-theme="win95"] .chip-muted{ - background:var(--win95-face); color:#000; - border:1px solid var(--win95-shadow); + background:var(--w95-face); + color:#000; + border:1px solid var(--w95-shadow); border-radius:0; } -/* ---------- Buttons (3D) ---------- */ +/* ---------- Buttons ---------- */ html[data-theme="win95"] .btn{ - appearance:none; background:var(--win95-face); color:#000; - border:2px solid var(--win95-face); - border-top-color:var(--win95-light); - border-left-color:var(--win95-light); - border-right-color:var(--win95-shadow); - border-bottom-color:var(--win95-shadow); + background:var(--w95-face); + color:#000; + border:2px solid var(--w95-face); + border-top-color:var(--w95-light); + border-left-color:var(--w95-light); + border-right-color:var(--w95-shadow); + border-bottom-color:var(--w95-shadow); border-radius:0; padding:6px 12px; - box-shadow: inset -1px -1px 0 var(--win95-dark); + box-shadow: inset -1px -1px 0 var(--w95-dark); cursor: default; } -html[data-theme="win95"] .btn:hover{ filter:brightness(1.02); } html[data-theme="win95"] .btn:active{ - border-top-color:var(--win95-shadow); - border-left-color:var(--win95-shadow); - border-right-color:var(--win95-light); - border-bottom-color:var(--win95-light); - box-shadow: inset 1px 1px 0 var(--win95-dark); + border-top-color:var(--w95-shadow); + border-left-color:var(--w95-shadow); + border-right-color:var(--w95-light); + border-bottom-color:var(--w95-light); + box-shadow: inset 1px 1px 0 var(--w95-dark); } -html[data-theme="win95"] .btn-primary{ background:var(--win95-face); color:#000; } -html[data-theme="win95"] .btn-primary:focus{ outline:1px dotted #000; } html[data-theme="win95"] .btn-danger{ color:#8B0000; } -/* ---------- Top-nav controls (Find/Create/Insights + Username) ---------- */ -/* Shared box-model to guarantee SAME HEIGHT */ -html[data-theme="win95"] .nav-btn, -html[data-theme="win95"] .user-chip{ - display:inline-flex; align-items:center; justify-content:center; - font-size:18px; line-height:1; - height:var(--win95-nav-h); - padding:0 var(--win95-nav-pad-x); - box-sizing:border-box; - - background:var(--win95-face) !important; color:#000 !important; - border:2px solid var(--win95-face) !important; - border-top-color:var(--win95-light) !important; - border-left-color:var(--win95-light) !important; - border-right-color:var(--win95-shadow) !important; - border-bottom-color:var(--win95-shadow) !important; - border-radius:0 !important; - text-decoration:none; -} -html[data-theme="win95"] .nav-btn:active, -html[data-theme="win95"] .user-chip:active{ - border-top-color:var(--win95-shadow) !important; - border-left-color:var(--win95-shadow) !important; - border-right-color:var(--win95-light) !important; - border-bottom-color:var(--win95-light) !important; -} -/* Username: slightly darker face to set it apart */ -html[data-theme="win95"] .user-chip{ - background:var(--win95-face-dk) !important; -} - /* ---------- Menus ---------- */ -html[data-theme="win95"] .user-menu, -html[data-theme="win95"] .mobile-menu-inner{ background:var(--win95-face); } html[data-theme="win95"] .user-menu .menu-item, html[data-theme="win95"] .mobile-link{ - color:#000; background:transparent; border-radius:0; + color:#000; + border-radius:0; } html[data-theme="win95"] .user-menu .menu-item:hover, html[data-theme="win95"] .mobile-link:hover{ - background:var(--win95-blue); color:#fff; + background:var(--w95-blue); + color:#fff; } /* ---------- Messages ---------- */ html[data-theme="win95"] .msg{ - background:#DFDFDF; color:#000; - border:2px solid var(--win95-face); - border-top-color:var(--win95-light); - border-left-color:var(--win95-light); - border-right-color:var(--win95-shadow); - border-bottom-color:var(--win95-shadow); + background:#DFDFDF; + color:#000; + border:2px solid var(--w95-face); + border-top-color:var(--w95-light); + border-left-color:var(--w95-light); + border-right-color:var(--w95-shadow); + border-bottom-color:var(--w95-shadow); border-radius:0; } -html[data-theme="win95"] .msg.info { border-left-color:#0000AA; } -html[data-theme="win95"] .msg.success { border-left-color:#007A00; } -html[data-theme="win95"] .msg.warning { border-left-color:#A06A00; } -html[data-theme="win95"] .msg.error { border-left-color:#8B0000; } - -/* Toned variants to match Win95 feel */ html[data-theme="win95"] .msg.info { background:#eaf2ff; border-color:#8aaad6; color:#003366; } html[data-theme="win95"] .msg.success { background:#e8f5e8; border-color:#6aa86a; color:#104010; } html[data-theme="win95"] .msg.warning { background:#fff7e0; border-color:#d4b96a; color:#5a4100; } @@ -208,60 +225,70 @@ html[data-theme="win95"] .msg.error { background:#fff0f0; border-color:#cc6666 /* ---------- Links ---------- */ html[data-theme="win95"] a{ color:#0000EE; } -html[data-theme="win95"] a:hover{ color:#551A8B; text-decoration:underline; } +html[data-theme="win95"] a:hover{ color:#551A8B; text-decoration: underline; } -/* ---------- Command Center accents ---------- */ +/* ---------- Command Center ---------- */ html[data-theme="win95"] .settings-console .sec-tile{ - background:var(--win95-face); color:#000; - border:2px solid var(--win95-face); - border-top-color:var(--win95-light); - border-left-color:var(--win95-light); - border-right-color:var(--win95-shadow); - border-bottom-color:var(--win95-shadow); + background:var(--w95-face); + color:#000; + border:2px solid var(--w95-face); + border-top-color:var(--w95-light); + border-left-color:var(--w95-light); + border-right-color:var(--w95-shadow); + border-bottom-color:var(--w95-shadow); border-radius:0; } -html[data-theme="win95"] .settings-console .sec-tile:hover{ background:#DFDFDF; } +html[data-theme="win95"] .settings-console .sec-tile:hover{ + background:#DFDFDF; +} html[data-theme="win95"] .settings-console .sec-icon{ - background:#DFDFDF; color:#000; - border:1px solid var(--win95-shadow); - border-right-color:var(--win95-light); - border-bottom-color:var(--win95-light); + background:#DFDFDF; + color:#000; + border:1px solid var(--w95-shadow); + border-right-color:#fff; + border-bottom-color:#fff; border-radius:0; } -/* Swatch tile keeps squared corners in this theme */ -html[data-theme="win95"] .settings-console .swatch{ border-radius:0; } - -/* ---------- Highlights & validators ---------- */ -/* Search term highlight */ -html[data-theme="win95"] .mark-hit{ - background:#ffff88; color:#000; padding:0 2px; - border:1px solid #c0c0c0; +html[data-theme="win95"] .settings-console .swatch{ + border-radius:0; +} + +/* ---------- Highlights & Validation ---------- */ +html[data-theme="win95"] .mark-hit { + background: #ffff88; + color: #000; + padding: 0 2px; + border: 1px solid #c0c0c0; } -/* Valid/invalid inputs (scripture/source) */ html[data-theme="win95"] .form-control.scripture-valid, -html[data-theme="win95"] .search-input.scripture-valid{ - border:2px inset #008000; background:#e8f5e8; +html[data-theme="win95"] .search-input.scripture-valid { + border: 2px inset #008000; + background: #e8f5e8; } html[data-theme="win95"] .form-control.scripture-invalid, -html[data-theme="win95"] .search-input.scripture-invalid{ - border:2px inset #a00000; background:#fff0f0; +html[data-theme="win95"] .search-input.scripture-invalid { + border: 2px inset #a00000; + background: #fff0f0; } -/* Invalid “pills” */ -html[data-theme="win95"] .scripture-pill-invalid{ - background:#ffeaea; border:2px outset #cc6666; color:#7a1d1d; +html[data-theme="win95"] .scripture-pill-invalid { + background: #ffeaea; + border: 2px outset #cc6666; + color: #7a1d1d; } -/* WOL-valid “pills” */ -html[data-theme="win95"] .scripture-pill-wol{ - background:#e8f4ff; border:2px outset #8aaad6; color:#003366; text-decoration:none; +html[data-theme="win95"] .scripture-pill-wol { + background: #e8f4ff; + border: 2px outset #8aaad6; + color: #003366; } html[data-theme="win95"] a.chip:hover, -html[data-theme="win95"] .chip-link:hover{ - filter:brightness(.96); - outline:1px dotted #000; outline-offset:1px; +html[data-theme="win95"] .chip-link:hover { + filter: brightness(0.96); + outline: 1px dotted #000; + outline-offset: 1px; } /* ---------- Misc ---------- */ html[data-theme="win95"] .topbar-wrap.is-scrolled{ - box-shadow:none; border-bottom-color:var(--win95-dark); -} -/* Win95 doesn’t use Classic’s .themed-bg */ \ No newline at end of file + box-shadow:none; + border-bottom-color:#000; +} \ No newline at end of file