/* ============================================================ * style.css — design tokens + layout chung (sidebar, topbar) * Modern SaaS: nền trắng, xanh dương chủ đạo, bo góc, đổ bóng nhẹ. * Dark mode qua [data-theme="dark"] trên , bật ở trang Settings. * ============================================================ */ :root { --primary: #2563eb; --primary-dark: #1d4ed8; --primary-soft: #eff6ff; --bg: #f8fafc; --surface: #ffffff; --border: #e2e8f0; --text: #0f172a; --text-muted: #64748b; --danger: #dc2626; --danger-soft: #fef2f2; --warning: #d97706; --warning-soft: #fffbeb; --success: #059669; --success-soft: #ecfdf5; --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06); --shadow: 0 4px 12px rgba(15, 23, 42, .08); --radius: 12px; --radius-sm: 8px; --sidebar-width: 260px; --topbar-height: 64px; } [data-theme="dark"] { --bg: #0b1220; --surface: #131c2e; --border: #253248; --text: #e2e8f0; --text-muted: #93a3b8; --primary-soft: #16233d; --danger-soft: #2a1418; --warning-soft: #2a2114; --success-soft: #10261f; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35); --shadow: 0 4px 16px rgba(0, 0, 0, .45); } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font-family: "Segoe UI", Roboto, "Inter", system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; } a { color: var(--primary); text-decoration: none; } /* ---------- Layout shell ---------- */ .app-shell { display: flex; min-height: 100vh; } .sidebar { width: var(--sidebar-width); background: var(--surface); border-right: 1px solid var(--border); position: fixed; top: 0; left: 0; bottom: 0; overflow-y: auto; z-index: 1030; transition: transform .2s ease; } .sidebar-brand { display: flex; align-items: center; gap: .6rem; height: var(--topbar-height); padding: 0 1.25rem; font-weight: 700; font-size: 1.05rem; border-bottom: 1px solid var(--border); color: var(--primary); } .sidebar-brand i { width: 22px; height: 22px; } .sidebar-brand-logo { width: 24px; height: 24px; object-fit: contain; border-radius: 4px; flex-shrink: 0; } .sidebar-nav { display: flex; flex-direction: column; gap: .15rem; padding: .75rem; } .nav-link { display: flex; align-items: center; gap: .75rem; padding: .6rem .75rem; border-radius: var(--radius-sm); color: var(--text-muted); font-size: .92rem; font-weight: 500; } .nav-link i { width: 18px; height: 18px; flex-shrink: 0; } .nav-link:hover { background: var(--primary-soft); color: var(--primary); } .nav-link.active { background: var(--primary); color: #fff; } .main-col { margin-left: var(--sidebar-width); flex: 1; display: flex; flex-direction: column; min-height: 100vh; min-width: 0; } .topbar { height: var(--topbar-height); background: var(--surface); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 1rem; padding: 0 1.5rem; position: sticky; top: 0; z-index: 1020; } .btn-icon { width: 38px; height: 38px; border-radius: var(--radius-sm); border: 1px solid transparent; background: transparent; color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .btn-icon:hover { background: var(--bg); color: var(--text); } .btn-icon i { width: 19px; height: 19px; } .sidebar-toggle { display: none; } .topbar-search { display: flex; align-items: center; gap: .5rem; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0 .75rem; height: 38px; max-width: 320px; width: 100%; color: var(--text-muted); } .topbar-search i { width: 16px; height: 16px; flex-shrink: 0; } .topbar-search input { border: none; background: transparent; outline: none; width: 100%; font-size: .88rem; color: var(--text); } .topbar-right { margin-left: auto; display: flex; align-items: center; gap: .6rem; flex-shrink: 0; } .dev-switcher-wrap { display: flex; align-items: center; gap: .35rem; padding: .2rem .5rem .2rem .55rem; border: 1px dashed var(--warning); border-radius: var(--radius-sm); background: var(--warning-soft); flex-shrink: 0; } .dev-tag { font-size: .62rem; font-weight: 700; letter-spacing: .04em; color: var(--warning); white-space: nowrap; flex-shrink: 0; } .form-select-sm { width: auto; font-size: .82rem; border-radius: var(--radius-sm); border-color: var(--border); background-color: var(--surface); color: var(--text); flex-shrink: 0; } #dev-role-switcher { min-width: 108px; } #semester-switcher { min-width: 150px; } .topbar-user { display: flex; align-items: center; gap: .6rem; padding-left: .6rem; border-left: 1px solid var(--border); } .avatar { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: .82rem; flex-shrink: 0; } .topbar-user-info { display: flex; flex-direction: column; line-height: 1.2; max-width: 140px; } .topbar-user-name, .topbar-user-role { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar-user-name { font-size: .85rem; font-weight: 600; } .topbar-user-role { font-size: .74rem; color: var(--text-muted); } .page-content { padding: 1.75rem; flex: 1; } .page-header { margin-bottom: 0rem; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .page-header h1 { font-size: 1.5rem; font-weight: 700; margin: 0 0 .25rem; } .page-header .text-muted { color: var(--text-muted) !important; } .page-header-actions { display: flex; gap: .6rem; flex-shrink: 0; } /* ---------- Bootstrap overrides để khớp design tokens ---------- */ .btn-primary { background-color: var(--primary); border-color: var(--primary); } .btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: var(--primary-dark) !important; border-color: var(--primary-dark) !important; } .form-label { font-size: .85rem; font-weight: 600; color: var(--text); } .form-control, .form-select { background-color: var(--surface); color: var(--text); border-color: var(--border); } .form-control:focus, .form-select:focus { background-color: var(--surface); color: var(--text); border-color: var(--primary); box-shadow: 0 0 0 .2rem rgba(37, 99, 235, .15); } .form-text { color: var(--text-muted); } .modal-content { background: var(--surface); color: var(--text); border: 1px solid var(--border); } .modal-header, .modal-footer { border-color: var(--border); } [data-theme="dark"] .btn-close { filter: invert(1) grayscale(1); } /* ---------- Bảng dữ liệu ---------- */ .table-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; } .data-table { margin: 0; color: var(--text); } .data-table > :not(caption) > * > * { border-color: var(--border); background: transparent; color: var(--text); vertical-align: middle; padding: .75rem 1rem; } .data-table thead th { font-size: .74rem; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); font-weight: 600; background: var(--bg); white-space: nowrap; } .data-table tbody tr:hover > * { background: var(--primary-soft); } .task-row { cursor: pointer; } .task-row.active > * { background: var(--primary-soft); box-shadow: inset 3px 0 0 var(--primary); } .task-row:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; } .text-muted-cell { color: var(--text-muted); } .btn-table-action { width: 32px; height: 32px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center; } .btn-table-action:hover { background: var(--primary-soft); color: var(--primary); border-color: var(--primary); } .btn-table-action i { width: 15px; height: 15px; } /* ---------- Badge trạng thái ---------- */ .badge-pill { display: inline-flex; align-items: center; padding: .28rem .65rem; border-radius: 999px; font-size: .74rem; font-weight: 600; white-space: nowrap; } .badge-success { background: var(--success-soft); color: var(--success); } .badge-neutral { background: var(--bg); color: var(--text-muted); border: 1px solid var(--border); } .badge-info { background: var(--primary-soft); color: var(--primary); } .badge-danger { background: var(--danger-soft); color: var(--danger); } .badge-warning { background: var(--warning-soft); color: var(--warning); } /* ---------- Empty state ---------- */ .empty-state { padding: 3rem 1.5rem; text-align: center; color: var(--text-muted); } .empty-state i { width: 34px; height: 34px; margin-bottom: .75rem; color: var(--text-muted); } .empty-state h3 { font-size: 1rem; font-weight: 600; color: var(--text); margin: 0 0 .35rem; } .empty-state p { margin: 0; font-size: .88rem; } /* ---------- Văn bản rút gọn ---------- */ .et-link { font-size: .82rem; white-space: nowrap; } .col-content { max-width: 340px; } .reopen-hint { width: 15px; height: 15px; color: var(--warning); vertical-align: -2px; cursor: help; margin-left: .2rem; } /* ---------- Avatar stack ---------- */ .avatar-stack { display: inline-flex; align-items: center; } .avatar-stack-item { width: 28px; height: 28px; font-size: .68rem; border: 2px solid var(--surface); margin-left: -8px; } .avatar-stack-item:first-child { margin-left: 0; } .avatar-stack-item.is-inactive { opacity: .45; filter: grayscale(1); } .avatar-stack-more { background: var(--text-muted) !important; } /* ---------- Task view (read-only detail) ---------- */ .task-view-dl { display: grid; grid-template-columns: 140px 1fr; row-gap: .6rem; column-gap: 1rem; margin: 0; } .task-view-dl dt { font-size: .74rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; } .task-view-dl dd { margin: 0; color: var(--text); } .task-view-description { color: var(--text); line-height: 1.65; } .task-view-description p:last-child { margin-bottom: 0; } /* ---------- Grading modal ---------- */ .grading-header { padding-bottom: .75rem; border-bottom: 1px solid var(--border); } .score-radio-group .btn { min-width: 44px; } .score-radio-group.is-invalid-group .btn { border-color: var(--danger); color: var(--danger); } /* ---------- Status cell (Feedback grading grid) ---------- */ .status-cell-btn { border: none; background: transparent; padding: 0; cursor: pointer; } .status-cell-btn:disabled { cursor: default; } .status-cell-meta { font-size: .78rem; color: var(--text-muted); margin-top: .15rem; } .class-row[role="button"] { cursor: pointer; } .class-row.is-locked { cursor: default; } .class-row[role="button"]:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; } /* ---------- Flat table search + pagination ---------- */ .table-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; } .table-toolbar input[type="search"] { max-width: 280px; } .table-pagination { display: flex; align-items: center; justify-content: flex-end; gap: .75rem; margin-top: 1rem; font-size: .85rem; color: var(--text-muted); } /* ---------- Offcanvas (drawer) ---------- */ .offcanvas { background: var(--surface); color: var(--text); width: 420px; } .offcanvas-header { border-bottom: 1px solid var(--border); } .offcanvas-title { font-weight: 700; } .lecturer-row { display: flex; align-items: center; gap: .6rem; padding: .6rem 0; border-bottom: 1px solid var(--border); } .lecturer-row:last-child { border-bottom: none; } .lecturer-row .lecturer-info { flex: 1; min-width: 0; } .lecturer-row .lecturer-name { font-weight: 600; font-size: .88rem; } .lecturer-row .lecturer-role { font-size: .76rem; color: var(--text-muted); } .lecturer-row.is-inactive .lecturer-name { color: var(--text-muted); text-decoration: line-through; } .lecturer-row.is-inactive .avatar { opacity: .45; filter: grayscale(1); } /* ---------- Upload preview table (3 luồng upload) ---------- */ .upload-steps { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; } .row-invalid > * { background: var(--danger-soft) !important; } .row-warning > * { background: var(--warning-soft) !important; } .row-reason { font-size: .78rem; margin-top: .15rem; } .row-reason.is-error { color: var(--danger); } .row-reason.is-warning { color: var(--warning); } .upload-summary { display: flex; gap: 1.5rem; margin-bottom: 1rem; font-size: .85rem; color: var(--text-muted); } .upload-summary strong { color: var(--text); } /* ---------- Form card (trang thêm/sửa toàn màn hình, vd Task) ---------- */ .form-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1.5rem; max-width: 900px; } .form-card-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border); } .inline-icon { width: 14px; height: 14px; vertical-align: -2px; } /* ---------- Quill rich text editor ---------- */ #editor-description { background: var(--surface); } #editor-description .ql-editor { min-height: 220px; color: var(--text); } .ql-toolbar.ql-snow, .ql-container.ql-snow { border-color: var(--border); } .ql-toolbar.ql-snow { background: var(--bg); border-radius: var(--radius-sm) var(--radius-sm) 0 0; } .ql-container.ql-snow { border-radius: 0 0 var(--radius-sm) var(--radius-sm); } [data-theme="dark"] .ql-snow .ql-stroke { stroke: var(--text-muted); } [data-theme="dark"] .ql-snow .ql-fill { fill: var(--text-muted); } [data-theme="dark"] .ql-snow .ql-picker { color: var(--text-muted); } [data-theme="dark"] .ql-editor.ql-blank::before { color: var(--text-muted); } /* ---------- Filter bar (Task Library, Reports...) ---------- */ .filter-bar { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; flex-wrap: wrap; } .filter-bar label { font-size: .85rem; font-weight: 600; color: var(--text-muted); } .filter-bar select { min-width: 220px; } .wip-card { background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius); padding: 3rem 1.5rem; text-align: center; color: var(--text-muted); } .wip-card i { width: 32px; height: 32px; margin-bottom: .75rem; } .sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, .5); z-index: 1025; } /* ---------- Auth (login) screen ---------- */ .auth-body { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, var(--primary-soft), var(--bg)); } .auth-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 2.5rem; width: 100%; max-width: 380px; text-align: center; } .auth-brand { display: flex; align-items: center; justify-content: center; gap: .5rem; color: var(--primary); font-weight: 700; margin-bottom: 1.5rem; } .auth-card h1 { font-size: 1.3rem; margin: 0 0 .5rem; } .auth-card .text-muted { color: var(--text-muted); font-size: .9rem; margin-bottom: 1.75rem; } .btn-google { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: .6rem; padding: .65rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-weight: 600; font-size: .9rem; } .btn-google:hover { background: var(--bg); } .auth-hint { margin-top: 1.25rem; font-size: .76rem; color: var(--text-muted); } /* ---------- Reports ---------- */ .report-filter-bar { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.25rem; flex-wrap: wrap; } .report-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } .report-kpi-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1rem 1.25rem; } .report-kpi-label { font-size: .78rem; color: var(--text-muted); margin-bottom: .35rem; } .report-kpi-value { font-size: 1.5rem; font-weight: 700; color: var(--text); } /* Khối "Cần chú ý" ở Dashboard — số liệu cần hành động, không phải số thống kê thuần, nên style khác report-kpi-card: viền trái màu theo mức độ khẩn cấp + click-through sang trang liên quan. */ .attention-section { margin-bottom: 1.5rem; } .attention-section-title { font-size: .82rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; margin-bottom: .6rem; } .attention-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; } .attention-card { display: block; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1rem 1.25rem; text-decoration: none; color: inherit; transition: box-shadow .15s, transform .15s; } .attention-card:hover { box-shadow: var(--shadow); transform: translateY(-1px); color: inherit; } .attention-card.is-danger { border-left-color: var(--danger); } .attention-card.is-warning { border-left-color: var(--warning); } .attention-card.is-ok { border-left-color: var(--success); } .attention-card.is-info { border-left-color: var(--primary); } .attention-value { font-size: 1.5rem; font-weight: 700; color: var(--text); } .attention-label { font-size: .82rem; color: var(--text-muted); margin-top: .3rem; } .attention-hint { font-size: .74rem; color: var(--text-muted); margin-top: .15rem; } .report-chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.25rem; } .report-chart-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1.25rem; } .report-chart-card h3 { font-size: .9rem; font-weight: 600; margin-bottom: .9rem; color: var(--text); } .report-chart-card .chart-wrap { position: relative; height: 260px; } .report-title { font-size: 1rem; font-weight: 600; margin: 0; color: var(--text); } .data-table td.cell-Upcoming { background: var(--bg); } .data-table td.cell-Open { background: var(--primary-soft); } .data-table td.cell-Missed { background: var(--danger-soft); } .data-table td.cell-done { background: var(--success-soft); color: var(--success); font-weight: 600; text-align: center; } /* ---------- Dashboard ---------- */ .activity-feed { list-style: none; padding: 0; margin: 0; } .activity-feed li { display: flex; gap: .75rem; padding: .75rem 0; border-bottom: 1px solid var(--border); } .activity-feed li:last-child { border-bottom: none; } .activity-icon { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--primary-soft); color: var(--primary); flex-shrink: 0; } .activity-icon i { width: 16px; height: 16px; } .activity-icon.is-modified { background: var(--warning-soft); color: var(--warning); } .activity-body { flex: 1; min-width: 0; } .activity-text { font-size: .88rem; color: var(--text); } .activity-text b { font-weight: 600; } .activity-ts { font-size: .78rem; color: var(--text-muted); margin-top: .15rem; } /* ---------- Responsive ---------- */ @media (max-width: 991.98px) { .sidebar { transform: translateX(-100%); box-shadow: var(--shadow); } .app-shell.sidebar-open .sidebar { transform: translateX(0); } .app-shell.sidebar-open .sidebar-backdrop { display: block; } .main-col { margin-left: 0; } .sidebar-toggle { display: inline-flex; } .dev-switcher-wrap .dev-tag { display: none; } } @media (max-width: 575.98px) { .topbar { padding: 0 1rem; gap: .6rem; } .topbar-search { display: none; } .topbar-user-info { display: none; } .page-content { padding: 1.1rem; } }