MediaWiki:Common.css: Difference between revisions

Latest revision as of 16:57, 2 November 2025

@import url("https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url("/w/index.php?title=MediaWiki:Inventory.css&action=raw&ctype=text/css");

/* ==========================================================================
   BRAND DARK THEME
   Brand colors:
   --brand-light-blue: #78A5FF
   --brand-dark-blue:  #1A3763
   --brand-off-blue:   #369EA7
   --brand-dark-orange:#DD552F
   --brand-mid-orange: #ED8136
   --brand-light-orange:#FAB243
   --brand-green:      #70C32C
   ========================================================================== */
:root {
    /* brand palette */
    --brand-light-blue: #78A5FF;
    --brand-dark-blue: #1A3763;
    --brand-off-blue: #369EA7;
    --brand-dark-orange: #DD552F;
    --brand-mid-orange: #ED8136;
    --brand-light-orange: #FAB243;
    --brand-green: #70C32C;

    /* layout metrics */
    --headermarginleft: 25px;
    --headermarginright: 25px;
    --ulmarginleft: 15px;

    /* dark base */
    --color-base: #E8F0FF; /* text on dark */
    --color-base--hover: #FAB243;
    --color-emphasized: #78A5FF;
    --color-subtle: rgba(232, 240, 255, 0.55);
    --color-placeholder: #93A2C0;
    --color-disabled: #5C6A7D;
    --color-inverted: #02050A;
    --color-inverted-fixed: #02050A;

    /* progressive = link/action */
    --color-progressive: var(--brand-light-blue);
    --color-progressive--hover: var(--brand-off-blue);
    --color-progressive--active: var(--brand-dark-blue);
    --color-progressive--focus: var(--brand-light-blue);

    /* destructive / warning / success */
    --color-destructive: var(--brand-dark-orange);
    --color-destructive--hover: #f16640;
    --color-destructive--active: #b23b1e;
    --color-destructive--focus: var(--brand-light-blue);
    --color-warning: var(--brand-mid-orange);
    --color-success: var(--brand-green);
    --color-notice: var(--brand-off-blue);

    /* visited */
    --color-visited: #A5BFFF;

    /* content change */
    --color-content-added: var(--brand-off-blue);
    --color-content-removed: var(--brand-dark-orange);

    /* overlays and cards */
    --color-main-in: #0F1724;
    --color-general-insideinfobox: rgba(15, 23, 36, 0.7);
    --color-table-big-top: rgba(15, 23, 36, 0.35);
    --color-table-big: rgba(2, 5, 10, 0.6);
    --boxbg: rgba(26, 55, 99, 0.45);

    /* backgrounds */
    --background-color-base: rgba(2, 5, 10, 0.8);
    --background-color-base-fixed: #02050A;
    --background-color-neutral: rgba(15, 23, 36, 0.35);
    --background-color-neutral-subtle: rgba(2, 5, 10, 0.35);
    --background-color-interactive: rgba(120, 165, 255, 0.32);
    --background-color-interactive-subtle: rgba(54, 158, 167, 0.12);

    /* buttons */
    --background-color-progressive: var(--brand-light-blue);
    --background-color-progressive--hover: var(--brand-off-blue);
    --background-color-progressive--active: var(--brand-dark-blue);
    --background-color-progressive--focus: var(--brand-light-blue);

    --background-color-destructive: var(--brand-dark-orange);
    --background-color-destructive--hover: #f16640;
    --background-color-destructive--active: #b23b1e;
    --background-color-destructive--focus: var(--brand-light-blue);

    --background-color-destructive-subtle: rgba(221, 85, 47, 0.12);
    --background-color-error: var(--brand-dark-orange);
    --background-color-error-subtle: rgba(221, 85, 47, 0.12);
    --background-color-warning-subtle: rgba(237, 129, 54, 0.12);
    --background-color-success-subtle: rgba(112, 195, 44, 0.12);
    --background-color-notice-subtle: rgba(54, 158, 167, 0.12);

    /* tabs */
    --background-color-tab-list-item-framed--hover: rgba(120, 165, 255, 0.1);
    --background-color-tab-list-item-framed--active: rgba(120, 165, 255, 0.3);

    /* outlines and shadows */
    --box-shadow-color-base: #000;
    --box-shadow-color-progressive--active: rgba(120, 165, 255, 0.65);
    --box-shadow-color-progressive--focus: rgba(120, 165, 255, 0.65);
    --box-shadow-color-progressive-selected: rgba(120, 165, 255, 0.9);
    --box-shadow-color-progressive-selected--hover: rgba(54, 158, 167, 0.9);
    --box-shadow-color-progressive-selected--active: rgba(26, 55, 99, 0.9);
    --box-shadow-color-destructive--focus: rgba(221, 85, 47, 0.6);
    --box-shadow-color-inverted: #fff;
    --box-shadow-color-transparent: transparent;

    /* borders */
    --border-color-base: rgba(120, 165, 255, 0.14);
    --border-color-interactive: rgba(120, 165, 255, 0.6);
    --border-color-disabled: rgba(147, 162, 192, 0.35);
    --border-color-subtle: rgba(15, 23, 36, 0.4);
    --border-color-muted: rgba(120, 165, 255, 0.04);
    --border-color-inverted: #fff;
    --border-color-progressive: var(--brand-light-blue);
    --border-color-progressive--hover: var(--brand-off-blue);
    --border-color-progressive--active: var(--brand-dark-blue);
    --border-color-progressive--focus: var(--brand-light-blue);
    --border-color-destructive: var(--brand-dark-orange);
    --border-color-destructive--hover: #f16640;
    --border-color-destructive--active: #b23b1e;
    --border-color-destructive--focus: var(--brand-light-blue);
    --border-color-error: var(--brand-dark-orange);
    --border-color-warning: var(--brand-mid-orange);
    --border-color-success: var(--brand-green);
    --border-color-notice: rgba(54, 158, 167, 0.65);
    --border-color-content-added: rgba(54, 158, 167, 0.65);
    --border-color-content-removed: rgba(221, 85, 47, 0.65);
    --border-color-transparent: transparent;
    --border-color-divider: rgba(232, 240, 255, 0.05);

    --border-base: 1px solid rgba(120, 165, 255, 0.14);
    --border-subtle: 1px solid rgba(15, 23, 36, 0.3);
    --border-progressive: 1px solid var(--brand-light-blue);
    --border-destructive: 1px solid var(--brand-dark-orange);
    --outline-color-progressive--focus: var(--brand-light-blue);

    /* misc */
    --background-color-backdrop-light: rgba(15, 23, 36, 0.65);
    --background-color-backdrop-dark: rgba(2, 5, 10, 0.85);
    --background-color-transparent: transparent;
    --background-color-button-quiet--hover: rgba(120, 165, 255, 0.06);
    --background-color-button-quiet--active: rgba(120, 165, 255, 0.14);
    --background-color-input-binary--checked: var(--brand-light-blue);

    --opacity-icon-base: 0.87;
    --opacity-icon-base--hover: 0.74;
    --opacity-icon-base--selected: 1;
    --opacity-icon-base--disabled: 0.51;
    --opacity-icon-placeholder: 0.51;
    --opacity-icon-subtle: 0.67;

    /* minerva diffs */
    --minerva-diff-addedline: var(--brand-green);
    --minerva-diff-deletedline: var(--brand-dark-orange);
}

/* ===== BASE BACKGROUND ===== */
html, body {
    background-image: url("https://furdox.github.io/oldwebsite/oldwebsite/website/cdn/nikooneshotunofficial.jpg") !important;
    background-color: #02050A !important;
    height: 100%;
    background-position: right;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    font-family: Rubik, sans-serif;
    margin: 0 !important;
    padding: 0 !important;
}

/* ===== WRAPPERS ===== */
#mw-mf-viewport,
#mw-wrapper {
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
}

#mw-page-base,
#mw-head-base {
    background-color: transparent !important;
    background-image: none !important;
    height: 0 !important;
    margin: 0 !important;
}

/* ===== HEADER ===== */
.header-container,
.header-container.header-chrome,
.minerva-header {
    background-color: rgba(2, 5, 10, 0.35) !important;
    background-image: none !important;
    border-bottom: 1px solid rgba(120, 165, 255, 0.08);
}

/* ===== SEARCH OVERLAY ===== */
.overlay.search-overlay {
    background: rgba(2, 5, 10, 0.85);
}
.overlay.search-overlay .results,
.overlay.search-overlay .search-feedback {
    background-color: rgba(15, 23, 36, 0.9);
    border: 1px solid rgba(120, 165, 255, 0.18);
}

/* ===== INFOBOXES ===== */
.infobox_v3 {
    background: rgba(15, 23, 36, 0.7) !important;
    border: 1px solid rgba(120, 165, 255, 0.18);
}
.mw-parser-output #mp-topbanner {
    background: rgba(120, 165, 255, 0.12) !important;
    border-color: var(--brand-light-blue) !important;
}
.mw-parser-output #mp-left,
.mw-parser-output #mp-right,
.mw-parser-output #mp-lower,
.mw-parser-output #mp-bottom {
    background: rgba(2, 5, 10, 0.3) !important;
    border-color: rgba(120, 165, 255, 0.08) !important;
}

/* ===== MAIN CONTENT CONTAINER ===== */
#mw-mf-page-center {
    width: 90%;
    position: relative;
    background-color: rgba(2, 5, 10, 0.55) !important;
    align-self: center;
    margin: 0 auto !important;
    padding: 0 !important;
    border: 1px solid rgba(120, 165, 255, 0.04);
    border-radius: 12px;
}

/* ===== FOOTER ===== */
.minerva-footer {
    border-top: solid 3px rgba(237, 129, 54, 0.35);
    background-color: rgba(2, 5, 10, 0.35) !important;
    background-image: none !important;
    color: rgba(232, 240, 255, 0.55);
}
.last-modified-bar,
#mw-data-after-content {
    background: transparent !important;
    color: rgba(232, 240, 255, 0.55) !important;
}
#catlinks {
    background: rgba(2, 5, 10, 0.35) !important;
    border: 1px solid rgba(120, 165, 255, 0.04);
}

/* ===== LISTS ===== */
ul {
    margin-left: var(--ulmarginleft);
}

/* ===== BODY AND OVERLAYS ===== */
.mw-body,
.overlay-enabled {
    background-image: url("https://furdox.github.io/oldwebsite/oldwebsite/website/cdn/nikooneshotunofficial.jpg");
    background-color: #02050A;
    height: 100%;
    background-position: right;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    font-family: Rubik, sans-serif;
}
.mw-body {
    background-color: rgba(2, 5, 10, 0.6);
    color: var(--color-base);
}
.mw-body-content {
    background-color: transparent !important;
}

/* ===== CODE BLOCKS ===== */
pre {
    background-color: rgba(2, 5, 10, 0.7);
    border: 1px solid rgba(120, 165, 255, 0.04);
    color: #E8F0FF;
}

/* ===== ICONS ===== */
.mw-ui-icon-with-label-desktop {
    color: var(--brand-light-orange);
}

/* ===== PARSER OUTPUT ===== */
.mw-parser-output {
    background: rgba(2, 5, 10, 0.4);
    border-color: rgba(120, 165, 255, 0.04);
}

/* ===== TEXT COLORS ===== */
p {
    color: var(--color-base);
}

/* ===== LINKS ===== */
a {
    color: var(--brand-light-blue);
}
a:hover {
    color: var(--brand-off-blue);
}
.mw-parser-output a.external,
.mw-parser-output a.extiw {
    color: var(--brand-light-blue);
}

/* ===== CONTENT ELEMENTS ===== */
.content .infobox {
    background-color: rgba(15, 23, 36, 0.7);
    border: 1px solid rgba(120, 165, 255, 0.08);
}
.content .thumbcaption {
    color: var(--color-base);
}
.thumbinner .multiimageinner {
    background-color: transparent;
}
.mw-parser-output .navbox,
.thumbcaption,
.thumbinner,
.toc,
.trow {
    background-color: rgba(2, 5, 10, 0.55);
    color: var(--color-base);
    border: 1px solid rgba(120, 165, 255, 0.04);
}
.infobox {
    color: var(--color-base);
}

/* ===== HEADINGS ===== */
.mw-body h1 { font-weight: 700; }
.mw-body-content h2 { font-weight: 500; }
h1, h2, h3, h4, h5, h6 {
    color: var(--brand-light-orange);
    font-family: Rubik, sans-serif;
}

/* ===== PRE-CONTENT ===== */
.pre-content {
    background-color: rgba(2, 5, 10, 0.35) !important;
    background-image: none !important;
}

/* ===== CONTENT MARGINS ===== */
.content p,
#firstHeading,
.minerva__tab-container,
.page-actions-menu,
.mw-headline,
h1, h2, h3, h4, h5, h6,
.content .mw-parser-output h1 .mw-headline,
.content .mw-parser-output h2 .mw-headline,
.content .mw-parser-output h3 .mw-headline,
.content .mw-parser-output h4 .mw-headline,
.content .mw-parser-output h5 .mw-headline,
.content .mw-parser-output h6 .mw-headline {
    margin-left: var(--headermarginleft);
    margin-right: var(--headermarginright);
}

/* ===== POPUPS ===== */
.mwe-popups .mwe-popups-container {
    padding-top: 0;
    display: flex;
    background: rgba(2, 5, 10, 0.85) !important;
    border: 1px solid rgba(120, 165, 255, 0.08);
}
.mwe-popups .mwe-popups-extract[dir="ltr"]::after {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(2, 5, 10, 1) 50%);
}
.mwe-popups-container {
    background: rgba(2, 5, 10, 0.55);
}

/* ===== SIDE BOXES ===== */
.mw-parser-output .side-box,
.mw-parser-output .spoken-wikipedia {
    background-color: rgba(54, 158, 167, 0.2) !important;
    border: 1px solid rgba(54, 158, 167, 0.35);
}

/* ===== BANNERS ===== */
.bandeau-niveau-ebauche, 
.bandeau-niveau-information {
    background-color: rgba(26, 55, 99, 0.35);
    border-color: var(--brand-off-blue);
    color: var(--color-base);
}

/* ===== FILE INFO TEMPLATES ===== */
.mw-parser-output .nfur,
licensetpl, 
fileinfotpl, 
fileinfotpl-type-fairuse, 
nfur, 
nfur-2 {
    background-color: rgba(15, 23, 36, 0.7);
    border-collapse: separate;
    border-spacing: 2px;
    border: 1px solid rgba(120, 165, 255, 0.18);
    box-sizing: border-box;
    font-size: 95%;
    padding: 5px;
    width: 100%;
    border-top: 0;
    padding-top: 0;
    color: var(--color-base);
}

/* ===== NUCLEAR OPTION ===== */
body > div:not(#mw-mf-page-center) {
    background: transparent !important;
}

/* ===== FIX ANY REMAINING WRAPPERS ===== */
.content-wrapper,
.page-wrapper,
.page-container {
    background: transparent !important;
}

/* mobile patch */
/* =======================
   MOBILE GUTTER FIX
   ======================= */
@media (max-width: 768px) {
  :root {
    /* tighter content margins on mobile */
    --headermarginleft: 12px;
    --headermarginright: 12px;
    --ulmarginleft: 18px;
  }

  /* use full width; keep a small safe-area gutter */
  #mw-mf-page-center {
    width: 100%;
    margin: 0 !important;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }

  /* remove surprise outer margins some Minerva blocks add */
  .content,
  .mw-body,
  .mw-body-content,
  .pre-content,
  .minerva__tab-container,
  .page-actions-menu {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Optional: desktop constraint so wide screens still look centered */
@media (min-width: 769px) {
  #mw-mf-page-center {
    width: min(1100px, 96%);
    margin: 16px auto !important;
    border-radius: 12px;
  }
}