/* ============================================================ APPLE BLACK GLASS — тема для New API Тёмная OLED-палитра Apple, glassmorphism, мягкие анимации. Грузится ПОСЛЕДНЕЙ в , перекрывает переменные shadcn. ============================================================ */ /* ---------- Палитра Apple Dark (форсим всегда, не только .dark) ---------- */ :root, html.dark, html.light { --background: #000000; --foreground: #f5f5f7; --card: rgba(28, 28, 30, 0.62); --card-foreground: #f5f5f7; --popover: rgba(24, 24, 27, 0.88); --popover-foreground: #f5f5f7; --primary: #0a84ff; /* Apple system blue (dark) */ --primary-foreground: #ffffff; --secondary: rgba(120, 120, 128, 0.24); --secondary-foreground: #e5e5ea; --muted: rgba(120, 120, 128, 0.20); --muted-foreground: #98989d; /* Apple secondaryLabel */ --accent: rgba(120, 120, 128, 0.24); --accent-foreground: #ffffff; --destructive: #ff453a; --destructive-foreground: #ffffff; --border: rgba(255, 255, 255, 0.08); --input: rgba(255, 255, 255, 0.06); --ring: rgba(10, 132, 255, 0.55); --radius: 14px; --sidebar: rgba(18, 18, 20, 0.66); --sidebar-foreground: #e5e5ea; --sidebar-border: rgba(255, 255, 255, 0.07); --header: rgba(10, 10, 12, 0.72); color-scheme: dark; } /* ---------- База ---------- */ html { background: #000 !important; } body { background: #000 !important; color: var(--foreground) !important; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif !important; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; animation: applePageIn .45s cubic-bezier(.25,.1,.25,1) both; } /* Живой фон: мягкие светящиеся пятна за стеклом */ body::before { content: ""; position: fixed; inset: -20%; z-index: -1; pointer-events: none; background: radial-gradient(38% 32% at 18% 12%, rgba(10, 132, 255, .16), transparent 60%), radial-gradient(30% 26% at 82% 8%, rgba(94, 92, 230, .13), transparent 60%), radial-gradient(34% 30% at 78% 88%, rgba(48, 209, 88, .08), transparent 60%), radial-gradient(30% 28% at 8% 85%, rgba(255, 55, 95, .07), transparent 60%); filter: blur(70px); animation: appleDrift 26s ease-in-out infinite alternate; } @keyframes appleDrift { 0% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(2%,-2%,0) scale(1.05); } 100% { transform: translate3d(-2%,2%,0) scale(1.02); } } @keyframes applePageIn { from { opacity: 0; } to { opacity: 1; } } @keyframes appleFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* ---------- Стеклянные поверхности ---------- */ /* Карточки, панели, сайдбар, шапка, поповеры — всё стекло */ .bg-card, .bg-popover, aside, [data-slot="card"], [data-slot="sheet"], [class*="bg-card"], .rounded-xl.bg-card { backdrop-filter: blur(28px) saturate(170%) !important; -webkit-backdrop-filter: blur(28px) saturate(170%) !important; background: var(--card) !important; border: 1px solid var(--border) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255,255,255,.04) !important; transition: transform .35s cubic-bezier(.25,.1,.25,1), box-shadow .35s cubic-bezier(.25,.1,.25,1), border-color .35s cubic-bezier(.25,.1,.25,1) !important; } .bg-card:hover, [data-slot="card"]:hover { border-color: rgba(255, 255, 255, .14) !important; box-shadow: 0 12px 44px rgba(0,0,0,.55), 0 0 0 1px rgba(10,132,255,.10), 0 0 34px rgba(10,132,255,.07) !important; transform: translateY(-2px); } /* ---------- Боссбар: светлое стекло, чётко отделён от контента ---------- */ header, [data-slot="header"] { backdrop-filter: blur(32px) saturate(190%) !important; -webkit-backdrop-filter: blur(32px) saturate(190%) !important; background: linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.05)) !important; border-bottom: 1px solid rgba(255,255,255,.13) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 10px 36px rgba(0,0,0,.50) !important; isolation: isolate; } /* вторая sticky-панель (фильтры/подбары) — тоже светлое стекло */ .sticky.top-0.rounded-lg.border { backdrop-filter: blur(28px) saturate(180%) !important; -webkit-backdrop-filter: blur(28px) saturate(180%) !important; background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.045)) !important; border: 1px solid rgba(255,255,255,.11) !important; border-radius: 16px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 28px rgba(0,0,0,.42) !important; } /* ---------- Сайдбар ---------- */ aside, [data-slot="sidebar"] { background: var(--sidebar) !important; border-right: 1px solid var(--sidebar-border) !important; backdrop-filter: blur(28px) saturate(170%) !important; -webkit-backdrop-filter: blur(28px) saturate(170%) !important; } /* Появление карточек каскадом при загрузке страницы */ main [data-slot="card"], main .bg-card { animation: appleFadeUp .5s cubic-bezier(.25,.1,.25,1) both; } main [data-slot="card"]:nth-child(2), main .bg-card:nth-child(2) { animation-delay: .06s; } main [data-slot="card"]:nth-child(3), main .bg-card:nth-child(3) { animation-delay: .12s; } main [data-slot="card"]:nth-child(4), main .bg-card:nth-child(4) { animation-delay: .18s; } /* ---------- Кнопки ---------- */ [data-slot="button"], .bg-primary, .inline-flex.items-center.justify-center { transition: transform .18s cubic-bezier(.25,.1,.25,1), box-shadow .25s ease, background-color .25s ease, border-color .25s ease, opacity .25s ease !important; will-change: transform; } button, [role="button"] { -webkit-tap-highlight-color: transparent; } .bg-primary[data-slot="button"], .bg-primary { background: linear-gradient(180deg, #2294ff, #0a84ff) !important; border: none !important; box-shadow: 0 4px 16px rgba(10, 132, 255, .32), inset 0 1px 0 rgba(255,255,255,.22) !important; font-weight: 590; } .bg-primary:hover { box-shadow: 0 6px 26px rgba(10, 132, 255, .5), inset 0 1px 0 rgba(255,255,255,.25) !important; transform: translateY(-1px); } .bg-primary:active { transform: scale(.965); } .bg-secondary:hover, .bg-accent:hover { background: rgba(120,120,128,.34) !important; } .bg-destructive { box-shadow: 0 4px 16px rgba(255, 69, 58, .28) !important; } /* ---------- Инпуты ---------- */ input, textarea, select, [data-slot="input"], [data-slot="textarea"] { background: var(--input) !important; border: 1px solid var(--border) !important; border-radius: 12px !important; color: var(--foreground) !important; transition: border-color .25s ease, box-shadow .25s ease, background .25s ease !important; } input:focus, textarea:focus, [data-slot="input"]:focus { border-color: rgba(10,132,255,.65) !important; box-shadow: 0 0 0 4px rgba(10,132,255,.16), 0 0 20px rgba(10,132,255,.08) !important; outline: none !important; } input::placeholder, textarea::placeholder { color: #636366 !important; } /* ---------- Таблицы ---------- */ table, [data-slot="table"] { border-collapse: separate !important; } tbody tr, [data-slot="table-row"] { transition: background-color .2s ease !important; } tbody tr:hover, [data-slot="table-row"]:hover { background: rgba(255, 255, 255, .045) !important; } /* ---------- Модалки, дропдауны, тултипы ---------- */ [data-slot="dialog-content"], [data-slot="sheet-content"], [data-slot="popover-content"], [data-slot="dropdown-menu-content"], [role="dialog"], [role="menu"], [role="listbox"], [data-radix-popper-content-wrapper] > * { backdrop-filter: blur(44px) saturate(180%) !important; -webkit-backdrop-filter: blur(44px) saturate(180%) !important; background: var(--popover) !important; border: 1px solid rgba(255,255,255,.10) !important; border-radius: 18px !important; box-shadow: 0 24px 70px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255,255,255,.06) !important; animation: appleFadeUp .28s cubic-bezier(.25,.1,.25,1) both !important; } /* ---------- Свитчи, чекбоксы ---------- */ [data-slot="switch"], [role="switch"] { transition: background-color .25s ease !important; } [data-slot="switch"][data-state="checked"], [role="switch"][aria-checked="true"] { background: #30d158 !important; /* Apple system green */ } [data-slot="switch"] > span, [role="switch"] > span { transition: transform .25s cubic-bezier(.25,.1,.25,1) !important; box-shadow: 0 2px 8px rgba(0,0,0,.4) !important; } /* ---------- Бейджи и статусы ---------- */ [class*="badge"], .inline-flex.rounded-full { backdrop-filter: blur(12px); font-weight: 590 !important; letter-spacing: .01em; } /* ---------- Скроллбары ---------- */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background-color: rgba(255,255,255,.26); } * { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.14) transparent; } /* ---------- Типографика ---------- */ h1, h2, h3, h4 { font-weight: 700 !important; letter-spacing: -.02em !important; } p, span, td, th, label { letter-spacing: -.006em; } .text-muted-foreground { color: var(--muted-foreground) !important; } /* ---------- Линк-акцент ---------- */ a:not([data-slot="button"]) { transition: color .2s ease, opacity .2s ease; } a:not([data-slot="button"]):hover { color: #6db2ff; } /* ---------- Селект по тексту — Apple blue ---------- */ ::selection { background: rgba(10, 132, 255, .35); color: #fff; } /* ---------- Прибиваем мусор light-темы, если app рисует белое ---------- */ .bg-white { background-color: #1c1c1e !important; } .bg-gray-50, .bg-gray-100, .bg-slate-50, .bg-slate-100 { background-color: rgba(28,28,30,.6) !important; } .text-black, .text-gray-900, .text-slate-900 { color: #f5f5f7 !important; } .border-gray-200, .border-slate-200, .border-gray-100 { border-color: rgba(255,255,255,.08) !important; } /* ---------- Спиннеры и скелетоны ---------- */ .animate-spin { animation-duration: 1.1s !important; } [data-slot="skeleton"], .animate-pulse { background: linear-gradient(90deg, rgba(255,255,255,.04) 25%, rgba(255,255,255,.09) 50%, rgba(255,255,255,.04) 75%) !important; background-size: 200% 100% !important; animation: appleShimmer 1.6s ease-in-out infinite !important; border-radius: 10px; } @keyframes appleShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ---------- Тосты ---------- */ [data-slot="toast"], [data-sonner-toast], [role="status"] { backdrop-filter: blur(36px) saturate(180%) !important; background: rgba(28, 28, 30, .85) !important; border: 1px solid rgba(255,255,255,.1) !important; border-radius: 16px !important; box-shadow: 0 16px 48px rgba(0,0,0,.55) !important; } /* ---------- Уважаем reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; } body::before { animation: none !important; } }