MediaWiki:Common.css: различия между версиями
Нет описания правки |
Нет описания правки |
||
| (не показана 21 промежуточная версия этого же участника) | |||
| Строка 6: | Строка 6: | ||
*/ | */ | ||
/* | /* Zet+Compan story box — fixed width behavior */ | ||
. | .zc-story-box { | ||
display: block; | |||
/* КЛЮЧЕВОЕ */ | |||
max-width: 720px; /* предел ширины */ | |||
width: fit-content; /* подстраивается под текст */ | |||
/* чтобы не лез под инфобокс */ | |||
clear: left; /* не трогаем правый float */ | |||
margin: 22px 0; | |||
padding: 20px 22px; | |||
background: | |||
linear-gradient(180deg, rgba(24,24,24,0.96), rgba(10,10,10,0.96)); | |||
border: 1px solid rgba(242, 207, 0, 0.32); | |||
border-left: 5px solid #f2cf00; | |||
border-radius: 16px; | |||
color: #d8d8d8; | |||
line-height: 1.75; | |||
box-shadow: 0 14px 36px rgba(0,0,0,0.35); | |||
} | |||
.zc-story-title { | |||
margin-bottom: 12px; | |||
color: #ffe14a; | |||
font-family: var(--font-family-heading, sans-serif); | |||
font-size: 1.15rem; | |||
font-weight: 800; | |||
text-transform: uppercase; | |||
letter-spacing: 0.08em; | |||
} | } | ||
/* ===== | /* =========================== | ||
ZET+COMPAN FULL WIDTH ARTICLE CONTENT | |||
=========================== */ | |||
/* | /* Отключаем ограничение ширины Vector 2022 */ | ||
. | html.vector-feature-limited-width-clientpref-1, | ||
html.vector-feature-limited-width-content-enabled, | |||
body.skin-vector { | |||
--max-width-content-container: none !important; | |||
--max-width-page-container: none !important; | |||
} | } | ||
/* | /* Вся карточка страницы */ | ||
.mw- | body > .mw-page-container, | ||
body > .mw-page-container > .mw-page-container-inner, | |||
.mw-content-container, | |||
#content.mw-body, | |||
.mw-body { | |||
width: 100% !important; | |||
max-width: none !important; | |||
} | } | ||
/* | /* Главное: растягиваем bodyContent и сам mw-content-text */ | ||
.mw- | #bodyContent, | ||
#mw-content-text, | |||
#mw-content-text.mw-body-content, | |||
#mw-content-text > .mw-content-ltr.mw-parser-output, | |||
#mw-content-text > .mw-parser-output, | |||
.mw-parser-output { | |||
width: 100% !important; | |||
max-width: none !important; | |||
margin-left: 0 !important; | |||
margin-right: 0 !important; | |||
box-sizing: border-box !important; | |||
} | |||
/* Заголовок и панель вкладок тоже на всю ширину */ | |||
.mw-body-header, | |||
.vector-page-titlebar, | |||
.vector-page-toolbar, | |||
.vector-page-toolbar-container, | |||
.vector-body-before-content, | |||
#contentSub { | |||
width: 100% !important; | |||
max-width: none !important; | |||
margin-left: 0 !important; | |||
margin-right: 0 !important; | |||
} | |||
/* Убираем пустые боковые колонки Vector */ | |||
.vector-column-start, | |||
.vector-column-end { | |||
display: none !important; | |||
} | |||
/* Принудительно заставляем главный контент занять всю сетку */ | |||
#content.mw-body { | |||
display: block !important; | |||
} | |||
/* Инфобокс остаётся справа */ | |||
.mw-body-content .zc-infobox { | |||
float: right !important; | |||
clear: right !important; | |||
width: 380px !important; | |||
max-width: 380px !important; | |||
margin: 0 0 24px 28px !important; | |||
} | } | ||
/* =========================== | /* =========================== | ||
ZET+COMPAN WIDER PAGE CONTAINER | |||
=========================== */ | =========================== */ | ||
. | body > div.mw-page-container { | ||
max-width: 95vw !important; | |||
width: 95vw !important; | |||
margin-left: auto !important; | |||
margin-right: auto !important; | |||
} | } | ||
/* | /* =========================== | ||
ZET+COMPAN EPISODE CHRONOLOGY — CLEAN VERSION | |||
. | =========================== */ | ||
.zc-episode-chronology { | |||
padding: 0 !important; | |||
background: #0b0b0b !important; | |||
} | } | ||
.zc-episode-chronology-grid { | |||
. | display: grid; | ||
grid-template-columns: 1fr 1fr 1fr; | |||
width: 100%; | |||
background: #0b0b0b; | |||
} | } | ||
.zc-episode-chronology-cell { | |||
. | min-height: 74px; | ||
padding: 12px 10px; | |||
background | text-align: center; | ||
background: transparent !important; | |||
border- | border: none !important; | ||
border-right: 1px solid rgba(255, 255, 255, 0.14) !important; | |||
} | } | ||
. | .zc-episode-chronology-cell:last-child { | ||
border-right: none !important; | |||
border- | |||
} | } | ||
. | .zc-episode-chronology-label { | ||
margin-bottom: 7px; | |||
color: | color: #f2cf00; | ||
font-size: 0. | font-size: 0.68rem; | ||
text- | font-weight: 800; | ||
text-transform: uppercase; | |||
letter-spacing: 0.08em; | |||
} | } | ||
.zc-episode-chronology-link { | |||
color: #dcdcdc; | |||
font-size: 0.82rem; | |||
font-weight: 700; | |||
line-height: 1.25; | |||
word-break: break-word; | |||
font-size: 0.82rem | |||
font-weight: | |||
} | } | ||
. | /* Ссылки внутри хронологии */ | ||
. | .zc-episode-chronology-link a { | ||
color: #ffe14a !important; | |||
border-bottom: none !important; | |||
text-decoration: none !important; | |||
} | |||
.zc-episode-chronology-link a:hover { | |||
color: #fff2a0 !important; | |||
text-decoration: none !important; | |||
} | } | ||
/* | /* Только текущая серия подсвечена */ | ||
. | .zc-episode-current { | ||
background: | |||
radial-gradient(circle at top, rgba(242, 207, 0, 0.16), transparent 65%), | |||
linear-gradient(180deg, rgba(242, 207, 0, 0.08), rgba(0, 0, 0, 0)) !important; | |||
} | } | ||
. | .zc-episode-current .zc-episode-chronology-link { | ||
. | color: #ffe14a; | ||
} | } | ||
/* | /* Боковые серии без подсветки */ | ||
. | .zc-episode-previous, | ||
. | .zc-episode-next { | ||
background | background: transparent !important; | ||
box-shadow: none !important; | |||
} | } | ||
/* | /* Если ссылка красная, потому что страницы ещё нет */ | ||
. | .zc-episode-chronology-link a.new { | ||
color: #e55a4f !important; | |||
color: | |||
} | } | ||
/* | /* Мобильная версия */ | ||
. | @media (max-width: 720px) { | ||
.zc-episode-chronology-grid { | |||
grid-template-columns: 1fr; | |||
} | |||
.zc-episode-chronology-cell { | |||
border-right: none !important; | |||
border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important; | |||
} | |||
.zc-episode-chronology-cell:last-child { | |||
border-bottom: none !important; | |||
} | |||
} | } | ||
. | /* Инфобокс серии сериала */ | ||
.zc-infobox-title { | |||
text-align: center; | |||
font-size: 21px; | |||
font-weight: 700; | |||
line-height: 1.2; | |||
margin-bottom: 6px; | |||
color: #f3d27a; | |||
} | } | ||
.zc-infobox-subtitle { | |||
. | text-align: center; | ||
font-size: 13px; | |||
color: #bdb7a5; | |||
margin-bottom: 12px; | |||
font-style: italic; | |||
} | |||
.zc-infobox-caption { | |||
text-align: center; | |||
font-size: 12px; | |||
color: #aaa; | |||
margin-top: 6px; | |||
} | |||
.zc-infobox-table { | |||
width: 100%; | |||
border-collapse: collapse; | |||
font-size: 14px; | |||
} | } | ||
. | .zc-infobox-table th, | ||
. | .zc-infobox-table td { | ||
padding: 7px 4px; | |||
vertical-align: top; | |||
border-top: 1px solid rgba(255, 255, 255, 0.08); | |||
} | } | ||
. | .zc-infobox-table th { | ||
width: 42%; | |||
text-align: left; | |||
color: #d6b25e; | |||
font-weight: 600; | |||
} | } | ||
.zc-infobox-table td { | |||
. | color: #e8e8e8; | ||
} | } | ||
@media (max-width: 720px) { | |||
. | .zc-infobox { | ||
float: none; | |||
width: auto; | |||
margin: 0 0 18px 0; | |||
} | |||
} | } | ||
/* | /* Скрыть заголовок только на главной странице */ | ||
.page-Заглавная_страница .firstHeading { | |||
display: none !important; | |||
} | } | ||
/* ===== | /* ===== Zet+Compan Custom Logo ===== */ | ||
/* =========================== | /* Скрываем стандартную иконку */ | ||
.mw-logo-icon { | |||
display: none !important; | |||
} | |||
/* Контейнер логотипа */ | |||
.mw-logo { | |||
display: flex; | |||
align-items: center; | |||
gap: 10px; | |||
} | |||
/* Подставляем свой логотип */ | |||
.mw-logo::before { | |||
content: ""; | |||
display: inline-block; | |||
width: 48px; | |||
height: 48px; | |||
background-image: url("/images/logo.svg"); | |||
background-size: contain; | |||
background-repeat: no-repeat; | |||
background-position: center; | |||
filter: drop-shadow(0 0 6px rgba(242, 207, 0, 0.25)); | |||
} | |||
/* =========================== | |||
ИНФОБОКС — ПОЛНОМЕТРАЖНЫЕ ФИЛЬМЫ | |||
=========================== */ | =========================== */ | ||
.pi-europa .pi-border-color, | |||
.pi-theme-film .pi-border-color { | |||
border-color: var(--zc-border-light) !important; | |||
} | |||
/* Основной контейнер */ | |||
.pi-europa .pi-background, | |||
.pi-theme-film .pi-background { | |||
-- | background-color: var(--zc-dark-2) !important; | ||
- | border: 1px solid var(--zc-border-light) !important; | ||
border-radius: 14px !important; | |||
overflow: hidden; | |||
-- | } | ||
/* Заголовок (название фильма) */ | |||
-- | .pi-europa .pi-title, | ||
- | .pi-theme-film .pi-title { | ||
- | background: linear-gradient(135deg, var(--zc-dark-3), var(--zc-dark-2)) !important; | ||
color: var(--zc-yellow) !important; | |||
-- | font-family: var(--font-family-heading) !important; | ||
-- | font-size: 1.35rem !important; | ||
font-weight: 700 !important; | |||
text-align: center !important; | |||
padding: 16px 20px !important; | |||
border-bottom: 1px solid var(--zc-border-light) !important; | |||
letter-spacing: -0.01em !important; | |||
-- | } | ||
/* Изображение (постер) */ | |||
- | .pi-europa .pi-image, | ||
-- | .pi-theme-film .pi-image { | ||
background-color: var(--zc-dark-3) !important; | |||
padding: 12px !important; | |||
border-bottom: 1px solid var(--zc-border) !important; | |||
} | |||
.pi-europa .pi-image-thumbnail, | |||
.pi-theme-film .pi-image-thumbnail { | |||
border-radius: 8px !important; | |||
border: 1px solid var(--zc-border) !important; | |||
} | |||
.pi-europa .pi-image-caption, | |||
.pi-theme-film .pi-image-caption { | |||
color: var(--color-muted) !important; | |||
font-size: 0.78rem !important; | |||
text-align: center !important; | |||
margin-top: 6px !important; | |||
} | |||
- | |||
- | |||
- | |||
/* Заголовки секций (Жанр, Создатели и т.д.) */ | |||
.pi-europa .pi-header, | |||
.pi-theme-film .pi-header { | |||
background-color: var(--zc-dark-3) !important; | |||
color: var(--zc-yellow) !important; | |||
font-family: var(--font-family-heading) !important; | |||
-- | font-size: 0.82rem !important; | ||
- | font-weight: 600 !important; | ||
text-transform: uppercase !important; | |||
- | letter-spacing: 0.08em !important; | ||
- | padding: 8px 16px !important; | ||
- | border-bottom: 1px solid var(--zc-border) !important; | ||
border-top: 1px solid var(--zc-border) !important; | |||
} | |||
.pi-europa .pi-header:first-of-type, | |||
.pi-theme-film .pi-header:first-of-type { | |||
border-top: none !important; | |||
} | |||
/* Строки данных */ | |||
.pi-europa .pi-data, | |||
- | .pi-theme-film .pi-data { | ||
border-bottom: 1px solid var(--zc-border) !important; | |||
padding: 0 !important; | |||
} | |||
.pi-europa .pi-data:last-child, | |||
.pi-theme-film .pi-data:last-child { | |||
border-bottom: none !important; | |||
- | } | ||
/* Ярлык (Название поля слева) */ | |||
.pi-europa .pi-data-label, | |||
.pi-theme-film .pi-data-label { | |||
--zc- | background-color: var(--zc-dark-3) !important; | ||
-- | color: var(--color-subtle) !important; | ||
-- | font-family: var(--font-family-base) !important; | ||
- | font-size: 0.82rem !important; | ||
- | font-weight: 600 !important; | ||
padding: 10px 14px !important; | |||
- | flex-basis: 35% !important; | ||
- | border-right: 1px solid var(--zc-border) !important; | ||
} | |||
/* Значение (Текст поля справа) */ | |||
.pi-europa .pi-data-value, | |||
.pi-theme-film .pi-data-value { | |||
color: var(--color-base--subtle) !important; | |||
font-size: 0.88rem !important; | |||
padding: 10px 14px !important; | |||
line-height: 1.5 !important; | |||
} | } | ||
/* | /* Ссылки внутри значений */ | ||
.pi-europa .pi-data-value a, | |||
.pi-theme-film .pi-data-value a { | |||
color: var(--zc-yellow) !important; | |||
} | } | ||
.pi-europa .pi-data-value a:hover, | |||
.pi-theme-film .pi-data-value a:hover { | |||
color: var(-- | color: var(--zc-yellow-soft) !important; | ||
text-decoration: none !important; | |||
} | } | ||
/* | /* Списки внутри инфобокса */ | ||
.pi-europa .pi-data-value ul, | |||
.pi-theme-film .pi-data-value ul { | |||
list-style: none !important; | |||
padding-left: 0 !important; | |||
margin: 0 !important; | |||
} | } | ||
.pi-europa .pi-data-value ul li, | |||
.pi-theme-film .pi-data-value ul li { | |||
padding: 2px 0 !important; | |||
position: relative; | |||
} | } | ||
.pi-europa .pi-data-value ul li::before, | |||
.pi-theme-film .pi-data-value ul li::before { | |||
content: '•'; | |||
color: var(--zc-yellow-dim); | color: var(--zc-yellow-dim); | ||
margin-right: 8px; | |||
font-weight: bold; | |||
} | } | ||
/* Навигационная нижняя панель */ | |||
color: var(--zc- | .pi-europa .pi-navigation, | ||
.pi-theme-film .pi-navigation { | |||
background-color: var(--zc-dark-3) !important; | |||
border-top: 1px solid var(--zc-border-light) !important; | |||
text-align: center !important; | |||
padding: 10px !important; | |||
} | } | ||
a | .pi-europa .pi-navigation a, | ||
a | .pi-theme-film .pi-navigation a { | ||
color: | color: var(--zc-yellow) !important; | ||
font-weight: 600 !important; | |||
font-size: 0.85rem !important; | |||
} | } | ||
/* Мобильная адаптация (stacked) */ | |||
@media (max-width: 720px) { | |||
.pi-europa .pi-data-label, | |||
.pi-theme-film .pi-data-label { | |||
flex-basis: 100% !important; | |||
border-right: none !important; | |||
border-bottom: 1px solid var(--zc-border) !important; | |||
padding: 8px 14px 4px !important; | |||
} | |||
.pi-europa .pi-data-value, | |||
.pi-theme-film .pi-data-value { | |||
padding: 4px 14px 10px !important; | |||
} | |||
} | } | ||
/* =========================== | /* =========================== | ||
ИМПОРТ ШРИФТОВ | |||
=========================== */ | =========================== */ | ||
. | @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap'); | ||
/* =========================== | |||
background-color: | CSS-ПЕРЕМЕННЫЕ MEDIAWIKI | ||
=========================== */ | |||
:root { | |||
/* Основные цвета */ | |||
. | --background-color-base: #0a0a0a; | ||
--background-color-base-fixed: #0a0a0a; | |||
--background-color-neutral: #111111; | |||
--background-color-neutral-subtle: #161616; | |||
--background-color-interactive: #1a1a1a; | |||
--background-color-interactive-subtle: #161616; | |||
--background-color-interactive-subtle--hover: #222222; | |||
--background-color-interactive-subtle--active: #1a1a1a; | |||
--background-color-disabled: #1e1e1e; | |||
color: | --background-color-disabled-subtle: #141414; | ||
--background-color-progressive: #f2cf00; | |||
--background-color-progressive-subtle: rgba(242, 207, 0, 0.1); | |||
--background-color-progressive-subtle--hover: rgba(242, 207, 0, 0.18); | |||
--background-color-progressive-subtle--active: rgba(242, 207, 0, 0.25); | |||
--background-color-progressive--hover: #ffe14a; | |||
--background-color-progressive--active: #b89e00; | |||
--background-color-destructive: #bf3c2c; | |||
--background-color-destructive-subtle: rgba(191, 60, 44, 0.15); | |||
--background-color-destructive-subtle--hover: rgba(191, 60, 44, 0.25); | |||
--background-color-destructive-subtle--active: rgba(191, 60, 44, 0.35); | |||
--background-color-destructive--hover: #9f3526; | |||
--background-color-destructive--active: #612419; | |||
--background-color-backdrop-light: rgba(0, 0, 0, 0.65); | |||
--background-color-error-subtle: rgba(191, 60, 44, 0.15); | |||
--background-color-error-subtle--hover: rgba(191, 60, 44, 0.25); | |||
--background-color-success: #177860; | |||
--background-color-success-subtle: rgba(23, 120, 96, 0.15); | |||
--background-color-notice: #202122; | |||
--background-color-notice-subtle: rgba(23, 120, 96, 0.15); | |||
/* Текст */ | |||
--color-base: #e8e8e8; | |||
--color-base--subtle: #c0c0c0; | |||
--color-base--emphasized: #f5f5f5; | |||
--color-base--disabled: #555555; | |||
--color-base--inverted: #0a0a0a; | |||
--color-base--inverted--subtle: #333333; | |||
--color-base--placeholder: #666666; | |||
- | --color-base--readable: #e8e8e8; | ||
--color-inverted: #e8e8e8; | |||
--color-inverted--subtle: #a0a0a0; | |||
--color-inverted-fixed: #000000; | |||
--color-subtle: #888888; | |||
--color-muted: #5a5a5a; | |||
--color-disabled: #555555; | |||
--color-disabled-emphasized: #666666; | |||
--color-placeholder: #666666; | |||
--color-progressive: #f2cf00; | |||
color: | --color-progressive--hover: #ffe14a; | ||
--color-progressive--active: #b89e00; | |||
--color-progressive--focus: #f2cf00; | |||
--color-destructive: #e55a4f; | |||
--color-destructive--hover: #ff7a6e; | |||
--color-destructive--active: #bf3c2c; | |||
--color-destructive--focus: #e55a4f; | |||
--color-error: #e55a4f; | |||
--color-error--hover: #ff7a6e; | |||
--color-success: #4aba8a; | |||
--color-success--hover: #5fd4a0; | |||
--color-warning: #f2cf00; | |||
/* | /* Рамки */ | ||
--border-color-base: rgba(255, 255, 255, 0.08); | |||
--border-color-subtle: rgba(255, 255, 255, 0.06); | |||
. | --border-color-muted: rgba(255, 255, 255, 0.12); | ||
--border-color-interactive: rgba(255, 255, 255, 0.15); | |||
border: | --border-color-interactive--hover: rgba(255, 255, 255, 0.25); | ||
border- | --border-color-interactive--active: rgba(255, 255, 255, 0.35); | ||
--border-color-progressive: rgba(242, 207, 0, 0.5); | |||
--border-color-progressive--hover: #f2cf00; | |||
--border-color-progressive--active: #b89e00; | |||
--border-color-progressive--focus: #f2cf00; | |||
--border-color-destructive: rgba(191, 60, 44, 0.5); | |||
--border-color-destructive--hover: #e55a4f; | |||
--border-color-destructive--active: #bf3c2c; | |||
--border-color-destructive--focus: #e55a4f; | |||
--border-color-error: #e55a4f; | |||
--border-color-error--hover: #ff7a6e; | |||
--border-color-transparent: transparent; | |||
--border-color-disabled: rgba(255, 255, 255, 0.05); | |||
/* Фокус и тени */ | |||
--box-shadow-color-progressive--focus: #f2cf00; | |||
--box-shadow-color-destructive--focus: #e55a4f; | |||
--box-shadow-color-inverted: rgba(0, 0, 0, 0.8); | |||
--box-shadow-color-alpha-base: rgba(0, 0, 0, 0.35); | |||
--box-shadow-color-transparent: transparent; | |||
/* Иконки */ | |||
--filter-invert-icon: 1; | |||
--opacity-icon-base: 0.7; | |||
--opacity-icon-base--disabled: 0.35; | |||
--opacity-icon-placeholder: 0.45; | |||
. | /* Zet+Compan кастомные переменные */ | ||
--zc-yellow: #f2cf00; | |||
--zc-yellow-soft: #ffe14a; | |||
--zc-yellow-dim: #b89e00; | |||
--zc-yellow-glow: rgba(242, 207, 0, 0.12); | |||
--zc-black: #050505; | |||
--zc-dark: #0a0a0a; | |||
--zc-dark-2: #111111; | |||
--zc-dark-3: #181818; | |||
--zc-dark-4: #1e1e1e; | |||
--zc-border: rgba(255, 255, 255, 0.07); | |||
--zc-border-light: rgba(255, 255, 255, 0.12); | |||
. | /* Шрифты */ | ||
--font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; | |||
--font-family-heading: 'Space Grotesk', 'Inter', sans-serif; | |||
--font-family-serif: 'Linux Libertine', 'Georgia', 'Times', serif; | |||
--font-size-small: 0.8125rem; | |||
--font-size-medium: 0.875rem; | |||
--font-size-large: 1rem; | |||
--font-size-x-large: 1.25rem; | |||
--font-size-xx-large: 1.5625rem; | |||
--line-height-content: 1.65; | |||
--line-height-heading: 1.3; | |||
} | } | ||
/* =========================== | |||
БАЗОВЫЕ ЭЛЕМЕНТЫ | |||
=========================== */ | |||
html { | |||
scroll-behavior: smooth; | |||
} | } | ||
body { | |||
background-color: var(--zc-black) !important; | |||
color: var(--color-base); | |||
font-family: var(--font-family-base); | |||
} | } | ||
/* | /* Шум-оверлей для текстуры */ | ||
body::before { | |||
content: ''; | |||
position: fixed; | |||
inset: 0; | |||
z-index: 99999; | |||
pointer-events: none; | |||
opacity: 0.02; | |||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); | |||
background-repeat: repeat; | |||
} | } | ||
a { | |||
color: var(-- | color: var(--zc-yellow); | ||
text-decoration: none; | |||
} | } | ||
a:hover { | |||
color: var(--zc-yellow-soft); | |||
text-decoration: underline; | |||
} | } | ||
a:visited { | |||
color: var(--zc-yellow-dim); | |||
} | } | ||
a:visited:hover { | |||
color: var(-- | color: var(--zc-yellow-soft); | ||
} | } | ||
. | a.new, | ||
color: | a.new:visited { | ||
color: #e55a4f; | |||
} | } | ||
. | a.new:hover { | ||
color: | color: #ff7a6e; | ||
} | } | ||
/* =========================== | /* =========================== | ||
ХЕДЕР | |||
=========================== */ | =========================== */ | ||
.vector- | .vector-header-container { | ||
background-color: | background-color: rgba(5, 5, 5, 0.92) !important; | ||
backdrop-filter: blur(20px) !important; | |||
-webkit-backdrop-filter: blur(20px) !important; | |||
border-bottom: 1px solid var(--zc-border) !important; | |||
} | } | ||
. | .mw-header { | ||
background-color: transparent !important; | |||
} | } | ||
. | /* Логотип */ | ||
.mw-logo { | |||
gap: 10px !important; | |||
} | } | ||
. | .mw-logo-wordmark { | ||
font-family: var(--font-family-heading) !important; | |||
color: var(-- | font-size: 1.15rem !important; | ||
font-weight: 700 !important; | |||
letter-spacing: -0.02em !important; | |||
color: var(--zc-yellow) !important; | |||
} | } | ||
.mw-logo-icon { | |||
border-radius: 8px !important; | |||
. | |||
} | } | ||
.vector- | /* Стик-хедер */ | ||
.vector-sticky-header-container { | |||
background-color: rgba(5, 5, 5, 0.96) !important; | |||
backdrop-filter: blur(20px) !important; | |||
-webkit-backdrop-filter: blur(20px) !important; | |||
border-bottom: 1px solid var(--zc-border-light) !important; | |||
} | } | ||
.vector- | .vector-sticky-header { | ||
border-bottom-color: transparent !important; | |||
} | } | ||
.vector- | .vector-sticky-header-context-bar-primary { | ||
font-family: var(--font-family-heading) !important; | |||
color: var(--color-base--emphasized) !important; | color: var(--color-base--emphasized) !important; | ||
} | } | ||
.vector- | /* =========================== | ||
color: | ПОИСК | ||
=========================== */ | |||
.vector-search-box-vue .cdx-typeahead-search__form { | |||
background-color: var(--zc-dark-3) !important; | |||
border: 1px solid var(--zc-border-light) !important; | |||
border-radius: 8px !important; | |||
overflow: hidden; | |||
} | } | ||
.vector- | .vector-search-box-vue .cdx-search-input__input-wrapper .cdx-text-input { | ||
border-radius: 0 !important; | |||
border: none !important; | |||
} | } | ||
.vector-search-box-vue .cdx-text-input__input { | |||
.vector- | background-color: transparent !important; | ||
background-color: var(-- | color: var(--color-base) !important; | ||
border: | border: none !important; | ||
box-shadow: none !important; | |||
font-family: var(--font-family-base) !important; | |||
} | } | ||
.vector- | .vector-search-box-vue .cdx-text-input__input::placeholder { | ||
color: var(--color-muted) !important; | |||
color: var(--color- | |||
} | } | ||
.vector- | .vector-search-box-vue .cdx-text-input__input:focus { | ||
outline: none !important; | |||
box-shadow: none !important; | |||
border-color: transparent !important; | |||
} | } | ||
.vector- | .vector-search-box-vue .cdx-search-input__end-button { | ||
color: var(--zc-yellow- | background-color: var(--zc-yellow) !important; | ||
color: #000 !important; | |||
border-color: transparent !important; | |||
border-radius: 0 !important; | |||
font-weight: 700 !important; | |||
} | } | ||
.vector-search-box-vue .cdx-search-input__end-button:hover { | |||
background-color: var(--zc-yellow-soft) !important; | |||
.vector- | |||
background-color: | |||
} | } | ||
. | /* Меню поиска (dropdown результатов) */ | ||
.cdx-typeahead-search__menu { | |||
background-color: var(--zc-dark-2) !important; | |||
border: 1px solid var(--zc-border-light) !important; | |||
border-top: none !important; | |||
border-radius: 0 0 8px 8px !important; | |||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important; | |||
} | } | ||
. | .cdx-menu-item--enabled { | ||
color: var(--color- | color: var(--color-base) !important; | ||
} | } | ||
. | .cdx-menu-item--enabled.cdx-menu-item--highlighted { | ||
background- | background-color: var(--zc-dark-3) !important; | ||
} | } | ||
. | .cdx-menu-item--enabled.cdx-menu-item--selected { | ||
background-color: var(--zc-yellow-glow) !important; | |||
color: var(--zc-yellow) !important; | color: var(--zc-yellow) !important; | ||
} | } | ||
. | .cdx-menu-item__text__description { | ||
color: var(-- | color: var(--color-subtle) !important; | ||
} | } | ||
.cdx-typeahead-search__search-footer { | |||
color: var(--color-subtle) !important; | |||
.cdx- | |||
color: var(--color | |||
} | } | ||
.cdx- | .cdx-typeahead-search__search-footer__icon { | ||
color: var(--color-muted) !important; | |||
color: var(--color- | |||
} | } | ||
. | /* =========================== | ||
НАВИГАЦИЯ И ДРОПДАУНЫ | |||
=========================== */ | |||
.vector-dropdown-content { | |||
background-color: var(--zc-dark-2) !important; | |||
border: 1px solid var(--zc-border-light) !important; | |||
border-radius: 10px !important; | |||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important; | |||
} | } | ||
. | .vector-main-menu-dropdown .vector-dropdown-content { | ||
border-radius: 0 0 10px 10px !important; | |||
border- | |||
} | } | ||
. | .vector-dropdown-label { | ||
color: var(--color-inverted--subtle) !important; | |||
border-radius: 8px !important; | |||
color: var(-- | |||
border- | |||
} | } | ||
. | .vector-dropdown-label:hover { | ||
background-color: rgba(255, 255, 255, 0.06) !important; | |||
background-color: | color: var(--color-base--emphasized) !important; | ||
color: | } | ||
} | |||
. | /* Меню навигации (боковая панель) */ | ||
. | .vector-main-menu, | ||
background-color: | .vector-page-tools { | ||
background-color: transparent !important; | |||
padding: 0 !important; | |||
} | } | ||
. | .vector-menu-heading { | ||
font-family: var(--font-family-heading) !important; | |||
font-size: 0.72rem !important; | |||
font-weight: 600 !important; | |||
color: var(-- | text-transform: uppercase !important; | ||
letter-spacing: 0.1em !important; | |||
color: var(--zc-yellow) !important; | |||
padding: 16px 12px 6px !important; | |||
border-bottom: none !important; | |||
} | } | ||
. | .vector-menu-content-list li a { | ||
color: var(--color-base--subtle) !important; | |||
font-size: 0.88rem !important; | |||
padding: 7px 12px !important; | |||
border-radius: 6px !important; | |||
transition: background-color 0.15s ease, color 0.15s ease !important; | |||
} | } | ||
. | .vector-menu-content-list li a:hover { | ||
background-color: rgba(255, 255, 255, 0.05) !important; | |||
background-color: | color: var(--color-base--emphasized) !important; | ||
color: var(--color- | text-decoration: none !important; | ||
} | } | ||
. | .vector-menu-content-list li a .vector-icon { | ||
color: inherit !important; | |||
} | } | ||
.vector-menu-content-list li.selected a, | |||
.vector-menu-content-list li.selected a:visited { | |||
color: var(--zc-yellow) !important; | |||
. | background-color: var(--zc-yellow-glow) !important; | ||
background-color: var(--zc- | |||
} | } | ||
. | /* Pinnable заголовки */ | ||
background-color: | .vector-pinnable-header { | ||
background-color: var(--zc-dark-2) !important; | |||
border: 1px solid var(--zc-border) !important; | |||
border-radius: 10px !important; | |||
padding: 10px 14px !important; | |||
} | } | ||
. | .vector-pinnable-header-label { | ||
font-family: var(--font-family-heading) !important; | |||
font-weight: 600 !important; | |||
color: var(--color-base--subtle) !important; | |||
} | } | ||
. | .vector-pinnable-header-toggle-button { | ||
color: var(--zc-yellow) !important; | |||
font-size: 0.8rem !important; | |||
} | } | ||
.vector-pinnable-header-toggle-button:hover { | |||
. | color: var(--zc-yellow-soft) !important; | ||
color: | |||
} | } | ||
.vector- | /* =========================== | ||
ВКЛАДКИ (ТАБЫ) | |||
=========================== */ | |||
.vector-menu-tabs { | |||
background-color: transparent !important; | background-color: transparent !important; | ||
} | } | ||
.vector-menu-tabs .vector-menu-content-list { | |||
gap: 4px !important; | |||
} | } | ||
.vector-tab-noicon a { | |||
color: var(--color-subtle) !important; | |||
font-size: 0.85rem !important; | |||
. | font-weight: 500 !important; | ||
color: var(--color- | padding: 6px 12px !important; | ||
border-radius: 6px !important; | |||
border: none !important; | |||
transition: all 0.15s ease !important; | |||
} | } | ||
. | .vector-tab-noicon a:hover { | ||
background-color: rgba(255, 255, 255, 0.05) !important; | |||
. | |||
color: var(--color-base--emphasized) !important; | color: var(--color-base--emphasized) !important; | ||
text-decoration: none !important; | |||
} | } | ||
. | .vector-tab-noicon.selected a { | ||
color: var(--zc-yellow) !important; | |||
background-color: var(--zc-yellow-glow) !important; | |||
border-bottom-color: transparent !important; | |||
box-shadow: none !important; | |||
} | } | ||
. | .vector-tab-noicon.selected a:visited { | ||
color: var(--zc-yellow) !important; | |||
} | } | ||
. | /* =========================== | ||
font- | КНОПКИ (CDX) | ||
=========================== */ | |||
.cdx-button:enabled, | |||
.cdx-button.cdx-button--fake-button--enabled { | |||
background-color: var(--zc-dark-3); | |||
color: var(--color-base--subtle); | |||
border-color: var(--zc-border-light); | |||
border-radius: 6px; | |||
font-family: var(--font-family-base); | |||
font-size: var(--font-size-medium); | |||
} | } | ||
. | .cdx-button:enabled:hover, | ||
.cdx-button.cdx-button--fake-button--enabled:hover { | |||
background-color: var(--zc-dark-4); | |||
border-color: rgba(255, 255, 255, 0.2); | |||
color: var(--color-base--emphasized); | |||
} | } | ||
. | .cdx-button:enabled:active, | ||
.cdx-button.cdx-button--fake-button--enabled:active { | |||
background-color: #252525; | |||
} | } | ||
. | .cdx-button:enabled.cdx-button--action-progressive, | ||
. | .cdx-button.cdx-button--fake-button--enabled.cdx-button--action-progressive { | ||
color: var(--color- | background-color: var(--zc-yellow-glow); | ||
color: var(--zc-yellow); | |||
border-color: rgba(242, 207, 0, 0.3); | |||
} | } | ||
. | .cdx-button:enabled.cdx-button--action-progressive:hover, | ||
.cdx-button.cdx-button--fake-button--enabled.cdx-button--action-progressive:hover { | |||
background-color: rgba(242, 207, 0, 0.2); | |||
color: var(--zc-yellow-soft); | |||
border-color: var(--zc-yellow); | |||
} | } | ||
. | .cdx-button:enabled.cdx-button--weight-primary.cdx-button--action-progressive, | ||
color: var(--zc-yellow- | .cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-primary.cdx-button--action-progressive { | ||
background-color: var(--zc-yellow); | |||
color: #000; | |||
border-color: transparent; | |||
} | } | ||
.cdx-button:enabled.cdx-button--weight-primary.cdx-button--action-progressive:hover, | |||
. | .cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-primary.cdx-button--action-progressive:hover { | ||
color: var(--zc-yellow) | background-color: var(--zc-yellow-soft); | ||
} | } | ||
. | .cdx-button:enabled.cdx-button--weight-quiet, | ||
border- | .cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-quiet { | ||
background-color: transparent; | |||
border-color: transparent; | |||
color: var(--color-subtle); | |||
} | } | ||
. | .cdx-button:enabled.cdx-button--weight-quiet:hover, | ||
color: var(-- | .cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-quiet:hover { | ||
background-color: rgba(255, 255, 255, 0.05); | |||
color: var(--color-base--emphasized); | |||
} | } | ||
. | .cdx-button:disabled, | ||
.cdx-button.cdx-button--fake-button--disabled { | |||
background-color: var(--zc-dark-3); | |||
color: var(--color-disabled); | |||
border-color: transparent; | |||
} | } | ||
. | .cdx-button:enabled:focus:not(:active), | ||
color: | .cdx-button.cdx-button--fake-button--enabled:focus:not(:active) { | ||
border-color: var(--zc-yellow); | |||
box-shadow: inset 0 0 0 1px var(--zc-yellow); | |||
} | } | ||
.mw- | /* =========================== | ||
color: | ОСНОВНОЙ КОНТЕНТ | ||
=========================== */ | |||
.mw-page-container { | |||
background-color: var(--zc-black) !important; | |||
} | } | ||
.mw-page-container-inner { | |||
.mw- | background-color: transparent !important; | ||
color: | |||
} | } | ||
.mw- | .mw-content-container { | ||
background-color: transparent !important; | |||
} | } | ||
.mw-body { | |||
background-color: var(--zc-dark) !important; | |||
border: 1px solid var(--zc-border) !important; | |||
.mw-body | border-radius: 16px !important; | ||
background-color: var(--zc-dark | color: var(--color-base) !important; | ||
border: 1px solid var(--zc-border | padding: 32px !important; | ||
border-radius: | font-size: var(--font-size-large) !important; | ||
line-height: var(--line-height-content) !important; | |||
} | } | ||
. | /* Заголовок страницы */ | ||
.firstHeading { | |||
font-family: var(--font-family-heading) !important; | font-family: var(--font-family-heading) !important; | ||
font-weight: | font-size: 2rem !important; | ||
font-weight: 700 !important; | |||
color: var(--color-base--emphasized) !important; | |||
letter-spacing: -0.02em !important; | |||
line-height: var(--line-height-heading) !important; | |||
border-bottom: 1px solid var(--zc-border-light) !important; | border-bottom: 1px solid var(--zc-border-light) !important; | ||
padding: | padding-bottom: 12px !important; | ||
margin-bottom: 24px !important; | |||
} | } | ||
. | .vector-page-titlebar { | ||
background-color: transparent !important; | |||
} | } | ||
. | /* Подпись "Материал из..." */ | ||
#siteSub { | |||
color: var(--color-muted) !important; | |||
font-size: 0.78rem !important; | |||
margin-bottom: 16px !important; | |||
} | } | ||
.mw-body-content | /* =========================== | ||
КОНТЕНТ ВИКИ-СТРАНИЦ | |||
=========================== */ | |||
.mw-body-content { | |||
color: var(--color-base) !important; | |||
} | } | ||
.mw-body-content | .mw-body-content h1, | ||
.mw-body-content | .mw-body-content h2, | ||
.mw-body-content h3, | |||
border-color: var(--zc-border-light) !important; | .mw-body-content h4, | ||
.mw-body-content h5, | |||
.mw-body-content h6 { | |||
font-family: var(--font-family-heading) !important; | |||
color: var(--color-base--emphasized) !important; | |||
letter-spacing: -0.01em !important; | |||
line-height: var(--line-height-heading) !important; | |||
border-bottom-color: var(--zc-border-light) !important; | |||
} | } | ||
.mw-body-content | .mw-body-content h1 { | ||
font-size: 1.75rem !important; | |||
border- | border-bottom: 1px solid var(--zc-border-light) !important; | ||
padding-bottom: 8px !important; | |||
} | } | ||
.mw-body-content h2 { | |||
font-size: 1.4rem !important; | |||
border-bottom: 1px solid var(--zc-border) !important; | |||
padding-bottom: 6px !important; | |||
.mw-body-content | margin-top: 1.5em !important; | ||
} | |||
border: 1px solid var(--zc-border | |||
.mw-body-content h3 { | |||
font-size: 1.15rem !important; | |||
margin-top: 1.3em !important; | |||
} | } | ||
.mw-body-content h4 { | |||
font-size: 1.05rem !important; | |||
.mw-body-content | |||
font- | |||
} | } | ||
.mw-body-content p { | |||
color: var(--color-base--subtle) !important; | |||
line-height: 1.75 !important; | |||
margin-bottom: 1em !important; | |||
.mw-body-content | |||
} | } | ||
. | .mw-body-content ul, | ||
.mw-body-content ol { | |||
color: var(--color-base--subtle) !important; | color: var(--color-base--subtle) !important; | ||
margin-bottom: 1em !important; | |||
} | } | ||
. | .mw-body-content li { | ||
margin-bottom: 4px !important; | |||
} | } | ||
.mw-body-content li::marker { | |||
color: var(--zc-yellow-dim) !important; | |||
} | |||
.mw-body-content | |||
/* Ссылки внутри контента */ | |||
.mw-body-content a { | |||
color: var(--zc-yellow) !important; | |||
text-decoration: none !important; | |||
border-bottom: 1px solid transparent !important; | |||
transition: border-color 0.15s ease !important; | |||
} | } | ||
.mw-body-content | .mw-body-content a:hover { | ||
border-bottom-color: var(--zc-yellow) !important; | |||
text-decoration: none !important; | |||
} | } | ||
.mw-body-content | .mw-body-content a:visited { | ||
color: var(--zc-yellow-dim) !important; | |||
} | } | ||
.mw-body-content a:visited:hover { | |||
border-bottom-color: var(--zc-yellow-dim) !important; | |||
.mw-body-content | |||
border- | |||
} | } | ||
.mw-body-content a.new { | |||
color: #e55a4f !important; | |||
.mw-body-content | |||
} | } | ||
.mw-body-content a.new:visited { | |||
color: #c0403a !important; | |||
} | } | ||
/* Внешние ссылки */ | |||
.mw-body-content a.external { | |||
color: var(--zc-yellow) !important; | color: var(--zc-yellow) !important; | ||
} | } | ||
. | .mw-body-content a.external::after { | ||
filter: invert(1) brightness(0.7) !important; | |||
} | } | ||
/* =========================== | /* =========================== | ||
ТАБЛИЦЫ | |||
=========================== */ | =========================== */ | ||
.mw- | .mw-body-content table { | ||
background-color: var(--zc-dark-2) !important; | |||
border: 1px solid var(--zc-border-light) !important; | |||
border-radius: 10px !important; | border-radius: 10px !important; | ||
overflow: hidden; | |||
color: var(--color-base--subtle) !important; | |||
margin-bottom: 1.5em !important; | |||
} | } | ||
. | .mw-body-content table th { | ||
background-color: var(-- | background-color: var(--zc-dark-3) !important; | ||
color: var(--color-base--emphasized) !important; | |||
font-family: var(--font-family-heading) !important; | |||
font-weight: 600 !important; | |||
font-size: 0.88rem !important; | |||
border-bottom: 1px solid var(--zc-border-light) !important; | |||
padding: 10px 14px !important; | |||
} | } | ||
. | .mw-body-content table td { | ||
border-bottom: 1px solid var(--zc-border) !important; | |||
padding: 8px 14px !important; | |||
} | } | ||
. | .mw-body-content table tr:last-child td { | ||
background-color: var(-- | border-bottom: none !important; | ||
border- | } | ||
.mw-body-content table.wikitable { | |||
background-color: var(--zc-dark-2) !important; | |||
border-color: var(--zc-border-light) !important; | |||
} | } | ||
. | .mw-body-content table.wikitable > tr > th, | ||
.mw-body-content table.wikitable > * > tr > th { | |||
background-color: var(--zc-dark-3) !important; | background-color: var(--zc-dark-3) !important; | ||
border-color: var(--zc-border-light) !important; | border-color: var(--zc-border-light) !important; | ||
} | } | ||
. | .mw-body-content table.wikitable > tr > td, | ||
color: var(-- | .mw-body-content table.wikitable > * > tr > td { | ||
border-color: var(--zc-border) !important; | |||
} | } | ||
/* =========================== | /* =========================== | ||
INFOBOX И ПЛАВАЮЩИЕ БЛОКИ | |||
=========================== */ | =========================== */ | ||
. | .infobox, | ||
.mw-body-content .infobox { | |||
background-color: var(--zc-dark-2) !important; | background-color: var(--zc-dark-2) !important; | ||
border: 1px solid var(--zc-border) !important; | border: 1px solid var(--zc-border-light) !important; | ||
border-radius: 12px !important; | border-radius: 12px !important; | ||
color: var(--color-base--subtle) !important; | |||
overflow: hidden; | |||
} | } | ||
. | .infobox-title, | ||
.infobox-header, | |||
.mw-body-content .infobox-title, | |||
.mw-body-content .infobox-header { | |||
background-color: var(--zc-dark-3) !important; | |||
color: var(--zc-yellow) !important; | |||
font-family: var(--font-family-heading) !important; | font-family: var(--font-family-heading) !important; | ||
font-weight: | font-weight: 600 !important; | ||
border-bottom: 1px solid var(--zc-border-light) !important; | |||
} | } | ||
. | .infobox-above, | ||
.infobox-below, | |||
.infobox-image, | |||
.infobox-full-data, | |||
.mw-body-content .infobox-above, | |||
.mw-body-content .infobox-below, | |||
border-bottom: | .mw-body-content .infobox-image, | ||
.mw-body-content .infobox-full-data { | |||
border-bottom-color: var(--zc-border) !important; | |||
} | } | ||
. | .infobox-label { | ||
background- | background-color: var(--zc-dark-3) !important; | ||
color: var(--color-base--subtle) !important; | |||
color: var(-- | |||
font-weight: 600 !important; | font-weight: 600 !important; | ||
border-color: var(--zc-border) !important; | |||
} | } | ||
. | .infobox-data { | ||
background-color: var(--zc-dark-2) !important; | |||
color: var(--color-base--subtle) !important; | |||
border-color: var(--zc-border) !important; | |||
} | } | ||
/* =========================== | /* =========================== | ||
КОД И ПРЕФОРМАТИРОВАНИЕ | |||
=========================== */ | =========================== */ | ||
.mw- | .mw-body-content code { | ||
background-color: var(--zc-dark-3) !important; | |||
background-color: var(--zc-dark) !important; | border: 1px solid var(--zc-border-light) !important; | ||
border | border-radius: 4px !important; | ||
border-radius: | color: var(--zc-yellow-soft) !important; | ||
padding: 1px 6px !important; | |||
font-size: 0.9em !important; | |||
} | } | ||
. | .mw-body-content pre, | ||
. | .mw-body-content .mw-code { | ||
. | background-color: var(--zc-dark-2) !important; | ||
background-color: var(--zc-dark- | border: 1px solid var(--zc-border-light) !important; | ||
border | border-radius: 10px !important; | ||
color: var(--color-base--subtle) !important; | color: var(--color-base--subtle) !important; | ||
padding: 16px !important; | |||
overflow-x: auto; | |||
} | } | ||
. | .mw-body-content pre code, | ||
background-color: | .mw-body-content .mw-code code { | ||
border | background-color: transparent !important; | ||
border: none !important; | |||
color: inherit !important; | |||
padding: 0 !important; | |||
} | } | ||
. | /* =========================== | ||
ЦИТАТЫ | |||
=========================== */ | |||
color: var(--color- | .mw-body-content blockquote { | ||
border-left: 3px solid var(--zc-yellow-dim) !important; | |||
background-color: var(--zc-dark-3) !important; | |||
color: var(--color-base--subtle) !important; | |||
padding: 12px 20px !important; | |||
margin: 1em 0 !important; | |||
border-radius: 0 8px 8px 0 !important; | |||
} | } | ||
. | /* =========================== | ||
HR РАЗДЕЛИТЕЛЬ | |||
border- | =========================== */ | ||
.mw-body-content hr { | |||
border-color: var(--zc-border-light) !important; | |||
border-style: solid !important; | |||
border-width: 0 0 1px 0 !important; | |||
margin: 1.5em 0 !important; | |||
} | } | ||
/* =========================== | /* =========================== | ||
КАТЕГОРИИ | |||
=========================== */ | =========================== */ | ||
#catlinks { | |||
background-color: var(--zc-dark-2) !important; | background-color: var(--zc-dark-2) !important; | ||
border | border: 1px solid var(--zc-border) !important; | ||
border-radius: 10px !important; | |||
padding: 12px 16px !important; | |||
margin-top: 24px !important; | |||
} | } | ||
. | #catlinks .mw-normal-catlinks { | ||
color: var(--color-subtle) !important; | |||
} | } | ||
# | #catlinks .mw-normal-catlinks a { | ||
color: var(--zc-yellow) !important; | |||
} | } | ||
.catlinks-allhidden { | |||
display: none !important; | |||
} | } | ||
/* =========================== | |||
СООБЩЕНИЯ / ПРЕДУПРЕЖДЕНИЯ | |||
=========================== */ | |||
border-radius: | .mw-message-box, | ||
.errorbox, | |||
.warningbox, | |||
.successbox, | |||
.infobox { | |||
border-radius: 10px !important; | |||
font-size: var(--font-size-medium) !important; | |||
} | } | ||
.errorbox { | |||
background-color: var(--background-color-destructive-subtle) !important; | |||
border-color: rgba(191, 60, 44, 0.4) !important; | |||
color: var(--color-destructive) !important; | |||
border-color: | |||
color: var(--color- | |||
} | } | ||
. | .warningbox { | ||
color: | background-color: rgba(242, 207, 0, 0.08) !important; | ||
border-color: rgba(242, 207, 0, 0.3) !important; | |||
color: var(--zc-yellow-soft) !important; | |||
} | } | ||
.successbox { | |||
background-color: var(--background-color-success-subtle) !important; | |||
border-color: rgba(23, 120, 96, 0.4) !important; | |||
color: var(--color-success) !important; | |||
} | |||
.infobox { | |||
background-color: var(--zc-dark-3) !important; | background-color: var(--zc-dark-3) !important; | ||
border-color: var(--zc-border-light) !important; | border-color: var(--zc-border-light) !important; | ||
color: var(--color-base--subtle) !important; | |||
} | } | ||
. | .noarticletext { | ||
color: var(--color-subtle) !important; | |||
padding: 20px !important; | |||
} | } | ||
. | /* =========================== | ||
ТОК (ОГЛАВЛЕНИЕ) | |||
=========================== */ | |||
.vector-toc { | |||
background-color: var(--zc-dark-2) !important; | |||
border: 1px solid var(--zc-border) !important; | |||
border-radius: 12px !important; | |||
padding: 16px !important; | |||
} | } | ||
. | .vector-toc .vector-toc-heading { | ||
font-family: var(--font-family-heading) !important; | |||
font-weight: 700 !important; | |||
color: var(--zc-yellow) !important; | |||
font-size: 0.85rem !important; | |||
text-transform: uppercase !important; | |||
letter-spacing: 0.08em !important; | |||
} | } | ||
.vector-toc .vector-toc-list-item a { | |||
. | |||
color: var(--color-base--subtle) !important; | color: var(--color-base--subtle) !important; | ||
font-size: 0.88rem !important; | |||
padding: 4px 8px !important; | |||
border-radius: 4px !important; | |||
transition: all 0.15s ease !important; | |||
border-bottom: none !important; | |||
} | } | ||
.vector-toc .vector-toc-list-item a:hover { | |||
background-color: rgba(255, 255, 255, 0.04) !important; | |||
color: var(--color-base--emphasized) !important; | |||
. | |||
color: var(--color-base) !important; | |||
} | } | ||
. | .vector-toc .vector-toc-list-item.vector-toc-level-1-active > a { | ||
color: var(--zc-yellow) !important; | |||
font-weight: 600 !important; | |||
} | } | ||
. | .vector-toc .vector-toc-list-item .vector-toc-list-item { | ||
margin-left: 16px !important; | |||
} | } | ||
. | /* =========================== | ||
color: var(--color- | ИСТОРИЯ / ДИФФ | ||
=========================== */ | |||
.mw-diff-wrapper, | |||
.diff { | |||
background-color: var(--zc-dark) !important; | |||
border-color: var(--zc-border-light) !important; | |||
border-radius: 10px !important; | |||
} | } | ||
. | .diff-header, | ||
.diff-otitle, | |||
.diff-ntitle { | |||
background-color: var(--zc-dark-3) !important; | |||
border-bottom-color: var(--zc-border) !important; | |||
color: var(--color-base--subtle) !important; | color: var(--color-base--subtle) !important; | ||
} | } | ||
. | .diff-addedline { | ||
background-color: rgba(23, 120, 96, 0.1) !important; | |||
border-color: rgba(23, 120, 96, 0.25) !important; | |||
color: var(--color-success) !important; | |||
} | } | ||
. | .diff-deletedline { | ||
color: var(--color- | background-color: rgba(191, 60, 44, 0.1) !important; | ||
border-color: rgba(191, 60, 44, 0.25) !important; | |||
color: var(--color-destructive) !important; | |||
} | } | ||
. | .diff-context { | ||
background-color: var(--zc-dark- | background-color: var(--zc-dark-2) !important; | ||
border-color: var(--zc-border) !important; | |||
color: var(--color-subtle) !important; | |||
} | } | ||
/* =========================== | /* =========================== | ||
РЕДАКТОР | |||
=========================== */ | =========================== */ | ||
. | .ve-init-mw-desktopArticleTarget-toolbarPlaceholder-bar, | ||
background-color: var(--zc- | .ve-init-mw-desktopArticleTarget-toolbar .ve-ui-toolbar > .oo-ui-toolbar-bar { | ||
background-color: var(--zc-dark-2) !important; | |||
border-bottom-color: var(--zc-border-light) !important; | |||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important; | |||
} | } | ||
. | .editOptions { | ||
background-color: var(--zc-dark-2) !important; | background-color: var(--zc-dark-2) !important; | ||
border: | border-color: var(--zc-border-light) !important; | ||
border-radius: 10px !important; | border-radius: 10px !important; | ||
padding: 16px !important; | |||
color: var(--color-base--subtle) !important; | |||
} | } | ||
#wpTextbox1 { | |||
background-color: var(--zc-dark- | background-color: var(--zc-dark-3) !important; | ||
border: | border: 1px solid var(--zc-border-light) !important; | ||
border-radius: | border-radius: 8px !important; | ||
color: var(--color-base) !important; | |||
font-family: 'Fira Code', 'Consolas', monospace !important; | |||
font-size: 0.875rem !important; | |||
padding: 16px !important; | |||
} | } | ||
#wpTextbox1:focus { | |||
color: var(-- | border-color: var(--zc-yellow) !important; | ||
box-shadow: inset 0 0 0 1px var(--zc-yellow) !important; | |||
outline: none !important; | |||
} | } | ||
#wpSummary { | |||
color: var(--zc- | background-color: var(--zc-dark-3) !important; | ||
border: 1px solid var(--zc-border-light) !important; | |||
border-radius: 6px !important; | |||
color: var(--color-base) !important; | |||
padding: 8px 12px !important; | |||
} | } | ||
#wpSummary:focus { | |||
border-color: var(--zc- | border-color: var(--zc-yellow) !important; | ||
box-shadow: inset 0 0 0 1px var(--zc-yellow) !important; | |||
outline: none !important; | |||
} | } | ||
/* =========================== | /* =========================== | ||
СПЕЦИАЛЬНЫЕ СТРАНИЦЫ | |||
=========================== */ | =========================== */ | ||
.mw- | .mw-specialpages-table td, | ||
.mw-specialpages-table th { | |||
background-color: var(--zc-dark-2) !important; | background-color: var(--zc-dark-2) !important; | ||
border: | border-color: var(--zc-border) !important; | ||
color: var(--color-base--subtle) !important; | |||
} | } | ||
.mw- | .mw-specialpages-group { | ||
color: var(--zc-yellow) !important; | color: var(--zc-yellow) !important; | ||
font-family: var(--font-family-heading) !important; | |||
border-bottom-color: var(--zc-border-light) !important; | |||
} | } | ||
/* =========================== | /* =========================== | ||
ФОРМЫ И ИНПУТЫ | |||
=========================== */ | =========================== */ | ||
. | .cdx-text-input__input:enabled { | ||
background-color: var(--zc-dark) !important; | background-color: var(--zc-dark-3) !important; | ||
border- | color: var(--color-base) !important; | ||
border-color: var(--zc-border-light) !important; | |||
border-radius: 6px !important; | |||
} | } | ||
. | .cdx-text-input__input:enabled:hover { | ||
color: | border-color: rgba(255, 255, 255, 0.2) !important; | ||
} | } | ||
.cdx-text-input__input:enabled:focus { | |||
color: var(-- | border-color: var(--zc-yellow) !important; | ||
box-shadow: inset 0 0 0 1px var(--zc-yellow) !important; | |||
} | } | ||
.cdx-text-input__input::placeholder { | |||
color: var(-- | color: var(--color-muted) !important; | ||
} | } | ||
.cdx-text-input__input:disabled { | |||
background-color: var(--zc-dark-3) !important; | |||
color: var(--color-disabled) !important; | |||
border-color: var(--zc-border) !important; | |||
} | } | ||
/* Radio кнопки */ | |||
.cdx-radio__label { | |||
color: var(--color-base--subtle) !important; | |||
} | } | ||
/* =========================== | /* =========================== | ||
ДИАЛОГИ / МОДАЛКИ | |||
=========================== */ | =========================== */ | ||
. | .cdx-dialog { | ||
background-color: | background-color: var(--zc-dark-2) !important; | ||
border: 1px solid var(--zc-border-light) !important; | |||
border-radius: 14px !important; | |||
box-shadow: 0 16px 64px rgba(0, 0, 0, 0.6) !important; | |||
color: var(--color-base) !important; | |||
} | } | ||
. | .cdx-dialog-backdrop { | ||
background-color: | background-color: rgba(0, 0, 0, 0.7) !important; | ||
} | } | ||
.cdx-dialog__header .cdx-dialog__header__title { | |||
font-family: var(--font-family-heading) !important; | |||
color: var(--color-base--emphasized) !important; | |||
. | |||
} | } | ||
. | .cdx-dialog__header .cdx-dialog__header__subtitle { | ||
color: var(--color-subtle) !important; | color: var(--color-subtle) !important; | ||
} | } | ||
.cdx-dialog__body { | |||
color: var(--color-base--subtle) !important; | |||
} | |||
. | |||
color: var(--color- | .cdx-dialog--dividers .cdx-dialog__header, | ||
.cdx-dialog--dividers .cdx-dialog__footer { | |||
border- | border-color: var(--zc-border) !important; | ||
} | } | ||
. | .cdx-dialog__footer .cdx-dialog__footer__text { | ||
color: var(--color-subtle) !important; | color: var(--color-subtle) !important; | ||
} | |||
.skin-dialog-search .cdx-dialog__header { | |||
background-color: var(--zc-dark-3) !important; | |||
} | } | ||
/* =========================== | /* =========================== | ||
ПРОГРЕСС-БАР | |||
=========================== */ | =========================== */ | ||
: | .cdx-progress-bar:not(.cdx-progress-bar--disabled) .cdx-progress-bar__bar { | ||
background-color: var(--zc-yellow) !important; | |||
} | } | ||
: | .cdx-progress-bar:not(.cdx-progress-bar--inline) { | ||
background: var(--zc- | background-color: var(--zc-dark-3) !important; | ||
box-shadow: 0 0 0 1px var(--zc-border-light) !important; | |||
} | } | ||
/* =========================== | |||
background: var(--zc-dark- | THUMBNAIL (Миниатюры) | ||
border-radius: | =========================== */ | ||
.thumb { | |||
background-color: var(--zc-dark-2) !important; | |||
border: 1px solid var(--zc-border) !important; | |||
border-radius: 10px !important; | |||
overflow: hidden; | |||
margin: 0 0 1em 0 !important; | |||
} | } | ||
: | .thumbinner { | ||
background-color: var(--zc-dark-2) !important; | |||
border: none !important; | |||
border-radius: 10px !important; | |||
} | } | ||
.thumbcaption { | |||
color: var(--color-subtle) !important; | |||
font-size: 0.82rem !important; | |||
: | padding: 8px 12px !important; | ||
} | |||
color: var(-- | |||
.thumbcaption a { | |||
color: var(--zc-yellow) !important; | |||
} | } | ||
.thumbborder { | |||
border-color: var(--zc-border-light) !important; | |||
} | } | ||
/* =========================== | /* =========================== | ||
ГАЛЕРЕЯ | |||
=========================== */ | =========================== */ | ||
.mw-body-content .gallery { | |||
background-color: var(--zc-dark-2) !important; | |||
border: 1px solid var(--zc-border) !important; | |||
border-radius: 10px !important; | |||
} | } | ||
.mw-body-content .gallery .gallerybox { | |||
border-color: var(--zc-border) !important; | |||
} | |||
.mw-body-content .gallery .gallerytext { | |||
color: var(--color-subtle) !important; | |||
} | } | ||
.mw-body-content .gallery .gallerytext a { | |||
color: var(--zc-yellow) !important; | |||
} | } | ||
/* =========================== | /* =========================== | ||
ФУТЕР | |||
=========================== */ | =========================== */ | ||
.mw-footer-container { | |||
background-color: var(--zc-dark) !important; | |||
border-top: 1px solid var(--zc-border) !important; | |||
} | |||
.mw-footer { | |||
. | color: var(--color-muted) !important; | ||
font-size: 0.82rem !important; | |||
} | } | ||
#footer-places a { | |||
color: var(--color-subtle) !important; | |||
transition: color 0.15s ease !important; | |||
} | } | ||
#footer-places a:hover { | |||
color: var(--zc-yellow) !important; | |||
text-decoration: none !important; | |||
} | } | ||
#footer-poweredbyico .cdx-button { | |||
# | opacity: 0.5; | ||
transition: opacity 0.2s ease; | |||
. | |||
} | } | ||
#footer-poweredbyico .cdx-button:hover { | |||
. | opacity: 0.8; | ||
} | } | ||
#footer-poweredbyico img { | |||
filter: invert(1) brightness(0.7); | |||
} | } | ||
/* | /* =========================== | ||
. | УВЕДОМЛЕНИЯ | ||
=========================== */ | |||
.mw-notification-area { | |||
background-color: transparent !important; | background-color: transparent !important; | ||
} | } | ||
.mw-notification { | |||
background-color: var(--zc-dark-2) !important; | |||
border: 1px solid var(--zc-border-light) !important; | |||
border-radius: 10px !important; | |||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important; | |||
color: var(--color-base--subtle) !important; | |||
} | } | ||
/* =========================== | /* =========================== | ||
ПЕРЕНАПРАВЛЕНИЯ | |||
=========================== */ | =========================== */ | ||
.mw-redirectedfrom { | |||
. | color: var(--color-muted) !important; | ||
font-size: 0.85rem !important; | |||
font-size: 0. | |||
} | } | ||
. | .mw-redirectedfrom a { | ||
color: var(--color-subtle) !important; | |||
color | |||
} | } | ||
. | /* =========================== | ||
PRINT FOOTER | |||
=========================== */ | |||
padding: 12px !important; | .printfooter { | ||
color: var(--color-muted) !important; | |||
font-size: 0.8rem !important; | |||
border-top: 1px solid var(--zc-border) !important; | |||
padding-top: 12px !important; | |||
margin-top: 24px !important; | |||
} | } | ||
. | .printfooter a { | ||
color: var(--color-subtle) !important; | |||
word-break: break-all; | |||
} | } | ||
/* =========================== | |||
SCROLLBAR (веб-специфичный) | |||
=========================== */ | |||
::-webkit-scrollbar { | |||
width: 8px; | |||
height: 8px; | |||
} | } | ||
::-webkit-scrollbar-track { | |||
background: var(--zc-black); | |||
background: | |||
} | } | ||
::-webkit-scrollbar-thumb { | |||
background: rgba( | background: var(--zc-dark-4); | ||
color: | border-radius: 4px; | ||
} | |||
::-webkit-scrollbar-thumb:hover { | |||
background: #333; | |||
} | |||
/* =========================== | |||
СЕЛЕКЦИЯ ТЕКСТА | |||
=========================== */ | |||
::selection { | |||
background-color: rgba(242, 207, 0, 0.25); | |||
color: var(--color-base--emphasized); | |||
} | |||
::-moz-selection { | |||
background-color: rgba(242, 207, 0, 0.25); | |||
color: var(--color-base--emphasized); | |||
} | } | ||
.zc-infobox-section { | /* =========================== | ||
background: #1b1b1b !important; | АДАПТИВНОСТЬ | ||
color: #ffe14a !important; | =========================== */ | ||
text-align: center !important; | @media (max-width: 720px) { | ||
text-transform: uppercase; | .mw-body { | ||
border-radius: 12px !important; | |||
padding: 20px !important; | |||
} | |||
.firstHeading { | |||
font-size: 1.5rem !important; | |||
} | |||
.vector-dropdown-content { | |||
border-radius: 0 0 10px 10px !important; | |||
} | |||
} | |||
/* =========================== | |||
ТЁМНАЯ ТЕМА ОФОРМЛЕНИЯ | |||
(перекрытие для皮肤 темы) | |||
=========================== */ | |||
html.skin-theme-clientpref-night, | |||
html.skin-theme-clientpref-night body { | |||
--background-color-base: #0a0a0a; | |||
--color-base: #e8e8e8; | |||
} | |||
/* =========================== | |||
SPЕЦИАЛЬНЫЕ ИСПРАВЛЕНИЯ | |||
=========================== */ | |||
/* Убрать белые артефакты вокруг вект-элементов */ | |||
.vector-icon { | |||
transition: color 0.15s ease; | |||
} | |||
/* Исправление прозрачных иконок на тёмном фоне */ | |||
.vector-icon.mw-ui-icon-wikimedia-search, | |||
.vector-icon.mw-ui-icon-wikimedia-menu, | |||
.vector-icon.mw-ui-icon-wikimedia-appearance, | |||
.vector-icon.mw-ui-icon-userAvatar, | |||
.vector-icon.mw-ui-icon-wikimedia-userAvatar, | |||
.vector-icon.mw-ui-icon-wikimedia-star, | |||
.vector-icon.mw-ui-icon-wikimedia-wikimedia-star, | |||
.vector-icon.mw-ui-icon-wikimedia-speechBubbles, | |||
.vector-icon.mw-ui-icon-wikimedia-edit, | |||
.vector-icon.mw-ui-icon-wikimedia-wikiText, | |||
.vector-icon.mw-ui-icon-wikimedia-watchlist, | |||
.vector-icon.mw-ui-icon-wikimedia-userTalk, | |||
.vector-icon.mw-ui-icon-wikimedia-settings, | |||
.vector-icon.mw-ui-icon-wikimedia-userContributions, | |||
.vector-icon.mw-ui-icon-wikimedia-logOut, | |||
.vector-icon.mw-ui-icon-wikimedia-history { | |||
filter: invert(1) brightness(0.75) !important; | |||
} | |||
.vector-tab-noicon.selected a .vector-icon, | |||
.vector-menu-content-list li.selected a .vector-icon, | |||
.cdx-button--action-progressive .vector-icon { | |||
filter: invert(0.6) sepia(1) saturate(5) hue-rotate(10deg) brightness(1.1) !important; | |||
} | |||
/* Список наблюдения — жёлтая звезда */ | |||
#ca-watch .vector-icon, | |||
#ca-watchstar-sticky-header .vector-icon, | |||
.mw-watchlink .vector-icon { | |||
filter: invert(0.6) sepia(1) saturate(5) hue-rotate(10deg) brightness(1.1) !important; | |||
} | |||
/* Индикатор "нет статьи" */ | |||
.noarticletext p { | |||
color: var(--color-subtle) !important; | |||
line-height: 1.7 !important; | |||
} | |||
/* Скролл-паддинг для sticky header */ | |||
.client-js.vector-sticky-header-enabled { | |||
scroll-padding-top: 3.125rem; | |||
} | |||
/* Скрыть стандартный подложечный фон */ | |||
.vector-column-start, | |||
.vector-column-end { | |||
background-color: transparent !important; | |||
} | |||
/* Fix: content area spacing */ | |||
.vector-body-before-content { | |||
margin-bottom: 0 !important; | |||
} | |||
/* =========================== | |||
ZET+COMPAN FILM INFOBOX | |||
=========================== */ | |||
.zc-infobox { | |||
float: right; | |||
clear: right; | |||
width: 340px; | |||
margin: 0 0 20px 0 !important; /* ← убрали правый отступ */ | |||
background: linear-gradient(180deg, #141414, #0d0d0d) !important; | |||
border: 1px solid rgba(242, 207, 0, 0.35) !important; | |||
border-radius: 16px !important; | |||
color: #d8d8d8 !important; | |||
overflow: hidden; | |||
box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45); | |||
} | |||
.zc-infobox-title { | |||
background: linear-gradient(135deg, #f2cf00, #b89e00) !important; | |||
color: #050505 !important; | |||
font-family: var(--font-family-heading, sans-serif) !important; | |||
font-size: 1.25rem !important; | |||
font-weight: 800 !important; | |||
text-align: center !important; | |||
letter-spacing: -0.02em; | |||
padding: 14px 16px !important; | |||
border-bottom: 1px solid rgba(0, 0, 0, 0.35) !important; | |||
} | |||
.zc-infobox-image { | |||
background: #080808 !important; | |||
text-align: center !important; | |||
padding: 10px !important; | |||
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; | |||
} | |||
.zc-infobox-image img { | |||
border-radius: 12px; | |||
width: 100%; /* растягиваем */ | |||
max-width: 100%; | |||
height: auto; | |||
} | |||
.zc-infobox-caption { | |||
color: #9f9f9f !important; | |||
font-size: 0.8rem !important; | |||
text-align: center !important; | |||
padding: 8px 14px !important; | |||
background: #101010 !important; | |||
border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important; | |||
} | |||
.zc-infobox th { | |||
width: 38%; | |||
background: rgba(255, 255, 255, 0.035) !important; | |||
color: #f2cf00 !important; | |||
font-weight: 700 !important; | |||
text-align: left !important; | |||
vertical-align: top !important; | |||
padding: 9px 12px !important; | |||
border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important; | |||
} | |||
.zc-infobox td { | |||
background: rgba(0, 0, 0, 0.12) !important; | |||
color: #d0d0d0 !important; | |||
vertical-align: top !important; | |||
padding: 9px 12px !important; | |||
border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important; | |||
} | |||
.zc-infobox-section { | |||
background: #1b1b1b !important; | |||
color: #ffe14a !important; | |||
text-align: center !important; | |||
text-transform: uppercase; | |||
letter-spacing: 0.08em; | letter-spacing: 0.08em; | ||
font-size: 0.75rem !important; | font-size: 0.75rem !important; | ||
padding: 10px 12px !important; | padding: 10px 12px !important; | ||
} | } | ||
.zc-status { | .zc-status { | ||
display: inline-block; | display: inline-block; | ||
padding: 3px 8px; | padding: 3px 8px; | ||
border-radius: 999px; | border-radius: 999px; | ||
background: rgba(242, 207, 0, 0.12); | background: rgba(242, 207, 0, 0.12); | ||
border: 1px solid rgba(242, 207, 0, 0.35); | border: 1px solid rgba(242, 207, 0, 0.35); | ||
color: #ffe14a; | color: #ffe14a; | ||
font-weight: 700; | font-weight: 700; | ||
font-size: 0.82rem; | font-size: 0.82rem; | ||
} | } | ||
.zc-infobox code { | .zc-infobox code { | ||
background: #050505 !important; | background: #050505 !important; | ||
color: #ffe14a !important; | color: #ffe14a !important; | ||
border: 1px solid rgba(242, 207, 0, 0.25) !important; | border: 1px solid rgba(242, 207, 0, 0.25) !important; | ||
border-radius: 5px !important; | border-radius: 5px !important; | ||
padding: 2px 5px !important; | padding: 2px 5px !important; | ||
word-break: break-all; | word-break: break-all; | ||
} | } | ||
@media (max-width: 720px) { | |||
.zc-infobox { | |||
float: none; | |||
width: 100%; | |||
margin: 0 0 22px 0; | |||
} | |||
} | |||
/* =========================== | |||
ZET+COMPAN MAIN PAGE | |||
=========================== */ | |||
.page-Main_Page .firstHeading, | |||
.page-Заглавная_страница .firstHeading, | |||
.page-Главная_страница .firstHeading { | |||
display: none !important; | |||
} | |||
.zc-mainpage { | |||
max-width: 1180px; | |||
margin: 0 auto; | |||
} | |||
.zc-hero { | |||
position: relative; | |||
margin-bottom: 28px; | |||
border: 1px solid rgba(242, 207, 0, 0.35); | |||
border-radius: 22px; | |||
overflow: hidden; | |||
background: | |||
radial-gradient(circle at top left, rgba(242, 207, 0, 0.18), transparent 32%), | |||
linear-gradient(135deg, #171717, #070707); | |||
box-shadow: 0 20px 55px rgba(0, 0, 0, 0.45); | |||
} | |||
.zc-hero::before { | |||
content: ""; | |||
position: absolute; | |||
inset: 0; | |||
background-image: | |||
linear-gradient(120deg, rgba(242, 207, 0, 0.08), transparent 45%), | |||
repeating-linear-gradient( | |||
135deg, | |||
rgba(255, 255, 255, 0.025) 0, | |||
rgba(255, 255, 255, 0.025) 1px, | |||
transparent 1px, | |||
transparent 12px | |||
); | |||
pointer-events: none; | |||
} | |||
.zc-hero-inner { | |||
position: relative; | |||
padding: 44px 42px; | |||
} | |||
.zc-hero-kicker { | |||
display: inline-block; | |||
margin-bottom: 14px; | |||
padding: 7px 12px; | |||
border-radius: 999px; | |||
background: rgba(242, 207, 0, 0.12); | |||
border: 1px solid rgba(242, 207, 0, 0.35); | |||
color: #ffe14a; | |||
font-size: 0.78rem; | |||
font-weight: 800; | |||
text-transform: uppercase; | |||
letter-spacing: 0.12em; | |||
} | |||
.zc-hero-title { | |||
margin-bottom: 14px; | |||
color: #f2cf00; | |||
font-family: var(--font-family-heading, sans-serif); | |||
font-size: clamp(2.4rem, 5vw, 5rem); | |||
font-weight: 900; | |||
line-height: 0.95; | |||
letter-spacing: -0.05em; | |||
text-transform: uppercase; | |||
text-shadow: 0 0 28px rgba(242, 207, 0, 0.16); | |||
} | |||
.zc-hero-text { | |||
max-width: 820px; | |||
color: #d6d6d6; | |||
font-size: 1.08rem; | |||
line-height: 1.75; | |||
} | |||
.zc-hero-buttons { | |||
display: flex; | |||
flex-wrap: wrap; | |||
gap: 12px; | |||
margin-top: 24px; | |||
} | |||
.zc-button { | |||
display: inline-block; | |||
padding: 11px 16px; | |||
border-radius: 12px; | |||
background: #181818; | |||
border: 1px solid rgba(255, 255, 255, 0.12); | |||
color: #f0f0f0; | |||
font-weight: 800; | |||
transition: 0.18s ease; | |||
} | |||
.zc-button:hover { | |||
background: #222; | |||
border-color: rgba(242, 207, 0, 0.55); | |||
color: #ffe14a; | |||
text-decoration: none; | |||
transform: translateY(-1px); | |||
} | |||
.zc-button-primary { | |||
background: #f2cf00; | |||
color: #050505; | |||
border-color: #f2cf00; | |||
} | |||
.zc-button-primary:hover { | |||
background: #ffe14a; | |||
color: #050505; | |||
} | |||
.zc-section-title { | |||
margin: 28px 0 16px; | |||
color: #f2cf00; | |||
font-family: var(--font-family-heading, sans-serif); | |||
font-size: 1.35rem; | |||
font-weight: 800; | |||
text-transform: uppercase; | |||
letter-spacing: 0.08em; | |||
} | |||
.zc-card-grid { | |||
display: grid; | |||
grid-template-columns: repeat(3, minmax(0, 1fr)); | |||
gap: 18px; | |||
margin-bottom: 24px; | |||
} | |||
.zc-card { | |||
min-height: 190px; | |||
padding: 22px; | |||
border-radius: 18px; | |||
background: linear-gradient(180deg, #171717, #0f0f0f); | |||
border: 1px solid rgba(255, 255, 255, 0.08); | |||
box-shadow: 0 12px 34px rgba(0, 0, 0, 0.25); | |||
transition: 0.18s ease; | |||
} | |||
.zc-card:hover { | |||
transform: translateY(-3px); | |||
border-color: rgba(242, 207, 0, 0.42); | |||
box-shadow: 0 18px 46px rgba(0, 0, 0, 0.38); | |||
} | |||
.zc-card-title { | |||
margin-bottom: 10px; | |||
color: #f2cf00; | |||
font-family: var(--font-family-heading, sans-serif); | |||
font-size: 1.18rem; | |||
font-weight: 800; | |||
} | |||
.zc-card-text { | |||
color: #bfbfbf; | |||
line-height: 1.65; | |||
font-size: 0.94rem; | |||
} | |||
.zc-card-link { | |||
margin-top: 16px; | |||
font-weight: 800; | |||
} | |||
.zc-two-column { | |||
display: grid; | |||
grid-template-columns: 1fr 1fr; | |||
gap: 18px; | |||
margin-top: 24px; | |||
} | |||
.zc-panel { | |||
padding: 22px; | |||
border-radius: 18px; | |||
background: #111; | |||
border: 1px solid rgba(255, 255, 255, 0.08); | |||
color: #cfcfcf; | |||
} | |||
.zc-panel-title { | |||
margin-bottom: 12px; | |||
color: #ffe14a; | |||
font-family: var(--font-family-heading, sans-serif); | |||
font-size: 1.08rem; | |||
font-weight: 800; | |||
text-transform: uppercase; | |||
letter-spacing: 0.08em; | |||
} | |||
.zc-panel ul { | |||
margin-bottom: 0 !important; | |||
} | |||
.zc-wide-panel { | |||
margin-top: 18px; | |||
border-left: 4px solid #f2cf00; | |||
} | |||
.zc-footer-note { | |||
margin-top: 22px; | |||
padding: 16px 18px; | |||
border-radius: 14px; | |||
background: rgba(242, 207, 0, 0.08); | |||
border: 1px solid rgba(242, 207, 0, 0.25); | |||
color: #d8d8d8; | |||
} | |||
@media (max-width: 980px) { | |||
.zc-card-grid { | |||
grid-template-columns: repeat(2, minmax(0, 1fr)); | |||
} | |||
} | |||
@media (max-width: 720px) { | |||
.zc-hero-inner { | |||
padding: 30px 22px; | |||
} | |||
.zc-card-grid, | |||
.zc-two-column { | |||
grid-template-columns: 1fr; | |||
} | |||
.zc-card { | |||
min-height: auto; | |||
} | |||
} | |||
/* =========================== | |||
ZET+COMPAN INFOBOX POSITION FIX | |||
=========================== */ | |||
.mw-body-content .zc-infobox { | |||
float: right !important; | |||
clear: right !important; | |||
width: 380px !important; | |||
max-width: 380px !important; | |||
margin: 0 0 24px 28px !important; | |||
} | |||
/* Увеличенное изображение внутри инфобокса */ | |||
.mw-body-content .zc-infobox-image img { | |||
width: 100% !important; | |||
max-width: 340px !important; | |||
height: auto !important; | |||
} | |||
/* На мобильных — во всю ширину */ | |||
@media (max-width: 720px) { | |||
.mw-body-content .zc-infobox { | |||
float: none !important; | |||
width: 100% !important; | |||
max-width: 100% !important; | |||
margin: 0 0 22px 0 !important; | |||
} | |||
.mw-body-content .zc-infobox-image img { | |||
max-width: 100% !important; | |||
} | } | ||
} | } | ||
Текущая версия от 22:58, 27 апреля 2026
/* Размещённый здесь CSS будет применяться ко всем темам оформления */
/*
* Zet+Compan Archive — Тёмная тема для MediaWiki Vector 2022
* MediaWiki:Common.css
*/
/* Zet+Compan story box — fixed width behavior */
.zc-story-box {
display: block;
/* КЛЮЧЕВОЕ */
max-width: 720px; /* предел ширины */
width: fit-content; /* подстраивается под текст */
/* чтобы не лез под инфобокс */
clear: left; /* не трогаем правый float */
margin: 22px 0;
padding: 20px 22px;
background:
linear-gradient(180deg, rgba(24,24,24,0.96), rgba(10,10,10,0.96));
border: 1px solid rgba(242, 207, 0, 0.32);
border-left: 5px solid #f2cf00;
border-radius: 16px;
color: #d8d8d8;
line-height: 1.75;
box-shadow: 0 14px 36px rgba(0,0,0,0.35);
}
.zc-story-title {
margin-bottom: 12px;
color: #ffe14a;
font-family: var(--font-family-heading, sans-serif);
font-size: 1.15rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
}
/* ===========================
ZET+COMPAN FULL WIDTH ARTICLE CONTENT
=========================== */
/* Отключаем ограничение ширины Vector 2022 */
html.vector-feature-limited-width-clientpref-1,
html.vector-feature-limited-width-content-enabled,
body.skin-vector {
--max-width-content-container: none !important;
--max-width-page-container: none !important;
}
/* Вся карточка страницы */
body > .mw-page-container,
body > .mw-page-container > .mw-page-container-inner,
.mw-content-container,
#content.mw-body,
.mw-body {
width: 100% !important;
max-width: none !important;
}
/* Главное: растягиваем bodyContent и сам mw-content-text */
#bodyContent,
#mw-content-text,
#mw-content-text.mw-body-content,
#mw-content-text > .mw-content-ltr.mw-parser-output,
#mw-content-text > .mw-parser-output,
.mw-parser-output {
width: 100% !important;
max-width: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box !important;
}
/* Заголовок и панель вкладок тоже на всю ширину */
.mw-body-header,
.vector-page-titlebar,
.vector-page-toolbar,
.vector-page-toolbar-container,
.vector-body-before-content,
#contentSub {
width: 100% !important;
max-width: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Убираем пустые боковые колонки Vector */
.vector-column-start,
.vector-column-end {
display: none !important;
}
/* Принудительно заставляем главный контент занять всю сетку */
#content.mw-body {
display: block !important;
}
/* Инфобокс остаётся справа */
.mw-body-content .zc-infobox {
float: right !important;
clear: right !important;
width: 380px !important;
max-width: 380px !important;
margin: 0 0 24px 28px !important;
}
/* ===========================
ZET+COMPAN WIDER PAGE CONTAINER
=========================== */
body > div.mw-page-container {
max-width: 95vw !important;
width: 95vw !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* ===========================
ZET+COMPAN EPISODE CHRONOLOGY — CLEAN VERSION
=========================== */
.zc-episode-chronology {
padding: 0 !important;
background: #0b0b0b !important;
}
.zc-episode-chronology-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
width: 100%;
background: #0b0b0b;
}
.zc-episode-chronology-cell {
min-height: 74px;
padding: 12px 10px;
text-align: center;
background: transparent !important;
border: none !important;
border-right: 1px solid rgba(255, 255, 255, 0.14) !important;
}
.zc-episode-chronology-cell:last-child {
border-right: none !important;
}
.zc-episode-chronology-label {
margin-bottom: 7px;
color: #f2cf00;
font-size: 0.68rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.zc-episode-chronology-link {
color: #dcdcdc;
font-size: 0.82rem;
font-weight: 700;
line-height: 1.25;
word-break: break-word;
}
/* Ссылки внутри хронологии */
.zc-episode-chronology-link a {
color: #ffe14a !important;
border-bottom: none !important;
text-decoration: none !important;
}
.zc-episode-chronology-link a:hover {
color: #fff2a0 !important;
text-decoration: none !important;
}
/* Только текущая серия подсвечена */
.zc-episode-current {
background:
radial-gradient(circle at top, rgba(242, 207, 0, 0.16), transparent 65%),
linear-gradient(180deg, rgba(242, 207, 0, 0.08), rgba(0, 0, 0, 0)) !important;
}
.zc-episode-current .zc-episode-chronology-link {
color: #ffe14a;
}
/* Боковые серии без подсветки */
.zc-episode-previous,
.zc-episode-next {
background: transparent !important;
box-shadow: none !important;
}
/* Если ссылка красная, потому что страницы ещё нет */
.zc-episode-chronology-link a.new {
color: #e55a4f !important;
}
/* Мобильная версия */
@media (max-width: 720px) {
.zc-episode-chronology-grid {
grid-template-columns: 1fr;
}
.zc-episode-chronology-cell {
border-right: none !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
}
.zc-episode-chronology-cell:last-child {
border-bottom: none !important;
}
}
/* Инфобокс серии сериала */
.zc-infobox-title {
text-align: center;
font-size: 21px;
font-weight: 700;
line-height: 1.2;
margin-bottom: 6px;
color: #f3d27a;
}
.zc-infobox-subtitle {
text-align: center;
font-size: 13px;
color: #bdb7a5;
margin-bottom: 12px;
font-style: italic;
}
.zc-infobox-caption {
text-align: center;
font-size: 12px;
color: #aaa;
margin-top: 6px;
}
.zc-infobox-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
.zc-infobox-table th,
.zc-infobox-table td {
padding: 7px 4px;
vertical-align: top;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.zc-infobox-table th {
width: 42%;
text-align: left;
color: #d6b25e;
font-weight: 600;
}
.zc-infobox-table td {
color: #e8e8e8;
}
@media (max-width: 720px) {
.zc-infobox {
float: none;
width: auto;
margin: 0 0 18px 0;
}
}
/* Скрыть заголовок только на главной странице */
.page-Заглавная_страница .firstHeading {
display: none !important;
}
/* ===== Zet+Compan Custom Logo ===== */
/* Скрываем стандартную иконку */
.mw-logo-icon {
display: none !important;
}
/* Контейнер логотипа */
.mw-logo {
display: flex;
align-items: center;
gap: 10px;
}
/* Подставляем свой логотип */
.mw-logo::before {
content: "";
display: inline-block;
width: 48px;
height: 48px;
background-image: url("/images/logo.svg");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
filter: drop-shadow(0 0 6px rgba(242, 207, 0, 0.25));
}
/* ===========================
ИНФОБОКС — ПОЛНОМЕТРАЖНЫЕ ФИЛЬМЫ
=========================== */
.pi-europa .pi-border-color,
.pi-theme-film .pi-border-color {
border-color: var(--zc-border-light) !important;
}
/* Основной контейнер */
.pi-europa .pi-background,
.pi-theme-film .pi-background {
background-color: var(--zc-dark-2) !important;
border: 1px solid var(--zc-border-light) !important;
border-radius: 14px !important;
overflow: hidden;
}
/* Заголовок (название фильма) */
.pi-europa .pi-title,
.pi-theme-film .pi-title {
background: linear-gradient(135deg, var(--zc-dark-3), var(--zc-dark-2)) !important;
color: var(--zc-yellow) !important;
font-family: var(--font-family-heading) !important;
font-size: 1.35rem !important;
font-weight: 700 !important;
text-align: center !important;
padding: 16px 20px !important;
border-bottom: 1px solid var(--zc-border-light) !important;
letter-spacing: -0.01em !important;
}
/* Изображение (постер) */
.pi-europa .pi-image,
.pi-theme-film .pi-image {
background-color: var(--zc-dark-3) !important;
padding: 12px !important;
border-bottom: 1px solid var(--zc-border) !important;
}
.pi-europa .pi-image-thumbnail,
.pi-theme-film .pi-image-thumbnail {
border-radius: 8px !important;
border: 1px solid var(--zc-border) !important;
}
.pi-europa .pi-image-caption,
.pi-theme-film .pi-image-caption {
color: var(--color-muted) !important;
font-size: 0.78rem !important;
text-align: center !important;
margin-top: 6px !important;
}
/* Заголовки секций (Жанр, Создатели и т.д.) */
.pi-europa .pi-header,
.pi-theme-film .pi-header {
background-color: var(--zc-dark-3) !important;
color: var(--zc-yellow) !important;
font-family: var(--font-family-heading) !important;
font-size: 0.82rem !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
padding: 8px 16px !important;
border-bottom: 1px solid var(--zc-border) !important;
border-top: 1px solid var(--zc-border) !important;
}
.pi-europa .pi-header:first-of-type,
.pi-theme-film .pi-header:first-of-type {
border-top: none !important;
}
/* Строки данных */
.pi-europa .pi-data,
.pi-theme-film .pi-data {
border-bottom: 1px solid var(--zc-border) !important;
padding: 0 !important;
}
.pi-europa .pi-data:last-child,
.pi-theme-film .pi-data:last-child {
border-bottom: none !important;
}
/* Ярлык (Название поля слева) */
.pi-europa .pi-data-label,
.pi-theme-film .pi-data-label {
background-color: var(--zc-dark-3) !important;
color: var(--color-subtle) !important;
font-family: var(--font-family-base) !important;
font-size: 0.82rem !important;
font-weight: 600 !important;
padding: 10px 14px !important;
flex-basis: 35% !important;
border-right: 1px solid var(--zc-border) !important;
}
/* Значение (Текст поля справа) */
.pi-europa .pi-data-value,
.pi-theme-film .pi-data-value {
color: var(--color-base--subtle) !important;
font-size: 0.88rem !important;
padding: 10px 14px !important;
line-height: 1.5 !important;
}
/* Ссылки внутри значений */
.pi-europa .pi-data-value a,
.pi-theme-film .pi-data-value a {
color: var(--zc-yellow) !important;
}
.pi-europa .pi-data-value a:hover,
.pi-theme-film .pi-data-value a:hover {
color: var(--zc-yellow-soft) !important;
text-decoration: none !important;
}
/* Списки внутри инфобокса */
.pi-europa .pi-data-value ul,
.pi-theme-film .pi-data-value ul {
list-style: none !important;
padding-left: 0 !important;
margin: 0 !important;
}
.pi-europa .pi-data-value ul li,
.pi-theme-film .pi-data-value ul li {
padding: 2px 0 !important;
position: relative;
}
.pi-europa .pi-data-value ul li::before,
.pi-theme-film .pi-data-value ul li::before {
content: '•';
color: var(--zc-yellow-dim);
margin-right: 8px;
font-weight: bold;
}
/* Навигационная нижняя панель */
.pi-europa .pi-navigation,
.pi-theme-film .pi-navigation {
background-color: var(--zc-dark-3) !important;
border-top: 1px solid var(--zc-border-light) !important;
text-align: center !important;
padding: 10px !important;
}
.pi-europa .pi-navigation a,
.pi-theme-film .pi-navigation a {
color: var(--zc-yellow) !important;
font-weight: 600 !important;
font-size: 0.85rem !important;
}
/* Мобильная адаптация (stacked) */
@media (max-width: 720px) {
.pi-europa .pi-data-label,
.pi-theme-film .pi-data-label {
flex-basis: 100% !important;
border-right: none !important;
border-bottom: 1px solid var(--zc-border) !important;
padding: 8px 14px 4px !important;
}
.pi-europa .pi-data-value,
.pi-theme-film .pi-data-value {
padding: 4px 14px 10px !important;
}
}
/* ===========================
ИМПОРТ ШРИФТОВ
=========================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');
/* ===========================
CSS-ПЕРЕМЕННЫЕ MEDIAWIKI
=========================== */
:root {
/* Основные цвета */
--background-color-base: #0a0a0a;
--background-color-base-fixed: #0a0a0a;
--background-color-neutral: #111111;
--background-color-neutral-subtle: #161616;
--background-color-interactive: #1a1a1a;
--background-color-interactive-subtle: #161616;
--background-color-interactive-subtle--hover: #222222;
--background-color-interactive-subtle--active: #1a1a1a;
--background-color-disabled: #1e1e1e;
--background-color-disabled-subtle: #141414;
--background-color-progressive: #f2cf00;
--background-color-progressive-subtle: rgba(242, 207, 0, 0.1);
--background-color-progressive-subtle--hover: rgba(242, 207, 0, 0.18);
--background-color-progressive-subtle--active: rgba(242, 207, 0, 0.25);
--background-color-progressive--hover: #ffe14a;
--background-color-progressive--active: #b89e00;
--background-color-destructive: #bf3c2c;
--background-color-destructive-subtle: rgba(191, 60, 44, 0.15);
--background-color-destructive-subtle--hover: rgba(191, 60, 44, 0.25);
--background-color-destructive-subtle--active: rgba(191, 60, 44, 0.35);
--background-color-destructive--hover: #9f3526;
--background-color-destructive--active: #612419;
--background-color-backdrop-light: rgba(0, 0, 0, 0.65);
--background-color-error-subtle: rgba(191, 60, 44, 0.15);
--background-color-error-subtle--hover: rgba(191, 60, 44, 0.25);
--background-color-success: #177860;
--background-color-success-subtle: rgba(23, 120, 96, 0.15);
--background-color-notice: #202122;
--background-color-notice-subtle: rgba(23, 120, 96, 0.15);
/* Текст */
--color-base: #e8e8e8;
--color-base--subtle: #c0c0c0;
--color-base--emphasized: #f5f5f5;
--color-base--disabled: #555555;
--color-base--inverted: #0a0a0a;
--color-base--inverted--subtle: #333333;
--color-base--placeholder: #666666;
--color-base--readable: #e8e8e8;
--color-inverted: #e8e8e8;
--color-inverted--subtle: #a0a0a0;
--color-inverted-fixed: #000000;
--color-subtle: #888888;
--color-muted: #5a5a5a;
--color-disabled: #555555;
--color-disabled-emphasized: #666666;
--color-placeholder: #666666;
--color-progressive: #f2cf00;
--color-progressive--hover: #ffe14a;
--color-progressive--active: #b89e00;
--color-progressive--focus: #f2cf00;
--color-destructive: #e55a4f;
--color-destructive--hover: #ff7a6e;
--color-destructive--active: #bf3c2c;
--color-destructive--focus: #e55a4f;
--color-error: #e55a4f;
--color-error--hover: #ff7a6e;
--color-success: #4aba8a;
--color-success--hover: #5fd4a0;
--color-warning: #f2cf00;
/* Рамки */
--border-color-base: rgba(255, 255, 255, 0.08);
--border-color-subtle: rgba(255, 255, 255, 0.06);
--border-color-muted: rgba(255, 255, 255, 0.12);
--border-color-interactive: rgba(255, 255, 255, 0.15);
--border-color-interactive--hover: rgba(255, 255, 255, 0.25);
--border-color-interactive--active: rgba(255, 255, 255, 0.35);
--border-color-progressive: rgba(242, 207, 0, 0.5);
--border-color-progressive--hover: #f2cf00;
--border-color-progressive--active: #b89e00;
--border-color-progressive--focus: #f2cf00;
--border-color-destructive: rgba(191, 60, 44, 0.5);
--border-color-destructive--hover: #e55a4f;
--border-color-destructive--active: #bf3c2c;
--border-color-destructive--focus: #e55a4f;
--border-color-error: #e55a4f;
--border-color-error--hover: #ff7a6e;
--border-color-transparent: transparent;
--border-color-disabled: rgba(255, 255, 255, 0.05);
/* Фокус и тени */
--box-shadow-color-progressive--focus: #f2cf00;
--box-shadow-color-destructive--focus: #e55a4f;
--box-shadow-color-inverted: rgba(0, 0, 0, 0.8);
--box-shadow-color-alpha-base: rgba(0, 0, 0, 0.35);
--box-shadow-color-transparent: transparent;
/* Иконки */
--filter-invert-icon: 1;
--opacity-icon-base: 0.7;
--opacity-icon-base--disabled: 0.35;
--opacity-icon-placeholder: 0.45;
/* Zet+Compan кастомные переменные */
--zc-yellow: #f2cf00;
--zc-yellow-soft: #ffe14a;
--zc-yellow-dim: #b89e00;
--zc-yellow-glow: rgba(242, 207, 0, 0.12);
--zc-black: #050505;
--zc-dark: #0a0a0a;
--zc-dark-2: #111111;
--zc-dark-3: #181818;
--zc-dark-4: #1e1e1e;
--zc-border: rgba(255, 255, 255, 0.07);
--zc-border-light: rgba(255, 255, 255, 0.12);
/* Шрифты */
--font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-family-heading: 'Space Grotesk', 'Inter', sans-serif;
--font-family-serif: 'Linux Libertine', 'Georgia', 'Times', serif;
--font-size-small: 0.8125rem;
--font-size-medium: 0.875rem;
--font-size-large: 1rem;
--font-size-x-large: 1.25rem;
--font-size-xx-large: 1.5625rem;
--line-height-content: 1.65;
--line-height-heading: 1.3;
}
/* ===========================
БАЗОВЫЕ ЭЛЕМЕНТЫ
=========================== */
html {
scroll-behavior: smooth;
}
body {
background-color: var(--zc-black) !important;
color: var(--color-base);
font-family: var(--font-family-base);
}
/* Шум-оверлей для текстуры */
body::before {
content: '';
position: fixed;
inset: 0;
z-index: 99999;
pointer-events: none;
opacity: 0.02;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-repeat: repeat;
}
a {
color: var(--zc-yellow);
text-decoration: none;
}
a:hover {
color: var(--zc-yellow-soft);
text-decoration: underline;
}
a:visited {
color: var(--zc-yellow-dim);
}
a:visited:hover {
color: var(--zc-yellow-soft);
}
a.new,
a.new:visited {
color: #e55a4f;
}
a.new:hover {
color: #ff7a6e;
}
/* ===========================
ХЕДЕР
=========================== */
.vector-header-container {
background-color: rgba(5, 5, 5, 0.92) !important;
backdrop-filter: blur(20px) !important;
-webkit-backdrop-filter: blur(20px) !important;
border-bottom: 1px solid var(--zc-border) !important;
}
.mw-header {
background-color: transparent !important;
}
/* Логотип */
.mw-logo {
gap: 10px !important;
}
.mw-logo-wordmark {
font-family: var(--font-family-heading) !important;
font-size: 1.15rem !important;
font-weight: 700 !important;
letter-spacing: -0.02em !important;
color: var(--zc-yellow) !important;
}
.mw-logo-icon {
border-radius: 8px !important;
}
/* Стик-хедер */
.vector-sticky-header-container {
background-color: rgba(5, 5, 5, 0.96) !important;
backdrop-filter: blur(20px) !important;
-webkit-backdrop-filter: blur(20px) !important;
border-bottom: 1px solid var(--zc-border-light) !important;
}
.vector-sticky-header {
border-bottom-color: transparent !important;
}
.vector-sticky-header-context-bar-primary {
font-family: var(--font-family-heading) !important;
color: var(--color-base--emphasized) !important;
}
/* ===========================
ПОИСК
=========================== */
.vector-search-box-vue .cdx-typeahead-search__form {
background-color: var(--zc-dark-3) !important;
border: 1px solid var(--zc-border-light) !important;
border-radius: 8px !important;
overflow: hidden;
}
.vector-search-box-vue .cdx-search-input__input-wrapper .cdx-text-input {
border-radius: 0 !important;
border: none !important;
}
.vector-search-box-vue .cdx-text-input__input {
background-color: transparent !important;
color: var(--color-base) !important;
border: none !important;
box-shadow: none !important;
font-family: var(--font-family-base) !important;
}
.vector-search-box-vue .cdx-text-input__input::placeholder {
color: var(--color-muted) !important;
}
.vector-search-box-vue .cdx-text-input__input:focus {
outline: none !important;
box-shadow: none !important;
border-color: transparent !important;
}
.vector-search-box-vue .cdx-search-input__end-button {
background-color: var(--zc-yellow) !important;
color: #000 !important;
border-color: transparent !important;
border-radius: 0 !important;
font-weight: 700 !important;
}
.vector-search-box-vue .cdx-search-input__end-button:hover {
background-color: var(--zc-yellow-soft) !important;
}
/* Меню поиска (dropdown результатов) */
.cdx-typeahead-search__menu {
background-color: var(--zc-dark-2) !important;
border: 1px solid var(--zc-border-light) !important;
border-top: none !important;
border-radius: 0 0 8px 8px !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}
.cdx-menu-item--enabled {
color: var(--color-base) !important;
}
.cdx-menu-item--enabled.cdx-menu-item--highlighted {
background-color: var(--zc-dark-3) !important;
}
.cdx-menu-item--enabled.cdx-menu-item--selected {
background-color: var(--zc-yellow-glow) !important;
color: var(--zc-yellow) !important;
}
.cdx-menu-item__text__description {
color: var(--color-subtle) !important;
}
.cdx-typeahead-search__search-footer {
color: var(--color-subtle) !important;
}
.cdx-typeahead-search__search-footer__icon {
color: var(--color-muted) !important;
}
/* ===========================
НАВИГАЦИЯ И ДРОПДАУНЫ
=========================== */
.vector-dropdown-content {
background-color: var(--zc-dark-2) !important;
border: 1px solid var(--zc-border-light) !important;
border-radius: 10px !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}
.vector-main-menu-dropdown .vector-dropdown-content {
border-radius: 0 0 10px 10px !important;
}
.vector-dropdown-label {
color: var(--color-inverted--subtle) !important;
border-radius: 8px !important;
}
.vector-dropdown-label:hover {
background-color: rgba(255, 255, 255, 0.06) !important;
color: var(--color-base--emphasized) !important;
}
/* Меню навигации (боковая панель) */
.vector-main-menu,
.vector-page-tools {
background-color: transparent !important;
padding: 0 !important;
}
.vector-menu-heading {
font-family: var(--font-family-heading) !important;
font-size: 0.72rem !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.1em !important;
color: var(--zc-yellow) !important;
padding: 16px 12px 6px !important;
border-bottom: none !important;
}
.vector-menu-content-list li a {
color: var(--color-base--subtle) !important;
font-size: 0.88rem !important;
padding: 7px 12px !important;
border-radius: 6px !important;
transition: background-color 0.15s ease, color 0.15s ease !important;
}
.vector-menu-content-list li a:hover {
background-color: rgba(255, 255, 255, 0.05) !important;
color: var(--color-base--emphasized) !important;
text-decoration: none !important;
}
.vector-menu-content-list li a .vector-icon {
color: inherit !important;
}
.vector-menu-content-list li.selected a,
.vector-menu-content-list li.selected a:visited {
color: var(--zc-yellow) !important;
background-color: var(--zc-yellow-glow) !important;
}
/* Pinnable заголовки */
.vector-pinnable-header {
background-color: var(--zc-dark-2) !important;
border: 1px solid var(--zc-border) !important;
border-radius: 10px !important;
padding: 10px 14px !important;
}
.vector-pinnable-header-label {
font-family: var(--font-family-heading) !important;
font-weight: 600 !important;
color: var(--color-base--subtle) !important;
}
.vector-pinnable-header-toggle-button {
color: var(--zc-yellow) !important;
font-size: 0.8rem !important;
}
.vector-pinnable-header-toggle-button:hover {
color: var(--zc-yellow-soft) !important;
}
/* ===========================
ВКЛАДКИ (ТАБЫ)
=========================== */
.vector-menu-tabs {
background-color: transparent !important;
}
.vector-menu-tabs .vector-menu-content-list {
gap: 4px !important;
}
.vector-tab-noicon a {
color: var(--color-subtle) !important;
font-size: 0.85rem !important;
font-weight: 500 !important;
padding: 6px 12px !important;
border-radius: 6px !important;
border: none !important;
transition: all 0.15s ease !important;
}
.vector-tab-noicon a:hover {
background-color: rgba(255, 255, 255, 0.05) !important;
color: var(--color-base--emphasized) !important;
text-decoration: none !important;
}
.vector-tab-noicon.selected a {
color: var(--zc-yellow) !important;
background-color: var(--zc-yellow-glow) !important;
border-bottom-color: transparent !important;
box-shadow: none !important;
}
.vector-tab-noicon.selected a:visited {
color: var(--zc-yellow) !important;
}
/* ===========================
КНОПКИ (CDX)
=========================== */
.cdx-button:enabled,
.cdx-button.cdx-button--fake-button--enabled {
background-color: var(--zc-dark-3);
color: var(--color-base--subtle);
border-color: var(--zc-border-light);
border-radius: 6px;
font-family: var(--font-family-base);
font-size: var(--font-size-medium);
}
.cdx-button:enabled:hover,
.cdx-button.cdx-button--fake-button--enabled:hover {
background-color: var(--zc-dark-4);
border-color: rgba(255, 255, 255, 0.2);
color: var(--color-base--emphasized);
}
.cdx-button:enabled:active,
.cdx-button.cdx-button--fake-button--enabled:active {
background-color: #252525;
}
.cdx-button:enabled.cdx-button--action-progressive,
.cdx-button.cdx-button--fake-button--enabled.cdx-button--action-progressive {
background-color: var(--zc-yellow-glow);
color: var(--zc-yellow);
border-color: rgba(242, 207, 0, 0.3);
}
.cdx-button:enabled.cdx-button--action-progressive:hover,
.cdx-button.cdx-button--fake-button--enabled.cdx-button--action-progressive:hover {
background-color: rgba(242, 207, 0, 0.2);
color: var(--zc-yellow-soft);
border-color: var(--zc-yellow);
}
.cdx-button:enabled.cdx-button--weight-primary.cdx-button--action-progressive,
.cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-primary.cdx-button--action-progressive {
background-color: var(--zc-yellow);
color: #000;
border-color: transparent;
}
.cdx-button:enabled.cdx-button--weight-primary.cdx-button--action-progressive:hover,
.cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-primary.cdx-button--action-progressive:hover {
background-color: var(--zc-yellow-soft);
}
.cdx-button:enabled.cdx-button--weight-quiet,
.cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-quiet {
background-color: transparent;
border-color: transparent;
color: var(--color-subtle);
}
.cdx-button:enabled.cdx-button--weight-quiet:hover,
.cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-quiet:hover {
background-color: rgba(255, 255, 255, 0.05);
color: var(--color-base--emphasized);
}
.cdx-button:disabled,
.cdx-button.cdx-button--fake-button--disabled {
background-color: var(--zc-dark-3);
color: var(--color-disabled);
border-color: transparent;
}
.cdx-button:enabled:focus:not(:active),
.cdx-button.cdx-button--fake-button--enabled:focus:not(:active) {
border-color: var(--zc-yellow);
box-shadow: inset 0 0 0 1px var(--zc-yellow);
}
/* ===========================
ОСНОВНОЙ КОНТЕНТ
=========================== */
.mw-page-container {
background-color: var(--zc-black) !important;
}
.mw-page-container-inner {
background-color: transparent !important;
}
.mw-content-container {
background-color: transparent !important;
}
.mw-body {
background-color: var(--zc-dark) !important;
border: 1px solid var(--zc-border) !important;
border-radius: 16px !important;
color: var(--color-base) !important;
padding: 32px !important;
font-size: var(--font-size-large) !important;
line-height: var(--line-height-content) !important;
}
/* Заголовок страницы */
.firstHeading {
font-family: var(--font-family-heading) !important;
font-size: 2rem !important;
font-weight: 700 !important;
color: var(--color-base--emphasized) !important;
letter-spacing: -0.02em !important;
line-height: var(--line-height-heading) !important;
border-bottom: 1px solid var(--zc-border-light) !important;
padding-bottom: 12px !important;
margin-bottom: 24px !important;
}
.vector-page-titlebar {
background-color: transparent !important;
}
/* Подпись "Материал из..." */
#siteSub {
color: var(--color-muted) !important;
font-size: 0.78rem !important;
margin-bottom: 16px !important;
}
/* ===========================
КОНТЕНТ ВИКИ-СТРАНИЦ
=========================== */
.mw-body-content {
color: var(--color-base) !important;
}
.mw-body-content h1,
.mw-body-content h2,
.mw-body-content h3,
.mw-body-content h4,
.mw-body-content h5,
.mw-body-content h6 {
font-family: var(--font-family-heading) !important;
color: var(--color-base--emphasized) !important;
letter-spacing: -0.01em !important;
line-height: var(--line-height-heading) !important;
border-bottom-color: var(--zc-border-light) !important;
}
.mw-body-content h1 {
font-size: 1.75rem !important;
border-bottom: 1px solid var(--zc-border-light) !important;
padding-bottom: 8px !important;
}
.mw-body-content h2 {
font-size: 1.4rem !important;
border-bottom: 1px solid var(--zc-border) !important;
padding-bottom: 6px !important;
margin-top: 1.5em !important;
}
.mw-body-content h3 {
font-size: 1.15rem !important;
margin-top: 1.3em !important;
}
.mw-body-content h4 {
font-size: 1.05rem !important;
}
.mw-body-content p {
color: var(--color-base--subtle) !important;
line-height: 1.75 !important;
margin-bottom: 1em !important;
}
.mw-body-content ul,
.mw-body-content ol {
color: var(--color-base--subtle) !important;
margin-bottom: 1em !important;
}
.mw-body-content li {
margin-bottom: 4px !important;
}
.mw-body-content li::marker {
color: var(--zc-yellow-dim) !important;
}
/* Ссылки внутри контента */
.mw-body-content a {
color: var(--zc-yellow) !important;
text-decoration: none !important;
border-bottom: 1px solid transparent !important;
transition: border-color 0.15s ease !important;
}
.mw-body-content a:hover {
border-bottom-color: var(--zc-yellow) !important;
text-decoration: none !important;
}
.mw-body-content a:visited {
color: var(--zc-yellow-dim) !important;
}
.mw-body-content a:visited:hover {
border-bottom-color: var(--zc-yellow-dim) !important;
}
.mw-body-content a.new {
color: #e55a4f !important;
}
.mw-body-content a.new:visited {
color: #c0403a !important;
}
/* Внешние ссылки */
.mw-body-content a.external {
color: var(--zc-yellow) !important;
}
.mw-body-content a.external::after {
filter: invert(1) brightness(0.7) !important;
}
/* ===========================
ТАБЛИЦЫ
=========================== */
.mw-body-content table {
background-color: var(--zc-dark-2) !important;
border: 1px solid var(--zc-border-light) !important;
border-radius: 10px !important;
overflow: hidden;
color: var(--color-base--subtle) !important;
margin-bottom: 1.5em !important;
}
.mw-body-content table th {
background-color: var(--zc-dark-3) !important;
color: var(--color-base--emphasized) !important;
font-family: var(--font-family-heading) !important;
font-weight: 600 !important;
font-size: 0.88rem !important;
border-bottom: 1px solid var(--zc-border-light) !important;
padding: 10px 14px !important;
}
.mw-body-content table td {
border-bottom: 1px solid var(--zc-border) !important;
padding: 8px 14px !important;
}
.mw-body-content table tr:last-child td {
border-bottom: none !important;
}
.mw-body-content table.wikitable {
background-color: var(--zc-dark-2) !important;
border-color: var(--zc-border-light) !important;
}
.mw-body-content table.wikitable > tr > th,
.mw-body-content table.wikitable > * > tr > th {
background-color: var(--zc-dark-3) !important;
border-color: var(--zc-border-light) !important;
}
.mw-body-content table.wikitable > tr > td,
.mw-body-content table.wikitable > * > tr > td {
border-color: var(--zc-border) !important;
}
/* ===========================
INFOBOX И ПЛАВАЮЩИЕ БЛОКИ
=========================== */
.infobox,
.mw-body-content .infobox {
background-color: var(--zc-dark-2) !important;
border: 1px solid var(--zc-border-light) !important;
border-radius: 12px !important;
color: var(--color-base--subtle) !important;
overflow: hidden;
}
.infobox-title,
.infobox-header,
.mw-body-content .infobox-title,
.mw-body-content .infobox-header {
background-color: var(--zc-dark-3) !important;
color: var(--zc-yellow) !important;
font-family: var(--font-family-heading) !important;
font-weight: 600 !important;
border-bottom: 1px solid var(--zc-border-light) !important;
}
.infobox-above,
.infobox-below,
.infobox-image,
.infobox-full-data,
.mw-body-content .infobox-above,
.mw-body-content .infobox-below,
.mw-body-content .infobox-image,
.mw-body-content .infobox-full-data {
border-bottom-color: var(--zc-border) !important;
}
.infobox-label {
background-color: var(--zc-dark-3) !important;
color: var(--color-base--subtle) !important;
font-weight: 600 !important;
border-color: var(--zc-border) !important;
}
.infobox-data {
background-color: var(--zc-dark-2) !important;
color: var(--color-base--subtle) !important;
border-color: var(--zc-border) !important;
}
/* ===========================
КОД И ПРЕФОРМАТИРОВАНИЕ
=========================== */
.mw-body-content code {
background-color: var(--zc-dark-3) !important;
border: 1px solid var(--zc-border-light) !important;
border-radius: 4px !important;
color: var(--zc-yellow-soft) !important;
padding: 1px 6px !important;
font-size: 0.9em !important;
}
.mw-body-content pre,
.mw-body-content .mw-code {
background-color: var(--zc-dark-2) !important;
border: 1px solid var(--zc-border-light) !important;
border-radius: 10px !important;
color: var(--color-base--subtle) !important;
padding: 16px !important;
overflow-x: auto;
}
.mw-body-content pre code,
.mw-body-content .mw-code code {
background-color: transparent !important;
border: none !important;
color: inherit !important;
padding: 0 !important;
}
/* ===========================
ЦИТАТЫ
=========================== */
.mw-body-content blockquote {
border-left: 3px solid var(--zc-yellow-dim) !important;
background-color: var(--zc-dark-3) !important;
color: var(--color-base--subtle) !important;
padding: 12px 20px !important;
margin: 1em 0 !important;
border-radius: 0 8px 8px 0 !important;
}
/* ===========================
HR РАЗДЕЛИТЕЛЬ
=========================== */
.mw-body-content hr {
border-color: var(--zc-border-light) !important;
border-style: solid !important;
border-width: 0 0 1px 0 !important;
margin: 1.5em 0 !important;
}
/* ===========================
КАТЕГОРИИ
=========================== */
#catlinks {
background-color: var(--zc-dark-2) !important;
border: 1px solid var(--zc-border) !important;
border-radius: 10px !important;
padding: 12px 16px !important;
margin-top: 24px !important;
}
#catlinks .mw-normal-catlinks {
color: var(--color-subtle) !important;
}
#catlinks .mw-normal-catlinks a {
color: var(--zc-yellow) !important;
}
.catlinks-allhidden {
display: none !important;
}
/* ===========================
СООБЩЕНИЯ / ПРЕДУПРЕЖДЕНИЯ
=========================== */
.mw-message-box,
.errorbox,
.warningbox,
.successbox,
.infobox {
border-radius: 10px !important;
font-size: var(--font-size-medium) !important;
}
.errorbox {
background-color: var(--background-color-destructive-subtle) !important;
border-color: rgba(191, 60, 44, 0.4) !important;
color: var(--color-destructive) !important;
}
.warningbox {
background-color: rgba(242, 207, 0, 0.08) !important;
border-color: rgba(242, 207, 0, 0.3) !important;
color: var(--zc-yellow-soft) !important;
}
.successbox {
background-color: var(--background-color-success-subtle) !important;
border-color: rgba(23, 120, 96, 0.4) !important;
color: var(--color-success) !important;
}
.infobox {
background-color: var(--zc-dark-3) !important;
border-color: var(--zc-border-light) !important;
color: var(--color-base--subtle) !important;
}
.noarticletext {
color: var(--color-subtle) !important;
padding: 20px !important;
}
/* ===========================
ТОК (ОГЛАВЛЕНИЕ)
=========================== */
.vector-toc {
background-color: var(--zc-dark-2) !important;
border: 1px solid var(--zc-border) !important;
border-radius: 12px !important;
padding: 16px !important;
}
.vector-toc .vector-toc-heading {
font-family: var(--font-family-heading) !important;
font-weight: 700 !important;
color: var(--zc-yellow) !important;
font-size: 0.85rem !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
}
.vector-toc .vector-toc-list-item a {
color: var(--color-base--subtle) !important;
font-size: 0.88rem !important;
padding: 4px 8px !important;
border-radius: 4px !important;
transition: all 0.15s ease !important;
border-bottom: none !important;
}
.vector-toc .vector-toc-list-item a:hover {
background-color: rgba(255, 255, 255, 0.04) !important;
color: var(--color-base--emphasized) !important;
}
.vector-toc .vector-toc-list-item.vector-toc-level-1-active > a {
color: var(--zc-yellow) !important;
font-weight: 600 !important;
}
.vector-toc .vector-toc-list-item .vector-toc-list-item {
margin-left: 16px !important;
}
/* ===========================
ИСТОРИЯ / ДИФФ
=========================== */
.mw-diff-wrapper,
.diff {
background-color: var(--zc-dark) !important;
border-color: var(--zc-border-light) !important;
border-radius: 10px !important;
}
.diff-header,
.diff-otitle,
.diff-ntitle {
background-color: var(--zc-dark-3) !important;
border-bottom-color: var(--zc-border) !important;
color: var(--color-base--subtle) !important;
}
.diff-addedline {
background-color: rgba(23, 120, 96, 0.1) !important;
border-color: rgba(23, 120, 96, 0.25) !important;
color: var(--color-success) !important;
}
.diff-deletedline {
background-color: rgba(191, 60, 44, 0.1) !important;
border-color: rgba(191, 60, 44, 0.25) !important;
color: var(--color-destructive) !important;
}
.diff-context {
background-color: var(--zc-dark-2) !important;
border-color: var(--zc-border) !important;
color: var(--color-subtle) !important;
}
/* ===========================
РЕДАКТОР
=========================== */
.ve-init-mw-desktopArticleTarget-toolbarPlaceholder-bar,
.ve-init-mw-desktopArticleTarget-toolbar .ve-ui-toolbar > .oo-ui-toolbar-bar {
background-color: var(--zc-dark-2) !important;
border-bottom-color: var(--zc-border-light) !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}
.editOptions {
background-color: var(--zc-dark-2) !important;
border-color: var(--zc-border-light) !important;
border-radius: 10px !important;
padding: 16px !important;
color: var(--color-base--subtle) !important;
}
#wpTextbox1 {
background-color: var(--zc-dark-3) !important;
border: 1px solid var(--zc-border-light) !important;
border-radius: 8px !important;
color: var(--color-base) !important;
font-family: 'Fira Code', 'Consolas', monospace !important;
font-size: 0.875rem !important;
padding: 16px !important;
}
#wpTextbox1:focus {
border-color: var(--zc-yellow) !important;
box-shadow: inset 0 0 0 1px var(--zc-yellow) !important;
outline: none !important;
}
#wpSummary {
background-color: var(--zc-dark-3) !important;
border: 1px solid var(--zc-border-light) !important;
border-radius: 6px !important;
color: var(--color-base) !important;
padding: 8px 12px !important;
}
#wpSummary:focus {
border-color: var(--zc-yellow) !important;
box-shadow: inset 0 0 0 1px var(--zc-yellow) !important;
outline: none !important;
}
/* ===========================
СПЕЦИАЛЬНЫЕ СТРАНИЦЫ
=========================== */
.mw-specialpages-table td,
.mw-specialpages-table th {
background-color: var(--zc-dark-2) !important;
border-color: var(--zc-border) !important;
color: var(--color-base--subtle) !important;
}
.mw-specialpages-group {
color: var(--zc-yellow) !important;
font-family: var(--font-family-heading) !important;
border-bottom-color: var(--zc-border-light) !important;
}
/* ===========================
ФОРМЫ И ИНПУТЫ
=========================== */
.cdx-text-input__input:enabled {
background-color: var(--zc-dark-3) !important;
color: var(--color-base) !important;
border-color: var(--zc-border-light) !important;
border-radius: 6px !important;
}
.cdx-text-input__input:enabled:hover {
border-color: rgba(255, 255, 255, 0.2) !important;
}
.cdx-text-input__input:enabled:focus {
border-color: var(--zc-yellow) !important;
box-shadow: inset 0 0 0 1px var(--zc-yellow) !important;
}
.cdx-text-input__input::placeholder {
color: var(--color-muted) !important;
}
.cdx-text-input__input:disabled {
background-color: var(--zc-dark-3) !important;
color: var(--color-disabled) !important;
border-color: var(--zc-border) !important;
}
/* Radio кнопки */
.cdx-radio__label {
color: var(--color-base--subtle) !important;
}
/* ===========================
ДИАЛОГИ / МОДАЛКИ
=========================== */
.cdx-dialog {
background-color: var(--zc-dark-2) !important;
border: 1px solid var(--zc-border-light) !important;
border-radius: 14px !important;
box-shadow: 0 16px 64px rgba(0, 0, 0, 0.6) !important;
color: var(--color-base) !important;
}
.cdx-dialog-backdrop {
background-color: rgba(0, 0, 0, 0.7) !important;
}
.cdx-dialog__header .cdx-dialog__header__title {
font-family: var(--font-family-heading) !important;
color: var(--color-base--emphasized) !important;
}
.cdx-dialog__header .cdx-dialog__header__subtitle {
color: var(--color-subtle) !important;
}
.cdx-dialog__body {
color: var(--color-base--subtle) !important;
}
.cdx-dialog--dividers .cdx-dialog__header,
.cdx-dialog--dividers .cdx-dialog__footer {
border-color: var(--zc-border) !important;
}
.cdx-dialog__footer .cdx-dialog__footer__text {
color: var(--color-subtle) !important;
}
.skin-dialog-search .cdx-dialog__header {
background-color: var(--zc-dark-3) !important;
}
/* ===========================
ПРОГРЕСС-БАР
=========================== */
.cdx-progress-bar:not(.cdx-progress-bar--disabled) .cdx-progress-bar__bar {
background-color: var(--zc-yellow) !important;
}
.cdx-progress-bar:not(.cdx-progress-bar--inline) {
background-color: var(--zc-dark-3) !important;
box-shadow: 0 0 0 1px var(--zc-border-light) !important;
}
/* ===========================
THUMBNAIL (Миниатюры)
=========================== */
.thumb {
background-color: var(--zc-dark-2) !important;
border: 1px solid var(--zc-border) !important;
border-radius: 10px !important;
overflow: hidden;
margin: 0 0 1em 0 !important;
}
.thumbinner {
background-color: var(--zc-dark-2) !important;
border: none !important;
border-radius: 10px !important;
}
.thumbcaption {
color: var(--color-subtle) !important;
font-size: 0.82rem !important;
padding: 8px 12px !important;
}
.thumbcaption a {
color: var(--zc-yellow) !important;
}
.thumbborder {
border-color: var(--zc-border-light) !important;
}
/* ===========================
ГАЛЕРЕЯ
=========================== */
.mw-body-content .gallery {
background-color: var(--zc-dark-2) !important;
border: 1px solid var(--zc-border) !important;
border-radius: 10px !important;
}
.mw-body-content .gallery .gallerybox {
border-color: var(--zc-border) !important;
}
.mw-body-content .gallery .gallerytext {
color: var(--color-subtle) !important;
}
.mw-body-content .gallery .gallerytext a {
color: var(--zc-yellow) !important;
}
/* ===========================
ФУТЕР
=========================== */
.mw-footer-container {
background-color: var(--zc-dark) !important;
border-top: 1px solid var(--zc-border) !important;
}
.mw-footer {
color: var(--color-muted) !important;
font-size: 0.82rem !important;
}
#footer-places a {
color: var(--color-subtle) !important;
transition: color 0.15s ease !important;
}
#footer-places a:hover {
color: var(--zc-yellow) !important;
text-decoration: none !important;
}
#footer-poweredbyico .cdx-button {
opacity: 0.5;
transition: opacity 0.2s ease;
}
#footer-poweredbyico .cdx-button:hover {
opacity: 0.8;
}
#footer-poweredbyico img {
filter: invert(1) brightness(0.7);
}
/* ===========================
УВЕДОМЛЕНИЯ
=========================== */
.mw-notification-area {
background-color: transparent !important;
}
.mw-notification {
background-color: var(--zc-dark-2) !important;
border: 1px solid var(--zc-border-light) !important;
border-radius: 10px !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
color: var(--color-base--subtle) !important;
}
/* ===========================
ПЕРЕНАПРАВЛЕНИЯ
=========================== */
.mw-redirectedfrom {
color: var(--color-muted) !important;
font-size: 0.85rem !important;
}
.mw-redirectedfrom a {
color: var(--color-subtle) !important;
}
/* ===========================
PRINT FOOTER
=========================== */
.printfooter {
color: var(--color-muted) !important;
font-size: 0.8rem !important;
border-top: 1px solid var(--zc-border) !important;
padding-top: 12px !important;
margin-top: 24px !important;
}
.printfooter a {
color: var(--color-subtle) !important;
word-break: break-all;
}
/* ===========================
SCROLLBAR (веб-специфичный)
=========================== */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: var(--zc-black);
}
::-webkit-scrollbar-thumb {
background: var(--zc-dark-4);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #333;
}
/* ===========================
СЕЛЕКЦИЯ ТЕКСТА
=========================== */
::selection {
background-color: rgba(242, 207, 0, 0.25);
color: var(--color-base--emphasized);
}
::-moz-selection {
background-color: rgba(242, 207, 0, 0.25);
color: var(--color-base--emphasized);
}
/* ===========================
АДАПТИВНОСТЬ
=========================== */
@media (max-width: 720px) {
.mw-body {
border-radius: 12px !important;
padding: 20px !important;
}
.firstHeading {
font-size: 1.5rem !important;
}
.vector-dropdown-content {
border-radius: 0 0 10px 10px !important;
}
}
/* ===========================
ТЁМНАЯ ТЕМА ОФОРМЛЕНИЯ
(перекрытие для皮肤 темы)
=========================== */
html.skin-theme-clientpref-night,
html.skin-theme-clientpref-night body {
--background-color-base: #0a0a0a;
--color-base: #e8e8e8;
}
/* ===========================
SPЕЦИАЛЬНЫЕ ИСПРАВЛЕНИЯ
=========================== */
/* Убрать белые артефакты вокруг вект-элементов */
.vector-icon {
transition: color 0.15s ease;
}
/* Исправление прозрачных иконок на тёмном фоне */
.vector-icon.mw-ui-icon-wikimedia-search,
.vector-icon.mw-ui-icon-wikimedia-menu,
.vector-icon.mw-ui-icon-wikimedia-appearance,
.vector-icon.mw-ui-icon-userAvatar,
.vector-icon.mw-ui-icon-wikimedia-userAvatar,
.vector-icon.mw-ui-icon-wikimedia-star,
.vector-icon.mw-ui-icon-wikimedia-wikimedia-star,
.vector-icon.mw-ui-icon-wikimedia-speechBubbles,
.vector-icon.mw-ui-icon-wikimedia-edit,
.vector-icon.mw-ui-icon-wikimedia-wikiText,
.vector-icon.mw-ui-icon-wikimedia-watchlist,
.vector-icon.mw-ui-icon-wikimedia-userTalk,
.vector-icon.mw-ui-icon-wikimedia-settings,
.vector-icon.mw-ui-icon-wikimedia-userContributions,
.vector-icon.mw-ui-icon-wikimedia-logOut,
.vector-icon.mw-ui-icon-wikimedia-history {
filter: invert(1) brightness(0.75) !important;
}
.vector-tab-noicon.selected a .vector-icon,
.vector-menu-content-list li.selected a .vector-icon,
.cdx-button--action-progressive .vector-icon {
filter: invert(0.6) sepia(1) saturate(5) hue-rotate(10deg) brightness(1.1) !important;
}
/* Список наблюдения — жёлтая звезда */
#ca-watch .vector-icon,
#ca-watchstar-sticky-header .vector-icon,
.mw-watchlink .vector-icon {
filter: invert(0.6) sepia(1) saturate(5) hue-rotate(10deg) brightness(1.1) !important;
}
/* Индикатор "нет статьи" */
.noarticletext p {
color: var(--color-subtle) !important;
line-height: 1.7 !important;
}
/* Скролл-паддинг для sticky header */
.client-js.vector-sticky-header-enabled {
scroll-padding-top: 3.125rem;
}
/* Скрыть стандартный подложечный фон */
.vector-column-start,
.vector-column-end {
background-color: transparent !important;
}
/* Fix: content area spacing */
.vector-body-before-content {
margin-bottom: 0 !important;
}
/* ===========================
ZET+COMPAN FILM INFOBOX
=========================== */
.zc-infobox {
float: right;
clear: right;
width: 340px;
margin: 0 0 20px 0 !important; /* ← убрали правый отступ */
background: linear-gradient(180deg, #141414, #0d0d0d) !important;
border: 1px solid rgba(242, 207, 0, 0.35) !important;
border-radius: 16px !important;
color: #d8d8d8 !important;
overflow: hidden;
box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
}
.zc-infobox-title {
background: linear-gradient(135deg, #f2cf00, #b89e00) !important;
color: #050505 !important;
font-family: var(--font-family-heading, sans-serif) !important;
font-size: 1.25rem !important;
font-weight: 800 !important;
text-align: center !important;
letter-spacing: -0.02em;
padding: 14px 16px !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.35) !important;
}
.zc-infobox-image {
background: #080808 !important;
text-align: center !important;
padding: 10px !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.zc-infobox-image img {
border-radius: 12px;
width: 100%; /* растягиваем */
max-width: 100%;
height: auto;
}
.zc-infobox-caption {
color: #9f9f9f !important;
font-size: 0.8rem !important;
text-align: center !important;
padding: 8px 14px !important;
background: #101010 !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.zc-infobox th {
width: 38%;
background: rgba(255, 255, 255, 0.035) !important;
color: #f2cf00 !important;
font-weight: 700 !important;
text-align: left !important;
vertical-align: top !important;
padding: 9px 12px !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.zc-infobox td {
background: rgba(0, 0, 0, 0.12) !important;
color: #d0d0d0 !important;
vertical-align: top !important;
padding: 9px 12px !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.zc-infobox-section {
background: #1b1b1b !important;
color: #ffe14a !important;
text-align: center !important;
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 0.75rem !important;
padding: 10px 12px !important;
}
.zc-status {
display: inline-block;
padding: 3px 8px;
border-radius: 999px;
background: rgba(242, 207, 0, 0.12);
border: 1px solid rgba(242, 207, 0, 0.35);
color: #ffe14a;
font-weight: 700;
font-size: 0.82rem;
}
.zc-infobox code {
background: #050505 !important;
color: #ffe14a !important;
border: 1px solid rgba(242, 207, 0, 0.25) !important;
border-radius: 5px !important;
padding: 2px 5px !important;
word-break: break-all;
}
@media (max-width: 720px) {
.zc-infobox {
float: none;
width: 100%;
margin: 0 0 22px 0;
}
}
/* ===========================
ZET+COMPAN MAIN PAGE
=========================== */
.page-Main_Page .firstHeading,
.page-Заглавная_страница .firstHeading,
.page-Главная_страница .firstHeading {
display: none !important;
}
.zc-mainpage {
max-width: 1180px;
margin: 0 auto;
}
.zc-hero {
position: relative;
margin-bottom: 28px;
border: 1px solid rgba(242, 207, 0, 0.35);
border-radius: 22px;
overflow: hidden;
background:
radial-gradient(circle at top left, rgba(242, 207, 0, 0.18), transparent 32%),
linear-gradient(135deg, #171717, #070707);
box-shadow: 0 20px 55px rgba(0, 0, 0, 0.45);
}
.zc-hero::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(120deg, rgba(242, 207, 0, 0.08), transparent 45%),
repeating-linear-gradient(
135deg,
rgba(255, 255, 255, 0.025) 0,
rgba(255, 255, 255, 0.025) 1px,
transparent 1px,
transparent 12px
);
pointer-events: none;
}
.zc-hero-inner {
position: relative;
padding: 44px 42px;
}
.zc-hero-kicker {
display: inline-block;
margin-bottom: 14px;
padding: 7px 12px;
border-radius: 999px;
background: rgba(242, 207, 0, 0.12);
border: 1px solid rgba(242, 207, 0, 0.35);
color: #ffe14a;
font-size: 0.78rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.12em;
}
.zc-hero-title {
margin-bottom: 14px;
color: #f2cf00;
font-family: var(--font-family-heading, sans-serif);
font-size: clamp(2.4rem, 5vw, 5rem);
font-weight: 900;
line-height: 0.95;
letter-spacing: -0.05em;
text-transform: uppercase;
text-shadow: 0 0 28px rgba(242, 207, 0, 0.16);
}
.zc-hero-text {
max-width: 820px;
color: #d6d6d6;
font-size: 1.08rem;
line-height: 1.75;
}
.zc-hero-buttons {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 24px;
}
.zc-button {
display: inline-block;
padding: 11px 16px;
border-radius: 12px;
background: #181818;
border: 1px solid rgba(255, 255, 255, 0.12);
color: #f0f0f0;
font-weight: 800;
transition: 0.18s ease;
}
.zc-button:hover {
background: #222;
border-color: rgba(242, 207, 0, 0.55);
color: #ffe14a;
text-decoration: none;
transform: translateY(-1px);
}
.zc-button-primary {
background: #f2cf00;
color: #050505;
border-color: #f2cf00;
}
.zc-button-primary:hover {
background: #ffe14a;
color: #050505;
}
.zc-section-title {
margin: 28px 0 16px;
color: #f2cf00;
font-family: var(--font-family-heading, sans-serif);
font-size: 1.35rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.zc-card-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
margin-bottom: 24px;
}
.zc-card {
min-height: 190px;
padding: 22px;
border-radius: 18px;
background: linear-gradient(180deg, #171717, #0f0f0f);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 12px 34px rgba(0, 0, 0, 0.25);
transition: 0.18s ease;
}
.zc-card:hover {
transform: translateY(-3px);
border-color: rgba(242, 207, 0, 0.42);
box-shadow: 0 18px 46px rgba(0, 0, 0, 0.38);
}
.zc-card-title {
margin-bottom: 10px;
color: #f2cf00;
font-family: var(--font-family-heading, sans-serif);
font-size: 1.18rem;
font-weight: 800;
}
.zc-card-text {
color: #bfbfbf;
line-height: 1.65;
font-size: 0.94rem;
}
.zc-card-link {
margin-top: 16px;
font-weight: 800;
}
.zc-two-column {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
margin-top: 24px;
}
.zc-panel {
padding: 22px;
border-radius: 18px;
background: #111;
border: 1px solid rgba(255, 255, 255, 0.08);
color: #cfcfcf;
}
.zc-panel-title {
margin-bottom: 12px;
color: #ffe14a;
font-family: var(--font-family-heading, sans-serif);
font-size: 1.08rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.zc-panel ul {
margin-bottom: 0 !important;
}
.zc-wide-panel {
margin-top: 18px;
border-left: 4px solid #f2cf00;
}
.zc-footer-note {
margin-top: 22px;
padding: 16px 18px;
border-radius: 14px;
background: rgba(242, 207, 0, 0.08);
border: 1px solid rgba(242, 207, 0, 0.25);
color: #d8d8d8;
}
@media (max-width: 980px) {
.zc-card-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 720px) {
.zc-hero-inner {
padding: 30px 22px;
}
.zc-card-grid,
.zc-two-column {
grid-template-columns: 1fr;
}
.zc-card {
min-height: auto;
}
}
/* ===========================
ZET+COMPAN INFOBOX POSITION FIX
=========================== */
.mw-body-content .zc-infobox {
float: right !important;
clear: right !important;
width: 380px !important;
max-width: 380px !important;
margin: 0 0 24px 28px !important;
}
/* Увеличенное изображение внутри инфобокса */
.mw-body-content .zc-infobox-image img {
width: 100% !important;
max-width: 340px !important;
height: auto !important;
}
/* На мобильных — во всю ширину */
@media (max-width: 720px) {
.mw-body-content .zc-infobox {
float: none !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 0 22px 0 !important;
}
.mw-body-content .zc-infobox-image img {
max-width: 100% !important;
}
}