8,957
edits
MediaWiki:Theme-dark.css: Difference between revisions
Jump to navigation
Jump to search
no edit summary
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
li.explore-adaptive-item { | |||
background-color: #3F3F3F; /* Цвет фона */ | |||
border: 2px solid #A2A9B1; /* Цвет и толщина рамки */ | |||
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: #3F3F3F; /* Цвет фона */ | |||
border: 2px solid #A2A9B1; /* Цвет и толщина рамки */ | |||
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; /* Убираем фильтр затемнения */ | |||
} | |||
.themeable-element { background-color: #B2B2B2; } | .themeable-element { background-color: #B2B2B2; } | ||