Difference between revisions of "MediaWiki:Common.css"

From QuData
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 */
  
/* Жестко вписываем контейнер DeToc в габариты сайдбара */
+
/* Снимаем ограничения ширины с главного контейнера оглавления */
#mw-panel #toc,
+
#mw-panel .toc,
#mw-panel .toc {
+
#mw-panel #toc {
 
     width: 100% !important;
 
     width: 100% !important;
 
     max-width: 100% !important;
 
     max-width: 100% !important;
     min-width: 0 !important; /* Убиваем дефолтную минимальную ширину плагина/движка */
+
     box-sizing: border-box !important;
     box-sizing: border-box !important; /* Учитываем внутренние отступы, чтобы они не распирали блок */
+
    display: block !important; /* Убиваем дефолтный display: table, который распирает блок */
     display: block !important; /* Отключаем табличное отображение, если оно там есть */
+
}
 +
 
 +
/* Уменьшаем огромные отступы у вложенных списков (лесенку) */
 +
#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;
}