/* * Mavzu (dark/light) — ikkita "langar" rang: fon va matn/urg'u. * Standart (light): fon #f0ede4, matn #141414. Dark rejimda teskari. * `--surface`/`--surface-hover`/`--card-border`/`--text-muted` shu * ikkitasidan hosila — kartochka, hover va ramka ranglari uchun kerak, * aks holda dark rejimda oq kartochkalar qora fonda qolib ketardi. * * Boshqarish: (qarang: base.html'dagi * "flash oldini oluvchi" skript va app.js'dagi toggleTheme()). * `data-theme` sozlanmasa — tizim afzalligi (`prefers-color-scheme`) * ishlaydi (JS o'chirilgan bo'lsa ham). */ :root { --sidebar-bg: #1e293b; --sidebar-bg2: #0f172a; --sidebar-text: #94a3b8; --sidebar-active: #2563eb; --content-bg: #f0ede4; --card-border: #ddd8c8; --surface: #ffffff; --surface-hover: #e8e4d8; --primary: #2563eb; --green: #16a34a; --green-bg: #dcfce7; --amber: #d97706; --amber-bg: #fef9c3; --red: #dc2626; --red-bg: #fee2e2; --text-dark: #141414; --text-muted: #5c5a52; } [data-theme="dark"] { --content-bg: #141414; --card-border: #333333; --surface: #1e1e1e; --surface-hover: #262626; --text-dark: #f0ede4; --text-muted: #a9a69c; } /* JS ishlamasa ham tizim afzalligi hisobga olinsin — `data-theme="light"` ATAYLAB tanlangan bo'lsa (ko'chma toggle), tizim sozlamasi ustidan yozib yubormasin. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --content-bg: #141414; --card-border: #333333; --surface: #1e1e1e; --surface-hover: #262626; --text-dark: #f0ede4; --text-muted: #a9a69c; } } * { box-sizing: border-box; } *, *::before, *::after { transition: background-color .3s ease, color .3s ease, border-color .3s ease; } body { margin: 0; font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--content-bg); color: var(--text-dark); font-size: 14px; } /* ---------- Layout ---------- */ .layout { display: flex; min-height: 100vh; } .sidebar { width: 250px; background: var(--sidebar-bg); color: var(--sidebar-text); display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; overflow-y: auto; } .sidebar::-webkit-scrollbar { width: 6px; } .sidebar::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; } .sidebar-brand { display: flex; align-items: center; gap: 12px; padding: 20px 18px; } .brand-logo { width: 42px; height: 42px; border-radius: 12px; background: linear-gradient(135deg, #3b82f6, #1d4ed8); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; } /* Maktab gerbi rasm sifatida qo'yilganda — gradient fon kerak emas */ img.brand-logo { background: none; border-radius: 0; display: block; object-fit: contain; flex: none; } .brand-name { color: #fff; font-weight: 700; font-size: 16px; } .sidebar-section { padding: 6px 18px; } .sidebar-section-title { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #475569; font-weight: 600; margin: 14px 0 6px; } .nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 10px; color: var(--sidebar-text); text-decoration: none; font-size: 14px; margin-bottom: 2px; transition: .15s; } .nav-item:hover { background: #334155; color: #e2e8f0; } .nav-item.active { background: var(--sidebar-active); color: #fff; } .nav-item i { width: 18px; text-align: center; } .nav-badge { margin-left: auto; background: #22c55e; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; } .nav-badge.dot { width: 10px; height: 10px; } .sidebar-user { margin-top: auto; padding: 16px 18px; border-top: 1px solid #334155; display: flex; align-items: center; gap: 12px; } .user-avatar { width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(135deg, #6366f1, #8b5cf6); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; } .user-name { color: #fff; font-weight: 600; font-size: 14px; } .user-role { color: #64748b; font-size: 12px; } /* ---------- Content ---------- */ .content { margin-left: 250px; flex: 1; } .topbar { background: var(--surface); border-bottom: 1px solid var(--card-border); padding: 14px 28px; display: flex; align-items: center; position: sticky; top: 0; z-index: 10; } .topbar h1 { font-size: 20px; font-weight: 700; margin: 0; } .topbar-search { margin-left: auto; display: flex; align-items: center; gap: 8px; background: var(--surface-hover); border-radius: 10px; padding: 8px 14px; color: var(--text-muted); min-width: 280px; } .topbar-search input { border: 0; background: transparent; outline: none; flex: 1; color: var(--text-dark); } .topbar-search kbd { background: var(--card-border); border-radius: 5px; padding: 1px 6px; font-size: 11px; color: var(--text-muted); } .icon-btn { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--card-border); background: var(--surface); margin-left: 10px; color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .page { padding: 26px 28px; } /* ---------- Cards ---------- */ .card-x { background: var(--surface); border: 1px solid var(--card-border); border-radius: 16px; padding: 18px; } .shadow-soft { box-shadow: 0 1px 3px rgba(15,23,42,.05); } /* Welcome banner */ .welcome { background: linear-gradient(120deg, #2563eb, #1d4ed8 60%, #1e40af); border-radius: 18px; padding: 28px 30px; color: #fff; position: relative; overflow: hidden; } .welcome::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,.12) 1px, transparent 1px); background-size: 22px 22px; opacity: .4; } .welcome .eyebrow { font-size: 12px; letter-spacing: .1em; opacity: .8; text-transform: uppercase; } .welcome h2 { font-size: 28px; font-weight: 800; margin: 6px 0 14px; } .welcome .meta { display: flex; gap: 22px; font-size: 14px; opacity: .92; position: relative; z-index: 1; } .welcome .btn-report { position: absolute; top: 28px; right: 30px; z-index: 2; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.3); color: #fff; padding: 10px 18px; border-radius: 10px; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; } /* Quick action card */ .quick { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--card-border); border-radius: 14px; padding: 16px 18px; text-decoration: none; color: inherit; transition: .15s; } .quick:hover { box-shadow: 0 4px 14px rgba(15,23,42,.08); transform: translateY(-1px); } .quick-icon { width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 18px; } .quick .title { font-weight: 700; } .quick .sub { color: var(--text-muted); font-size: 12px; } /* Stat cards */ .stat { display: flex; align-items: center; gap: 16px; background: var(--surface); border: 1px solid var(--card-border); border-radius: 16px; padding: 20px 22px; } .stat-icon { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; } .stat .label { font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; } .stat .value { font-size: 30px; font-weight: 800; line-height: 1; margin: 4px 0; } .stat .hint { font-size: 12px; color: var(--text-muted); } /* Bosiladigan ko'rsatkich: bosilsa ro'yxat shunga qarab filtrlanadi */ .stat-filter { cursor: pointer; transition: box-shadow .15s, border-color .15s, transform .15s, background-color .3s ease, color .3s ease; } .stat-filter:hover { border-color: var(--primary); transform: translateY(-1px); } .stat-filter.stat-active { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(37, 99, 235, .18); } /* Havola bo'lgan karta matn rangini o'zgartirmasin */ a.stat, a.stat:hover { text-decoration: none; color: inherit; } .bg-green { background: var(--green-bg); color: var(--green); } .bg-amber { background: var(--amber-bg); color: var(--amber); } .bg-red { background: var(--red-bg); color: var(--red); } .bg-blue { background: #dbeafe; color: var(--primary); } .bg-violet{ background: #ede9fe; color: #7c3aed; } .bg-slate { background: #f1f5f9; color: #475569; } /* Pills / badges */ .pill { padding: 4px 10px; border-radius: 8px; font-size: 12px; font-weight: 700; display: inline-block; } .pill-green { background: var(--green-bg); color: var(--green); } .pill-red { background: var(--red-bg); color: var(--red); } .pill-amber { background: var(--amber-bg); color: var(--amber); } .pill-slate { background: #f1f5f9; color: #475569; } .pill-blue-x { background: #dbeafe; color: #1d4ed8; } .pill-violet { background: #ede9fe; color: #7c3aed; } /* Tables */ .table-x { width: 100%; border-collapse: collapse; } .table-x thead th { text-align: left; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; padding: 12px 14px; border-bottom: 1px solid var(--card-border); } .table-x tbody td { padding: 14px; border-bottom: 1px solid var(--card-border); vertical-align: middle; } .table-x tbody tr:hover { background: var(--surface-hover); } .section-head { background: #f0fdf4; color: var(--green); text-align: center; padding: 12px; border-radius: 10px; font-weight: 700; } .section-head.red { background: #fef2f2; color: var(--red); } /* Class list (students page) */ .class-list .class-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; cursor: pointer; text-decoration: none; color: inherit; margin-bottom: 2px; } .class-list .class-row:hover { background: var(--surface-hover); } .class-list .class-row.active { background: #eff6ff; } .class-badge { width: 30px; height: 30px; border-radius: 8px; background: #dbeafe; color: var(--primary); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; } .class-count { margin-left: auto; color: var(--text-muted); font-weight: 600; } .avatar-sm { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; background: var(--card-border); } .student-name { font-weight: 700; } .student-code { color: var(--primary); font-size: 12px; } .btn-primary-x { background: var(--primary); color: #fff; border: 0; padding: 9px 16px; border-radius: 10px; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; } .btn-ghost { background: var(--surface); border: 1px solid var(--card-border); padding: 9px 16px; border-radius: 10px; color: var(--text-dark); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; } .tabs { display: inline-flex; gap: 8px; padding: 4px; background: var(--surface); border: 1px solid var(--card-border); border-radius: 14px; } .tab { padding: 9px 18px; border-radius: 10px; text-decoration: none; color: var(--text-muted); font-weight: 600; background: transparent; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; } .tab.active { background: var(--surface-hover); color: var(--primary); box-shadow: 0 1px 3px rgba(0,0,0,.08); } .status-icon { color: var(--green); margin: 0 4px; } .action-icon { color: var(--text-muted); margin: 0 4px; cursor: pointer; } .action-icon.danger { color: var(--red); } .action-icon.success { color: var(--green); } .flash { padding: 12px 16px; border-radius: 10px; margin-bottom: 14px; } .flash.success { background: var(--green-bg); color: var(--green); } .flash.warning { background: var(--amber-bg); color: var(--amber); } .flash.danger { background: var(--red-bg); color: var(--red); } .flash.info { background: #dbeafe; color: var(--primary); } /* Sababli qoldirish — o'quvchi/xodim tanlash ro'yxati */ .picker-list { max-height: 180px; overflow-y: auto; border: 1px solid var(--card-border); border-radius: 8px; } .picker-row { padding: 7px 12px; cursor: pointer; font-size: 14px; } .picker-row + .picker-row { border-top: 1px solid var(--card-border); } .picker-row:hover { background: var(--surface-hover); } .picker-row.selected { background: var(--primary); color: #fff; } .online-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; } .online-dot.on { background: #22c55e; } .online-dot.off { background: #ef4444; } /* Davomat foizi (davr hisoboti) */ .progress-x { flex: 1; height: 8px; background: var(--card-border); border-radius: 4px; overflow: hidden; min-width: 70px; } .progress-x-bar { height: 100%; background: var(--green); border-radius: 4px; } .progress-x-bar.mid { background: var(--amber); } .progress-x-bar.low { background: var(--red); } /* Jadvalni gorizontal aylantirish (tor ekranlarda) */ .table-responsive { overflow-x: auto; } /* Kichik tugmalar */ .btn-ghost.btn-sm, .btn-primary-x.btn-sm { padding: 5px 10px; font-size: 12px; border-radius: 8px; } /* Ish jadvali kun-jadvali (schedules.html, staff.html'dagi shaxsiy jadval) */ .sched-table td { padding: 6px 10px; } .sched-table thead th { padding: 8px 10px; } /* ---------- Yig'iladigan sidebar (katta ekranda) ---------- */ .sidebar, .content { transition: width .18s ease, margin-left .18s ease; } @media (min-width: 992px) { body.sidebar-collapsed .sidebar { width: 72px; } body.sidebar-collapsed .content { margin-left: 72px; } body.sidebar-collapsed .brand-name, body.sidebar-collapsed .sidebar-section-title, body.sidebar-collapsed .nav-badge, body.sidebar-collapsed .sidebar-user > div:not(.user-avatar) { display: none; } body.sidebar-collapsed .nav-item { justify-content: center; padding-left: 0; padding-right: 0; font-size: 0; } body.sidebar-collapsed .nav-item i { font-size: 16px; } body.sidebar-collapsed .sidebar-brand, body.sidebar-collapsed .sidebar-user { justify-content: center; padding-left: 4px; padding-right: 4px; } } /* ---------- Mobil ---------- */ @media (max-width: 991.98px) { .sidebar { transform: translateX(-100%); transition: transform .2s; z-index: 1040; } .sidebar.open { transform: translateX(0); box-shadow: 0 0 40px rgba(0,0,0,.3); } .content { margin-left: 0; } .page { padding: 16px; } .topbar { padding: 12px 16px; } .welcome { padding: 20px; } .welcome h2 { font-size: 22px; } .welcome .btn-report { position: static; display: inline-flex; margin-bottom: 12px; } .welcome .meta { flex-direction: column; gap: 6px; } }