/* ============================================================ Attend-Class — visual refinement layer Loaded after every other stylesheet in base.html . Purpose: one calm, consistent visual system on top of the existing glass aesthetic — unified link color, quieter gradients, readable dark mode, themed calendar, consistent modals/buttons/icons. Tokens come from base.html (--sc-*, --accent-rgb, --dark-accent-rgb). ============================================================ */ /* ────────────────────────────────────────────────────────── 1. Typography & color unification One ink color (--sc-text) and one accent everywhere; retire the leftover NiceAdmin indigo (#4154f1) and navy (#012970). ────────────────────────────────────────────────────────── */ h1, h2, h3, h4, h5, h6 { color: var(--sc-text); } .card-title, .pagetitle h1 { color: var(--sc-text); } a { color: rgb(var(--accent-rgb)); } a:hover { color: rgb(var(--accent-hover-rgb, var(--accent-rgb))); } body.dark-mode a { color: rgb(var(--dark-accent-rgb)); } body.dark-mode a:hover { color: rgb(var(--dark-accent-hover-rgb, var(--dark-accent-rgb))); } /* keep component-colored links untouched */ a.btn, .btn a, a.nav-link, a.dropdown-item, a.page-link, a.badge, .sidebar-nav a, .header a, a.list-group-item { color: inherit; } /* numbers line up in tables, stats and grade grids */ .table, .teacher-stat-value, .dataTables_wrapper, .filter-table, .teacher-filter-chip strong { font-variant-numeric: tabular-nums; } .pagetitle h1 { letter-spacing: -0.015em; } /* ────────────────────────────────────────────────────────── 2. Dark-mode readability repairs Bootstrap grays and stray light-mode colors on dark glass. ────────────────────────────────────────────────────────── */ body.dark-mode .text-muted, body.dark-mode .text-secondary, body.dark-mode small.text-muted { color: #94a3b8 !important; } body.dark-mode .text-dark { color: #e2e8f0 !important; } body.dark-mode hr { border-color: rgba(148, 163, 184, 0.22); opacity: 1; } body.dark-mode .btn-close { filter: invert(1) grayscale(100%) brightness(180%); } /* tables & filter tables: soften saturated link blue on dark rows */ body.dark-mode .table a:not(.btn):not(.badge), body.dark-mode .filter-table a:not(.btn):not(.badge), body.dark-mode table.dataTable a:not(.btn):not(.badge) { color: rgb(var(--dark-accent-rgb)) !important; } /* ────────────────────────────────────────────────────────── 3. Buttons — quieter, deeper, unified Pill shape stays (it is the house style); the candy glow becomes a calmer, deeper tint with a soft single shadow. ────────────────────────────────────────────────────────── */ .btn-success { background: linear-gradient(160deg, #16a34a, #15803d) !important; box-shadow: 0 3px 10px rgba(22, 163, 74, 0.22) !important; } .btn-danger { background: linear-gradient(160deg, #dc2626, #b91c1c) !important; box-shadow: 0 3px 10px rgba(220, 38, 38, 0.22) !important; } .btn-warning { background: linear-gradient(160deg, #d97706, #b45309) !important; color: #fff !important; box-shadow: 0 3px 10px rgba(217, 119, 6, 0.22) !important; } .btn-info { background: linear-gradient(160deg, #0891b2, #0e7490) !important; color: #fff !important; box-shadow: 0 3px 10px rgba(8, 145, 178, 0.22) !important; } .btn-success:hover { box-shadow: 0 5px 14px rgba(22, 163, 74, 0.3) !important; } .btn-danger:hover { box-shadow: 0 5px 14px rgba(220, 38, 38, 0.3) !important; } .btn-warning:hover { box-shadow: 0 5px 14px rgba(217, 119, 6, 0.3) !important; } .btn-info:hover { box-shadow: 0 5px 14px rgba(8, 145, 178, 0.3) !important; } /* icons inside buttons: consistent size and optical alignment */ .btn > i, .btn > .bi, .btn > .fa, .btn > .fas, .btn > .far, .btn > .bx { font-size: 1em; line-height: 1; vertical-align: -0.08em; } /* visible, accent-colored keyboard focus everywhere */ .btn:focus-visible, a:focus-visible, .form-control:focus-visible, .form-select:focus-visible, [tabindex]:focus-visible { outline: 2px solid rgba(var(--sc-accent-rgb, var(--accent-rgb)), 0.55) !important; outline-offset: 2px; } /* ────────────────────────────────────────────────────────── 4. Badges & chips — one shape language (pill) ────────────────────────────────────────────────────────── */ .badge { border-radius: 999px; font-weight: 650; letter-spacing: 0.01em; } .badge.bg-secondary { background: rgba(100, 116, 139, 0.92) !important; } body.dark-mode .badge.bg-light { background: rgba(148, 163, 184, 0.2) !important; color: #e2e8f0 !important; } /* ────────────────────────────────────────────────────────── 5. Modals — consistent header anatomy ────────────────────────────────────────────────────────── */ .modal-header { padding: 14px 18px !important; } .modal-footer { padding: 12px 18px !important; gap: 8px; } .modal-title { display: flex; align-items: center; gap: 9px; font-weight: 750; color: var(--sc-text) !important; font-size: 1.05rem; } .modal-title > i { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: 0 0 auto; border-radius: 9px; font-size: 0.95rem; color: rgb(var(--sc-accent-rgb, var(--accent-rgb))); background: rgba(var(--sc-accent-rgb, var(--accent-rgb)), 0.1); } /* ────────────────────────────────────────────────────────── 6. Forms — calmer labels, consistent placeholders ────────────────────────────────────────────────────────── */ .form-label, label.col-form-label { font-weight: 600; color: var(--sc-text); font-size: 0.88rem; } .form-control::placeholder, .form-select::placeholder { color: var(--sc-text-muted); opacity: 0.8; } .form-check-input:checked { background-color: rgb(var(--sc-accent-rgb, var(--accent-rgb))) !important; border-color: rgb(var(--sc-accent-rgb, var(--accent-rgb))) !important; } .form-check-input:focus { border-color: rgba(var(--sc-accent-rgb, var(--accent-rgb)), 0.5); box-shadow: 0 0 0 3px rgba(var(--sc-accent-rgb, var(--accent-rgb)), 0.14); } .form-switch .form-check-input { cursor: pointer; } /* ────────────────────────────────────────────────────────── 7. FullCalendar — themed to match the glass system (stock skin looked unthemed; dark "today" was mustard) ────────────────────────────────────────────────────────── */ .fc { --fc-border-color: rgba(var(--sc-accent-rgb, var(--accent-rgb)), 0.14); --fc-today-bg-color: rgba(var(--sc-accent-rgb, var(--accent-rgb)), 0.07); --fc-page-bg-color: transparent; --fc-neutral-bg-color: rgba(var(--sc-accent-rgb, var(--accent-rgb)), 0.05); } body.dark-mode .fc { --fc-border-color: rgba(148, 163, 184, 0.18); --fc-today-bg-color: rgba(var(--dark-accent-rgb), 0.12); --fc-neutral-bg-color: rgba(148, 163, 184, 0.08); } .fc .fc-col-header-cell-cushion { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--sc-text-muted); text-decoration: none; padding: 8px 4px; } .fc .fc-daygrid-day-number { font-size: 0.82rem; font-weight: 650; color: var(--sc-text); text-decoration: none; padding: 6px 8px; } .fc .fc-day-today .fc-daygrid-day-number { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; margin: 3px; padding: 0 6px; border-radius: 999px; background: rgb(var(--sc-accent-rgb, var(--accent-rgb))); color: #fff; } .fc .fc-toolbar-title { font-size: 1.15rem; font-weight: 800; color: var(--sc-text); letter-spacing: -0.01em; } .fc .fc-button { border-radius: 999px !important; border: 1.5px solid rgba(var(--sc-accent-rgb, var(--accent-rgb)), 0.28) !important; background: rgba(var(--sc-accent-rgb, var(--accent-rgb)), 0.06) !important; color: rgb(var(--sc-accent-rgb, var(--accent-rgb))) !important; font-weight: 650 !important; font-size: 0.82rem !important; padding: 5px 13px !important; box-shadow: none !important; text-transform: capitalize; } .fc .fc-button:hover { background: rgba(var(--sc-accent-rgb, var(--accent-rgb)), 0.12) !important; } .fc .fc-button-primary:not(:disabled).fc-button-active, .fc .fc-button-primary:not(:disabled):active { background: rgb(var(--sc-accent-rgb, var(--accent-rgb))) !important; border-color: transparent !important; color: #fff !important; } .fc .fc-button:disabled { opacity: 0.45; } .fc .fc-daygrid-event, .fc .fc-timegrid-event { border-radius: 7px; border: none; padding: 1px 5px; font-size: 0.74rem; font-weight: 650; } .fc .fc-event:focus { box-shadow: none; } .fc .fc-scrollgrid { border-radius: var(--sc-radius-md, 12px); overflow: hidden; } .fc .fc-list { border-radius: var(--sc-radius-md, 12px); } body.dark-mode .fc .fc-list-day-cushion { background: rgba(148, 163, 184, 0.08); } body.dark-mode .fc .fc-daygrid-day-number, body.dark-mode .fc .fc-toolbar-title { color: var(--sc-text); } /* ────────────────────────────────────────────────────────── 8. Scrollbars & selection — quiet, accent-tinted ────────────────────────────────────────────────────────── */ ::selection { background: rgba(var(--sc-accent-rgb, var(--accent-rgb)), 0.22); } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: rgba(var(--sc-accent-rgb, var(--accent-rgb)), 0.26); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } *::-webkit-scrollbar-thumb:hover { background: rgba(var(--sc-accent-rgb, var(--accent-rgb)), 0.4); border: 2px solid transparent; background-clip: padding-box; } /* ────────────────────────────────────────────────────────── 9. Micro-interactions — snappy, not showy ────────────────────────────────────────────────────────── */ .dropdown-menu { animation-duration: 0.15s; } .card { transition: box-shadow 0.18s ease, transform 0.18s ease; } a.card:hover, .home-class-row:hover { transform: translateY(-1px); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ────────────────────────────────────────────────────────── 10. Tables — small consistency touches ────────────────────────────────────────────────────────── */ .table > thead > tr > th { white-space: nowrap; } .dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select { border-radius: var(--sc-radius-sm, 9px); border: 1.5px solid rgba(var(--sc-accent-rgb, var(--accent-rgb)), 0.2); padding: 4px 10px; background: transparent; color: var(--sc-text); } .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate { color: var(--sc-text-muted) !important; font-size: 0.82rem; } /* ────────────────────────────────────────────────────────── 11. Toasts / alerts dismiss button alignment ────────────────────────────────────────────────────────── */ .alert .btn-close { padding: 1.05rem; } .alert { font-weight: 550; }