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) — подвинем их под баннер.
Баннер 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 из коробки)
=================================================================== */
/* Планшеты и узкие десктопы: ужимаем баннер и сайдбар */
@media (max-width: 1024px) {
body::before {
height: 150px;
}
#mw-head { top: 150px !important; }
#mw-panel { top: 190px !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-табы (в одном ряду) */
#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; }
/* Сбрасываем абсолютку у ВСЕХ детей 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 {
padding: 0.35em 0.7em !important;
font-size: 0.85em;
line-height: 1.4;
}
/* Поиск — 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;
}
}