Dantes (обсуждение | вклад) Нет описания правки |
Dantes (обсуждение | вклад) Нет описания правки |
||
| Строка 1: | Строка 1: | ||
. | /* Основные стили страницы */ | ||
.species-page { | |||
padding: 20px; | |||
max-width: 1200px; | |||
margin: 0 auto; | |||
} | } | ||
. | .page-title { | ||
font-size: 3.5rem; | |||
color: #0C9456; | |||
text-shadow: 2px 2px 4px rgba(0,0,0,0.5); | |||
display: inline-flex; | |||
align-items: center; | |||
} | |||
.quick-nav { | |||
background: rgba(12, 148, 86, 0.33); | |||
padding: 1rem; | |||
border-radius: 8px; | |||
margin-bottom: 2rem; | |||
} | |||
/* Сетка рас */ | |||
.species-grid { | |||
display: grid; | |||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); | |||
gap: 1.5rem; | |||
padding: 1rem; | |||
} | |||
.species-card { | |||
background: #1a1a1a; | |||
border-radius: 12px; | |||
transition: transform 0.2s; | |||
cursor: pointer; | |||
} | |||
.species-card:hover { | |||
transform: scale(1.03); | |||
} | |||
.species-name { | |||
background: #0C9456; | |||
padding: 0.8rem; | |||
text-align: center; | text-align: center; | ||
border-radius: | border-radius: 0 0 12px 12px; | ||
} | |||
/* Секретные элементы */ | |||
.classified { | |||
position: relative; | |||
filter: grayscale(1) blur(3px); | |||
transition: 0.3s; | |||
} | |||
.classified:hover { | |||
filter: grayscale(0.5) blur(1px); | |||
} | |||
/* Аккордеоны */ | |||
.accordion { | |||
background: #1a1a1a; | |||
margin: 1rem 0; | |||
border-radius: 8px; | |||
} | |||
.accordion-header { | |||
padding: 1rem; | |||
background: #0C9456; | |||
border-radius: 8px 8px 0 0; | |||
cursor: pointer; | cursor: pointer; | ||
} | } | ||
. | .accordion-content { | ||
padding: 0 1rem; | |||
max-height: 0; | |||
overflow: hidden; | |||
transition: 0.3s; | |||
} | } | ||
. | .accordion-content.active { | ||
max-height: 500px; | |||
padding: 1rem; | |||
} | } | ||
. | /* Адаптивность */ | ||
@media (max-width: 768px) { | |||
font- | .species-grid { | ||
grid-template-columns: repeat(2, 1fr); | |||
} | |||
.page-title { | |||
font-size: 2.5rem; | |||
} | |||
} | } | ||
@keyframes pulse { | |||
0% { opacity: 0.6; } | |||
50% { opacity: 1; } | |||
100% { opacity: 0.6; } | |||
} | } | ||
Версия от 21:18, 23 февраля 2025
/* Основные стили страницы */
.species-page {
padding: 20px;
max-width: 1200px;
margin: 0 auto;
}
.page-title {
font-size: 3.5rem;
color: #0C9456;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
display: inline-flex;
align-items: center;
}
.quick-nav {
background: rgba(12, 148, 86, 0.33);
padding: 1rem;
border-radius: 8px;
margin-bottom: 2rem;
}
/* Сетка рас */
.species-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 1.5rem;
padding: 1rem;
}
.species-card {
background: #1a1a1a;
border-radius: 12px;
transition: transform 0.2s;
cursor: pointer;
}
.species-card:hover {
transform: scale(1.03);
}
.species-name {
background: #0C9456;
padding: 0.8rem;
text-align: center;
border-radius: 0 0 12px 12px;
}
/* Секретные элементы */
.classified {
position: relative;
filter: grayscale(1) blur(3px);
transition: 0.3s;
}
.classified:hover {
filter: grayscale(0.5) blur(1px);
}
/* Аккордеоны */
.accordion {
background: #1a1a1a;
margin: 1rem 0;
border-radius: 8px;
}
.accordion-header {
padding: 1rem;
background: #0C9456;
border-radius: 8px 8px 0 0;
cursor: pointer;
}
.accordion-content {
padding: 0 1rem;
max-height: 0;
overflow: hidden;
transition: 0.3s;
}
.accordion-content.active {
max-height: 500px;
padding: 1rem;
}
/* Адаптивность */
@media (max-width: 768px) {
.species-grid {
grid-template-columns: repeat(2, 1fr);
}
.page-title {
font-size: 2.5rem;
}
}
@keyframes pulse {
0% { opacity: 0.6; }
50% { opacity: 1; }
100% { opacity: 0.6; }
}