/* ============================================================================ * shared/rtl.css — слой ЗЕРКАЛИРОВАНИЯ для режима письма справа налево (RTL). * Карта 1001 (RTL Ф-1). Подключается компонентом `rtl` загрузчика suite-bootstrap.js * одной точкой на всё семейство. КАЖДОЕ правило scoped [dir="rtl"] → в LTR инертно * (нулевая регрессия по построению; атрибут dir на ставит shared/i18n.js.applyDir * по локали — RTL только для ar/he/fa/ur). * * Логические свойства общего шелла (margin/padding/border-inline-*, inset-inline-*, * text-align:start/end) браузер зеркалит САМ по dir — их здесь НЕТ. Тут только НЕлогические * направленные вещи, которые сами не переворачиваются: transform-слайды дроверов, направленные * тени/скругления доков, inset-засечки активных пунктов, зеркалирование направленных глифов. * ========================================================================== */ /* ── Выезжающие панели: правый-док в LTR → левый-док в RTL. Позиция уже логическая * (inset-inline-end:0), здесь зеркалим ТОЛЬКО направленный слайд ЗАКРЫТОГО состояния * (:not(open) — чтобы не перебить открытое) и направление тени. ── */ [dir="rtl"] .ws-drawer:not(.ws-drawer-open) { transform: translateX(-100%); } [dir="rtl"] .admin-drawer:not(.open) { transform: translateX(-100%); } [dir="rtl"] .wsx-rec-panel { transform: translateX(-100%); } /* открытое перебивает более специфичный .wsx-rec-drawer.open .wsx-rec-panel */ [dir="rtl"] .ws-drawer { box-shadow: 8px 0 28px rgba(16, 24, 40, .18); } [dir="rtl"] .wsx-rec-panel { box-shadow: 8px 0 28px rgba(16, 24, 40, .12); } [dir="rtl"] .admin-drawer { box-shadow: 8px 0 32px rgba(0, 0, 0, .28); } /* ── Switcher (MS365-панель): левый-док в LTR → правый-док в RTL (inset-inline-start:0 в RTL = * правый край). Закрытое состояние слайдит за правый край; тень — в другую сторону. ── */ [dir="rtl"] .switcher-menu:not(.open) { transform: translateX(110%); } [dir="rtl"] .switcher-menu { box-shadow: -2px 0 28px rgba(0, 0, 0, .22); } /* ── Флайаут «Примерка доступа/роли»: правый-док → левый-док. Позиция логическая * (inset-inline-end), зеркалим тень; вкладка-язычок — тень + скругление внутренней кромки. ── */ [dir="rtl"] #pvWrap .pv-flyout { box-shadow: 8px 0 24px rgba(0, 0, 0, .18); } [dir="rtl"] #pvWrap .pv-tab { box-shadow: 2px 0 10px rgba(0, 0, 0, .18); border-radius: 0 10px 10px 0; } /* ── Активный пункт сайдбара: графитовая inset-засечка слева → справа в RTL. ── */ [dir="rtl"] .wsx-item.active, [dir="rtl"] .wsx-uitem.active { box-shadow: inset -3px 0 0 0 var(--ge-color-text, #201f1e); } /* ── Утилита зеркалирования направленной иконки/глифа: компонент помечает чисто-направленный * элемент (стрелка «назад/вперёд», шеврон ‹/›, иконка «следующий») классом .ge-dir-flip * или атрибутом [data-dir-flip] — в RTL отражается по горизонтали. НЕ применять к * ненаправленным иконкам и к тексту. Текстовые литералы «←/→» в подписях кнопок хрома * зеркалятся отдельным проходом по компонентам (follow-on). ── */ [dir="rtl"] .ge-dir-flip, [dir="rtl"] [data-dir-flip] { transform: scaleX(-1); } [dir="rtl"] .ge-dir-flip.ge-dir-flip--y, [dir="rtl"] [data-dir-flip][data-dir-flip-y] { transform: scaleX(-1) scaleY(-1); }