/* colorbackbody=247,248,250 colorbackvmenu1=255,255,255 colorbackhmenu1=255,255,255 colorbacktitle1=241,244,248 colorbacklineimpair1=255,255,255 colorbacklineimpair2=255,255,255 colorbacklinepair1=255,255,255 colorbacklinepair2=255,255,255 colorbacklinepairhover=241,244,248 colorbacklinepairchecked=238,240,254 $colortexttitlenotab=11,18,32 $colortexttitle=91,107,130 $colortext=0,0,0 $colortextlink=67,56,202 $colortextbackhmenu=000000 $colortextbackvmenu=222222 dol_hide_topmenu= dol_hide_leftmenu= dol_optimize_smallscreen= dol_no_mouse_hover= dol_screenwidth= dol_screenheight= fontsize=0.9375rem nbtopmenuentries=4 fontsizesmaller=0.75em topMenuFontSize=0.6875rem toolTipBgColor=rgba(255, 255, 255, 0.96) toolTipFontColor=#333 getDolGlobalString("THEME_SATURATE_RATIO")= (must be between 0 and 1) */ /* ========================================================================== COMMAND -- tokens ========================================================================== */ :root { color-scheme: light; /* Neutrals: a cool slate ramp. */ --c-ink: #0B1220; --c-ink-2: #263244; /* The quiet weight a data-table header is written against. It was named by that rule and never defined, so the declaration was dropped and headers fell back to full ink -- the loudest thing in the table. */ --c-ink-subtle: #5B6B82; --c-muted: #5B6B82; --c-faint: #8C9AAE; --c-hairline: #EEF0F3; --c-border: #E7E9EE; --c-border-strong: #C9D2DE; --c-surface: #FFFFFF; --c-canvas: #F7F8FA; --c-sunken: #F1F4F8; /* One accent. Indigo reads as "tool", not "brochure". */ --c-accent: #4F46E5; --c-accent-hover: #4338CA; --c-accent-ink: #4338CA; --c-accent-soft: #EEF0FE; /* Display > Skin and colors lets an administrator set the action button colour. Dolibarr resolves that setting into $butactionbg before this file is included, but the theme was painting its buttons from the accent above, so changing the setting did nothing at all. Take the resolved values, which already fall back to the theme's own defaults when nothing is configured. */ --c-btn-action: rgb(79,70,229); --c-btn-action-text: rgb(255,255,255); /* Filled actions follow Dolibarr's Skin and colors settings. Keep their focus/shadow tint derived from that same configured color too, so a custom action color never leaves an unrelated indigo halo behind. */ --c-btn-action-ring: color-mix(in srgb, var(--c-btn-action) 24%, transparent); --c-accent-ring: rgba(79, 70, 229, 0.22); --c-success: #0F7B4F; --c-warning: #96610A; --c-danger: #B3261E; --c-info: #2B5C8A; /* Eldy's compact, neutral sans-serif character, expressed through one deterministic stack. Liberation Sans is metrically compatible with Arial on the Linux-hosted browser and the remaining faces provide the same crisp fallback elsewhere. Respect THEME_FONT_FAMILY when configured. */ --c-font: "Liberation Sans", Arial, Tahoma, Verdana, Helvetica, sans-serif; --c-mono: "SF Mono", "JetBrains Mono", "Cascadia Mono", Menlo, Consolas, monospace; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --r-sm: 6px; --r: 8px; --r-lg: 12px; --r-xl: 16px; --r-pill: 999px; --sh-sm: 0 1px 2px rgba(11, 18, 32, 0.035); --sh: 0 1px 2px rgba(11, 18, 32, 0.035), 0 5px 14px -5px rgba(11, 18, 32, 0.07); --sh-md: 0 2px 4px rgba(11, 18, 32, 0.04), 0 12px 24px -6px rgba(11, 18, 32, 0.09); --sh-lg: 0 24px 64px -12px rgba(11, 18, 32, 0.28), 0 4px 12px rgba(11, 18, 32, 0.08); --bar-h: 60px; --control-h: 40px; --table-row-h: 50px; --t: 120ms cubic-bezier(0.4, 0, 0.2, 1); /* Dolibarr's documented variable contract -- core and third-party module CSS reference these names, so all of them stay defined. */ --colorbackbody: var(--c-canvas); --colorbackhmenu1: var(--c-surface); --colorbackvmenu1: var(--c-surface); --colorbacktitle1: var(--c-sunken); --colorbacktabcard1: var(--c-surface); --colorbacktabactive: var(--c-accent-soft); --colorbacklineimpair1: var(--c-surface); --colorbacklineimpair2: var(--c-surface); --colorbacklinepair1: var(--c-surface); --colorbacklinepair2: var(--c-surface); --colorbacklinepairhover: var(--c-sunken); --colorbacklinepairchecked: var(--c-accent-soft); --colorbacklinebreak: var(--c-sunken); --colorbackgrey: var(--c-sunken); --colorbackmobilemenu: var(--c-surface); --colortopbordertitle1: var(--c-accent); --colortext: var(--c-ink); --colortextlink: var(--c-accent-ink); --colortexttitle: var(--c-ink); --colortexttitlelink: var(--c-accent-ink); --colortexttitlenotab: var(--c-ink); --colortexttitlenotab2: var(--c-accent-ink); --colortextbackhmenu: var(--c-ink); --colortextbackvmenu: var(--c-ink); --colortextbacktab: var(--c-ink); --colorwhite: #ffffff; --colorblack: var(--c-ink); --inputbackgroundcolor: var(--c-surface); --inputbackgroundcolordisabled: var(--c-sunken); --inputbordercolor: var(--c-border); --inputcolordisabled: var(--c-faint); --fieldrequiredcolor: var(--c-ink); --tableforfieldcolor: var(--c-muted); --tablevalidbgcolor: var(--c-accent-soft); --oddevencolor: var(--c-ink); --listetotal: var(--c-accent-ink); --tooltipbgcolor: rgba(255, 255, 255, 0.96); --tooltipfontcolor: #333; --refidnocolor: var(--c-muted); --colorboxiconbg: var(--c-sunken); --colorboxstatsborder: var(--c-border); --infoboxmoduleenabledbgcolor: var(--c-accent-soft); --dolgraphbg: var(--c-surface); --heightrow: 155%; --amountremaintopaycolor: var(--c-danger); --amountremaintopaybackcolor: transparent; --amountpaymentcomplete: var(--c-success); --productlinestockod: var(--c-success); --productlinestocktoolow: var(--c-danger); --colortextlink-h: 244; --colortextlink-s: 75%; --colortextlink-l: 51%; --colortextlink-a: 1; } /* ========================================================================== Base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; background: var(--c-canvas); color: var(--c-ink); font-family: var(--c-font); font-size: 0.9375rem; line-height: 1.5; font-kerning: normal; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Dolibarr and installed modules still assign their own font stacks to labels, controls and tables, sometimes with !important and after the theme sheet. The mainbody id gives COMMAND's global typography contract enough specificity to remain authoritative without adding module-specific rules. Icon and code faces remain explicit exceptions at the same specificity. */ body#mainbody :where(*) { font-family: var(--c-font) !important; } body#mainbody :where(.fa, .fas, .far, .fab, [class*="fa-"], .icon, [class^="icon-"]) { font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", FontAwesome !important; } body#mainbody :where(.fab, .fa-brands) { font-family: "Font Awesome 5 Brands" !important; } body#mainbody :where(code, pre, kbd) { font-family: var(--c-mono) !important; } /* Figures align in columns -- the highest-value typographic choice in an ERP. */ td, th, input, .amount, .refid, .badge, .cmd-kbd { font-variant-numeric: tabular-nums; } a { color: var(--colortextlink); text-decoration: none; transition: color var(--t); } a:hover { color: var(--c-accent-hover); } a.nounderline, a.nounderline:hover { text-decoration: none !important; } :focus-visible { outline: 2px solid var(--c-accent); outline-offset: 1px; border-radius: var(--r-sm); } h1, h2, h3, h4 { margin: 0 0 var(--sp-3) 0; font-weight: 620; line-height: 1.18; letter-spacing: -0.022em; color: var(--c-ink); } h1 { font-size: 1.75rem; } h2 { font-size: 1.375rem; } h3 { font-size: 1.125rem; } h4 { font-size: 1rem; } p { margin: 0 0 var(--sp-3) 0; } /* Spacing between paragraphs, not after the last one. A trailing margin inside a box that is sized to its content pushes that content off centre -- the login message sat 12px high in its own plate for exactly this reason -- and it is never what the last paragraph in a container wants. */ p:last-child { margin-bottom: 0; } hr { border: 0; border-top: 1px solid var(--c-hairline); margin: var(--sp-4) 0; } img { border: 0; vertical-align: middle; } code, pre, kbd { font-family: var(--c-mono); font-size: 0.9em; } ::placeholder { color: var(--c-faint); opacity: 1; } ::selection { background: var(--c-accent-soft); color: var(--c-accent-ink); } * { scrollbar-width: thin; scrollbar-color: var(--c-border-strong) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--c-border-strong); border-radius: var(--r-pill); border: 2px solid var(--c-canvas); } /* ========================================================================== Utilities Dolibarr's PHP emits these class names and depends on them for layout, not decoration, so they are behavioural and reimplemented in meaning. ========================================================================== */ /* Deliberately NOT !important. Dolibarr ships every popup's host element as