MediaWiki:Common.css: Difference between revisions

/* ================================================================
   ZelocoreCMS Wiki — MediaWiki:Common.css
   Pixel-perfect Wikipedia-style theme (en.wikipedia.org reference)
   ================================================================ */

/* ── Variables ─────────────────────────────────────────────── */
:root {
  --bg:          #f8f9fa;
  --white:       #ffffff;
  --border:      #a2a9b1;
  --border-lt:   #eaecf0;
  --blue:        #3366cc;
  --blue-vis:    #6b4ba1;
  --blue-lt:     #eaf3fb;
  --blue-hd:     #cee0f2;
  --blue-hd2:    #a3b0cc;
  --red-new:     #d33;
  --green:       #14866d;
  --yellow-bg:   #fef6e7;
  --yellow-bd:   #f0c93a;
  --gray-hd:     #dce3ee;
  --text:        #202122;
  --text-dim:    #54595d;
  --text-sm:     #72777d;
  --font-sans:   -apple-system, 'Linux Libertine', 'Helvetica Neue', Arial, sans-serif;
  --font-serif:  'Linux Libertine', Georgia, 'Times New Roman', serif;
  --font-mono:   'SFMono-Regular', 'Courier New', Courier, monospace;
}

/* ── Reset & Base ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  margin: 0; padding: 0;
}

/* ── Links ─────────────────────────────────────────────────── */
a, .mw-body-content a { color: var(--blue) !important; text-decoration: none !important; }
a:hover, .mw-body-content a:hover { text-decoration: underline !important; text-shadow: none !important; color: var(--blue) !important; }
a:visited, .mw-body-content a:visited { color: var(--blue-vis) !important; }
a.new, .mw-body-content a.new { color: var(--red-new) !important; }
a.new:visited { color: #a55858 !important; }
a.external { color: #3366cc !important; }

/* ── Headings ──────────────────────────────────────────────── */
#firstHeading, .mw-page-title-main {
  font-family: var(--font-sans) !important;
  font-size: 2em !important;
  font-weight: normal !important;
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
  background: none !important;
  border-bottom: 1px solid var(--border) !important;
  padding-bottom: 5px !important;
  margin-top: 0 !important;
  margin-bottom: 10px !important;
  line-height: 1.2 !important;
}
.mw-body-content h2 {
  font-size: 1.5em !important; font-weight: normal !important;
  color: var(--text) !important; border-bottom: 1px solid var(--border) !important;
  padding-bottom: 3px !important; margin-top: 20px !important;
}
.mw-body-content h2 .mw-headline {
  color: var(--text) !important; -webkit-text-fill-color: var(--text) !important; background: none !important;
}
.mw-body-content h3 { font-size: 1.2em !important; font-weight: bold !important; color: var(--text) !important; }
.mw-body-content h4 { font-size: 1em !important; font-weight: bold !important; color: var(--text) !important; }

/* ── Header / Toolbar ──────────────────────────────────────── */
#mw-head, .mw-header { background: var(--white) !important; border-bottom: 1px solid var(--border-lt) !important; box-shadow: none !important; }
.vector-page-toolbar { background: transparent !important; border-bottom: 1px solid var(--border-lt) !important; }

/* ── Search ────────────────────────────────────────────────── */
.cdx-text-input__input, #searchInput, input[name="search"] {
  background: var(--white) !important; border: 1px solid var(--border) !important;
  border-radius: 2px !important; color: var(--text) !important;
  font-family: var(--font-sans) !important; font-size: 13px !important;
  padding: 5px 10px !important; box-shadow: none !important;
}
.cdx-text-input__input:focus, #searchInput:focus {
  border-color: var(--blue) !important; box-shadow: 0 0 0 2px rgba(51,102,204,0.15) !important; outline: none !important;
}

/* ── Sidebar ───────────────────────────────────────────────── */
#mw-panel, .mw-sidebar { background: transparent !important; }
.mw-panel .portal, .vector-menu-portal { background: transparent !important; border: none !important; margin-bottom: 10px !important; }
.mw-panel .portal h3, .vector-menu-heading {
  color: var(--text-dim) !important; font-size: 0.75em !important;
  font-weight: bold !important; text-transform: uppercase !important;
  letter-spacing: 0.025em !important; padding: 4px 0 3px !important;
  border-bottom: 1px solid var(--border-lt) !important; background: transparent !important;
}
.mw-panel .portal ul li a, .vector-menu-content-list li a {
  color: var(--blue) !important; font-size: 0.875em !important;
  padding: 2px 0 !important; display: block !important;
  background: transparent !important; border: none !important;
}
.mw-panel .portal ul li a:hover, .vector-menu-content-list li a:hover {
  text-decoration: underline !important; background: transparent !important; text-shadow: none !important;
}

/* ── Content area ──────────────────────────────────────────── */
.mw-body { background: var(--white) !important; border: none !important; padding: 20px 30px !important; color: var(--text) !important; }
.mw-body-content { background: var(--white) !important; color: var(--text) !important; font-size: 0.9375em; }
.mw-page-container { background: var(--bg) !important; }
.mw-content-container { background: var(--white) !important; }

/* ── Wikitable ─────────────────────────────────────────────── */
.wikitable {
  background: var(--white) !important; border-collapse: collapse !important;
  border: 1px solid var(--border) !important; margin: 1em 0 !important; font-size: 0.9em;
}
.wikitable > tr > th, .wikitable > * > tr > th {
  background: var(--blue-hd) !important; color: var(--text) !important;
  border: 1px solid var(--border) !important; padding: 5px 8px !important;
  font-weight: bold !important; font-size: 1em !important; text-align: left !important;
}
.wikitable > tr > td, .wikitable > * > tr > td {
  background: var(--white) !important; color: var(--text) !important;
  border: 1px solid var(--border) !important; padding: 5px 8px !important;
}
.wikitable > tr:nth-child(even) > td, .wikitable > tbody > tr:nth-child(even) > td {
  background: #f8f9fa !important;
}
.wikitable > tbody > tr:hover > td { background: var(--blue-lt) !important; }

/* ── Infobox ───────────────────────────────────────────────── */
.infobox, table.infobox {
  float: right !important; clear: right !important;
  margin: 0 0 1em 1.5em !important; width: 22em !important;
  background: var(--white) !important; border: 1px solid var(--border) !important;
  border-collapse: collapse !important; font-size: 88% !important; line-height: 1.5 !important;
  box-shadow: none !important; backdrop-filter: none !important;
}
.infobox caption, table.infobox caption {
  background: var(--blue-hd) !important; color: var(--text) !important;
  font-weight: bold !important; font-size: 1.1em !important;
  padding: 6px 10px !important; text-align: center !important;
  border-bottom: 1px solid var(--border) !important;
}
.infobox th { background: #f8f9fa !important; color: var(--text) !important; border: 1px solid var(--border) !important; padding: 4px 6px !important; font-weight: bold !important; text-transform: none !important; }
.infobox td { background: var(--white) !important; color: var(--text) !important; border: 1px solid var(--border) !important; padding: 4px 6px !important; }

/* ── TOC ───────────────────────────────────────────────────── */
#toc, .toc {
  background: #f8f9fa !important; border: 1px solid var(--border) !important;
  padding: 10px 16px !important; display: table !important; margin: 0 0 1em 0 !important;
  box-shadow: none !important; border-radius: 0 !important;
}
#toc h2, .toc h2, .toc .toctitle {
  font-size: 1em !important; font-weight: bold !important; text-align: center !important;
  color: var(--text) !important; -webkit-text-fill-color: var(--text) !important;
  background: none !important; border: none !important; padding: 0 0 5px !important; margin: 0 !important;
}
.toc a, #toc a { color: var(--blue) !important; font-size: 0.875em !important; }
.toc li, #toc li { line-height: 1.7 !important; }
.toc ul, #toc ul { margin: 0 !important; padding: 0 0 0 1.5em !important; list-style: none !important; }
.tocnumber { color: var(--text-dim) !important; padding-right: 4px !important; }

/* ── Code / Pre ────────────────────────────────────────────── */
code, tt, kbd, var {
  font-family: var(--font-mono) !important; background: #f8f9fa !important;
  color: var(--text) !important; padding: 1px 4px !important; font-size: 0.875em !important;
  border: 1px solid var(--border-lt) !important; border-radius: 2px !important;
}
pre, .mw-code, .mw-body-content pre {
  font-family: var(--font-mono) !important; background: #f8f9fa !important;
  color: var(--text) !important; border: 1px solid var(--border) !important;
  padding: 1em !important; overflow-x: auto !important; font-size: 0.875em !important;
  line-height: 1.5 !important; margin: 0.8em 0 !important;
  border-radius: 0 !important; position: relative;
}
.mw-highlight { background: #f8f9fa !important; border: 1px solid var(--border) !important; }
.mw-highlight pre { border: none !important; margin: 0 !important; }

/* ── Message Boxes (ambox) ─────────────────────────────────── */
.zc-note, div.zc-note {
  background: #eaf3fb !important; border: 1px solid #36c !important;
  border-left: 4px solid #36c !important; padding: 8px 12px !important;
  margin: 0.8em 0 !important; font-size: 0.9em !important; border-radius: 0 !important; color: var(--text) !important;
}
.zc-warning, div.zc-warning {
  background: #fef6e7 !important; border: 1px solid var(--yellow-bd) !important;
  border-left: 4px solid var(--yellow-bd) !important; padding: 8px 12px !important;
  margin: 0.8em 0 !important; font-size: 0.9em !important; border-radius: 0 !important; color: var(--text) !important;
}
.zc-tip, div.zc-tip {
  background: #f3fbef !important; border: 1px solid #36a73a !important;
  border-left: 4px solid #36a73a !important; padding: 8px 12px !important;
  margin: 0.8em 0 !important; font-size: 0.9em !important; border-radius: 0 !important; color: var(--text) !important;
}
.zc-verified-banner {
  background: #f3fbf7 !important; border: 1px solid var(--green) !important;
  border-left: 4px solid var(--green) !important; padding: 8px 12px !important;
  margin-bottom: 1em !important; display: flex; align-items: flex-start; gap: 10px;
  color: var(--text) !important; border-radius: 0 !important; box-shadow: none !important; animation: none !important;
}

/* ── Badges ────────────────────────────────────────────────── */
.zc-owner-badge   { display:inline-block; background:#14866d; color:#fff !important; font-size:0.75em; font-weight:bold; padding:1px 6px; border-radius:2px; }
.zc-dev-badge     { display:inline-block; background:var(--blue); color:#fff !important; font-size:0.75em; font-weight:bold; padding:1px 6px; border-radius:2px; }
.zc-contrib-badge { display:inline-block; background:#72777d; color:#fff !important; font-size:0.75em; font-weight:bold; padding:1px 6px; border-radius:2px; }
.zc-version-badge { display:inline-block; background:#f8f9fa; border:1px solid var(--border); color:var(--text); font-family:var(--font-mono); font-size:0.8em; padding:1px 5px; border-radius:2px; }
.zc-license-badge { display:inline-block; background:var(--blue-lt); border:1px solid var(--border); color:var(--blue); font-size:0.8em; font-weight:bold; padding:1px 5px; border-radius:2px; }

/* ── Profile card ──────────────────────────────────────────── */
.zc-profile-card { background:var(--white) !important; border:1px solid var(--border) !important; padding:16px !important; margin-bottom:1.5em !important; box-shadow:none !important; border-radius:0 !important; }
.zc-skill-tag { display:inline-block; background:#f8f9fa; border:1px solid var(--border); color:var(--text-dim); font-size:0.8em; padding:2px 7px; border-radius:2px; margin:2px; }

/* ── Buttons ───────────────────────────────────────────────── */
.mw-ui-button { background:#f8f9fa !important; border:1px solid var(--border) !important; border-radius:2px !important; color:var(--text) !important; font-size:0.875em !important; padding:6px 16px !important; box-shadow:none !important; }
.mw-ui-button:hover { background:var(--border-lt) !important; }
.mw-ui-progressive, .mw-ui-button.mw-ui-progressive { background:var(--blue) !important; border-color:#2a4b8d !important; color:#fff !important; }
.mw-ui-progressive:hover { background:#2a4b8d !important; }

/* ── Page tabs ─────────────────────────────────────────────── */
#p-views .selected a { color:var(--text) !important; border-bottom:2px solid var(--text) !important; }
#p-views li a { color:var(--blue) !important; border-bottom:2px solid transparent; font-size:0.875em !important; }
#p-views li a:hover { text-decoration:none !important; color:var(--text) !important; }

/* ── Category links ────────────────────────────────────────── */
.mw-normal-catlinks, div.mw-normal-catlinks {
  background:#f8f9fa !important; border:1px solid var(--border) !important;
  padding:5px 10px !important; margin-top:1em !important; font-size:0.9em !important;
}
.mw-normal-catlinks a { color:var(--blue) !important; }

/* ── Footer ────────────────────────────────────────────────── */
#footer, .mw-footer {
  background:#f8f9fa !important; border-top:1px solid var(--border) !important;
  color:var(--text-sm) !important; padding:16px 24px !important;
  font-size:0.8125em !important; margin-top:2em !important;
}
#footer a, .mw-footer a { color:var(--blue) !important; }
#footer a:hover { text-decoration:underline !important; text-shadow:none !important; }
#footer-icons { float:right !important; }
.mw-footer-container { display:flex; flex-wrap:wrap; align-items:center; }

/* ── Edit textarea ─────────────────────────────────────────── */
textarea#wpTextbox1 { background:var(--white) !important; color:var(--text) !important; border:1px solid var(--border) !important; font-family:var(--font-mono) !important; padding:8px !important; border-radius:2px !important; }
.diff-addedline { background:#d4f4d4 !important; }
.diff-deletedline { background:#f4d4d4 !important; }
.diffchange { background:#ffd !important; font-weight:bold !important; }

/* ── Notifications / Echo ──────────────────────────────────── */
.oo-ui-popupWidget { background:var(--white) !important; border:1px solid var(--border) !important; box-shadow:0 2px 8px rgba(0,0,0,0.15) !important; border-radius:2px !important; }
.mw-echo-ui-notificationItemWidget { border-bottom:1px solid var(--border-lt) !important; background:var(--white) !important; color:var(--text) !important; }
.mw-echo-ui-notificationItemWidget:hover { background:#f8f9fa !important; }

/* ── Progress bar (reading) ────────────────────────────────── */
#zc-reading-progress { background:var(--blue) !important; box-shadow:none !important; }

/* ── Back to top ───────────────────────────────────────────── */
#zc-back-to-top { background:var(--blue) !important; color:#fff !important; box-shadow:0 2px 8px rgba(0,0,0,0.2) !important; font-size:1rem !important; }

/* ── Copy button ───────────────────────────────────────────── */
.zc-copy-btn { background:#f8f9fa !important; border:1px solid var(--border) !important; color:var(--text-dim) !important; }
.zc-copy-btn:hover { background:var(--border-lt) !important; border-color:var(--blue) !important; color:var(--blue) !important; }

/* ── Recent changes ────────────────────────────────────────── */
.mw-changeslist-line { border-bottom:1px solid var(--border-lt) !important; padding:3px 0 !important; }
.mw-changeslist-separator { display:none; }

/* ═══════════════════════════════════════════════════════════
   MAIN PAGE — Wikipedia Layout
   ═══════════════════════════════════════════════════════════ */

/* Hide the page title on Main_Page */
.page-Main_Page #firstHeading,
.page-Main_Page .mw-page-title-main { display:none !important; }

/* Top banner */
#mp-topbanner {
  background: var(--blue-hd);
  border: 1px solid var(--border);
  padding: 12px 16px;
  margin-bottom: 14px;
  text-align: center;
  font-size: 1.05em;
}

/* Main page column container */
#mp-upper {
  display: flex;
  gap: 0;
  margin-bottom: 14px;
  align-items: flex-start;
}

/* Left column (55%) */
#mp-left {
  width: 55%;
  padding-right: 12px;
  border-right: 1px solid var(--border);
}

/* Right column (45%) */
#mp-right {
  width: 45%;
  padding-left: 12px;
}

/* Section box headings */
.mp-h2 {
  background: var(--blue-hd);
  border: 1px solid var(--border);
  border-bottom: none;
  padding: 5px 10px;
  font-size: 0.95em;
  font-weight: bold;
  font-family: var(--font-sans);
  color: var(--text);
  margin: 0;
}
.mp-h2-yellow { background: var(--yellow-bg); border-bottom: none; }
.mp-h2-green  { background: #ecf5ec; border-bottom: none; }
.mp-h2-gray   { background: var(--gray-hd); border-bottom: none; }

/* Section box body */
.mp-body {
  background: var(--white);
  border: 1px solid var(--border);
  border-top: none;
  padding: 10px 12px;
  margin-bottom: 12px;
  font-size: 0.875em;
  line-height: 1.6;
  color: var(--text);
}
.mp-body ul { margin: 0; padding-left: 1.5em; }
.mp-body li { margin-bottom: 4px; }
.mp-body a { color: var(--blue) !important; }

/* Portal grid (bottom of main page) */
#mp-portals {
  margin-top: 14px;
  border: 1px solid var(--border);
}
#mp-portals-header {
  background: var(--gray-hd);
  border-bottom: 1px solid var(--border);
  padding: 6px 12px;
  font-weight: bold;
  font-size: 0.95em;
}
.mp-portal-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  background: var(--white);
}
.mp-portal-cell {
  flex: 1 1 16%;
  border-right: 1px solid var(--border-lt);
  border-bottom: 1px solid var(--border-lt);
  padding: 10px 8px;
  text-align: center;
  font-size: 0.875em;
  min-width: 100px;
}
.mp-portal-cell:hover { background: var(--blue-lt); }
.mp-portal-cell a { color: var(--blue) !important; font-weight: bold; display:block; }
.mp-portal-icon { font-size: 1.8em; display: block; margin-bottom: 4px; line-height:1; }
.mp-portal-desc { display:block; color:var(--text-dim); font-size:0.85em; margin-top:2px; font-weight:normal; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 768px) {
  #mp-upper { flex-direction: column; }
  #mp-left { width: 100%; padding-right: 0; border-right: none; border-bottom: 1px solid var(--border); padding-bottom: 12px; margin-bottom: 12px; }
  #mp-right { width: 100%; padding-left: 0; }
  .infobox { float: none !important; width: 100% !important; margin: 0 0 1em 0 !important; }
  .mw-body { padding: 12px !important; }
  .mp-portal-cell { flex: 1 1 30%; }
}

@media print {
  #mw-head, #mw-panel, #footer, .noprint, #zc-reading-progress, #zc-back-to-top { display:none !important; }
  body { background:#fff !important; color:#000 !important; }
  a { color:#000 !important; text-decoration:underline !important; }
}