Update web/static/themes/win95.css

web/static/themes/win95.css

@@ -6,12 +6,25 @@
    - Face:      #C0C0C0
    - Shadow:    #808080
    - Dark:      #000000
-   - Title Bar: #000080  (classic blue)
+   - Title Bar: #000080
    - Text:      #000000
 */
 
+html[data-theme="win95"] {
+  --w95-face:   #C0C0C0;
+  --w95-light:  #FFFFFF;
+  --w95-shadow: #808080;
+  --w95-dark:   #000000;
+  --w95-blue:   #000080;
+  /* Topbar button sizing (consistent across pages) */
+  --w95-btn-h:  44px;
+  --w95-btn-minw: 140px;
+  --w95-btn-pad-x: 18px;
+  --w95-btn-font: 18px;
+}
+
 html[data-theme="win95"] body{
-  background:#00808010; /* faint teal tint over the desk */
+  background:#00808010; /* faint teal tint */
   color:#000;
   min-height:100vh;
   font-family: "Tahoma","MS Sans Serif",system-ui,Segoe UI,Arial,sans-serif;
@@ -19,29 +32,27 @@ html[data-theme="win95"] body{
 
 /* Selection (classic blue) */
 html[data-theme="win95"] ::selection{
-  background:#000080;
+  background:var(--w95-blue);
   color:#fff;
 }
 
 /* ---------- Top bar (Title Bar) ---------- */
 html[data-theme="win95"] .topbar-wrap{
-  background:#000080;
+  background:var(--w95-blue);
-  border-bottom:2px solid #000;
+  border-bottom:2px solid var(--w95-dark);
   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{
+html[data-theme="win95"] .version-link:hover{ text-decoration:underline; }
-  text-decoration:underline;
-}
 
 /* ---------- 3D Window (Cards / Panels) ---------- */
 html[data-theme="win95"] .card,
@@ -50,39 +61,34 @@ 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;
+  background:var(--w95-face);
   color:#000;
-  border: 2px solid #C0C0C0;      /* base face color */
+  border: 2px solid var(--w95-face);
-  border-top-color: #FFFFFF;       /* light top/left */
+  border-top-color: var(--w95-light);
-  border-left-color: #FFFFFF;
+  border-left-color: var(--w95-light);
-  border-right-color: #808080;     /* shadow right/bottom */
+  border-right-color: var(--w95-shadow);
-  border-bottom-color:#808080;
+  border-bottom-color: var(--w95-shadow);
   border-radius: 0;
-  box-shadow: 1px 1px 0 #000 inset; /* inner dark line for that Win95 depth */
+  box-shadow: 1px 1px 0 var(--w95-dark) inset;
 }
 
-/* "Window Caption" for section headers */
+/* "Window Caption" vibe for headings */
 html[data-theme="win95"] .cc-panel-head,
 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"] .muted,
 html[data-theme="win95"] .page-subtitle,
 html[data-theme="win95"] .meta-label,
 html[data-theme="win95"] .section-label{
-  color:#000;
+  color:#000; opacity:.75;
-  opacity:.75;
 }
 
-/* Tables (gridlines like classic list views) */
+/* Tables (gridlines) */
-html[data-theme="win95"] table{
+html[data-theme="win95"] table{ border-collapse:collapse; }
-  border-collapse:collapse;
-}
 html[data-theme="win95"] th,
 html[data-theme="win95"] td{
-  border:1px solid #808080;
+  border:1px solid var(--w95-shadow);
   background:#DFDFDF;
   color:#000;
 }
@@ -93,22 +99,19 @@ 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;
+  background:#FFFFFF; color:#000;
-  color:#000;
+  border:2px solid var(--w95-face);
-  border:2px solid #C0C0C0;
+  border-top-color:var(--w95-light);
-  border-top-color:#FFFFFF;
+  border-left-color:var(--w95-light);
-  border-left-color:#FFFFFF;
+  border-right-color:var(--w95-shadow);
-  border-right-color:#808080;
+  border-bottom-color:var(--w95-shadow);
-  border-bottom-color:#808080;
+  border-radius:0; box-shadow:none;
-  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: 1px dotted #000; outline-offset: 0;
-  outline-offset: 0;
 }
 
 /* Check pills/chips -> flat Win95 labels */
@@ -116,98 +119,98 @@ 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;
+  background:var(--w95-face);
   color:#000;
-  border:1px solid #808080;
+  border:1px solid var(--w95-shadow);
   border-radius:0;
 }
 
-/* ---------- Buttons (3D) ---------- */
+/* ---------- Buttons (global) ---------- */
 html[data-theme="win95"] .btn{
   appearance:none;
-  background:#C0C0C0;
+  background:var(--w95-face);
   color:#000;
-  border:2px solid #C0C0C0;
+  border:2px solid var(--w95-face);
-  border-top-color:#FFFFFF;
+  border-top-color:var(--w95-light);
-  border-left-color:#FFFFFF;
+  border-left-color:var(--w95-light);
-  border-right-color:#808080;
+  border-right-color:var(--w95-shadow);
-  border-bottom-color:#808080;
+  border-bottom-color:var(--w95-shadow);
   border-radius:0;
   padding:6px 12px;
-  box-shadow: inset -1px -1px 0 #000; /* inner dark pixel bottom-right */
+  box-shadow: inset -1px -1px 0 var(--w95-dark);
   cursor: default;
+  line-height:1;
 }
-html[data-theme="win95"] .btn:hover{
+html[data-theme="win95"] .btn:hover{ filter:brightness(1.02); }
-  filter:brightness(1.02);
-}
 html[data-theme="win95"] .btn:active{
-  /* pressed: invert light/shadow */
+  border-top-color:var(--w95-shadow);
-  border-top-color:#808080;
+  border-left-color:var(--w95-shadow);
-  border-left-color:#808080;
+  border-right-color:var(--w95-light);
-  border-right-color:#FFFFFF;
+  border-bottom-color:var(--w95-light);
-  border-bottom-color:#FFFFFF;
+  box-shadow: inset 1px 1px 0 var(--w95-dark);
-  box-shadow: inset 1px 1px 0 #000;
 }
+html[data-theme="win95"] .btn-primary{ background:var(--w95-face); color:#000; }
+html[data-theme="win95"] .btn-primary:focus{ outline:1px dotted #000; }
+html[data-theme="win95"] .btn-danger{ color:#8B0000; }
 
-/* Accent (primary) = Title Bar blue */
+/* ---------- Topbar controls: CONSISTENT sizing ---------- */
-html[data-theme="win95"] .btn-primary{
+/* Make header nav buttons and username chip identical Win95 buttons */
-  background:#C0C0C0;
+html[data-theme="win95"] .topbar .nav-btn,
-  color:#000;
+html[data-theme="win95"] .topbar .user-chip{
-  /* keep same 3D borders, just add blue focus ring on hover/active */
+  background:var(--w95-face) !important;
-}
-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:2px solid var(--w95-face) !important;
-  border-top-color:#FFFFFF !important;
+  border-top-color:var(--w95-light) !important;
-  border-left-color:#FFFFFF !important;
+  border-left-color:var(--w95-light) !important;
-  border-right-color:#808080 !important;
+  border-right-color:var(--w95-shadow) !important;
-  border-bottom-color:#808080 !important;
+  border-bottom-color:var(--w95-shadow) !important;
   border-radius:0 !important;
+  display:inline-flex !important;
+  align-items:center !important;
+  justify-content:center !important;
+  height:var(--w95-btn-h) !important;
+  min-width:var(--w95-btn-minw) !important;
+  padding:0 var(--w95-btn-pad-x) !important;
+  box-shadow: inset -1px -1px 0 var(--w95-dark) !important;
+  font-size:var(--w95-btn-font) !important;
+  line-height:1 !important;
+  white-space:nowrap !important;
 }
-html[data-theme="win95"] .nav-btn:active{
+
-  border-top-color:#808080 !important;
+html[data-theme="win95"] .topbar .nav-btn:active,
-  border-left-color:#808080 !important;
+html[data-theme="win95"] .topbar .user-chip:active{
-  border-right-color:#FFFFFF !important;
+  border-top-color:var(--w95-shadow) !important;
-  border-bottom-color:#FFFFFF !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;
 }
 
+/* Remove the rounded “pill” look from default chip in header */
+html[data-theme="win95"] .user-chip{ border-radius:0 !important; }
+
 /* ---------- Menus ---------- */
 html[data-theme="win95"] .user-menu,
 html[data-theme="win95"] .mobile-menu-inner{
-  background:#C0C0C0;
+  background:var(--w95-face);
 }
 html[data-theme="win95"] .user-menu .menu-item,
 html[data-theme="win95"] .mobile-link{
-  color:#000;
+  color:#000; background:transparent; border-radius:0;
-  background:transparent;
-  border-radius:0;
 }
 html[data-theme="win95"] .user-menu .menu-item:hover,
 html[data-theme="win95"] .mobile-link:hover{
-  background:#000080;
+  background:var(--w95-blue); color:#fff;
-  color:#fff;
 }
 
-/* ---------- Messages (info/success/etc) ---------- */
+/* ---------- Messages ---------- */
 html[data-theme="win95"] .msg{
-  background:#DFDFDF;
+  background:#DFDFDF; color:#000;
-  color:#000;
+  border:2px solid var(--w95-face);
-  border:2px solid #C0C0C0;
+  border-top-color:var(--w95-light);
-  border-top-color:#FFFFFF;
+  border-left-color:var(--w95-light);
-  border-left-color:#FFFFFF;
+  border-right-color:var(--w95-shadow);
-  border-right-color:#808080;
+  border-bottom-color:var(--w95-shadow);
-  border-bottom-color:#808080;
   border-radius:0;
 }
 html[data-theme="win95"] .msg.info    { border-left-color:#0000AA; }
@@ -216,98 +219,66 @@ 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{
+html[data-theme="win95"] a{ color:#0000EE; }
-  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 ---------- */
 html[data-theme="win95"] .settings-console .sec-tile{
-  background:#C0C0C0;
+  background:var(--w95-face); color:#000;
-  color:#000;
+  border:2px solid var(--w95-face);
-  border:2px solid #C0C0C0;
+  border-top-color:var(--w95-light);
-  border-top-color:#FFFFFF;
+  border-left-color:var(--w95-light);
-  border-left-color:#FFFFFF;
+  border-right-color:var(--w95-shadow);
-  border-right-color:#808080;
+  border-bottom-color:var(--w95-shadow);
-  border-bottom-color:#808080;
   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{
-  background:#DFDFDF;
+  background:#DFDFDF; color:#000;
-  color:#000;
+  border:1px solid var(--w95-shadow);
-  border:1px solid #808080;
+  border-right-color:var(--w95-light);
-  border-right-color:#FFFFFF;
+  border-bottom-color:var(--w95-light);
-  border-bottom-color:#FFFFFF;
   border-radius:0;
 }
 
-/* Theme swatches inside Command Center — Win95 tile */
+/* Theme swatches inside Command Center — let the swatch be blocky */
-html[data-theme="win95"] .settings-console .swatch{
+html[data-theme="win95"] .settings-console .swatch{ border-radius:0; }
-  border-radius:0;
-}
 
 /* ---------- Misc ---------- */
-html[data-theme="win95"] .topbar-wrap.is-scrolled{
+html[data-theme="win95"] .topbar-wrap.is-scrolled{ box-shadow:none; border-bottom-color:var(--w95-dark); }
-  box-shadow:none;
+/* win95 does not use .themed-bg */
-  border-bottom-color:#000;
-}
-/* keep Classic’s .themed-bg separate; win95 doesn’t use it */
 
 /* ===============================
    Windows 95 — validation & highlights
    =============================== */
-
+html[data-theme="win95"] .mark-hit{
-/* Search term highlights */
+  background:#ffff88; color:#000;
-html[data-theme="win95"] .mark-hit {
+  padding:0 2px; border:1px solid #c0c0c0;
-  background: #ffff88;       /* Win95-ish yellow highlight */
-  color: #000;
-  padding: 0 2px;
-  border: 1px solid #c0c0c0; /* subtle pixel border */
 }
 
 /* Inputs validated by scripture-validator */
 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;        /* green “OK” frame */
+  border:2px inset #008000; background:#e8f5e8;
-  background: #e8f5e8;
 }
-
 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;        /* Win95 red tone */
+  border:2px inset #a00000; background:#fff0f0;
-  background: #fff0f0;              /* pale red fill */
 }
 
-/* Scripture/Source pills when invalid */
+/* Scripture/Source “chips” states */
-html[data-theme="win95"] .scripture-pill-invalid {
+html[data-theme="win95"] .scripture-pill-invalid{
-  background: #ffeaea;              /* pale red like you had */
+  background:#ffeaea; border:2px outset #cc6666; color:#7a1d1d;
-  border: 2px outset #cc6666;       /* 3D “raised” error chip */
-  color: #7a1d1d;
 }
-
+html[data-theme="win95"] .scripture-pill-wol{
-/* Scripture/Source pills when WOL-valid (kept subtle) */
+  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;
-  text-decoration: none;
 }
-
-/* Hover affordance for all chips in Win95 */
 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(0.96); outline:1px dotted #000; outline-offset:1px;
-  outline: 1px dotted #000;
-  outline-offset: 1px;
 }
 
-/* Message tones (info/success/warn/error) to match Win95 palette */
+/* Message tones refined to Win95 palette */
 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; }