MediaWiki:Citizen.css: различия между версиями

← Предыдущая правка

@@ Строка 159: / Строка 159: @@
 .desktop-hide {
-	display:none;
+ display:none;
 }
@@ Строка 170: / Строка 170: @@
 /* Контейнер для всех кнопок */
 .dropdown-container {
- display: flex;            /* располагаем категории в линию */
+    display: flex;
-  justify-content: center;  /* выравнивание по центру */
+    justify-content: space-between;
-   gap: 20px;                /* расстояние между категориями */
+}
-   background: #fff;         /* фон */
-   padding: 10px;
+.menu-column {
-  border-bottom: 2px solid #ccc;
+  display: flex;
+  flex-direction: column;
+   gap: 8px; /* расстояние между пунктами в колонке */
+   flex: 1;  /* колонки равной ширины */
+   min-width: 220px; /* при желании минимальная ширина */
 }
 /* Контейнер выпадающего списка */
-/* Подменю */
 .dropdown {
-  position: relative;
+    position: relative;
+    display: inline-block;
 }
 /* Кнопка для открытия списка */
 .dropbtn {
-   cursor: pointer;
+    background-color: black;
-  padding: 8px 16px;
+    color: white;
-  font-weight: bold;
+    padding: 10px 15px;
-  background: #f5f5f5;
+    font-size: 30px;
-  border: 1px solid #ccc;
+    cursor: pointer;
-  border-radius: 6px;
+    border-radius: 5px;
-   transition: all 0.2s ease;
+   width: 100%;       /* чтобы кнопка занимала ширину колонки */
-}
+   box-sizing: border-box;
+   text-align: center;
-.dropbtn:hover {
-   background: #e0e0e0;
-   transform: scale(1.05);
 }
 /* Контейнер списка (изначально скрыт) */
 .dropdown-content {
- display: none;
+    display: block; /* Скрываем через height, а не display */
-  position: absolute;
+    text-aling: center;
-  top: 100%;    /* появляется под кнопкой */
+    overflow: hidden;
-  left: 0;
+    max-height: 0;
-  background: #fff;
+    opacity: 0;
-  min-width: 180px;
+    transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
-  border: 1px solid #ccc;
-  border-radius: 6px;
-  padding: 10px;
-  flex-direction: column;
-  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
 }
 /* Стиль для ссылок внутри списка */
-.dropdown-content a {
+.dropdown-content a ,
+.dropdown-content h4 {
      color: black;
      text-aling: center;
-    padding: 10px 15px;
      text-decoration: none;
      display: block;
@@ Строка 229: / Строка 226: @@
      background-color: #f1f1f1;
 }
 /* Показываем список при клике (нужен JS) */
-.dropdown:hover .dropdown-content {
+.dropdown.active .dropdown-content {
-  display: flex;
+    max-hight: 500px;
+    opacity: 1;
+}
+/* Анимация сдвига только в рамках своей колонки */
+.menu-column .dropdown.active ~ .dropdown {
+  transform: translateY(100%);
+  transition: transform 0.3s ease-in-out;
 }
+/* Responsive: на узких экранах колонки идут друг под другом */
+max-width: 800px {
+  .dropdown-container {
+    flex-direction: column;
+    gap: 10px;
+    max-width: 95%;
+  }
+  .menu-column {
+    min-width: 0;
+  }
+  .dropbtn { font-size: 18px; }
+}
 /* Исправление отображения текста */
@@ Строка 667: / Строка 681: @@
-.toc {
-	border: 2px solid #FFFFFF !important;
-    padding: 5px !important;
-    border-image: url('') 30 round !important;
-    border-radius: 10px;
-    background: rgb(0 0 0 / 80%);
-    width: auto;
-    color: white;
-    margin-bottom: 20px;
-}
-.tocnumber {
-	color: white !important;
-}
-#toc {
-	display: inline-block;
-}
-.tocnumber:after { content: '.'
-}
-.toc ul ul{ 	margin-top: 5px !important;
-}
 .nav-link {
    color: #000000;