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

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

Страница интерфейса MediaWiki
Нет описания правки
Нет описания правки
Строка 1: Строка 1:
/* =========================================================
/* =========================================================
   CRYPTOWIKI — MEDIAWIKI COMMON.CSS
   CRYPTOWIKI — COMMON.CSS EXTENSION
   Dark technical interface / Acid Green / Minimalism
   Дополнительные стили интерфейса MediaWiki
  Совместимость: 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');
/* ---------- 36. VECTOR DROPDOWNS ---------- */


 
.vector-dropdown,
/* ---------- 2. DESIGN TOKENS ---------- */
.vector-menu-dropdown {
 
     background: transparent !important;
: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;
}
}


 
.vector-dropdown-label,
/* ---------- 3. GLOBAL RESET ---------- */
.vector-menu-dropdown .vector-menu-heading {
 
     color: var(--cw-muted) !important;
html {
     background: var(--cw-bg) !important;
    scroll-behavior: smooth;
}
}


body,
.vector-dropdown-label:hover,
.mw-page-container,
.vector-menu-dropdown .vector-menu-heading:hover {
.mw-body,
     color: var(--cw-accent) !important;
#content,
#mw-content-container,
#mw-page-base,
#mw-head-base {
    background: var(--cw-bg) !important;
     color: var(--cw-text) !important;
}
}


body {
.vector-dropdown-content,
     font-family: var(--cw-font);
.vector-menu-dropdown .vector-menu-content {
     font-size: 15px;
     background: var(--cw-panel) !important;
     line-height: 1.75;
    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,
     scrollbar-width: thin;
.vector-menu-dropdown .vector-menu-content a {
     scrollbar-color: #39443b var(--cw-bg);
     display: block;
     color: var(--cw-muted) !important;
    border-radius: 4px;
    padding: 8px 12px !important;
}
}


*::-webkit-scrollbar {
.vector-dropdown-content a:hover,
     width: 9px;
.vector-menu-dropdown .vector-menu-content a:hover {
     height: 9px;
     background: var(--cw-accent-soft) !important;
     color: var(--cw-accent) !important;
}
}


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


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


*::-webkit-scrollbar-thumb:hover {
#p-personal,
     background: var(--cw-accent);
.vector-user-links,
.vector-user-menu {
     color: var(--cw-muted) !important;
}
}


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


 
#p-personal a:hover,
/* ---------- 4. BACKGROUND GRID ---------- */
.vector-user-links a:hover,
 
.vector-user-menu a:hover {
body {
     color: var(--cw-accent) !important;
     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 ---------- */
/* ---------- 38. LOGIN / ACCOUNT ---------- */


a,
.mw-htmlform,
a:visited {
.mw-htmlform-field-HTMLTextField,
     color: var(--cw-accent);
.mw-htmlform-field-HTMLTextAreaField,
    text-decoration: none;
.mw-htmlform-field-HTMLSelectField {
    transition:
     color: var(--cw-text);
        color 0.18s ease,
        opacity 0.18s ease;
}
}


a:hover,
.mw-htmlform fieldset {
a:focus {
     background: var(--cw-panel);
     color: var(--cw-accent-hover);
     border: 1px solid var(--cw-line);
     text-decoration: none;
     border-radius: var(--cw-radius);
}
    padding: 20px;
 
a:active {
     opacity: 0.75;
}
 
a.new,
a.new:visited {
    color: var(--cw-danger);
}
}


a.external,
.mw-htmlform legend {
a.extiw {
     color: var(--cw-accent);
     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-family: var(--cw-heading);
     font-weight: 600;
     font-weight: 600;
    letter-spacing: -0.035em;
    line-height: 1.25;
}
}


h1,
.mw-htmlform label {
.firstHeading,
     color: var(--cw-muted);
.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 {
.mw-htmlform input {
    font-size: 1.8rem;
     max-width: 100%;
    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 {
/* ---------- 39. SEARCH RESULTS ---------- */
    font-size: 1.1rem;
}


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


 
.mw-search-result {
/* ---------- 7. HEADER / VECTOR ---------- */
     padding: 16px 0;
 
     border-bottom: 1px solid var(--cw-line);
.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,
.mw-search-result-heading {
.vector-sticky-header {
     font-family: var(--cw-heading);
     border-bottom: 1px solid var(--cw-line) !important;
     font-size: 1.15rem;
     backdrop-filter: blur(16px);
    font-weight: 600;
}
 
.vector-header-container a,
.vector-header a,
.vector-sticky-header a,
#mw-head a {
    color: var(--cw-text);
}
}


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


.vector-header-container .mw-logo,
.mw-search-result-data,
#p-logo {
.searchresult {
     opacity: 0.95;
     color: var(--cw-muted);
}
}


.mw-logo-icon {
.mw-search-result-data {
     filter: none;
     font-family: var(--cw-mono);
}
    font-size: .75rem;
 
.mw-logo-wordmark,
.mw-logo-tagline {
    color: var(--cw-text) !important;
}
}




/* ---------- 8. SEARCH ---------- */
/* ---------- 40. RECENT CHANGES ---------- */


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


.vector-search-box input,
.mw-changeslist-line {
#searchInput,
     padding: 5px 8px;
#searchText,
     border-radius: 4px;
.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,
.mw-changeslist-line:hover {
#searchInput:focus,
     background: var(--cw-accent-soft);
#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,
.mw-plusminus-pos {
input::placeholder {
     color: var(--cw-success);
     color: var(--cw-muted);
}
}


 
.mw-plusminus-neg {
/* ---------- 9. SIDEBAR ---------- */
     color: var(--cw-danger);
 
.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-tag {
#mw-panel {
     background: var(--cw-panel-active);
    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);
     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: 1px solid var(--cw-line);
     border-radius: var(--cw-radius);
     border-radius: 4px;
     padding: clamp(20px, 4vw, 42px) !important;
     padding: 2px 6px;
     margin-top: 20px;
     font-family: var(--cw-mono);
    background: rgba(16, 20, 20, 0.82) !important;
     font-size: .7rem;
     box-shadow: 0 12px 50px rgba(0, 0, 0, 0.12);
}
}


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


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


.mw-parser-output > p:first-of-type {
.mw-pager-navigation-bar,
     margin-top: 0;
.mw-pager-navigation-bar a {
     color: var(--cw-muted);
}
}


.mw-parser-output p {
.mw-pager-navigation-bar a {
     margin: 0.9em 0;
     padding: 5px 9px;
    border-radius: 4px;
}
}


 
.mw-pager-navigation-bar a:hover {
/* ---------- 11. PAGE TABS ---------- */
    color: var(--cw-accent);
 
    background: var(--cw-accent-soft);
.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,
/* ---------- 42. CATEGORY PAGES ---------- */
.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,
.mw-category-generated {
.vector-menu-tabs-legacy a:hover,
     background: transparent;
#p-views a:hover,
#p-namespaces a:hover {
    color: var(--cw-accent) !important;
     background: var(--cw-accent-soft) !important;
}
}


.vector-menu-tabs .selected a,
.mw-category-group {
.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);
     background: var(--cw-panel);
     border: 1px solid var(--cw-line);
     border: 1px solid var(--cw-line);
     border-radius: var(--cw-radius);
     border-radius: var(--cw-radius);
     overflow: hidden;
     padding: 15px 20px;
    margin: 15px 0;
}
}


.mw-parser-output th {
.mw-category-group h3 {
    background: #171e19;
     color: var(--cw-accent);
     color: var(--cw-accent);
     font-family: var(--cw-heading);
     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);
     border-bottom: 1px solid var(--cw-line);
    padding-bottom: 8px;
}
}


.mw-parser-output tr:last-child td {
.mw-category-group ul {
     border-bottom: none;
    columns: 2;
     column-gap: 30px;
}
}


.mw-parser-output tr:nth-child(even) td {
@media (max-width: 600px) {
    background: rgba(255, 255, 255, 0.018);
    .mw-category-group ul {
        columns: 1;
    }
}
}


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


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


/* ---------- 14. CODE / SYNTAX ---------- */
.fullImageLink,
 
.filehistory,
code,
.fileinfo {
tt,
     color: var(--cw-muted);
.mw-code,
.mw-highlight,
pre,
.sourceCode {
     font-family: var(--cw-mono) !important;
}
}


code,
.filehistory {
tt {
     background: var(--cw-panel);
     color: var(--cw-accent);
     border: 1px solid var(--cw-line);
    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);
     border-radius: var(--cw-radius);
     padding: 18px !important;
     padding: 15px;
    overflow-x: auto;
    line-height: 1.65;
}
}


pre code {
.filehistory th,
    background: transparent;
.filehistory td {
     border: none;
     border-color: var(--cw-line);
    padding: 0;
    color: inherit;
}
}


.mw-highlight .k,
.mw-filepage-other-resolutions {
.mw-highlight .kd,
     color: var(--cw-muted);
.mw-highlight .kn {
     color: #c4f36b;
}
}


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


.mw-highlight .c,
/* ---------- 44. COLLAPSIBLE ELEMENTS ---------- */
.mw-highlight .c1,
.mw-highlight .cm {
    color: #78857a;
}


 
.mw-collapsible {
/* ---------- 15. BLOCKQUOTES ---------- */
     border: 1px solid var(--cw-line);
 
     border-radius: var(--cw-radius);
blockquote {
     margin: 1.5em 0;
     padding: 15px 20px;
     background: var(--cw-panel);
     background: var(--cw-panel);
     border-left: 3px solid var(--cw-accent);
     padding: 12px 16px;
    border-radius: 0 var(--cw-radius) var(--cw-radius) 0;
    color: var(--cw-muted);
}
}


blockquote p:first-child {
.mw-collapsible-toggle {
    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);
     font-family: var(--cw-mono);
    font-size: .8rem;
}
}


 
.mw-collapsible-toggle a {
/* ---------- 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;
     color: var(--cw-accent) !important;
}
}


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


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


/* ---------- 18. NOTICE BOXES ---------- */
.mw-tooltip,
 
.oo-ui-popupWidget-popup {
.mbox,
.ambox,
.tmbox,
.imbox,
.cmbox,
.fmbox,
.messagebox {
     background: var(--cw-panel) !important;
     background: var(--cw-panel) !important;
     color: var(--cw-text) !important;
     color: var(--cw-text) !important;
     border: 1px solid var(--cw-line) !important;
     border: 1px solid var(--cw-line) !important;
     border-left: 3px solid var(--cw-accent) !important;
     border-radius: var(--cw-radius) !important;
     border-radius: var(--cw-radius);
     box-shadow: 0 10px 30px rgba(0, 0, 0, .3) !important;
    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 ---------- */
/* ---------- 46. MODALS ---------- */


.catlinks {
.oo-ui-window-frame,
    background: var(--cw-panel) !important;
.oo-ui-dialog,
    border: 1px solid var(--cw-line) !important;
.oo-ui-processDialog-content {
    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;
     background: var(--cw-panel) !important;
     color: var(--cw-text) !important;
     color: var(--cw-text) !important;
     border: 1px solid var(--cw-line) !important;
     border: 1px solid var(--cw-line) !important;
     border-radius: var(--cw-radius-small) !important;
     border-radius: var(--cw-radius) !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 {
.oo-ui-window-head,
    color: var(--cw-muted);
.oo-ui-dialog-content {
}
 
 
/* ---------- 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;
     background: var(--cw-panel) !important;
     color: var(--cw-text) !important;
     color: var(--cw-text) !important;
    border-color: var(--cw-line) !important;
}
}


.wikiEditor-ui textarea,
.oo-ui-window-head {
#wpTextbox1,
     border-bottom: 1px solid var(--cw-line) !important;
#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 {
/* ---------- 47. NOTICES AND WARNINGS ---------- */
    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 {
.mw-message-box {
    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;
     background: var(--cw-panel) !important;
     color: var(--cw-text) !important;
     color: var(--cw-text) !important;
     border: 1px solid var(--cw-line) !important;
     border: 1px solid var(--cw-line) !important;
     border-radius: var(--cw-radius);
     border-radius: var(--cw-radius);
    padding: 14px 18px;
}
}


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


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


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


 
.mw-message-box-info {
/* ---------- 27. IMAGES / GALLERIES ---------- */
     border-left: 3px solid var(--cw-info) !important;
 
.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,
/* ---------- 48. TAGS / STATUS LABELS ---------- */
.mw-file-description {
    color: var(--cw-muted);
}


 
.mw-tag,
/* ---------- 28. HORIZONTAL RULE ---------- */
.mw-rcfilters-ui-chip,
 
.oo-ui-labelElement-label {
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-family: var(--cw-mono);
    font-size: 0.75rem;
}
}


.mw-editsection a {
.mw-rcfilters-ui-chip {
     color: var(--cw-accent);
     background: var(--cw-panel) !important;
}
     color: var(--cw-accent) !important;
 
     border: 1px solid var(--cw-line) !important;
 
    border-radius: 4px !important;
/* ---------- 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 ---------- */
/* ---------- 49. ACCESSIBILITY ---------- */
 
#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,
:focus-visible {
#p-personal a:hover {
     outline: 2px solid var(--cw-accent) !important;
     color: var(--cw-accent);
    outline-offset: 3px;
}
}


 
a:focus-visible,
/* ---------- 32. ANIMATIONS ---------- */
button:focus-visible {
 
     border-radius: 3px;
@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 ---------- */
/* ---------- 50. PRINT ---------- */


@media screen and (max-width: 900px) {
@media print {
    body,
    #content,
     .mw-body {
     .mw-body {
         padding: 22px !important;
         background: white !important;
         margin-top: 10px;
         color: black !important;
        box-shadow: none !important;
     }
     }


     .mw-parser-output table {
     a,
        display: block;
    a:visited {
         overflow-x: auto;
         color: black !important;
    }
         text-decoration: underline;
 
    .infobox {
         max-width: 100%;
        margin: 0 0 20px 0;
        float: none;
     }
     }
}


@media screen and (max-width: 600px) {
    .vector-header-container,
     body {
    #mw-panel,
        font-size: 14px;
    #mw-navigation,
         background-size: 32px 32px;
     #footer,
    .mw-editsection {
         display: none !important;
     }
     }


     .mw-body {
     .mw-body {
         border-left: none;
         border: none !important;
         border-right: none;
         padding: 0 !important;
        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);
}
}

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

/* =========================================================
   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;
    }
}
Последнее изменение