MediaWiki:Citizen.css: различия между версиями
Askell (обсуждение | вклад) Нет описания правки |
Askell (обсуждение | вклад) Нет описания правки |
||
| Строка 171: | Строка 171: | ||
.dropdown-container { | .dropdown-container { | ||
display: flex; | display: flex; | ||
justify-content: space-between; | |||
gap: 5px; /* Отступ между кнопками */ | gap: 5px; /* Отступ между кнопками */ | ||
width: 500px; /* Можно изменить ширину */ | width: 500px; /* Можно изменить ширину */ | ||
} | |||
.menu-column { | |||
display: flex; | |||
flex-direction: column; | |||
gap: 8px; /* расстояние между пунктами в колонке */ | |||
flex: 1; /* колонки равной ширины */ | |||
min-width: 220px; /* при желании минимальная ширина */ | |||
} | } | ||
| Строка 190: | Строка 198: | ||
cursor: pointer; | cursor: pointer; | ||
border-radius: 5px; | border-radius: 5px; | ||
width: 100%; /* чтобы кнопка занимала ширину колонки */ | |||
box-sizing: border-box; | |||
text-align: center; | |||
} | } | ||
| Строка 206: | Строка 215: | ||
/* Стиль для ссылок внутри списка */ | /* Стиль для ссылок внутри списка */ | ||
.dropdown-content a { | .dropdown-content a , | ||
.dropdown-content h4 { | |||
color: black; | color: black; | ||
text-aling: center; | text-aling: center; | ||
| Строка 224: | Строка 234: | ||
max-hight: 500px; | max-hight: 500px; | ||
opacity: 1; | opacity: 1; | ||
} | |||
/* Анимация сдвига только в рамках своей колонки */ | |||
.menu-column .dropdown.active ~ .dropdown { | |||
transform: translateY(100%); | |||
transition: transform 0.3s ease-in-out; | |||
} | |||
/* Responsive: на узких экранах колонки идут друг под другом */ | |||
@media (max-width: 800px) { | |||
.dropdown-container { | |||
flex-direction: column; | |||
gap: 10px; | |||
max-width: 95%; | |||
} | |||
.menu-column { | |||
min-width: 0; | |||
} | |||
.dropbtn { font-size: 18px; } | |||
} | } | ||