5494
редагування
MediaWiki:Common.css: відмінності між версіями
нема опису редагування
Admin (обговорення | внесок) Немає опису редагування Мітка: Скасовано |
Admin (обговорення | внесок) Немає опису редагування Мітка: Скасовано |
||
| Рядок 931: | Рядок 931: | ||
transition: box-shadow 0.3s ease-in-out; | transition: box-shadow 0.3s ease-in-out; | ||
} | } | ||
/* ---------------------------------------------------- */ | |||
/* КЛАС КАРТКИ ЧЕМПІОНА (З ГРАДІЄНТНОЮ РАМКОЮ) */ | |||
/* ---------------------------------------------------- */ | |||
.mcc-champion-card { | .mcc-champion-card { | ||
/* Змінюємо властивості оригінальної картки */ | |||
height: 242px; | height: 242px; | ||
width: 100%; | width: 100%; | ||
border: | |||
/* Прибираємо стандартний 'border' */ | |||
border: none; | |||
border-radius: 12px; | border-radius: 12px; | ||
overflow: hidden; | overflow: hidden; | ||
position: relative; | position: relative; | ||
/* Внутрішня картка (background-color) буде меншою за псевдоелемент */ | |||
background-color: #333; | |||
/* Тінь та перехід залишаються */ | |||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); | ||
transition: box-shadow 0.3s ease-in-out; | transition: box-shadow 0.3s ease-in-out; | ||
} | |||
/* 1. Створюємо Псевдоелемент для Рамки */ | |||
/* Він буде лежати під основною карткою і матиме градієнт */ | |||
.mcc-champion-card::before { | |||
content: ''; | |||
position: absolute; | |||
top: -2px; /* Трохи виходить за межі контейнера */ | |||
left: -2px; /* Трохи виходить за межі контейнера */ | |||
right: -2px; /* Трохи виходить за межі контейнера */ | |||
bottom: -2px; /* Трохи виходить за межі контейнера */ | |||
z-index: -1; /* Відправляємо його під основний контент картки */ | |||
/* Радіус повинен відповідати основній картці */ | |||
border-radius: 14px; /* Трохи більший, ніж 12px, для візуального ефекту */ | |||
/* ЗОЛОТИЙ ГРАДІЄНТ (Можна налаштувати за бажанням) */ | |||
background: linear-gradient( | |||
45deg, | |||
#FFD700 0%, /* Золото */ | |||
#FFFFE0 30%, /* Світло-жовтий */ | |||
#FFD700 70%, /* Золото */ | |||
#B8860B 100% /* Темне золото/Бронза */ | |||
); | |||
} | |||
/* 2. Ефект наведення */ | |||
.mcc-champion-card:hover { | |||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6), 0 0 15px rgba(255, 215, 0, 0.7); /* Додаємо золоте світіння */ | |||
} | } | ||