MediaWiki:Vector.css: различия между версиями
Shihov (обсуждение | вклад) Нет описания правки |
Shihov (обсуждение | вклад) Нет описания правки |
||
| Строка 146: | Строка 146: | ||
/* Контейнер для категорий (прокрутка) */ | /* Контейнер для категорий (прокрутка) */ | ||
/* Фиксируем сайдбар, но отключаем его прокрутку */ | |||
#mw-panel { | |||
position: fixed !important; | |||
height: 100vh !important; | |||
width: 220px !important; | |||
overflow: hidden !important; /* Важно: отключаем прокрутку всей панели */ | |||
} | |||
/* Логотип остается фиксированным */ | |||
#p-logo { | |||
position: sticky !important; | |||
top: 0 !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; | |||
} | |||
/* Само indexmenu (категории) прокручивается отдельно */ | |||
div.catlinks { | div.catlinks { | ||
position: absolute !important; | position: absolute !important; | ||
top: 150px !important; | top: 150px !important; /* Регулируем отступ */ | ||
left: 0 !important; | left: 0 !important; | ||
width: 100% !important; | width: 100% !important; | ||
height: calc(100vh - 150px) !important; | height: calc(100vh - 150px) !important; /* Высота с учетом остальных элементов */ | ||
overflow-y: auto !important; | overflow-y: auto !important; | ||
scrollbar-width: thin !important; | scrollbar-width: thin !important; | ||
scrollbar-color: #adb5bd #f8f9fa !important; | scrollbar-color: #adb5bd #f8f9fa !important; | ||
transition: opacity 0.3s ease-in-out; /* | transition: opacity 0.3s ease-in-out !important; | ||
} | |||
/* Стили полосы прокрутки (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; | |||
} | } | ||
/* Добавляем | /* Добавляем эффект исчезновения при достижении границ */ | ||
div.catlinks::before, div.catlinks::after { | div.catlinks::before, | ||
div.catlinks::after { | |||
content: "" !important; | content: "" !important; | ||
position: absolute !important; | position: absolute !important; | ||