/* ========================================================================== chipps-widgets.css — тёмная тема для сторонних виджетов формы тикета. Охват: select2 / jquery.formstyler / redactor 3 / filedrop. Загружается ПОСЛЕДНИМ в client_chipps/header.inc.php (после select2.min.css), поэтому перебивает дефолты всех виджет-CSS по порядку загрузки — без !important. Все значения — токены из chipps-theme.css (:root). TASK-002b | hellochipps support portal ========================================================================== */ /* ========================================================================== 1. SELECT2 ========================================================================== Две стратегии специфичности: - Контрол (внутри формы): site.css задаёт правила через .c-select-wrapper .select2-container .select2-selection--single (0,3,0). Чтобы перебить, используем родителя той же глубины: .c-select-wrapper .select2-container--default .select2-selection--single (0,3,0). - Плюс общий fallback (0,2,0) для динамических полей вне .c-select-wrapper. - Дропдаун (рендерится в конец , вне формы): глобальные селекторы, порядка загрузки достаточно (site.css дропдаун не трогает). ========================================================================== */ /* --- Контрол: высокая специфичность (site.css override) --- */ .c-select-wrapper .select2-container--default .select2-selection--single { background: var(--bg-800); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); } .c-select-wrapper .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--text-100); font-weight: 400; } .c-select-wrapper .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--text-300); } .c-select-wrapper .select2-container--default .select2-selection--single .select2-selection__arrow b { border-top-color: var(--text-300); } /* Открытое состояние контрола — рамка акцентом */ .c-select-wrapper .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--accent-cyan); } /* --- Контрол: общий fallback для динамических полей вне .c-select-wrapper --- */ .select2-container--default .select2-selection--single { background: var(--bg-800); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); } .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--text-100); font-weight: 400; } .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--text-300); } .select2-container--default .select2-selection--single .select2-selection__arrow b { border-top-color: var(--text-300); } /* Открытое состояние — fallback */ .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--accent-cyan); } /* --- Контрол select2 внутри .form-group (Time zone на регистрации и т.п.) --- site.css .form-group .select2-…--single (0,3,0) перебивает наш generic (0,2,0) светлым #fff — дублируем тёмную тему на .form-group-специфичности. */ .form-group .select2-container--default .select2-selection--single { background: var(--bg-800); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); } .form-group .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--text-100); font-weight: 400; } .form-group .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--text-300); } .form-group .select2-container--default .select2-selection--single .select2-selection__arrow { border-left-color: var(--line-soft); } .form-group .select2-container--default .select2-selection--single .select2-selection__arrow b { border-top-color: var(--text-300); } .form-group .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--accent-cyan); } /* Кнопка очистки (×) при allowClear — видима на тёмном */ .select2-selection__clear { color: var(--text-300); } /* Размер текста контрола и опций select2/formstyler = 16px (под c-input; был inherited 14px) */ .select2-selection__rendered, .select2-results__option, .jq-selectbox__select-text, .jq-selectbox__dropdown li { font-size: 16px; } /* --- Дропдаун (глобально — рендерится в ) --- */ .select2-dropdown { background: var(--bg-800); border-color: var(--line-soft); border-radius: var(--radius-sm); } .select2-container--default .select2-results__option { color: var(--text-100); } /* Наведённый пункт (курсор) — циан-фон + тёмный текст, как у кнопки. Префикс .select2-container--default обязателен: иначе select2.min.css (0,3,0) перебивает наше правило и остаётся дефолтный синий #5897fb. */ .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--accent-cyan); color: var(--text-on-accent); } /* Уже выбранный пункт (текущее значение) — тёмный фон + циан-текст. Перебивает светлый #ddd из select2.min.css (0,2,1). */ .select2-container--default .select2-results__option[aria-selected=true] { background: var(--bg-700); color: var(--accent-cyan); } /* Поле поиска внутри дропдауна */ .select2-search__field { background: var(--bg-800); color: var(--text-100); border: 1px solid var(--line-soft); } /* --- Высота контрола select2 = высоте c-input (auto от padding/line-height) --- Перебить фиксированные 33px из site.css: .c-select-wrapper(956) и .form-group(1449), а также select2.min.css default. Специфичность совпадает с site.css → побеждает порядком. */ .c-select-wrapper .select2-container--default .select2-selection--single, .form-group .select2-container--default .select2-selection--single, .select2-container--default .select2-selection--single { height: auto; min-height: 0; padding: 14px 16px; } .c-select-wrapper .select2-container--default .select2-selection--single .select2-selection__rendered, .form-group .select2-container--default .select2-selection--single .select2-selection__rendered, .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 26px; padding: 0 24px 0 0; /* отступ под стрелку; left-отступ даёт padding контрола */ } .c-select-wrapper .select2-container--default .select2-selection--single .select2-selection__arrow, .form-group .select2-container--default .select2-selection--single .select2-selection__arrow, .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; top: 0; } /* Треугольник стрелки — перецентрировать (form-group ставил top:15px фикс из site.css:1467) */ .c-select-wrapper .select2-container--default .select2-selection--single .select2-selection__arrow b, .form-group .select2-container--default .select2-selection--single .select2-selection__arrow b, .select2-container--default .select2-selection--single .select2-selection__arrow b { top: 50%; transform: translateY(-50%); margin-top: 0; } /* ========================================================================== 2. FORMSTYLER (jquery.formstyler) ========================================================================== Базовая структура — jquery.formstyler.css; цвета переопределены в site.css (строки 906–988), грузятся ДО нас. Наш файл идёт позже — перебивает штатно. ========================================================================== */ /* Контрол — обёртка. Высота auto под c-input (перебить height:33px из site.css:911) */ .jq-selectbox__select { background: var(--bg-800); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); height: auto; min-height: 0; padding: 14px 40px 14px 16px; } /* Текст выбранного значения (перебить bold #808080 + line-height:31px из site.css) */ .jq-selectbox__select-text { color: var(--text-100); font-weight: 400; line-height: 26px; } /* Стрелка-триггер: перецентрировать по высоте контрола (был top:14px фикс) */ .jq-selectbox__trigger-arrow { border-top-color: var(--text-300); top: 50%; transform: translateY(-50%); } /* Дропдаун */ .jq-selectbox__dropdown { background: var(--bg-800); border-color: var(--line-soft); border-radius: var(--radius-sm); } /* Пункты списка */ .jq-selectbox__dropdown li { color: var(--text-100); } /* Наведённый пункт (курсор) — циан-фон + тёмный текст (как у кнопки) */ .jq-selectbox__dropdown li:hover { background: var(--accent-cyan); color: var(--text-on-accent); } /* Выбранный пункт (текущее значение) — тёмный фон + циан-текст */ .jq-selectbox__dropdown li.sel { background: var(--bg-700); color: var(--accent-cyan); } /* Открытый контрол — рамка акцентом */ .jq-selectbox.opened .jq-selectbox__select { border-color: var(--accent-cyan); } /* Чекбокс */ .jq-checkbox { background: var(--bg-800); border: 1px solid var(--line-soft); } /* Маркер чекбокса (отметка) */ .jq-checkbox span { background: var(--accent-cyan); } /* Радио-кнопка */ .jq-radio { background: var(--bg-800); border: 1px solid var(--line-soft); } /* Маркер радио (точка) */ .jq-radio span { background: var(--accent-cyan); } /* ========================================================================== 3. REDACTOR 3 ========================================================================== redactor.min.css грузится на строке 71 header.inc.php — раньше нашего файла. Перебиваем по порядку загрузки. Там где специфичность дефолта выше — поднимаем родительским селектором (без !important). Только цвет/фон/рамка — не трогаем layout, позиционирование, размеры. ========================================================================== */ /* Внешняя рамка редактора */ .redactor-box { background: var(--bg-800); border: 1px solid var(--line-soft); } /* Режим styles-on (redactor вставляет класс на box при инициализации) */ .redactor-box.redactor-styles-on { background: var(--bg-800); } /* Область ввода */ .redactor-in, .redactor-editor { background: var(--bg-800); color: var(--text-100); } /* Тулбар */ .redactor-toolbar { background: var(--bg-700); border-bottom: 1px solid var(--line-soft); } /* Ссылки (кнопки) тулбара */ .redactor-toolbar a { color: var(--text-100); background: var(--bg-700); } /* Hover кнопки тулбара */ .redactor-toolbar a:hover { color: var(--accent-cyan); background: var(--bg-700); } /* Активная/нажатая кнопка тулбара */ .redactor-toolbar a.redactor-button-active { color: var(--accent-cyan); background: var(--bg-800); } /* Иконки тулбара — наследуют цвет родительского */ .redactor-toolbar a [class^="re-icon-"], .redactor-toolbar a [class*=" re-icon-"] { color: inherit; } /* Статусбар (нижняя строка редактора) */ .redactor-statusbar { background: var(--bg-700); color: var(--text-300); border-top: 1px solid var(--line-soft); } /* Специфичность: перебиваем дефолты redactor через родителя .redactor-box */ .redactor-box .redactor-toolbar a { color: var(--text-100); background: var(--bg-700); } .redactor-box .redactor-toolbar a:hover { color: var(--accent-cyan); } /* ========================================================================== 4. FILEDROP ========================================================================== filedrop.css грузится до chipps-theme.css. Наш файл идёт последним. JS-класс drag-state у этой реализации filedrop НЕ вешается на dropzone (filedrop.field.js dragEnter/dragOver зовут пустые колбэки) — используем :hover. ========================================================================== */ /* Drop-зона */ .filedrop .dropzone { border: 2px dashed var(--line-soft); background: var(--bg-700); color: var(--text-300); } /* Hover drop-зоны (замена JS drag-state) */ .filedrop .dropzone:hover { border-color: var(--accent-cyan); } /* Ссылки внутри drop-зоны (browse-link и т.п.) */ .filedrop .dropzone a { color: var(--accent-cyan); } /* Список загруженных файлов */ .filedrop .files { border-color: var(--line-soft); } /* Строка файла при hover */ .filedrop .file:hover { background: var(--bg-700); } /* Размер файла */ .filedrop .filesize { color: var(--text-300); } /* Прогресс-трек */ .filedrop .progress { background: var(--bg-700); } /* Прогресс-бар */ .filedrop .progress-bar { background: var(--accent-cyan); color: var(--text-on-accent); }