MediaWiki:Common.css
Jump to navigation
Jump to search
Note: After saving, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Go to Menu → Settings (Opera → Preferences on a Mac) and then to Privacy & security → Clear browsing data → Cached images and files.
/* 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: fixed !important;
top: 0 !important;
left: 0 !important;
height: 100vh !important;
overflow-y: auto !important;
overflow-x: hidden !important;
padding-top: 0 !important;
z-index: 99 !important;
width: 10.4em !important; /* Сдвигаем невидимую границу вправо, освобождая место для поиска */
}
/* Возвращаем логотип внутрь сайдбара и защищаем его подпись */
#p-logo {
position: relative !important;
top: 0 !important;
display: block !important;
min-height: 180px !important; /* Жестко бронируем высоту, чтобы надпись "documentation" точно влезла */
margin-bottom: 15px !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;
}
/* Создаем невидимую пустую область (распорку) в самом низу содержимого сайдбара */
#mw-panel::after {
content: "";
display: block;
height: 50px;
}
