/* * base.css — shared across every Yamis page (loaded first by * AssetHelper::cssLinks() before any page-specific file). * * ── Design direction ──────────────────────────────────────────────── * The name is the brief. Ymir is the primordial giant of Norse myth, * formed in Ginnungagap -- the yawning void between Muspelheim (fire) * and Niflheim (ice) -- and the world was forged from his body. The * product's own tagline already says "Build worlds from nothing". * * So the palette is that myth, not a generic dev-tool theme (this file * previously used GitHub's exact hex values -- #0d1117 / #58a6ff -- and * looked like every other tool as a result): * void deep cold blue-black, the gap itself * stone raised surfaces, slabs of the giant's body * rime pale frost blue -- the STRUCTURAL accent (links, marks, focus) * ember forge gold -- the ENERGY accent, deliberately rationed to * primary actions and whatever is live right now. Gold instead * of the usual green "go" colour is the one real risk here: it * is the only warm thing on the page, so it pulls the eye * exactly where something is happening, and it is what makes * the whole thing read as forged rather than merely dark. * * Type carries the personality without any webfont (this is a self- * hosted tool -- no CDN dependency, works offline, leaks nothing): * --font-display system serif, used ONLY for greetings/page titles at * large sizes. A serif in an ops tool is the * unexpected move that makes it feel like a keep * rather than a control panel. * --font-ui system sans for everything interactive. * --font-mono tabular figures for every id/count/percentage/clock, * so numbers align down a column instead of wobbling. * * Colors are CSS custom properties so the light/dark toggle (base.js, * UserMenu's dropdown) only swaps the :root block, never a rule. Dark is * the default (bare :root); [data-theme="light"] on overrides. */ :root { /* ── Ginnungagap: the void ── */ --color-bg: #070A12; --color-bg-elevated: #0E1420; --color-bg-sunken: #050810; --color-bg-hover: #161E2E; --color-border: #1E2A3D; --color-border-subtle: #131C29; /* ── Niflheim: rime, frost, structure ── */ --color-text: #DCE6F2; --color-text-muted: #8296AE; --color-text-faint: #5A6A80; --color-accent: #8FB4D9; --color-accent-rgb: 143, 180, 217; --color-accent-strong: #B4D2EE; /* ── Muspelheim: the forge ── */ --color-ember: #E0A33E; --color-ember-rgb: 224, 163, 62; --color-ember-dim: #8A6524; --color-ember-bg: #251A08; /* ── Semantic ── */ --color-success: #5FBF8B; --color-success-bg: #0B241A; --color-danger: #E86A6A; --color-danger-bg: #2A0F12; --color-danger-rgb: 232, 106, 106; --color-warning: #E0A33E; --color-warning-bg: #251A08; --color-info-bg: #101E30; --color-neutral-bg: #161E2E; --color-neutral-text: #8296AE; --color-btn-green: #E0A33E; --color-btn-green-hover: #F0B85C; --color-btn-red: #B04848; --color-btn-blue: #2F4A6D; --color-btn-text: #0A0D16; /* ── Type ── */ --font-display: ui-serif, 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif; --font-ui: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: ui-monospace, 'JetBrains Mono', 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace; --radius: 10px; --radius-sm: 6px; } :root[data-theme="light"] { --color-bg: #F7F8FA; --color-bg-elevated: #FFFFFF; --color-bg-sunken: #EDF0F4; --color-bg-hover: #E8ECF2; --color-border: #D4DAE3; --color-border-subtle: #E4E8EE; --color-text: #16202E; --color-text-muted: #56657A; --color-text-faint: #7A8798; --color-accent: #2E5C87; --color-accent-rgb: 46, 92, 135; --color-accent-strong: #1D4165; --color-ember: #8A5D0F; --color-ember-rgb: 138, 93, 15; --color-ember-dim: #C39B54; --color-ember-bg: #FBF2DE; --color-success: #1C7A4C; --color-success-bg: #DEF5E8; --color-danger: #A82C2C; --color-danger-bg: #FBE6E6; --color-danger-rgb: 168, 44, 44; --color-warning: #8A5D0F; --color-warning-bg: #FBF2DE; --color-info-bg: #E4EDF6; --color-neutral-bg: #E8ECF2; --color-neutral-text: #56657A; --color-btn-green: #8A5D0F; --color-btn-green-hover: #A5730F; --color-btn-red: #A82C2C; --color-btn-blue: #2E5C87; --color-btn-text: #FFFFFF; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font-ui); background: var(--color-bg); color: var(--color-text); font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased; } /* Every number in this app -- ids, counts, percentages, clock times -- uses tabular figures so columns of them line up instead of wobbling. */ .num, td .num, .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } ::selection { background: rgba(var(--color-ember-rgb), 0.28); } :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 3px; } /* ── App shell: fixed sidebar + scrolling main ─────────────────────── */ body { display: flex; min-height: 100vh; } .app-sidebar { flex: 0 0 244px; width: 244px; background: var(--color-bg-elevated); border-right: 1px solid var(--color-border); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; /* The current-page marker sits at left:-12px, outside the link's own box, which otherwise gives the column its own horizontal scrollbar. */ overflow-x: hidden; } /* A hairline of forge light down the sidebar's edge -- the one ambient trace of the ember accent present on every page. */ .app-sidebar::after { content: ""; position: absolute; top: 0; bottom: 0; right: -1px; width: 1px; background: linear-gradient(180deg, transparent, rgba(var(--color-ember-rgb), 0.30) 22%, rgba(var(--color-ember-rgb), 0.30) 62%, transparent); pointer-events: none; } .sidebar-brand { display: block; padding: 20px 20px 18px; border-bottom: 1px solid var(--color-border-subtle); } .sidebar-brand img { height: 30px; display: block; } .sidebar-nav { flex: 1; padding: 14px 12px; } .sidebar-group + .sidebar-group { margin-top: 20px; } .sidebar-group-label { font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-text-faint); padding: 0 10px 7px; } .sidebar-link { display: block; padding: 8px 10px; border-radius: var(--radius-sm); color: var(--color-text-muted); text-decoration: none; font-size: 13.5px; position: relative; } .sidebar-link:hover { background: var(--color-bg-hover); color: var(--color-text); } /* The current page is the one place ember appears in the sidebar. */ .sidebar-link.is-current { background: var(--color-bg-hover); color: var(--color-text); font-weight: 600; } .sidebar-link.is-current::before { content: ""; position: absolute; left: -12px; top: 7px; bottom: 7px; width: 2px; border-radius: 0 2px 2px 0; background: var(--color-ember); } .sidebar-foot { padding: 12px; border-top: 1px solid var(--color-border-subtle); } .sidebar-foot .user-menu-trigger { width: 100%; justify-content: flex-start; } .sidebar-foot .user-menu-name { flex: 1; text-align: left; } /* Opens upward -- there is no room below it at the bottom of the column. */ .sidebar-foot .user-menu-panel { top: auto; bottom: calc(100% + 8px); left: 0; right: auto; min-width: 210px; } .app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } /* ── Page head ─────────────────────────────────────────────────────── */ .page-head { border-bottom: 1px solid var(--color-border-subtle); padding: 20px 32px 18px; display: flex; align-items: center; justify-content: space-between; gap: 20px; } .page-head h1 { font-family: var(--font-display); font-size: 24px; font-weight: 600; letter-spacing: 0.005em; } .container { max-width: 1080px; margin: 28px auto 64px; padding: 0 32px; width: 100%; } /* ── Section headings ──────────────────────────────────────────────── */ h2 { font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: 0.01em; margin-bottom: 14px; } h3 { font-size: 15px; font-weight: 600; letter-spacing: 0.01em; } /* Uppercase micro-label. Used for section eyebrows and table headers -- the same device in both places so the page reads as one system. */ .eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-text-faint); } /* ── Flashes ───────────────────────────────────────────────────────── */ .flash, .flash-error, .flash-token { padding: 11px 14px; border-radius: var(--radius-sm); margin-bottom: 18px; font-size: 13.5px; border: 1px solid transparent; } .flash { background: var(--color-success-bg); color: var(--color-success); border-color: rgba(95, 191, 139, 0.25); } .flash-error { background: var(--color-danger-bg); color: var(--color-danger); border-color: rgba(var(--color-danger-rgb), 0.28); } .flash-token { background: var(--color-info-bg); color: var(--color-accent-strong); font-family: var(--font-mono); word-break: break-all; border-color: var(--color-border); } .flash-token strong { color: var(--color-ember); font-family: var(--font-ui); } .hint { color: var(--color-text-muted); font-size: 13px; margin: 4px 0 12px; } .empty { text-align: center; padding: 44px 20px; color: var(--color-text-muted); border: 1px dashed var(--color-border); border-radius: var(--radius); } /* ── Tables ────────────────────────────────────────────────────────── */ table { width: 100%; border-collapse: collapse; margin-bottom: 24px; } th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--color-border-subtle); /* `anywhere` was wrong here: it also shrinks a column's min-content width, so real words got hyphen-less broken mid-letter ("NAM E", "Beas t") on any table with many columns -- confirmed on the Server Manager. `break-word` still breaks a genuinely too-long token (clone URL, hash, permission key) but never below a normal word's width. */ overflow-wrap: break-word; } th { color: var(--color-text-faint); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; border-bottom-color: var(--color-border); } td { font-size: 13.5px; vertical-align: top; } tbody tr:hover { background: var(--color-bg-elevated); } td a { color: var(--color-accent); text-decoration: none; } td a:hover { color: var(--color-accent-strong); text-decoration: underline; } /* ── Cards & forms ─────────────────────────────────────────────────── */ .form-card { background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 22px; margin-bottom: 22px; } .form-card h3 { margin-bottom: 16px; color: var(--color-text); } .form-row { margin-bottom: 14px; } .form-row label { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-faint); margin-bottom: 6px; } .form-row input, .form-row select, .form-row textarea { width: 100%; padding: 8px 11px; background: var(--color-bg-sunken); border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-text); font-size: 14px; font-family: inherit; } .form-row textarea { min-height: 64px; } .form-row input::placeholder, .form-row textarea::placeholder { color: var(--color-text-faint); } .form-row input:focus, .form-row select:focus, .form-row textarea:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.16); } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; } .form-grid .form-row.full { grid-column: 1 / -1; } /* ── Buttons ───────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 15px; border: 1px solid var(--color-border); background: var(--color-bg-hover); color: var(--color-text); border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; text-decoration: none; } .btn:hover { border-color: var(--color-text-faint); } /* Ember = the primary action. Rationed on purpose: at most one per view. */ .btn-green { background: var(--color-btn-green); color: var(--color-btn-text); border-color: transparent; } .btn-green:hover { background: var(--color-btn-green-hover); border-color: transparent; } .btn-red { background: transparent; color: var(--color-danger); border-color: rgba(var(--color-danger-rgb), 0.4); } .btn-red:hover { background: var(--color-danger-bg); border-color: var(--color-danger); } .btn-blue { background: var(--color-btn-blue); color: var(--color-text); border-color: transparent; } .btn-blue:hover { background: var(--color-accent); color: var(--color-btn-text); } .enabled { color: var(--color-success); } .disabled { color: var(--color-text-faint); } /* ── Status badges ─────────────────────────────────────────────────── */ .status-badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; border: 1px solid transparent; } .status-queued { background: var(--color-neutral-bg); color: var(--color-neutral-text); } /* Everything actively in flight wears the forge colour -- that is the whole point of rationing ember: if it glows, Yamis is working on it. */ .status-running, .status-planning, .status-stepping, .status-verifying, .status-critic { background: var(--color-ember-bg); color: var(--color-ember); border-color: rgba(var(--color-ember-rgb), 0.35); } .status-escalated { background: var(--color-warning-bg); color: var(--color-warning); } .status-paused { background: var(--color-neutral-bg); color: var(--color-neutral-text); } .status-completed { background: var(--color-success-bg); color: var(--color-success); border-color: rgba(95, 191, 139, 0.28); } .status-failed { background: var(--color-danger-bg); color: var(--color-danger); border-color: rgba(var(--color-danger-rgb), 0.3); } .status-cancelled { background: var(--color-neutral-bg); color: var(--color-text-faint); } /* ── User account dropdown (UserMenu.class.php) ────────────────────── */ .user-menu { position: relative; } .user-menu-trigger { display: flex; align-items: center; gap: 7px; background: none; border: 1px solid transparent; cursor: pointer; color: var(--color-text-muted); font-size: 13.5px; font-family: inherit; padding: 6px 10px; border-radius: var(--radius-sm); } .user-menu-trigger:hover { background: var(--color-bg-hover); color: var(--color-text); } .user-menu.open .user-menu-trigger { background: var(--color-bg-hover); color: var(--color-text); border-color: var(--color-border); } .user-menu-icon { display: flex; color: var(--color-text-faint); } .user-menu-chevron { display: flex; transition: transform 0.15s ease; } .user-menu.open .user-menu-chevron { transform: rotate(180deg); } .user-menu-panel { position: absolute; right: 0; top: calc(100% + 8px); background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius); min-width: 232px; padding: 7px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); z-index: 100; } .user-menu-header { padding: 9px 11px 11px; border-bottom: 1px solid var(--color-border); margin-bottom: 6px; } .user-menu-header-name { font-size: 14px; font-weight: 600; color: var(--color-text); } .user-menu-header-role { font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-ember); margin-top: 2px; } .user-menu-section-label { font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-text-faint); padding: 8px 11px 4px; } .user-menu-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 11px; border-radius: var(--radius-sm); border: none; background: none; color: var(--color-text); font-size: 13px; font-family: inherit; text-decoration: none; cursor: pointer; text-align: left; } .user-menu-item:hover { background: var(--color-bg-hover); } .user-menu-item-icon { display: flex; color: var(--color-text-faint); flex-shrink: 0; } .user-menu-item-danger:hover { color: var(--color-danger); } .user-menu-item-danger:hover .user-menu-item-icon { color: var(--color-danger); } .user-menu-divider { height: 1px; background: var(--color-border); margin: 7px 2px; } /* Below this the sidebar stops being a column and becomes a normal band across the top -- a 244px rail on a phone leaves nothing for the actual page. */ @media (max-width: 860px) { body { flex-direction: column; } .app-sidebar { flex: none; width: 100%; height: auto; position: static; border-right: none; border-bottom: 1px solid var(--color-border); } .app-sidebar::after { display: none; } .sidebar-brand { padding: 14px 16px 12px; } .sidebar-nav { display: flex; flex-wrap: wrap; gap: 14px; padding: 10px 12px; } .sidebar-group + .sidebar-group { margin-top: 0; } .sidebar-group { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; } .sidebar-group-label { padding: 0 8px 0 0; } .sidebar-link.is-current::before { display: none; } .sidebar-link.is-current { box-shadow: inset 0 -2px 0 var(--color-ember); } .sidebar-foot .user-menu-panel { top: calc(100% + 8px); bottom: auto; right: 0; left: auto; } .page-head { padding: 16px 16px 14px; } .container { margin: 20px auto 48px; padding: 0 16px; } .form-grid { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }