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 128: | Line 128: | ||
li.custom2-adaptive-item:hover img { | li.custom2-adaptive-item:hover img { | ||
filter: none; /* Убираем фильтр затемнения */ | filter: none; /* Убираем фильтр затемнения */ | ||
} | |||
/* Стиль для элементов списка с адаптивным размером */ | |||
li.custom-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; /* Необходим для позиционирования псевдоэлемента */ | |||
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; /* Сделать текст видимым */ | |||
} | } | ||