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

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

@@ Строка 146: / Строка 146: @@
 /* Контейнер для категорий (прокрутка) */
-#mw-panel {
+/* Контейнер категорий, добавляем прокрутку */
-position: fixed !important;
+#p-categorytree-portlet {
-height: 100vh !important;
+    max-height: 300px !important; /* Ограничиваем высоту контейнера */
-overflow-y: auto !important;
+    overflow-y: auto !important; /* Разрешаем прокрутку */
+    position: relative !important;
 }
-#content {
+/* Добавляем градиентные маски для эффекта исчезновения */
-margin-left: 22em !important; /* Учитываем ширину сайдбара */
+#p-categorytree-portlet::before,
+#p-categorytree-portlet::after {
+    content: "" !important;
+    position: absolute !important;
+    left: 0 !important;
+    width: 100% !important;
+    height: 30px !important;
+    pointer-events: none !important;
+    transition: opacity 0.3s ease-in-out !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;
+}
+#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;
 }