MediaWiki:Common.css

/* ============================================
   CSS CUSTOM PROPERTIES (CSS VARIABLES)
   ============================================ */
:root {
  /* Main color palette */
  --bg-primary: #1b1b1f;
  --bg-secondary: #212126;
  --bg-tertiary: #27272e;
  --bg-quaternary: #303037;

  --border-primary: #37373e;
  --border-secondary: #40404b;
  --border-tertiary: #4a4a57;

  --text-primary: #d3d3d3;
  --text-secondary: #e0e0e0;
  --text-muted: #999999;

  --link-color: #77c1d9;
  --link-external: #3377aa;
  --link-hover: #ffffff;

  --accent-blue: #36c;
  --accent-green: #1b5929;
  --accent-red: #b32424;
  --accent-orange: #f28500;
  --accent-yellow: #fc3;
  --accent-purple: #9932cc;

  /* Spacing */
  --spacing-xs: 0.25em;
  --spacing-sm: 0.5em;
  --spacing-md: 1em;
  --spacing-lg: 1.5em;
  --spacing-xl: 2em;

  /* Border radius */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 8px;

  /* Shadows */
  --shadow-sm: 0 1px 2px 1px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 2px 4px 2px rgba(0, 0, 0, 0.15);

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.2s ease;
  --transition-slow: 0.3s ease;
}

/* ============================================
   FONT DEFINITIONS
   ============================================ */

/* Cyrillic Extended */
@font-face {
  font-family: 'Noto Sans Light';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/notosans/v30/o-0OIpQlx3QUlC5A4PNjhgRPQ_m87A.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* Cyrillic */
@font-face {
  font-family: 'Noto Sans Light';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/notosans/v30/o-0OIpQlx3QUlC5A4PNjhgRGQ_m87A.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* Latin Extended */
@font-face {
  font-family: 'Noto Sans Light';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/notosans/v30/o-0OIpQlx3QUlC5A4PNjhgRMQ_m87A.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Latin */
@font-face {
  font-family: 'Noto Sans Light';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/notosans/v30/o-0OIpQlx3QUlC5A4PNjhgRCQ_k.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/oswald/v40/TK3_WkUHHAIjg75cFRf3bXL8LICs1_FvsUJiZTaR.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Boxfont Round';
  src: url('/assets/fonts/boxfont-round/f3507eaadc95584e7358703d74e793ea/324a92fc76117885a667ae8af2be25ab/BoxfontRoundRegular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'noto sans';
  font-style: normal;
  font-weight: 400;
  src: local('Noto Sans'), url(https://fonts.cdnfonts.com/s/15794/NotoSans-Regular.woff) format('woff');
}

@font-face {
  font-family: 'noto sans';
  font-style: italic;
  font-weight: 400;
  src: local('Noto Sans'), url(https://fonts.cdnfonts.com/s/15794/NotoSans-Italic.woff) format('woff');
}

@font-face {
  font-family: 'noto sans';
  font-style: normal;
  font-weight: 700;
  src: local('Noto Sans'), url(https://fonts.cdnfonts.com/s/15794/NotoSans-Bold.woff) format('woff');
}

@font-face {
  font-family: 'noto sans';
  font-style: italic;
  font-weight: 700;
  src: local('Noto Sans'), url(https://fonts.cdnfonts.com/s/15794/NotoSans-BoldItalic.woff) format('woff');
}


/* ============================================
   BASE STYLES
   ============================================ */

/* Basic element styles */
cite,
dfn {
  font-style: inherit;
}

q {
  quotes: '"' '"' "'" "'";
}

code {
  background-color: var(--bg-quaternary);
  border: 1px solid var(--border-primary);
  color: var(--text-primary);
  padding: 2px 4px;
  border-radius: var(--radius-sm);
  font-family: 'Courier New', Courier, monospace;
}

blockquote {
  overflow: hidden;
  margin: var(--spacing-md) 0;
  padding: 0 40px;
  border-left: 3px solid var(--accent-blue);
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
}

small {
  font-size: 85%;
}

/* Image rendering optimization */
img {
  image-rendering: optimizeSpeed;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: optimize-contrast;
  image-rendering: -moz-crisp-edges;
  image-rendering: -o-crisp-edges;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  -ms-interpolation-mode: nearest-neighbor;
}

/* ============================================
   LINKS AND NAVIGATION
   ============================================ */

/* Link styles with consistent colors */
a,
.vector-menu-portal .vector-menu-content li a,
.vector-menu-tabs li a,
body.skin--responsive #p-cactions li a,
a:visited,
.vector-menu-portal .vector-menu-content li a:visited,
.vector-menu-tabs li a:visited,
body.skin--responsive #p-cactions li a:visited {
  color: var(--link-color);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover,
a:visited:hover {
  color: var(--link-hover);
  text-decoration: underline;
}

/* External links */
a.extiw:visited,
a.external:visited,
.mw-parser-output a.extiw:visited,
.mw-parser-output a.external:visited,
body.skin--responsive #p-cactions li a.external:visited {
  color: var(--link-external);
}

/* Special link styles */
.nounderlines a,
.IPA a:link,
.IPA a:visited {
  text-decoration: none;
}

/* ============================================
   LAYOUT CONTAINERS
   ============================================ */

/* Main page containers */
#mw-page-base,
#mw-panel,
#mw-content-container,
#mw-header-container,
#mw-content-wrapper,
#mw-content {
  background: var(--bg-primary);
  color: var(--text-primary);
  border-color: var(--bg-primary);
}

.mw-body {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-color: var(--border-primary);
  padding: var(--spacing-sm);
}

/* ============================================
   NAVIGATION ELEMENTS
   ============================================ */

/* Vector menu tabs */
.vector-menu-tabs li {
  background: var(--bg-secondary);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition: background-color var(--transition-fast);
}

.vector-menu-tabs li:hover {
  background: var(--bg-tertiary);
}

.vector-menu-tabs .selected {
  background: var(--bg-primary);
}

.vector-menu-tabs .selected a,
.vector-menu-tabs .selected a:visited {
  color: var(--text-primary);
  font-weight: bold;
}

/* Sidebar elements */
#mw-site-navigation .sidebar-chunk,
#mw-related-navigation .sidebar-chunk,
body.skin--responsive .portlet,
body.skin--responsive .pBody {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-sm);
}

/* ============================================
   SEARCH FUNCTIONALITY
   ============================================ */

#simpleSearch {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  color: var(--text-primary);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast);
}

#simpleSearch:focus-within {
  border-color: var(--accent-blue);
}

#searchInput {
  color: var(--text-secondary);
  background: transparent;
  border: none;
  padding: 8px 12px;
}

#searchInput::placeholder {
  color: var(--text-muted);
}


/* ============================================
   TABLES AND DATA DISPLAY
   ============================================ */

/* Main wiki table styling */
.wikitable,
.mw_metadata,
.mw-datatable {
  background: var(--bg-quaternary);
  border: 1px solid var(--border-primary);
  color: var(--text-secondary);
  border-collapse: collapse;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  margin: var(--spacing-md) 0;
  width: 100%;
}

.wikitable > tr > th,
.wikitable > tr > td,
.wikitable > * > tr > th,
.wikitable > * > tr > td,
.mw_metadata > tr > th,
.mw_metadata > tr > td,
.mw_metadata > * > tr > th,
.mw_metadata > * > tr > td,
.mw-datatable > tr > th,
.mw-datatable > tr > td,
.mw-datatable > * > tr > th,
.mw-datatable > * > tr > td {
  border: 1px solid var(--border-primary);
  padding: 8px 12px;
  text-align: left;
}

.wikitable > * > tr > th,
.mw_metadata > * > tr > th,
.mw-datatable > * > tr > th {
  background: var(--bg-tertiary);
  font-weight: 600;
  color: var(--text-secondary);
}

.mw-datatable tr:hover td {
  background-color: var(--bg-secondary);
  transition: background-color var(--transition-fast);
}

/* Table of Contents */
.toc,
.toccolours {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  padding: var(--spacing-md);
  margin: var(--spacing-md) 0;
  box-shadow: var(--shadow-sm);
}

.mw-content-ltr .tocnumber {
  color: var(--text-muted);
  font-weight: 500;
}

/* ============================================
   FORMS AND INPUT ELEMENTS
   ============================================ */

/* Text inputs and textareas */
.mw-editform #wpTextbox1,
textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"] {
  background: var(--bg-quaternary);
  border: 1px solid var(--border-primary);
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.mw-editform #wpTextbox1:focus,
textarea:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus {
  border-color: var(--accent-blue);
  background: var(--bg-tertiary);
  outline: none;
}

/* Buttons */
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button,
button,
input[type="submit"],
input[type="button"] {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  padding: 8px 16px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
  background: var(--bg-secondary);
  border-color: var(--accent-blue);
}

/* Edit options */
.editOptions,
.mw-editform .editOptions {
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  padding: var(--spacing-sm);
}

/* ============================================
   EDITOR INTERFACE
   ============================================ */

/* WikiEditor toolbar */
.wikiEditor-ui-toolbar {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-primary);
}

.wikiEditor-ui-toolbar .group {
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  margin: 2px;
}

.wikiEditor-ui-toolbar .group .label {
  color: var(--text-secondary);
  font-size: 11px;
}

.wikiEditor-ui-toolbar .tabs span.tab a.current,
.wikiEditor-ui-toolbar .tabs span.tab a.current:visited {
  color: var(--bg-primary);
  font-weight: bold;
  background: var(--text-secondary);
  border-radius: var(--radius-sm);
}

.wikiEditor-ui .wikiEditor-ui-top {
  border-bottom: 1px solid var(--border-primary);
}

.wikiEditor-ui .wikiEditor-ui-view {
  border: 1px solid var(--border-primary);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

/* ============================================
   MESSAGE BOXES AND ALERTS
   ============================================ */

/* Base message box styling */
.messagebox {
  border: 1px solid var(--border-primary);
  background-color: var(--bg-tertiary);
  border-radius: var(--radius-md);
  margin: var(--spacing-md) auto;
  padding: var(--spacing-sm);
  box-shadow: var(--shadow-sm);
}

/* Warning messages */
div.mw-warning-with-logexcerpt,
div.mw-lag-warn-high,
div.mw-cascadeprotectedwarning,
div#mw-protect-cascadeon,
div.titleblacklist-warning,
.mw-message-box-error {
  background: color-mix(in srgb, var(--accent-red), var(--bg-tertiary) 70%);
  border: 1px solid var(--accent-red);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  padding: var(--spacing-sm) var(--spacing-md);
  margin: var(--spacing-sm) 0;
}

.mw-message-box-warning {
  background: color-mix(in srgb, var(--accent-orange), var(--bg-tertiary) 70%);
  border: 1px solid var(--accent-orange);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
}


/* ============================================
   TOOLTIPS
   ============================================ */

.tooltip {
  position: relative;
  display: inline;
}

.tooltiptext {
  position: absolute;
  z-index: 99999;
  width: 295px;
  left: -120px;
  top: 42px;
  padding: var(--spacing-sm);
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  white-space: normal;
  text-align: left;
  transition: all var(--transition-normal);
  border: 1px solid var(--accent-blue);
  background-color: var(--bg-tertiary);
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.tooltip:hover > .tooltiptext {
  visibility: visible;
  opacity: 0.98;
}

/* ============================================
   CUSTOM SCROLLBARS
   ============================================ */

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
  background-color: var(--bg-tertiary);
}

::-webkit-scrollbar-thumb {
  background-color: var(--border-tertiary);
  border: 2px solid var(--bg-tertiary);
  border-radius: var(--radius-md);
  transition: background-color var(--transition-fast);
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--text-muted);
}

::-webkit-scrollbar-thumb:active {
  background-color: var(--text-secondary);
}

::-webkit-scrollbar-corner {
  background-color: var(--bg-tertiary);
}

/* ============================================
   GALLERY AND MEDIA
   ============================================ */

/* Thumbnail styling */
.thumbinner {
  min-width: 100px;
  background: var(--bg-quaternary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  padding: 4px;
}

.thumbinner .thumbimage,
.thumbborder {
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
}

/* Gallery boxes */
.gallerybox .thumb img {
  background: transparent;
}

.gallerytext {
  overflow: hidden;
  font-size: 94%;
  padding: 2px 4px;
  word-wrap: break-word;
  text-align: center;
  color: var(--text-primary);
}

.mw-gallery-slideshow .gallerybox.slideshow-current {
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Text utilities */
.positive {
  color: var(--accent-green);
  font-weight: bold;
}

.negative {
  color: var(--accent-red);
  font-weight: bold;
}

.nowrap,
.nowraplinks a {
  white-space: nowrap;
}

.wrap,
.wraplinks a {
  white-space: normal;
}

/* Layout utilities */
.flex {
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-center {
  justify-content: center;
  align-items: center;
}

/* Spacing utilities */
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--spacing-xs); }
.mb-2 { margin-bottom: var(--spacing-sm); }
.mb-3 { margin-bottom: var(--spacing-md); }
.mb-4 { margin-bottom: var(--spacing-lg); }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--spacing-xs); }
.mt-2 { margin-top: var(--spacing-sm); }
.mt-3 { margin-top: var(--spacing-md); }
.mt-4 { margin-top: var(--spacing-lg); }

.p-1 { padding: var(--spacing-xs); }
.p-2 { padding: var(--spacing-sm); }
.p-3 { padding: var(--spacing-md); }
.p-4 { padding: var(--spacing-lg); }

/* ============================================
   SPECIAL COMPONENTS
   ============================================ */

/* Angled rectangles */
.anglerect {
  --angle-rect-clip-size: 16px;
  clip-path: polygon(
    0 0,
    calc(100% - var(--angle-rect-clip-size)) 0,
    100% var(--angle-rect-clip-size),
    100% 100%,
    var(--angle-rect-clip-size) 100%,
    0 calc(100% - var(--angle-rect-clip-size))
  );
}

/* Big link styling */
.biglink {
  font-family: "Oswald", sans-serif;
  font-style: oblique 10deg;
  font-variant-caps: small-caps;
  text-shadow: var(--bg-primary) 1px 2px, rgba(89, 89, 89, 0.87) 2px 2px 1px;
}

/* Quick boxes */
.quickbox {
  border: 1px solid var(--border-primary);
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
  margin: var(--spacing-sm) 0;
}

.quickboxhead {
  border-bottom: 1px solid var(--border-primary);
  background: var(--bg-primary);
  text-align: center;
  padding: var(--spacing-sm);
  font-weight: 600;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

/* Large screens optimization */
@media screen and (min-width: 1800px) {
  body {
    font-size: 90%;
    font-family: 'Citizen', sans-serif;
  }

  .mw-body {
    max-width: 1600px;
    margin: 0 auto;
  }
}

/* Mobile adaptations */
@media screen and (max-width: 768px) {
  .tooltip {
    position: static;
  }

  .tooltiptext {
    box-shadow: 0px 0px 100vw 100vh rgba(0, 0, 0, 0.6);
    position: fixed;
    width: 80vw;
    top: 40vh;
    left: 0;
    margin: 0 auto;
    right: 0;
  }

  .mw-body {
    padding: var(--spacing-xs);
  }

  .wikitable {
    font-size: 90%;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  :root {
    --border-primary: #666666;
    --text-primary: #ffffff;
    --bg-primary: #000000;
    --bg-secondary: #111111;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================
   ACCESSIBILITY IMPROVEMENTS
   ============================================ */

/* Focus indicators */
*:focus {
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
}

/* Skip links */
.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: var(--bg-primary);
  color: var(--text-secondary);
  padding: 8px;
  text-decoration: none;
  border-radius: var(--radius-sm);
  z-index: 100000;
}

.skip-link:focus {
  top: 6px;
}

/* Screen reader only content */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
  :root {
    --bg-primary: #ffffff;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f8f9fa;
    --text-primary: #000000;
    --text-secondary: #000000;
  }

  .tooltip,
  .mw-editsection,
  #mw-navigation,
  #footer {
    display: none;
  }

  a {
    color: #000000;
    text-decoration: underline;
  }
}

/* ============================================
   LEGACY BROWSER FALLBACKS
   ============================================ */

/* Fallback colors for browsers that don't support CSS custom properties */
@supports not (color: var(--bg-primary)) {
  body {
    background: #1b1b1f;
    color: #d3d3d3;
  }

  .mw-body {
    background: #212126;
    color: #d3d3d3;
  }

  .wikitable {
    background: #303037;
    border-color: #37373e;
  }
}