MediaWiki:Common.css

2026-05-09T10:37:10Z

Northern.ferns:

/* ================================================ */
/* БАЗОВЫЕ ПЕРЕМЕННЫЕ И ЦВЕТА ФОРУМА IRTMIS */
/* ================================================ */
:root {
/* Основные фирменные цвета */
--irtmis-color: rgb(106, 171, 217);
--irtmis-accent-color: rgb(136, 191, 227); /* Чуть светлее для наведения (hover) */

/* Переопределяем системные цвета темы (Citizen/Vector) под бренд */
--color-progressive: var(--irtmis-color);
--color-progressive--hover: var(--irtmis-accent-color);
--color-link: var(--irtmis-color);
--color-link--hover: var(--irtmis-accent-color);
}

/* Размещённый здесь CSS будет применяться ко всем темам оформления */
html {
box-sizing: border-box;
}

*,
*::before,
*::after {
box-sizing: inherit;
/* Все элементы наследуют box-sizing от родителя */
}

.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}

.text-muted {
color: var(--color-progressive);
font-size: 0.9em;
display: inline-block;
}

/* МАКЕТЫ */

.dpl-multi-column .dpl-list-columns {
/* Целимся в <ul> с классом dpl-list-columns внутри .dpl-multi-column */
column-count: 3;
/* Количество колонок */
column-gap: 20px;
/* Промежуток между колонками */
-webkit-column-count: 3;
-moz-column-count: 3;
list-style-type: none;
/* Необязательно: убрать маркеры списка */
padding-left: 0;
/* Необязательно: убрать стандартный отступ списка */
}

.dpl-multi-column .dpl-list-columns li {
break-inside: avoid-column;
/* Стараемся не разрывать элементы списка между колонками */
-webkit-column-break-inside: avoid;
/* Для Safari/Chrome */
page-break-inside: avoid;
/* Для Firefox */
padding-bottom: 5px;
/* Небольшой отступ для элементов, если нужно */
}

.infobox-caption {
font-weight: bold;
font-size: 1.2em;
text-align: center;
}

/* Инфобокс, который будет плавать слева */
.left-infobox {
width: 300px;
/* Ширина инфобокса, можете настроить */
float: left;
margin-right: 20px;
/* Отступ справа от инфобокса */
margin-bottom: 20px;
/* Отступ снизу */
box-sizing: border-box;
}

.left-infobox .citizen-overflow-wrapper {
max-width: none;
}

.infobox-btn {
text-align: center;
margin: 10px 0;
}

.infobox-btn a {
text-decoration: none;
color: var(--color-inverted-primary);
background-color: var(--color-progressive);
margin-top: 10px;
padding: 5px 12px;
display: inline-block;
border-radius: var(--border-radius-base);
font-weight: var(--font-weight-medium);
font-size: var(--font-size-small);
}

.infobox-btn a:hover {
background-color: var(--color-progressive--hover);
}

.infobox-table {
width: 100%;
/* Класс .wikitable из MediaWiki обычно добавляет базовые стили, такие как границы */
}

/* ИНФОБОКС справа + изображение слева */
/* Левая колонка с изображением */
.left-column {
float: left;
width: 320px;
margin-right: 10px;
}

/* Правая колонка */
.right-column {
overflow: hidden;
}

.long-image-wrapper img {
max-width: 100%;
height: auto;
display: block;
margin-bottom: 10px;
}

.right-column .citizen-overflow-wrapper {
max-width: none;
margin-block-start: 0;
}

/* ЗАГЛАВНАЯ СТРАНИЦА */

/* --- Заголовок с логотипом --- */
.main-page-header-container {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 35px;
padding: 25px 10px;
text-align: center;
}

.main-page-logo img {
height: 100px;
width: auto;
margin-right: 25px;
}

.main-page-title-container {
display: flex;
flex-direction: column;
align-items: flex-start;
}

.main-page-title {
font-size: 3.5em;
font-weight: bold;
margin: 0;
line-height: 1.0;
letter-spacing: 1px;
text-transform: uppercase;
}

.main-page-subtitle {
font-family: 'Arial', sans-serif;
font-size: 1.3em;
margin: 0;
font-weight: normal;
letter-spacing: 0.5px;
text-align: center;
}

@media (max-width: 480px) {
.main-page-title {
font-size: 2.4em;
}

.main-page-subtitle {
font-size: 1.1em;
}
}

/* --- Компактное меню --- */
.compact-menu-container {
text-align: center;
margin-bottom: 40px;
padding: 10px 0;
background-color: var(--color-panel-transparent);
border-top: 1px solid var(--color-widget-border);
border-bottom: 1px solid var(--color-widget-border);
box-shadow: 0 2px 4px var(--color-box-shadow);
}

ul.compact-menu {
list-style: none;
padding: 0;
margin: 0;
display: inline-block;
}

ul.compact-menu li {
display: inline-block;
margin: 0 8px;
}

ul.compact-menu li a,
ul.compact-menu li a.external {
text-decoration: none;
color: var(--color-base);
font-size: 1.1em;
font-weight: 500;
padding: 8px 15px;
border-radius: 4px;
transition: background-color 0.2s ease, color 0.2s ease, transform 0.1s ease;
display: block;
}

ul.compact-menu li a:hover,
ul.compact-menu li.active a {
background-color: var(--irtmis-color);
text-decoration: none;
transform: translateY(-1px);
}

.compact-menu-link.active {
color: var(--color-link);
}

/* --- Общие стили для колонок и виджетов --- */
.main-page-content-wrapper {
width: 100%;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}

.main-page-columns {
display: flex;
flex-wrap: wrap;
gap: 25px;
width: 100%;
box-sizing: border-box;
}

.main-page-left-column {
flex: 2.5;
min-width: 320px;
display: flex;
flex-direction: column;
gap: 25px;
width: 100%;
}

.main-page-right-column {
flex: 1.5;
min-width: 280px;
width: 100%;
}

.main-page-right-column .widget:not(:last-child) {
margin-bottom: 25px;
}

.widget {
background-color: var(--color-widget-bg);
border: 1px solid var(--color-widget-border);
border-radius: 8px;
padding: 20px;
box-shadow: 0 3px 8px var(--color-box-shadow);
}

.widget h2 {
margin-top: 0;
margin-bottom: 20px;
font-size: 1.6em;
color: var(--color-emphasized);
border-bottom: 1px solid var(--color-widget-border);
padding-bottom: 12px;
font-weight: 600;
letter-spacing: 0.5px;
}

/* Стилизация DPL3 для "Новых страниц" */
.new-pages-list ul {
padding-left: 0;
list-style: none;
margin: 0;
}

.new-pages-list ul li {
margin-bottom: 0;
font-size: 1em;
}

.new-pages-list ul li a {
text-decoration: none;
display: block;
padding: 8px 5px;
border-bottom: 1px dashed #2A2E35;
transition: background-color 0.2s ease, color 0.2s ease;
}

.new-pages-list ul li:last-child a {
border-bottom: none;
}

.new-pages-list ul li a:hover {
background-color: var(--color-widget-bg-btn-hover);
text-decoration: none;
}

/* Стили для списка DPL "Обновления Wiki" */
.recent-changes-list ul.dpl-recent-updates-list {
padding-left: 0;
list-style: none;
margin: 0;
}

.recent-changes-list ul.dpl-recent-updates-list li {
display: flex;
align-items: baseline;
padding: 10px 8px;
font-size: 0.95em;
border-bottom: 1px solid #2E343D;
line-height: 1.5;
}

.recent-changes-list ul.dpl-recent-updates-list li:last-child {
border-bottom: none;
}

/* Блок с датой и названием страницы */
.dpl-item-maininfo {
display: flex;
align-items: baseline;
margin-right: 15px;
}

/* Дата */
.dpl-item-date {
color: #c4c4c4;
font-size: 0.9em;
margin-right: 10px;
white-space: nowrap;
flex-shrink: 0;
}

/* Название страницы (ссылка) */
.dpl-item-maininfo > a {
color: var(--irtmis-color);
text-decoration: none;
}

.dpl-item-maininfo > a:hover {
color: var(--color-link--hover);
text-decoration: underline;
}

/* Блок с информацией о правке */
.dpl-item-editinfo {
color: #777777;
font-size: 0.9em;
white-space: nowrap;
flex-shrink: 0;
margin-left: auto;
}

.dpl-item-editinfo a {
font-weight: normal;
text-decoration: none;
}

.dpl-item-editinfo a:hover {
text-decoration: underline;
}

/* --- Стили для ГРАФИЧЕСКОГО МЕНЮ (финальная версия) --- */

.graphical-menu {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 15px;
}

.graphical-menu-item-css {
position: relative;
background-color: var(--color-widget-bg-btn);
border: 1px solid var(--color-widget-border);
border-radius: 10px;
padding: 15px 10px;
min-height: 130px;
box-shadow: 0 2px 4px var(--color-box-shadow);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.graphical-menu-item-css.active,
.graphical-menu-item-css:hover {
transform: translateY(-5px) scale(1.03);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.35);
background-color: var(--color-widget-bg-btn-hover);
border-color: var(--irtmis-color);
}

.graphical-menu-item-css figure[typeof~='mw:File/Frame'] {
border: none !important;
background-color: transparent !important;
padding: 0 !important;
margin: 0 !important;
width: auto !important;
max-width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}

.graphical-menu-item-css figure[typeof~='mw:File/Frame'] > a:first-child:not(.mw-file-description) {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background-color: transparent;
border: none !important;
}

.graphical-menu-item-css figure[typeof~='mw:File/Frame'] > a:first-child:not(.mw-file-description) img.mw-file-element {
display: block;
width: 100px !important;
height: 100px !important;
object-fit: contain;
margin: 0 auto;
}

.graphical-menu-item-css figure[typeof~='mw:File/Frame'] figcaption {
font-size: 1.0em;
font-weight: 600;
line-height: 1.25;
text-align: center;
margin-top: 105px;
position: relative;
z-index: 0;
width: 100%;
}

.graphical-menu-item-css figure[typeof~='mw:File/Frame'] figcaption a,
.graphical-menu-item-css figure[typeof~='mw:File/Frame'] figcaption a:link,
.graphical-menu-item-css figure[typeof~='mw:File/Frame'] figcaption a:visited {
color: var(--irtmis-color);
text-decoration: none;
}

.graphical-menu-item-css:hover figure[typeof~='mw:File/Frame'] figcaption a {
color: var(--irtmis-accent-color);
}

/* --- Адаптивность главной страницы --- */
@media (max-width: 768px) {
.main-page-columns {
flex-direction: column;
gap: 0;
}

.main-page-left-column,
.main-page-right-column {
flex: 1 1 100%;
min-width: unset;
}

.graphical-menu {
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.graphical-menu-item-css {
min-height: 120px;
padding: 15px 8px;
}

.graphical-menu-item-css figure[typeof~='mw:File/Frame'] img.mw-file-element {
width: 50px !important;
height: 50px !important;
}

.dpl-item-maininfo {
flex-wrap: wrap;
}

.dpl-item-editinfo {
margin-left: 0;
flex-basis: 100%;
white-space: normal;
margin-bottom: 10px;
}
}

/* Классы для цвета текста Редкости и Статуса */
.text-green { color: green; }
.text-blue { color: blue; }
.text-violet { color: #8A2BE2; }
.text-orange { color: orange; }
.text-white { color: #555; }
.text-success { color: green; font-weight: bold; }
.text-danger { color: red; font-weight: bold; }

/* ПЕРСОНАЖ */
.default-character-bg {
background-image: url('/resources/assets/character-bg.png'); /* Не забудь проверить путь к картинке на новой вики */
background-size: cover;
background-position: center;
padding: 10px;
text-align: center;
}

/* МАГ СИСТЕМА */
.magic-system-intro {
background-color: var(--color-surface-2);
padding: 20px;
border-radius: 8px;
margin-bottom: 30px;
border: 1px solid #2A2E35;
font-size: 1.1em;
line-height: 1.6;
}

.magic-system-intro p {
margin-bottom: 15px;
}

.magic-system-intro strong {
color: var(--irtmis-color);
}

.magic-navigation-header {
font-size: 2em;
padding-bottom: 10px;
margin-top: 40px;
margin-bottom: 25px;
font-weight: bold;
text-align: center;
color: var(--color-progressive);
}

.terminology-section h2 {
font-size: 2em;
padding-bottom: 10px;
margin-top: 40px;
margin-bottom: 20px;
font-weight: bold;
color: var(--color-progressive);
}

.terminology-section dl dt {
font-weight: bold;
color: var(--irtmis-color);
margin-top: 10px;
}

.terminology-section dl dd {
margin-left: 20px;
margin-bottom: 10px;
color: #b0b0b0;
}

/* ================================================ */
/* Стили для шаблона Вопрос-Ответ ({{ВопросОтвет}}) */
/* ================================================ */

.qa-block {
margin-top: 20px;
}

.qa-item {
background-color: var(--color-surface-1, #f0f3f6);
border: 1px solid var(--color-widget-border, #d1d5db);
margin-bottom: 10px;
border-radius: 4px;
box-shadow: 0 1px 2px var(--color-box-shadow, rgba(0,0,0,0.05));
overflow: hidden;
}

.qa-header {
display: flex;
justify-content: space-between;
align-items: center;
color: var(--color-emphasized, #1f2937);
background-color: var(--color-surface-2, #e5e7eb);
padding: 5px 15px;
cursor: pointer;
border-bottom: 1px solid var(--color-widget-border, #d1d5db);
transition: background-color 0.2s ease-in-out;
}

.qa-item .mw-collapsible-content.mw-collapsed + .qa-header,
.qa-item .qa-header {
border-bottom-color: transparent;
}

.qa-item .mw-collapsible-content:not(.mw-collapsed) + .qa-header,
.qa-item .qa-header:has(+ .mw-collapsible-content:not(.mw-collapsed)) {
border-bottom-color: var(--color-widget-border, #d1d5db);
}

.qa-header:hover {
background-color: var(--color-widget-bg-btn-hover, #d1d5db);
color: var(--color-base);
}

.qa-header-title {
flex-grow: 1;
}

.qa-header .qa-toggle-icon::before {
content: '+';
font-family: monospace;
font-size: 1.4em;
line-height: 1;
color: var(--color-link, #007bff);
padding: 0 5px;
display: inline-block;
transition: transform 0.2s ease-in-out;
}

.qa-header:has(+ .qa-content:not(.mw-collapsed)) .qa-toggle-icon::before {
content: '−';
}

.qa-content {
padding: 15px;
background-color: var(--color-surface-0, #ffffff);
color: var(--color-base, #333333);
border-top: none;
}

.qa-content p {
margin-top: 0;
margin-bottom: 0.8em;
line-height: 1.6;
}

.qa-content p:last-child {
margin-bottom: 0;
}

.qa-full-question {
margin-bottom: 15px;
}

.qa-full-question b,
.qa-answer b {
color: var(--irtmis-color);
margin-right: 5px;
}

/* =================================================== */
/* Универсальные стили для сворачиваемого блока */
/* =================================================== */

.collapsible-block {
background-color: var(--color-surface-1, #f0f3f6);
border: 1px solid var(--color-widget-border, #d1d5db);
margin-bottom: 10px;
border-radius: 4px;
box-shadow: 0 1px 2px var(--color-box-shadow, rgba(0,0,0,0.05));
overflow: hidden;
}

.collapsible-header {
display: flex;
justify-content: space-between;
align-items: center;
color: var(--color-emphasized, #1f2937);
background-color: var(--color-surface-2, #e5e7eb);
padding: 5px 15px;
cursor: pointer;
border-bottom: 1px solid transparent;
transition: background-color 0.2s ease-in-out;
}

.collapsible-header:has(+ .collapsible-content:not(.mw-collapsed)) {
border-bottom-color: var(--color-widget-border, #d1d5db);
}

.collapsible-header:hover {
background-color: var(--color-widget-bg-btn-hover, #d1d5db);
}

.collapsible-title {
flex-grow: 1;
}

.collapsible-header .collapsible-icon::before {
content: '+';
font-family: monospace;
font-size: 1.4em;
line-height: 1;
color: var(--color-link, #007bff);
padding: 0 5px;
transition: transform 0.2s ease-in-out;
}

.collapsible-header:has(+ .collapsible-content:not(.mw-collapsed)) .collapsible-icon::before {
content: '−';
}

.collapsible-content {
background-color: var(--color-surface-0, #ffffff);
color: var(--color-base, #333333);
border-top: none;
}

.collapsible-body {
padding: 15px;
line-height: 1.6;
}

.collapsible-body p:first-child { margin-top: 0; }
.collapsible-body p:last-child { margin-bottom: 0; }

/* ================================================================= */
/* Стили для текстового меню-кнопок */
/* ================================================================= */

.button-menu {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 15px;
margin-top: 15px;
margin-bottom: 15px;
}

.text-button-item {
position: relative;
background-color: var(--color-widget-bg-btn);
border: 1px solid var(--color-widget-border);
border-radius: 10px;
min-height: 60px;
box-shadow: 0 2px 4px var(--color-box-shadow);
transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.text-button-item.active,
.text-button-item:hover {
transform: translateY(-5px) scale(1.03);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.35);
background-color: var(--color-widget-bg-btn-hover);
border-color: var(--irtmis-color);
}

.text-button-item a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
color: var(--irtmis-color);
text-decoration: none !important;
font-weight: 600;
text-align: center;
transition: color 0.2s ease;
}

.text-button-item.active a,
.text-button-item:hover a {
color: var(--irtmis-accent-color);
}

@media (max-width: 768px) {
.button-menu {
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
gap: 10px;
}

.text-button-item {
min-height: 60px;
}

.text-button-item a {
font-size: 0.9em;
padding: 8px;
}
}

.magic-school-header {
font-size: var(--font-size-xxx-large);
margin-block-end: 0.25em;
font-weight: var(--font-weight-semi-bold);
line-height: var(--line-height-xxx-small);
color: var(--color-emphasized);
margin-top: 20px;
}

.magic-branch-header {
font-size: var(--font-size-xx-large);
margin-block-end: 0.25em;
font-weight: var(--font-weight-semi-bold);
line-height: var(--line-height-xxx-small);
color: var(--color-emphasized);
margin-top: 20px;
}

.magic-skill-header {
font-size: var(--font-size-x-large);
margin-block-end: 0.25em;
font-weight: var(--font-weight-semi-bold);
line-height: var(--line-height-xxx-small);
color: var(--color-emphasized);
margin-top: 20px;
}

/* ============ */
/* АДАПТИВНОСТЬ */
/* ============ */

@media (max-width: 720px) {
.character-page-layout {
flex-direction: column;
}

.character-image-column {
margin-right: 0;
margin-bottom: 20px;
flex-basis: auto;
}
}

@media (max-width: 768px) {
.left-infobox {
width: 100%;
float: none;
margin-right: 0;
}

.left-column {
float: none;
width: 100%;
margin-left: 0;
}

.right-column {
overflow: visible;
width: 100%;
margin-left: 0;
margin-top: 15px;
}

.main-page-header-container {
flex-direction: column;
}

.main-page-logo img {
margin-right: 0;
margin-bottom: 20px;
height: 60px;
}

.main-page-title-container {
align-items: center;
}

.main-page-title {
font-size: 3.0em;
}

.main-page-subtitle {
font-size: 1.3em;
}

.dpl-multi-column .dpl-list-columns {
column-count: 2;
-webkit-column-count: 2;
-moz-column-count: 2;
}
}

@media (max-width: 480px) {
ul.compact-menu li { margin: 0 3px; }
ul.compact-menu li a { font-size: 0.95em; padding: 6px 10px; }
.widget h2 { font-size: 1.4em; }

.graphical-menu {
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}

.graphical-menu-item-css { min-height: 100px; }

.graphical-menu-item-css figure[typeof~='mw:File/Frame'] img.mw-file-element {
width: 40px !important;
height: 40px !important;
}

.graphical-menu-item-css figure[typeof~='mw:File/Frame'] figcaption {
font-size: 0.85em;
}

.dpl-multi-column .dpl-list-columns {
column-count: 1;
-webkit-column-count: 1;
-moz-column-count: 1;
}
}

MediaWiki:Common.css

2026-05-09T10:21:28Z

Northern.ferns: Новая страница: «/* Размещённый здесь CSS будет применяться ко всем темам оформления */ :root { --forum-blue: rgb(106, 171, 217); } /* Цвет ссылок */ a { color: var(--forum-blue); } /* Цвет заголовков */ h1, h2, h3 { color: var(--forum-blue); border-bottom-color: var(--forum-blue); }»

/* Размещённый здесь CSS будет применяться ко всем темам оформления */
:root {
--forum-blue: rgb(106, 171, 217);
}
/* Цвет ссылок */
a { color: var(--forum-blue); }

/* Цвет заголовков */
h1, h2, h3 { color: var(--forum-blue); border-bottom-color: var(--forum-blue); }