/* buttons.css — сессия UI-1, Вариант 3: шапка (Atsijungti/Spausdinti) + круглые пиктограммы действий на карточке оператора. Иконки — Tabler Icons (см. index.html , jsdelivr CDN, версия закреплена). */ /* UI-snippet: dock-magnification (сессия 2026-09-12, meta-system/ui-snippets/ interactions/dock-magnification.md) — macOS Dock-style увеличение иконок по близости курсора. Только hover-устройства — на тач (@media hover:hover не матчится) иконки остаются со своим обычным статичным hover. JS (initIconDock, index.html) ставит inline transform:scale() — он всегда сильнее правила из таблицы стилей, поэтому статичный .icon-btn:hover{transform:scale(1.1)} сам собой перебивается, пока курсор внутри дока (правка сессии 2026-09-12 — первая версия использовала свойство `scale`, слабее поддержанное браузерами и из-за этого эффект был еле заметен). */ @media (hover: hover) { .icon-dock .icon-btn { transition: transform .15s ease-out; transform-origin: center; will-change: transform; } } .chip.btn-logout, .chip.btn-print { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--radius-header); font-family: var(--sans); font-size: 12px; font-weight: 500; color: #fff; border: none; transition: filter .15s, transform .15s; } .chip.btn-logout:hover, .chip.btn-print:hover { filter: brightness(1.08); transform: translateY(-1px); } .chip.btn-logout { background: var(--btn-red); } .chip.btn-print { background: var(--btn-blue); } /* Круглые пиктограммы действий карточки оператора — hover: scale + brightness, паттерн 1:1 из repair-tracker (docs/ui-migration/repair-tracker-audit.md §4) */ .icon-btn { width: 34px; height: 34px; border-radius: 50%; border: none; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; cursor: pointer; transition: transform .15s ease, filter .15s ease; } .icon-btn:hover { transform: scale(1.1); filter: brightness(1.1); } .icon-btn i { line-height: 1; } .icon-btn-view { background: var(--btn-blue); } .icon-btn-edit { background: var(--text-blue-dark); } .icon-btn-delete { background: var(--status-red); } /* Ручная отправка в архив (Igor, отключаемое автоархивирование, сессия 2026-09-12 часть 4) — нейтральный серый, не хочется путать с danger/edit. */ .icon-btn-archive { background: var(--status-gray); } /* Круги действий исполнителя (UI-A, icon-set.md §1 executor) — 32px (UI-A.1: уменьшено с 36px — репак-источник, `.action-btn` в repair-tracker, до 3 финализации + Komentuoti (+ Redaguoti) в один ряд на 36px не помещались). Operator (34px, .icon-btn базовый) не менять задним числом. */ /* UI-A.4 (п.4, «единый визуальный язык operator+executor»): 32px явно на самом классе — раньше operator наследовал 34px базовый .icon-btn (та же иконка выглядела на 2px крупнее, чем у executor, где .exec-zone-actions её ужимала до 32px). Только для этой конкретной иконки — Peržiūrėti/Redaguoti у operator остаются 34px, правило "не менять operator-размер" не отменяется в целом, здесь — точечное исключение по прямому ТЗ. */ .icon-btn-comment { background: var(--btn-blue); position: relative; width: 32px; height: 32px; font-size: 15px; } .icon-btn-fixed { background: var(--status-green); } /* UI-A.4: "Defektas nepatvirtintas" — информационный результат ("проверил, дефект не подтвердился"), не отказ — был серый ti-x (читался как ошибка). */ .icon-btn-not-confirmed { background: var(--status-info); } .icon-btn-not-repairable { background: var(--status-red); } .icon-btn-toggle { background: var(--text-secondary); } .exec-zone-actions .icon-btn, .item-result-actions .icon-btn, .exec-record-bulk .icon-btn, .exec-group-header .icon-btn { width: 32px; height: 32px; font-size: 15px; } /* Wrapper around the 3 finalization icons (renderResultActionIcons) — needs its own flex row whether it sits inside .item-result-actions (bulk positions) or directly inside .exec-zone-actions (single-item records, UI-A.1). */ .exec-result-icons { display: inline-flex; align-items: center; gap: 6px; } /* Правая action-зона записи исполнителя (UI-A.1) — раньше не было явного display:flex, иконки шли обычным block-flow парой (Komentuoti+Redaguoti); теперь до 5 иконок в ряд (3 финализации + Komentuoti + Redaguoti), нужен явный flex-ряд, прижатый вправо в общей шапке записи (.exec-record-header). */ .exec-zone-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-left: auto; } /* Бейдж непрочитанных сообщений (UI-A.1) — над Komentuoti, паттерн 1:1 из repair-tracker (`.unread-badge`), клиентская заглушка (см. icon-set.md §1, session-report) — нет per-user read-tracking в схеме. */ .chat-unread-badge { position: absolute; top: -4px; right: -4px; background: var(--status-red); color: #fff; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid var(--bg-card); } .chat-unread-badge[hidden] { display: none; } /* Inline-чат карточки (UI-A.1 executor, UI-A.3 operator — общий шаблон, .card-chat-*, единая CSS/JS-логика на обе роли). Заменяет отдельную модалку комментариев для чата (модалка остаётся для items-block/редактирования полей/notification-flow — см. session-report UI-A.3). Свёрнуто: 2 последних сообщения одной строкой (.card-chat-preview). Развёрнуто: полная история + поле ввода. */ /* Отзыв Igor (компактность исполнителя) — граница/отступ раньше жили на .card-chat-block целиком, но border-top/padding рисовались даже когда .card-chat-full был display:none, добавляя мёртвое место на каждую запись. Перенесено на .card-chat-preview/.card-chat-full — border появляется, только когда там реально что-то видно (display:none убирает элемент из потока целиком вместе с его border/padding). Сессия 2026-09-13 — у исполнителя (.exec-record) полоска комментария теперь всегда видна как часть карточки (cards.css переопределяет border/фон/:empty), см. renderCardChatBlock — opts.hidePreview убран, обе роли рендерят одинаково. */ .card-chat-preview { font-size: 12px; color: var(--text-sec); cursor: pointer; display: flex; align-items: center; gap: 4px; margin-top: 8px; border-top: 1px solid var(--border); padding-top: 8px; } .card-chat-preview:empty { display: none; } .card-chat-preview:hover { color: var(--text); } .card-chat-full { margin-top: 8px; border-top: 1px solid var(--border); padding-top: 8px; } .card-chat-history { max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; } .card-chat-msg { font-size: 12px; display: flex; flex-direction: column; gap: 2px; padding: 4px 6px; background: var(--bg-elevated); border-radius: var(--radius-sm); } .card-chat-meta { color: var(--text-dim); font-size: 11px; } .card-chat-text { color: var(--text); white-space: pre-line; } .card-chat-empty { font-size: 12px; color: var(--text-dim); padding: 4px 0; } /* BL-052 — unread (arrived after the record's viewed_at): darker + bolder text, same treatment in the preview strip and the full history. */ .card-chat-msg.unread .card-chat-text, .chat-preview-msg.unread { color: var(--text-primary); font-weight: 600; } .card-chat-input-row { display: flex; gap: 8px; align-items: flex-end; } .card-chat-input { flex: 1; min-height: 32px; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-input); font-family: var(--sans); font-size: 12px; resize: vertical; } /* UI-A.3 — .rec-card (operator) — правая action-зона, тот же паттерн что .exec-zone-actions (флекс-ряд, был неявный block-flow — см. session-report, найденный мёртвый CSS `.rec-actions` вместо `.rec-zone-actions`). */ .rec-zone-actions { display: flex; align-items: center; gap: 6px; } /* .rec-card — CSS grid 120px 1fr auto (3 колонки); чат-блок — 4-й прямой ребёнок, должен растянуться на всю ширину, а не влезть в первую колонку. */ .rec-card > .card-chat-block { grid-column: 1 / -1; }