/* ─────────────────────────── Design system ────────────────────────────── * Стиль dvr_admin — минималистичный admin UI. * Копируй этот файл в свой проект, подключай * или импортируй в JS-фреймворке (Next/Vite: `import './styles.css'`). * Вся тема управляется CSS-переменными. Тёмная — добавь `class="dark"` на . * ──────────────────────────────────────────────────────────────────────── */ :root{ --color-background-primary:#ffffff; --color-background-secondary:#f7f6f3; --color-background-tertiary:#eeece5; --color-background-info:#e6f1fb; --color-border-tertiary:#e2e0d8; --color-border-secondary:#ccc9be; --color-border-danger:#f5c0c0; --color-text-primary:#1a1916; --color-text-secondary:#6b6960; --color-text-tertiary:#999790; --color-text-danger:#c0392b; --border-radius-md:6px; --border-radius-lg:10px; --accent:#378add; } body.dark{ --color-background-primary:#1c1c1e; --color-background-secondary:#2c2c2e; --color-background-tertiary:#111113; --color-background-info:#0d2a45; --color-border-tertiary:#3a3a3c; --color-border-secondary:#48484a; --color-border-danger:#5c2020; --color-text-primary:#f0ede6; --color-text-secondary:#a0a09a; --color-text-tertiary:#666660; --color-text-danger:#f05050; } *{box-sizing:border-box;margin:0;padding:0} body{ font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; background:var(--color-background-tertiary); color:var(--color-text-primary); font-size:13px;min-height:100vh; } a{color:inherit;text-decoration:none} /* ── Shell: sidebar + main ─────────────────────────────────────────────── */ .shell{display:flex;min-height:100vh} .sidebar{ width:196px;flex-shrink:0; background:var(--color-background-primary); border-right:0.5px solid var(--color-border-tertiary); display:flex;flex-direction:column; position:fixed;top:0;left:0;bottom:0;z-index:10; transition:width .2s ease;overflow:hidden; } .sidebar.sb-collapsed{width:44px} .logo{ padding:0 16px;height:44px;font-size:15px;font-weight:600; border-bottom:0.5px solid var(--color-border-tertiary);margin-bottom:8px; display:flex;align-items:center;gap:8px;flex-shrink:0;white-space:nowrap; } .logo-dot{width:8px;height:8px;border-radius:50%;background:#e94560;flex-shrink:0} .nav-section{ font-size:11px;color:var(--color-text-tertiary);padding:12px 16px 4px; text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;overflow:hidden; } .nav-item{ display:flex;align-items:center;gap:8px;padding:7px 16px;cursor:pointer; color:var(--color-text-secondary);transition:background .1s;white-space:nowrap; } .nav-item:hover{background:var(--color-background-secondary);color:var(--color-text-primary)} .nav-item.active{background:var(--color-background-secondary);color:var(--color-text-primary);font-weight:500} .nav-icon{width:15px;height:15px;opacity:.6;flex-shrink:0} .nav-item.active .nav-icon,.nav-item:hover .nav-icon{opacity:1} .nav-label{overflow:hidden;transition:opacity .15s} .nav-divider{height:0.5px;background:var(--color-border-tertiary);margin:6px 16px} .nav-bot{ margin-top:auto;padding:12px 16px; border-top:0.5px solid var(--color-border-tertiary); font-size:12px;color:var(--color-text-tertiary); display:flex;align-items:center;gap:8px;flex-wrap:wrap; } .nav-bot-uname{flex:1;overflow:hidden;text-overflow:ellipsis} .sb-toggle{ display:flex;align-items:center;justify-content:center; width:24px;height:24px;border:none;background:none;cursor:pointer; color:var(--color-text-tertiary);border-radius:4px;margin-left:auto; transition:transform .2s ease; } .sb-toggle:hover{background:var(--color-background-secondary)} /* collapsed state */ .sidebar.sb-collapsed .nav-section{padding:4px 0;font-size:0} .sidebar.sb-collapsed .nav-item{padding:7px 0;justify-content:center} .sidebar.sb-collapsed .nav-label{display:none} .sidebar.sb-collapsed .logo{padding:0;display:grid;place-items:center} .sidebar.sb-collapsed .logo-dot{display:none} .sidebar.sb-collapsed #sb-toggle-btn{margin-left:0;transform:rotate(180deg)} .sidebar.sb-collapsed .nav-bot{padding:10px 0;justify-content:center} .sidebar.sb-collapsed .nav-bot-uname{display:none} .main{ flex:1;margin-left:196px;display:flex;flex-direction:column;min-width:0; transition:margin-left .2s ease; } .main.sb-collapsed{margin-left:44px} .topbar{ padding:0 20px;height:44px; background:var(--color-background-primary); border-bottom:0.5px solid var(--color-border-tertiary); display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:5;flex-shrink:0; } .topbar h1{font-size:15px;font-weight:500;flex:1} .content{padding:20px} /* ── Cards ─────────────────────────────────────────────────────────────── */ .card{ background:var(--color-background-primary); border:0.5px solid var(--color-border-tertiary); border-radius:var(--border-radius-lg); overflow:hidden;margin-bottom:16px; } .card-head{ padding:12px 16px;display:flex;align-items:center;gap:8px; border-bottom:0.5px solid var(--color-border-tertiary); } .card-title{font-size:13px;font-weight:500;flex:1} .card-body{padding:16px} /* ── Metrics grid ──────────────────────────────────────────────────────── */ .metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:20px} .metric{ background:var(--color-background-primary); border:0.5px solid var(--color-border-tertiary); border-radius:var(--border-radius-md);padding:12px 14px; } .metric-label{font-size:11px;color:var(--color-text-tertiary);margin-bottom:4px} .metric-val{font-size:22px;font-weight:500} .metric-sub{font-size:11px;color:var(--color-text-secondary);margin-top:2px} /* ── Tables ────────────────────────────────────────────────────────────── */ .tbl{width:100%;border-collapse:collapse} .tbl th{ font-size:11px;font-weight:500;color:var(--color-text-tertiary);text-align:left; padding:8px 14px;border-bottom:0.5px solid var(--color-border-tertiary); background:var(--color-background-secondary); } .tbl td{padding:9px 14px;border-bottom:0.5px solid var(--color-border-tertiary)} .tbl tr:last-child td{border-bottom:none} .tbl tr:hover td{background:var(--color-background-secondary)} .tbl tr.selected td{background:var(--color-background-info)} /* ── Buttons ───────────────────────────────────────────────────────────── */ .btn{ font-size:12px;padding:5px 10px;border-radius:var(--border-radius-md); border:0.5px solid var(--color-border-secondary);background:transparent; color:var(--color-text-primary);cursor:pointer;white-space:nowrap; } .btn:hover{background:var(--color-background-secondary)} .btn-primary{background:var(--color-text-primary);color:var(--color-background-primary);border-color:transparent} .btn-primary:hover{background:var(--color-text-secondary)} .btn-danger{color:var(--color-text-danger);border-color:var(--color-border-danger)} .btn-danger:hover{background:#fdf0f0} body.dark .btn-danger:hover{background:#3a0d0d} .btn-success{color:#3a7a3a;border-color:#3a7a3a} .btn-success:hover{background:#f0fdf0} body.dark .btn-success:hover{background:#0d2a0d} .btn-sm{font-size:11px;padding:3px 8px} .btn:disabled{opacity:.4;cursor:default} /* ── Badges + status dots ──────────────────────────────────────────────── */ .badge{display:inline-block;font-size:11px;padding:2px 7px;border-radius:20px} .badge-green{background:#eaf3de;color:#27500a} .badge-red{background:#fcebeb;color:#791f1f} .badge-gray{background:#f1efe8;color:#444441} .badge-blue{background:#e6f1fb;color:#0c447c} .badge-amber{background:#faeeda;color:#633806} body.dark .badge-green{background:#1e3a0d;color:#7ec94a} body.dark .badge-red{background:#3a0d0d;color:#f07070} body.dark .badge-gray{background:#2c2c2e;color:#a0a09a} body.dark .badge-blue{background:#0d2233;color:#7ab8f0} body.dark .badge-amber{background:#3a2200;color:#e0a050} .dot{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:5px} .dot-green{background:#639922} .dot-red{background:#e24b4a} .dot-amber{background:#ef9f27} .dot-gray{background:#aaa} /* ── Forms ─────────────────────────────────────────────────────────────── */ .form-row{margin-bottom:12px} .form-row label{ display:block;font-size:11px;color:var(--color-text-tertiary); margin-bottom:4px;text-transform:uppercase;letter-spacing:.04em; } .form-row input,.form-row select,.form-row textarea{ width:100%;padding:7px 10px; border:0.5px solid var(--color-border-secondary); border-radius:var(--border-radius-md); background:var(--color-background-secondary); color:var(--color-text-primary); font-size:13px;font-family:inherit; } .form-row input:focus,.form-row select:focus,.form-row textarea:focus{ outline:none;border-color:var(--accent);background:var(--color-background-primary); } .form-err{font-size:12px;color:var(--color-text-danger);margin-top:8px} .search{ padding:6px 10px;border-radius:var(--border-radius-md); border:0.5px solid var(--color-border-tertiary); background:var(--color-background-secondary); color:var(--color-text-primary);font-size:12px;width:200px; } /* ── Modal ─────────────────────────────────────────────────────────────── */ .overlay{ display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:100; align-items:center;justify-content:center; } .overlay.open{display:flex} .modal{ background:var(--color-background-primary); border-radius:var(--border-radius-lg); width:420px;max-width:95vw;box-shadow:0 8px 32px rgba(0,0,0,.18); } .modal-head{ padding:14px 16px;border-bottom:0.5px solid var(--color-border-tertiary); display:flex;align-items:center;justify-content:space-between; } .modal-title{font-size:14px;font-weight:500} .modal-close{ background:none;border:none;cursor:pointer;font-size:18px; color:var(--color-text-tertiary);line-height:1; } .modal-body{padding:16px} .modal-foot{ padding:12px 16px;border-top:0.5px solid var(--color-border-tertiary); display:flex;justify-content:flex-end;gap:8px; } /* ── Flash messages ────────────────────────────────────────────────────── */ .flash{padding:10px 14px;border-radius:var(--border-radius-md);margin-bottom:14px;font-size:13px} .flash-ok{background:#eaf3de;color:#27500a} .flash-err{background:#fcebeb;color:#791f1f} body.dark .flash-ok{background:#1e3a0d;color:#7ec94a} body.dark .flash-err{background:#3a0d0d;color:#f07070} /* ── Login card ────────────────────────────────────────────────────────── */ .login-wrap{display:flex;align-items:center;justify-content:center;min-height:100vh} .login-card{ background:var(--color-background-primary); border:0.5px solid var(--color-border-tertiary); border-radius:var(--border-radius-lg); padding:32px;width:340px; } .login-logo{font-size:18px;font-weight:600;margin-bottom:24px;display:flex;align-items:center;gap:8px} /* ── Theme toggle button ───────────────────────────────────────────────── */ .theme-toggle{ background:none;border:0.5px solid var(--color-border-tertiary); border-radius:var(--border-radius-md);padding:3px 5px;cursor:pointer; color:var(--color-text-secondary);display:flex;align-items:center; } .theme-toggle:hover{background:var(--color-background-secondary)} /* ── Panel split (list + detail) ───────────────────────────────────────── */ .panel-split{display:flex;gap:0;min-height:0} .panel-left{width:240px;flex-shrink:0;border-right:0.5px solid var(--color-border-tertiary);overflow-y:auto} .panel-right{flex:1;overflow-y:auto;padding:16px} .panel-list-item{ padding:9px 14px;cursor:pointer; border-bottom:0.5px solid var(--color-border-tertiary); display:flex;align-items:center;gap:8px; } .panel-list-item:hover{background:var(--color-background-secondary)} .panel-list-item.active{background:var(--color-background-info)} /* ── Avatar ────────────────────────────────────────────────────────────── */ .avatar{ width:32px;height:32px;border-radius:50%; display:inline-flex;align-items:center;justify-content:center; font-size:12px;font-weight:500;flex-shrink:0; } /* ── Mobile bottom nav (< 768px) ───────────────────────────────────────── */ .mob-nav{display:none} @media(max-width:768px){ .sidebar{display:none} .main{margin-left:0!important;padding-bottom:58px} .topbar{display:none} .metrics{grid-template-columns:repeat(2,minmax(0,1fr))} .mob-nav{ display:flex;position:fixed;bottom:0;left:0;right:0;z-index:20; background:var(--color-background-primary); border-top:0.5px solid var(--color-border-tertiary); height:54px;align-items:stretch; padding:0 env(safe-area-inset-right,0) env(safe-area-inset-bottom,0) env(safe-area-inset-left,0); } .mob-nav-item{ flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center; gap:3px;color:var(--color-text-tertiary);font-size:10px; border:none;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent; } .mob-nav-item.active{color:var(--color-text-primary)} .mob-nav-item svg{opacity:.55} .mob-nav-item.active svg{opacity:1} }