/* ============================================================================ jira-clockify-avanti console — light admin theme. Hand-written rather than pulled from a CDN: the pages run behind a strict egress policy and an IP allow-list, so every byte has to ship with the image. The palette is the NeverHack scheme shared with the jira-jira dashboard: deep navy sidebar, blue-grey canvas with a dotted texture, white cards. The two consoles should look like one product. ========================================================================== */ /* Figtree, served from this deployment. Two variable files carry every weight from 300 to 900, upright and italic, in 125 KB — the closest free face to the one the company site sets, and free is what makes it shippable at all. `swap`: the text is readable at once in the system face and reflows when the file arrives, rather than a blank page for the first moments. */ @font-face { font-family: Figtree; src: url("../fonts/figtree.ttf") format("truetype"); font-weight: 300 900; font-style: normal; font-display: swap; } @font-face { font-family: Figtree; src: url("../fonts/figtree-italic.ttf") format("truetype"); font-weight: 300 900; font-style: italic; font-display: swap; } :root { /* Figtree, and the company site's own monospace stack character for character. The site itself sets Roobert, which is licensed; this is the nearest free face — the same geometric sans with a tall x-height, so the two read as related rather than identical. Both fall back to system-ui, which is Segoe UI on Windows and San Francisco on a Mac. Nothing here is fetched from anywhere. The faces are served by this deployment, from assets/fonts/ — a webfont service would be one more thing between an operator and a page that has to work when the network is the thing that is broken. */ --font-sans: Figtree, system-ui, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --primary: #16386e; /* NeverHack navy */ --primary-dark: #0e2a4f; --secondary: #2f6fed; /* brighter blue accent */ --success: #0ab39c; --info: #2f6fed; --warning: #f7b84b; --danger: #f06548; --body-bg: #eef1f7; --card-bg: #ffffff; /* Two neutral surfaces so table headers, quiet buttons and chips stop being hardcoded greys that drift when the palette changes. */ --surface: #f4f6fa; --surface-hover: #f9fafd; --border: #e2e7f1; --text: #4a5568; --heading: #15233f; --muted: #8a93a6; --field-border: #cfd7e6; --sidebar-bg: #0e2a4f; --sidebar-fg: rgba(255, 255, 255, 0.72); --sidebar-active: #ffffff; --sidebar-active-bg: rgba(255, 255, 255, 0.10); --sidebar-w: 250px; --topbar-h: 60px; --radius: 0.4rem; --shadow: 0 1px 1px rgba(21, 35, 63, .05), 0 2px 6px -1px rgba(21, 35, 63, .07); --shadow-lift: 0 1px 1px rgba(21, 35, 63, .05), 0 10px 22px -6px rgba(21, 35, 63, .16); /* Ink on a coloured ground: white on the navy sidebar and on a primary button, dark on the amber one. Named rather than written out, because a dark theme keeps the ground and changes everything around it. */ --on-dark: #ffffff; --on-warning: #5b4708; /* The darker end of the two gradients, and the border a card lifts to. */ --sidebar-top: #143458; --hero-bottom: #0b223f; --border-strong: #b9c4d8; /* Text on the soft badges and alerts. One per tone, two shades apart: the badge sits on a 12% wash, the alert on a 10% one with a border. */ --success-ink: #0a9382; --success-ink-strong: #0a7d70; --danger-ink: #d54d33; --danger-ink-strong: #c0432c; --warning-ink: #b8860b; --warning-ink-strong: #9a6f0d; --info-ink: #1f4f9e; --info-ink-strong: #1b4a94; /* Two washes and one soft ink, for the panels that are a whole state rather than a line: the field-values preview, and the danger zone. */ --info-wash: #eef3fe; --danger-wash: #fffafa; --danger-ink-soft: #9b5c63; } /* ── The same console at night ──────────────────────────────────────────── One block, not two: the choice is written onto as data-theme before the first paint (see the inline script in layouts/app.blade.php), whether it came from the switch in the topbar or from the operating system. So the stylesheet has a single dark palette and no @media copy of it to keep in step. The brand navy stays where it belongs — the sidebar and the hero — and the page around it goes to the dark end of the same blue rather than to grey: a neutral charcoal under a navy rail reads as two designs. The accent has to move, though. #16386e is a foreground colour on paper and a hole in the page at night, so the brighter blue this palette already carries becomes the primary, and the navy is kept for the rail behind it. */ :root[data-theme="dark"] { color-scheme: dark; --primary: #2f6fed; --primary-dark: #2559c9; --secondary: #5d93ff; --success: #12c2a8; --info: #5d93ff; --warning: #f0b64a; --danger: #f2705a; --body-bg: #0b1626; --card-bg: #111f33; --surface: #16263c; --surface-hover: #1b2d46; --border: #223349; --text: #c3cddd; --heading: #eaf0f8; --muted: #8795ac; --field-border: #2c405e; --sidebar-bg: #0a1626; --sidebar-top: #0d1c2f; --sidebar-fg: rgba(255, 255, 255, 0.68); --hero-bottom: #081321; --border-strong: #35496b; /* The inks lift off the dark washes; the same tones, brought up until they read on a navy ground instead of on white. */ --success-ink: #4fd6c2; --success-ink-strong: #6ee0cf; --danger-ink: #ff9280; --danger-ink-strong: #ffab9c; --warning-ink: #f5c96f; --warning-ink-strong: #f8d78f; --info-ink: #8ab4ff; --info-ink-strong: #a6c6ff; --on-warning: #2a2003; --info-wash: #14263f; --danger-wash: #2a1720; --danger-ink-soft: #d99aa2; --shadow: 0 1px 1px rgba(0, 0, 0, .25), 0 2px 6px -1px rgba(0, 0, 0, .35); --shadow-lift: 0 1px 1px rgba(0, 0, 0, .25), 0 10px 22px -6px rgba(0, 0, 0, .5); } * { box-sizing: border-box; } /* An author `display` beats the browser's own `[hidden] { display: none }`, so any styled element with the attribute stayed visible — a button that presses and does nothing, because the script that was going to wire it up had not. Stated once, globally, rather than remembered per component. */ [hidden] { display: none !important; } body { margin: 0; color: var(--text); /* The dotted texture from neverhack.ee. Painted, not an image: nothing is fetched, and it survives the strict egress policy. */ background-color: var(--body-bg); background-image: radial-gradient(rgba(22, 56, 110, 0.06) 1px, transparent 1px); background-size: 22px 22px; font-family: var(--font-sans); font-size: 14px; line-height: 1.5; } a { color: var(--secondary); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3, h4 { color: var(--heading); margin: 0; } code, .mono { font-family: var(--font-mono); } /* Somebody who asked their system for less motion is not asking for a duller console — the depth stays, the movement goes. */ @media (prefers-reduced-motion: reduce) { .card, .tile, .card:hover, .tile:hover, .card.is-linked:hover, button.tile.is-clickable:hover, a.tile:hover { transition: none; transform: none; } } /* ── Sidebar ─────────────────────────────────────────────────────────── */ .sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); background: linear-gradient(180deg, var(--sidebar-top), var(--sidebar-bg)); color: var(--sidebar-fg); display: flex; flex-direction: column; z-index: 20; overflow-y: auto; } .sidebar .brand { height: var(--topbar-h); display: flex; align-items: center; gap: .65rem; padding: 0 1.15rem; color: var(--on-dark); font-weight: 600; font-size: .95rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); flex: 0 0 auto; } /* ── Brand mark ────────────────────────────────────────────────────── Three rings overlapping into one core. The rings inherit the surface's colour so the same markup sits on the navy sidebar and the navy login panel; only the core is painted, and the descending opacities keep the three readable at 26px where three equal strokes would just look like a smudge. */ .brand-mark { flex: 0 0 auto; overflow: visible; } .brand-mark .ring { fill: none; stroke: currentColor; stroke-width: 1.9; vector-effect: non-scaling-stroke; } .brand-mark .ring-1 { opacity: 1; } .brand-mark .ring-2 { opacity: .68; } .brand-mark .ring-3 { opacity: .44; } .brand-mark .core { fill: var(--success); } /* ── Wordmark ──────────────────────────────────────────────────────── The separators carry meaning — three systems — but they should not compete with the names for attention. */ .wordmark { white-space: nowrap; } .wordmark-sep { opacity: .38; margin: 0 .34em; font-weight: 400; } .wordmark-also { opacity: .55; font-weight: 400; font-size: .88em; } /* The tagline is a caption, not a second title: small caps, wide tracking and low contrast so it explains the name without competing with it. */ .brand-text { display: flex; flex-direction: column; gap: .1rem; line-height: 1.2; min-width: 0; } .brand-tagline { font-size: .58rem; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: rgba(255, 255, 255, .5); white-space: nowrap; } .menu { list-style: none; margin: 0; padding: 1rem .75rem; display: flex; flex-direction: column; gap: .1rem; } .menu .label { color: rgba(255, 255, 255, .5); font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; padding: .8rem .75rem .35rem; } .menu a { display: flex; align-items: center; gap: .65rem; color: var(--sidebar-fg); padding: .6rem .75rem; border-radius: var(--radius); font-size: .88rem; } .menu a:hover { color: var(--on-dark); background: rgba(255, 255, 255, .07); text-decoration: none; } .menu a.active { color: var(--sidebar-active); background: var(--sidebar-active-bg); font-weight: 500; } .menu a .ico { width: 1.15rem; text-align: center; opacity: .9; } /* How many are behind a menu entry, before it is opened. The menu is already the navigation between systems, so the count belongs on it rather than on a second row of tabs repeating the same three links. */ .nav-count { margin-left: auto; min-width: 1.15rem; padding: 0 .32rem; border-radius: 999px; background: rgba(255, 255, 255, .12); color: var(--sidebar-fg); font-size: .68rem; font-weight: 600; text-align: center; line-height: 1.15rem; } .menu a.active .nav-count { background: rgba(255, 255, 255, .22); color: var(--sidebar-active); } /* A menu entry that opens. The summary is styled as the link it replaces, and the marker is drawn by hand so it points the way it turns — the native one sits on the wrong side and cannot be coloured. */ .nav-group > summary { display: flex; align-items: center; gap: .65rem; color: var(--sidebar-fg); padding: .6rem .75rem; border-radius: var(--radius); font-size: .88rem; cursor: pointer; list-style: none; } .nav-group > summary::-webkit-details-marker { display: none; } .nav-group > summary:hover { color: var(--on-dark); background: rgba(255, 255, 255, .07); } .nav-group > summary::after { content: "›"; margin-left: auto; opacity: .55; transition: transform .16s ease; transform: rotate(0deg); } .nav-group[open] > summary::after { transform: rotate(90deg); } /* Indented under their heading, and hung on a rail so the group reads as one thing rather than as four entries that happen to be adjacent. */ .nav-group > ul { list-style: none; margin: .1rem 0 .35rem; padding: 0 0 0 1.5rem; border-left: 1px solid rgba(255, 255, 255, .1); margin-left: 1.05rem; } .nav-group > ul a { padding: .42rem .6rem; font-size: .84rem; } @media (prefers-reduced-motion: reduce) { .nav-group > summary::after { transition: none; } } /* "soon" beside a system with no connector yet: present, but clearly not the same weight as the ones that work. */ .menu-tag { margin-left: auto; font-size: .58rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: .05rem .3rem; border-radius: 2px; background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .6); } /* ── A page on its way ───────────────────────────────────────────────── */ html.is-leaving { cursor: progress; } html.is-leaving::before { content: ""; position: fixed; top: 0; left: 0; z-index: 200; height: 3px; width: 28%; background: var(--primary); border-radius: 0 2px 2px 0; animation: leaving 1.1s ease-in-out infinite; } @keyframes leaving { 0% { transform: translateX(-100%); } 100% { transform: translateX(360%); } } @media (prefers-reduced-motion: reduce) { html.is-leaving::before { animation: none; width: 100%; opacity: .6; } } /* ── Topbar ──────────────────────────────────────────────────────────── */ .topbar { position: sticky; top: 0; z-index: 10; height: var(--topbar-h); margin-left: var(--sidebar-w); display: flex; align-items: center; gap: .75rem; padding: 0 1.5rem; background: var(--card-bg); border-bottom: 1px solid var(--border); } .page-title { font-size: 1.02rem; font-weight: 600; color: var(--heading); } .page-sub { color: var(--muted); font-size: .78rem; } .topbar .right { margin-left: auto; display: flex; align-items: center; gap: .6rem; } .whoami { text-align: right; line-height: 1.25; } .whoami .n { font-weight: 600; color: var(--heading); font-size: .85rem; } .whoami .r { color: var(--muted); font-size: .72rem; } .whoami-source { display: inline-block; margin-left: .25rem; padding: .04rem .32rem; border-radius: 2px; font-size: .62rem; font-weight: 600; letter-spacing: .03em; background: rgba(22, 56, 110, .09); color: var(--primary); cursor: help; } /* ── Content ─────────────────────────────────────────────────────────── */ .content { margin-left: var(--sidebar-w); padding: 1.5rem; } .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; } .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; } .span2 { grid-column: span 2; } .span3 { grid-column: 1 / -1; } .stack { display: flex; flex-direction: column; gap: 1.1rem; } .row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; } .row-end { margin-left: auto; } /* Prose with one action pinned to its end. Not `.row`: flex decides to wrap on an item's natural width, not on the width it could shrink to, so a long description drops the button onto its own line however much room it would have had after shrinking. */ .item-row { display: flex; align-items: flex-start; gap: .75rem; flex-wrap: nowrap; } .item-row > .item-main { flex: 1 1 auto; min-width: 0; } .item-row > .item-act { flex: 0 0 auto; } /* One row per instance with something to throw away. */ .cleanup-row { padding: .55rem 0; border-bottom: 1px solid var(--border); align-items: center; } .cleanup-row:last-of-type { border-bottom: 0; } .cleanup-acts { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; } .mt { margin-top: 1.1rem; } /* ── Cards ───────────────────────────────────────────────────────────── */ .card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease; } /* A millimetre, and only the shadow really moves. Enough that the page feels made of layers rather than printed on one; not enough to claim the card does something when clicked — that promise is `cursor: pointer` and a tinted border, which only `.is-linked` below makes. */ /* Only the ones you can actually press. A panel that rises because the pointer crossed it is the page twitching at somebody reading a table — movement has to mean "this answers to you", or it means nothing. */ a.card:hover, button.card:hover, .card.is-linked:hover { box-shadow: var(--shadow-lift); transform: translateY(-1px); } /* The head is a band, not just a line: a hairline of white above the border catches the light and gives the card an edge instead of a seam. */ .card-head { display: flex; align-items: center; gap: .6rem; padding: .85rem 1.1rem; border-bottom: 1px solid var(--border); background: linear-gradient(180deg, var(--card-bg), var(--surface)); border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0; } .card-head h2 { font-size: .9rem; font-weight: 600; } /* A heading that leads somewhere keeps the heading's colour and picks the underline up on hover, so it reads as a title first and a link second. */ .card-head h2 a { color: inherit; text-decoration: none; } .card-head h2 a:hover { text-decoration: underline; } /* A card you can click anywhere on. The link stays a real link — it is only its hit area that is stretched over the card — so the keyboard, the status bar and "open in new tab" all behave. Text stays selectable, which a card wrapped in an would lose. */ .card.is-linked { position: relative; cursor: pointer; } /* Higher than a plain card, and tinted: this one is going somewhere. */ .card.is-linked:hover { border-color: var(--border-strong); transform: translateY(-2px); } .card.is-linked .card-head h2 a::after { content: ''; position: absolute; inset: 0; } .card.is-linked:hover .card-head h2 a { text-decoration: underline; } .card.is-linked:focus-within { border-color: var(--info); } /* Anything the card links to itself must sit above the stretched area, or the card's link swallows the click. */ .card.is-linked .card-body a, .card.is-linked .card-body button { position: relative; z-index: 1; } .card-head .row-end { margin-left: auto; } .card-body { padding: 1.1rem; } .card-body.tight { padding: 0; } /* ── Stat tiles ──────────────────────────────────────────────────────── */ .tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; } .tile { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.1rem; transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease; } a.tile:hover, button.tile.is-clickable:hover { box-shadow: var(--shadow-lift); transform: translateY(-1px); } /* A tile that goes nowhere should not behave as though it does. Its own links still work; the box around them is not one. */ .tile-static, .tile-static:hover { box-shadow: var(--shadow); transform: none; cursor: default; } .tile-static .sub a { color: var(--muted); text-decoration: none; border-bottom: 1px dotted var(--border); } .tile-static .sub a:hover { color: var(--primary); border-bottom-color: currentColor; } .tile .lbl { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; } .tile .num { font-size: 1.7rem; font-weight: 700; color: var(--heading); line-height: 1.3; } .tile .sub { color: var(--muted); font-size: .78rem; } .tile.bad .num { color: var(--danger); } /* ── Health rows ─────────────────────────────────────────────────────── */ .health { display: flex; align-items: flex-start; gap: .75rem; } .health .dot { margin-top: .35rem; } .health .h-name { font-weight: 600; color: var(--heading); } .health .h-detail { color: var(--muted); font-size: .82rem; word-break: break-word; } .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); display: inline-block; flex: 0 0 auto; } .dot-ok { background: var(--success); box-shadow: 0 0 0 3px rgba(10, 179, 156, .16); } .dot-bad { background: var(--danger); box-shadow: 0 0 0 3px rgba(240, 101, 72, .16); } .dot-warn { background: var(--warning); box-shadow: 0 0 0 3px rgba(247, 184, 75, .18); } .dot-na { background: var(--muted); box-shadow: 0 0 0 3px rgba(135, 138, 153, .14); } /* ── Badges / pills ──────────────────────────────────────────────────── */ .badge { display: inline-block; font-size: .68rem; font-weight: 600; letter-spacing: .02em; padding: .22rem .5rem; border-radius: .25rem; text-transform: uppercase; white-space: nowrap; } .pill { display: inline-block; font-size: .74rem; font-weight: 600; padding: .25rem .6rem; border-radius: 1rem; white-space: nowrap; } .soft-success { background: rgba(10, 179, 156, .12); color: var(--success-ink); } .soft-danger { background: rgba(240, 101, 72, .12); color: var(--danger-ink); } .soft-warning { background: rgba(247, 184, 75, .16); color: var(--warning-ink); } .soft-info { background: rgba(47, 111, 237, .12); color: var(--info-ink); } .soft-primary { background: rgba(22, 56, 110, .09); color: var(--primary); } .soft-muted { background: var(--surface); color: var(--muted); } /* In-flight and just-finished states for a per-row action. The pulse is what tells you a re-test of an already-OK instance actually ran — without it the cell would end up looking exactly as it did before you pressed the button. */ .badge.is-testing { animation: badge-pulse 1.1s ease-in-out infinite; } .badge.is-flash { animation: badge-pop .32s ease-out; } @keyframes badge-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } } @keyframes badge-pop { 0% { transform: scale(.9); opacity: .4; } 60% { transform: scale(1.04); opacity: 1; } 100% { transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .badge.is-testing, .badge.is-flash { animation: none; } } /* A name that opens what is known about that session. Underlined on hover only: in a table of names, six permanently underlined ones read as six links to six pages, which is not what these are. */ .is-openable { cursor: pointer; } .is-openable:hover { text-decoration: underline; text-underline-offset: 2px; } .is-openable:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; border-radius: 2px; } /* ── A restart in progress ─────────────────────────────────────────────── No percentage is honestly available — the console cannot watch itself being replaced — so the bar says "something is happening", and the words above it say what has actually completed. An indeterminate bar that pretended to be a percentage would be a lie with a number on it. */ .restart-bar { display: block; height: 3px; margin-top: .6rem; border-radius: 2px; background: rgba(47, 111, 237, .16); overflow: hidden; } .restart-bar > span { display: block; width: 35%; height: 100%; border-radius: 2px; background: var(--info); animation: restart-sweep 1.4s ease-in-out infinite; } @keyframes restart-sweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } } /* Done: the bar fills and stops, so the end state is a full bar rather than one still running under a sentence saying it has finished. */ .alert[data-restart].is-done .restart-bar > span { width: 100%; animation: none; } @media (prefers-reduced-motion: reduce) { .restart-bar > span { width: 100%; animation: none; opacity: .55; } } /* ── The status strip ──────────────────────────────────────────────────── The platform's state, in the topbar, on every page. Smaller and quieter than a .badge — it is read at a glance and must not compete with the page title beside it — and mixed case, because these are words rather than labels. Colour comes from the same soft-* classes as everything else, so a green here is the green a card uses for the same fact. */ .status-strip { display: flex; align-items: center; gap: .4rem; } .status-badge { display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 600; white-space: nowrap; padding: .22rem .55rem; border-radius: 1rem; font-variant-numeric: tabular-nums; } .status-badge[hidden] { display: none; } /* Take it back. Present in the markup — a screen reader and the keyboard both reach it — but out of the way until the pointer is on the badge it belongs to, because it is an escape hatch and not a control anybody uses daily. Width, not display, so revealing it does not shift the badges beside it more than the letter it adds. */ .status-undo { display: inline-flex; margin-left: .1rem; } .status-undo[hidden] { display: none; } .status-undo > button { all: unset; cursor: pointer; width: 0; overflow: hidden; font-size: .82rem; line-height: 1; opacity: 0; color: inherit; transition: width .12s ease, opacity .12s ease; } .status-badge:hover .status-undo > button, .status-undo > button:focus-visible { width: .8rem; opacity: .75; } .status-undo > button:hover { opacity: 1; } .status-undo > button:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; } @media (prefers-reduced-motion: reduce) { .status-undo > button { transition: none; } } /* Nothing has been read for a while: the numbers are still the last true ones, so they stay, but the strip stops claiming to be current. Hover says why. */ .status-strip.is-stale { opacity: .5; } .status-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; background: currentColor; opacity: .75; } /* The one moving thing on the page, and it means something: the switch is on AND a worker is answering. A dot that pulsed on the strength of the switch alone would beat away over a fleet of nothing. The ring is drawn with box-shadow rather than a second element, so the pulse costs one composited property and no layout. */ .status-dot.is-live { opacity: 1; animation: status-pulse 2s ease-in-out infinite; } /* The ring travels outwards and fades, and is already gone at 100% — it never shrinks back in. Written as three stops rather than two for exactly that reason: `0%, 100%` on one line plays the second half of every cycle backwards, and a ring that returns to the dot reads as a wobble. */ @keyframes status-pulse { 0% { box-shadow: 0 0 0 0 currentColor; opacity: 1; } 70% { box-shadow: 0 0 0 4px transparent; opacity: .6; } 100% { box-shadow: 0 0 0 0 transparent; opacity: 1; } } /* Asked for less motion: the dot stays lit, it just stops beating. Colour and the word beside it carry the state on their own. */ @media (prefers-reduced-motion: reduce) { .status-dot.is-live { animation: none; } } /* Narrow: the page title and who you are win. What survives is the state that would make somebody stop what they are doing — so what goes is the badge in its CALM tone. "no workers" is red and stays; "2 workers" is grey and does not need the room it is taking. */ @media (max-width: 900px) { .status-badge[data-status="workers"].soft-muted { display: none; } } @media (max-width: 640px) { .status-badge[data-status="busy"] { display: none; } /* Only the calm state gives up its word and shrinks to the dot. A red dot with nothing beside it is the one badge nobody should have to guess at, so "Stopped" keeps its word however narrow the screen gets. */ .status-badge[data-status="platform"].soft-success span:not(.status-dot) { display: none; } .status-badge[data-status="platform"].soft-success { padding: .3rem; } } /* ── Buttons ─────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid transparent; border-radius: var(--radius); padding: .45rem .85rem; font-size: .84rem; font-weight: 500; cursor: pointer; color: var(--on-dark); background: var(--primary); font-family: inherit; /* A hairline of light along the top edge and a shadow the colour of the button itself: the button reads as raised without a grey drop shadow, which on a tinted surface always looks like dirt. */ box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 1px 2px rgba(15, 35, 63, .16); transition: transform .12s ease, box-shadow .16s ease, filter .16s ease, background .16s ease; } .btn:hover { filter: brightness(1.07); text-decoration: none; color: var(--on-dark); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 4px 10px rgba(15, 35, 63, .18); } /* Pressing a button that opens a dialog can take a beat on a long page; without this the click looks like it was dropped. */ .btn:active { transform: translateY(1px); filter: brightness(.94); box-shadow: inset 0 2px 4px rgba(15, 35, 63, .2); transition-duration: .04s; } .btn:focus-visible { outline: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 0 0 3px rgba(47, 111, 237, .35); } /* Nobody asked for the page to move under them. */ @media (prefers-reduced-motion: reduce) { .btn, .btn:hover, .btn:active { transform: none; transition: none; } } .btn.is-busy { opacity: .65; pointer-events: none; } .btn-success { background: var(--success); } .btn-info { background: var(--info); } .btn-warning { background: var(--warning); color: var(--on-warning); } .btn-danger { background: var(--danger); } .btn-light { background: var(--surface); color: var(--text); border-color: var(--border); box-shadow: 0 1px 1px rgba(15, 35, 63, .06); } .btn-light:hover { color: var(--heading); border-color: var(--muted); box-shadow: 0 3px 8px rgba(15, 35, 63, .1); } .btn-sm { padding: .28rem .6rem; font-size: .76rem; } .btn:disabled, .btn.is-disabled { opacity: .55; cursor: not-allowed; filter: none; transform: none; box-shadow: none; } /* ── Alerts ──────────────────────────────────────────────────────────── */ .alert { border-radius: var(--radius); padding: .8rem 1rem; font-size: .86rem; margin-bottom: 1.1rem; border: 1px solid transparent; } .alert-success { background: rgba(10, 179, 156, .1); border-color: rgba(10, 179, 156, .25); color: var(--success-ink-strong); } .alert-danger { background: rgba(240, 101, 72, .1); border-color: rgba(240, 101, 72, .25); color: var(--danger-ink-strong); } .alert-warning { background: rgba(247, 184, 75, .12); border-color: rgba(247, 184, 75, .3); color: var(--warning-ink-strong); } .alert-info { background: rgba(47, 111, 237, .09); border-color: rgba(47, 111, 237, .22); color: var(--info-ink-strong); } /* ── Tables ──────────────────────────────────────────────────────────── */ .table-wrap { overflow-x: auto; } /* A long table inside a dialog: the box scrolls, not the dialog, so the column heads have something to stick to and the dialog's own head stays above. */ .table-tall { max-height: 60vh; overflow: auto; } .table-tall table.tbl thead th { position: sticky; top: 0; z-index: 1; } table.tbl { width: 100%; border-collapse: collapse; font-size: .85rem; } table.tbl th { text-align: left; color: var(--muted); font-weight: 600; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; padding: .6rem .9rem; background: var(--surface); border-bottom: 1px solid var(--border); } /* A heading that sorts. It inherits the heading's own type rather than a button's, so the row still reads as a row of headings; the caret is drawn from aria-sort, which is what a screen reader announces too. */ table.tbl th .th-sort { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: .3rem; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; } table.tbl th .th-sort:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; } table.tbl th .th-sort:hover { color: var(--secondary); } /* The caret only appears once a column is sorted, so an unsorted heading gives no hint that it can be. A ghost caret on hover does, without adding a fourth glyph to every heading at rest. */ table.tbl th .th-sort::after { transition: opacity .15s ease; } table.tbl th:not([aria-sort="ascending"]):not([aria-sort="descending"]) .th-sort:hover::after { content: "▲"; font-size: .6em; opacity: .4; } table.tbl th[aria-sort="ascending"] .th-sort::after { content: "▲"; font-size: .6em; } table.tbl th[aria-sort="descending"] .th-sort::after { content: "▼"; font-size: .6em; } table.tbl td { padding: .65rem .9rem; border-bottom: 1px solid var(--border); vertical-align: middle; } table.tbl tbody tr:last-child td { border-bottom: 0; } table.tbl tbody tr:hover { background: var(--surface-hover); } .num-cell { text-align: right; font-variant-numeric: tabular-nums; } /* `table.tbl th` outranks a bare class, so a numeric header kept the default left alignment while its column sat right — the header and its numbers pointed at different places. */ table.tbl th.num-cell { text-align: right; } .empty { color: var(--muted); text-align: center; padding: 1.6rem; font-size: .88rem; } .nowrap { white-space: nowrap; } /* A run that changed something ---------------------------------------------- Most runs find nothing to do, so a column of zeros is the normal state and every row looks like every other one. Two quiet marks fix that without turning the table into a traffic light: the zeros step back, and the row that did something carries a rail down its left edge. The rail is an inset shadow on the first cell rather than a border, so it does not move the text by a pixel and rows stay aligned with the header. */ .tbl td.is-nil { color: var(--muted); } .tbl td.is-bad { color: var(--danger); font-weight: 600; } .tbl tr.did-something td:first-child { box-shadow: inset 2px 0 0 var(--info); } .tbl tr.did-something td.num-cell:not(.is-nil) { font-weight: 600; color: var(--heading); } /* The name a row is about, kept on one line. "NEVERHACK Jira" broken after the first word reads as two entries, and a list is scanned down the first column. Only the name itself: the badges and the description under it still wrap, and the table scrolls sideways in .table-wrap, so nothing is pushed off the page. Not applied to every first column — a helper's name is a sentence long and would drag the whole table sideways. */ .name-cell > a { white-space: nowrap; } /* ── Definition lists ────────────────────────────────────────────────── */ .kv { display: grid; grid-template-columns: minmax(9rem, auto) 1fr; gap: .55rem 1.2rem; margin: 0; } .kv dt { color: var(--muted); font-size: .82rem; } .kv dd { margin: 0; color: var(--heading); font-size: .85rem; word-break: break-word; } /* ── Forms ───────────────────────────────────────────────────────────── */ .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; } .field { display: flex; flex-direction: column; gap: .3rem; } .field.full { grid-column: 1 / -1; } .field label, .field .field-label { font-size: .82rem; font-weight: 600; color: var(--heading); } /* A checkbox's own label is the action, not the heading: normal weight, so the two lines do not compete. */ .field .check label { font-weight: 400; color: var(--text); } .field .help { color: var(--muted); font-size: .78rem; } .field .err { color: var(--danger); font-size: .78rem; } input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="number"], input[type="search"], select, textarea { width: 100%; padding: .5rem .7rem; font-size: .86rem; font-family: inherit; color: var(--text); background: var(--card-bg); border: 1px solid var(--field-border); border-radius: var(--radius); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--secondary); box-shadow: 0 0 0 3px rgba(47, 111, 237, .14); } input[readonly], input:disabled, select:disabled { background: var(--surface); color: var(--muted); } textarea { min-height: 5rem; resize: vertical; } /* A search box, with the magnifier inside it. The icon is decoration — the field has a label — so it is out of the way of the pointer and of anything reading the page aloud. */ .search-field { position: relative; display: block; } .search-field .search-icon { position: absolute; left: .62rem; top: 50%; transform: translateY(-50%); width: .82rem; height: .82rem; pointer-events: none; fill: none; stroke: var(--muted); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .search-field input[type="search"] { padding-left: 2rem; border-radius: 999px; } /* The magnifier follows the field: grey at rest, the accent while typing. */ .search-field input[type="search"]:focus ~ .search-icon, .search-field:focus-within .search-icon { stroke: var(--secondary); } /* Chrome draws its own X; it sits closer to the edge than a pill's curve. */ .search-field input[type="search"]::-webkit-search-cancel-button { margin-right: .15rem; } .check { display: flex; align-items: flex-start; gap: .5rem; } .field .field-label { display: block; } .check input { margin-top: .25rem; } .check label { font-weight: 500; } /* The five words, and the answers under References. A dictionary voice: the line that defines the thing stays upright so it can be scanned, and the sentences around it lean, the way a reference book sets its glosses. */ .glossary dd, .guide-ref-body p { font-style: italic; } .glossary dd strong, .guide-ref-body p strong, .guide-ref-body p .mono, .guide-ref-body p code { font-style: normal; } /* Slightly quieter than body text, and a touch more room between entries: these are read one at a time, not straight through. */ .glossary dd { color: var(--text); line-height: 1.65; } .glossary dt { padding-top: .15rem; } /* A preview of somebody else's screen. Their layout, not ours: a day band with its total, then one line per entry — description, where it is booked, the tag, the two times and the length. Recognisable at a glance is the whole point; a table of the same values would not be. */ .modal-wide { max-width: 62rem; width: 92vw; } .clockify-preview { display: flex; flex-direction: column; gap: .35rem; } .cp-day { display: flex; align-items: center; justify-content: space-between; margin-top: .6rem; padding: .35rem .6rem; border-radius: var(--radius); background: var(--surface); font-size: .76rem; font-weight: 600; color: var(--muted); } .cp-day:first-child { margin-top: 0; } .cp-total { font-variant-numeric: tabular-nums; color: var(--text); } .cp-entry { display: grid; align-items: center; gap: .5rem; grid-template-columns: minmax(8rem, 1.4fr) minmax(8rem, 1.2fr) auto auto auto minmax(6rem, .8fr); padding: .5rem .6rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card-bg); font-size: .8rem; } .cp-said { font-weight: 600; color: var(--text); } .cp-where { color: var(--secondary); font-size: .76rem; } .cp-workspace { color: var(--muted); } .cp-dot { display: inline-block; width: .45rem; height: .45rem; border-radius: 50%; background: var(--secondary); margin-right: .3rem; vertical-align: middle; } .cp-tag { justify-self: start; padding: .05rem .4rem; border: 1px solid var(--field-border); border-radius: var(--radius); font-size: .7rem; color: var(--muted); } .cp-times, .cp-length { font-variant-numeric: tabular-nums; color: var(--muted); font-size: .76rem; } .cp-length { font-weight: 600; color: var(--text); } .cp-who { color: var(--muted); font-size: .76rem; text-align: right; } @media (max-width: 800px) { .cp-entry { grid-template-columns: 1fr auto; } .cp-where, .cp-tag, .cp-who { grid-column: 1 / -1; } } /* The dry version of a summary. Four cards and three coloured banners said the same thing and took a screen doing it; this is a readout, meant to be read once on the way to the table. */ /* The link out of the tab strip, pushed to its end: what a kind of absence becomes in Clockify is set elsewhere, and the tabs are the only other place kinds are named. Quiet — it is a way out, not one of the tabs. */ .tabs-aside { margin-left: auto; align-self: center; padding: 0 .2rem .55rem; font-size: .78rem; color: var(--muted); border-bottom: 0; } .tabs-aside:hover { color: var(--secondary); } /* The switch at the head of a mapping row. A button rather than a checkbox — it submits, so it works with no script — but it wears the same slider as every other toggle in the console. Sharing the LOOK and not the class: `.switch` belongs to the toggle component, and a second rule under that name squeezed every one of them to two centimetres. Slightly smaller than the settings one: it sits in a table row, not on a form line, and forty of them down a page would otherwise shout. */ .mention-col { width: 3.4rem; } .row-switch { all: unset; cursor: pointer; display: inline-flex; } .row-switch .row-switch-track { position: relative; width: 2.2rem; height: 1.25rem; border-radius: 1rem; background: var(--border); flex: 0 0 auto; /* Sunk while off, so the knob reads as sitting IN the track rather than on top of a grey pill. */ box-shadow: inset 0 1px 2px rgba(15, 35, 63, .18); transition: background .18s ease, box-shadow .18s ease; } .row-switch .row-switch-knob { position: absolute; top: .15rem; left: .15rem; width: .95rem; height: .95rem; border-radius: 50%; background: var(--card-bg); box-shadow: 0 1px 3px rgba(15, 35, 63, .35); /* Overshoots a hair and settles: the point of a slider over a tick is that the state visibly MOVES. */ transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), width .12s ease; } .row-switch.is-on .row-switch-track { background: var(--secondary); box-shadow: inset 0 1px 2px rgba(15, 35, 63, .1), 0 0 0 3px rgba(47, 111, 237, .12); } .row-switch.is-on .row-switch-knob { transform: translateX(.95rem); } .row-switch:hover .row-switch-track { box-shadow: inset 0 1px 2px rgba(15, 35, 63, .18), 0 0 0 4px rgba(47, 111, 237, .1); } .row-switch:focus-visible .row-switch-track { box-shadow: 0 0 0 3px rgba(47, 111, 237, .35); } .row-switch:active .row-switch-knob { width: 1.1rem; border-radius: .7rem; } @media (prefers-reduced-motion: reduce) { .row-switch-track, .row-switch-knob { transition: none; } } /* A row nobody wants mentioned. Still readable — it is a decision, and it has to be findable to be undone — but plainly out of the way. */ table.tbl tr.is-silent > td:not(.mention-col) { opacity: .45; } /* A row that opens the rows under it. The caret turns; nothing moves. */ .expander-col { width: 1.6rem; padding-right: 0 !important; text-align: center; } .expander { all: unset; cursor: pointer; display: inline-block; width: 1.2rem; line-height: 1.2rem; color: var(--muted); font-size: .9rem; border-radius: var(--radius); transition: transform .12s ease, color .12s ease; } .expander:hover { color: var(--secondary); } .expander:focus-visible { outline: 2px solid var(--secondary); outline-offset: 1px; } .expander.is-open { transform: rotate(90deg); color: var(--text); } /* The absences themselves, set back and quieter than the person above them. Read as one block hanging off the person's row: their row is shaded with the group while it is open, and a spine runs down the first column so where the group starts and stops is not something to work out from shading alone. */ table.tbl tr.absence-row > td { background: var(--surface); font-size: .8rem; } table.tbl tr.absence-row > td:nth-child(2) { color: var(--muted); } table.tbl tr.absence-row:hover > td { background: var(--surface-hover); } /* Public holidays: one switch and, when it is on, what a holiday becomes. Set apart from the table below it, because it is not one of its rows. */ .holiday-block.is-on { border-color: var(--secondary); } .holiday-head { display: flex; align-items: flex-start; gap: .75rem; } .holiday-head strong { color: var(--heading); } /* Four equal columns, not four things sharing whatever they can take. As a flex row they were sized by their contents and aligned on their bottom edge, so the one field carrying a note under it pushed its three neighbours up and left the labels on different lines. A grid gives each the same width; aligning at the TOP puts every label on one line and lets the note hang below its own column, where it belongs. */ .holiday-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; gap: .85rem; margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--border); } .holiday-fields .field { min-width: 0; } /* The help under a field is the field's, not the row's: kept narrow enough to read and out of the way of the boxes beside it. */ .holiday-fields .help { margin-top: .3rem; line-height: 1.45; } .holiday-note { margin: .7rem 0 0; max-width: 62rem; } /* Two columns on a laptop, one on a phone: four boxes of nine characters is not four fields, it is a puzzle. */ @media (max-width: 70rem) { .holiday-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 40rem) { .holiday-fields { grid-template-columns: 1fr; } } /* A cell that opens its row. Only the cursor and the name's colour on hover: it is the same action as the chevron beside it, not a second control, and dressing it as a button would say otherwise. */ .is-openable { cursor: pointer; } .is-openable:hover strong { color: var(--secondary); } /* The head of the group belongs to it. */ table.tbl tr.is-expanded > td { background: var(--surface); } table.tbl tr.is-expanded > td:first-child { box-shadow: inset 2px 0 0 var(--secondary); } /* The indent, and the line that makes it a group rather than four loose rows. Drawn on the cell rather than as a border on the row: a border on a table row is a suggestion browsers are free to ignore. */ table.tbl tr.absence-row > td:first-child { position: relative; } table.tbl tr.absence-row > td:first-child::before { content: ""; position: absolute; top: 0; bottom: 0; left: .78rem; border-left: 2px solid var(--border-strong); } /* Stopping halfway down the last one, so the group closes instead of running into whoever is underneath. */ table.tbl tr.absence-row.is-last > td:first-child::before { bottom: 50%; } /* And a stub across to the row's own content, which is what makes it read as hanging off the spine rather than sitting beside it. */ table.tbl tr.absence-row > td:first-child::after { content: ""; position: absolute; left: .78rem; top: 50%; width: .45rem; border-top: 2px solid var(--border-strong); } table.tbl tr.absence-row > td:nth-child(2) { padding-left: .35rem; } /* One absence, drawn the way Clockify holds it: the description first, because that is the line people read there, then where it is booked and its tag. */ .as-entry { margin-top: .35rem; padding-left: .55rem; border-left: 2px solid var(--border); } .as-entry-said { font-size: .8rem; color: var(--text); } .as-entry-where { font-size: .75rem; color: var(--muted); margin-top: .1rem; } .as-entry-where .sep { opacity: .5; padding: 0 .15rem; } .as-entry-tag { display: inline-block; margin-left: .35rem; padding: 0 .3rem; border: 1px solid var(--field-border); border-radius: 2rem; font-size: .7rem; color: var(--muted); } /* A number that opens something. It is a button, because it does something rather than going somewhere, and it reads as the number it is. */ .linkish { all: unset; cursor: pointer; font: inherit; color: inherit; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: .2em; } .linkish:hover { color: var(--secondary); } .linkish:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; } /* Fields that are one question ------------------------------------------------ A bordered group rather than a heading and a gap: the boxes inside it are only asked in one mode, and a rule that appears and disappears with them makes that obvious without a sentence saying so. */ .field-group { grid-column: 1 / -1; margin: .3rem 0 .2rem; padding: .9rem 1rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); } .field-group > legend { padding: 0 .45rem; margin-left: -.45rem; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); } .field-group .group-help { margin: 0 0 .8rem; max-width: 46rem; } .field-group .form-grid { margin: 0; } /* The specimen answer, beside the boxes read off it. Two columns where there is room, stacked where there is not — the example is useless if it is not on screen at the same time as the fields. */ .shape-example { display: grid; grid-template-columns: minmax(18rem, 1fr) minmax(16rem, 1fr); gap: 1rem; margin: 0 0 1rem; } .shape-json { margin: 0; padding: .7rem .8rem; overflow-x: auto; background: var(--card-bg); border: 1px solid var(--field-border); border-radius: var(--radius); font-size: .74rem; line-height: 1.55; white-space: pre; } .shape-json .k { color: var(--muted); } .shape-json .s { color: var(--secondary); } .shape-json .v { color: var(--success, var(--text)); } .shape-key { margin: 0; font-size: .78rem; } .shape-key dt { font-weight: 600; color: var(--heading); } .shape-key dd { margin: 0 0 .5rem; color: var(--muted); } @media (max-width: 900px) { .shape-example { grid-template-columns: 1fr; } } /* A tenant that is stood in for. Said plainly, because a form that has just hidden half of itself and contacts nothing looks like one that broke. */ .stood-in { padding: .9rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); } .stood-in p { margin: 0 0 .6rem; font-size: .84rem; max-width: 52rem; } .stood-in p:last-of-type { margin-bottom: .8rem; } /* A number and the unit it is in. Beside the box, not under it: "8" on its own is a question, and a unit three lines below has already been read past. */ .with-suffix { display: flex; align-items: center; gap: .45rem; } .with-suffix input { width: 7rem; } .with-suffix .suffix { font-size: .8rem; color: var(--muted); white-space: nowrap; } .form-actions { display: flex; gap: .6rem; align-items: center; padding-top: .4rem; } /* The tail of a log file. Monospaced, scrolls on its own, and never widens the page: a stack trace is one very long line, and the rest of the console should not have to make room for it. */ .log-tail { margin: 0; padding: .8rem .9rem; max-height: 22rem; overflow: auto; background: var(--surface); border-radius: var(--radius); font-size: .76rem; line-height: 1.5; white-space: pre; tab-size: 2; color: var(--text); } /* A row that has just arrived, so the eye can find it in a table that is changing under it. */ @keyframes live-in { from { background: rgba(47, 111, 237, .14); } to { background: transparent; } } tr.is-new { animation: live-in 1.6s ease-out; } @media (prefers-reduced-motion: reduce) { tr.is-new { animation: none; } } /* ── Login ───────────────────────────────────────────────────────────── */ /* The band is sized by its content and the card is pulled up over it, so the seam between the two grounds always falls INSIDE the card — no line of text can end up sitting on the join, whatever the name or tagline does. */ .login-page { min-height: 100vh; display: flex; flex-direction: column; background: var(--body-bg); } .login-hero { background: linear-gradient(180deg, var(--sidebar-top) 0%, var(--hero-bottom) 100%); padding: clamp(2.5rem, 8vh, 4rem) 1rem calc(clamp(2.5rem, 8vh, 4rem) + 2.75rem); display: flex; justify-content: center; } .login-brand { display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--on-dark); } .login-brand .brand-mark { margin-bottom: .85rem; } .login-brand h1 { color: var(--on-dark); font-size: 1.24rem; font-weight: 600; letter-spacing: .005em; } .login-tagline { font-size: .62rem; font-weight: 500; letter-spacing: .17em; text-transform: uppercase; color: rgba(255, 255, 255, .55); margin-top: .4rem; } .login-card { width: 100%; max-width: 26rem; margin: -2.75rem auto 0; /* the overlap */ padding: 0 1rem clamp(2rem, 6vh, 3.5rem); flex: 1; } /* The task belongs with the form it starts, not with the identity above it. */ .login-heading { margin-bottom: 1.25rem; } .login-heading h2 { font-size: 1.05rem; font-weight: 600; } .login-heading p { color: var(--muted); font-size: .82rem; margin: .2rem 0 0; } .login-foot { display: flex; flex-direction: column; align-items: center; gap: .7rem; text-align: center; color: var(--muted); font-size: .76rem; margin-top: 1.15rem; } .login-foot p { margin: 0; } .login-docs { display: inline-flex; align-items: center; gap: .35rem; color: var(--primary); font-size: .78rem; font-weight: 500; padding: .3rem .1rem; border-radius: 3px; } .login-docs:hover { text-decoration: underline; } .login-docs:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; } /* ── Denied page ─────────────────────────────────────────────────────── */ .denied { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem; text-align: center; padding: 2rem; } .denied .face { font-size: 4.5rem; animation: blink 1.6s ease-in-out infinite; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .15; } } /* ── Misc ────────────────────────────────────────────────────────────── */ .muted { color: var(--muted); } .small { font-size: .8rem; } .pre { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .8rem; font-size: .78rem; white-space: pre-wrap; word-break: break-word; max-height: 26rem; overflow: auto; margin: 0; } .chips { display: flex; flex-wrap: wrap; gap: .35rem; } .chip { background: var(--surface); border: 1px solid var(--border); border-radius: 1rem; padding: .15rem .55rem; font-size: .76rem; } .pagination { display: flex; gap: .3rem; flex-wrap: wrap; padding: .9rem 1.1rem; } .pagination a, .pagination span { padding: .3rem .6rem; border: 1px solid var(--border); border-radius: var(--radius); font-size: .8rem; color: var(--text); background: var(--card-bg); } .pagination .active span { background: var(--primary); color: var(--on-dark); border-color: var(--primary); } .inline-form { display: inline; } @media (max-width: 1200px) { .tiles { grid-template-columns: repeat(2, 1fr); } .grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 900px) { :root { --sidebar-w: 0px; } .sidebar { display: none; } .grid, .grid-2, .tiles, .form-grid { grid-template-columns: 1fr; } .span2, .span3 { grid-column: auto; } } /* Password requirements -------------------------------------------------- The marker is drawn, not typed: a tick as a CSS `content` escape is one more encoding layer between this file and the screen, and it only has to survive one bad round-trip to render as mojibake. A ring, a fill and two borders rotated 45deg cannot. Neutral until typing starts, so an untouched form is not a wall of red, and shape carries the state as well as colour. */ .reqs { list-style: none; margin: .55rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr)); gap: .3rem .9rem; } .reqs li { display: flex; align-items: center; gap: .45rem; font-size: .78rem; color: var(--muted); transition: color .12s ease; } .reqs .mark { flex: 0 0 auto; width: .82rem; height: .82rem; border-radius: 50%; border: 1.5px solid var(--border); position: relative; transition: background .12s ease, border-color .12s ease; } /* met: filled disc with a tick drawn from two borders */ .reqs li.met { color: var(--success); } .reqs li.met .mark { background: var(--success); border-color: var(--success); } .reqs li.met .mark::after { content: ""; position: absolute; left: .26rem; top: .11rem; width: .2rem; height: .38rem; transform: rotate(45deg); border: solid var(--on-dark); border-width: 0 1.5px 1.5px 0; } /* unmet: an empty ring. Not red — nothing has gone wrong, it is just not done */ .reqs li.unmet .mark { border-color: var(--border); } /* Password field row: the input, then Show and Generate beside it. */ .pw-row { display: flex; align-items: stretch; gap: .4rem; } .pw-row input { flex: 1 1 auto; min-width: 0; } .pw-row .btn { flex: 0 0 auto; white-space: nowrap; } /* The generated value, offered once, in a form you can select in one click. */ .pw-made { margin-top: .5rem; padding: .5rem .65rem; background: var(--info-wash); border: 1px solid var(--border); border-radius: .35rem; font-size: .78rem; color: var(--text); display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; } .pw-made .val { font-family: var(--font-mono); font-size: .82rem; -webkit-user-select: all; user-select: all; word-break: break-all; } /* Footbar ----------------------------------------------------------------- The console is three in-flow siblings — topbar, content, footbar — laid beside a fixed sidebar. The footer takes the SAME --sidebar-w offset as the other two, so the narrow-screen rule that zeroes that variable already handles the mobile case; there is no separate mobile footer to write. body.app makes those three a column so .content absorbs the slack: on a short page the bar rests at the bottom of the viewport, on a long one at the end of the document, and in neither case does it float over the content. The fixed .sidebar is out of flow and is not a flex item, so no wrapper is needed. The class scopes all of this to the signed-in layout — the sign-in and denied pages build their own columns and would fight a flex parent. */ body.app { min-height: 100vh; display: flex; flex-direction: column; } /* Mobile browsers count the collapsing URL bar inside 100vh, which parks the bar just below the fold on an otherwise empty page. */ @supports (min-height: 100dvh) { body.app { min-height: 100dvh; } } body.app > .content { flex: 1 0 auto; } body.app > .topbar, body.app > .footbar { flex: 0 0 auto; } /* White with a hairline, bookending the topbar: on the page canvas a grey footer would simply not be there, and a short page would appear to stop for no reason. Owner left under the brand, build right under the account — the topbar's own division, kept. */ .footbar { margin-left: var(--sidebar-w); padding: .85rem 1.5rem; background: var(--card-bg); border-top: 1px solid var(--border); display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; font-size: .74rem; color: var(--muted); } /* Three or four short facts, laid out as a row that may wrap. Each is unbreakable inside itself, so a phone drops one to the next line rather than splitting "release" from its number. */ .colophon-ver { margin-left: auto; display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .2rem .6rem; } .colophon-env, .colophon-build, .colophon-deployed { white-space: nowrap; } .colophon-build { opacity: .8; } /* One click takes the whole build id — and only the build id — into a ticket. */ .colophon-ver .mono { -webkit-user-select: all; user-select: all; } /* When it went out. Set as a chip rather than as more footer text: it answers a different kind of question from the two numbers beside it — not "which one", but "how long has this been the one". */ .colophon-deployed { padding: .05rem .4rem; border: 1px solid var(--border); border-radius: 999px; display: inline-flex; align-items: center; gap: .3rem; color: var(--muted); } .colophon-clock { width: .72rem; height: .72rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; } /* The sign-in page is its own centred column; the same colophon sits under the card rather than in a bar. */ .login-colophon { margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: .5rem .75rem; justify-content: center; font-size: .72rem; color: var(--muted); } .login-colophon .colophon-ver { margin-left: 0; } /* Tiles that open something ------------------------------------------------ The tile is a