/* ============================================================ attend · controls.css ------------------------------------------------------------ ONE drop-in control system. Load LAST, after Bootstrap, style.css, student-shell.css and refine.css. It does three jobs: 1. Re-points the app accent to the unified teal/cyan ramp. 2. Extends the existing --ac-* token layer (from refine.css) with a full control scale: radius, sizes, focus, fills. 3. Retrofits the Bootstrap classes every template already uses (.btn, .form-control, .badge, .modal …) AND adds .ac-* classes for the bespoke one-off controls. Direction: "Moderate". To switch direction, change only the --ac-r-* radius scale and --ac-btn-* sizes below. Accent: "Azure" (refined blue) by default. Pick another theme with etc. — see the PRESETS below. ============================================================ */ /* ── 1. Accent re-point + THEME PRESETS ───────────────────── Everything in the app already flows from --accent-rgb via --sc-accent-rgb, so changing these triples recolours buttons, links, focus rings, checkboxes, badges and charts at once. DEFAULT — "Azure": a deeper, calmer take on the current blue (blue-600 instead of the slightly neon blue-500), with the existing dark-blue kept for dark mode. Drop-in compatible. */ /* ── 1. Accent: leave it to base.html ─────────────────────── IMPORTANT: controls.css no longer sets --accent-rgb itself. Your base.html theme bootstrap maps --acc → --accent-rgb and derives the complementary header gradient from it. Overriding --accent-rgb here froze the accent while the gradient kept following the picker — that's what desynced the colors. Set the DEFAULT accent (Azure) inside base.html's bootstrap instead. Here we only remap the legacy ad-hoc poll/share teal onto whatever accent base.html resolves, so those one-offs follow the active theme. */ :root { --ux-teal-rgb: var(--accent-rgb); --ux-cyan-rgb: var(--accent-rgb); } body.dark-mode { --ux-teal-rgb: var(--dark-accent-rgb); --ux-cyan-rgb: var(--dark-accent-rgb); } /* ── THEME PRESETS — curated replacements ─────────────────── Eight balanced accents, all tuned for AA text-on-white in light mode and a brighter sibling for dark mode. Set the theme with a single attribute, e.g. . (Wire your base.html theme switcher to toggle this attribute.) */ html[data-accent="azure"], body[data-accent="azure"] { --accent-rgb: 37,99,235; --accent-hover-rgb: 29,78,216; --dark-accent-rgb: 96,165,250; --dark-accent-hover-rgb: 147,197,253; --header-bg-rgb: 30,64,175; } html[data-accent="ocean"], body[data-accent="ocean"] { --accent-rgb: 14,151,166; --accent-hover-rgb: 10,122,134; --dark-accent-rgb: 34,198,214; --dark-accent-hover-rgb: 95,224,236; --header-bg-rgb: 15,118,128; } html[data-accent="indigo"], body[data-accent="indigo"] { --accent-rgb: 79,70,229; --accent-hover-rgb: 67,56,202; --dark-accent-rgb: 129,140,248; --dark-accent-hover-rgb: 165,180,252; --header-bg-rgb: 55,48,163; } html[data-accent="emerald"],body[data-accent="emerald"]{ --accent-rgb: 5,150,105; --accent-hover-rgb: 4,120,87; --dark-accent-rgb: 52,211,153; --dark-accent-hover-rgb: 110,231,183; --header-bg-rgb: 4,120,87; } html[data-accent="violet"], body[data-accent="violet"] { --accent-rgb: 124,58,237; --accent-hover-rgb: 109,40,217; --dark-accent-rgb: 167,139,250; --dark-accent-hover-rgb: 196,181,253; --header-bg-rgb: 91,33,182; } html[data-accent="rose"], body[data-accent="rose"] { --accent-rgb: 225,29,72; --accent-hover-rgb: 190,18,60; --dark-accent-rgb: 251,113,133; --dark-accent-hover-rgb: 253,164,175; --header-bg-rgb: 159,18,57; } html[data-accent="amber"], body[data-accent="amber"] { --accent-rgb: 217,119,6; --accent-hover-rgb: 180,83,9; --dark-accent-rgb: 251,191,36; --dark-accent-hover-rgb: 252,211,77; --header-bg-rgb: 146,64,14; } html[data-accent="graphite"],body[data-accent="graphite"]{ --accent-rgb: 71,85,105; --accent-hover-rgb: 51,65,85; --dark-accent-rgb: 148,163,184; --dark-accent-hover-rgb: 203,213,225; --header-bg-rgb: 30,41,59; } /* ── 2. Control tokens (extends refine.css --ac-*) ──────────── */ :root { /* radius scale — Moderate */ --ac-r-sm: 8px; --ac-r-md: 10px; --ac-r-lg: 14px; --ac-r-pill: 999px; /* control sizing */ --ac-btn-h: 38px; --ac-btn-px: 18px; --ac-btn-h-sm: 30px; --ac-btn-px-sm: 12px; --ac-control-h: 40px; --ac-control-px: 14px; /* weight */ --ac-weight: 650; --ac-weight-strong: 750; /* hover/strong accent that swaps in dark mode, mirroring --sc-accent-rgb. NOTE: accent fills are written inline as rgb(var(--sc-accent-rgb …)) in each rule — NOT as a single --ac-accent token — so they re-evaluate per element and correctly follow dark mode + presets. */ --sc-accent-strong-rgb: var(--accent-hover-rgb); --ac-on-accent: #ffffff; --ac-primary-shadow: 0 1px 2px rgba(15, 23, 42, 0.18); /* semantic, reusing existing --ux-* tokens */ --ac-success: rgb(var(--ux-green-rgb, 34, 197, 94)); --ac-warn: rgb(var(--ux-amber-rgb, 245, 158, 11)); --ac-danger: rgb(var(--ux-red-rgb, 239, 68, 68)); --ac-neutral: rgb(var(--ux-slate-rgb, 100, 116, 139)); /* ── frosted glass — the signature surface ── Translucent fill + blur + a faint accent wash + a top sheen. Tunable in one place; used by overlays, sticky bars and chips. */ --ac-glass-fill: rgba(255, 255, 255, 0.62); --ac-glass-blur: 20px; --ac-glass-saturate: 150%; --ac-glass-border: rgba(255, 255, 255, 0.55); --ac-glass-hairline: rgba(148, 163, 184, 0.20); --ac-glass-tint: rgba(var(--sc-accent-rgb, var(--accent-rgb)), 0.05); --ac-glass-sheen: rgba(255, 255, 255, 0.70); --ac-glass-shadow: 0 18px 44px rgba(15, 23, 42, 0.16), 0 2px 8px rgba(15, 23, 42, 0.06); } body.dark-mode { --ac-on-accent: #0b1220; --ac-primary-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); --sc-accent-strong-rgb: var(--dark-accent-hover-rgb); --ac-glass-fill: rgba(22, 28, 40, 0.60); --ac-glass-border: rgba(148, 163, 184, 0.18); --ac-glass-hairline: rgba(148, 163, 184, 0.14); --ac-glass-tint: rgba(var(--dark-accent-rgb, 96, 165, 250), 0.07); --ac-glass-sheen: rgba(255, 255, 255, 0.06); --ac-glass-shadow: 0 20px 48px rgba(2, 6, 23, 0.55), 0 2px 10px rgba(2, 6, 23, 0.4); } /* ============================================================ 3a. BUTTONS — retrofit Bootstrap + new .ac-btn ============================================================ */ /* Shared geometry for every button class */ .btn, .ac-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--ac-btn-h); padding: 0 var(--ac-btn-px); border: 1px solid transparent; border-radius: var(--ac-r-md); font-weight: var(--ac-weight); font-size: 0.875rem; line-height: 1.1; white-space: nowrap; cursor: pointer; transition: filter 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease; } .btn-sm, .ac-btn--sm { min-height: var(--ac-btn-h-sm); padding: 0 var(--ac-btn-px-sm); font-size: 0.8rem; border-radius: var(--ac-r-md); } /* Primary / filled */ .btn-primary, .ac-btn--primary { background: rgb(var(--sc-accent-rgb, var(--accent-rgb))) !important; border-color: transparent !important; color: var(--ac-on-accent) !important; font-weight: var(--ac-weight-strong); box-shadow: var(--ac-primary-shadow); } .btn-primary:hover, .ac-btn--primary:hover { filter: brightness(0.95); transform: translateY(-1px); } /* Tonal — soft accent fill (the default "secondary action") */ .ac-btn--tonal { background: rgba(var(--sc-accent-rgb, var(--accent-rgb)), 0.12); color: rgb(var(--sc-accent-strong-rgb, var(--accent-hover-rgb))); font-weight: var(--ac-weight); } .ac-btn--tonal:hover { background: rgba(var(--sc-accent-rgb, var(--accent-rgb)), 0.20); } /* Ghost / outline */ .btn-outline-primary, .btn-outline-secondary, .ac-btn--ghost { background: var(--ac-surface-strong, #fff); border-color: var(--ac-border, rgba(148, 163, 184, 0.28)); color: var(--sc-text); } .btn-outline-primary:hover, .btn-outline-secondary:hover, .ac-btn--ghost:hover { border-color: rgb(var(--sc-accent-rgb, var(--accent-rgb))); color: rgb(var(--sc-accent-strong-rgb, var(--accent-hover-rgb))); background: var(--ac-surface-strong, #fff); } .btn-secondary { background: rgba(var(--sc-accent-rgb, var(--accent-rgb)), 0.12) !important; border-color: transparent !important; color: rgb(var(--sc-accent-strong-rgb, var(--accent-hover-rgb))) !important; } /* Danger */ .btn-danger, .ac-btn--danger { background: var(--ac-danger) !important; border-color: transparent !important; color: #fff !important; font-weight: var(--ac-weight-strong); } .btn-outline-danger, .ac-btn--danger-ghost { background: transparent; border-color: rgba(var(--ux-red-rgb, 239, 68, 68), 0.4); color: var(--ac-danger); } .btn-outline-danger:hover, .ac-btn--danger-ghost:hover { background: rgba(var(--ux-red-rgb, 239, 68, 68), 0.1); border-color: var(--ac-danger); color: var(--ac-danger); } /* Link */ .btn-link, .ac-btn--link { background: transparent; border-color: transparent; color: rgb(var(--sc-accent-strong-rgb, var(--accent-hover-rgb))); min-height: auto; padding: 0 4px; box-shadow: none; } .btn-link:hover, .ac-btn--link:hover { text-decoration: underline; color: rgb(var(--sc-accent-strong-rgb, var(--accent-hover-rgb))); } /* Icon-only button */ .ac-icon-btn { display: inline-grid; place-items: center; width: var(--ac-btn-h); height: var(--ac-btn-h); padding: 0; border: 1px solid var(--ac-border, rgba(148, 163, 184, 0.28)); border-radius: var(--ac-r-md); background: var(--ac-surface-strong, #fff); color: var(--sc-text); cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s; } .ac-icon-btn:hover { border-color: rgb(var(--sc-accent-rgb, var(--accent-rgb))); color: rgb(var(--sc-accent-strong-rgb, var(--accent-hover-rgb))); } .ac-icon-btn--tonal { border-color: transparent; background: rgba(var(--sc-accent-rgb, var(--accent-rgb)), 0.12); color: rgb(var(--sc-accent-strong-rgb, var(--accent-hover-rgb))); } .ac-icon-btn--ghostly { border-color: transparent; background: transparent; color: var(--sc-text-muted); } .ac-icon-btn--danger { border-color: transparent; background: transparent; color: var(--ac-danger); } .ac-icon-btn--danger:hover { background: rgba(var(--ux-red-rgb, 239, 68, 68), 0.1); color: var(--ac-danger); } /* Disabled / loading for all buttons */ .btn:disabled, .btn.disabled, .ac-btn:disabled, .ac-btn.disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; filter: none; } /* Focus ring — one ring for every interactive control */ .btn:focus-visible, .ac-btn:focus-visible, .ac-icon-btn:focus-visible, .form-control:focus, .form-select:focus, .ac-field:focus { outline: none; box-shadow: 0 0 0 3px rgba(var(--sc-accent-rgb, var(--accent-rgb)), 0.30); border-color: rgb(var(--sc-accent-rgb, var(--accent-rgb))); } /* ============================================================ 3b. FORM FIELDS ============================================================ */ .form-control, .form-select, .ac-field { min-height: var(--ac-control-h); padding: 0 var(--ac-control-px); border: 1px solid var(--ac-border, rgba(148, 163, 184, 0.28)); border-radius: var(--ac-r-md); background: var(--ac-surface-strong, #fff); color: var(--sc-text); font-size: 0.9rem; transition: border-color 0.15s, box-shadow 0.15s; } textarea.form-control, textarea.ac-field { min-height: 80px; padding-top: 9px; padding-bottom: 9px; } .form-control-sm, .form-select-sm { min-height: var(--ac-btn-h-sm); padding: 0 11px; font-size: 0.8rem; border-radius: var(--ac-r-sm); } .ac-field-label { display: block; margin-bottom: 7px; font-weight: 650; font-size: 0.8rem; color: var(--sc-text); } .ac-help { margin-top: 6px; font-size: 0.72rem; line-height: 1.4; color: var(--sc-text-muted); } .ac-field-error { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 0.72rem; color: var(--ac-danger); } .ac-field.is-invalid, .form-control.is-invalid { border-color: var(--ac-danger); box-shadow: 0 0 0 3px rgba(var(--ux-red-rgb, 239, 68, 68), 0.16); } /* Input group: field + suffix (e.g. "meters") */ .ac-input-group { display: flex; align-items: stretch; min-height: var(--ac-control-h); border: 1px solid var(--ac-border, rgba(148, 163, 184, 0.28)); border-radius: var(--ac-r-md); overflow: hidden; background: var(--ac-surface-strong, #fff); } .ac-input-group:focus-within { border-color: rgb(var(--sc-accent-rgb, var(--accent-rgb))); box-shadow: 0 0 0 3px rgba(var(--sc-accent-rgb, var(--accent-rgb)), 0.30); } .ac-input-group > input { flex: 1; min-width: 0; border: 0; padding: 0 var(--ac-control-px); background: transparent; color: var(--sc-text); font-size: 0.9rem; outline: none; } .ac-input-group > .ac-input-suffix { display: inline-flex; align-items: center; padding: 0 13px; background: rgba(var(--ux-slate-rgb, 100, 116, 139), 0.08); border-left: 1px solid var(--ac-border, rgba(148, 163, 184, 0.28)); font-weight: 600; font-size: 0.8rem; color: var(--sc-text-muted); } /* ============================================================ 3c. SELECTION — checkbox, radio, switch refine.css already accents .form-check-input:checked; we add sizing + the .ac-switch toggle for instant-save settings. ============================================================ */ .form-check-input { width: 1.15rem; height: 1.15rem; border-radius: 6px; border: 1.5px solid var(--ac-border, rgba(148, 163, 184, 0.4)); cursor: pointer; } .form-check-input[type="radio"] { border-radius: 999px; } .ac-switch { position: relative; display: inline-flex; align-items: center; gap: 11px; cursor: pointer; user-select: none; } .ac-switch > input { position: absolute; opacity: 0; pointer-events: none; } .ac-switch .ac-switch-track { position: relative; width: 40px; height: 23px; border-radius: 999px; background: var(--ac-border, rgba(148, 163, 184, 0.45)); flex: 0 0 auto; transition: background 0.2s ease; } .ac-switch .ac-switch-track::after { content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 19px; height: 19px; border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.3); transition: inset-inline-start 0.2s ease; } .ac-switch > input:checked + .ac-switch-track, .ac-switch.is-on .ac-switch-track { background: rgb(var(--sc-accent-rgb, var(--accent-rgb))); } .ac-switch > input:checked + .ac-switch-track::after, .ac-switch.is-on .ac-switch-track::after { inset-inline-start: 19px; } .ac-switch .ac-switch-label { font-weight: 500; font-size: 0.9rem; color: var(--sc-text); } /* ============================================================ 3d. BADGES & CHIPS ============================================================ */ .badge, .ac-badge { display: inline-flex; align-items: center; gap: 6px; min-height: 22px; padding: 0 10px; border-radius: 999px; font-weight: 700; font-size: 0.7rem; line-height: 1; } .ac-badge::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; opacity: 0.9; } .ac-badge--success, .badge.bg-success { background: rgba(var(--ux-green-rgb, 34, 197, 94), 0.14) !important; color: #15803d !important; } .ac-badge--warn, .badge.bg-warning { background: rgba(var(--ux-amber-rgb, 245, 158, 11), 0.16) !important; color: #b45309 !important; } .ac-badge--danger, .badge.bg-danger { background: rgba(var(--ux-red-rgb, 239, 68, 68), 0.13) !important; color: #dc2626 !important; } .ac-badge--neutral, .badge.bg-secondary { background: rgba(var(--ux-slate-rgb, 100, 116, 139), 0.12) !important; color: var(--sc-text-muted) !important; } .ac-badge--accent { background: rgba(var(--sc-accent-rgb, var(--accent-rgb)), 0.12); color: rgb(var(--sc-accent-strong-rgb, var(--accent-hover-rgb))); } /* Pill chip (filter / option) */ .ac-chip { display: inline-flex; align-items: center; gap: 5px; min-height: 24px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--ac-border, rgba(148, 163, 184, 0.28)); background: rgba(var(--ux-slate-rgb, 100, 116, 139), 0.06); color: var(--sc-text-muted); font-weight: 600; font-size: 0.72rem; cursor: pointer; transition: all 0.14s ease; } .ac-chip.is-active, .ac-chip[aria-pressed="true"] { border-color: transparent; background: rgba(var(--sc-accent-rgb, var(--accent-rgb)), 0.12); color: rgb(var(--sc-accent-strong-rgb, var(--accent-hover-rgb))); } /* ============================================================ 3e. LIST ROW (sessions table, TA cards, warnings) ============================================================ */ .ac-row { display: grid; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--ac-border, rgba(148, 163, 184, 0.28)); transition: background 0.14s ease; } .ac-row:hover { background: rgba(var(--sc-accent-rgb, var(--accent-rgb)), 0.12); } .ac-row:last-child { border-bottom: 0; } /* ============================================================ 3f. SEGMENTED CONTROL (tabs / quick-nav / toggle groups) ============================================================ */ .ac-segmented { display: inline-flex; gap: 3px; padding: 4px; background: rgba(var(--ux-slate-rgb, 100, 116, 139), 0.08); border: 1px solid var(--ac-border, rgba(148, 163, 184, 0.28)); border-radius: var(--ac-r-pill); } .ac-segmented > button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 30px; padding: 0 14px; border: 0; border-radius: var(--ac-r-pill); background: transparent; color: var(--sc-text-muted); font-weight: 650; font-size: 0.78rem; cursor: pointer; transition: all 0.15s ease; } .ac-segmented > button.is-active, .ac-segmented > button[aria-selected="true"] { background: rgb(var(--sc-accent-rgb, var(--accent-rgb))); color: var(--ac-on-accent); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.22); } /* ============================================================ 3g. FROSTED GLASS — the signature surface, formalised refine.css already glazes .card/.modal-content with an opaque --ac-surface; we layer real blur + an accent wash + a top sheen, and extend it to every floating surface. ============================================================ */ .modal-content, .dropdown-menu, .popover, .offcanvas, .toast, .ac-glass { position: relative; background: linear-gradient(var(--ac-glass-tint), var(--ac-glass-tint)), var(--ac-glass-fill) !important; -webkit-backdrop-filter: blur(var(--ac-glass-blur)) saturate(var(--ac-glass-saturate)); backdrop-filter: blur(var(--ac-glass-blur)) saturate(var(--ac-glass-saturate)); border: 1px solid var(--ac-glass-border) !important; box-shadow: var(--ac-glass-shadow) !important; } /* the top sheen — a 1px highlight that sells the glass */ .modal-content::before, .dropdown-menu::before, .popover::before, .offcanvas::before, .ac-glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 1px 0 var(--ac-glass-sheen); } .modal-content > *, .ac-glass > * { position: relative; } /* Sticky / frosted bars (e.g. #headline, table toolbars) */ .ac-glass-bar { background: var(--ac-glass-fill); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--ac-glass-hairline); } /* Frost the segmented track and input-group suffix for cohesion */ .ac-segmented, .ac-input-group > .ac-input-suffix { -webkit-backdrop-filter: blur(8px) saturate(130%); backdrop-filter: blur(8px) saturate(130%); } /* Standardise overlay header / footer rhythm on the glass */ .modal-header { padding: 15px 18px; border-bottom: 1px solid var(--ac-glass-hairline); } .modal-footer { padding: 13px 18px; gap: 9px; background: rgba(var(--ux-slate-rgb, 100, 116, 139), 0.05); border-top: 1px solid var(--ac-glass-hairline); } .modal-title { font-weight: 750; font-size: 1rem; } /* ============================================================ 4. Teacher-shell compatibility pass Older templates use the base wrapper, .middle and .groupMargin as centering helpers. Keep the page column centered while preserving start-aligned text inside forms, cards and tables. ============================================================ */ #main .section.dashboard > .row > .text-center { width: 100%; text-align: center !important; } #main .section.dashboard > .row > .text-center > .text-start.my-3 { width: min(100%, 900px); margin-inline: auto !important; } .middle, .groupMargin { margin-inline: auto !important; } .card, .teacher-panel, .tab-content, .modal-content, .dropdown-menu, .popover, .table-responsive, form { text-align: start; } .text-center, .card .text-center, .teacher-panel .text-center, .tab-content .text-center, .modal-content .text-center { text-align: center !important; } /* Keep Bootstrap and legacy color utilities on the active app accent. */ .text-primary, a.text-primary, .btn-link.text-primary { color: rgb(var(--sc-accent-rgb, var(--accent-rgb))) !important; } .btn-outline-primary { color: rgb(var(--sc-accent-rgb, var(--accent-rgb))) !important; border-color: rgba(var(--sc-accent-rgb, var(--accent-rgb)), 0.34) !important; background: rgba(var(--sc-accent-rgb, var(--accent-rgb)), 0.055) !important; } .btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active { color: var(--ac-on-accent) !important; background: rgb(var(--sc-accent-rgb, var(--accent-rgb))) !important; border-color: rgb(var(--sc-accent-rgb, var(--accent-rgb))) !important; } .btn-info { background: rgb(var(--sc-accent-rgb, var(--accent-rgb))) !important; border-color: transparent !important; color: var(--ac-on-accent) !important; } .badge.bg-info { background: rgba(var(--sc-accent-rgb, var(--accent-rgb)), 0.14) !important; color: rgb(var(--sc-accent-strong-rgb, var(--accent-hover-rgb))) !important; } .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { background: rgb(var(--sc-accent-rgb, var(--accent-rgb))) !important; color: var(--ac-on-accent) !important; box-shadow: 0 3px 10px rgba(var(--sc-accent-rgb, var(--accent-rgb)), 0.22) !important; } body.dark-mode .text-primary, body.dark-mode a.text-primary, body.dark-mode .btn-link.text-primary { color: rgb(var(--dark-accent-rgb)) !important; } /* Teacher-page accent repairs for older page-local styles. */ .review-shell .btn-outline-primary, .review-choice-marker.correct-answer, .review-sheet-view-btn, .review-sheet-page-btn, .review-paper-crop-option { color: rgb(var(--sc-accent-rgb, var(--accent-rgb))) !important; } .review-shell .btn-outline-primary, .review-sheet-view-btn, .review-paper-crop-option { border-color: rgba(var(--sc-accent-rgb, var(--accent-rgb)), 0.34) !important; } .review-shell .btn-outline-primary:hover, .review-shell .btn-outline-primary:focus, .review-paper-crop-option.is-selected, .review-sheet-page-btn.is-active { background: rgb(var(--sc-accent-rgb, var(--accent-rgb))) !important; border-color: rgb(var(--sc-accent-rgb, var(--accent-rgb))) !important; color: var(--ac-on-accent) !important; } .review-answer.correct-answer, .review-choice.correct-answer { border-color: rgba(var(--sc-accent-rgb, var(--accent-rgb)), 0.34) !important; box-shadow: inset 3px 0 0 rgb(var(--sc-accent-rgb, var(--accent-rgb))) !important; } html[dir="rtl"] .review-choice[dir="rtl"].correct-answer, .review-choice[dir="rtl"].correct-answer { box-shadow: inset -3px 0 0 rgb(var(--sc-accent-rgb, var(--accent-rgb))) !important; } .class-exam-scan-select, .class-exam-scan-selectall input { accent-color: rgb(var(--sc-accent-rgb, var(--accent-rgb))) !important; } .class-exam-scan-row.is-selected, .class-exam-paper-scan-student-option.is-active, .pa-option-card.selected { background: rgba(var(--sc-accent-rgb, var(--accent-rgb)), 0.08) !important; } .class-exam-camera-panel.is-fullscreen .class-exam-camera-control i, .class-exam-scan-empty-state i, .class-exam-status .class-exam-status-link, .class-exam-scan-load-more-btn, .ce-bubble-student-head i, .ce-bubble-crop-option:hover, .ce-bubble-option-chip:hover, .pa-step-dot.active .step-label, .pa-toggle-item .form-check-input:checked ~ .form-check-label, .pa-option-card.selected .pa-option-icon { color: rgb(var(--sc-accent-rgb, var(--accent-rgb))) !important; } .class-exam-scan-chip.active, .pa-step-dot.active .dot { background: rgb(var(--sc-accent-rgb, var(--accent-rgb))) !important; border-color: rgb(var(--sc-accent-rgb, var(--accent-rgb))) !important; color: var(--ac-on-accent) !important; } .student-actions-row { display: flex; align-items: center; justify-content: center; gap: 14px; width: min(100%, 900px); margin: 28px auto 0 !important; text-align: center !important; } .student-actions-row__link, .student-actions-row__delete { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 0 2px; border: 0 !important; background: transparent !important; font: inherit; font-weight: 700; line-height: 1.1; cursor: pointer; text-decoration: none; }