|
|
| Строка 1: |
Строка 1: |
| /* Размещённый здесь CSS будет применяться ко всем темам оформления */
| | :root { |
| /* Заглавная страница */
| | --color-base: #E0E0E0; |
| /* --- Заголовок с логотипом --- */
| | --color-subtle: #00acc1; |
| .main-page-header-container {
| | --color-emphasized: #00acc1; |
| display: flex;
| | --color-link: #60bec9; |
| align-items: center;
| | --color-link--hover: #29d8ef; |
| justify-content: center;
| | --color-progressive: #00acc1; |
| flex-wrap: wrap;
| | --color-progressive--hover: #29d8ef; |
| margin-bottom: 35px;
| | --color-progressive--active: #29d8ef; |
| 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: 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 {
| |
| 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;
| |
| }
| |
| | |
| /* Стили для списка 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 {
| |
| color: #00acc1;
| |
| font-weight: normal;
| |
| text-decoration: none;
| |
| }
| |
| | |
| .dpl-item-editinfo a:hover {
| |
| color: #29d8ef;
| |
| 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;
| |
| }
| |
| } | |
