Замечание: Возможно, после публикации вам придётся очистить кэш своего браузера, чтобы увидеть изменения.
- 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 a { /* .menu-item это тег <a> */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 18px 10px;
border: 1px solid #333842;
border-radius: 10px;
text-decoration: none;
color: #00acc1; /* Новый цвет для текста (внутри span) ссылки */
background-color: #1E2228;
transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1),
box-shadow 0.2s cubic-bezier(0.25, 0.8, 0.25, 1),
background-color 0.2s ease,
border-color 0.2s ease,
color 0.2s ease; /* Добавлен color в transition */
min-height: 135px;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.graphical-menu a:hover {
transform: translateY(-5px) scale(1.03);
box-shadow: 0 8px 16px rgba(0,0,0,0.35);
background-color: #282D35;
border-color: #58A6FF;
color: #29d8ef; /* Новый цвет для текста (внутри span) ссылки при наведении */
}
.graphical-menu a img {
width: 60px;
height: 60px;
margin-bottom: 12px;
object-fit: contain;
}
.graphical-menu a .graphical-menu-caption {
font-size: 0.9em;
font-weight: 600;
line-height: 1.3;
/* Цвет для span будет унаследован от .menu-item (<a>) */
}
/* --- Адаптивность --- */
@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 a {
min-height: 120px;
padding: 15px 8px;
}
.graphical-menu a img {
width: 50px;
height: 50px;
}
}
@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 a {
min-height: 100px;
}
.graphical-menu a img {
width: 40px;
height: 40px;
margin-bottom: 8px;
}
.graphical-menu a span {
font-size: 0.85em;
}
}