MediaWiki:Common.css
Увага: Після публікування слід очистити кеш браузера, щоб побачити зміни.
- Firefox / Safari: тримайте Shift, коли натискаєте Оновити, або натисніть Ctrl-F5 чи Ctrl-Shift-R (⌘-R на Apple Mac)
- Google Chrome: натисніть Ctrl-Shift-R (⌘-Shift-R на Apple Mac)
- Edge: тримайте Ctrl, коли натискаєте Оновити, або натисніть Ctrl-F5.
/* ── Заголовок сторінки ── */
#firstHeading {
font-size: clamp(28px, 4vw, 48px);
}
/* ── Бокове меню ── */
#mw-panel {
font-size: clamp(14px, 1.2vw, 18px);
}
/* ── Прибираємо обмеження Vector ── */
body.skin-vector-2022 .mw-page-container-inner,
body.skin-vector .mw-content-container,
body.skin-vector .vector-body,
body.skin-vector #bodyContent {
max-width: none !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
body.skin-vector-2022 .mw-body,
body.skin-vector-2022 .mw-body-content {
max-width: none !important;
margin: 0 !important;
}
/* ════════════════════════════════════
ПРИВІТАННЯ + СТАТИСТИКА
═══════════════════════════════════════ */
.welcome-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
padding: 40px 5vw 40px;
box-sizing: border-box;
width: 100%;
}
.welcome-text {
flex: 1;
text-align: center;
/* Зміщуємо центр тексту компенсуючи ширину панелі статистики */
transform: translateX(-50px);
}
.welcome-subtitle {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: 1.45rem;
font-weight: 400;
color: #444;
letter-spacing: 0.6px;
margin-bottom: 10px;
opacity: 0.92;
}
.welcome-title {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: 2.45rem;
font-weight: 700;
line-height: 1.18;
color: #003d82;
letter-spacing: -0.3px;
margin: 0;
}
/* ── Панель статистики (справа від привітання) ── */
.stats-panel {
width: 260px;
flex-shrink: 0;
background: white;
border-radius: 16px;
border: 1px solid rgba(0,61,130,0.08);
box-shadow: 0 6px 24px rgba(0,0,0,0.07);
overflow: hidden;
}
.stats-panel-header {
background: rgba(210, 230, 255, 0.35);
color: #003d82;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: 1rem;
font-weight: 700;
padding: 12px 18px;
border-bottom: 1px solid rgba(0,61,130,0.1);
}
.stats-panel-list {
padding: 4px 0;
}
.stats-panel-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 18px;
border-bottom: 1px solid rgba(0,61,130,0.05);
transition: background 0.2s;
}
.stats-panel-item:last-child {
border-bottom: none;
}
.stats-panel-item:hover {
background: rgba(210, 230, 255, 0.2);
}
.stats-panel-label {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: 14px;
color: #555;
}
.stats-panel-number {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: 18px;
font-weight: 800;
color: #003d82;
}
/* ════════════════════════════════════
ЗАГОЛОВОК КАТЕГОРІЙ
═══════════════════════════════════════ */
.section-categories {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: 2.1rem;
font-weight: 700;
color: #003d82;
text-align: center;
margin: 30px 0 30px;
padding: 0;
background: transparent;
box-sizing: border-box;
/* Центруємо тільки над сіткою категорій, ігноруючи праву колонку */
margin-right: calc(360px + 24px);
}
.section-categories::after {
content: '';
display: block;
width: 90px;
height: 4px;
background: #ffd700;
margin: 14px auto 0;
border-radius: 2px;
}
/* ════════════════════════════════════
ОСНОВНИЙ LAYOUT: категорії + права колонка
═══════════════════════════════════════ */
.main-content-layout {
display: flex;
gap: 24px;
align-items: flex-start;
padding: 0 5vw;
margin: 0 0 70px;
box-sizing: border-box;
width: 100%;
}
/* ── Сітка карток — 3 в ряд ── */
/* ── Оновлена розумна сітка ── */
.category-grid-container {
display: grid !important;
/* Це правило каже: ставити стільки колонок по 300px, скільки влізе, але не менше 1 */
grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)) !important;
gap: 25px !important;
flex: 1;
min-width: 0;
width: 100% !important;
justify-content: center !important;
}
/* Картки тепер не будуть розтягуватися більше ніж на 400px, щоб не виглядати гігантськими на мобілці */
.category-card {
max-width: 400px !important;
margin: 0 auto !important;
width: 100% !important;
}
/* ── Права колонка ── */
.right-column {
width: 360px;
min-width: 360px;
flex-shrink: 0;
display: flex;
flex-direction: column;
gap: 20px;
align-self: flex-start;
padding-top: 0;
}
/* ════════════════════════════════════
КАРТКИ КАТЕГОРІЙ
═══════════════════════════════════════ */
.category-card {
background: white;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 6px 24px rgba(0,0,0,0.08);
transition: all 0.28s cubic-bezier(0.165, 0.84, 0.44, 1);
cursor: pointer;
border: 1px solid rgba(0,61,130,0.08);
height: 100%;
display: flex;
flex-direction: column;
}
.category-card:hover {
transform: translateY(-6px);
box-shadow: 0 20px 40px rgba(0,61,130,0.18);
border-color: rgba(0,61,130,0.15);
}
.card-image {
padding: 20px 0 12px;
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
background: white;
}
.card-image img {
width: 230px;
height: 230px;
object-fit: contain;
transition: transform 0.35s ease;
}
.category-card:hover .card-image img {
transform: scale(1.12);
}
.card-title {
font-size: 15px;
font-weight: 600;
color: #003d82;
text-align: center;
padding: 8px 12px 12px;
line-height: 1.4;
flex-grow: 0;
background: rgba(210, 230, 255, 0.15);
border-radius: 10px;
margin: 0 10px 14px;
}
.card-title pre {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: inherit !important;
font-weight: inherit !important;
color: inherit !important;
white-space: normal !important;
}
/* ════════════════════════════════════
ВИПАДКОВІ СТАТТІ
═══════════════════════════════════════ */
.random-articles-panel {
background: white;
border-radius: 16px;
border: 1px solid rgba(0,61,130,0.08);
box-shadow: 0 6px 24px rgba(0,0,0,0.07);
overflow: hidden;
display: flex;
flex-direction: column;
position: relative;
}
.random-articles-header {
background: rgba(210, 230, 255, 0.35);
color: #003d82;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: 1rem;
font-weight: 700;
padding: 14px 18px;
border-bottom: 1px solid rgba(0,61,130,0.1);
}
#random-articles-list {
padding: 12px;
display: flex;
flex-direction: column;
gap: 12px;
}
.random-article-card {
display: flex;
gap: 14px;
padding: 14px;
border-radius: 12px;
background: rgba(210, 230, 255, 0.12);
border: 1px solid rgba(0,61,130,0.07);
text-decoration: none;
color: inherit;
transition: all 0.22s ease;
align-items: flex-start;
}
.random-article-card:hover {
background: rgba(210, 230, 255, 0.35);
border-color: rgba(0,61,130,0.18);
transform: translateX(3px);
text-decoration: none;
}
.random-article-thumb {
width: 90px;
height: 90px;
border-radius: 10px;
object-fit: cover;
flex-shrink: 0;
background: #eef2f8;
}
.random-article-thumb-placeholder {
width: 90px;
height: 90px;
border-radius: 10px;
flex-shrink: 0;
background: linear-gradient(135deg, #e8eef7, #c8d8ee);
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
}
.random-article-info {
flex: 1;
min-width: 0;
}
.random-article-title {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: 15px;
font-weight: 700;
color: #003d82;
margin-bottom: 6px;
line-height: 1.35;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.random-article-excerpt {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: 13px;
color: #555;
line-height: 1.45;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.random-articles-loading {
padding: 20px;
text-align: center;
color: #888;
font-size: 13px;
font-family: system-ui, sans-serif;
}
.random-articles-refresh {
display: none;
}
/* ════════════════════════════════════
РЕСУРСИ ТА ПОСИЛАННЯ — MODERN STYLE
═══════════════════════════════════════ */
.resources-and-contacts {
display: flex;
flex-wrap: wrap;
gap: 24px;
margin: 50px 5vw 60px;
align-items: stretch;
}
.resource-block,
.contacts-block {
flex: 1;
min-width: 320px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(240, 246, 255, 0.85));
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(0, 61, 130, 0.12);
border-radius: 16px;
padding: 24px 28px 28px;
box-shadow: 0 6px 20px rgba(0, 61, 130, 0.08);
box-sizing: border-box;
display: flex;
flex-direction: column;
transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
position: relative;
overflow: hidden;
}
/* Gradient effect on hover */
.resource-block::before,
.contacts-block::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(135deg, transparent, rgba(0, 61, 130, 0.04), transparent);
transform: rotate(45deg);
transition: all 0.6s ease;
opacity: 0;
}
.resource-block:hover,
.contacts-block:hover {
transform: translateY(-6px);
box-shadow: 0 12px 32px rgba(0, 61, 130, 0.14);
border-color: rgba(0, 61, 130, 0.18);
}
.resource-block:hover::before,
.contacts-block:hover::before {
opacity: 1;
top: -25%;
left: -25%;
}
.resource-block ul,
.contacts-block ul {
flex: 1;
list-style: none;
padding-left: 0;
margin: 0;
position: relative;
z-index: 1;
}
.resource-block h2,
.contacts-block h2 {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
font-size: 1.4rem !important;
font-weight: 700 !important;
color: #003d82 !important;
margin: 0 0 18px 0 !important;
padding: 0 0 12px 0 !important;
line-height: 1.3 !important;
letter-spacing: -0.3px !important;
position: relative;
z-index: 1;
}
.resource-block li,
.contacts-block li {
margin-bottom: 10px;
line-height: 1.6;
font-size: 14.5px;
color: #444;
padding: 8px 12px 8px 28px;
position: relative;
border-radius: 8px;
transition: all 0.2s ease;
background: rgba(255, 255, 255, 0.4);
}
.resource-block li:hover,
.contacts-block li:hover {
background: rgba(0, 61, 130, 0.06);
transform: translateX(4px);
}
.resource-block li::before,
.contacts-block li::before {
content: '→';
position: absolute;
left: 10px;
color: #003d82;
font-weight: 700;
font-size: 16px;
transition: transform 0.2s;
}
.resource-block li:hover::before,
.contacts-block li:hover::before {
transform: translateX(3px);
}
.resource-block li a,
.contacts-block li a {
color: #0645ad;
text-decoration: none;
transition: color 0.2s;
font-weight: 500;
}
.resource-block li a:hover,
.contacts-block li a:hover {
color: #003d82;
text-decoration: none;
}
/* Different accent color for contacts block */
.contacts-block h2 {
}
/* ══════════════════════════════════════════════
УЛЬТИМАТИВНИЙ АДАПТИВНИЙ ПАТЧ (Vector Skin)
══════════════════════════════════════════════ */
@media (max-width: 1100px) {
/* 1. РОБОТА З КОНТЕЙНЕРОМ ТА САЙДБАРОМ */
#mw-panel {
display: none !important; /* Ховаємо меню */
}
/* Логотип (витягуємо його, щоб не зник) */
#p-logo {
display: block !important;
position: relative !important;
margin: 20px auto !important;
width: 160px !important;
height: 160px !important;
background-size: contain !important;
}
#content, #footer, #mw-head-base {
margin-left: 0 !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* 2. РЕМОНТ ВЕРХНЬОЇ ПАНЕЛІ (HEADER) */
#mw-head {
position: relative !important;
height: auto !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
background: #fff !important;
padding-bottom: 10px !important;
}
/* Скидаємо абсолютне позиціювання для ВСІХ частин шапки */
#p-personal, #left-navigation, #right-navigation, #p-search {
position: static !important;
float: none !important;
margin: 5px auto !important;
width: 100% !important;
display: flex !important;
justify-content: center !important;
}
/* Особисті посилання (логін, обговорення) */
#p-personal ul {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 8px !important;
padding: 5px !important;
}
/* Вкладки (Читати, Редагувати) */
.vectorTabs ul, .vectorMenu ul {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
background: transparent !important;
}
.vectorTabs li {
background-image: none !important;
background: rgba(0, 61, 130, 0.05) !important;
margin: 2px !important;
border-radius: 4px !important;
}
/* 3. ЦЕНТРУВАННЯ КАТЕГОРІЙ */
.welcome-wrapper {
flex-direction: column !important;
text-align: center !important;
padding: 30px 15px !important;
margin: 0 !important;
}
.welcome-text {
transform: none !important;
margin: 0 0 20px 0 !important;
}
.stats-panel {
margin: 0 auto !important;
}
.main-content-layout {
flex-direction: column !important;
align-items: center !important; /* Центрування по горизонталі */
padding: 0 15px !important;
}
/* Робимо заголовок "Категорії" по центру */
.section-categories {
margin: 30px auto !important;
width: 100% !important;
transform: none !important;
text-align: center !important;
}
/* СІТКА КАТЕГОРІЙ — ІДЕАЛЬНЕ ЦЕНТРУВАННЯ */
.category-grid-container {
display: grid !important;
/* Автоматично підбирає кількість колонок і центрує їх */
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
gap: 20px !important;
width: 100% !important;
max-width: 1000px !important; /* Щоб на великих екранах не розтягувалось занадто сильно */
justify-content: center !important;
margin: 0 auto !important;
}
.category-card {
margin: 0 auto !important; /* Центрує картку, якщо вона одна в ряду */
width: 100% !important;
max-width: 320px !important;
}
/* Права колонка (Випадкові статті) стає під низ */
.right-column {
width: 100% !important;
max-width: 400px !important;
margin: 40px auto 0 !important;
min-width: 0 !important;
}
}
/* Фікс логотипу для дуже малих екранів */
@media (max-width: 480px) {
#p-logo {
width: 120px !important;
height: 120px !important;
}
.welcome-title { font-size: 1.6rem !important; }
}
/* ══════════════════════════════════════════════
MODERN UI: градієнти, glassmorphism, анімації
══════════════════════════════════════════════ */
/* ── Прогрес скролла ── */
.scroll-progress {
position: fixed;
top: 0;
left: 0;
height: 4px;
background: linear-gradient(90deg, #003d82, #0066cc, #ffd700);
z-index: 99999;
transition: width 0.1s ease;
box-shadow: 0 2px 8px rgba(0, 61, 130, 0.3);
}
/* ── Градієнтний фон для welcome ── */
.welcome-wrapper {
background: linear-gradient(135deg, #f0f6ff 0%, #e8f0ff 50%, #fff 100%);
position: relative;
overflow: hidden;
}
/* Плавний перехід до білого з усіх боків */
.welcome-wrapper::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
linear-gradient(to bottom, white 0%, transparent 15%, transparent 85%, white 100%),
linear-gradient(to right, white 0%, transparent 10%, transparent 90%, white 100%);
pointer-events: none;
z-index: 10;
}
.welcome-text,
.stats-panel {
position: relative;
z-index: 11;
}
/* ── Glassmorphism для статистики ── */
.stats-panel {
background: rgba(255, 255, 255, 0.7) !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3) !important;
box-shadow: 0 8px 32px rgba(0, 61, 130, 0.15) !important;
}
.stats-panel-header {
background: linear-gradient(135deg, rgba(0, 61, 130, 0.1), rgba(0, 102, 204, 0.15)) !important;
}
/* ── Glassmorphism для випадкових статей ── */
.random-articles-panel {
background: rgba(255, 255, 255, 0.75) !important;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.3) !important;
}
/* ── Градієнтні картки категорій ── */
.category-card {
background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
border: 1px solid rgba(0, 61, 130, 0.08);
position: relative;
overflow: hidden;
}
.category-card::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(135deg, transparent, rgba(0, 61, 130, 0.05), transparent);
transform: rotate(45deg);
transition: all 0.6s ease;
opacity: 0;
}
.category-card:hover::before {
opacity: 1;
top: -25%;
left: -25%;
}
/* ── Мікроанімації: bounce для іконок ── */
.category-card:hover .card-image img {
animation: icon-bounce 0.6s ease;
}
@keyframes icon-bounce {
0%, 100% { transform: scale(1.12) translateY(0); }
50% { transform: scale(1.12) translateY(-8px); }
}
/* ── Gradient hover для карточок ── */
.category-card {
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.category-card:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 24px 48px rgba(0, 61, 130, 0.2);
}
@keyframes number-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); color: #0066cc; }
}
/* ── Rainbow effect для анімації чисел ── */
@keyframes rainbow {
0% { color: #003d82; }
25% { color: #0066cc; }
50% { color: #4a90e2; }
75% { color: #0066cc; }
100% { color: #003d82; }
}
.stats-panel-number.animating {
animation: rainbow 1.5s ease-in-out;
}
/* ── Gradient title ── */
.welcome-title {
background: linear-gradient(135deg, #003d82 0%, #0066cc 50%, #003d82 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: gradient-shift 3s ease infinite;
background-size: 200% 200%;
}
@keyframes gradient-shift {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
/* ── Smooth reveal для карточок ── */
.category-card {
/* AOS сам додає opacity при ініціалізації */
}
/* ── Неоморфізм для випадкових статей ── */
.random-article-card {
background: linear-gradient(145deg, #ffffff, #f0f6ff);
box-shadow:
8px 8px 16px rgba(0, 61, 130, 0.08),
-8px -8px 16px rgba(255, 255, 255, 0.9);
border: none !important;
}
.random-article-card:hover {
box-shadow:
12px 12px 24px rgba(0, 61, 130, 0.12),
-12px -12px 24px rgba(255, 255, 255, 1);
background: linear-gradient(145deg, #f0f6ff, #ffffff);
}
/* ── Glassmorphism для заголовків ── */
.section-categories {
text-shadow: 0 2px 8px rgba(0, 61, 130, 0.1);
}
/* ── Gradient підкреслення ── */
.section-categories::after {
background: linear-gradient(90deg, #ffd700, #ffed4e, #ffd700) !important;
box-shadow: 0 2px 8px rgba(255, 215, 0, 0.4);
}
/* ══════════════════════════════════════════════
СТИЛІЗАЦІЯ БОКОВОГО МЕНЮ — MODERN STYLE
══════════════════════════════════════════════ */
/* Прибираємо загальний фон */
body #mw-panel,
.mw-body #mw-panel {
background: transparent !important;
padding: 0 !important;
margin-left: 0px !important;
margin-right: 15px !important;
}
/* Блоки для кожної секції */
body #mw-panel .portal,
.mw-body #mw-panel .portal {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(240, 246, 255, 0.85)) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
border-radius: 16px !important;
padding: 16px 14px 14px !important;
margin-bottom: 12px !important;
border: 1px solid rgba(0, 61, 130, 0.12) !important;
box-shadow: 0 6px 20px rgba(0, 61, 130, 0.08) !important;
transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
position: relative !important;
overflow: hidden !important;
}
/* Gradient light effect */
body #mw-panel .portal::before,
.mw-body #mw-panel .portal::before {
content: '' !important;
position: absolute !important;
top: -50% !important;
left: -50% !important;
width: 200% !important;
height: 200% !important;
background: linear-gradient(135deg, transparent, rgba(0, 61, 130, 0.04), transparent) !important;
transform: rotate(45deg) !important;
transition: all 0.6s ease !important;
opacity: 0 !important;
pointer-events: none !important;
}
body #mw-panel .portal:hover,
.mw-body #mw-panel .portal:hover {
transform: translateY(-4px) !important;
box-shadow: 0 10px 28px rgba(0, 61, 130, 0.12) !important;
border-color: rgba(0, 61, 130, 0.18) !important;
}
body #mw-panel .portal:hover::before,
.mw-body #mw-panel .portal:hover::before {
opacity: 1 !important;
top: -25% !important;
left: -25% !important;
}
body #mw-panel .portal:last-child,
.mw-body #mw-panel .portal:last-child {
margin-bottom: 0 !important;
}
/* Заголовки секцій з сірою лінією */
body #mw-panel .portal h3,
.mw-body #mw-panel .portal h3 {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
font-size: 15px !important;
font-weight: 700 !important;
color: #003d82 !important;
margin: 0 0 12px 0 !important;
padding: 0 0 10px 0 !important;
border-bottom: 2px solid rgba(0, 61, 130, 0.15) !important;
letter-spacing: -0.2px !important;
line-height: 1.3 !important;
position: relative !important;
z-index: 1 !important;
}
/* Списки */
body #mw-panel .portal .body ul,
.mw-body #mw-panel .portal .body ul {
margin: 0 !important;
padding: 0 !important;
position: relative !important;
z-index: 1 !important;
}
body #mw-panel .portal .body ul li,
.mw-body #mw-panel .portal .body ul li {
list-style: none !important;
margin: 0 0 6px 0 !important;
padding: 0 !important;
}
body #mw-panel .portal .body ul li:last-child,
.mw-body #mw-panel .portal .body ul li:last-child {
margin-bottom: 0 !important;
}
/* Посилання як міні-карточки */
body #mw-panel .portal .body ul li a,
.mw-body #mw-panel .portal .body ul li a {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
font-size: 13.5px !important;
font-weight: 400 !important;
color: #0645ad !important;
text-decoration: none !important;
transition: all 0.2s ease !important;
display: block !important;
padding: 9px 12px !important;
border-radius: 8px !important;
line-height: 1.4 !important;
background: rgba(255, 255, 255, 0.4) !important;
border: 1px solid rgba(0, 61, 130, 0.08) !important;
box-sizing: border-box !important;
}
body #mw-panel .portal .body ul li a:hover,
.mw-body #mw-panel .portal .body ul li a:hover {
background: rgba(0, 61, 130, 0.06) !important;
color: #003d82 !important;
transform: translateX(4px) !important;
border-color: rgba(0, 61, 130, 0.15) !important;
}
/* "Головна сторінка" як заголовок */
body #mw-panel #p-navigation h3,
.mw-body #mw-panel #p-navigation h3 {
display: block !important;
visibility: visible !important;
}
/* Перший елемент списку "Головна сторінка" перетворюємо на заголовок */
body #mw-panel #p-navigation .body ul li:first-child,
.mw-body #mw-panel #p-navigation .body ul li:first-child {
margin: 0 0 12px 0 !important;
}
body #mw-panel #p-navigation .body ul li:first-child a,
.mw-body #mw-panel #p-navigation .body ul li:first-child a {
font-size: 15px !important;
font-weight: 700 !important;
color: #003d82 !important;
padding: 0 0 10px 0 !important;
border-bottom: 2px solid rgba(0, 61, 130, 0.15) !important;
background: transparent !important;
border-left: none !important;
border-right: none !important;
border-top: none !important;
border-radius: 0 !important;
pointer-events: none !important;
cursor: default !important;
}
body #mw-panel #p-navigation .body ul li:first-child a:hover,
.mw-body #mw-panel #p-navigation .body ul li:first-child a:hover {
transform: none !important;
}
/* ══════════════════════════════════════════════
vue-category-cards.css
Стилі для універсального Vue-компонента категорій
══════════════════════════════════════════════ */
/* ── Layout ── */
.vcc-app { font-family: inherit; }
.vcc-topbar {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 16px;
flex-wrap: wrap;
}
.vcc-search {
flex: 1;
min-width: 200px;
max-width: 400px;
padding: 8px 14px;
border: 1px solid #d0d7de;
border-radius: 8px;
font-size: 14px;
outline: none;
transition: border-color .2s, box-shadow .2s;
}
.vcc-search:focus {
border-color: #1a3a6b;
box-shadow: 0 0 0 3px rgba(26,58,107,.12);
}
.vcc-count {
font-size: 14px;
color: #555;
white-space: nowrap;
}
.vcc-layout {
display: flex;
gap: 24px;
align-items: flex-start;
}
.vcc-main { flex: 1; min-width: 0; }
/* ── Grid ── */
.vcc-grid {
display: grid;
gap: 16px;
}
/* ── Card ── */
.vcc-card {
display: flex;
flex-direction: row;
align-items: center;
gap: 12px;
background: #fff;
border: 1px solid #e8edf3;
border-radius: 12px;
padding: 14px;
text-decoration: none;
color: inherit;
transition: box-shadow .2s, transform .2s, border-color .2s;
cursor: pointer;
}
.vcc-card:hover {
box-shadow: 0 4px 18px rgba(0,0,0,.10);
transform: translateY(-2px);
border-color: #1a3a6b33;
text-decoration: none;
color: inherit;
}
.vcc-card-img-wrap {
flex-shrink: 0;
width: 56px;
height: 56px;
border-radius: 50%;
overflow: hidden;
background: #eef2f8;
display: flex;
align-items: center;
justify-content: center;
}
.vcc-card-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.vcc-card-img-placeholder {
font-size: 22px;
font-weight: 700;
color: #1a3a6b;
text-transform: uppercase;
}
.vcc-card-body { flex: 1; min-width: 0; }
.vcc-card-badge {
display: inline-block;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .6px;
color: #b8860b;
background: #fff8e1;
border: 1px solid #f0d060;
border-radius: 4px;
padding: 2px 6px;
margin-bottom: 4px;
}
.vcc-card-name {
font-size: 14px;
font-weight: 600;
color: #1a3a6b;
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.vcc-card-desc {
font-size: 12px;
color: #666;
margin-top: 3px;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* ── Sidebar ── */
.vcc-sidebar {
width: 160px;
flex-shrink: 0;
background: #f8f9fb;
border: 1px solid #e8edf3;
border-radius: 12px;
padding: 14px;
}
.vcc-sidebar-title {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .6px;
color: #888;
margin-bottom: 10px;
}
.vcc-filters { display: flex; flex-direction: column; gap: 6px; }
.vcc-filter-btn {
padding: 7px 12px;
border: 1px solid #d0d7de;
border-radius: 8px;
background: #fff;
font-size: 13px;
color: #333;
cursor: pointer;
text-align: left;
transition: background .15s, border-color .15s, color .15s;
}
.vcc-filter-btn:hover { background: #eef2f8; border-color: #1a3a6b44; }
.vcc-filter-btn.active {
background: #1a3a6b;
border-color: #1a3a6b;
color: #fff;
font-weight: 600;
}
/* ── Loading ── */
.vcc-loading {
display: flex;
align-items: center;
gap: 12px;
padding: 40px 0;
color: #888;
font-size: 15px;
}
.vcc-spinner {
width: 24px;
height: 24px;
border: 3px solid #e0e0e0;
border-top-color: #1a3a6b;
border-radius: 50%;
animation: vcc-spin .8s linear infinite;
}
@keyframes vcc-spin { to { transform: rotate(360deg); } }
/* ── Empty / Error ── */
.vcc-empty, .vcc-error {
text-align: center;
padding: 48px 0;
color: #888;
}
.vcc-empty-icon { font-size: 36px; margin-bottom: 8px; }
.vcc-reset-btn {
margin-top: 10px;
padding: 8px 20px;
border: 1px solid #1a3a6b;
border-radius: 8px;
background: #fff;
color: #1a3a6b;
cursor: pointer;
font-size: 13px;
transition: background .15s;
}
.vcc-reset-btn:hover { background: #eef2f8; }
/* ── Preview popup ── */
.vcc-preview {
position: absolute;
z-index: 9999;
width: 270px;
background: #fff;
border: 1px solid #e0e7f0;
border-radius: 14px;
box-shadow: 0 8px 32px rgba(0,0,0,.14);
padding: 16px;
text-decoration: none;
color: inherit;
pointer-events: auto;
}
.vcc-preview-top {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 10px;
}
.vcc-preview-img,
.vcc-preview-img-placeholder {
width: 52px;
height: 52px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
background: #eef2f8;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-weight: 700;
color: #1a3a6b;
}
.vcc-preview-badge {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .5px;
color: #b8860b;
margin-bottom: 3px;
}
.vcc-preview-name {
font-size: 14px;
font-weight: 600;
color: #1a3a6b;
line-height: 1.3;
}
.vcc-preview-divider {
height: 1px;
background: #eef2f8;
margin: 10px 0;
}
.vcc-preview-desc {
font-size: 12px;
color: #555;
line-height: 1.5;
margin-bottom: 8px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.vcc-preview-row {
display: flex;
justify-content: space-between;
font-size: 12px;
margin-top: 6px;
gap: 8px;
}
.vcc-preview-lbl { color: #999; white-space: nowrap; }
.vcc-preview-val {
color: #333;
text-align: right;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ── Responsive ── */
@media (max-width: 700px) {
.vcc-grid { grid-template-columns: 1fr !important; }
.vcc-sidebar { width: 100%; }
.vcc-layout { flex-direction: column-reverse; }
}
/* ══════════════════════════════════════════════
СТИЛІЗАЦІЯ ВЕРХНЬОЇ ПАНЕЛІ — SIMPLIFIED
══════════════════════════════════════════════ */
/* Прибираємо білий фон що заходить на логотип */
#mw-page-base {
background: transparent !important;
background-image: none !important;
}
/* Фон знизу під header */
#mw-head-base {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(240, 246, 255, 0.9)) !important;
backdrop-filter: blur(20px) !important;
-webkit-backdrop-filter: blur(20px) !important;
border-bottom: 1px solid rgba(0, 61, 130, 0.12) !important;
box-shadow: 0 2px 12px rgba(0, 61, 130, 0.08) !important;
}
/* ═══ МЕНЮ КОРИСТУВАЧА (personal) ═══ */
#p-personal {
background: transparent !important;
border: none !important;
}
#p-personal ul {
display: flex !important;
align-items: center !important;
gap: 4px !important;
background: linear-gradient(135deg, rgba(255,255,255,0.85), rgba(240,246,255,0.75)) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
border: 1px solid rgba(0, 61, 130, 0.12) !important;
border-radius: 12px !important;
padding: 4px 8px !important;
box-shadow: 0 2px 8px rgba(0, 61, 130, 0.06) !important;
}
#p-personal li {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
#p-personal li a {
display: block !important;
color: #0645ad !important;
font-family: system-ui, -apple-system, sans-serif !important;
font-size: 13.5px !important;
font-weight: 500 !important;
padding: 6px 10px !important;
border-radius: 8px !important;
transition: all 0.15s ease !important;
}
#p-personal li a:hover {
background-color: rgba(0, 61, 130, 0.1) !important;
}
/* Активний пункт (наприклад сторінка користувача) */
#p-personal li.selected a,
#p-personal li a.mw-ui-button-primary {
background: linear-gradient(to right, rgba(240,246,255,0.5), rgba(210,230,255,0.4)) !important;
color: #003d82 !important;
font-weight: 600 !important;
}
/* ═══ КОРЕКЦІЯ ФОНУ ТА ІКОНКИ КОРИСТУВАЧА ═══ */
/* Расширяем фон немного влево */
#p-personal ul {
margin-left: -8px !important; /* вынос влево */
padding-left: 12px !important; /* компенсируем внутренний отступ */
}
/* Контейнер имени пользователя */
#p-personal li#pt-userpage {
display: flex !important;
align-items: center !important;
}
/* Иконка пользователя */
#p-personal li#pt-userpage .mw-userlink::before,
#p-personal li#pt-userpage a::before {
margin-right: 8px !important; /* расстояние между иконкой и текстом */
}
/* Если используется встроенный avatar span */
#p-personal li#pt-userpage .mw-userlink {
display: flex !important;
align-items: center !important;
gap: 8px !important; /* гарантированный отступ */
}
#p-personal li#pt-userpage > a {
padding-left: 26px !important;
background-position: 6px center !important;
}
/* ═══ ТАБУЛЯЦІЯ (Головна, Обговорення, Читати, Редагувати) ═══ */
#p-namespaces li,
#p-views li {
background: transparent !important;
border: none !important;
border-radius: 0 !important;
margin-right: 8px !important;
margin-bottom: 0 !important;
padding: 0 !important;
}
#p-namespaces li a,
#p-views li a {
color: #0645ad !important;
font-family: system-ui, -apple-system, sans-serif !important;
font-size: 13.5px !important;
font-weight: 500 !important;
}
#p-namespaces li.selected,
#p-views li.selected {
background: linear-gradient(to right, rgba(240, 246, 255, 0.4), rgba(210, 230, 255, 0.3)) !important;
border-bottom: 3px solid #003d82 !important;
}
#p-namespaces li.selected a,
#p-views li.selected a {
color: #003d82 !important;
font-weight: 700 !important;
}
/* ═══ ПОШУК ═══ */
#p-search {
background: transparent !important;
border: none !important;
border-radius: 0 !important;
padding: 2px 6px !important;
margin-bottom: 0 !important;
}
#simpleSearch {
background: transparent !important;
border: none !important;
padding: 0 !important;
}
#searchInput {
background: transparent !important;
border: none !important;
font-family: system-ui, -apple-system, sans-serif !important;
font-size: 14px !important;
color: #333 !important;
}
/* Приховати заголовок "Головна сторінка" ТІЛЬКИ на головній */
body.page-Головна_сторінка #firstHeading,
body.page-Головна_сторінка .mw-first-heading,
body.page-Головна_сторінка .firstHeading {
display: none !important;
}
/* Приховати синю смужку (border-bottom) під заголовком, якщо вона лишається */
body.page-Головна_сторінка .mw-body-header,
body.page-Головна_сторінка #content-header {
border-bottom: none !important;
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
/* ══════════════════════════════════════════════
MOBILE ADAPTIVITY PATCH (Ремонт верстки)
══════════════════════════════════════════════ */
@media (max-width: 1100px) {
/* 1. Виправляємо заголовок "Категорії" */
.section-categories {
margin-right: 0 !important; /* Прибираємо відступ, який ми робили для правої колонки */
width: 100% !important;
transform: none !important;
display: block !important;
}
/* 2. Виправляємо блок привітання */
.welcome-text {
transform: none !important; /* Прибираємо зміщення вліво */
margin-bottom: 20px;
}
.welcome-wrapper {
padding: 30px 20px !important;
gap: 20px !important;
}
/* 3. Статистика на мобільних */
.stats-panel {
max-width: 100% !important;
width: 100% !important;
}
}
/* Специфічні фікси для стандартних панелей MediaWiki */
@media (max-width: 982px) {
/* Приховуємо ліве меню Вікіпедії, яке ламає нам ширину */
#mw-panel {
display: none !important;
}
/* Розтягуємо основний контент на всю ширину екрану */
#content,
#mw-head-base,
#mw-page-base,
#footer,
.mw-body {
margin-left: 0 !important;
padding-left: 10px !important;
padding-right: 10px !important;
}
/* Виправляємо позиціювання верхніх вкладок (Редагувати, Читати) */
#left-navigation {
margin-left: 0 !important;
}
}
@media (max-width: 600px) {
/* Робимо картки категорій адаптивними до іконок */
.card-image img {
width: 150px !important; /* Зменшуємо іконки на маленьких телефонах */
height: 150px !important;
}
.welcome-title {
font-size: 1.8rem !important;
}
/* Права колонка (Випадкові статті) на весь екран */
.right-column {
width: 100% !important;
min-width: 0 !important;
}
.main-content-layout {
padding: 0 15px !important;
}
}
/* ══════════════════════════════════════════════
ГЛОБАЛЬНИЙ ФІКС ЦЕНТРУВАННЯ ТА ВЕРХНЬОЇ ПАНЕЛІ
══════════════════════════════════════════════ */
/* 1. Центрування категорій на всіх екранах */
.main-content-layout {
justify-content: center !important; /* Центруємо вміст контейнера */
}
.category-grid-container {
justify-content: center !important; /* Центруємо саму сітку */
justify-items: center !important; /* Центруємо кожну картку всередині клітинки */
width: 100%;
}
.category-card {
max-width: 320px; /* Обмежуємо ширину, щоб картка не розповзалася */
width: 100%;
margin: 0 auto; /* Додаткове центрування */
}
/* 2. Ремонт верхньої панелі (Header) на мобільних */
@media (max-width: 982px) {
/* Робимо шапку гнучкою, а не фіксованою */
#mw-head {
position: relative !important;
height: auto !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
background: rgba(255, 255, 255, 0.9) !important;
}
/* Особисте меню (Логін, Налаштування) */
#p-personal {
position: static !important;
margin: 10px 0 !important;
width: 100% !important;
}
#p-personal ul {
justify-content: center !important;
flex-wrap: wrap !important; /* Дозволяємо перенос кнопок на новий рядок */
padding: 5px !important;
margin: 0 auto !important;
}
/* Навігація (Головна, Обговорення, Читати, Редагувати) */
#left-navigation, #right-navigation {
float: none !important;
margin: 5px auto !important;
display: flex !important;
justify-content: center !important;
flex-wrap: wrap !important;
width: 100% !important;
}
#p-namespaces ul, #p-views ul {
display: flex !important;
justify-content: center !important;
flex-wrap: wrap !important;
gap: 5px !important;
}
/* Пошук */
#p-search {
margin: 10px auto !important;
float: none !important;
}
}
/* 3. Виправляємо блок привітання на мобільних */
@media (max-width: 1100px) {
.welcome-wrapper {
text-align: center !important;
padding: 40px 15px !important;
}
.welcome-text {
transform: none !important;
margin-right: 0 !important;
}
.stats-panel {
margin: 20px auto 0 !important; /* Центруємо статистику під текстом */
}
.section-categories {
margin: 30px auto !important; /* Центруємо заголовок "Категорії" */
width: 100% !important;
padding: 0 10px !important;
}
}
/* 4. Фікс для іконок у картках */
@media (max-width: 480px) {
.card-image img {
max-width: 180px !important; /* Щоб іконка не вилазила */
height: auto !important;
}
.card-title {
font-size: 14px !important;
}
}