MediaWiki:Common.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* ============================================================
   ZelocoreCMS Wiki — MediaWiki:Common.css
   Wikipedia-style Classic Light Theme
   ============================================================ */

/* ── Google Fonts ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Linux+Libertine+O&family=Source+Sans+3:wght@300;400;600;700&family=Source+Serif+4:wght@400;600&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Design Tokens ────────────────────────────────────────── */
:root {
  --wp-bg:           #f8f9fa;
  --wp-white:        #ffffff;
  --wp-border:       #a2a9b1;
  --wp-border-light: #eaecf0;
  --wp-blue:         #3366cc;
  --wp-blue-visited: #6b4ba1;
  --wp-blue-light:   #eaf3fb;
  --wp-blue-header:  #cee0f2;
  --wp-red:          #cc0000;
  --wp-green:        #14866d;
  --wp-yellow-light: #fef6e7;
  --wp-yellow-border:#f0c93a;
  --wp-text:         #202122;
  --wp-text-muted:   #54595d;
  --wp-text-small:   #72777d;
  --wp-heading:      #000000;
  --wp-accent:       #0088cc;
  --zc-cyan:         #00a8cc;
  --zc-teal:         #006e8a;
  --wp-font-serif:   'Linux Libertine O', 'Linux Libertine', Georgia, 'Times New Roman', serif;
  --wp-font-sans:    'Source Sans 3', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --wp-font-mono:    'JetBrains Mono', 'Courier New', monospace;
}

/* ── Base ─────────────────────────────────────────────────── */
* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #c8ccd1 #f8f9fa;
}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f8f9fa; }
::-webkit-scrollbar-thumb { background: #c8ccd1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #a2a9b1; }

body {
  background-color: var(--wp-bg) !important;
  color: var(--wp-text) !important;
  font-family: var(--wp-font-sans) !important;
  font-size: 14px;
  line-height: 1.6;
}

/* ── Typography ───────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--wp-font-sans) !important;
  color: var(--wp-heading) !important;
  font-weight: 700;
  line-height: 1.3;
}

#firstHeading,
.mw-page-title-main {
  font-family: var(--wp-font-sans) !important;
  font-size: 1.95em !important;
  font-weight: normal !important;
  color: var(--wp-heading) !important;
  border-bottom: 1px solid var(--wp-border) !important;
  padding-bottom: 3px !important;
  margin-bottom: 0.6em !important;
  -webkit-text-fill-color: var(--wp-heading) !important;
  background: none !important;
}

.mw-body-content h2 {
  font-size: 1.5em !important;
  font-weight: normal !important;
  color: var(--wp-heading) !important;
  border-bottom: 1px solid var(--wp-border) !important;
  padding-bottom: 2px !important;
  margin-top: 1.5em !important;
  margin-bottom: 0.5em !important;
}

.mw-body-content h2 .mw-headline {
  background: none !important;
  -webkit-text-fill-color: var(--wp-heading) !important;
  color: var(--wp-heading) !important;
}

.mw-body-content h3 {
  font-size: 1.2em !important;
  font-weight: bold !important;
  color: var(--wp-heading) !important;
}

.mw-body-content h4 {
  font-size: 1em !important;
  font-weight: bold !important;
  color: var(--wp-heading) !important;
}

p { color: var(--wp-text); margin-bottom: 0.8em; }

/* ── Links ─────────────────────────────────────────────────── */
a,
.mw-body-content a {
  color: var(--wp-blue) !important;
  text-decoration: none !important;
}

a:hover,
.mw-body-content a:hover {
  text-decoration: underline !important;
  color: var(--wp-blue) !important;
  text-shadow: none !important;
}

a:visited,
.mw-body-content a:visited {
  color: var(--wp-blue-visited) !important;
}

a.new,
.mw-body-content a.new {
  color: #cc2200 !important;
}

a.new:visited { color: #a55858 !important; }

/* ── Header / Navbar ─────────────────────────────────────── */
#mw-head,
.mw-header {
  background: var(--wp-white) !important;
  border-bottom: 1px solid var(--wp-border-light) !important;
  box-shadow: none !important;
}

/* ── Search Bar ───────────────────────────────────────────── */
#searchInput,
.cdx-text-input__input,
input[name="search"] {
  background: var(--wp-white) !important;
  border: 1px solid var(--wp-border) !important;
  border-radius: 2px !important;
  color: var(--wp-text) !important;
  font-family: var(--wp-font-sans) !important;
  font-size: 13px !important;
  padding: 6px 10px !important;
  transition: border-color 0.15s !important;
  box-shadow: none !important;
}

#searchInput:focus,
.cdx-text-input__input:focus,
input[name="search"]:focus {
  border-color: var(--wp-blue) !important;
  box-shadow: 0 0 0 2px rgba(51,102,204,0.15) !important;
  outline: none !important;
}

#searchButton, #mw-searchButton,
.cdx-search-input__end-button {
  background: var(--wp-blue) !important;
  border: 1px solid #2a4b8d !important;
  border-radius: 2px !important;
  color: #fff !important;
  font-size: 13px !important;
  padding: 6px 14px !important;
  cursor: pointer !important;
  font-family: var(--wp-font-sans) !important;
}

#searchButton:hover { background: #2a4b8d !important; }

/* ── Sidebar ──────────────────────────────────────────────── */
#mw-panel,
.mw-sidebar,
nav.vector-menu {
  background: transparent !important;
}

.mw-panel .portal,
.vector-menu-portal {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  margin-bottom: 8px !important;
}

.mw-panel .portal h3,
.vector-menu-heading {
  background: transparent !important;
  color: var(--wp-text-muted) !important;
  font-size: 0.8em !important;
  font-weight: bold !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  padding: 4px 0 2px 0 !important;
  border-bottom: 1px solid var(--wp-border-light) !important;
  margin-bottom: 4px !important;
}

.mw-panel .portal li a,
.vector-menu-content-list li a {
  color: var(--wp-blue) !important;
  font-size: 0.875em !important;
  padding: 2px 0 !important;
  display: block;
  border-left: none !important;
  background: transparent !important;
}

.mw-panel .portal li a:hover,
.vector-menu-content-list li a:hover {
  color: var(--wp-blue) !important;
  background: transparent !important;
  text-decoration: underline !important;
  border-left: none !important;
  text-shadow: none !important;
}

/* ── Content Area ─────────────────────────────────────────── */
#mw-content-text,
.mw-body,
.mw-body-content {
  background: var(--wp-white) !important;
  color: var(--wp-text) !important;
}

.mw-body {
  background: var(--wp-white) !important;
  border: none !important;
  padding: 20px !important;
}

/* ── Tables (Wikipedia wikitable style) ───────────────────── */
.wikitable,
.mw-body-content table.wikitable {
  background: var(--wp-white) !important;
  border: 1px solid var(--wp-border) !important;
  border-collapse: collapse !important;
  border-radius: 0 !important;
  margin: 1em 0 !important;
  font-size: 0.9em;
}

.wikitable th {
  background: var(--wp-blue-header) !important;
  color: var(--wp-text) !important;
  font-weight: bold !important;
  font-size: 1em !important;
  padding: 5px 8px !important;
  border: 1px solid var(--wp-border) !important;
  letter-spacing: 0;
}

.wikitable td {
  background: var(--wp-white) !important;
  color: var(--wp-text) !important;
  padding: 5px 8px !important;
  border: 1px solid var(--wp-border) !important;
}

.wikitable tr:nth-child(even) td {
  background: var(--wp-bg) !important;
}

.wikitable tr:hover td {
  background: var(--wp-blue-light) !important;
}

/* Sortable tables */
.wikitable.sortable th {
  cursor: pointer;
}

/* ── Code & Pre ───────────────────────────────────────────── */
code, tt, kbd {
  font-family: var(--wp-font-mono) !important;
  background: var(--wp-bg) !important;
  color: var(--wp-text) !important;
  padding: 1px 5px !important;
  border-radius: 2px !important;
  font-size: 0.875em !important;
  border: 1px solid var(--wp-border-light) !important;
}

pre,
.mw-body-content pre {
  font-family: var(--wp-font-mono) !important;
  background: var(--wp-bg) !important;
  color: var(--wp-text) !important;
  border: 1px solid var(--wp-border) !important;
  border-left: 3px solid var(--wp-border) !important;
  border-radius: 0 !important;
  padding: 1em !important;
  overflow-x: auto !important;
  font-size: 0.875em !important;
  line-height: 1.5 !important;
  margin: 0.8em 0 !important;
}

/* SyntaxHighlight */
.mw-highlight {
  background: var(--wp-bg) !important;
  border: 1px solid var(--wp-border) !important;
  border-radius: 0 !important;
  padding: 0 !important;
  overflow: hidden;
}
.mw-highlight pre { border: none !important; border-left: none !important; margin: 0 !important; }

/* ── Wikipedia-style Infobox ──────────────────────────────── */
.infobox,
table.infobox {
  background: var(--wp-white) !important;
  border: 1px solid var(--wp-border) !important;
  border-collapse: collapse !important;
  float: right !important;
  margin: 0 0 1em 1.5em !important;
  padding: 0 !important;
  width: 22em !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(--wp-blue-header) !important;
  color: var(--wp-text) !important;
  font-weight: bold !important;
  font-size: 1.1em !important;
  padding: 6px 10px !important;
  text-align: center !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--wp-border) !important;
}

.infobox th {
  background: var(--wp-bg) !important;
  color: var(--wp-text) !important;
  font-size: 1em !important;
  font-weight: bold !important;
  padding: 4px 6px !important;
  border: 1px solid var(--wp-border) !important;
  text-transform: none;
  letter-spacing: 0;
}

.infobox td {
  background: var(--wp-white) !important;
  color: var(--wp-text) !important;
  padding: 4px 6px !important;
  border: 1px solid var(--wp-border) !important;
  font-size: 1em !important;
}

/* ── Table of Contents ────────────────────────────────────── */
#toc, .toc {
  background: var(--wp-bg) !important;
  border: 1px solid var(--wp-border) !important;
  border-radius: 0 !important;
  padding: 10px 16px !important;
  display: inline-block;
  min-width: 180px;
  box-shadow: none !important;
}

#toc h2, .toc h2 {
  font-size: 1em !important;
  font-weight: bold !important;
  text-align: center !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--wp-text) !important;
  background: none !important;
  -webkit-text-fill-color: var(--wp-text) !important;
  border: none !important;
  padding: 0 0 6px 0 !important;
  margin: 0 0 4px 0 !important;
}

#toc li, .toc li {
  font-size: 0.875em !important;
  line-height: 1.7 !important;
}

#toc a, .toc a { color: var(--wp-blue) !important; }
#toc a:hover, .toc a:hover { text-decoration: underline !important; }

/* ── Wikipedia-style Article Message Boxes ────────────────── */
.zc-note, .mw-message-box-notice {
  background: #eaf3fb !important;
  border: 1px solid #36c !important;
  border-left: 4px solid #36c !important;
  border-radius: 0 !important;
  padding: 8px 12px !important;
  margin: 0.8em 0 !important;
  font-size: 0.9em !important;
  color: var(--wp-text) !important;
}

.zc-warning, .mw-message-box-warning {
  background: #fef6e7 !important;
  border: 1px solid #f0c93a !important;
  border-left: 4px solid #f0c93a !important;
  border-radius: 0 !important;
  padding: 8px 12px !important;
  margin: 0.8em 0 !important;
  font-size: 0.9em !important;
  color: var(--wp-text) !important;
}

.zc-tip {
  background: #f3fbef !important;
  border: 1px solid #36a73a !important;
  border-left: 4px solid #36a73a !important;
  border-radius: 0 !important;
  padding: 8px 12px !important;
  margin: 0.8em 0 !important;
  font-size: 0.9em !important;
  color: var(--wp-text) !important;
}

/* ── Official Verified Banner ─────────────────────────────── */
.zc-verified-banner {
  background: #f3fbf7 !important;
  border: 1px solid #14866d !important;
  border-left: 4px solid #14866d !important;
  padding: 8px 12px !important;
  margin-bottom: 1em !important;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: normal;
  color: var(--wp-text) !important;
  box-shadow: none !important;
  animation: none !important;
  border-radius: 0 !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;
  margin-left: 5px;
}

.zc-dev-badge {
  display: inline-block;
  background: var(--wp-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: var(--wp-bg);
  border: 1px solid var(--wp-border);
  color: var(--wp-text);
  font-family: var(--wp-font-mono);
  font-size: 0.8em;
  padding: 1px 5px;
  border-radius: 2px;
}

.zc-license-badge {
  display: inline-block;
  background: var(--wp-blue-light);
  border: 1px solid var(--wp-border);
  color: var(--wp-blue);
  font-size: 0.8em;
  font-weight: bold;
  padding: 1px 5px;
  border-radius: 2px;
}

/* ── Developer Profile Card ──────────────────────────────── */
.zc-profile-card {
  background: var(--wp-white) !important;
  border: 1px solid var(--wp-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: var(--wp-bg);
  border: 1px solid var(--wp-border);
  color: var(--wp-text-muted);
  font-size: 0.8em;
  padding: 2px 7px;
  border-radius: 2px;
  margin: 2px;
}

/* ── Buttons ──────────────────────────────────────────────── */
.mw-ui-button,
input[type="submit"],
input[type="button"],
button.mw-ui-progressive {
  background: var(--wp-bg) !important;
  border: 1px solid var(--wp-border) !important;
  border-radius: 2px !important;
  color: var(--wp-text) !important;
  font-family: var(--wp-font-sans) !important;
  font-weight: normal !important;
  font-size: 0.875em !important;
  padding: 6px 16px !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: background 0.1s !important;
}

.mw-ui-button:hover { background: var(--wp-border-light) !important; }

button.mw-ui-progressive {
  background: var(--wp-blue) !important;
  border-color: #2a4b8d !important;
  color: #fff !important;
}
button.mw-ui-progressive:hover { background: #2a4b8d !important; }

/* ── Tabs ─────────────────────────────────────────────────── */
#p-views .selected a,
.vector-tab-noaction.selected a {
  color: var(--wp-text) !important;
  border-bottom: 2px solid var(--wp-text) !important;
}

.vector-page-toolbar {
  background: transparent !important;
  border-bottom: 1px solid var(--wp-border-light) !important;
}

/* ── Footer ───────────────────────────────────────────────── */
#footer, .mw-footer {
  background: var(--wp-bg) !important;
  border-top: 1px solid var(--wp-border) !important;
  color: var(--wp-text-small) !important;
  padding: 16px 20px !important;
  font-size: 0.875em !important;
  text-align: center !important;
  margin-top: 2em !important;
}

#footer a, .mw-footer a { color: var(--wp-blue) !important; }
#footer a:hover, .mw-footer a:hover { text-decoration: underline !important; text-shadow: none !important; }

/* ── Edit Page ────────────────────────────────────────────── */
textarea#wpTextbox1 {
  background: var(--wp-white) !important;
  color: var(--wp-text) !important;
  border: 1px solid var(--wp-border) !important;
  font-family: var(--wp-font-mono) !important;
  font-size: 0.9em !important;
  padding: 8px !important;
  border-radius: 2px !important;
}

.diff-addedline { background: #d4f4d4 !important; }
.diff-deletedline { background: #f4d4d4 !important; }
.diffchange { background: #ffd !important; }

/* ── Recent Changes ──────────────────────────────────────── */
.mw-changeslist-line { border-bottom: 1px solid var(--wp-border-light) !important; padding: 4px 0 !important; }

/* ── Notification popups ──────────────────────────────────── */
.oo-ui-popupWidget {
  background: var(--wp-white) !important;
  border: 1px solid var(--wp-border) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
  border-radius: 2px !important;
}

/* ── Vector 2022 specific ─────────────────────────────────── */
.mw-page-container { background: var(--wp-bg) !important; }
.mw-content-container { background: var(--wp-white) !important; }

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

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

/* ── Copy button ──────────────────────────────────────────── */
.zc-copy-btn {
  background: var(--wp-bg) !important;
  border: 1px solid var(--wp-border) !important;
  color: var(--wp-text-muted) !important;
}
.zc-copy-btn:hover { background: var(--wp-border-light) !important; }

/* ============================================================
   HOMEPAGE — Wikipedia Main Page Style
   ============================================================ */

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

/* Left column boxes (blue header, white body) */
.zc-mp-box {
  background: var(--wp-white);
  border: 1px solid var(--wp-border);
  margin-bottom: 12px;
}

.zc-mp-box-header {
  background: var(--wp-blue-header);
  border-bottom: 1px solid var(--wp-border);
  padding: 5px 10px;
  font-weight: bold;
  font-size: 0.95em;
}

.zc-mp-box-body {
  padding: 10px 12px;
  font-size: 0.9em;
}

/* DYK box — yellow header */
.zc-mp-dyk-header {
  background: #fef6e7;
  border-bottom: 1px solid var(--wp-border);
  padding: 5px 10px;
  font-weight: bold;
  font-size: 0.95em;
  color: #7a6206;
}

/* Community box — green header */
.zc-mp-comm-header {
  background: #f3fbf7;
  border-bottom: 1px solid var(--wp-border);
  padding: 5px 10px;
  font-weight: bold;
  font-size: 0.95em;
  color: #14866d;
}

/* Portal grid at bottom */
.zc-mp-portals-header {
  background: #dce3ee;
  border-bottom: 1px solid var(--wp-border);
  padding: 5px 10px;
  font-weight: bold;
  font-size: 0.95em;
  text-align: center;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 720px) {
  .infobox { float: none !important; width: 100% !important; margin: 0 0 1em 0 !important; }
  .mw-body { padding: 12px !important; }
}

/* ── Print ────────────────────────────────────────────────── */
@media print {
  #mw-head, #mw-panel, #footer, .noprint { display: none !important; }
  body { background: #fff !important; color: #000 !important; font-family: serif !important; }
  a { color: #000 !important; text-decoration: underline !important; }
}