:root { /* --- brand palette --- */ --brand-matcha:#b4a64b; --brand-velvet:#591e2a; --brand-monarch:#d2682b; --brand-pink-silk:#d6a6b1; --brand-moss:#464719; --brand-cornflower:#98a8d9; --brand-teal:#3f7d78; /* --- semantic (light) --- */ --bg:#f6f3ee; --panel:#ffffff; --border:#e6e0d6; --text:#241f1c; --muted:#786f66; --accent:var(--brand-teal); --accent-soft:rgba(63,125,120,.13); --heading:var(--brand-velvet); --focus:var(--brand-monarch); --header-bg:var(--brand-velvet); --header-fg:#f6ecee; --header-sub:var(--brand-pink-silk); --art-bg:rgba(70,71,25,.13); --art-fg:#41421a; --lang-bg:rgba(152,168,217,.22); --lang-fg:#37477c; --shadow:0 1px 3px rgba(0,0,0,.07); } /* --- dark palette --- Applied in two cases: the OS prefers dark AND the user hasn't forced light, OR the user explicitly chose dark via the header toggle (data-theme="dark"). The theme toggle sets data-theme on ; "system" removes it. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg:#1a1512; --panel:#221b17; --border:#372e27; --text:#ece3da; --muted:#a89b8e; --accent:#69aca5; --accent-soft:rgba(105,172,165,.16); --heading:var(--brand-pink-silk); --focus:#e07a3f; --header-bg:#3a141c; --header-fg:#f0e0e3; --header-sub:var(--brand-pink-silk); --art-bg:rgba(180,166,75,.18); --art-fg:#c9ba60; --lang-bg:rgba(152,168,217,.16); --lang-fg:#aab8e0; --shadow:0 1px 3px rgba(0,0,0,.45); } } :root[data-theme="dark"] { --bg:#1a1512; --panel:#221b17; --border:#372e27; --text:#ece3da; --muted:#a89b8e; --accent:#69aca5; --accent-soft:rgba(105,172,165,.16); --heading:var(--brand-pink-silk); --focus:#e07a3f; --header-bg:#3a141c; --header-fg:#f0e0e3; --header-sub:var(--brand-pink-silk); --art-bg:rgba(180,166,75,.18); --art-fg:#c9ba60; --lang-bg:rgba(152,168,217,.16); --lang-fg:#aab8e0; --shadow:0 1px 3px rgba(0,0,0,.45); } * { box-sizing:border-box; } body { margin:0; font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; background:var(--bg); color:var(--text); height:100vh; display:flex; flex-direction:column; } header { background:var(--header-bg); color:var(--header-fg); padding:11px 20px; display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; } header h1 { font-size:16px; margin:0; font-weight:680; letter-spacing:.2px; } header h1::before { content:"◧ "; color:var(--brand-monarch); } header .sem { color:var(--header-sub); font-size:13px; font-weight:500; } .toolbar { background:var(--panel); border-bottom:1px solid var(--border); box-shadow:var(--shadow); padding:10px 20px; display:flex; gap:9px; align-items:center; flex-wrap:wrap; z-index:2; } input, select { font:inherit; padding:8px 11px; border:1px solid var(--border); border-radius:9px; background:var(--bg); color:var(--text); } input::placeholder { color:var(--muted); } input:focus, select:focus { outline:none; border-color:var(--focus); box-shadow:0 0 0 3px color-mix(in srgb, var(--focus) 22%, transparent); } #q { flex:1; min-width:230px; } .count { color:var(--muted); font-size:13px; white-space:nowrap; margin-left:auto; } .count b { color:var(--focus); font-weight:650; } main { flex:1; display:flex; min-height:0; } #list { width:44%; max-width:600px; overflow-y:auto; border-right:1px solid var(--border); background:var(--panel); } .row { padding:9px 18px; border-bottom:1px solid var(--border); cursor:pointer; border-left:3px solid transparent; } .row:hover { background:var(--accent-soft); } .row.active { background:var(--accent-soft); border-left-color:var(--accent); } .row .nr { color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums; } .row .titel { font-weight:560; margin:1px 0; } .row .meta { color:var(--muted); font-size:12px; } .badge { display:inline-block; border-radius:5px; padding:1px 7px; font-size:11px; margin-left:6px; vertical-align:middle; font-weight:600; } .badge.art { background:var(--art-bg); color:var(--art-fg); } .badge.lang { background:var(--lang-bg); color:var(--lang-fg); } .badge.sem { background:var(--accent-soft); color:var(--accent); margin-left:0; letter-spacing:.02em; } .more { padding:12px 18px; color:var(--muted); font-size:13px; } #detail { flex:1; overflow-y:auto; padding:24px 30px; } #detail .empty { color:var(--muted); margin-top:60px; text-align:center; } #detail h2 { margin:0 0 3px; font-size:21px; line-height:1.25; } #detail .subnr { color:var(--muted); margin-bottom:18px; } #detail .subnr .mono { color:var(--accent); font-weight:600; } .grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:11px 22px; margin:0 0 22px; } .grid .k { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); } .grid .v { font-weight:550; margin-top:1px; } section.block { margin-bottom:24px; } section.block > h3 { font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--heading); border-bottom:2px solid var(--accent-soft); padding-bottom:5px; margin:0 0 11px; font-weight:700; } .text { white-space:pre-wrap; background:var(--bg); border:1px solid var(--border); border-radius:9px; padding:11px 13px; } .field-label { font-weight:650; color:var(--heading); margin:13px 0 4px; } .field-label:first-child { margin-top:0; } ul.pers { margin:0; padding-left:18px; } ul.pers li { margin:1px 0; } table { border-collapse:collapse; width:100%; font-size:13px; } th, td { text-align:left; padding:6px 10px; border-bottom:1px solid var(--border); vertical-align:top; } th { color:var(--muted); font-weight:650; font-size:11px; text-transform:uppercase; letter-spacing:.03em; } tbody tr:hover { background:var(--accent-soft); } .mono { font-variant-numeric:tabular-nums; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; } .muted { color:var(--muted); } @media (max-width:760px) { main { flex-direction:column; } #list { width:100%; max-width:none; height:45%; border-right:none; border-bottom:1px solid var(--border); } } /* --- header nav --- */ header nav { display:flex; gap:4px; } header nav a { color:var(--header-fg); opacity:.72; text-decoration:none; font-size:13px; font-weight:550; padding:3px 11px; border-radius:7px; } header nav a:hover { opacity:1; background:rgba(255,255,255,.10); } header nav a.active { opacity:1; color:#fff; background:rgba(255,255,255,.17); } header .sem { margin-left:auto; } /* --- analysis page --- */ .toolbar label.ctl { display:flex; flex-direction:column; gap:3px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); } .toolbar label.ctl select { text-transform:none; letter-spacing:0; font-weight:400; color:var(--text); } .analysis { flex:1; overflow-y:auto; padding:22px 26px; } .analysis-note { margin:-12px 0 20px; font-size:12.5px; max-width:760px; } .analysis-note[hidden] { display:none; } .kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-bottom:24px; } .kpi { background:var(--panel); border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:11px; padding:13px 16px; box-shadow:var(--shadow); } .kpi-v { font-size:26px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.02em; line-height:1.1; } .kpi-k { color:var(--muted); font-size:12px; margin-top:3px; } .tablewrap { overflow-x:auto; } .analysis-table { border-collapse:collapse; width:100%; font-size:13px; } .analysis-table th, .analysis-table td { padding:7px 12px; border-bottom:1px solid var(--border); text-align:left; white-space:nowrap; } .analysis-table thead th { color:var(--muted); font-size:11px; font-weight:650; text-transform:uppercase; letter-spacing:.04em; } .analysis-table td.num, .analysis-table th.num { text-align:right; font-variant-numeric:tabular-nums; } .analysis-table .rank { text-align:right; width:34px; color:var(--muted); font-variant-numeric:tabular-nums; } .analysis-table .grp { font-weight:550; max-width:360px; white-space:normal; } .analysis-table .sel { background:var(--accent-soft); color:var(--text); font-weight:650; } .analysis-table tbody tr:hover { background:var(--accent-soft); } .analysis-table tfoot td { border-top:2px solid var(--border); border-bottom:none; font-weight:700; } .barcol { width:34%; min-width:130px; } .bar { height:11px; min-width:2px; background:var(--accent); border-radius:0 4px 4px 0; } .loaderr { padding:22px; color:var(--focus); font-weight:550; } /* --- teacher profile page (/lehrende) + profile links elsewhere --- */ .plink { color:var(--accent); text-decoration:none; font-weight:550; } .plink:hover { text-decoration:underline; } .backlink { margin:0 0 16px; font-size:13px; } .backlink a { color:var(--muted); text-decoration:none; } .backlink a:hover { color:var(--accent); } .profile-name { font-size:24px; margin:0 0 18px; color:var(--heading); line-height:1.2; } .profile-title { color:var(--muted); font-weight:600; } #profile .empty { color:var(--muted); margin-top:50px; text-align:center; } .profile-table { border-collapse:collapse; width:100%; font-size:13px; } .profile-table th, .profile-table td { padding:7px 11px; border-bottom:1px solid var(--border); text-align:left; vertical-align:top; } .profile-table thead th { color:var(--muted); font-size:11px; font-weight:650; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; } .profile-table td.num, .profile-table th.num { text-align:right; font-variant-numeric:tabular-nums; } .profile-table tbody tr:hover { background:var(--accent-soft); } .profile-table.courses .rowtags { margin:0; } /* --- buttons --- */ .btn { font:inherit; padding:8px 13px; border:1px solid var(--border); border-radius:9px; background:var(--accent); color:#fff; cursor:pointer; font-weight:600; } .btn:hover:not(:disabled) { filter:brightness(1.06); } .btn:disabled { background:var(--panel); color:var(--muted); cursor:not-allowed; } .icon-btn { font:inherit; font-size:16px; line-height:1; width:32px; height:32px; padding:0; border:1px solid rgba(255,255,255,.28); border-radius:8px; cursor:pointer; background:rgba(255,255,255,.10); color:var(--header-fg); } .icon-btn:hover { background:rgba(255,255,255,.20); } header .sem { margin-left:auto; } /* keep semester summary right-aligned */ header #theme-toggle { margin-left:8px; } /* --- tag chips --- */ .chip { display:inline-flex; align-items:center; gap:5px; margin:0 6px 6px 0; padding:3px 4px 3px 9px; border-radius:20px; font-size:12px; font-weight:600; line-height:1.4; color:var(--c); border:1px solid color-mix(in srgb, var(--c) 45%, transparent); background:color-mix(in srgb, var(--c) 15%, transparent); } .chip-x { border:none; background:none; color:inherit; cursor:pointer; font-size:15px; line-height:1; padding:0 4px; border-radius:50%; opacity:.7; } .chip-x:hover { opacity:1; background:color-mix(in srgb, var(--c) 30%, transparent); } .chip.mini { margin:4px 4px 0 0; padding:1px 8px; font-size:10.5px; font-weight:600; } a.chip { text-decoration:none; } a.chip:hover { background:color-mix(in srgb, var(--c) 26%, transparent); } .rowtags { display:flex; flex-wrap:wrap; } #detail .tags { margin-bottom:10px; } .tagadd { display:flex; gap:8px; } .tagadd input { flex:1; max-width:340px; } /* --- button variants (used on Tags + API pages) --- */ .btn.small { padding:5px 10px; font-size:12px; font-weight:600; border-radius:8px; text-decoration:none; display:inline-block; } .btn.ghost { background:var(--panel); color:var(--accent); border-color:var(--border); } .btn.ghost:hover { background:var(--accent-soft); } .btn.danger { background:var(--panel); color:var(--brand-monarch); border-color:var(--border); } .btn.danger:hover { background:color-mix(in srgb, var(--brand-monarch) 14%, transparent); } /* --- scrollable content pages (Tags, API) --- */ .page { flex:1; overflow-y:auto; padding:24px 30px; } /* The API docs use the full page width (the endpoint table + curl examples read better wide); only the intro paragraph keeps a comfortable reading measure. */ .page.docs { max-width:none; } /* --- Tags page --- */ .tags-table { border-collapse:collapse; width:100%; max-width:820px; font-size:14px; } .tags-table th, .tags-table td { padding:9px 12px; border-bottom:1px solid var(--border); text-align:left; vertical-align:middle; } .tags-table th { color:var(--muted); font-size:11px; font-weight:650; text-transform:uppercase; letter-spacing:.04em; } .tags-table td.num, .tags-table th.num { text-align:right; font-variant-numeric:tabular-nums; width:70px; } .tags-table .actions { display:flex; gap:7px; flex-wrap:wrap; justify-content:flex-end; } .tags-table tbody tr:hover { background:var(--accent-soft); } #empty { color:var(--muted); margin-top:26px; max-width:520px; } /* --- API docs page --- */ .docs .lead { font-size:15px; color:var(--text); max-width:760px; margin:0 0 20px; } .docs h2 { font-size:14px; text-transform:uppercase; letter-spacing:.05em; color:var(--heading); border-bottom:2px solid var(--accent-soft); padding-bottom:5px; margin:30px 0 14px; } .baseurl { display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:11px 14px; box-shadow:var(--shadow); } .baseurl .k { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:650; } .baseurl code { font-size:14px; color:var(--accent); font-weight:600; } .api-table { border-collapse:collapse; width:100%; font-size:13px; } .api-table th, .api-table td { padding:8px 11px; border-bottom:1px solid var(--border); text-align:left; vertical-align:top; } .api-table th { color:var(--muted); font-size:11px; font-weight:650; text-transform:uppercase; letter-spacing:.04em; } .api-table td.mono { white-space:nowrap; } .api-table code { background:var(--accent-soft); padding:0 4px; border-radius:4px; } .method { display:inline-block; font-size:11px; font-weight:700; padding:2px 8px; border-radius:6px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.03em; } .method.get { background:var(--lang-bg); color:var(--lang-fg); } .method.post { background:var(--art-bg); color:var(--art-fg); } .method.patch { background:var(--accent-soft); color:var(--accent); } .method.del { background:color-mix(in srgb, var(--brand-monarch) 20%, transparent); color:var(--brand-monarch); } pre.code { background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:13px 15px; overflow-x:auto; font-size:12.5px; line-height:1.55; box-shadow:var(--shadow); } pre.code code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; } /* --- login page --- */ body.login-body { justify-content:center; align-items:center; padding:20px; } /* Opt out of the generic `main { flex:1; display:flex }` rule, which would make this main fill the full-height column body and stretch the card to match. */ main.login { flex:none; display:block; width:100%; max-width:360px; } .login-card { background:var(--panel); border:1px solid var(--border); border-top:3px solid var(--accent); border-radius:14px; box-shadow:var(--shadow); padding:26px 26px 24px; display:flex; flex-direction:column; gap:10px; } .login-card h1 { font-size:19px; margin:0; color:var(--heading); } .login-card h1::before { content:"◧ "; color:var(--brand-monarch); } .login-card p.muted { margin:0 0 8px; font-size:13px; } .login-label { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:650; } .login-card input[type=password] { width:100%; } .login-card .btn { margin-top:6px; } .login-error { margin:0; color:var(--focus); font-size:13px; font-weight:600; } /* --- logout control in the header (a form so logout is a POST) --- */ .logout-form { margin-left:auto; display:flex; } .logout-btn { font:inherit; font-size:13px; font-weight:550; color:var(--header-fg); opacity:.72; background:none; border:none; cursor:pointer; padding:3px 11px; border-radius:7px; } .logout-btn:hover { opacity:1; background:rgba(255,255,255,.10); } /* --- API tokens panel (API docs page) --- */ .tokens-actions { display:flex; gap:9px; align-items:center; flex-wrap:wrap; margin:2px 0 14px; } .tokens-actions input { flex:1; max-width:280px; } .token-new { background:var(--accent-soft); border:1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius:10px; padding:12px 14px; margin:0 0 16px; } .token-new .k { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--heading); font-weight:700; display:block; margin-bottom:6px; } .token-new .val { display:flex; gap:9px; align-items:center; flex-wrap:wrap; } .token-new code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px; background:var(--panel); border:1px solid var(--border); border-radius:7px; padding:7px 10px; word-break:break-all; flex:1; min-width:200px; } .token-new .hint { margin:8px 0 0; font-size:12px; color:var(--muted); } .tokens-table { border-collapse:collapse; width:100%; max-width:760px; font-size:13px; } .tokens-table th, .tokens-table td { padding:8px 12px; border-bottom:1px solid var(--border); text-align:left; vertical-align:middle; } .tokens-table th { color:var(--muted); font-size:11px; font-weight:650; text-transform:uppercase; letter-spacing:.04em; } .tokens-table tbody tr:hover { background:var(--accent-soft); } .tokens-empty { color:var(--muted); font-size:13px; margin:2px 0 0; }