MediaWiki:Common.css: відмінності між версіями
Перейти до навігації
Перейти до пошуку
Немає опису редагування Мітка: Скасовано |
Немає опису редагування Мітка: Скасовано |
||
| Рядок 1: | Рядок 1: | ||
.category-grid | /* ======================================== | ||
СОВРЕМЕННЫЙ МИНИМАЛИСТИЧНЫЙ ДИЗАЙН | |||
Цвета: синий, белый, жёлтый | |||
======================================== */ | |||
/* Приветственный блок */ | |||
.welcome-text { | |||
text-align: center; | |||
font-style: italic; | |||
margin: 30px auto; | |||
padding: 30px; | |||
max-width: 900px; | |||
background: #003d82; | |||
color: white; | |||
border-radius: 12px; | |||
box-shadow: 0 4px 20px rgba(0,61,130,0.15); | |||
} | |||
.welcome-text strong { | |||
color: #ffd700; | |||
font-size: 22px; | |||
font-weight: 600; | |||
display: block; | |||
margin-top: 10px; | |||
font-style: normal; | |||
} | |||
/* Заголовок секции */ | |||
.section-projects { | |||
background: #003d82; | |||
color: #ffd700; | |||
padding: 18px 25px; | |||
font-size: 20px; | |||
font-weight: 600; | |||
border-radius: 10px; | |||
margin: 30px 0 20px 0; | |||
text-align: center; | |||
box-shadow: 0 2px 10px rgba(0,61,130,0.1); | |||
} | |||
.section-projects .emoji { | |||
font-size: 26px; | |||
margin-right: 12px; | |||
} | |||
/* Сетка категорий - 4 В РЯД */ | |||
.category-grid { | |||
display: grid; | display: grid; | ||
grid-template-columns: repeat(4, 1fr); | grid-template-columns: repeat(4, 1fr); /* 4 колонки */ | ||
gap: | gap: 25px; | ||
max-width: | padding: 30px; | ||
background: #f8f9fa; | |||
border-radius: 12px; | |||
margin-bottom: 30px; | |||
} | |||
/* Адаптивность */ | |||
@media (max-width: 1200px) { | |||
.category-grid { | |||
grid-template-columns: repeat(3, 1fr); | |||
} | |||
} | |||
@media (max-width: 800px) { | |||
.category-grid { | |||
grid-template-columns: repeat(2, 1fr); | |||
} | |||
} | |||
@media (max-width: 500px) { | |||
.category-grid { | |||
grid-template-columns: 1fr; | |||
} | |||
} | } | ||
/* Карточка категории - МИНИМАЛИСТИЧНЫЙ ДИЗАЙН */ | |||
.category-card { | .category-card { | ||
background: white; | |||
border-radius: 12px; | |||
padding: 25px 20px; | |||
text-align: center; | text-align: center; | ||
box-shadow: 0 2px 8px rgba(0,0,0,0.08); | |||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |||
cursor: pointer; | |||
border: 1px solid transparent; | |||
box-shadow: 0 2px 8px rgba(0,0,0,0. | |||
transition: all 0. | |||
} | } | ||
.category-card:hover { | .category-card:hover { | ||
transform: translateY(- | transform: translateY(-6px); | ||
box-shadow: 0 | box-shadow: 0 8px 24px rgba(0,61,130,0.15); | ||
border-color: #003d82; | border-color: #003d82; | ||
} | } | ||
.card- | /* Иконка */ | ||
margin | .category-card img { | ||
width: 70px; | |||
height: 70px; | |||
object-fit: contain; | |||
margin: 0 auto 15px auto; | |||
display: block; | |||
transition: transform 0.3s ease; | |||
} | } | ||
.card | .category-card:hover img { | ||
transform: scale(1.08); | |||
} | } | ||
.card-title { | /* Название категории ПОД иконкой */ | ||
font-size: | .category-card .category-title { | ||
font-weight: | font-size: 14px; | ||
color: # | font-weight: 500; | ||
color: #2c3e50; | |||
margin: 0; | |||
line-height: 1.4; | line-height: 1.4; | ||
min-height: 40px; /* чтобы все карточки были одной высоты */ | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
} | } | ||
.card-title a { | .category-card .category-title a { | ||
text-decoration: none; | |||
color: #2c3e50; | |||
transition: color 0.2s ease; | |||
} | |||
.category-card:hover .category-title a { | |||
color: #003d82; | color: #003d82; | ||
} | } | ||
.card | /* Убираем рамку у ссылок на изображения */ | ||
.category-card a.image { | |||
border: none !important; | |||
} | |||
/* Общие улучшения */ | |||
body { | |||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; | |||
} | } | ||
/* | /* Цвета ссылок */ | ||
a { | |||
color: #003d82; | |||
transition: color 0.2s ease; | |||
} | } | ||
a:hover { | |||
color: #0052a8; | |||
} | } | ||
/* Убираем лишние отступы у основного контента */ | |||
#mw-content-text { | |||
margin-top: 0; | |||
} | } | ||
Версія за 10:14, 11 лютого 2026
/* ========================================
СОВРЕМЕННЫЙ МИНИМАЛИСТИЧНЫЙ ДИЗАЙН
Цвета: синий, белый, жёлтый
======================================== */
/* Приветственный блок */
.welcome-text {
text-align: center;
font-style: italic;
margin: 30px auto;
padding: 30px;
max-width: 900px;
background: #003d82;
color: white;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0,61,130,0.15);
}
.welcome-text strong {
color: #ffd700;
font-size: 22px;
font-weight: 600;
display: block;
margin-top: 10px;
font-style: normal;
}
/* Заголовок секции */
.section-projects {
background: #003d82;
color: #ffd700;
padding: 18px 25px;
font-size: 20px;
font-weight: 600;
border-radius: 10px;
margin: 30px 0 20px 0;
text-align: center;
box-shadow: 0 2px 10px rgba(0,61,130,0.1);
}
.section-projects .emoji {
font-size: 26px;
margin-right: 12px;
}
/* Сетка категорий - 4 В РЯД */
.category-grid {
display: grid;
grid-template-columns: repeat(4, 1fr); /* 4 колонки */
gap: 25px;
padding: 30px;
background: #f8f9fa;
border-radius: 12px;
margin-bottom: 30px;
}
/* Адаптивность */
@media (max-width: 1200px) {
.category-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 800px) {
.category-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 500px) {
.category-grid {
grid-template-columns: 1fr;
}
}
/* Карточка категории - МИНИМАЛИСТИЧНЫЙ ДИЗАЙН */
.category-card {
background: white;
border-radius: 12px;
padding: 25px 20px;
text-align: center;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
border: 1px solid transparent;
}
.category-card:hover {
transform: translateY(-6px);
box-shadow: 0 8px 24px rgba(0,61,130,0.15);
border-color: #003d82;
}
/* Иконка */
.category-card img {
width: 70px;
height: 70px;
object-fit: contain;
margin: 0 auto 15px auto;
display: block;
transition: transform 0.3s ease;
}
.category-card:hover img {
transform: scale(1.08);
}
/* Название категории ПОД иконкой */
.category-card .category-title {
font-size: 14px;
font-weight: 500;
color: #2c3e50;
margin: 0;
line-height: 1.4;
min-height: 40px; /* чтобы все карточки были одной высоты */
display: flex;
align-items: center;
justify-content: center;
}
.category-card .category-title a {
text-decoration: none;
color: #2c3e50;
transition: color 0.2s ease;
}
.category-card:hover .category-title a {
color: #003d82;
}
/* Убираем рамку у ссылок на изображения */
.category-card a.image {
border: none !important;
}
/* Общие улучшения */
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
/* Цвета ссылок */
a {
color: #003d82;
transition: color 0.2s ease;
}
a:hover {
color: #0052a8;
}
/* Убираем лишние отступы у основного контента */
#mw-content-text {
margin-top: 0;
}