/* ===================================================================== * Дополнения к Tailwind: то, что утилитарными классами не покрыть — * видимость по режиму, анимации, скроллбары, фоллбэки. * ===================================================================== */ /* --- Атрибут hidden всегда скрывает, даже если рядом классы flex/grid/block. Без этого Tailwind-утилита display перебивает UA-стиль [hidden], и, например, confirm-оверлей (fixed ... flex) виден всегда --- */ [hidden] { display: none !important; } /* --- Режим «Лёгкий»: скрываем pro-элементы (класс ставится на ) --- */ .mode-light .pro-only { display: none !important; } /* --- Появление toast-уведомлений --- */ @keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .toast { animation: toast-in 0.2s ease-out; } /* --- Появление модального confirm-диалога --- */ @keyframes confirm-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } } #confirm-overlay > div { animation: confirm-in 0.15s ease-out; } /* --- Тонкие скроллбары для внутренних фреймов --- */ .glass-scroll { scrollbar-width: thin; scrollbar-color: rgba(100, 116, 139, 0.4) transparent; } .glass-scroll::-webkit-scrollbar { width: 8px; } .glass-scroll::-webkit-scrollbar-track { background: transparent; } .glass-scroll::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, 0.35); border-radius: 4px; } .glass-scroll::-webkit-scrollbar-thumb:hover { background: rgba(100, 116, 139, 0.55); } /* --- Фоллбэк, если backdrop-filter не поддерживается: делаем панели менее прозрачными, чтобы текст оставался читаемым --- */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .backdrop-blur-xl, .backdrop-blur-sm { background-color: rgba(255, 255, 255, 0.92); } .dark .backdrop-blur-xl, .dark .backdrop-blur-sm { background-color: rgba(15, 23, 42, 0.92); } }