/* ================================================================ * no-borders.css * Режим «скрытые рамки»: включается классом `no-borders` на . * Все border-color (кроме акцентных/статусных) становятся прозрачными; * ключевые поверхности получают мягкий вертикальный градиент вместо * жёсткой рамки, чтобы не ломать читаемость панелей. * Работает и для dark, и для light (у light — белый тон градиента). * ================================================================ */ /* -- 1. Нейтрализация рамок ----------------------------------------- * Перекрашиваем все border-color в transparent. Акцентные/статусные * рамки, использующие выраженные цвета (banana, красный, синий и пр.), * и drag/drop highlights — оставляем: re-enable через allowlist ниже. */ html.no-borders *:not(:focus-visible) { border-color: transparent !important; } /* Возвращаем «смысловые» рамки: акценты, статусы, выделения */ html.no-borders [class*="border-banana"], html.no-borders [class*="border-yellow"], html.no-borders [class*="border-red"], html.no-borders [class*="border-rose"], html.no-borders [class*="border-green"], html.no-borders [class*="border-emerald"], html.no-borders [class*="border-blue"], html.no-borders [class*="border-sky"], html.no-borders [class*="border-indigo"], html.no-borders [class*="border-purple"], html.no-borders [class*="border-accent"], html.no-borders .drop-highlight, html.no-borders .drag-over, html.no-borders .ftree-node--active > .ftree-row, html.no-borders .is-selected, html.no-borders [aria-selected="true"] { border-color: revert !important; } html.no-borders .main-view-switcher .mvs-btn[aria-selected="true"] { border-color: transparent !important; outline: none !important; box-shadow: none !important; } /* Фокус-рамки кнопок/инпутов — всегда возвращаем */ html.no-borders *:focus-visible { border-color: revert !important; outline-color: revert !important; } /* -- 2. Служебные разделители --------------------------------------- * Многие разделительные линии у нас реализованы не через border, * а через
, background-color или псевдо-элементы. Притушим их. */ html.no-borders hr, html.no-borders .rail-popup__divider, html.no-borders .accordion-divider, html.no-borders [role="separator"] { opacity: 0 !important; background: transparent !important; } /* Сплиттеры DockLayout рисуют 1px линию через linear-gradient background. Прячем линию, но оставляем hit-area для ресайза (курсор/события). */ html.no-borders .dock-splitter-v, html.no-borders .dock-splitter-h, html.light.no-borders .dock-splitter-v, html.light.no-borders .dock-splitter-h { background: transparent !important; } html.no-borders .dock-splitter:hover, html.no-borders .dock-splitter.is-dragging { background: rgba(var(--accent-rgb), 0.15) !important; } /* Декоративные линии-псевдоэлементы у разделителей с подписью */ html.no-borders .refs-divider::before, html.no-borders .refs-divider::after, html.light.no-borders .refs-divider::before, html.light.no-borders .refs-divider::after { background: transparent !important; opacity: 0 !important; } /* -- 3. Мягкие градиенты на ключевых поверхностях ------------------- * Eле заметная вертикальная подсветка сверху-вниз у крупных панелей — * чтобы край панели читался без рамки. Тон подстраивается по теме. */ /* Токены градиента: лёгкий высветленный оверлей сверху + мягкая тень снизу. В тёмной теме — белёсый, в светлой — тёплый. */ html.no-borders { --soft-panel-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0.010) 40%, rgba(0, 0, 0, 0.08) 100%); --soft-item-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0%, rgba(255, 255, 255, 0) 100%); --soft-button-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0.010) 100%); } html.no-borders.light { --soft-panel-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(245, 245, 245, 0.55) 50%, rgba(0, 0, 0, 0.045) 100%); --soft-item-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 100%); --soft-button-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.75) 0%, rgba(240, 240, 240, 0.35) 100%); } /* Крупные поверхности: rail, accordion sidebar, rail-popup, модалки, панели, карточки */ html.no-borders .app-rail, html.no-borders .accordion-sidebar, html.no-borders .rail-popup, html.no-borders .bg-panelbg, html.no-borders .modal, html.no-borders .modal-content, html.no-borders #gallery-grid > div, html.no-borders .viewer-info-panel, html.no-borders .feed-filter-bar { background-image: var(--soft-panel-gradient); } /* Mid-tier: пункты списков/аккордеонов/элементы дерева папок */ html.no-borders .rail-popup__item, html.no-borders .rail-popup__theme-btn, html.no-borders .ftree-row, html.no-borders .accordion-item, html.no-borders .accordion-header { background-image: var(--soft-item-gradient); } /* Кнопки: добавляем лёгкий градиент для «кликабельности» */ html.no-borders button:not([class*="bg-"]):not(.rail-popup__item):not(.ftree-toggle):not(.ftree-action-btn), html.no-borders input[type="button"], html.no-borders input[type="submit"] { background-image: var(--soft-button-gradient); } /* Инпуты/текстарии: лёгкая подложка, чтобы поля были видны без рамки */ html.no-borders input[type="text"], html.no-borders input[type="search"], html.no-borders input[type="number"], html.no-borders input[type="email"], html.no-borders input[type="password"], html.no-borders textarea, html.no-borders select { background-image: var(--soft-item-gradient); } /* Активные/hover-состояния пунктов списка — сохраняем подсветку поверх градиента */ html.no-borders .rail-popup__item:hover, html.no-borders .rail-popup__theme-btn:hover, html.no-borders .ftree-row:hover { background-image: none; } /* -- 4. Перебиваем правила с ID-специфичностью ---------------------- * Такие селекторы (#gallery-grid > div и т.п.) имеют бо́льшую * специфичность, чем универсальный `html.no-borders *`, поэтому * приходится дублировать их с тем же #id. */ /* Карточки галереи: и в тёмной, и в светлой теме рисуют border */ html.no-borders #gallery-grid > div, html.no-borders #gallery-grid > div:not([data-favorite="true"]), html.no-borders #gallery-grid > div:not([data-favorite="true"]):hover, html.no-borders #gallery-grid > div[data-favorite="true"], html.light.no-borders #gallery-grid > div, html.light.no-borders #gallery-grid > div:not([data-favorite="true"]), html.light.no-borders #gallery-grid > div[data-favorite="true"] { border-color: transparent !important; } /* Избранное: оставляем исходную акцентную обводку как есть */ html.no-borders #gallery-grid > div[data-favorite="true"], html.light.no-borders #gallery-grid > div[data-favorite="true"] { border-color: rgba(var(--accent-rgb), 0.72) !important; } /* Вспомогательная вертикальная подложка у карточки — чтобы край читался */ html.no-borders #gallery-grid > div:not([data-favorite="true"]) { background-image: var(--soft-panel-gradient) !important; } /* Мета-пилюли внутри карточек (project/model/ratio/resolution/date/presets) имеют Tailwind-классы `border-banana/...` и `border-gray-...`. Allowlist выше (для акцентных бордеров) возвращал им обводку — в карточках это лишнее. Гасим рамки у всех бейджей внутри galery-grid. */ html.no-borders #gallery-grid [class*="border-banana"], html.no-borders #gallery-grid [class*="border-gray"], html.no-borders #gallery-grid [class*="border-red"] { border-color: transparent !important; background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%) !important; } html.light.no-borders #gallery-grid [class*="border-banana"], html.light.no-borders #gallery-grid [class*="border-gray"], html.light.no-borders #gallery-grid [class*="border-red"] { background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.03) 100%) !important; } /* Панели с id — часто имеют свой border-right/left */ html.no-borders #appRail, html.no-borders #foldersSidebar, html.no-borders #accordionSidebar, html.no-borders #mainContent, html.no-borders #galleryPanel { border-color: transparent !important; } /* Аккордионы: убираем рамки-линии между tabbar и content, а также 1px-ring вокруг плавающего сайдбара (реализован через box-shadow). */ html.no-borders .accordion-sidebar.dock-left .accordion-tabbar, html.no-borders .accordion-sidebar.dock-left .accordion-content, html.no-borders .accordion-sidebar.dock-right .accordion-tabbar, html.no-borders .accordion-sidebar.dock-right .accordion-content, html.no-borders .accordion-sidebar.dock-top .accordion-tabbar, html.no-borders .accordion-sidebar.dock-top .accordion-content, html.no-borders .accordion-sidebar.dock-bottom .accordion-tabbar, html.no-borders .accordion-sidebar.dock-bottom .accordion-content, html.no-borders .accordion-sidebar.accordion-snapped .accordion-tabbar { border-color: transparent !important; } /* Plавающий аккордион: заменяем ring на чистую тень без 1px-обводки */ html.no-borders .accordion-sidebar.accordion-floating { box-shadow: 0 12px 48px rgba(0, 0, 0, 0.7) !important; } html.light.no-borders .accordion-sidebar.accordion-floating { box-shadow: 0 12px 48px rgba(0, 0, 0, 0.18) !important; } /* ──────────────────────────────────────────────────────────────────── * Tasks-prototype (iframe): доска задач, карточки, модалка, чипы. * Все локальные классы — `tp-*`. Без аллоулиста все рамки уходят в * transparent — возвращаем мягкий gradient на крупные поверхности * и точечно re-enable акцентные обводки чипов/drop-зон. * ──────────────────────────────────────────────────────────────────── */ /* Крупные поверхности — плавный градиент вместо рамки. */ html.no-borders .tp-card, html.no-borders .tp-modal, html.no-borders .tp-col, html.no-borders .tp-attachments__drop, html.no-borders .tp-modal__desc, html.no-borders .tp-checklist__input-row { background-image: var(--soft-panel-gradient); } /* Кнопки в чипах/тулбарах прототипа — лёгкий градиент. */ html.no-borders .tp-modal__chip, html.no-borders .tp-modal__assignee-btn, html.no-borders .tp-btn { background-image: var(--soft-button-gradient); } /* Hover-состояние чипов — возвращаем акцентную обводку и подсветку фона. */ html.no-borders .tp-modal__chip:hover { border-color: var(--chip-color) !important; background-image: none; } /* Drop-target и активные drag-зоны — возвращаем акцентные рамки. */ html.no-borders .tp-drop-target, html.no-borders .tp-drop-target--card, html.no-borders .tp-drop-target--col, html.no-borders .tp-mb-drop-active::before { border-color: var(--tp-accent) !important; } html.no-borders .tp-attachments__item.is-cover { border-color: var(--tp-accent) !important; } /* Cover toggle и close в шапке модалки — лёгкая подложка. */ html.no-borders .tp-modal__cover-toggle { background-image: var(--soft-button-gradient); } /* Панель фильтров: панель — мягкий градиент, акцентные элементы — оставляем. */ html.no-borders .tp-filter-panel, html.no-borders .tp-filter-input, html.no-borders .tp-filter-match, html.no-borders .tp-filter-clear { background-image: var(--soft-panel-gradient); } html.no-borders .tp-filter-btn.is-active, html.no-borders .tp-filter-btn.is-open, html.no-borders .tp-filter-input:focus, html.no-borders .tp-filter-chip.is-active { border-color: var(--tp-accent) !important; } /* Light-тема: перекрываем адресные правила с !important и ID-специфичностью */ html.light.no-borders #bottomControls .bg-panelbg, html.light.no-borders #bottomControls .border, html.light.no-borders #userBar, html.light.no-borders #folderModal > div, html.light.no-borders #folderModal > div > div, html.light.no-borders #folderModal .field-group input, html.light.no-borders #presetsTooltip, html.light.no-borders #gallery-grid .border-gray-700\/50, html.light.no-borders .bg-dropdownbg, html.light.no-borders .bg-panelbg\/90, html.light.no-borders .top-chip, html.light.no-borders .border-gray-700\/50, html.light.no-borders .border-gray-700, html.light.no-borders .border-gray-800\/50, html.light.no-borders .border-gray-600\/50, html.light.no-borders .border-gray-600, html.light.no-borders .border-banana\/20, html.light.no-borders .border-banana\/40, html.light.no-borders .project-picker-shell { border-color: transparent !important; }