/* ============================================================================= Course Planner — main.css (complete, all components, all themes) ============================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300..800;1,14..32,300..800&family=JetBrains+Mono:wght@400;500&display=swap'); /* ─── BASE THEMES + TOKENS ─────────────────────────────────────────── */ /* ============================================================================= Course Planner — main.css (v4 complete rewrite) 6 themes: space (dark default), paper, forest, ocean, rose, slate Simple / Advanced mode toggle ============================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300..800;1,14..32,300..800&family=JetBrains+Mono:wght@400;500&display=swap'); /* ───────────────────────────────────────────────────────────────────────────── THEME TOKENS Each theme sets the same variable names. JS switches [data-theme] on . ───────────────────────────────────────────────────────────────────────────── */ /* ── Space (dark, default) ───────────────────────────────────────────────── */ :root, [data-theme="space"] { --bg: #0b0d14; --bg-raised: #10131c; --surface: #161928; --surface-2: #1e2236; --surface-3: #262c42; --border: #2a3050; --border-strong:#3a4468; --text: #e2e6f8; --text-muted: #7d8aaa; --text-faint: #424e70; --accent: #6c8fff; --accent-dim: #3a5fe0; --accent-bg: rgba(108,143,255,.12); --accent-text: #afc0ff; --success: #3dd68c; --success-bg: rgba(61,214,140,.1); --warning: #fbbf24; --warning-bg: rgba(251,191,36,.1); --danger: #ff6b7a; --danger-bg: rgba(255,107,122,.1); --info: #38bdf8; --info-bg: rgba(56,189,248,.1); --topbar-bg: rgba(11,13,20,.85); --section-L: #6c8fff; --section-T: #c084fc; --section-P: #34d399; --shadow-sm: 0 1px 4px rgba(0,0,0,.5); --shadow-md: 0 4px 20px rgba(0,0,0,.6); --shadow-lg: 0 8px 40px rgba(0,0,0,.7); --radius-sm: 5px; --radius: 9px; --radius-lg: 14px; --font-sans: 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', monospace; --scrollbar: #2a3050; } /* ── Paper (warm light) ──────────────────────────────────────────────────── */ [data-theme="paper"] { --bg: #f5f0e8; --bg-raised: #faf7f2; --surface: #ffffff; --surface-2: #ede8de; --surface-3: #e0d9cd; --border: #cec5b6; --border-strong:#afa492; --text: #2b2218; --text-muted: #6b5f52; --text-faint: #a0948a; --accent: #b5451b; --accent-dim: #8c3413; --accent-bg: rgba(181,69,27,.09); --accent-text: #8c3413; --success: #2a7a4b; --success-bg: rgba(42,122,75,.1); --warning: #a0620d; --warning-bg: rgba(160,98,13,.1); --danger: #c0231e; --danger-bg: rgba(192,35,30,.1); --info: #1a6b9e; --info-bg: rgba(26,107,158,.1); --topbar-bg: rgba(255,255,255,.9); --section-L: #b5451b; --section-T: #6d3db5; --section-P: #2a7a4b; --shadow-sm: 0 1px 3px rgba(0,0,0,.1); --shadow-md: 0 4px 16px rgba(0,0,0,.12); --shadow-lg: 0 8px 32px rgba(0,0,0,.15); --scrollbar: #cec5b6; } /* ── Forest (green dark) ─────────────────────────────────────────────────── */ [data-theme="forest"] { --bg: #0c1409; --bg-raised: #111a0d; --surface: #192310; --surface-2: #1f2c15; --surface-3: #27381c; --border: #2e4020; --border-strong:#3f5a2c; --text: #d4e8c2; --text-muted: #7a9e5e; --text-faint: #3e5828; --accent: #74c94a; --accent-dim: #52a030; --accent-bg: rgba(116,201,74,.1); --accent-text: #a8e484; --success: #4de88c; --success-bg: rgba(77,232,140,.1); --warning: #f0b429; --warning-bg: rgba(240,180,41,.1); --danger: #f76464; --danger-bg: rgba(247,100,100,.1); --info: #5bc8e8; --info-bg: rgba(91,200,232,.1); --topbar-bg: rgba(12,20,9,.88); --section-L: #74c94a; --section-T: #c4a0f0; --section-P: #4de88c; --shadow-sm: 0 1px 4px rgba(0,0,0,.6); --shadow-md: 0 4px 20px rgba(0,0,0,.7); --shadow-lg: 0 8px 40px rgba(0,0,0,.8); --scrollbar: #2e4020; } /* ── Ocean (deep teal dark) ──────────────────────────────────────────────── */ [data-theme="ocean"] { --bg: #06101a; --bg-raised: #0b1828; --surface: #0f2035; --surface-2: #152840; --surface-3: #1c3250; --border: #1f3d58; --border-strong:#2b5278; --text: #c8e8f8; --text-muted: #5890b8; --text-faint: #2a4c68; --accent: #00c4d4; --accent-dim: #009caa; --accent-bg: rgba(0,196,212,.1); --accent-text: #68e8f4; --success: #22d3a0; --success-bg: rgba(34,211,160,.1); --warning: #fbbf24; --warning-bg: rgba(251,191,36,.1); --danger: #f87171; --danger-bg: rgba(248,113,113,.1); --info: #38bdf8; --info-bg: rgba(56,189,248,.1); --topbar-bg: rgba(6,16,26,.88); --section-L: #00c4d4; --section-T: #a78bfa; --section-P: #22d3a0; --shadow-sm: 0 1px 4px rgba(0,0,0,.6); --shadow-md: 0 4px 20px rgba(0,0,0,.7); --shadow-lg: 0 8px 40px rgba(0,0,0,.8); --scrollbar: #1f3d58; } /* ── Rose (soft pink light) ──────────────────────────────────────────────── */ [data-theme="rose"] { --bg: #fdf0f4; --bg-raised: #fff5f8; --surface: #ffffff; --surface-2: #f5e6ec; --surface-3: #ead4df; --border: #dfc0ce; --border-strong:#c89ab0; --text: #2c1520; --text-muted: #7a4560; --text-faint: #b08898; --accent: #d63678; --accent-dim: #a8245c; --accent-bg: rgba(214,54,120,.09); --accent-text: #a8245c; --success: #16803c; --success-bg: rgba(22,128,60,.1); --warning: #92560a; --warning-bg: rgba(146,86,10,.1); --danger: #b91c40; --danger-bg: rgba(185,28,64,.1); --info: #0369a1; --info-bg: rgba(3,105,161,.1); --topbar-bg: rgba(255,255,255,.9); --section-L: #d63678; --section-T: #7c3aed; --section-P: #16803c; --shadow-sm: 0 1px 3px rgba(0,0,0,.09); --shadow-md: 0 4px 16px rgba(0,0,0,.11); --shadow-lg: 0 8px 32px rgba(0,0,0,.14); --scrollbar: #dfc0ce; } /* ── Slate (neutral mid-grey, minimal) ───────────────────────────────────── */ [data-theme="slate"] { --bg: #f1f3f6; --bg-raised: #f8f9fb; --surface: #ffffff; --surface-2: #e8eaee; --surface-3: #dde0e6; --border: #c8ccd6; --border-strong:#a8aebb; --text: #1a1d28; --text-muted: #52596e; --text-faint: #8890a4; --accent: #5b69f0; --accent-dim: #3d4dd4; --accent-bg: rgba(91,105,240,.09); --accent-text: #3d4dd4; --success: #0e7a3a; --success-bg: rgba(14,122,58,.09); --warning: #8a6400; --warning-bg: rgba(138,100,0,.09); --danger: #c0222e; --danger-bg: rgba(192,34,46,.09); --info: #0c6fa0; --info-bg: rgba(12,111,160,.09); --topbar-bg: rgba(255,255,255,.92); --section-L: #5b69f0; --section-T: #9333ea; --section-P: #0e7a3a; --shadow-sm: 0 1px 3px rgba(0,0,0,.08); --shadow-md: 0 4px 16px rgba(0,0,0,.1); --shadow-lg: 0 8px 32px rgba(0,0,0,.13); --scrollbar: #c8ccd6; } /* ───────────────────────────────────────────────────────────────────────────── BASE RESET ───────────────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 15px; scrollbar-color: var(--scrollbar) transparent; scrollbar-width: thin; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-sans); background: var(--bg); color: var(--text); line-height: 1.6; min-height: 100dvh; transition: background .2s, color .2s; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } hr { border: none; border-top: 1px solid var(--border); margin: .75rem 0; } /* ───────────────────────────────────────────────────────────────────────────── SHELL / LAYOUT ───────────────────────────────────────────────────────────────────────────── */ .cr-shell { display: flex; flex-direction: column; min-height: 100dvh; } /* overflow-x: clip (NOT hidden) — clips stray horizontal overflow so the sticky topbar always spans the visible page, without creating a scroll container (which would disable position:sticky). */ .cr-shell { overflow-x: clip; } .cr-main { flex: 1; display: flex; flex-direction: column; min-width: 0; } /* ───────────────────────────────────────────────────────────────────────────── TOPBAR ───────────────────────────────────────────────────────────────────────────── */ .cr-topbar { position: sticky; top: 0; z-index: 200; display: flex; align-items: center; gap: .75rem; height: 54px; padding: 0 1.25rem; background: var(--topbar-bg); border-bottom: 1px solid var(--border); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .cr-topbar__brand { display: flex; align-items: center; gap: .45rem; font-weight: 700; font-size: .95rem; letter-spacing: -.01em; color: var(--text); flex-shrink: 0; } .cr-topbar__brand .ti { color: var(--accent); font-size: 1.2rem; } .cr-topbar__nav { display: flex; align-items: center; gap: .2rem; flex: 1; overflow-x: auto; scrollbar-width: none; } .cr-topbar__nav::-webkit-scrollbar { display: none; } .cr-topbar__actions { display: flex; align-items: center; gap: .4rem; flex-shrink: 0; margin-left: auto; } /* Nav links */ .cr-nav-link { display: flex; align-items: center; gap: .3rem; padding: .3rem .6rem; border-radius: var(--radius-sm); font-size: .82rem; font-weight: 500; color: var(--text-muted); white-space: nowrap; transition: background .12s, color .12s; } .cr-nav-link .ti { font-size: .95rem; } .cr-nav-link:hover { background: var(--surface-2); color: var(--text); text-decoration: none; } .cr-nav-link.is-active { background: var(--accent-bg); color: var(--accent-text); } /* ───────────────────────────────────────────────────────────────────────────── SIMPLE / ADVANCED MODE .cr-adv-only → hidden in simple mode .cr-simple-only → hidden in advanced mode ───────────────────────────────────────────────────────────────────────────── */ html.simple-mode .cr-adv-only { display: none !important; } html.advanced-mode .cr-simple-only { display: none !important; } /* Simple mode mode indicator pill in nav */ .cr-mode-pill { display: inline-flex; align-items: center; gap: .25rem; padding: .18rem .55rem; border-radius: 999px; font-size: .7rem; font-weight: 600; cursor: pointer; border: 1.5px solid var(--border); background: var(--surface-2); color: var(--text-muted); transition: all .15s; white-space: nowrap; font-family: var(--font-sans); } .cr-mode-pill:hover { border-color: var(--accent); color: var(--accent); } html.simple-mode .cr-mode-pill { background: var(--accent-bg); border-color: var(--accent); color: var(--accent-text); } /* ───────────────────────────────────────────────────────────────────────────── THEME SWITCHER ───────────────────────────────────────────────────────────────────────────── */ .cr-theme-menu { position: relative; } .cr-theme-dropdown { position: absolute; top: calc(100% + 6px); right: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: .4rem; min-width: 200px; z-index: 400; } .cr-theme-dropdown__label { font-size: .68rem; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .06em; padding: .2rem .45rem .35rem; display: block; } .cr-theme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem; } .cr-theme-option { display: flex; align-items: center; gap: .45rem; padding: .4rem .55rem; border-radius: var(--radius-sm); font-size: .8rem; cursor: pointer; border: 1.5px solid transparent; background: none; color: var(--text-muted); font-family: var(--font-sans); transition: background .12s, border-color .12s, color .12s; text-align: left; } .cr-theme-option:hover { background: var(--surface-2); color: var(--text); } .cr-theme-option.is-active { border-color: var(--accent); color: var(--accent-text); background: var(--accent-bg); } .cr-theme-swatch { width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0; border: 1px solid rgba(0,0,0,.12); } /* ───────────────────────────────────────────────────────────────────────────── BUTTONS ───────────────────────────────────────────────────────────────────────────── */ .cr-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .44rem .9rem; border: 1px solid transparent; border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: .85rem; font-weight: 500; cursor: pointer; transition: background .12s, border-color .12s, color .12s, box-shadow .12s; white-space: nowrap; line-height: 1.4; } .cr-btn:disabled { opacity: .4; cursor: not-allowed; } .cr-btn--primary { background: var(--accent); color: #fff; border-color: var(--accent); } .cr-btn--primary:hover:not(:disabled) { background: var(--accent-dim); border-color: var(--accent-dim); color: #fff; text-decoration: none; box-shadow: 0 2px 8px var(--accent-bg); } .cr-btn--ghost { background: transparent; color: var(--text-muted); border-color: var(--border); } .cr-btn--ghost:hover:not(:disabled) { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); text-decoration: none; } .cr-btn--danger { background: var(--danger-bg); color: var(--danger); border-color: transparent; } .cr-btn--danger:hover:not(:disabled) { background: var(--danger); color: #fff; text-decoration: none; } .cr-btn--sm { padding: .28rem .6rem; font-size: .78rem; } .cr-btn--lg { padding: .65rem 1.4rem; font-size: .95rem; } .cr-btn--wide { width: 100%; justify-content: center; } /* ───────────────────────────────────────────────────────────────────────────── ICON BUTTON ───────────────────────────────────────────────────────────────────────────── */ .cr-icon-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); cursor: pointer; font-size: 1rem; transition: background .12s, color .12s; } .cr-icon-btn:hover { background: var(--surface-2); color: var(--text); } /* ───────────────────────────────────────────────────────────────────────────── USER MENU ───────────────────────────────────────────────────────────────────────────── */ .cr-user-menu { position: relative; } .cr-user-btn { display: flex; align-items: center; gap: .4rem; padding: .2rem .5rem .2rem .2rem; border: 1px solid var(--border); border-radius: var(--radius); background: transparent; color: var(--text-muted); cursor: pointer; font-size: .8rem; transition: border-color .12s, background .12s; } .cr-user-btn:hover { border-color: var(--border-strong); background: var(--surface-2); color: var(--text); } .cr-avatar { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-dim); color: #fff; font-size: .7rem; font-weight: 700; flex-shrink: 0; } .cr-user-dropdown { position: absolute; top: calc(100% + 6px); right: 0; min-width: 210px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: .3rem; z-index: 400; } .cr-user-dropdown__info { padding: .55rem .75rem .45rem; display: flex; flex-direction: column; gap: .1rem; } .cr-user-dropdown__info strong { font-size: .85rem; color: var(--text); } .cr-user-dropdown__info small { font-size: .73rem; color: var(--text-muted); word-break: break-all; } .cr-user-dropdown__link { display: flex; align-items: center; gap: .5rem; padding: .44rem .75rem; border-radius: var(--radius-sm); font-size: .83rem; color: var(--text-muted); transition: background .1s, color .1s; } .cr-user-dropdown__link:hover { background: var(--surface-2); color: var(--text); text-decoration: none; } .cr-user-dropdown__link--danger:hover { background: var(--danger-bg); color: var(--danger); } /* Save indicator */ .cr-save-indicator { font-size: .75rem; color: var(--text-faint); min-width: 64px; text-align: right; font-family: var(--font-mono); } .cr-save-indicator.is-saving { color: var(--warning); } .cr-save-indicator.is-saved { color: var(--success); } .cr-save-indicator.is-error { color: var(--danger); } /* ───────────────────────────────────────────────────────────────────────────── FORM CONTROLS ───────────────────────────────────────────────────────────────────────────── */ .cr-input, .cr-select { display: block; width: 100%; padding: .46rem .75rem; background: var(--surface-2); border: 1.5px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-family: var(--font-sans); font-size: .85rem; transition: border-color .12s, background .12s, box-shadow .12s; outline: none; appearance: none; } .cr-input::placeholder { color: var(--text-faint); } .cr-input:focus, .cr-select:focus { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px var(--accent-bg); } .cr-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238890a8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .65rem center; padding-right: 2rem; cursor: pointer; } .cr-label { display: block; font-size: .8rem; font-weight: 500; color: var(--text-muted); margin-bottom: .3rem; } .cr-field { margin-bottom: .85rem; } .cr-field-hint { display: block; font-size: .7rem; color: var(--text-faint); margin-top: .2rem; line-height: 1.45; } /* ───────────────────────────────────────────────────────────────────────────── CARDS ───────────────────────────────────────────────────────────────────────────── */ .cr-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); } /* ───────────────────────────────────────────────────────────────────────────── BADGES ───────────────────────────────────────────────────────────────────────────── */ .cr-badge { display: inline-flex; align-items: center; padding: .12rem .4rem; border-radius: 99px; font-size: .7rem; font-weight: 600; letter-spacing: .02em; font-family: var(--font-mono); } .cr-badge--blue { background: var(--accent-bg); color: var(--accent-text); } .cr-badge--green { background: var(--success-bg); color: var(--success); } .cr-badge--amber { background: var(--warning-bg); color: var(--warning); } .cr-badge--red { background: var(--danger-bg); color: var(--danger); } .cr-badge--muted { background: var(--surface-3); color: var(--text-muted); } /* Professor verdict. Sits inline beside an instructor name in tight rows, so it stays icon-led and never wins the line against the name it describes. */ .cr-prof-badge { gap: .18rem; padding: .08rem .34rem; font-size: .62rem; flex-shrink: 0; } .cr-prof-badge i { font-size: .68rem; } .cr-badge--accent { background: var(--accent-bg); color: var(--accent); } .cr-badge--L { background: rgba(108,143,255,.15); color: var(--section-L); } .cr-badge--T { background: rgba(192,132,252,.15); color: var(--section-T); } .cr-badge--P { background: rgba(52,211,153,.15); color: var(--section-P); } /* ───────────────────────────────────────────────────────────────────────────── BANNERS ───────────────────────────────────────────────────────────────────────────── */ .cr-banner { display: flex; align-items: flex-start; gap: .65rem; padding: .65rem 1rem; border-radius: var(--radius); font-size: .82rem; line-height: 1.45; } .cr-banner .ti { font-size: 1.05rem; flex-shrink: 0; margin-top: .1rem; } .cr-banner__body { flex: 1; min-width: 0; } .cr-banner__dismiss { background: none; border: none; cursor: pointer; color: inherit; opacity: .6; font-size: 1rem; padding: 0; margin-left: auto; flex-shrink: 0; } .cr-banner__dismiss:hover { opacity: 1; } .cr-banner--warning { background: var(--warning-bg); border: 1px solid var(--warning); color: var(--warning); } .cr-banner--danger { background: var(--danger-bg); border: 1px solid var(--danger); color: var(--danger); } .cr-banner--success { background: var(--success-bg); border: 1px solid var(--success); color: var(--success); } .cr-banner--info { background: var(--info-bg); border: 1px solid var(--info); color: var(--info); } /* ───────────────────────────────────────────────────────────────────────────── SPINNERS / EMPTY / PLACEHOLDER ───────────────────────────────────────────────────────────────────────────── */ .cr-spinner { width: 20px; height: 20px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: cr-spin .6s linear infinite; display: inline-block; } @keyframes cr-spin { to { transform: rotate(360deg); } } /* The hidden attribute must ALWAYS hide. Several containers (e.g. the generate page's #genLoading placeholder and #genResultsList) carry a class or inline style with display:flex, which silently overrode the UA's [hidden]{display:none} — the loading spinner was therefore visible from page load and could never be hidden by JS ("perpetual buffering"). */ [hidden] { display: none !important; } /* .is-hidden is the class-based hide utility the admin panel uses to keep its modals closed (class="cr-modal-backdrop is-hidden"). Without this rule those modals — which are position:fixed; inset:0; display:flex — render full-screen and stacked on page load, making the admin console look broken, and the open/close JS (which toggles this class) has no visible effect. */ .is-hidden { display: none !important; } .cr-placeholder { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; color: var(--text-faint); padding: 3rem; text-align: center; } .cr-placeholder .ti { font-size: 2.5rem; opacity: .35; } .cr-placeholder p { font-size: .9rem; max-width: 280px; line-height: 1.55; } .cr-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; padding: 2rem; text-align: center; color: var(--text-faint); } .cr-empty .ti { font-size: 1.75rem; opacity: .3; } .cr-empty p { font-size: .83rem; max-width: 240px; } /* ───────────────────────────────────────────────────────────────────────────── WEEKLY TIMETABLE GRID ───────────────────────────────────────────────────────────────────────────── */ .cr-grid-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .cr-grid { display: grid; grid-template-columns: 62px repeat(6, 1fr); grid-template-rows: 34px repeat(11, 70px) 50px; min-width: 660px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .cr-grid__header-cell { display: flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 600; color: var(--text-muted); background: var(--surface-2); border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); text-transform: uppercase; letter-spacing: .06em; } .cr-grid__header-cell:last-child { border-right: none; } .cr-grid__slot-label { /* Period number over its start time — the number alone means nothing to anyone who has not memorised the slot table. */ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; line-height: 1.1; font-size: .72rem; font-family: var(--font-mono); color: var(--text-faint); background: var(--surface-2); border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); } .cr-grid__slot-label small { font-size: .62rem; opacity: .8; letter-spacing: -.02em; } .cr-grid__cell { position: relative; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); background: var(--surface); transition: background .1s; cursor: pointer; } .cr-grid__cell:last-child { border-right: none; } .cr-grid__cell:hover { background: var(--surface-2); } .cr-grid__cell::after { content: '+'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1rem; color: var(--text-faint); opacity: 0; transition: opacity .1s; } .cr-grid__cell:hover::after { opacity: .4; } .cr-grid__cell.has-section::after { display: none; } .cr-grid__cell.has-section { cursor: default; } .cr-grid__exam-row { display: contents; } .cr-grid__exam-cell { display: flex; align-items: center; padding: 0 .4rem; font-size: .67rem; background: var(--bg); border-top: 2px solid var(--border); border-right: 1px solid var(--border); overflow: hidden; gap: .25rem; } .cr-grid__cell.is-free-shared { background: var(--success-bg) !important; border-color: var(--success) !important; } .cr-grid__cell.is-free-shared::after { content: ''; opacity: 0; } /* Section card on grid */ .cr-section-card { position: absolute; inset: 2px; border-radius: var(--radius-sm); padding: .3rem .4rem; display: flex; flex-direction: column; gap: .08rem; overflow: hidden; cursor: pointer; transition: transform .12s, box-shadow .12s; border-left: 3px solid transparent; } .cr-section-card:hover { transform: scale(1.025); box-shadow: var(--shadow-md); z-index: 10; } .cr-section-card__code { font-size: .68rem; font-weight: 700; font-family: var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; } .cr-section-card__section { font-size: .62rem; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cr-section-card__lock { margin-top: auto; font-size: .6rem; opacity: .7; display: none; } .cr-section-card.is-locked .cr-section-card__lock { display: block; } .cr-section-card.is-locked { border-style: dashed; } /* Compact grid variant */ .cr-grid--mini { grid-template-rows: 26px repeat(11, 46px); min-width: 460px; } .cr-grid--mini .cr-grid__header-cell { font-size: .65rem; } .cr-grid--mini .cr-grid__slot-label { font-size: .62rem; } .cr-grid--mini .cr-grid__slot-label small { font-size: .54rem; } .cr-grid--mini .cr-section-card__code { font-size: .58rem; } .cr-grid--mini .cr-section-card__section { font-size: .52rem; } /* ───────────────────────────────────────────────────────────────────────────── COURSE SIDEBAR ───────────────────────────────────────────────────────────────────────────── */ .cr-sidebar__search-wrap { padding: .7rem; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: .45rem; } .cr-sidebar__input-row { display: flex; gap: .35rem; } .cr-sidebar__input-row .cr-input { flex: 1; } .cr-sidebar__list { flex: 1; overflow-y: auto; padding: .35rem; } .cr-course-item { border-radius: var(--radius-sm); margin-bottom: .22rem; border: 1px solid var(--border); background: var(--surface); transition: border-color .1s; overflow: hidden; } .cr-course-item.is-expanded { border-color: var(--accent); } .cr-course-item__header { display: flex; align-items: center; gap: .45rem; padding: .48rem .6rem; cursor: pointer; user-select: none; } .cr-course-item__header:hover { background: var(--surface-2); } .cr-course-item__code { font-size: .73rem; font-weight: 700; font-family: var(--font-mono); color: var(--text); flex-shrink: 0; } .cr-course-item__name { font-size: .76rem; color: var(--text-muted); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cr-course-item__count { font-size: .68rem; font-family: var(--font-mono); color: var(--text-faint); flex-shrink: 0; } .cr-course-item__chevron { font-size: .72rem; color: var(--text-faint); transition: transform .15s; flex-shrink: 0; } .cr-course-item.is-expanded .cr-course-item__chevron { transform: rotate(180deg); } .cr-course-item__sections { border-top: 1px solid var(--border); display: none; } .cr-course-item.is-expanded .cr-course-item__sections { display: block; } .cr-section-row { display: flex; align-items: center; gap: .45rem; padding: .44rem .7rem; cursor: pointer; border-bottom: 1px solid var(--border); transition: background .1s; } .cr-section-row:last-child { border-bottom: none; } .cr-section-row:hover:not(.is-added):not(.is-clashing) { background: var(--surface-2); } .cr-section-row.is-added { background: var(--accent-bg); cursor: default; } .cr-section-row.is-clashing { opacity: .35; cursor: not-allowed; } .cr-section-row__number { font-size: .73rem; font-family: var(--font-mono); font-weight: 600; min-width: 26px; } .cr-section-row__instructor{ font-size: .73rem; color: var(--text-muted); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cr-section-row__slots { font-size: .65rem; font-family: var(--font-mono); color: var(--text-faint); } .cr-section-row__action { flex-shrink: 0; font-size: .8rem; } /* ───────────────────────────────────────────────────────────────────────────── DRAFT BAR ───────────────────────────────────────────────────────────────────────────── */ .cr-draft-bar { display: flex; align-items: center; gap: .35rem; padding: .45rem 1rem; border-bottom: 1px solid var(--border); background: var(--bg-raised); overflow-x: auto; flex-shrink: 0; scrollbar-width: none; } .cr-draft-bar::-webkit-scrollbar { display: none; } .cr-draft-tab { display: flex; align-items: center; gap: .3rem; padding: .28rem .65rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); font-size: .78rem; cursor: pointer; white-space: nowrap; transition: all .1s; font-family: var(--font-sans); } .cr-draft-tab:hover { background: var(--surface-2); color: var(--text); } .cr-draft-tab.is-active { background: var(--accent-bg); border-color: var(--accent); color: var(--accent-text); font-weight: 600; } .cr-draft-tab__label { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ───────────────────────────────────────────────────────────────────────────── BUILDER LAYOUT ───────────────────────────────────────────────────────────────────────────── */ .cr-builder { display: flex; flex: 1; overflow: hidden; height: calc(100dvh - 54px - 44px); } .cr-builder__sidebar { width: 275px; min-width: 230px; max-width: 340px; flex-shrink: 0; border-right: 1px solid var(--border); display: flex; flex-direction: column; background: var(--bg-raised); overflow: hidden; } .cr-builder__main { flex: 1; overflow: hidden; display: flex; flex-direction: column; padding: .85rem; gap: .65rem; } .cr-builder__controls { display: flex; align-items: center; gap: .45rem; flex-shrink: 0; } /* ───────────────────────────────────────────────────────────────────────────── REPEATER + INCOMPATIBLE TOGGLES ───────────────────────────────────────────────────────────────────────────── */ .cr-repeater-toggle, .cr-show-incompatible { display: flex; align-items: center; gap: .35rem; padding: .28rem .6rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); font-size: .78rem; font-family: var(--font-sans); cursor: pointer; transition: all .12s; white-space: nowrap; } .cr-repeater-toggle:hover, .cr-show-incompatible:hover { border-color: var(--warning); color: var(--warning); } .cr-repeater-toggle.is-active { background: var(--warning-bg); border-color: var(--warning); color: var(--warning); font-weight: 600; } .cr-show-incompatible.is-active { border-color: var(--border-strong); background: var(--surface-2); color: var(--text-muted); } /* ───────────────────────────────────────────────────────────────────────────── POPOVER ───────────────────────────────────────────────────────────────────────────── */ .cr-popover { position: fixed; z-index: 500; min-width: 220px; max-width: 300px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: .4rem; animation: cr-pop-in .1s ease; } @keyframes cr-pop-in { from { opacity: 0; transform: scale(.96) translateY(-4px); } to { opacity: 1; transform: scale(1) translateY(0); } } .cr-popover__title { font-size: .73rem; font-weight: 600; color: var(--text-muted); padding: .28rem .5rem .45rem; border-bottom: 1px solid var(--border); margin-bottom: .22rem; font-family: var(--font-mono); } .cr-popover__item { display: flex; align-items: center; gap: .5rem; padding: .4rem .5rem; border-radius: var(--radius-sm); cursor: pointer; font-size: .8rem; transition: background .1s; } .cr-popover__item:hover { background: var(--surface-2); } /* ───────────────────────────────────────────────────────────────────────────── CONTEXT MENU ───────────────────────────────────────────────────────────────────────────── */ .cr-context-menu { position: fixed; z-index: 500; min-width: 178px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: .28rem; animation: cr-pop-in .1s ease; } .cr-context-menu__item { display: flex; align-items: center; gap: .45rem; padding: .4rem .6rem; border-radius: var(--radius-sm); cursor: pointer; font-size: .81rem; color: var(--text-muted); transition: background .1s, color .1s; } .cr-context-menu__item:hover { background: var(--surface-2); color: var(--text); } .cr-context-menu__item--danger:hover { background: var(--danger-bg); color: var(--danger); } /* ───────────────────────────────────────────────────────────────────────────── GENERATOR PAGE ───────────────────────────────────────────────────────────────────────────── */ .cr-gen-layout { display: grid; grid-template-columns: 310px 1fr; gap: 0; flex: 1; overflow: hidden; } .cr-gen-form { border-right: 1px solid var(--border); overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .7rem; background: var(--bg-raised); } .cr-gen-results { overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .75rem; } /* Preset grid */ .cr-preset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: .3rem; } .cr-preset-btn { display: flex; flex-direction: column; align-items: center; gap: .22rem; padding: .48rem .3rem; background: var(--surface-2); border: 1.5px solid var(--border); border-radius: var(--radius); cursor: pointer; font-size: .68rem; font-weight: 500; color: var(--text-muted); transition: all .12s; text-align: center; line-height: 1.3; font-family: var(--font-sans); } .cr-preset-btn i { font-size: 1.05rem; } .cr-preset-btn:hover { border-color: var(--accent); color: var(--text); } .cr-preset-btn.is-active { border-color: var(--accent); background: var(--accent-bg); color: var(--accent-text); } /* ───────────────────────────────────────────────────────────────────────────── SIMPLE MODE: BIG FRIENDLY CARDS ───────────────────────────────────────────────────────────────────────────── */ .cr-simple-step { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem 1.75rem; display: flex; flex-direction: column; gap: .6rem; transition: border-color .15s; } .cr-simple-step.is-current { border-color: var(--accent); } .cr-simple-step.is-done { border-color: var(--success); } .cr-simple-step__num { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-bg); color: var(--accent-text); font-size: .8rem; font-weight: 700; flex-shrink: 0; } .cr-simple-step.is-done .cr-simple-step__num { background: var(--success-bg); color: var(--success); } .cr-simple-step__title { font-size: 1rem; font-weight: 700; } .cr-simple-step__hint { font-size: .82rem; color: var(--text-muted); line-height: 1.55; } /* Big option cards (simple mode) */ .cr-big-card { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-lg); padding: 1.1rem 1.25rem; cursor: pointer; transition: border-color .15s, box-shadow .15s; display: flex; align-items: center; gap: .85rem; } .cr-big-card:hover { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); } .cr-big-card.is-selected { border-color: var(--accent); background: var(--accent-bg); } .cr-big-card__icon { font-size: 1.6rem; color: var(--accent); flex-shrink: 0; } .cr-big-card__title { font-size: .9rem; font-weight: 700; } .cr-big-card__desc { font-size: .78rem; color: var(--text-muted); margin-top: .1rem; line-height: 1.45; } /* ───────────────────────────────────────────────────────────────────────────── TABLE ───────────────────────────────────────────────────────────────────────────── */ .cr-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); } .cr-table { width: 100%; border-collapse: collapse; font-size: .82rem; } .cr-table thead { background: var(--surface-2); position: sticky; top: 0; z-index: 10; } .cr-table th { padding: .58rem .85rem; text-align: left; font-size: .71rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--border); white-space: nowrap; cursor: pointer; user-select: none; } .cr-table th:hover { color: var(--text); } .cr-table th.is-sorted { color: var(--accent-text); } .cr-table td { padding: .54rem .85rem; border-bottom: 1px solid var(--border); color: var(--text); vertical-align: middle; } .cr-table tbody tr:last-child td { border-bottom: none; } .cr-table tbody tr:hover td { background: var(--surface-2); } .cr-table td.cr-mono { font-family: var(--font-mono); font-size: .77rem; } /* ───────────────────────────────────────────────────────────────────────────── ADMIN LAYOUT (separate) ───────────────────────────────────────────────────────────────────────────── */ .cr-admin-layout { display: grid; grid-template-columns: 210px 1fr; flex: 1; overflow: hidden; } .cr-admin-nav { border-right: 1px solid var(--border); padding: .7rem .45rem; display: flex; flex-direction: column; gap: .12rem; background: var(--bg-raised); } .cr-admin-nav__section { font-size: .65rem; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .08em; padding: .5rem .65rem .2rem; margin-top: .35rem; } .cr-admin-nav__link { display: flex; align-items: center; gap: .45rem; padding: .42rem .65rem; border-radius: var(--radius-sm); font-size: .81rem; color: var(--text-muted); transition: background .1s, color .1s; } .cr-admin-nav__link:hover { background: var(--surface-2); color: var(--text); text-decoration: none; } .cr-admin-nav__link.is-active { background: var(--accent-bg); color: var(--accent-text); font-weight: 600; } .cr-admin-content { overflow-y: auto; padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem; } .cr-admin-row { display: flex; align-items: center; gap: .5rem; padding: .44rem .65rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); transition: border-color .1s; } .cr-admin-row:hover { border-color: var(--accent); } /* ───────────────────────────────────────────────────────────────────────────── MODALS ───────────────────────────────────────────────────────────────────────────── */ .cr-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 800; display: flex; align-items: center; justify-content: center; padding: 1rem; animation: cr-fade-in .15s ease; } @keyframes cr-fade-in { from { opacity: 0; } to { opacity: 1; } } .cr-modal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); width: 100%; max-width: 440px; box-shadow: var(--shadow-lg); animation: cr-pop-in .15s ease; } .cr-modal__header { display: flex; align-items: center; justify-content: space-between; padding: .9rem 1.1rem; border-bottom: 1px solid var(--border); } .cr-modal__header h2 { font-size: .92rem; font-weight: 700; margin: 0; } .cr-modal__body { padding: 1.1rem; } .cr-modal__footer { display: flex; justify-content: flex-end; gap: .5rem; padding: .8rem 1.1rem; border-top: 1px solid var(--border); } /* Auto-generate overlay (Generate folded into the Builder) */ .cr-gen-overlay { position: fixed; inset: 0; z-index: 810; animation: cr-fade-in .15s ease; } .cr-gen-overlay[hidden] { display: none; } .cr-gen-overlay__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); } .cr-gen-overlay__panel { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: min(960px, 94vw); height: min(88vh, 760px); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); animation: cr-pop-in .15s ease; overflow: hidden; } .cr-gen-overlay__head { display: flex; align-items: center; justify-content: space-between; padding: .7rem 1rem; border-bottom: 1px solid var(--border); flex-shrink: 0; } .cr-gen-overlay__head strong { font-size: .92rem; display: flex; align-items: center; gap: .4rem; } .cr-gen-overlay__body { flex: 1; min-height: 0; display: flex; } /* The panel supplies the height the two-pane generator layout expects. */ .cr-gen-overlay__body .cr-gen-layout { flex: 1; height: 100%; } @media (max-width: 860px) { .cr-gen-overlay__panel { width: 100vw; height: 100vh; border-radius: 0; top: 0; left: 0; transform: none; } } /* ───────────────────────────────────────────────────────────────────────────── MISC COMPONENTS ───────────────────────────────────────────────────────────────────────────── */ .cr-upload-area { border: 2px dashed var(--border); border-radius: var(--radius); padding: 2rem; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; display: flex; flex-direction: column; align-items: center; gap: .5rem; color: var(--text-faint); } .cr-upload-area:hover, .cr-upload-area.is-dragover { border-color: var(--accent); background: var(--accent-bg); color: var(--accent-text); } .cr-upload-area .ti { font-size: 2rem; } .cr-upload-area p { font-size: .82rem; } .cr-exam-soon { color: var(--danger); } .cr-exam-near { color: var(--warning); } .cr-exam-far { color: var(--success); } .cr-compare-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: 1rem; } .cr-compare-panel { display: flex; flex-direction: column; gap: .5rem; } .cr-compare-panel__label { font-size: .78rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; } [data-tooltip] { position: relative; } [data-tooltip]::before { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 5px); left: 50%; transform: translateX(-50%); padding: .28rem .55rem; background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: .7rem; color: var(--text); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .15s; z-index: 400; font-family: var(--font-sans); } [data-tooltip]:hover::before { opacity: 1; } /* Section status badges */ .cr-section-status { display: inline-flex; align-items: center; gap: .2rem; font-size: .6rem; font-weight: 600; padding: .1rem .3rem; border-radius: 999px; white-space: nowrap; } .cr-status--full { background: var(--danger-bg); border: 1px solid var(--danger); color: var(--danger); } .cr-status--nearly-full { background: var(--warning-bg); border: 1px solid var(--warning); color: var(--warning); } .cr-status--opened { background: var(--success-bg); border: 1px solid var(--success); color: var(--success); } /* Toast */ .cr-toast { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999; padding: .6rem 1rem; border-radius: var(--radius); font-size: .82rem; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-md); animation: cr-pop-in .2s ease; max-width: 320px; } .cr-toast--success { border-color: var(--success); color: var(--success); } .cr-toast--error { border-color: var(--danger); color: var(--danger); } .cr-toast--info { border-color: var(--info); color: var(--info); } /* Form row */ .cr-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; } /* Tabs */ .cr-tabs { display: flex; gap: .2rem; border-bottom: 1px solid var(--border); margin-bottom: 1rem; overflow-x: auto; scrollbar-width: none; } .cr-tabs::-webkit-scrollbar { display: none; } .cr-tab { display: flex; align-items: center; gap: .3rem; padding: .42rem .72rem; font-size: .8rem; font-weight: 500; color: var(--text-muted); background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; transition: color .12s, border-color .12s; margin-bottom: -1px; font-family: var(--font-sans); } .cr-tab:hover { color: var(--text); } .cr-tab.is-active { color: var(--accent-text); border-bottom-color: var(--accent); } /* Toggle label */ .cr-toggle-label { display: flex; align-items: center; gap: .35rem; font-size: .8rem; color: var(--text-muted); cursor: pointer; user-select: none; } .cr-toggle-label input { accent-color: var(--accent); } /* Profile / roadmap specific (from v2 additions) */ .cr-progress-track { height: 5px; background: var(--surface-2); border-radius: 999px; overflow: hidden; } .cr-progress-fill { height: 100%; background: var(--accent); border-radius: 999px; transition: width .5s ease; } /* ───────────────────────────────────────────────────────────────────────────── RESPONSIVE ───────────────────────────────────────────────────────────────────────────── */ @media (max-width: 900px) { .cr-gen-layout { grid-template-columns: 1fr; grid-template-rows: auto 1fr; } .cr-gen-form { border-right: none; border-bottom: 1px solid var(--border); } .cr-compare-layout { grid-template-columns: 1fr; } .cr-admin-layout { grid-template-columns: 1fr; } .cr-admin-nav { flex-direction: row; border-right: none; border-bottom: 1px solid var(--border); overflow-x: auto; } .cr-admin-nav__section { display: none; } .cr-form-row { grid-template-columns: 1fr; } } /* Mobile tabs: hidden by default, shown only on mobile */ .cr-mobile-tabs { display: none; } @media (max-width: 768px) { .cr-topbar__brand span { display: none; } .cr-builder { flex-direction: column; height: auto; } .cr-builder__sidebar { width: 100%; max-width: 100%; height: 45vh; border-right: none; border-bottom: 1px solid var(--border); } .cr-builder.mobile-grid-view .cr-builder__sidebar { display: none; } .cr-builder.mobile-courses-view .cr-builder__main { display: none; } /* Only one pane shows at a time here, so let it have the whole shell instead of stopping at 45vh and leaving dead space underneath. */ .cr-builder.mobile-courses-view .cr-builder__sidebar { height: auto; flex: 1; min-height: 0; border-bottom: none; } .cr-mobile-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); background: var(--bg-raised); flex-shrink: 0; } .cr-mobile-tab { flex: 1; padding: .6rem; border: none; background: transparent; color: var(--text-muted); font-size: .8rem; font-family: var(--font-sans); cursor: pointer; border-bottom: 2px solid transparent; transition: color .12s, border-color .12s; } .cr-mobile-tab.is-active { color: var(--accent-text); border-bottom-color: var(--accent); } } /* Touch ergonomics. Two rules of thumb on phones: - iOS Safari zooms the whole page when you focus a control under 16px, so every text control gets 16px here (the extra height is welcome anyway). - Topbar controls are icon-only at this width, which leaves them ~25px tall; pad them out to a thumb-sized target. */ @media (max-width: 768px) { /* Control font sizing is in the MOBILE TOPBAR block at the end of the file — per-page rules further down here would otherwise beat it. */ .cr-topbar__brand { padding: .5rem .2rem; } .cr-icon-btn { width: 40px; height: 40px; } .cr-user-btn { padding: .4rem .5rem .4rem .3rem; } .cr-tab { padding: .62rem .72rem; } .cr-mobile-tab { padding: .8rem .6rem; } /* Checkbox/radio labels: give the whole label a tappable band. */ .cr-toggle-label, .cr-fit-clashtoggle { padding: .3rem 0; } .cr-toggle-label input, .cr-fit-clashtoggle input { width: 18px; height: 18px; } } @media (max-width: 480px) { .cr-topbar { padding: 0 .75rem; } .cr-builder__main { padding: .55rem; } .cr-draft-bar { padding: .35rem .55rem; } } /* ───────────────────────────────────────────────────────────────────────────── ACCESSIBILITY ───────────────────────────────────────────────────────────────────────────── */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ─── MISSING COLOR VARIABLES (added to :root fallback) ─────────────────── */ :root, [data-theme='space'] { --color-green: #3dd68c; --color-red: #ff6b7a; --color-amber: #fbbf24; --color-purple: #c084fc; --accent-muted: rgba(108,143,255,.35); } [data-theme='paper'] { --color-green: #2a7a4b; --color-red: #c0231e; --color-amber: #a0620d; --color-purple: #6d3db5; --accent-muted: rgba(181,69,27,.35); } [data-theme='forest'] { --color-green: #4de88c; --color-red: #f76464; --color-amber: #f0b429; --color-purple: #c4a0f0; --accent-muted: rgba(116,201,74,.35); } [data-theme='ocean'] { --color-green: #22d3a0; --color-red: #f87171; --color-amber: #fbbf24; --color-purple: #a78bfa; --accent-muted: rgba(0,196,212,.35); } [data-theme='rose'] { --color-green: #16803c; --color-red: #b91c40; --color-amber: #92560a; --color-purple: #7c3aed; --accent-muted: rgba(214,54,120,.35); } [data-theme='slate'] { --color-green: #0e7a3a; --color-red: #c0222e; --color-amber: #8a6400; --color-purple: #9333ea; --accent-muted: rgba(91,105,240,.35); } /* ─── V2 ADDITIONS: profile, roadmap, electives ─────────────────────── */ /* ───────────────────────────────────────────────────────────────────────── Course Planner v2 additions These styles extend the existing main.css — append to bottom of that file. ───────────────────────────────────────────────────────────────────────── */ /* ── Nav: new items ────────────────────────────────────────────────────── */ .cr-topbar__nav .cr-nav-link { display: flex; align-items: center; gap: .3rem; padding: .35rem .55rem; border-radius: var(--radius-sm); font-size: .8rem; font-weight: 500; color: var(--text-muted); text-decoration: none; transition: background .15s, color .15s; white-space: nowrap; } .cr-topbar__nav .cr-nav-link:hover { background: var(--surface-2); color: var(--text); } .cr-topbar__nav .cr-nav-link.is-active { background: var(--accent-bg); color: var(--accent); } /* Phone sizing for these lives in the MOBILE TOPBAR block at the end. */ /* ── Profile page ──────────────────────────────────────────────────────── */ .cr-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; } @media (max-width: 540px) { .cr-form-row { grid-template-columns: 1fr; } } .cr-section-heading { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); display: flex; align-items: center; gap: .35rem; } .cr-field-hint { display: block; font-size: .7rem; color: var(--text-faint); margin-top: .2rem; } /* Completed course pills in profile */ .cr-completed-pill { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .5rem; border-radius: 999px; font-size: .73rem; font-family: var(--font-mono); border: 1px solid var(--border); background: var(--surface-2); cursor: pointer; transition: background .1s, border-color .1s, color .1s; user-select: none; } .cr-completed-pill:hover { border-color: var(--accent); } .cr-completed-pill.is-done { background: color-mix(in srgb, var(--color-green) 12%, transparent); border-color: var(--color-green); color: var(--color-green); } /* ── Roadmap page ──────────────────────────────────────────────────────── */ .cr-roadmap-header { display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: .75rem; } .cr-roadmap-stats { display: flex; gap: .75rem; flex-shrink: 0; } .cr-stat { text-align: center; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: .4rem .75rem; min-width: 64px; } .cr-stat__value { font-size: 1.15rem; font-weight: 700; line-height: 1.2; } .cr-stat__label { font-size: .65rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: .04em; } .cr-progress-track { height: 6px; background: var(--surface-2); border-radius: 999px; overflow: hidden; } .cr-progress-fill { height: 100%; background: var(--accent); border-radius: 999px; transition: width .5s ease; } /* Roadmap legend */ .cr-roadmap-legend { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; } .cr-rm-pill { display: inline-flex; align-items: center; gap: .25rem; padding: .15rem .45rem; border-radius: 999px; font-size: .7rem; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-muted); } .cr-rm-pill i { font-size: .75rem; } /* Semester grid */ .cr-roadmap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: .75rem; } .cr-sem-block { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .cr-sem-block.is-current { border-color: var(--accent); } .cr-sem-block.is-past { opacity: .85; } .cr-sem-block.is-future { opacity: .7; } .cr-sem-block__header { display: flex; justify-content: space-between; align-items: center; padding: .5rem .75rem; background: var(--surface-2); border-bottom: 1px solid var(--border); font-size: .75rem; font-weight: 600; } .cr-sem-label { font-size: .78rem; } .cr-sem-units { font-size: .7rem; color: var(--text-faint); } .cr-sem-courses { display: flex; flex-direction: column; gap: .35rem; padding: .6rem .6rem; } /* Course pill in roadmap */ .cr-course-pill { display: flex; align-items: center; gap: .4rem; padding: .35rem .5rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2); cursor: default; transition: border-color .15s, background .15s; min-width: 0; } [data-code] .cr-course-pill { cursor: pointer; } [data-code]:hover .cr-course-pill { border-color: var(--accent-muted); } .cr-course-pill i { font-size: .9rem; flex-shrink: 0; } .cr-course-pill__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .05rem; } .cr-course-pill__code { font-size: .73rem; font-weight: 600; font-family: var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cr-course-pill__name { font-size: .65rem; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cr-course-pill__units { font-size: .65rem; color: var(--text-faint); flex-shrink: 0; font-family: var(--font-mono); } .cr-course-pill__menu-btn { background: none; border: none; color: var(--text-faint); cursor: pointer; padding: .1rem .15rem; border-radius: var(--radius-sm); font-size: .85rem; flex-shrink: 0; opacity: 0; transition: opacity .1s; } [data-code]:hover .cr-course-pill__menu-btn { opacity: 1; } .cr-course-pill__menu-btn:hover { color: var(--text); background: var(--surface-3); } /* Pill status colours */ .rm-completed { background: color-mix(in srgb, var(--color-green) 10%, transparent); border-color: color-mix(in srgb, var(--color-green) 30%, transparent); } .rm-completed i { color: var(--color-green); } .rm-registered { background: color-mix(in srgb, var(--accent) 10%, transparent); border-color: color-mix(in srgb, var(--accent) 30%, transparent); } .rm-registered i { color: var(--accent); } .rm-upcoming { } .rm-elective { background: color-mix(in srgb, var(--color-purple, #9b59b6) 10%, transparent); border-color: color-mix(in srgb, var(--color-purple, #9b59b6) 30%, transparent); font-style: italic; } .rm-elective i { color: var(--color-purple, #9b59b6); } .rm-waived { opacity: .6; } .rm-pending-past { background: color-mix(in srgb, var(--color-amber, #f39c12) 10%, transparent); border-color: color-mix(in srgb, var(--color-amber, #f39c12) 30%, transparent); } .rm-pending-past i { color: var(--color-amber, #f39c12); } /* "Choose one" slot — sibling requirements satisfied by any one option */ .cr-choice-slot { border: 1px dashed var(--border); border-radius: var(--radius-sm); padding: .3rem .35rem .35rem; background: color-mix(in srgb, var(--accent) 4%, transparent); } .cr-choice-slot.is-done { border-style: solid; border-color: color-mix(in srgb, var(--color-green) 35%, transparent); } .cr-choice-slot__label { display: flex; align-items: center; gap: .3rem; font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-faint); padding: .05rem .15rem .3rem; } .cr-choice-slot__label i { font-size: .72rem; } .cr-choice-slot__options { display: flex; flex-direction: column; gap: .3rem; } /* Advisory (placeholder) tag on elective slots */ .cr-advisory-tag { font-size: .55rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; font-style: normal; color: var(--color-purple, #9b59b6); background: color-mix(in srgb, var(--color-purple, #9b59b6) 14%, transparent); border-radius: 999px; padding: .02rem .3rem; margin-left: .25rem; vertical-align: middle; } /* "Courses you've done" add box */ .cr-extra-add { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; } .cr-extra-add__search { position: relative; flex: 1; min-width: 200px; } .cr-extra-add #crExtraSem { flex: 0 0 auto; max-width: 100%; } .cr-extra-list { display: flex; flex-direction: column; gap: .35rem; } .cr-extra-item .cr-course-pill__menu-btn { opacity: .55; } .cr-extra-item:hover .cr-course-pill__menu-btn { opacity: 1; } .cr-extra-results { position: absolute; z-index: 850; top: calc(100% + .2rem); left: 0; right: 0; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,.25); max-height: 300px; overflow-y: auto; padding: .25rem; } .cr-extra-result { display: flex; align-items: center; gap: .5rem; width: 100%; text-align: left; background: none; border: none; cursor: pointer; color: var(--text); padding: .35rem .45rem; border-radius: var(--radius-sm); font-size: .78rem; } .cr-extra-result:hover { background: var(--surface-2); } .cr-extra-result__code { font-family: var(--font-mono); font-weight: 600; font-size: .72rem; flex-shrink: 0; min-width: 5.5rem; } .cr-extra-result__name { flex: 1; min-width: 0; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cr-extra-result__units { font-family: var(--font-mono); font-size: .68rem; color: var(--text-faint); flex-shrink: 0; } /* Profile "choose one" hint before a choice-group of completed toggles */ .cr-choice-hint { display: inline-flex; align-items: center; gap: .2rem; font-size: .62rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--text-faint); align-self: center; } .cr-choice-hint i { font-size: .72rem; } .cr-pill--choice { border-style: dashed; } /* ── Fit Finder ─────────────────────────────────────────────────────── */ /* Two-column: browse offered courses (left) + pool & results (right). */ .cr-fit-layout { display: flex; gap: 1rem; align-items: flex-start; } .cr-fit-browse { flex: 1.7; min-width: 0; } .cr-fit-side { flex: 1; min-width: 290px; max-width: 400px; position: sticky; top: .5rem; display: flex; flex-direction: column; gap: .8rem; } @media (max-width: 860px) { /* Stacked: align-items must stretch, or the panes size to max-content and spill past .cr-shell (overflow:clip), putting cards out of reach. */ .cr-fit-layout { flex-direction: column; align-items: stretch; } .cr-fit-browse, .cr-fit-side { width: 100%; min-width: 0; } .cr-fit-side { position: static; max-width: none; order: -1; } /* Copy that points at the pool has to follow it. */ .cr-when-wide { display: none; } } .cr-when-narrow { display: none; } @media (max-width: 860px) { .cr-when-narrow { display: inline; } } .cr-fit-browse__bar { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-bottom: .6rem; } .cr-fit-filter { margin-bottom: .7rem; } .cr-fit-pane__rule { display: flex; align-items: center; gap: .35rem; font-size: .74rem; color: var(--text-faint); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .4rem .55rem; margin-bottom: .6rem; } /* Browse cards — click to add/remove from the pool */ .cr-fit-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .45rem; } .cr-fit-card { display: flex; flex-direction: column; gap: .15rem; text-align: left; padding: .5rem .6rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); cursor: pointer; transition: border-color .12s, background .12s; font-family: var(--font-sans); color: var(--text); } .cr-fit-card:hover { border-color: var(--accent-muted, var(--accent)); } .cr-fit-card.is-added { border-color: color-mix(in srgb, var(--color-green, #4caf82) 55%, transparent); background: color-mix(in srgb, var(--color-green, #4caf82) 10%, transparent); } /* Overlaps CDC times but can still fit — amber flag */ .cr-fit-card.is-overlap { border-left: 3px solid var(--color-amber, #f39c12); background: color-mix(in srgb, var(--color-amber, #f39c12) 6%, transparent); } .cr-fit-card.is-overlap.is-added { border-left-color: var(--color-green, #4caf82); } .cr-fit-card__ov { font-size: .7rem; color: var(--color-amber, #f39c12); vertical-align: middle; } /* Never fits with the CDCs — shown dimmed/red when the hide toggle is off */ .cr-fit-card.is-impossible { border-color: color-mix(in srgb, var(--color-red, #e05260) 40%, transparent); background: color-mix(in srgb, var(--color-red, #e05260) 6%, transparent); opacity: .72; } .cr-fit-clashbar { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: .6rem; } .cr-fit-clashtoggle { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; color: var(--text-muted); cursor: pointer; } .cr-fit-legend { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; color: var(--text-faint); } .cr-fit-legend i { color: var(--color-amber, #f39c12); } /* Why "Repeat courses I've done" looks like it did nothing. */ .cr-fit-donehint { font-size: .72rem; color: var(--text-faint); font-style: italic; } .cr-fit-donehint[hidden] { display: none; } /* Anchor-time dot: same colour ≈ same meeting time (approximate, 12 hues) */ .cr-fit-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .3rem; vertical-align: middle; flex-shrink: 0; } .cr-fit-dot-c0 { background: #e05260; } .cr-fit-dot-c1 { background: #f39c12; } .cr-fit-dot-c2 { background: #4caf82; } .cr-fit-dot-c3 { background: #3b82f6; } .cr-fit-dot-c4 { background: #9b59b6; } .cr-fit-dot-c5 { background: #14b8a6; } .cr-fit-dot-c6 { background: #ec4899; } .cr-fit-dot-c7 { background: #d97706; } .cr-fit-dot-c8 { background: #6366f1; } .cr-fit-dot-c9 { background: #84cc16; } .cr-fit-dot-c10 { background: #06b6d4; } .cr-fit-dot-c11 { background: #a855f7; } /* Tap-to-highlight: what shares time with the focused course */ .cr-fit-browse.is-focusing .cr-fit-card.clash-dim { opacity: .3; } .cr-fit-card.is-clashfocus { outline: 2px solid var(--accent); outline-offset: 1px; } .cr-fit-card.clash-blocked { border-color: color-mix(in srgb, var(--color-red, #e05260) 55%, transparent); background: color-mix(in srgb, var(--color-red, #e05260) 12%, transparent); } .cr-fit-card.clash-shares { border-color: color-mix(in srgb, var(--color-amber, #f39c12) 55%, transparent); background: color-mix(in srgb, var(--color-amber, #f39c12) 12%, transparent); } .cr-fit-clashbanner { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; font-size: .76rem; color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .4rem .55rem; margin-bottom: .6rem; } .cr-fit-cl { display: inline-flex; align-items: center; font-size: .68rem; padding: .05rem .35rem; border-radius: 999px; margin-left: .3rem; } .cr-fit-cl--blocked { color: var(--color-red, #e05260); background: color-mix(in srgb, var(--color-red, #e05260) 14%, transparent); } .cr-fit-cl--shares { color: var(--color-amber, #f39c12); background: color-mix(in srgb, var(--color-amber, #f39c12) 14%, transparent); } .cr-fit-card__code { font-family: var(--font-mono); font-weight: 600; font-size: .74rem; } .cr-fit-card__name { font-size: .68rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cr-fit-card__meta { display: flex; align-items: center; gap: .3rem; margin-top: .15rem; } .cr-fit-card__units { font-family: var(--font-mono); font-size: .64rem; color: var(--text-faint); margin-right: auto; } .cr-fit-card__focus { background: none; border: none; padding: 0; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; color: var(--text-faint); cursor: pointer; font-size: .78rem; } .cr-fit-card__focus:hover { background: var(--surface-3); color: var(--accent); } .cr-fit-card.is-clashfocus .cr-fit-card__focus { color: var(--accent); } .cr-fit-card__add { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-3); color: var(--text-muted); font-size: .8rem; } .cr-fit-card.is-added .cr-fit-card__add { background: var(--color-green, #4caf82); color: #fff; } .cr-fit-card__menu { background: none; border: none; padding: 0; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; color: var(--text-faint); cursor: pointer; font-size: .8rem; } .cr-fit-card__menu:hover { background: var(--surface-3); color: var(--accent); } /* Browse-card charm folded in from the Elective Picker */ .cr-fit-card__done, .cr-fit-card__warn { margin-left: .2rem; vertical-align: middle; } .cr-fit-card__done { display: none; font-size: .72rem; color: var(--color-green, #4caf82); } .cr-fit-card.is-done .cr-fit-card__done { display: inline; } .cr-fit-card.is-done:not(.is-added) { border-color: color-mix(in srgb, var(--color-green, #4caf82) 35%, var(--border)); } .cr-fit-card__warn { font-size: .72rem; color: var(--color-amber, #f39c12); } .cr-fit-card.is-notoffered { opacity: .62; border-style: dashed; cursor: default; } .cr-fit-card.is-notoffered:hover { border-color: var(--border); } .cr-fit-card__tag { font-size: .58rem; color: var(--text-faint); border: 1px solid var(--border); border-radius: 999px; padding: .02rem .32rem; white-space: nowrap; } .cr-fit-filterbar { display: flex; align-items: center; gap: .5rem 1rem; flex-wrap: wrap; margin-bottom: .6rem; } .cr-fit-pane__none { display: flex; align-items: center; gap: .4rem; font-size: .76rem; color: var(--text-faint); padding: 1.2rem .5rem; } .cr-fit-prompt { font-size: .8rem; line-height: 1.5; padding: .6rem .7rem; border: 1px dashed var(--border); border-radius: var(--radius-sm); } .cr-fit-poolcard { padding: .8rem .9rem; } .cr-fit-pool { display: flex; flex-direction: column; gap: .35rem; margin-top: .5rem; } .cr-fit-row { display: flex; align-items: center; gap: .4rem; padding: .3rem .4rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); } .cr-fit-row__code { font-family: var(--font-mono); font-weight: 600; font-size: .72rem; flex-shrink: 0; } .cr-fit-row__name { flex: 1; min-width: 0; font-size: .68rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cr-fit-row__units { font-family: var(--font-mono); font-size: .66rem; color: var(--text-faint); flex-shrink: 0; } .cr-fit-grade { flex: 0 0 auto; width: auto; padding: .15rem 1.4rem .15rem .4rem; font-size: .68rem; } .cr-fit-row__rm { background: none; border: none; color: var(--text-faint); cursor: pointer; padding: .1rem; border-radius: var(--radius-sm); flex-shrink: 0; } .cr-fit-row__rm:hover { color: var(--text); background: var(--surface-3); } .cr-fit-budget { font-size: .74rem; color: var(--text-muted); margin-top: .5rem; } .cr-fit-over { color: var(--color-red, #e05260); font-weight: 600; } .cr-fit-card2 { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-1); padding: .8rem .9rem; } .cr-fit-card2--conflict { border-color: color-mix(in srgb, var(--color-red, #e05260) 45%, transparent); background: color-mix(in srgb, var(--color-red, #e05260) 7%, transparent); } .cr-fit-card2__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-weight: 700; font-size: .84rem; } .cr-fit-card2--conflict .cr-fit-card2__head { color: var(--color-red, #e05260); } .cr-fit-units { font-family: var(--font-mono); font-size: .72rem; color: var(--text-muted); font-weight: 600; } .cr-fit-units.is-over { color: var(--color-red, #e05260); } .cr-fit-tradeoff { font-size: .76rem; color: var(--text-muted); margin: .45rem 0 .1rem; display: flex; align-items: center; gap: .3rem; } .cr-fit-conflict-list { margin: .3rem 0 0 1.1rem; font-size: .82rem; display: flex; flex-direction: column; gap: .2rem; } .cr-fit-courses { display: flex; flex-direction: column; gap: .3rem; margin-top: .55rem; } .cr-fit-course { display: flex; align-items: center; gap: .45rem; font-size: .78rem; } .cr-fit-course__code { font-family: var(--font-mono); font-weight: 600; flex-shrink: 0; min-width: 5rem; } .cr-fit-course__name { flex: 1; min-width: 0; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cr-fit-course__secs { display: flex; gap: .2rem; flex-shrink: 0; } .cr-fit-sec { font-family: var(--font-mono); font-size: .62rem; padding: .05rem .3rem; border-radius: 999px; background: var(--surface-3); color: var(--text-muted); } .cr-fit-sec--none { font-family: var(--font-sans); font-style: italic; background: transparent; color: var(--text-faint); } /* Professor verdict on the section the Fit Finder picked. */ .cr-fit-sec--good { background: var(--success-bg); color: var(--success); } .cr-fit-sec--okay { background: var(--accent-bg); color: var(--accent-text); } .cr-fit-sec--bad { background: var(--warning-bg); color: var(--warning); } .cr-fit-course__units { font-family: var(--font-mono); font-size: .66rem; color: var(--text-faint); flex-shrink: 0; } .cr-fit-gdot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--text-faint); } .cr-fit-gdot--must { background: var(--accent); } .cr-fit-gdot--high { background: var(--color-green, #4caf82); } .cr-fit-gdot--medium { background: var(--color-amber, #f39c12); } .cr-fit-gdot--low { background: var(--text-faint); } .cr-fit-warnings { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .55rem; } .cr-fit-warn { font-size: .7rem; display: inline-flex; align-items: center; gap: .25rem; padding: .12rem .4rem; border-radius: 999px; color: var(--color-amber, #f39c12); background: color-mix(in srgb, var(--color-amber, #f39c12) 12%, transparent); } .cr-fit-excluded { margin-top: .6rem; border-top: 1px solid var(--border); padding-top: .5rem; } .cr-fit-excluded__title { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); margin-bottom: .3rem; } .cr-fit-left { display: flex; align-items: baseline; gap: .5rem; font-size: .75rem; padding: .1rem 0; } .cr-fit-left__code { font-family: var(--font-mono); font-weight: 600; min-width: 5rem; flex-shrink: 0; color: var(--text-muted); } .cr-fit-left__why { color: var(--text-faint); } .cr-fit-card2__foot { margin-top: .7rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .cr-fit-foot-note { font-size: .7rem; color: var(--text-faint); } /* Context menu */ .cr-context-menu { position: absolute; z-index: 900; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,.25); min-width: 190px; padding: .35rem; } .cr-context-menu__code { font-size: .7rem; font-weight: 700; font-family: var(--font-mono); color: var(--text-muted); padding: .2rem .45rem; text-transform: uppercase; } .cr-context-menu__item { display: flex; align-items: center; gap: .4rem; width: 100%; background: none; border: none; padding: .35rem .5rem; font-size: .78rem; color: var(--text); cursor: pointer; border-radius: var(--radius-sm); text-align: left; transition: background .1s; } .cr-context-menu__item:hover { background: var(--surface-2); } .cr-context-menu__item--clear { color: var(--text-muted); } /* ── Electives page ────────────────────────────────────────────────────── */ .cr-tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--border); margin-bottom: 1rem; overflow-x: auto; } .cr-tab { display: flex; align-items: center; gap: .35rem; padding: .45rem .75rem; font-size: .8rem; font-weight: 500; color: var(--text-muted); background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; transition: color .15s, border-color .15s; margin-bottom: -1px; } .cr-tab:hover { color: var(--text); } .cr-tab.is-active { color: var(--accent); border-bottom-color: var(--accent); } .cr-toggle-label { display: flex; align-items: center; gap: .35rem; font-size: .78rem; color: var(--text-muted); cursor: pointer; padding: .25rem .5rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); user-select: none; } .cr-toggle-label input { accent-color: var(--accent); } .cr-elec-progress { display: flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 500; padding: .3rem .65rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-muted); transition: all .2s; } .cr-elec-progress.is-done { background: color-mix(in srgb, var(--color-green) 12%, transparent); border-color: var(--color-green); color: var(--color-green); } .cr-elec-info-box { display: flex; gap: .6rem; align-items: flex-start; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: .65rem .85rem; font-size: .78rem; color: var(--text-muted); line-height: 1.55; margin-bottom: .85rem; } .cr-elec-info-box i { font-size: 1rem; flex-shrink: 0; margin-top: .05rem; } .cr-elec-info-box--warn { border-color: var(--color-amber, #f39c12); } .cr-elec-info-box a { color: var(--accent); } .cr-elec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .65rem; } .cr-elec-card { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); padding: .75rem; display: flex; flex-direction: column; gap: .35rem; transition: border-color .15s; } .cr-elec-card:hover { border-color: var(--accent-muted); } .cr-elec-card.is-done { border-color: color-mix(in srgb, var(--color-green) 40%, transparent); } .cr-elec-card.is-catalog { opacity: .75; } .cr-elec-card__header { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; min-height: 1.4rem; } .cr-elec-type-badge { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: .1rem .3rem; border-radius: 999px; } .cr-elec-type-badge.huel { background: color-mix(in srgb, #6366f1 15%, transparent); color: #818cf8; } .cr-elec-type-badge.del { background: color-mix(in srgb, #f59e0b 15%, transparent); color: #fbbf24; } .cr-elec-type-badge.opel { background: color-mix(in srgb, #10b981 15%, transparent); color: #34d399; } .cr-elec-offered-badge { font-size: .63rem; color: var(--color-green); display: flex; align-items: center; gap: .2rem; margin-left: auto; } .cr-elec-not-offered-badge { font-size: .63rem; color: var(--text-faint); margin-left: auto; } .cr-elec-done-badge { font-size: .63rem; color: var(--color-green); display: flex; align-items: center; gap: .2rem; background: color-mix(in srgb, var(--color-green) 12%, transparent); padding: .1rem .35rem; border-radius: 999px; } /* Title-first: the course name is the primary, most prominent line; the code and units are a quiet secondary row beneath it. The whole block links to the full course profile (sections, professors teaching it, evaluation …). */ .cr-elec-card__link { display: block; text-decoration: none; color: inherit; } .cr-elec-card__name { font-size: .95rem; font-weight: 600; line-height: 1.3; color: var(--text); /* Never let a long (or malformed) title balloon the card — cap at 2 lines. */ display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; } .cr-elec-card__link:hover .cr-elec-card__name { color: var(--accent-text); } .cr-elec-card__meta { display: flex; align-items: center; gap: .5rem; margin-top: .2rem; font-size: .72rem; color: var(--text-faint); } .cr-elec-card__code { font-family: var(--font-mono); font-weight: 600; color: var(--text-muted); } .cr-elec-card__units { color: var(--text-faint); } .cr-elec-card__go { margin-left: auto; opacity: 0; transition: opacity .15s; color: var(--accent-text); } .cr-elec-card__link:hover .cr-elec-card__go { opacity: 1; } .cr-elec-card__prereqs { font-size: .68rem; color: var(--color-amber, #f39c12); } .cr-elec-card__actions { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .2rem; } /* ── Spin animation for loading states ─────────────────────────────────── */ @keyframes cr-spin { to { transform: rotate(360deg); } } .cr-spin { display: inline-block; animation: cr-spin .6s linear infinite; } /* ── Profile banner ────────────────────────────────────────────────────── */ .cr-banner { display: flex; align-items: center; gap: .6rem; padding: .55rem .85rem; border-radius: var(--radius); font-size: .8rem; line-height: 1.5; } .cr-banner--info { background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); } .cr-banner--success { background: color-mix(in srgb, var(--color-green) 12%, transparent); border: 1px solid color-mix(in srgb, var(--color-green) 30%, transparent); } .cr-banner--warning { background: color-mix(in srgb, var(--color-amber, #f39c12) 12%, transparent); border: 1px solid color-mix(in srgb, var(--color-amber, #f39c12) 30%, transparent); } .cr-banner__body { flex: 1; min-width: 0; } .cr-banner__dismiss { background: none; border: none; color: var(--text-faint); cursor: pointer; font-size: 1rem; } /* ─── V3 ADDITIONS: presets, section status, admin, modals ─────────── */ /* ───────────────────────────────────────────────────────────────────────── Course Planner v3 CSS additions Append to bottom of main.css (after v2_additions.css) ───────────────────────────────────────────────────────────────────────── */ /* ── Preset grid ────────────────────────────────────────────────────────── */ .cr-preset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: .35rem; } .cr-preset-btn { display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: .5rem .35rem; background: var(--surface-2); border: 1.5px solid var(--border); border-radius: var(--radius); cursor: pointer; font-size: .7rem; font-weight: 500; color: var(--text-muted); transition: border-color .15s, background .15s, color .15s; text-align: center; line-height: 1.3; } .cr-preset-btn i { font-size: 1.1rem; } .cr-preset-btn:hover { border-color: var(--accent); color: var(--text); } .cr-preset-btn.is-active { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); } /* ── Section status badges ───────────────────────────────────────────────── */ .cr-section-status { display: inline-flex; align-items: center; gap: .2rem; font-size: .6rem; font-weight: 600; padding: .1rem .3rem; border-radius: 999px; white-space: nowrap; } .cr-status--full { background: color-mix(in srgb, #ef4444 15%, transparent); border: 1px solid #ef4444; color: #ef4444; } .cr-status--nearly-full { background: color-mix(in srgb, #f59e0b 15%, transparent); border: 1px solid #f59e0b; color: #f59e0b; } .cr-status--opened { background: color-mix(in srgb, var(--color-green) 15%, transparent); border: 1px solid var(--color-green); color: var(--color-green); } .cr-status--normal { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-faint); } /* ── Report section status button (in builder sidebar) ───────────────────── */ .cr-report-status-btn { display: inline-flex; align-items: center; gap: .2rem; font-size: .65rem; color: var(--text-faint); background: none; border: none; cursor: pointer; padding: .1rem .25rem; border-radius: var(--radius-sm); transition: color .1s; } .cr-report-status-btn:hover { color: var(--accent); } /* ── Admin rows ──────────────────────────────────────────────────────────── */ .cr-admin-row { display: flex; align-items: center; gap: .5rem; padding: .45rem .65rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); transition: border-color .1s; } .cr-admin-row:hover { border-color: var(--accent-muted); } /* ── Modal ───────────────────────────────────────────────────────────────── */ .cr-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 800; display: flex; align-items: center; justify-content: center; padding: 1rem; } .cr-modal { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); width: 100%; max-width: 440px; box-shadow: 0 16px 48px rgba(0,0,0,.4); } .cr-modal__header { display: flex; align-items: center; justify-content: space-between; padding: .85rem 1rem; border-bottom: 1px solid var(--border); } .cr-modal__header h2 { font-size: .9rem; font-weight: 700; margin: 0; } .cr-modal__body { padding: 1rem; } .cr-modal__footer { display: flex; justify-content: flex-end; gap: .5rem; padding: .75rem 1rem; border-top: 1px solid var(--border); } /* ── Phase rows in admin ─────────────────────────────────────────────────── */ .cr-phase-row { transition: background .2s; } .cr-phase-row.is-active { border-left: 3px solid var(--accent); } /* ── Gen result card ─────────────────────────────────────────────────────── */ .cr-gen-result-card { padding: .85rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-1); } .cr-gen-result-card:hover { border-color: var(--accent-muted); } /* ── Refit panel ─────────────────────────────────────────────────────────── */ .cr-refit-btn { font-size: .72rem; padding: .2rem .45rem; } /* ── Section status report popup (in builder) ────────────────────────────── */ .cr-status-popup { position: absolute; z-index: 700; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,.25); min-width: 220px; padding: .65rem .75rem; } .cr-status-popup h3 { font-size: .75rem; font-weight: 700; margin: 0 0 .45rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; } .cr-status-popup__disclaimer { font-size: .65rem; color: var(--text-faint); border-top: 1px solid var(--border); margin-top: .45rem; padding-top: .35rem; line-height: 1.4; } /* ── Phase plan select in generator ─────────────────────────────────────── */ .cr-phase-select { font-size: .72rem !important; } /* ── Generator result warnings ───────────────────────────────────────────── */ #validationWarnings .cr-banner { font-size: .78rem; } /* ─── cr-tab-panel (missing from all prior files) ───────────────────────── */ .cr-tab-panel { display: block; } .cr-tab-panel[hidden] { display: none; } /* ─── Admin nav section headers ─────────────────────────────────────────── */ .cr-admin-nav__section { font-size: .65rem; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .08em; padding: .5rem .65rem .2rem; margin-top: .35rem; } /* ─── Context menu absolute positioning ────────────────────────────────── */ .cr-context-menu { position: absolute; } /* ─── Spin utility ───────────────────────────────────────────────────────── */ @keyframes cr-spin-util { to { transform: rotate(360deg); } } .cr-spin { display: inline-block; animation: cr-spin-util .6s linear infinite; } /* ─── Draft name editable inline ────────────────────────────────────────── */ .cr-draft-name { display: inline-block; cursor: text; padding: .15rem .3rem; border-radius: var(--radius-sm); min-width: 40px; max-width: 220px; overflow: hidden; white-space: nowrap; font-size: .9rem; font-weight: 700; outline: none; border: 1.5px solid transparent; transition: border-color .12s, background .12s; } .cr-draft-name:hover { border-color: var(--border); background: var(--surface-2); } .cr-draft-name:focus { border-color: var(--accent); background: var(--surface); } /* ─── Campus select compact ──────────────────────────────────────────────── */ .cr-campus-select { width: auto; font-size: .8rem; padding: .3rem 1.8rem .3rem .6rem; } /* ─── Banner info/danger variants ───────────────────────────────────────── */ .cr-banner--info { background: var(--info-bg); border: 1px solid var(--info); color: var(--info); } .cr-banner--danger { background: var(--danger-bg); border: 1px solid var(--danger); color: var(--danger); } /* ─── Share/compare page ─────────────────────────────────────────────────── */ .cr-share-page { max-width: 900px; margin: 0 auto; padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; } .cr-share-page__header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .cr-share-page__title { font-size: 1.1rem; font-weight: 700; } .cr-compare-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: 1rem; } .cr-compare-panel { display: flex; flex-direction: column; gap: .5rem; } .cr-compare-panel__label { font-size: .78rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; } @media (max-width: 900px) { .cr-compare-layout { grid-template-columns: 1fr; } } /* ─── Generator page layout fix ─────────────────────────────────────────── */ .cr-gen-layout { display: grid; grid-template-columns: 310px 1fr; gap: 0; flex: 1; overflow: hidden; } .cr-gen-form { border-right: 1px solid var(--border); overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .7rem; background: var(--bg-raised); } .cr-gen-results { overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .75rem; } @media (max-width: 900px) { .cr-gen-layout { grid-template-columns: 1fr; grid-template-rows: auto 1fr; } .cr-gen-form { border-right: none; border-bottom: 1px solid var(--border); } } /* ─── Exam proximity colours ─────────────────────────────────────────────── */ .cr-exam-soon { color: var(--danger); } .cr-exam-near { color: var(--warning); } .cr-exam-far { color: var(--success); } /* ─── Table ──────────────────────────────────────────────────────────────── */ .cr-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); } .cr-table { width: 100%; border-collapse: collapse; font-size: .82rem; } .cr-table thead { background: var(--surface-2); position: sticky; top: 0; z-index: 10; } .cr-table th { padding: .58rem .85rem; text-align: left; font-size: .71rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--border); white-space: nowrap; cursor: pointer; user-select: none; } .cr-table th:hover { color: var(--text); } .cr-table th.is-sorted { color: var(--accent-text); } .cr-table td { padding: .54rem .85rem; border-bottom: 1px solid var(--border); color: var(--text); vertical-align: middle; } .cr-table tbody tr:last-child td { border-bottom: none; } .cr-table tbody tr:hover td { background: var(--surface-2); } .cr-table td.cr-mono { font-family: var(--font-mono); font-size: .77rem; } /* ─── Upload area ────────────────────────────────────────────────────────── */ .cr-upload-area { border: 2px dashed var(--border); border-radius: var(--radius); padding: 2rem; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; display: flex; flex-direction: column; align-items: center; gap: .5rem; color: var(--text-faint); } .cr-upload-area:hover, .cr-upload-area.is-dragover { border-color: var(--accent); background: var(--accent-bg); color: var(--accent-text); } .cr-upload-area .ti { font-size: 2rem; } /* ─── Mini grid (compare page) ───────────────────────────────────────────── */ .cr-grid--mini { grid-template-rows: 26px repeat(11, 46px); min-width: 460px; } .cr-grid--mini .cr-grid__header-cell { font-size: .65rem; } .cr-grid--mini .cr-grid__slot-label { font-size: .62rem; } .cr-grid--mini .cr-grid__slot-label small { font-size: .54rem; } .cr-grid--mini .cr-section-card__code { font-size: .58rem; } .cr-grid--mini .cr-section-card__section { font-size: .52rem; } /* ─── Repeater toggle ────────────────────────────────────────────────────── */ .cr-repeater-toggle, .cr-show-incompatible { display: flex; align-items: center; gap: .35rem; padding: .28rem .6rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); font-size: .78rem; font-family: var(--font-sans); cursor: pointer; transition: all .12s; white-space: nowrap; } .cr-repeater-toggle:hover, .cr-show-incompatible:hover { border-color: var(--warning); color: var(--warning); } .cr-repeater-toggle.is-active { background: var(--warning-bg); border-color: var(--warning); color: var(--warning); font-weight: 600; } .cr-show-incompatible.is-active { border-color: var(--border-strong); background: var(--surface-2); color: var(--text-muted); } /* ─── Error page ─────────────────────────────────────────────────────────── */ .cr-error-page { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; padding: 3rem; text-align: center; } .cr-error-page__code { font-size: 3.5rem; font-weight: 800; color: var(--text-faint); line-height: 1; } .cr-error-page__message { font-size: 1rem; color: var(--text-muted); } /* ── Admin supplement ───────────────────────────────────────────────────────── Variants used by the v3 admin panel that weren't in the base stylesheet. Added during the rebuild so the admin console is fully styled. */ .cr-banner--error { background: var(--danger-bg); border: 1px solid var(--danger); color: var(--danger); } /* Active-state toggle used in the courses admin (course/section on-off). */ .cr-toggle { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; user-select: none; font-size: .78rem; color: var(--text-muted); } .cr-toggle input { width: 34px; height: 18px; accent-color: var(--accent); cursor: pointer; } /* Compact inline input (e.g. the instructor field edited in place). */ .cr-input--inline { padding: .25rem .5rem; font-size: .78rem; height: auto; width: auto; min-width: 0; } /* Phases & limits tab. */ .cr-limits-form { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; } .cr-phase-label { max-width: 220px; } .cr-phase-start, .cr-phase-end { max-width: 180px; } /* ═════════════════════════════════════════════════════════════════════════════ COURSE_REG ENGINE BRIDGE Styles for markup emitted by this build's PHP/JS engine whose class names differ from the base template vocabulary. Token-based so all 6 themes work. ═════════════════════════════════════════════════════════════════════════════ */ /* Clash highlight on a grid cell (engine allows clashes from imports/backtrack) */ .cr-grid__cell.is-clash { background: var(--danger-bg); box-shadow: inset 0 0 0 1px var(--danger); } /* Builder controls: type filters + prereq toggle in the sidebar */ .cr-filter-row { display: flex; gap: .3rem; flex-wrap: wrap; padding: 0 .7rem .5rem; } .cr-filter { flex: 1; min-width: 0; padding: .28rem .35rem; font-size: .72rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text-muted); cursor: pointer; font-family: var(--font-sans); transition: all .1s; } .cr-filter:hover { border-color: var(--accent-muted, var(--accent)); color: var(--text); } .cr-filter.is-active { border-color: var(--accent); background: var(--accent-bg); color: var(--accent-text); } .cr-prereq-toggle { display: flex; align-items: center; gap: .4rem; cursor: pointer; padding: .1rem .7rem .6rem; font-size: .72rem; color: var(--text-muted); } .cr-prereq-toggle input { accent-color: var(--accent); } /* Volunteer fill-status report dropdown inside a section row */ .cr-report { font-size: .68rem; padding: .1rem .2rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2); color: var(--text-muted); cursor: pointer; flex-shrink: 0; } /* Units summary strip above the grid */ .cr-units-summary { display: flex; gap: .9rem; flex-wrap: wrap; align-items: center; font-size: .74rem; color: var(--text-muted); padding: .2rem 0 .5rem; } .cr-units-summary b { color: var(--text); font-family: var(--font-mono); } /* Notices stack (validation warnings) */ .cr-notices { display: flex; flex-direction: column; gap: .4rem; margin: .5rem 0; } .cr-notices:empty { display: none; } /* Generator result cards (simple-mode + generate page) */ .cr-section-title { font-size: .95rem; font-weight: 700; margin: 1rem 0 .6rem; } .cr-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .75rem; } .cr-result-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: .8rem; display: flex; flex-direction: column; gap: .5rem; transition: border-color .12s, box-shadow .12s; } .cr-result-card:hover { border-color: var(--accent-muted, var(--accent)); box-shadow: var(--shadow-sm); } .cr-result-card__head { display: flex; align-items: center; justify-content: space-between; } .cr-result-card__head h4 { font-size: .85rem; font-weight: 700; } .cr-result-card__list { list-style: none; display: flex; flex-direction: column; gap: .28rem; } .cr-result-card__list li { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: .76rem; } .cr-result-card__code { font-family: var(--font-mono); font-weight: 600; display: flex; align-items: center; gap: .3rem; } .cr-result-card__sec { color: var(--text-faint); font-weight: 500; } /* Generic muted text helper (used across engine markup) */ .cr-muted { color: var(--text-muted); } .cr-units-strip { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; font-size: .8rem; color: var(--text-muted); } .cr-units-strip b { color: var(--text); } /* Simple-mode pill (checkbox chip) */ .cr-pill { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; padding: .3rem .6rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-muted); } .cr-pill input { accent-color: var(--accent); } .cr-pill--reg { background: var(--accent-bg); border-color: var(--accent); color: var(--accent-text); } /* Content-page scaffolding (non-builder pages live inside a padded wrapper) */ .cr-page { padding: 1.1rem 1.25rem 3rem; max-width: 1180px; margin: 0 auto; width: 100%; } .cr-page--narrow { max-width: 760px; } .cr-page__head { margin-bottom: 1rem; } .cr-page__title { font-size: 1.35rem; font-weight: 750; letter-spacing: -.01em; display: flex; align-items: center; gap: .5rem; } .cr-page__sub { color: var(--text-muted); font-size: .85rem; margin-top: .25rem; } .cr-card--pad { padding: 1rem 1.15rem; } .cr-card + .cr-card { margin-top: .85rem; } .cr-card__title { font-size: .95rem; font-weight: 700; display: flex; align-items: center; gap: .45rem; margin-bottom: .7rem; } .cr-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .85rem; } .cr-field { display: flex; flex-direction: column; gap: .3rem; } .cr-field > label { font-size: .76rem; font-weight: 600; color: var(--text-muted); } .cr-search-row { margin-bottom: .5rem; } .cr-course-list { flex: 1; overflow-y: auto; } /* Generate page: removable chips, add-rows, avoid grid, 3-col field grid */ .cr-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .85rem; } .cr-chip { display: inline-flex; align-items: center; gap: .3rem; font-size: .75rem; font-weight: 600; font-family: var(--font-mono); padding: .2rem .3rem .2rem .55rem; border-radius: 999px; background: var(--accent-bg); color: var(--accent-text); border: 1px solid var(--accent); } .cr-chip-x { cursor: pointer; font-size: .85rem; opacity: .7; border-radius: 999px; } .cr-chip-x:hover { opacity: 1; background: var(--danger-bg); color: var(--danger); } .cr-gen-add { display: flex; align-items: center; gap: .45rem; padding: .44rem .6rem; border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: .22rem; background: var(--surface); cursor: pointer; transition: border-color .1s, background .1s; } .cr-gen-add:hover { border-color: var(--accent); background: var(--surface-2); } .cr-gen-add .cr-section-row__action { margin-left: auto; color: var(--accent); } .cr-avoid-grid { overflow-x: auto; } .cr-avoid { border-collapse: collapse; font-size: .68rem; font-family: var(--font-mono); } .cr-avoid th, .cr-avoid td { border: 1px solid var(--border); text-align: center; } .cr-avoid th { padding: .2rem .35rem; color: var(--text-muted); background: var(--surface-2); } .cr-avoid-cell { width: 30px; height: 22px; cursor: pointer; background: var(--surface); transition: background .1s; } .cr-avoid-cell:hover { background: var(--surface-2); } .cr-avoid-cell.is-avoided { background: var(--danger); } /* Roadmap: sem block bg fallback (--surface-1 not defined) + pill affordances */ .cr-sem-block { background: var(--surface); } .cr-course-pill[data-code] { cursor: pointer; } .cr-course-pill[data-code]:hover { border-color: var(--accent-muted, var(--accent)); } .rm-upcoming i { color: var(--text-faint); } /* --surface-1 alias (template references it but never defines it; resolve to the active theme's --surface at use-time regardless of which theme is set) */ [data-theme] { --surface-1: var(--surface); } /* Profile form: space stacked fields */ #crProfileForm .cr-field { margin-bottom: .8rem; } #crProfileForm .cr-grid-2 .cr-field { margin-bottom: 0; } .cr-compare-b .cr-section-card { filter: saturate(.85); } /* Admin panel: pad cards inside the content column + stats row layout */ .cr-admin-content .cr-card { padding: 1rem 1.15rem; } .cr-admin-content .cr-card + .cr-card { margin-top: 0; } .cr-stats { display: flex; flex-wrap: wrap; gap: .6rem; } .cr-stats .cr-stat { min-width: 100px; flex: 1 1 auto; } .cr-admin-content .cr-field { margin-bottom: .7rem; } .cr-admin-content form .cr-grid-2 .cr-field, .cr-admin-content form .cr-grid-3 .cr-field { margin-bottom: 0; } .cr-admin-content .cr-table { width: 100%; } /* ═════════════════════════════════════════════════════════════════════════════ MY TIMETABLES HUB ═════════════════════════════════════════════════════════════════════════════ */ .cr-tt-toolbar { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-bottom: 1.1rem; } .cr-tt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: .85rem; } .cr-tt-card { display: flex; flex-direction: column; gap: .7rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1rem 1.1rem; transition: border-color .15s, box-shadow .15s; } .cr-tt-card:hover { border-color: var(--accent-muted, var(--accent)); box-shadow: var(--shadow-sm); } .cr-tt-card.is-active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } .cr-tt-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; } .cr-tt-card__name { font-size: .95rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cr-tt-card__meta { font-size: .73rem; color: var(--text-muted); margin-top: .15rem; display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; } .cr-tt-card__meta .ti { font-size: .8rem; } .cr-tt-card__stats { display: flex; gap: 1rem; font-size: .75rem; color: var(--text-muted); } .cr-tt-card__stats b { color: var(--text); font-family: var(--font-mono); } .cr-tt-card__pills { display: flex; flex-wrap: wrap; gap: .3rem; min-height: 1.4rem; } .cr-tt-pill { font-size: .66rem; font-weight: 600; font-family: var(--font-mono); padding: .12rem .4rem; border-radius: 999px; border: 1px solid transparent; color: var(--text); border-left-width: 3px; } .cr-tt-card__foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; margin-top: auto; padding-top: .3rem; border-top: 1px solid var(--border); } .cr-tt-card__edited { font-size: .68rem; color: var(--text-faint); display: flex; align-items: center; gap: .25rem; } .cr-tt-card__actions { display: flex; gap: .2rem; align-items: center; margin-left: auto; } .cr-tt-card__actions .cr-icon-btn { width: 30px; height: 30px; } .cr-tt-card__actions .cr-tt-delete:hover { color: var(--danger); } /* Workload heatmap (builder) — per-day load bars + insight stats */ .cr-workload { display: flex; gap: 1.1rem; align-items: center; flex-wrap: wrap; padding: .45rem .1rem .55rem; border-bottom: 1px solid var(--border); flex-shrink: 0; } .cr-workload__chart { display: flex; gap: .3rem; align-items: flex-end; } .cr-workload__day { display: flex; flex-direction: column; align-items: center; gap: .2rem; width: 24px; } .cr-workload__bar { width: 100%; height: 32px; background: var(--surface-2); border-radius: var(--radius-sm); display: flex; align-items: flex-end; overflow: hidden; } .cr-workload__bar span { width: 100%; background: var(--accent); border-radius: var(--radius-sm) var(--radius-sm) 0 0; transition: height .25s ease; display: block; } .cr-workload__bar.is-peak span { background: var(--warning); } .cr-workload__bar.is-free { background: var(--success-bg); } .cr-workload__day small { font-size: .58rem; color: var(--text-faint); font-family: var(--font-mono); } .cr-workload__stats { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .74rem; color: var(--text-muted); } .cr-workload__stats b { color: var(--text); } .cr-workload__stats .ti { font-size: .85rem; margin-right: .12rem; color: var(--text-faint); } /* Back-to-dashboard control (far left of topbar) */ .cr-topbar__back { display: inline-flex; align-items: center; gap: .35rem; flex-shrink: 0; padding: .32rem .6rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text-muted); text-decoration: none; font-size: .82rem; font-weight: 500; font-family: var(--font-sans); transition: color .12s, border-color .12s, background .12s; } .cr-topbar__back:hover { color: var(--text); border-color: var(--border-strong); background: var(--surface-3); } .cr-topbar__back .ti { font-size: 1rem; } @media (max-width: 768px) { .cr-topbar__back span { display: none; } } /* ===================================================================== Course Finder tab (pages/courses.php) ===================================================================== */ /* --- search / browse landing --- */ .cr-course-search { position: relative; margin: .4rem 0 1rem; } .cr-course-search .ti { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: var(--text-faint); font-size: 1.1rem; pointer-events: none; } .cr-course-search .cr-input { width: 100%; padding-left: 2.4rem; font-size: 1rem; height: 3rem; } /* filter controls: course-type chips + "offered this sem" toggle + count */ .cr-cf-controls { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .6rem; margin-bottom: .55rem; } .cr-cf-chips { display: flex; flex-wrap: wrap; gap: .35rem; } .cr-cf-chip { padding: .3rem .72rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-1); color: var(--text-muted); font: inherit; font-size: .8rem; font-weight: 500; line-height: 1; cursor: pointer; transition: color .12s, border-color .12s, background .12s; } .cr-cf-chip:hover { color: var(--text); border-color: var(--border-strong); } .cr-cf-chip.is-active { background: var(--accent-bg); border-color: var(--accent); color: var(--accent-text); font-weight: 600; } .cr-cf-toggle { display: inline-flex; align-items: center; gap: .35rem; flex-shrink: 0; font-size: .82rem; color: var(--text-muted); cursor: pointer; user-select: none; } .cr-cf-toggle .ti { font-size: 1rem; color: var(--text-faint); } .cr-cf-toggle input { accent-color: var(--accent); } .cr-cf-count { margin: 0 0 .5rem; font-size: .8rem; color: var(--text-faint); } .cr-cf-list { display: flex; flex-direction: column; gap: .3rem; } .cr-cf-row { /* The whole catalog (~1300 rows) is in the DOM so filtering can be instant. Skip layout/paint for the rows that are off-screen — without this a phone renders a ~190,000px page on first paint. */ content-visibility: auto; contain-intrinsic-size: auto 42px; display: flex; align-items: center; gap: .8rem; padding: .6rem .8rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-1); text-decoration: none; color: var(--text); transition: border-color .12s, background .12s, transform .06s; } .cr-cf-row:hover { border-color: var(--accent); background: var(--surface-2); } .cr-cf-row:active { transform: translateY(1px); } /* Code leads as a quiet mono label; the name is the primary text; the "this sem" badge, type and units sit together on the right, chevron last. */ .cr-cf-row__code { flex-shrink: 0; font-family: var(--font-mono); font-weight: 600; color: var(--text-muted); } .cr-cf-row__name { flex: 1; min-width: 0; color: var(--text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cr-cf-row__tags { display: flex; align-items: center; gap: .45rem; flex-shrink: 0; font-size: .78rem; } .cr-cf-row__tags .ti { color: var(--text-faint); } .cr-cf-row__type { font-family: var(--font-mono); font-weight: 600; color: var(--text-faint); } .cr-cf-row__units { font-family: var(--font-mono); color: var(--text-muted); } .cr-cf-row__go { flex-shrink: 0; font-size: 1rem; color: var(--text-faint); } @media (max-width: 620px) { .cr-cf-row { flex-wrap: wrap; } .cr-cf-row__name { flex-basis: 100%; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; } .cr-cf-row__tags { flex-basis: 100%; } } /* --- full course profile --- */ .cr-back-link { display: inline-flex; align-items: center; gap: .3rem; color: var(--text-muted); text-decoration: none; font-size: .85rem; margin-bottom: .8rem; } .cr-back-link:hover { color: var(--text); } .cr-course-hero { display: flex; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap; padding: 1.2rem 1.3rem; margin-bottom: 1rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--accent-bg), var(--surface-1)); } .cr-course-hero__code { font-family: var(--font-mono); font-size: 1.05rem; color: var(--accent-text); font-weight: 700; letter-spacing: .02em; } .cr-course-hero__name { font-size: 1.5rem; margin: .15rem 0 .7rem; line-height: 1.2; overflow-wrap: anywhere; } .cr-course-hero__badges { display: flex; flex-wrap: wrap; gap: .4rem; } .cr-course-hero__aside { display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; flex-shrink: 0; } @media (max-width: 620px) { .cr-course-hero__aside { align-items: flex-start; } } .cr-course-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; } .cr-course-card--wide { grid-column: 1 / -1; } @media (max-width: 820px) { .cr-course-grid { grid-template-columns: 1fr; } } .cr-course-prose { color: var(--text-muted); line-height: 1.55; font-size: .9rem; margin: .2rem 0 .4rem; } .cr-course-subhead { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); margin: .8rem 0 .3rem; } .cr-course-hint { display: flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--text-muted); margin-top: .6rem; } .cr-course-hint .ti { color: var(--warning); } .cr-course-hint a { color: var(--accent-text); } .cr-course-prereqs { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .35rem; } .cr-course-prereqs li { display: flex; align-items: center; gap: .45rem; font-size: .88rem; } .cr-course-prereqs a { color: var(--text); text-decoration: none; font-family: var(--font-mono); } .cr-course-prereqs a:hover { color: var(--accent-text); text-decoration: underline; } .cr-course-prereqs .is-met .ti { color: var(--success); } .cr-course-prereqs .is-missing .ti { color: var(--text-faint); } .cr-course-prereqs .cr-muted { font-size: .74rem; } .cr-course-eval td, .cr-course-eval th { font-size: .86rem; } .cr-course-eval tfoot td { border-top: 2px solid var(--border-strong); } .cr-course-profs, .cr-course-resources { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .5rem; } .cr-course-profs li { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .88rem; } .cr-course-profs__name { font-weight: 600; } .cr-course-resources a { display: flex; align-items: center; gap: .5rem; color: var(--text); text-decoration: none; font-size: .88rem; padding: .4rem .55rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-1); } .cr-course-resources a:hover { border-color: var(--accent); background: var(--surface-2); } .cr-course-resources a .ti:first-child { color: var(--accent-text); font-size: 1.05rem; } .cr-course-resources a .cr-badge { margin-left: auto; } .cr-chip-row { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .3rem; } .cr-chip-row .cr-chip { padding-right: .55rem; font-weight: 500; } .cr-chip-row .cr-chip .cr-muted { font-weight: 400; } /* Course Finder — branch hint, "this sem" pill, colour-coded type badges */ .cr-cf-hint { display: flex; align-items: flex-start; gap: .5rem; margin: 0 0 .85rem; padding: .55rem .75rem; border: 1px solid color-mix(in srgb, #f59e0b 45%, var(--border)); border-radius: var(--radius-sm); background: color-mix(in srgb, #f59e0b 10%, transparent); color: var(--text-muted); font-size: .82rem; line-height: 1.45; } .cr-cf-hint .ti { color: #f59e0b; font-size: 1rem; flex-shrink: 0; margin-top: .1rem; } .cr-cf-hint a { color: var(--accent-text); font-weight: 600; } .cr-cf-offered { display: inline-flex; align-items: center; gap: .2rem; font-size: .66rem; font-weight: 600; letter-spacing: .02em; padding: .12rem .42rem; border-radius: 999px; background: color-mix(in srgb, #10b981 15%, transparent); color: #34d399; } .cr-cf-offered .ti { font-size: .8rem; } /* "You've already done this" — only visible while repeats are being shown. */ .cr-cf-done { display: inline-flex; align-items: center; gap: .2rem; font-size: .66rem; font-weight: 600; letter-spacing: .02em; padding: .12rem .42rem; border-radius: 999px; background: var(--surface-3); color: var(--text-muted); } .cr-cf-done .ti { font-size: .8rem; } .cr-cf-type { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: .12rem .42rem; border-radius: 999px; background: var(--surface-3); color: var(--text-muted); } .cr-cf-type--cdc { background: color-mix(in srgb, #3b82f6 15%, transparent); color: #60a5fa; } .cr-cf-type--huel { background: color-mix(in srgb, #6366f1 15%, transparent); color: #818cf8; } .cr-cf-type--del { background: color-mix(in srgb, #f59e0b 15%, transparent); color: #fbbf24; } .cr-cf-type--opel { background: color-mix(in srgb, #10b981 15%, transparent); color: #34d399; } .cr-cf-type--sc { background: color-mix(in srgb, #06b6d4 15%, transparent); color: #22d3ee; } .cr-cf-type--hss { background: color-mix(in srgb, #a855f7 15%, transparent); color: #c084fc; } /* ===================================================================== MOBILE TOPBAR The topbar is defined twice above (original + "v2 additions"), and the later, more specific `.cr-topbar__nav .cr-nav-link` set won. Phone rules for it live here, at the end, so there is one place to look. On a 390px screen, back + brand + 7 destinations + the action cluster do not fit on one line: `.cr-topbar__nav` is flex:1, so it collapsed to zero width and every destination but the current page became unreachable. Below 768px the nav gets its own full-width scrollable row underneath. ===================================================================== */ @media (max-width: 768px) { .cr-topbar { height: auto; min-height: 54px; flex-wrap: wrap; row-gap: 0; padding-top: .3rem; padding-bottom: 0; } .cr-topbar__nav { order: 10; flex: 1 0 100%; width: 100%; gap: .1rem; margin-top: .3rem; padding: .1rem 0 .25rem; border-top: 1px solid var(--border); overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; } /* Full row means the labels fit again — icons alone were ambiguous. */ /* min-height, not more padding: the nav row is already 40px, so the targets grow into it for free. */ .cr-topbar__nav .cr-nav-link { padding: .5rem .55rem; font-size: .85rem; scroll-snap-align: start; min-height: 40px; } .cr-topbar__nav .cr-nav-link span { display: inline; } /* Thumb-sized targets for the controls that stay on the top row. */ .cr-topbar__back { padding: .5rem .55rem; min-height: 40px; } /* The mode pill's label is the widest thing up there; without dropping it the action cluster wraps onto a third row. Icon + title carry it. */ .cr-mode-pill span { display: none; } .cr-mode-pill { padding: .5rem; gap: 0; } .cr-save-indicator:empty { display: none; } /* iOS Safari zooms the page when you focus a control under 16px. Listed here so this wins over the per-page control rules earlier in the file. */ .cr-input, .cr-select, textarea, .cr-input--inline, .cr-course-search .cr-input { font-size: 16px; } /* Per-card controls are 18px squares — fine for a cursor, not for a thumb. Adding to the pool is the whole point of the Fit Finder. */ .cr-fit-card__menu, .cr-fit-card__focus, .cr-fit-card__add { width: 30px; height: 30px; } .cr-course-pill__menu-btn { padding: .35rem .4rem; } } /* Touch devices have no hover, so anything revealed by :hover alone is simply undiscoverable there — the roadmap's per-course ⋯ menu was invisible. */ @media (hover: none) { .cr-course-pill__menu-btn { opacity: .55; } .cr-course-pill__menu-btn:active { opacity: 1; color: var(--text); } } /* ===================================================================== MOBILE TEXT FLOOR The design is deliberately dense and sizes almost everything in rem off a 15px root, which puts a whole tier of real content at 8–11px. That reads fine on a monitor and badly in a hand: Material's floor for caption text is 12sp and iOS's is ~11pt. Phones only — desktop density is intentional and already shipped. Two tiers rather than one flat floor, so the hierarchy survives. ===================================================================== */ @media (max-width: 768px) { /* Tier 1 — the micro tier (.55–.66rem, i.e. 8.3–9.9px). Badges, tags, unit counts: glanceable labels, but they still have to be legible. */ .cr-advisory-tag, .cr-cf-type, .cr-cf-offered, .cr-cf-done, .cr-course-pill__name, .cr-course-pill__units, .cr-section-card__section, .cr-fit-card__units, .cr-stat__label, .cr-tt-pill, .cr-choice-slot__label, .cr-choice-hint { font-size: .8rem; } /* Tier 2 — the small tier (.68–.78rem, i.e. 10.2–11.7px). This is where actual content lives, including Fit Finder course names and codes. */ .cr-badge, .cr-rm-pill, .cr-pill, .cr-field > label, .cr-sem-label, .cr-sem-units, .cr-section-card__code, .cr-course-pill__code, .cr-table th, .cr-grid__header-cell, .cr-fit-card__code, .cr-fit-card__name, .cr-fit-legend, .cr-fit-pane__rule, .cr-fit-budget, .cr-fit-clashtoggle, .cr-fit-donehint, .cr-filter, .cr-prereq-toggle, .cr-tt-card__meta, .cr-tt-card__edited, .cr-tt-card__stats, .cr-cf-row__tags, .cr-grid__slot-label, .cr-btn--sm { font-size: .88rem; } .cr-grid__slot-label small { font-size: .74rem; } /* .cr-avatar is deliberately left alone — it is a single initial sized to sit inside a fixed circle, not text you read. */ } /* ── Fit Finder: remembered pool ─────────────────────────────────────── */ .cr-fit-restored { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; font-size: .74rem; color: var(--text-faint); margin: 0 0 .5rem; } .cr-fit-linkbtn { background: none; border: none; padding: 0; cursor: pointer; font: inherit; color: var(--accent-text); text-decoration: underline; } .cr-fit-linkbtn:hover { color: var(--accent); } .cr-fit-loadfrom { margin-top: .7rem; padding-top: .7rem; border-top: 1px solid var(--border); } @media (max-width: 768px) { .cr-fit-restored { font-size: .82rem; } } /* Simple mode: pick which timetable is the active one (no draft tabs here). */ .cr-simple-ttpick { display: flex; align-items: center; gap: .5rem; margin: 0 0 .7rem; } .cr-simple-ttpick .cr-label { margin: 0; white-space: nowrap; } .cr-simple-ttpick .cr-select { width: auto; min-width: 12rem; max-width: 100%; } @media (max-width: 540px) { .cr-simple-ttpick { flex-direction: column; align-items: stretch; gap: .25rem; } .cr-simple-ttpick .cr-select { width: 100%; } } /* ── Builder sidebar: "In this timetable" ───────────────────────────── The sidebar used to show search results only, so after choosing courses there was nothing showing what you had, and swapping instructor meant searching the course up again. */ .cr-sidebar__mine { /* vh, not %: on phones the sidebar has no definite height, so a percentage never resolves and the panel grows to fit every course. */ flex-shrink: 0; max-height: 45vh; overflow-y: auto; padding: .35rem; border-bottom: 1px solid var(--border); background: var(--surface-1); } .cr-mine__head { display: flex; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); padding: .15rem .2rem .3rem; } .cr-mine__head .cr-muted { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 400; } .cr-mine__hint { font-size: .68rem; color: var(--text-faint); margin: 0 .2rem .35rem; } /* Chosen sections stay visible while collapsed; alternatives appear on open. */ .cr-course-item--mine .cr-course-item__sections { display: block; } .cr-mine__alts { display: none; } .cr-course-item--mine.is-expanded .cr-mine__alts { display: block; border-top: 1px solid var(--border); } .cr-mine__group { padding: .2rem 0 .1rem; } .cr-mine__grouplabel { display: block; font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); padding: .2rem .5rem .1rem; } .cr-mine__loading { font-size: .72rem; padding: .4rem .5rem; } .cr-mine__remove { width: 22px; height: 22px; font-size: .8rem; flex-shrink: 0; } .cr-section-row.is-chosen { background: var(--accent-bg); } .cr-section-row.is-chosen .cr-section-row__action { color: var(--accent); } @media (max-width: 768px) { .cr-sidebar__mine { max-height: 34vh; } .cr-mine__head { font-size: .8rem; } .cr-mine__hint { font-size: .78rem; } .cr-mine__grouplabel { font-size: .72rem; } } /* Search results: adding a course is the primary action, picking a specific section is the optional one underneath it. */ .cr-add-course { flex-shrink: 0; padding: .2rem .45rem; font-size: .68rem; gap: .2rem; } .cr-add-course.is-added { background: var(--success-bg); color: var(--success); border-color: var(--success); opacity: 1; } .cr-add-course[disabled] { cursor: default; } @media (max-width: 768px) { .cr-add-course { font-size: .78rem; padding: .45rem .6rem; min-height: 34px; } } /* A course added but with no section picked yet. */ .cr-course-item--mine.is-unpicked { border-color: var(--warning); } .cr-mine__pick { display: flex; align-items: center; gap: .35rem; width: 100%; padding: .45rem .55rem; border: none; background: var(--warning-bg); color: var(--warning); font: inherit; font-size: .72rem; cursor: pointer; text-align: left; } .cr-mine__pick:hover { filter: brightness(1.12); } @media (max-width: 768px) { .cr-mine__pick { font-size: .8rem; padding: .55rem; } } /* Courses with no timetabled sessions (projects, theses, capstones). */ .cr-mine__untimed { display: flex; align-items: flex-start; gap: .35rem; margin: 0; padding: .45rem .55rem; font-size: .72rem; color: var(--text-faint); } .cr-mine__untimed .ti { flex-shrink: 0; margin-top: .1rem; } .cr-course-item--mine.is-untimetabled .cr-course-item__chevron { display: none; } @media (max-width: 768px) { .cr-mine__untimed { font-size: .8rem; } } /* ===================================================================== BUILDER SIDEBAR — redesign Two stacked panels in a 275px column left everything cramped. The sidebar is now wider, split into two full-height panes, and the course rows are given room to breathe. ===================================================================== */ .cr-builder__sidebar { width: 330px; min-width: 300px; max-width: 380px; } .cr-sidebar__tabs { display: flex; flex-shrink: 0; border-bottom: 1px solid var(--border); background: var(--bg-raised); } .cr-sidebar__tab { flex: 1; display: flex; align-items: center; justify-content: center; gap: .35rem; padding: .7rem .5rem; border: none; background: none; cursor: pointer; font-family: var(--font-sans); font-size: .8rem; font-weight: 600; color: var(--text-muted); border-bottom: 2px solid transparent; transition: color .12s, border-color .12s, background .12s; } .cr-sidebar__tab:hover { color: var(--text); background: var(--surface-2); } .cr-sidebar__tab.is-active { color: var(--accent-text); border-bottom-color: var(--accent); } .cr-sidebar__tabcount { min-width: 1.25rem; padding: .05rem .3rem; border-radius: 999px; background: var(--surface-3); color: var(--text-muted); font-size: .68rem; font-family: var(--font-mono); } .cr-sidebar__tab.is-active .cr-sidebar__tabcount { background: var(--accent-bg); color: var(--accent-text); } /* Each pane owns the full remaining height instead of sharing it. */ .cr-sidebar__pane { display: none; flex: 1; min-height: 0; flex-direction: column; } .cr-sidebar__pane.is-active { display: flex; } .cr-sidebar__mine { max-height: none; flex: 1; border-bottom: none; background: transparent; padding: .5rem; } .cr-sidebar__emptymine { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; padding: 2.5rem 1rem; text-align: center; color: var(--text-faint); } .cr-sidebar__emptymine .ti { font-size: 1.8rem; opacity: .5; } .cr-sidebar__emptymine p { font-size: .84rem; margin: 0; } /* Roomier course rows. */ .cr-course-item { margin-bottom: .4rem; border-radius: var(--radius); } .cr-course-item__header { padding: .6rem .65rem; gap: .5rem; } .cr-course-item__code { font-size: .82rem; } .cr-course-item__name { font-size: .8rem; } .cr-course-item__count { font-size: .74rem; } .cr-section-row { padding: .5rem .65rem; gap: .5rem; } .cr-section-row__number { font-size: .8rem; } .cr-section-row__instructor { font-size: .76rem; } .cr-section-row__slots { font-size: .72rem; } .cr-mine__hint { font-size: .74rem; padding: 0 .2rem .1rem; } .cr-mine__grouplabel { font-size: .68rem; padding: .35rem .55rem .15rem; } /* Search side: give the controls air. */ .cr-sidebar__search-wrap { padding: .65rem; gap: .5rem; } .cr-filter-row { padding: 0 .65rem .1rem; } .cr-prereq-toggle { padding: .1rem .65rem .5rem; } .cr-sidebar__list { padding: .5rem; } /* Timetable check */ .cr-verify__lead { font-size: .84rem; color: var(--text-muted); margin: 0 0 .7rem; } .cr-verify__ok { display: flex; gap: .7rem; align-items: flex-start; padding: .35rem 0; } .cr-verify__ok .ti { font-size: 1.5rem; color: var(--success); flex-shrink: 0; } .cr-verify__ok p { margin: .2rem 0 0; font-size: .82rem; color: var(--text-muted); } .cr-verify__item { display: flex; align-items: center; gap: .55rem; padding: .6rem .7rem; margin-bottom: .4rem; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: .82rem; } .cr-verify__item .ti { flex-shrink: 0; } .cr-verify__item span { flex: 1; } .cr-verify__item--error { border-color: var(--danger); background: var(--danger-bg); } .cr-verify__item--error .ti { color: var(--danger); } .cr-verify__item--warn { border-color: var(--warning); background: var(--warning-bg); } .cr-verify__item--warn .ti { color: var(--warning); } .cr-verify__goto { flex-shrink: 0; } @media (max-width: 768px) { .cr-builder__sidebar { width: 100%; min-width: 0; max-width: 100%; } .cr-sidebar__mine { max-height: none; } .cr-sidebar__tab { font-size: .86rem; padding: .8rem .5rem; } .cr-verify__item { font-size: .88rem; } } /* Tapping the section you are on unselects it, so chosen rows stay clickable and swap their tick for a cross on hover. */ .cr-section-row.is-added { cursor: pointer; } .cr-sec-ico--off { display: none; } .cr-section-row.is-chosen:hover .cr-sec-ico--off { display: inline-block; color: var(--danger); } .cr-section-row.is-chosen:hover .cr-sec-ico--on { display: none; } .cr-section-row.is-added:hover { background: var(--danger-bg); } .cr-section-row.is-chosen:hover { background: var(--danger-bg); }