Перейти к содержимому страницы
Переключить меню
Переключить меню настроек
Переключить персональное меню
Вы не представились системе
Ваш IP-адрес будет виден всем, если вы внесёте какие-либо изменения.

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

Страница интерфейса MediaWiki
Нет описания правки
Нет описания правки
Строка 1: Строка 1:
/* =========================================================
  CRYPTOWIKI — MEDIAWIKI COMMON.CSS
  Dark technical interface / Acid Green / Minimalism
  Совместимость: Vector 2022, Vector Legacy, MonoBook, Timeless
  ========================================================= */


/* =========================================
/* ---------- 1. FONTS ---------- */
  CRYPTO WIKI — GLOBAL HOMEPAGE STYLES
  ========================================= */


.crypto-home {
@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');
    --crypto-bg: #f5f7fa;
    --crypto-card: #ffffff;
    --crypto-text: #172033;
    --crypto-muted: #758095;
    --crypto-accent: #526ee8;
    --crypto-border: #e8ebf1;


     color: var(--crypto-text);
 
     max-width: 1180px;
/* ---------- 2. DESIGN TOKENS ---------- */
     margin: 0 auto;
 
     padding: 10px 0 40px;
:root {
     font-family: inherit;
     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;
}
}


.crypto-home * {
 
     box-sizing: border-box;
/* ---------- 3. GLOBAL RESET ---------- */
 
html {
     background: var(--cw-bg) !important;
    scroll-behavior: smooth;
}
}


.crypto-home a {
body,
     text-decoration: none !important;
.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;
}
}


.crypto-home a:visited {
body {
     color: inherit;
    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;
}
}


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


.crypto-hero {
*::-webkit-scrollbar-thumb {
     position: relative;
     background: #39443b;
     overflow: hidden;
     border: 2px solid var(--cw-bg);
    min-height: 340px;
     border-radius: 10px;
    padding: 55px 60px;
    margin-bottom: 65px;
     border-radius: 14px;
    background: #17243b;
    color: white;
}
}


.crypto-hero::before {
*::-webkit-scrollbar-thumb:hover {
    content: "";
     background: var(--cw-accent);
    position: absolute;
    width: 390px;
    height: 390px;
    right: -100px;
    top: -130px;
     border: 1px solid rgba(255,255,255,.12);
    border-radius: 50%;
    box-shadow:
        0 0 0 35px rgba(255,255,255,.025),
        0 0 0 75px rgba(255,255,255,.025);
}
}


.crypto-hero::after {
::selection {
     content: "01010110 10100101 11001010";
     background: var(--cw-accent);
    position: absolute;
     color: #090b0b;
    right: 35px;
    bottom: 25px;
    color: rgba(255,255,255,.12);
    font-family: monospace;
    font-size: 11px;
     letter-spacing: 4px;
}
}


.crypto-hero-label,
 
.crypto-eyebrow {
/* ---------- 4. BACKGROUND GRID ---------- */
     font-size: 10px;
 
    font-weight: 700;
body {
     letter-spacing: 2px;
     background-image:
     color: var(--crypto-accent);
        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;
}
}


.crypto-hero-label {
 
     color: #91a5ff;
/* ---------- 5. LINKS ---------- */
 
a,
a:visited {
     color: var(--cw-accent);
    text-decoration: none;
    transition:
        color 0.18s ease,
        opacity 0.18s ease;
}
}


.crypto-hero-title {
a:hover,
    position: relative;
a:focus {
     z-index: 1;
     color: var(--cw-accent-hover);
    max-width: 700px;
     text-decoration: none;
    margin: 22px 0 15px;
    font-size: clamp(30px, 4vw, 49px);
    line-height: 1.15;
    font-weight: 750;
     letter-spacing: -1.7px;
}
}


.crypto-hero-description {
a:active {
     position: relative;
     opacity: 0.75;
    z-index: 1;
    max-width: 590px;
    color: #bac5d7;
    font-size: 15px;
    line-height: 1.8;
}
}


.crypto-hero-actions,
a.new,
.crypto-bottom-actions {
a.new:visited {
     display: flex;
     color: var(--cw-danger);
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}
}


.crypto-button {
a.external,
     display: inline-flex;
a.extiw {
    align-items: center;
     color: var(--cw-accent);
    justify-content: center;
    gap: 12px;
    min-height: 43px;
    padding: 0 18px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 650;
    transition: .2s ease;
}
}


.crypto-button-primary {
.mw-parser-output a.external::after {
     background: #647df1;
     opacity: 0.45;
    color: white !important;
}
}


.crypto-button-primary:hover {
 
     background: #7d92ff;
/* ---------- 6. HEADINGS ---------- */
     transform: translateY(-2px);
 
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;
}
}


.crypto-button-secondary {
h1,
     border: 1px solid rgba(255,255,255,.23);
.firstHeading,
     color: white !important;
.mw-first-heading {
    font-size: clamp(2rem, 4vw, 3rem);
     border-bottom: 1px solid var(--cw-line);
    padding-bottom: 0.35em;
     margin-bottom: 0.8em;
}
}


.crypto-button-secondary:hover {
h2 {
     background: rgba(255,255,255,.1);
    font-size: 1.8rem;
    margin-top: 1.8em;
    padding-bottom: 0.35em;
     border-bottom: 1px solid var(--cw-line);
}
}


.crypto-hero-decoration {
h3 {
    position: absolute;
     font-size: 1.35rem;
    right: 55px;
     margin-top: 1.5em;
    bottom: 75px;
    color: rgba(255,255,255,.23);
     font: 11px/2 monospace;
    letter-spacing: 2px;
     text-align: right;
}
}


/* Sections */
h4 {
    font-size: 1.1rem;
}


.crypto-section {
.mw-parser-output h2 .mw-headline,
     margin-bottom: 65px;
.mw-parser-output h3 .mw-headline {
     color: var(--cw-text);
}
}


.crypto-section-heading {
 
    display: flex;
/* ---------- 7. HEADER / VECTOR ---------- */
    justify-content: space-between;
 
     align-items: end;
.vector-header-container,
     gap: 20px;
.vector-header,
     margin-bottom: 25px;
.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;
}
}


.crypto-section-title {
.vector-header-container,
     margin-top: 8px;
.vector-sticky-header {
    font-size: 26px;
     border-bottom: 1px solid var(--cw-line) !important;
    font-weight: 750;
     backdrop-filter: blur(16px);
     letter-spacing: -.8px;
}
}


.crypto-section-note {
.vector-header-container a,
     color: var(--crypto-muted);
.vector-header a,
    font: 10px monospace;
.vector-sticky-header a,
    letter-spacing: 1px;
#mw-head a {
     color: var(--cw-text);
}
}


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


.crypto-grid {
.vector-header-container .mw-logo,
    display: grid;
#p-logo {
    grid-template-columns: repeat(3, minmax(0, 1fr));
     opacity: 0.95;
     gap: 15px;
}
}


.crypto-card {
.mw-logo-icon {
     position: relative;
     filter: none;
    display: flex;
}
    flex-direction: column;
 
    min-height: 230px;
.mw-logo-wordmark,
     padding: 25px;
.mw-logo-tagline {
    overflow: hidden;
     color: var(--cw-text) !important;
    border: 1px solid var(--crypto-border);
}
    border-radius: 10px;
 
    background: var(--crypto-card);
 
     color: var(--crypto-text) !important;
/* ---------- 8. SEARCH ---------- */
    transition: .22s ease;
 
.vector-search-box,
#p-search,
#searchform,
.mw-search-form,
.mw-search-form-wrapper {
     color: var(--cw-text);
}
}


.crypto-card:hover {
.vector-search-box input,
     transform: translateY(-4px);
#searchInput,
     border-color: #b9c6ff;
#searchText,
     box-shadow: 0 12px 35px rgba(35,55,100,.08);
.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;
}
}


.crypto-card-number {
.vector-search-box input:focus,
    position: absolute;
#searchInput:focus,
    top: 20px;
#searchText:focus,
     right: 22px;
input[type="search"]:focus {
     color: #aab3c3;
     border-color: var(--cw-accent) !important;
     font: 11px monospace;
     outline: none !important;
     box-shadow: 0 0 0 3px var(--cw-accent-soft);
}
}


.crypto-card-icon {
.vector-search-box input::placeholder,
    display: flex;
input::placeholder {
    align-items: center;
     color: var(--cw-muted);
    justify-content: center;
    width: 43px;
     height: 43px;
    margin-bottom: 19px;
    border-radius: 9px;
    background: #edf0ff;
    color: #526ee8;
    font-size: 25px;
}
}


.crypto-card-title {
 
     margin-bottom: 10px;
/* ---------- 9. SIDEBAR ---------- */
     font-size: 16px;
 
    font-weight: 750;
.vector-main-menu,
.vector-main-menu-container,
#mw-panel,
#mw-panel .portal,
#mw-panel .portal .body {
     background: transparent !important;
     color: var(--cw-text);
}
}


.crypto-card-description {
.vector-main-menu,
     color: var(--crypto-muted);
#mw-panel {
    font-size: 12px;
     border-right: 1px solid var(--cw-line);
    line-height: 1.7;
}
}


.crypto-card-footer {
.vector-main-menu .vector-menu-heading,
     display: flex;
#mw-panel h3,
    justify-content: space-between;
#mw-panel .portal h3 {
    margin-top: auto;
     color: var(--cw-muted) !important;
     padding-top: 20px;
     font-family: var(--cw-mono);
    color: var(--crypto-accent);
     font-size: 0.72rem;
     font-size: 9px;
     font-weight: 500;
     font-weight: 750;
     letter-spacing: 0.12em;
     letter-spacing: 1px;
    text-transform: uppercase;
}
}


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


.crypto-feature-grid {
.vector-main-menu a:hover,
     display: grid;
#mw-panel .portal a:hover {
    grid-template-columns: 1fr 1fr;
     color: var(--cw-accent);
     gap: 16px;
     background: var(--cw-accent-soft);
    margin-bottom: 65px;
}
}


.crypto-feature {
.vector-main-menu .vector-menu-content-list,
    position: relative;
#mw-panel .portal .body {
    min-height: 240px;
     padding: 5px 0;
    padding: 32px;
    border: 1px solid var(--crypto-border);
    border-radius: 10px;
     background: white;
}
}


.crypto-feature-title {
#mw-panel .portal {
     max-width: 390px;
     border: none;
     margin: 24px 0 12px;
     margin-bottom: 1.5em;
    font-size: 23px;
    font-weight: 750;
    line-height: 1.3;
}
}


.crypto-feature-description {
 
    max-width: 420px;
/* ---------- 10. PAGE CONTENT ---------- */
     color: var(--crypto-muted);
 
    font-size: 13px;
#content,
    line-height: 1.8;
.mw-body,
.mw-content-container {
     color: var(--cw-text);
}
}


.crypto-text-link {
.mw-body {
     display: inline-block;
     border: 1px solid var(--cw-line);
    border-radius: var(--cw-radius);
    padding: clamp(20px, 4vw, 42px) !important;
     margin-top: 20px;
     margin-top: 20px;
     color: var(--crypto-accent) !important;
    background: rgba(16, 20, 20, 0.82) !important;
     font-size: 12px;
    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;
     font-weight: 700;
}
}


.crypto-feature-dark {
#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;
     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: none;
     background: #202e49;
     border-bottom: 1px solid var(--cw-line);
    color: white;
}
}


.crypto-feature-dark .crypto-eyebrow {
.mw-parser-output tr:last-child td {
     color: #9aafff;
     border-bottom: none;
}
}


.crypto-feature-dark .crypto-feature-description {
.mw-parser-output tr:nth-child(even) td {
     color: #bdc8d9;
     background: rgba(255, 255, 255, 0.018);
}
}


.crypto-text-link-light {
.mw-parser-output tr:hover td {
     color: #a9baff !important;
     background: rgba(196, 243, 107, 0.035);
}
}


.crypto-random-symbol {
 
    position: absolute;
/* ---------- 14. CODE / SYNTAX ---------- */
    top: 25px;
 
    right: 30px;
code,
    color: rgba(255,255,255,.13);
tt,
     font-size: 90px;
.mw-code,
.mw-highlight,
pre,
.sourceCode {
     font-family: var(--cw-mono) !important;
}
}


/* Recent changes */
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;
}


.crypto-recent {
pre,
     padding: 20px;
.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;
     overflow-x: auto;
     border: 1px solid var(--crypto-border);
    line-height: 1.65;
     border-radius: 10px;
}
     background: white;
 
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;
}
}


.crypto-recent ul {
input:focus,
     margin: 0;
textarea:focus,
     padding-left: 20px;
select:focus {
     outline: none !important;
    border-color: var(--cw-accent) !important;
     box-shadow: 0 0 0 3px var(--cw-accent-soft);
}
}


.crypto-recent li {
textarea {
    padding: 7px 0;
    color: var(--crypto-muted);
    font-size: 12px;
     line-height: 1.6;
     line-height: 1.6;
}
}


.crypto-recent a {
label {
     color: #526ee8;
     color: var(--cw-muted);
}
}


/* Bottom */


.crypto-bottom {
/* ---------- 22. EDITOR ---------- */
     display: flex;
 
     align-items: center;
.wikiEditor-ui,
     justify-content: space-between;
.wikiEditor-ui .wikiEditor-ui-top,
     gap: 25px;
.wikiEditor-ui .wikiEditor-ui-toolbar,
     padding: 35px;
.wikiEditor-ui .wikiEditor-ui-text,
     border-radius: 10px;
.wikiEditor-ui .wikiEditor-ui-bottom {
     background: #edf0f8;
     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;
}
}


.crypto-bottom-title {
#p-cactions li,
     max-width: 450px;
#p-personal li {
     margin-top: 10px;
     background: var(--cw-panel);
     font-size: 21px;
     border: 1px solid var(--cw-line);
    font-weight: 750;
     border-radius: var(--cw-radius-small);
}
}


.crypto-bottom-actions {
#p-cactions a,
     margin-top: 0;
#p-personal a {
     color: var(--cw-muted);
}
}


.crypto-bottom .crypto-button-secondary {
#p-cactions a:hover,
    border-color: #cbd1de;
#p-personal a:hover {
     color: #28344a !important;
     color: var(--cw-accent);
}
}


/* Responsive */


@media (max-width: 850px) {
/* ---------- 32. ANIMATIONS ---------- */
    .crypto-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


     .crypto-hero-decoration {
@media (prefers-reduced-motion: no-preference) {
         display: none;
    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;
     }
     }
}
}


@media (max-width: 600px) {
 
     .crypto-hero {
/* ---------- 33. RESPONSIVE ---------- */
         padding: 35px 25px;
 
        min-height: auto;
@media screen and (max-width: 900px) {
         margin-bottom: 45px;
     .mw-body {
         padding: 22px !important;
         margin-top: 10px;
     }
     }


     .crypto-hero-title {
     .mw-parser-output table {
         font-size: 32px;
         display: block;
        overflow-x: auto;
     }
     }


     .crypto-grid,
     .infobox {
    .crypto-feature-grid {
        max-width: 100%;
         grid-template-columns: 1fr;
        margin: 0 0 20px 0;
         float: none;
     }
     }
}


     .crypto-card {
@media screen and (max-width: 600px) {
         min-height: 210px;
     body {
        font-size: 14px;
         background-size: 32px 32px;
     }
     }


     .crypto-section-title {
     .mw-body {
         font-size: 22px;
        border-left: none;
        border-right: none;
        border-radius: 0;
        padding: 16px !important;
         margin-top: 0;
     }
     }


     .crypto-section-note {
    h1,
         display: none;
    .firstHeading,
     .mw-first-heading {
         font-size: 2rem;
     }
     }


     .crypto-bottom {
     h2 {
         align-items: flex-start;
         font-size: 1.5rem;
        flex-direction: column;
        padding: 25px;
     }
     }


     .crypto-bottom-actions {
    #toc,
         flex-direction: column;
     .toc {
        width: 100%;
         padding: 12px;
     }
     }


     .crypto-bottom-actions .crypto-button {
     .mw-parser-output th,
         width: 100%;
    .mw-parser-output td {
         padding: 9px 10px;
     }
     }
}
}


.crypto-card {
 
     color: var(--crypto-text);
/* ---------- 34. DARK THEME ENFORCEMENT ---------- */
     text-decoration: none;
 
.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);
}
}


.crypto-card .crypto-card-title a {
.mw-parser-output .error {
     color: inherit;
     color: var(--cw-danger);
    text-decoration: none;
}
}


.crypto-card:hover .crypto-card-title a {
.mw-parser-output .success {
     color: var(--crypto-accent);
     color: var(--cw-success);
}
}

Версия от 22:29, 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);
}
Последнее изменение