|
|
| Line 1: |
Line 1: |
| ::marker {
| |
| list-style-type: none !important;
| |
| }
| |
|
| |
| .text-effect {
| |
| font-size: 25px; /* начальный размер шрифта */
| |
| color: black; /* начальный цвет текста */
| |
| transition: color 0.3s ease, font-size 0.3s ease; /* плавный переход для цвета и размера шрифта */
| |
| }
| |
|
| |
| .text-effect:hover {
| |
| color: #b22222; /* тускло-красный цвет при наведении */
| |
| font-size: 28px; /* немного увеличенный размер шрифта */
| |
| }
| |
|
| |
|
| |
| .c-form-title {
| |
| font-family: 'MyCustomFont1';
| |
| font-size: 40px;
| |
| color: #D02019;
| |
| line-height: 1;
| |
| margin-top: 10px;
| |
| }
| |
|
| |
| .c-form-title:hover {
| |
| color: #E5241D;
| |
| }
| |
|
| |
| .licontent {
| |
| list-style: none;
| |
| max-width: 30%;
| |
| }
| |
|
| |
| .licontent .li-header {
| |
| background: #8d2536;
| |
| border: 2px solid #0f0f0f; /* Устанавливаем общую границу */
| |
| border-bottom: none; /* Убираем нижнюю границу */
| |
| height: 10px; /* Задайте подходящую высоту заголовка */
| |
| color: #ffffff;
| |
| font-weight: bold;
| |
| text-align: center;
| |
| padding: 10px;
| |
| border-radius: 8px 8px 0 0; /* Скругление только для верхних углов */
| |
| background-size: cover;
| |
| background-image: url(/images/d/db/Clancy_Letter_Background1.png);
| |
| display: flex; /* Для центрирования текста */
| |
| justify-content: center;
| |
| align-items: center;
| |
| }
| |
|
| |
| .licontent .li-body {
| |
| color: #333333;
| |
| 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;
| |
| }
| |
|
| |
|
| |
| /* Изменение текста "Discussion" на "Comments" */
| |
| a[rel="discussion"] span::before {
| |
| content: "Comments";
| |
| }
| |
|
| |
| a[rel="discussion"] span {
| |
| visibility: hidden;
| |
| position: relative;
| |
| }
| |
|
| |
| a[rel="discussion"] span::before {
| |
| visibility: visible;
| |
| position: absolute;
| |
| top: 0;
| |
| left: 0;
| |
| }
| |
|
| |
| /* Подчёркивание при наведении */
| |
| a[rel="discussion"]:hover {
| |
| text-decoration: underline;
| |
| }
| |
|
| |
|
| |
|
| |
|
| |
| /* 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;
| |
| }
| |
|
| |
| /* Selection */
| |
| .red-background ::selection {
| |
| background-color: #FFE556; /* Желтый цвет выделения */
| |
| color: #202122; /* Темно-серый цвет текста */
| |
| }
| |
|
| |
| ::selection {
| |
| background-color: #E8C437; /* цвет фона при выделении текста */
| |
| color: #202122;
| |
| }
| |
|
| |
| /* Main Page*/
| |
| .outer-container {
| |
| background-color: #efe9de;
| |
| padding: 10px;
| |
| border: 2px solid #722215;
| |
| margin-bottom: 10px;
| |
| overflow: hidden;
| |
| 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;
| |
| }
| |
|
| |
| .date-12202009 {
| |
| background-color: #ffe556;
| |
| 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;
| |
| }
| |
|
| |
| .container23 {
| |
| display: flex; /* Используем flexbox для размещения элементов в ряд */
| |
| }
| |
|
| |
| .mw-content-ltr ul, .mw-content-rtl .mw-content-ltr ul {
| |
| margin: 0.3em 0 0;
| |
| padding: 0;
| |
| }
| |
|
| |
| .newstable {
| |
| float: right; /* Выравнивание по правому краю */
| |
| background-color: #EFE9DE; /* Фоновый цвет */
| |
| border: 2px solid #722215; /* Граница */
| |
| margin-bottom: 10px; /* Отступ снизу */
| |
| list-style-type: none; /* Убирает стандартные маркеры <li> */
| |
| width: 300px; /* Фиксированная ширина */
| |
| padding: 0; /* Убирает внутренние отступы */
| |
| border-radius: 10px 10px 0px 0px; /* Скругленные верхние углы */
| |
| overflow: hidden; /* Скрытие переполненного контента */
| |
| margin-right: 10px; /* Отступ справа */
| |
| display: flex; /* Используем flexbox для управления внутренним содержимым */
| |
| flex-direction: column; /* Вертикальная ориентация содержимого */
| |
| height: 990px;
| |
| }
| |
|
| |
| .news-segment {
| |
| background-color: #EFE9DE; /* Фон нижней части */
| |
| padding: 10px;
| |
| box-sizing: border-box; /* Чтобы padding не увеличивал высоту */
| |
| text-align: center;
| |
| margin-bottom: 10px;
| |
| }
| |
|
| |
| .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;
| |
| }
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
| /* HelUs Sidebar */
| |
| #help-container {
| |
| background-color: #ffe556;
| |
| 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;
| |
| font-size: 16px;
| |
| font-weight: bold;
| |
| }
| |
|
| |
| .help-container {
| |
| padding: 10px; /* Внутренний отступ для контейнера */
| |
| margin-top: 10px; /* Отступ сверху */
| |
| text-align: center; /* Центрирование содержимого */
| |
| font-family: 'MyCustomFont2', sans-serif; /* Применение пользовательского шрифта */
| |
| }
| |
|
| |
| .help-header {
| |
| color: #000; /* Цвет текста заголовка */
| |
| 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-text {
| |
| color: #000; /* Цвет текста заголовка */
| |
| font-size: 0.80em; /* Размер шрифта */
| |
| 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 top; /* Положение фона */
| |
| background-repeat: no-repeat; /* Фон не повторяется */
| |
| background-size: 100% 1px; /* Размер фона */
| |
| text-align: center; /* Выравнивание текста по центру */
| |
| margin-top: 10px; /* Отступ сверху */
| |
| padding-top: 5px; /* Отступ от фона на 5 пикселей */
| |
| }
| |
|
| |
| .help-image {
| |
| max-width: 105%; /* Ограничивает ширину изображения до 100% от родительского контейнера */
| |
| max-height: 105%; /* Ограничивает высоту изображения до 100% от родительского контейнера */
| |
| 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;
| |
| }
| |
|
| |
|
| |
| /* Star */
| |
| .vector-menu-tabs #ca-unwatch.icon a:before {
| |
| background-image: url(/images/1/14/Unwatch-icon.png);
| |
| }
| |
|
| |
| /* More */
| |
| .more-menu {
| |
| background-color: #C1BBB2; /* Замените #цвет_фона на соответствующий цвет */
| |
| }
| |
|
| |
| #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;
| |
| border: 1px solid black;
| |
| padding: 2px 8px;
| |
| border-radius: 4px;
| |
| white-space: nowrap;
| |
| box-shadow: 0 0 5px rgba(0,0,0,0.3);
| |
| }
| |
|
| |
| .container-ks {
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| }
| |
|
| |
| #version-info::after {
| |
| content: "Version Beta 5.1 by October 2024. Read more";
| |
| 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;
| |
| }
| |
|
| |
| #version-info:hover::after {
| |
| opacity: 1;
| |
| }
| |
|
| |
| #version-info {
| |
| margin-top: 50px;
| |
| background-color: #f9f9f9;
| |
| padding: 2px 5px; /* Меньше отступы */
| |
| border: 1px solid #ccc;
| |
| border-radius: 3px;
| |
| font-size: 10px; /* Меньший размер текста */
| |
| cursor: pointer;
| |
| }
| |
|
| |
| .vector-menu-content {
| |
| position: relative;
| |
| }
| |
|
| |
| /* Если футер имеет обтекание */
| |
| #version-info {
| |
| clear: both;
| |
| }
| |
|
| |
|
| |
| .quote-container {
| |
| margin-top: 30px;
| |
| position: relative;
| |
| padding: 5px 10px;
| |
| margin-right: 10px;
| |
| max-width: 450px; /* Ограничение ширины */
| |
| background: #FBF9F5;
| |
| word-wrap: break-word; /* Перенос слов, если они слишком длинные */
| |
| z-index: 1; /* Контейнер должен быть выше фона */
| |
| font-family: 'MyCustomFont2', sans-serif;
| |
| }
| |
|
| |
| .quote-container::before {
| |
| content: '';
| |
| position: absolute;
| |
| top: -25px;
| |
| 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: '';
| |
| position: absolute;
| |
| bottom: -6px;
| |
| left: 50%; /* Центрируем изображение */
| |
| transform: translateX(-50%);
| |
| width: 100%; /* Немного уменьшенная ширина изображения */
| |
| height: 130px;
| |
| background: url("/images/c/c8/Under_quote.png") no-repeat center bottom;
| |
| background-size: contain;
| |
| z-index: 3; /* Изображение выше контейнера */
| |
| }
| |
|
| |
| .quote-content {
| |
| position: relative;
| |
| z-index: 7;
| |
| padding: 5px 10px;
| |
| text-align: center;
| |
| font-family: 'MyCustomFont2', sans-serif; /* Использование шрифта MyCustomFont2 */
| |
| font-style: italic; /* Курсив для текста цитаты */
| |
| color: #555; /* Цвет текста (мягкий серый) */
| |
| font-size: 16px; /* Уменьшенный размер шрифта */
| |
| overflow: hidden; /* Предотвращаем переполнение */
| |
| }
| |
|
| |
| .quote-author {
| |
| text-align: right; /* Выравнивание текста по правому краю */
| |
| font-family: 'MyCustomFont2', sans-serif; /* Использование шрифта MyCustomFont2 */
| |
| font-size: 16px; /* Размер шрифта для имени автора */
| |
| color: #333; /* Темный цвет текста для лучшей видимости */
| |
| margin-top: 1px; /* Отступ сверху для отделения от цитаты */
| |
| padding: 1px 2px; /* Небольшие отступы вокруг текста */
| |
| position: relative; /* Позволяет добавить эффект теней или других стилей */
| |
| z-index: 8; /* Убедимся, что автор находится выше других слоев */
| |
| bottom: 50px;
| |
| }
| |
|
| |
|
| |
|
| |
|
| |
|
| |
| #p-themes-label .vector-menu-heading-label:before {
| |
| content: "Light Side";
| |
| }
| |
|
| |
| #p-themes-label .vector-menu-heading-label {
| |
| visibility: hidden;
| |
| position: relative;
| |
| }
| |
|
| |
| #p-themes-label .vector-menu-heading-label:before {
| |
| visibility: visible;
| |
| position: absolute;
| |
| left: 0;
| |
| top: 0;
| |
| }
| |
|
| |
| #p-themes-item-light 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-light a:before {
| |
| content: "Light Side";
| |
| visibility: visible;
| |
| position: absolute;
| |
| left: 50%;
| |
| transform: translateX(-50%);
| |
| top: 8px; /* Отступ сверху */
| |
| 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-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-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;
| |
| 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-sai a:before {
| |
| content: "Scaled and Icy Era";
| |
| 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-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;
| |
| }
| |
|
| |
| .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); /* Примените нужное преобразование */
| |
| }
| |
|
| |
| .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-list {
| |
| list-style-type: none; /* Убирает стандартные маркеры списка */
| |
| padding: 0; /* Убирает отступы */
| |
| }
| |
|
| |
| .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%;
| |
| }
| |
|
| |
| .close-button {
| |
| position: absolute;
| |
| top: 10px;
| |
| right: 10px;
| |
| cursor: pointer;
| |
| font-size: 20px;
| |
| }
| |
|
| |
| /* Скрытие окна при потере фокуса */
| |
| .popup-overlay:focus-within {
| |
| display: none;
| |
| }
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
| .square-list {
| |
| list-style-type: none; /* Убираем стандартные маркеры списка */
| |
| display: inline-block; /* Делаем элемент блочным для центрирования */
| |
| width: 100px; /* Ширина квадрата */
| |
| height: 100px; /* Высота квадрата */
| |
| position: relative; /* Позволяет наложить картинку */
| |
| margin: 10px; /* Отступ между элементами списка */
| |
| border: 1px solid #000; /* Граница квадрата (по желанию) */
| |
| }
| |
|
| |
| .square-list img {
| |
| position: absolute; /* Позволяет наложить картинку */
| |
| 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;
| |
| }
| |
|
| |
| .ring-chart27 ul li:nth-child(4) {
| |
| background-color: #f44336;
| |
| 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-right: 15px;
| |
| float: left;
| |
| border-radius: 10px 10px 0 0;
| |
| width: 31%;
| |
| height: 224px;
| |
| background-color: #f9f9f9; /* Пример цвета фона */
| |
| border: 1px solid #C14424;
| |
| margin-top: 10px; /* Чтобы было немного пространства от сайдбара */
| |
| }
| |
|
| |
| /* Стили для заголовка таблицы */
| |
| .new-pages-table th {
| |
| width: 40%;
| |
| background-color: #fff5ee; /* Пример цвета фона заголовка */
| |
| border-radius: 10px 10px 0 0;
| |
| border: 1px solid #C14424;
| |
| text-align: center;
| |
| }
| |
|
| |
| /* Стили для содержимого таблицы */
| |
| .new-pages-table td {
| |
| border: 1px solid #C14424;
| |
| background-color: #f9f9f9; /* Пример цвета фона */
| |
| text-align: left;
| |
| padding: 10px;
| |
| }
| |
|
| |
|
| |
|
| |
|
| |
|
| |
| .container2 {
| |
| width: 50vw; /* Ширина контейнера */
| |
| height: 100vh; /* Высота контейнера */
| |
| overflow: hidden;
| |
| position: relative;
| |
| background-color: #fff; /* Цвет фона контейнера */
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| }
| |
|
| |
| .gradient-text {
| |
| font-size: 4rem; /* Размер текста */
| |
| font-weight: bold;
| |
| background: linear-gradient(45deg, lightcoral 25%, lightblue 25%, lightblue 50%, lightcoral 50%, lightcoral 55%, lightblue 65%);
| |
| background-size: 200% 200%;
| |
| background-clip: text;
| |
| -webkit-background-clip: text;
| |
| color: transparent;
| |
| animation: waveAnimation 4s infinite linear;
| |
| }
| |
|
| |
| @keyframes waveAnimation {
| |
| 0% {
| |
| background-position: 0% 0%;
| |
| }
| |
| 100% {
| |
| background-position: 100% 100%;
| |
| }
| |
| }
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
| li.tooladd {
| |
| position: relative;
| |
| display: inline-block;
| |
| cursor: pointer;
| |
| vertical-align: top; /* Добавлено для выравнивания по вертикали */
| |
| }
| |
|
| |
| li.tooladd .tooltiptext {
| |
| visibility: hidden;
| |
| width: 120px;
| |
| background-color: black;
| |
| color: #fff;
| |
| text-align: center;
| |
| border-radius: 6px;
| |
| padding: 5px 0;
| |
| position: absolute;
| |
| z-index: 1;
| |
| top: -125%; /* Изменено на top для появления сверху */
| |
| left: 50%;
| |
| margin-left: -60px;
| |
| opacity: 0;
| |
| transition: opacity 0.3s;
| |
| }
| |
|
| |
| li.tooladd:hover .tooltiptext {
| |
| visibility: visible;
| |
| opacity: 1;
| |
| }
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
| .container {
| |
| position: relative;
| |
| display: flex;
| |
| align-items: center;
| |
| width: 150px; /* Ширина контейнера */
| |
| height: 50px;
| |
| left: 697px;
| |
| top: -37px;
| |
| }
| |
| .stripe {
| |
| width: 5px;
| |
| height: 50%;
| |
| background-color: #D02019;
| |
| }
| |
| .left-stripe {
| |
| margin-right: 50px; /* Расстояние между полосками и линией */
| |
| }
| |
| .right-stripe {
| |
| transform: rotate(20deg); /* Наклоняем на 20 градусов */
| |
| margin-left: -35px; /* Подвигаем полоску на 5px влево */
| |
| }
| |
| .horizontal-line {
| |
| position: absolute;
| |
| width: 10px; /* Ширина линии */
| |
| height: 5px; /* Толщина линии */
| |
| background-color: #D02019;
| |
| top: 50%; /* Центрируем вертикально по середине контейнера */
| |
| left: calc(50% - 30px - 38px); /* Обновляем расчет для выравнивания линии */
| |
| transform: translateY(-50%); /* Центрируем вертикально */
| |
| }
| |
|
| |
| .mail-icon { font-size: 48px; color: #000000; font-size: 96px; }
| |
|
| |
| .custom-link-text2 a {
| |
| color: inherit; /* Сохраняет цвет текста */
| |
| text-decoration: none; /* Убирает подчеркивание */
| |
| color: #fff;
| |
| margin-top: 10px;
| |
| margin-bottom: 10px;
| |
| }
| |
|
| |
| @keyframes blink {
| |
| 0% { opacity: 1; }
| |
| 50% { opacity: 0; }
| |
| 100% { opacity: 1; }
| |
| }
| |
|
| |
| .blinking-button {
| |
| animation: blink 1s infinite;
| |
| background-color: red;
| |
| color: white;
| |
| border: none;
| |
| padding: 10px 20px;
| |
| text-align: center;
| |
| text-decoration: none;
| |
| display: inline-block;
| |
| font-size: 16px;
| |
| cursor: pointer;
| |
| border-radius: 5px;
| |
| }
| |
|
| |
|
| |
| @keyframes blink {
| |
| 0% { opacity: 1; }
| |
| 50% { opacity: 0; }
| |
| 100% { opacity: 1; }
| |
| }
| |
|
| |
|
| |
| .admin-chat-form {
| |
| margin: 20px 0;
| |
| }
| |
|
| |
| .admin-chat-form textarea {
| |
| width: 100%;
| |
| margin-bottom: 10px;
| |
| }
| |
|
| |
| .admin-chat-form-buttons {
| |
| text-align: right;
| |
| }
| |
|
| |
| .site-button {
| |
| background-image: url('/images/6/66/Button_Background.png');
| |
| background-color: #007bff;
| |
| color: white;
| |
| border: none;
| |
| border-radius: 4px;
| |
| padding: 10px 20px;
| |
| cursor: pointer;
| |
| transition: background-position 0.5s ease-in-out;
| |
| }
| |
|
| |
| .site-button:hover {
| |
| background-position: 5% 5%;
| |
| }
| |
|
| |
| textarea {
| |
| display: block;
| |
| order: -1;
| |
| }
| |
|
| |
| .c-item {
| |
| order: 1;
| |
| }
| |
|
| |
| #some-container {
| |
| display: flex;
| |
| flex-direction: column;
| |
| }
| |
|
| |
|
| |
| .newcombutton {
| |
| display: inline-block;
| |
| padding: 10px 10px;
| |
| border: 2px solid #191919;
| |
| color: #fff;
| |
| text-decoration: none;
| |
| border-radius: 5px;
| |
| background-color: #007bff; /* Default color */
| |
| transition: transform 0.3s ease, background-color 0.3s ease;
| |
| margin-right: 5px;
| |
| word-wrap: break-word;
| |
| word-break: break-word;
| |
| transform-origin: left; /* Масштабирование относительно левой стороны */
| |
| color: inherit; /* Сохраняет цвет текста */
| |
| text-decoration: none; /* Убирает подчеркивание */
| |
| box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1);
| |
| }
| |
|
| |
| .newcombutton:hover {
| |
| transform: scale(1.05); /* Slightly increase size */
| |
| opacity: 1.1;
| |
| }
| |
|
| |
|
| |
|
| |
|
| |
| .butting-button {
| |
| display: inline-block; /* Make sure the link is displayed as a button */
| |
| background-color: red;
| |
| color: white;
| |
| border: none;
| |
| padding: 10px 20px;
| |
| text-align: center;
| |
| font-size: 16px;
| |
| cursor: pointer;
| |
| border-radius: 5px;
| |
| text-decoration: none; /* Remove underline from the link */
| |
| transition: background-color 0.3s ease; /* Add a smooth transition for hover effect */
| |
| }
| |
|
| |
| .butting-button:hover {
| |
| background-color: darkred; /* Change color on hover for better UX */
| |
| }
| |
|
| |
|
| |
| .comment-item {
| |
| background-color: #EFE9DE;
| |
| border: 3px solid #84817B;
| |
| padding: 10px; /* Добавьте отступы по вашему усмотрению */
| |
| border-radius: 5px; /* При необходимости добавьте скругление углов */
| |
| list-style: none;
| |
| padding-left: 20px;
| |
| width: 42%;
| |
| transform-origin: left;
| |
| }
| |
|
| |
| .comment-item comments {
| |
| padding-left: 50px; /* Отступ слева для содержимого */
| |
| }
| |
|
| |
| .comment-item2 {
| |
| background-color: #E2DDD3;
| |
| border: 3px solid #84817B;
| |
| padding: 10px; /* Добавьте отступы по вашему усмотрению */
| |
| border-radius: 5px; /* При необходимости добавьте скругление углов */
| |
| list-style: none;
| |
| width: 42%; /* Ограничение ширины */
| |
| box-sizing: border-box; /* Включает padding и border в расчет ширины */
| |
| overflow: hidden; /* Скрывает содержимое, выходящее за пределы элемента */
| |
| white-space: normal; /* Разрешает перенос текста на новую строку */
| |
| }
| |
|
| |
| .comment-item2 comments {
| |
| padding-left: 50px; /* Отступ слева для содержимого */
| |
| max-width: 100%; /* Убедитесь, что содержимое не выходит за пределы границ */
| |
| box-sizing: border-box; /* Включает padding и border в расчет ширины */
| |
| overflow: hidden; /* Скрывает содержимое, выходящее за пределы элемента */
| |
| white-space: normal; /* Разрешает перенос текста на новую строку */
| |
| }
| |
|
| |
| .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;
| |
| }
| |
|
| |
|
| |
| .comment-item-second {
| |
| background-color: #EFE9DE;
| |
| border: 3px solid #84817B;
| |
| padding: 10px; /* Добавьте отступы по вашему усмотрению */
| |
| border-radius: 5px; /* При необходимости добавьте скругление углов */
| |
| list-style: none;
| |
| padding-left: 20px;
| |
| width: 50%;
| |
| transform-origin: right;
| |
| float:right;
| |
| text-align: center;
| |
| align-items: center;
| |
| justify-content: center;
| |
| }
| |
|
| |
| .comment-item-second comments {
| |
| padding-left: 50px; /* Отступ слева для содержимого */
| |
| }
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
| .map-item {
| |
| background-color: white;
| |
| border: 2px solid red;
| |
| padding: 10px;
| |
| margin: 10px;
| |
| list-style: none; /* Убирает стандартные маркеры списка */
| |
| text-align: center; /* Центрирует содержимое по горизонтали */
| |
| display: flex;
| |
| justify-content: center;
| |
| align-items: center;
| |
| height: 900px; /* Задайте нужную высоту */
| |
| overflow: hidden; /* Скрывает выходящее за пределы содержимое */
| |
| position: relative;
| |
| }
| |
|
| |
|
| |
|
| |
| /* Замените .custom-link-text на класс или идентификатор вашего элемента */
| |
| .custom-link-text a {
| |
| color: inherit; /* Сохраняет цвет текста */
| |
| text-decoration: none; /* Убирает подчеркивание */
| |
| }
| |
|
| |
|
| |
| .red-background {
| |
| background-color: #D02019;
| |
| }
| |
|
| |
| .twentyonewikilogo {
| |
| font-family: 'MyCustomFont1';
| |
| font-size: 100px;
| |
| color: #D02019;
| |
| cursor: pointer; /* Чтобы указать, что элемент кликабельный */
| |
| line-height: 1; /* Устанавливаем высоту строки, чтобы минимизировать отступы */
| |
| }
| |
|
| |
| .comment-rules-text {
| |
| font-family: 'MyCustomFont1';
| |
| font-size: 22px;
| |
| color: #000;
| |
| line-height: 1; /* Устанавливаем высоту строки, чтобы минимизировать отступы */
| |
| margin-top: 10px;
| |
| background: #F7F1E6;
| |
| }
| |
|
| |
| .interactchoise {
| |
| font-family: 'MyCustomFont1';
| |
| font-size: 40px;
| |
| color: #D02019;
| |
| line-height: 1; /* Устанавливаем высоту строки, чтобы минимизировать отступы */
| |
| margin-top: 10px;
| |
| }
| |
|
| |
| .interactchoise:hover {
| |
| color: #E5241D;
| |
| }
| |
|
| |
| .choise {
| |
| font-family: 'MyCustomFont1';
| |
| font-size: 30px;
| |
| color: #D02019;
| |
| line-height: 1; /* Устанавливаем высоту строки, чтобы минимизировать отступы */
| |
| margin-top: 10px;
| |
| }
| |
|
| |
| .choise:hover {
| |
| color: #E5241D;
| |
| }
| |
|
| |
| .pie-chart11 {
| |
| list-style: none;
| |
| width: 200px;
| |
| height: 200px;
| |
| border-radius: 50%;
| |
| position: relative;
| |
| margin: 0;
| |
| padding: 0;
| |
| }
| |
|
| |
| .pie-chart11 .segment {
| |
| width: 50%;
| |
| height: 50%;
| |
| background-color: var(--color);
| |
| position: absolute;
| |
| top: 50%;
| |
| left: 50%;
| |
| transform-origin: 0% 100%;
| |
| transform: rotate(var(--rotate)) translateY(-100%);
| |
| transition: transform 0.3s ease;
| |
| }
| |
|
| |
| .pie-chart11 .segment:hover {
| |
| transform: rotate(var(--rotate)) translateY(-120%);
| |
| }
| |
|
| |
| .list-item {
| |
| list-style-type: none;
| |
| width: 100%; /* Ширина 100% родительского элемента */
| |
| text-align: center;
| |
| padding: 20px;
| |
| box-sizing: border-box; /* Учитывает отступы в общей ширине */
| |
| }
| |
|
| |
| .list-item span {
| |
| display: inline-block;
| |
| color: black;
| |
| background: url(/images/1/1e/Clancy_Gif_Intro.gif) no-repeat center;
| |
| background-size: contain; /* Сохраняет пропорции изображения */
| |
| padding: 20px;
| |
| background-clip: text;
| |
| -webkit-background-clip: text;
| |
| color: transparent;
| |
| }
| |
|
| |
| .custom-li {
| |
| list-style-type: none; /* Убираем маркеры у списка */
| |
| width: 850px; /* Ширина элемента, можно настроить по вашему усмотрению */
| |
| height: 850px; /* Высота элемента, можно настроить по вашему усмотрению */
| |
| background-image: url('/images/3/37/Is-ø-lat-ed2.png');
| |
| background-size: contain; /* Изображение не будет обрезаться */
| |
| background-repeat: no-repeat; /* Убираем повторение изображения */
| |
| background-position: center; /* Центрируем изображение */
| |
| margin: 10px;
| |
| display: flex;
| |
| flex-direction: column; /* Направление содержимого по вертикали */
| |
| align-items: center; /* Центрируем текст по горизонтали */
| |
| justify-content: flex-start; /* Выравниваем текст по верхнему краю элемента */
| |
| text-align: center; /* Выравнивание текста по центру внутри элемента */
| |
| color: #000; /* Цвет текста, можно изменить по желанию */
| |
| font-family: Arial, sans-serif; /* Шрифт текста, можно изменить по желанию */
| |
| font-size: 14px; /* Размер текста, можно изменить по желанию */
| |
| padding: 60px; /* Внутренний отступ внутри элемента, чтобы текст не примыкал к краям */
| |
| box-sizing: border-box; /* Включаем отступы и границы в ширину и высоту элемента */
| |
| }
| |
|
| |
|
| |
|
| |
|
| |
| @keyframes randomMovement {
| |
| 0% {
| |
| top: 0;
| |
| left: 0;
| |
| }
| |
| 25% {
| |
| top: 100px;
| |
| left: 200px;
| |
| }
| |
| 50% {
| |
| top: 200px;
| |
| left: 100px;
| |
| }
| |
| 75% {
| |
| top: 100px;
| |
| left: 300px;
| |
| }
| |
| 100% {
| |
| top: 0;
| |
| left: 0;
| |
| }
| |
| }
| |
|
| |
| ul {
| |
| list-style-type: none;
| |
| padding: 0;
| |
| margin: 0;
| |
| }
| |
|
| |
| .moving-li {
| |
| background-color: #D02019;
| |
| color: white;
| |
| border: 2px solid #722215;
| |
| font-size: 30px;
| |
| padding: 10px 20px;
| |
| position: absolute;
| |
| border-radius: 5px;
| |
| cursor: pointer;
| |
| list-style: none;
| |
| user-select: none;
| |
| font-family: 'MyCustomFont1', sans-serif;
| |
| animation: randomMovement 12s infinite ease-in-out; /* Плавное движение */
| |
| }
| |
|
| |
| .moving-li:hover {
| |
| filter: brightness(1.2);
| |
| }
| |
|
| |
| .table-with-spacing {
| |
| border-spacing: 10px;
| |
| }
| |
|
| |
|
| |
| .pie-chart {
| |
| width: 280px;
| |
| height: 280px;
| |
| border-radius: 50%;
| |
| background-image: conic-gradient(
| |
| #49C2DB 0% 50%, /* 50% голубого */
| |
| #A2C063 50% 90%, /* 40% зелёного */
| |
| #636363 90% 100% /* 10% серого */
| |
| );
| |
| position: relative;
| |
| list-style-type: none;
| |
| margin: 0;
| |
| padding: 0;
| |
| overflow: hidden;
| |
| }
| |
|
| |
| .pie-chart li {
| |
| position: absolute;
| |
| width: 100%;
| |
| height: 100%;
| |
| border-radius: 50%;
| |
| clip-path: polygon(50% 50%, 100% 0, 100% 100%);
| |
| }
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
| /*111111111111111111111111111*/
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
| .pie-chart li a {
| |
| display: block;
| |
| width: 100%;
| |
| height: 100%;
| |
| border-radius: 50%;
| |
| text-indent: -9999px; /* Скрываем текст */
| |
| }
| |
|
| |
| .pie-chart li:hover {
| |
| opacity: 0.8;
| |
| }
| |
|
| |
| .pie-chart .segment-1 {
| |
| transform: rotate(0deg);
| |
| }
| |
|
| |
| .pie-chart .segment-2 {
| |
| transform: rotate(180deg);
| |
| }
| |
|
| |
| .pie-chart .segment-3 {
| |
| transform: rotate(324deg);
| |
| }
| |
|
| |
| .pie-chart .center {
| |
| position: absolute;
| |
| top: 50%;
| |
| left: 50%;
| |
| width: 220px;
| |
| height: 220px;
| |
| background-color: var(--setlist-bg-color);
| |
| border-radius: 50%;
| |
| transform: translate(-50%, -50%);
| |
| }
| |
|
| |
|
| |
| .hole {
| |
| position: absolute;
| |
| width: 100px; /* Диаметр внутреннего круга */
| |
| height: 100px; /* Диаметр внутреннего круга */
| |
| top: 50%;
| |
| left: 50%;
| |
| transform: translate(-50%, -50%);
| |
| background-color: white; /* Цвет дырки (фон страницы) */
| |
| border-radius: 50%; /* Делает внутренний круг */
| |
| }
| |
|
| |
| .circular-chart {
| |
| position: relative;
| |
| width: 250px;
| |
| height: 250px;
| |
| border-radius: 50%;
| |
| list-style: none;
| |
| margin: 0;
| |
| padding: 0;
| |
| clip-path: circle(50%);
| |
| }
| |
|
| |
| .circular-chart::before,
| |
| .circular-chart::after {
| |
| content: "";
| |
| position: absolute;
| |
| top: 0;
| |
| left: 0;
| |
| width: 100%;
| |
| height: 100%;
| |
| border-radius: 50%;
| |
| transition: background-color 0.3s ease;
| |
| pointer-events: none; /* Это делает сами псевдоэлементы "проницаемыми" для кликов */
| |
| }
| |
|
| |
| .circular-chart {
| |
| background: conic-gradient(
| |
| #49c2db 0deg 100deg,
| |
| #a2c063 100deg 360deg,
| |
| );
| |
| }
| |
|
| |
| .circular-chart:hover::before {
| |
| background: conic-gradient(
| |
| #6ae1ff 0deg 100deg, /* Немного осветленный голубой */
| |
| #a2c063 100deg 360deg,
| |
| );
| |
| }
| |
|
| |
| .circular-chart:hover::after {
| |
| background: conic-gradient(
| |
| #49c2db 0deg 100deg,
| |
| #bbd47d 100deg 252deg, /* Немного осветленный зеленый */
| |
| #636363 252deg 334deg,
| |
| #32cd32 324deg 360deg /* Лайм грин вместо зеленого */
| |
| );
| |
| }
| |
|
| |
| /* Настройка каждого сектора */
| |
| .circular-chart::before {
| |
| background: conic-gradient(
| |
| #49c2db 0deg 100deg, /* Голубой сектор */
| |
| transparent 100deg 360deg
| |
| );
| |
| }
| |
|
| |
| .circular-chart:hover::before {
| |
| background: conic-gradient(
| |
| #6ae1ff 0deg 100deg, /* Светло-голубой сектор */
| |
| transparent 100deg 360deg
| |
| );
| |
| }
| |
|
| |
| .circular-chart::after {
| |
| background: conic-gradient(
| |
| transparent 0deg 100deg,
| |
| #a2c063 100deg 252deg, /* Зеленый сектор */
| |
| transparent 252deg 360deg
| |
| );
| |
| }
| |
|
| |
| .circular-chart:hover::after {
| |
| background: conic-gradient(
| |
| transparent 0deg 100deg,
| |
| #bbd47d 100deg 252deg, /* Светло-зеленый сектор */
| |
| transparent 252deg 360deg
| |
| );
| |
| }
| |
|
| |
|
| |
|
| |
| li.ring {
| |
| width: 250px;
| |
| height: 250px;
| |
| border-radius: 50%;
| |
| border: 40px solid #a2c063; /* Цвет кольца и его толщина */
| |
| box-sizing: border-box;
| |
| background-color: transparent; /* Фон кольца */
| |
| list-style-type: none; /* Убирает маркер списка */
| |
| position: relative;
| |
| margin: 10px;
| |
| padding: 0; /* Убирает отступы */
| |
| }
| |
|
| |
| li.ring::before {
| |
| content: '';
| |
| position: absolute;
| |
| width: 160px; /* Размер внутреннего круга */
| |
| height: 160px;
| |
| background-color: transparent; /* Цвет внутреннего круга (можно сделать прозрачным) */
| |
| border-radius: 50%;
| |
| list-style-type: none; /* Убирает маркер списка */
| |
| top: 50%;
| |
| left: 50%;
| |
| transform: translate(-50%, -50%);
| |
| }
| |
|
| |
|
| |
|
| |
| li.circle {
| |
| width: 250px;
| |
| height: 250px;
| |
| position: relative;
| |
| border-radius: 50%;
| |
| overflow: hidden;
| |
| list-style-type: none;
| |
| margin: 10px;
| |
| }
| |
|
| |
| li.circle::before,
| |
| li.circle::after,
| |
| li.circle div {
| |
| content: '';
| |
| position: absolute;
| |
| width: 50%;
| |
| height: 50%;
| |
| box-sizing: border-box;
| |
| transition: background-color 0.3s ease;
| |
| }
| |
|
| |
| li.circle::before {
| |
| background-color: #FF6347; /* Первый цвет */
| |
| top: 0;
| |
| left: 0;
| |
| border-top-left-radius: 50%;
| |
| }
| |
|
| |
| li.circle::after {
| |
| background-color: #4682B4; /* Второй цвет */
| |
| top: 0;
| |
| right: 0;
| |
| border-top-right-radius: 50%;
| |
| }
| |
|
| |
| li.circle div.top-right {
| |
| background-color: #3CB371; /* Третий цвет */
| |
| bottom: 0;
| |
| right: 0;
| |
| border-bottom-right-radius: 50%;
| |
| }
| |
|
| |
| li.circle div.bottom-left {
| |
| background-color: #FFD700; /* Четвертый цвет */
| |
| bottom: 0;
| |
| left: 0;
| |
| border-bottom-left-radius: 50%;
| |
| }
| |
|
| |
| /* Эффекты при наведении */
| |
| li.circle::before:hover {
| |
| background-color: #FF7F50; /* Первый цвет - немного ярче */
| |
| }
| |
|
| |
| li.circle::after:hover {
| |
| background-color: #5A9BD3; /* Второй цвет - немного ярче */
| |
| }
| |
|
| |
| li.circle div.top-right:hover {
| |
| background-color: #4FD39E; /* Третий цвет - немного ярче */
| |
| }
| |
|
| |
| li.circle div.bottom-left:hover {
| |
| background-color: #FFEB3B; /* Четвертый цвет - немного ярче */
| |
| }
| |
|
| |
|
| |
|
| |
|
| |
| /* Circular Table Styling */
| |
| .circular-table {
| |
| display: grid;
| |
| grid-template-columns: repeat(8, 1fr);
| |
| grid-template-rows: repeat(8, 1fr);
| |
| position: relative;
| |
| width: 300px;
| |
| height: 300px;
| |
| border-radius: 50%;
| |
| overflow: hidden;
| |
| margin: auto;
| |
| }
| |
|
| |
| .circular-table a {
| |
| position: absolute;
| |
| width: 100%;
| |
| height: 100%;
| |
| }
| |
|
| |
| .circular-table div {
| |
| position: absolute;
| |
| width: 100%;
| |
| height: 100%;
| |
| clip-path: polygon(50% 50%, 0 100%, 100% 100%);
| |
| transform-origin: center;
| |
| transition: background-color 0.6s ease, filter 0.6s ease;
| |
| }
| |
|
| |
| .circular-table div:hover {
| |
| filter: brightness(1.2);
| |
| opacity: 1;
| |
| }
| |
|
| |
|
| |
|
| |
|
| |
| .table-photos {
| |
| width: 53%;
| |
| border: none; /* Hidden border */
| |
| height: 315px;
| |
| }
| |
|
| |
| .transparent-cell {
| |
| background-color: transparent;
| |
| width: 20px;
| |
| }
| |
|
| |
| .centered-text-cell {
| |
| background-color: transparent;
| |
| color: #000;
| |
| text-align: center;
| |
| vertical-align: middle; /* To vertically center the text */
| |
| }
| |
|
| |
| .centered-photo-cell {
| |
| background-color: #D02019;
| |
| text-align: center;
| |
| vertical-align: middle; /* To vertically center the image */
| |
| }
| |
|
| |
| .centered-photo-cell img {
| |
| display: block;
| |
| margin-left: auto;
| |
| margin-right: auto;
| |
| }
| |
|
| |
|
| |
| /* Для фото */
| |
|
| |
|
| |
| .custom-table .cell-photo { background-color: trasparent; }
| |
|
| |
| .custom-table .cell-photos { background-color: #D02019; }
| |
|
| |
| .custom-table .cell-photo-caption { background-color: trasparent; text-align:center; border:hidden; font-size:100%; }
| |
|
| |
| tooltip-wrapper {
| |
| position: relative;
| |
| display: inline-block; /* Ensure it fits the content */
| |
| }
| |
|
| |
| .underline-hover {
| |
| position: relative;
| |
| text-decoration: none;
| |
| transition: text-decoration 0.3s ease-in-out;
| |
| cursor: pointer; /* Change the cursor to indicate clickable text */
| |
| outline: none; /* Remove the outline when focused */
| |
| }
| |
|
| |
| .underline-hover:hover,
| |
| .underline-hover:focus {
| |
| text-decoration: underline;
| |
| }
| |
|
| |
| /* Tooltip container */
| |
| .tooltip-text {
| |
| visibility: hidden;
| |
| background-color: #918f8f;
| |
| color: #000;
| |
| text-align: center;
| |
| padding: 5px 10px;
| |
| border-radius: 6px;
| |
|
| |
| /* Positioning and size */
| |
| position: absolute;
| |
| z-index: 100; /* Ensure it's on top of all objects */
| |
| top: 70%; /* Center vertically relative to the text */
| |
| left: 50%; /* Center horizontally relative to the text */
| |
| transform: translate(-50%, 25%); /* Center the tooltip */
| |
| opacity: 0;
| |
| transition: opacity 0.3s ease-in-out;
| |
| width: 200px; /* Allow width to adjust based on content */
| |
| word-wrap: break-word; /* Break long words to fit within the width */
| |
| white-space: normal; /* Allow text to wrap within the tooltip */
| |
| }
| |
|
| |
| /* Show the tooltip text when the wrapper is focused */
| |
| .tooltip-wrapper:focus-within .tooltip-text {
| |
| visibility: visible;
| |
| opacity: 1;
| |
| }
| |
|
| |
| /* Hide the tooltip text when the wrapper loses focus */
| |
| .tooltip-wrapper:focus:not(:focus-visible) .tooltip-text {
| |
| visibility: hidden;
| |
| opacity: 0;
| |
| }
| |
|
| |
|
| |
|
| |
| /* Градиент снизу вверх для всех строк таблицы */
| |
|
| |
| .lyric-outside-table {
| |
| z-index: 8; /* Ensure it's on top of all objects */
| |
| border-collapse: collapse;
| |
| border: 3px solid #CC1E1E; /* Внешняя граница таблицы */
| |
| position: relative;
| |
| margin-top: 10px;
| |
| }
| |
|
| |
| .lyric-outside-table th,
| |
| .lyric-outside-table td {
| |
| border: none; /* Убрать внутренние границы */
| |
| }
| |
|
| |
| .lyric-outside-table tr {
| |
| background-color: #1E1E1E;
| |
| }
| |
|
| |
| .lyric-outside-table th {
| |
| background-color: #CC1E1E; /* Красный цвет заголовка */
| |
| color: white; /* Белый текст заголовка для контраста */
| |
| }
| |
|
| |
| .lyric-table tr {
| |
| background-image:
| |
| url('/images/8/8d/Clancy_-_Border_%281%29.png'), /* Изображение слева */
| |
| url('/images/8/8d/Clancy_-_Border_%281%29.png'), /* Изображение справа */
| |
| linear-gradient(to top, rgba(24, 24, 24, 0.5) 10%, rgba(60, 60, 60, 0.5) 90%); /* Полупрозрачный градиент */
| |
| background-position: 10px center, calc(100% - 10px) center, center center; /* Позиционирование изображений с фиксированным отступом */
| |
| background-repeat: repeat-y, repeat-y, no-repeat; /* Повторение изображений по вертикали */
| |
| background-size: 23.85px auto, 23.85px auto, cover; /* Фиксированный размер изображений */
| |
| background-blend-mode: overlay; /* Смешивание градиента с изображением */
| |
| filter: brightness(1); /* Увеличение яркости изображения */
| |
| }
| |
|
| |
| .lyric-table th,
| |
| .lyric-table td {
| |
| padding: 10px;
| |
| text-align: center; /* Выровнять текст по центру */
| |
| vertical-align: middle; /* Выровнять текст по вертикали */
| |
| border: none;
| |
| color: #CC1E1E;
| |
| font-family: 'MyCustomFont3', sans-serif;
| |
| padding-left: 54px; /* Отступ сверху */
| |
| padding-right: 54px;
| |
| border-collapse: collapse; /* Убирает пробелы между границами ячеек */
| |
| }
| |
|
| |
| /* Стиль для отдельной ячейки таблицы */
| |
| .lyric-cell {
| |
| background-color: rgba(60, 60, 60, 0.5);
| |
| background-image:
| |
| url('/images/6/63/Clancy_-_Border.png'); /* Изображение фона */
| |
| background-position: center center; /* Позиционирование изображения */
| |
| background-repeat: repeat-x; /* Повторение изображения */
| |
| background-size: auto 250%; /* Размер изображения */
| |
| background-size: contain; /* Изображение масштабируется до размеров ячейки */
| |
| padding-left: 50px; /* Отступ текста от левой границы */
| |
| padding-right: 50px; /* Отступ текста от правой границы */
| |
| width: auto; /* Ширина ячейки зависит от содержимого и изображения */
| |
| height: auto; /* Высота ячейки зависит от содержимого и изображения */
| |
| min-width: 500px; /* Минимальная ширина, если необходимо */
| |
| min-height: 500px; /* Минимальная высота, если необходимо */
| |
| }
| |
|
| |
| .container {
| |
| overflow: visible; /* Убедитесь, что содержимое не скрывается */
| |
| }
| |
|
| |
| /* Основной стиль для таблицы с изображением позади */
| |
| .table-with-background {
| |
| position: relative;
| |
| width: 68%;
| |
| display: grid;
| |
| margin-left: 0; /* Убедитесь, что здесь корректное значение */
| |
| border-radius: 10px 10px 0px 0px;
| |
| height: 224px;
| |
| float: left;
| |
| background-color: #fff; /* Убедитесь, что фон таблицы имеет нужный цвет */
| |
| pointer-events: none;
| |
| }
| |
|
| |
| .table-with-background::before {
| |
| content: '';
| |
| background-image: url('/images/9/99/Clancy_Tyler.png'); /* Замените на путь к вашему изображению */
| |
| background-size: contain;
| |
| background-position: left;
| |
| background-repeat: no-repeat;
| |
| display: block;
| |
| top: -322px; /* Смещение изображения вверх */
| |
| left: 60px; /* Смещение изображения влево */
| |
| width: calc(100% + 100px); /* Ширина изображения больше, чем ширина таблицы */
| |
| height: calc(100% + 100px); /* Высота изображения больше, чем высота таблицы */
| |
| opacity: 1; /* Убедитесь, что прозрачность равна 1 (100%) */
| |
| position: absolute; /* или fixed, в зависимости от структуры */
| |
| z-index: -10; /* Фон будет находиться под текстом */
| |
| pointer-events: none; /* Клики будут проходить сквозь этот элемент */
| |
| }
| |
|
| |
| /* Основной стиль для таблицы с изображением позади */
| |
| .table-with-background2 {
| |
| position: relative;
| |
| width: 68%;
| |
| display: grid;
| |
| margin-left: 0; /* Убедитесь, что здесь корректное значение */
| |
| border-radius: 10px 10px 0px 0px;
| |
| height: 224px;
| |
| float: left;
| |
| background-color: #fff; /* Убедитесь, что фон таблицы имеет нужный цвет */
| |
| }
| |
|
| |
| .table-with-background2::before {
| |
| content: '';
| |
| background-image: url('/images/6/6f/Josh_Torch.png'); /* Замените на путь к вашему изображению */
| |
| background-size: contain;
| |
| background-position: right;
| |
| background-repeat: no-repeat;
| |
| display: block;
| |
| position: absolute;
| |
| top: -404px; /* Смещение изображения вверх */
| |
| right: 70px; /* Смещение изображения влево */
| |
| width: calc(42%); /* Ширина изображения больше, чем ширина таблицы */
| |
| height: calc(42%); /* Высота изображения больше, чем высота таблицы */
| |
| opacity: 1; /* Убедитесь, что прозрачность равна 1 (100%) */
| |
| z-index: -10; /* Фон будет находиться под текстом */
| |
| pointer-events: none; /* Клики будут проходить сквозь этот элемент */
| |
| }
| |
|
| |
| /* Дополнительный контент в ячейке поверх изображения */
| |
| .table-image-cell > * {
| |
| position: relative;
| |
| color: white; /* Цвет текста, если нужен */
| |
| text-align: center; /* Выравнивание текста */
| |
| padding: 10px; /* Отступы вокруг текста */
| |
| }
| |
|
| |
|
| |
| /* Пример CSS для светлой темы */
| |
| .theme-light {
| |
| --background-color: #f1f1f1;
| |
| --header-background-color: #ffffff;
| |
| --content-background-color: #ffffff;
| |
| }
| |
|
| |
| .theme-light .clancy-image {
| |
| background-image: url('/images/6/6f/Josh_Torch.png');
| |
| /* остальной код для clancy-image */
| |
| }
| |
|
| |
| /* Пример CSS для темной темы */
| |
| .theme-dark {
| |
| --background-color: #2c2c2c;
| |
| --header-background-color: #1c1c1c;
| |
| --content-background-color: #1c1c1c;
| |
| }
| |
|
| |
| .theme-dark .clancy-image {
| |
| background-image: url('/images/9/99/Clancy_Tyler.png');
| |
| /* остальной код для clancy-image */
| |
| }
| |
|
| |
|
| |
| /* Стиль для элементов списка с адаптивным размером */
| |
|
| |
| .theme-toggle-button {
| |
| background-color: #007BFF; /* Синий фон кнопки */
| |
| color: white; /* Белый цвет текста */
| |
| border: 2px solid #0056b3; /* Синяя граница */
| |
| border-radius: 5px; /* Закругленные углы */
| |
| padding: 10px; /* Отступы внутри кнопки */
| |
| cursor: pointer; /* Указатель при наведении */
| |
| transition: background-color 0.3s ease, color 0.3s ease; /* Плавный переход при изменении фона и цвета */
| |
| }
| |
|
| |
| .theme-toggle-button:hover {
| |
| background-color: #0056b3; /* Темно-синий фон при наведении */
| |
| color: #fff; /* Белый текст при наведении */
| |
| }
| |
|
| |
|
| |
| body #p-personal li#p-themes {
| |
| border-right: 1px solid #333;
| |
| padding: 0 .5em;
| |
| margin-right: 0;
| |
| position: relative;
| |
| list-style: none;
| |
| background: transparent;
| |
| border: transparent;
| |
| font-family: 'MyCustomFont2', sans-serif;
| |
| top: -30px;
| |
| }
| |
|
| |
| .vector-menu-dropdown .vector-menu-content {
| |
| background-color: #007BFF; /* Устанавливает синий фон */
| |
| border-radius: 4px; /* Закругляет углы для более приятного вида */
| |
| color: black; /* Изменяет цвет текста на белый для лучшей читабельности */
| |
| }
| |
|
| |
| .vector-menu-dropdown .vector-menu-content:hover {
| |
| background-color: #0056b3; /* Изменяет фон на более тёмно-синий при наведении */
| |
| transition: background-color 0.3s ease; /* Добавляет плавный переход для изменения фона */
| |
| }
| |
|
| |
|
| |
| .vector-menu-dropdown .mw-list-item a {
| |
| cursor: pointer;
| |
| }
| |
|
| |
| body #p-personal li#p-themes ul {
| |
| flex-direction: column;
| |
| padding: 0.5em 1.4em 0.4em;
| |
| align-items: flex-start;
| |
| text-align: center;
| |
| gap: 0.25em;
| |
| height: 170px;
| |
| }
| |
|
| |
| body #p-personal li#p-themes ul li a {
| |
| 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; /* Добавляет плавный переход для цвета и тени */
| |
| }
| |
|
| |
| body #p-personal li#p-themes ul li a:hover {
| |
| color: #ff3333; /* Изменяет цвет на более светлый красный при наведении */
| |
| text-shadow: 0 0 5px rgba(255, 0, 0, 0.7); /* Добавляет подсветку при наведении */
| |
| }
| |
|
| |
| body #p-personal li#p-themes ul li {
| |
| width: 110%;
| |
| border-radius: 4px;
| |
| margin-right: 5px;
| |
| margin-left: -19px;
| |
| }
| |
|
| |
| .vector-user-menu-legacy .vector-menu-content-list {
| |
| display: flex;
| |
| flex-grow: 1;
| |
| align-items: baseline;
| |
| flex-direction: row;
| |
| justify-content: space-between;
| |
| }
| |
|
| |
| #corner-table {
| |
| position: fixed;
| |
| bottom: 0;
| |
| left: 0;
| |
| z-index: 1000;
| |
| background-color: white;
| |
| border: 1px solid #a2a9b1;
| |
| }
| |
|
| |
|
| |
|
| |
| .wikitable img {
| |
| border: none;
| |
| }
| |
|
| |
|
| |
| li.explore-adaptive-item {
| |
| background-color: #EFE9DE; /* Цвет фона */
| |
| border: 2px solid #722215; /* Цвет и толщина рамки */
| |
| border-radius: 12px; /* Закругленные углы */
| |
| padding: 15px; /* Внутренние отступы */
| |
| margin-bottom: 1px; /* Отступ между элементами списка *//
| |
| list-style-type: none; /* Убираем стандартные маркеры списка */
| |
| display: inline-block; /* Для уменьшения ширины до содержимого */
| |
| min-width: 150px; /* Минимальная ширина элемента */
| |
| min-height: 50px; /* Минимальная высота элемента */
| |
| max-width: 100%; /* Максимальная ширина до 100% контейнера */
| |
| word-wrap: break-word; /* Перенос длинных слов на следующую строку */
| |
| box-sizing: border-box; /* Учитываем рамку и отступы в размерах */
| |
| position: relative; /* Для позиционирования псевдоэлемента */
| |
| transition: background-color 0.4s ease, color 0.4s ease; /* Плавный переход для фона и цвета текста */
| |
| }
| |
|
| |
| li.explore-adaptive-item::before {
| |
| content: "";
| |
| position: absolute;
| |
| top: 0;
| |
| left: 0;
| |
| width: 100%;
| |
| height: 100%;
| |
| background-image: url('/images/1/1e/Clancy_Gif_Intro.gif'); /* Замените на путь к вашей картинке */
| |
| background-size: cover; /* Масштабируем картинку чтобы покрывала весь элемент */
| |
| background-repeat: no-repeat; /* Отключаем повтор картинки */
| |
| background-position: center; /* Центрируем картинку */
| |
| opacity: 0; /* Картинка изначально скрыта */
| |
| transition: opacity 0.4s ease; /* Плавный переход для появления картинки */
| |
| border-radius: 10px; /* Закругленные углы для картинки */
| |
| z-index: 0; /* Размещение позади текста */
| |
| }
| |
|
| |
| li.explore-adaptive-item:hover {
| |
| background-color: transparent; /* Убираем цвет фона при наведении */
| |
| border-color: transparent; /* Убираем цвет рамки при наведении */
| |
| color: #FDE51F; /* Цвет текста при наведении */
| |
| text-shadow: 0px 0px 7px rgba(0, 0, 0, 2.5);
| |
| border: 2px solid #862520; /* Цвет и толщина рамки */
| |
| }
| |
|
| |
| li.explore-adaptive-item:hover::before {
| |
| opacity: 1; /* Картинка становится полностью видимой при наведении */
| |
| }
| |
|
| |
| /* Убедимся, что текст не меняет других стилей при наведении */
| |
| li.explore-adaptive-item:hover * {
| |
| position: relative;
| |
| z-index: 1; /* Текст размещается поверх картинки */
| |
| color: inherit; /* Сохраняем цвет текста при наведении */
| |
| text-decoration: none; /* Убираем возможные подчеркивания */
| |
| }
| |
|
| |
|
| |
| /* Убедимся, что текст не меняет других стилей при наведении */
| |
| li.explore-adaptive-item:hover * {
| |
| position: relative;
| |
| z-index: 1; /* Текст размещается поверх картинки */
| |
| color: inherit; /* Сохраняем цвет текста при наведении */
| |
| text-decoration: none; /* Убираем возможные подчеркивания */
| |
| }
| |
|
| |
|
| |
| /* Убедимся, что текст не меняет других стилей при наведении */
| |
| li.explore-adaptive-item:hover * {
| |
| color: inherit; /* Сохраняем цвет текста при наведении */
| |
| text-decoration: none; /* Убираем возможные подчеркивания */
| |
| }
| |
|
| |
|
| |
| li.custom2-adaptive-item {
| |
| background-color: #EFE9DE; /* Цвет фона */
| |
| border: 2px solid #722215; /* Цвет и толщина рамки */
| |
| border-radius: 10px; /* Закругленные углы */
| |
| padding: 10px; /* Внутренние отступы */
| |
| margin-bottom: 10px; /* Отступ между элементами списка */
| |
| list-style-type: none; /* Убираем стандартные маркеры списка */
| |
| display: inline-block; /* Для уменьшения ширины до содержимого */
| |
| min-width: 150px; /* Минимальная ширина элемента */
| |
| min-height: 50px; /* Минимальная высота элемента */
| |
| max-width: 100%; /* Максимальная ширина до 100% контейнера */
| |
| word-wrap: break-word; /* Перенос длинных слов на следующую строку */
| |
| box-sizing: border-box; /* Учитываем рамку и отступы в размерах */
| |
| position: relative; /* Необходим для позиционирования псевдоэлемента */
| |
| }
| |
|
| |
| /* Стиль для ссылки, чтобы она занимала всю область <li> */
| |
| li.custom2-adaptive-item .link-item {
| |
| display: block; /* Занимает всю доступную ширину и высоту */
| |
| text-decoration: none; /* Убираем подчеркивание текста */
| |
| color: inherit; /* Наследуем цвет от родительского элемента */
| |
| height: 100%; /* Занимает полную высоту <li> */
| |
| width: 100%; /* Занимает полную ширину <li> */
| |
| }
| |
|
| |
| /* Дополнительный стиль для уникального элемента с текстом */
| |
| li.unique-item::after {
| |
| content: "Discography"; /* Текст для отображения */
| |
| color: white; /* Цвет текста */
| |
| font-size: 20px; /* Размер шрифта */
| |
| font-weight: bold; /* Полужирный шрифт */
| |
| position: absolute; /* Абсолютное позиционирование */
| |
| top: 50%; /* Центрирование по вертикали */
| |
| left: 50%; /* Центрирование по горизонтали */
| |
| transform: translate(-50%, -50%); /* Смещение на половину ширины и высоты */
| |
| opacity: 0; /* Исходное состояние невидимо */
| |
| transition: opacity 0.3s ease; /* Плавный переход */
| |
| }
| |
|
| |
| /* Отображение текста при наведении на уникальный элемент */
| |
| li.unique-item:hover::after {
| |
| opacity: 1; /* Сделать текст видимым */
| |
| }
| |
|
| |
| /* Стиль для нового вида элемента списка */
| |
| li.special-item {
| |
| background-color: #E0E0E0; /* Цвет фона для специального элемента */
| |
| border: 1px solid #CCC; /* Цвет и толщина рамки для специального элемента */
| |
| border-radius: 5px; /* Закругленные углы для специального элемента */
| |
| padding: 15px; /* Внутренние отступы для специального элемента */
| |
| font-style: italic; /* Курсив для текста внутри специального элемента */
| |
| font-size: 16px; /* Размер шрифта для текста внутри специального элемента */
| |
| color: #333; /* Цвет текста для специального элемента */
| |
| }
| |
|
| |
| /* Убираем эффекты затемнения при наведении */
| |
| li.custom2-adaptive-item:hover img {
| |
| filter: none; /* Убираем фильтр затемнения */
| |
| }
| |
|
| |
|
| |
| /* CSS placed here will be applied to all skins */
| |
|
| |
| /* Стиль для элементов списка с адаптивным размером */
| |
| li.custom-adaptive-item {
| |
| background-color: #EFE9DE; /* Цвет фона */
| |
| border: 2px solid #722215; /* Цвет и толщина рамки */
| |
| border-radius: 10px; /* Закругленные углы */
| |
| padding: 10px; /* Внутренние отступы */
| |
| margin-bottom: 10px; /* Отступ между элементами списка */
| |
| list-style-type: none; /* Убираем стандартные маркеры списка */
| |
| display: inline-block; /* Для уменьшения ширины до содержимого */
| |
| min-width: 150px; /* Минимальная ширина элемента */
| |
| min-height: 50px; /* Минимальная высота элемента */
| |
| max-width: 100%; /* Максимальная ширина до 100% контейнера */
| |
| word-wrap: break-word; /* Перенос длинных слов на следующую строку */
| |
| box-sizing: border-box; /* Учитываем рамку и отступы в размерах */
| |
| position: relative; /* Необходим для позиционирования псевдоэлемента */
| |
| transition: background-color 0.3s ease, border-color 0.3s ease;
| |
| }
| |
|
| |
| li.custom-adaptive-item a {
| |
| display: block; /* Занимает всю доступную ширину и высоту */
| |
| height: 100%; /* Занимает полную высоту <li> */
| |
| width: 100%; /* Занимает полную ширину <li> */
| |
| text-decoration: none; /* Убираем подчеркивание текста */
| |
| color: inherit; /* Наследуем цвет от родительского элемента */
| |
| }
| |
|
| |
| /* Дополнительный эффект при наведении мыши */
| |
| li.custom-adaptive-item:hover {
| |
| background-color: #CFC8B2; /* Цвет фона при наведении */
| |
| border-color: #777; /* Цвет рамки при наведении */
| |
| }
| |
|
| |
| /* Изменение оттенка для изображения при наведении на <li> */
| |
| li.custom-adaptive-item:hover img {
| |
| filter: brightness(0.8); /* Темнее на 20% при наведении */
| |
| }
| |
|
| |
| /* Текст "Discography" появляется только в уникальном элементе */
| |
| li.unique-item::after {
| |
| content: "Discography"; /* Текст для отображения */
| |
| color: white; /* Цвет текста */
| |
| font-size: 20px; /* Размер шрифта */
| |
| font-weight: bold; /* Полужирный шрифт */
| |
| position: absolute; /* Абсолютное позиционирование */
| |
| top: 50%; /* Центрирование по вертикали */
| |
| left: 50%; /* Центрирование по горизонтали */
| |
| transform: translate(-50%, -50%); /* Смещение на половину ширины и высоты */
| |
| opacity: 0; /* Исходное состояние невидимо */
| |
| transition: opacity 0.3s ease; /* Плавный переход */
| |
| }
| |
|
| |
| li.unique-item2::after {
| |
| content: "[[Tours]]"; /* Текст для отображения */
| |
| color: white; /* Цвет текста */
| |
| font-size: 20px; /* Размер шрифта */
| |
| font-weight: bold; /* Полужирный шрифт */
| |
| position: absolute; /* Абсолютное позиционирование */
| |
| top: 50%; /* Центрирование по вертикали */
| |
| left: 50%; /* Центрирование по горизонтали */
| |
| transform: translate(-50%, -50%); /* Смещение на половину ширины и высоты */
| |
| opacity: 0; /* Исходное состояние невидимо */
| |
| transition: opacity 0.3s ease; /* Плавный переход */
| |
| }
| |
|
| |
| /* Отображение текста при наведении на уникальный элемент */
| |
| li.unique-item:hover::after {
| |
| opacity: 1; /* Сделать текст видимым */
| |
| }
| |
|
| |
| li.unique-item2:hover::after {
| |
| opacity: 1; /* Сделать текст видимым */
| |
| }
| |
|
| |
| hr.whowe-hr { border: 0; height: 5px; background: linear-gradient(to right, rgba(208, 32, 25, 0), #D02019, rgba(208, 32, 25, 0)); }
| |
|
| |
| table td.hover-effect { background-color: #FF0000; transition: background-color 0.3s ease; }
| |
|
| |
| table td.hover-effect:hover { background-color: #00FF21; }
| |
|
| |
| hr.custom-hr-unco { border: 0; height: 1px; background-color: #B59000; margin: 5px 0; }
| |
|
| |
| hr { background-color: #C14424; }
| |
|
| |
| .mw-body h1, .mw-body-content h1, .mw-body-content h2 { font-family: 'MyCustomFont3', sans-serif; }
| |
|
| |
| .mw-body h1, .mw-body-content h1 { font-family: 'MyCustomFont1', sans-serif; font-size: 35px; color: linear-gradient(to bottom, rgba(167, 215, 249, 0) 0, #D02019 100%); }
| |
|
| |
| @font-face { font-family: 'MyCustomFont1'; src: url('/nc_assets/fonts/Bebas Neue Cyrillic.ttf') format('truetype'); font-weight: 510; font-style: normal; }
| |
|
| |
| @font-face { font-family: 'MyCustomFont3'; src: url('/nc_assets/fonts/Martian Mono Condensed Medium.ttf') format('truetype'); font-weight: normal; font-style: normal; }
| |
|
| |
| @font-face { font-family: 'MyCustomFont2'; src: url('/nc_assets/fonts/JetBrainsMono.ttf') format('truetype'); font-weight:500; font-style: normal; font-optical-sizing: auto; }
| |
|
| |
| .mw-mmv-post-image { background-color: #DDD7CC; }
| |
|
| |
| .mw-ui-button.mw-ui-progressive:not(:disabled) { background-color: #D02019; }
| |
|
| |
| .venue-table { background-color: #EFE1E4; text-align: left; margin: 1em 0; border-collapse: collapse; }
| |
|
| |
| .unco-table { background-color: #FFF6CE; text-align: left; margin: 1em 0; border-collapse: collapse; }
| |
|
| |
| .qute-table { background-color: #FFE281; border-color: #B59000 text-align: left; margin: 1em 0; border-collapse: collapse; }
| |
|
| |
| .setlist-table { background-color: #efe9de; border: 3px solid #c14424; text-align: left; margin: 1em 0; border-collapse: collapse; }
| |
|
| |
| .venue-table > tr > th, .venue-table > tr > td, .venue-table > * > tr > th, .venue-table > * > tr > td { padding: 0.2em 0.4em; }
| |
|
| |
| .unco-table > tr > th, .unco-table > tr > td, .unco-table > * > tr > th, .unco-table > * > tr > td { padding: 0.2em 0.4em; }
| |
|
| |
|
| |
|
|
| |
|