MediaWiki:Common.css

Замечание: Возможно, после публикации вам придётся очистить кэш своего браузера, чтобы увидеть изменения.

• Firefox / Safari: Удерживая клавишу Shift, нажмите на панели инструментов Обновить либо нажмите Ctrl+F5 или Ctrl+R (⌘+R на Mac)
• Google Chrome: Нажмите Ctrl+Shift+R (⌘+Shift+R на Mac)
• Edge: Удерживая Ctrl, нажмите Обновить либо нажмите Ctrl+F5
• Opera: Нажмите Ctrl+F5.

/* ===================================================================
   Лор Бабки Люды — тема в стиле 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) — подвинем их под баннер.
   Сайдбар выравниваем по верху табов (Vector сдвигает табы на 2.5em внутри head). */
#mw-head {
	top: 200px !important;
	background-color: transparent !important;
}

#mw-panel {
	top: 240px !important; /* 200px баннер + 40px = высота табов */
}

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

/* --- Контентная область: кремовая бумага с тёмной рамкой --- */
#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: 4px !important;
	padding: 1em 1.5em !important;
	box-shadow: 0 2px 8px rgba(0,0,0,0.3);
	margin-top: 0.5em;
}

/* Текст на бумаге */
.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;
}

/* --- Вкладки сверху: Главная/Обсуждение и Читать/Править/История --- */
.vectorTabs,
#p-namespaces,
#p-views {
	background: transparent !important;
}

.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-dark) !important;
	border-bottom: none !important;
	border-radius: 4px 4px 0 0;
	margin-right: 2px;
}

.vectorTabs li.selected,
#p-namespaces li.selected,
#p-views li.selected {
	background: var(--bl-content-bg) !important;
	background-image: none !important;
}

.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 из коробки)
   =================================================================== */

/* Планшеты и узкие десктопы: ужимаем баннер и сайдбар */
@media (max-width: 1024px) {
	body::before {
		height: 150px;
	}
	#mw-head { top: 150px !important; }
	#mw-panel { top: 190px !important; }
}

/* Мобила: прячем сайдбар, контент во всю ширину, баннер короче */
@media (max-width: 768px) {
	body::before {
		height: 110px;
		background-size: cover;
		background-position: center center;
	}
	/* mw-head с поиском и табами сразу под баннером */
	#mw-head {
		top: 110px !important;
		position: relative !important;
		width: 100% !important;
	}
	/* Сайдбар скрываем — навигация через ссылки в контенте */
	#mw-panel {
		display: none !important;
	}
	/* Контент во всю ширину, без отступа под несуществующий сайдбар */
	#content,
	.mw-body,
	#mw-head-base,
	#mw-data-after-content,
	#left-navigation,
	.mw-footer {
		margin-left: 0 !important;
	}
	#mw-head-base {
		display: none !important;
	}
	/* Табы — wrap и компактнее */
	#left-navigation,
	#right-navigation {
		position: static !important;
		float: none !important;
		margin: 0 !important;
		display: block !important;
	}
	.vectorTabs,
	#p-namespaces,
	#p-views {
		display: flex !important;
		flex-wrap: wrap !important;
		padding-left: 0 !important;
	}
	.vectorTabs li a,
	#p-namespaces li a,
	#p-views li a {
		padding: 0.4em 0.6em !important;
		font-size: 0.9em;
	}
	/* Поиск — на отдельной строке во всю ширину */
	#p-search {
		display: block !important;
		float: none !important;
		margin: 0.5em !important;
		width: auto !important;
	}
	#p-search form,
	#p-search #searchInput {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}
	/* "Войти" — над табами */
	#p-personal {
		position: static !important;
		float: none !important;
		text-align: right !important;
		padding: 0.4em 0.6em !important;
	}
	/* Уменьшаем заголовки */
	.mw-body h1,
	.firstHeading,
	#firstHeading {
		font-size: 1.6em !important;
	}
	#content,
	.mw-body {
		padding: 0.8em 0.8em !important;
		margin: 0.4em !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;
	}
}