Замечание: Возможно, после публикации вам придётся очистить кэш своего браузера, чтобы увидеть изменения.
- 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 будет применяться ко всем темам оформления */
/* Заглавная страница */
/* --- Заголовок с логотипом --- */
.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-family: 'Arial Black', 'Impact', sans-serif;
font-size: 4.0em;
font-weight: bold;
color: #07090d; /* Основной цвет текста заголовка */
margin: 0;
line-height: 1.0;
letter-spacing: 1px; /* Можете немного изменить (0.5px - 1.5px) для лучшего вида с новым свечением */
text-transform: uppercase;
/* Новый, более "красивый" эффект свечения */
text-shadow:
/* 1. Тонкая, очень светлая обводка для четкости букв внутри свечения */
0 0 1.5px rgba(220, 250, 255, 0.45), /* Светлый, почти белый с легким голубым оттенком, полупрозрачный */
/* 2. Основные слои свечения цветом текста */
0 0 4px #29d8ef, /* Ближайший, достаточно плотный слой */
0 0 8px #29d8ef, /* Средний слой, чуть мягче */
/* 3. Внешние, более рассеянные слои для мягкого ореола */
0 0 18px rgba(41, 216, 239, 0.55), /* Цвет #29d8ef с прозрачностью 55% */
0 0 30px rgba(41, 216, 239, 0.30); /* Цвет #29d8ef с прозрачностью 30% */
}
.main-page-subtitle {
font-family: 'Arial', sans-serif; /* Можно попробовать другой sans-serif, если Arial кажется слишком простым */
font-size: 1.6em; /* Размер можно немного варьировать для баланса с заголовком */
color: #B0B0B0; /* Новый, более светлый серый цвет для лучшей читаемости */
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 {
text-decoration: none;
color: #00acc1; /* Новый цвет ссылок */
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 {
/* max-width: 1200px; */
/* margin-left: auto; */
/* margin-right: auto; */
/* padding: 0 15px; */
}
.main-page-columns {
display: flex;
flex-wrap: wrap;
gap: 25px;
}
.main-page-left-column {
flex: 2.5;
min-width: 320px;
display: flex;
flex-direction: column;
gap: 25px;
}
.main-page-right-column {
flex: 1.5;
min-width: 280px;
}
.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 {
color: #00acc1; /* Новый цвет ссылок */
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;
color: #29d8ef; /* Новый цвет ссылок при наведении */
text-decoration: none;
}
/* Стилизация DPL3 для "Обновлений 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 {
padding: 9px 5px;
font-size: 0.95em;
border-bottom: 1px dashed #2A2E35;
line-height: 1.45;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: baseline;
}
.recent-changes-list ul.dpl-recent-updates-list li:last-child {
border-bottom: none;
}
.recent-changes-list ul.dpl-recent-updates-list li a {
color: #00acc1; /* Новый цвет ссылок */
text-decoration: none;
font-weight: bold;
margin-right: 10px;
}
.recent-changes-list ul.dpl-recent-updates-list li a:hover {
color: #29d8ef; /* Новый цвет ссылок при наведении */
text-decoration: underline;
}
.recent-changes-list ul.dpl-recent-updates-list li span.dpl-update-meta {
color: #777; /* Цвет для мета-текста (не ссылка) */
font-weight: normal;
font-size: 0.9em;
white-space: nowrap;
}
/* Если имена пользователей в .dpl-update-meta являются ссылками,
глобальные стили для 'a' должны их покрыть. При необходимости можно уточнить:
.recent-changes-list ul.dpl-recent-updates-list li span.dpl-update-meta a { color: #00acc1; }
.recent-changes-list ul.dpl-recent-updates-list li span.dpl-update-meta a:hover { color: #29d8ef; }
*/
/* --- Стили для графического меню --- */
.graphical-menu-widget {
/* Стили виджета графического меню, если нужны особые */
}
.graphical-menu {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
gap: 20px;
text-align: center;
}
/* Наша обертка для каждого элемента меню */
.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);
overflow: hidden; /* Чтобы ничего не вылезало за пределы скругленных углов */
/* Flex-свойства для центрирования <figure> внутри этого блока */
display: flex;
flex-direction: column;
align-items: center; /* Горизонтальное центрирование <figure> */
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; /* Сбрасываем все отступы у figure */
width: auto !important; /* Ширина по содержимому */
max-width: 100%; /* Чтобы не вылезал за родителя */
/* Flex-свойства для расположения картинки (внутри <a>) и подписи (<figcaption>) */
display: flex;
flex-direction: column; /* Картинка над подписью */
align-items: center; /* Горизонтальное центрирование картинки и подписи */
/* justify-content: center; /* Если нужно дополнительное верт. центрирование внутри figure */
position: relative; /* Чтобы z-index работал для дочерних элементов, если нужно */
z-index: 0; /* <figure> находится под растянутой ссылкой */
}
/* Ссылка <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;
color: transparent;
text-indent: -9999px; /* Спрятать текст, если случайно попадёт */
overflow: hidden; /* Спрятать всё, что может вылезти за пределы */
}
/* Изображение <img> ВНУТРИ растянутой ссылки.
Его видимость и расположение теперь зависят от родительской <figure>
и его собственных стилей. */
.graphical-menu-item-css figure[typeof~='mw:File/Frame'] img.mw-file-element {
display: block; /* Для корректной работы margin auto и размеров */
width: 60px !important;
height: 60px !important;
object-fit: contain;
margin: 0 auto; /* Горизонтальное центрирование, если родительская <a> шире */
/* margin-bottom: 8px; /* Этот отступ теперь лучше задать на figcaption.margin-top */
}
/* Подпись <figcaption> */
.graphical-menu-item-css figure[typeof~='mw:File/Frame'] figcaption {
font-size: 0.85em;
font-weight: 600;
line-height: 1.25;
text-align: center; /* Центрирование текста внутри подписи */
margin-top: 8px; /* Отступ от области изображения до текста подписи */
position: relative; /* Чтобы z-index работал, если понадобится */
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:hover figure[typeof~='mw:File/Frame'] figcaption a {
color: #29d8ef;
}
/* --- Адаптивность --- */
@media (max-width: 768px) {
.main-page-columns {
flex-direction: column;
}
.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 { /* Был .graphical-menu .graphical-menu-image a img */
width: 50px !important; /* Ваше значение */
height: 50px !important; /* Ваше значение */
}
}
@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 { /* Был .graphical-menu .graphical-menu-image a img */
width: 40px !important; /* Ваше значение */
height: 40px !important; /* Ваше значение */
margin-bottom: 8px; /* Ваше значение */
}
.graphical-menu-item-css figure[typeof="mw:File/Frame"] figcaption { /* Был .graphical-menu .graphical-menu-caption */
font-size: 0.85em; /* Ваше значение */
}
}