MediaWiki:Common.css: Difference between revisions

← Older edit

@@ Line 267: / Line 267: @@
 }
-/* =====================================
+/* --- Fix white background on .vector-pinned-container --- */
-    Light Mode – Global background unification
-   Fixes white gutters and outer wrappers
-===================================== */
-html.skin-theme-clientpref-day,
+/* DARK MODE */
-html.skin-theme-clientpref-os-light {
+html.skin-theme-clientpref-night .vector-pinned-container {
-    background-color: #f8f8f2 !important;
+  background-color: #101418 !important;  /* your dark background */
-    color: #101418 !important;
+  color: #f8f8f2 !important;
 }
-/* Apply cream background to all main layout wrappers */
+/* LIGHT MODE */
-html.skin-theme-clientpref-day body,
+html.skin-theme-clientpref-day .vector-pinned-container {
-html.skin-theme-clientpref-day .vector-skin-container,
+  background-color: #f8f8f2 !important;  /* your light container tone */
-html.skin-theme-clientpref-day .vector-page,
+  color: #101418 !important;
-html.skin-theme-clientpref-day .vector-main-container,
+}
-html.skin-theme-clientpref-day .vector-header,
-html.skin-theme-clientpref-day .vector-sticky-header-container,
+/* Make sure inner panels inherit the correct color */
-html.skin-theme-clientpref-day .vector-sidebar-container,
+html.skin-theme-clientpref-night .vector-pinned-container * {
-html.skin-theme-clientpref-day #mw-panel,
+  background-color: transparent !important;
-html.skin-theme-clientpref-day .mw-body,
+  color: inherit !important;
-html.skin-theme-clientpref-day #content,
+}
-html.skin-theme-clientpref-day .mw-footer {
+html.skin-theme-clientpref-day .vector-pinned-container * {
-    background-color: #f8f8f2 !important;
+  background-color: transparent !important;
-     color: #101418 !important;
+  color: inherit !important;
+}
+/* --- Fix white background on dropdown menus --- */
+/* DARK MODE */
+html.skin-theme-clientpref-night .vector-dropdown-content,
+html.skin-theme-clientpref-night .vector-dropdown-content * {
+  background-color: #101418 !important;
+  color: #f8f8f2 !important;
+  border-color: #6272a4 !important;
+}
+/* LIGHT MODE */
+html.skin-theme-clientpref-day .vector-dropdown-content,
+html.skin-theme-clientpref-day .vector-dropdown-content * {
+  background-color: #f8f8f2 !important;
+  color: #101418 !important;
+  border-color: #6272a4 !important;
+}
+/* --- Final background patch for bottom white stripe --- */
+/* DARK MODE */
+html.skin-theme-clientpref-night .vector-sitenotice-container,
+html.skin-theme-clientpref-night .vector-column-start {
+  background-color: #101418 !important;
+  color: #f8f8f2 !important;
+}
+/* LIGHT MODE */
+html.skin-theme-clientpref-day .vector-sitenotice-container,
+html.skin-theme-clientpref-day .vector-column-start {
+  background-color: #f8f8f2 !important;
+  color: #101418 !important;
+}
+/* Ensure children inherit correctly */
+html.skin-theme-clientpref-night .vector-sitenotice-container *,
+html.skin-theme-clientpref-night .vector-column-start * {
+  background-color: transparent !important;
+  color: inherit !important;
+}
+html.skin-theme-clientpref-day .vector-sitenotice-container *,
+html.skin-theme-clientpref-day .vector-column-start * {
+  background-color: transparent !important;
+  color: inherit !important;
+}
+/* Remove the white shadow explicitly */
+.box-shadow-color-inverted {
+  box-shadow: none !important;
+  -webkit-box-shadow: none !important;
+}
+/* Infobox: character */
+.infobox-character {
+  border: 1px solid #6272a4;
+  background: #101418;       /* dark background (night mode) */
+  color: #f8f8f2;
+  padding: 0.25em;
+  margin: 0.6em 0;
+  font-size: 0.92em;
+  line-height:1.25;
+  float: right;
+  clear: right;
+  max-width: 22em;
+}
+/* heading/title row in infobox (handled by template's inline style, but safe fallback) */
+.infobox-character > caption,
+.infobox-character .infobox-title,
+.infobox-character th {
+  color: #ff79c6;
+  background: transparent;
+  font-weight: bold;
+}
+/* label cells */
+.infobox-character td:first-child,
+.infobox-character th {
+  background: transparent;
+  color: #f8f8f2;
+  vertical-align: top;
+  padding-right: 0.4em;
+  white-space: nowrap;
+}
+/* value cells */
+.infobox-character td:nth-child(2) {
+  background: transparent;
+  color: #f8f8f2;
+  padding-left: 0.4em;
+}
+/* image styling */
+.infobox-character img,
+.infobox-character .thumbimage {
+  display:block;
+  margin: 0.4em auto;
+  max-width: 95%;
+  height: auto;
+}
+/* Light-mode overrides (if you use the vector day/night selectors) */
+html.skin-theme-clientpref-day .infobox-character {
+  background: #f8f8f2;
+  color: #101418;
+  border: 1px solid #6272a4;
+}
+html.skin-theme-clientpref-day .infobox-character th {
+  color: #ff79c6;
+}
+/* Hide stray VisualEditor <p><br></p> after infoboxes */
+.mw-parser-output .infobox + p:has(br) {
+    display: none !important;
+    margin: 0 !important;
+    padding: 0 !important;
+}
+/* === Mobile Infobox Layout Fix === */
+@media (max-width: 768px) {
+  /* Force infoboxes to drop below text and use full width */
+  .infobox {
+    float: none !important;
+    margin: 1em auto !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    clear: both !important;
+    display: block !important;
+  }
+  /* Slight padding and center alignment for aesthetics */
+  .infobox th,
+  .infobox td {
+    padding: 0.4em !important;
+  }
+  /* Make sure text wraps nicely */
+  .infobox td,
+  .infobox th {
+    word-wrap: break-word !important;
+  }
+}
+/* === Desktop: show full wordmark === */
+.mw-logo-icon { display: none !important; }
+.mw-logo-wordmark { display: inline-block !important; }
+/* === Mobile (under 768px): hide wordmark, show square icon === */
+@media (max-width: 768px) {
+  .mw-logo-wordmark { display: none !important; }
+  .mw-logo-icon {
+     display: inline-block !important;
+    content: url("https://untenables.com/images/2/26/Favicon.png");
+    width: 42px;
+    height: auto;
+    margin-top: 4px;
+  }
 }