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

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

/* =========================================================
   CRYPTOWIKI — MEDIAWIKI COMMON.CSS
   Dark technical interface / Acid Green / Minimalism
   Совместимость: Vector 2022, Vector Legacy, MonoBook, Timeless
   ========================================================= */

/* ---------- 1. FONTS ---------- */

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


/* ---------- 2. DESIGN TOKENS ---------- */

:root {
    color-scheme: dark;

    --cw-bg: #090b0b;
    --cw-panel: #101414;
    --cw-panel-hover: #171d1a;
    --cw-panel-active: #1d261d;

    --cw-text: #e8eee8;
    --cw-muted: #89938c;
    --cw-subtle: #59635c;

    --cw-accent: #c4f36b;
    --cw-accent-hover: #d7ff80;
    --cw-accent-soft: rgba(196, 243, 107, 0.10);

    --cw-line: rgba(226, 239, 228, 0.14);
    --cw-line-strong: rgba(226, 239, 228, 0.24);

    --cw-danger: #ff7777;
    --cw-warning: #f3c969;
    --cw-success: #a8e58b;
    --cw-info: #82c8ed;

    --cw-radius: 8px;
    --cw-radius-small: 5px;

    --cw-font: 'Manrope', 'Segoe UI', sans-serif;
    --cw-heading: 'Space Grotesk', 'Manrope', sans-serif;
    --cw-mono: 'DM Mono', 'Consolas', monospace;

    --cw-content-width: 1200px;
}


/* ---------- 3. GLOBAL RESET ---------- */

html {
    background: var(--cw-bg) !important;
    scroll-behavior: smooth;
}

body,
.mw-page-container,
.mw-body,
#content,
#mw-content-container,
#mw-page-base,
#mw-head-base {
    background: var(--cw-bg) !important;
    color: var(--cw-text) !important;
}

body {
    font-family: var(--cw-font);
    font-size: 15px;
    line-height: 1.75;
}

* {
    scrollbar-width: thin;
    scrollbar-color: #39443b var(--cw-bg);
}

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

*::-webkit-scrollbar-track {
    background: var(--cw-bg);
}

*::-webkit-scrollbar-thumb {
    background: #39443b;
    border: 2px solid var(--cw-bg);
    border-radius: 10px;
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--cw-accent);
}

::selection {
    background: var(--cw-accent);
    color: #090b0b;
}


/* ---------- 4. BACKGROUND GRID ---------- */

body {
    background-image:
        linear-gradient(rgba(196, 243, 107, 0.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(196, 243, 107, 0.018) 1px, transparent 1px) !important;
    background-size: 48px 48px;
    background-attachment: fixed;
}


/* ---------- 5. LINKS ---------- */

a,
a:visited {
    color: var(--cw-accent);
    text-decoration: none;
    transition:
        color 0.18s ease,
        opacity 0.18s ease;
}

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

a:active {
    opacity: 0.75;
}

a.new,
a.new:visited {
    color: var(--cw-danger);
}

a.external,
a.extiw {
    color: var(--cw-accent);
}

.mw-parser-output a.external::after {
    opacity: 0.45;
}


/* ---------- 6. HEADINGS ---------- */

h1,
h2,
h3,
h4,
h5,
h6,
.firstHeading,
.mw-first-heading {
    color: var(--cw-text) !important;
    font-family: var(--cw-heading);
    font-weight: 600;
    letter-spacing: -0.035em;
    line-height: 1.25;
}

h1,
.firstHeading,
.mw-first-heading {
    font-size: clamp(2rem, 4vw, 3rem);
    border-bottom: 1px solid var(--cw-line);
    padding-bottom: 0.35em;
    margin-bottom: 0.8em;
}

h2 {
    font-size: 1.8rem;
    margin-top: 1.8em;
    padding-bottom: 0.35em;
    border-bottom: 1px solid var(--cw-line);
}

h3 {
    font-size: 1.35rem;
    margin-top: 1.5em;
}

h4 {
    font-size: 1.1rem;
}

.mw-parser-output h2 .mw-headline,
.mw-parser-output h3 .mw-headline {
    color: var(--cw-text);
}


/* ---------- 7. HEADER / VECTOR ---------- */

.vector-header-container,
.vector-header,
.vector-sticky-header,
#mw-head,
#mw-page-header,
#mw-navigation,
#mw-panel,
.vector-main-menu-container {
    background: rgba(9, 11, 11, 0.94) !important;
    color: var(--cw-text) !important;
    border-color: var(--cw-line) !important;
}

.vector-header-container,
.vector-sticky-header {
    border-bottom: 1px solid var(--cw-line) !important;
    backdrop-filter: blur(16px);
}

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

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

.vector-header-container .mw-logo,
#p-logo {
    opacity: 0.95;
}

.mw-logo-icon {
    filter: none;
}

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


/* ---------- 8. SEARCH ---------- */

.vector-search-box,
#p-search,
#searchform,
.mw-search-form,
.mw-search-form-wrapper {
    color: var(--cw-text);
}

.vector-search-box input,
#searchInput,
#searchText,
.mw-search-form input,
input[type="search"] {
    background: var(--cw-panel) !important;
    color: var(--cw-text) !important;
    border: 1px solid var(--cw-line) !important;
    border-radius: var(--cw-radius-small) !important;
    font-family: var(--cw-font);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.vector-search-box input:focus,
#searchInput:focus,
#searchText:focus,
input[type="search"]:focus {
    border-color: var(--cw-accent) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px var(--cw-accent-soft);
}

.vector-search-box input::placeholder,
input::placeholder {
    color: var(--cw-muted);
}


/* ---------- 9. SIDEBAR ---------- */

.vector-main-menu,
.vector-main-menu-container,
#mw-panel,
#mw-panel .portal,
#mw-panel .portal .body {
    background: transparent !important;
    color: var(--cw-text);
}

.vector-main-menu,
#mw-panel {
    border-right: 1px solid var(--cw-line);
}

.vector-main-menu .vector-menu-heading,
#mw-panel h3,
#mw-panel .portal h3 {
    color: var(--cw-muted) !important;
    font-family: var(--cw-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.vector-main-menu a,
#mw-panel .portal a {
    color: var(--cw-muted);
    border-radius: var(--cw-radius-small);
    transition: all 0.18s ease;
}

.vector-main-menu a:hover,
#mw-panel .portal a:hover {
    color: var(--cw-accent);
    background: var(--cw-accent-soft);
}

.vector-main-menu .vector-menu-content-list,
#mw-panel .portal .body {
    padding: 5px 0;
}

#mw-panel .portal {
    border: none;
    margin-bottom: 1.5em;
}


/* ---------- 10. PAGE CONTENT ---------- */

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

.mw-body {
    border: 1px solid var(--cw-line);
    border-radius: var(--cw-radius);
    padding: clamp(20px, 4vw, 42px) !important;
    margin-top: 20px;
    background: rgba(16, 20, 20, 0.82) !important;
    box-shadow: 0 12px 50px rgba(0, 0, 0, 0.12);
}

.mw-body-content {
    font-size: 15px;
    line-height: 1.85;
}

.mw-parser-output {
    max-width: var(--cw-content-width);
}

.mw-parser-output > p:first-of-type {
    margin-top: 0;
}

.mw-parser-output p {
    margin: 0.9em 0;
}


/* ---------- 11. PAGE TABS ---------- */

.vector-menu-tabs,
.vector-menu-tabs-legacy,
#p-views,
#p-namespaces {
    background: transparent !important;
    border: none !important;
}

.vector-menu-tabs li,
.vector-menu-tabs-legacy li {
    background: transparent !important;
    border: none !important;
}

.vector-menu-tabs a,
.vector-menu-tabs-legacy a,
#p-views a,
#p-namespaces a {
    color: var(--cw-muted) !important;
    border: 1px solid transparent !important;
    border-radius: var(--cw-radius-small);
    padding: 7px 11px !important;
    transition: all 0.18s ease;
}

.vector-menu-tabs a:hover,
.vector-menu-tabs-legacy a:hover,
#p-views a:hover,
#p-namespaces a:hover {
    color: var(--cw-accent) !important;
    background: var(--cw-accent-soft) !important;
}

.vector-menu-tabs .selected a,
.vector-menu-tabs-legacy .selected a,
#p-views .selected a,
#p-namespaces .selected a {
    color: var(--cw-accent) !important;
    background: var(--cw-accent-soft) !important;
    border-color: rgba(196, 243, 107, 0.2) !important;
}


/* ---------- 12. TABLE OF CONTENTS ---------- */

#toc,
.toc,
.toccolours {
    background: var(--cw-panel) !important;
    border: 1px solid var(--cw-line) !important;
    border-radius: var(--cw-radius);
    padding: 18px 22px;
    color: var(--cw-text);
    box-shadow: none;
}

#toc .toctitle,
.toc .toctitle {
    color: var(--cw-text);
    font-family: var(--cw-heading);
    font-size: 1rem;
    font-weight: 700;
}

#toc ul,
.toc ul {
    margin-top: 10px;
}

#toc li,
.toc li {
    margin: 4px 0;
}

#toc a,
.toc a {
    color: var(--cw-muted);
}

#toc a:hover,
.toc a:hover {
    color: var(--cw-accent);
}

.toctogglelabel {
    color: var(--cw-accent);
}


/* ---------- 13. TABLES ---------- */

.mw-parser-output table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    margin: 1.5em 0;
    background: var(--cw-panel);
    border: 1px solid var(--cw-line);
    border-radius: var(--cw-radius);
    overflow: hidden;
}

.mw-parser-output th {
    background: #171e19;
    color: var(--cw-accent);
    font-family: var(--cw-heading);
    font-weight: 600;
    text-align: left;
}

.mw-parser-output th,
.mw-parser-output td {
    padding: 12px 15px;
    border: none;
    border-bottom: 1px solid var(--cw-line);
}

.mw-parser-output tr:last-child td {
    border-bottom: none;
}

.mw-parser-output tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.018);
}

.mw-parser-output tr:hover td {
    background: rgba(196, 243, 107, 0.035);
}


/* ---------- 14. CODE / SYNTAX ---------- */

code,
tt,
.mw-code,
.mw-highlight,
pre,
.sourceCode {
    font-family: var(--cw-mono) !important;
}

code,
tt {
    color: var(--cw-accent);
    background: rgba(196, 243, 107, 0.08);
    border: 1px solid rgba(196, 243, 107, 0.12);
    border-radius: 4px;
    padding: 2px 5px;
    font-size: 0.88em;
}

pre,
.mw-code,
.mw-highlight {
    background: #080b09 !important;
    color: #dce8dc !important;
    border: 1px solid var(--cw-line) !important;
    border-radius: var(--cw-radius);
    padding: 18px !important;
    overflow-x: auto;
    line-height: 1.65;
}

pre code {
    background: transparent;
    border: none;
    padding: 0;
    color: inherit;
}

.mw-highlight .k,
.mw-highlight .kd,
.mw-highlight .kn {
    color: #c4f36b;
}

.mw-highlight .s,
.mw-highlight .s1,
.mw-highlight .s2 {
    color: #a8d9a0;
}

.mw-highlight .c,
.mw-highlight .c1,
.mw-highlight .cm {
    color: #78857a;
}


/* ---------- 15. BLOCKQUOTES ---------- */

blockquote {
    margin: 1.5em 0;
    padding: 15px 20px;
    background: var(--cw-panel);
    border-left: 3px solid var(--cw-accent);
    border-radius: 0 var(--cw-radius) var(--cw-radius) 0;
    color: var(--cw-muted);
}

blockquote p:first-child {
    margin-top: 0;
}

blockquote p:last-child {
    margin-bottom: 0;
}


/* ---------- 16. LISTS ---------- */

.mw-parser-output ul,
.mw-parser-output ol {
    padding-left: 1.7em;
}

.mw-parser-output li {
    margin: 0.35em 0;
}

.mw-parser-output ul > li::marker {
    color: var(--cw-accent);
}

.mw-parser-output ol > li::marker {
    color: var(--cw-accent);
    font-family: var(--cw-mono);
}


/* ---------- 17. INFOBOXES ---------- */

.infobox,
.mw-parser-output .infobox {
    background: var(--cw-panel) !important;
    color: var(--cw-text) !important;
    border: 1px solid var(--cw-line) !important;
    border-radius: var(--cw-radius);
    padding: 12px;
    margin: 0 0 20px 20px;
    max-width: 340px;
}

.infobox th,
.infobox caption {
    background: #171e19 !important;
    color: var(--cw-accent) !important;
}

.infobox td,
.infobox th {
    border-color: var(--cw-line) !important;
}

.infobox a {
    color: var(--cw-accent);
}


/* ---------- 18. NOTICE BOXES ---------- */

.mbox,
.ambox,
.tmbox,
.imbox,
.cmbox,
.fmbox,
.messagebox {
    background: var(--cw-panel) !important;
    color: var(--cw-text) !important;
    border: 1px solid var(--cw-line) !important;
    border-left: 3px solid var(--cw-accent) !important;
    border-radius: var(--cw-radius);
    padding: 12px 16px;
}

.ambox-notice,
.mbox-notice {
    border-left-color: var(--cw-info) !important;
}

.ambox-warning,
.mbox-warning {
    border-left-color: var(--cw-warning) !important;
}

.ambox-delete,
.mbox-delete {
    border-left-color: var(--cw-danger) !important;
}


/* ---------- 19. CATEGORIES ---------- */

.catlinks {
    background: var(--cw-panel) !important;
    border: 1px solid var(--cw-line) !important;
    border-radius: var(--cw-radius);
    padding: 12px 16px;
    color: var(--cw-muted);
}

.catlinks a {
    color: var(--cw-accent);
}

.mw-normal-catlinks,
.mw-hidden-catlinks {
    color: var(--cw-muted);
}


/* ---------- 20. BUTTONS ---------- */

button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.mw-ui-button,
.oo-ui-buttonElement-button {
    background: var(--cw-panel) !important;
    color: var(--cw-text) !important;
    border: 1px solid var(--cw-line-strong) !important;
    border-radius: var(--cw-radius-small) !important;
    padding: 8px 14px;
    font-family: var(--cw-font);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.mw-ui-button:hover,
.oo-ui-buttonElement-button:hover {
    color: var(--cw-accent) !important;
    border-color: var(--cw-accent) !important;
    background: var(--cw-accent-soft) !important;
}

.mw-ui-button-primary,
.oo-ui-buttonElement-framed.oo-ui-flaggedElement-primary .oo-ui-buttonElement-button {
    background: var(--cw-accent) !important;
    color: #090b0b !important;
    border-color: var(--cw-accent) !important;
}

.mw-ui-button-primary:hover,
.oo-ui-buttonElement-framed.oo-ui-flaggedElement-primary .oo-ui-buttonElement-button:hover {
    background: var(--cw-accent-hover) !important;
    color: #090b0b !important;
}


/* ---------- 21. INPUTS / FORMS ---------- */

input,
textarea,
select {
    background: var(--cw-panel) !important;
    color: var(--cw-text) !important;
    border: 1px solid var(--cw-line) !important;
    border-radius: var(--cw-radius-small) !important;
    font-family: var(--cw-font);
    padding: 8px 10px;
}

input:focus,
textarea:focus,
select:focus {
    outline: none !important;
    border-color: var(--cw-accent) !important;
    box-shadow: 0 0 0 3px var(--cw-accent-soft);
}

textarea {
    line-height: 1.6;
}

label {
    color: var(--cw-muted);
}


/* ---------- 22. EDITOR ---------- */

.wikiEditor-ui,
.wikiEditor-ui .wikiEditor-ui-top,
.wikiEditor-ui .wikiEditor-ui-toolbar,
.wikiEditor-ui .wikiEditor-ui-text,
.wikiEditor-ui .wikiEditor-ui-bottom {
    background: var(--cw-panel) !important;
    color: var(--cw-text) !important;
    border-color: var(--cw-line) !important;
}

.wikiEditor-ui textarea,
#wpTextbox1,
#wpSummary {
    background: #080b09 !important;
    color: var(--cw-text) !important;
    border: 1px solid var(--cw-line) !important;
    font-family: var(--cw-mono) !important;
}

.mw-editform,
.mw-editform fieldset {
    border-color: var(--cw-line);
}

.mw-editform legend {
    color: var(--cw-accent);
}


/* ---------- 23. FOOTER ---------- */

#footer,
#footer-info,
#footer-places,
.mw-footer {
    color: var(--cw-muted) !important;
    background: transparent !important;
    border-color: var(--cw-line) !important;
}

#footer a,
.mw-footer a {
    color: var(--cw-muted);
}

#footer a:hover,
.mw-footer a:hover {
    color: var(--cw-accent);
}


/* ---------- 24. SPECIAL PAGES ---------- */

.mw-specialpages-list,
.mw-allpages-table,
.mw-category,
.mw-category-group {
    color: var(--cw-text);
}

.mw-specialpages-list h4,
.mw-category-group h3 {
    color: var(--cw-accent);
    font-family: var(--cw-heading);
}

.mw-allpages-table th,
.mw-allpages-table td {
    border-color: var(--cw-line);
}

.mw-pager-navigation-bar {
    background: var(--cw-panel);
    border: 1px solid var(--cw-line);
    border-radius: var(--cw-radius);
    padding: 10px;
}


/* ---------- 25. DIFF / HISTORY ---------- */

.mw-diff,
.diff {
    color: var(--cw-text);
}

.diff-addedline {
    background: rgba(120, 200, 110, 0.12) !important;
    border-color: rgba(120, 200, 110, 0.35) !important;
}

.diff-deletedline {
    background: rgba(255, 100, 100, 0.10) !important;
    border-color: rgba(255, 100, 100, 0.3) !important;
}

.diff-addedline .diffchange {
    background: rgba(120, 200, 110, 0.22);
}

.diff-deletedline .diffchange {
    background: rgba(255, 100, 100, 0.2);
}

.mw-history-compareselected {
    background: var(--cw-accent-soft);
}


/* ---------- 26. NOTIFICATIONS ---------- */

.mw-notification,
.mw-notification-area {
    background: var(--cw-panel) !important;
    color: var(--cw-text) !important;
    border: 1px solid var(--cw-line) !important;
    border-radius: var(--cw-radius);
}

.mw-notification-type-warn {
    border-left: 3px solid var(--cw-warning) !important;
}

.mw-notification-type-error {
    border-left: 3px solid var(--cw-danger) !important;
}

.mw-notification-type-success {
    border-left: 3px solid var(--cw-success) !important;
}


/* ---------- 27. IMAGES / GALLERIES ---------- */

.thumbinner,
.gallerybox,
.gallerytext {
    background: var(--cw-panel) !important;
    border-color: var(--cw-line) !important;
    color: var(--cw-muted) !important;
}

.thumbcaption {
    color: var(--cw-muted);
    font-size: 0.85rem;
}

figure,
.mw-file-description {
    color: var(--cw-muted);
}


/* ---------- 28. HORIZONTAL RULE ---------- */

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


/* ---------- 29. MONOSPACE METADATA ---------- */

.mw-editsection,
.mw-editsection-like,
.mw-last-modified,
#siteSub,
#contentSub,
.mw-indicators {
    color: var(--cw-muted) !important;
    font-family: var(--cw-mono);
    font-size: 0.75rem;
}

.mw-editsection a {
    color: var(--cw-accent);
}


/* ---------- 30. VECTOR 2022 CONTENT WIDTH ---------- */

.vector-body,
.vector-body-before-content,
.vector-body-after-content {
    color: var(--cw-text);
}

.vector-page-toolbar,
.vector-page-toolbar-container {
    background: transparent !important;
}

.vector-page-titlebar,
.vector-page-titlebar h1 {
    color: var(--cw-text) !important;
}


/* ---------- 31. LEGACY SKIN SUPPORT ---------- */

#column-content,
#content {
    background: transparent !important;
}

#p-cactions,
#p-personal,
#p-namespaces,
#p-views {
    background: transparent !important;
}

#p-cactions li,
#p-personal li {
    background: var(--cw-panel);
    border: 1px solid var(--cw-line);
    border-radius: var(--cw-radius-small);
}

#p-cactions a,
#p-personal a {
    color: var(--cw-muted);
}

#p-cactions a:hover,
#p-personal a:hover {
    color: var(--cw-accent);
}


/* ---------- 32. ANIMATIONS ---------- */

@media (prefers-reduced-motion: no-preference) {
    a,
    button,
    input,
    .mw-ui-button,
    .vector-menu-tabs a,
    #mw-panel .portal a {
        transition:
            color 0.18s ease,
            background-color 0.18s ease,
            border-color 0.18s ease,
            box-shadow 0.18s ease;
    }
}


/* ---------- 33. RESPONSIVE ---------- */

@media screen and (max-width: 900px) {
    .mw-body {
        padding: 22px !important;
        margin-top: 10px;
    }

    .mw-parser-output table {
        display: block;
        overflow-x: auto;
    }

    .infobox {
        max-width: 100%;
        margin: 0 0 20px 0;
        float: none;
    }
}

@media screen and (max-width: 600px) {
    body {
        font-size: 14px;
        background-size: 32px 32px;
    }

    .mw-body {
        border-left: none;
        border-right: none;
        border-radius: 0;
        padding: 16px !important;
        margin-top: 0;
    }

    h1,
    .firstHeading,
    .mw-first-heading {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    #toc,
    .toc {
        padding: 12px;
    }

    .mw-parser-output th,
    .mw-parser-output td {
        padding: 9px 10px;
    }
}


/* ---------- 34. DARK THEME ENFORCEMENT ---------- */

.skin-vector-2022,
.skin-vector,
.skin-monobook,
.skin-timeless {
    background: var(--cw-bg) !important;
    color: var(--cw-text) !important;
}

.vector-dropdown-content,
.vector-menu-dropdown .vector-menu-content,
.oo-ui-popupWidget-popup,
.oo-ui-menuSelectWidget,
.oo-ui-menuOptionWidget,
.mw-rcfilters-ui-filterMenuHeaderWidget-header {
    background: var(--cw-panel) !important;
    color: var(--cw-text) !important;
    border-color: var(--cw-line) !important;
}

.vector-dropdown-content a,
.oo-ui-menuOptionWidget {
    color: var(--cw-text) !important;
}

.vector-dropdown-content a:hover,
.oo-ui-menuOptionWidget:hover {
    background: var(--cw-accent-soft) !important;
    color: var(--cw-accent) !important;
}


/* ---------- 35. FINAL POLISH ---------- */

.mw-parser-output .mw-collapsible {
    background: var(--cw-panel);
    border: 1px solid var(--cw-line);
    border-radius: var(--cw-radius);
    padding: 12px;
}

.mw-collapsible-toggle {
    color: var(--cw-accent);
}

.mw-parser-output .mw-collapsible-toggle a {
    color: var(--cw-accent);
}

.mw-parser-output .hatnote,
.hatnote {
    color: var(--cw-muted);
    font-size: 0.9rem;
}

.mw-parser-output .plainlinks a {
    color: var(--cw-accent);
}

.mw-parser-output .error {
    color: var(--cw-danger);
}

.mw-parser-output .success {
    color: var(--cw-success);
}

/* =========================================================
   CRYPTOWIKI — COMMON.CSS EXTENSION
   Дополнительные стили интерфейса MediaWiki
   ========================================================= */


/* ---------- 36. VECTOR DROPDOWNS ---------- */

.vector-dropdown,
.vector-menu-dropdown {
    background: transparent !important;
}

.vector-dropdown-label,
.vector-menu-dropdown .vector-menu-heading {
    color: var(--cw-muted) !important;
}

.vector-dropdown-label:hover,
.vector-menu-dropdown .vector-menu-heading:hover {
    color: var(--cw-accent) !important;
}

.vector-dropdown-content,
.vector-menu-dropdown .vector-menu-content {
    background: var(--cw-panel) !important;
    border: 1px solid var(--cw-line) !important;
    border-radius: var(--cw-radius) !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, .35) !important;
    padding: 6px !important;
}

.vector-dropdown-content a,
.vector-menu-dropdown .vector-menu-content a {
    display: block;
    color: var(--cw-muted) !important;
    border-radius: 4px;
    padding: 8px 12px !important;
}

.vector-dropdown-content a:hover,
.vector-menu-dropdown .vector-menu-content a:hover {
    background: var(--cw-accent-soft) !important;
    color: var(--cw-accent) !important;
}


/* ---------- 37. PERSONAL MENU ---------- */

#p-personal,
.vector-user-links,
.vector-user-menu {
    color: var(--cw-muted) !important;
}

#p-personal a,
.vector-user-links a,
.vector-user-menu a {
    color: var(--cw-muted) !important;
}

#p-personal a:hover,
.vector-user-links a:hover,
.vector-user-menu a:hover {
    color: var(--cw-accent) !important;
}


/* ---------- 38. LOGIN / ACCOUNT ---------- */

.mw-htmlform,
.mw-htmlform-field-HTMLTextField,
.mw-htmlform-field-HTMLTextAreaField,
.mw-htmlform-field-HTMLSelectField {
    color: var(--cw-text);
}

.mw-htmlform fieldset {
    background: var(--cw-panel);
    border: 1px solid var(--cw-line);
    border-radius: var(--cw-radius);
    padding: 20px;
}

.mw-htmlform legend {
    color: var(--cw-accent);
    font-family: var(--cw-heading);
    font-weight: 600;
}

.mw-htmlform label {
    color: var(--cw-muted);
}

.mw-htmlform input {
    max-width: 100%;
}


/* ---------- 39. SEARCH RESULTS ---------- */

.mw-search-results {
    color: var(--cw-text);
}

.mw-search-result {
    padding: 16px 0;
    border-bottom: 1px solid var(--cw-line);
}

.mw-search-result-heading {
    font-family: var(--cw-heading);
    font-size: 1.15rem;
    font-weight: 600;
}

.mw-search-result-heading a {
    color: var(--cw-accent);
}

.mw-search-result-data,
.searchresult {
    color: var(--cw-muted);
}

.mw-search-result-data {
    font-family: var(--cw-mono);
    font-size: .75rem;
}


/* ---------- 40. RECENT CHANGES ---------- */

.mw-changeslist,
.mw-changeslist-line {
    color: var(--cw-text);
}

.mw-changeslist-line {
    padding: 5px 8px;
    border-radius: 4px;
}

.mw-changeslist-line:hover {
    background: var(--cw-accent-soft);
}

.mw-plusminus-pos {
    color: var(--cw-success);
}

.mw-plusminus-neg {
    color: var(--cw-danger);
}

.mw-tag {
    background: var(--cw-panel-active);
    color: var(--cw-accent);
    border: 1px solid var(--cw-line);
    border-radius: 4px;
    padding: 2px 6px;
    font-family: var(--cw-mono);
    font-size: .7rem;
}


/* ---------- 41. PAGINATION ---------- */

.mw-pager-navigation-bar,
.mw-pager-navigation-bar a {
    color: var(--cw-muted);
}

.mw-pager-navigation-bar a {
    padding: 5px 9px;
    border-radius: 4px;
}

.mw-pager-navigation-bar a:hover {
    color: var(--cw-accent);
    background: var(--cw-accent-soft);
}


/* ---------- 42. CATEGORY PAGES ---------- */

.mw-category-generated {
    background: transparent;
}

.mw-category-group {
    background: var(--cw-panel);
    border: 1px solid var(--cw-line);
    border-radius: var(--cw-radius);
    padding: 15px 20px;
    margin: 15px 0;
}

.mw-category-group h3 {
    color: var(--cw-accent);
    font-family: var(--cw-heading);
    border-bottom: 1px solid var(--cw-line);
    padding-bottom: 8px;
}

.mw-category-group ul {
    columns: 2;
    column-gap: 30px;
}

@media (max-width: 600px) {
    .mw-category-group ul {
        columns: 1;
    }
}


/* ---------- 43. FILE PAGES ---------- */

.fullImageLink,
.filehistory,
.fileinfo {
    color: var(--cw-muted);
}

.filehistory {
    background: var(--cw-panel);
    border: 1px solid var(--cw-line);
    border-radius: var(--cw-radius);
    padding: 15px;
}

.filehistory th,
.filehistory td {
    border-color: var(--cw-line);
}

.mw-filepage-other-resolutions {
    color: var(--cw-muted);
}


/* ---------- 44. COLLAPSIBLE ELEMENTS ---------- */

.mw-collapsible {
    border: 1px solid var(--cw-line);
    border-radius: var(--cw-radius);
    background: var(--cw-panel);
    padding: 12px 16px;
}

.mw-collapsible-toggle {
    font-family: var(--cw-mono);
    font-size: .8rem;
}

.mw-collapsible-toggle a {
    color: var(--cw-accent) !important;
}


/* ---------- 45. TOOLTIP ---------- */

.mw-tooltip,
.oo-ui-popupWidget-popup {
    background: var(--cw-panel) !important;
    color: var(--cw-text) !important;
    border: 1px solid var(--cw-line) !important;
    border-radius: var(--cw-radius) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .3) !important;
}


/* ---------- 46. MODALS ---------- */

.oo-ui-window-frame,
.oo-ui-dialog,
.oo-ui-processDialog-content {
    background: var(--cw-panel) !important;
    color: var(--cw-text) !important;
    border: 1px solid var(--cw-line) !important;
    border-radius: var(--cw-radius) !important;
}

.oo-ui-window-head,
.oo-ui-dialog-content {
    background: var(--cw-panel) !important;
    color: var(--cw-text) !important;
}

.oo-ui-window-head {
    border-bottom: 1px solid var(--cw-line) !important;
}


/* ---------- 47. NOTICES AND WARNINGS ---------- */

.mw-message-box {
    background: var(--cw-panel) !important;
    color: var(--cw-text) !important;
    border: 1px solid var(--cw-line) !important;
    border-radius: var(--cw-radius);
    padding: 14px 18px;
}

.mw-message-box-warning {
    border-left: 3px solid var(--cw-warning) !important;
}

.mw-message-box-error {
    border-left: 3px solid var(--cw-danger) !important;
}

.mw-message-box-success {
    border-left: 3px solid var(--cw-success) !important;
}

.mw-message-box-info {
    border-left: 3px solid var(--cw-info) !important;
}


/* ---------- 48. TAGS / STATUS LABELS ---------- */

.mw-tag,
.mw-rcfilters-ui-chip,
.oo-ui-labelElement-label {
    font-family: var(--cw-mono);
}

.mw-rcfilters-ui-chip {
    background: var(--cw-panel) !important;
    color: var(--cw-accent) !important;
    border: 1px solid var(--cw-line) !important;
    border-radius: 4px !important;
}


/* ---------- 49. ACCESSIBILITY ---------- */

:focus-visible {
    outline: 2px solid var(--cw-accent) !important;
    outline-offset: 3px;
}

a:focus-visible,
button:focus-visible {
    border-radius: 3px;
}


/* ---------- 50. PRINT ---------- */

@media print {
    body,
    #content,
    .mw-body {
        background: white !important;
        color: black !important;
        box-shadow: none !important;
    }

    a,
    a:visited {
        color: black !important;
        text-decoration: underline;
    }

    .vector-header-container,
    #mw-panel,
    #mw-navigation,
    #footer,
    .mw-editsection {
        display: none !important;
    }

    .mw-body {
        border: none !important;
        padding: 0 !important;
    }
}