Toggle search
Toggle menu
92
324
19
2.8K
VAIO Library
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

MediaWiki:Common.css: Difference between revisions

MediaWiki interface page
More actions
← Older editNewer edit →
mNo edit summary
Tag: Reverted
mNo edit summary
Tag: Reverted
Line 10: Line 10:
}
}


/***** Infobox (sitewide) *****/
/* --- 0) DIAGNOSTIC: leave for a moment to verify CSS loads --- */
.infobox { outline: 6px solid red !important; }


/* Light theme defaults */
/* --- 1) Light theme (base) --- */
.mw-parser-output .infobox {
.infobox {
   /* palette via CSS vars (Common.css supports them) */
   background: #fff;
  --ibox-bg: #fff;
   color: #202122;
   --ibox-text: #202122;
   border: 1px solid #a2a9b1;
   --ibox-border: #a2a9b1;
  --ibox-hdr-bg: #f6f7f8;
  --ibox-row-hdr-bg: #f8f9fa;
 
  background: var(--ibox-bg);
  color: var(--ibox-text);
  border: 1px solid var(--ibox-border);
   border-collapse: collapse;
   border-collapse: collapse;
   float: right;
   float: right;
Line 31: Line 25:
   width: 300px;
   width: 300px;
}
}
 
.infobox th,
/* Cells */
.infobox td {
.mw-parser-output .infobox th,
   border-bottom: 1px solid #a2a9b1;
.mw-parser-output .infobox td {
   border-bottom: 1px solid var(--ibox-border);
   padding: 6px 5px;
   padding: 6px 5px;
   vertical-align: top;
   vertical-align: top;
}
}
 
.infobox .ibox-title {
/* Title row */
   background: #f6f7f8;
.mw-parser-output .infobox .ibox-title {
   background: var(--ibox-hdr-bg);
   text-align: center;
   text-align: center;
   font-weight: bold;
   font-weight: bold;
   border-bottom: 1px solid var(--ibox-border);
   border-bottom: 1px solid #a2a9b1;
   padding: 8px 10px;
   padding: 8px 10px;
}
}
 
.infobox .ibox-image {
/* Image row */
.mw-parser-output .infobox .ibox-image {
   text-align: center;
   text-align: center;
   padding: 10px;
   padding: 10px;
   border-bottom: 1px solid var(--ibox-border);
   border-bottom: 1px solid #a2a9b1;
}
}
 
.infobox .ibox-rowhead {
/* Left column headers */
   background: #f8f9fa;
.mw-parser-output .infobox .ibox-rowhead {
   background: var(--ibox-row-hdr-bg);
   text-align: left;
   text-align: left;
   white-space: nowrap;
   white-space: nowrap;
}
}


/* ---- Dark-mode overrides ---- */
/* --- 2) Poncho dark: <body class="poncho-dark-mode"> --- */
body.poncho-dark-mode .infobox {
  background: #1c252e;
  color: #e6e6e6;
  border: 1px solid #6b7785;
}
body.poncho-dark-mode .infobox th,
body.poncho-dark-mode .infobox td { border-bottom: 1px solid #6b7785; }
body.poncho-dark-mode .infobox .ibox-title {
  background: #353f47; border-bottom: 1px solid #6b7785;
}
body.poncho-dark-mode .infobox .ibox-image { border-bottom: 1px solid #6b7785; }
body.poncho-dark-mode .infobox .ibox-rowhead { background: #262f39; }


/* Poncho: <body class="poncho-dark-mode"> */
/* --- 3) Citizen dark: <html class="skin-citizen-dark"> --- */
body.poncho-dark-mode .mw-parser-output .infobox {
html.skin-citizen-dark .infobox {
   --ibox-bg: #1c252e;
   background: #1c252e;
   --ibox-text: #e6e6e6;
   color: #e6e6e6;
   --ibox-border: #6b7785;
   border: 1px solid #6b7785;
  --ibox-hdr-bg: #353f47;
  --ibox-row-hdr-bg: #262f39;
}
}
 
html.skin-citizen-dark .infobox th,
/* Citizen: <html class="skin-citizen-dark"> */
html.skin-citizen-dark .infobox td { border-bottom: 1px solid #6b7785; }
html.skin-citizen-dark .mw-parser-output .infobox {
html.skin-citizen-dark .infobox .ibox-title {
  --ibox-bg: #1c252e;
   background: #353f47; border-bottom: 1px solid #6b7785;
  --ibox-text: #e6e6e6;
   --ibox-border: #6b7785;
  --ibox-hdr-bg: #353f47;
  --ibox-row-hdr-bg: #262f39;
}
}
html.skin-citizen-dark .infobox .ibox-image { border-bottom: 1px solid #6b7785; }
html.skin-citizen-dark .infobox .ibox-rowhead { background: #262f39; }


/* Optional explicit light reset when Citizen toggles classes without reload */
/* --- 4) Optional explicit light reset when Citizen toggles --- */
html.skin-citizen-light .mw-parser-output .infobox {
html.skin-citizen-light .infobox {
   --ibox-bg: #fff;
   background: #fff; color: #202122; border: 1px solid #a2a9b1;
  --ibox-text: #202122;
  --ibox-border: #a2a9b1;
  --ibox-hdr-bg: #f6f7f8;
  --ibox-row-hdr-bg: #f8f9fa;
}
}
 
html.skin-citizen-light .infobox th,
/* Fallback: respect OS preference if a skin doesn’t set a class */
html.skin-citizen-light .infobox td { border-bottom: 1px solid #a2a9b1; }
@media (prefers-color-scheme: dark) {
html.skin-citizen-light .infobox .ibox-title {
  .mw-parser-output .infobox {
  background: #f6f7f8; border-bottom: 1px solid #a2a9b1;
    --ibox-bg: #1c252e;
    --ibox-text: #e6e6e6;
    --ibox-border: #6b7785;
    --ibox-hdr-bg: #353f47;
    --ibox-row-hdr-bg: #262f39;
  }
}
}
html.skin-citizen-light .infobox .ibox-image { border-bottom: 1px solid #a2a9b1; }
html.skin-citizen-light .infobox .ibox-rowhead { background: #f8f9fa; }

Revision as of 00:25, 21 October 2025

/* CSS placed here will be applied to all skins */
@media (max-width: 768px) {
  .infobox {
    width: 100% !important;
    float: none !important;
    clear: both !important;
    margin-left: 0 !important;
    margin-right: 5px !important;
  }
}

/* --- 0) DIAGNOSTIC: leave for a moment to verify CSS loads --- */
.infobox { outline: 6px solid red !important; }

/* --- 1) Light theme (base) --- */
.infobox {
  background: #fff;
  color: #202122;
  border: 1px solid #a2a9b1;
  border-collapse: collapse;
  float: right;
  clear: right;
  margin-left: 1em;
  margin-bottom: 1em;
  width: 300px;
}
.infobox th,
.infobox td {
  border-bottom: 1px solid #a2a9b1;
  padding: 6px 5px;
  vertical-align: top;
}
.infobox .ibox-title {
  background: #f6f7f8;
  text-align: center;
  font-weight: bold;
  border-bottom: 1px solid #a2a9b1;
  padding: 8px 10px;
}
.infobox .ibox-image {
  text-align: center;
  padding: 10px;
  border-bottom: 1px solid #a2a9b1;
}
.infobox .ibox-rowhead {
  background: #f8f9fa;
  text-align: left;
  white-space: nowrap;
}

/* --- 2) Poncho dark: <body class="poncho-dark-mode"> --- */
body.poncho-dark-mode .infobox {
  background: #1c252e;
  color: #e6e6e6;
  border: 1px solid #6b7785;
}
body.poncho-dark-mode .infobox th,
body.poncho-dark-mode .infobox td { border-bottom: 1px solid #6b7785; }
body.poncho-dark-mode .infobox .ibox-title {
  background: #353f47; border-bottom: 1px solid #6b7785;
}
body.poncho-dark-mode .infobox .ibox-image { border-bottom: 1px solid #6b7785; }
body.poncho-dark-mode .infobox .ibox-rowhead { background: #262f39; }

/* --- 3) Citizen dark: <html class="skin-citizen-dark"> --- */
html.skin-citizen-dark .infobox {
  background: #1c252e;
  color: #e6e6e6;
  border: 1px solid #6b7785;
}
html.skin-citizen-dark .infobox th,
html.skin-citizen-dark .infobox td { border-bottom: 1px solid #6b7785; }
html.skin-citizen-dark .infobox .ibox-title {
  background: #353f47; border-bottom: 1px solid #6b7785;
}
html.skin-citizen-dark .infobox .ibox-image { border-bottom: 1px solid #6b7785; }
html.skin-citizen-dark .infobox .ibox-rowhead { background: #262f39; }

/* --- 4) Optional explicit light reset when Citizen toggles --- */
html.skin-citizen-light .infobox {
  background: #fff; color: #202122; border: 1px solid #a2a9b1;
}
html.skin-citizen-light .infobox th,
html.skin-citizen-light .infobox td { border-bottom: 1px solid #a2a9b1; }
html.skin-citizen-light .infobox .ibox-title {
  background: #f6f7f8; border-bottom: 1px solid #a2a9b1;
}
html.skin-citizen-light .infobox .ibox-image { border-bottom: 1px solid #a2a9b1; }
html.skin-citizen-light .infobox .ibox-rowhead { background: #f8f9fa; }
Retrieved from "https://vaiolibrary.com/index.php?title=MediaWiki:Common.css&oldid=2726"