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

Версия от 22:46, 4 ноября 2026

/* ==========================================================
   CRYPTO WIKI — MediaWiki global skin
   Визуальная система: dark / acid green / technical minimalism
   Совместимость: Vector 2022, Vector legacy, MonoBook, Timeless
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
    color-scheme: dark;
    --cw-bg: #090b0b;
    --cw-panel: #101414;
    --cw-panel-2: #151b17;
    --cw-text: #e8eee8;
    --cw-muted: #89938c;
    --cw-line: rgba(226,239,228,.14);
    --cw-acid: #c4f36b;
    --cw-acid-hover: #d8ff91;
    --cw-link: #c4f36b;
    --cw-danger: #ff8b82;
    --cw-mono: 'DM Mono', monospace;
    --cw-sans: 'Space Grotesk', 'Manrope', sans-serif;
    --cw-radius: 7px;
}

/* Base */

html,
body {
    background: var(--cw-bg) !important;
    color: var(--cw-text) !important;
    font-family: var(--cw-sans) !important;
}

body,
#content,
.mw-body,
.mw-page-container,
.vector-body,
#mw-content-text {
    color: var(--cw-text);
}

body {
    overflow-x: hidden;
}

a,
a:visited {
    color: var(--cw-link);
    text-decoration: none;
}

a:hover,
a:focus {
    color: var(--cw-acid-hover);
    text-decoration: underline;
}

hr {
    border: 0;
    border-top: 1px solid var(--cw-line);
}

/* General interface surfaces: Vector 2022 / legacy / MonoBook / Timeless */

.mw-page-container,
.vector-header-container,
.vector-main-menu-container,
.vector-sticky-header,
.vector-page-toolbar,
.vector-toc,
#mw-head,
#mw-panel,
#mw-page-base,
#mw-head-base,
#mw-navigation,
#mw-data-after-content,
#mw-footer,
#mw-content-container,
#mw-header-container,
#mw-site-navigation,
#mw-related-navigation,
#mw-content-wrapper,
#mw-content-block,
#mw-footer-container {
    background: var(--cw-bg) !important;
    color: var(--cw-text) !important;
    border-color: var(--cw-line) !important;
}

/* Main content frame */

#content,
.mw-body,
.vector-body,
.mw-parser-output,
#mw-content-text {
    background: var(--cw-panel) !important;
    color: var(--cw-text) !important;
}

#content,
.mw-body {
    border: 1px solid var(--cw-line);
    border-radius: var(--cw-radius);
    box-shadow: 0 18px 65px rgba(0,0,0,.22);
}

.mw-page-container {
    max-width: 1500px;
}

#content {
    padding: 30px 38px;
}

/* Header and logo */

.vector-header-container,
#mw-head,
#mw-header-container {
    border-bottom: 1px solid var(--cw-line) !important;
    box-shadow: none !important;
}

.mw-logo,
.mw-logo-wordmark,
.mw-logo-tagline,
#p-logo a {
    filter: grayscale(1) brightness(1.8);
}

.mw-logo-wordmark,
.mw-logo-tagline {
    color: var(--cw-text) !important;
}

.vector-header-container a,
#mw-head a,
#mw-navigation a {
    color: var(--cw-text);
}

.vector-header-container a:hover,
#mw-head a:hover,
#mw-navigation a:hover {
    color: var(--cw-acid);
}

/* Page title and headings */

.firstHeading,
#firstHeading,
.mw-first-heading,
.mw-body h1,
.mw-body h2,
.mw-body h3,
.mw-body h4,
.mw-parser-output h2,
.mw-parser-output h3,
.mw-parser-output h4 {
    color: var(--cw-text) !important;
    font-family: var(--cw-sans);
    font-weight: 600;
    letter-spacing: -.035em;
}

.firstHeading,
#firstHeading,
.mw-first-heading {
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.08;
    border-bottom: 1px solid var(--cw-line);
    padding-bottom: 18px;
}

.mw-parser-output h2 {
    margin-top: 1.7em;
    padding-bottom: .35em;
    border-bottom: 1px solid var(--cw-line);
    font-size: 1.65em;
}

.mw-parser-output h3 {
    margin-top: 1.4em;
    font-size: 1.25em;
}

.mw-parser-output p,
.mw-parser-output li,
.mw-parser-output dd {
    line-height: 1.8;
}

.mw-parser-output {
    font-size: 14px;
}

/* Sidebar / navigation */

#mw-panel,
.vector-main-menu-container,
.vector-main-menu,
#mw-site-navigation,
#mw-related-navigation {
    color: var(--cw-muted) !important;
}

#mw-panel .portal,
.vector-main-menu .vector-menu,
.vector-main-menu .vector-menu-content,
#mw-site-navigation .sidebar-chunk,
#mw-related-navigation .sidebar-chunk {
    background: transparent !important;
    border-color: var(--cw-line) !important;
}

#mw-panel .portal h3,
.vector-main-menu .vector-menu-heading,
#mw-site-navigation h2,
#mw-related-navigation h2 {
    color: var(--cw-acid) !important;
    font: 500 9px var(--cw-mono) !important;
    letter-spacing: .15em;
    text-transform: uppercase;
}

#mw-panel .portal a,
.vector-main-menu a,
#mw-site-navigation a,
#mw-related-navigation a {
    color: #aab4ac !important;
    font-size: 12px;
    transition: color .2s ease, padding-left .2s ease;
}

#mw-panel .portal a:hover,
.vector-main-menu a:hover,
#mw-site-navigation a:hover,
#mw-related-navigation a:hover {
    color: var(--cw-acid) !important;
}

/* Search */

#searchInput,
.vector-search-box-input,
.cdx-text-input__input,
input[type="search"] {
    background: #0b100d !important;
    color: var(--cw-text) !important;
    border: 1px solid var(--cw-line) !important;
    border-radius: 4px !important;
    font: 12px var(--cw-mono) !important;
    box-shadow: none !important;
}

#searchInput:focus,
.vector-search-box-input:focus,
.cdx-text-input__input:focus,
input[type="search"]:focus {
    border-color: var(--cw-acid) !important;
    outline: 1px solid rgba(196,243,107,.2);
}

#searchGoButton,
#searchButton,
.vector-search-box button,
.cdx-button {
    background: var(--cw-acid) !important;
    color: #10150b !important;
    border: 1px solid var(--cw-acid) !important;
    border-radius: 4px !important;
}

/* Page tabs / actions */

.vector-page-toolbar,
.vector-page-toolbar-container,
#p-cactions,
#p-views,
#p-namespaces,
#p-variants,
.mw-portlet,
.mw-portlet-body {
    border-color: var(--cw-line) !important;
}

.vector-page-toolbar a,
.vector-menu-tabs a,
#p-cactions a,
#p-views a,
#p-namespaces a,
.mw-portlet a {
    color: #aab4ac !important;
}

.vector-page-toolbar a:hover,
.vector-menu-tabs a:hover,
#p-cactions a:hover,
#p-views a:hover,
#p-namespaces a:hover {
    color: var(--cw-acid) !important;
}

.vector-menu-tabs .selected,
.vector-menu-tabs .selected a,
#p-cactions .selected a,
#p-views .selected a,
#p-namespaces .selected a {
    background: var(--cw-panel) !important;
    color: var(--cw-acid) !important;
    border-color: var(--cw-acid) !important;
}

/* Buttons */

button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.mw-ui-button,
.oo-ui-buttonElement-button,
.cdx-button {
    border-radius: 4px !important;
    font-family: var(--cw-mono) !important;
    transition: .2s ease;
}

.mw-ui-button,
.oo-ui-buttonElement-button,
.cdx-button:not(.cdx-button--fake-button) {
    background: #182019 !important;
    color: var(--cw-text) !important;
    border: 1px solid var(--cw-line) !important;
}

.mw-ui-button:hover,
.oo-ui-buttonElement-button:hover,
.cdx-button:hover {
    border-color: var(--cw-acid) !important;
    color: var(--cw-acid) !important;
}

.mw-ui-button.mw-ui-progressive,
.oo-ui-buttonElement-progressive .oo-ui-buttonElement-button,
.cdx-button--action-progressive {
    background: var(--cw-acid) !important;
    color: #10150b !important;
    border-color: var(--cw-acid) !important;
}

/* Inputs, selects, textareas */

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
textarea,
select,
.oo-ui-inputWidget-input,
.cdx-text-input__input,
.cdx-text-area__textarea,
.cdx-select {
    background: #0b100d !important;
    color: var(--cw-text) !important;
    border: 1px solid var(--cw-line) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--cw-acid) !important;
    outline-color: rgba(196,243,107,.25);
}

::placeholder {
    color: #69756c !important;
    opacity: 1;
}

/* Tables */

.mw-parser-output table.wikitable,
.wikitable,
.mw-datatable,
table.mw-enhanced-rc {
    background: var(--cw-panel) !important;
    color: var(--cw-text) !important;
    border: 1px solid var(--cw-line) !important;
    border-collapse: collapse;
}

.mw-parser-output table.wikitable th,
.wikitable th,
.mw-datatable th {
    background: #182019 !important;
    color: var(--cw-acid) !important;
    border: 1px solid var(--cw-line) !important;
    font: 500 10px var(--cw-mono);
    letter-spacing: .04em;
}

.mw-parser-output table.wikitable td,
.wikitable td,
.mw-datatable td {
    background: transparent !important;
    color: var(--cw-text) !important;
    border: 1px solid var(--cw-line) !important;
    padding: 9px 12px;
}

.mw-parser-output table.wikitable tr:nth-child(even) td {
    background: rgba(255,255,255,.018) !important;
}

/* Code and mathematics */

pre,
.mw-code,
.mw-highlight,
.mw-parser-output code,
.mw-parser-output pre,
.mw-parser-output .mw-highlight {
    background: #080c0a !important;
    color: #d5e4d5 !important;
    border: 1px solid var(--cw-line) !important;
    border-radius: 5px;
    font-family: var(--cw-mono) !important;
}

.mw-parser-output code {
    padding: .12em .35em;
}

.mw-parser-output pre {
    padding: 16px;
    overflow-x: auto;
}

.mw-parser-output .mwe-math-element,
.mw-parser-output .mwe-math-fallback-image-inline {
    color: var(--cw-text);
}

/* Contents / TOC */

#toc,
.toc,
.vector-toc,
.mw-table-of-contents {
    background: #0c110e !important;
    color: var(--cw-text) !important;
    border: 1px solid var(--cw-line) !important;
    border-radius: 5px;
    padding: 15px 18px;
}

#toc h2,
.toc h2,
.vector-toc h2,
.mw-table-of-contents h2 {
    color: var(--cw-acid) !important;
    font: 500 10px var(--cw-mono) !important;
    letter-spacing: .12em;
    border: 0;
}

#toc a,
.toc a,
.vector-toc a,
.mw-table-of-contents a {
    color: #aab4ac !important;
}

/* Notices, categories, metadata */

.mw-message-box,
.warningbox,
.successbox,
.errorbox,
.ambox,
.tmbox,
.fmbox {
    background: #141b16 !important;
    color: var(--cw-text) !important;
    border-color: var(--cw-line) !important;
}

.catlinks,
.mw-normal-catlinks,
.mw-hidden-catlinks {
    background: #0c110e !important;
    color: var(--cw-muted) !important;
    border: 1px solid var(--cw-line) !important;
    border-radius: 4px;
}

.mw-indicators,
.mw-editsection,
.mw-references-wrap {
    color: var(--cw-muted);
}

.mw-editsection a {
    color: var(--cw-acid) !important;
    font: 9px var(--cw-mono);
}

/* Recent changes / special pages / lists */

.mw-changeslist,
.mw-special,
.mw-allpages-table,
.mw-category,
.mw-prefixindex-list,
.mw-logline,
.mw-history-compare,
.mw-search-results {
    color: var(--cw-text);
}

.mw-changeslist-line,
.mw-allpages-table tr,
.mw-prefixindex-list li,
.mw-search-result {
    border-color: var(--cw-line) !important;
}

.mw-changeslist-line:hover,
.mw-allpages-table tr:hover {
    background: rgba(196,243,107,.035) !important;
}

/* Edit page */

#wpTextbox1,
#wpSummary,
#wpReason,
.mw-editform textarea,
.mw-editform input[type="text"] {
    background: #080c0a !important;
    color: var(--cw-text) !important;
    border: 1px solid var(--cw-line) !important;
    font-family: var(--cw-mono) !important;
}

.wikiEditor-ui,
.wikiEditor-ui-toolbar,
.wikiEditor-ui .wikiEditor-ui-view {
    background: #101414 !important;
    border-color: var(--cw-line) !important;
}

/* Footer */

#footer,
.mw-footer,
.vector-footer,
#mw-footer-container {
    color: var(--cw-muted) !important;
    border-color: var(--cw-line) !important;
}

#footer a,
.mw-footer a,
.vector-footer a {
    color: #aab4ac !important;
}

/* Scrollbar */

* {
    scrollbar-color: #465344 #090b0b;
    scrollbar-width: thin;
}

::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

::-webkit-scrollbar-track {
    background: #090b0b;
}

::-webkit-scrollbar-thumb {
    background: #465344;
    border: 2px solid #090b0b;
    border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
    background: #71875c;
}

/* Responsive adjustments */

@media (max-width: 720px) {
    #content {
        padding: 20px 16px;
        border-radius: 0;
    }

    .firstHeading,
    #firstHeading,
    .mw-first-heading {
        font-size: 30px;
    }

    .mw-parser-output {
        font-size: 13px;
    }
}

/* Accessibility: reduced motion */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* =========================================
   FIX: DARK UI COMPONENTS
   ========================================= */

/* Всплывающие окна и диалоги */
.oo-ui-window-frame,
.oo-ui-dialog,
.oo-ui-popupWidget-popup,
.oo-ui-popupWidget-head,
.oo-ui-popupWidget-body,
.oo-ui-windowManager-modal > .oo-ui-dialog {
    background: #101414 !important;
    color: #e8eee8 !important;
    border-color: rgba(226, 239, 228, .14) !important;
}

/* Выпадающие меню */
.oo-ui-menuSelectWidget,
.oo-ui-selectWidget,
.oo-ui-dropdownWidget,
.oo-ui-menuOptionWidget,
.oo-ui-optionWidget {
    background: #101414 !important;
    color: #e8eee8 !important;
    border-color: rgba(226, 239, 228, .14) !important;
}

/* Панели инструментов */
.oo-ui-toolbar-bar,
.oo-ui-toolGroup,
.oo-ui-toolGroup-tools,
.oo-ui-tool {
    background: #101414 !important;
    color: #e8eee8 !important;
    border-color: rgba(226, 239, 228, .14) !important;
}

/* Поля ввода */
.oo-ui-inputWidget-input,
.oo-ui-textInputWidget input,
.oo-ui-textInputWidget textarea,
.oo-ui-dropdownInputWidget select,
.mw-input,
input,
textarea,
select {
    background-color: #090b0b !important;
    color: #e8eee8 !important;
    border-color: rgba(226, 239, 228, .2) !important;
}

/* Кнопки */
.oo-ui-buttonElement-button,
.oo-ui-buttonElement-framed,
.mw-ui-button {
    background: #101414 !important;
    color: #e8eee8 !important;
    border-color: rgba(226, 239, 228, .2) !important;
}

/* Наведение */
.oo-ui-menuOptionWidget:hover,
.oo-ui-optionWidget:hover,
.oo-ui-buttonElement-button:hover,
.mw-ui-button:hover {
    background: #1b2420 !important;
}

/* Выбранные элементы */
.oo-ui-optionWidget-selected,
.oo-ui-menuOptionWidget-selected {
    background: rgba(196, 243, 107, .12) !important;
    color: #c4f36b !important;
}

/* Уведомления */
.mw-notification,
.mw-echo-ui-notificationsWidget,
.mw-echo-ui-overlay {
    background: #101414 !important;
    color: #e8eee8 !important;
    border-color: rgba(226, 239, 228, .14) !important;
}

/* Меню Vector */
.vector-dropdown-content,
.vector-menu-content,
.vector-pinnable-element {
    background: #101414 !important;
    color: #e8eee8 !important;
    border-color: rgba(226, 239, 228, .14) !important;
}

/* Текст внутри компонентов */
.oo-ui-window-frame *,
.oo-ui-popupWidget-popup *,
.oo-ui-menuSelectWidget *,
.vector-dropdown-content * {
    border-color: rgba(226, 239, 228, .14);
}

/* Ссылки */
.oo-ui-window-frame a,
.oo-ui-popupWidget-popup a,
.vector-dropdown-content a {
    color: #c4f36b;
}