MediaWiki:Common.css: Difference between revisions

Jump to navigation Jump to search

MediaWiki:Common.css (view source)

Revision as of 14:08, 8 August 2025

24,626 bytes added ,  8 August 2025
no edit summary
No edit summary
No edit summary
 
(300 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* HelUs Sidebar */
.mw-kartographer-map,
#help-container {
.mw-kartographer-map .leaflet-container {
    background-color: #FFD800;
  height: 400px !important;
    background-image: url(/images/9/97/Sidebar.png);
    padding: 10px;
    margin-top: 10px;
    text-align: center;
    max-width: 115px;
    margin-left: 12px;
    border: 3px solid #722215;
    border-radius: 10px 10px;
}
}


#help-container div {
 
    color: #DDD7CC;
.infobox-venue {
    font-size: 16px;
  width: 320px;
    font-weight: bold;
  border: 1px solid #3a0a0a;
  background: #0f0f0f;
  color: #eee;
  font-size: 92%;
  line-height: 1.45;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 0 1px #5b1212 inset, 0 6px 18px rgba(0,0,0,.35);
}
}


.help-container {
.infobox-venue > caption,
    padding: 10px;            /* Внутренний отступ для контейнера */
.infobox-venue > tbody > tr:first-child > th[colspan="2"],
    margin-top: 10px;          /* Отступ сверху */
.infobox-venue > .infobox-title {
    text-align: center;        /* Центрирование содержимого */
  display: none;
    font-family: 'MyCustomFont2', sans-serif; /* Применение пользовательского шрифта */
}
}


.help-header {
.infobox-venue > .ib-title {
    color: #000;              /* Цвет текста заголовка */
  font-weight: 700;
    font-size: 0.80em;
    font-weight: bold;
    background-image: linear-gradient(to right, rgba(200, 204, 209, 0) 0, #AA3C14 33%, #AA3C14 66%, rgba(200, 204, 209, 0) 100%);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 100% 1px;
    text-align: left;
    margin-top: -10px;
}
}


.help-image {
.infobox-venue .ib-image {
    max-width: 105%;             /* Ограничивает ширину изображения до 100% от родительского контейнера */
  padding: 0;
    max-height: 105%;           /* Ограничивает высоту изображения до 100% от родительского контейнера */
  background: #1a0b0b;
    height: auto;                /* Высота будет автоматически подстраиваться для сохранения пропорций */
}
    width: auto;                /* Ширина будет автоматически подстраиваться для сохранения пропорций */
.infobox-venue .ib-img {
    margin-top: 10px;            /* Отступ сверху */
  display: block;
    display: block;             /* Обязательно, чтобы центрировать */
  width: 100%;
    margin-left: auto;           /* Центрирование */
  height: auto;
    margin-right: auto;         /* Центрирование */
  border-bottom: 1px solid #4a1111;
    border: 2px solid #722215;      /* Красная рамка вокруг изображения */
    border-radius: 8px;          /* Скругление углов рамки */
    background-color: transparent; /* Прозрачный фон для изображения */
}
}
 
.infobox-venue .ib-caption {
 
  font-size: 85%;
/* Star */
  color: #ccc;
.vector-menu-tabs #ca-unwatch.icon a:before {
  padding: .4em .8em;
    background-image: url(/images/1/14/Unwatch-icon.png);
  border-bottom: 1px solid #311010;
  background: #130505;
}
}


/* More */
.infobox-venue th {
.more-menu {
  text-align: left;
    background-color: #C1BBB2; /* Замените #цвет_фона на соответствующий цвет */
  vertical-align: top;
  width: 40%;
  white-space: nowrap;
  padding: .5em .7em;
  color: #ffd4d4;
  background: #170909;
  border-bottom: 1px solid #2d0e0e;
}
}


#p-cactions-label > span {
.infobox-venue td {
    color: black !important;
  padding: .5em .7em;
  border-bottom: 1px solid #231010;
  vertical-align: top;
}
}


#p-cactions {
.infobox-venue .ib-note {
    background-color: #C1BBB2 !important; /* Устанавливаем белый фон */
  opacity: .8;
    background-image: linear-gradient(to bottom, rgba(167, 215, 249, 0) 0, #ddd7cc 100%);
  font-style: italic;
  font-size: 90%;
}
}


/* Version */
.infobox-venue .ib-map {
.personal-version {
  padding: 0;
    text-align: left;
  border-top: 1px solid #2d0e0e;
    cursor: pointer; /* Указатель при наведении */
  background: #0f0f0f;
    margin-right: 20px; /* Можно отрегулировать для отступа от других элементов */
    display: inline-block;
}
}


.personal-version:hover {
    text-decoration: underline dotted; /* Подчеркивание точками при наведении */
}


.personal-version:hover::after {
 
    content: "Version October 2024";
.image-frame2 {
    position: absolute;
  display: inline-block;
     top: -20px;
  border: none;
     right: 0;
  border-radius: 18px;
     background-color: white;
  overflow: hidden;
     border: 1px solid black;
  box-shadow: 0 3px 16px rgba(70,15,25,0.09);
     padding: 2px 8px;
  margin: 8px;
     border-radius: 4px;
  background: none;
}
.framed-img2, .image-frame2 img {
  display: block;
  width: 206px;
  height: 206px;
  border-radius: 0;
  border-left: 11px solid #c72a37;
  border-right: 11px solid #c72a37;
  border-top: 6px solid #c72a37;
  border-bottom: none;
  box-sizing: border-box;
  margin: 0 auto;
}
.image-caption2 {
  background: #181217;
  color: #e0a6b4;
  border-bottom: 6px solid #c72a37;
  border-left: 11px solid #c72a37;
  border-right: 11px solid #c72a37;
  border-radius: 0 0 18px 18px;
  font-size: 1.11em;
  padding: 10px 0 7px 0;
  margin: 0;
  font-family: 'Segoe UI', 'Arial', sans-serif;
  letter-spacing: .02em;
  width: 206px;
  box-sizing: border-box;
  text-align: center;
}
 
 
 
 
/* Стили для SetlistBox */
.setlist-anim {
     animation: setlist-fadein 0.8s ease;
}
@keyframes setlist-fadein {
     from { opacity: 0; transform: translateY(20px);}
     to { opacity: 1; transform: none;}
}
.setlist-label {
    color: #666;
     font-size: 90%;
     padding-right: 0.5em;
     font-style: italic;
     white-space: nowrap;
     white-space: nowrap;
     box-shadow: 0 0 5px rgba(0,0,0,0.3);
}
.setlist-row:hover {
    background: #f6fbf1;
     transition: background 0.3s;
}
}


.container-ks {
 
     display: flex;
.setlist-song {
     align-items: center;
     margin-right: 1.1em;
    justify-content: center;
     display: inline-block;
}
}


#version-info::after {
 
     content: "Version Beta 5.1 by October 2024. Read more";
.collapsible-setlist {
    font-size: 97%;
    padding-top: 0.3em;
    padding-bottom: 0.3em;
}
.collapsible-setlist-row {
    display: block;
    margin-left: 0.5em;
    margin-bottom: 0.12em;
    color: #363636;
    white-space: nowrap;
}
.collapsible-setlist-symbol {
    font-size: 80%;
    margin-right: 0.5em;
    color: #aaa;
    font-family: 'Arial Unicode MS', Arial, sans-serif;
    vertical-align: middle;
}
 
/* Стили для символа "?" */
.not-confirmed {
    cursor: pointer; /* Меняем курсор на указатель */
    position: relative; /* Для возможного позиционирования */
    text-decoration: none; /* Убираем подчеркивание по умолчанию */
}
 
/* Стили при наведении */
.not-confirmed:hover {
    text-decoration: underline; /* Добавляем подчеркивание */
    text-decoration-style: dotted; /* Подчеркивание в точку */
}
 
/* Добавляем title при наведении */
.not-confirmed[title]:hover:after {
     content: attr(title); /* Используем значение атрибута title */
     position: absolute;
     position: absolute;
     top: 20%;
     top: 100%; /* Позиционируем под элементом */
     left: 30%;
     left: 50%;
     transform: translateX(-50%);
     transform: translateX(-50%);
     background-color: #333333eb;
     background-color: #333;
     color: #fff;
     color: #fff;
     padding: 5px;
     padding: 5px 10px;
     border-radius: 3px;
     border-radius: 4px;
    font-size: 12px;
     white-space: nowrap;
     white-space: nowrap;
    opacity: 0;
     z-index: 10;
    pointer-events: none;
    transition: opacity 0.3s;
     z-index: 2000;
}
}


#version-info:hover::after {
.licontent-actual {
     opacity: 1;
     z-index: -2; /* Устанавливаем уровень слоя ниже upper_tables */
}
}


#version-info {
/*photo frames */
     margin-top: 50px;
/* Стиль для контейнера изображения с рамкой и подписью */
     background-color: #f9f9f9;
.photo-frame {
     padding: 2px 5px; /* Меньше отступы */
     display: inline-block; /* Для корректного центрирования и отображения */
     border: 1px solid #ccc;
    text-align: center; /* Центрирование подписи */
     border-radius: 3px;
     margin: 10px; /* Отступ для визуального разделения */
     font-size: 10px; /* Меньший размер текста */
     padding: 10px 10px 0; /* Уменьшен нижний отступ, чтобы подпись была ближе */
     cursor: pointer;
     vertical-align: top; /* Выравнивание по верхнему краю */
     opacity: 0; /* Изначально невидимый */
     animation: fadeIn 1s ease forwards; /* Анимация появления */
     box-sizing: border-box; /* Учитывает рамку и отступы в размерах */
}
}


.vector-menu-content {
/* Анимация появления */
     position: relative;
@keyframes fadeIn {
     from {
        opacity: 0;
        transform: translateY(10px); /* Легкий сдвиг вниз */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
}


/* Если футер имеет обтекание */
/* Стиль для самой фотографии */
#version-info {
.photo-frame img {
     clear: both;
    border-style: solid; /* Тип рамки */
    border-color: #D02019; /* Красная рамка */
    border-width: 20px 40px; /* Верх/низ: 20px, лево/право: 40px */
    display: block; /* Убирает лишние отступы под изображением */
    max-width: 300px; /* Увеличенная максимальная ширина изображения */
    max-height: 450px; /* Увеличенная максимальная высота изображения */
    height: auto; /* Сохраняет пропорции изображения */
    object-fit: contain; /* Изображение не обрезается, а вписывается целиком */
    box-sizing: border-box; /* Рамка включается в размеры изображения */
     transition: all 0.3s ease; /* Плавный переход для всех изменений */
}
}


/* Эффект при наведении */
.photo-frame img:hover {
    border-width: 23px 47px; /* Увеличиваем рамку при наведении */
    transform: scale(1.05); /* Увеличение изображения на 5% */
}


.quote-container {
/* Стиль для подписи */
  margin-top: 30px;
.photo-frame .caption {
  position: relative;
    margin-top: 5px; /* Минимальный отступ сверху для подписи */
  padding: 5px 10px;
    font-size: 14px; /* Размер шрифта подписи */
  margin-right: 10px;
    color: #333; /* Цвет текста подписи */
  max-width: 400px; /* Ограничение ширины */
    line-height: 1.2; /* Межстрочный интервал для компактности */
  background: #FBF9F5;
  word-wrap: break-word; /* Перенос слов, если они слишком длинные */
  z-index: 1; /* Контейнер должен быть выше фона */
  font-family: 'MyCustomFont2', sans-serif;
}
}


.quote-container::before {
/* Media */
  content: '';
.social-media-row {
  position: absolute;
    display: flex; /* Располагаем элементы в ряд */
  top: -25px;
    gap: 10px; /* Отступ между контейнерами */
  left: 50%; /* Центрируем изображение */
  transform: translateX(-50%);
  width: 100%; /* Немного уменьшенная ширина изображения */
  height: 130px;
  background: url("/images/0/08/Above_quote.png") no-repeat center top;
  background-size: contain;
  z-index: 3; /* Изображение выше контейнера */
}
}


.quote-container::after {
/* Стили для каждого контейнера */
  content: '';
.social-media {
  position: absolute;
    width: 75px;
  bottom: -6px;
    height: 75px;
  left: 50%; /* Центрируем изображение */
    border: 2px solid #000;
  transform: translateX(-50%);
    border-radius: 8px;
  width: 100%; /* Немного уменьшенная ширина изображения */
    background-color: transparent;
  height: 130px;
    cursor: pointer;
  background: url("/images/c/c8/Under_quote.png") no-repeat center bottom;
    transition: all 0.2s ease;
  background-size: contain;
    padding: 10px;
  z-index: 3; /* Изображение выше контейнера */
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 5px;
}
}


.quote-content {
.social-media-row {
  position: relative;
    display: flex;
  z-index: 7;
    gap: 10px;
  padding: 5px 10px;
    justify-content: center; /* Центрирует ряд по горизонтали */
  text-align: center;
  font-family: 'MyCustomFont2', sans-serif; /* Использование шрифта MyCustomFont2 */
  font-style: italic; /* Курсив для текста цитаты */
  color: #555; /* Цвет текста (мягкий серый) */
  font-size: 16px; /* Уменьшенный размер шрифта */
  overflow: hidden; /* Предотвращаем переполнение */
}
}


.quote-author {
.social-media:hover {
  text-align: right; /* Выравнивание текста по правому краю */
    transform: scale(1.1);
  font-family: 'MyCustomFont2', sans-serif; /* Использование шрифта MyCustomFont2 */
  font-size: 16px; /* Размер шрифта для имени автора */
  color: #333; /* Темный цвет текста для лучшей видимости */
  margin-top: 1px; /* Отступ сверху для отделения от цитаты */
  padding: 1px 2px; /* Небольшие отступы вокруг текста */
  position: relative; /* Позволяет добавить эффект теней или других стилей */
  z-index: 8; /* Убедимся, что автор находится выше других слоев */
  bottom: 50px;
}
}


.social-media:active {
    background-color: #ccc;
}


.social-media a {
    width: 100%;
    height: 100%;
    background-image: url('your-image.png');
    background-size: 80%;
    background-position: center center;
    background-repeat: no-repeat;
    background-clip: content-box;
    display: block;
}
/* links */
.mw-parser-output a[href="/index.php/Special:Random"] {
    position: relative; /* Для позиционирования псевдоэлемента */
    display: inline-block; /* Убедимся, что ссылка ведет себя корректно */
}
.mw-parser-output a[href="/index.php/Special:Random"]::before {
    content: "";
    position: absolute;
    top: -14px; /* Расширяем область сверху */
    left: -17px; /* Расширяем область слева */
    right: -17px; /* Расширяем область справа */
    bottom: -14px; /* Расширяем область снизу */
    z-index: 1; /* Убедимся, что псевдоэлемент не перекрывает текст */
}


 
.copyable-text {
 
    background-color: #EFE9DE; /* Цвет фона */
#p-themes-label .vector-menu-heading-label:before {
    border: 2px solid #722215; /* Рамка */
     content: "Light Side";
    padding: 5px 10px; /* Внутренние отступы */
    display: inline-block; /* Для компактного отображения */
    border-radius: 5px; /* Скругленные углы */
    cursor: pointer; /* Курсор в виде указателя */
    transition: background-color 0.3s ease, border-color 0.3s ease; /* Плавный переход */
    font-family: 'MyCustomFont2', sans-serif; /* Шрифт */
    color: #333; /* Цвет текста */
    position: relative; /* Для позиционирования псевдоэлемента */
}
 
/* Эффект при наведении */
.copyable-text:hover {
     background-color: #CFC8B2; /* Цвет фона при наведении */
    border-color: #D02019; /* Цвет рамки при наведении */
}
}


#p-themes-label .vector-menu-heading-label {
/* Эффект затемнения при нажатии */
     visibility: hidden;
.copyable-text:active {
     position: relative;
     background-color: #D5CFC0; /* Чуть темнее, чем #EFE9DE */
     border-color: #5A1A10; /* Чуть темнее, чем #722215 */
}
}


#p-themes-label .vector-menu-heading-label:before {
/* Стиль для текста "Copied" через псевдоэлемент */
     visibility: visible;
.copyable-text.copied::after {
     content: "Copied"; /* Текст "Copied" */
     position: absolute;
     position: absolute;
     left: 0;
     left: -65px; /* Расположение над элементом */
     top: 0;
    left: 50%;
    transform: translateX(-50%); /* Центрируем по горизонтали */
    background-color: #D02019; /* Красный фон */
    color: white; /* Белый текст */
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 0.8em;
    opacity: 0; /* Изначально скрыт */
     transition: opacity 0.3s ease; /* Плавное исчезновение */
}
 
/* Показываем текст "Copied" и запускаем анимацию исчезновения */
.copyable-text.copied::after {
    opacity: 1;
    animation: fadeOut 1.3s forwards; /* Анимация исчезновения */
}
}


#p-themes-item-light a {
/* Анимация для плавного исчезновения */
     --background-color: #f1f1f1;
@keyframes fadeOut {
     --header-background-color: #ffffff;
     0% { opacity: 1; }
     --content-background-color: #ffffff;
     77% { opacity: 1; } /* 77% от 1.3s = ~1s, текст виден 1 секунду */
    direction: ltr;
     100% { opacity: 0; }
    font-family: 'MyCustomFont2', sans-serif;
}
    visibility: hidden;
 
    list-style: none;
/* Kitchen Sink Logo*/
    line-height: 1em;
 
    display: block;
 
    white-space: nowrap;
/* Kitchen Sink */
    cursor: pointer;
.mw-parser-output .life-wrapper {
    padding: 0.25em 0.5em;
     display: flex;
    text-decoration: none;
    margin-left: -10px;
     text-align: center;
    font-size: 15px;
    color: red;
    background: transparent;
    transition: color 0.3s ease, text-shadow 0.3s ease;
     width: 100%;
     width: 100%;
     position: relative;
     max-width: 1390px;
    min-height: 6vh;
    margin-bottom: 1.5em;
    padding: 0;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
}
}


#p-themes-item-light a:before {
.mw-parser-output .life-wrapper-inner {
     content: "Light Side";
     display: flex;
     visibility: visible;
     align-items: center;
     position: absolute;
     justify-content: center;
     left: 50%;
     width: 1390px;
     transform: translateX(-50%);
     margin-left: 60px; /* Смещаем вправо на 50px (настройте по желанию) */
    top: 8px; /* Отступ сверху */
}
    width: 100%;
 
    text-align: center;
.mw-parser-output .survival-text {
     line-height: 1em;
     font-size: 16px;
     color: red;
     margin: 0;
     font-size: 15px;
     padding: 0;
     font-family: 'MyCustomFont2', sans-serif;
     line-height: 1;
     white-space: nowrap;
     margin-right: 0.5em;
     cursor: pointer;
     display: inline-block;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}
}


#p-themes-item-dark a {
.mw-parser-output .kitchen_sink {
     --background-color: #f1f1f1;
     position: relative;
     --header-background-color: #ffffff;
     display: flex;
     --content-background-color: #ffffff;
     align-items: center;
     direction: ltr;
     width: 150px;
     font-family: 'MyCustomFont2', sans-serif;
     margin: 0;
     visibility: hidden;
     padding: 0;
    list-style: none;
}
    line-height: 1em;
 
    display: block;
.mw-parser-output .pillar {
    white-space: nowrap;
     width: 5px;
    cursor: pointer;
     height: 28px;
    padding: 0.25em 0.5em;
     background-color: #D02019;
     text-decoration: none;
     margin: 0;
     margin-left: -10px;
     text-align: center;
    font-size: 15px;
    color: red;
     background: transparent;
    transition: color 0.3s ease, text-shadow 0.3s ease;
    width: 100%;
    position: relative;
}
}


#p-themes-item-dark a:before {
.mw-parser-output .left-pillar {
     content: "Dark Side";
     margin-right: 50px;
    visibility: visible;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 5px; /* Отступ сверху */
    width: 100%;
    text-align: center;
    line-height: 1em;
    color: red;
    font-size: 15px;
    font-family: 'MyCustomFont2', sans-serif;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}
}


#p-themes-item-sai a {
.mw-parser-output .right-pillar {
     --background-color: #f1f1f1;
     transform: rotate(20deg);
     --header-background-color: #ffffff;
     margin-left: -35px;
     --content-background-color: #ffffff;
}
     direction: ltr;
 
     font-family: 'MyCustomFont2', sans-serif;
.mw-parser-output .bridge-beam {
     visibility: hidden;
    position: absolute;
    width: 10px;
    height: 5px;
     background-color: #D02019;
     top: 50%;
     left: calc(50% - 30px - 38px);
    transform: translateY(-50%);
    margin: 0;
}
 
/* Setlist */
 
.mw-parser-output .count-songlist {
    margin: 0;
     padding: 0;
     list-style: none;
     list-style: none;
     line-height: 1em;
     counter-reset: count-songlist-counter;
    display: block;
}
    white-space: nowrap;
 
    cursor: pointer;
.mw-parser-output .count-songlist div {
    padding: 0.25em 0.5em;
     margin: 0.2em 0;
    text-decoration: none;
     padding-left: 2em;
     margin-left: -10px;
    text-align: center;
    font-size: 15px;
    color: red;
    background: transparent;
    transition: color 0.3s ease, text-shadow 0.3s ease;
     width: 100%;
     position: relative;
     position: relative;
    counter-increment: count-songlist-counter;
}
.mw-parser-output .count-songlist div:first-child {
    margin-top: 0.5em;
}
}


#p-themes-item-sai a:before {
.mw-parser-output .count-songlist div:last-child {
     content: "Scaled and Icy Era";
    margin-bottom: 1.5em;
    visibility: visible;
}
 
.mw-parser-output .count-songlist div::before {
     content: counter(count-songlist-counter) ".";
     position: absolute;
     position: absolute;
     left: 50%;
     left: 0.5em;
     transform: translateX(-50%);
    color: black;
     top: 5px; /* Отступ сверху */
     font-size: 1em;
    width: 100%;
}
    text-align: center;
 
     line-height: 1em;
.mw-wiki-logo {
    color: red;
    background-image: url(images/wiki2.png);
    font-size: 15px;
     transition: transform 0.3s ease-in-out; /* Добавляем плавную анимацию */
    font-family: 'MyCustomFont2', sans-serif;
}
    white-space: nowrap;
 
    cursor: pointer;
.mw-wiki-logo:hover {
    transition: color 0.3s ease, text-shadow 0.3s ease;
     transform: scale(1.1); /* Увеличиваем масштаб на 10% */
}
 
ul {
  margin: 0.3em 0 0 1.6em; /* Отступ сверху и слева для всего списка */
  padding: 0; /* Убираем внутренние отступы контейнера */
  list-style-type: disc; /* Тип маркера — круглые точки */
}
 
ul li {
  margin: 0 0 0.2em 0; /* Небольшой отступ снизу между элементами списка */
  padding: 0; /* Без внутренних отступов для элементов */
}
}


#p-themes-item-trench a {
 
     --background-color: #f1f1f1;
ul {
    --header-background-color: #ffffff;
     padding-left: 0;
    --content-background-color: #ffffff;
}
    direction: ltr;
 
    font-family: 'MyCustomFont2', sans-serif;
::marker {
    visibility: hidden;
     list-style-type: none !important;
     list-style: none;
}
    line-height: 1em;
 
    display: block;
.text-effect {
    white-space: nowrap;
     font-size: 25px; /* начальный размер шрифта */
    cursor: pointer;
     color: black; /* начальный цвет текста */
    padding: 0.25em 0.5em;
     transition: color 0.3s ease, font-size 0.3s ease; /* плавный переход для цвета и размера шрифта */
    text-decoration: none;
    margin-left: -10px;
    text-align: center;
     font-size: 15px;
     color: red;
    background: transparent;
     transition: color 0.3s ease, text-shadow 0.3s ease;
    width: 100%;
    position: relative;
}
}


#p-themes-item-trench a:before {
.text-effect:hover {
     content: "Trench Era";
     color: #b22222; /* тускло-красный цвет при наведении */
    visibility: visible;
     font-size: 28px; /* немного увеличенный размер шрифта */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 3px; /* Отступ сверху */
    width: 100%;
    text-align: center;
    line-height: 1em;
    color: red;
     font-size: 15px;
    font-family: 'MyCustomFont2', sans-serif;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}
}


#p-themes-item-trench-dark a {
 
     --background-color: #f1f1f1;
.c-form-title {
     --header-background-color: #ffffff;
     font-family: 'MyCustomFont1';
     --content-background-color: #ffffff;
     font-size: 40px;
     direction: ltr;
     color: #D02019;
     font-family: 'MyCustomFont2', sans-serif;
     line-height: 1;
     visibility: hidden;
     margin-top: 10px;
}
 
.c-form-title:hover {
     color: #E5241D;
}
 
.licontent {
     list-style: none;
     list-style: none;
     line-height: 1em;
     max-width: 30%;
     display: block;
}
     white-space: nowrap;
 
     cursor: pointer;
.licontent .li-header {
     padding: 0.25em 0.5em;
     background: #8d2536;
     text-decoration: none;
     border: 2px solid #0f0f0f; /* Устанавливаем общую границу */
     margin-left: -10px;
     border-bottom: none; /* Убираем нижнюю границу */
     height: 10px; /* Задайте подходящую высоту заголовка */
     color: #ffffff;
     font-weight: bold;
     text-align: center;
     text-align: center;
     font-size: 15px;
     padding: 10px;
     color: red;
    border-radius: 8px 8px 0 0; /* Скругление только для верхних углов */
     background: transparent;
     background-size: cover;
     transition: color 0.3s ease, text-shadow 0.3s ease;
     background-image: url(/images/d/db/Clancy_Letter_Background1.png);
     width: 100%;
     display: flex; /* Для центрирования текста */
     position: relative;
     justify-content: center;
     align-items: center;
}
}


#p-themes-item-trench-dark a:before {
.licontent .li-body {
     content: "Trench Dark Era";
    color: #333333;
     visibility: visible;
    font-size: 14px;
    line-height: 1.6;
    padding: 10px;
    background: #fffcf6;
    border-radius: 0 0 8px 8px;
    border: 2px solid #722215;
    border-top: none;
}
 
.licontent .li-body a {
    color: #1a73e8;
    text-decoration: none;
}
 
.licontent .li-body a:hover {
     text-decoration: underline;
}
 
 
/* Скрытие оригинального текста и замена на "Comments" */
a[rel="discussion"] span {
    display: inline-block; /* Для корректного позиционирования */
    position: relative;
    color: transparent; /* Скрываем оригинальный текст для доступности */
}
 
/* Отображение текста "Comments" */
a[rel="discussion"] span::before {
     content: "Comments";
     position: absolute;
     position: absolute;
     left: 50%;
     top: 0;
     transform: translateX(-50%);
     left: 0;
     top: 3px; /* Отступ сверху */
     color: #0645AD; /* Цвет текста, как у ссылок MediaWiki */
    width: 100%;
    text-align: center;
    line-height: 1em;
    color: red;
    font-size: 15px;
    font-family: 'MyCustomFont2', sans-serif;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}
}


#p-themes-item-blurryface a {
/* Подчеркивание при наведении, как у ссылок */
    --background-color: #f1f1f1;
a[rel="discussion"]:hover span::before {
    --header-background-color: #ffffff;
     text-decoration: underline;
    --content-background-color: #ffffff;
     text-decoration-color: #0645AD; /* Цвет подчеркивания, как у ссылок */
    direction: ltr;
    font-family: 'MyCustomFont2', sans-serif;
    visibility: hidden;
    list-style: none;
    line-height: 1em;
    display: block;
    white-space: nowrap;
    cursor: pointer;
    padding: 0.25em 0.5em;
     text-decoration: none;
    margin-left: -10px;
     text-align: center;
    font-size: 15px;
    color: red;
    background: transparent;
    transition: color 0.3s ease, text-shadow 0.3s ease;
    width: 100%;
    position: relative;
}
}


#p-themes-item-blurryface a:before {
    content: "Blurryface Era";
    visibility: visible;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 3px; /* Отступ сверху */
    width: 100%;
    text-align: center;
    line-height: 1em;
    color: red;
    font-size: 15px;
    font-family: 'MyCustomFont2', sans-serif;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}


#p-themes-item-light {
    position: relative;
    top: -26px;
    right: -10px;
    padding: 0;
    margin: 0;
}




/* Container */
#medias-table {
    background-color: #efe9de;
    padding: 10px;
    border: 2px solid #722215;
    margin-bottom: 10px;
    overflow: hidden;
    border-radius: 10px 10px 0px 0px;
    max-width: 28%;
  }
#social-container {
    background-color: #efe9de;
    padding: 10px;
    border: 1px solid #722215;
    margin-bottom: 10px;
    overflow: hidden;
    max-width: 40px;
    height: 40px;
  }
 
#social-container:hover {
    background-color: #CFC8B2;
  }


#social-wrapper {
    display: flex;          /* Выстраиваем элементы в ряд */
    gap: 10px;              /* Отступы между элементами */
}


.dc_button2 {
    font-weight: 700;
    text-align: center;
    display: inline-block;
    text-transform: uppercase;
    border: 2px solid rgba(65, 79, 106, .3);
    border-radius: 2px;
    box-shadow: 0 0 16px rgba(0, 0, 0, .75) inset;
    min-width: 94px;
    margin: 5px;
}


.circle-chart-background {
/* Selection */
     position: relative; /* Для позиционирования псевдоэлемента */
.red-background ::selection {
     width: 350px; /* Ширина фона (увеличена) */
     background-color: #FFE556; /* Желтый цвет выделения */
    height: 350px; /* Высота фона (увеличена) */
     color: #202122; /* Темно-серый цвет текста */
     overflow: hidden; /* Скрываем все, что выходит за пределы круга */
}
     margin-left: 10px;
 
::selection {
     background-color: #E8C437; /* цвет фона при выделении текста */
     color: #202122;
}
}


.circle-chart-background::before {
/* Main Page*/
     content: ''; /* Создаем пустой контент для псевдоэлемента */
.outer-container {
     position: absolute; /* Абсолютное позиционирование */
    background-color: #efe9de;
     width: 40.5%; /* Ширина псевдоэлемента */
    padding: 10px;
     height: 40.5%; /* Высота псевдоэлемента */
    border: 2px solid #722215;
     top: 0; /* Верхний край */
    margin-bottom: 10px;
     left: 0; /* Левый край */
    overflow: hidden;
     z-index: 0; /* Помещаем на задний план */
    border-radius: 10px 10px 0px 0px;
}
 
.vector-search-box-input {
     background-color: rgb(221 215 204 / 93%);
     color: #010101;
     width: 100%;
     height: 2.15384615em;
    box-sizing: border-box;
    border: 1px solid #a2a9b1;
    border-radius: 2px;
     padding: 5px 2.15384615em 5px 0.4em;
     box-shadow: inset 0 0 0 1px transparent;
    font-family: inherit;
     font-size: 0.8125em;
    direction: ltr;
    transition-property: border-color, box-shadow;
    transition-duration: 250ms;
    -webkit-appearance: none;
    -moz-appearance: textfield;
}
 
body.page-Main_Page #content {
    background-image:
        url(/images/9/99/Clancy_Tyler.png),
        url(/images/6/6f/Josh_Torch.png);
    background-color: #DDD7CC;
    background-size: 22%, 16%;
    background-repeat: no-repeat, no-repeat;
    background-position: 55px 275px, calc(100% - 75px) 275px;
    background-attachment: scroll, scroll;
}
}


.imagemap-content {
.date-12202009 {
     position: relative; /* Для позиционирования содержимого */
     background-color: #ffe556;
     z-index: 1; /* Помещаем содержимое на передний план */
    margin-bottom: 50px;
    margin-right: 10px;
    margin-left: 10px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 2px;
     padding-bottom: 2px;
}
}


.news-text {
    background-color: #ffe556;
    float: right;
    margin-top: 30px;
    margin-bottom: 30px;
}


.ring-container7 {
.container23 {
    width: 200px;
     display: flex; /* Используем flexbox для размещения элементов в ряд */
    height: 200px;
    background-color: #EFE9DE;
    position: relative;
     display: flex;
    justify-content: center;
    align-items: center;
    left: 5px;
    top 15px;
}
}


.ring2 {
.mw-content-ltr ul, .mw-content-rtl .mw-content-ltr ul {
    width: 99.5%;
     margin: 0.3em 0 0;
    height: 99.5%;
     padding: 0;
    background: conic-gradient(#21ABC6 0% 20%, #87B22A 20% 100%);
    border-radius: 50%;
     position: absolute;
    top: 0;
     left: 0;
    z-index: 1; /* Диаграмма на самом нижнем уровне */
}
}


.center2 {
.newstable {
     width: 145px;
     float: right; /* Выравнивание по правому краю */
    height: 145px;
     background-color: #EFE9DE; /* Фоновый цвет */
     background-color: #EFE9DE;
     border: 2px solid #722215; /* Граница */
     border-radius: 50%;
    margin-bottom: 10px; /* Отступ снизу */
     position: absolute;
     list-style-type: none; /* Убирает стандартные маркеры <li> */
     top: 50%;
     width: 300px; /* Фиксированная ширина */
     left: 50%;
     padding: 0; /* Убирает внутренние отступы */
     transform: translate(-50%, -50%);
     border-radius: 10px 10px 0px 0px; /* Скругленные верхние углы */
     z-index: 2; /* Центр кольца выше диаграммы */
    overflow: hidden; /* Скрытие переполненного контента */
    margin-right: 10px; /* Отступ справа */
    display: flex; /* Используем flexbox для управления внутренним содержимым */
    flex-direction: column; /* Вертикальная ориентация содержимого */
    height: 1015px;
     z-index: 10000; /* Устанавливаем высокий уровень слоя */
}
}


.imagemap-content2 {
.news-segment {
     position: absolute;
     background-color: #EFE9DE; /* Фон нижней части */
    z-index: 3; /* Карта изображения выше всех */
     padding: 10px;
     top: 0;
     box-sizing: border-box; /* Чтобы padding не увеличивал высоту */
     left: 0;
     text-align: center;
     width: 200px;
     margin-bottom: 10px;
     height: 200px;
}
}


.news-segment2 {
    background-color: #EFE9DE;  /* Фон нижней части */
    padding: 10px;
    box-sizing: border-box;  /* Чтобы padding не увеличивал высоту */
    text-align: center;
    margin-bottom: 10px;
    margin-top: 10px;
    justify-content: center;  /* Горизонтальное выравнивание по центру */
    align-items: center;
}


.custom-li2 {
    background-color: #EFE9DE;
    border: 2px solid #722215;
    margin-bottom: 10px;
    list-style-type: none;  /* Убирает стандартные маркеры <li> */
    width: 300px;  /* Задает фиксированную ширину для примера */
    padding: 0;  /* Убирает внутренние отступы у <li> */
    border-radius: 10px 10px 0px 0px;
    overflow: hidden;
    margin-right: 10px;
}


.top-part {
    height: 30px;
    color: white;
    padding: 4px;
    box-sizing: border-box;
    border-bottom: 1px solid #ccc;
    background-image: url(/images/d/db/Clancy_Letter_Background1.png);
    background-size: cover;
    text-align: center;
}


.bottom-part {
    background-color: #EFE9DE;  /* Фон нижней части */
    padding: 10px;
    box-sizing: border-box;  /* Чтобы padding не увеличивал высоту */
}


 
/* Убираем стандартные маркеры списка */
 
ul {
 
     padding-left: 0;
.image-container {
    width: 300px; /* Ширина контейнера */
    height: 200px; /* Высота контейнера */
    background-image: url('YourImage.jpg'); /* Путь к вашему изображению */
     background-size: contain; /* Подгонка изображения по размеру контейнера, сохраняя пропорции */
    background-position: center; /* Центрирование изображения */
    background-repeat: no-repeat; /* Предотвращение повторения изображения */
    border: 1px solid #ccc; /* Граница для визуализации */
}
}


Line 577: Line 786:




.pie-chart445 {
    position: relative;
    min-width: 200px;
    min-height: 200px;
    max-width: 200px;
    overflow: hidden;
    transform: scaleX(-1) rotate(-90deg);
}


.pie-chart445 div {
/* HelUs Sidebar */
     border: solid transparent;
#help-container {
     position: absolute;
     background-color: #ffe556;
     width: 100px;
    background-image: url(/images/9/97/Sidebar.png);
     height: 100px;
    padding: 10px;
    margin-top: 10px;
     text-align: center;
     max-width: 115px;
     margin-left: 12px;
    border: 3px solid #722215;
    border-radius: 10px 10px;
}
}


.pie-chart445 .section1 {
#help-container div {
     bottom: 100px;
     color: #DDD7CC;
     left: 100px;
     font-size: 16px;
     background-color: #ffa500;
     font-weight: bold;
}
}


.pie-chart445 .section2 {
.help-container {
     bottom: 100px;
     padding: 10px;             /* Внутренний отступ для контейнера */
     right: 100px;
     margin-top: 10px;         /* Отступ сверху */
     background-color: #ffa500;
     text-align: center;        /* Центрирование содержимого */
    font-family: 'MyCustomFont2', sans-serif; /* Применение пользовательского шрифта */
}
}


.pie-chart445 .section3 {
.help-header {
     top: 100px;
    color: #000;              /* Цвет текста заголовка */
     right: 100px;
    font-size: 0.80em;
     background-color: #ffa500;
     font-weight: bold;
     background-image: linear-gradient(to right, rgba(200, 204, 209, 0) 0, #AA3C14 33%, #AA3C14 66%, rgba(200, 204, 209, 0) 100%);
    background-position: center bottom;
    background-repeat: no-repeat;
     background-size: 100% 1px;
    text-align: left;
    margin-top: -10px;
}
}


.pie-chart445 .section4 {
.help-text {
     top: 100px;
    color: #000;              /* Цвет текста заголовка */
     right: 100px;
    font-size: 0.80em;        /* Размер шрифта */
     border-width: 58.778525229247px 80.901699437495px 0px 0px;
    background-image: linear-gradient(to right, rgba(200, 204, 209, 0) 0, #AA3C14 33%, #AA3C14 66%, rgba(200, 204, 209, 0) 100%);
     border-right-color: #008b8b;
     background-position: center top; /* Положение фона */
    background-repeat: no-repeat;   /* Фон не повторяется */
     background-size: 100% 1px;       /* Размер фона */
     text-align: center;             /* Выравнивание текста по центру */
     margin-top: 10px;                /* Отступ сверху */
    padding-top: 5px;               /* Отступ от фона на 5 пикселей */
}
}


.pie-chart445 .section5 {
.help-image {
     top: 100px;
     max-width: 105%;            /* Ограничивает ширину изображения до 100% от родительского контейнера */
     left: 100px;
    max-height: 105%;            /* Ограничивает высоту изображения до 100% от родительского контейнера */
     background-color: #008b8b;
    height: auto;                /* Высота будет автоматически подстраиваться для сохранения пропорций */
    width: auto;                /* Ширина будет автоматически подстраиваться для сохранения пропорций */
    margin-top: 10px;            /* Отступ сверху */
    display: block;             /* Обязательно, чтобы центрировать */
     margin-left: auto;           /* Центрирование */
    margin-right: auto;          /* Центрирование */
    border: 2px solid #722215;      /* Красная рамка вокруг изображения */
    border-radius: 8px;          /* Скругление углов рамки */
     background-color: transparent; /* Прозрачный фон для изображения */
    margin-left: -5px;
}
}


.pie-chart445 .image-overlay-container {
 
     position: absolute;
/* Star */
    top: 0;
.vector-menu-tabs #ca-unwatch.icon a:before {
    left: 0;
     background-image: url(/images/1/14/Unwatch-icon.png);
    width: 100%;
    height: 100%;
    pointer-events: none; /* Сделает контейнер кликабельным, чтобы изображение было доступно */
}
}


.pie-chart445 .image-overlay-container img {
/* More */
     width: 100%;
.more-menu {
    height: 100%;
     background-color: #C1BBB2; /* Замените #цвет_фона на соответствующий цвет */
    pointer-events: auto; /* Сделает изображение кликабельным */
    transform: scaleX(-1) rotate(90deg); /* Примените нужное преобразование */
}
}


#p-cactions-label > span {
    color: black !important;
}


#p-cactions {
    background-color: #C1BBB2 !important; /* Устанавливаем белый фон */
    background-image: linear-gradient(to bottom, rgba(167, 215, 249, 0) 0, #ddd7cc 100%);
}


/* Version */
.personal-version {
    text-align: left;
    cursor: pointer; /* Указатель при наведении */
    margin-right: 20px; /* Можно отрегулировать для отступа от других элементов */
    display: inline-block;
}


.personal-version:hover {
    text-decoration: underline dotted; /* Подчеркивание точками при наведении */
}


 
.personal-version:hover::after {
 
    content: "Version October 2024";
 
    position: absolute;
 
    top: -20px;
 
    right: 0;
 
    background-color: white;
.relative-container {
    border: 1px solid black;
  position: relative;
    padding: 2px 8px;
  min-width: 200px;
    border-radius: 4px;
  min-height: 200px;
    white-space: nowrap;
  max-width: 200px;
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
  overflow: hidden;
  transform: scaleX(-1) rotate(-90deg);
}
}


.orange-box {
.container-ks {
  border: solid transparent;
    display: flex;
  position: absolute;
    align-items: center;
  width: 100px;
    justify-content: center;
  height: 100px;
  border: 0;
  background-color: #ffa500;
}
}


.bottom-left {
#version-info::after {
  bottom: 100px;
    content: "Version Beta 5.1 by October 2024. Read more";
  left: 100px;
    position: absolute;
    top: 20%;
    left: 30%;
    transform: translateX(-50%);
    background-color: #333333eb;
    color: #fff;
    padding: 5px;
    border-radius: 3px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
    z-index: 2000;
}
}


.bottom-right {
#version-info:hover::after {
  bottom: 100px;
    opacity: 1;
  right: 100px;
}
}


.top-right {
#version-info {
  top: 100px;
    margin-top: 50px;
  right: 100px;
    background-color: #f9f9f9;
    padding: 2px 5px; /* Меньше отступы */
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 10px; /* Меньший размер текста */
    cursor: pointer;
}
}


.turquoise-box {
.vector-menu-content {
  border: solid transparent;
    position: relative;
  position: absolute;
}
  top: 100px;
 
  left: 100px;
/* Если футер имеет обтекание */
  width: 100px;
#version-info {
  height: 100px;
    clear: both;
  border: 0;
  background-color: #008b8b;
}
}


.turquoise-triangle {
 
   border: solid transparent;
.quote-container {
   position: absolute;
   margin-top: 30px;
   top: 100px;
   position: relative;
   right: 100px;
   padding: 5px 10px;
   width: 100px;
   margin-right: 10px;
   height: 100px;
   max-width: 450px; /* Ограничение ширины */
   border-width: 58.778525229247px 80.901699437495px 0px 0px;
   background: #FBF9F5;
   border-right-color: #008b8b;
   word-wrap: break-word; /* Перенос слов, если они слишком длинные */
   z-index: 1; /* Контейнер должен быть выше фона */
  font-family: 'MyCustomFont2', sans-serif;
}
}


.circle-frame {
.quote-container::before {
  content: '';
   position: absolute;
   position: absolute;
   min-width: 200px;
   top: -25px;
   min-height: 200px;
  left: 50%; /* Центрируем изображение */
   overflow: hidden;
  transform: translateX(-50%);
  width: 100%; /* Немного уменьшенная ширина изображения */
   height: 130px;
  background: url("/images/0/08/Above_quote.png") no-repeat center top;
  background-size: contain;
   z-index: 3; /* Изображение выше контейнера */
}
}


 
.quote-container::after {
.pie-chart4 {
  content: '';
    width: 200px;
  position: absolute;
    height: 200px;
  bottom: -6px;
    border-radius: 50%;
  left: 50%; /* Центрируем изображение */
    position: relative;
  transform: translateX(-50%);
    list-style: none;
  width: 100%; /* Немного уменьшенная ширина изображения */
    margin: 0;
  height: 130px;
    padding: 0;
  background: url("/images/c/c8/Under_quote.png") no-repeat center bottom;
    background: url('/images/a/a4/Circle_frame.svg.png') no-repeat center center / cover;
  background-size: contain;
  z-index: 3; /* Изображение выше контейнера */
}
}


.pie-chart4 li {
.quote-content {
    width: 100%;
  position: relative;
    height: 100%;
  z-index: 7;
    border-radius: 50%;
  padding: 5px 10px;
    position: absolute;
  text-align: center;
    clip: rect(0, 200px, 200px, 100px);
  font-family: 'MyCustomFont2', sans-serif; /* Использование шрифта MyCustomFont2 */
  font-style: italic; /* Курсив для текста цитаты */
  color: #555; /* Цвет текста (мягкий серый) */
  font-size: 16px; /* Уменьшенный размер шрифта */
  overflow: hidden; /* Предотвращаем переполнение */
}
}


.pie-chart4 li:before {
.quote-author {
    content: "";
  text-align: right; /* Выравнивание текста по правому краю */
    display: block;
  font-family: 'MyCustomFont2', sans-serif; /* Использование шрифта MyCustomFont2 */
    width: 100%;
  font-size: 16px; /* Размер шрифта для имени автора */
    height: 100%;
  color: #333; /* Темный цвет текста для лучшей видимости */
    border-radius: 50%;
  margin-top: 1px; /* Отступ сверху для отделения от цитаты */
    clip: rect(0, 100px, 200px, 0);
  padding: 1px 2px; /* Небольшие отступы вокруг текста */
    background-color: var(--color);
  position: relative; /* Позволяет добавить эффект теней или других стилей */
    transform: rotate(calc(var(--percentage) * 3.6deg));
  z-index: 8; /* Убедимся, что автор находится выше других слоев */
    transform-origin: 50% 50%;
  bottom: 50px;
}
}


.pie-chart4 li:nth-child(2) {
    transform: rotate(calc(25 * 3.6deg));
}


.pie-chart4 li:nth-child(3) {
 
     transform: rotate(calc(75 * 3.6deg));
 
 
#p-themes-label .vector-menu-heading-label:before {
     content: "Light Side";
}
}


.pie-chart4 li:nth-child(4) {
#p-themes-label .vector-menu-heading-label {
     transform: rotate(calc(150 * 3.6deg));
     visibility: hidden;
    position: relative;
}
}


 
#p-themes-label .vector-menu-heading-label:before {
/* Основной стиль для <li> */
    visibility: visible;
.tooltip23-container {
    position: absolute;
  display: inline-block;
    left: 0;
  position: relative;
    top: 0;
  cursor: pointer;
}
}


/* Скрытый по умолчанию всплывающий блок */
#p-themes-item-light a {
.tooltip23-text {
    --background-color: #f1f1f1;
  visibility: hidden;
    --header-background-color: #ffffff;
  border: 2px solid #C14424;
    --content-background-color: #ffffff;
  background-color: #EFE9DE;
    direction: ltr;
  color: #000;
    font-family: 'MyCustomFont2', sans-serif;
  text-align: center;
    visibility: hidden;
  border-radius: 6px;
    list-style: none;
  padding: 5px 10px; /* Увеличил боковые отступы для лучшего оформления */
    line-height: 1em;
  position: absolute;
    display: block;
  z-index: 1;
    white-space: nowrap;
  top: 125%; /* Позиция всплывающего блока теперь сверху */
    cursor: pointer;
  right: 2px; /* Отступ от правой стороны страницы на 5 пикселей */
    padding: 0.25em 0.5em;
  opacity: 0;
    text-decoration: none;
  transition: opacity 0.3s;
    margin-left: -10px;
  white-space: nowrap; /* Запретить перенос текста на новую строку */
    text-align: center;
    font-size: 15px;
    color: red;
    background: transparent;
    transition: color 0.3s ease, text-shadow 0.3s ease;
    width: 100%;
    position: relative;
}
}


/* Треугольник-указатель всплывающего блока */
#p-themes-item-light a:before {
.tooltip23-text::after {
    content: "Light Side";
  content: "";
    visibility: visible;
  position: absolute;
    position: absolute;
  bottom: 100%; /* Установлено вверху всплывающего блока */
    left: 50%;
  left: 50%;
    transform: translateX(-50%);
  margin-left: -5px;
    top: 8px; /* Отступ сверху */
  border-width: 5px;
     width: 100%;
  border-style: solid;
  border-color: transparent transparent #555 transparent; /* Изменён порядок цвета */
}
 
/* Показывать всплывающий блок при наведении */
.tooltip23-container:hover .tooltip23-text {
  visibility: visible;
  opacity: 1;
}
 
/* Concerts List Table */
/* Вставьте этот код в ваш MediaWiki CSS файл (например, Common.css) */
 
.shows-list {
     width: 65%;
    border: 3px solid #D33328;
}
 
.shows-list th,
.shows-list td {
    border: 1px solid #D33328;
     text-align: center;
     text-align: center;
    line-height: 1em;
    color: red;
    font-size: 15px;
    font-family: 'MyCustomFont2', sans-serif;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}
}


.shows-list th {
#p-themes-item-dark a {
     background-color: #E6E6E6; /* Можно изменить на нужный цвет */
     --background-color: #f1f1f1;
    --header-background-color: #ffffff;
    --content-background-color: #ffffff;
    direction: ltr;
    font-family: 'MyCustomFont2', sans-serif;
    visibility: hidden;
    list-style: none;
    line-height: 1em;
    display: block;
    white-space: nowrap;
    cursor: pointer;
    padding: 0.25em 0.5em;
    text-decoration: none;
    margin-left: -10px;
    text-align: center;
    font-size: 15px;
    color: red;
    background: transparent;
    transition: color 0.3s ease, text-shadow 0.3s ease;
    width: 100%;
    position: relative;
}
}


#p-themes-item-dark a:before {
    content: "Dark Side";
    visibility: visible;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 5px; /* Отступ сверху */
    width: 100%;
    text-align: center;
    line-height: 1em;
    color: red;
    font-size: 15px;
    font-family: 'MyCustomFont2', sans-serif;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}


 
#p-themes-item-sai a {
 
    --background-color: #f1f1f1;
 
    --header-background-color: #ffffff;
 
    --content-background-color: #ffffff;
 
    direction: ltr;
 
    font-family: 'MyCustomFont2', sans-serif;
.styled-list {
    visibility: hidden;
     list-style-type: none; /* Убирает стандартные маркеры списка */
     list-style: none;
     padding: 0; /* Убирает отступы */
    line-height: 1em;
    display: block;
    white-space: nowrap;
    cursor: pointer;
    padding: 0.25em 0.5em;
    text-decoration: none;
     margin-left: -10px;
    text-align: center;
    font-size: 15px;
    color: red;
    background: transparent;
    transition: color 0.3s ease, text-shadow 0.3s ease;
    width: 100%;
    position: relative;
}
}


.styled-item {
#p-themes-item-sai a:before {
     display: flex; /* Использует flexbox для размещения элементов в строке */
    content: "Scaled and Icy Era";
     border: 1px solid #D02019; /* Цвет рамки */
    visibility: visible;
     margin: 5px 0; /* Отступы между элементами списка */
    position: absolute;
     padding: 5px; /* Внутренние отступы */
    left: 50%;
    transform: translateX(-50%);
    top: 5px; /* Отступ сверху */
    width: 100%;
    text-align: center;
    line-height: 1em;
    color: red;
    font-size: 15px;
    font-family: 'MyCustomFont2', sans-serif;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}
 
#p-themes-item-trench a {
    --background-color: #f1f1f1;
    --header-background-color: #ffffff;
    --content-background-color: #ffffff;
    direction: ltr;
    font-family: 'MyCustomFont2', sans-serif;
    visibility: hidden;
    list-style: none;
    line-height: 1em;
    display: block;
    white-space: nowrap;
    cursor: pointer;
    padding: 0.25em 0.5em;
    text-decoration: none;
    margin-left: -10px;
    text-align: center;
    font-size: 15px;
    color: red;
    background: transparent;
    transition: color 0.3s ease, text-shadow 0.3s ease;
    width: 100%;
    position: relative;
}
 
#p-themes-item-trench a:before {
    content: "Trench Era";
    visibility: visible;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 3px; /* Отступ сверху */
    width: 100%;
    text-align: center;
    line-height: 1em;
    color: red;
    font-size: 15px;
    font-family: 'MyCustomFont2', sans-serif;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}
 
#p-themes-item-trench-dark a {
    --background-color: #f1f1f1;
    --header-background-color: #ffffff;
    --content-background-color: #ffffff;
    direction: ltr;
    font-family: 'MyCustomFont2', sans-serif;
    visibility: hidden;
    list-style: none;
    line-height: 1em;
    display: block;
    white-space: nowrap;
    cursor: pointer;
    padding: 0.25em 0.5em;
    text-decoration: none;
    margin-left: -10px;
    text-align: center;
    font-size: 15px;
    color: red;
    background: transparent;
    transition: color 0.3s ease, text-shadow 0.3s ease;
    width: 100%;
    position: relative;
}
 
#p-themes-item-trench-dark a:before {
    content: "Trench Dark Era";
    visibility: visible;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 3px; /* Отступ сверху */
    width: 100%;
    text-align: center;
    line-height: 1em;
    color: red;
    font-size: 15px;
    font-family: 'MyCustomFont2', sans-serif;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}
 
#p-themes-item-blurryface a {
    --background-color: #f1f1f1;
    --header-background-color: #ffffff;
    --content-background-color: #ffffff;
    direction: ltr;
    font-family: 'MyCustomFont2', sans-serif;
    visibility: hidden;
    list-style: none;
    line-height: 1em;
    display: block;
    white-space: nowrap;
    cursor: pointer;
    padding: 0.25em 0.5em;
    text-decoration: none;
    margin-left: -10px;
    text-align: center;
    font-size: 15px;
    color: red;
    background: transparent;
    transition: color 0.3s ease, text-shadow 0.3s ease;
    width: 100%;
    position: relative;
}
 
#p-themes-item-blurryface a:before {
    content: "Blurryface Era";
    visibility: visible;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 3px; /* Отступ сверху */
    width: 100%;
    text-align: center;
    line-height: 1em;
    color: red;
    font-size: 15px;
    font-family: 'MyCustomFont2', sans-serif;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}
 
#p-themes-item-light {
    position: relative;
    top: -26px;
    right: -10px;
    padding: 0;
    margin: 0;
}
 
 
 
 
 
.circle-chart-background {
    position: relative; /* Для позиционирования псевдоэлемента */
    width: 350px; /* Ширина фона (увеличена) */
    height: 350px; /* Высота фона (увеличена) */
    overflow: hidden; /* Скрываем все, что выходит за пределы круга */
    margin-left: 10px;
}
 
.circle-chart-background::before {
    content: ''; /* Создаем пустой контент для псевдоэлемента */
    position: absolute; /* Абсолютное позиционирование */
    width: 40.5%; /* Ширина псевдоэлемента */
    height: 40.5%; /* Высота псевдоэлемента */
    top: 0; /* Верхний край */
    left: 0; /* Левый край */
    z-index: 0; /* Помещаем на задний план */
}
 
.imagemap-content {
    position: relative; /* Для позиционирования содержимого */
    z-index: 1; /* Помещаем содержимое на передний план */
}
 
 
.ring-container7 {
    width: 200px;
    height: 200px;
    background-color: #EFE9DE;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 5px;
    top 15px;
}
 
.regionalatbest {
    width: 99.5%;
    height: 99.5%;
    background: #21ABC6;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1; /* Диаграмма на самом нижнем уровне */
}
 
.ring2 {
    width: 99.5%;
    height: 99.5%;
    background: conic-gradient(#21ABC6 0% 20%, #87B22A 20% 100%);
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1; /* Диаграмма на самом нижнем уровне */
}
 
.center2 {
    width: 145px;
    height: 145px;
    background-color: #EFE9DE;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2; /* Центр кольца выше диаграммы */
}
 
.imagemap-content2 {
    position: absolute;
    z-index: 3; /* Карта изображения выше всех */
    top: 0;
    left: 0;
    width: 200px;
    height: 200px;
}
 
 
 
 
 
 
 
 
.image-container {
    width: 300px; /* Ширина контейнера */
    height: 200px; /* Высота контейнера */
    background-image: url('YourImage.jpg'); /* Путь к вашему изображению */
    background-size: contain; /* Подгонка изображения по размеру контейнера, сохраняя пропорции */
    background-position: center; /* Центрирование изображения */
    background-repeat: no-repeat; /* Предотвращение повторения изображения */
    border: 1px solid #ccc; /* Граница для визуализации */
}
 
 
 
 
.pie-chart445 {
    position: relative;
    min-width: 200px;
    min-height: 200px;
    max-width: 200px;
    overflow: hidden;
    transform: scaleX(-1) rotate(-90deg);
}
 
.pie-chart445 div {
    border: solid transparent;
    position: absolute;
    width: 100px;
    height: 100px;
}
 
.pie-chart445 .section1 {
    bottom: 100px;
    left: 100px;
    background-color: #ffa500;
}
 
.pie-chart445 .section2 {
    bottom: 100px;
    right: 100px;
    background-color: #ffa500;
}
 
.pie-chart445 .section3 {
    top: 100px;
    right: 100px;
    background-color: #ffa500;
}
 
.pie-chart445 .section4 {
    top: 100px;
    right: 100px;
    border-width: 58.778525229247px 80.901699437495px 0px 0px;
    border-right-color: #008b8b;
}
 
.pie-chart445 .section5 {
    top: 100px;
    left: 100px;
    background-color: #008b8b;
}
 
.pie-chart445 .image-overlay-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Сделает контейнер кликабельным, чтобы изображение было доступно */
}
 
.pie-chart445 .image-overlay-container img {
    width: 100%;
    height: 100%;
    pointer-events: auto; /* Сделает изображение кликабельным */
    transform: scaleX(-1) rotate(90deg); /* Примените нужное преобразование */
}
 
 
 
 
 
 
 
 
 
 
 
.relative-container {
  position: relative;
  min-width: 200px;
  min-height: 200px;
  max-width: 200px;
  overflow: hidden;
  transform: scaleX(-1) rotate(-90deg);
}
 
.orange-box {
  border: solid transparent;
  position: absolute;
  width: 100px;
  height: 100px;
  border: 0;
  background-color: #ffa500;
}
 
.bottom-left {
  bottom: 100px;
  left: 100px;
}
 
.bottom-right {
  bottom: 100px;
  right: 100px;
}
 
.top-right {
  top: 100px;
  right: 100px;
}
 
.turquoise-box {
  border: solid transparent;
  position: absolute;
  top: 100px;
  left: 100px;
  width: 100px;
  height: 100px;
  border: 0;
  background-color: #008b8b;
}
 
.turquoise-triangle {
  border: solid transparent;
  position: absolute;
  top: 100px;
  right: 100px;
  width: 100px;
  height: 100px;
  border-width: 58.778525229247px 80.901699437495px 0px 0px;
  border-right-color: #008b8b;
}
 
.circle-frame {
  position: absolute;
  min-width: 200px;
  min-height: 200px;
  overflow: hidden;
}
 
 
.pie-chart4 {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    background: url('/images/a/a4/Circle_frame.svg.png') no-repeat center center / cover;
}
 
.pie-chart4 li {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: absolute;
    clip: rect(0, 200px, 200px, 100px);
}
 
.pie-chart4 li:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    clip: rect(0, 100px, 200px, 0);
    background-color: var(--color);
    transform: rotate(calc(var(--percentage) * 3.6deg));
    transform-origin: 50% 50%;
}
 
.pie-chart4 li:nth-child(2) {
    transform: rotate(calc(25 * 3.6deg));
}
 
.pie-chart4 li:nth-child(3) {
    transform: rotate(calc(75 * 3.6deg));
}
 
.pie-chart4 li:nth-child(4) {
    transform: rotate(calc(150 * 3.6deg));
}
 
 
/* Основной стиль для <li> */
.tooltip23-container {
  display: inline-block;
  position: relative;
  cursor: pointer;
}
 
/* Скрытый по умолчанию всплывающий блок */
.tooltip23-text {
  visibility: hidden;
  border: 2px solid #C14424;
  background-color: #EFE9DE;
  color: #000;
  text-align: center;
  border-radius: 6px;
  padding: 5px 10px; /* Увеличил боковые отступы для лучшего оформления */
  position: absolute;
  z-index: 1;
  top: 125%; /* Позиция всплывающего блока теперь сверху */
  right: 2px; /* Отступ от правой стороны страницы на 5 пикселей */
  opacity: 0;
  transition: opacity 0.3s;
  white-space: nowrap; /* Запретить перенос текста на новую строку */
}
 
/* Треугольник-указатель всплывающего блока */
.tooltip23-text::after {
  content: "";
  position: absolute;
  bottom: 100%; /* Установлено вверху всплывающего блока */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #555 transparent; /* Изменён порядок цвета */
}
 
/* Показывать всплывающий блок при наведении */
.tooltip23-container:hover .tooltip23-text {
  visibility: visible;
  opacity: 1;
}
 
/* Concerts List Table */
/* Вставьте этот код в ваш MediaWiki CSS файл (например, Common.css) */
 
.shows-list {
    width: 65%;
    border: 3px solid #D33328;
}
 
.shows-list th,
.shows-list td {
    border: 1px solid #D33328;
    text-align: center;
}
 
.shows-list th {
    background-color: #E6E6E6; /* Можно изменить на нужный цвет */
}
 
 
 
 
 
 
 
 
 
 
.styled-item {
     display: flex; /* Использует flexbox для размещения элементов в строке */
     border: 1px solid #D02019; /* Цвет рамки */
     margin: 5px 0; /* Отступы между элементами списка */
     padding: 5px; /* Внутренние отступы */
}
 
.styled-item-top {
    display: flex; /* Использует flexbox для размещения элементов в строке */
    margin: 5px 0; /* Отступы между элементами списка */
    padding: 5px; /* Внутренние отступы */
}
 
.table-cell {
    border-right: 1px solid #D02019; /* Рамка справа от каждого элемента */
    padding: 5px; /* Внутренние отступы */
}
 
.table-cell:last-child {
    border-right: none; /* Убирает рамку у последнего элемента */
}
 
.table-cell-top {
    border-right: 1px solid #D02019; /* Рамка справа от каждого элемента */
    padding: 5px; /* Внутренние отступы */
}
 
 
 
 
 
 
 
 
 
/* Скрываем всплывающее окно по умолчанию */
.popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    justify-content: center;
    align-items: center;
}
 
/* Показываем всплывающее окно, если оно активно */
#concert-list-trigger:focus + .popup-overlay {
    display: flex;
}
 
.popup-content {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    max-width: 500px;
    width: 80%;
}
}


.styled-item-top {
.close-button {
     display: flex; /* Использует flexbox для размещения элементов в строке */
    position: absolute;
     margin: 5px 0; /* Отступы между элементами списка */
    top: 10px;
     padding: 5px; /* Внутренние отступы */
     right: 10px;
     cursor: pointer;
     font-size: 20px;
}
}


.table-cell {
/* Скрытие окна при потере фокуса */
    border-right: 1px solid #D02019; /* Рамка справа от каждого элемента */
.popup-overlay:focus-within {
     padding: 5px; /* Внутренние отступы */
     display: none;
}
}


.table-cell:last-child {
    border-right: none; /* Убирает рамку у последнего элемента */
}


.table-cell-top {
    border-right: 1px solid #D02019; /* Рамка справа от каждого элемента */
    padding: 5px; /* Внутренние отступы */
}




Line 865: Line 1,723:




/* Скрываем всплывающее окно по умолчанию */
 
.popup-overlay {
.square-list {
     display: none;
     list-style-type: none; /* Убираем стандартные маркеры списка */
     position: fixed;
     display: inline-block; /* Делаем элемент блочным для центрирования */
    top: 0;
     width: 100px; /* Ширина квадрата */
    left: 0;
     height: 100px; /* Высота квадрата */
     width: 100%;
     position: relative; /* Позволяет наложить картинку */
     height: 100%;
     margin: 10px; /* Отступ между элементами списка */
     background: rgba(0, 0, 0, 0.7);
     border: 1px solid #000; /* Граница квадрата (по желанию) */
     justify-content: center;
     align-items: center;
}
}


/* Показываем всплывающее окно, если оно активно */
.square-list img {
#concert-list-trigger:focus + .popup-overlay {
    position: absolute; /* Позволяет наложить картинку */
     display: flex;
    top: 0; /* Положение сверху */
    left: 0; /* Положение слева */
    width: 100%; /* Ширина картинки на 100% от элемента */
    height: 100%; /* Высота картинки на 100% от элемента */
     object-fit: cover; /* Сохраняет пропорции изображения */
}
}


.popup-content {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    max-width: 500px;
    width: 80%;
}


.close-button {
 
    position: absolute;
.ring-chart27 {
    top: 10px;
  position: relative;
    right: 10px;
  width: 200px;
    cursor: pointer;
  height: 200px;
    font-size: 20px;
  border-radius: 50%;
  background: white;
}
}


/* Скрытие окна при потере фокуса */
.ring-chart27:before {
.popup-overlay:focus-within {
  content: '';
    display: none;
  position: absolute;
  top: 25px;
  left: 25px;
  width: 150px;
  height: 150px;
  background-color: white;
  border-radius: 50%;
  z-index: 1;
}
}


.ring-chart27:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('/images/a/a4/Circle_frame.svg.png') no-repeat center;
  background-size: contain;
  z-index: 3;
}


.ring-chart27 ul {
  list-style: none;
  padding: 0;
  margin: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
}


.ring-chart27 ul li {
  position: absolute;
  width: 100%;
  height: 100%;
  clip-path: polygon(50% 50%, 100% 0%, 100% 100%);
  transition: background 0.3s ease;
}


.ring-chart27 ul li a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none; /* Убираем подчеркивание у ссылок */
}


.ring-chart27 ul li:nth-child(1) {
  background-color: #4caf50;
  transform: rotate(0deg);
}


.ring-chart27 ul li:nth-child(1):hover {
  background-color: #66bb6a;
}


.ring-chart27 ul li:nth-child(2) {
  background-color: #ff9800;
  transform: rotate(90deg);
}


.ring-chart27 ul li:nth-child(2):hover {
  background-color: #ffb74d;
}


.ring-chart27 ul li:nth-child(3) {
  background-color: #2196f3;
  transform: rotate(180deg);
}


.ring-chart27 ul li:nth-child(3):hover {
  background-color: #64b5f6;
}


 
.ring-chart27 ul li:nth-child(4) {
.square-list {
  background-color: #f44336;
    list-style-type: none; /* Убираем стандартные маркеры списка */
  transform: rotate(270deg);
    display: inline-block; /* Делаем элемент блочным для центрирования */
    width: 100px; /* Ширина квадрата */
    height: 100px; /* Высота квадрата */
    position: relative; /* Позволяет наложить картинку */
    margin: 10px; /* Отступ между элементами списка */
    border: 1px solid #000; /* Граница квадрата (по желанию) */
}
}


.square-list img {
.ring-chart27 ul li:nth-child(4):hover {
    position: absolute; /* Позволяет наложить картинку */
  background-color: #ef5350;
    top: 0; /* Положение сверху */
    left: 0; /* Положение слева */
    width: 100%; /* Ширина картинки на 100% от элемента */
    height: 100%; /* Высота картинки на 100% от элемента */
    object-fit: cover; /* Сохраняет пропорции изображения */
}
}






.ring-chart27 {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: white;
}


.ring-chart27:before {
  content: '';
  position: absolute;
  top: 25px;
  left: 25px;
  width: 150px;
  height: 150px;
  background-color: white;
  border-radius: 50%;
  z-index: 1;
}


.ring-chart27:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('/images/a/a4/Circle_frame.svg.png') no-repeat center;
  background-size: contain;
  z-index: 3;
}


.ring-chart27 ul {
  list-style: none;
  padding: 0;
  margin: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
}


.ring-chart27 ul li {
  position: absolute;
  width: 100%;
  height: 100%;
  clip-path: polygon(50% 50%, 100% 0%, 100% 100%);
  transition: background 0.3s ease;
}


.ring-chart27 ul li a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none; /* Убираем подчеркивание у ссылок */
}


.ring-chart27 ul li:nth-child(1) {
  background-color: #4caf50;
  transform: rotate(0deg);
}


.ring-chart27 ul li:nth-child(1):hover {
  background-color: #66bb6a;
}


.ring-chart27 ul li:nth-child(2) {
  background-color: #ff9800;
  transform: rotate(90deg);
}


.ring-chart27 ul li:nth-child(2):hover {
  background-color: #ffb74d;
}


.ring-chart27 ul li:nth-child(3) {
  background-color: #2196f3;
  transform: rotate(180deg);
}


.ring-chart27 ul li:nth-child(3):hover {
 
  background-color: #64b5f6;
 
}
 
 
/* Стили для таблицы "New pages" */
.ring-chart27 ul li:nth-child(4) {
.new-pages-table {
  background-color: #f44336;
     display: inline-block;
  transform: rotate(270deg);
}
 
.ring-chart27 ul li:nth-child(4):hover {
  background-color: #ef5350;
}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
/* Стили для таблицы "New pages" */
.new-pages-table {
     display: inline-block;
     margin-left: 7px;
     margin-left: 7px;
     margin-right: 15px;
     margin-right: 15px;
Line 1,194: Line 2,003:
     text-decoration: none; /* Убирает подчеркивание */
     text-decoration: none; /* Убирает подчеркивание */
     color: #fff;
     color: #fff;
     margin-top: 10px;
     margin-top: 5px;
     margin-bottom: 10px;
     margin-bottom: 5px;
}
}


Line 1,240: Line 2,049:


.site-button {
.site-button {
    background-image: url('/images/6/66/Button_Background.png');
     background-color: #007bff;
     background-color: #007bff;
     color: white;
     color: white;
Line 1,246: Line 2,056:
     padding: 10px 20px;
     padding: 10px 20px;
     cursor: pointer;
     cursor: pointer;
    transition: background-position 0.5s ease-in-out;
}
.site-button:hover {
    background-position: 5% 5%;
}
}


Line 1,343: Line 2,158:
}
}


 
.rules-item {
    background-color: #EFE9DE;
    border: 3px solid #84817B;
    padding: 10px; /* Добавьте отступы по вашему усмотрению */
    border-radius: 5px; /* При необходимости добавьте скругление углов */
    list-style: none;
    padding-left: 20px;
    transform-origin: left;
    float:left;
}




Line 1,388: Line 2,212:


/* Замените .custom-link-text на класс или идентификатор вашего элемента */
/* Замените .custom-link-text на класс или идентификатор вашего элемента */
.custom-link-text a {
/* Сбрасываем стили для родительского <p>, если он есть */
     color: inherit; /* Сохраняет цвет текста */
.mw-parser-output .custom-link-text-p {
     text-decoration: none; /* Убирает подчеркивание */
     margin: 0;
    padding: 0;
}
 
/* Стили для .custom-link-text */
.mw-parser-output .custom-link-text {
    margin: 0;
    padding: 0;
     text-align: center;
    line-height: 1;
    display: inline;
    margin-right: 50px;
}
 
/* Стили для ссылок */
.mw-parser-output .custom-link-text a {
    color: inherit;
    text-decoration: none;
    margin: 0;
    padding: 0;
    line-height: 1;
    display: inline;
}
}


Line 1,406: Line 2,251:
}
}


 
.comment-rules-text {
    font-family: 'MyCustomFont1';
    font-size: 22px;
    color: #000;
    line-height: 1; /* Устанавливаем высоту строки, чтобы минимизировать отступы */
    margin-top: 10px;
    background: #F7F1E6;
}


.interactchoise {
.interactchoise {
Line 2,199: Line 3,051:
li.explore-adaptive-item {
li.explore-adaptive-item {
     background-color: #EFE9DE; /* Цвет фона */
     background-color: #EFE9DE; /* Цвет фона */
     border: 2px solid #999; /* Цвет и толщина рамки */
     border: 2px solid #722215; /* Цвет и толщина рамки */
     border-radius: 12px; /* Закругленные углы */
     border-radius: 12px; /* Закругленные углы */
     padding: 15px; /* Внутренние отступы */
     padding: 15px; /* Внутренние отступы */
Line 2,270: Line 3,122:
li.custom2-adaptive-item {
li.custom2-adaptive-item {
     background-color: #EFE9DE; /* Цвет фона */
     background-color: #EFE9DE; /* Цвет фона */
     border: 2px solid #999; /* Цвет и толщина рамки */
     border: 2px solid #722215; /* Цвет и толщина рамки */
     border-radius: 10px; /* Закругленные углы */
     border-radius: 10px; /* Закругленные углы */
     padding: 10px; /* Внутренние отступы */
     padding: 10px; /* Внутренние отступы */
Line 2,334: Line 3,186:
li.custom-adaptive-item {
li.custom-adaptive-item {
     background-color: #EFE9DE; /* Цвет фона */
     background-color: #EFE9DE; /* Цвет фона */
     border: 2px solid #999; /* Цвет и толщина рамки */
     border: 2px solid #722215; /* Цвет и толщина рамки */
     border-radius: 10px; /* Закругленные углы */
     border-radius: 10px; /* Закругленные углы */
     padding: 10px; /* Внутренние отступы */
     padding: 10px; /* Внутренние отступы */
Line 2,525: Line 3,377:
   
   
/* This is from the background color of the title of the Navigation menu in the left column */
/* This is from the background color of the title of the Navigation menu in the left column */
#p-navigation { background-color: #FFD800; border-radius: 10px 10px 0px 0px; border: 3px solid #722215; border-bottom:hidden; background-image:url(/images/9/97/Sidebar.png); font-family: 'MyCustomFont3', sans-serif; }
#p-navigation { background-color: #ffe556; border-radius: 10px 10px 0px 0px; border: 3px solid #722215; border-bottom:hidden; background-image:url(/images/9/97/Sidebar.png); font-family: 'MyCustomFont3', sans-serif; }


/* This is from the background color of the title of the Twenty one pilots menu in the left column */
/* This is from the background color of the title of the Twenty one pilots menu in the left column */
#p-Twenty_one_pilots { background-color: #FFD800; border: 3px solid #722215; border-bottom:hidden; border-top:hidden; background-image:url(/images/3/38/Sidebar2.png); font-family: 'MyCustomFont2', sans-serif; }
#p-Twenty_one_pilots { background-color: #ffe556; border: 3px solid #722215; border-bottom:hidden; border-top:hidden; background-image:url(/images/3/38/Sidebar2.png); font-family: 'MyCustomFont2', sans-serif; }


/* This is from the background color of the title of the Twenty one pilots menu in the left column */
/* This is from the background color of the title of the Twenty one pilots menu in the left column */
#p-Tyler_Joseph { background-color: #FFD800; border: 3px solid #722215; border-bottom:hidden; border-top:hidden; background-image:url(/images/3/38/Sidebar2.png); font-family: 'MyCustomFont2', sans-serif; }
#p-Tyler_Joseph { background-color: #ffe556; border: 3px solid #722215; border-bottom:hidden; border-top:hidden; background-image:url(/images/3/38/Sidebar2.png); font-family: 'MyCustomFont2', sans-serif; }


/* This is from the background color of the title of the Members menu in the left column */
/* This is from the background color of the title of the Members menu in the left column */
#p-Members { background-color: #FFD800; border: 3px solid #722215; border-bottom:hidden; border-top:hidden; background-image:url(/images/3/38/Sidebar2.png); font-family: 'MyCustomFont2', sans-serif; }
#p-Members { background-color: #ffe556; border: 3px solid #722215; border-bottom:hidden; border-top:hidden; background-image:url(/images/3/38/Sidebar2.png); font-family: 'MyCustomFont2', sans-serif; }


.background-table { background-image: url(/images/3/3b/Clancy_background.png); background-size: cover;}
.background-table { background-image: url(/images/3/3b/Clancy_background.png); background-size: cover;}
Line 2,629: Line 3,481:
.toc, .toccolours { border-radius: 8px 8px; border: 3px solid #D33328; background-color: #EFE9DE; }
.toc, .toccolours { border-radius: 8px 8px; border: 3px solid #D33328; background-color: #EFE9DE; }


#p-tb { background-color: #FFD800; border-radius: 0px 0px 10px 10px; border: 3px solid #722215; border-top:hidden; background-image: url(/images/9/97/Sidebar.png); font-family: 'MyCustomFont2', sans-serif; }
#p-tb { background-color: #ffe556; border-radius: 0px 0px 10px 10px; border: 3px solid #722215; border-top:hidden; background-image: url(/images/9/97/Sidebar.png); font-family: 'MyCustomFont2', sans-serif; }


#p-personal ul { background: #DDD7CC; border-radius: 3px 3px; border: 2px solid #D33328; padding:0.1em 1.5em; height: 23px; }
#p-personal ul { background: #DDD7CC; border-radius: 3px 3px; border: 2px solid #D33328; padding:0.1em 1.5em; height: 23px; }


#mw-head { background-image: url(/images/4/42/Heared-3_%283%29.gif);}
#mw-head { background-image: url(/images/2/24/Hello_Clancy_Banner.png);} /*banner*/


.vector-menu-tabs-legacy .selected { background: #DDD7CC }
.vector-menu-tabs-legacy .selected { background: #DDD7CC }
Retrieved from "https://twentyonewiki.info/index.php/Special:MobileDiff/9895...11159"

Navigation menu