@@ Line 1: / Line 1: @@
+/* OOO infobox — TemplateStyles + night-mode friendly
+   - Uses skin tokens with fallbacks
+   - Sets color whenever background is set
+   - Keeps border colors as literals to avoid TemplateStyles color warnings
+*/
+/* Base box */
 .ooo-infobox {
-   width: 320px;
+   width: 300px;
-   border: 1px solid #dcdcdc;
+   border-width: 1px;
+  border-style: solid;
+  border-color: #a2a9b1; /* literal to avoid linter warning */
    border-collapse: separate;
    border-spacing: 0;
-   background: #fff;
+   background: var(--background-color-base, #ffffff);
+  color: var(--color-base, #202122);
    font-size: 90%;
-   box-shadow: 0 1px 3px rgba(0,0,0,.08);
+   box-shadow: 0 2px 10px rgba(0,0,0,.08);
-   border-radius: 10px;
+   border-radius: 12px;
    overflow: hidden;
 }
-.ooo-infobox th,
+/* Links (optional; remove to let skin handle them) */
-.ooo-infobox td {
+.ooo-infobox a { color: var(--color-progressive, #36c); }
-  padding: 8px 10px;
+.ooo-infobox a:hover { color: var(--color-progressive--hover, #447ff5); }
-  vertical-align: top;
-}
+/* Title bar */
 .ooo-infobox .ooo-infobox__title {
    text-align: center;
-   font-weight: 700;
+   font-weight: 800;
-   font-size: 110%;
+   font-size: 112%;
-   background: #f6f6f6;
+  letter-spacing: .2px;
-   padding: 10px;
+   background: var(--background-color-neutral, #f5f5f5);
+  color: #cea141; /* NMC accent */
+   padding: 12px 10px;
+  border-top: 1px solid #a2a9b1;    /* literal */
+  border-bottom: 1px solid #a2a9b1; /* literal */
 }
+/* Image region */
 .ooo-infobox .ooo-infobox__image {
    text-align: center;
-   padding: 10px;
+   padding: 12px;
-   background: #fafafa;
+   background: var(--background-color-neutral-subtle, #f8f9fa);
+  color: var(--color-base, #202122);
+}
+.ooo-infobox .ooo-infobox__image img {
+  max-width: 100%;
+  height: auto;
 }
+/* Caption */
 .ooo-infobox .ooo-infobox__caption {
    text-align: center;
    font-style: italic;
-   color: #555;
+   color: var(--color-subtle, #54595d);
-   padding: 6px 10px 10px;
+   padding: 8px 12px 12px;
    line-height: 1.35;
+  background: var(--background-color-neutral-subtle, #f8f9fa);
+  border-bottom: 1px solid #a2a9b1; /* literal */
+}
+/* Table rows/cells */
+.ooo-infobox th,
+.ooo-infobox td {
+  padding: 9px 12px;
+  vertical-align: top;
+}
+.ooo-infobox th {
+  width: 46%;
+  font-weight: 600;
+  color: var(--color-emphasized, #101418);
 }
+/* Zebra striping (set color alongside background) */
 .ooo-infobox tr:nth-child(even) td,
 .ooo-infobox tr:nth-child(even) th {
-   background: #fcfcfc;
+   background: var(--background-color-neutral-subtle, #f8f9fa);
+  color: var(--color-base, #202122);
+}
+/* Group headers */
+.ooo-infobox__group th {
+  text-align: center;
+  font-weight: 800;
+  padding: 10px 12px;
+  background: var(--background-color-neutral, #eaecf0);
+  color: var(--color-base, #202122);
+  border-top: 1px solid #a2a9b1;    /* literal */
+  border-bottom: 1px solid #a2a9b1; /* literal */
 }
-.ooo-infobox th {
+/* Helper text */
-  width: 45%;
+.ooo-infobox .ooo-infobox__muted {
-   color: #444;
+   color: var(--color-subtle, #54595d);
-  text-align: left;
-  font-weight: 600;
 }
+/* --------- Night mode: forced (explicit user toggle) ---------
+   Wrapped in @media screen to avoid affecting print styles.
+*/
+@media screen {
+  html.skin-theme-clientpref-night .ooo-infobox {
+    border-color: #3a3a3a; /* literals for borders */
+    background: var(--background-color-base, #1b1b1d);
+    color: var(--color-base, #eaecf0);
+  }
+  html.skin-theme-clientpref-night .ooo-infobox a {
+    color: var(--color-progressive, #6aa9ff);
+  }
+  html.skin-theme-clientpref-night .ooo-infobox a:hover {
+    color: var(--color-progressive--hover, #8fbdff);
+  }
-.ooo-infobox__group {
+  html.skin-theme-clientpref-night .ooo-infobox .ooo-infobox__title {
-   background: #f8f9fa;
+    background: var(--background-color-neutral, #252527);
+    color: #cea141;
+    border-top-color: #3a3a3a;
+    border-bottom-color: #3a3a3a;
+  }
+  html.skin-theme-clientpref-night .ooo-infobox .ooo-infobox__image,
+  html.skin-theme-clientpref-night .ooo-infobox .ooo-infobox__caption,
+  html.skin-theme-clientpref-night .ooo-infobox tr:nth-child(even) td,
+  html.skin-theme-clientpref-night .ooo-infobox tr:nth-child(even) th {
+    background: var(--background-color-neutral-subtle, #222325);
+    color: var(--color-base, #eaecf0);
+  }
+  html.skin-theme-clientpref-night .ooo-infobox .ooo-infobox__caption,
+  html.skin-theme-clientpref-night .ooo-infobox__group th {
+    border-bottom-color: #3a3a3a;
+   }
+  html.skin-theme-clientpref-night .ooo-infobox__group th {
+    background: var(--background-color-neutral, #2a2b2e);
+    color: var(--color-base, #eaecf0);
+    border-top-color: #3a3a3a;
+  }
+  html.skin-theme-clientpref-night .ooo-infobox th {
+    color: var(--color-emphasized, #f1f2f3);
+  }
+  html.skin-theme-clientpref-night .ooo-infobox .ooo-infobox__muted {
+    color: var(--color-subtle, #a2a9b1);
+  }
 }
-.ooo-infobox__group th {
-   text-align: center;
+/* --------- Night mode: automatic (follow OS preference) --------- */
-   font-weight: 700;
+@media (prefers-color-scheme: dark) {
-   padding: 8px 10px;
+  html.skin-theme-clientpref-os .ooo-infobox {
+    border-color: #3a3a3a;
+    background: var(--background-color-base, #1b1b1d);
+    color: var(--color-base, #eaecf0);
+  }
+  html.skin-theme-clientpref-os .ooo-infobox a {
+    color: var(--color-progressive, #6aa9ff);
+  }
+  html.skin-theme-clientpref-os .ooo-infobox a:hover {
+    color: var(--color-progressive--hover, #8fbdff);
+  }
+  html.skin-theme-clientpref-os .ooo-infobox .ooo-infobox__title {
+    background: var(--background-color-neutral, #252527);
+    color: #cea141;
+    border-top-color: #3a3a3a;
+    border-bottom-color: #3a3a3a;
+  }
+  html.skin-theme-clientpref-os .ooo-infobox .ooo-infobox__image,
+  html.skin-theme-clientpref-os .ooo-infobox .ooo-infobox__caption,
+  html.skin-theme-clientpref-os .ooo-infobox tr:nth-child(even) td,
+  html.skin-theme-clientpref-os .ooo-infobox tr:nth-child(even) th {
+    background: var(--background-color-neutral-subtle, #222325);
+    color: var(--color-base, #eaecf0);
+  }
+  html.skin-theme-clientpref-os .ooo-infobox .ooo-infobox__caption,
+  html.skin-theme-clientpref-os .ooo-infobox__group th {
+    border-bottom-color: #3a3a3a;
+  }
+   html.skin-theme-clientpref-os .ooo-infobox__group th {
+    background: var(--background-color-neutral, #2a2b2e);
+    color: var(--color-base, #eaecf0);
+    border-top-color: #3a3a3a;
+   }
+  html.skin-theme-clientpref-os .ooo-infobox th {
+    color: var(--color-emphasized, #f1f2f3);
+   }
+  html.skin-theme-clientpref-os .ooo-infobox .ooo-infobox__muted {
+    color: var(--color-subtle, #a2a9b1);
+  }
 }
-.ooo-infobox__muted {
-   color: #666;
+/* Default: float right */
-   font-style: italic;
+.ooo-infobox { float: right; clear: right; margin: 0 0 1em 1em; }
+/* Overrides (use via |align=...) */
+.ooo-infobox--left   { float: left;  clear: left;  margin: 0 1em 1em 0; }
+.ooo-infobox--none   { float: none;  margin: 0 0 1em 0; }
+.ooo-infobox--center { float: none;  margin: 0 auto 1em; display: block; }
+/* Mobile: unfloat so it doesn’t squeeze text */
+@media (max-width: 640px) {
+  .ooo-infobox,
+  .ooo-infobox--left,
+   .ooo-infobox--none,
+  .ooo-infobox--center { float: none; margin: 0 0 1em 0; width: 100%; }
 }

Template:OOOInfoBox/styles.css: Difference between revisions