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

Текущая версия от 11:06, 9 мая 2026

/* ================================================ */
/* БАЗОВЫЕ ПЕРЕМЕННЫЕ И ЦВЕТА ФОРУМА 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-bg {
    width: 100px;
    height: 100px;
    min-width: 100px; /* Запрещаем флексбоксу сжимать блок */
    display: block; /* Заставляем блок существовать даже без текста */
    margin-right: 25px;
    /* ВСТАВЬ СВОЮ ССЫЛКУ МЕЖДУ КАВЫЧКАМИ НИЖЕ: */
    background-image: url('https://wiki.irtmis.ru/images/c/c9/Logo.png'); 
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

@media (max-width: 768px) {
    .main-page-logo-bg {
        margin-right: 0;
        margin-bottom: 20px;
        width: 80px;
        height: 80px;
        min-width: 80px;
    }
}

.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;
	}
}