|
|
| Строка 1: |
Строка 1: |
| /* Стиль шаблона JobHeader */
| |
|
| |
| /* Анимация для плавного перемещения фона градиента */
| |
| @keyframes gradient-animation {
| |
| 0% {
| |
| background-position: 0% 50%; /* Начальная позиция фона */
| |
| }
| |
| 50% {
| |
| background-position: 100% 50%; /* Позиция фона на середине анимации */
| |
| }
| |
| 100% {
| |
| background-position: 0% 50%; /* Возвращение к начальной позиции */
| |
| }
| |
| }
| |
|
| |
| /* Стиль заголовка в JobHeader */
| |
| .job_header .header-title {
| |
| text-align: center; /* Центрирование текста */
| |
| padding: 3px 5px; /* Внутренние отступы */
| |
| background: linear-gradient(135deg, var(--header-color-start, var(--border-color, #465298)), var(--header-color-end, #27272e)); /* Градиентный фон */
| |
| background-size: 200% 200%; /* Увеличение фона для эффекта анимации */
| |
| border-radius: .9em .9em 0 0; /* Закругление верхних углов */
| |
| font-weight: bold; /* Жирный шрифт */
| |
| color: #fff; /* Цвет текста */
| |
| font-size: 1em; /* Размер шрифта */
| |
| letter-spacing: 0.5px; /* Интервал между буквами */
| |
| text-transform: uppercase; /* Преобразование текста в верхний регистр */
| |
| cursor: pointer; /* Изменение курсора на указатель при наведении */
| |
| user-select: text; /* Разрешение выбора текста */
| |
| text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Тень для текста */
| |
| border-radius: 0; /* Убирает закругление, чтобы оно не конфликтовало с предыдущим свойством */
| |
| animation: gradient-animation 5s ease infinite; /* Применение анимации градиента */
| |
| }
| |
|
| |
| /* Стиль контейнера для спрайтов в JobHeader */
| |
| .job_header .sprite-container {
| |
| text-align: center; /* Центрирование содержимого */
| |
| padding: 3px 0; /* Внутренние отступы */
| |
| background: linear-gradient(135deg, var(--sprite-color-start, var(--border-color, #465298)), var(--sprite-color-end, #27272e)); /* Градиентный фон */
| |
| background-size: 200% 200%; /* Увеличение фона для эффекта анимации */
| |
| border-radius: 0; /* Без закруглений */
| |
| margin-bottom: 2px; /* Отступ снизу */
| |
| box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5); /* Внутренняя тень */
| |
| animation: gradient-animation 5s ease infinite; /* Применение анимации градиента */
| |
| }
| |
|
| |
| /* Стиль изображений в контейнере спрайтов */
| |
| .job_header .sprite-container img {
| |
| width: 128px; /* Ширина изображения */
| |
| height: auto; /* Автоматическая высота для сохранения пропорций */
| |
| border-radius: .2em; /* Закругление углов изображения */
| |
| box-shadow: none; /* Убирает эффект тени */
| |
| transition: none; /* Убирает анимацию при наведении */
| |
| }
| |
|
| |
| /* Стиль для мелкого текста в JobHeader */
| |
| .job_header small {
| |
| display: block; /* Отображение в блоке */
| |
| padding: 5px; /* Внутренние отступы */
| |
| color: #aaa; /* Цвет текста */
| |
| font-size: 12px; /* Размер шрифта */
| |
| line-height: 1.4; /* Высота строки */
| |
| }
| |
|
| |
| /* Стиль для элементов div в JobHeader */
| |
| .job_header div {
| |
| padding: 3px; /* Минимальные внутренние отступы */
| |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Граница снизу */
| |
| transition: background-color 0.3s ease; /* Плавный переход цвета фона */
| |
| }
| |
|
| |
| /* Эффект при наведении на div в JobHeader */
| |
| .job_header div:hover {
| |
| background-color: rgba(255, 255, 255, 0.05); /* Изменение цвета фона при наведении */
| |
| }
| |
|
| |
| /* Стиль для меток в JobHeader */
| |
| .job_header .label {
| |
| color: #fff; /* Цвет текста */
| |
| font-weight: bold; /* Жирный шрифт */
| |
| }
| |
|
| |
| /* Стиль для значений в JobHeader */
| |
| .job_header .value {
| |
| color: #bbb; /* Цвет текста */
| |
| }
| |
|
| |
| /* Стиль шаблона JobHeader */
| |
|
| |
|
| |
| /* Begin стиль для tabber
| |
| Shegare */
| |
|
| |
| /* Устанавливает высоту секций tabber в значение по умолчанию */
| |
| .unheightTabber .tabber__section {
| |
| height: unset !important; /* Отменяет любые установленные значения высоты */
| |
| }
| |
|
| |
| /* End стиль для tabber
| |
| Shegare */
| |
|
| |
|
| |
| /* Begin стиль ног (footer)
| |
| Shegare */
| |
|
| |
| /* Блоки в одну строку */
| |
| .page-info__item {
| |
| flex-basis: 100%; /* Задает ширину элемента в 100% для отображения в одной строке */
| |
| }
| |
|
| |
| /* Убираем отступ для ног (footer) */
| |
| .citizen-footer {
| |
| margin: 0; /* Убирает все внешние отступы */
| |
| }
| |
|
| |
| /* End стиль ног (footer)
| |
| Shegare */
| |
|
| |
|
| |
| /* Begin стиль для JobsTable
| |
| Shegare */
| |
|
| |
| /* Стиль для sidebar */
| |
| #IdJobsTableContainer2 {
| |
| margin-top: 112px; /* Устанавливает верхний отступ */
| |
| flex-basis: 20%; /* Устанавливает ширину боковой панели */
| |
| padding: 0px 38px; /* Устанавливает внутренние отступы */
| |
| }
| |
|
| |
| #IdJobsTableContainer2 > div {
| |
| background: #ffffff08; /* Устанавливает полупрозрачный белый фон */
| |
| border-radius: 20px; /* Закругляет углы блока */
| |
| padding: 5px 10px; /* Устанавливает внутренние отступы */
| |
| }
| |
|
| |
| /* Основной стиль для таблицы JobsTable */
| |
| .JobsTable {
| |
| border: 2px solid black; /* Устанавливает черную рамку */
| |
| border-radius: 10px; /* Закругляет углы */
| |
| margin-bottom: 5px; /* Устанавливает нижний отступ */
| |
| width: auto; /* Ширина автоматически подстраивается под содержимое */
| |
| height: fit-content; /* Высота подстраивается под содержимое */
| |
| background: #28303e; /* Устанавливает темный фон */
| |
| }
| |
|
| |
| /* Отступы в шапке JobsTable */
| |
| .JobsTableHeadImg {
| |
| margin-left: 15px; /* Устанавливает левый отступ */
| |
| margin-right: 5px; /* Устанавливает правый отступ */
| |
| }
| |
|
| |
| .JobsTableHeadLink {
| |
| margin-right: auto; /* Устанавливает правый отступ в автоматическом режиме, чтобы сдвинуть элемент влево */
| |
| }
| |
|
| |
| /* Видимость на разных экранах */
| |
| .client-js td.mw-collapsed:not(.mw-made-collapsible):before,
| |
| .client-js table.mw-collapsed:not(.mw-made-collapsible) :first-child tr:first-child th:last-child:before,
| |
| .client-js table.mw-collapsed:not(.mw-made-collapsible) > caption:first-child:after,
| |
| .client-js div.mw-collapsed:not(.mw-made-collapsible):before,
| |
| .client-js ol.mw-collapsible:not(.mw-made-collapsible):before,
| |
| .client-js ul.mw-collapsible:not(.mw-made-collapsible):before,
| |
| .client-js table.mw-collapsible:not(.mw-made-collapsible) :first-child tr:first-child th:last-child:before,
| |
| .client-js table.mw-collapsible:not(.mw-made-collapsible) > caption:first-child:after,
| |
| .client-js div.mw-collapsible:not(.mw-made-collapsible):before {
| |
| opacity: 0; /* Скрывает элементы, задавая им нулевую непрозрачность */
| |
| }
| |
|
| |
| #IdJobsTableContainer1 {
| |
| display: none; /* Скрывает элемент по умолчанию */
| |
| }
| |
|
| |
| /* Изменения для экранов шириной до 1440px */
| |
| @media screen and (max-width: 1440px) {
| |
| #IdJobsTableContainer2 {
| |
| display: none; /* Скрывает боковую панель на узких экранах */
| |
| }
| |
| #IdJobsTableContainer1 {
| |
| display: unset; /* Отображает элемент, когда ширина меньше 1440px */
| |
| }
| |
| .JobsTableHeadImg {
| |
| margin-left: unset; /* Сбрасывает левый отступ */
| |
| }
| |
| .JobsTableHeadLink {
| |
| margin-right: 55px; /* Устанавливает правый отступ */
| |
| }
| |
| /* Устанавливает непрозрачность для скрытых элементов */
| |
| .client-js td.mw-collapsed:not(.mw-made-collapsible):before,
| |
| .client-js table.mw-collapsed:not(.mw-made-collapsible) :first-child tr:first-child th:last-child:before,
| |
| .client-js table.mw-collapsed:not(.mw-made-collapsible) > caption:first-child:after,
| |
| .client-js div.mw-collapsed:not(.mw-made-collapsible):before,
| |
| .client-js ol.mw-collapsible:not(.mw-made-collapsible):before,
| |
| .client-js ul.mw-collapsible:not(.mw-made-collapsible):before,
| |
| .client-js table.mw-collapsible:not(.mw-made-collapsible) :first-child tr:first-child th:last-child:before,
| |
| .client-js table.mw-collapsible:not(.mw-made-collapsible) > caption:first-child:after,
| |
| .client-js div.mw-collapsible:not(.mw-made-collapsible):before {
| |
| opacity: 1; /* Показывает элементы на узких экранах */
| |
| }
| |
| }
| |
|
| |
| /* Скрытие контента на широких экранах */
| |
| @media screen and (min-width: 1440px) {
| |
| .JobsTable .mw-collapsible.mw-collapsed {
| |
| display: none; /* Скрывает элементы с классом mw-collapsed на широких экранах */
| |
| }
| |
| .JobsTable div:hover ~ .mw-collapsible.mw-collapsed {
| |
| display: unset; /* Отображает скрытые элементы при наведении на родительский div */
| |
| }
| |
| .JobsTable .mw-collapsible.mw-collapsed:hover {
| |
| display: unset; /* Отображает скрытые элементы при наведении на сам элемент */
| |
| }
| |
| }
| |
|
| |
| @media screen and (max-width: 1439px) {
| |
| .JobsTable div:first-child {
| |
| padding-left: 15px; /* Устанавливает левый отступ для первого дочернего элемента */
| |
| }
| |
| }
| |
|
| |
| /* Кнопка скрытия элементов */
| |
| .JobsTable .mw-collapsible-toggle {
| |
| margin-top: -35px; /* Устанавливает верхний отступ для кнопки скрытия */
| |
| }
| |
|
| |
| /* Убирает контент с кнопок переключения */
| |
| .JobsTable .mw-collapsible-toggle-default:before,
| |
| .JobsTable .mw-collapsible-toggle-default:after {
| |
| content: unset; /* Убирает текст или контент с кнопок */
| |
| }
| |
|
| |
| /* Стиль для текста, который можно скрыть */
| |
| .JobsTable .mw-collapsible-text {
| |
| background: black; /* Устанавливает черный фон */
| |
| border: 2px solid; /* Устанавливает рамку */
| |
| padding: 2px; /* Устанавливает внутренние отступы */
| |
| margin-right: 5px; /* Устанавливает правый отступ */
| |
| font-weight: 700; /* Жирный шрифт */
| |
| }
| |
|
| |
| /* Стиль для скрытого текста, когда он находится в состоянии сворачивания */
| |
| .JobsTable .mw-collapsible.mw-made-collapsible.mw-collapsed .mw-collapsible-text {
| |
| color: #00ffff9e; /* Устанавливает цвет текста */
| |
| box-shadow: 0 0 10px #00b9b978; /* Добавляет тень к тексту */
| |
| }
| |
|
| |
| /* Стиль для раскрытого текста */
| |
| .JobsTable .mw-collapsible.mw-made-collapsible .mw-collapsible-text {
| |
| color: #c21111cc; /* Устанавливает цвет текста */
| |
| }
| |
|
| |
| /* Кнопки в списке JobsTable */
| |
| .JobsTableList li a {
| |
| color: white; /* Цвет текста */
| |
| font-size: 16px; /* Размер шрифта */
| |
| background: #232323; /* Фон ссылки */
| |
| display: block; /* Отображение как блочный элемент */
| |
| border: 2px solid black; /* Устанавливает черную рамку */
| |
| margin-bottom: 5px; /* Устанавливает нижний отступ */
| |
| padding: 3px 5px; /* Устанавливает внутренние отступы */
| |
| transition: background-color 0.8s; /* Плавный переход цвета фона */
| |
| }
| |
|
| |
| .JobsTableList li a:hover {
| |
| background: #007383; /* Меняет фон при наведении */
| |
| transform: scale(1.1); /* Увеличивает размер при наведении */
| |
| text-decoration: unset; /* Убирает подчеркивание текста */
| |
| }
| |
|
| |
| /* End стиль для JobsTable
| |
| Shegare */
| |
|
| |
|
| |
|
| |
| /* Begin Заголовки стиль
| |
| Shegare */
| |
|
| |
| /* Стили для заголовков секций */
| |
| .citizen-sections-enabled .citizen-section-heading .mw-headline {
| |
| border-bottom: 2px solid; /* Устанавливает нижнюю рамку */
| |
| border-image: linear-gradient(to right top, #006a79, #272727); /* Устанавливает градиентную рамку */
| |
| border-image-slice: 1; /* Настройка для правильного отображения градиента */
| |
| }
| |
|
| |
| /* Убирает рамку, если заголовок пустой */
| |
| .citizen-sections-enabled .citizen-section-heading .mw-headline:empty {
| |
| border: unset; /* Отменяет рамку */
| |
| }
| |
|
| |
| /* Убирает рамку для свернутых заголовков секций */
| |
| .citizen-sections-enabled .citizen-section-heading--collapsed .mw-headline {
| |
| border: unset; /* Отменяет рамку */
| |
| }
| |
|
| |
| /* Устанавливает непрозрачность для иконки, связанной со сворачиванием */
| |
| .mw-ui-icon-wikimedia-collapse:before {
| |
| opacity: unset; /* Отменяет значение непрозрачности */
| |
| }
| |
|
| |
| /* Стили для индикатора секции */
| |
| .citizen-sections-enabled .citizen-section-indicator {
| |
| width: 25px; /* Ширина индикатора */
| |
| height: 25px; /* Высота индикатора */
| |
| position: absolute; /* Абсолютное позиционирование */
| |
| padding: 3px; /* Внутренние отступы */
| |
| background: rgb(0 235 255 / 60%); /* Полупрозрачный фон */
| |
| box-shadow: 0 0 20px 0px rgb(0 235 255 / 20%); /* Тень */
| |
| border: 1px solid #000000; /* Черная рамка */
| |
| border-radius: 50%; /* Закругленные углы */
| |
| transition: 0.3s; /* Плавный переход */
| |
| margin-left: -30px; /* Отрицательный левый отступ */
| |
| margin-right: 5px; /* Правый отступ */
| |
| }
| |
|
| |
| /* Изменения для экранов шириной до 1119px */
| |
| @media screen and (max-width: 1119px) {
| |
| .citizen-sections-enabled .citizen-section-indicator {
| |
| margin-left: 0px; /* Убирает отрицательный левый отступ */
| |
| width: 21px; /* Уменьшает ширину индикатора */
| |
| height: 21px; /* Уменьшает высоту индикатора */
| |
| }
| |
| .citizen-sections-enabled .citizen-section-heading .mw-headline {
| |
| padding-left: 25px; /* Устанавливает отступ для заголовка */
| |
| }
| |
| }
| |
|
| |
| /* Стили для свернутого индикатора секции */
| |
| .citizen-sections-enabled .citizen-section-heading--collapsed .citizen-section-indicator {
| |
| background: #000000; /* Черный фон */
| |
| opacity: 50%; /* Устанавливает непрозрачность */
| |
| box-shadow: unset; /* Убирает тень */
| |
| transition: 0.3s; /* Плавный переход */
| |
| }
| |
|
| |
| /* Устанавливает отступы для абзацев в сворачиваемых секциях */
| |
| .citizen-section-collapsible p {
| |
| margin-bottom: 1.5em; /* Нижний отступ */
| |
| margin-top: 0px; /* Верхний отступ */
| |
| }
| |
|
| |
| /* Убирает рамку для заголовков, содержащих класс header_unborder */
| |
| .citizen-sections-enabled .citizen-section-heading .mw-headline:has(.header_unborder) {
| |
| border: unset; /* Отменяет рамку */
| |
| }
| |
|
| |
| /* End Заголовки стиль
| |
| Shegare */
| |
|
| |
|
| |
| /* Begin Лого стили
| |
| Shegare */
| |
|
| |
| /* Начальный размер блока лого */
| |
| .citizen-header__logo {
| |
| height: 89px; /* Высота логотипа */
| |
| }
| |
|
| |
| /* Анимация появления второго логотипа */
| |
| .logo2 img {
| |
| opacity: 0; /* Начальная непрозрачность */
| |
| animation: animOpacity 0.5s forwards; /* Анимация появления */
| |
| }
| |
|
| |
| /* Ключевые кадры для анимации появления логотипа */
| |
| @keyframes animOpacity {
| |
| 0% {opacity: 0;} /* Начальная непрозрачность */
| |
| 100% {opacity: 1;} /* Конечная непрозрачность */
| |
| }
| |
|
| |
| /* Обводка вокруг логотипов при наведении */
| |
| .logo1:hover, .logo2:hover {
| |
| background: #ffffff26; /* Полупрозрачный фон при наведении */
| |
| border-radius: 15px; /* Закругленные углы */
| |
| }
| |
|
| |
| /* Логотип на экранах меньше 1120px */
| |
| @media screen and (max-width: 1119px) {
| |
| .citizen-header__logo {
| |
| display: flex; /* Отображение как flex-контейнер */
| |
| height: auto; /* Автоматическая высота */
| |
| width: 89px; /* Ширина логотипа */
| |
| }
| |
| .logo1 {
| |
| margin-right: 3px; /* Правый отступ */
| |
| }
| |
| }
| |
|
| |
| @media screen and (min-width: 1120px) {
| |
| .logo1 {
| |
| margin-bottom: 3px; /* Нижний отступ */
| |
| }
| |
| }
| |
|
| |
| /* End Лого стили
| |
| Shegare */
| |
|
| |
|
| |
| /* Begin элементы таблицы "|" не подсвечиваются при наведении
| |
| Shegare */
| |
|
| |
| /* Убирает подсветку для элементов таблицы в темной теме */
| |
| :root.skin-citizen-dark {
| |
| --background-color-quiet--hover: unset; /* Отменяет эффект подсветки */
| |
| }
| |
|
| |
| /* End элементы таблицы "|" не подсвечиваются при наведении
| |
| Shegare */
| |
|
| |
|
| |
| /* Begin header не скрывается
| |
| Shegare */
| |
|
| |
| /* Убирает скрытие заголовка при прокрутке вниз на экранах меньше 1119px */
| |
| @media screen and (max-width: 1119px) {
| |
| .citizen-scroll--down .citizen-header {
| |
| transform: unset; /* Отменяет трансформацию */
| |
| }
| |
| }
| |
|
| |
| /* End header не скрывается
| |
| Shegare */
| |
|
| |
|
| |
| /* Begin фикс JobGear
| |
| Shegare */
| |
|
| |
| /* Убирает пунктир у всплывающих подсказок */
| |
| .job_gear .tooltip span {
| |
| border-bottom: unset !important; /* Отменяет рамку */
| |
| }
| |
|
| |
| /* Стили для оберток с классом job_gear */
| |
| .citizen-table-wrapper:has(.job_gear) {
| |
| overflow-x: unset; /* Убирает горизонтальную прокрутку */
| |
| }
| |
|
| |
| .citizen-overflow--right:has(.job_gear) {
| |
| -webkit-mask-image: unset; /* Убирает маску для правого переполнения */
| |
| mask-image: unset; /* Убирает маску для правого переполнения */
| |
| }
| |
|
| |
| /* Изменения для экранов шириной до 850px */
| |
| @media screen and (max-width: 850px) {
| |
| .job_gear img {
| |
| width: 48px; /* Устанавливает ширину изображений */
| |
| height: 48px; /* Устанавливает высоту изображений */
| |
| }
| |
| .job_gear {
| |
| font-size: 12px; /* Устанавливает размер шрифта */
| |
| }
| |
| }
| |
|
| |
| /* Изменения для экранов шириной до 760px */
| |
| @media screen and (max-width: 760px) {
| |
| .citizen-table-wrapper {
| |
| overflow: auto; /* Устанавливает автоматическую прокрутку */
| |
| }
| |
| .citizen-overflow--left.citizen-overflow--right {
| |
| -webkit-mask-image: unset; /* Убирает маску для левого и правого переполнения */
| |
| mask-image: unset; /* Убирает маску для левого и правого переполнения */
| |
| }
| |
| .citizen-overflow--left {
| |
| -webkit-mask-image: unset; /* Убирает маску для левого переполнения */
| |
| mask-image: unset; /* Убирает маску для левого переполнения */
| |
| }
| |
| .citizen-overflow--right {
| |
| -webkit-mask-image: unset; /* Убирает маску для правого переполнения */
| |
| mask-image: unset; /* Убирает маску для правого переполнения */
| |
| }
| |
| }
| |
|
| |
| /* End фикс JobGear
| |
| Shegare */
| |
|
| |
|
| |
| /* Begin Отмена пикселизации
| |
| Shegare */
| |
|
| |
| /* Убирает пикселизацию для изображений логотипов */
| |
| .citizen-header__logo img, .logo img {
| |
| image-rendering: unset; /* Отменяет эффект пикселизации */
| |
| }
| |
|
| |
| .nopixelated img {
| |
| image-rendering: unset; /* Убирает пикселизацию для изображений */
| |
| }
| |
|
| |
| /* End оформление заголовков
| |
| Shegare */
| |
|
| |
|
| |
| /* Begin главное меню
| |
| Данте ( и немного Shegare >w< )
| |
| */
| |
|
| |
| /* Общее форматирование ячеек таблицы */
| |
| .standard-link th,
| |
| .standard-link td {
| |
| vertical-align: middle; /* Центрирование содержимого по вертикали */
| |
| border: 2px solid black; /* Черная рамка вокруг ячеек */
| |
| background-color: #212126; /* Темный фон ячеек */
| |
| }
| |
|
| |
| /* Скругление углов только у первой и последней ячеек в строке заголовка */
| |
| .standard-link th {
| |
| border-radius: 15px 0 0 15px; /* Скругление углов */
| |
| }
| |
|
| |
| /* Форматирование ссылок в заголовках таблицы */
| |
| .standard-link th a {
| |
| margin: 7px; /* Отступы вокруг ссылок в заголовках */
| |
| }
| |
|
| |
| /* Форматирование ссылок в ячейках таблицы */
| |
| .standard-link td a {
| |
| margin: 5px 10px; /* Отступы вокруг ссылок в ячейках */
| |
| padding: 17px; /* Внутренние отступы для ссылок */
| |
| }
| |
|
| |
| /* Общие стили для всех ссылок */
| |
| .standard-link a {
| |
| text-decoration: none; /* Убирает подчеркивание у ссылок */
| |
| font: small-caps bold 25px sans-serif; /* Шрифт и размер текста */
| |
| color: #ffffff; /* Белый цвет текста */
| |
| border: 2px solid black; /* Черная рамка вокруг ссылок */
| |
| display: flex; /* Использование flex для выравнивания */
| |
| align-items: center; /* Вертикальное выравнивание */
| |
| background-color: #141417; /* Темный фон */
| |
| transition: background-color 1.0s ease, border-color 1.0s ease, color 1.0s ease; /* Плавные переходы */
| |
| }
| |
|
| |
| /* Стили для мобильных устройств */
| |
| @media screen and (max-width:850px) {
| |
| .standard-link a {
| |
| transition: none; /* Отключение переходов для мобильных устройств */
| |
| }
| |
| .standard-link td {
| |
| border-radius: 0px 15px 15px 0px; /* Скругление углов для мобильных устройств */
| |
| }
| |
| }
| |
|
| |
| /* Стили при наведении курсора на строку таблицы */
| |
| .standard-link tr:hover a {
| |
| background-color: black; /* Черный фон при наведении */
| |
| color: #fff; /* Белый цвет текста при наведении */
| |
| border-color: #e23229; /* Цвет рамки при наведении */
| |
| }
| |
|
| |
| /* End главное меню
| |
| Данте ( и немного Shegare >w< )
| |
| */
| |
|
| |
|
| |
| /* Данте Морпехи */
| |
| /* Основные стили для контейнера меню */
| |
| .main-container {
| |
| display: flex; /* Использует flexbox для выравнивания */
| |
| flex-wrap: wrap; /* Разрешает перенос элементов */
| |
| justify-content: space-between; /* Распределяет элементы по доступному пространству */
| |
| }
| |
|
| |
| /* Общие стили для секций меню */
| |
| .menu-section {
| |
| flex-basis: 23%; /* Ширина секций */
| |
| margin-bottom: 15px; /* Нижний отступ */
| |
| padding: 10px; /* Внутренние отступы */
| |
| border-radius: 8px; /* Скругление углов */
| |
| background-color: #14171f; /* Фон не покрашенных блоков */
| |
| color: #fff; /* Цвет текста */
| |
| border: 1px solid rgba(255, 255, 255, 0.1); /* Уменьшенная белая обводка для блоков */
| |
| }
| |
|
| |
| /* Индивидуальные цвета для секций */
| |
| .marines-section {
| |
| background-color: #222424; /* Цвет фона для секции Морпехов */
| |
| }
| |
|
| |
| .xenos-section {
| |
| background-color: #2b2e44; /* Цвет фона для секции Ксеносов */
| |
| }
| |
|
| |
| .other-section {
| |
| background-color: #341d1d; /* Цвет фона для блока "Другие фракции" */
| |
| }
| |
|
| |
| /* Стили для заголовков секций */
| |
| .menu-section h3 {
| |
| padding: 5px; /* Внутренние отступы */
| |
| margin: 0; /* Убирает отступы */
| |
| font-size: 18px; /* Размер шрифта */
| |
| text-align: center; /* Центрирование текста */
| |
| color: #fff; /* Цвет текста */
| |
| }
| |
|
| |
| /* Стили для списка */
| |
| .menu-section ul {
| |
| list-style-type: none; /* Убирает маркеры списка */
| |
| padding: 0; /* Убирает внутренние отступы */
| |
| margin: 10px 0 0 0; /* Отступы сверху */
| |
| }
| |
|
| |
| /* Стили для элементов списка */
| |
| .menu-section ul li {
| |
| margin: 10px 0; /* Отступы между элементами списка */
| |
| text-align: center; /* Центрирование текста в элементах списка */
| |
| }
| |
|
| |
| /* Стили для кнопок (ссылок) */
| |
| .menu-section ul li a {
| |
| display: block; /* Блочное отображение */
| |
| width: 100%; /* Ширина 100% */
| |
| padding: 10px; /* Внутренние отступы */
| |
| border-radius: 8px; /* Скругление углов */
| |
| text-align: center; /* Центрирование текста */
| |
| background-color: #1a1e29; /* Цвет фона кнопок */
| |
| color: white; /* Цвет текста */
| |
| font-weight: bold; /* Жирное начертание */
| |
| text-decoration: none; /* Убирает подчеркивание у ссылок */
| |
| border: 1px solid rgba(255, 255, 255, 0.2); /* Обводка для кнопок */
| |
| transition: background-color 0.3s ease, border-color 0.3s ease; /* Плавные переходы */
| |
| }
| |
|
| |
| .menu-section ul li a:hover {
| |
| background-color: #666; /* Цвет фона при наведении */
| |
| border-color: rgba(255, 255, 255, 0.5); /* Обводка при наведении */
| |
| }
| |
|
| |
| /* Стили для секции с картами */
| |
| .maps-section {
| |
| color: white; /* Устанавливаем белый цвет текста для всей секции */
| |
| }
| |
|
| |
| .maps-section ul {
| |
| display: flex; /* Использует flexbox для отображения карт */
| |
| flex-wrap: wrap; /* Разрешает перенос элементов */
| |
| gap: 10px; /* Отступы между картами */
| |
| padding: 0; /* Убирает внутренние отступы */
| |
| margin: 0; /* Убирает внешние отступы */
| |
| }
| |
|
| |
| /* Стили для элементов списка в секции карт */
| |
| .maps-section ul li {
| |
| flex-basis: 48%; /* Уменьшаем до 48% для двух карт в ряд */
| |
| list-style: none; /* Убираем маркеры списка */
| |
| }
| |
|
| |
| /* Стили для ссылок в секции карт */
| |
| .maps-section ul li a {
| |
| display: block; /* Блочное отображение */
| |
| padding: 10px; /* Внутренние отступы */
| |
| background-color: #1a1e29; /* Цвет фона кнопок в секции карт */
| |
| color: white !important; /* Устанавливаем белый цвет текста */
| |
| border-radius: 8px; /* Скругление углов */
| |
| text-align: center; /* Центрирование текста */
| |
| text-decoration: none; /* Убирает подчеркивание */
| |
| border: 1px solid rgba(255, 255, 255, 0.2); /* Обводка для кнопок */
| |
| transition: background-color 0.3s ease, border-color 0.3s ease; /* Плавные переходы */
| |
| }
| |
|
| |
| .maps-section ul li a:hover {
| |
| background-color: #666; /* Цвет фона при наведении на ссылку в секции карт */
| |
| border-color: rgba(255, 255, 255, 0.5); /* Обводка при наведении */
| |
| }
| |
|
| |
| /* Убираем иконку внешней ссылки в блоке карт */
| |
| .maps-section ul li a::after {
| |
| content: none !important; /* Убираем псевдоэлемент */
| |
| }
| |
|
| |
| /* Стили для контейнера заголовка */
| |
| .header-container {
| |
| display: flex;
| |
| align-items: center;
| |
| background-color: #1b1e26;
| |
| padding: 20px 30px;
| |
| border-radius: 8px;
| |
| }
| |
|
| |
| /* Стили для логотипа */
| |
| .logo img {
| |
| border-radius: 50%;
| |
| width: 100px;
| |
| height: auto;
| |
| }
| |
|
| |
| /* Стили для текста заголовка */
| |
| .title-text {
| |
| margin-left: 30px;
| |
| color: #ffffff;
| |
| }
| |
|
| |
| .title-text h1 {
| |
| margin: 0;
| |
| font-size: 32px;
| |
| font-weight: bold;
| |
| }
| |
|
| |
| .title-text p {
| |
| margin: 5px 0 0;
| |
| font-size: 18px;
| |
| }
| |
|
| |
| /* Стили для разделителя */
| |
| .separator {
| |
| border-bottom: 2px solid #A9A9A9;
| |
| margin: 10px 0 20px;
| |
| }
| |
|
| |
| /* Адаптивные стили для мобильных устройств */
| |
| @media (max-width: 599px) {
| |
| .main-container {
| |
| flex-direction: column;
| |
| align-items: stretch;
| |
| }
| |
|
| |
| .menu-section {
| |
| flex-basis: 100%;
| |
| margin-bottom: 15px;
| |
| display: flex;
| |
| flex-direction: column;
| |
| align-items: stretch;
| |
| }
| |
|
| |
| .menu-section ul {
| |
| flex-grow: 1;
| |
| justify-content: space-between;
| |
| padding: 0;
| |
| }
| |
|
| |
| .menu-section ul li {
| |
| flex-grow: 1;
| |
| width: 100%;
| |
| text-align: center;
| |
| margin-bottom: 10px; /* Отступы между элементами */
| |
| }
| |
|
| |
| .menu-section ul li a {
| |
| flex-grow: 1;
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| width: 100%;
| |
| text-align: center;
| |
| padding: 10px 0;
| |
| }
| |
|
| |
| .maps-section ul {
| |
| flex-wrap: wrap;
| |
| gap: 10px;
| |
| }
| |
|
| |
| .maps-section ul li {
| |
| flex-basis: 48%; /* Карты будут располагаться по 2 на ряд */
| |
| margin-bottom: 10px; /* Отступы между картами */
| |
| }
| |
|
| |
| .header-container {
| |
| flex-direction: column;
| |
| text-align: center;
| |
| padding: 10px;
| |
| }
| |
|
| |
| .logo img {
| |
| width: 80px;
| |
| }
| |
|
| |
| .title-text {
| |
| margin-left: 0;
| |
| margin-top: 10px;
| |
| }
| |
|
| |
| .title-text h1 {
| |
| font-size: 24px;
| |
| }
| |
|
| |
| .title-text p {
| |
| font-size: 16px;
| |
| }
| |
| }
| |
|
| |
| /* код оформление для Командование и тд Данте! */
| |
| /* Контейнер для карточек */
| |
| .command-wrapper {
| |
| display: flex;
| |
| justify-content: center;
| |
| flex-wrap: wrap;
| |
| gap: 20px;
| |
| padding: 20px;
| |
| }
| |
|
| |
| /* Основные стили карточек */
| |
| .card {
| |
| background-color: #2b2b2b; /* Темный фон карточки */
| |
| border-radius: 10px;
| |
| width: 220px;
| |
| height: auto;
| |
| box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
| |
| display: flex;
| |
| flex-direction: column;
| |
| justify-content: flex-start; /* Элементы начинают сверху */
| |
| align-items: center;
| |
| padding: 8px; /* Уменьшаем padding */
| |
| text-align: center;
| |
| position: relative;
| |
| transition: transform 0.3s ease, box-shadow 0.3s ease;
| |
| border: 4px solid transparent;
| |
| color: #ffffff; /* Белый текст */
| |
| overflow: hidden; /* Скрываем все, что выходит за пределы карточки */
| |
| }
| |
|
| |
| /* Цветные обводки для разных ролей */
| |
| .card.Captain {
| |
| border-color: #B0B7C3; /* Серебристый для Капитана */
| |
| }
| |
| .card.HeadOfSecurity {
| |
| border-color: #FF0000; /* Красный для Главы Безопасности */
| |
| }
| |
| .card.HeadOfPersonnel {
| |
| border-color: #00FF00; /* Зеленый для Главы Персонала */
| |
| }
| |
| .card.Engineer {
| |
| border-color: #FFA500; /* Оранжевый для Старшего Инженера */
| |
| }
| |
| .card.Scientist {
| |
| border-color: #800080; /* Фиолетовый для Научного Руководителя */
| |
| }
| |
| .card.Doctor {
| |
| border-color: #127BB7; /* Синий для Главного Врача */
| |
| }
| |
| .card.Quartermaster {
| |
| border-color: #FFD700; /* Золотой для Квартирмейстера */
| |
| }
| |
|
| |
| /* Стили для текста и заголовков */
| |
| .card .role-name {
| |
| font-weight: bold;
| |
| font-size: 1.4em;
| |
| color: #ffffff; /* Белый текст */
| |
| margin-bottom: 3px;
| |
| white-space: normal; /* Разрешить перенос слов */
| |
| overflow: hidden;
| |
| text-overflow: ellipsis;
| |
| text-align: center; /* Центрирование текста */
| |
| word-wrap: break-word; /* Перенос слов при необходимости */
| |
| display: grid;
| |
| grid-template-columns: 212px;
| |
| grid-template-rows: 75px;
| |
| }
| |
| .role-name a {
| |
| color: #ccc;
| |
| }
| |
|
| |
| /* Стили для изображения */
| |
| .card img {
| |
| max-width: 160px;
| |
| max-height: 160px;
| |
| margin-bottom: 3px; /* Уменьшаем отступ снизу */
| |
| }
| |
|
| |
| /* Стили для описания роли */
| |
| .card .role-description {
| |
| font-size: 0.9em;
| |
| flex-grow: 1;
| |
| margin: 3px 0; /* Минимальные отступы сверху и снизу */
| |
| color: #dcdcdc; /* Более светлый текст */
| |
| text-align: center;
| |
| overflow: hidden;
| |
| text-overflow: ellipsis;
| |
| white-space: normal; /* Текст переносится */
| |
| }
| |
|
| |
| /* Ссылка на СРП */
| |
| .card .role-guide {
| |
| font-size: 0.85em;
| |
| margin-top: 3px; /* Минимальный отступ сверху */
| |
| text-align: center; /* Центрируем текст */
| |
| }
| |
|
| |
| .card .role-guide a {
| |
| color: #00bfff; /* Цвет ссылки */
| |
| text-decoration: none;
| |
| }
| |
|
| |
| .card .role-guide a:hover {
| |
| text-decoration: underline;
| |
| }
| |
|
| |
| /* Hover эффект для карточек */
| |
| .card:hover {
| |
| transform: scale(1.05);
| |
| box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
| |
| }
| |
|
| |
| /* Шаблон JobHeaderTEST*/
| |
| /* CSS для улучшенного шаблона */
| |
| .job_header {
| |
| border: 3px solid var(--border-color, #465298);
| |
| border-radius: .5em;
| |
| background-color: #27272e;
| |
| margin: 0px 0px 10px 5px;
| |
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
| |
| overflow: hidden;
| |
| }
| |
|
| |
| .job_header_title {
| |
| text-align: center;
| |
| padding: 10px;
| |
| font-size: 1.2em;
| |
| background-color: var(--title-color, #465298);
| |
| color: white;
| |
| font-weight: bold;
| |
| }
| |
|
| |
| .job_image {
| |
| text-align: center;
| |
| padding: 10px;
| |
| border-bottom: 1px solid grey;
| |
| }
| |
|
| |
| .job_image img {
| |
| border-radius: 0.2em;
| |
| box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
| |
| }
| |
|
| |
| .job_details {
| |
| padding: 10px;
| |
| color: #ddd;
| |
| margin-bottom: 5px;
| |
| }
| |
|
| |
| .job_details div {
| |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Почти незаметная линия */
| |
| margin-bottom: 5px;
| |
| padding-bottom: 5px;
| |
| }
| |
|
| |
| .job_collapsible {
| |
| cursor: pointer;
| |
| color: lightblue;
| |
| text-decoration: underline;
| |
| margin-top: 10px;
| |
| }
| |
|
| |
| .job_collapsible_content {
| |
| display: none;
| |
| padding: 10px;
| |
| color: #bbb;
| |
| transition: all 0.3s ease;
| |
| }
| |
|
| |
| /* Шаблон JobHeaderTEST*/
| |
|
| |
| /* Ниже костяк вики*/ | | /* Ниже костяк вики*/ |
|
| |
|
| Строка 1416: |
Строка 465: |
| } | | } |
| } | | } |
|
| |
|
| |
|
| |
|
| |
| /*Скрытый код экспериментальный Данте ниже, взрыва опасно!!!!*/
| |
| .custom-tabs {
| |
| position: relative;
| |
| width: 100%;
| |
| max-width: 800px;
| |
| margin: 0 auto;
| |
| }
| |
|
| |
| .custom-tabs input[type="radio"] {
| |
| display: none;
| |
| }
| |
|
| |
| .custom-tabs label {
| |
| display: inline-block;
| |
| padding: 10px 20px;
| |
| margin: 0;
| |
| cursor: pointer;
| |
| background: #333;
| |
| color: white;
| |
| border: 1px solid #222;
| |
| border-radius: 5px 5px 0 0;
| |
| transition: background 0.3s ease;
| |
| }
| |
|
| |
| .custom-tabs input[type="radio"]:checked + label {
| |
| background: #444;
| |
| color: #fff;
| |
| transition: background 0.3s ease;
| |
| }
| |
|
| |
| .tab-content {
| |
| position: relative;
| |
| background: #222;
| |
| color: white;
| |
| border-top: 2px solid #444;
| |
| padding: 20px;
| |
| border-radius: 0 5px 5px 5px;
| |
| overflow: hidden;
| |
| }
| |
|
| |
| .tab-panel {
| |
| display: none;
| |
| animation: fadeIn 0.5s ease-out;
| |
| }
| |
|
| |
| @keyframes fadeIn {
| |
| from {
| |
| opacity: 0;
| |
| transform: translateY(10px);
| |
| }
| |
| to {
| |
| opacity: 1;
| |
| transform: translateY(0);
| |
| }
| |
| }
| |
|
| |
| .custom-tabs input[type="radio"]:nth-of-type(1):checked ~ .tab-content #content1,
| |
| .custom-tabs input[type="radio"]:nth-of-type(2):checked ~ .tab-content #content2,
| |
| .custom-tabs input[type="radio"]:nth-of-type(3):checked ~ .tab-content #content3 {
| |
| display: block;
| |
| }
| |
|
| |
| .custom-tabs label:hover {
| |
| background: #555;
| |
| }
| |
|
| |
| .custom-tabs label:before {
| |
| content: '';
| |
| position: absolute;
| |
| width: 100%;
| |
| height: 3px;
| |
| background: #222;
| |
| top: 0;
| |
| left: 0;
| |
| transform: scaleX(0);
| |
| transform-origin: left;
| |
| transition: transform 0.3s ease;
| |
| }
| |
|
| |
| .custom-tabs label:hover:before {
| |
| transform: scaleX(1);
| |
| }
| |
|
| |
|
| |
| /*Скрытый код экспериментальный Данте ниже, взрыва опасно!!!!*/
| |
