/* Читаемость текста поверх тем Tabler — грузится на КАЖДОЙ странице админки * (подключён в layout.html, который наследуют и кастомные страницы, и * списки/формы starlette-admin). * * Зачем файл вообще нужен. Прод-тема Tabler 1.1.0 задаёт * `--tblr-badge-color: var(--tblr-secondary)` — то есть текст ЛЮБОГО сплошного * бейджа рисуется серым #6c7a91. На `.bg-secondary` цвет текста совпадает с * фоном буквально до байта, и надпись исчезает; на остальных цветах получается * серое на насыщенном — контраст 1.4-2.5 при норме 4.5. * * Локально это НЕ воспроизводится: dev отдаёт ванильный Bootstrap, где текст * бейджа белый. Поэтому правки цвета в отдельных шаблонах не помогали — чинить * надо один раз и глобально. * * Проверено на проде (google-admin.top) замером computed-стилей: * .badge.bg-secondary color rgb(108,122,145) / bg rgb(108,122,145) → 1.0 * .badge.bg-success color rgb(108,122,145) / bg rgb(47,179,68) → 1.4 * .btn-warning color rgb(246,248,251) / bg rgb(247,103,7) → 2.9 * * Границы вмешательства: трогаем только СПЛОШНЫЕ заливки. Мягкие плашки * (`bg-*-lt`, `bg-*-opacity-*`, `text-bg-*`) сами задают себе цвет текста — * их перекрашивание сломало бы задуманный вид. */ /* ── Бейджи со сплошной заливкой ─────────────────────────────────────────── */ .badge.bg-primary:not([class*="bg-opacity"]), .badge.bg-secondary:not([class*="bg-opacity"]), .badge.bg-success:not([class*="bg-opacity"]), .badge.bg-danger:not([class*="bg-opacity"]), .badge.bg-info:not([class*="bg-opacity"]), .badge.bg-dark:not([class*="bg-opacity"]), .badge.bg-blue:not([class*="bg-opacity"]), .badge.bg-azure:not([class*="bg-opacity"]), .badge.bg-indigo:not([class*="bg-opacity"]), .badge.bg-purple:not([class*="bg-opacity"]), .badge.bg-pink:not([class*="bg-opacity"]), .badge.bg-red:not([class*="bg-opacity"]), .badge.bg-green:not([class*="bg-opacity"]), .badge.bg-teal:not([class*="bg-opacity"]), .badge.bg-cyan:not([class*="bg-opacity"]) { color: #fff !important; } /* Зелёный и голубой темы светлее остальных: белым по ним выходит 2.7 и 3.0 даже после починки цвета текста. Для БЕЙДЖЕЙ (текст мелкий, 0.857em) берём тон на пару ступеней темнее — те же цвета палитры Tabler, только глубже. Кнопки не трогаем: там шрифт крупнее, и перекрашивание сместило бы привычный вид основных действий. */ .badge.bg-success:not([class*="bg-opacity"]) { background-color: #238833 !important; } .badge.bg-info:not([class*="bg-opacity"]) { background-color: #2374bb !important; } .badge.bg-teal:not([class*="bg-opacity"]) { background-color: #087f5b !important; } .badge.bg-cyan:not([class*="bg-opacity"]) { background-color: #0b7285 !important; } .badge.bg-green:not([class*="bg-opacity"]) { background-color: #238833 !important; } /* Жёлтый/оранжевый/лаймовый фон светлый — на нём читается тёмный текст. */ .badge.bg-warning:not([class*="bg-opacity"]), .badge.bg-orange:not([class*="bg-opacity"]), .badge.bg-yellow:not([class*="bg-opacity"]), .badge.bg-lime:not([class*="bg-opacity"]), .badge.bg-light:not([class*="bg-opacity"]), .badge.bg-white:not([class*="bg-opacity"]) { color: #1a2333 !important; } /* ── Кнопки ──────────────────────────────────────────────────────────────── */ /* Цвет задаём через переменные кнопки, а не `color`: иначе ховер и :active вернут исходный нечитаемый оттенок. */ .btn-warning, .btn-orange, .btn-yellow { --tblr-btn-color: #1a2333; --tblr-btn-hover-color: #1a2333; --tblr-btn-active-color: #1a2333; } /* Утилита `bg-*` на кнопке фон перекрашивает (`!important`), а текст — нет: на тёмной заливке остаётся тёмная надпись. */ .btn.bg-primary, .btn.bg-secondary, .btn.bg-success, .btn.bg-danger, .btn.bg-info, .btn.bg-dark { color: #fff !important; } .btn.bg-warning, .btn.bg-light, .btn.bg-white { color: #1a2333 !important; } /* Обводочные кнопки: у Tabler надпись берёт «чистый» цвет темы, и на светлом фоне страницы это 2.5-2.9. Затемняем сам текст, рамку не трогаем — вид сохраняется, читаемость дотягивается до нормы. */ .btn-outline-success { --tblr-btn-color: #1f7a33; } .btn-outline-warning { --tblr-btn-color: #a34a05; } .btn-outline-info { --tblr-btn-color: #1c6bb0; } .btn-outline-secondary { --tblr-btn-color: #55617a; } /* Выключенная пагинация: стрелки почти сливались с фоном. */ .page-item.disabled .page-link { color: #8a97ab; } /* ── Мягкие плашки, которые Tabler отрисовывает сплошными ────────────────── */ /* `bg-opacity-*` к `.bg-success` и родне не применяется (Tabler не заводит `--tblr-bg-opacity` для этих утилит), поэтому «полупрозрачная» плашка выходит насыщенной, а тёмный текст на ней нечитаем. Возвращаем прозрачность явно — так плашка выглядит как задумано и текст остаётся тёмным. */ .bg-primary.bg-opacity-10 { background-color: rgba(var(--tblr-primary-rgb), .1) !important; } .bg-secondary.bg-opacity-10 { background-color: rgba(var(--tblr-secondary-rgb), .1) !important; } .bg-success.bg-opacity-10 { background-color: rgba(var(--tblr-success-rgb), .1) !important; } .bg-danger.bg-opacity-10 { background-color: rgba(var(--tblr-danger-rgb), .1) !important; } .bg-warning.bg-opacity-10 { background-color: rgba(var(--tblr-warning-rgb), .1) !important; } .bg-info.bg-opacity-10 { background-color: rgba(var(--tblr-info-rgb), .1) !important; } .bg-primary.bg-opacity-25 { background-color: rgba(var(--tblr-primary-rgb), .25) !important; } .bg-secondary.bg-opacity-25 { background-color: rgba(var(--tblr-secondary-rgb), .25) !important; } .bg-success.bg-opacity-25 { background-color: rgba(var(--tblr-success-rgb), .25) !important; } .bg-danger.bg-opacity-25 { background-color: rgba(var(--tblr-danger-rgb), .25) !important; } .bg-warning.bg-opacity-25 { background-color: rgba(var(--tblr-warning-rgb), .25) !important; } .bg-info.bg-opacity-25 { background-color: rgba(var(--tblr-info-rgb), .25) !important; } /* ── Точечные подписи, тонувшие в фоне ───────────────────────────────────── */ /* Второстепенный текст на сером фоне карточек: #868e96 на #f1f3f5 = 2.99. `.text-muted` в целом не трогаем — на белом он проходит по контрасту, а глобальное затемнение изменило бы вид всей админки. */ .tc-alias { color: #616874; }