9,036
edits
MediaWiki:Common.css: Difference between revisions
Jump to navigation
Jump to search
no edit summary
No edit summary |
No edit summary |
||
| Line 2: | Line 2: | ||
li.explore-adaptive-item { | li.explore-adaptive-item { | ||
background-color: # | background-color: #D02019; /* Цвет фона */ | ||
border: 2px solid # | border: 2px solid #7F1410; /* Цвет и толщина рамки */ | ||
border-radius: 10px; /* Закругленные углы */ | border-radius: 10px; /* Закругленные углы */ | ||
padding: 5px; /* Внутренние отступы */ | padding: 5px; /* Внутренние отступы */ | ||
margin-bottom: | margin-bottom: 5px; /* Отступ между элементами списка */ | ||
list-style-type: none; /* Убираем стандартные маркеры списка */ | list-style-type: none; /* Убираем стандартные маркеры списка */ | ||
display: inline-block; /* Для уменьшения ширины до содержимого */ | display: inline-block; /* Для уменьшения ширины до содержимого */ | ||
| Line 16: | Line 16: | ||
position: relative; /* Необходим для позиционирования псевдоэлемента */ | position: relative; /* Необходим для позиционирования псевдоэлемента */ | ||
color: #FFFFFF; /* Изначальный цвет текста белый */ | color: #FFFFFF; /* Изначальный цвет текста белый */ | ||
transition: background-color 0.4s ease, color 0.4s ease | transition: background-color 0.4s ease, color 0.4s ease, background-image 0.4s ease; /* Плавный переход для фона, цвета текста и картинки */ | ||
} | } | ||
li.explore-adaptive-item:hover { | li.explore-adaptive-item:hover { | ||
background-color: | background-color: rgba(255, 215, 0, 0.7); /* Полупрозрачный желтый цвет фона при наведении */ | ||
border-color: #FFC107; /* Ярче цвет рамки при наведении */ | border-color: #FFC107; /* Ярче цвет рамки при наведении */ | ||
color: #D02019; /* Цвет текста при наведении */ | color: #D02019; /* Цвет текста при наведении */ | ||
background-image: url('/images/1/1e/Clancy_Gif_Intro.gif'); /* Фоновая картинка появляется при наведении */ | |||
background-size: cover; /* Масштабируем картинку чтобы покрывала весь элемент */ | |||
background-repeat: no-repeat; /* Отключаем повтор картинки */ | |||
background-position: center; /* Центрируем картинку */ | |||
} | } | ||