/* Copyright (C) 2026 Island Treasures Ltd * * This program is free software: you can redistribute it and/or modify * it under the terms of the GNU General Public License as published by * the Free Software Foundation, either version 3 of the License, or * (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * * You should have received a copy of the GNU General Public License * along with this program. If not, see . * * --------------------------------------------------------------------------- * ITOS — Island Treasures Operating System * The visual foundation. Self-contained; no @import, no CDN, no web font. * --------------------------------------------------------------------------- * * SCOPING RULE (non-negotiable) * Every selector in this file is nested under `.itos`. Not one bare element * selector, not one class that could collide. Dolibarr core and its themes own the * global namespace; ITOS is a guest inside it, and a guest that restyles `table` or * `.badge` breaks the customer's invoices. * * THEMING * All colour lives in custom properties on `.itos`. Dark mode is driven the same way * Dolibarr drives it (constant THEME_DARKMODEENABLED, see theme/eldy/global.inc.php): * 0 -> `.itos.itos-light` pin light * 1 -> `.itos` alone follow the OS via prefers-color-scheme * 2 -> `.itos.itos-dark` pin dark * ItosLayout::rootClass() emits the right class, so ITOS is never dark inside a light * Dolibarr chrome. `.itos-light` and `.itos-dark` also beat the media query, in both * directions, so a forced choice always wins. * * FONTS * The system stack only. Dolibarr sets its own font on ; ITOS inherits it for * prose and uses the system UI stack for numerals so that KPI tiles line up. */ /* =========================================================================== 1. Tokens =========================================================================== */ .itos { /* Neutrals — light */ --itos-bg: #f6f7f9; --itos-surface: #ffffff; --itos-surface-2: #f0f2f5; --itos-border: #dfe3e8; --itos-border-strong: #c4cbd4; --itos-text: #1c2530; --itos-text-soft: #5a6673; --itos-text-faint: #8b96a3; /* Semantics — light. Chosen for >= 4.5:1 against --itos-surface. */ --itos-ok: #1a7f4b; --itos-ok-bg: #e6f4ec; --itos-ok-border: #a8d9bf; --itos-info: #1d5fa8; --itos-info-bg: #e7f0fa; --itos-info-border: #a9c8e8; --itos-warn: #8a5a00; --itos-warn-bg: #fdf1dc; --itos-warn-border: #e8c98a; --itos-danger: #b3261e; --itos-danger-bg: #fceceb; --itos-danger-border: #edb2ae; --itos-muted: #5a6673; --itos-muted-bg: #eef0f3; --itos-muted-border: #d5dae0; /* Accent — Island Treasures. Used sparingly: focus rings and active tabs. */ --itos-accent: #0f766e; --itos-accent-soft: #d7f0ec; /* Spacing scale (4px base) */ --itos-s1: 4px; --itos-s2: 8px; --itos-s3: 12px; --itos-s4: 16px; --itos-s5: 24px; --itos-s6: 32px; --itos-s7: 48px; /* Type scale */ --itos-t-xs: 11px; --itos-t-sm: 12px; --itos-t-md: 13px; --itos-t-lg: 15px; --itos-t-xl: 19px; --itos-t-2xl: 26px; --itos-t-3xl: 32px; /* Radii, shadows, motion */ --itos-radius: 6px; --itos-radius-lg: 10px; --itos-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 1px 3px rgba(16, 24, 40, 0.06); --itos-shadow-lg: 0 4px 12px rgba(16, 24, 40, 0.10), 0 2px 4px rgba(16, 24, 40, 0.06); --itos-speed: 140ms; --itos-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; color: var(--itos-text); font-size: var(--itos-t-md); line-height: 1.5; } /* Dark: follow the OS, unless the page has pinned a mode. */ @media (prefers-color-scheme: dark) { .itos:not(.itos-light) { --itos-bg: #17191c; --itos-surface: #1f2226; --itos-surface-2: #26292e; --itos-border: #33383f; --itos-border-strong: #454b54; --itos-text: #e6e8ea; --itos-text-soft: #a6adb6; --itos-text-faint: #7c848e; --itos-ok: #57c98a; --itos-ok-bg: #14301f; --itos-ok-border: #2c6343; --itos-info: #6aa9e9; --itos-info-bg: #142434; --itos-info-border: #2d537c; --itos-warn: #e2b262; --itos-warn-bg: #33280f; --itos-warn-border: #6d5525; --itos-danger: #f0827a; --itos-danger-bg: #351a19; --itos-danger-border: #723734; --itos-muted: #a6adb6; --itos-muted-bg: #26292e; --itos-muted-border: #3b4048; --itos-accent: #4ec9bd; --itos-accent-soft: #12332f; --itos-shadow: 0 1px 2px rgba(0, 0, 0, 0.40), 0 1px 3px rgba(0, 0, 0, 0.30); --itos-shadow-lg: 0 4px 14px rgba(0, 0, 0, 0.50), 0 2px 4px rgba(0, 0, 0, 0.35); } } /* Dark: pinned by Dolibarr (THEME_DARKMODEENABLED = 2). Beats the media query. */ .itos.itos-dark { --itos-bg: #17191c; --itos-surface: #1f2226; --itos-surface-2: #26292e; --itos-border: #33383f; --itos-border-strong: #454b54; --itos-text: #e6e8ea; --itos-text-soft: #a6adb6; --itos-text-faint: #7c848e; --itos-ok: #57c98a; --itos-ok-bg: #14301f; --itos-ok-border: #2c6343; --itos-info: #6aa9e9; --itos-info-bg: #142434; --itos-info-border: #2d537c; --itos-warn: #e2b262; --itos-warn-bg: #33280f; --itos-warn-border: #6d5525; --itos-danger: #f0827a; --itos-danger-bg: #351a19; --itos-danger-border: #723734; --itos-muted: #a6adb6; --itos-muted-bg: #26292e; --itos-muted-border: #3b4048; --itos-accent: #4ec9bd; --itos-accent-soft: #12332f; --itos-shadow: 0 1px 2px rgba(0, 0, 0, 0.40), 0 1px 3px rgba(0, 0, 0, 0.30); --itos-shadow-lg: 0 4px 14px rgba(0, 0, 0, 0.50), 0 2px 4px rgba(0, 0, 0, 0.35); } /* =========================================================================== 2. Page shell =========================================================================== */ .itos { box-sizing: border-box; padding: var(--itos-s4) 0 var(--itos-s6); } .itos *, .itos *::before, .itos *::after { box-sizing: inherit; } .itos-page-head { margin: 0 0 var(--itos-s5); } .itos-page-title { margin: 0; font-size: var(--itos-t-2xl); font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; color: var(--itos-text); } .itos-page-subtitle { margin: var(--itos-s2) 0 0; font-size: var(--itos-t-lg); color: var(--itos-text-soft); max-width: 68ch; } .itos-page-body > * + * { margin-top: var(--itos-s5); } /* =========================================================================== 3. Grid =========================================================================== */ .itos-grid { display: grid; gap: var(--itos-s4); grid-template-columns: repeat(1, minmax(0, 1fr)); align-items: start; } /* Mobile first: one column, then widen. */ @media (min-width: 640px) { .itos-grid.itos-cols-2, .itos-grid.itos-cols-3, .itos-grid.itos-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .itos-grid.itos-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .itos-grid.itos-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 1400px) { .itos-grid.itos-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* A tile may span more than one column — but never more than the grid has. */ .itos-span-1 { grid-column: span 1; } @media (min-width: 640px) { .itos-span-2, .itos-span-3, .itos-span-4 { grid-column: span 2; } } @media (min-width: 1024px) { .itos-cols-3 .itos-span-3, .itos-cols-3 .itos-span-4 { grid-column: span 3; } .itos-cols-4 .itos-span-3 { grid-column: span 3; } .itos-cols-4 .itos-span-4 { grid-column: span 4; } } .itos-rows-2 { grid-row: span 2; } .itos-rows-3 { grid-row: span 3; } .itos-rows-4 { grid-row: span 4; } /* =========================================================================== 4. Card =========================================================================== */ .itos-card { background: var(--itos-surface); border: 1px solid var(--itos-border); border-radius: var(--itos-radius-lg); box-shadow: var(--itos-shadow); overflow: hidden; } .itos-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--itos-s3); padding: var(--itos-s3) var(--itos-s4); border-bottom: 1px solid var(--itos-border); background: var(--itos-surface-2); } .itos-card-title { margin: 0; font-size: var(--itos-t-lg); font-weight: 600; color: var(--itos-text); } .itos-card-actions { display: flex; gap: var(--itos-s2); flex-shrink: 0; } .itos-card-body { padding: var(--itos-s4); } .itos-card-body > * + * { margin-top: var(--itos-s3); } /* A card can carry a semantic accent on its left edge. */ .itos-card-ok { border-left: 3px solid var(--itos-ok); } .itos-card-info { border-left: 3px solid var(--itos-info); } .itos-card-warn { border-left: 3px solid var(--itos-warn); } .itos-card-danger { border-left: 3px solid var(--itos-danger); } .itos-card-muted { border-left: 3px solid var(--itos-muted-border); } /* =========================================================================== 5. Widget =========================================================================== */ .itos-widget { display: flex; flex-direction: column; min-width: 0; background: var(--itos-surface); border: 1px solid var(--itos-border); border-radius: var(--itos-radius-lg); box-shadow: var(--itos-shadow); transition: box-shadow var(--itos-speed) ease; } .itos-widget:hover { box-shadow: var(--itos-shadow-lg); } .itos-widget-head { display: flex; align-items: center; justify-content: space-between; gap: var(--itos-s2); padding: var(--itos-s3) var(--itos-s4); border-bottom: 1px solid var(--itos-border); border-top-left-radius: var(--itos-radius-lg); border-top-right-radius: var(--itos-radius-lg); } .itos-widget-title { margin: 0; font-size: var(--itos-t-md); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--itos-text-soft); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* The header tint is the widget's status at a glance. */ .itos-widget-ok .itos-widget-head { background: var(--itos-ok-bg); border-bottom-color: var(--itos-ok-border); } .itos-widget-ok .itos-widget-title { color: var(--itos-ok); } .itos-widget-info .itos-widget-head { background: var(--itos-info-bg); border-bottom-color: var(--itos-info-border); } .itos-widget-info .itos-widget-title { color: var(--itos-info); } .itos-widget-warn .itos-widget-head { background: var(--itos-warn-bg); border-bottom-color: var(--itos-warn-border); } .itos-widget-warn .itos-widget-title { color: var(--itos-warn); } .itos-widget-danger .itos-widget-head { background: var(--itos-danger-bg); border-bottom-color: var(--itos-danger-border); } .itos-widget-danger .itos-widget-title { color: var(--itos-danger); } .itos-widget-muted .itos-widget-head { background: var(--itos-muted-bg); border-bottom-color: var(--itos-muted-border); } .itos-widget-muted .itos-widget-title { color: var(--itos-muted); } .itos-widget-body { flex: 1 1 auto; padding: var(--itos-s4); min-width: 0; overflow-x: auto; } .itos-widget-body > * + * { margin-top: var(--itos-s3); } .itos-widget-foot { padding: var(--itos-s2) var(--itos-s4); border-top: 1px solid var(--itos-border); font-size: var(--itos-t-xs); color: var(--itos-text-faint); } /* A quiet dot marking a widget that auto-refreshes. */ .itos-widget-pulse { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.35; animation: itos-pulse 2.4s ease-in-out infinite; } .itos-widget-loading .itos-widget-body { opacity: 0.45; transition: opacity var(--itos-speed) ease; } @keyframes itos-pulse { 0%, 100% { opacity: 0.20; } 50% { opacity: 0.75; } } @media (prefers-reduced-motion: reduce) { .itos-widget-pulse { animation: none; } .itos * { transition: none !important; } } /* =========================================================================== 6. Stat tile =========================================================================== */ .itos-stat { display: flex; flex-direction: column; gap: var(--itos-s1); padding: var(--itos-s4); background: var(--itos-surface); border: 1px solid var(--itos-border); border-radius: var(--itos-radius-lg); box-shadow: var(--itos-shadow); text-decoration: none; color: inherit; min-width: 0; border-top: 3px solid var(--itos-muted-border); } .itos a.itos-stat:hover { box-shadow: var(--itos-shadow-lg); text-decoration: none; } .itos-stat-ok { border-top-color: var(--itos-ok); } .itos-stat-info { border-top-color: var(--itos-info); } .itos-stat-warn { border-top-color: var(--itos-warn); } .itos-stat-danger { border-top-color: var(--itos-danger); } .itos-stat-muted { border-top-color: var(--itos-muted-border); } .itos-stat-label { font-size: var(--itos-t-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--itos-text-faint); } .itos-stat-value { font-size: var(--itos-t-3xl); font-weight: 650; line-height: 1.1; letter-spacing: -0.02em; color: var(--itos-text); font-variant-numeric: tabular-nums; word-break: break-word; } .itos-stat-ok .itos-stat-value { color: var(--itos-ok); } .itos-stat-warn .itos-stat-value { color: var(--itos-warn); } .itos-stat-danger .itos-stat-value { color: var(--itos-danger); } .itos-stat-delta { font-size: var(--itos-t-sm); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--itos-text-soft); } .itos-trend-up { color: var(--itos-ok); } .itos-trend-down { color: var(--itos-danger); } .itos-trend-flat { color: var(--itos-text-faint); } .itos-stat-hint { font-size: var(--itos-t-xs); color: var(--itos-text-faint); } /* =========================================================================== 7. Table =========================================================================== */ /* Wide tables scroll inside their own box. The page never scrolls sideways. */ .itos-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .itos-table { width: 100%; border-collapse: collapse; font-size: var(--itos-t-md); background: transparent; } .itos-table .itos-th { padding: var(--itos-s2) var(--itos-s3); text-align: left; font-size: var(--itos-t-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--itos-text-faint); border-bottom: 1px solid var(--itos-border-strong); white-space: nowrap; } .itos-table .itos-td { padding: var(--itos-s3); border-bottom: 1px solid var(--itos-border); color: var(--itos-text); vertical-align: top; } .itos-table .itos-tr:last-child .itos-td { border-bottom: 0; } .itos-table .itos-tr:hover .itos-td { background: var(--itos-surface-2); } .itos-align-left { text-align: left; } .itos-align-right { text-align: right; font-variant-numeric: tabular-nums; } .itos-align-center { text-align: center; } /* =========================================================================== 8. Badge =========================================================================== */ .itos-badge { display: inline-flex; align-items: center; gap: var(--itos-s1); padding: 2px var(--itos-s2); border-radius: 999px; border: 1px solid transparent; font-size: var(--itos-t-xs); font-weight: 600; line-height: 1.5; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; } .itos-badge-ok { color: var(--itos-ok); background: var(--itos-ok-bg); border-color: var(--itos-ok-border); } .itos-badge-info { color: var(--itos-info); background: var(--itos-info-bg); border-color: var(--itos-info-border); } .itos-badge-warn { color: var(--itos-warn); background: var(--itos-warn-bg); border-color: var(--itos-warn-border); } .itos-badge-danger { color: var(--itos-danger); background: var(--itos-danger-bg); border-color: var(--itos-danger-border); } .itos-badge-muted { color: var(--itos-muted); background: var(--itos-muted-bg); border-color: var(--itos-muted-border); } /* =========================================================================== 9. Alert =========================================================================== */ .itos-alert { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--itos-s2); padding: var(--itos-s3) var(--itos-s4); border: 1px solid var(--itos-info-border); border-left-width: 3px; border-radius: var(--itos-radius); background: var(--itos-info-bg); color: var(--itos-text); font-size: var(--itos-t-md); } .itos-alert-title { font-weight: 650; } .itos-alert-msg { min-width: 0; } .itos-alert-ok { background: var(--itos-ok-bg); border-color: var(--itos-ok-border); border-left-color: var(--itos-ok); } .itos-alert-info { background: var(--itos-info-bg); border-color: var(--itos-info-border); border-left-color: var(--itos-info); } .itos-alert-warn { background: var(--itos-warn-bg); border-color: var(--itos-warn-border); border-left-color: var(--itos-warn); } .itos-alert-danger { background: var(--itos-danger-bg); border-color: var(--itos-danger-border); border-left-color: var(--itos-danger); } .itos-alert-muted { background: var(--itos-muted-bg); border-color: var(--itos-muted-border); border-left-color: var(--itos-muted-border); } .itos-alert-ok .itos-alert-title { color: var(--itos-ok); } .itos-alert-warn .itos-alert-title { color: var(--itos-warn); } .itos-alert-danger .itos-alert-title { color: var(--itos-danger); } /* =========================================================================== 10. Empty state =========================================================================== */ .itos-empty { display: flex; flex-direction: column; align-items: center; gap: var(--itos-s3); padding: var(--itos-s6) var(--itos-s4); border: 1px dashed var(--itos-border-strong); border-radius: var(--itos-radius-lg); background: var(--itos-surface-2); text-align: center; } .itos-empty-msg { margin: 0; max-width: 56ch; color: var(--itos-text-soft); font-size: var(--itos-t-md); } /* =========================================================================== 11. Buttons =========================================================================== */ .itos-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--itos-s2); padding: var(--itos-s2) var(--itos-s4); border: 1px solid var(--itos-border-strong); border-radius: var(--itos-radius); background: var(--itos-surface); color: var(--itos-text); font-size: var(--itos-t-md); font-weight: 600; font-family: inherit; line-height: 1.4; text-decoration: none; cursor: pointer; transition: background var(--itos-speed) ease, border-color var(--itos-speed) ease; } .itos-btn:hover:not(:disabled) { background: var(--itos-surface-2); border-color: var(--itos-text-faint); text-decoration: none; } .itos-btn:disabled, .itos-btn[disabled] { opacity: 0.5; cursor: not-allowed; } .itos-btn:focus-visible, .itos-tab:focus-visible, .itos-stat:focus-visible { outline: 2px solid var(--itos-accent); outline-offset: 2px; } .itos-btn-ok { color: #fff; background: var(--itos-ok); border-color: var(--itos-ok); } .itos-btn-info { color: #fff; background: var(--itos-info); border-color: var(--itos-info); } .itos-btn-warn { color: #fff; background: var(--itos-warn); border-color: var(--itos-warn); } .itos-btn-danger { color: #fff; background: var(--itos-danger); border-color: var(--itos-danger); } .itos-btn-ok:hover:not(:disabled), .itos-btn-info:hover:not(:disabled), .itos-btn-warn:hover:not(:disabled), .itos-btn-danger:hover:not(:disabled) { filter: brightness(1.08); color: #fff; } .itos-btn-muted { color: var(--itos-text-soft); background: var(--itos-surface); border-color: var(--itos-border); } /* In dark mode the solid buttons need dark ink, not white, to stay readable. */ @media (prefers-color-scheme: dark) { .itos:not(.itos-light) .itos-btn-ok, .itos:not(.itos-light) .itos-btn-info, .itos:not(.itos-light) .itos-btn-warn, .itos:not(.itos-light) .itos-btn-danger { color: #14161a; } } .itos.itos-dark .itos-btn-ok, .itos.itos-dark .itos-btn-info, .itos.itos-dark .itos-btn-warn, .itos.itos-dark .itos-btn-danger { color: #14161a; } /* =========================================================================== 12. Tabs and breadcrumb =========================================================================== */ .itos-tabs { display: flex; gap: var(--itos-s1); margin-bottom: var(--itos-s4); border-bottom: 1px solid var(--itos-border); overflow-x: auto; } .itos-tab { display: inline-block; padding: var(--itos-s3) var(--itos-s4); border-bottom: 2px solid transparent; color: var(--itos-text-soft); font-size: var(--itos-t-md); font-weight: 600; text-decoration: none; white-space: nowrap; transition: color var(--itos-speed) ease, border-color var(--itos-speed) ease; } .itos a.itos-tab:hover { color: var(--itos-text); border-bottom-color: var(--itos-border-strong); text-decoration: none; } .itos-tab-active { color: var(--itos-accent); border-bottom-color: var(--itos-accent); } .itos-breadcrumb { margin-bottom: var(--itos-s3); font-size: var(--itos-t-sm); } .itos-breadcrumb-list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--itos-s2); margin: 0; padding: 0; list-style: none; } .itos-breadcrumb-item + .itos-breadcrumb-item::before { content: "/"; margin-right: var(--itos-s2); color: var(--itos-text-faint); } .itos-breadcrumb-item a { color: var(--itos-text-soft); text-decoration: none; } .itos-breadcrumb-item a:hover { color: var(--itos-accent); text-decoration: underline; } .itos-breadcrumb-item span[aria-current] { color: var(--itos-text); font-weight: 600; } /* =========================================================================== 13. Key/value list and checklist (widget bodies) =========================================================================== */ .itos-kv { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: var(--itos-s2) var(--itos-s4); margin: 0; } .itos-kv-key { margin: 0; font-size: var(--itos-t-sm); color: var(--itos-text-faint); white-space: nowrap; } .itos-kv-val { margin: 0; font-size: var(--itos-t-md); font-weight: 600; color: var(--itos-text); text-align: right; overflow-wrap: anywhere; } .itos-text-ok { color: var(--itos-ok); } .itos-text-info { color: var(--itos-info); } .itos-text-warn { color: var(--itos-warn); } .itos-text-danger { color: var(--itos-danger); } .itos-text-muted { color: var(--itos-text-faint); } .itos-checklist { margin: 0; padding: 0; list-style: none; } .itos-checklist-item { display: flex; align-items: baseline; gap: var(--itos-s2); padding: var(--itos-s2) 0; border-bottom: 1px solid var(--itos-border); } .itos-checklist-item:last-child { border-bottom: 0; } .itos-checklist-name { font-weight: 600; font-family: var(--itos-mono); font-size: var(--itos-t-sm); color: var(--itos-text); white-space: nowrap; } .itos-checklist-msg { flex: 1 1 auto; min-width: 0; font-size: var(--itos-t-sm); color: var(--itos-text-soft); overflow-wrap: anywhere; } .itos-mono { font-family: var(--itos-mono); font-size: 0.95em; } .itos-muted { color: var(--itos-text-faint); } /* =========================================================================== 14. Toasts (ITOS.notify) =========================================================================== */ /* ITOS.notify() appends its host to , i.e. outside any ITOS page wrapper. So the host itself carries the `.itos` class — that is what gives it the tokens — and `.itos-toast-host` cancels the page padding that `.itos` would otherwise apply. The scoping rule still holds: no selector here escapes `.itos`. */ .itos.itos-toast-host { padding: 0; } .itos .itos-toasts { position: fixed; right: var(--itos-s4); bottom: var(--itos-s4); z-index: 10050; /* Above Dolibarr's own overlays, below its modals. */ display: flex; flex-direction: column; gap: var(--itos-s2); max-width: min(380px, calc(100vw - 2 * var(--itos-s4))); pointer-events: none; } .itos-toast { pointer-events: auto; padding: var(--itos-s3) var(--itos-s4); border: 1px solid var(--itos-info-border); border-left: 3px solid var(--itos-info); border-radius: var(--itos-radius); background: var(--itos-surface); color: var(--itos-text); box-shadow: var(--itos-shadow-lg); font-size: var(--itos-t-md); opacity: 0; transform: translateY(6px); transition: opacity var(--itos-speed) ease, transform var(--itos-speed) ease; overflow-wrap: anywhere; } .itos-toast.itos-toast-in { opacity: 1; transform: translateY(0); } .itos-toast-ok { border-color: var(--itos-ok-border); border-left-color: var(--itos-ok); } .itos-toast-warn { border-color: var(--itos-warn-border); border-left-color: var(--itos-warn); } .itos-toast-danger { border-color: var(--itos-danger-border); border-left-color: var(--itos-danger); } .itos-toast-muted { border-color: var(--itos-muted-border); border-left-color: var(--itos-muted-border); } /* =========================================================================== 15. Print =========================================================================== */ @media print { .itos .itos-toasts, .itos-widget-pulse, .itos-tabs { display: none !important; } .itos-card, .itos-widget, .itos-stat { box-shadow: none; border: 1px solid #999; break-inside: avoid; } }