9,003
edits
MediaWiki:Common.css: Difference between revisions
Jump to navigation
Jump to search
no edit summary
No edit summary |
No edit summary |
||
| (239 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
.mw-kartographer-map, | |||
.mw-kartographer-map .leaflet-container { | |||
height: 400px !important; | |||
} | |||
.infobox-venue { | |||
width: 320px; | |||
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); | |||
} | |||
.infobox-venue > caption, | |||
.infobox-venue > tbody > tr:first-child > th[colspan="2"], | |||
.infobox-venue > .infobox-title { | |||
display: none; | |||
} | } | ||
. | .infobox-venue > .ib-title { | ||
font-weight: 700; | |||
} | } | ||
. | .infobox-venue .ib-image { | ||
padding: 0; | |||
background: #1a0b0b; | |||
} | |||
.infobox-venue .ib-img { | |||
display: block; | |||
width: 100%; | |||
height: auto; | |||
border-bottom: 1px solid #4a1111; | |||
} | |||
.infobox-venue .ib-caption { | |||
font-size: 85%; | |||
color: #ccc; | |||
padding: .4em .8em; | |||
border-bottom: 1px solid #311010; | |||
background: #130505; | |||
} | } | ||
. | .infobox-venue th { | ||
text-align: left; | |||
vertical-align: top; | |||
width: 40%; | |||
white-space: nowrap; | |||
padding: .5em .7em; | |||
color: #ffd4d4; | |||
background: #170909; | |||
border-bottom: 1px solid #2d0e0e; | |||
} | } | ||
. | .infobox-venue td { | ||
padding: .5em .7em; | |||
border-bottom: 1px solid #231010; | |||
vertical-align: top; | |||
} | } | ||
. | .infobox-venue .ib-note { | ||
opacity: .8; | |||
font-style: italic; | |||
font-size: 90%; | |||
} | } | ||
. | .infobox-venue .ib-map { | ||
padding: 0; | |||
border-top: 1px solid #2d0e0e; | |||
background: #0f0f0f; | |||
} | } | ||
. | |||
.image-frame2 { | |||
display: inline-block; | |||
border: none; | |||
border-radius: 18px; | |||
overflow: hidden; | |||
box-shadow: 0 3px 16px rgba(70,15,25,0.09); | |||
margin: 8px; | |||
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: | padding-right: 0.5em; | ||
font-style: italic; | |||
white-space: nowrap; | |||
} | } | ||
.setlist-row:hover { | |||
background: #f6fbf1; | |||
transition: background 0.3s; | |||
} | } | ||
.setlist-song { | |||
margin-right: 1.1em; | |||
display: inline-block; | |||
} | |||
.collapsible-setlist { | |||
font-size: 97%; | |||
padding-top: 0.3em; | |||
padding-bottom: 0.3em; | |||
} | |||
padding: | .collapsible-setlist-row { | ||
display: block; | |||
margin-left: 0.5em; | |||
margin-bottom: 0.12em; | |||
margin- | color: #363636; | ||
white-space: nowrap; | |||
} | } | ||
.collapsible-setlist-symbol { | |||
font-size: 80%; | |||
color: # | margin-right: 0.5em; | ||
font- | 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; /* Подчеркивание в точку */ | |||
text- | |||
} | } | ||
. | /* Добавляем title при наведении */ | ||
.not-confirmed[title]:hover:after { | |||
content: attr(title); /* Используем значение атрибута title */ | |||
position: absolute; | |||
background- | top: 100%; /* Позиционируем под элементом */ | ||
left: 50%; | |||
transform: translateX(-50%); | |||
background-color: #333; | |||
color: #fff; | |||
padding: 5px 10px; | |||
border-radius: 4px; | |||
font-size: 12px; | |||
white-space: nowrap; | |||
z-index: 10; | |||
} | } | ||
. | .licontent-actual { | ||
z-index: -2; /* Устанавливаем уровень слоя ниже upper_tables */ | |||
} | } | ||
/*photo frames */ | |||
/* Стиль для контейнера изображения с рамкой и подписью */ | |||
.photo-frame { | |||
display: inline-block; /* Для корректного центрирования и отображения */ | |||
text-align: center; /* Центрирование подписи */ | |||
margin: 10px; /* Отступ для визуального разделения */ | |||
padding: 10px 10px 0; /* Уменьшен нижний отступ, чтобы подпись была ближе */ | |||
vertical-align: top; /* Выравнивание по верхнему краю */ | |||
opacity: 0; /* Изначально невидимый */ | |||
animation: fadeIn 1s ease forwards; /* Анимация появления */ | |||
box-sizing: border-box; /* Учитывает рамку и отступы в размерах */ | |||
} | |||
/* | /* Анимация появления */ | ||
@keyframes fadeIn { | |||
from { | |||
opacity: 0; | |||
transform: translateY(10px); /* Легкий сдвиг вниз */ | |||
} | |||
to { | |||
opacity: 1; | |||
transform: translateY(0); | |||
} | |||
} | } | ||
/* | /* Стиль для самой фотографии */ | ||
. | .photo-frame img { | ||
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% */ | |||
} | } | ||
/* Стиль для подписи */ | |||
.photo-frame .caption { | |||
margin-top: 5px; /* Минимальный отступ сверху для подписи */ | |||
font-size: 14px; /* Размер шрифта подписи */ | |||
color: #333; /* Цвет текста подписи */ | |||
line-height: 1.2; /* Межстрочный интервал для компактности */ | |||
} | } | ||
/* | /* Media */ | ||
. | .social-media-row { | ||
display: flex; /* Располагаем элементы в ряд */ | |||
gap: 10px; /* Отступ между контейнерами */ | |||
} | } | ||
. | /* Стили для каждого контейнера */ | ||
.social-media { | |||
width: 75px; | |||
height: 75px; | |||
border: 2px solid #000; | |||
border-radius: 8px; | |||
background-color: transparent; | |||
cursor: pointer; | |||
transition: all 0.2s ease; | |||
padding: 10px; | |||
box-sizing: border-box; | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
margin-bottom: 5px; | |||
} | } | ||
. | .social-media-row { | ||
display: flex; | |||
gap: 10px; | |||
justify-content: center; /* Центрирует ряд по горизонтали */ | |||
} | } | ||
. | .social-media:hover { | ||
transform: scale(1.1); | |||
} | |||
.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- | 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 { | ||
position: relative; | background-color: #EFE9DE; /* Цвет фона */ | ||
border: 2px solid #722215; /* Рамка */ | |||
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; /* Цвет рамки при наведении */ | |||
} | } | ||
/* Эффект затемнения при нажатии */ | |||
.copyable-text:active { | |||
background-color: #D5CFC0; /* Чуть темнее, чем #EFE9DE */ | |||
border-color: #5A1A10; /* Чуть темнее, чем #722215 */ | |||
} | |||
. | /* Стиль для текста "Copied" через псевдоэлемент */ | ||
.copyable-text.copied::after { | |||
content: "Copied"; /* Текст "Copied" */ | |||
position: absolute; | |||
left: -65px; /* Расположение над элементом */ | |||
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; /* Анимация исчезновения */ | |||
} | } | ||
/* Анимация для плавного исчезновения */ | |||
@keyframes fadeOut { | |||
0% { opacity: 1; } | |||
77% { opacity: 1; } /* 77% от 1.3s = ~1s, текст виден 1 секунду */ | |||
100% { opacity: 0; } | |||
} | } | ||
. | /* Kitchen Sink Logo*/ | ||
/* Kitchen Sink */ | |||
.mw-parser-output .life-wrapper { | |||
display: flex; | |||
width: 100%; | |||
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; | |||
} | } | ||
. | .mw-parser-output .life-wrapper-inner { | ||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
width: 1390px; | |||
margin-left: 60px; /* Смещаем вправо на 50px (настройте по желанию) */ | |||
} | } | ||
.mw-parser-output .survival-text { | |||
font-size: 16px; | |||
margin: 0; | |||
padding: 0; | |||
line-height: 1; | |||
margin-right: 0.5em; | |||
display: inline-block; | |||
} | |||
.mw-parser-output .kitchen_sink { | |||
position: relative; | |||
display: flex; | |||
align-items: center; | |||
width: 150px; | |||
margin: 0; | |||
padding: 0; | |||
} | |||
.mw-parser-output .pillar { | |||
width: 5px; | |||
height: 28px; | |||
background-color: #D02019; | |||
margin: 0; | |||
} | |||
.mw-parser-output .left-pillar { | |||
margin-right: 50px; | |||
} | } | ||
.mw-parser-output .right-pillar { | |||
transform: rotate(20deg); | |||
margin-left: -35px; | |||
} | } | ||
.mw-parser-output .bridge-beam { | |||
position: absolute; | position: absolute; | ||
left: | 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; | ||
counter-reset: count-songlist-counter; | |||
} | |||
.mw-parser-output .count-songlist div { | |||
margin: 0.2em 0; | |||
padding-left: 2em; | |||
margin | |||
position: relative; | position: relative; | ||
counter-increment: count-songlist-counter; | |||
} | |||
.mw-parser-output .count-songlist div:first-child { | |||
margin-top: 0.5em; | |||
} | |||
.mw-parser-output .count-songlist div:last-child { | |||
margin-bottom: 1.5em; | |||
} | } | ||
.mw-parser-output .count-songlist div::before { | |||
content: " | content: counter(count-songlist-counter) "."; | ||
position: absolute; | position: absolute; | ||
left: | left: 0.5em; | ||
color: black; | |||
font-size: 1em; | |||
} | |||
.mw-wiki-logo { | |||
background-image: url(images/wiki2.png); | |||
transition: transform 0.3s ease-in-out; /* Добавляем плавную анимацию */ | |||
} | |||
.mw-wiki-logo:hover { | |||
transition: | 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; /* Без внутренних отступов для элементов */ | |||
} | |||
left: | |||
ul { | |||
padding-left: 0; | |||
} | |||
::marker { | |||
list-style-type: none !important; | |||
font- | } | ||
.text-effect { | |||
transition: color 0.3s ease, | 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; | |||
font-family: ' | line-height: 1; | ||
margin-top: 10px; | |||
line-height: | |||
margin- | |||
} | } | ||
.c-form-title:hover { | |||
color: #E5241D; | |||
color: | |||
} | } | ||
.licontent { | |||
- | list-style: none; | ||
--header | 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; | text-align: center; | ||
font-size: | padding: 10px; | ||
border-radius: 8px 8px 0 0; /* Скругление только для верхних углов */ | |||
background: | 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; | |||
text- | |||
} | } | ||
.licontent .li-body a:hover { | |||
text-decoration: underline; | |||
text-decoration: | |||
} | } | ||
content: " | /* Скрытие оригинального текста и замена на "Comments" */ | ||
a[rel="discussion"] span { | |||
display: inline-block; /* Для корректного позиционирования */ | |||
position: relative; | |||
color: transparent; /* Скрываем оригинальный текст для доступности */ | |||
} | |||
/* Отображение текста "Comments" */ | |||
a[rel="discussion"] span::before { | |||
content: "Comments"; | |||
position: absolute; | position: absolute; | ||
top: 0; | |||
left: 0; | |||
color: #0645AD; /* Цвет текста, как у ссылок MediaWiki */ | |||
} | |||
/* Подчеркивание при наведении, как у ссылок */ | |||
a[rel="discussion"]:hover span::before { | |||
text-decoration: underline; | |||
text-decoration-color: #0645AD; /* Цвет подчеркивания, как у ссылок */ | |||
} | } | ||
# | |||
-- | |||
-- | /* 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; | text-align: center; | ||
display: inline-block; | |||
text-transform: uppercase; | |||
border: 2px solid rgba(65, 79, 106, .3); | |||
border-radius: 2px; | |||
width: | 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%; | width: 100%; | ||
height: 2.15384615em; | |||
box-sizing: border-box; | |||
border: 1px solid #a2a9b1; | |||
border-radius: 2px; | |||
font-family: | padding: 5px 2.15384615em 5px 0.4em; | ||
box-shadow: inset 0 0 0 1px transparent; | |||
font-family: inherit; | |||
transition: color | 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; | 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; | |||
top: | |||
} | } | ||
. | .container23 { | ||
display: flex; /* Используем flexbox для размещения элементов в ряд */ | |||
} | } | ||
.mw-content-ltr ul, .mw-content-rtl .mw-content-ltr ul { | |||
margin: 0.3em 0 0; | |||
padding: 0; | |||
} | |||
. | .newstable { | ||
width: | 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: 1015px; | |||
z-index: 10000; /* Устанавливаем высокий уровень слоя */ | |||
} | } | ||
. | .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; | |||
background-color: #EFE9DE; | 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; | |||
} | |||
| Line 687: | Line 787: | ||
/* HelUs Sidebar */ | |||
#help-container { | |||
background-color: #ffe556; | |||
background-image: url( | 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; /* Цвет текста заголовка */ | |||
right: | font-size: 0.80em; | ||
background- | 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 { | ||
top: | color: #000; /* Цвет текста заголовка */ | ||
right: | font-size: 0.80em; /* Размер шрифта */ | ||
background-color: | 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); | |||
background- | |||
} | } | ||
. | /* 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 { | |||
position: | margin-top: 30px; | ||
position: relative; | |||
padding: 5px 10px; | |||
width: | 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; | position: absolute; | ||
top: | top: -25px; | ||
left: 50%; /* Центрируем изображение */ | |||
width: | transform: translateX(-50%); | ||
height: | 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; | 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; | text-align: center; | ||
font-size: 15px; | |||
color: red; | |||
background: transparent; | |||
transition: color 0.3s ease, text-shadow 0.3s ease; | |||
width: 100%; | |||
position: relative; | |||
} | } | ||
.shows-list th { | #p-themes-item-sai a:before { | ||
background-color: #E6E6E6; /* Можно изменить на нужный цвет */ | 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; | |||
} | |||
.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%; | |||
} | |||
.close-button { | |||
position: absolute; | |||
top: 10px; | |||
right: 10px; | |||
cursor: pointer; | |||
font-size: 20px; | |||
} | |||
/* Скрытие окна при потере фокуса */ | |||
.popup-overlay:focus-within { | |||
display: none; | |||
} | |||
| Line 984: | Line 1,724: | ||
.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; | |||
} | |||
| Line 1,038: | Line 1,844: | ||
. | /* Стили для таблицы "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%; | |||
} | |||
} | |||
| Line 1,166: | Line 1,932: | ||
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; | |||
border-radius: | padding: 5px 0; | ||
position: absolute; | |||
z-index: 1; | |||
top: -125%; /* Изменено на top для появления сверху */ | |||
left: 50%; | |||
margin- | margin-left: -60px; | ||
opacity: 0; | |||
transition: opacity 0.3s; | |||
} | } | ||
li.tooladd:hover .tooltiptext { | |||
. | visibility: visible; | ||
opacity: 1; | |||
} | } | ||
| Line 1,203: | Line 1,966: | ||
. | .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: 5px; | |||
margin-bottom: 5px; | |||
} | } | ||
@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; | |||
display: | |||
} | } | ||
.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 { | ||
color: | 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; | |||
background-color: | border: 3px solid #84817B; | ||
padding: 10px; /* Добавьте отступы по вашему усмотрению */ | |||
border: | border-radius: 5px; /* При необходимости добавьте скругление углов */ | ||
padding: 10px | 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 { | ||
text-align: | 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 | 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 на класс или идентификатор вашего элемента */ | |||
/* Сбрасываем стили для родительского <p>, если он есть */ | |||
.mw-parser-output .custom-link-text-p { | |||
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; | |||
. | |||
. | |||
padding | |||
display: | |||
} | } | ||
| Line 1,529: | 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,756: | Line 3,485: | ||
#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/ | #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 } | ||