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

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

@@ Строка 1: / Строка 1: @@
+.vector-legacy-sidebar {
+font-size: 0.8em !important;
+}
 /* Весь CSS будет отсюда будет загружен пользователям темы оформления «Векторная» */
+.mw-content-ltr img {
+	display: inline !important;
+}
+#p-logo a{
+	position: absolute !important;
+	top: 10px !important;
+	left: -70px !important;
+    height: 60px !important; /* Ограниченная высота */
+    width: 500px !important;
+    background-size: contain !important;
+}
 /* Увеличение ширины сайдбара */
 /* Увеличение ширины сайдбара */
 #mw-panel {
-     width: 20em !important;
+     width: 32em !important;
 }
 /* Сдвиг основного контента, чтобы учесть расширение сайдбара */
 #content {
-     margin-left: 23em !important; /* Немного больше, чтобы учесть отступы */
+     margin-left: 27em !important; /* Немного больше, чтобы учесть отступы */
 }
 #footer {
-     margin-left: 22em !important;
+     margin-left: 30em !important;
 }
@@ Строка 17: / Строка 36: @@
      order: -1;
 }
-.catlinks { display: none !important; }
+/*.catlinks { display: none !important; }
 .mw-subcategories {
      display: none !important;
-}
+}*/
 /* Выравнивание текста при переносе */
@@ Строка 31: / Строка 50: @@
 #p-categorytree-portlet {
-   background: linear-gradient(145deg, #f8f9fa, #e9ecef) !important;
+  top: -95px;
+   background: linear-gradient(145deg, #f8f9fa, #e9ecef);
    border: 2px solid #cfd8dc !important;
    border-radius: 12px !important;
@@ Строка 54: / Строка 74: @@
    border: 1px solid #dee2e6 !important;
    border-radius: 10px !important;
-   background: linear-gradient(145deg, #ffffff, #f1f3f5) !important;
+   background: linear-gradient(145deg, #ffffff, #f1f3f5);
    transition: background 0.3s ease, transform 0.3s ease !important;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08), inset 0 1px 3px rgba(255, 255, 255, 0.6) !important;
@@ Строка 69: / Строка 89: @@
    border: 1px solid #d1d9de !important;
    border-radius: 8px !important;
-   background: linear-gradient(145deg, #fdfdfd, #f3f6f9) !important;
+   background: linear-gradient(145deg, #fdfdfd, #f3f6f9);
    transition: transform 0.2s ease, background-color 0.3s ease !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08), inset 0 2px 4px rgba(255, 255, 255, 0.5) !important;
@@ Строка 144: / Строка 164: @@
      transform: scale(1.03) !important;
 }
+/* Сдвиг обсуждение */
-/* Контейнер для категорий (прокрутка) */
+#left-navigation {
-/* Фиксируем сайдбар и отключаем его прокрутку */
+     position: absolute !important; /*  Абсолютное позиционирование */
-#mw-panel {
+     z-index: 10 !important;      /*  Устанавливаем высокий z-index, чтобы был поверх */
-     position: fixed !important;
+     left: 280px !important;       /*  Устанавливаем отступ слева */
-     height: 100vh !important;
-     width: 220px !important;
-    overflow: hidden !important; /* Запрещаем прокрутку всего сайдбара */
-    display: flex !important;
-    flex-direction: column !important;
 }
+/* Промотка индексменю */
-/* Фиксируем логотип */
+/* Контейнер категорий, добавляем прокрутку */
-#p-logo {
+#p-categorytree-portlet {
-    position: sticky !important;
+     max-height: 900px !important; /* Ограничиваем высоту контейнера */
-    top: 0 !important;
+     overflow-y: auto !important; /* Разрешаем прокрутку */
-    z-index: 10 !important;
-    background-color: #f8f9fa !important;
-}
-/* Фиксируем навигацию */
-#p-navigation {
-     position: sticky !important;
-    top: 50px !important; /* Регулируем отступ от логотипа */
-    z-index: 10 !important;
-    background-color: #f8f9fa !important;
-}
-/* Контейнер для категорий с прокруткой */
-div.catlinks {
-    flex-grow: 1 !important;
-     overflow-y: auto !important; /* Добавляем скролл */
-    scrollbar-width: thin !important;
-    scrollbar-color: #adb5bd #f8f9fa !important;
      position: relative !important;
 }
-/* Стили полосы прокрутки */
+/* Добавляем градиентные маски для эффекта исчезновения */
-div.catlinks::-webkit-scrollbar {
+#p-categorytree-portlet::before,
-    width: 8px !important;
+#p-categorytree-portlet::after {
-}
-div.catlinks::-webkit-scrollbar-track {
-    background: #f8f9fa !important;
-}
-div.catlinks::-webkit-scrollbar-thumb {
-    background-color: #adb5bd !important;
-    border-radius: 4px !important;
-    border: 2px solid #f8f9fa !important;
-}
-div.catlinks::-webkit-scrollbar-thumb:hover {
-    background-color: #868e96 !important;
-}
-/* Эффект исчезновения */
-div.catlinks::before,
-div.catlinks::after {
      content: "" !important;
      position: absolute !important;
@@ Строка 212: / Строка 190: @@
 }
-div.catlinks::before {
+#p-categorytree-portlet::before {
      top: 0 !important;
      background: linear-gradient(to bottom, rgba(248, 249, 250, 1), rgba(248, 249, 250, 0)) !important;
+    opacity: 0 !important;
 }
-div.catlinks::after {
+#p-categorytree-portlet::after {
      bottom: 0 !important;
      background: linear-gradient(to top, rgba(248, 249, 250, 1), rgba(248, 249, 250, 0)) !important;
+    opacity: 0 !important;
+}
+/* Изменяем прозрачность при прокрутке */
+#p-categorytree-portlet:hover {
+    opacity: 1 !important;
+}
+/*  Стиль для подсветки последнего открытого элемента */
+/* Подсветка выбранного элемента, стилизуем так же, как hover */
+.CategoryTreeItem.highlighted {
+    background: linear-gradient(145deg, #ebf0f5, #e2e8ee) !important;
+    transform: scale(1.03) !important;
+    border: 2px solid #007bff !important; /* Синий контур для выделения */
+}
+/* По умолчанию скрываем дерево категорий */
+@media (max-width: 768px) {
+    /* По умолчанию скрываем дерево категорий только на мобильных */
+    #p-categorytree-portlet {
+        display: none;
+    }
+    /* Кнопка для раскрытия дерева */
+    #category-toggle {
+        display: block;
+        text-align: center;
+        background: #007bff;
+        color: white;
+        padding: 8px 12px;
+        border-radius: 6px;
+        cursor: pointer;
+        font-size: 14px;
+        margin: 10px 0;
+        transition: background 0.3s ease;
+    }
+    #category-toggle:hover {
+        background: #0056b3;
+    }
 }