|
|
| Рядок 923: |
Рядок 923: |
| height: 242px; | | height: 242px; |
| width: 100%; | | width: 100%; |
| border: 1px solid rgba(255, 255, 255, 0.1);
| | border-radius: 0px; |
| border-radius: 12px; | |
| overflow: hidden; | | overflow: hidden; |
| position: relative; | | position: relative; |
| Рядок 937: |
Рядок 936: |
|
| |
|
| .mcc-champion-card { | | .mcc-champion-card { |
| /* Змінюємо властивості оригінальної картки */
| | height: 242px; |
| height: 242px;
| | width: 100%; |
| width: 100%;
| | border: 1px solid yellow; |
|
| | border-radius: 0px; |
| /* Прибираємо стандартний 'border' */
| | overflow: hidden; |
| border: none;
| | position: relative; |
| border-radius: 12px;
| | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); |
| overflow: hidden;
| | background-color: #333; |
| position: relative;
| | transition: box-shadow 0.3s ease-in-out; |
|
| |
| /* Внутрішня картка (background-color) буде меншою за псевдоелемент */
| |
| background-color: #333;
| |
|
| |
| /* Тінь та перехід залишаються */
| |
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
| |
| 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); /* Додаємо золоте світіння */
| |
| } | | } |
|
| |
|
| /* Ефект наведення на картку */
| |
| .mcc-hero-card:hover {
| |
| box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
| |
| }
| |
|
| |
|
| .mcc-champion-card:hover { | | .mcc-champion-card:hover { |
| Рядок 1057: |
Рядок 1016: |
| } | | } |
|
| |
|
| /* --- ГРАДІЄНТ --- */
| |
|
| |
|
| .mcc-hero-link::after { | | .mcc-hero-link::after { |
| Рядок 1071: |
Рядок 1029: |
| } | | } |
|
| |
|
| /* --- ІНФОРМАЦІЙНИЙ БЛОК (Нікнейм та Дата) --- */
| |
|
| |
|
| .mcc-hero-info { | | .mcc-hero-info { |
| Рядок 1097: |
Рядок 1054: |
| line-height: 1.2; | | line-height: 1.2; |
| text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); | | text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); |
| }
| |
|
| |
| /* ==================================================== */
| |
| /* СТИЛІ СТАНУ: БЕЗ СТОРІНКИ (.no-page-card) */
| |
| /* Використовується, коли для героя немає сторінки */
| |
| /* ==================================================== */
| |
|
| |
| .mcc-hero-card.no-page-card .hero-image-wiki img {
| |
| filter: grayscale(100%); /* Чорно-біле */
| |
| opacity: 0.7; /* Приглушене */
| |
| }
| |
|
| |
| .mcc-hero-card.no-page-card .mcc-hero-link {
| |
| cursor: default; /* Змінюємо курсор */
| |
| }
| |
|
| |
| /* Скасування анімації збільшення при наведенні для цього стану */
| |
| .mcc-hero-card.no-page-card:hover .hero-image-wiki img {
| |
| transform: scale(1);
| |
| }
| |
|
| |
| /* Скасування анімації тіні при наведенні для цього стану */
| |
| .mcc-hero-card.no-page-card:hover {
| |
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
| |
| }
| |
|
| |
| /* ==================================================== */
| |
| /* СТИЛІ СТАНУ: ЧЕМПІОН (.champion-card) */
| |
| /* ==================================================== */
| |
|
| |
| /* Застосовується до .mcc-hero-card, якщо він також має клас .champion-card */
| |
| .mcc-hero-card.champion-card {
| |
| border: 3px solid #FFD700; /* Золота рамка */
| |
| border-radius: 12px;
| |
| box-shadow: 0 0 15px rgba(255, 215, 0, 0.5); /* Золоте світіння */
| |
| }
| |
|
| |
| /* Збільшення зображення чемпіона при наведенні (трохи більше) */
| |
| .mcc-hero-card.champion-card:hover .hero-image-wiki img {
| |
| transform: scale(1.15);
| |
| }
| |
|
| |
| /* Більш виражене світіння при наведенні на картку чемпіона */
| |
| .mcc-hero-card.champion-card:hover {
| |
| box-shadow: 0 0 25px rgba(255, 215, 0, 0.9);
| |
| } | | } |