/* Workspace Theme V.1.0.0 Designed by Live Design https://livedesign.ro Same structure and naming as the theme's app-theme.css, with the palette taken from the Workspace design: navy ink, green accents, light neutral surfaces. Token layers, in this order: 1. raw colours --lvd-color-* 2. semantic tokens --lvd-cc-* (what a role means, not what colour it is) 3. component tokens --lvd-wsp-* (declared inside each module stylesheet) Components never reference raw colours directly. Restyling the app means editing layer 2, not hunting through modules. */ /*----------------------------- VARIABLES -----------------------------*/ :root { /* COLORS */ --lvd-color-text:#4a5468; --lvd-color-bg:#f0f0f3; /* Ink — navy, used for headings and primary surfaces */ --lvd-color-ink:#16223d; --lvd-color-ink-soft:#243356; --lvd-color-ink-on:#ffffff; /* Primary = the action green from the design */ --lvd-color-primary:#00a651; --lvd-color-primary-on:#ffffff; --lvd-color-primary-dark:#008a43; --lvd-color-primary-light:#e6f7ee; --lvd-color-primary-light-on:#00532a; /* Neutrals */ --lvd-color-white:#ffffff; --lvd-color-gray-100:#f7f7f9; --lvd-color-gray-200:#ececed; --lvd-color-gray-300:#e0e0e5; --lvd-color-gray-400:#9aa1b1; --lvd-color-gray-500:#6b7385; /* Status */ --lvd-color-success:#00a651; --lvd-color-success-light:#e6f7ee; --lvd-color-warning:#e8a300; --lvd-color-warning-light:#fdf4e0; --lvd-color-error:#e0464b; --lvd-color-error-light:#fdeced; --lvd-color-unknown:#b9bfcc; /* Semantic tokens */ --lvd-cc-surface: var(--lvd-color-white); --lvd-cc-surface-muted: var(--lvd-color-gray-100); --lvd-cc-page-bg: var(--lvd-color-bg); --lvd-cc-border: var(--lvd-color-gray-300); --lvd-cc-border-soft: var(--lvd-color-gray-200); --lvd-cc-title: var(--lvd-color-ink); --lvd-cc-text: var(--lvd-color-text); --lvd-cc-text-muted: var(--lvd-color-gray-500); --lvd-cc-link: var(--lvd-color-ink); --lvd-cc-link-hover: var(--lvd-color-primary); --lvd-cc-button-bg: var(--lvd-color-primary); --lvd-cc-button-text: var(--lvd-color-primary-on); --lvd-cc-button-bg-hover: var(--lvd-color-primary-dark); --lvd-cc-nav-active-bg: var(--lvd-color-ink); --lvd-cc-nav-active-text: var(--lvd-color-ink-on); --lvd-cc-value: var(--lvd-color-primary); /* FONTS System stack by default: a strict CSP (font-src 'self') rules out CDN fonts. To match the design exactly, drop Montserrat woff2 files into /assets/fonts/ and uncomment the @font-face block at the end of this file. */ --lvd-primary-font:'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --lvd-mono-font:ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; /* Font size */ --lvd-text-h1:26px; --lvd-text-h2:15px; --lvd-text-h3:18px; --lvd-text-body:14px; --lvd-text-s1:13px; --lvd-text-s2:11px; /* SPACING */ --lvd-gap:16px; --lvd-space-xs:6px; --lvd-space-s:10px; --lvd-space-m:16px; --lvd-space-l:24px; --lvd-space-xl:32px; /* RADIUS — generous, as in the design */ --lvd-radius-s:6px; --lvd-radius-m:10px; --lvd-radius-l:14px; --lvd-radius-pill:999px; /* ELEVATION — barely there; the design separates by radius and spacing */ --lvd-shadow-s:0 1px 2px rgba(22, 34, 61, .06); --lvd-shadow-m:0 2px 10px rgba(22, 34, 61, .07); /* LAYOUT */ --lvd-topbar-height:64px; --lvd-sidebar-width:250px; --lvd-width-content:1180px; } /*----------------------------- COMMON -----------------------------*/ html {-webkit-text-size-adjust:100%;} body {font-family:var(--lvd-primary-font); font-size:var(--lvd-text-body); line-height:1.5; color:var(--lvd-cc-text); background:var(--lvd-cc-page-bg); -webkit-font-smoothing:antialiased;} a {color:var(--lvd-cc-link); text-decoration:none;} a:hover {color:var(--lvd-cc-link-hover);} h1, h2, h3, h4 {color:var(--lvd-cc-title); font-weight:700; line-height:1.25;} code, pre {font-family:var(--lvd-mono-font); font-size:var(--lvd-text-s1);} button {font-family:inherit; font-size:inherit; cursor:pointer;} input, select, textarea {font-family:inherit; font-size:var(--lvd-text-body); color:var(--lvd-cc-title);} /* Autofill keeps the field readable instead of the browser's yellow */ input:-webkit-autofill, input:-webkit-autofill:focus {-webkit-text-fill-color:var(--lvd-cc-title); -webkit-box-shadow:0 0 0 1000px var(--lvd-color-white) inset;} /*----------------------------- TYPOGRAPHY -----------------------------*/ .lvd-wsp-page-title {font-size:var(--lvd-text-h1); letter-spacing:-.01em;} .lvd-wsp-card-title {font-size:var(--lvd-text-h2); text-transform:uppercase; letter-spacing:.06em; color:var(--lvd-cc-text-muted); font-weight:700;} .lvd-wsp-card-lead {font-size:var(--lvd-text-s1); color:var(--lvd-cc-text-muted); margin-top:var(--lvd-space-xs);} .lvd-wsp-note {font-size:var(--lvd-text-s2); color:var(--lvd-color-gray-400); margin-top:var(--lvd-space-s);} .lvd-wsp-mono {font-family:var(--lvd-mono-font); font-size:var(--lvd-text-s1); color:var(--lvd-cc-title);} .lvd-wsp-hint {font-size:var(--lvd-text-s2); color:var(--lvd-color-gray-400); margin-top:4px;} .lvd-wsp-req {color:var(--lvd-color-error);} /*----------------------------- BUTTONS -----------------------------*/ .lvd-wsp-btn {display:inline-flex; align-items:center; gap:8px; padding:9px 18px; background:var(--lvd-cc-button-bg); color:var(--lvd-cc-button-text); border:1px solid transparent; border-radius:var(--lvd-radius-pill); font-size:var(--lvd-text-s1); font-weight:700; transition:background .15s ease;} .lvd-wsp-btn:hover {background:var(--lvd-cc-button-bg-hover); color:var(--lvd-cc-button-text);} .lvd-wsp-btn svg {fill:currentColor;} .lvd-wsp-btn-block {width:100%; justify-content:center;} .lvd-wsp-btn-ghost {background:transparent; color:var(--lvd-cc-title); border-color:var(--lvd-cc-border);} .lvd-wsp-btn-ghost:hover{background:var(--lvd-cc-surface-muted); color:var(--lvd-cc-title);} .lvd-wsp-btn-danger {background:var(--lvd-color-error);} .lvd-wsp-btn-danger:hover{background:#c53b40;} .lvd-wsp-link-btn {background:none; border:0; padding:0; color:var(--lvd-color-primary); font-size:var(--lvd-text-s1); font-weight:600; text-decoration:underline;} .lvd-wsp-link-btn:hover {color:var(--lvd-color-primary-dark);} /*----------------------------- FORMS -----------------------------*/ .lvd-wsp-label {display:block; font-size:var(--lvd-text-s1); font-weight:600; color:var(--lvd-cc-title); margin-bottom:6px;} .lvd-wsp-input, .lvd-wsp-select {width:100%; padding:10px 14px; background:var(--lvd-color-white); border:1px solid var(--lvd-cc-border); border-radius:var(--lvd-radius-m); transition:border-color .15s ease;} .lvd-wsp-input:focus, .lvd-wsp-select:focus {border-color:var(--lvd-color-primary);} .lvd-wsp-select {cursor:pointer;} .lvd-wsp-input-code {font-family:var(--lvd-mono-font); font-size:24px; letter-spacing:.4em; text-align:center; padding:14px;} .lvd-wsp-field {margin-bottom:var(--lvd-space-m);} .lvd-wsp-field-row {display:grid; grid-template-columns:1fr 1fr; gap:var(--lvd-gap);} .lvd-wsp-form-inline {display:flex; gap:var(--lvd-space-s); align-items:center; flex-wrap:wrap; margin-top:var(--lvd-space-m);} .lvd-wsp-form-inline .lvd-wsp-select {width:auto; min-width:280px;} /*----------------------------- TABLE -----------------------------*/ .lvd-wsp-table-wrap {overflow-x:auto; margin-top:var(--lvd-space-m);} .lvd-wsp-table {width:100%; border-collapse:collapse; font-size:var(--lvd-text-s1);} .lvd-wsp-table th {text-align:left; padding:8px 12px; border-bottom:2px solid var(--lvd-cc-border-soft); font-size:var(--lvd-text-s2); text-transform:uppercase; letter-spacing:.05em; color:var(--lvd-cc-text-muted); white-space:nowrap;} .lvd-wsp-table td {padding:12px; border-bottom:1px solid var(--lvd-cc-border-soft); vertical-align:middle;} .lvd-wsp-table tr:last-child td {border-bottom:0;} .lvd-wsp-tlink {font-weight:700; color:var(--lvd-cc-title);} .lvd-wsp-tlink:hover {color:var(--lvd-color-primary);} .lvd-wsp-deflist {display:grid; grid-template-columns:200px 1fr; gap:0; margin-top:var(--lvd-space-m); font-size:var(--lvd-text-s1);} .lvd-wsp-deflist dt {padding:10px 0; color:var(--lvd-cc-text-muted); font-weight:600; border-bottom:1px solid var(--lvd-cc-border-soft);} .lvd-wsp-deflist dd {padding:10px 0; color:var(--lvd-cc-title); font-weight:700; border-bottom:1px solid var(--lvd-cc-border-soft); display:flex; align-items:center; gap:var(--lvd-space-s); flex-wrap:wrap;} .lvd-wsp-deflist dt:last-of-type, .lvd-wsp-deflist dd:last-of-type {border-bottom:0;} /*----------------------------- STATUS DOTS & BADGES -----------------------------*/ /* One vocabulary for state across the whole app: the sidebar dot, the table dot and the detail badge all read from the same four states. */ .lvd-wsp-dot {width:8px; height:8px; border-radius:50%; flex-shrink:0; display:inline-block; background:var(--lvd-color-unknown);} .lvd-wsp-dot.is-ok {background:var(--lvd-color-success);} .lvd-wsp-dot.is-warning {background:var(--lvd-color-warning);} .lvd-wsp-dot.is-critical{background:var(--lvd-color-error);} .lvd-wsp-dot.is-unknown {background:var(--lvd-color-unknown);} .lvd-wsp-status {display:inline-flex; align-items:center; gap:8px; white-space:nowrap;} .lvd-wsp-status-label {font-weight:700; color:var(--lvd-cc-title);} .lvd-wsp-badge {display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:var(--lvd-radius-pill); font-size:var(--lvd-text-s1); font-weight:700; background:var(--lvd-color-gray-200); color:var(--lvd-cc-title);} .lvd-wsp-badge.is-ok {background:var(--lvd-color-success-light); color:#00532a;} .lvd-wsp-badge.is-warning {background:var(--lvd-color-warning-light); color:#7a5600;} .lvd-wsp-badge.is-critical {background:var(--lvd-color-error-light); color:#8f2226;} .lvd-wsp-chips {display:flex; gap:8px; flex-wrap:wrap;} .lvd-wsp-chip {padding:5px 12px; border-radius:var(--lvd-radius-pill); background:var(--lvd-color-white); border:1px solid var(--lvd-cc-border); font-size:var(--lvd-text-s2); font-weight:700; color:var(--lvd-cc-text-muted); white-space:nowrap;} .lvd-wsp-chip.is-ok {color:#00532a; border-color:var(--lvd-color-success); background:var(--lvd-color-success-light);} .lvd-wsp-chip.is-warning {color:#7a5600; border-color:var(--lvd-color-warning); background:var(--lvd-color-warning-light);} .lvd-wsp-chip.is-critical {color:#8f2226; border-color:var(--lvd-color-error); background:var(--lvd-color-error-light);} .lvd-wsp-chip.is-unknown {color:var(--lvd-cc-text-muted);} /*----------------------------- FLASH -----------------------------*/ .lvd-wsp-flash {padding:12px 16px; border-radius:var(--lvd-radius-m); margin-bottom:var(--lvd-space-m); font-size:var(--lvd-text-s1); font-weight:600; border:1px solid transparent;} .lvd-wsp-flash.is-success {background:var(--lvd-color-success-light); color:#00532a; border-color:#a8dfc2;} .lvd-wsp-flash.is-error {background:var(--lvd-color-error-light); color:#8f2226; border-color:#f3b6b8;} .lvd-wsp-flash.is-info {background:#eaf1fd; color:#1c3f7c; border-color:#bcd2f2;} /*----------------------------- ICONS -----------------------------*/ .lvd-wsp-icon {fill:currentColor; vertical-align:middle;} /*############################# MOBILE #############################*/ @media (min-width:1px) and (max-width:767px) { :root {--lvd-text-h1:22px;} .lvd-wsp-field-row {grid-template-columns:1fr;} .lvd-wsp-deflist {grid-template-columns:1fr;} .lvd-wsp-deflist dt {padding-bottom:0; border-bottom:0;} .lvd-wsp-deflist dd {padding-top:2px;} .lvd-wsp-form-inline .lvd-wsp-select {min-width:0; width:100%;} } /*############################# END MOBILE #############################*/ /*----------------------------- SELF-HOSTED FONT (optional) -----------------------------*/ /* Drop Montserrat-Regular.woff2 / -SemiBold / -Bold into /assets/fonts/ and uncomment. A strict CSP allows only same-origin fonts, which is why this is self-hosted rather than a CDN link. @font-face { font-family:'Montserrat'; src:url('/assets/fonts/Montserrat-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; } @font-face { font-family:'Montserrat'; src:url('/assets/fonts/Montserrat-SemiBold.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; } @font-face { font-family:'Montserrat'; src:url('/assets/fonts/Montserrat-Bold.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; } */