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

Версия от 23:58, 12 мая 2026

@import url("https://fonts.googleapis.com/css2?family=PT+Sans:wght@400;700&family=PT+Serif:wght@400;700&family=PT+Mono&display=swap&subset=cyrillic,cyrillic-ext,latin");

/* === Лор Бабки Люды — тема «Грядка» === */
/* Палитра огорода: зелёный лист, подсолнух, свёкла, земля, бумажный фон */

:root {
	--bl-leaf:        #4a7c2e;   /* зелёный лист */
	--bl-leaf-light:  #6fa83a;
	--bl-leaf-dark:   #355c1f;
	--bl-sun:         #f4b91a;   /* подсолнух */
	--bl-sun-dark:    #c99514;
	--bl-beet:        #7a1d2e;   /* свёкла — для предупреждений/акцентов */
	--bl-carrot:      #e87530;
	--bl-soil:        #6b4423;   /* земля */
	--bl-soil-dark:   #3d2817;
	--bl-paper:       #faf5e6;   /* кремовая бумага — основной фон */
	--bl-paper-warm:  #f3ead0;   /* чуть темнее, для боковых блоков */
	--bl-ink:         #2c1810;   /* основной текст */
	--bl-ink-soft:    #5a4a3a;
}

/* Бумажный фон с лёгкой текстурой */
body.skin-vector-2022,
body.skin-vector {
	background-color: var(--bl-paper);
	background-image:
		radial-gradient( circle at 20% 30%, rgba(106, 68, 35, 0.03) 1px, transparent 1px ),
		radial-gradient( circle at 70% 80%, rgba(74, 124, 46, 0.03) 1px, transparent 1px );
	background-size: 24px 24px, 32px 32px;
	color: var(--bl-ink);
	font-family: "PT Sans", "Segoe UI", system-ui, sans-serif;
}

/* Контейнер страницы — «бумажная карточка» */
.mw-page-container {
	background-color: var(--bl-paper);
}

.mw-page-container-inner {
	background: linear-gradient( to bottom, #fefaf0 0%, var(--bl-paper) 100% );
	border-left: 1px solid rgba(107, 68, 35, 0.15);
	border-right: 1px solid rgba(107, 68, 35, 0.15);
}

/* Шапка — зелёная «грядка» сверху */
.mw-header {
	background: linear-gradient( to bottom, var(--bl-leaf) 0%, var(--bl-leaf-dark) 100% );
	color: var(--bl-paper);
	border-bottom: 4px solid var(--bl-soil);
	box-shadow: 0 2px 8px rgba(61, 40, 23, 0.2);
}

.mw-header a,
.mw-header .mw-checkbox-hack-button {
	color: var(--bl-paper);
}

.mw-header a:hover {
	color: var(--bl-sun);
}

/* Логотип-заголовок */
.mw-logo-wordmark {
	color: var(--bl-paper) !important;
	font-family: "PT Serif", Georgia, serif;
	font-weight: 700;
	font-size: 1.4em;
	text-shadow: 1px 1px 0 var(--bl-leaf-dark);
}

/* Поиск */
.cdx-search-input__input,
.mw-search-form input[name="search"] {
	background-color: var(--bl-paper);
	border: 1px solid var(--bl-soil) !important;
	color: var(--bl-ink);
}

/* Боковое меню — «деревянная доска» */
.vector-main-menu,
.vector-page-tools {
	background-color: var(--bl-paper-warm);
	border-right: 1px solid rgba(107, 68, 35, 0.2);
}

.vector-menu-heading,
.vector-pinnable-header {
	color: var(--bl-soil-dark);
	font-family: "PT Serif", Georgia, serif;
	font-weight: 700;
	border-bottom: 1px dashed var(--bl-soil);
}

/* Заголовки страниц — серьёзная типографика */
.mw-body h1,
.mw-body h2,
.mw-body h3,
.mw-body h4,
.firstHeading,
.mw-first-heading {
	font-family: "PT Serif", Georgia, "Times New Roman", serif;
	color: var(--bl-soil-dark);
	border-bottom: 2px solid var(--bl-leaf);
	padding-bottom: 0.2em;
}

.mw-body h1,
.firstHeading,
.mw-first-heading {
	border-bottom: 3px double var(--bl-leaf);
	padding-bottom: 0.3em;
}

/* Декоративный росток слева от h1 */
.mw-first-heading::before {
	content: "🌱 ";
	color: var(--bl-leaf);
	font-size: 0.9em;
}

/* Ссылки — цвет молодой травы */
.mw-body-content a,
.mw-body a:not(.mw-selflink) {
	color: var(--bl-leaf-dark);
	text-decoration: underline;
	text-decoration-color: rgba(74, 124, 46, 0.4);
	text-underline-offset: 2px;
}

.mw-body-content a:hover {
	color: var(--bl-leaf);
	text-decoration-color: var(--bl-leaf);
}

/* Красные ссылки (несуществующие страницы) — цвет свёклы */
.mw-body-content a.new,
.mw-body a.new {
	color: var(--bl-beet);
	text-decoration-color: rgba(122, 29, 46, 0.4);
}

/* Контент */
.mw-body,
.mw-body-content,
.parser-output {
	color: var(--bl-ink);
	line-height: 1.6;
}

/* Таблицы — деревянные рамки */
.wikitable {
	background-color: #fff9eb;
	border: 2px solid var(--bl-soil);
	border-radius: 4px;
	box-shadow: 0 2px 4px rgba(61, 40, 23, 0.1);
}

.wikitable > tr > th,
.wikitable > * > tr > th {
	background: linear-gradient( to bottom, var(--bl-leaf) 0%, var(--bl-leaf-dark) 100% );
	color: var(--bl-paper);
	border: 1px solid var(--bl-soil-dark);
	font-family: "PT Serif", Georgia, serif;
}

.wikitable > tr > td,
.wikitable > * > tr > td {
	border: 1px solid rgba(107, 68, 35, 0.3);
}

/* Инфобоксы / сайдбары на страницах */
.infobox {
	background: var(--bl-paper-warm);
	border: 2px solid var(--bl-soil);
	border-radius: 4px;
	box-shadow: 2px 2px 0 rgba(61, 40, 23, 0.15);
	font-family: "PT Sans", system-ui, sans-serif;
}

.infobox-title,
.infobox caption {
	background: linear-gradient( to bottom, var(--bl-sun) 0%, var(--bl-sun-dark) 100% );
	color: var(--bl-soil-dark);
	font-family: "PT Serif", Georgia, serif;
	font-weight: bold;
	padding: 0.4em;
}

/* Цитаты — «записка из блокнота» */
blockquote {
	background: var(--bl-paper-warm);
	border-left: 4px solid var(--bl-sun);
	padding: 0.8em 1em;
	font-style: italic;
	color: var(--bl-ink-soft);
	border-radius: 0 4px 4px 0;
}

/* Код */
code,
pre {
	background-color: #2c1810;
	color: #f4e8d0;
	border: 1px solid var(--bl-soil-dark);
	border-radius: 3px;
	font-family: "PT Mono", "Consolas", monospace;
}

code {
	padding: 0.1em 0.4em;
}

pre {
	padding: 0.8em;
	overflow-x: auto;
}

/* Кнопки */
.cdx-button:not(.cdx-button--weight-quiet):not(.cdx-button--weight-primary),
.mw-ui-button {
	background-color: var(--bl-paper-warm);
	border: 1px solid var(--bl-soil);
	color: var(--bl-soil-dark);
}

.cdx-button--action-progressive,
.cdx-button--weight-primary,
.mw-ui-button.mw-ui-progressive {
	background: linear-gradient( to bottom, var(--bl-leaf) 0%, var(--bl-leaf-dark) 100% );
	border: 1px solid var(--bl-leaf-dark);
	color: var(--bl-paper);
}

.cdx-button--action-progressive:hover {
	background: linear-gradient( to bottom, var(--bl-leaf-light) 0%, var(--bl-leaf) 100% );
}

/* Футер — землистый */
.mw-footer-container,
#footer,
.mw-footer {
	background-color: var(--bl-soil-dark);
	color: var(--bl-paper-warm) !important;
	border-top: 4px solid var(--bl-leaf);
}

.mw-footer-container *,
#footer *,
.mw-footer * {
	color: var(--bl-paper-warm) !important;
}

.mw-footer-container a,
#footer a,
.mw-footer a {
	color: var(--bl-sun) !important;
}

.mw-footer-container a:hover,
#footer a:hover,
.mw-footer a:hover {
	color: #fff !important;
}

/* Боковая панель "Внешний вид" — в палитру грядки */
.vector-appearance,
.vector-appearance-landmark,
.vector-sticky-pinned-container,
.vector-toc {
	background-color: var(--bl-paper-warm);
	border-left: 1px solid rgba(107, 68, 35, 0.2);
}

.vector-toc-pinned-container {
	background-color: var(--bl-paper-warm);
}

/* Вкладки (читать/править/история) */
.vector-menu-tabs li,
#p-views li {
	background: var(--bl-paper-warm);
	border: 1px solid var(--bl-soil);
	border-bottom: none;
}

.vector-menu-tabs li.selected,
#p-views li.selected {
	background: var(--bl-paper);
	border-bottom: 1px solid var(--bl-paper);
}

/* TOC — содержание */
.toc,
#toc {
	background-color: var(--bl-paper-warm);
	border: 1px solid var(--bl-soil);
	border-left: 4px solid var(--bl-leaf);
	border-radius: 0 4px 4px 0;
	padding: 0.8em;
}

.toctitle h2 {
	font-family: "PT Serif", Georgia, serif;
	color: var(--bl-soil-dark);
}

/* Предупреждения/сообщения */
.warningbox,
.mw-message-box-warning {
	background: #fff4d6;
	border: 1px solid var(--bl-sun-dark);
	border-left: 4px solid var(--bl-sun-dark);
	color: var(--bl-ink);
}

.errorbox,
.mw-message-box-error {
	background: #fae2e6;
	border: 1px solid var(--bl-beet);
	border-left: 4px solid var(--bl-beet);
	color: var(--bl-beet);
}

.successbox,
.mw-message-box-success {
	background: #e8f0d6;
	border: 1px solid var(--bl-leaf);
	border-left: 4px solid var(--bl-leaf);
	color: var(--bl-leaf-dark);
}

/* Декоративный «забор» внизу шапки */
.mw-header::after {
	content: "";
	display: block;
	height: 6px;
	background-image:
		linear-gradient( 45deg, var(--bl-sun) 25%, transparent 25%, transparent 75%, var(--bl-sun) 75%, var(--bl-sun) ),
		linear-gradient( 45deg, var(--bl-sun) 25%, transparent 25%, transparent 75%, var(--bl-sun) 75%, var(--bl-sun) );
	background-size: 12px 12px;
	background-position: 0 0, 6px 6px;
	background-color: var(--bl-soil);
	opacity: 0.7;
}

/* Заглавная страница — особый праздничный вид */
.page-Заглавная_страница .mw-first-heading,
.page-Main_Page .mw-first-heading {
	text-align: center;
	font-size: 2.2em;
	border-bottom: none;
	color: var(--bl-soil-dark);
}

.page-Заглавная_страница .mw-first-heading::before,
.page-Main_Page .mw-first-heading::before {
	content: "🌻 ";
}

.page-Заглавная_страница .mw-first-heading::after,
.page-Main_Page .mw-first-heading::after {
	content: " 🌻";
}