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

Текущая версия от 12:34, 13 мая 2026

/* ===================================================================
   Лор Бабки Люды — тема в стиле wiki.gg (Terraria-like)
   База: Vector legacy + heavy custom CSS
   =================================================================== */

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

:root {
	/* Палитра — дерево/земля/листва/подсолнух/бумага */
	--bl-bg:           #3d2817;   /* фон страницы — тёмное дерево */
	--bl-bg-darker:    #2c1c10;
	--bl-panel:        #4a3220;   /* боковые панели */
	--bl-panel-h:      #5e9a3a;   /* шапки боковых панелей — листва */
	--bl-panel-h-dark: #355c1f;
	--bl-content-bg:   #faf5e6;   /* фон контента — бумага */
	--bl-content-bg2:  #f3ead0;
	--bl-border:       #6b4423;
	--bl-border-dark:  #3d2817;
	--bl-text:         #f4ead0;   /* текст на тёмном фоне */
	--bl-text-content: #2c1810;   /* текст на бумаге */
	--bl-link:         #7da42a;
	--bl-link-hover:   #a8d65c;
	--bl-link-content: #355c1f;
	--bl-link-redlink: #a8281c;
	--bl-sun:          #f4b91a;
}

/* --- Фон страницы: тёмное дерево --- */
html, body {
	background-color: var(--bl-bg) !important;
	background-image:
		repeating-linear-gradient(
			90deg,
			rgba(0,0,0,0.04) 0px,
			rgba(0,0,0,0.04) 1px,
			transparent 1px,
			transparent 4px
		),
		repeating-linear-gradient(
			0deg,
			rgba(0,0,0,0.06) 0px,
			rgba(0,0,0,0.06) 1px,
			transparent 1px,
			transparent 60px
		);
	color: var(--bl-text);
	font-family: "PT Sans", "Segoe UI", system-ui, sans-serif;
}

/* Sticky-footer через flexbox: body — колонка, контент растёт, футер прижат к низу.
   Vector ставит height: 100% на html/body — переопределяем. */
html {
	min-height: 100vh;
	height: auto !important;
}
body {
	height: auto !important;
	min-height: 100vh;
	display: flex !important;
	flex-direction: column !important;
}
/* mw-navigation внутри body — не должно занимать flex-слот */
#mw-navigation { display: contents; }
/* Контент занимает оставшееся пространство */
#content, .mw-body {
	flex: 1 0 auto;
}
/* Футер приклеен к низу */
#footer, .mw-footer {
	flex: 0 0 auto;
	margin-top: 0 !important;
}

/* --- Баннер сверху: широкая SVG-картинка --- */
body::before {
	content: "";
	display: block;
	width: 100%;
	height: 200px;
	background-image: url(/resources/assets/babka-banner.svg);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	border-bottom: 4px solid var(--bl-border-dark);
	box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

/* В Vector legacy main panel начинается с #mw-page-base. */
#mw-page-base,
#mw-head-base {
	background: transparent !important;
	background-color: transparent !important;
}

/* mw-head и mw-panel позиционированы абсолютно (top:0) — подвинем их под баннер.
   Баннер 200px + 4px border-bottom = 204px суммарно.
   Подгоняем чтобы низ табов касался верха контента (никакого зазора). */
#mw-head {
	top: 203px !important;
	background-color: transparent !important;
}

#mw-panel {
	top: 243px !important; /* mw-head top + 40px (отступ табов внутри head) */
}

/* Vector прячет заголовок первой панели (#p-navigation) — показываем,
   чтобы все коробки в сайдбаре выглядели одинаково. */
#p-navigation h3 {
	display: block !important;
}

/* --- Контентная область: кремовая бумага с тёмной рамкой.
   margin-top: 0 чтобы табы сверху приклеивались без зазора. */
#content,
.mw-body {
	background-color: var(--bl-content-bg) !important;
	color: var(--bl-text-content) !important;
	border: 1px solid var(--bl-border) !important;
	border-radius: 0 4px 4px 4px !important; /* верх-лево обрезан под левый таб */
	padding: 1em 1.5em !important;
	box-shadow: 0 2px 8px rgba(0,0,0,0.3);
	margin-top: 0 !important;
}

/* Текст на бумаге */
.mw-body,
.mw-body-content,
#bodyContent,
.parser-output {
	color: var(--bl-text-content);
}

/* Заголовки на бумаге */
.mw-body h1,
.mw-body h2,
.mw-body h3,
.mw-body h4,
.mw-body h5,
.mw-body h6,
.firstHeading,
#firstHeading {
	font-family: "PT Serif", Georgia, "Times New Roman", serif;
	color: var(--bl-text-content);
	border-bottom: 2px solid var(--bl-border);
	font-weight: 700;
}

.firstHeading,
#firstHeading {
	border-bottom: 3px double var(--bl-border);
	padding-bottom: 0.2em;
}

/* Ссылки на бумаге */
.mw-body a,
#bodyContent a {
	color: var(--bl-link-content);
	text-decoration: none;
}

.mw-body a:hover,
#bodyContent a:hover {
	color: var(--bl-panel-h);
	text-decoration: underline;
}

.mw-body a.new,
#bodyContent a.new {
	color: var(--bl-link-redlink);
}

/* --- Левая панель (sidebar) --- */
#mw-panel {
	background: transparent !important;
}

#mw-panel .portal,
.portal {
	background-color: var(--bl-panel) !important;
	border: 1px solid var(--bl-border-dark) !important;
	border-radius: 4px;
	margin: 0 0.5em 0.8em 0.5em !important;
	padding: 0 !important;
	box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* Заголовки секций сайдбара (Navigation, Guides, Portals) */
#mw-panel .portal h3,
.portal h3 {
	background: linear-gradient(to bottom, var(--bl-panel-h) 0%, var(--bl-panel-h-dark) 100%) !important;
	color: var(--bl-text) !important;
	font-family: "PT Serif", Georgia, serif !important;
	font-size: 0.95em !important;
	font-weight: 700 !important;
	margin: 0 !important;
	padding: 0.5em 0.8em !important;
	border: none !important;
	border-bottom: 2px solid var(--bl-border-dark) !important;
	border-radius: 3px 3px 0 0;
	text-shadow: 1px 1px 0 rgba(0,0,0,0.4);
	cursor: default;
}

#mw-panel .portal .body,
.portal .body {
	padding: 0.5em 0.8em !important;
	background: transparent !important;
}

#mw-panel .portal ul,
.portal ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

#mw-panel .portal li,
.portal li {
	padding: 0.2em 0;
}

#mw-panel .portal a,
.portal a {
	color: var(--bl-text) !important;
	text-decoration: none;
}

#mw-panel .portal a:hover,
.portal a:hover {
	color: var(--bl-sun) !important;
	text-decoration: underline;
}

/* --- Вкладки сверху: Главная/Обсуждение и Читать/Править/История ---
   Прижимаем табы ВПЛОТНУЮ к коробке контента и сдвигаем левую группу на 1px влево
   чтобы выровнять с левой границей контента. */
.vectorTabs,
#p-namespaces,
#p-views {
	background: transparent !important;
	position: relative;
	z-index: 2;
}

/* Сдвигаем левую группу табов на 1px влево чтобы выровнять с левой границей контента.
   transform не ломает абсолютное позиционирование (в отличие от margin-left). */
#left-navigation {
	transform: translateX(-1px);
}

.vectorTabs li,
#p-namespaces li,
#p-views li {
	background: var(--bl-panel) !important;
	background-image: linear-gradient(to bottom, #5e3e22 0%, var(--bl-panel) 100%) !important;
	border: 1px solid var(--bl-border) !important;
	border-bottom: none !important;
	border-radius: 4px 4px 0 0;
	margin-right: 2px;
	margin-bottom: -1px !important; /* перекрываем верхний бордер контента */
}

.vectorTabs li.selected,
#p-namespaces li.selected,
#p-views li.selected {
	background: var(--bl-content-bg) !important;
	background-image: none !important;
	border-color: var(--bl-border) !important;
	/* Кремовый border-bottom перекрывает верхний бордер контента под табом */
	border-bottom: 1px solid var(--bl-content-bg) !important;
	position: relative;
	z-index: 3;
}

.vectorTabs li a,
#p-namespaces li a,
#p-views li a {
	color: var(--bl-text) !important;
	text-decoration: none;
	padding: 0.4em 0.8em;
}

.vectorTabs li.selected a,
#p-namespaces li.selected a,
#p-views li.selected a {
	color: var(--bl-text-content) !important;
	font-weight: 700;
}

.vectorTabs li a:hover,
#p-namespaces li a:hover {
	color: var(--bl-sun) !important;
}

/* --- Поиск --- */
#p-search {
	background: transparent !important;
}

#searchInput,
#searchInput[type="search"] {
	background-color: var(--bl-content-bg) !important;
	color: var(--bl-text-content) !important;
	border: 1px solid var(--bl-border) !important;
	border-radius: 3px;
	padding: 0.3em 0.5em;
}

/* --- Персональные ссылки сверху-справа (Войти и т.п.) --- */
#p-personal {
	background: transparent !important;
}

#p-personal ul,
#p-personal li {
	background: transparent !important;
}

#p-personal a {
	color: var(--bl-text) !important;
	text-decoration: none;
}

#p-personal a:hover {
	color: var(--bl-sun) !important;
}

/* --- Логотип в углу: прячем дефолтный --- */
#p-logo {
	display: none;
}

/* --- Таблицы --- */
.wikitable {
	background-color: var(--bl-content-bg2);
	border: 2px solid var(--bl-border);
	border-radius: 3px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

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

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

/* --- Инфобоксы --- */
.infobox {
	background: var(--bl-content-bg2);
	border: 2px solid var(--bl-border);
	border-radius: 3px;
	box-shadow: 2px 2px 0 rgba(61, 40, 23, 0.2);
}

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

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

/* --- TOC --- */
.toc, #toc {
	background-color: var(--bl-content-bg2);
	border: 1px solid var(--bl-border);
	border-left: 4px solid var(--bl-panel-h);
	border-radius: 0 3px 3px 0;
	padding: 0.8em;
}

.toctitle {
	font-family: "PT Serif", Georgia, serif;
}

/* --- Футер: землистая лента, центрированная --- */
#footer,
.mw-footer {
	background-color: var(--bl-bg-darker) !important;
	color: var(--bl-text) !important;
	border-top: 4px solid var(--bl-panel-h);
	padding: 1.4em 1.5em 1.6em !important;
	text-align: center;
}

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

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

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

/* Списки в футере — горизонтально, через разделитель */
#footer ul,
.mw-footer ul {
	list-style: none;
	padding: 0;
	margin: 0.4em 0;
	display: inline-block;
}

#footer ul li,
.mw-footer ul li {
	display: inline-block;
	padding: 0;
	margin: 0;
}

#footer ul li + li::before,
.mw-footer ul li + li::before {
	content: "·";
	margin: 0 0.7em;
	color: var(--bl-panel-h);
}

/* Иконки футера (Powered by MediaWiki) — справа */
#footer-icons,
.mw-footer #footer-icons {
	float: none;
	display: inline-block;
	margin: 0.6em 0 0 0;
	vertical-align: middle;
}

/* "Эта страница последний раз отредактирована" — отдельной строкой */
#footer-info,
.mw-footer #footer-info {
	display: block;
	margin-bottom: 0.4em;
	font-size: 0.9em;
	opacity: 0.85;
}

/* --- Цитаты --- */
blockquote {
	background: var(--bl-content-bg2);
	border-left: 4px solid var(--bl-sun);
	padding: 0.8em 1em;
	font-style: italic;
	color: #5a4a3a;
	border-radius: 0 3px 3px 0;
}

/* --- Заглавная страница: убираем h1 (как у wiki.gg) --- */
.page-Заглавная_страница #firstHeading,
.page-Main_Page #firstHeading {
	display: none;
}

/* ===================================================================
   Мобильная адаптация (Vector legacy не responsive из коробки)
   =================================================================== */

/* Планшеты и узкие десктопы: ужимаем баннер и сайдбар.
   Баннер 150px + 4px border = 154px суммарно, mw-head ставим на 153
   чтобы низ табов касался верха контента (как на десктопе с 200+3). */
@media (max-width: 1024px) {
	body::before {
		height: 150px;
	}
	#mw-head { top: 153px !important; }
	#mw-panel { top: 193px !important; }
}

/* Мобила: прячем сайдбар, контент во всю ширину, баннер короче.
   Vector legacy сильно завязан на абсолютное позиционирование —
   на мобиле сбрасываем всё до нормального flow. */
@media (max-width: 768px) {
	body::before {
		height: 110px;
		background-size: cover;
		background-position: center center;
		order: -2;
		flex: 0 0 auto;
	}
	/* Прячем «базы» — это были подложки для абсолютного layout */
	#mw-page-base,
	#mw-head-base {
		display: none !important;
	}
	/* Прячем сайдбар (навигация только через ссылки в контенте) */
	#mw-panel { display: none !important; }
	/* mw-head — обычный блок в потоке, идёт сразу после баннера */
	#mw-head {
		position: static !important;
		top: auto !important;
		right: auto !important;
		width: 100% !important;
		height: auto !important;
		order: -1;
		flex: 0 0 auto;
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: wrap !important;
		align-items: flex-end;
		padding: 0.4em 0.4em 0 !important;
		box-sizing: border-box;
	}
	/* Распрямляем #right-navigation чтобы его дети (p-views, p-search) попали
	   в flex шапки и могли быть переупорядочены через order. */
	#right-navigation { display: contents !important; }
	/* Порядок: 1) Войти 2) Поиск 3) namespace-табы | view-табы | overflow (в одном ряду) */
	#p-personal       { order: 1 !important; width: 100% !important; }
	#p-search         { order: 2 !important; width: 100% !important; }
	#left-navigation  { order: 3 !important; width: auto !important; flex: 0 0 auto !important; }
	#p-views          { order: 4 !important; width: auto !important; flex: 0 0 auto !important; }
	#p-cactions       { order: 5 !important; width: auto !important; flex: 0 0 auto !important; }
	/* Vector JS прячет view-табы в выпадашку «Ещё» (p-cactions) на узких экранах.
	   Возвращаем их inline — выпадашку разворачиваем как обычный список табов. */
	#p-cactions-checkbox,
	#p-cactions-label,
	#p-cactions > .vector-menu-heading {
		display: none !important;
	}
	#p-cactions .vector-menu-content {
		position: static !important;
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		overflow: visible !important;
		height: auto !important;
		background: transparent !important;
		border: none !important;
		box-shadow: none !important;
		padding: 0 !important;
		margin: 0 !important;
	}
	#p-cactions .vector-menu-content-list {
		display: inline-flex !important;
		flex-wrap: wrap !important;
		padding: 0 !important;
		margin: 0 !important;
	}
	#p-cactions li.collapsible,
	li.collapsible {
		display: inline-block !important;
	}
	/* Применяем общий стиль табов к li.collapsible */
	#p-cactions li {
		background: var(--bl-panel) !important;
		background-image: linear-gradient(to bottom, #5e3e22 0%, var(--bl-panel) 100%) !important;
		border: 1px solid var(--bl-border) !important;
		border-bottom: none !important;
		border-radius: 4px 4px 0 0;
		margin-right: 2px;
	}
	#p-cactions li a {
		color: var(--bl-text) !important;
		text-decoration: none;
	}
	#p-cactions li.selected {
		background: var(--bl-content-bg) !important;
		background-image: none !important;
	}
	#p-cactions li.selected a {
		color: var(--bl-text-content) !important;
		font-weight: 700;
	}
	/* Сбрасываем абсолютку у ВСЕХ детей mw-head */
	#mw-head *,
	#left-navigation,
	#right-navigation,
	#p-personal,
	#p-search,
	#p-personal-more,
	#p-namespaces,
	#p-views,
	#p-cactions {
		position: static !important;
		float: none !important;
	}
	#left-navigation {
		display: block !important;
		width: 100%;
		margin: 0 !important;
		padding: 0 !important;
	}
	/* «Войти» (personal) на отдельной строке справа */
	#p-personal {
		text-align: right !important;
		padding: 0 !important;
		margin: 0 0 0.4em 0 !important;
		display: block !important;
	}
	#p-personal ul {
		padding: 0 !important;
		margin: 0 !important;
	}
	#p-personal li {
		display: inline-block !important;
		margin: 0 0.4em !important;
	}
	/* Все табы (namespace + views) — в одну строку, одинаковый стиль */
	#left-navigation {
		display: block !important;
	}
	.vectorTabs,
	#p-namespaces,
	#p-views {
		display: inline-block !important;
		vertical-align: top;
		margin: 0 !important;
		padding: 0 !important;
	}
	.vectorTabs ul,
	#p-namespaces ul,
	#p-views ul {
		padding: 0 !important;
		margin: 0 !important;
		display: inline-flex !important;
		flex-wrap: wrap !important;
		gap: 2px;
	}
	.vectorTabs li,
	#p-namespaces li,
	#p-views li {
		float: none !important;
		margin: 0 !important;
	}
	.vectorTabs li a,
	#p-namespaces li a,
	#p-views li a,
	#p-cactions li a,
	.vector-menu-tabs-legacy li a {
		padding: 0.25em 0.55em !important;
		font-size: 0.78em !important;
		line-height: 1.3 !important;
		display: block !important;
		height: auto !important;
	}
	/* Vector legacy ставит height:2.5em на сам контейнер вкладок — сбрасываем */
	.vector-menu-tabs-legacy,
	.vector-menu-tabs-legacy ul {
		height: auto !important;
		float: none !important;
	}
	/* Унифицируем размер всех табов и убираем гэп между группами */
	.vectorTabs li,
	#p-namespaces li,
	#p-views li,
	#p-cactions li {
		font-size: 1em !important;
		line-height: 1.3 !important;
		margin-right: 1px !important;
	}
	/* Гэп между namespace и view группами — минимальный */
	#left-navigation { margin-right: 4px !important; }
	/* Поиск — input и кнопка как inline-flex пара во всю ширину */
	#p-search {
		display: block !important;
		margin: 0.5em 0 0 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		padding: 0 !important;
	}
	#p-search h3 { display: none !important; }
	#p-search form {
		display: block !important;
		width: 100% !important;
	}
	#simpleSearch,
	#p-search .vector-search-box-inner {
		display: flex !important;
		width: 100% !important;
		box-sizing: border-box;
		gap: 0;
	}
	#searchInput,
	#p-search input[type="search"],
	#p-search input[name="search"] {
		flex: 1 1 auto !important;
		width: auto !important;
		max-width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box;
	}
	/* Прячем дублирующую "Go" кнопку — оставляем только Search (лупа) */
	#searchGoButton,
	#searchButton {
		display: none !important;
	}
	#mw-searchButton,
	#p-search input[type="submit"]:not(#searchButton),
	#p-search button {
		flex: 0 0 auto !important;
		width: auto !important;
		min-width: 3.5em !important;
		height: auto !important;
		padding: 0 0.8em !important;
		margin-left: 0.3em !important;
		background-color: var(--bl-panel-h) !important;
		background-image: none !important;
		border: 1px solid var(--bl-border-dark) !important;
		border-radius: 3px;
		color: var(--bl-paper) !important;
		font-family: "PT Sans", system-ui, sans-serif !important;
		font-size: 0.9em !important;
		text-indent: 0 !important;
		overflow: visible !important;
		cursor: pointer;
	}
	#mw-searchButton:hover,
	#p-search button:hover {
		background-color: var(--bl-panel-h-dark) !important;
	}
	/* Футер: ссылки в столбик (более специфичный селектор) */
	#footer #footer-places,
	#footer #footer-info,
	.mw-footer #footer-places,
	.mw-footer #footer-info {
		padding: 0 !important;
		margin: 0.4em 0 !important;
	}
	#footer #footer-places li,
	#footer #footer-info li,
	.mw-footer #footer-places li,
	.mw-footer #footer-info li {
		display: block !important;
		float: none !important;
		margin: 0.3em 0 !important;
		padding: 0 !important;
	}
	#footer #footer-places li + li::before,
	.mw-footer #footer-places li + li::before {
		display: none !important;
		content: none !important;
	}
	/* Контент во всю ширину */
	#content,
	.mw-body,
	#mw-data-after-content,
	.mw-footer {
		margin-left: 0 !important;
	}
	#content, .mw-body { order: 1; flex: 1 0 auto; }
	#footer, .mw-footer { order: 2; flex: 0 0 auto; }
	/* Уменьшаем заголовки и подгоняем отступы */
	.mw-body h1,
	.firstHeading,
	#firstHeading {
		font-size: 1.6em !important;
	}
	#content,
	.mw-body {
		padding: 0.8em !important;
		margin: 0 0.4em 0.4em 0.4em !important; /* нет верхнего margin — таб/поиск прижимаются */
	}
	/* Поиск НЕ приклеивается (он теперь вверху); небольшой отступ до табов */
	#p-search {
		margin-bottom: 0.3em !important;
	}
	/* Сбрасываем десктопный сдвиг — на мобиле он криво алайнит. */
	#left-navigation {
		transform: none !important;
	}
	/* Все табы в одном ряду — обнуляем margin-bottom, приклеивание через z-index и cream border */
	#left-navigation .vectorTabs li,
	#left-navigation #p-namespaces li,
	#p-views li {
		margin-bottom: 0 !important;
	}
	/* Сами контейнеры табов перекрывают верхний бордер контента на 1px */
	#left-navigation,
	#p-views {
		margin-bottom: -1px !important;
		position: relative;
		z-index: 2;
	}
	/* Выбранный таб любой группы имеет кремовый bottom-border чтобы скрыть бордер контента */
	#left-navigation li.selected,
	#p-views li.selected {
		border-bottom: 1px solid var(--bl-content-bg) !important;
	}
	/* Футер: ссылки в столбик */
	#footer ul li,
	.mw-footer ul li {
		display: block !important;
		margin: 0.2em 0 !important;
	}
	#footer ul li + li::before,
	.mw-footer ul li + li::before {
		display: none !important;
	}
}

/* Маленький экран: ещё компактнее */
@media (max-width: 480px) {
	body::before {
		height: 80px;
	}
	#mw-head {
		top: 80px !important;
	}
	.mw-body h1,
	.firstHeading,
	#firstHeading {
		font-size: 1.35em !important;
	}
	#content,
	.mw-body {
		padding: 0.6em !important;
		font-size: 0.95em;
	}
}