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

← Предыдущая правка Следующая правка →

@@ Строка 143: / Строка 143: @@
      background: linear-gradient(145deg, #ebf0f5, #e2e8ee) !important;
      transform: scale(1.03) !important;
+}
+/* Сдвиг обсуждение */
+#left-navigation {
+    position: absolute !important; /*  Абсолютное позиционирование */
+    z-index: 10 !important;      /*  Устанавливаем высокий z-index, чтобы был поверх */
+    left: 250px !important;       /*  Устанавливаем отступ слева */
+}
+/* Промотка индексменю */
+/* Общие стили для левой панели */
+#mw-panel {
+    position: fixed !important;
+    height: 100vh !important;
+    overflow-x: hidden !important; /* Скрываем горизонтальную прокрутку */
+    overflow-y: auto !important; /* Добавляем вертикальную прокрутку для всей панели, но сейчас это не должно влиять на другие элементы */
 }
-/* сдвиг обсуждение */
+/* Логотип */
-#left-navigation {
+#p-logo {
-     margin-left: 250px !important; /*  Или другое значение, в зависимости от желаемого отступа */
+     position: sticky !important;
+    top: 0 !important;
+    z-index: 2 !important; /* Выше дерева категорий */
+    background-color: #f8f9fa !important; /* Фон панели */
 }
-/* Контейнер для категорий (прокрутка) */
+/* Навигация */
-/* Контейнер категорий, добавляем прокрутку */
+#p-navigation {
-#p-categorytree-portlet {
+    position: sticky !important;
-   max-height: 1000px !important;  /* Ограничиваем высоту контейнера */
+    top: 50px !important; /* Отступ от логотипа */
-     overflow-y: auto !important; /* Разрешаем прокрутку */
+     z-index: 2 !important; /* Выше дерева категорий */
-     position: relative !important;
+     background-color: #f8f9fa !important; /* Фон панели */
 }
-/* Добавляем градиентные маски для эффекта исчезновения */
+/* Контейнер для категорий */
-#p-categorytree-portlet::before,
+div.catlinks {
-#p-categorytree-portlet::after {
+     position: relative !important; /* Важно: Используем relative, а не absolute */
-     content: "" !important;
+     top: 150px !important; /* Регулируйте отступ */
-     position: absolute !important;
      left: 0 !important;
      width: 100% !important;
-     height: 30px !important;
+     height: calc(100vh - 150px - 50px) !important; /* Регулируйте высоту, учитывая высоту навигации */
-     pointer-events: none !important;
+     overflow-y: auto !important; /* Добавляем прокрутку только для этого блока */
-     transition: opacity 0.3s ease-in-out !important;
+    scrollbar-width: thin !important; /* Для Firefox */
+    scrollbar-color: #adb5bd #f8f9fa !important; /* Для Firefox */
+}
+/* Стили полосы прокрутки (Chrome, Edge, Safari) */
+div.catlinks::-webkit-scrollbar {
+     width: 8px !important;
+}
+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;
 }
-#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;
+#mw-head {
+     margin-left: 220px !important; /* Ширина сайдбара */
 }
-#p-categorytree-portlet::after {
+/* Панель навигации (если нужно) */
-     bottom: 0 !important;
+#mw-navigation {
-    background: linear-gradient(to top, rgba(248, 249, 250, 1), rgba(248, 249, 250, 0)) !important;
+     margin-left: 220px !important; /* Ширина сайдбара */
-    opacity: 0 !important;
 }
-/* Изменяем прозрачность при прокрутке */
+/* Скрываем стандартные catlinks если необходимо */
-#p-categorytree-portlet:hover {
+#catlinks {
-     opacity: 1 !important;
+     display: none !important;
 }