/* ============================================================ ATELIER — SKIN-ONLY layer for index.php + admin.php v3: MINIMAL. Only touches: - page background (body) - typography family on headings / meta - color tokens the site's own CSS reads (--accent, --warm, --text, etc.) Does NOT override individual components (buttons, toggles, tabs, inputs, login controls) — the site's own glassmorphism is already good; we just shift the palette. ============================================================ */ /* -------- TOKENS -------- */ :root { --at-accent: #2d6a4f; --at-accent-d: #1f4c39; --at-accent-l: #6fba90; --at-brass: #c8a265; --at-rose: #d4725a; /* LIGHT page palette */ --at-page-bg-l: linear-gradient(140deg, #ede4d3 0%, #e8d9c4 40%, #dbc6ab 100%); --at-page-g1-l: radial-gradient(ellipse 80% 60% at 15% -10%, rgba(255,255,255,0.9) 0%, transparent 55%); --at-page-g2-l: radial-gradient(ellipse 60% 70% at 100% 120%, rgba(200,162,101,0.22) 0%, transparent 60%); --at-blob-l: rgba(200,162,101,0.35); /* DARK page palette */ --at-page-bg-d: linear-gradient(140deg, #1d1b18 0%, #23201c 40%, #1a1814 100%); --at-page-g1-d: radial-gradient(ellipse 80% 60% at 15% -10%, rgba(255,220,160,0.12) 0%, transparent 55%); --at-page-g2-d: radial-gradient(ellipse 60% 70% at 100% 120%, rgba(76,175,128,0.15) 0%, transparent 60%); --at-blob-d: rgba(212,178,126,0.28); } /* =================== INDEX.PHP =================== */ /* index.php is LIGHT by default, adds .dark on */ body:not(.dark):not(.light):not(:has(.dash)) { background: var(--at-page-g1-l), var(--at-page-g2-l), var(--at-page-bg-l) !important; background-attachment: fixed !important; } body.dark { background: var(--at-page-g1-d), var(--at-page-g2-d), var(--at-page-bg-d) !important; background-attachment: fixed !important; } /* Only gently shift the brand accent on index — preserve every other component */ body:not(:has(.dash)) { --accent: var(--at-accent); --warm: var(--at-rose); } body.dark:not(:has(.dash)) { --accent: var(--at-accent-l); --warm: var(--at-rose); } /* Floating blob behind content (index only, subtle) */ body:not(:has(.dash))::before { content: ''; position: fixed; top: -20%; right: -10%; width: 60vw; height: 60vw; background: radial-gradient(circle, var(--at-blob-l) 0%, transparent 65%); filter: blur(80px); pointer-events: none; animation: atFloat 22s ease-in-out infinite; will-change: transform; z-index: 0; } body.dark:not(:has(.dash))::before { background: radial-gradient(circle, var(--at-blob-d) 0%, transparent 65%); } /* make sure content stacks above the blob */ body:not(:has(.dash)) .site-header, body:not(:has(.dash)) .main, body:not(:has(.dash)) .tabs-wrap, body:not(:has(.dash)) .site-footer, body:not(:has(.dash)) .user-bar, body:not(:has(.dash)) .filter-bar, body:not(:has(.dash)) .subject-panel, body:not(:has(.dash)) #login-screen, body:not(:has(.dash)) .card { position: relative; z-index: 1; } @keyframes atFloat { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-4vw, 3vw) scale(1.08); } } /* Display font for index headings — subtle */ body:not(:has(.dash)) .logo-text, body:not(:has(.dash)) .class-name, body:not(:has(.dash)) .cat-title, body:not(:has(.dash)) .card-title { font-family: 'Outfit', 'Segoe UI', sans-serif; letter-spacing: -0.01em; } /* Mono details for meta rows */ body:not(:has(.dash)) .card-meta, body:not(:has(.dash)) .card-date, body:not(:has(.dash)) .site-footer, body:not(:has(.dash)) .cat-count { font-family: 'JetBrains Mono', 'Menlo', monospace; letter-spacing: 0.02em; } /* =================== ADMIN.PHP =================== */ /* admin.php is DARK by default, adds .light on . Detect via .dash. */ body:has(.dash) { background: var(--at-page-g1-d), var(--at-page-g2-d), var(--at-page-bg-d) !important; background-attachment: fixed !important; } body:has(.dash).light { background: var(--at-page-g1-l), var(--at-page-g2-l), var(--at-page-bg-l) !important; } /* Gentle accent shift — site's glass buttons already read --accent / --accent-light */ body:has(.dash) { --accent: var(--at-accent-l); --accent-light: var(--at-accent-l); --warm: var(--at-rose); } body:has(.dash).light { --accent: var(--at-accent); --accent-light: var(--at-accent); --warm: var(--at-rose); } /* Display font on admin headings */ body:has(.dash) .topbar h1, body:has(.dash) .arow h3, body:has(.dash) .arow h4, body:has(.dash) .arow .aname, body:has(.dash) .bot-card h3, body:has(.dash) .upload-card h3, body:has(.dash) .login-card h1 { font-family: 'Outfit', 'Segoe UI', sans-serif; letter-spacing: -0.01em; } body:has(.dash) .topbar-links a, body:has(.dash) .topbar-links span, body:has(.dash) .rcnt, body:has(.dash) .slbl, body:has(.dash) .tw th, body:has(.dash) .form-group label { font-family: 'JetBrains Mono', 'Menlo', monospace; letter-spacing: 0.06em; } /* =================== INDEX — ATELIER SHAPES =================== */ /* Только index.php (не admin/.dash) */ /* --- ХЕДЕР-ПИЛЮЛЯ --- */ .site-header { max-width: 900px !important; margin: 18px auto 0 !important; border-radius: 24px !important; overflow: visible !important; } .site-header .header-top-row { padding: 10px 14px !important; gap: 14px !important; max-width: none !important; justify-content: flex-start !important; } /* Левая часть: логотип + заголовок */ .hdr-brand { display: inline-flex; align-items: center; gap: 12px; min-width: 0; } .site-header .hdr-brand .logo-icon { width: 40px !important; height: 40px !important; border-radius: 12px !important; background: linear-gradient(135deg, var(--at-brass), #a9884c) !important; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 1px 2px rgba(255,255,255,0.45), 0 4px 10px rgba(169,136,76,0.2) !important; overflow: hidden; line-height: 0 !important; } .site-header .hdr-brand .logo-icon img { width: 36px !important; height: 36px !important; border-radius: 8px !important; object-fit: cover; } .site-header .hdr-brand .logo-text { font-family: 'Outfit', sans-serif !important; font-weight: 800 !important; font-size: 1.2em !important; color: var(--at-accent) !important; letter-spacing: -0.01em !important; white-space: nowrap; } body.dark .site-header .hdr-brand .logo-text { color: var(--at-accent-l) !important; } .site-header .hdr-brand .logo-text span { color: var(--at-rose) !important; margin-left: 4px; } body.dark .site-header .hdr-brand .logo-text span { color: var(--at-rose) !important; } .site-header .hdr-brand .logo-text span::before { content: '· '; color: var(--text-muted); } /* Тема-кнопка — маленький квадрат слева */ .site-header .header-top-row .theme-toggle { width: 36px !important; height: 36px !important; font-size: 1em !important; border-radius: 12px !important; flex-shrink: 0; } /* Правый слот: user-chip, колокольчик, шестерёнка */ .hdr-right { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; } .hdr-user { font-family: 'Outfit', 'Segoe UI', sans-serif; font-size: .85em; font-weight: 600; color: var(--text-muted); white-space: nowrap; padding: 0 4px; } body.dark .hdr-user { color: rgba(255,255,255,0.8); } /* Единая «стеклянная» кнопка для колокольчика, шестерёнки и выхода */ .site-header .hdr-right .notif-bell, .site-header .hdr-right .hdr-gear, .site-header .hdr-right .hdr-logout { width: 36px !important; height: 36px !important; padding: 0 !important; border: 1px solid rgba(255, 255, 255, 0.55) !important; background: linear-gradient(135deg, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0.3) 100%) !important; cursor: pointer; border-radius: 12px !important; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; font-size: 1em !important; line-height: 1; color: var(--text-muted) !important; flex-shrink: 0; box-shadow: inset 0 1px 1px #ffffff, 0 2px 6px rgba(31, 38, 135, 0.06) !important; transition: background .2s ease, color .2s ease, transform .15s ease; } .site-header .hdr-right .notif-bell:hover, .site-header .hdr-right .hdr-gear:hover, .site-header .hdr-right .hdr-logout:hover { color: var(--at-accent) !important; background: linear-gradient(135deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.5) 100%) !important; transform: translateY(-1px); } body.dark .site-header .hdr-right .notif-bell, body.dark .site-header .hdr-right .hdr-gear, body.dark .site-header .hdr-right .hdr-logout { border-color: rgba(255, 255, 255, 0.1) !important; background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%) !important; color: rgba(255,255,255,0.75) !important; box-shadow: inset 0 1px 1px rgba(255,255,255,0.08), 0 2px 6px rgba(0,0,0,0.25) !important; } body.dark .site-header .hdr-right .notif-bell:hover, body.dark .site-header .hdr-right .hdr-gear:hover, body.dark .site-header .hdr-right .hdr-logout:hover { color: var(--at-accent-l) !important; background: linear-gradient(135deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.04) 100%) !important; } /* бэйдж на колокольчике должен оставаться поверх новой подложки */ .site-header .hdr-right .notif-bell .notif-badge { z-index: 2; } @media (max-width: 600px) { .hdr-user { display: none; } .site-header { margin: 10px 8px 0 !important; border-radius: 20px !important; } } /* --- ТАБЫ КЛАССОВ КАК ОТДЕЛЬНАЯ ПЛАВАЮЩАЯ ПИЛЮЛЯ --- */ body:not(:has(.dash)) .subject-panel > .tabs-wrap { max-width: 900px; margin: 14px auto 0; border-radius: 24px; position: static !important; border: 1px solid rgba(255, 255, 255, 0.45); } body.dark:not(:has(.dash)) .subject-panel > .tabs-wrap { border-color: rgba(255, 255, 255, 0.08); } /* --- PILL TABS С ТОЧКОЙ-МАРКЕРОМ (КЛАССЫ) + СЕГМЕНТ-КОНТРОЛЬ (ПРЕДМЕТЫ) --- */ body:not(:has(.dash)) .tabs-inner { gap: 8px; padding: 8px 10px; } /* Прячем старый ползунок */ body:not(:has(.dash)) .tabs-slider { display: none !important; } /* Базовые pill-табы (классы) — растягиваются на всю ширину пилюли */ body:not(:has(.dash)) .tab-btn { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 14px !important; border-radius: 999px !important; border: 1px solid transparent; background: transparent; color: var(--text-muted); font-size: .82em; letter-spacing: .02em; transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease; } body:not(:has(.dash)) .tab-btn::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--at-brass); opacity: .55; flex-shrink: 0; transition: opacity .2s ease, background .2s ease; } body:not(:has(.dash)) .tab-btn:hover { background: rgba(255, 255, 255, 0.35); color: var(--text); } body:not(:has(.dash)) .tab-btn.active { background: rgba(255, 255, 255, 0.95); color: var(--text); border-color: rgba(200, 162, 101, 0.35); box-shadow: 0 3px 12px rgba(45, 106, 79, 0.12), inset 0 1px 1px #ffffff; } body:not(:has(.dash)) .tab-btn.active::before { background: var(--at-accent); opacity: 1; box-shadow: 0 0 0 3px rgba(45, 106, 79, 0.12); } body.dark:not(:has(.dash)) .tab-btn { color: rgba(255, 255, 255, 0.55); } body.dark:not(:has(.dash)) .tab-btn::before { background: var(--at-brass); opacity: .6; } body.dark:not(:has(.dash)) .tab-btn:hover { background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.85); } body.dark:not(:has(.dash)) .tab-btn.active { background: rgba(40, 35, 28, 0.85); color: #fff; border-color: rgba(212, 178, 126, 0.35); box-shadow: 0 3px 14px rgba(0, 0, 0, 0.35), inset 0 1px 1px rgba(255,255,255,0.08); } body.dark:not(:has(.dash)) .tab-btn.active::before { background: var(--at-accent-l); box-shadow: 0 0 0 3px rgba(111, 186, 144, 0.18); } /* --- ПРЕДМЕТЫ: ОТДЕЛЬНЫЙ СЕГМЕНТ-КОНТРОЛЬ --- */ body:not(:has(.dash)) #subject-tabs-wrap { border-bottom: none !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-top: none !important; max-width: 900px; margin: 18px auto 0; padding: 0 !important; } body:not(:has(.dash)) #subject-tabs-wrap .tabs-inner { padding: 0 !important; gap: 6px; justify-content: flex-start; align-items: flex-end; } body:not(:has(.dash)) .subj-tab { flex: 0 0 auto !important; padding: 10px 22px !important; border: 1px solid rgba(255, 255, 255, 0.45) !important; border-bottom: none !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; background: rgba(255, 255, 255, 0.35) !important; font-family: 'Outfit', sans-serif; font-weight: 600; font-size: .92em; color: var(--text-muted); box-shadow: none !important; position: relative; top: 1px; justify-content: center !important; } body:not(:has(.dash)) .subj-tab::before { background: var(--at-brass); opacity: .5; } body:not(:has(.dash)) .subj-tab:hover { background: rgba(255, 255, 255, 0.6) !important; color: var(--text); } body:not(:has(.dash)) .subj-tab.active { background: rgba(255, 255, 255, 0.95) !important; color: var(--text); border-color: rgba(200, 162, 101, 0.4) !important; box-shadow: 0 -4px 12px rgba(45, 106, 79, 0.1), inset 0 1px 1px #ffffff !important; z-index: 2; } body:not(:has(.dash)) .subj-tab.active::before { background: var(--at-accent); opacity: 1; } body.dark:not(:has(.dash)) .subj-tab { background: rgba(255, 255, 255, 0.04) !important; border-color: rgba(255, 255, 255, 0.08) !important; color: rgba(255, 255, 255, 0.55); } body.dark:not(:has(.dash)) .subj-tab:hover { background: rgba(255, 255, 255, 0.08) !important; color: rgba(255,255,255,0.9); } body.dark:not(:has(.dash)) .subj-tab.active { background: rgba(40, 35, 28, 0.95) !important; color: #fff; border-color: rgba(212, 178, 126, 0.35) !important; box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255,255,255,0.08) !important; } body.dark:not(:has(.dash)) .subj-tab.active::before { background: var(--at-accent-l); } /* --- СЕТКА: ПЕРВАЯ КАРТОЧКА В АКТИВНЫХ — FULL-WIDTH HERO --- */ body:not(:has(.dash)) .category .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } body:not(:has(.dash)) .category .cards > .card:first-child { grid-column: 1 / -1; } body:not(:has(.dash)) .category .cards > .card:first-child .card-title { font-size: 1.35em; } body:not(:has(.dash)) .category .cards > .card:first-child .card-desc { font-size: .95em; } @media (max-width: 600px) { body:not(:has(.dash)) .category .cards { grid-template-columns: 1fr; } } /* --- НЕДЕЛЬНЫЙ БЛОК «ВЫПОЛНЕНО НА ЭТОЙ НЕДЕЛЕ» — ПЛАВАЮЩАЯ СТЕКЛЯННАЯ ПАНЕЛЬ --- */ .weekly-done { position: fixed !important; left: 50% !important; bottom: 20px !important; transform: translateX(-50%); z-index: 1000; margin: 0 !important; width: calc(100% - 32px) !important; max-width: 900px !important; padding: 14px 20px !important; border-radius: 22px; background: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.05) 40%, rgba(255,255,255,0.12) 100%) !important; backdrop-filter: blur(28px) saturate(1.8) !important; -webkit-backdrop-filter: blur(28px) saturate(1.8) !important; border: 1px solid rgba(255, 255, 255, 0.35) !important; border-top-color: rgba(255, 255, 255, 0.75) !important; border-left-color: rgba(255, 255, 255, 0.5) !important; box-shadow: 0 22px 45px rgba(31, 38, 135, 0.18), 0 8px 18px rgba(31, 38, 135, 0.10), inset 0 1px 1px rgba(255,255,255,0.55), inset 0 -1px 2px rgba(0,0,0,0.03) !important; } body.dark .weekly-done { background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.015) 50%, rgba(255,255,255,0.04) 100%) !important; backdrop-filter: blur(28px) saturate(1.5) !important; -webkit-backdrop-filter: blur(28px) saturate(1.5) !important; border: 1px solid rgba(255, 255, 255, 0.07) !important; border-top-color: rgba(255, 255, 255, 0.18) !important; border-left-color: rgba(255, 255, 255, 0.1) !important; box-shadow: 0 22px 45px rgba(0, 0, 0, 0.55), 0 8px 18px rgba(0, 0, 0, 0.35), inset 0 1px 1px rgba(255,255,255,0.08), inset 0 -1px 2px rgba(0,0,0,0.25) !important; } /* Когда панель видна — добавляем воздух внизу, чтобы контент не прятался под неё */ body.has-weekly-done { padding-bottom: 140px; } @media (max-width: 600px) { body.has-weekly-done { padding-bottom: 170px; } } /* Чипы внутри стеклянной панели — чуть прозрачнее, чтобы не спорили с фоном */ .weekly-chip { background: rgba(255, 255, 255, 0.35) !important; border-color: rgba(255, 255, 255, 0.4) !important; } body.dark .weekly-chip { background: rgba(255, 255, 255, 0.035) !important; border-color: rgba(255, 255, 255, 0.07) !important; } .weekly-done-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; } .weekly-done-title { font-family: 'Outfit', 'Segoe UI', sans-serif; font-weight: 700; font-size: 1.02em; letter-spacing: -0.01em; display: flex; align-items: center; gap: 8px; } .weekly-done-title::before { content: ''; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--at-accent); border-right-color: transparent; display: inline-block; } body.dark .weekly-done-title::before { border-color: var(--at-accent-l); border-right-color: transparent; } .weekly-done-stats { margin-left: auto; font-family: 'JetBrains Mono', 'Menlo', monospace; font-size: .78em; letter-spacing: .04em; color: var(--text-muted); white-space: nowrap; } .weekly-done-stats b { color: var(--text); font-weight: 700; } .weekly-chips { display: flex; flex-wrap: wrap; gap: 8px; } .weekly-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(0, 0, 0, 0.06); font-size: .85em; line-height: 1.2; color: var(--text); max-width: 100%; box-shadow: inset 0 1px 1px #ffffff, 0 2px 6px rgba(31, 38, 135, 0.05); } body.dark .weekly-chip { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.92); box-shadow: inset 0 1px 1px rgba(255,255,255,0.08), 0 2px 6px rgba(0,0,0,0.25); } .weekly-chip-mark { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: 'Outfit', sans-serif; font-weight: 800; font-size: .85em; color: #fff; flex-shrink: 0; box-shadow: inset 0 1px 1px rgba(255,255,255,0.3); } .weekly-chip-mark.g-5 { background: linear-gradient(135deg, #2ecc71, #27ae60); } .weekly-chip-mark.g-4 { background: linear-gradient(135deg, #9b59b6, #8e44ad); } .weekly-chip-mark.g-3 { background: linear-gradient(135deg, #f39c12, #d35400); } .weekly-chip-mark.g-2 { background: linear-gradient(135deg, #e74c3c, #c0392b); } .weekly-chip-mark.g-pending { background: linear-gradient(135deg, #95a5a6, #7f8c8d); font-size: .7em; } .weekly-chip-mark.g-done { background: linear-gradient(135deg, #2ecc71, #27ae60); } .weekly-chip-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; } /* =================== LIQUID GLASS =================== */ /* Эффект «жидкого стекла» в духе iOS 26: — хроматическая кайма (conic-gradient по границе) — усиленный blur + saturate + brightness (эффект линзы) — асимметричная подсветка сверху-слева (как будто свет падает) — внутреннее свечение по кромке */ /* Общий стек для всех стеклянных элементов */ body:not(:has(.dash)) .weekly-done, body:not(:has(.dash)) .site-header, body:not(:has(.dash)) .site-header .hdr-right .notif-bell, body:not(:has(.dash)) .site-header .hdr-right .hdr-gear, body:not(:has(.dash)) .site-header .hdr-right .hdr-logout { position: relative; isolation: isolate; } /* Хроматическая кайма — псевдоэлемент с conic-gradient, обрезанный mask-composite: exclude до тонкой рамки */ body:not(:has(.dash)) .weekly-done::after, body:not(:has(.dash)) .site-header::after, body:not(:has(.dash)) .site-header .hdr-right .notif-bell::after, body:not(:has(.dash)) .site-header .hdr-right .hdr-gear::after, body:not(:has(.dash)) .site-header .hdr-right .hdr-logout::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.3px; background: conic-gradient( from 140deg, rgba(255,255,255,0.95) 0%, rgba(255,175,215,0.55) 18%, rgba(195,220,255,0.50) 40%, rgba(210,255,230,0.40) 62%, rgba(255,230,195,0.55) 82%, rgba(255,255,255,0.95) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 3; opacity: 0.85; } body.dark:not(:has(.dash)) .weekly-done::after, body.dark:not(:has(.dash)) .site-header::after, body.dark:not(:has(.dash)) .site-header .hdr-right .notif-bell::after, body.dark:not(:has(.dash)) .site-header .hdr-right .hdr-gear::after, body.dark:not(:has(.dash)) .site-header .hdr-right .hdr-logout::after { background: conic-gradient( from 140deg, rgba(255,255,255,0.55) 0%, rgba(220,160,200,0.32) 18%, rgba(150,190,240,0.30) 40%, rgba(160,230,200,0.22) 62%, rgba(230,180,140,0.32) 82%, rgba(255,255,255,0.55) 100%); opacity: 0.7; } /* Кнопки — мини-версия каймы (1px) */ body:not(:has(.dash)) .site-header .hdr-right .notif-bell::after, body:not(:has(.dash)) .site-header .hdr-right .hdr-gear::after, body:not(:has(.dash)) .site-header .hdr-right .hdr-logout::after { padding: 1px; opacity: 0.7; } /* Усиленная прозрачность + линза для главной стеклянной панели */ body:not(:has(.dash)) .weekly-done { backdrop-filter: blur(32px) saturate(200%) brightness(108%) !important; -webkit-backdrop-filter: blur(32px) saturate(200%) brightness(108%) !important; /* асимметричная подсветка: верх-лево ярче, низ-право мягче */ box-shadow: 0 30px 70px rgba(31,38,135,0.22), 0 12px 24px rgba(31,38,135,0.12), inset 0 1.5px 0 rgba(255,255,255,0.85), inset 1.5px 0 0 rgba(255,255,255,0.45), inset 0 -1px 0 rgba(255,255,255,0.18), inset -1.5px 0 0 rgba(255,255,255,0.2), inset 0 0 35px rgba(255,255,255,0.08) !important; border: 1px solid transparent !important; } body.dark:not(:has(.dash)) .weekly-done { backdrop-filter: blur(32px) saturate(170%) brightness(110%) !important; -webkit-backdrop-filter: blur(32px) saturate(170%) brightness(110%) !important; box-shadow: 0 30px 70px rgba(0,0,0,0.55), 0 12px 24px rgba(0,0,0,0.35), inset 0 1.5px 0 rgba(255,255,255,0.2), inset 1.5px 0 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.3), inset -1.5px 0 0 rgba(0,0,0,0.2), inset 0 0 35px rgba(255,255,255,0.05) !important; } /* Шапка — тот же рецепт, но мягче (чтобы текст оставался читаемым) */ body:not(:has(.dash)) .site-header { backdrop-filter: blur(26px) saturate(170%) brightness(105%) !important; -webkit-backdrop-filter: blur(26px) saturate(170%) brightness(105%) !important; box-shadow: 0 18px 40px rgba(31,38,135,0.12), 0 6px 14px rgba(31,38,135,0.08), inset 0 1.5px 0 rgba(255,255,255,0.75), inset 1.5px 0 0 rgba(255,255,255,0.4), inset 0 -1px 0 rgba(255,255,255,0.15), inset -1.5px 0 0 rgba(255,255,255,0.18), inset 0 0 25px rgba(255,255,255,0.05) !important; border: 1px solid transparent !important; } body.dark:not(:has(.dash)) .site-header { backdrop-filter: blur(26px) saturate(150%) brightness(108%) !important; -webkit-backdrop-filter: blur(26px) saturate(150%) brightness(108%) !important; box-shadow: 0 18px 40px rgba(0,0,0,0.5), 0 6px 14px rgba(0,0,0,0.3), inset 0 1.5px 0 rgba(255,255,255,0.18), inset 1.5px 0 0 rgba(255,255,255,0.08), inset 0 -1px 0 rgba(0,0,0,0.25), inset -1.5px 0 0 rgba(0,0,0,0.18), inset 0 0 25px rgba(255,255,255,0.04) !important; } /* Стеклянные кнопки в шапке — усиленный вариант */ body:not(:has(.dash)) .site-header .hdr-right .notif-bell, body:not(:has(.dash)) .site-header .hdr-right .hdr-gear, body:not(:has(.dash)) .site-header .hdr-right .hdr-logout { backdrop-filter: blur(14px) saturate(180%) brightness(110%) !important; -webkit-backdrop-filter: blur(14px) saturate(180%) brightness(110%) !important; background: linear-gradient(135deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.18) 55%, rgba(255,255,255,0.30) 100%) !important; box-shadow: 0 4px 10px rgba(31,38,135,0.10), inset 0 1.2px 0 rgba(255,255,255,0.9), inset 1px 0 0 rgba(255,255,255,0.5), inset 0 -1px 0 rgba(255,255,255,0.15), inset 0 0 10px rgba(255,255,255,0.08) !important; border: 1px solid transparent !important; } body.dark:not(:has(.dash)) .site-header .hdr-right .notif-bell, body.dark:not(:has(.dash)) .site-header .hdr-right .hdr-gear, body.dark:not(:has(.dash)) .site-header .hdr-right .hdr-logout { background: linear-gradient(135deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.03) 55%, rgba(255,255,255,0.08) 100%) !important; box-shadow: 0 4px 10px rgba(0,0,0,0.35), inset 0 1.2px 0 rgba(255,255,255,0.22), inset 1px 0 0 rgba(255,255,255,0.10), inset 0 -1px 0 rgba(0,0,0,0.3), inset 0 0 10px rgba(255,255,255,0.04) !important; } /* При наведении — стекло «оживает», кайма чуть ярче */ body:not(:has(.dash)) .site-header .hdr-right .notif-bell:hover::after, body:not(:has(.dash)) .site-header .hdr-right .hdr-gear:hover::after, body:not(:has(.dash)) .site-header .hdr-right .hdr-logout:hover::after { opacity: 1; } body:not(:has(.dash)) .site-header .hdr-right .notif-bell:hover, body:not(:has(.dash)) .site-header .hdr-right .hdr-gear:hover, body:not(:has(.dash)) .site-header .hdr-right .hdr-logout:hover { backdrop-filter: blur(18px) saturate(200%) brightness(115%) !important; -webkit-backdrop-filter: blur(18px) saturate(200%) brightness(115%) !important; } /* ОПЦИОНАЛЬНО: реальное искажение пикселей через SVG feDisplacementMap. Фильтр определён в index.php (id=lq-glass-refract). Активируется только если браузер поддерживает backdrop-filter: url() */ @supports (backdrop-filter: url(#x)) or (-webkit-backdrop-filter: url(#x)) { body:not(:has(.dash)) .weekly-done { backdrop-filter: url(#lq-glass-refract) blur(30px) saturate(200%) brightness(108%) !important; -webkit-backdrop-filter: url(#lq-glass-refract) blur(30px) saturate(200%) brightness(108%) !important; } } /* =================== LIQUID GLASS — АДМИНКА =================== */ /* Тот же рецепт, что для index.php, но в scope админки (body:has(.dash)). Применяется к .topbar (главный хедер) и .admin-theme-btn--inline (кнопка темы в нём). Админ-темы используют .light на body (а не .dark), поэтому dark — это состояние по умолчанию. */ body:has(.dash) .topbar, body:has(.dash) .admin-theme-btn--inline, body:has(.dash) .bot-card, body:has(.dash) .upload-card { position: relative; isolation: isolate; } /* --- Хроматическая кайма по кромке (::after + conic-gradient + mask-composite) --- */ body:has(.dash) .topbar::after, body:has(.dash) .admin-theme-btn--inline::after, body:has(.dash) .bot-card::after, body:has(.dash) .upload-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.3px; background: conic-gradient( from 140deg, rgba(255,255,255,0.55) 0%, rgba(220,160,200,0.32) 18%, rgba(150,190,240,0.30) 40%, rgba(160,230,200,0.22) 62%, rgba(230,180,140,0.32) 82%, rgba(255,255,255,0.55) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 3; opacity: 0.7; } /* Светлая тема админки (body.light) — более яркая кайма */ body.light:has(.dash) .topbar::after, body.light:has(.dash) .admin-theme-btn--inline::after, body.light:has(.dash) .bot-card::after, body.light:has(.dash) .upload-card::after { background: conic-gradient( from 140deg, rgba(255,255,255,0.95) 0%, rgba(255,175,215,0.55) 18%, rgba(195,220,255,0.50) 40%, rgba(210,255,230,0.40) 62%, rgba(255,230,195,0.55) 82%, rgba(255,255,255,0.95) 100%); opacity: 0.85; } /* Кнопки — тонкая кайма (1px) */ body:has(.dash) .admin-theme-btn--inline::after { padding: 1px; opacity: 0.65; } /* --- Топбар: усиленный backdrop-filter + асимметричные inset-тени --- */ body:has(.dash) .topbar { backdrop-filter: blur(30px) saturate(170%) brightness(108%) !important; -webkit-backdrop-filter: blur(30px) saturate(170%) brightness(108%) !important; border: 1px solid transparent !important; box-shadow: 0 18px 40px rgba(0,0,0,0.45), 0 6px 14px rgba(0,0,0,0.28), inset 0 1.5px 0 rgba(255,255,255,0.18), inset 1.5px 0 0 rgba(255,255,255,0.08), inset 0 -1px 0 rgba(0,0,0,0.28), inset -1.5px 0 0 rgba(0,0,0,0.18), inset 0 0 28px rgba(255,255,255,0.04) !important; } body.light:has(.dash) .topbar { backdrop-filter: blur(30px) saturate(190%) brightness(105%) !important; -webkit-backdrop-filter: blur(30px) saturate(190%) brightness(105%) !important; box-shadow: 0 18px 40px rgba(31,38,135,0.14), 0 6px 14px rgba(31,38,135,0.08), inset 0 1.5px 0 rgba(255,255,255,0.85), inset 1.5px 0 0 rgba(255,255,255,0.45), inset 0 -1px 0 rgba(255,255,255,0.18), inset -1.5px 0 0 rgba(255,255,255,0.2), inset 0 0 28px rgba(255,255,255,0.06) !important; } /* --- Инлайн-кнопка темы в топбаре: тот же рецепт, что у кнопок в index.php --- */ body:has(.dash) .admin-theme-btn--inline { backdrop-filter: blur(14px) saturate(180%) brightness(112%) !important; -webkit-backdrop-filter: blur(14px) saturate(180%) brightness(112%) !important; background: linear-gradient(135deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.03) 55%, rgba(255,255,255,0.08) 100%) !important; border: 1px solid transparent !important; box-shadow: 0 4px 10px rgba(0,0,0,0.32), inset 0 1.2px 0 rgba(255,255,255,0.22), inset 1px 0 0 rgba(255,255,255,0.10), inset 0 -1px 0 rgba(0,0,0,0.3), inset 0 0 10px rgba(255,255,255,0.04) !important; } body.light:has(.dash) .admin-theme-btn--inline { background: linear-gradient(135deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.18) 55%, rgba(255,255,255,0.30) 100%) !important; box-shadow: 0 4px 10px rgba(31,38,135,0.10), inset 0 1.2px 0 rgba(255,255,255,0.9), inset 1px 0 0 rgba(255,255,255,0.5), inset 0 -1px 0 rgba(255,255,255,0.15), inset 0 0 10px rgba(255,255,255,0.08) !important; } body:has(.dash) .admin-theme-btn--inline:hover { backdrop-filter: blur(18px) saturate(200%) brightness(118%) !important; -webkit-backdrop-filter: blur(18px) saturate(200%) brightness(118%) !important; transform: translateY(-1px) !important; } body:has(.dash) .admin-theme-btn--inline:hover::after { opacity: 1; } /* --- Карточки-контейнеры (bot-card, upload-card) — мягкий liquid-glass --- */ body:has(.dash) .bot-card, body:has(.dash) .upload-card { backdrop-filter: blur(28px) saturate(160%) brightness(106%) !important; -webkit-backdrop-filter: blur(28px) saturate(160%) brightness(106%) !important; border: 1px solid transparent !important; box-shadow: 0 16px 36px rgba(0,0,0,0.35), 0 6px 14px rgba(0,0,0,0.2), inset 0 1.5px 0 rgba(255,255,255,0.15), inset 1px 0 0 rgba(255,255,255,0.07), inset 0 -1px 0 rgba(0,0,0,0.25), inset 0 0 22px rgba(255,255,255,0.03) !important; } body.light:has(.dash) .bot-card, body.light:has(.dash) .upload-card { backdrop-filter: blur(28px) saturate(180%) brightness(104%) !important; -webkit-backdrop-filter: blur(28px) saturate(180%) brightness(104%) !important; box-shadow: 0 16px 36px rgba(31,38,135,0.12), 0 6px 14px rgba(31,38,135,0.07), inset 0 1.5px 0 rgba(255,255,255,0.8), inset 1px 0 0 rgba(255,255,255,0.4), inset 0 -1px 0 rgba(255,255,255,0.16), inset 0 0 22px rgba(255,255,255,0.05) !important; } /* --- SVG-преломление для топбара админки --- */ @supports (backdrop-filter: url(#x)) or (-webkit-backdrop-filter: url(#x)) { body:has(.dash) .topbar { backdrop-filter: url(#lq-glass-refract) blur(28px) saturate(170%) brightness(108%) !important; -webkit-backdrop-filter: url(#lq-glass-refract) blur(28px) saturate(170%) brightness(108%) !important; } body.light:has(.dash) .topbar { backdrop-filter: url(#lq-glass-refract) blur(28px) saturate(190%) brightness(105%) !important; -webkit-backdrop-filter: url(#lq-glass-refract) blur(28px) saturate(190%) brightness(105%) !important; } } /* =================== МОБИЛЬНЫЕ ОПТИМИЗАЦИИ =================== */ /* --- ГЛАВНАЯ (index.php) — компактный хедер на узких экранах --- */ @media (max-width: 600px) { body:not(:has(.dash)) .site-header .header-top-row { padding: 8px 10px !important; gap: 8px !important; } body:not(:has(.dash)) .hdr-brand { gap: 8px; min-width: 0; flex: 1 1 auto; } body:not(:has(.dash)) .site-header .hdr-brand .logo-icon { width: 34px !important; height: 34px !important; border-radius: 10px !important; } body:not(:has(.dash)) .site-header .hdr-brand .logo-icon img { width: 30px !important; height: 30px !important; border-radius: 7px !important; } body:not(:has(.dash)) .site-header .hdr-brand .logo-text { font-size: 0.92em !important; min-width: 0; overflow: hidden; text-overflow: ellipsis; } body:not(:has(.dash)) .site-header .hdr-brand .logo-text span { margin-left: 3px; } body:not(:has(.dash)) .site-header .hdr-brand .logo-text span::before { content: '' !important; margin-right: 0; } /* Тема-кнопка и все стеклянные кнопки — 32px на мобильных */ body:not(:has(.dash)) .site-header .header-top-row .theme-toggle { width: 32px !important; height: 32px !important; border-radius: 10px !important; font-size: 0.95em !important; } body:not(:has(.dash)) .hdr-right { gap: 6px; flex-shrink: 0; } body:not(:has(.dash)) .site-header .hdr-right .notif-bell, body:not(:has(.dash)) .site-header .hdr-right .hdr-gear, body:not(:has(.dash)) .site-header .hdr-right .hdr-logout { width: 32px !important; height: 32px !important; border-radius: 10px !important; } body:not(:has(.dash)) .site-header .hdr-right .notif-bell svg, body:not(:has(.dash)) .site-header .hdr-right .hdr-gear svg, body:not(:has(.dash)) .site-header .hdr-right .hdr-logout svg { width: 15px !important; height: 15px !important; } } /* На совсем узких экранах — «Онлайн» остаётся, но шрифт меньше, чтобы вся надпись «Гимназия Онлайн» помещалась рядом с логотипом */ @media (max-width: 420px) { body:not(:has(.dash)) .site-header .hdr-brand .logo-text { font-size: 0.82em !important; letter-spacing: -0.02em !important; } body:not(:has(.dash)) .site-header .hdr-brand .logo-text span { display: inline !important; margin-left: 2px; font-size: 0.92em; } } /* Совсем крошечные экраны (<360px) — оставляем всё, но логотип-иконку чуть меньше */ @media (max-width: 360px) { body:not(:has(.dash)) .site-header .hdr-brand .logo-icon { width: 30px !important; height: 30px !important; } body:not(:has(.dash)) .site-header .hdr-brand .logo-icon img { width: 26px !important; height: 26px !important; } body:not(:has(.dash)) .site-header .hdr-brand .logo-text { font-size: 0.78em !important; } } /* --- ГЛАВНАЯ (index.php) — компактная панель «Выполнено на этой неделе» --- */ @media (max-width: 600px) { body:not(:has(.dash)) .weekly-done { bottom: 10px !important; padding: 7px 11px !important; border-radius: 16px !important; width: calc(100% - 16px) !important; } /* Заголовок и статистика — в одну строку, не переносятся */ body:not(:has(.dash)) .weekly-done-head { margin-bottom: 5px; gap: 6px; flex-wrap: nowrap; } body:not(:has(.dash)) .weekly-done-title { font-size: 0.78em; gap: 5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body:not(:has(.dash)) .weekly-done-title::before { width: 9px; height: 9px; border-width: 1.5px; flex-shrink: 0; } body:not(:has(.dash)) .weekly-done-stats { font-size: 0.6em; letter-spacing: 0.01em; flex-shrink: 0; } body:not(:has(.dash)) .weekly-chips { gap: 4px; } body:not(:has(.dash)) .weekly-chip { padding: 2px 8px 2px 2px !important; gap: 5px !important; font-size: 0.7em !important; border-radius: 99px !important; } body:not(:has(.dash)) .weekly-chip-mark { width: 16px; height: 16px; font-size: 0.65em; } body:not(:has(.dash)) .weekly-chip-title { max-width: 130px; } /* На мобильных показываем максимум 3 самых свежих — остальные скрываем */ body:not(:has(.dash)) .weekly-chips .weekly-chip:nth-child(n+4) { display: none; } body.has-weekly-done { padding-bottom: 95px; } } /* На совсем узких экранах — ещё компактнее, и максимум 2 чипа */ @media (max-width: 420px) { body:not(:has(.dash)) .weekly-done { padding: 6px 10px !important; border-radius: 14px !important; } body:not(:has(.dash)) .weekly-done-title { font-size: 0.74em; } body:not(:has(.dash)) .weekly-done-stats { font-size: 0.56em; } body:not(:has(.dash)) .weekly-chip { font-size: 0.66em !important; } body:not(:has(.dash)) .weekly-chip-title { max-width: 100px; } body:not(:has(.dash)) .weekly-chips .weekly-chip:nth-child(n+3) { display: none; } body.has-weekly-done { padding-bottom: 78px; } } /* --- АДМИНКА (admin.php) — адаптивный топбар --- */ /* Скрываем текст в ссылках, оставляем компактные иконки (🔔, ←) на мобильных. Также показываем fallback-иконку ⎋ для кнопки «Выйти». */ body:has(.dash) .topbar-logout .topbar-icon { display: none; } @media (max-width: 760px) { body:has(.dash) .topbar { padding: 10px 14px !important; flex-wrap: wrap; gap: 10px 12px; row-gap: 8px; } body:has(.dash) .topbar h1 { font-size: 0.95em !important; white-space: nowrap; flex-shrink: 0; } body:has(.dash) .topbar-links { gap: 8px !important; flex-wrap: wrap; margin-left: auto; align-items: center; } body:has(.dash) .topbar-user { font-size: 0.78em !important; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body:has(.dash) .admin-theme-btn--inline { width: 30px !important; height: 30px !important; font-size: 0.9em !important; border-radius: 9px !important; } } @media (max-width: 560px) { body:has(.dash) .topbar { padding: 8px 12px !important; gap: 8px; } body:has(.dash) .topbar h1 { font-size: 0.88em !important; line-height: 1.15; } body:has(.dash) .topbar-links { gap: 6px !important; justify-content: flex-end; } /* На мобильных — иконки без подписей */ body:has(.dash) .topbar-push .topbar-lbl, body:has(.dash) .topbar-home .topbar-lbl, body:has(.dash) .topbar-logout .topbar-lbl { display: none; } body:has(.dash) .topbar-logout .topbar-icon { display: inline-block; font-size: 1.1em; line-height: 1; } body:has(.dash) .topbar-push, body:has(.dash) .topbar-home, body:has(.dash) .topbar-logout { font-size: 1em !important; padding: 4px 6px; border-radius: 8px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; } body:has(.dash) .topbar-user { font-size: 0.75em !important; max-width: 90px; } body:has(.dash) .admin-theme-btn--inline { width: 28px !important; height: 28px !important; font-size: 0.85em !important; } } /* Совсем узкие (iPhone SE и подобные) — прячем имя учителя */ @media (max-width: 400px) { body:has(.dash) .topbar-user { display: none; } } /* =================== APPLE-STYLE LIQUID GLASS — UI ELEMENTS =================== */ /* Универсальный «легкий» рецепт из reference HTML-файла (clean Apple style): — мягкий backdrop-filter blur(15-20px) с saturate — тонкая белая рамка, верхняя кромка ярче (border-top brighter) — лёгкая полупрозрачная заливка (alpha 0.15-0.2) — inset highlight по верху + drop-shadow — на hover: усиление прозрачности, лёгкий lift, ярче glow — на active: лёгкое сжатие (scale 0.97) */ /* === [INDEX] ФИЛЬТР-ПИЛЮЛИ: Все / Тесты / ДЗ / Игры / Опросы === */ body:not(:has(.dash)) .filter-pill { background: rgba(255,255,255,0.18) !important; backdrop-filter: blur(18px) saturate(180%) !important; -webkit-backdrop-filter: blur(18px) saturate(180%) !important; border: 1px solid rgba(255,255,255,0.4) !important; border-top-color: rgba(255,255,255,0.75) !important; box-shadow: 0 3px 12px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.45) !important; transition: background .25s ease, transform .15s ease, box-shadow .25s ease, border-color .2s ease !important; } body:not(:has(.dash)) .filter-pill:hover { background: rgba(255,255,255,0.32) !important; border-color: rgba(255,255,255,0.6) !important; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.6) !important; } body:not(:has(.dash)) .filter-pill:active { transform: scale(0.97); } body.dark:not(:has(.dash)) .filter-pill { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.12) !important; border-top-color: rgba(255,255,255,0.22) !important; box-shadow: 0 3px 12px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.12) !important; } body.dark:not(:has(.dash)) .filter-pill:hover { background: rgba(255,255,255,0.13) !important; border-color: rgba(255,255,255,0.22) !important; } /* Активная пилюля: цвет акцента + стеклянный глянец сверху */ body:not(:has(.dash)) .filter-pill.active { box-shadow: 0 5px 16px rgba(45,106,79,0.35), inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -1px 0 rgba(0,0,0,0.10) !important; } /* === [INDEX] ПОИСК ЗАДАНИЙ === */ body:not(:has(.dash)) .filter-search { background: rgba(255,255,255,0.18) !important; backdrop-filter: blur(18px) saturate(180%) !important; -webkit-backdrop-filter: blur(18px) saturate(180%) !important; border: 1px solid rgba(255,255,255,0.4) !important; border-top-color: rgba(255,255,255,0.75) !important; box-shadow: inset 0 2px 5px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.55) !important; } body:not(:has(.dash)) .filter-search:focus { background: rgba(255,255,255,0.30) !important; border-color: var(--at-accent) !important; } body.dark:not(:has(.dash)) .filter-search { background: rgba(255,255,255,0.05) !important; border-color: rgba(255,255,255,0.10) !important; border-top-color: rgba(255,255,255,0.20) !important; } /* === [INDEX] КАРТОЧКИ ЗАДАНИЙ === */ body:not(:has(.dash)) .card { border-top-color: rgba(255,255,255,0.95) !important; border-left-color: rgba(255,255,255,0.7) !important; backdrop-filter: blur(28px) saturate(180%) !important; -webkit-backdrop-filter: blur(28px) saturate(180%) !important; box-shadow: 0 12px 32px rgba(31,38,135,0.10), 0 3px 8px rgba(31,38,135,0.05), inset 0 1.5px 0 rgba(255,255,255,0.8), inset 1.5px 0 0 rgba(255,255,255,0.4), inset 0 -1px 0 rgba(255,255,255,0.18) !important; transition: transform .35s cubic-bezier(0.4,0,0.2,1), box-shadow .35s ease !important; } body:not(:has(.dash)) .card:hover { transform: translateY(-4px) !important; box-shadow: 0 18px 42px rgba(31,38,135,0.14), 0 6px 14px rgba(31,38,135,0.08), inset 0 1.5px 0 rgba(255,255,255,0.95), inset 1.5px 0 0 rgba(255,255,255,0.55), inset 0 -1px 0 rgba(255,255,255,0.25) !important; } body.dark:not(:has(.dash)) .card { border-top-color: rgba(255,255,255,0.28) !important; border-left-color: rgba(255,255,255,0.12) !important; box-shadow: 0 12px 32px rgba(0,0,0,0.45), 0 3px 8px rgba(0,0,0,0.25), inset 0 1.5px 0 rgba(255,255,255,0.18), inset 1.5px 0 0 rgba(255,255,255,0.08), inset 0 -1px 0 rgba(0,0,0,0.25) !important; } body.dark:not(:has(.dash)) .card:hover { box-shadow: 0 18px 42px rgba(0,0,0,0.6), 0 6px 14px rgba(0,0,0,0.35), inset 0 1.5px 0 rgba(255,255,255,0.25), inset 1.5px 0 0 rgba(255,255,255,0.12) !important; } /* === [INDEX] КНОПКА ВХОДА (login-submit) — прозрачная стеклянная, без зелёной заливки === */ body:not(:has(.dash)) .login-box .login-submit { background: rgba(255,255,255,0.20) !important; backdrop-filter: blur(20px) saturate(180%) !important; -webkit-backdrop-filter: blur(20px) saturate(180%) !important; border: 1px solid rgba(255,255,255,0.4) !important; border-top-color: rgba(255,255,255,0.75) !important; color: var(--at-accent) !important; box-shadow: 0 4px 16px rgba(31,38,135,0.10), inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -1px 0 rgba(0,0,0,0.05) !important; transition: all .28s cubic-bezier(0.4,0,0.2,1) !important; } body:not(:has(.dash)) .login-box .login-submit:hover { background: rgba(255,255,255,0.35) !important; border-color: rgba(255,255,255,0.6) !important; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(31,38,135,0.16), inset 0 1px 0 rgba(255,255,255,0.65), inset 0 -1px 0 rgba(0,0,0,0.05) !important; } body:not(:has(.dash)) .login-box .login-submit:active { transform: scale(0.98); } body.dark:not(:has(.dash)) .login-box .login-submit { background: rgba(255,255,255,0.07) !important; border-color: rgba(255,255,255,0.10) !important; border-top-color: rgba(255,255,255,0.22) !important; color: var(--at-accent-l) !important; box-shadow: 0 4px 16px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.15) !important; } body.dark:not(:has(.dash)) .login-box .login-submit:hover { background: rgba(255,255,255,0.13) !important; border-color: rgba(255,255,255,0.22) !important; box-shadow: 0 10px 24px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.25) !important; } /* === [INDEX] ФИКС АВТОЗАПОЛНЕНИЯ БРАУЗЕРА В ПОЛЯХ ЛОГИНА === Браузер красит autofilled-инпуты в свой грязно-серый/жёлтый цвет. Трюк: inset box-shadow с огромным spread'ом перебивает фон, а -webkit-text-fill-color сохраняет читаемый цвет текста. */ body:not(:has(.dash)) .login-box input:-webkit-autofill, body:not(:has(.dash)) .login-box input:-webkit-autofill:hover, body:not(:has(.dash)) .login-box input:-webkit-autofill:focus, body:not(:has(.dash)) .login-box input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 1000px rgba(255,255,255,0.18) inset, inset 0 2px 5px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.5) !important; -webkit-text-fill-color: var(--text) !important; caret-color: var(--text) !important; transition: background-color 9999s ease-in-out 0s, color 9999s ease-in-out 0s; border: 1px solid rgba(255,255,255,0.4) !important; border-top-color: rgba(255,255,255,0.75) !important; } body.dark:not(:has(.dash)) .login-box input:-webkit-autofill, body.dark:not(:has(.dash)) .login-box input:-webkit-autofill:hover, body.dark:not(:has(.dash)) .login-box input:-webkit-autofill:focus, body.dark:not(:has(.dash)) .login-box input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 1000px rgba(255,255,255,0.05) inset, inset 0 2px 5px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.10) !important; -webkit-text-fill-color: #e4e6eb !important; caret-color: #e4e6eb !important; border: 1px solid rgba(255,255,255,0.10) !important; border-top-color: rgba(255,255,255,0.22) !important; } /* === [INDEX] ЛОГИН-ВКЛАДКИ (Ученик / Учитель) === */ body:not(:has(.dash)) .login-tabs { background: rgba(255,255,255,0.18) !important; backdrop-filter: blur(18px) saturate(180%) !important; -webkit-backdrop-filter: blur(18px) saturate(180%) !important; border: 1px solid rgba(255,255,255,0.4) !important; border-top-color: rgba(255,255,255,0.7) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -1px 2px rgba(0,0,0,0.04) !important; } body.dark:not(:has(.dash)) .login-tabs { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.10) !important; border-top-color: rgba(255,255,255,0.20) !important; } /* === [ADMIN] КНОПКИ-ДЕЙСТВИЯ .bsm (нейтральные, без inline background) === */ /* Цветные .bsm (style="background:#xxx") сохраняют свой цвет — inline побеждает */ body:has(.dash) .bsm { backdrop-filter: blur(14px) saturate(180%) !important; -webkit-backdrop-filter: blur(14px) saturate(180%) !important; border: 1px solid rgba(255,255,255,0.18) !important; border-top-color: rgba(255,255,255,0.32) !important; box-shadow: 0 3px 10px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -1px 0 rgba(0,0,0,0.15) !important; transition: transform .2s ease, box-shadow .2s ease, filter .2s ease !important; } body:has(.dash) .bsm:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.32), inset 0 -1px 0 rgba(0,0,0,0.15) !important; filter: brightness(1.08); } body:has(.dash) .bsm:active { transform: scale(0.97); } body.light:has(.dash) .bsm { border-color: rgba(255,255,255,0.55) !important; border-top-color: rgba(255,255,255,0.85) !important; box-shadow: 0 3px 10px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -1px 0 rgba(0,0,0,0.05) !important; } /* === [ADMIN] ОСНОВНЫЕ КНОПКИ .bbtn / .upload-btn (цветные, с глянцем) === */ body:has(.dash) .bbtn, body:has(.dash) .upload-btn, body:has(.dash) .login-card button { border: 1px solid rgba(255,255,255,0.22) !important; border-top-color: rgba(255,255,255,0.45) !important; box-shadow: 0 6px 18px rgba(108,99,255,0.30), inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -1px 0 rgba(0,0,0,0.15) !important; transition: transform .25s cubic-bezier(0.4,0,0.2,1), box-shadow .25s ease, filter .25s ease !important; } body:has(.dash) .bbtn:hover, body:has(.dash) .upload-btn:hover, body:has(.dash) .login-card button:hover { transform: translateY(-2px) !important; box-shadow: 0 12px 28px rgba(108,99,255,0.45), inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -1px 0 rgba(0,0,0,0.15) !important; filter: brightness(1.08); } body:has(.dash) .bbtn:active, body:has(.dash) .upload-btn:active, body:has(.dash) .login-card button:active { transform: scale(0.98) !important; } /* === [ADMIN] КАРТОЧКИ ЗАДАНИЙ .arow — усиленный glass === */ body:has(.dash) .arow { backdrop-filter: blur(20px) saturate(170%) !important; -webkit-backdrop-filter: blur(20px) saturate(170%) !important; border: 1px solid rgba(255,255,255,0.10) !important; border-top-color: rgba(255,255,255,0.22) !important; box-shadow: 0 6px 18px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.14), inset 0 -1px 0 rgba(0,0,0,0.18) !important; transition: transform .25s ease, box-shadow .25s ease !important; } body:has(.dash) .arow:hover { transform: translateY(-2px) !important; box-shadow: 0 12px 26px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.22) !important; } body.light:has(.dash) .arow { border-color: rgba(255,255,255,0.55) !important; border-top-color: rgba(255,255,255,0.85) !important; box-shadow: 0 6px 18px rgba(31,38,135,0.10), inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -1px 0 rgba(0,0,0,0.04) !important; } body.light:has(.dash) .arow:hover { box-shadow: 0 12px 26px rgba(31,38,135,0.14), inset 0 1px 0 rgba(255,255,255,0.7) !important; } /* === [ADMIN] ВКЛАДКИ — активной добавляем стеклянную «капсулу» === */ body:has(.dash) .admin-tab.active { background: rgba(255,255,255,0.06) !important; border-radius: 12px 12px 0 0 !important; backdrop-filter: blur(14px) saturate(160%) !important; -webkit-backdrop-filter: blur(14px) saturate(160%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), inset 1px 0 0 rgba(255,255,255,0.08) !important; } body.light:has(.dash) .admin-tab.active { background: rgba(255,255,255,0.45) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), inset 1px 0 0 rgba(255,255,255,0.4) !important; } /* === [ADMIN] МОДАЛКА .cbox — усиленный glass === */ body:has(.dash) .cbox { backdrop-filter: blur(28px) saturate(180%) brightness(108%) !important; -webkit-backdrop-filter: blur(28px) saturate(180%) brightness(108%) !important; border: 1px solid rgba(255,255,255,0.12) !important; border-top-color: rgba(255,255,255,0.28) !important; box-shadow: 0 24px 56px rgba(0,0,0,0.55), 0 8px 18px rgba(0,0,0,0.3), inset 0 1.5px 0 rgba(255,255,255,0.22) !important; } body.light:has(.dash) .cbox { border-color: rgba(255,255,255,0.5) !important; border-top-color: rgba(255,255,255,0.85) !important; box-shadow: 0 24px 56px rgba(31,38,135,0.18), 0 8px 18px rgba(31,38,135,0.10), inset 0 1.5px 0 rgba(255,255,255,0.85) !important; } /* === [ADMIN] КАРТОЧКА .bot-card (Telegram-бот) — наследует liquid-glass из выше === */ /* (уже стилизована в LIQUID GLASS — АДМИНКА секции) */ /* === ОБЩИЙ active-пресс для всех стеклянных кнопок (унификация) === */ body:not(:has(.dash)) .filter-pill:active, body:not(:has(.dash)) .login-tab:active, body:has(.dash) .admin-tab:active { transform: scale(0.97); } /* =================== АДАПТИВНАЯ ШИРИНА ДЛЯ ШИРОКИХ ЭКРАНОВ =================== */ /* На десктопах (≥1280px) расширяем основной контейнер, чтобы не было пустых полос по бокам. Сетка карточек (auto-fill, minmax(260px, 1fr)) автоматически добавит больше колонок (3 → 4 → 5). */ /* Tier 1: 1280-1599px — комфортный десктоп, max-width = 1180px */ @media (min-width: 1280px) { /* Основной контент: карточки заданий, поиск, фильтры */ body:not(:has(.dash)) .main { max-width: 1180px !important; padding-left: 24px; padding-right: 24px; } /* Шапка-пилюля синхронизирована с main */ body:not(:has(.dash)) .site-header { max-width: 1180px !important; } /* Фильтр-бар (поиск + Все/Тесты/ДЗ/Игры/Опросы) и табы классов */ body:not(:has(.dash)) .filter-bar, body:not(:has(.dash)) .header-top-row { max-width: 1180px !important; } body:not(:has(.dash)) .subject-panel > .tabs-wrap { max-width: 1180px !important; } /* ВАЖНО: .tabs-inner (flex-контейнер) тоже расширяется, иначе табы сжаты в центр 900px-ной зоны и не растягиваются */ body:not(:has(.dash)) .subject-panel > .tabs-wrap > .tabs-inner { max-width: 100% !important; } /* Плавающая панель «Выполнено на неделе» */ body:not(:has(.dash)) .weekly-done { max-width: 1180px !important; } /* Админка: топбар и контент */ body:has(.dash) .topbar { max-width: 1180px; margin-left: auto; margin-right: auto; } body:has(.dash) .dash { max-width: 1180px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; } } /* Tier 2: 1600-1919px — большой монитор, max-width = 1380px */ @media (min-width: 1600px) { body:not(:has(.dash)) .main { max-width: 1380px !important; } body:not(:has(.dash)) .site-header { max-width: 1380px !important; } body:not(:has(.dash)) .filter-bar, body:not(:has(.dash)) .header-top-row, body:not(:has(.dash)) .subject-panel > .tabs-wrap { max-width: 1380px !important; } body:not(:has(.dash)) .subject-panel > .tabs-wrap > .tabs-inner { max-width: 100% !important; } body:not(:has(.dash)) .weekly-done { max-width: 1380px !important; } body:has(.dash) .topbar { max-width: 1380px; } body:has(.dash) .dash { max-width: 1380px; } } /* Tier 3: 1920px+ — Full-HD и шире, max-width = 1560px */ @media (min-width: 1920px) { body:not(:has(.dash)) .main { max-width: 1560px !important; } body:not(:has(.dash)) .site-header { max-width: 1560px !important; } body:not(:has(.dash)) .filter-bar, body:not(:has(.dash)) .header-top-row, body:not(:has(.dash)) .subject-panel > .tabs-wrap { max-width: 1560px !important; } body:not(:has(.dash)) .subject-panel > .tabs-wrap > .tabs-inner { max-width: 100% !important; } body:not(:has(.dash)) .weekly-done { max-width: 1560px !important; } body:has(.dash) .topbar { max-width: 1560px; } body:has(.dash) .dash { max-width: 1560px; } } /* Чтобы карточки заданий стали крупнее на широких экранах, увеличиваем минимум в auto-fill — было 260px, теперь 300px (3-4 колонки). */ @media (min-width: 1280px) { body:not(:has(.dash)) .cards { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important; gap: 18px !important; } } @media (min-width: 1600px) { body:not(:has(.dash)) .cards { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important; gap: 20px !important; } }