joshlaymon/Illustrations
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update web/static/themes/win95.css

Browse Source
This commit is contained in:
Joshua Laymon 2025-09-06 18:38:07 +00:00
parent 652b455b45
commit b5b0d9b306
1 changed files with 151 additions and 178 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

327
web/static/themes/win95.css
View File

@ -1,141 +1,89 @@
/* =============================== /* ===============================
Windows 95 — Nostalgia Mode Windows 95 — Nostalgia Mode
=============================== */ =============================== */
/* Palette + notes: /* Palette:
- 3D light: #FFFFFF 3D light #FFFFFF
- Face: #C0C0C0 Face #C0C0C0
- Dark face: #A0A0A0 Shadow #808080
- Shadow: #808080 Dark #000000
- Dark: #000000 TitleBar #000080
- 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;
html[data-theme="win95"] { /* keep the top-nav controls consistent everywhere */
--w95-face: #C0C0C0; --win95-nav-h: 36px;
--w95-face-dark: #A0A0A0; --win95-nav-pad-x: 16px;
--w95-light: #FFFFFF; --win95-font: "Tahoma","MS Sans Serif",system-ui,Segoe UI,Arial,sans-serif;
--w95-shadow: #808080;
--w95-dark: #000000;
--w95-blue: #000080;
} }
/* Base */
html[data-theme="win95"] body{ html[data-theme="win95"] body{
background:#00808010; /* faint teal tint */ background:#00808010; /* faint teal tint */
color:#000; color:#000;
min-height:100vh; min-height:100vh;
font-family: "Tahoma","MS Sans Serif",system-ui,Segoe UI,Arial,sans-serif; font-family:var(--win95-font);
} }
/* Selection */ /* Selection */
html[data-theme="win95"] ::selection{ html[data-theme="win95"] ::selection{
background:var(--w95-blue); background:var(--win95-blue);
color:#fff; color:#fff;
} }
/* ---------- Top bar ---------- */ /* ---------- Top bar (Title Bar) ---------- */
html[data-theme="win95"] .topbar-wrap{ html[data-theme="win95"] .topbar-wrap{
background:var(--w95-blue); background:var(--win95-blue);
border-bottom:2px solid var(--w95-dark); border-bottom:2px solid var(--win95-dark);
box-shadow:none; box-shadow:none;
position: sticky; position:sticky; top:0; z-index:1000;
top: 0;
z-index: 1000;
} }
html[data-theme="win95"] .brand-title, html[data-theme="win95"] .brand-title,
html[data-theme="win95"] .brand .tagline, html[data-theme="win95"] .brand .tagline,
html[data-theme="win95"] .version-link{ html[data-theme="win95"] .version-link{
color:#fff !important; color:#fff !important; text-decoration:none;
text-decoration:none;
}
html[data-theme="win95"] .version-link:hover{
text-decoration:underline;
} }
html[data-theme="win95"] .version-link:hover{ text-decoration:underline; }
/* ---------- Nav Buttons (Find/Create/Insights) ---------- */ /* ---------- 3D Windows (cards/panels/menus) ---------- */
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"] .card,
html[data-theme="win95"] .result-card, html[data-theme="win95"] .result-card,
html[data-theme="win95"] .search-form, html[data-theme="win95"] .search-form,
html[data-theme="win95"] .form-card, html[data-theme="win95"] .form-card,
html[data-theme="win95"] .mobile-menu-inner, html[data-theme="win95"] .mobile-menu-inner,
html[data-theme="win95"] .user-menu{ html[data-theme="win95"] .user-menu{
background:var(--w95-face); background:var(--win95-face);
color:#000; color:#000;
border: 2px solid var(--w95-face); border:2px solid var(--win95-face);
border-top-color: var(--w95-light); border-top-color:var(--win95-light);
border-left-color: var(--w95-light); border-left-color:var(--win95-light);
border-right-color: var(--w95-shadow); border-right-color:var(--win95-shadow);
border-bottom-color: var(--w95-shadow); border-bottom-color:var(--win95-shadow);
border-radius: 0; border-radius:0;
box-shadow: 1px 1px 0 var(--w95-dark) inset; box-shadow:1px 1px 0 var(--win95-dark) inset;
} }
/* Section headers */ /* Section headings & muted text */
html[data-theme="win95"] .cc-panel-head, html[data-theme="win95"] .cc-panel-head,
html[data-theme="win95"] .page-title, html[data-theme="win95"] .page-title,
html[data-theme="win95"] .cc-panel-title{ html[data-theme="win95"] .cc-panel-title{ color:#000; }
color:#000;
}
html[data-theme="win95"] .cc-kicker, html[data-theme="win95"] .cc-kicker,
html[data-theme="win95"] .muted, html[data-theme="win95"] .muted,
html[data-theme="win95"] .page-subtitle, html[data-theme="win95"] .page-subtitle,
html[data-theme="win95"] .meta-label, html[data-theme="win95"] .meta-label,
html[data-theme="win95"] .section-label{ html[data-theme="win95"] .section-label{ color:#000; opacity:.75; }
color:#000;
opacity:.75;
}
/* Tables */ /* Tables */
html[data-theme="win95"] table{ border-collapse:collapse; } html[data-theme="win95"] table{ border-collapse:collapse; }
html[data-theme="win95"] th, html[data-theme="win95"] th,
html[data-theme="win95"] td{ html[data-theme="win95"] td{
border:1px solid var(--w95-shadow); border:1px solid var(--win95-shadow);
background:#DFDFDF; background:#DFDFDF; color:#000;
color:#000;
} }
/* ---------- Inputs ---------- */ /* ---------- Inputs ---------- */
@ -144,80 +92,115 @@ html[data-theme="win95"] .form-control,
html[data-theme="win95"] .login-input, html[data-theme="win95"] .login-input,
html[data-theme="win95"] .tool-input, html[data-theme="win95"] .tool-input,
html[data-theme="win95"] textarea{ html[data-theme="win95"] textarea{
background:#fff; background:#fff; color:#000;
color:#000; border:2px solid var(--win95-face);
border:2px solid var(--w95-face); border-top-color:var(--win95-light);
border-top-color:var(--w95-light); border-left-color:var(--win95-light);
border-left-color:var(--w95-light); border-right-color:var(--win95-shadow);
border-right-color:var(--w95-shadow); border-bottom-color:var(--win95-shadow);
border-bottom-color:var(--w95-shadow); border-radius:0; box-shadow:none;
border-radius:0;
box-shadow:none;
} }
html[data-theme="win95"] .search-input:focus, html[data-theme="win95"] .search-input:focus,
html[data-theme="win95"] .form-control:focus, html[data-theme="win95"] .form-control:focus,
html[data-theme="win95"] .login-input:focus, html[data-theme="win95"] .login-input:focus,
html[data-theme="win95"] .tool-input:focus{ html[data-theme="win95"] .tool-input:focus{
outline: 1px dotted #000; outline:1px dotted #000; outline-offset:0;
} }
/* ---------- Pills & Chips ---------- */ /* Check pills / chips */
html[data-theme="win95"] .check-pill, html[data-theme="win95"] .check-pill,
html[data-theme="win95"] .chip, html[data-theme="win95"] .chip,
html[data-theme="win95"] .chip-link, html[data-theme="win95"] .chip-link,
html[data-theme="win95"] .chip-muted{ html[data-theme="win95"] .chip-muted{
background:var(--w95-face); background:var(--win95-face); color:#000;
color:#000; border:1px solid var(--win95-shadow);
border:1px solid var(--w95-shadow);
border-radius:0; border-radius:0;
} }
/* ---------- Buttons ---------- */ /* ---------- Buttons (3D) ---------- */
html[data-theme="win95"] .btn{ html[data-theme="win95"] .btn{
background:var(--w95-face); appearance:none; background:var(--win95-face); color:#000;
color:#000; border:2px solid var(--win95-face);
border:2px solid var(--w95-face); border-top-color:var(--win95-light);
border-top-color:var(--w95-light); border-left-color:var(--win95-light);
border-left-color:var(--w95-light); border-right-color:var(--win95-shadow);
border-right-color:var(--w95-shadow); border-bottom-color:var(--win95-shadow);
border-bottom-color:var(--w95-shadow);
border-radius:0; border-radius:0;
padding:6px 12px; padding:6px 12px;
box-shadow: inset -1px -1px 0 var(--w95-dark); box-shadow: inset -1px -1px 0 var(--win95-dark);
cursor: default; cursor: default;
} }
html[data-theme="win95"] .btn:hover{ filter:brightness(1.02); }
html[data-theme="win95"] .btn:active{ html[data-theme="win95"] .btn:active{
border-top-color:var(--w95-shadow); border-top-color:var(--win95-shadow);
border-left-color:var(--w95-shadow); border-left-color:var(--win95-shadow);
border-right-color:var(--w95-light); border-right-color:var(--win95-light);
border-bottom-color:var(--w95-light); border-bottom-color:var(--win95-light);
box-shadow: inset 1px 1px 0 var(--w95-dark); 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; } 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 ---------- */ /* ---------- 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"] .user-menu .menu-item,
html[data-theme="win95"] .mobile-link{ html[data-theme="win95"] .mobile-link{
color:#000; color:#000; background:transparent; border-radius:0;
border-radius:0;
} }
html[data-theme="win95"] .user-menu .menu-item:hover, html[data-theme="win95"] .user-menu .menu-item:hover,
html[data-theme="win95"] .mobile-link:hover{ html[data-theme="win95"] .mobile-link:hover{
background:var(--w95-blue); background:var(--win95-blue); color:#fff;
color:#fff;
} }
/* ---------- Messages ---------- */ /* ---------- Messages ---------- */
html[data-theme="win95"] .msg{ html[data-theme="win95"] .msg{
background:#DFDFDF; background:#DFDFDF; color:#000;
color:#000; border:2px solid var(--win95-face);
border:2px solid var(--w95-face); border-top-color:var(--win95-light);
border-top-color:var(--w95-light); border-left-color:var(--win95-light);
border-left-color:var(--w95-light); border-right-color:var(--win95-shadow);
border-right-color:var(--w95-shadow); border-bottom-color:var(--win95-shadow);
border-bottom-color:var(--w95-shadow);
border-radius:0; 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.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.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.warning { background:#fff7e0; border-color:#d4b96a; color:#5a4100; }
@ -225,70 +208,60 @@ html[data-theme="win95"] .msg.error { background:#fff0f0; border-color:#cc6666
/* ---------- Links ---------- */ /* ---------- Links ---------- */
html[data-theme="win95"] a{ color:#0000EE; } 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 ---------- */ /* ---------- Command Center accents ---------- */
html[data-theme="win95"] .settings-console .sec-tile{ html[data-theme="win95"] .settings-console .sec-tile{
background:var(--w95-face); background:var(--win95-face); color:#000;
color:#000; border:2px solid var(--win95-face);
border:2px solid var(--w95-face); border-top-color:var(--win95-light);
border-top-color:var(--w95-light); border-left-color:var(--win95-light);
border-left-color:var(--w95-light); border-right-color:var(--win95-shadow);
border-right-color:var(--w95-shadow); border-bottom-color:var(--win95-shadow);
border-bottom-color:var(--w95-shadow);
border-radius:0; border-radius:0;
} }
html[data-theme="win95"] .settings-console .sec-tile:hover{ html[data-theme="win95"] .settings-console .sec-tile:hover{ background:#DFDFDF; }
background:#DFDFDF;
}
html[data-theme="win95"] .settings-console .sec-icon{ html[data-theme="win95"] .settings-console .sec-icon{
background:#DFDFDF; background:#DFDFDF; color:#000;
color:#000; border:1px solid var(--win95-shadow);
border:1px solid var(--w95-shadow); border-right-color:var(--win95-light);
border-right-color:#fff; border-bottom-color:var(--win95-light);
border-bottom-color:#fff;
border-radius:0;
}
html[data-theme="win95"] .settings-console .swatch{
border-radius:0; border-radius:0;
} }
/* Swatch tile keeps squared corners in this theme */
html[data-theme="win95"] .settings-console .swatch{ border-radius:0; }
/* ---------- Highlights & Validation ---------- */ /* ---------- Highlights & validators ---------- */
html[data-theme="win95"] .mark-hit { /* Search term highlight */
background: #ffff88; html[data-theme="win95"] .mark-hit{
color: #000; background:#ffff88; color:#000; padding:0 2px;
padding: 0 2px; border:1px solid #c0c0c0;
border: 1px solid #c0c0c0;
} }
/* Valid/invalid inputs (scripture/source) */
html[data-theme="win95"] .form-control.scripture-valid, html[data-theme="win95"] .form-control.scripture-valid,
html[data-theme="win95"] .search-input.scripture-valid { html[data-theme="win95"] .search-input.scripture-valid{
border: 2px inset #008000; border:2px inset #008000; background:#e8f5e8;
background: #e8f5e8;
} }
html[data-theme="win95"] .form-control.scripture-invalid, html[data-theme="win95"] .form-control.scripture-invalid,
html[data-theme="win95"] .search-input.scripture-invalid { html[data-theme="win95"] .search-input.scripture-invalid{
border: 2px inset #a00000; border:2px inset #a00000; background:#fff0f0;
background: #fff0f0;
} }
html[data-theme="win95"] .scripture-pill-invalid { /* Invalid “pills” */
background: #ffeaea; html[data-theme="win95"] .scripture-pill-invalid{
border: 2px outset #cc6666; background:#ffeaea; border:2px outset #cc6666; color:#7a1d1d;
color: #7a1d1d;
} }
html[data-theme="win95"] .scripture-pill-wol { /* WOL-valid “pills” */
background: #e8f4ff; html[data-theme="win95"] .scripture-pill-wol{
border: 2px outset #8aaad6; background:#e8f4ff; border:2px outset #8aaad6; color:#003366; text-decoration:none;
color: #003366;
} }
html[data-theme="win95"] a.chip:hover, html[data-theme="win95"] a.chip:hover,
html[data-theme="win95"] .chip-link:hover { html[data-theme="win95"] .chip-link:hover{
filter: brightness(0.96); filter:brightness(.96);
outline: 1px dotted #000; outline:1px dotted #000; outline-offset:1px;
outline-offset: 1px;
} }
/* ---------- Misc ---------- */ /* ---------- Misc ---------- */
html[data-theme="win95"] .topbar-wrap.is-scrolled{ html[data-theme="win95"] .topbar-wrap.is-scrolled{
box-shadow:none; box-shadow:none; border-bottom-color:var(--win95-dark);
border-bottom-color:#000;
} }
/* Win95 doesn’t use Classic’s .themed-bg */