/** * cell-hint.css — «уголок в ячейке» (движковый слой, см. cell-hint.js). * * 🔴 ГЛАВНОЕ ОГРАНИЧЕНИЕ: уголок НЕ ИМЕЕТ ПРАВА менять ширину или высоту ячейки. * Поэтому он нарисован ::after с position:absolute — вне потока. Ни padding, ни * margin, ни inline-элементы для пометки не используются: любой из них подвинул * бы колонку, и таблица «поехала» бы при первом же наведении. * * Цвет — НЕЙТРАЛЬНЫЙ СЕРЫЙ (--text2), решение Александра 27.08. Акцентный синий * здесь запрещён намеренно: уголок стоит в каждой второй денежной колонке, и * акцентом он превратил бы таблицу в новогоднюю гирлянду. Пометка должна быть * заметна, когда её ищут, и незаметна, когда читают числа. */ /* ── Уголок ─────────────────────────────────────────────────────────────── */ .ag-cell.ma-hint-cell::after { content: ''; position: absolute; right: 0; bottom: 0; width: 0; height: 0; border-left: 9px solid transparent; border-bottom: 9px solid var(--text2); opacity: .38; pointer-events: none; /* сам треугольник кликов не ловит — их ловит ячейка */ transition: opacity .12s ease; } /* Наведение на строку — уголки этой строки проступают. Так селлер, ведущий курсор по строке, узнаёт о разборе, не изучая таблицу заранее. */ .ag-row:hover .ag-cell.ma-hint-cell::after { opacity: .62; } .ag-cell.ma-hint-cell:hover::after { opacity: .95; } .ag-cell.ma-hint-open::after { opacity: 1; border-bottom-color: var(--accent); } .ag-cell.ma-hint-cell { cursor: help; } /* Тумблер выключен — уголков нет вовсе. Класс на , чтобы гашение не зависело от того, успел ли грид перерисовать ячейки. */ .ma-hints-off .ag-cell.ma-hint-cell::after { display: none; } .ma-hints-off .ag-cell.ma-hint-cell { cursor: default; } /* ── Короткая подсказка (наведение) ─────────────────────────────────────── */ .ma-hint-tip { position: fixed; z-index: 9000; max-width: 300px; padding: 8px 11px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); box-shadow: 0 8px 26px rgba(0, 0, 0, .18); font-size: 12.5px; line-height: 1.45; white-space: pre-line; /* getter'ы отдают строки через \n */ pointer-events: none; /* подсказка не перехватывает курсор у ячейки */ opacity: 0; transform: translateY(3px); transition: opacity .12s ease, transform .12s ease; } .ma-hint-tip[data-open="1"] { opacity: 1; transform: translateY(0); } /* ── Панель разбора (нажатие) ───────────────────────────────────────────── */ .ma-hint-panel { position: fixed; z-index: 9010; width: 340px; max-width: calc(100vw - 24px); border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); box-shadow: 0 14px 40px rgba(0, 0, 0, .28); display: none; } .ma-hint-panel[data-open="1"] { display: block; } .ma-hint-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--border); background: var(--surface2); border-radius: 10px 10px 0 0; } .ma-hint-panel-title { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text2); } .ma-hint-panel-x { border: 0; background: none; color: var(--text2); cursor: pointer; font-size: 18px; line-height: 1; padding: 2px 5px; border-radius: 5px; } .ma-hint-panel-x:hover { background: var(--border); color: var(--text); } .ma-hint-panel-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .ma-hint-panel-body { padding: 11px 13px; font-size: 13px; } /* ── Разбор: подписи слева, суммы столбиком справа ──────────────────────── */ .ma-hint-calc { display: flex; flex-direction: column; gap: 5px; } .ma-hint-row { display: flex; justify-content: space-between; gap: 14px; font-variant-numeric: tabular-nums; } .ma-hint-lbl { color: var(--text2); } .ma-hint-val { white-space: nowrap; } .ma-hint-row-total { margin-top: 5px; padding-top: 7px; border-top: 1px solid var(--border); font-weight: 700; } .ma-hint-row-total .ma-hint-lbl { color: var(--text); } /* Строка без двоеточия — это пояснение, а не слагаемое (например «Закупочная цена не введена — прибыль не рассчитывается»). Печатаем абзацем. */ .ma-hint-note { margin-top: 8px; padding: 8px 10px; border-radius: 7px; background: var(--surface2); color: var(--text); font-size: 12.5px; line-height: 1.45; } @media (prefers-reduced-motion: reduce) { .ma-hint-tip, .ag-cell.ma-hint-cell::after { transition: none; } }