MediaWiki:Common.css: Difference between revisions

Revision as of 02:18, 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");

:root {
    --color-table-big-top: #0305;
    --color-table-big:#0005;
    --color-general-insideinfobox: #0005;
    --color-main-in: #fff;
    --boxbg: #088a;

    --headermarginleft: 25px;
    --headermarginright: 25px;
    --ulmarginleft: 15px;

    --color-base: #fff;
    --color-base--hover: #f50;
    --color-emphasized: #0ff;
    --color-subtle: #fff;
    --color-placeholder: #72777d;
    --color-disabled: #72777d;
    --color-inverted: #fff;
    --color-inverted-fixed: #fff;
    --color-progressive: #36c;
    --color-progressive--hover: #447ff5;
    --color-progressive--active: #2a4b8d;
    --color-progressive--focus: #36c;
    --color-destructive: #d73333;
    --color-destructive--hover: #ff4242;
    --color-destructive--active: #b32424;
    --color-destructive--focus: #36c;
    --color-visited: #6b4ba1;
    --color-error: #d73333;
    --color-warning: #edab00;
    --color-success: #14866d;
    --color-notice: #202122;
    --color-content-added: #36c;
    --color-content-removed: #a66200;
    --color-base--subtle: #72777d;
    --color-link-red: #d73333;
    --color-link-red--hover: #ff4242;
    --color-link-red--active: #b32424;
    --color-link-red--focus: #36c;
    --color-link-red--visited: #a55858;
    --filter-invert-icon: 0;
    --filter-invert-primary-button-icon: 1;
    --box-shadow-color-base: #000;
    --box-shadow-color-progressive--active: #2a4b8d;
    --box-shadow-color-progressive--focus: #36c;
    --box-shadow-color-progressive-selected: #36c;
    --box-shadow-color-progressive-selected--hover: #447ff5;
    --box-shadow-color-progressive-selected--active: #2a4b8d;
    --box-shadow-color-destructive--focus: #36c;
    --box-shadow-color-inverted: #fff;
    --box-shadow-color-transparent: transparent;
    --background-color-interactive: #0041c266;
    --background-color-interactive-subtle: var(--boxbg);
    --background-color-disabled: #c8ccd1;
    --background-color-disabled-subtle: #eaecf0;
    --background-color-progressive: #36c;
    --background-color-progressive--hover: #447ff5;
    --background-color-progressive--active: #2a4b8d;
    --background-color-progressive--focus: #36c;
    --background-color-progressive-subtle: #eaf3ff;
    --background-color-destructive: #d73333;
    --background-color-destructive--hover: #ff4242;
    --background-color-destructive--active: #b32424;
    --background-color-destructive--focus: #36c;
    --background-color-destructive-subtle: #fee7e6;
    --background-color-error: #d73333;
    --background-color-error--hover: #ff4242;
    --background-color-error--active: #b32424;
    --background-color-error-subtle: #fee7e6;
    --background-color-warning-subtle: #fef6e7;
    --background-color-success-subtle: #d5fdf4;
    --background-color-notice-subtle: #eaecf0;
    --background-color-content-added: #6d8af2;
    --background-color-content-removed: #ad822b;
    --background-color-backdrop-light: rgba(255,255,255,0.65);
    --background-color-backdrop-dark: rgba(0,0,0,0.65);
    --background-color-base: #0007;
    --background-color-base-fixed: #000;
    --background-color-neutral: #0305;
    --background-color-neutral-subtle: #0005;
    --background-color-transparent: transparent;
    --background-color-button-quiet--hover: rgba(0,24,73,0.027);
    --background-color-button-quiet--active: rgba(0,24,73,0.082);
    --background-color-input-binary--checked: #36c;
    --background-color-tab-list-item-framed--hover: rgba(255,255,255,0.3);
    --background-color-tab-list-item-framed--active: rgba(255,255,255,0.65);
    --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;
    --border-color-base: #a2a9b1;
    --border-color-interactive: #72777d;
    --border-color-disabled: #c8ccd1;
    --border-color-subtle: #c8ccd1;
    --border-color-muted: #eaecf0;
    --border-color-inverted: #fff;
    --border-color-progressive: #36c;
    --border-color-progressive--hover: #447ff5;
    --border-color-progressive--active: #2a4b8d;
    --border-color-progressive--focus: #36c;
    --border-color-destructive: #d73333;
    --border-color-destructive--hover: #ff4242;
    --border-color-destructive--active: #b32424;
    --border-color-destructive--focus: #36c;
    --border-color-error: #b32424;
    --border-color-error--hover: #ff4242;
    --border-color-warning: #a66200;
    --border-color-success: #096450;
    --border-color-notice: #54595d;
    --border-color-content-added: #6d8af2;
    --border-color-content-removed: #ad822b;
    --border-color-transparent: transparent;
    --border-color-divider: #a2a9b1;
    --border-color-input--hover: #72777d;
    --border-color-input-binary: #72777d;
    --border-color-input-binary--hover: #447ff5;
    --border-color-input-binary--active: #2a4b8d;
    --border-color-input-binary--focus: #36c;
    --border-color-input-binary--checked: #36c;
    --border-base: 1px solid #a2a9b1;
    --border-subtle: 1px solid #c8ccd1;
    --border-progressive: 1px solid #36c;
    --border-destructive: 1px solid #d73333;
    --outline-color-progressive--focus: #36c;
    --minerva-diff-addedline: var(--color-success,#14866d);
    --minerva-diff-deletedline: var(--color-destructive,#d73333);
}

/* ===== BASE BACKGROUND - CRITICAL FIX ===== */
html, body {
    background-image: url("https://furdox.github.io/oldwebsite/oldwebsite/website/cdn/nikooneshotunofficial.jpg") !important;
    background-color: #000 !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;
}

/* ===== FIX TOP WHITE BAR ===== */
#mw-mf-viewport {
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
}

#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: transparent !important;
    background-image: none !important;
}

/* ===== SEARCH OVERLAY ===== */
.overlay.search-overlay {
    background: #626a;
}

.overlay.search-overlay .results,
.overlay.search-overlay .search-feedback {
    background-color: #00ffffcc;
}

/* ===== INFOBOXES ===== */
.infobox_v3 {
    background: #0009 !important;
}

.mw-parser-output #mp-topbanner {
    background: #00fa !important;
    border-color: #f00 !important;
}

.mw-parser-output #mp-left,
.mw-parser-output #mp-right,
.mw-parser-output #mp-lower,
.mw-parser-output #mp-bottom {
    background: #00000040 !important;
    border-color: #f00 !important;
}

/* ===== MAIN CONTENT CONTAINER ===== */
#mw-mf-page-center {
    width: 90%;
    position: relative;
    background-color: #0005 !important;
    align-self: center;
    margin: 0 auto !important;
    padding: 0 !important;
}

/* ===== FIX BOTTOM WHITE BAR ===== */
.minerva-footer {
    border-top: solid 3px #ff09;
    background-color: transparent !important;
    background-image: none !important;
}

.last-modified-bar,
#mw-data-after-content {
    background: transparent !important;
    color: #ccc !important;
}

#catlinks {
    background: #0005 !important;
}

/* ===== 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: #000;
    height: 100%;
    background-position: right;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    font-family: Rubik, sans-serif;
}

.mw-body {
    background-color: #0007;
    color: #fff;
}

.mw-body-content {
    background-color: transparent !important;
}

/* ===== CODE BLOCKS ===== */
pre {
    background-color: #000a;
}

/* ===== ICONS ===== */
.mw-ui-icon-with-label-desktop {
    color: #f0f;
}

/* ===== PARSER OUTPUT ===== */
.mw-parser-output {
    background: #0004;
    border-color: #f00;
}

/* ===== TEXT COLORS ===== */
p {
    color: #fff;
}

/* ===== LINKS ===== */
a {
    color: #0f0;
}

.mw-parser-output a.external,
.mw-parser-output a.extiw {
    color: #f00;
}

/* ===== CONTENT ELEMENTS ===== */
.content .infobox {
    background-color: #0008;
}

.content .thumbcaption {
    color: #fff;
}

.thumbinner .multiimageinner {
    background-color: transparent;
}

.mw-parser-output .navbox,
.thumbcaption,
.thumbinner,
.toc,
.trow {
    background-color: #0008;
    color: #fff;
}

.infobox {
    color: #0ff;
}

/* ===== HEADINGS ===== */
.mw-body h1 {
    font-weight: 700;
}

.mw-body-content h2 {
    font-weight: 500;
}

h1, h2, h3, h4, h5, h6 {
    color: #fa0;
    font-family: Rubik, sans-serif;
}

/* ===== PRE-CONTENT ===== */
.pre-content {
    background-color: #0005 !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);
}

.pre-content h1, 
.content .mw-heading1, 
.content h1, 
.content .mw-heading2, 
.content h2 {
    font-family: Rubik, sans-serif;
}

/* ===== POPUPS ===== */
.mwe-popups .mwe-popups-container {
    padding-top: 0;
    display: flex;
    background: #000 !important;
}

.mwe-popups .mwe-popups-extract[dir="ltr"]::after {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), #000 50%);
}

.mwe-popups-container {
    background: #0005;
}

/* ===== SIDE BOXES ===== */
.mw-parser-output .side-box,
.mw-parser-output .spoken-wikipedia {
    background-color: #f009 !important;
}

/* ===== BANNERS ===== */
.bandeau-niveau-ebauche, 
.bandeau-niveau-information {
    background-color: var(--color-general-insideinfobox);
    border-color: #003da5;
}

/* ===== FILE INFO TEMPLATES ===== */
.mw-parser-output .nfur {
    background-color: var(--color-general-insideinfobox);
    border-collapse: separate;
    border-spacing: 2px;
    border: 1px solid #00ffdd;
    box-sizing: border-box;
    font-size: 95%;
    padding: 5px;
    width: 100%;
    border-top: 0;
    padding-top: 0;
    color: white;
}

licensetpl, 
fileinfotpl, 
fileinfotpl-type-fairuse, 
nfur, 
nfur-2 {
    background-color: var(--color-general-insideinfobox);
    border-collapse: separate;
    border-spacing: 2px;
    border: 1px solid #00ffdd;
    box-sizing: border-box;
    font-size: 95%;
    padding: 5px;
    width: 100%;
    border-top: 0;
    padding-top: 0;
    color: white;
}

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

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