Замечание: Возможно, после публикации вам придётся очистить кэш своего браузера, чтобы увидеть изменения.
- 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-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 {
/* 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 {
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;
}
.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;
}
}
@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;
}
}