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

Версия от 10:47, 27 сентября 2026

: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;
  }
}