75 lines
4.1 KiB
CSS
75 lines
4.1 KiB
CSS
/* weircon portal — app-specific glue on top of the shared weirsoe-theme.
|
|
The theme (assets.weircon.dk/css/weirsoe-theme.css) owns the look: tokens,
|
|
chrome, cards, buttons, inputs, palette. This file is ONLY the portal's own
|
|
bits — self-hosted font, base typography, and widgets the theme doesn't have
|
|
(favourite star, skeletons, ops slots). Everything here uses theme tokens. */
|
|
|
|
/* Self-hosted Inter (pixel-exact) — drives the theme's sans token. */
|
|
@font-face {
|
|
font-family: "Inter Variable"; font-style: normal; font-weight: 100 900;
|
|
font-display: swap; src: url("/static/fonts/inter.woff2") format("woff2");
|
|
}
|
|
:root {
|
|
--wt-font-sans: "Inter Variable", ui-sans-serif, system-ui, -apple-system,
|
|
"Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; }
|
|
.wt-main { flex: 1; }
|
|
a { color: inherit; }
|
|
|
|
/* app typography */
|
|
h1 { font-size: 2.2rem; letter-spacing: -.025em; margin: .6rem 0 .35rem; font-weight: 800; }
|
|
h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .14em; color: var(--color-muted); margin: 2.6rem 0 1rem; font-weight: 600; }
|
|
code { background: var(--color-surface-2); padding: .12em .42em; border-radius: .35rem; font-size: .85em; font-family: var(--wt-font-mono); }
|
|
.wt-mono { font-family: var(--wt-font-mono); }
|
|
|
|
/* bare form controls opt into the theme's input look */
|
|
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),
|
|
textarea, select {
|
|
width: 100%; background: var(--color-surface-2); border: 1px solid var(--color-border);
|
|
color: var(--color-text); border-radius: var(--wt-radius-sm); padding: .5rem .65rem; font: inherit;
|
|
}
|
|
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--color-accent); }
|
|
textarea { min-height: 5rem; resize: vertical; }
|
|
label { display: block; }
|
|
|
|
/* nav identity line */
|
|
.wt-nav .who { color: var(--color-muted); font-size: .9rem; }
|
|
|
|
/* favourite star + click-overlay on a tile */
|
|
.wt-tile-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
|
|
.fav {
|
|
position: absolute; top: .55rem; right: .6rem; z-index: 2; width: 1.7rem; height: 1.7rem;
|
|
border-radius: .5rem; border: 0; background: transparent; color: var(--color-border); cursor: pointer;
|
|
font-size: 1.05rem; line-height: 1; padding: 0; transition: color .15s, transform .15s;
|
|
}
|
|
.fav:hover { color: var(--color-muted); transform: scale(1.15); }
|
|
.fav.on { color: #f5c518; }
|
|
|
|
/* skeleton placeholders */
|
|
.wt-tile.skel { opacity: .5; pointer-events: none; }
|
|
.wt-tile.skel .wt-tile-ico { background: var(--color-surface-2); }
|
|
.sk { display: inline-block; background: var(--color-surface-2); border-radius: 5px; }
|
|
|
|
/* selectable card — link + dim variants (admin → users) */
|
|
a.wt-select-card { text-decoration: none; color: inherit; }
|
|
a.wt-select-card .unav { flex: 0 0 auto; color: var(--color-accent); opacity: .7; }
|
|
.wt-select-card.dim { opacity: .55; }
|
|
|
|
/* generic show/hide hooks used by the filter JS */
|
|
[hidden] { display: none !important; }
|
|
.hidden { display: none !important; }
|
|
|
|
/* ops — random-proxy egress slots */
|
|
.slot { background: color-mix(in srgb, var(--color-surface) 70%, transparent); border: 1px solid var(--color-border); border-radius: .9rem; padding: .8rem .9rem; }
|
|
.slot.next { border-color: #f5a623; box-shadow: 0 0 0 1px color-mix(in srgb, #f5a623 40%, transparent); }
|
|
.slot-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: .35rem; }
|
|
.slot-id { font-weight: 700; color: var(--color-muted); font-size: .85rem; }
|
|
.slot-state { font-size: .72rem; border-radius: 999px; padding: .05rem .5rem; border: 1px solid var(--color-border); color: var(--color-muted); }
|
|
.slot-state.live { color: var(--color-good); border-color: color-mix(in srgb, var(--color-good) 40%, transparent); }
|
|
.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; }
|