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

Текущая версия от 17:29, 9 мая 2025

.mw-collapsible {
    width: 100%;
    border: 1px solid #aaa;
    margin-bottom: 10px;
}

.mw-collapsible-toggle {
    font-weight: bold;
    background: #f8f9fa;
    padding: 5px;
    cursor: pointer; /* Добавляет указатель мыши для интерактивности */
}

.mw-collapsible-content {
    padding: 10px;
    display: none; /* Скрывает содержимое по умолчанию */
}

.mw-collapsible.mw-expanded .mw-collapsible-content {
    display: block; /* Показывает содержимое, когда элемент развернут */
}

@@ Строка 1: / Строка 1: @@
-/* Стили для Collapse-блоков */
+.mw-collapsible {
-.mw-collapse-container {
      width: 100%;
-    margin-bottom: 15px;
+     border: 1px solid #aaa;
-     border-radius: 4px;
+     margin-bottom: 10px;
-     overflow: hidden;
-    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
 }
-.mw-collapse-header {
+.mw-collapsible-toggle {
-     display: flex;
+     font-weight: bold;
-    justify-content: space-between;
-    align-items: center;
-    cursor: pointer;
-    padding: 12px 15px;
      background: #f8f9fa;
-    border: 1px solid #a2a9b1;
+     padding: 5px;
-    font-weight: bold;
+     cursor: pointer; /* Добавляет указатель мыши для интерактивности */
-    color: #222;
-    transition: background 0.2s ease;
-}
-.mw-collapse-header:hover {
-    background: #e6f2ff;
-}
-.mw-collapse-arrow {
-    margin-left: 10px;
-    font-size: 0.9em;
-    transition: transform 0.2s ease;
-}
-.mw-collapse-content {
-     padding: 15px;
-    border: 1px solid #a2a9b1;
-    border-top: none;
-    background: #fff;
-    display: none;
-     animation: fadeIn 0.3s ease;
 }
-/* Анимация появления */
+.mw-collapsible-content {
-@keyframes fadeIn {
+     padding: 10px;
-     from { opacity: 0; transform: translateY(-10px); }
+     display: none; /* Скрывает содержимое по умолчанию */
-     to { opacity: 1; transform: translateY(0); }
 }
-/* Для активного состояния */
+.mw-collapsible.mw-expanded .mw-collapsible-content {
-.mw-collapse-header.active .mw-collapse-arrow {
+     display: block; /* Показывает содержимое, когда элемент развернут */
-     transform: rotate(90deg);
 }