Mafia Closed Circle

MediaWiki:Common.css: відмінності між версіями

Повідомлення Обговорення

MediaWiki:Common.css (переглянути вихідний код)

Версія за 20:20, 21 листопада 2025

1765 байтів вилучено ,  21 листопад
нема опису редагування
Немає опису редагування
Немає опису редагування
Рядок 903: Рядок 903:


/* ==================================================== */
/* ==================================================== */
/* ОНОВЛЕНІ СТИЛІ ДЛЯ КАРТОК ГЕРОЇВ (ВИКОРИСТОВУЄМО ВБУДОВАНЕ IMG) */
/* БАЗОВІ СТИЛІ КАРТОК ГЕРОЇВ */
/* ==================================================== */
 
/* ==================================================== */
/* ОНОВЛЕНІ СТИЛІ ДЛЯ КАРТОК ГЕРОЇВ (ЗІ СКЕЙЛОМ ЗОБРАЖЕННЯ ТА ПОКРАЩЕНИМ ГРАДІЄНТОМ) */
/* ==================================================== */
/* ==================================================== */


Рядок 926: Рядок 922:
/* Стилі картки - зовнішній контейнер */
/* Стилі картки - зовнішній контейнер */
.mcc-hero-card {
.mcc-hero-card {
   height: 200px; /* Ваша нова висота */
   height: 200px;  
   width: 100%;  
   width: 100%;  
   border: 1px solid rgba(255,255,255,0.1);
   border: 1px solid rgba(255,255,255,0.1);
   border-radius: 12px; /* Додаємо border-radius, якщо він був */
   border-radius: 12px;
   overflow: hidden;  
   overflow: hidden;  
   position: relative;
   position: relative;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);  
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);  
   background-color: #333; /* Загальний фон на випадок, якщо зображення не завантажилось */
   background-color: #333;  
   transition: box-shadow 0.3s ease-in-out; /* Анімація тільки тіні для картки */
   transition: box-shadow 0.3s ease-in-out;  
}
}


Рядок 945: Рядок 941:
     text-decoration: none;
     text-decoration: none;
     color: white;
     color: white;
     z-index: 2; /* Щоб посилання було клікабельним */
     z-index: 2;  
     overflow: hidden; /* Важливо для обрізання зображення при масштабуванні */
     overflow: hidden; /* Важливо для обрізання зображення при масштабуванні */
}
}
Рядок 953: Рядок 949:
/* ---------------------------------------------------- */
/* ---------------------------------------------------- */


/* Цільові елементи, згенеровані MediaWiki для зображення */
.mcc-hero-card .hero-image-wiki {
.mcc-hero-card .hero-image-wiki {
     position: absolute;
     position: absolute;
Рядок 964: Рядок 959:
      
      
     /* АНІМАЦІЯ СКЕЙЛА ЗОБРАЖЕННЯ! */
     /* АНІМАЦІЯ СКЕЙЛА ЗОБРАЖЕННЯ! */
     transform: scale(1); /* Початковий розмір */
     transform: scale(1);  
     transition: transform 0.3s ease-in-out; /* Анімація масштабування */
     transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
}


/* Анімація при наведенні: збільшення зображення */
/* Анімація при наведенні: стандартне збільшення зображення */
.mcc-hero-card:hover .hero-image-wiki {
.mcc-hero-card:hover .hero-image-wiki {
   transform: scale(1.1); /* Збільшуємо зображення на 10% */
   transform: scale(1.1);  
}
}


/* Градієнт (Напівпрозорий градієнт для читабельності тексту) */
/* Градієнт (Напівпрозорий градієнт для читабельності тексту) */
/* Змінено для кращої читабельності та плавного переходу */
.mcc-hero-link::after {
.mcc-hero-link::after {
     content: '';
     content: '';
Рядок 982: Рядок 976:
     width: 100%;
     width: 100%;
     height: 100%;
     height: 100%;
     /* Новий градієнт: починається прозорим, переходить у 60% чорний знизу */
     /* Градієнт: 70% чорного знизу, плавно до прозорого на 50% висоти */
     background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.0) 50%);
     background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.0) 50%);
     z-index: 1.5; /* Над зображенням, але під текстом */
     z-index: 1.5;  
    transition: background 0.3s ease-in-out; /* Анімація градієнта */
}
}


/* Інформаційний блок */
/* Інформаційний блок */
Рядок 997: Рядок 989:
   padding: 0 5px;
   padding: 0 5px;
   box-sizing: border-box;
   box-sizing: border-box;
   z-index: 3; /* Вище, ніж градієнт */
   z-index: 3;  
}
}


Рядок 1003: Рядок 995:
   font-size: 14px;
   font-size: 14px;
   color: white;
   color: white;
   font-weight: bold; /* Додав bold для більшої читабельності */
   font-weight: bold;  
   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);  
}
}


Рядок 1013: Рядок 1005:
   opacity: 0.9;
   opacity: 0.9;
   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);  
}
}


/* При наведенні на картку можна змінити тінь, але рамка сама не масштабується */
/* При наведенні на картку */
.mcc-hero-card:hover {
.mcc-hero-card:hover {
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); /* Більш виражена тінь при наведенні */
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);  
}
}


/* 1. Стиль для no page: Чорно-біле зображення */
/* ==================================================== */
/* СТИЛІ ДЛЯ ШАБЛОНУ HeroCard/БезСторінки (КЛАС .no-page-card) */
/* ==================================================== */
 
.mcc-hero-card.no-page-card .hero-image-wiki {
.mcc-hero-card.no-page-card .hero-image-wiki {
     filter: grayscale(100%); /* Робить зображення чорно-білим */
     filter: grayscale(100%); /* Робить зображення чорно-білим */
     opacity: 0.7; /* Трохи зменшуємо прозорість для підкреслення */
     opacity: 0.7;  
}
}


/* 2. Стиль для no page: Прибираємо типовий курсор посилання */
.mcc-hero-card.no-page-card .mcc-hero-link {
.mcc-hero-card.no-page-card .mcc-hero-link {
     cursor: default; /* Робимо курсор звичайним, щоб візуально прибрати посилання */
     cursor: default; /* Прибираємо курсор посилання */
}
 
/* Відміна анімації масштабування для неклікабельних карток */
.mcc-hero-card.no-page-card:hover .hero-image-wiki {
    transform: scale(1); /* Зображення не збільшується */
}
}


/* 3. Опціонально: Прибираємо тінь при наведенні для no page */
.mcc-hero-card.no-page-card:hover {
.mcc-hero-card.no-page-card:hover {
    transform: none; /* Відміняємо анімацію збільшення картки, якщо вона є */
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Залишаємо базову тінь */
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Залишаємо стандартну тінь */
}
}


.mcc-hero-card.no-page-card:hover .hero-image-wiki {
/* ==================================================== */
    transform: scale(1); /* Відміняємо анімацію масштабування зображення */
/* СТИЛІ ДЛЯ ШАБЛОНУ HeroCard/Чемпіон (КЛАС .champion-card) */
}
/* ==================================================== */


/* 1. Стиль для Champion: Інша рамка (наприклад, золота/фіолетова) */
.mcc-hero-card .champion-card {
.mcc-hero-card .champion-card {
     border: 3px solid #FFD700; /* Золота рамка навколо посилання */
     /* Золота рамка та світіння навколо посилання */
    border: 3px solid #FFD700;
     border-radius: 12px;
     border-radius: 12px;
     box-shadow: 0 0 15px rgba(255, 215, 0, 0.5); /* Світіння */
     box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);  
}
}


/* 2. Стиль для Champion: Краща анімація (більше збільшення при наведенні) */
/* Посилене масштабування при наведенні для чемпіонів */
.mcc-hero-card:hover .champion-card .hero-image-wiki {
.mcc-hero-card:hover .champion-card .hero-image-wiki {
     transform: scale(1.15); /* Більше масштабування, ніж стандартне (1.1) */
     transform: scale(1.15); /* Більше, ніж стандартне 1.1 */
}
}


/* 3. Стиль для Champion: Краща анімація (посилене світіння) */
/* Посилене світіння при наведенні для чемпіонів */
.mcc-hero-card:hover .champion-card {
.mcc-hero-card:hover .champion-card {
     box-shadow: 0 0 25px rgba(255, 215, 0, 0.9); /* Яскравіше світіння */
     box-shadow: 0 0 25px rgba(255, 215, 0, 0.9);  
}
}
Отримано з https://mafiacc.site/index.php/Спеціальна:Мобільна_різниця_версій/3600