Difference between revisions of "MediaWiki:Common.css"
Jump to navigation
Jump to search
(Исправление переносов текста левого сайдбара) |
(Исправление переносов текста левого сайдбара) |
||
| Line 1: | Line 1: | ||
/* CSS placed here will be applied to all skins */ | /* CSS placed here will be applied to all skins */ | ||
| − | /* | + | /* Снимаем ограничения ширины с главного контейнера оглавления */ |
| − | #mw-panel | + | #mw-panel .toc, |
| − | #mw-panel | + | #mw-panel #toc { |
width: 100% !important; | width: 100% !important; | ||
max-width: 100% !important; | max-width: 100% !important; | ||
| − | + | box-sizing: border-box !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: 6px !important; /* Аккуратный отступ от цифры */ | ||
| + | flex: 1 !important; /* Текст занимает всё оставшееся место */ | ||
| + | } | ||
| + | |||
| + | /* Фиксируем цифры, чтобы Flexbox их не сплющил при длинном тексте */ | ||
| + | #mw-panel .toc .tocnumber, | ||
| + | #mw-panel #toc .tocnumber { | ||
| + | flex-shrink: 0 !important; | ||
} | } | ||
Revision as of 10:16, 17 June 2026
/* 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: 6px !important; /* Аккуратный отступ от цифры */
flex: 1 !important; /* Текст занимает всё оставшееся место */
}
/* Фиксируем цифры, чтобы Flexbox их не сплющил при длинном тексте */
#mw-panel .toc .tocnumber,
#mw-panel #toc .tocnumber {
flex-shrink: 0 !important;
}