From 98979f51689f00914045254206f332798cd0ffd8 Mon Sep 17 00:00:00 2001 From: Asger Geel Weirsoee Date: Mon, 15 Jun 2026 12:56:18 +0200 Subject: [PATCH] feat(theme): portal.css token aliases + legacy component layer so reconciled pages render on theme tokens --- static/portal.css | 103 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 103 insertions(+) diff --git a/static/portal.css b/static/portal.css index 502da36..67c0f20 100644 --- a/static/portal.css +++ b/static/portal.css @@ -72,3 +72,106 @@ a.wt-select-card .unav { flex: 0 0 auto; color: var(--color-accent); opacity: .7 .slot-state.busy { color: #f5a623; border-color: color-mix(in srgb, #f5a623 40%, transparent); } .slot-state.down { color: var(--color-bad); border-color: color-mix(in srgb, var(--color-bad) 40%, transparent); } .slot-next { color: #f5a623; font-size: .74rem; margin-top: .35rem; } + +/* --------------------------------------------------------------------------- + Legacy token aliases — the admin-heavy pages (ops/media/access) keep their + own page-specific widget CSS (vbadge, slot, vtable, mbadge, sw/fld/setgrid, + segmented, pager, clist, crow, modal…) which references the portal's old + token names. Map those onto the theme tokens so the THEME still drives every + colour/value — change the theme and these pages follow. + --------------------------------------------------------------------------- */ +:root { + --bg: var(--color-bg); + --surface: var(--color-surface); + --surface2: var(--color-surface-2); + --border: var(--color-border); + --text: var(--color-text); + --muted: var(--color-muted); + --accent: var(--color-accent); + --accent2: var(--color-accent-2); + --ok: var(--color-good); +} + +/* dashboard — minecraft server status dot */ +.mcdot { display:inline-block; width:.55rem; height:.55rem; border-radius:50%; margin-right:.4rem; } +.mcdot.run { background:var(--color-good); box-shadow:0 0 6px color-mix(in srgb,var(--color-good) 50%,transparent); } +.mcdot.off { background:var(--color-muted); } +.mcdot.warn { background:#f5c518; } +.mcdot.err { background:var(--color-bad); } + +/* theme tag variants used by the access pages */ +.wt-tag.open { color:var(--color-good); border-color:color-mix(in srgb,var(--color-good) 40%,transparent); background:color-mix(in srgb,var(--color-good) 10%,transparent); } +.wt-tag.muted { color:var(--color-muted); } + +/* destructive button (access-edit confirm) */ +.wt-btn--danger { background:var(--color-bad); border-color:transparent; color:#fff; font-weight:650; } +.wt-btn--danger:hover { filter:brightness(1.08); } + +/* --------------------------------------------------------------------------- + Legacy component classes — the reconciled admin/dashboard templates still use + the portal's original class names (.card/.btn/.stat/.grid/.filter/.ucard…) + together with their own page-local widget CSS. Defined here on the THEME + tokens (via the aliases above) so they render in the shared design language + without touching that markup/JS. (Public/core pages already use .wt-*.) + Follow-up: migrate these pages to .wt-* and delete this block. + --------------------------------------------------------------------------- */ +.lead { color:var(--muted); font-size:1.05rem; max-width:46rem; } + +.filter { margin:1.4rem 0 .2rem; position:relative; max-width:22rem; } +.filter input { padding-left:2.2rem; } +.filter .mag { position:absolute; left:.7rem; top:50%; transform:translateY(-50%); color:var(--muted); } + +.grid { display:grid; gap:.9rem; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); margin-top:1rem; } + +.card { + display:flex; flex-direction:column; min-height:7.25rem; height:100%; position:relative; + background:color-mix(in srgb, var(--surface) 70%, transparent); + border:1px solid var(--border); border-radius:1rem; padding:1.1rem 1.15rem; + text-decoration:none; color:inherit; + transition:border-color .18s ease, transform .18s ease, background .18s ease; +} +a.card:hover, .card:hover { border-color:var(--accent); transform:translateY(-3px); + background:color-mix(in srgb, var(--surface) 92%, transparent); } +.card.hidden { display:none; } +.card .head { display:flex; align-items:center; gap:.65rem; } +.card .ico { flex:0 0 auto; width:2.1rem; height:2.1rem; border-radius:.6rem; display:grid; place-items:center; + font-weight:700; font-size:1rem; background:color-mix(in srgb, var(--accent) 16%, transparent); color:var(--accent); overflow:hidden; } +.card .ico img { width:100%; height:100%; object-fit:contain; } +.card .name { font-weight:600; letter-spacing:-.01em; line-height:1.25; } +.card .sub { color:var(--muted); font-size:.86rem; margin-top:.6rem; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } +.card .go { color:var(--accent); font-size:.8rem; margin-top:.7rem; opacity:.85; } + +.btn { display:inline-block; background:var(--accent); color:var(--color-accent-ink); font-weight:600; + text-decoration:none; padding:.6rem 1.15rem; border-radius:.7rem; border:0; cursor:pointer; font:inherit; font-size:.95rem; } +.btn:hover { filter:brightness(1.08); } +.btn.secondary { background:var(--surface2); color:var(--text); border:1px solid var(--border); } + +table { width:100%; border-collapse:collapse; } +th, td { border:1px solid var(--border); padding:.45rem .55rem; text-align:left; } +th { color:var(--muted); font-weight:600; font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; } + +.flash { background:color-mix(in srgb, var(--accent) 12%, transparent); border:1px solid var(--accent); + color:var(--accent); border-radius:.7rem; padding:.65rem .95rem; margin:1rem 0; font-size:.9rem; } +.err { background:color-mix(in srgb, #f5a623 14%, transparent); border:1px solid #f5a623; + color:#f5a623; border-radius:.7rem; padding:.65rem .95rem; margin:1rem 0; font-size:.9rem; } +.muted { color:var(--muted); } + +.stat { background:color-mix(in srgb, var(--surface) 70%, transparent); border:1px solid var(--border); border-radius:1rem; padding:1.3rem; } +.stat .n { font-size:2.1rem; font-weight:800; letter-spacing:-.02em; } + +.ucards { display:grid; gap:.55rem; grid-template-columns:repeat(auto-fill,minmax(15rem,1fr)); margin-top:.6rem; } +.ucard { position:relative; display:flex; align-items:center; gap:.6rem; padding:.55rem .7rem; border:1px solid var(--border); + border-radius:.8rem; background:color-mix(in srgb,var(--surface) 70%,transparent); cursor:pointer; min-width:0; + transition:border-color .15s, background .15s; } +.ucard:hover { border-color:var(--accent); } +.ucard input { position:absolute; opacity:0; pointer-events:none; } +.ucard:has(input:checked) { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,transparent); } +.ucard .uini { flex:0 0 auto; width:1.9rem; height:1.9rem; border-radius:.5rem; display:grid; place-items:center; + font-weight:700; font-size:.85rem; background:color-mix(in srgb,var(--accent) 16%,transparent); color:var(--accent); } +.ucard .ubody { min-width:0; flex:1; } +.ucard .uname { font-weight:600; font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } +.ucard .usub { color:var(--muted); font-size:.78rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } +.ucard .uchk { flex:0 0 auto; width:1.25rem; height:1.25rem; border:1.5px solid var(--border); border-radius:.35rem; + display:grid; place-items:center; color:transparent; font-size:.8rem; font-weight:700; } +.ucard:has(input:checked) .uchk { background:var(--accent); border-color:var(--accent); color:var(--color-accent-ink); } +.ucard.hidden { display:none; }