MediaWiki:Common.css: различия между версиями

Версия от 14:58, 13 июня 2026

:root, html, body:not(.theme-default), body.theme-active-dark {
    --background-color-base: var(--bg-content, #1e2022) !important;
    --background-color-paper: var(--bg-main, #161719) !important;
    --color-base: var(--text-main, #e3e4e6) !important;
    --color-base--subtle: var(--text-muted, #a8a095) !important;
    --border-color-base: var(--border-color, #3f4348) !important;
    --background-color-neutral-subtle: var(--bg-card, #282a2d) !important;
    --background-color-neutral: var(--bg-input, #313438) !important;
    --color-link: var(--accent, #00adb5) !important;
    --color-link--visited: #9b72cf !important;
    
    --background-color-button-quiet: transparent !important;
    --background-color-action: var(--bg-input, #313438) !important;
    --background-color-action-quiet: transparent !important;
    --border-color-action: var(--border-color, #3f4348) !important;
    --color-action: var(--accent, #00adb5) !important;
    
    background-color: var(--bg-main, #161719) !important;
    color: var(--text-main, #e3e4e6) !important;
    
    scrollbar-color: var(--bg-card, #282a2d) var(--bg-main, #161719) !important;
}

html, body {
    background-color: #161719 !important;
}

body:not(.theme-nanotrasen):not(.theme-syndicate):not(.theme-plasmafire):not(.theme-clockcult):not(.theme-bloodcult):not(.theme-heretic):not(.theme-default) {
    --bg-main: #161719;
    --bg-content: #1e2022;
    --bg-card: #282a2d;
    --bg-input: #313438;
    --border-color: #3f4348;
    --text-main: #e3e4e6;
    --text-muted: #a8a095;
    --accent: #00adb5;
}

body:not(.theme-default) .mw-body, body.theme-active-dark .mw-body {
    background-color: var(--bg-content) !important;
    color: var(--text-main) !important;
    border-color: var(--border-color) !important;
}

body:not(.theme-default) .vector-header-container,
body:not(.theme-default) .vector-header,
body:not(.theme-default) .mw-header,
body.theme-active-dark .vector-header-container,
body.theme-active-dark .vector-header,
body.theme-active-dark .mw-header {
    background-color: var(--bg-main) !important;
    background-image: none !important;
    border-bottom: 1px solid var(--border-color) !important;
}

body:not(.theme-default) .vector-dropdown-content,
body.theme-active-dark .vector-dropdown-content,
body:not(.theme-default) .vector-pinnable-container,
body.theme-active-dark .vector-pinnable-container {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5) !important;
}

body:not(.theme-default) .vector-dropdown-content a,
body.theme-active-dark .vector-dropdown-content a,
body:not(.theme-default) .vector-pinnable-container a,
body.theme-active-dark .vector-pinnable-container a {
    color: var(--text-main) !important;
}

body:not(.theme-default) .vector-dropdown-content a:hover,
body.theme-active-dark .vector-dropdown-content a:hover {
    background-color: var(--bg-input) !important;
    color: var(--accent) !important;
}

body:not(.theme-default) .cdx-text-input__input,
body:not(.theme-default) .vector-search-box-input,
body:not(.theme-default) select,
body:not(.theme-default) input,
body:not(.theme-default) textarea,
body:not(.theme-default) .cdx-button,
body.theme-active-dark .cdx-text-input__input,
body.theme-active-dark .vector-search-box-input,
body.theme-active-dark select,
body.theme-active-dark input,
body.theme-active-dark textarea,
body.theme-active-dark .cdx-button {
    background-color: var(--bg-input) !important;
    color: var(--text-main) !important;
    border-color: var(--border-color) !important;
}

body:not(.theme-default) .cdx-button:not(.cdx-button--weight-quiet):hover,
body.theme-active-dark .cdx-button:not(.cdx-button--weight-quiet):hover {
    background-color: var(--bg-card) !important;
    color: var(--accent) !important;
}

body:not(.theme-default) .mw-sidebar, 
body.theme-active-dark .mw-sidebar {
    background-color: var(--bg-main) !important;
}

body:not(.theme-default) a, body.theme-active-dark a { 
    color: var(--accent) !important; 
}

body:not(.theme-default) h1, body:not(.theme-default) h2,
body.theme-active-dark h1, body.theme-active-dark h2 { 
    border-bottom-color: var(--border-color) !important; 
    color: var(--text-main) !important; 
}

body:not(.theme-default) .wikitable, 
body:not(.theme-default) .toc,
body:not(.theme-default) .thumbinner,
body:not(.theme-default) .infobox,
body:not(.theme-default) .ambox,
body:not(.theme-default) .mw-notification,
body:not(.theme-default) .catlinks,
body:not(.theme-default) .navbox,
body:not(.theme-default) .ext-mwe-cdx-card,
body:not(.theme-default) div[role="note"],
body.theme-active-dark .wikitable, 
body.theme-active-dark .toc,
body.theme-active-dark .thumbinner,
body.theme-active-dark .infobox,
body.theme-active-dark .ambox,
body.theme-active-dark .mw-notification,
body.theme-active-dark .catlinks,
body.theme-active-dark .navbox,
body.theme-active-dark .ext-mwe-cdx-card,
body.theme-active-dark div[role="note"] { 
    background-color: var(--bg-card) !important; 
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
}

body.theme-stddark {
    --bg-main: #161719;
    --bg-content: #1e2022;
    --bg-card: #282a2d;
    --bg-input: #313438;
    --border-color: #3f4348;
    --text-main: #e3e4e6;
    --text-muted: #a8a095;
    --accent: #00adb5;
}

body.theme-nanotrasen {
    --bg-main: #0c1014;
    --bg-content: #141a22;
    --bg-card: #1b2430;
    --bg-input: #222d3c;
    --border-color: #2b3a4e;
    --text-main: #dae5f3;
    --text-muted: #8ea1b9;
    --accent: #4a90e2;
}

body.theme-syndicate {
    --bg-main: #111111;
    --bg-content: #1a1a1a;
    --bg-card: #262626;
    --bg-input: #333333;
    --border-color: #441111;
    --text-main: #e0e0e0;
    --text-muted: #aa8888;
    --accent: #ff3333;
}

body.theme-plasmafire {
    --bg-main: #090312;
    --bg-content: #150b24;
    --bg-card: #23123a;
    --bg-input: #321b51;
    --border-color: #a62681;
    --text-main: #f3e8f7;
    --text-muted: #bda3cf;
    --accent: #ff41b4;
}

body.theme-clockcult {
    --bg-main: #14110c;
    --bg-content: #201b12;
    --bg-card: #2d2619;
    --bg-input: #3a3121;
    --border-color: #be9b4a;
    --text-main: #f0e6d2;
    --text-muted: #bfa67a;
    --accent: #e5af33;
}

body.theme-bloodcult {
    --bg-main: #0c0202;
    --bg-content: #170505;
    --bg-card: #260a0a;
    --bg-input: #380e0e;
    --border-color: #800c0c;
    --text-main: #f0dad0;
    --text-muted: #b89292;
    --accent: #ff4d4d;
}

body.theme-heretic {
    --bg-main: #030a05;
    --bg-content: #0b1a0e;
    --bg-card: #122a18;
    --bg-input: #1a3b21;
    --border-color: #1f5f2a;
    --text-main: #e2f3e5;
    --text-muted: #99be9f;
    --accent: #39ff14;
}

body.theme-default {
    --background-color-base: #ffffff !important;
    --background-color-paper: #f8f9fa !important;
    --color-base: #202122 !important;
    --color-base--subtle: #72777d !important;
    --border-color-base: #a2a9b1 !important;
    --background-color-neutral-subtle: #f8f9fa !important;
    --background-color-neutral: #eaecf0 !important;
    --color-link: #36c !important;
    
    --background-color-button-quiet: transparent !important;
    --background-color-action: #f8f9fa !important;
    --border-color-action: #a2a9b1 !important;
    --color-action: #36c !important;

    background-color: #f8f9fa !important;
    color: #202122 !important;
    scrollbar-color: auto !important;
}
body.theme-default .mw-body { background-color: #ffffff !important; color: #202122 !important; border-color: #a2a9b1 !important; }
body.theme-default .vector-header-container { background-color: #ffffff !important; border-bottom: 1px solid #a2a9b1 !important; }
body.theme-default .vector-dropdown-content, body.theme-default .vector-pinnable-container { background-color: #ffffff !important; border: 1px solid #a2a9b1 !important; }
body.theme-default .vector-dropdown-content a { color: #202122 !important; }
body.theme-default .cdx-text-input__input, body.theme-default select, body.theme-default input, body.theme-default textarea, body.theme-default .cdx-button { background-color: #ffffff !important; color: #202122 !important; border-color: #a2a9b1 !important; }
body.theme-default a { color: #36c !important; }
body.theme-default h1, body.theme-default h2 { border-bottom-color: #a2a9b1 !important; color: #000000 !important; }
body.theme-default .wikitable, body.theme-default .toc, body.theme-default .thumbinner, body.theme-default .infobox, body.theme-default .ambox, body.theme-default .catlinks, body.theme-default .navbox, body.theme-default .ext-mwe-cdx-card, body.theme-default div[role="note"] { background-color: #f8f9fa !important; border-color: #a2a9b1 !important; color: #202122 !important; }

.tg-custom-palette-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    height: 20px !important;
}

body:not(.theme-default) .tg-custom-palette-icon img,
body.theme-active-dark .tg-custom-palette-icon img {
    filter: drop-shadow(0 0 4px var(--accent)) !important;
}

.tg-custom-palette-icon img {
    transition: filter 0.3s ease !important;
}

.tg-custom-palette-icon {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    background-image: url('/images/images/f/f6/Palette.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    transition: filter 0.3s ease !important;
}

body:not(.theme-default) .tg-custom-palette-icon,
body.theme-active-dark .tg-custom-palette-icon {
    filter: drop-shadow(0 0 4px var(--accent)) !important;
}