MediaWiki:Common.css

/* CSS placed here will be applied to all skins */

/* Снимаем ограничения ширины с главного контейнера оглавления */
#mw-panel .toc,
#mw-panel #toc {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: block !important; /* Убиваем дефолтный display: table, который распирает блок */
}

/* Уменьшаем огромные отступы у вложенных списков (лесенку) */
#mw-panel .toc ul,
#mw-panel #toc ul {
    margin-left: 12px !important; /* Делаем шаг вложенности минимальным */
    padding-left: 0 !important;
}

/* Превращаем ссылки во Flex-контейнеры, чтобы номер и текст не конфликтовали */
#mw-panel .toc a,
#mw-panel #toc a {
    display: flex !important;
    align-items: flex-start !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Заставляем сам текст ломаться и переноситься, заполняя остаток ширины */
#mw-panel .toc .toctext,
#mw-panel #toc .toctext {
    white-space: normal !important;
    word-break: break-word !important; /* Сломает слово, только если оно длиннее всего сайдбара */
    overflow-wrap: break-word !important;
    padding-left: 0 !important;
    flex: 1 !important; /* Текст занимает всё оставшееся место */
}

/* Фиксируем цифры, чтобы Flexbox их не сплющил при длинном тексте */
#mw-panel .toc .tocnumber,
#mw-panel #toc .tocnumber {
    flex-shrink: 0 !important;
    margin-right: 0 !important;
    padding-right: 6px !important;
}

/* Раздвигаем пункты содержания по вертикали */
#mw-panel .toc li,
#mw-panel #toc li {
    margin-bottom: 8px !important; 
}

/* Отрываем блок подпунктов от родительского текста */
#mw-panel .toc ul ul,
#mw-panel #toc ul ul {
    margin-top: 8px !important;
}

/* Обычная (непосещенная) ссылка */
#mw-panel .toc a:link,
#mw-panel #toc a:link {
    color: #3366BB !important;
}

/* Посещенная ссылка (стандартный фиолетовый цвет MediaWiki) */
#mw-panel .toc a:visited,
#mw-panel #toc a:visited {
    color: #0B0080 !important; 
}

/* Красная (битая) ссылка */
#mw-panel .toc a.new,
#mw-panel #toc a.new {
    color: #CC2200 !important;
}


/* --- Независимость левого сайдбара с содержанием --- */

#mw-panel {
    position: -webkit-sticky !important; /* Для поддержки Safari */
    position: sticky !important;
    top: 0 !important; /* Прилипаем к самому верху экрана при скролле статьи */
    height: 100vh !important; /* Высота панели строго равна высоте окна браузера */
    overflow-y: auto !important; /* Включаем свой независимый скролл для сайдбара */
    overflow-x: hidden !important; /* Прячем горизонтальный скролл на всякий случай */
}

/* Делаем ползунок скролла тонким и красивым (для браузеров Chrome/Edge/Safari/Opera) */
#mw-panel::-webkit-scrollbar {
    width: 6px;
}
#mw-panel::-webkit-scrollbar-track {
    background: transparent;
}
#mw-panel::-webkit-scrollbar-thumb {
    background-color: #c8ccd1; /* Спокойный серый цвет, как в Википедии */
    border-radius: 4px;
}