/* ========================================================================== Портал Стокцен — оформление в духе веб-сервисов Apple ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } :root { /* Светлая тема */ --bg: #f5f5f7; --surface: #ffffff; --surface-2: #fafafc; --surface-inset: rgba(120, 120, 128, 0.12); --text: #1d1d1f; --text-2: #55555a; --text-3: #6e6e73; --separator: rgba(0, 0, 0, 0.08); --separator-strong: rgba(0, 0, 0, 0.14); --accent: #0071e3; --accent-hover: #0077ed; --accent-soft: rgba(0, 113, 227, 0.10); --red: #d70015; --red-soft: rgba(215, 0, 21, 0.10); --green: #248a3d; --orange: #c93400; --glass: rgba(255, 255, 255, 0.72); --glass-solid: #ffffff; --shadow-xs: 0 1px 2px rgba(0, 0, 0, .04); --shadow-sm: 0 2px 8px rgba(0, 0, 0, .06); --shadow-md: 0 8px 28px rgba(0, 0, 0, .10); --shadow-lg: 0 24px 68px rgba(0, 0, 0, .22); --r-xs: 8px; --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 22px; --pill: 980px; --sidebar-w: 262px; --ease: cubic-bezier(0.25, 0.1, 0.25, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); color-scheme: light dark; } /* Тёмная тема применяется в двух случаях: 1) система тёмная и пользователь не выбрал светлую вручную; 2) пользователь выбрал тёмную вручную (data-theme="dark" на ). Значения продублированы намеренно: объединить правило внутри @media и правило вне его в один селектор CSS не позволяет. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #000000; --surface: #1c1c1e; --surface-2: #242426; --surface-inset: rgba(120, 120, 128, 0.24); --text: #f5f5f7; --text-2: #aeaeb2; --text-3: #8e8e93; --separator: rgba(255, 255, 255, 0.11); --separator-strong: rgba(255, 255, 255, 0.18); --accent: #0a84ff; --accent-hover: #339cff; --accent-soft: rgba(10, 132, 255, 0.18); --red: #ff453a; --red-soft: rgba(255, 69, 58, 0.16); --green: #30d158; --orange: #ff9f0a; --glass: rgba(28, 28, 30, 0.72); --glass-solid: #1c1c1e; --shadow-xs: 0 1px 2px rgba(0, 0, 0, .5); --shadow-sm: 0 2px 10px rgba(0, 0, 0, .5); --shadow-md: 0 8px 28px rgba(0, 0, 0, .6); --shadow-lg: 0 24px 68px rgba(0, 0, 0, .75); } } :root[data-theme="dark"] { --bg: #000000; --surface: #1c1c1e; --surface-2: #242426; --surface-inset: rgba(120, 120, 128, 0.24); --text: #f5f5f7; --text-2: #aeaeb2; --text-3: #8e8e93; --separator: rgba(255, 255, 255, 0.11); --separator-strong: rgba(255, 255, 255, 0.18); --accent: #0a84ff; --accent-hover: #339cff; --accent-soft: rgba(10, 132, 255, 0.18); --red: #ff453a; --red-soft: rgba(255, 69, 58, 0.16); --green: #30d158; --orange: #ff9f0a; --glass: rgba(28, 28, 30, 0.72); --glass-solid: #1c1c1e; --shadow-xs: 0 1px 2px rgba(0, 0, 0, .5); --shadow-sm: 0 2px 10px rgba(0, 0, 0, .5); --shadow-md: 0 8px 28px rgba(0, 0, 0, .6); --shadow-lg: 0 24px 68px rgba(0, 0, 0, .75); } :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } html, body { margin: 0; height: 100%; } body { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--text); font-size: 15px; line-height: 1.47; letter-spacing: -0.011em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3 { letter-spacing: -0.022em; font-weight: 600; } .hidden { display: none !important; } .icon-sprite { display: none; } .icon { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .icon .fill { fill: currentColor; stroke: none; } ::selection { background: var(--accent-soft); } /* -------------------------------------------------------------------------- Кнопки -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 17px; border-radius: var(--pill); border: 1px solid transparent; background: var(--surface-inset); color: var(--text); font: inherit; font-size: 14px; font-weight: 500; letter-spacing: -0.01em; text-decoration: none; cursor: pointer; transition: background .22s var(--ease), transform .12s var(--ease), opacity .2s; white-space: nowrap; } .btn:hover { background: var(--separator-strong); } .btn:active { transform: scale(0.97); } .btn .icon { width: 17px; height: 17px; } .btn-primary { background: var(--accent); color: #fff; } .btn-primary:hover { background: var(--accent-hover); } .btn-primary:disabled { opacity: .5; cursor: default; } .btn-danger { background: var(--red-soft); color: var(--red); } .btn-danger:hover { background: var(--red); color: #fff; } .btn-sm { padding: 6px 13px; font-size: 13px; } .btn-sm .icon { width: 15px; height: 15px; } .btn-lg { padding: 12px 22px; font-size: 16px; } .btn-block { width: 100%; } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: none; background: transparent; color: var(--text-2); border-radius: 50%; cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease), transform .12s; } .icon-btn:hover { background: var(--surface-inset); color: var(--text); } .icon-btn:active { transform: scale(0.92); } .icon-btn .icon { width: 18px; height: 18px; } /* -------------------------------------------------------------------------- Поля ввода -------------------------------------------------------------------------- */ input[type="text"], input[type="password"], input[type="search"], input[type="file"], select, textarea { width: 100%; padding: 10px 13px; font: inherit; font-size: 15px; color: var(--text); background: var(--surface); border: 1px solid var(--separator-strong); border-radius: var(--r-sm); outline: none; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); -webkit-appearance: none; appearance: none; } input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); } textarea { resize: vertical; min-height: 44px; line-height: 1.5; } select { background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%), linear-gradient(135deg, var(--text-2) 50%, transparent 50%); background-position: calc(100% - 17px) 19px, calc(100% - 12px) 19px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 34px; } input[type="file"] { padding: 9px 12px; font-size: 14px; cursor: pointer; background: var(--surface-2); } input[type="file"]::file-selector-button { font: inherit; font-size: 13px; font-weight: 500; margin-right: 12px; padding: 5px 13px; border: none; border-radius: var(--pill); background: var(--accent); color: #fff; cursor: pointer; } input[type="color"] { width: 100%; height: 44px; padding: 4px; border: 1px solid var(--separator-strong); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; } label { display: block; margin-bottom: 16px; font-size: 13px; font-weight: 500; color: var(--text-2); letter-spacing: -0.005em; } label input, label select, label textarea { margin-top: 6px; font-weight: 400; } /* Плавающая подпись поля (экран входа) */ .field-stack { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; } .field { position: relative; } .field input { padding: 21px 14px 8px; font-size: 16px; background: var(--surface-2); } .field label { position: absolute; left: 14px; top: 14px; margin: 0; font-size: 15px; font-weight: 400; color: var(--text-3); pointer-events: none; transform-origin: left top; transition: transform .2s var(--ease-out), color .2s var(--ease); } .field input:focus + label, .field input:not(:placeholder-shown) + label { transform: translateY(-9px) scale(0.75); } .field input:focus + label { color: var(--accent); } .form-error { padding: 10px 14px; margin-bottom: 14px; font-size: 13.5px; color: var(--red); background: var(--red-soft); border-radius: var(--r-sm); text-align: left; } /* -------------------------------------------------------------------------- Экран входа -------------------------------------------------------------------------- */ .login-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--bg); } .login-card { width: 100%; max-width: 400px; padding: 44px 40px 38px; background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-md); text-align: center; animation: rise .5s var(--ease-out) both; } .login-mark { width: 58px; height: 58px; margin: 0 auto 18px; display: flex; align-items: center; justify-content: center; border-radius: var(--r-md); color: #fff; background: linear-gradient(160deg, #42a5ff, var(--accent)); box-shadow: 0 8px 20px rgba(0, 113, 227, .3); } .login-mark .icon { width: 30px; height: 30px; stroke-width: 1.5; } .login-card h1 { margin: 0 0 6px; font-size: 26px; letter-spacing: -0.03em; } .login-sub { margin: 0 0 28px; font-size: 14px; color: var(--text-2); line-height: 1.45; } @keyframes rise { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } } /* -------------------------------------------------------------------------- Каркас -------------------------------------------------------------------------- */ .app { display: flex; min-height: 100vh; } .sidebar { width: var(--sidebar-w); flex-shrink: 0; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px); border-right: 1px solid var(--separator); } @supports not (backdrop-filter: blur(1px)) { .sidebar { background: var(--glass-solid); } } .sidebar-head { display: flex; align-items: center; gap: 11px; padding: 20px 20px 16px; font-size: 15px; font-weight: 600; letter-spacing: -0.02em; } .sidebar-mark { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(160deg, #42a5ff, var(--accent)); } .sidebar-mark .icon { width: 17px; height: 17px; } .sidebar-nav { flex: 1; overflow-y: auto; padding: 0 10px 14px; } .nav-group-label { padding: 16px 10px 6px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-3); } .nav-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; margin-bottom: 1px; border: none; background: transparent; border-radius: var(--r-xs); font: inherit; font-size: 14px; color: var(--text); text-align: left; cursor: pointer; transition: background .18s var(--ease), color .18s var(--ease); } .nav-item .icon { width: 18px; height: 18px; color: var(--text-2); transition: color .18s; } .nav-item:hover { background: var(--surface-inset); } .nav-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 500; } .nav-item.active .icon { color: var(--accent); } .nav-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cat-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; } .nav-item .cat-dot { margin: 0 4.5px; } .nav-count { margin-left: auto; padding-left: 6px; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text-3); } /* Переключатель темы */ .theme-switch { display: flex; gap: 2px; margin: 10px 10px 0; padding: 2px; background: var(--surface-inset); border-radius: var(--r-xs); } .theme-switch button { flex: 1; display: flex; align-items: center; justify-content: center; padding: 5px 0; border: none; border-radius: 6px; background: transparent; color: var(--text-2); cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease); } .theme-switch button .icon { width: 16px; height: 16px; } .theme-switch button:hover { color: var(--text); } .theme-switch button.active { background: var(--surface); color: var(--accent); box-shadow: var(--shadow-xs); } .sidebar-user { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--separator); } .user-avatar { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; color: #fff; background: linear-gradient(160deg, #5ab0ff, var(--accent)); } .user-info { flex: 1; min-width: 0; } .user-name { font-size: 13.5px; font-weight: 500; } .user-role { font-size: 12px; color: var(--text-3); } .user-name, .user-role { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-backdrop { display: none; position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, .35); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; padding: 12px 28px; background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px); border-bottom: 1px solid var(--separator); } @supports not (backdrop-filter: blur(1px)) { .topbar { background: var(--glass-solid); } } .menu-btn { display: none; } .search-wrap { position: relative; flex: 1; max-width: 420px; } .search-icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-3); pointer-events: none; } .search-wrap input { padding: 8px 13px 8px 34px; font-size: 14px; background: var(--surface-inset); border-color: transparent; border-radius: var(--pill); } .search-wrap input:focus { background: var(--surface); } .search-wrap input::-webkit-search-cancel-button { -webkit-appearance: none; } .content { padding: 28px; max-width: 1500px; width: 100%; } .page-head { margin-bottom: 20px; } .page-head h1 { margin: 0; font-size: 30px; letter-spacing: -0.03em; } .page-sub { margin-top: 4px; font-size: 14px; color: var(--text-2); } /* -------------------------------------------------------------------------- Сегментированный переключатель типов -------------------------------------------------------------------------- */ .chips { display: inline-flex; gap: 2px; padding: 2px; margin-bottom: 22px; background: var(--surface-inset); border-radius: var(--r-sm); max-width: 100%; overflow-x: auto; scrollbar-width: none; } .chips::-webkit-scrollbar { display: none; } .chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 13px; border: none; border-radius: 8px; background: transparent; color: var(--text); font: inherit; font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer; transition: background .2s var(--ease), box-shadow .2s var(--ease); } .chip .icon { width: 15px; height: 15px; color: var(--text-2); } .chip:hover { background: rgba(127, 127, 127, .12); } .chip.active { background: var(--surface); box-shadow: var(--shadow-xs); } .chip.active .icon { color: var(--accent); } /* -------------------------------------------------------------------------- Карточки материалов -------------------------------------------------------------------------- */ .materials-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 16px; } .material-card { display: flex; flex-direction: column; gap: 11px; padding: 17px; background: var(--surface); border: 1px solid var(--separator); border-radius: var(--r-lg); box-shadow: var(--shadow-xs); transition: transform .28s var(--ease-out), box-shadow .28s var(--ease-out); } .material-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .card-top { display: flex; align-items: flex-start; gap: 12px; } .kind-icon { width: 42px; height: 42px; flex-shrink: 0; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; } .kind-icon .icon { width: 21px; height: 21px; } .kind-video { background: rgba(255, 69, 58, .12); color: #d70015; } .kind-word { background: rgba(0, 113, 227, .12); color: #0071e3; } .kind-excel { background: rgba(52, 199, 89, .14); color: #248a3d; } .kind-ppt { background: rgba(255, 149, 0, .14); color: #c93400; } .kind-text { background: rgba(120, 120, 128, .14); color: #6e6e73; } .kind-pdf { background: rgba(255, 45, 85, .12); color: #c9134a; } .kind-other { background: rgba(120, 120, 128, .14); color: #6e6e73; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kind-video { color: #ff453a; } :root:not([data-theme="light"]) .kind-word { color: #0a84ff; } :root:not([data-theme="light"]) .kind-excel { color: #30d158; } :root:not([data-theme="light"]) .kind-ppt { color: #ff9f0a; } :root:not([data-theme="light"]) .kind-text, :root:not([data-theme="light"]) .kind-other { color: #aeaeb2; } :root:not([data-theme="light"]) .kind-pdf { color: #ff375f; } } [data-theme="dark"] .kind-video { color: #ff453a; } [data-theme="dark"] .kind-word { color: #0a84ff; } [data-theme="dark"] .kind-excel { color: #30d158; } [data-theme="dark"] .kind-ppt { color: #ff9f0a; } [data-theme="dark"] .kind-text, [data-theme="dark"] .kind-other { color: #aeaeb2; } [data-theme="dark"] .kind-pdf { color: #ff375f; } .card-title-wrap { flex: 1; min-width: 0; } .card-title { margin: 0 0 2px; font-size: 15px; font-weight: 590; line-height: 1.3; letter-spacing: -0.015em; cursor: pointer; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .18s var(--ease); } .card-title:hover { color: var(--accent); } .card-desc { margin: 0; font-size: 13.5px; line-height: 1.42; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .card-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-3); } .card-meta .icon { width: 14px; height: 14px; } .meta-item { display: inline-flex; align-items: center; gap: 4px; } .cat-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--pill); font-size: 12px; font-weight: 500; } .fav-btn { width: 30px; height: 30px; margin: -3px -4px 0 0; } .fav-btn .icon { width: 17px; height: 17px; } .fav-btn.active { color: #ff9500; } .fav-btn.active .icon { fill: currentColor; } .order-btns { display: flex; flex-direction: column; gap: 1px; margin-top: -2px; } .order-btns .icon-btn { width: 22px; height: 17px; border-radius: 5px; } .order-btns .icon { width: 13px; height: 13px; } .card-actions { display: flex; align-items: center; gap: 7px; margin-top: auto; padding-top: 3px; } .card-actions .btn-primary { flex: 1; } .card-actions .btn:not(.btn-primary) { padding: 6px 11px; } .empty-state { padding: 72px 20px; text-align: center; color: var(--text-2); } .empty-state .empty-icon { width: 56px; height: 56px; margin: 0 auto 14px; color: var(--text-3); opacity: .55; } .empty-state .empty-icon .icon { width: 56px; height: 56px; stroke-width: 1.1; } .empty-state p { margin: 0; font-size: 15px; } /* Секции вкладки «Общее» */ .common-section { margin-bottom: 36px; } .common-section:last-child { margin-bottom: 0; } .common-section-head { display: flex; align-items: center; gap: 9px; padding-bottom: 10px; margin-bottom: 15px; border-bottom: 1px solid var(--separator); } .common-section-head h2 { margin: 0; font-size: 19px; letter-spacing: -0.02em; } .common-section-head .nav-count { font-size: 13px; } /* -------------------------------------------------------------------------- Папки и навигационная цепочка -------------------------------------------------------------------------- */ .folders-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(214px, 1fr)); gap: 12px; margin-bottom: 26px; } .folder-card { display: flex; align-items: center; gap: 11px; padding: 13px 14px; background: var(--surface); border: 1px solid var(--separator); border-radius: var(--r-md); box-shadow: var(--shadow-xs); cursor: pointer; transition: transform .24s var(--ease-out), box-shadow .24s var(--ease-out); } .folder-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); } .folder-icon { color: var(--accent); display: flex; } .folder-icon .icon { width: 26px; height: 26px; stroke-width: 1.5; } .folder-info { flex: 1; min-width: 0; } .folder-name { font-size: 14px; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .folder-count { font-size: 12.5px; color: var(--text-3); } .folder-actions { display: flex; gap: 1px; flex-shrink: 0; opacity: 0; transition: opacity .2s; } .folder-card:hover .folder-actions { opacity: 1; } .folder-actions .icon-btn { width: 28px; height: 28px; } .folder-actions .icon { width: 15px; height: 15px; } .folder-add { border-style: dashed; background: transparent; box-shadow: none; } .folder-add .folder-icon, .folder-add .folder-name { color: var(--text-2); } .folder-add:hover { border-color: var(--accent); background: var(--surface); } .folder-add:hover .folder-icon, .folder-add:hover .folder-name { color: var(--accent); } .breadcrumb { display: flex; align-items: center; gap: 4px; margin-bottom: 6px; font-size: 14px; color: var(--text-2); flex-wrap: wrap; } .breadcrumb a { color: var(--accent); cursor: pointer; text-decoration: none; } .breadcrumb a:hover { text-decoration: underline; } .breadcrumb .icon { width: 15px; height: 15px; color: var(--text-3); } /* -------------------------------------------------------------------------- Таблицы админки -------------------------------------------------------------------------- */ .page-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; } .page-head-row .page-head { margin-bottom: 0; } .table-wrap { background: var(--surface); border: 1px solid var(--separator); border-radius: var(--r-lg); box-shadow: var(--shadow-xs); overflow: hidden; } .table-scroll { overflow-x: auto; } table { width: 100%; border-collapse: collapse; min-width: 600px; } th { padding: 11px 18px; text-align: left; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text-3); background: var(--surface-2); border-bottom: 1px solid var(--separator); } td { padding: 13px 18px; font-size: 14px; border-bottom: 1px solid var(--separator); } tbody tr:last-child td { border-bottom: none; } tbody tr { transition: background .16s var(--ease); } tbody tr:hover { background: var(--surface-2); } .td-actions { display: flex; gap: 6px; justify-content: flex-end; } .perm-tag { display: inline-block; margin: 1px 3px 1px 0; padding: 3px 10px; border-radius: var(--pill); font-size: 12px; font-weight: 500; background: var(--surface-inset); color: var(--text-2); } .perm-tag.admin { background: var(--accent-soft); color: var(--accent); } /* -------------------------------------------------------------------------- Модальные окна -------------------------------------------------------------------------- */ .modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(0, 0, 0, .42); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); animation: fade .22s var(--ease) both; } @keyframes fade { from { opacity: 0 } to { opacity: 1 } } .modal-box { display: flex; flex-direction: column; width: 100%; max-width: 520px; max-height: 92vh; background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); overflow: hidden; animation: pop .34s var(--ease-out) both; } @keyframes pop { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } } .viewer-box { max-width: 1020px; } .modal-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px 15px 22px; border-bottom: 1px solid var(--separator); flex-shrink: 0; } .modal-head h2 { margin: 0; font-size: 17px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .modal-head-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .modal-form { padding: 22px; overflow-y: auto; } .modal-form .form-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 4px; } .check-row { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; font-size: 14.5px; font-weight: 400; color: var(--text); cursor: pointer; } .check-row:last-child { margin-bottom: 0; } .check-row input { width: auto; margin: 0; } input[type="checkbox"] { width: 19px; height: 19px; flex-shrink: 0; border: 1.5px solid var(--separator-strong); border-radius: 6px; background: var(--surface); cursor: pointer; -webkit-appearance: none; appearance: none; transition: background .18s var(--ease), border-color .18s var(--ease); } input[type="checkbox"]:checked { background: var(--accent) no-repeat center; border-color: var(--accent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E"); background-size: 13px; } input[type="checkbox"]:focus-visible { box-shadow: 0 0 0 4px var(--accent-soft); } .check-group { margin: 8px 0 16px; padding: 13px; border: 1px solid var(--separator); border-radius: var(--r-sm); background: var(--surface-2); max-height: 190px; overflow-y: auto; } .form-section-label { margin: 20px 0 10px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-3); } /* -------------------------------------------------------------------------- Просмотр материалов -------------------------------------------------------------------------- */ .viewer-body { flex: 1; min-height: 220px; overflow: auto; background: var(--surface-2); } .viewer-body video { display: block; width: 100%; max-height: 68vh; background: #000; } .viewer-body iframe { display: block; width: 100%; height: 72vh; border: none; } .viewer-doc { padding: 32px 38px; line-height: 1.6; background: var(--surface); min-height: 100%; } .viewer-doc img { max-width: 100%; } .viewer-doc h1, .viewer-doc h2, .viewer-doc h3 { letter-spacing: -0.02em; } .viewer-doc table, .viewer-sheet table { border-collapse: collapse; min-width: auto; } .viewer-doc td, .viewer-doc th, .viewer-sheet td, .viewer-sheet th { padding: 6px 11px; font-size: 13px; border: 1px solid var(--separator-strong); text-transform: none; background: transparent; color: var(--text); } .viewer-text { margin: 0; padding: 26px 30px; background: var(--surface); min-height: 100%; font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; } .sheet-tabs { display: flex; gap: 2px; padding: 14px 18px 0; flex-wrap: wrap; } .viewer-sheet { padding: 16px 18px 22px; overflow-x: auto; } .viewer-loading { padding: 62px 28px; text-align: center; color: var(--text-2); font-size: 14.5px; line-height: 1.6; } .viewer-ppt { display: flex; justify-content: center; padding: 20px; overflow: auto; background: var(--surface-2); } /* Слайды лежат внутри контейнера библиотеки: .viewer-ppt > #ppt-host > wrapper > слайды */ .viewer-ppt .pptx-preview-wrapper > *, .viewer-ppt > div > div > * { margin-bottom: 16px !important; border-radius: var(--r-sm); box-shadow: var(--shadow-sm); background: #fff; overflow: hidden; } .viewer-ppt .pptx-preview-wrapper > *:last-child, .viewer-ppt > div > div > *:last-child { margin-bottom: 0 !important; } /* -------------------------------------------------------------------------- Комментарии -------------------------------------------------------------------------- */ .viewer-comments { flex-shrink: 0; max-height: 296px; overflow-y: auto; padding: 16px 22px 18px; background: var(--surface); border-top: 1px solid var(--separator); } .viewer-comments h3 { margin: 0 0 12px; font-size: 14px; color: var(--text-2); font-weight: 600; } .comment-item { display: flex; gap: 11px; padding: 9px 0; } .comment-item + .comment-item { border-top: 1px solid var(--separator); } .comment-avatar { width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 600; color: #fff; background: linear-gradient(160deg, #7ec0ff, var(--accent)); } .comment-body { flex: 1; min-width: 0; } .comment-meta { font-size: 12px; color: var(--text-3); margin-bottom: 2px; } .comment-meta strong { font-size: 13.5px; font-weight: 590; color: var(--text); } .comment-text { font-size: 14px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: break-word; } .comment-del { width: 28px; height: 28px; align-self: flex-start; opacity: 0; transition: opacity .2s; } .comment-item:hover .comment-del { opacity: 1; } .comment-del .icon { width: 14px; height: 14px; } .comments-empty { padding: 4px 0 8px; font-size: 13.5px; color: var(--text-3); } .comment-form { display: flex; align-items: flex-end; gap: 9px; margin-top: 12px; } .comment-form textarea { flex: 1; min-height: 38px; max-height: 130px; padding: 9px 13px; font-size: 14px; border-radius: var(--r-md); background: var(--surface-2); } /* -------------------------------------------------------------------------- Уведомление -------------------------------------------------------------------------- */ .toast { position: fixed; left: 50%; bottom: 30px; z-index: 200; max-width: 90vw; padding: 12px 22px; font-size: 14px; font-weight: 500; color: #fff; background: rgba(28, 28, 30, .92); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-radius: var(--pill); box-shadow: var(--shadow-md); animation: toast-in .38s var(--ease-out) both; } .toast.error { background: rgba(215, 0, 21, .94); } @keyframes toast-in { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } } .toast { transform: translateX(-50%); } /* -------------------------------------------------------------------------- Адаптивность -------------------------------------------------------------------------- */ @media (max-width: 900px) { .sidebar { position: fixed; top: 0; left: 0; z-index: 50; height: 100%; transform: translateX(-100%); transition: transform .34s var(--ease-out); box-shadow: var(--shadow-lg); } .sidebar.open { transform: none; } .sidebar-backdrop.show { display: block; animation: fade .28s var(--ease) both; } .menu-btn { display: inline-flex; } .topbar { padding: 10px 14px; } .content { padding: 20px 16px; } .page-head h1 { font-size: 25px; } } @media (max-width: 560px) { .materials-grid, .folders-grid { grid-template-columns: 1fr; } .btn-label { display: none; } .btn { padding: 8px 14px; } .modal { padding: 0; align-items: flex-end; } .modal-box { max-width: none; max-height: 94vh; border-radius: var(--r-xl) var(--r-xl) 0 0; } @keyframes pop { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } } .viewer-doc { padding: 20px 18px; } .viewer-text { padding: 18px 16px; } .page-head h1 { font-size: 22px; } .folder-actions { opacity: 1; } .comment-del { opacity: 1; } .login-card { padding: 34px 24px 30px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }