Замечание: Возможно, после публикации вам придётся очистить кэш своего браузера, чтобы увидеть изменения.
- Firefox / Safari: Удерживая клавишу Shift, нажмите на панели инструментов Обновить либо нажмите Ctrl+F5 или Ctrl+R (⌘+R на Mac)
- Google Chrome: Нажмите Ctrl+Shift+R (⌘+Shift+R на Mac)
- Edge: Удерживая Ctrl, нажмите Обновить либо нажмите Ctrl+F5
- Opera: Нажмите Ctrl+F5.
/* Размещённый здесь CSS будет применяться ко всем темам оформления */
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit; /* Все элементы наследуют box-sizing от родителя */
}
/* Заглавная страница */
/* --- Заголовок с логотипом --- */
.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;
/* filter: drop-shadow(0 0 12px rgba(0, 180, 255, 0.6)); */
}
.main-page-title-container {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.main-page-title {
font-size: 3.5em;
font-weight: bold;
color: #4DD0E1; /* Основной цвет текста заголовка */
margin: 0;
line-height: 1.0;
letter-spacing: 1px; /* Можете немного изменить (0.5px - 1.5px) для лучшего вида с новым свечением */
text-transform: uppercase;
/* Новый, более "красивый" эффект свечения */
text-shadow:
0px 15px 5px rgba(0, 172, 196, 0.1), 10px 20px 5px rgba(0, 172, 196, 0.05), -10px 20px 5px rgba(0, 172, 196, 0.05), 0px 0px 6px rgba(0, 172, 196, 0.7)
}
.main-page-subtitle {
font-family: 'Arial', sans-serif; /* Можно попробовать другой sans-serif, если Arial кажется слишком простым */
font-size: 1.3em; /* Размер можно немного варьировать для баланса с заголовком */
color: #4fa9bf; /* Новый, более светлый серый цвет для лучшей читаемости */
margin: 0;
font-weight: normal;
/* margin-top: 8px; Немного увеличен отступ сверху для "воздуха" */
letter-spacing: 0.5px; /* Легкое увеличение межбуквенного расстояния может улучшить читаемость */
text-align: center; /* Явно центрируем, если контейнер заголовка это позволяет */
}
@media (max-width: 768px) {
.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;
}
}
@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: rgba(26, 29, 35, 0.5);
border-top: 1px solid #2A2E35;
border-bottom: 1px solid #2A2E35;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
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: #E0E0E0; /* Новый цвет ссылок */
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 {
color: #29d8ef; /* Новый цвет ссылок при наведении */
background-color: #2E343D;
text-decoration: none;
transform: translateY(-1px);
}
/* --- Общие стили для колонок и виджетов --- */
.main-page-content-wrapper {
width: 100%;
max-width: 1200px; /* Максимальная ширина контента на больших экранах, настройте по желанию */
margin-left: auto; /* Центрирование блока на больших экранах */
margin-right: auto; /* Центрирование блока на больших экранах */
box-sizing: border-box; /* Убедимся, что padding включен в общую ширину */
}
.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: #171B20;
border: 1px solid #2A2E35;
border-radius: 8px;
padding: 20px;
color: #b0b0b0;
box-shadow: 0 3px 8px rgba(0,0,0,0.25);
}
.widget h2 {
margin-top: 0;
margin-bottom: 20px;
font-size: 1.6em;
color: #E0E0E0;
border-bottom: 1px solid #333842;
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: #20242A;
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;
/* flex-wrap: nowrap; /* По умолчанию для flex-контейнера это nowrap, если элементы помещаются. Проверим без явного указания. */
align-items: baseline; /* Выравнивание по базовой линии текста */
padding: 10px 8px;
font-size: 0.95em;
border-bottom: 1px solid #2E343D;
line-height: 1.5;
/* overflow: visible !important; /* Для отладки: показать, если что-то вылезает */
/* border: 1px solid red !important; /* Для отладки: показать границы LI */
}
.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; /* Фиксированный отступ справа */
/* Убираем flex-grow, min-width, overflow временно, чтобы увидеть естественную ширину */
/* border: 1px solid lime !important; /* Для отладки: показать границы этого блока */
}
/* Дата */
.dpl-item-date {
color: #c4c4c4;
font-size: 0.9em;
margin-right: 10px;
white-space: nowrap; /* Дата не переносится */
flex-shrink: 0; /* Дата не сжимается */
}
/* Название страницы (ссылка) */
.dpl-item-maininfo > a {
color: #00acc1;
text-decoration: none;
/* Пока не ограничиваем ширину и не обрезаем, чтобы понять причину переноса */
/* white-space: nowrap; */
/* overflow: hidden; */
/* text-overflow: ellipsis; */
/* max-width: 350px; /* Можно будет добавить позже, если текст слишком длинный */
}
.dpl-item-maininfo > a:hover {
color: #29d8ef;
text-decoration: underline;
}
/* Блок с информацией о правке */
.dpl-item-editinfo {
color: #777777;
font-size: 0.9em;
white-space: nowrap; /* Этот блок не должен переносить свой текст */
flex-shrink: 0; /* Этот блок не должен сжиматься */
margin-left: auto; /* ЭТО КЛЮЧЕВОЕ ИЗМЕНЕНИЕ: Прижимает этот блок вправо */
/* padding-left: 15px; /* Убираем, так как margin-left: auto сделает всю работу по отступу */
/* border: 1px solid cyan !important; /* Для отладки: показать границы этого блока */
}
/* Ссылка на пользователя в информации о правке */
.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: #1E2228;
border: 1px solid #333842;
border-radius: 10px;
padding: 15px 10px;
min-height: 130px; /* Вы можете настроить эту высоту */
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
/* Flexbox для центрирования <figure> (который содержит картинку и подпись) */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center; /* Центрирует <figure> по вертикали, если есть лишнее пространство */
transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.graphical-menu-item-css:hover {
transform: translateY(-5px) scale(1.03);
box-shadow: 0 8px 16px rgba(0,0,0,0.35);
background-color: #282D35;
border-color: #58A6FF;
}
/* Тег <figure>, генерируемый MediaWiki. Он будет содержать картинку и подпись. */
.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%; /* Чтобы не вылезал за родителя */
/* Flexbox для расположения картинки (внутри <a>) и подписи (<figcaption>) друг под другом и по центру */
display: flex;
flex-direction: column;
align-items: center; /* Горизонтальное центрирование картинки и подписи */
/* z-index: 0; Оставим z-index по умолчанию, чтобы не усложнять */
}
/* Ссылка <a> вокруг изображения <img> - ЭТО БУДЕТ НАША РАСТЯНУТАЯ ССЫЛКА */
.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; /* Убедимся, что у нее нет своей рамки */
/* Убраны font-size:0, text-indent, overflow:hidden, которые могли прятать картинку */
}
/* Изображение <img>, которое находится ВНУТРИ растянутой ссылки <a>.
Оно должно быть видимо и отцентрировано. */
.graphical-menu-item-css figure[typeof~='mw:File/Frame'] > a:first-child:not(.mw-file-description) img.mw-file-element {
display: block; /* Для корректной работы margin:auto и размеров */
width: 100px !important;
height: 100px !important;
object-fit: contain;
margin: 0 auto; /* Горизонтальное центрирование изображения внутри ссылки (если ссылка шире) */
/* Вертикальное центрирование изображения и подписи будет управляться flex-свойствами <figure> и .graphical-menu-item-css */
}
/* Подпись <figcaption> */
.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%; /* Чтобы text-align: center работал предсказуемо */
}
/* Ссылка <a> внутри <figcaption> */
.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: #00acc1;
text-decoration: none;
}
/* При наведении на весь блок .graphical-menu-item-css, меняем цвет ссылки в подписи */
.graphical-menu-item-css:hover figure[typeof~='mw:File/Frame'] figcaption a {
color: #29d8ef;
}
/* --- Адаптивность главной страницы --- */
@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 { /* Был .graphical-menu .graphical-menu-image a */
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; /* Опционально: добавляем небольшой отступ сверху, когда блок перенесся */
/* flex-shrink: 1; /* Можно вернуть сжатие, если текст внутри блока все равно будет слишком длинным, хотя white-space: normal должно справиться */
}
}
@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 { /* Был .graphical-menu .graphical-menu-image a */
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;
}
}
/* Стили для инфобокса предметов (шаблон Магический_предмет) */
/* Инфобокс, который будет плавать слева */
.item-infobox {
width: 300px; /* Ширина инфобокса, можете настроить */
float: left;
margin-right: 20px; /* Отступ справа от инфобокса */
margin-bottom: 20px; /* Отступ снизу */
box-sizing: border-box;
}
.item-infobox .citizen-overflow-wrapper {
max-width: none;
}
.item-infobox-table {
width: 100%;
/* Класс .wikitable из MediaWiki обычно добавляет базовые стили, такие как границы */
}
/* Класс для основного контента, который будет справа от инфобокса.
Этот div вы будете добавлять на страницу вручную, после шаблона. */
.item-main-content {
overflow: hidden; /* Предотвращает "залезание" текста под инфобокс */
/* Альтернатива: если .item-infobox имеет margin-right: 20px; и width: 300px;
то можно задать: margin-left: 320px;
Но 'overflow: hidden' обычно проще и надежнее. */
}
/* Общий контейнер для страницы предмета (опционально, для общей структуры) */
.item-page-container {
/* Можно оставить пустым или добавить общие стили для страницы */
}
/* Классы для цвета текста Редкости и Статуса */
.text-green {
color: green;
}
.text-blue {
color: blue;
}
.text-violet {
color: #8A2BE2; /* BlueViolet, более насыщенный фиолетовый */
}
.text-orange {
color: orange;
}
/* Для класса .text-white:
Белый текст (#FFFFFF) будет плохо читаем на стандартном светлом фоне MediaWiki.
Варианты:
1. Использовать темно-серый для лучшей читаемости: color: #555;
2. Если ваша вики имеет темный фон по умолчанию, 'color: white;' будет работать.
3. Не использовать специальный класс для "Обычный", тогда он будет стандартным цветом текста.
Поскольку вы указали "Обычный = class="text-white"", предполагается, что цвет должен быть белым.
Для примера оставим вариант, который будет виден на светлом фоне.
*/
.text-white {
color: #555; /* Темно-серый, для читаемости на светлом фоне */
/* Если нужен именно белый: color: white; (позаботьтесь о фоне) */
}
.text-success {
color: green; /* Или #006400 (DarkGreen) для лучшего контраста */
font-weight: bold;
}
.text-danger {
color: red; /* Или #B22222 (Firebrick) для лучшего контраста */
font-weight: bold;
}
/* --- Адаптивность страницы маг предметов --- */
@media (max-width: 768px) {
.item-infobox {
width: 100%;
float: none;
}
}
/* Общий контейнер для страницы персонажа */
.character-page-layout {
display: flex;
flex-wrap: wrap;
margin-bottom: 1em;
}
/* Левая колонка с изображением */
.character-image-column {
flex: 0 0 320px;
margin-right: 20px;
text-align: center;
}
.default-character-bg { /* Класс фона по умолчанию для левой колонки */
background-image: url('/resources/assets/character-bg.png');
background-size: cover;
background-position: center;
padding: 10px;
border-radius: 4px; /* Небольшое скругление для фона */
}
.character-image-wrapper img {
max-width: 100%;
height: auto;
display: block;
margin-bottom: 10px;
border-radius: 3px; /* Скругление для самого изображения */
}
.character-profile-link a {
text-decoration: none;
color: var(--color-inverted-primary);
background-color: var(--color-progressive);
margin-top: 10px;
padding: 8px 15px;
display: inline-block;
border-radius: 4px;
}
.character-profile-link a:hover {
background-color: var(--color-progressive--hover);
}
/* Правая колонка с инфобоксом */
.character-info-column {
flex: 1;
min-width: 300px;
}
.infobox-character {
width: 100%;
box-sizing: border-box;
}
.infobox-character-header {
font-weight: bold;
font-size: 1.2em;
text-align: center;
color: white;
padding: 8px 5px;
}
.infobox-character-table {
width: 100%;
border-collapse: collapse;
}
.infobox-character-table th,
.infobox-character-table td {
padding: 0.4em 0.6em;
text-align: left;
vertical-align: top;
}
.infobox-character-table th {
font-weight: bold;
width: 35%;
}
@media (max-width: 720px) {
.character-page-layout {
flex-direction: column;
}
.character-image-column {
margin-right: 0;
margin-bottom: 20px;
flex-basis: auto;
}
}