8,960
edits
MediaWiki:Common.css: Difference between revisions
Jump to navigation
Jump to search
no edit summary
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
/* Стиль для элементов списка с адаптивным размером */ | |||
li.custom2-adaptive-item { | |||
background-color: #DDD7CC; /* Цвет фона */ | |||
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 */ | /* CSS placed here will be applied to all skins */ | ||