MediaWiki:Common.css: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
(750 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
/* CSS placed here will be applied to all skins */ | .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: 400px; | |||
} | |||
.stripe { | |||
width: 5px; | |||
height: 50%; | |||
background-color: black; | |||
} | |||
.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: black; | |||
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; | |||
} | |||
pre, code, .mw-code { | |||
background-color: transparent; | |||
color: #000; | |||
border: 1px solid transparent; | |||
} | |||
@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-color: #007bff; | |||
color: white; | |||
border: none; | |||
border-radius: 4px; | |||
padding: 10px 20px; | |||
cursor: pointer; | |||
} | |||
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; /* Разрешает перенос текста на новую строку */ | |||
} | |||
.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; /* Устанавливаем высоту строки, чтобы минимизировать отступы */ | |||
} | |||
.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%); | |||
} | |||
.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; | |||
} | |||
.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 0.3em 0.4em; | |||
align-items: flex-start; | |||
gap: 0.25em; | |||
height: 145px; | |||
} | |||
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); /* Добавляет подсветку при наведении */ | |||
} | |||
.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 #999; /* Цвет и толщина рамки */ | |||
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 #999; /* Цвет и толщина рамки */ | |||
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 #999; /* Цвет и толщина рамки */ | |||
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; } | |||
.setlist-table { | |||
--setlist-bg-color: #efe9de; /* Определяем переменную для цвета */ | |||
background-color: var(--setlist-bg-color); | |||
border: 3px solid #c14424; | |||
text-align: left; | |||
margin: 1em 0; | |||
border-collapse: collapse; | |||
} | |||
.custom-table tbody .cell-red { background-color: #ffdddd; } | |||
.custom-table { | |||
background-color: transparent; | |||
border: 2px solid #D33328; | |||
border-collapse: collapse; | |||
text-align: center; | |||
} | |||
.disc-table { border: 2px solid #D33328; } | |||
.custom-table .cell-der { background-color: #CC531E; } | |||
.custom-table th, .custom-table td { border: 1px solid #D33328; padding: 3px; } | |||
.custom-table .header-red { background-image:url(/images/d/db/Clancy_Letter_Background1.png); background-size: cover; color: white; text-align: center; } | |||
.custom-table .header-blue { background-image:url(/images/0/0a/Whiteback.jpg); background-size: cover; color: white; text-align: center; } | |||
.custom-table .cell-red { background-color: #FFE281; } | |||
.custom-table .cell-box { background-image:url(/images/6/64/Boxm.png); } | |||
.custom-table .cell-blue { background-color: #CEC9C2; border: 1px solid #C14424; height: 2px; } | |||
.custom-table .cell-disco { text-align:center; border-color:#EFBB7F; background-color: #EFE9DE; } | |||
.custom-table .cell-disco2 { background-color:#D87C43; text-align:center; border-color:#EFBB7F; } | |||
.custom-table .cell-green { background-color: #EFE9DE; border: 1px solid #C14424; height: 2px; } | |||
.custom-table .header-grass { background-color: #EFE9DE; } | |||
#footer-info li { line-height: 1.4; background: #DDD7CC; margin-bottom: 4px; text-indent: 5px; } | |||
#footer-places li { float: left; margin-right: 1em; line-height: 2; background: #DDD7CC; text-indent: 5px; text-indent-right: 5px; } | |||
.background-table { background-image: url(/images/3/3b/Clancy_background.png); background-size: cover;} | |||
.vector-user-menu-legacy li { font-size: 0.75em; float: left; margin-left: 0.75em; padding-top: 2.6em; line-height: 1.16666667; } | |||
.client-js .sortable:not(.jquery-tablesorter) > * > tr:first-child > th:not(.unsortable), .jquery-tablesorter th.headerSort { background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_both.svg?0e440); cursor: pointer; background-repeat: no-repeat; background-position: center right; padding-right: 21px; background-size: auto; } | |||
.table-bg { background-image:url(/images/0/0a/Whiteback.jpg); background-size: cover; background-repeat: no-repeat; } | |||
.border-image-container { border-image-source: linear-gradient(to right, #ff8c00, #ffd700); } | |||
.wikitable { background-color: #EFE9DE; } | |||
.gradient-underline { display: inline-block; position: relative; } | |||
.gradient-underline::after { content: ''; position: absolute; bottom: -3px; left: 0; width: 100%; height: 5px; background-image: linear-gradient(to right, #ff0000, #00ff00); background-size: 100% 100%; z-index: -1; } | |||
.my-template.theme-dark { /* Styles specific to the "dark" theme */ } | |||
.rounded-table { border-collapse: collapse; border-radius: 10px; overflow: hidden; } | |||
.wikitable.transparent { background-color: transparent; border: none; } | |||
/* Change the background color of the bottom and left of eath page, up to behind the logo: */ | /* Change the background color of the bottom and left of eath page, up to behind the logo: */ | ||
body { background: # | body { background: #D02019 url(/images/a/a9/Dema_beck_clancy.png) no-repeat; font-family: 'Roboto', Arial, sans-serif; position: relative; } | ||
#content .client-darkmode { background: #AA3C14; font-family: "Roboto"; } | #content .client-darkmode { background: #AA3C14; font-family: "Roboto"; } | ||
.theme-dark .infobox { background-color: #333; color: #fff; border: 1px solid #666; } | |||
/* background color of the content and title of pages */ | /* background color of the content and title of pages */ | ||
#content { background-color: # | #content { background-color: #DDD7CC; font-family: 'MyCustomFont2', sans-serif; } | ||
/* This is from the background color of the title of the Navigation menu in the left column */ | /* This is from the background color of the title of the Navigation menu in the left column */ | ||
#p-navigation { background-color: # | #p-navigation { background-color: #FFD800; border-radius: 10px 10px 0px 0px; border: 3px solid #722215; border-bottom:hidden; background-image:url(/images/9/97/Sidebar.png); font-family: 'MyCustomFont3', sans-serif; } | ||
/* This is from the background color of the title of the Twenty one pilots menu in the left column */ | |||
#p-Twenty_one_pilots { background-color: #FFD800; border: 3px solid #722215; border-bottom:hidden; border-top:hidden; background-image:url(/images/3/38/Sidebar2.png); font-family: 'MyCustomFont2', sans-serif; } | |||
/* This is from the background color of the title of the Twenty one pilots menu in the left column */ | /* This is from the background color of the title of the Twenty one pilots menu in the left column */ | ||
#p- | #p-Tyler_Joseph { background-color: #FFD800; border: 3px solid #722215; border-bottom:hidden; border-top:hidden; background-image:url(/images/3/38/Sidebar2.png); font-family: 'MyCustomFont2', sans-serif; } | ||
/* This is from the background color of the title of the Members menu in the left column */ | /* This is from the background color of the title of the Members menu in the left column */ | ||
#p-Members { background-color: # | #p-Members { background-color: #FFD800; border: 3px solid #722215; border-bottom:hidden; border-top:hidden; background-image:url(/images/3/38/Sidebar2.png); font-family: 'MyCustomFont2', sans-serif; } | ||
.background-table { background-image: url(/images/3/3b/Clancy_background.png); background-size: cover;} | .background-table { background-image: url(/images/3/3b/Clancy_background.png); background-size: cover;} | ||
Line 22: | Line 1,457: | ||
.wikitable > tr > th, .wikitable > * > tr > th { background:#} | .wikitable > tr > th, .wikitable > * > tr > th { background:#} | ||
#catlinks { background:# | #catlinks { background:#CEC9C2; border: 1px solid #D33328; } | ||
.mw-parser-output .tracklist th[scope="col"] { background-color: #ef5e29; } | |||
.wikitable > tr > th, .wikitable > * > tr > th { background-color: #D33328; border: 1px solid #7b1325; background-image: url(/images/d/db/Clancy_Letter_Background1.png); background-size: cover; color: #fff; } | |||
.catlinks li { display: inline-block; line-height: 1.25em; border-left: 1px solid # | .wikitable > tr > th, .wikitable > * > tr > th { background-color: #eaecf0; text-align: center; color: #fff; } | ||
.wikitable > tr > th, .wikitable > * > tr > th { background-color: #D33328; border: 1px solid #7b1325; background-image: url(/images/d/db/Clancy_Letter_Background1.png); } | |||
.wikitable > tr > th, .wikitable > tr > td, .wikitable > * > tr > th, .wikitable > * > tr > td { background: #EFE9DE; } | |||
.wikitable > tr > th, .wikitable > * > tr > th { background-color: #D33328; border: 1px solid #7b1325; background-size: cover; background-image: url(/images/d/db/Clancy_Letter_Background1.png); } | |||
.wikitable > tr > th, .wikitable > tr > td, .wikitable > * > tr > th, .wikitable > * > tr > td { border: 1px solid #7b1325; } | |||
.catlinks li { display: inline-block; line-height: 1.25em; border-left: 1px solid #D33328; margin: 0.125em 0; padding: 0 0.5em; } | |||
.vector-menu-tabs, .vector-menu-tabs a, #mw-head .vector-menu-dropdown .vector-menu-heading { background-image: linear-gradient(to bottom,rgba(167,215,249,0) 0,#722215 100%); background-repeat: no-repeat; background-size: 1px 100%; } | .vector-menu-tabs, .vector-menu-tabs a, #mw-head .vector-menu-dropdown .vector-menu-heading { background-image: linear-gradient(to bottom,rgba(167,215,249,0) 0,#722215 100%); background-repeat: no-repeat; background-size: 1px 100%; } | ||
:not(:checked) > .vector-menu-checkbox { background:#EFB737 } | :not(:checked) > .vector-menu-checkbox { background:#EFB737; display: block; } | ||
li.gallerybox div.thumb { border: hidden; background-color: #D33328; text-align:center; } | |||
.mw-parser-output .tracklist-total-length th>span { background-color: #d8663d; } | |||
.mw-parser-output .tracklist-total-length td { background-color: #d8663d; } | |||
.vector-menu-dropdown { background-image: linear-gradient(to bottom,rgba(167,215,249,0) 0,#722215 100%); } | .vector-menu-dropdown { background-image: linear-gradient(to bottom,rgba(167,215,249,0) 0,#722215 100%); } | ||
Line 36: | Line 1,489: | ||
.c-actions { margin: 10px 5px 0px 0px; } | .c-actions { margin: 10px 5px 0px 0px; } | ||
.c-item { background-color: # | .c-item { background-color: #EFE9DE; border:2px solid #D33328; color: #722215; margin: 10px 0px 15px 0px; } | ||
.c-avatar img { padding: 3px; border: 1px solid #dcdcdc; background-color: #bc1313; margin: 6px 0px 0px 6px; } | .c-avatar img { padding: 3px; border: 1px solid #dcdcdc; background-color: #bc1313; margin: 6px 0px 0px 6px; } | ||
Line 48: | Line 1,501: | ||
.c-time { color: #af1414; } | .c-time { color: #af1414; } | ||
.f-message { background-color: # | .f-message { background-color: #FFF8ED; width: 445px; } | ||
.c-comment { text-indent: 5px; } | .c-comment { text-indent: 5px; word-wrap: break-word; word-break: break-word;} | ||
.user-section-heading { margin: 0 0 23px 0; } | .user-section-heading { margin: 0 0 23px 0; } | ||
Line 60: | Line 1,513: | ||
body #p-personal li#p-themes > span { position: relative; top: 24px; left: -101px; } | body #p-personal li#p-themes > span { position: relative; top: 24px; left: -101px; } | ||
.mwe-popups .mwe-popups-extract:after, .mwe-popups .mwe-popups-extract blockquote:after { content: ' '; position: absolute; bottom: 0; width: 25%; height: 20px; background-color: # | .vector-user-menu-legacy li { position: relative; top: -26px; right: -10px; } | ||
.mwe-popups .mwe-popups-extract:after, .mwe-popups .mwe-popups-extract blockquote:after { content: ' '; position: absolute; bottom: 0; width: 25%; height: 20px; background-color: #EFE9DE; pointer-events: none; } | |||
figure[typeof~='mw:File/Thumb'], figure[typeof~='mw:File/Frame'] { background-color: #D35232; border-color: #9E3A19; } | figure[typeof~='mw:File/Thumb'], figure[typeof~='mw:File/Frame'] { background-color: #D35232; border-color: #9E3A19; } | ||
.mw-content-ltr figure[typeof~='mw:File/Thumb'] > figcaption, .mw-content-ltr figure[typeof~='mw:File/Frame'] > figcaption { background-color: # | .mw-content-ltr figure[typeof~='mw:File/Thumb'] > figcaption, .mw-content-ltr figure[typeof~='mw:File/Frame'] > figcaption { background-color: #D02019; border-color: #9E3A19; color: #fff } | ||
.mwe-popups .mwe-popups-extract[dir='ltr']:after { right: 0; background-image: linear-gradient(to right,rgba(255,255,255,0),# | .mwe-popups .mwe-popups-extract[dir='ltr']:after { right: 0; background-image: linear-gradient(to right,rgba(255,255,255,0),#EFE9DE 50%); } | ||
.wikitable > tr > th, .wikitable > tr > td, .wikitable > * > tr > th, .wikitable > * > tr > td { background-color: #; border: 1px solid # | .wikitable > tr > th, .wikitable > tr > td, .wikitable > * > tr > th, .wikitable > * > tr > td { background-color: #; border: 1px solid #D33328; padding: 0.2em 0.4em; } | ||
input[type="checkbox" i] { color: #B0E0E6; } | input[type="checkbox" i] { color: #B0E0E6; } | ||
.mwe-popups .mwe-popups-container { background: # | .mwe-popups .mwe-popups-container { background: #EFE9DE; } | ||
.mw-parser-output .infobox-above, .mw-parser-output .infobox-title { font-size: 125%; font-weight: bold; text-align: center; border-radius: 2px 2px; background-image:url(); } | .mw-parser-output .infobox-above, .mw-parser-output .infobox-title { font-size: 125%; font-weight: bold; text-align: center; border-radius: 2px 2px; background-image: url(/images/d/db/Clancy_Letter_Background1.png); background-size: cover; text-shadow: 0 0 10px #000; } | ||
#n-Discord a { color: #fff !important; font-weight: bold; border-radius: 4px; border: 1px solid #4c57d0; background-color: #5865f2; display: block; position: relative; padding: 4px 4px 5px calc(17px + 6.5px * 2); box-shadow: 0 2px 3px rgba(0,0,0,0.1); transition: 0.2s; } | #n-Discord a { color: #fff !important; font-weight: bold; border-radius: 4px; border: 1px solid #4c57d0; background-color: #5865f2; display: block; position: relative; padding: 4px 4px 5px calc(17px + 6.5px * 2); box-shadow: 0 2px 3px rgba(0,0,0,0.1); transition: 0.2s; } | ||
.vector-legacy-sidebar .vector-menu-portal .vector-menu-heading { display: block; color: #44180D; margin: 0.5em 0 0 0.66666667em; border: 0; padding: 0.25em 0; font-size: 0.80em; font-weight: bold; cursor: default; 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; } | .vector-legacy-sidebar .vector-menu-portal .vector-menu-heading { display: block; color: #44180D; margin: 0.5em 0 0 0.66666667em; border: 0; padding: 0.25em 0; font-size: 0.80em; font-weight: bold; cursor: default; 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; font-family: 'sans-serif', sans-serif; } | ||
.vectorTabs span a { background-color: #B0E0E6; } | .vectorTabs span a { background-color: #B0E0E6; } | ||
Line 89: | Line 1,544: | ||
element.style { width: 60%; background-color: ; background-image: url(/images/1/14/Scaled_transparent.png); } | element.style { width: 60%; background-color: ; background-image: url(/images/1/14/Scaled_transparent.png); } | ||
.toc, .toccolours { border-radius: 8px 8px; border: 3px solid # | .toc, .toccolours { border-radius: 8px 8px; border: 3px solid #D33328; background-color: #EFE9DE; } | ||
#p-tb { background-color: # | #p-tb { background-color: #FFD800; border-radius: 0px 0px 10px 10px; border: 3px solid #722215; border-top:hidden; background-image:url(/images/3/38/Sidebar2.png); font-family: 'MyCustomFont2', sans-serif; } | ||
#p-personal ul { background: # | #p-personal ul { background: #DDD7CC; border-radius: 3px 3px; border: 2px solid #D33328; padding:0.1em 1.5em; height: 23px; } | ||
#mw-head { background-image: url(/images/4/42/Heared-3_%283%29.gif);} | #mw-head { background-image: url(/images/4/42/Heared-3_%283%29.gif);} | ||
.vector-menu-tabs-legacy .selected { background: # | .vector-menu-tabs-legacy .selected { background: #DDD7CC } | ||
.vector-menu-checkbox { color: # | .vector-menu-checkbox { | ||
color: #D33328; | |||
cursor: pointer; | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
z-index: 1; | |||
opacity: 0; | |||
width: 100%; | |||
height: 100%; | |||
margin: 0; | |||
padding: 0; | |||
display: none; | |||
} | |||
.mp_header { background-image:url(/images/9/9c/Wikinews_banner_2024.png); background-repeat: no-repeat; background-position: top right; width: 100%;} | .mp_header { background-image:url(/images/9/9c/Wikinews_banner_2024.png); background-repeat: no-repeat; background-position: top right; width: 100%;} | ||
.mw-body { border: | .mw-body { border: 1.5px solid #722215; margin-top: -4px; } | ||
h1, h2 { border-color: #57544a; } | h1, h2 { border-color: #57544a; } | ||
Line 117: | Line 1,585: | ||
.skin-vector .uls-search { border-bottom-color: #7A4D1D; } | .skin-vector .uls-search { border-bottom-color: #7A4D1D; } | ||
.vector-menu-tabs-legacy li { background-image: linear-gradient(to top,# | .vector-menu-tabs-legacy li { background-image: linear-gradient(to top,#DDD7CC 0,#DDD7CC 1px,#C1BBB2 100% ); | ||
.vector-legacy-sidebar .vector-menu-portal .vector-menu-heading { background-image: linear-gradient(to right,rgba(200,204,209,0) 0,# | .vector-legacy-sidebar .vector-menu-portal .vector-menu-heading { background-image: linear-gradient(to right,rgba(200,204,209,0) 0,#D33328 33%,#F7572E 66%,rgba(200,204,209,0) 100%); background-position: center bottom; background-repeat: no-repeat; background-size: 100% 1px; font-weight: bold; } | ||
.vector-menu-tabs, .vector-menu-tabs a, #mw-head .vector-menu-dropdown .vector-menu-heading { background-image: linear-gradient(to bottom,rgba(68,137,145,0) 0,# | .vector-menu-tabs, .vector-menu-tabs a, #mw-head .vector-menu-dropdown .vector-menu-heading { background-image: linear-gradient(to bottom,rgba(68,137,145,0) 0,#D33328 100%); border: 4px solid #722215; background-repeat: no-repeat; background-size: 1px 100%; border: 4px solid #D33328; margin-top: -4px; } | ||
.imagelink_telegram a { | .imagelink_telegram a { | ||
Line 153: | Line 1,621: | ||
.hoverbox:hover .hoveritem { display:inline-block; } | .hoverbox:hover .hoveritem { display:inline-block; } | ||
.hoverbox:hover .hoveritem.selected { display:none; } | .hoverbox:hover .hoveritem.selected { display:none; } | ||
--theme-background-color: #2c56a0; |
Latest revision as of 04:32, 4 September 2024
.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: 400px;
}
.stripe {
width: 5px;
height: 50%;
background-color: black;
}
.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: black;
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;
}
pre, code, .mw-code {
background-color: transparent;
color: #000;
border: 1px solid transparent;
}
@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-color: #007bff;
color: white;
border: none;
border-radius: 4px;
padding: 10px 20px;
cursor: pointer;
}
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; /* Разрешает перенос текста на новую строку */
}
.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; /* Устанавливаем высоту строки, чтобы минимизировать отступы */
}
.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%);
}
.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;
}
.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 0.3em 0.4em;
align-items: flex-start;
gap: 0.25em;
height: 145px;
}
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); /* Добавляет подсветку при наведении */
}
.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 #999; /* Цвет и толщина рамки */
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 #999; /* Цвет и толщина рамки */
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 #999; /* Цвет и толщина рамки */
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; }
.setlist-table {
--setlist-bg-color: #efe9de; /* Определяем переменную для цвета */
background-color: var(--setlist-bg-color);
border: 3px solid #c14424;
text-align: left;
margin: 1em 0;
border-collapse: collapse;
}
.custom-table tbody .cell-red { background-color: #ffdddd; }
.custom-table {
background-color: transparent;
border: 2px solid #D33328;
border-collapse: collapse;
text-align: center;
}
.disc-table { border: 2px solid #D33328; }
.custom-table .cell-der { background-color: #CC531E; }
.custom-table th, .custom-table td { border: 1px solid #D33328; padding: 3px; }
.custom-table .header-red { background-image:url(/images/d/db/Clancy_Letter_Background1.png); background-size: cover; color: white; text-align: center; }
.custom-table .header-blue { background-image:url(/images/0/0a/Whiteback.jpg); background-size: cover; color: white; text-align: center; }
.custom-table .cell-red { background-color: #FFE281; }
.custom-table .cell-box { background-image:url(/images/6/64/Boxm.png); }
.custom-table .cell-blue { background-color: #CEC9C2; border: 1px solid #C14424; height: 2px; }
.custom-table .cell-disco { text-align:center; border-color:#EFBB7F; background-color: #EFE9DE; }
.custom-table .cell-disco2 { background-color:#D87C43; text-align:center; border-color:#EFBB7F; }
.custom-table .cell-green { background-color: #EFE9DE; border: 1px solid #C14424; height: 2px; }
.custom-table .header-grass { background-color: #EFE9DE; }
#footer-info li { line-height: 1.4; background: #DDD7CC; margin-bottom: 4px; text-indent: 5px; }
#footer-places li { float: left; margin-right: 1em; line-height: 2; background: #DDD7CC; text-indent: 5px; text-indent-right: 5px; }
.background-table { background-image: url(/images/3/3b/Clancy_background.png); background-size: cover;}
.vector-user-menu-legacy li { font-size: 0.75em; float: left; margin-left: 0.75em; padding-top: 2.6em; line-height: 1.16666667; }
.client-js .sortable:not(.jquery-tablesorter) > * > tr:first-child > th:not(.unsortable), .jquery-tablesorter th.headerSort { background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_both.svg?0e440); cursor: pointer; background-repeat: no-repeat; background-position: center right; padding-right: 21px; background-size: auto; }
.table-bg { background-image:url(/images/0/0a/Whiteback.jpg); background-size: cover; background-repeat: no-repeat; }
.border-image-container { border-image-source: linear-gradient(to right, #ff8c00, #ffd700); }
.wikitable { background-color: #EFE9DE; }
.gradient-underline { display: inline-block; position: relative; }
.gradient-underline::after { content: ''; position: absolute; bottom: -3px; left: 0; width: 100%; height: 5px; background-image: linear-gradient(to right, #ff0000, #00ff00); background-size: 100% 100%; z-index: -1; }
.my-template.theme-dark { /* Styles specific to the "dark" theme */ }
.rounded-table { border-collapse: collapse; border-radius: 10px; overflow: hidden; }
.wikitable.transparent { background-color: transparent; border: none; }
/* Change the background color of the bottom and left of eath page, up to behind the logo: */
body { background: #D02019 url(/images/a/a9/Dema_beck_clancy.png) no-repeat; font-family: 'Roboto', Arial, sans-serif; position: relative; }
#content .client-darkmode { background: #AA3C14; font-family: "Roboto"; }
.theme-dark .infobox { background-color: #333; color: #fff; border: 1px solid #666; }
/* background color of the content and title of pages */
#content { background-color: #DDD7CC; font-family: 'MyCustomFont2', sans-serif; }
/* This is from the background color of the title of the Navigation menu in the left column */
#p-navigation { background-color: #FFD800; border-radius: 10px 10px 0px 0px; border: 3px solid #722215; border-bottom:hidden; background-image:url(/images/9/97/Sidebar.png); font-family: 'MyCustomFont3', sans-serif; }
/* This is from the background color of the title of the Twenty one pilots menu in the left column */
#p-Twenty_one_pilots { background-color: #FFD800; border: 3px solid #722215; border-bottom:hidden; border-top:hidden; background-image:url(/images/3/38/Sidebar2.png); font-family: 'MyCustomFont2', sans-serif; }
/* This is from the background color of the title of the Twenty one pilots menu in the left column */
#p-Tyler_Joseph { background-color: #FFD800; border: 3px solid #722215; border-bottom:hidden; border-top:hidden; background-image:url(/images/3/38/Sidebar2.png); font-family: 'MyCustomFont2', sans-serif; }
/* This is from the background color of the title of the Members menu in the left column */
#p-Members { background-color: #FFD800; border: 3px solid #722215; border-bottom:hidden; border-top:hidden; background-image:url(/images/3/38/Sidebar2.png); font-family: 'MyCustomFont2', sans-serif; }
.background-table { background-image: url(/images/3/3b/Clancy_background.png); background-size: cover;}
.wikitable > tr > th, .wikitable > * > tr > th { background:#}
#catlinks { background:#CEC9C2; border: 1px solid #D33328; }
.mw-parser-output .tracklist th[scope="col"] { background-color: #ef5e29; }
.wikitable > tr > th, .wikitable > * > tr > th { background-color: #D33328; border: 1px solid #7b1325; background-image: url(/images/d/db/Clancy_Letter_Background1.png); background-size: cover; color: #fff; }
.wikitable > tr > th, .wikitable > * > tr > th { background-color: #eaecf0; text-align: center; color: #fff; }
.wikitable > tr > th, .wikitable > * > tr > th { background-color: #D33328; border: 1px solid #7b1325; background-image: url(/images/d/db/Clancy_Letter_Background1.png); }
.wikitable > tr > th, .wikitable > tr > td, .wikitable > * > tr > th, .wikitable > * > tr > td { background: #EFE9DE; }
.wikitable > tr > th, .wikitable > * > tr > th { background-color: #D33328; border: 1px solid #7b1325; background-size: cover; background-image: url(/images/d/db/Clancy_Letter_Background1.png); }
.wikitable > tr > th, .wikitable > tr > td, .wikitable > * > tr > th, .wikitable > * > tr > td { border: 1px solid #7b1325; }
.catlinks li { display: inline-block; line-height: 1.25em; border-left: 1px solid #D33328; margin: 0.125em 0; padding: 0 0.5em; }
.vector-menu-tabs, .vector-menu-tabs a, #mw-head .vector-menu-dropdown .vector-menu-heading { background-image: linear-gradient(to bottom,rgba(167,215,249,0) 0,#722215 100%); background-repeat: no-repeat; background-size: 1px 100%; }
:not(:checked) > .vector-menu-checkbox { background:#EFB737; display: block; }
li.gallerybox div.thumb { border: hidden; background-color: #D33328; text-align:center; }
.mw-parser-output .tracklist-total-length th>span { background-color: #d8663d; }
.mw-parser-output .tracklist-total-length td { background-color: #d8663d; }
.vector-menu-dropdown { background-image: linear-gradient(to bottom,rgba(167,215,249,0) 0,#722215 100%); }
.c-actions { margin: 10px 5px 0px 0px; }
.c-item { background-color: #EFE9DE; border:2px solid #D33328; color: #722215; margin: 10px 0px 15px 0px; }
.c-avatar img { padding: 3px; border: 1px solid #dcdcdc; background-color: #bc1313; margin: 6px 0px 0px 6px; }
.c-score { right: 10px; }
.c-container { margin: 0px 0px 0px 75px; }
.c-user { margin: 1px 0px 6px 0px; }
.c-time { color: #af1414; }
.f-message { background-color: #FFF8ED; width: 445px; }
.c-comment { text-indent: 5px; word-wrap: break-word; word-break: break-word;}
.user-section-heading { margin: 0 0 23px 0; }
#profile-title { margin: 15px 20px 29px -6px; }
#profile-image img { margin: 15px 0px 0px 0px; }
body #p-personal li#p-themes > span { position: relative; top: 24px; left: -101px; }
.vector-user-menu-legacy li { position: relative; top: -26px; right: -10px; }
.mwe-popups .mwe-popups-extract:after, .mwe-popups .mwe-popups-extract blockquote:after { content: ' '; position: absolute; bottom: 0; width: 25%; height: 20px; background-color: #EFE9DE; pointer-events: none; }
figure[typeof~='mw:File/Thumb'], figure[typeof~='mw:File/Frame'] { background-color: #D35232; border-color: #9E3A19; }
.mw-content-ltr figure[typeof~='mw:File/Thumb'] > figcaption, .mw-content-ltr figure[typeof~='mw:File/Frame'] > figcaption { background-color: #D02019; border-color: #9E3A19; color: #fff }
.mwe-popups .mwe-popups-extract[dir='ltr']:after { right: 0; background-image: linear-gradient(to right,rgba(255,255,255,0),#EFE9DE 50%); }
.wikitable > tr > th, .wikitable > tr > td, .wikitable > * > tr > th, .wikitable > * > tr > td { background-color: #; border: 1px solid #D33328; padding: 0.2em 0.4em; }
input[type="checkbox" i] { color: #B0E0E6; }
.mwe-popups .mwe-popups-container { background: #EFE9DE; }
.mw-parser-output .infobox-above, .mw-parser-output .infobox-title { font-size: 125%; font-weight: bold; text-align: center; border-radius: 2px 2px; background-image: url(/images/d/db/Clancy_Letter_Background1.png); background-size: cover; text-shadow: 0 0 10px #000; }
#n-Discord a { color: #fff !important; font-weight: bold; border-radius: 4px; border: 1px solid #4c57d0; background-color: #5865f2; display: block; position: relative; padding: 4px 4px 5px calc(17px + 6.5px * 2); box-shadow: 0 2px 3px rgba(0,0,0,0.1); transition: 0.2s; }
.vector-legacy-sidebar .vector-menu-portal .vector-menu-heading { display: block; color: #44180D; margin: 0.5em 0 0 0.66666667em; border: 0; padding: 0.25em 0; font-size: 0.80em; font-weight: bold; cursor: default; 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; font-family: 'sans-serif', sans-serif; }
.vectorTabs span a { background-color: #B0E0E6; }
#p-logo { ; }
.featurebox-heading { background-image: url(/images/1/14/Scaled_transparent.png); color: #fff; }
element.style { width: 60%; background-color: ; background-image: url(/images/1/14/Scaled_transparent.png); }
.toc, .toccolours { border-radius: 8px 8px; border: 3px solid #D33328; background-color: #EFE9DE; }
#p-tb { background-color: #FFD800; border-radius: 0px 0px 10px 10px; border: 3px solid #722215; border-top:hidden; background-image:url(/images/3/38/Sidebar2.png); font-family: 'MyCustomFont2', sans-serif; }
#p-personal ul { background: #DDD7CC; border-radius: 3px 3px; border: 2px solid #D33328; padding:0.1em 1.5em; height: 23px; }
#mw-head { background-image: url(/images/4/42/Heared-3_%283%29.gif);}
.vector-menu-tabs-legacy .selected { background: #DDD7CC }
.vector-menu-checkbox {
color: #D33328;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
z-index: 1;
opacity: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
display: none;
}
.mp_header { background-image:url(/images/9/9c/Wikinews_banner_2024.png); background-repeat: no-repeat; background-position: top right; width: 100%;}
.mw-body { border: 1.5px solid #722215; margin-top: -4px; }
h1, h2 { border-color: #57544a; }
.vector-menu-dropdown .mw-list-item a:not(.mw-ui-icon) { background: #F4FFFF; }
img[Attributes Style] { height: 168px; }
.grid * { background: #E0C9AF; }
.vector-search-box-input { color: #312400; border: 1px solid #6D2614; }
.skin-vector .uls-search { border-bottom-color: #7A4D1D; }
.vector-menu-tabs-legacy li { background-image: linear-gradient(to top,#DDD7CC 0,#DDD7CC 1px,#C1BBB2 100% );
.vector-legacy-sidebar .vector-menu-portal .vector-menu-heading { background-image: linear-gradient(to right,rgba(200,204,209,0) 0,#D33328 33%,#F7572E 66%,rgba(200,204,209,0) 100%); background-position: center bottom; background-repeat: no-repeat; background-size: 100% 1px; font-weight: bold; }
.vector-menu-tabs, .vector-menu-tabs a, #mw-head .vector-menu-dropdown .vector-menu-heading { background-image: linear-gradient(to bottom,rgba(68,137,145,0) 0,#D33328 100%); border: 4px solid #722215; background-repeat: no-repeat; background-size: 1px 100%; border: 4px solid #D33328; margin-top: -4px; }
.imagelink_telegram a {
width:100px;
height:100px;
display:block;
text-decoration:none;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Telegram_logo.svg/2048px-Telegram_logo.svg.png")
body.page-Main_Page h1.firstHeading { display:none; }
#title-para { background-color: #F0FFFF; }
.hoverimage:hover {
transition: 0.2s ease;
transform: scale(1.1);
}
#mw-content-text .featurebox .featurebox-heading{
background-image:url("https://tfwiki.net/mediawiki/images2/2/26/Allsparkstrip_transparent.png");
}
.hover-highlight:hover {
background-color: #ffffcc; /* Any desired color */
}
/* Hover Box for switching the visibility of the selected item */
.hoverbox { display:inline-block; padding:0em; }
.hoverbox .hoveritem { display:none; margin:0em; padding:0em; }
.hoverbox .hoveritem.selected { display:inline-block; }
.hoverbox:hover .hoveritem { display:inline-block; }
.hoverbox:hover .hoveritem.selected { display:none; }
--theme-background-color: #2c56a0;