267 lines
9.2 KiB
CSS
267 lines
9.2 KiB
CSS
/* ===============================
|
||
Windows 95 — Nostalgia Mode
|
||
=============================== */
|
||
/* Palette:
|
||
3D light #FFFFFF
|
||
Face #C0C0C0
|
||
Shadow #808080
|
||
Dark #000000
|
||
TitleBar #000080
|
||
*/
|
||
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;
|
||
}
|
||
|
||
/* Base */
|
||
html[data-theme="win95"] body{
|
||
background:#00808010; /* faint teal tint */
|
||
color:#000;
|
||
min-height:100vh;
|
||
font-family:var(--win95-font);
|
||
}
|
||
|
||
/* Selection */
|
||
html[data-theme="win95"] ::selection{
|
||
background:var(--win95-blue);
|
||
color:#fff;
|
||
}
|
||
|
||
/* ---------- Top bar (Title Bar) ---------- */
|
||
html[data-theme="win95"] .topbar-wrap{
|
||
background:var(--win95-blue);
|
||
border-bottom:2px solid var(--win95-dark);
|
||
box-shadow:none;
|
||
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;
|
||
}
|
||
html[data-theme="win95"] .version-link:hover{ text-decoration:underline; }
|
||
|
||
/* ---------- 3D Windows (cards/panels/menus) ---------- */
|
||
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);
|
||
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;
|
||
}
|
||
|
||
/* Section headings & muted text */
|
||
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-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; }
|
||
|
||
/* 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;
|
||
}
|
||
|
||
/* ---------- Inputs ---------- */
|
||
html[data-theme="win95"] .search-input,
|
||
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;
|
||
}
|
||
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;
|
||
}
|
||
|
||
/* Check 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);
|
||
border-radius:0;
|
||
}
|
||
|
||
/* ---------- Buttons (3D) ---------- */
|
||
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);
|
||
border-radius:0;
|
||
padding:6px 12px;
|
||
box-shadow: inset -1px -1px 0 var(--win95-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);
|
||
}
|
||
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;
|
||
}
|
||
html[data-theme="win95"] .user-menu .menu-item:hover,
|
||
html[data-theme="win95"] .mobile-link:hover{
|
||
background:var(--win95-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);
|
||
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; }
|
||
html[data-theme="win95"] .msg.error { background:#fff0f0; border-color:#cc6666; color:#7a1d1d; }
|
||
|
||
/* ---------- Links ---------- */
|
||
html[data-theme="win95"] a{ color:#0000EE; }
|
||
html[data-theme="win95"] a:hover{ color:#551A8B; text-decoration:underline; }
|
||
|
||
/* ---------- Command Center accents ---------- */
|
||
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);
|
||
border-radius:0;
|
||
}
|
||
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);
|
||
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;
|
||
}
|
||
/* 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"] .form-control.scripture-invalid,
|
||
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;
|
||
}
|
||
/* 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"] a.chip:hover,
|
||
html[data-theme="win95"] .chip-link:hover{
|
||
filter:brightness(.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 */ |