/* ============================================================ Athens Debate Student Portal — Slack-shaped shell + themes ============================================================ */ /* ============================================================ THEME = BORDER × FILL, set as data-border / data-fill on . Border = sidebar + top bar. Fill = everything else. Gold trim always. Each border defines: --b (main), --b-deep, --b-soft, --side-ink, --side-ink-2, --side-active, --side-hover, --accent-on-light, --accent-on-dark (the border's colour re-tuned for text on light/dark fills). Each fill defines: --body-bg, --card-bg, --cream-2, --ink, --ink-2, --line, --gold, and picks --accent from the border's on-light / on-dark value. To add a border or fill: copy a block and add a row to BORDERS / FILLS in js/app.js. ============================================================ */ /* derived / compatibility names (declared FIRST so a border block can override --side-trim / --side-bg) */ :root { --teal: var(--b); --teal-deep: var(--b-deep); --teal-soft: var(--b-soft); --side-bg: var(--b); --side-trim: var(--gold); --radius: 10px; } /* ---------- BORDERS ---------- */ :root, [data-border="teal"] { --b: #2a7f81; --b-deep: #1f6466; --b-soft: #3a9698; --side-ink: #eef6f6; --side-ink-2: #c4e0e0; --side-active: rgba(255,255,255,.18); --side-hover: rgba(255,255,255,.10); --accent-on-light: #23706f; --accent-on-dark: #4fb3b5; } [data-border="teal"] { --side-bg: var(--b-deep); } /* deeper than brand teal so sidebar text passes AA */ [data-border="dark-teal"] { --b: #143c3d; --b-deep: #0e2c2d; --b-soft: #1f6466; --side-ink: #e8f3f3; --side-ink-2: #8fbcbc; --side-active: rgba(255,255,255,.16); --side-hover: rgba(255,255,255,.08); --accent-on-light: #1f6466; --accent-on-dark: #4fb3b5; } [data-border="navy"] { --b: #1b2a4a; --b-deep: #121d33; --b-soft: #2c4270; --side-ink: #eef1f7; --side-ink-2: #aab5cc; --side-active: rgba(255,255,255,.14); --side-hover: rgba(255,255,255,.08); --accent-on-light: #2c4270; --accent-on-dark: #8fa7e0; } [data-border="evergreen"] { --b: #1f4d3a; --b-deep: #163829; --b-soft: #2f6b4f; --side-ink: #eef5ef; --side-ink-2: #b5cdbd; --side-active: rgba(255,255,255,.16); --side-hover: rgba(255,255,255,.09); --accent-on-light: #2f6b4f; --accent-on-dark: #7cc49c; } [data-border="slate"] { --b: #2f3a48; --b-deep: #232c38; --b-soft: #46546a; --side-ink: #f1f4f8; --side-ink-2: #aeb8c5; --side-active: rgba(255,255,255,.14); --side-hover: rgba(255,255,255,.08); --accent-on-light: #2b7cc1; --accent-on-dark: #7ab8ea; } /* Slack-inspired */ [data-border="aubergine"] { --b: #3f0e40; --b-deep: #2c0a2d; --b-soft: #611f69; --side-ink: #f3e9f3; --side-ink-2: #c9a9cb; --side-active: rgba(255,255,255,.16); --side-hover: rgba(255,255,255,.08); --accent-on-light: #611f69; --accent-on-dark: #d59be0; } [data-border="clementine"] { --b: #d2531f; --b-deep: #a63f14; --b-soft: #e8733f; --side-ink: #fff4ee; --side-ink-2: #f8cbb3; --side-active: rgba(0,0,0,.18); --side-hover: rgba(0,0,0,.10); --accent-on-light: #b5441a; --accent-on-dark: #f59a6b; } [data-border="banana"] { --b: #f2c744; --b-deep: #d8ad2c; --b-soft: #f7d873; --side-ink: #2d2a1e; --side-ink-2: #5c5330; --side-active: rgba(0,0,0,.14); --side-hover: rgba(0,0,0,.07); --accent-on-light: #7a5f00; --accent-on-dark: #f2c744; --side-trim: #5c4a00; /* gold-on-gold would vanish */ } [data-border="barbara"] { --b: #f7c6d9; --b-deep: #eaa9c4; --b-soft: #fbd9e6; --side-ink: #4a1f33; --side-ink-2: #7d4a62; --side-active: rgba(0,0,0,.10); --side-hover: rgba(0,0,0,.05); --accent-on-light: #b8336a; --accent-on-dark: #f4a3c4; --side-trim: #b8336a; } [data-border="mood-indigo"] { --b: #2e3a5c; --b-deep: #212a44; --b-soft: #3f4f80; --side-ink: #eef0f8; --side-ink-2: #aab3d3; --side-active: rgba(255,255,255,.14); --side-hover: rgba(255,255,255,.08); --accent-on-light: #3b4d8a; --accent-on-dark: #a4b4ee; } /* Accessibility palettes: Tritanopia (blue/yellow confusion) → charcoal + magenta cues; Protanopia & Deuteranopia (red/green confusion) → deep blue + orange cues. */ [data-border="tritanopia"] { --b: #1f1f1f; --b-deep: #111111; --b-soft: #3a3a3a; --side-ink: #f5f5f5; --side-ink-2: #b8b8b8; --side-active: rgba(255,255,255,.16); --side-hover: rgba(255,255,255,.08); --accent-on-light: #c2185b; --accent-on-dark: #f06292; --side-trim: #f06292; } [data-border="proto-deutero"] { --b: #1c0223; --b-deep: #12011a; --b-soft: #3a1650; /* matched to Slack's palette (screenshot) */ --side-ink: #f3ecf7; --side-ink-2: #b9a6c8; --side-active: rgba(255,255,255,.16); --side-hover: rgba(255,255,255,.08); --accent-on-light: #4a1f6b; --accent-on-dark: #c9a3e6; --side-trim: #f59e0b; /* orange cue: safe for red/green colour-blindness */ } /* ---------- FILLS ---------- */ :root, [data-fill="cream"] { --body-bg: #f7f3e8; --card-bg: #fffdf7; --cream-2: #efe9d9; --ink: #1f2a2b; --ink-2: #5a6667; --line: #d9d2c0; --accent: var(--accent-on-light); --accent-ink: #ffffff; --danger: #b23a3a; --ok: #2e7d4f; --gold: #c9a227; --gold-ink: #2a2200; --shadow: 0 1px 2px rgba(0,0,0,.06), 0 4px 14px rgba(0,0,0,.05); color-scheme: light; } [data-fill="sky"] { --body-bg: #f3f5f8; --card-bg: #ffffff; --cream-2: #e7ebf0; --ink: #1f262f; --ink-2: #5c6773; --line: #d3d9e1; --accent: var(--accent-on-light); --accent-ink: #ffffff; --danger: #b23a3a; --ok: #2e7d4f; --gold: #c9a227; --gold-ink: #2a2200; --shadow: 0 1px 2px rgba(20,30,50,.08), 0 4px 14px rgba(20,30,50,.06); color-scheme: light; } [data-fill="dark"] { --body-bg: #1a2221; --card-bg: #212b2a; --cream-2: #26302f; --ink: #eee9dc; --ink-2: #a9b3b0; --line: #34413f; --accent: var(--accent-on-dark); --accent-ink: #0f1c1c; --danger: #e98585; --ok: #6fcf97; --gold: #e3c65a; --gold-ink: #2a2200; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.35); color-scheme: dark; } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; } body { font-family: Montserrat, system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--body-bg); color: var(--ink); font-size: 15px; line-height: 1.45; } a { color: var(--accent); } .hidden { display: none !important; } button, input, select, textarea { font: inherit; } /* ---------- Buttons / inputs ---------- */ .btn { display: inline-flex; align-items: center; gap: .4em; padding: .55em 1.05em; border-radius: 8px; border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink); cursor: pointer; font-weight: 600; } .btn:hover { filter: brightness(1.07); } .btn.ghost { background: transparent; color: var(--accent); } .btn.danger { background: transparent; color: var(--danger); border-color: var(--danger); } .btn.sm { padding: .35em .75em; font-size: .9em; } .btn[disabled] { opacity: .55; cursor: default; } .input { width: 100%; padding: .6em .8em; border-radius: 8px; border: 1px solid var(--line); background: var(--card-bg); color: var(--ink); } .input:focus { outline: 2px solid var(--gold); outline-offset: 1px; } .btn:focus-visible, a:focus-visible, .side-item:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .field { margin-bottom: 1rem; } .field label { display: block; font-size: .85em; font-weight: 600; color: var(--ink-2); margin-bottom: .3em; } /* ---------- Login screen ---------- */ #login { min-height: 100%; display: grid; place-items: center; padding: 24px; background: linear-gradient(160deg, var(--teal-deep), var(--teal) 55%, var(--teal-soft)); } .login-card { width: min(420px, 100%); background: var(--card-bg); color: var(--ink); border-radius: 16px; padding: 32px 28px; box-shadow: var(--shadow); } .login-card h1 { margin: .2em 0 .1em; font-size: 1.5em; } .login-card p { margin: 0 0 1.2em; color: var(--ink-2); } .brand-mark { width: 48px; height: 48px; border-radius: 50%; background: var(--teal); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 1.4em; } .notice { padding: .7em .9em; border-radius: 8px; background: var(--cream-2); margin-top: 1em; } .notice.err { color: var(--danger); } /* ---------- App shell ---------- */ #app { display: grid; grid-template-columns: 200px 1fr; grid-template-rows: 100%; height: 100%; } .sidebar { font-size: 12px; /* sidebar base size (page body stays 15px) */ background: var(--side-bg); color: var(--side-ink); display: flex; flex-direction: column; border-right: 1px solid rgba(0,0,0,.15); overflow-y: auto; } .side-head { padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,.14); display: flex; align-items: center; justify-content: space-between; gap: 8px; } .side-head .ws { font-weight: 800; font-size: 13px; } .side-head .ws small { display: block; font-weight: 500; color: var(--side-ink-2); font-size: 10.5px; } /* child switcher (shown only when a parent has >1 student) */ .child-switch { padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,.14); } .child-switch select { width: 100%; padding: .5em .6em; border-radius: 8px; border: 1px solid rgba(255,255,255,.25); background: rgba(0,0,0,.18); color: var(--side-ink); } .side-group { padding: 12px 8px 4px; } .side-group h4 { margin: 0 8px 4px; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--side-ink-2); font-weight: 700; } .side-item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 7px; color: var(--side-ink); text-decoration: none; cursor: pointer; user-select: none; } .side-item:hover { background: var(--side-hover); } .side-item.on { background: var(--side-active); font-weight: 700; box-shadow: inset 3px 0 0 var(--side-trim); } .side-item .dot { margin-left: auto; min-width: 18px; height: 18px; padding: 0 6px; border-radius: 9px; background: var(--side-ink); color: var(--b-deep); font-size: 10px; font-weight: 800; display: grid; place-items: center; } .side-foot { margin-top: auto; padding: 10px 12px; border-top: 1px solid rgba(255,255,255,.14); font-size: 11px; } .side-foot .who { color: var(--side-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .side-foot .links { display: flex; gap: 12px; margin-top: 6px; } .side-foot a { color: var(--side-ink); cursor: pointer; text-decoration: underline; } .main { display: flex; flex-direction: column; min-width: 0; } .topbar { display: flex; align-items: center; gap: 12px; padding: 12px 20px; background: var(--side-bg); color: var(--side-ink); box-shadow: inset 0 -3px 0 var(--side-trim); } .topbar h2 { margin: 0; font-size: 1.15em; } .topbar .sub { color: var(--side-ink-2); font-size: .9em; } .topbar .sub a { color: var(--side-ink); } .topbar .menu-btn { color: var(--side-ink); border-color: var(--side-ink-2); background: transparent; } .topbar .spacer { flex: 1; } .menu-btn { display: none; } .content { padding: 20px; overflow-y: auto; flex: 1; } .content > section { max-width: 960px; } .card { background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); margin-bottom: 16px; } .card h3 { margin: 0 0 .6em; font-size: 1.05em; } .muted { color: var(--ink-2); } .empty { color: var(--ink-2); padding: 24px; text-align: center; } table.list { width: 100%; border-collapse: collapse; } table.list th, table.list td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); } table.list th { font-size: .8em; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); } .pill { display: inline-block; padding: .15em .6em; border-radius: 999px; font-size: .8em; font-weight: 700; background: var(--cream-2); color: var(--ink-2); } .pill.accent { background: var(--accent); color: var(--accent-ink); } .pill.gold { background: var(--gold); color: var(--gold-ink); } .stat-num { font-size: 2.4em; font-weight: 800; color: var(--gold); line-height: 1.2; text-shadow: 0 1px 0 rgba(0,0,0,.08); } /* theme picker */ .theme-row { display: flex; gap: 10px; flex-wrap: wrap; } .theme-chip { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px; border: 2px solid var(--line); cursor: pointer; background: var(--card-bg); } .theme-chip.on { border-color: var(--accent); } .theme-chip .sw { width: 34px; height: 22px; border-radius: 5px; overflow: hidden; display: flex; border: 1px solid var(--line); } .theme-chip .sw i { flex: 1; display: block; } .toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--body-bg); padding: .6em 1em; border-radius: 8px; box-shadow: var(--shadow); z-index: 50; } /* ---------- Mobile ---------- */ @media (max-width: 760px) { #app { grid-template-columns: 1fr; } .sidebar { position: fixed; inset: 0 auto 0 0; width: min(260px, 80vw); z-index: 40; transform: translateX(-100%); transition: transform .2s ease; box-shadow: 0 0 40px rgba(0,0,0,.4); } .sidebar.open { transform: none; } .menu-btn { display: inline-flex; } .content { padding: 14px; } } /* student detail (admin view of one student) */ .subtabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; flex-wrap: wrap; } .subtab { padding: 8px 14px; cursor: pointer; border-bottom: 2px solid transparent; color: var(--ink-2); font-weight: 600; } .subtab.on { color: var(--accent); border-bottom-color: var(--gold); } .crumb { color: var(--ink-2); font-size: .9em; margin-bottom: 8px; } .crumb a { cursor: pointer; } /* ---------- In-portal Google Doc viewer ---------- */ .doc-card { max-width: 860px; } .doc-view { overflow-wrap: anywhere; line-height: 1.5; max-width: 100%; padding: 0; } .doc-view img { max-width: 100%; height: auto; } .doc-view table { max-width: 100%; } .doc-view a { color: var(--accent); } [data-fill="dark"] .doc-view { background: #fffdf7; color: #1f2a2b; padding: 16px; border-radius: 8px; } /* docs are authored for light backgrounds */ .yt-embed { position: relative; width: 100%; max-width: 720px; aspect-ratio: 16 / 9; margin: 10px 0; border-radius: 8px; overflow: hidden; background: #000; } .yt-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }