MediaWiki:Common.css
Внешний вид
Замечание: Возможно, после публикации вам придётся очистить кэш своего браузера, чтобы увидеть изменения.
- Firefox / Safari: Удерживая клавишу Shift, нажмите на панели инструментов Обновить либо нажмите Ctrl+F5 или Ctrl+R (⌘+R на Mac)
- Google Chrome: Нажмите Ctrl+Shift+R (⌘+Shift+R на Mac)
- Edge: Удерживая Ctrl, нажмите Обновить либо нажмите Ctrl+F5
- Opera: Нажмите Ctrl+F5.
:root,
html.skin-vector-2022 {
color-scheme: dark;
--fp-bg: #111610;
--fp-sidebar: #0d110b;
--fp-surface: #1b2219;
--fp-border: #3f473d;
--fp-text: #c2b098;
--fp-muted: #a88b76;
--fp-accent: #9e582a;
--fp-accent-hover: #c47a3a;
--fp-link: #8a9e9b;
--background-color-base: var(--fp-bg);
--background-color-base-fixed: var(--fp-bg);
--background-color-neutral: var(--fp-surface);
--background-color-neutral-subtle: var(--fp-sidebar);
--background-color-interactive: var(--fp-surface);
--background-color-interactive-subtle: var(--fp-surface);
--background-color-button-quiet--hover: var(--fp-surface);
--background-color-button-quiet--active: var(--fp-border);
--background-color-progressive: var(--fp-accent);
--background-color-progressive--hover: var(--fp-accent-hover);
--background-color-progressive--active: #7e451f;
--background-color-input-binary--checked: var(--fp-accent);
--color-base: var(--fp-text);
--color-base-fixed: var(--fp-text);
--color-base--hover: #e0cbb0;
--color-base--subtle: var(--fp-muted);
--color-emphasized: var(--fp-text);
--color-subtle: var(--fp-muted);
--color-progressive: var(--fp-link);
--color-progressive--hover: var(--fp-accent-hover);
--color-progressive--visited: var(--fp-muted);
--border-color-base: var(--fp-border);
--border-color-subtle: var(--fp-border);
--border-color-muted: var(--fp-border);
--border-color-divider: var(--fp-border);
--border-color-progressive: var(--fp-accent);
}
body.skin-vector-2022,
.skin-vector-2022 .mw-page-container,
.skin-vector-2022 .vector-page-container,
.skin-vector-2022 .mw-body,
.skin-vector-2022 .vector-header-container,
.skin-vector-2022 .vector-sticky-header,
.skin-vector-2022 .vector-main-menu-container,
.skin-vector-2022 .vector-main-menu,
.skin-vector-2022 .vector-page-toolbar,
.skin-vector-2022 #mw-panel,
.skin-vector-2022 #vector-toc,
.skin-vector-2022 #vector-appearance,
.skin-vector-2022 .vector-appearance,
.skin-vector-2022 .vector-toc,
.skin-vector-2022 .vector-menu-content,
.skin-vector-2022 .vector-dropdown-content {
background-color: var(--fp-bg);
border-color: var(--fp-border);
color: var(--fp-text);
}
.skin-vector-2022 .vector-header-container,
.skin-vector-2022 .vector-sticky-header,
.skin-vector-2022 .vector-main-menu-container,
.skin-vector-2022 .vector-main-menu,
.skin-vector-2022 #mw-panel {
background-color: var(--fp-sidebar);
}
.skin-vector-2022 .vector-toc,
.skin-vector-2022 .vector-menu-content,
.skin-vector-2022 .vector-dropdown-content,
.skin-vector-2022 .mw-message-box {
background-color: var(--fp-surface);
}
.skin-vector-2022 .mw-body-content,
.skin-vector-2022 .vector-body,
.skin-vector-2022 .vector-page-toolbar,
.skin-vector-2022 .vector-page-toolbar-container {
color: var(--fp-text);
}
.skin-vector-2022 .mw-body-header .firstHeading,
.skin-vector-2022 .mw-body-content h2,
.skin-vector-2022 .mw-body-content h3,
.skin-vector-2022 .mw-body-content h4 {
color: var(--fp-accent-hover);
border-color: var(--fp-border);
}
.skin-vector-2022 .mw-body-content a,
.skin-vector-2022 #mw-panel a,
.skin-vector-2022 .vector-menu a {
color: var(--fp-link);
}
.skin-vector-2022 .mw-body-content a:visited {
color: var(--fp-muted);
}
.skin-vector-2022 .mw-body-content a:hover,
.skin-vector-2022 #mw-panel a:hover,
.skin-vector-2022 .vector-menu a:hover {
color: var(--fp-accent-hover);
}
.skin-vector-2022 pre,
.skin-vector-2022 code,
.skin-vector-2022 .mw-highlight,
.skin-vector-2022 table.wikitable {
background-color: var(--fp-surface);
color: var(--fp-text);
border-color: var(--fp-border);
}
.skin-vector-2022 table.wikitable th {
background-color: var(--fp-sidebar);
color: var(--fp-accent-hover);
}
.skin-vector-2022 input,
.skin-vector-2022 select,
.skin-vector-2022 textarea {
background-color: var(--fp-surface);
color: var(--fp-text);
border-color: var(--fp-border);
}
.page-Заглавная_страница .mw-body-header .firstHeading {
display: none;
}
.fp-home {
width: calc(100% + 24px);
margin: -12px;
border: 0;
border-collapse: separate;
border-spacing: 12px;
background: transparent;
}
.fp-home td {
width: 50%;
padding: 22px 24px;
vertical-align: top;
color: var(--fp-text);
background: var(--fp-surface);
border: 1px solid var(--fp-border);
}
.fp-home .fp-home-hero {
padding: 34px 38px;
background: linear-gradient(115deg, #1b2219 0%, #141a13 70%, #111610 100%);
border: 1px solid var(--fp-border);
border-left: 4px solid var(--fp-accent);
}
.fp-home-kicker {
margin-bottom: 10px;
color: var(--fp-muted);
font-size: 0.78em;
font-weight: 700;
text-transform: uppercase;
}
.fp-home-title {
margin-bottom: 12px;
color: var(--fp-accent-hover);
font-size: 2.25em;
font-weight: 700;
line-height: 1.15;
}
.fp-home-lead {
max-width: 760px;
margin: 0;
color: var(--fp-text);
font-size: 1.08em;
line-height: 1.65;
}
.fp-home-card-kicker {
margin-bottom: 7px;
color: var(--fp-muted);
font-size: 0.76em;
font-weight: 700;
text-transform: uppercase;
}
.fp-home-card-title {
margin-bottom: 10px;
color: var(--fp-accent-hover);
font-size: 1.45em;
font-weight: 700;
}
.fp-home-card p {
line-height: 1.6;
}
.fp-home-links a {
display: inline-block;
margin: 3px 5px 3px 0;
padding: 6px 10px;
color: var(--fp-link);
background: var(--fp-sidebar);
border: 1px solid var(--fp-border);
}
.fp-home-links a:hover {
color: var(--fp-accent-hover);
border-color: var(--fp-accent);
text-decoration: none;
}
.fp-home-note {
color: var(--fp-muted);
font-size: 0.92em;
}
@media (max-width: 768px) {
table.fp-home,
table.fp-home tbody,
table.fp-home tr,
table.fp-home td {
display: block;
width: 100%;
box-sizing: border-box;
}
table.fp-home {
margin: 0;
border-spacing: 0;
}
table.fp-home td {
margin-bottom: 12px;
}
.fp-home .fp-home-hero {
padding: 26px 22px;
}
.fp-home-title {
font-size: 1.8em;
}
}