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