Add web/static/themes/win95.css
This commit is contained in:
parent
42b66036aa
commit
6fec0a453f
260
web/static/themes/win95.css
Normal file
260
web/static/themes/win95.css
Normal file
@ -0,0 +1,260 @@
|
|||||||
|
/* ===============================
|
||||||
|
Windows 95 — Nostalgia Mode
|
||||||
|
=============================== */
|
||||||
|
/* Palette + notes:
|
||||||
|
- 3D light: #FFFFFF
|
||||||
|
- Face: #C0C0C0
|
||||||
|
- Shadow: #808080
|
||||||
|
- Dark: #000000
|
||||||
|
- Title Bar: #000080 (classic blue)
|
||||||
|
- Text: #000000
|
||||||
|
*/
|
||||||
|
|
||||||
|
html[data-theme="win95"] body{
|
||||||
|
background:#00808010; /* faint teal tint over the desk */
|
||||||
|
color:#000;
|
||||||
|
min-height:100vh;
|
||||||
|
font-family: "Tahoma","MS Sans Serif",system-ui,Segoe UI,Arial,sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Selection (classic blue) */
|
||||||
|
html[data-theme="win95"] ::selection{
|
||||||
|
background:#000080;
|
||||||
|
color:#fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- Top bar (Title Bar) ---------- */
|
||||||
|
html[data-theme="win95"] .topbar-wrap{
|
||||||
|
background:#000080;
|
||||||
|
border-bottom:2px solid #000;
|
||||||
|
box-shadow:none;
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
html[data-theme="win95"] .brand-title,
|
||||||
|
html[data-theme="win95"] .nav-btn,
|
||||||
|
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 Window (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:#C0C0C0;
|
||||||
|
color:#000;
|
||||||
|
border: 2px solid #C0C0C0; /* base face color */
|
||||||
|
border-top-color: #FFFFFF; /* light top/left */
|
||||||
|
border-left-color: #FFFFFF;
|
||||||
|
border-right-color: #808080; /* shadow right/bottom */
|
||||||
|
border-bottom-color:#808080;
|
||||||
|
border-radius: 0;
|
||||||
|
box-shadow: 1px 1px 0 #000 inset; /* inner dark line for that Win95 depth */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* "Window Caption" for 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-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 (gridlines like classic list views) */
|
||||||
|
html[data-theme="win95"] table{
|
||||||
|
border-collapse:collapse;
|
||||||
|
}
|
||||||
|
html[data-theme="win95"] th,
|
||||||
|
html[data-theme="win95"] td{
|
||||||
|
border:1px solid #808080;
|
||||||
|
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:#FFFFFF;
|
||||||
|
color:#000;
|
||||||
|
border:2px solid #C0C0C0;
|
||||||
|
border-top-color:#FFFFFF;
|
||||||
|
border-left-color:#FFFFFF;
|
||||||
|
border-right-color:#808080;
|
||||||
|
border-bottom-color:#808080;
|
||||||
|
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 -> flat Win95 labels */
|
||||||
|
html[data-theme="win95"] .check-pill,
|
||||||
|
html[data-theme="win95"] .chip,
|
||||||
|
html[data-theme="win95"] .chip-link,
|
||||||
|
html[data-theme="win95"] .chip-muted{
|
||||||
|
background:#C0C0C0;
|
||||||
|
color:#000;
|
||||||
|
border:1px solid #808080;
|
||||||
|
border-radius:0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- Buttons (3D) ---------- */
|
||||||
|
html[data-theme="win95"] .btn{
|
||||||
|
appearance:none;
|
||||||
|
background:#C0C0C0;
|
||||||
|
color:#000;
|
||||||
|
border:2px solid #C0C0C0;
|
||||||
|
border-top-color:#FFFFFF;
|
||||||
|
border-left-color:#FFFFFF;
|
||||||
|
border-right-color:#808080;
|
||||||
|
border-bottom-color:#808080;
|
||||||
|
border-radius:0;
|
||||||
|
padding:6px 12px;
|
||||||
|
box-shadow: inset -1px -1px 0 #000; /* inner dark pixel bottom-right */
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
html[data-theme="win95"] .btn:hover{
|
||||||
|
filter:brightness(1.02);
|
||||||
|
}
|
||||||
|
html[data-theme="win95"] .btn:active{
|
||||||
|
/* pressed: invert light/shadow */
|
||||||
|
border-top-color:#808080;
|
||||||
|
border-left-color:#808080;
|
||||||
|
border-right-color:#FFFFFF;
|
||||||
|
border-bottom-color:#FFFFFF;
|
||||||
|
box-shadow: inset 1px 1px 0 #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Accent (primary) = Title Bar blue */
|
||||||
|
html[data-theme="win95"] .btn-primary{
|
||||||
|
background:#C0C0C0;
|
||||||
|
color:#000;
|
||||||
|
/* keep same 3D borders, just add blue focus ring on hover/active */
|
||||||
|
}
|
||||||
|
html[data-theme="win95"] .btn-primary:focus{
|
||||||
|
outline:1px dotted #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Danger = classic red text inside same 3D button */
|
||||||
|
html[data-theme="win95"] .btn-danger{
|
||||||
|
color:#8B0000;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Header nav buttons should look like buttons too */
|
||||||
|
html[data-theme="win95"] .nav-btn{
|
||||||
|
background:#C0C0C0 !important;
|
||||||
|
color:#000 !important;
|
||||||
|
border:2px solid #C0C0C0 !important;
|
||||||
|
border-top-color:#FFFFFF !important;
|
||||||
|
border-left-color:#FFFFFF !important;
|
||||||
|
border-right-color:#808080 !important;
|
||||||
|
border-bottom-color:#808080 !important;
|
||||||
|
border-radius:0 !important;
|
||||||
|
}
|
||||||
|
html[data-theme="win95"] .nav-btn:active{
|
||||||
|
border-top-color:#808080 !important;
|
||||||
|
border-left-color:#808080 !important;
|
||||||
|
border-right-color:#FFFFFF !important;
|
||||||
|
border-bottom-color:#FFFFFF !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- Menus ---------- */
|
||||||
|
html[data-theme="win95"] .user-menu,
|
||||||
|
html[data-theme="win95"] .mobile-menu-inner{
|
||||||
|
background:#C0C0C0;
|
||||||
|
}
|
||||||
|
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:#000080;
|
||||||
|
color:#fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- Messages (info/success/etc) ---------- */
|
||||||
|
html[data-theme="win95"] .msg{
|
||||||
|
background:#DFDFDF;
|
||||||
|
color:#000;
|
||||||
|
border:2px solid #C0C0C0;
|
||||||
|
border-top-color:#FFFFFF;
|
||||||
|
border-left-color:#FFFFFF;
|
||||||
|
border-right-color:#808080;
|
||||||
|
border-bottom-color:#808080;
|
||||||
|
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; }
|
||||||
|
|
||||||
|
/* ---------- 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:#C0C0C0;
|
||||||
|
color:#000;
|
||||||
|
border:2px solid #C0C0C0;
|
||||||
|
border-top-color:#FFFFFF;
|
||||||
|
border-left-color:#FFFFFF;
|
||||||
|
border-right-color:#808080;
|
||||||
|
border-bottom-color:#808080;
|
||||||
|
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 #808080;
|
||||||
|
border-right-color:#FFFFFF;
|
||||||
|
border-bottom-color:#FFFFFF;
|
||||||
|
border-radius:0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Theme swatches inside Command Center — Win95 tile */
|
||||||
|
html[data-theme="win95"] .settings-console .swatch{
|
||||||
|
border-radius:0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- Misc ---------- */
|
||||||
|
html[data-theme="win95"] .topbar-wrap.is-scrolled{
|
||||||
|
box-shadow:none;
|
||||||
|
border-bottom-color:#000;
|
||||||
|
}
|
||||||
|
/* keep Classic’s .themed-bg separate; win95 doesn’t use it */
|
||||||
Loading…
Reference in New Issue
Block a user