Template:OOOInfoBox/styles.css: Difference between revisions

← Older edit Newer edit →

@@ Line 1: / Line 1: @@
-/* NMC dark skin for OOO infobox */
+/* Night-mode safe + TemplateStyles-friendly */
 .ooo-infobox {
    width: 340px;
-   border: 1px solid #454545;
+   border-width: 1px;
+  border-style: solid;
+  border-color: #a2a9b1; /* <-- no var() here */
    border-collapse: separate;
    border-spacing: 0;
-   background: #2a2a2a;               /* dark card */
+   background: var(--background-color-base,#ffffff);
-   color: #eaeaea;
+   color: var(--color-base,#202122);
    font-size: 90%;
-   box-shadow: 0 2px 10px rgba(0,0,0,.25);
+   box-shadow: 0 2px 10px rgba(0,0,0,.08);
    border-radius: 12px;
    overflow: hidden;
 }
-/* title bar */
+/* Links */
+.ooo-infobox a { color: var(--color-progressive,#36c); }
+.ooo-infobox a:hover { color: var(--color-progressive--hover,#447ff5); }
+/* Title bar */
 .ooo-infobox .ooo-infobox__title {
    text-align: center;
@@ Line 19: / Line 26: @@
    font-size: 112%;
    letter-spacing: .2px;
-   background: #353535;               /* your dark gray */
+   background: var(--background-color-neutral,#f5f5f5);
-   color: #cea141;                     /* your gold */
+   color: #cea141; /* NMC accent */
    padding: 12px 10px;
-   border-bottom: 1px solid #454545;
+  border-top: 1px solid #a2a9b1;    /* <-- plain color */
+   border-bottom: 1px solid #a2a9b1; /* <-- plain color */
 }
-/* image area */
+/* Image region */
 .ooo-infobox .ooo-infobox__image {
    text-align: center;
    padding: 12px;
-   background: #2f2f2f;
+   background: var(--background-color-neutral-subtle,#f8f9fa);
+}
+.ooo-infobox .ooo-infobox__image img {
+  max-width: 100%;
+  height: auto;
 }
-/* caption / description */
+/* Caption */
 .ooo-infobox .ooo-infobox__caption {
    text-align: center;
    font-style: italic;
-   color: #cfcfcf;
+   color: var(--color-subtle,#54595d);
    padding: 8px 12px 12px;
    line-height: 1.35;
-   background: #2f2f2f;
+   background: var(--background-color-neutral-subtle,#f8f9fa);
-   border-bottom: 1px solid #3a3a3a;
+   border-bottom: 1px solid #a2a9b1; /* <-- plain color */
 }
-/* rows */
+/* Rows */
 .ooo-infobox th,
 .ooo-infobox td {
@@ Line 49: / Line 61: @@
    vertical-align: top;
 }
 .ooo-infobox th {
    width: 46%;
-  color: #e6e6e6;
-  text-align: left;
    font-weight: 600;
+  color: var(--color-emphasized,#101418);
 }
-/* subtle zebra striping */
+/* Zebra striping */
 .ooo-infobox tr:nth-child(even) td,
 .ooo-infobox tr:nth-child(even) th {
-   background: rgba(255,255,255,0.03);
+   background: var(--background-color-neutral-subtle,#f8f9fa);
 }
-/* group headers */
+/* Group headers */
 .ooo-infobox__group th {
-   text-align: center !important;
+   text-align: center;
-   font-weight: 800 !important;
+   font-weight: 800;
-   padding: 10px 12px !important;
+   padding: 10px 12px;
-   background: #303030 !important;
+   background: var(--background-color-neutral,#eaecf0);
-   color: #f0f0f0 !important;
+   color: var(--color-base,#202122);
-   border-top: 1px solid #3a3a3a;
+   border-top: 1px solid #a2a9b1;    /* <-- plain color */
-   border-bottom: 1px solid #3a3a3a;
+   border-bottom: 1px solid #a2a9b1; /* <-- plain color */
 }
-/* small helper */
+/* Helper text */
-.ooo-infobox .ooo-infobox__muted { color: #bdbdbd; }
+.ooo-infobox .ooo-infobox__muted {
+  color: var(--color-subtle,#54595d);
+}
-/* link contrast inside the box */
+/* Dark-mode border tweaks (no vars in border colors) */
-.ooo-infobox a { color: #ffd27a; }
+@media (prefers-color-scheme: dark) {
-.ooo-infobox a:hover { color: #ffeaac; }
+  .ooo-infobox { border-color: #3a3a3a; }
+  .ooo-infobox .ooo-infobox__title {
+    border-top-color: #3a3a3a;
+    border-bottom-color: #3a3a3a;
+  }
+  .ooo-infobox .ooo-infobox__caption { border-bottom-color: #3a3a3a; }
+  .ooo-infobox__group th {
+    border-top-color: #3a3a3a;
+    border-bottom-color: #3a3a3a;
+  }
+}
-/* images should not overflow */
+/* Responsive */
-.ooo-infobox .ooo-infobox__image img { max-width: 100%; height: auto; }
+@media (max-width: 640px) {
+  .ooo-infobox { width: 100%; }
+}