; контрол (видимая часть) — `.ts-control`, выпадающий список — `.ts-dropdown`. Tailwind-классы из field_cls не применяются к wrapper'у, поэтому стилизуем здесь. */ .ts-wrapper.single .ts-control, .ts-wrapper.multi .ts-control { border: 1px solid var(--color-silver, #e5e5e5); border-radius: 0.5rem; /* rounded-lg */ background: var(--color-cloud, #ffffff); padding: 0.6rem 1rem; min-height: 2.875rem; /* совпадает с py-3 в field_cls */ color: var(--color-inkwell, #0a0a0a); font-family: var(--font-sans, "Inter", system-ui, sans-serif); font-size: 1rem; box-shadow: none; } .ts-wrapper.single.focus .ts-control, .ts-wrapper.multi.focus .ts-control, .ts-wrapper.single .ts-control:focus-within, .ts-wrapper.multi .ts-control:focus-within { border-color: var(--color-sky-violet-400, #8b93a1); /* Двойной ring — белая подложка + графитовый контур; обеспечивает WCAG 3:1 contrast на белом и цветных фонах, видим при keyboard-focus. */ box-shadow: 0 0 0 1px var(--color-cloud, #ffffff), 0 0 0 3px var(--color-sky-violet-400, #8b93a1); outline: none; } .ts-wrapper.disabled .ts-control { opacity: 0.6; cursor: not-allowed; } .ts-control > input::placeholder { color: rgba(10, 10, 10, 0.4); } .ts-dropdown { border: 1px solid var(--color-silver, #e5e5e5); border-radius: 0.5rem; background: var(--color-cloud, #ffffff); box-shadow: 0 6px 24px -8px rgba(10, 10, 10, 0.12); font-family: var(--font-sans, "Inter", system-ui, sans-serif); font-size: 0.875rem; margin-top: 4px; padding: 4px 0; /* PE-94: dropdown переехал в через dropdownParent, нужен явный z-index выше любых модалок/панелей графа (turbo-confirm идёт на 200, панели — 120). */ z-index: 1000; /* PE-94: ограничение высоты + внутренний скролл — при длинных списках (десятки опций для parent_id) dropdown не тянется на пол-экрана. */ max-height: min(50vh, 320px); overflow-y: auto; } .ts-dropdown .option { padding: 0.45rem 1rem; color: var(--color-inkwell, #0a0a0a); cursor: pointer; /* Word-wrap длинных формулировок работ — иначе dropdown в узкой панели графа (~250px) пытается растянуться по самому длинному option и вылазит за viewport (PE-19 второй возврат). */ white-space: normal; word-break: break-word; line-height: 1.35; } .ts-dropdown .option:hover, .ts-dropdown .option.active { background: var(--color-genius-50, #eef7f0); color: var(--color-genius-900, #1f4a2b); } .ts-dropdown .option.selected { background: var(--color-genius-100, #dcefe1); color: var(--color-genius-900, #1f4a2b); font-weight: 600; } .ts-dropdown .optgroup-header { padding: 0.5rem 1rem 0.25rem; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(10, 10, 10, 0.45); background: transparent; border-top: 1px solid var(--color-silver, #e5e5e5); } .ts-dropdown .optgroup:first-child .optgroup-header { border-top: none; } .ts-dropdown .no-results { padding: 0.6rem 1rem; color: rgba(10, 10, 10, 0.5); font-size: 0.875rem; font-style: italic; } .ts-dropdown .create { padding: 0.45rem 1rem; color: var(--color-genius-500, #429158); } /* Карет / стрелка раскрытия. Tom Select добавляет ::after — переопределяем. */ .ts-wrapper.single .ts-control::after { border-color: var(--color-inkwell, #0a0a0a) transparent transparent transparent; } .ts-wrapper.single.dropdown-active .ts-control::after { border-color: transparent transparent var(--color-inkwell, #0a0a0a) transparent; } /* PE-100: блок оценки AI-генерации (звёзды + комментарий). Универсальный — показывается на странице любого Generation. */ .feedback-block { display: flex; flex-direction: column; gap: 12px; } .feedback-title { font-size: 14px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-inkwell, #0a0a0a); opacity: 0.7; margin: 0; } .feedback-hint { font-size: 13px; color: var(--color-inkwell, #0a0a0a); opacity: 0.6; margin: 0; } .feedback-saved { font-size: 14px; margin: 0; color: var(--color-inkwell, #0a0a0a); } .feedback-saved-comment { font-size: 13px; opacity: 0.7; font-style: italic; } .feedback-form { display: flex; flex-direction: column; gap: 12px; } .feedback-form.is-hidden { display: none; } .feedback-errors { list-style: disc; padding-left: 20px; color: #b04040; font-size: 13px; margin: 0; } /* Звёзды через CSS-trick: радио в обратном порядке (5..1) + row-reverse → визуально 1..5 → при :checked/:hover подсветка через ~ селектор затрагивает следующие в DOM = слева в визуальном. */ .feedback-stars { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; border: none; padding: 0; margin: 0; } .feedback-stars input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; } .feedback-stars label { cursor: pointer; font-size: 28px; line-height: 1; color: var(--color-silver, #d4d4d8); transition: color 120ms; user-select: none; } .feedback-stars label:hover, .feedback-stars label:hover ~ label, .feedback-stars input:checked ~ label, .feedback-stars input:checked + label { color: oklch(0.78 0.14 80); /* мягкий янтарь */ } .feedback-stars input:focus-visible + label { outline: 2px solid var(--color-sky-violet-400, #8b93a1); outline-offset: 2px; border-radius: 4px; } .feedback-comment-row { display: flex; flex-direction: column; gap: 4px; } .feedback-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-inkwell, #0a0a0a); opacity: 0.5; } .feedback-textarea { width: 100%; border: 1px solid var(--color-silver, #d4d4d8); border-radius: 0.5rem; padding: 0.6rem 0.8rem; background: var(--color-cloud, #ffffff); font-family: var(--font-sans, "Inter", system-ui, sans-serif); font-size: 13px; resize: vertical; } .feedback-textarea:focus { outline: none; border-color: var(--color-sky-violet-400, #8b93a1); box-shadow: 0 0 0 3px rgba(139, 147, 161, 0.2); } .feedback-submit { align-self: flex-start; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ── PE-264: iOS Safari auto-zoom — единый глобальный фикс ────────────────── iOS Safari принудительно зумит viewport при фокусе на form-контроле с font-size < 16px. Контролы приложения — text-sm (14px) / Tom-Select search- input (13px из tom_select.css). Живёт ЗДЕСЬ (а не в responsive.css), т.к. application.css грузится ВСЕМИ layout'ами — включая публичный landing (`/l/:token`, layout "landing"), куда responsive.css НЕ подключён. Статический Propshaft-файл → не зависит от пересборки Tailwind-билда (грабля stale-build PE-457/478). Консолидирует прежнее частичное правило PE-338 (было в responsive.css, покрывало лишь 2/3 layout'ов). Только мобайл (≤767.98px — рубеж responsive.css/PE-338): десктоп-плотность text-sm на owner-инпутах намеренная, не трогаем. iPad ≥768px portrait — вне scope (пилот = телефон). Опора на !important (а не cascade-порядок — application.css грузится первой). Tom-Select: фокус-таргет — прямой внутри .ts-control (single/multi search); plugin dropdown_input не используется (иначе поле переедет в .dropdown-input — не покрыто). */ @media (max-width: 767.98px) { input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]), select, textarea, .ts-control > input { font-size: 16px !important; } } /* ── PE-661: знак-плитка «Восхождение» в шапке app-layout ─────────────────── Логотип-марка приложения = ФИКСИРОВАННЫЙ бренд-ассет, НЕ перекрашивается под скин/тему. Литеральный hex намеренно (НЕ bg-genius-*): под .ds-skin мост legacy-bridge.css ремапит --color-genius-400 → var(--accent) → плитка «уехала» бы в акцент активной темы (Forest/Clay). Единственный зелёный #54b16c, тень #429158 (genius-500), радиус 14% (как icon.svg rx=72 на 512). Знак — белый inline-SVG внутри (см. layouts/application.html.erb). */ .pe-mark { background: #54b16c; border-radius: 14%; box-shadow: 0 2px 0 #429158; } /* Знак — ~72% плитки (вариант D владельца PE-661): крупнее, но полый узел не касается скруглённого угла. Пара «tight viewBox 7 7 50 50 (реальный bbox знака) + svg 72%». */ .pe-mark svg { display: block; width: 72%; height: 72%; }