/* ПЕРЕТАСКИВАНИЕ — живой перестановкой. Указатель прошёл середину соседа, сосед тут же уступил место: список всё время показывает результат, а не обещание. Поэтому знаков цели нет вовсе — ни черты, ни подсветки. Сама подвижка считается по FLIP: сначала DOM, потом обратный сдвиг трансформом и отпускание — так едет композитор, а не перерасчёт. */ [data-ui-surface="navigator"] .panel__item.is-dragged, [data-ui-surface="navigator"] .folder__tab.is-dragged, [data-ui-surface="navigator"] .panel__folder.is-dragged, [data-ui-surface="navigator"] .sheets-card.is-dragged, [data-ui-surface="navigator"] .block-card.is-dragged { opacity: 0.4; } /* НАВЕДЕНИЕ ГАСИТСЯ НА ВРЕМЯ ПЕРЕНОСА И ЕЩЁ НЕМНОГО ПОСЛЕ. Во время нативного перетаскивания события мыши не идут, браузер не пересчитывает :hover, а строка под курсором меняется — список-то переставляется. Серым подсвечивался сосед, будто он выбран. После отпускания наведение тоже нельзя возвращать сразу: курсор стоит над случайной строкой, и она вспыхивает ровно в тот момент, когда глаз смотрит на приземлившийся канвас. Возвращаем по первому настоящему движению мыши — тогда наведение снова означает то, что означает. Активная и выбранная строки исключены: их фон не про указатель. */ [data-ui-surface="navigator"] .navigator__panel.is-hover-muted .panel__item:not(.panel__item--current):not(.panel__item--picked):hover { background: transparent; transition: none; } [data-ui-surface="navigator"] .navigator__panel.is-hover-muted .sheets-list[data-ui-navigator-view="rows"] .sheets-card:not(.is-selected):not(.panel__item--picked):hover .sheets-card__caption, [data-ui-surface="navigator"] .sheets-list[data-ui-navigator-view="rows"] .sheets-card.is-dragged:not(.is-selected):not(.panel__item--picked) .sheets-card__caption { background: transparent; transition: none; } /* Картинка переноса. Нативная берётся с того элемента, за который взялись, — у папки это был бы один ярлык, да ещё со скруглениями и прозрачными углами, отсюда белые уголки и обрывки линий. Рисуем свою. Подложки у неё НЕТ: непрозрачность даёт каждая копия сама, поэтому под знаком не появляется плита шире содержимого. Живёт вне экрана один кадр и внутри панели, а не в body, — иначе не достанется токенов темы. */ [data-ui-surface="navigator"] .drag-ghost { position: fixed; top: -2000px; left: -2000px; pointer-events: none; background: transparent; /* Колонка, а не блок. Ярлык — inline-flex, и в блочной копии он ложился на строку текста: её базовая линия добавляла пару пикселей сверху и снизу, из-за чего копия садилась чуть ниже места. В колонке строк текста нет, верх ярлыка совпадает с верхом копии. */ display: flex; flex-direction: column; /* Слой отдаётся композитору сразу, а не в момент полёта: копия папки — это ярлык, рамка и все её строки со знаками, и создавать под неё слой на старте анимации значит терять кадр там, где его видно. */ will-change: transform; } /* Та же копия, но не для картинки переноса, а для посадки: летит от места отпускания к месту, где элемент оказался. Без неё в конце нет движения вовсе — картинка гаснет у курсора, а строка уже стоит в списке. */ [data-ui-surface="navigator"] .drag-ghost--landing { z-index: var(--arhix-layer-drag); } /* Строка в покое прозрачна — в копии ей нужен свой фон, иначе поедет дырка. Рамке папки тоже: сквозь неё просвечивала бы страница. Отступы внутри копии обнуляются. Копия ставится по внешней кромке того, что едет, и если оставить элементам их поля, те сложатся с этой кромкой ещё раз — знак уезжает вбок. У ярлыка сохраняется только его отношение к рамке: 10 = 15 у ярлыка минус 5 у рамки. */ /* ЧТО НЕСУТ — ПОДНЯТО, А НЕ НАВЕДЕНО. Раньше копия строки красилась в --arhix-surface, то есть ровно в цвет наведения: она выглядела подсвеченной, а при посадке подсветка будто пропадала. Прозрачной её оставить тоже нельзя — поедет дырка. Берём светлую поверхность системы — копия говорит «поднято», а не «указатель здесь». Но ТЕНЬ здесь запрещена. Нативная картинка переноса растрируется вместе с ней, и мягкий край ложится серыми клиньями по скруглённым углам — там, где под скруглением пусто. Поднятость даёт чёткая волосяная кайма: она растрируется без размытия. У рамки папки своя кайма уже есть. Фон достаётся только тому, что едет само. Строки внутри папки прозрачны и в списке — их фоном служит сама рамка. */ [data-ui-surface="navigator"] .drag-ghost .panel__item { margin: 0; } [data-ui-surface="navigator"] .drag-ghost > .panel__item { background: var(--arhix-surface-raised); box-shadow: 0 0 0 1px var(--arhix-island-border); } [data-ui-surface="navigator"] .drag-ghost .panel__folder { margin: 0; background: var(--arhix-surface-raised); } /* ЕДИНСТВЕННОЕ ИСКЛЮЧЕНИЕ: активный канвас несут синим. Он и приземлится синим, поэтому при постановке ничего не меняется — а в руке сразу видно, что несёшь именно открытый. Кайма ему не нужна: цвет сам отделяет его от подложки. */ /* КАРТОЧКА НЕСЁТСЯ ОДНОЙ РАМКОЙ. Подпись остаётся в списке: она про содержимое, а не про предмет, и в руке только мешает — тащишь серое поле, а за ним волочится текст. Своего фона карточке не даём: у рамки он есть, и второй под ней превратился бы в плиту. */ [data-ui-surface="navigator"] .drag-ghost .sheets-card__caption, [data-ui-surface="navigator"] .drag-ghost .block-card__caption { display: none; } /* Копия обязана сохранять текущее представление. В строчном режиме несём строку, а не скрытое превью той же карточки. */ [data-ui-surface="navigator"] .drag-ghost--sheet-rows .sheets-card { height: var(--arhix-control-height); gap: 0; } [data-ui-surface="navigator"] .drag-ghost--sheet-rows .sheets-card__frame { display: none; } [data-ui-surface="navigator"] .drag-ghost--sheet-rows .sheets-card__caption { height: var(--arhix-control-height); display: flex; align-items: center; padding: 0 var(--arhix-space-gap); border-radius: var(--arhix-radius-control); background: var(--arhix-surface-raised); box-shadow: 0 0 0 1px var(--arhix-island-border); box-sizing: border-box; } [data-ui-surface="navigator"] .drag-ghost--sheet-rows.drag-ghost--selected .sheets-card__caption { background: var(--arhix-accent-tint); box-shadow: none; } /* Выбранная карточка едет со своей синей рамкой — так видно, что в руке именно выбранный предмет. Признак ставится на самой копии, а не классом is-selected: иначе в документе оказалось бы два выбранных. */ [data-ui-surface="navigator"] .drag-ghost--selected .sheets-card__frame, [data-ui-surface="navigator"] .drag-ghost--selected .block-card__frame { border-color: var(--arhix-accent); } [data-ui-surface="navigator"] .drag-ghost--current > .panel__item { background: var(--arhix-accent-tint); box-shadow: none; } /* У папки активная строка лежит не в корне копии, а внутри рамки. При клонировании смысловой класс panel__item--current снимается, чтобы в DOM не появлялся второй «активный» канвас, но его внешний вид обязан остаться: иначе в последний кадр обычная строка сменяется синей и выглядит вспышкой. */ [data-ui-surface="navigator"] .drag-ghost .panel__item.drag-ghost__item--current { background: var(--arhix-accent-tint); box-shadow: none; } /* То же правило для выбранной папки: состояние остаётся только визуальным, не участвует в общих выборках .is-selected. */ [data-ui-surface="navigator"] .drag-ghost .panel__folder.drag-ghost__folder--selected { border-color: var(--arhix-accent); } [data-ui-surface="navigator"] .drag-ghost .folder__tab { margin: 0 0 0 10px; } /* ЗАКОН ВЫБОРА ПАПКИ. Берут за ярлык, показывают рамкой — тот же закон, что у карточки листа. Ярлык не подсвечиваем: его цвет принадлежит данным, и подсветка либо потеряется на нём, либо начнёт с ним спорить. Ширина рамки не меняется, меняется только цвет: состояние красит, а не двигает. */ [data-ui-surface="navigator"] .panel__folder.is-selected { border-color: var(--arhix-accent); }