/* ============================================================ WHITE WORLD — components Spec: docs/design-system/WHITE_WORLD_DESIGN_SYSTEM.md. Tokens: tokens.css. Every rule is scoped to :root[data-visual-system="white-world"][data-design-system] (specificity 0,3,0 + element) so it wins over the Klockner profile without editing it; !important only where legacy sheets (microlay_modern.css) use it. ============================================================ */ /* ---------- Base ---------- */ /* [hidden] always hides (Bootstrap's reboot rule, re-stated at our specificity so none of our display rules can resurrect an element that JS or a template hid). */ :root[data-visual-system="white-world"][data-design-system] [hidden]:not([hidden="until-found"]) { display: none !important; } :root[data-visual-system="white-world"][data-design-system] body, :root[data-visual-system="white-world"][data-design-system] .main-content { background: var(--ww-canvas) !important; color: var(--ww-text); font-family: var(--ww-font-ui); font-size: var(--ww-fs-14); line-height: var(--ww-lh-body); -webkit-font-smoothing: antialiased; font-feature-settings: "cv11", "ss01"; } :root[data-visual-system="white-world"][data-design-system] :is(h1, h2, h3, h4, h5, h6) { color: var(--ww-text); letter-spacing: -.005em; } :root[data-visual-system="white-world"][data-design-system] a:not(.btn):not(.ds-btn):not(.sidebar-nav-item):not(.dropdown-item):not(.nav-link) { color: var(--ww-link); } :root[data-visual-system="white-world"][data-design-system] a:not(.btn):not(.ds-btn):not(.sidebar-nav-item):not(.dropdown-item):not(.nav-link):hover { color: var(--ww-t-700); } :root[data-visual-system="white-world"][data-design-system] :is(.ds-num, .num, td.text-end, .ds-stat-value) { font-variant-numeric: tabular-nums; } :root[data-visual-system="white-world"][data-design-system] :focus-visible { outline: none !important; box-shadow: var(--ww-focus-ring) !important; } :root[data-visual-system="white-world"][data-design-system] ::selection { background: var(--ww-t-100); color: var(--ww-t-900); } :root[data-visual-system="white-world"][data-design-system] { accent-color: var(--ww-t-600); } /* native checkboxes, radios, ranges, progress */ /* ---------- Page header: Archivo semicondensed, sentence case ---------- */ :root[data-visual-system="white-world"][data-design-system] :is(h1.page-header-title, .page-header h1) { font-family: var(--ww-font-display) !important; font-stretch: var(--ww-display-stretch); font-weight: var(--ww-fw-bold) !important; font-size: var(--ww-fs-28) !important; line-height: var(--ww-lh-tight) !important; text-transform: none !important; letter-spacing: -.01em !important; color: var(--ww-text) !important; } :root[data-visual-system="white-world"][data-design-system] :is(h1.page-header-title, .page-header h1) { display: flex; align-items: center; gap: 12px; } :root[data-visual-system="white-world"][data-design-system] :is(h1.page-header-title, .page-header h1) > i:first-child { flex: none; width: 36px; height: 36px; border-radius: 10px; display: inline-grid !important; place-items: center; background: var(--ww-selected) !important; color: var(--ww-t-700) !important; font-size: 18px !important; margin: 0 !important; } :root[data-visual-system="white-world"][data-design-system] :is(.page-header-subtitle, .page-header-info > p) { color: var(--ww-text-2) !important; font-size: var(--ww-fs-14) !important; margin-top: 4px; } :root[data-visual-system="white-world"][data-design-system] :is(.ds-section-title, .section-title, .card-title) { font-family: var(--ww-font-display); font-stretch: 85%; font-weight: var(--ww-fw-bold); text-transform: none; letter-spacing: 0; color: var(--ww-text); } /* ---------- Top bar ---------- */ :root[data-visual-system="white-world"][data-design-system] header.topbar { height: var(--ww-topbar) !important; background: var(--ww-surface) !important; border-bottom: 1px solid var(--ww-border) !important; box-shadow: none !important; color: var(--ww-text) !important; padding: 0 var(--ww-s-5) !important; } :root[data-visual-system="white-world"][data-design-system] header.topbar .topbar-title { color: var(--ww-text) !important; font-size: var(--ww-fs-14) !important; font-weight: var(--ww-fw-semibold) !important; text-transform: none !important; letter-spacing: 0 !important; display: inline-flex; align-items: center; gap: 8px; } :root[data-visual-system="white-world"][data-design-system] header.topbar .topbar-title i { color: var(--ww-t-600) !important; font-size: var(--ww-fs-14); } :root[data-visual-system="white-world"][data-design-system] header.topbar *:not(.badge):not(.dropdown-menu):not(.dropdown-menu *):not(.ds-badge) { color: var(--ww-text); } :root[data-visual-system="white-world"][data-design-system] header.topbar :is(button, .btn):not(.ds-btn-primary):not(.btn-primary) { background: transparent !important; border: 1px solid transparent !important; border-radius: var(--ww-r-inner) !important; box-shadow: none !important; min-height: 34px; color: var(--ww-text-2) !important; } :root[data-visual-system="white-world"][data-design-system] header.topbar :is(button, .btn):not(.ds-btn-primary):not(.btn-primary):hover { background: var(--ww-hover) !important; color: var(--ww-text) !important; } :root[data-visual-system="white-world"][data-design-system] header.topbar .user-menu-btn { border: 1px solid var(--ww-border) !important; border-radius: var(--ww-r-pill) !important; padding: 2px 8px 2px 2px !important; } /* ---------- Buttons ---------- */ :root[data-visual-system="white-world"][data-design-system] :is(.btn, .ds-btn) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--ww-control); padding: 0 14px; border-radius: var(--ww-r-control) !important; font-family: var(--ww-font-ui); font-size: var(--ww-fs-14); font-weight: var(--ww-fw-semibold); line-height: 1; letter-spacing: 0; text-transform: none; box-shadow: none; transition: background-color var(--ww-t-fast), border-color var(--ww-t-fast), color var(--ww-t-fast), box-shadow var(--ww-t-fast); } :root[data-visual-system="white-world"][data-design-system] :is(.btn-sm, .ds-btn-sm, .ds-btn-xs) { min-height: var(--ww-control-sm); padding: 0 10px; font-size: var(--ww-fs-13); } :root[data-visual-system="white-world"][data-design-system] :is(.btn-lg, .ds-btn-lg, .ds-btn-xl) { min-height: var(--ww-control-lg); padding: 0 18px; font-size: 15px; } /* Primary: ink with the chamfer — the only facet of the interface */ :root[data-visual-system="white-world"][data-design-system] :is(.btn-primary, .ds-btn-primary, .ds-btn--primary, .ka-btn--signal) { position: relative; background: var(--ww-action) !important; border: 1px solid var(--ww-action) !important; color: #fff !important; border-top-right-radius: 0 !important; box-shadow: 0 1px 2px rgb(6 100 112 / .18) !important; clip-path: polygon(0 0, calc(100% - var(--ww-chamfer)) 0, 100% var(--ww-chamfer), 100% 100%, 0 100%); } :root[data-visual-system="white-world"][data-design-system] :is(.btn-primary, .ds-btn-primary, .ds-btn--primary)::after { content: ""; position: absolute; top: -1px; right: -1px; width: var(--ww-chamfer); height: var(--ww-chamfer); background: var(--ww-t-200); clip-path: polygon(0 0, 100% 100%, 0 100%); opacity: 0; transition: opacity var(--ww-t-fast); } :root[data-visual-system="white-world"][data-design-system] :is(.btn-primary, .ds-btn-primary, .ds-btn--primary):hover { background: var(--ww-action-hover) !important; border-color: var(--ww-action-hover) !important; } :root[data-visual-system="white-world"][data-design-system] :is(.btn-primary, .ds-btn-primary, .ds-btn--primary):hover::after { opacity: 1; } :root[data-visual-system="white-world"][data-design-system] :is(.btn-primary, .ds-btn-primary, .ds-btn--primary):active { background: var(--ww-action-active) !important; border-color: var(--ww-action-active) !important; } :root[data-visual-system="white-world"][data-design-system] :is(.btn-primary, .ds-btn-primary, .ds-btn--primary) :is(i, .fa, .fas, .far) { color: #fff !important; } /* Secondary: white with a real border */ :root[data-visual-system="white-world"][data-design-system] :is(.btn-secondary, .btn-outline-primary, .btn-outline-secondary, .btn-outline-dark, .btn-light, .btn-outline-light, .ds-btn-secondary, .ds-btn--secondary, .ds-btn-outline, .ds-btn--outline) { background: var(--ww-surface) !important; color: var(--ww-text) !important; border: 1px solid var(--ww-border-strong) !important; box-shadow: var(--ww-e1) !important; } :root[data-visual-system="white-world"][data-design-system] :is(.btn-secondary, .btn-outline-primary, .btn-outline-secondary, .btn-outline-dark, .btn-light, .btn-outline-light, .ds-btn-secondary, .ds-btn--secondary, .ds-btn-outline, .ds-btn--outline):hover { background: var(--ww-n-25) !important; border-color: var(--ww-border-hover) !important; } :root[data-visual-system="white-world"][data-design-system] :is(.btn-secondary, .btn-outline-primary, .btn-outline-secondary, .btn-light, .ds-btn-secondary, .ds-btn--secondary, .ds-btn-outline, .ds-btn--outline) > :is(i, .fa, .fas, .far):first-child { color: var(--ww-t-600) !important; } /* Ghost and link: turquoise text, low weight */ :root[data-visual-system="white-world"][data-design-system] :is(.ds-btn-ghost, .ds-btn--ghost, .btn-ghost, .btn-link) { background: transparent !important; border-color: transparent !important; color: var(--ww-t-700) !important; box-shadow: none !important; text-decoration: none; } :root[data-visual-system="white-world"][data-design-system] :is(.ds-btn-ghost, .ds-btn--ghost, .btn-ghost, .btn-link):hover { background: var(--ww-selected) !important; } /* Danger: outline only; the solid red is reserved for confirming a destructive dialog */ :root[data-visual-system="white-world"][data-design-system] :is(.btn-outline-danger, .ds-btn-outline-danger, .ds-btn-delete) { background: var(--ww-surface) !important; color: var(--ww-err-text) !important; border: 1px solid var(--ww-err-border) !important; box-shadow: none !important; } :root[data-visual-system="white-world"][data-design-system] :is(.btn-outline-danger, .ds-btn-outline-danger, .ds-btn-delete):hover { background: var(--ww-err-bg) !important; } :root[data-visual-system="white-world"][data-design-system] :is(.btn-danger, .ds-btn-danger, .ds-btn--danger) { background: var(--ww-err-solid) !important; border-color: var(--ww-err-solid) !important; color: #fff !important; } :root[data-visual-system="white-world"][data-design-system] :is(.btn-success, .ds-btn-success) { background: var(--ww-ok-solid) !important; border-color: var(--ww-ok-solid) !important; color: #fff !important; } :root[data-visual-system="white-world"][data-design-system] :is(.btn-warning, .ds-btn-warning) { background: var(--ww-warn-bg) !important; border-color: var(--ww-warn-border) !important; color: var(--ww-warn-text) !important; } :root[data-visual-system="white-world"][data-design-system] :is(.btn, .ds-btn):is(:disabled, .disabled) { opacity: .45; cursor: not-allowed; } :root[data-visual-system="white-world"][data-design-system] :is(.ds-btn-icon, .btn-icon) { width: var(--ww-control); padding: 0 !important; } /* ---------- Fields ---------- */ :root[data-visual-system="white-world"][data-design-system] :is(.form-control, .form-select, .ds-input, .ds-select, .ds-textarea) { min-height: var(--ww-field); border-radius: var(--ww-r-control) !important; border: 1px solid var(--ww-border-strong) !important; background-color: var(--ww-surface) !important; color: var(--ww-text) !important; font-size: var(--ww-fs-14); box-shadow: none !important; transition: border-color var(--ww-t-fast), box-shadow var(--ww-t-fast); } :root[data-visual-system="white-world"][data-design-system] :is(.form-control, .form-select, .ds-input, .ds-select, .ds-textarea):hover { border-color: var(--ww-border-hover) !important; } :root[data-visual-system="white-world"][data-design-system] :is(.form-control, .form-select, .ds-input, .ds-select, .ds-textarea):focus { border-color: var(--ww-t-500) !important; box-shadow: var(--ww-focus-ring) !important; } :root[data-visual-system="white-world"][data-design-system] :is(.form-control, .ds-input)::placeholder { color: var(--ww-n-400); } :root[data-visual-system="white-world"][data-design-system] :is(.form-control, .ds-input).is-invalid { border-color: var(--ww-err-solid) !important; } :root[data-visual-system="white-world"][data-design-system] :is(.form-label, .ds-label) { font-size: var(--ww-fs-13); font-weight: var(--ww-fw-semibold); color: var(--ww-text); text-transform: none; letter-spacing: 0; margin-bottom: 6px; } :root[data-visual-system="white-world"][data-design-system] :is(.form-text, .ds-help-text) { font-size: var(--ww-fs-12); color: var(--ww-text-3); } :root[data-visual-system="white-world"][data-design-system] :is(.invalid-feedback) { font-size: var(--ww-fs-12); color: var(--ww-err-text); } :root[data-visual-system="white-world"][data-design-system] :is(.form-check-input, .ds-check-input) { border: 1.5px solid var(--ww-n-300) !important; border-radius: 5px !important; box-shadow: none !important; } :root[data-visual-system="white-world"][data-design-system] :is(.form-check-input, .ds-check-input)[type="radio"] { border-radius: 50% !important; } :root[data-visual-system="white-world"][data-design-system] :is(.form-check-input, .ds-check-input):checked { background-color: var(--ww-accent) !important; border-color: var(--ww-accent) !important; } :root[data-visual-system="white-world"][data-design-system] .form-switch .form-check-input { border-radius: var(--ww-r-pill) !important; width: 2.1em; } :root[data-visual-system="white-world"][data-design-system] .input-group-text { background: var(--ww-n-25) !important; border-color: var(--ww-border-strong) !important; color: var(--ww-text-3); } /* ---------- Tabs and segmented controls ---------- */ :root[data-visual-system="white-world"][data-design-system] :is(.ds-tabs, .nav-tabs) { display: flex; gap: 22px; border-bottom: 1px solid var(--ww-border) !important; background: transparent !important; padding: 0 !important; box-shadow: none !important; } :root[data-visual-system="white-world"][data-design-system] :is(.ds-tab, .ds-tabs > a, .ds-tabs > button, .nav-tabs .nav-link) { position: relative; height: 42px; padding: 0 2px !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: var(--ww-text-2) !important; font-weight: var(--ww-fw-semibold) !important; font-size: var(--ww-fs-14); display: inline-flex; align-items: center; gap: 8px; box-shadow: none !important; text-transform: none; } :root[data-visual-system="white-world"][data-design-system] :is(.ds-tab, .ds-tabs > a, .ds-tabs > button, .nav-tabs .nav-link):hover { color: var(--ww-text) !important; } :root[data-visual-system="white-world"][data-design-system] :is(.ds-tab.active, .ds-tab[aria-selected="true"], .ds-tabs > .active, .nav-tabs .nav-link.active) { color: var(--ww-text) !important; } :root[data-visual-system="white-world"][data-design-system] :is(.ds-tab.active, .ds-tab[aria-selected="true"], .ds-tabs > .active, .nav-tabs .nav-link.active)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ww-accent); border-radius: 2px; } :root[data-visual-system="white-world"][data-design-system] :is(.ds-tab.active, .ds-tab[aria-selected="true"], .ds-tabs > .active, .nav-tabs .nav-link.active) > :is(i, .fa, .fas, .far) { color: var(--ww-t-600) !important; } :root[data-visual-system="white-world"][data-design-system] :is(.ds-tab-count, .ds-count-pill) { font-size: var(--ww-fs-12); font-weight: var(--ww-fw-semibold); padding: 1px 7px; border-radius: var(--ww-r-pill) !important; background: var(--ww-sunken) !important; color: var(--ww-text-2) !important; border: 0 !important; } :root[data-visual-system="white-world"][data-design-system] :is(.ds-tab.active, .ds-tab[aria-selected="true"]) .ds-tab-count { background: var(--ww-selected) !important; color: var(--ww-t-700) !important; } :root[data-visual-system="white-world"][data-design-system] .ds-segmented { background: var(--ww-sunken) !important; border: 0 !important; border-radius: 9px !important; padding: 3px !important; gap: 2px; } :root[data-visual-system="white-world"][data-design-system] .ds-segmented-item { border: 0 !important; border-radius: 7px !important; background: transparent !important; color: var(--ww-text-2) !important; font-weight: var(--ww-fw-semibold); min-height: 30px; } :root[data-visual-system="white-world"][data-design-system] .ds-segmented-item:is(.active, [aria-pressed="true"], [aria-selected="true"]) { background: var(--ww-surface) !important; color: var(--ww-t-700) !important; box-shadow: 0 1px 2px rgb(21 24 28 / .1) !important; } :root[data-visual-system="white-world"][data-design-system] .nav-pills .nav-link { border-radius: var(--ww-r-pill) !important; color: var(--ww-text-2) !important; font-weight: var(--ww-fw-semibold); } :root[data-visual-system="white-world"][data-design-system] .nav-pills .nav-link.active { background: var(--ww-selected) !important; color: var(--ww-t-700) !important; } /* ---------- Surfaces: cards, stat cards, lists ---------- */ :root[data-visual-system="white-world"][data-design-system] :is(.card, .ds-card, .p360-clinic-bar, .ds-stat-card, .ds-list, .ds-table-wrap) { background: var(--ww-surface) !important; border: 1px solid var(--ww-border) !important; border-radius: var(--ww-r-card) !important; box-shadow: var(--ww-e1) !important; } :root[data-visual-system="white-world"][data-design-system] .card-header { background: transparent !important; border-bottom: 1px solid var(--ww-border) !important; } :root[data-visual-system="white-world"][data-design-system] .card-footer { background: var(--ww-n-25) !important; border-top: 1px solid var(--ww-border) !important; } :root[data-visual-system="white-world"][data-design-system] .ds-stat-card--interactive:hover { border-color: var(--ww-border-hover) !important; box-shadow: var(--ww-e2) !important; } :root[data-visual-system="white-world"][data-design-system] .ds-stat-label { font-size: var(--ww-fs-13) !important; color: var(--ww-text-2) !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: var(--ww-fw-medium); } :root[data-visual-system="white-world"][data-design-system] .ds-stat-value { font-family: var(--ww-font-display); font-stretch: var(--ww-display-stretch); font-weight: var(--ww-fw-bold) !important; font-size: var(--ww-fs-28) !important; color: var(--ww-text) !important; } /* Stat icons label a figure; they are not where to act, so no accent. */ :root[data-visual-system="white-world"][data-design-system] .ds-stat-icon { background: var(--ww-n-50) !important; color: var(--ww-text-2) !important; border-radius: 10px !important; } :root[data-visual-system="white-world"][data-design-system] .ds-list-item { border-color: var(--ww-border) !important; min-height: var(--ww-row); } :root[data-visual-system="white-world"][data-design-system] .ds-list-item:hover { background: var(--ww-row-hover) !important; } :root[data-visual-system="white-world"][data-design-system] :is(.ds-list-item.active, .ds-list-item[aria-selected="true"], .list-group-item.active) { background: var(--ww-t-25) !important; box-shadow: inset 3px 0 0 var(--ww-accent) !important; color: var(--ww-text) !important; border-color: var(--ww-border) !important; } :root[data-visual-system="white-world"][data-design-system] .ds-list-item-title { font-weight: var(--ww-fw-semibold); color: var(--ww-text); } :root[data-visual-system="white-world"][data-design-system] :is(.ds-list-item-subtitle, .ds-list-item-meta) { color: var(--ww-text-2); font-size: var(--ww-fs-13); } :root[data-visual-system="white-world"][data-design-system] .list-group-item { border-color: var(--ww-border) !important; } /* ---------- Avatars: tinted rounded squares ---------- */ :root[data-visual-system="white-world"][data-design-system] :is(.ds-avatar, .ds-list-item-leading, .avatar-initials, .patient-avatar) { border-radius: 10px !important; background: var(--ww-cat-1-bg) !important; color: var(--ww-cat-1) !important; font-weight: var(--ww-fw-bold); } :root[data-visual-system="white-world"][data-design-system] .ds-list-item-leading--round { border-radius: 10px !important; } /* ---------- Tables ---------- */ :root[data-visual-system="white-world"][data-design-system] :is(.table, .ds-table) { --bs-table-bg: var(--ww-surface); --bs-table-border-color: var(--ww-border); --bs-table-hover-bg: var(--ww-row-hover); font-size: var(--ww-fs-14); margin: 0; } :root[data-visual-system="white-world"][data-design-system] :is(.table, .ds-table) thead th { font-size: var(--ww-fs-12) !important; font-weight: var(--ww-fw-semibold) !important; color: var(--ww-text-3) !important; text-transform: none !important; letter-spacing: 0 !important; background: var(--ww-n-25) !important; border-bottom: 1px solid var(--ww-border) !important; padding: 10px 14px !important; } :root[data-visual-system="white-world"][data-design-system] :is(.table, .ds-table) td { padding: 12px 14px; border-color: var(--ww-border) !important; vertical-align: middle; } :root[data-visual-system="white-world"][data-design-system] :is(.table, .ds-table) tbody tr:hover > td { background: var(--ww-row-hover); } /* ---------- Badges and status ---------- */ :root[data-visual-system="white-world"][data-design-system] :is(.badge, .ds-badge) { display: inline-flex; align-items: center; gap: 6px; min-height: 22px; padding: 0 9px !important; border-radius: var(--ww-r-pill) !important; font-family: var(--ww-font-ui); font-size: var(--ww-fs-12) !important; font-weight: var(--ww-fw-semibold) !important; letter-spacing: 0 !important; text-transform: none !important; border: 1px solid transparent; } :root[data-visual-system="white-world"][data-design-system] :is(.ds-badge-default, .ds-badge-neutral, .badge.bg-secondary, .badge.bg-light, .badge.text-bg-secondary) { background: var(--ww-sunken) !important; color: var(--ww-text-2) !important; } :root[data-visual-system="white-world"][data-design-system] :is(.ds-badge-brand, .ds-badge-info, .badge.bg-info, .badge.bg-primary, .badge.text-bg-primary) { background: var(--ww-selected) !important; color: var(--ww-t-700) !important; border-color: var(--ww-t-100) !important; } :root[data-visual-system="white-world"][data-design-system] :is(.ds-badge-success, .badge.bg-success, .badge.text-bg-success) { background: var(--ww-ok-bg) !important; color: var(--ww-ok-text) !important; border-color: var(--ww-ok-border) !important; } :root[data-visual-system="white-world"][data-design-system] :is(.ds-badge-warning, .badge.bg-warning, .badge.text-bg-warning) { background: var(--ww-warn-bg) !important; color: var(--ww-warn-text) !important; border-color: var(--ww-warn-border) !important; } :root[data-visual-system="white-world"][data-design-system] :is(.ds-badge-error, .badge.bg-danger, .badge.text-bg-danger) { background: var(--ww-err-bg) !important; color: var(--ww-err-text) !important; border-color: var(--ww-err-border) !important; } /* ---------- Alerts ---------- */ :root[data-visual-system="white-world"][data-design-system] :is(.alert, .ds-alert) { border-radius: 10px !important; border: 1px solid var(--ww-border) !important; background-color: var(--ww-n-25); color: var(--ww-text-2); font-size: var(--ww-fs-13); box-shadow: none !important; padding: 12px 14px !important; } :root[data-visual-system="white-world"][data-design-system] :is(.alert-info, .alert-primary, .ds-alert-info) { background: var(--ww-info-bg) !important; border-color: var(--ww-info-border) !important; color: var(--ww-info-text) !important; } :root[data-visual-system="white-world"][data-design-system] :is(.alert-success, .ds-alert-success) { background: var(--ww-ok-bg) !important; border-color: var(--ww-ok-border) !important; color: var(--ww-ok-text) !important; } :root[data-visual-system="white-world"][data-design-system] :is(.alert-warning, .ds-alert-warning) { background: var(--ww-warn-bg) !important; border-color: var(--ww-warn-border) !important; color: var(--ww-warn-text) !important; } :root[data-visual-system="white-world"][data-design-system] :is(.alert-danger, .ds-alert-error) { background: var(--ww-err-bg) !important; border-color: var(--ww-err-border) !important; color: var(--ww-err-text) !important; } :root[data-visual-system="white-world"][data-design-system] .ds-alert-title { font-weight: var(--ww-fw-semibold); font-size: var(--ww-fs-14); color: inherit; } /* ---------- Overlays: dropdown, modal, toast, tooltip ---------- */ :root[data-visual-system="white-world"][data-design-system] .dropdown-menu { border: 1px solid var(--ww-border) !important; border-radius: var(--ww-r-overlay) !important; box-shadow: var(--ww-e2) !important; padding: 6px !important; background: var(--ww-surface) !important; } :root[data-visual-system="white-world"][data-design-system] .dropdown-item { border-radius: 6px; padding: 8px 10px; font-size: var(--ww-fs-14); color: var(--ww-text) !important; } :root[data-visual-system="white-world"][data-design-system] .dropdown-item:hover { background: var(--ww-hover) !important; } :root[data-visual-system="white-world"][data-design-system] .dropdown-item.active { background: var(--ww-selected) !important; color: var(--ww-t-700) !important; } :root[data-visual-system="white-world"][data-design-system] .dropdown-divider { border-color: var(--ww-border) !important; margin: 6px 4px; } :root[data-visual-system="white-world"][data-design-system] :is(.modal-content, .ds-modal) { border: 0 !important; border-radius: var(--ww-r-overlay) !important; box-shadow: var(--ww-e3) !important; background: var(--ww-surface) !important; } :root[data-visual-system="white-world"][data-design-system] :is(.modal-header, .ds-modal-header) { border-bottom: 1px solid var(--ww-border) !important; padding: 18px 22px !important; } :root[data-visual-system="white-world"][data-design-system] :is(.modal-title, .ds-modal-title) { font-family: var(--ww-font-display); font-stretch: 85%; font-weight: var(--ww-fw-bold) !important; font-size: var(--ww-fs-20) !important; text-transform: none !important; } :root[data-visual-system="white-world"][data-design-system] :is(.modal-footer, .ds-modal-footer) { border-top: 1px solid var(--ww-border) !important; background: var(--ww-n-25) !important; border-radius: 0 0 var(--ww-r-overlay) var(--ww-r-overlay); } :root[data-visual-system="white-world"][data-design-system] :is(.modal-backdrop.show, .ds-overlay) { background: rgb(21 24 28 / .45) !important; opacity: 1 !important; backdrop-filter: blur(2px); } :root[data-visual-system="white-world"][data-design-system] :is(.toast, .ds-toast) { background: var(--ww-ink) !important; color: #fff !important; border: 0 !important; border-radius: 10px !important; box-shadow: var(--ww-e3) !important; } :root[data-visual-system="white-world"][data-design-system] :is(.toast, .ds-toast) :is(.ds-toast-title, .ds-toast-msg, .toast-body) { color: #fff !important; } :root[data-visual-system="white-world"][data-design-system] .tooltip-inner { background: var(--ww-n-900) !important; border-radius: 6px !important; font-size: var(--ww-fs-12); font-weight: var(--ww-fw-semibold); padding: 6px 9px; } /* ---------- Filters, chips, pagination ---------- */ :root[data-visual-system="white-world"][data-design-system] :is(.ds-filter-chip, .ds-chip) { min-height: 32px; border-radius: var(--ww-r-pill) !important; border: 1px solid var(--ww-border-strong) !important; background: var(--ww-surface) !important; color: var(--ww-text-2) !important; font-size: var(--ww-fs-13); font-weight: var(--ww-fw-medium); box-shadow: none !important; } :root[data-visual-system="white-world"][data-design-system] :is(.ds-filter-chip, .ds-chip):is(.active, [aria-pressed="true"]) { background: var(--ww-selected) !important; border-color: var(--ww-t-200) !important; color: var(--ww-t-700) !important; } :root[data-visual-system="white-world"][data-design-system] :is(.page-link, .ds-pagination-item) { border-radius: var(--ww-r-inner) !important; border: 1px solid var(--ww-border) !important; color: var(--ww-text-2) !important; margin: 0 2px; } :root[data-visual-system="white-world"][data-design-system] :is(.page-item.active .page-link, .ds-pagination-item.active) { background: var(--ww-selected) !important; border-color: var(--ww-t-200) !important; color: var(--ww-t-700) !important; } /* ---------- Empty states and progress ---------- */ :root[data-visual-system="white-world"][data-design-system] :is(.ds-empty-state, .ds-empty) { border: 1px dashed var(--ww-border-strong) !important; border-radius: var(--ww-r-card) !important; background: var(--ww-n-25) !important; } :root[data-visual-system="white-world"][data-design-system] .ds-empty-icon { color: var(--ww-t-500) !important; background: var(--ww-selected) !important; border-radius: 14px !important; } :root[data-visual-system="white-world"][data-design-system] .ds-empty-title { font-family: var(--ww-font-display); font-stretch: 85%; font-weight: var(--ww-fw-bold); color: var(--ww-text); } :root[data-visual-system="white-world"][data-design-system] :is(.ds-empty-desc, .ds-empty-description) { color: var(--ww-text-2); } :root[data-visual-system="white-world"][data-design-system] :is(.progress, .ds-progress) { background: var(--ww-sunken) !important; border-radius: var(--ww-r-pill) !important; height: 6px; } :root[data-visual-system="white-world"][data-design-system] :is(.progress-bar, .ds-progress-bar) { background: var(--ww-accent) !important; border-radius: var(--ww-r-pill) !important; } :root[data-visual-system="white-world"][data-design-system] :is(.ds-skeleton, .ds-skeleton-text, .ds-skeleton-title, .ds-skeleton-avatar) { background: linear-gradient(90deg, var(--ww-n-100), var(--ww-n-50), var(--ww-n-100)) !important; background-size: 200% 100% !important; } /* ---------- Relu recipe cards (/design): the real printed part on the white world ---------- */ :root[data-visual-system="white-world"][data-design-system] .service-card { border-radius: var(--ww-r-card) !important; overflow: hidden; border: 1px solid var(--ww-border) !important; box-shadow: var(--ww-e1) !important; transition: border-color var(--ww-t-base) var(--ww-ease), box-shadow var(--ww-t-base) var(--ww-ease), transform var(--ww-t-base) var(--ww-ease) !important; } :root[data-visual-system="white-world"][data-design-system] .service-card:hover { border-color: var(--ww-border-hover) !important; box-shadow: var(--ww-e2) !important; transform: translateY(-2px) !important; } :root[data-visual-system="white-world"][data-design-system] .service-card-image { padding: 0 !important; aspect-ratio: 4 / 3; height: auto !important; background: #eef0f3 !important; border-bottom: 1px solid var(--ww-border) !important; position: relative; } :root[data-visual-system="white-world"][data-design-system] .service-card-image img.ww-render { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--ww-t-slow) var(--ww-ease); } :root[data-visual-system="white-world"][data-design-system] .service-card:hover .service-card-image img.ww-render { transform: scale(1.04); } :root[data-visual-system="white-world"][data-design-system] .service-card-body h5 { font-family: var(--ww-font-display) !important; font-stretch: 88%; font-weight: var(--ww-fw-bold) !important; font-size: var(--ww-fs-16) !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--ww-text) !important; } :root[data-visual-system="white-world"][data-design-system] .service-card-body p { color: var(--ww-text-2) !important; font-size: var(--ww-fs-13) !important; } :root[data-visual-system="white-world"][data-design-system] .service-card .credit-badge { font-family: var(--ww-font-ui) !important; font-variant-numeric: tabular-nums; font-size: var(--ww-fs-12) !important; font-weight: var(--ww-fw-semibold) !important; background: rgb(255 255 255 / .92) !important; color: var(--ww-text) !important; border: 1px solid var(--ww-border) !important; border-radius: var(--ww-r-pill) !important; box-shadow: none !important; } /* ============================================================ RAIL (sidebar). Collapsed: 64px, one icon per group, flyouts; expanded (pinned): 248px with collapsible groups. The rail never widens on hover, so the page no longer jumps under the pointer. Behaviour: js/white-world/rail.js ============================================================ */ :root[data-visual-system="white-world"][data-design-system] aside#sidebar.sidebar { background: var(--ww-surface) !important; border-right: 1px solid var(--ww-border) !important; box-shadow: none !important; color: var(--ww-text) !important; } @media (min-width: 992px) { :root[data-visual-system="white-world"][data-design-system] aside#sidebar.sidebar:not(.sidebar--pinned), :root[data-visual-system="white-world"][data-design-system] aside#sidebar.sidebar:not(.sidebar--pinned):hover, :root[data-visual-system="white-world"][data-design-system] aside#sidebar.sidebar.hover-expanded:not(.sidebar--pinned) { width: var(--ww-rail) !important; } :root[data-visual-system="white-world"][data-design-system] aside#sidebar.sidebar:not(.sidebar--pinned):is(:hover, .hover-expanded) ~ .topbar { left: var(--ww-rail) !important; } :root[data-visual-system="white-world"][data-design-system] aside#sidebar.sidebar:not(.sidebar--pinned):is(:hover, .hover-expanded) ~ .main-content { margin-left: var(--ww-rail) !important; } :root[data-visual-system="white-world"][data-design-system] aside#sidebar.sidebar.sidebar--pinned { width: var(--ww-rail-open) !important; } } :root[data-visual-system="white-world"][data-design-system] aside#sidebar .sidebar-logo { min-height: var(--ww-topbar) !important; border-bottom: 1px solid var(--ww-border) !important; padding: 0 14px !important; } :root[data-visual-system="white-world"][data-design-system] aside#sidebar .brand-logo-mark--klockner { width: 36px !important; height: 36px !important; border-radius: 9px !important; background: var(--ww-n-900) !important; color: #fff !important; font-family: var(--ww-font-display); font-weight: 800; font-size: 18px !important; display: grid !important; place-items: center; border: 0 !important; box-shadow: none !important; } :root[data-visual-system="white-world"][data-design-system] aside#sidebar .brand-logo-wordmark-main { color: var(--ww-text) !important; font-family: var(--ww-font-display); font-stretch: 82%; font-weight: 700; letter-spacing: 0; text-transform: none; } :root[data-visual-system="white-world"][data-design-system] aside#sidebar .sidebar-nav { padding: 10px 12px !important; display: flex; flex-direction: column; gap: 2px; } :root[data-visual-system="white-world"][data-design-system] aside#sidebar .sidebar-nav-section { display: flex; flex-direction: column; gap: 2px; padding: 0 !important; margin: 0 !important; border: 0 !important; } :root[data-visual-system="white-world"][data-design-system] aside#sidebar .sidebar-nav-section + .sidebar-nav-section { border-top: 1px solid var(--ww-border) !important; margin-top: 8px !important; padding-top: 8px !important; } :root[data-visual-system="white-world"][data-design-system] aside#sidebar .sidebar-nav-item:not([hidden]) { position: relative; display: flex !important; align-items: center; gap: 12px; height: 40px; min-height: 40px !important; padding: 0 11px !important; margin: 0 !important; border-radius: 10px !important; color: var(--ww-icon) !important; background: transparent !important; box-shadow: none !important; text-decoration: none; border: 0 !important; } :root[data-visual-system="white-world"][data-design-system] aside#sidebar .sidebar-nav-item i { font-size: 17px !important; width: 18px; text-align: center; flex: none; color: inherit !important; margin: 0 !important; background: transparent !important; box-shadow: none !important; } :root[data-visual-system="white-world"][data-design-system] aside#sidebar .sidebar-nav-item .nav-label { font-size: var(--ww-fs-14); font-weight: var(--ww-fw-medium); color: var(--ww-text) !important; } :root[data-visual-system="white-world"][data-design-system] aside#sidebar .sidebar-nav-item:hover { background: var(--ww-hover) !important; color: var(--ww-text) !important; } :root[data-visual-system="white-world"][data-design-system] aside#sidebar .sidebar-nav-item.active { background: var(--ww-selected) !important; color: var(--ww-t-600) !important; } :root[data-visual-system="white-world"][data-design-system] aside#sidebar .sidebar-nav-item.active .nav-label { color: var(--ww-t-800) !important; font-weight: var(--ww-fw-semibold); } :root[data-visual-system="white-world"][data-design-system] aside#sidebar .sidebar-nav-item.active::before { content: "" !important; display: block !important; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--ww-accent) !important; } :root[data-visual-system="white-world"][data-design-system] aside#sidebar .sidebar-nav-item::after { display: none !important; } /* legacy tooltip: replaced by rail.js */ :root[data-visual-system="white-world"][data-design-system] aside#sidebar .sidebar-nav-title { font-size: var(--ww-fs-12) !important; font-weight: var(--ww-fw-semibold) !important; color: var(--ww-text-3) !important; text-transform: none !important; letter-spacing: 0 !important; padding: 10px 11px 4px !important; } :root[data-visual-system="white-world"][data-design-system] aside#sidebar .sidebar-nav-group-title { position: relative; height: 40px !important; min-height: 40px; padding: 0 11px !important; margin: 0 !important; border-radius: 10px !important; opacity: 1 !important; color: var(--ww-icon) !important; font-size: var(--ww-fs-14) !important; font-weight: var(--ww-fw-medium) !important; text-transform: none !important; letter-spacing: 0 !important; gap: 12px !important; } :root[data-visual-system="white-world"][data-design-system] aside#sidebar .sidebar-nav-group-title .nav-label { color: var(--ww-text) !important; } :root[data-visual-system="white-world"][data-design-system] aside#sidebar .sidebar-nav-group-title:hover { background: var(--ww-hover) !important; color: var(--ww-text) !important; } :root[data-visual-system="white-world"][data-design-system] aside#sidebar .sidebar-nav-group-title::before { content: ""; width: 18px; height: 18px; flex: none; background-color: currentColor; -webkit-mask: var(--ww-group-icon, url("/static/icons/white-world/ph/regular/folder-open.svg")) center / contain no-repeat; mask: var(--ww-group-icon, url("/static/icons/white-world/ph/regular/folder-open.svg")) center / contain no-repeat; } :root[data-visual-system="white-world"][data-design-system] aside#sidebar [data-nav-group="resumen"] { --ww-group-icon: url("/static/icons/white-world/ph/regular/squares-four.svg"); } :root[data-visual-system="white-world"][data-design-system] aside#sidebar [data-nav-group="agenda"] { --ww-group-icon: url("/static/icons/white-world/ph/regular/calendar-dots.svg"); } :root[data-visual-system="white-world"][data-design-system] aside#sidebar [data-nav-group="pacientes"] { --ww-group-icon: url("/static/icons/white-world/ph/regular/users.svg"); } :root[data-visual-system="white-world"][data-design-system] aside#sidebar [data-nav-group="comunicacion"] { --ww-group-icon: url("/static/icons/white-world/ph/regular/chats.svg"); } :root[data-visual-system="white-world"][data-design-system] aside#sidebar [data-nav-group="facturacion"] { --ww-group-icon: url("/static/icons/white-world/ph/regular/invoice.svg"); } :root[data-visual-system="white-world"][data-design-system] aside#sidebar [data-nav-group="almacen"] { --ww-group-icon: url("/static/icons/white-world/ph/regular/package.svg"); } :root[data-visual-system="white-world"][data-design-system] aside#sidebar [data-nav-group="gestion"] { --ww-group-icon: url("/static/icons/white-world/ph/regular/sliders-horizontal.svg"); } :root[data-visual-system="white-world"][data-design-system] aside#sidebar .sidebar-nav-group.ww-has-active > .sidebar-nav-group-title { background: var(--ww-selected) !important; color: var(--ww-t-700) !important; } :root[data-visual-system="white-world"][data-design-system] aside#sidebar .sidebar-nav-group-items { padding-left: 30px; } :root[data-visual-system="white-world"][data-design-system] aside#sidebar .sidebar-nav-group-items .sidebar-nav-item { height: 34px; min-height: 34px !important; } :root[data-visual-system="white-world"][data-design-system] aside#sidebar .sidebar-nav-group-items .sidebar-nav-item i { display: none !important; } :root[data-visual-system="white-world"][data-design-system] aside#sidebar .sidebar-nav-group-items .sidebar-nav-item .nav-label { font-size: var(--ww-fs-13); color: var(--ww-text-2) !important; } :root[data-visual-system="white-world"][data-design-system] aside#sidebar .sidebar-nav-group-items .sidebar-nav-item.active .nav-label { color: var(--ww-t-800) !important; } :root[data-visual-system="white-world"][data-design-system] aside#sidebar .qs-trigger:not([hidden]) { display: flex !important; align-items: center; gap: 10px; height: 36px; margin: 0 0 8px !important; padding: 0 10px !important; border-radius: var(--ww-r-control) !important; border: 1px solid var(--ww-border-strong) !important; background: var(--ww-surface) !important; color: var(--ww-text-3) !important; font-size: var(--ww-fs-13); } @media (min-width: 992px) { /* Collapsed rail */ :root[data-visual-system="white-world"][data-design-system] aside#sidebar:not(.sidebar--pinned) .sidebar-nav { align-items: center; padding: 10px 0 !important; } :root[data-visual-system="white-world"][data-design-system] aside#sidebar:not(.sidebar--pinned) :is(.nav-label, .sidebar-nav-title, .sidebar-nav-group-caret, .qs-trigger-text, .qs-trigger-kbd, .brand-logo-wordmark, .sidebar-version) { display: none !important; } :root[data-visual-system="white-world"][data-design-system] aside#sidebar:not(.sidebar--pinned) :is(.sidebar-nav-item, .sidebar-nav-group-title, .qs-trigger) { width: 40px !important; padding: 0 !important; justify-content: center !important; } :root[data-visual-system="white-world"][data-design-system] aside#sidebar:not(.sidebar--pinned) .qs-trigger { border-color: transparent !important; } :root[data-visual-system="white-world"][data-design-system] aside#sidebar:not(.sidebar--pinned) .sidebar-nav-section { align-items: center; width: 100%; } :root[data-visual-system="white-world"][data-design-system] aside#sidebar:not(.sidebar--pinned) .sidebar-nav-section + .sidebar-nav-section { border-top: 0 !important; position: relative; } :root[data-visual-system="white-world"][data-design-system] aside#sidebar:not(.sidebar--pinned) .sidebar-nav-section + .sidebar-nav-section::before { content: ""; width: 24px; height: 1px; background: var(--ww-border); margin: 0 auto 8px; } :root[data-visual-system="white-world"][data-design-system] aside#sidebar:not(.sidebar--pinned) .sidebar-nav-item.active::before { left: -12px; } :root[data-visual-system="white-world"][data-design-system] aside#sidebar:not(.sidebar--pinned) .sidebar-logo { justify-content: center !important; padding: 0 !important; } /* Groups become one icon; their items open as a flyout (positioned by rail.js) */ :root[data-visual-system="white-world"][data-design-system] aside#sidebar:not(.sidebar--pinned) .sidebar-nav-group { position: relative; } :root[data-visual-system="white-world"][data-design-system] aside#sidebar:not(.sidebar--pinned) .sidebar-nav-group-items { display: none !important; position: fixed; left: calc(var(--ww-rail) + 8px); top: var(--ww-flyout-top, 80px); width: 240px; max-height: 70vh; overflow: auto; padding: 8px !important; background: var(--ww-surface); border: 1px solid var(--ww-border); border-radius: var(--ww-r-overlay); box-shadow: var(--ww-e3); z-index: var(--ww-z-flyout); } :root[data-visual-system="white-world"][data-design-system] aside#sidebar:not(.sidebar--pinned) .sidebar-nav-group.ww-flyout-open .sidebar-nav-group-items:not([hidden]) { display: block !important; } :root[data-visual-system="white-world"][data-design-system] aside#sidebar:not(.sidebar--pinned) .sidebar-nav-group-items::before { content: attr(data-ww-title); display: block; padding: 6px 10px 8px; font-family: var(--ww-font-display); font-stretch: 88%; font-weight: 700; font-size: var(--ww-fs-14); color: var(--ww-text); } :root[data-visual-system="white-world"][data-design-system] aside#sidebar:not(.sidebar--pinned) .sidebar-nav-group-items .sidebar-nav-item { width: auto !important; justify-content: flex-start !important; padding: 0 10px !important; height: 34px; } :root[data-visual-system="white-world"][data-design-system] aside#sidebar:not(.sidebar--pinned) .sidebar-nav-group-items .nav-label { display: inline !important; color: var(--ww-text) !important; font-size: var(--ww-fs-14); } :root[data-visual-system="white-world"][data-design-system] aside#sidebar:not(.sidebar--pinned) .sidebar-nav-group-items .sidebar-nav-item.active::before { display: none !important; } } /* Rail tooltip and pin toggle (created by rail.js) */ .ww-rail-tip { position: fixed; z-index: var(--ww-z-flyout, 1060); left: calc(var(--ww-rail, 64px) + 8px); transform: translateY(-50%); background: #15181c; color: #fff; font: 600 12px/1.2 "Inter Tight", Arial, sans-serif; padding: 6px 9px; border-radius: 6px; box-shadow: 0 1px 2px rgb(21 24 28 / .06), 0 8px 24px rgb(21 24 28 / .08); pointer-events: none; white-space: nowrap; } :root[data-visual-system="white-world"][data-design-system] .ww-rail-pin { margin: auto 12px 12px; height: 40px; border-radius: 10px; border: 1px solid var(--ww-border); background: var(--ww-surface); color: var(--ww-text-2); display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; font: 500 14px var(--ww-font-ui); flex: none; } :root[data-visual-system="white-world"][data-design-system] .ww-rail-pin:hover { background: var(--ww-hover); color: var(--ww-text); } :root[data-visual-system="white-world"][data-design-system] .ww-rail-pin::before { content: ""; width: 18px; height: 18px; background-color: currentColor; -webkit-mask: url("/static/icons/white-world/ph/regular/caret-double-right.svg") center / contain no-repeat; mask: url("/static/icons/white-world/ph/regular/caret-double-right.svg") center / contain no-repeat; } :root[data-visual-system="white-world"][data-design-system] aside#sidebar.sidebar--pinned .ww-rail-pin { justify-content: flex-start; padding: 0 12px; } :root[data-visual-system="white-world"][data-design-system] aside#sidebar.sidebar--pinned .ww-rail-pin::before { transform: rotate(180deg); } :root[data-visual-system="white-world"][data-design-system] aside#sidebar:not(.sidebar--pinned) .ww-rail-pin { width: 40px; margin: 8px 12px 12px; } /* The rail is one column the height of the window: header, footer and the pin keep their size and ONLY the nav scrolls. With `overflow: visible` the admin menu (2.300 px) ran off the bottom: no scroll, and «Desplegar menú» (the last child) was unreachable. Flyouts and tooltips are position:fixed, so the scroll container does not clip them. */ @media (min-width: 992px) { :root[data-visual-system="white-world"][data-design-system] aside#sidebar.sidebar, :root[data-visual-system="white-world"][data-design-system] aside#sidebar.sidebar:not(.sidebar--pinned), :root[data-visual-system="white-world"][data-design-system] aside#sidebar.sidebar:not(.sidebar--pinned):hover, :root[data-visual-system="white-world"][data-design-system] aside#sidebar.sidebar.hover-expanded:not(.sidebar--pinned) { display: flex !important; flex-direction: column !important; overflow: hidden !important; } :root[data-visual-system="white-world"][data-design-system] aside#sidebar.sidebar > * { flex: none; } :root[data-visual-system="white-world"][data-design-system] aside#sidebar.sidebar > .sidebar-nav { flex: 1 1 auto !important; min-height: 0 !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain; scrollbar-width: thin; } } :root[data-visual-system="white-world"][data-design-system] aside#sidebar:not(.sidebar--pinned) .ww-rail-pin span { display: none; } @media (max-width: 991px) { :root[data-visual-system="white-world"][data-design-system] .ww-rail-pin { display: none; } } @media (prefers-reduced-motion: reduce) { :root[data-visual-system="white-world"][data-design-system] * { transition: none !important; animation-duration: .01ms !important; } } /* ---------- Page-specific components (Design, Patients, All in One, top bar, cookies) ---------- */ :root[data-visual-system="white-world"][data-design-system] .service-menu-heading { font-family: var(--ww-font-display) !important; font-stretch: 85%; font-weight: var(--ww-fw-bold) !important; font-size: var(--ww-fs-20) !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--ww-text) !important; display: flex; align-items: center; gap: 10px; } :root[data-visual-system="white-world"][data-design-system] .service-menu-heading i { color: var(--ww-t-600) !important; font-size: 18px; } :root[data-visual-system="white-world"][data-design-system] .service-badge.badge-beta { background: var(--ww-n-900) !important; color: #fff !important; border: 0 !important; border-radius: var(--ww-r-pill) !important; font: 600 12px/22px var(--ww-font-ui) !important; padding: 0 9px !important; box-shadow: none !important; } :root[data-visual-system="white-world"][data-design-system] header.topbar .topbar-cart-btn { width: 36px !important; height: 36px !important; border-radius: 10px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; color: var(--ww-text-2) !important; display: inline-grid !important; place-items: center; } :root[data-visual-system="white-world"][data-design-system] header.topbar .topbar-cart-btn:hover { background: var(--ww-hover) !important; color: var(--ww-text) !important; } :root[data-visual-system="white-world"][data-design-system] :is(.p360-avatar, .p360-avatar--sm) { border-radius: 10px !important; background: var(--ww-cat-1-bg) !important; color: var(--ww-cat-1) !important; font-weight: var(--ww-fw-bold) !important; border: 0 !important; } :root[data-visual-system="white-world"][data-design-system] .aio-stepper__dot { background: var(--ww-surface) !important; border: 1.5px solid var(--ww-border-strong) !important; color: var(--ww-text-2) !important; box-shadow: none !important; } :root[data-visual-system="white-world"][data-design-system] .aio-stepper__item.is-current .aio-stepper__dot { border-color: var(--ww-accent) !important; color: var(--ww-t-700) !important; box-shadow: 0 0 0 4px var(--ww-selected) !important; background: var(--ww-surface) !important; } :root[data-visual-system="white-world"][data-design-system] .aio-stepper__item.is-complete .aio-stepper__dot { background: var(--ww-accent) !important; border-color: var(--ww-accent) !important; color: #fff !important; } :root[data-visual-system="white-world"][data-design-system] .aio-stepper__item::before { background: var(--ww-border) !important; } :root[data-visual-system="white-world"][data-design-system] .aio-stepper__item.is-complete::before, :root[data-visual-system="white-world"][data-design-system] .aio-stepper__item.is-current::before { background: var(--ww-t-300) !important; } :root[data-visual-system="white-world"][data-design-system] .aio-stepper__label { color: var(--ww-text-2) !important; font-weight: var(--ww-fw-semibold) !important; } :root[data-visual-system="white-world"][data-design-system] .aio-stepper__item.is-current .aio-stepper__label { color: var(--ww-text) !important; } :root[data-visual-system="white-world"][data-design-system] #cookie-banner { background: var(--ww-surface) !important; color: var(--ww-text) !important; border: 1px solid var(--ww-border) !important; border-radius: var(--ww-r-overlay) !important; box-shadow: var(--ww-e3) !important; font-family: var(--ww-font-ui); } :root[data-visual-system="white-world"][data-design-system] #cookie-banner a { color: var(--ww-link) !important; } :root[data-visual-system="white-world"][data-design-system] #cookie-banner button { border-radius: var(--ww-r-control) !important; min-height: 36px; font-weight: 600; background: var(--ww-surface) !important; color: var(--ww-text) !important; border: 1px solid var(--ww-border-strong) !important; } :root[data-visual-system="white-world"][data-design-system] #cookie-banner button:last-of-type { background: var(--ww-action) !important; border-color: var(--ww-action) !important; color: #fff !important; } :root[data-visual-system="white-world"][data-design-system] aside#sidebar .qs-trigger-text { white-space: nowrap; flex: 1; text-align: left; } :root[data-visual-system="white-world"][data-design-system] aside#sidebar .qs-trigger-kbd { white-space: nowrap; font: 500 11px var(--ww-font-ui); color: var(--ww-text-3); border: 1px solid var(--ww-border); border-radius: 5px; padding: 1px 6px; background: var(--ww-n-25); } :root[data-visual-system="white-world"][data-design-system] aside#sidebar :is(.sidebar-nav-item i, .qs-trigger i)::before { width: 20px !important; height: 20px !important; vertical-align: middle !important; } :root[data-visual-system="white-world"][data-design-system] aside#sidebar .sidebar-nav-group-title::before { width: 20px; height: 20px; } /* ---------- Shell: top-bar buttons, user menu, notifications ---------- */ /* One size for every top-bar icon button (the bell used to be larger and darker). */ :root[data-visual-system="white-world"][data-design-system] header.topbar :is(.notification-btn, .topbar-cart-btn) { width: 36px !important; height: 36px !important; min-height: 36px; padding: 0 !important; border-radius: 10px !important; display: inline-grid !important; place-items: center; background: transparent !important; border: 0 !important; box-shadow: none !important; color: var(--ww-text-2) !important; } :root[data-visual-system="white-world"][data-design-system] header.topbar :is(.notification-btn, .topbar-cart-btn) > i { font-size: 18px !important; color: inherit !important; } :root[data-visual-system="white-world"][data-design-system] header.topbar :is(.notification-btn, .topbar-cart-btn):is(:hover, [aria-expanded="true"], .is-active) { background: var(--ww-hover) !important; color: var(--ww-text) !important; } :root[data-visual-system="white-world"][data-design-system] header.topbar .dropdown.me-2 { margin-right: 0 !important; } :root[data-visual-system="white-world"][data-design-system] header.topbar :is(.notification-badge, .topbar-cart-count) { background: var(--ww-err-solid) !important; color: #fff !important; border: 2px solid var(--ww-surface) !important; font: 700 10px/1 var(--ww-font-ui) !important; min-width: 18px; height: 18px; } :root[data-visual-system="white-world"][data-design-system] header.topbar .user-avatar { background: var(--ww-sunken) !important; color: var(--ww-text-2) !important; border: 0 !important; } /* User menu: a white panel, not a turquoise slab. */ :root[data-visual-system="white-world"][data-design-system] .user-menu-dropdown-content { padding: 6px !important; min-width: 300px; } :root[data-visual-system="white-world"][data-design-system] .user-menu-header { background: var(--ww-surface) !important; border-bottom: 1px solid var(--ww-border) !important; border-radius: 8px 8px 0 0 !important; padding: 14px 12px !important; margin: -6px -6px 6px !important; } :root[data-visual-system="white-world"][data-design-system] .user-menu-header :is(.user-info, .user-name, .user-email-small) { color: var(--ww-text) !important; -webkit-text-fill-color: currentColor; } :root[data-visual-system="white-world"][data-design-system] .user-menu-header .user-name { font-weight: var(--ww-fw-semibold) !important; font-size: var(--ww-fs-14) !important; } :root[data-visual-system="white-world"][data-design-system] .user-menu-header .user-email-small { color: var(--ww-text-3) !important; font-size: var(--ww-fs-12) !important; opacity: 1 !important; } :root[data-visual-system="white-world"][data-design-system] .user-menu-header .user-avatar-large { width: 40px !important; height: 40px !important; border-radius: 10px !important; background: var(--ww-selected) !important; color: var(--ww-t-700) !important; border: 0 !important; } :root[data-visual-system="white-world"][data-design-system] .user-menu-section-label { font-size: var(--ww-fs-12) !important; font-weight: var(--ww-fw-semibold) !important; color: var(--ww-text-3) !important; text-transform: none !important; letter-spacing: 0 !important; padding: 8px 10px 4px !important; } :root[data-visual-system="white-world"][data-design-system] :is(.user-menu-dropdown-content, .notification-dropdown) .dropdown-item > i:first-child { color: var(--ww-text-3) !important; width: 18px; } :root[data-visual-system="white-world"][data-design-system] :is(.user-menu-dropdown-content, .notification-dropdown) .dropdown-item:hover > i:first-child { color: var(--ww-text) !important; } :root[data-visual-system="white-world"][data-design-system] :is(#logoutMenuButton, #logoutMenuButton > i) { color: var(--ww-err-text) !important; } :root[data-visual-system="white-world"][data-design-system] .credits-item { padding: 4px !important; background: transparent !important; } :root[data-visual-system="white-world"][data-design-system] .credits-display { background: var(--ww-n-25) !important; border: 1px solid var(--ww-border) !important; border-radius: 10px !important; padding: 10px 12px !important; gap: 12px; box-shadow: none !important; } :root[data-visual-system="white-world"][data-design-system] .credits-display:hover { background: var(--ww-surface) !important; border-color: var(--ww-border-hover) !important; } :root[data-visual-system="white-world"][data-design-system] .credits-icon { width: 36px !important; height: 36px !important; border-radius: 10px !important; background: var(--ww-selected) !important; color: var(--ww-t-700) !important; } :root[data-visual-system="white-world"][data-design-system] .credits-icon i { color: inherit !important; } :root[data-visual-system="white-world"][data-design-system] .credits-label { font-size: var(--ww-fs-12) !important; color: var(--ww-text-2) !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: var(--ww-fw-medium) !important; } :root[data-visual-system="white-world"][data-design-system] .credits-amount { background: none !important; -webkit-text-fill-color: currentColor !important; color: var(--ww-text) !important; font-family: var(--ww-font-display); font-stretch: var(--ww-display-stretch); font-weight: var(--ww-fw-bold) !important; font-size: var(--ww-fs-20) !important; font-variant-numeric: tabular-nums; } :root[data-visual-system="white-world"][data-design-system] .credits-display > i:last-child { color: var(--ww-t-600) !important; } /* Notifications panel */ :root[data-visual-system="white-world"][data-design-system] .notification-dropdown { width: 380px !important; padding: 6px !important; } :root[data-visual-system="white-world"][data-design-system] .notification-dropdown .dropdown-header { background: var(--ww-surface) !important; color: var(--ww-text) !important; border-radius: 8px !important; padding: 8px 8px 8px 10px !important; font-family: var(--ww-font-display) !important; font-stretch: 88%; font-weight: var(--ww-fw-bold) !important; font-size: var(--ww-fs-16) !important; } :root[data-visual-system="white-world"][data-design-system] .notification-dropdown .dropdown-header > span > i { display: none; } :root[data-visual-system="white-world"][data-design-system] .notification-dropdown .dropdown-header .btn { color: var(--ww-text-2) !important; width: 32px; min-height: 32px; padding: 0 !important; border-radius: 8px !important; } :root[data-visual-system="white-world"][data-design-system] .notification-dropdown .dropdown-header .btn:hover { background: var(--ww-hover) !important; color: var(--ww-text) !important; } :root[data-visual-system="white-world"][data-design-system] #reluNotificationsList > .text-center { padding: 28px 12px !important; color: var(--ww-text-3) !important; } :root[data-visual-system="white-world"][data-design-system] #reluNotificationsList > .text-center > i { display: inline-grid !important; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--ww-selected); color: var(--ww-t-600) !important; font-size: 18px; margin-bottom: 8px; } /* Pinned rail: only the page itself is highlighted; its group just marks where you are. */ :root[data-visual-system="white-world"][data-design-system] aside#sidebar.sidebar--pinned .sidebar-nav-group.ww-has-active > .sidebar-nav-group-title { background: transparent !important; color: var(--ww-t-600) !important; } :root[data-visual-system="white-world"][data-design-system] aside#sidebar.sidebar--pinned .sidebar-nav-group.ww-has-active > .sidebar-nav-group-title .nav-label { color: var(--ww-text) !important; font-weight: var(--ww-fw-semibold) !important; } :root[data-visual-system="white-world"][data-design-system] aside#sidebar .brand-logo-wordmark-sub { text-transform: none !important; letter-spacing: 0 !important; } :root[data-visual-system="white-world"][data-design-system] aside#sidebar.sidebar--pinned .sidebar-nav-title:not([hidden]) { opacity: 1 !important; visibility: visible !important; height: auto !important; color: var(--ww-text-3) !important; text-transform: lowercase !important; display: block !important; width: auto !important; max-width: none !important; overflow: visible !important; } :root[data-visual-system="white-world"][data-design-system] aside#sidebar.sidebar--pinned .sidebar-nav-title::first-letter { text-transform: uppercase; } :root[data-visual-system="white-world"][data-design-system] .notification-dropdown .dropdown-header :is(span, i) { color: var(--ww-text) !important; } :root[data-visual-system="white-world"][data-design-system] .notification-dropdown .dropdown-header .btn :is(i, .fa, .fas) { color: var(--ww-text-2) !important; } :root[data-visual-system="white-world"][data-design-system] .credits-item .credits-display { width: 100%; } /* Mobile: the menu button sits inside the top bar instead of floating over its title. */ @media (max-width: 991px) { :root[data-visual-system="white-world"][data-design-system] .sidebar-toggle { position: fixed !important; top: 10px !important; left: 10px !important; width: 36px !important; height: 36px !important; padding: 0 !important; display: inline-grid !important; place-items: center; border-radius: 10px !important; border: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--ww-text) !important; z-index: calc(var(--ww-z-rail) + 10); } :root[data-visual-system="white-world"][data-design-system] .sidebar-toggle:hover { background: var(--ww-hover) !important; } :root[data-visual-system="white-world"][data-design-system] header.topbar { padding-left: 56px !important; } } :root[data-visual-system="white-world"][data-design-system] header.topbar .topbar-left { align-self: stretch; align-items: center !important; } :root[data-visual-system="white-world"][data-design-system] header.topbar .topbar-title { margin: 0 !important; line-height: 1.2 !important; } /* ---------- Common fixes reported by the page audit ---------- */ /* Empty states rendered by JS use a bare instead of .ds-empty-icon: same turquoise tile. */ :root[data-visual-system="white-world"][data-design-system] .ds-empty-state > i:first-child { display: inline-grid !important; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--ww-selected) !important; color: var(--ww-t-600) !important; font-size: 22px !important; margin: 0 auto 12px !important; opacity: 1 !important; } /* No double frames: a list or table wrapper inside a card body is already on a surface. */ :root[data-visual-system="white-world"][data-design-system] :is(.card-body, .ds-card-body, .card, .ds-card) > :is(.ds-list, .ds-table-wrap) { border: 0 !important; box-shadow: none !important; border-radius: 0 !important; background: transparent !important; } /* Cards inside gap-driven layouts: the gap is the spacing, not the legacy 24px margin. */ :root[data-visual-system="white-world"][data-design-system] :is(.ds-grid, [class*="ds-grid-"], .ds-stack, .ds-flex[class*="ds-gap-"], .d-grid[class*="gap-"], .d-flex[class*="gap-"], .row[class*=" g-"], .row[class^="g-"]) > .card, :root[data-visual-system="white-world"][data-design-system] :is(.row[class*=" g-"], .row[class^="g-"]) > [class*="col"] > .card { margin-bottom: 0 !important; } /* ============================================================ LAYOUT RHYTHM (tokens: --ww-page-*, --ww-*-gap, --ww-card-pad, --ww-modal-pad) One content frame for every page: .main-content draws the margins, and the first-level page container stops adding its own (it used to give 12, 24, 36 or 48 px depending on the page, and asymmetric 12/24 on container-fluid). ============================================================ */ :root[data-visual-system="white-world"][data-design-system] .main-content { padding: var(--ww-page-top) var(--ww-page-x) var(--ww-page-bottom) !important; } :root[data-visual-system="white-world"][data-design-system] .main-content > :is(.container-fluid, .container, .container-xl, .container-xxl, main, [class$="-shell"], [class*="-shell "]) { padding-left: 0 !important; padding-right: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; max-width: var(--ww-content-max) !important; margin-left: auto !important; margin-right: auto !important; } /* Page header -> first block */ :root[data-visual-system="white-world"][data-design-system] :is(.page-header, .ds-page-header) { margin-bottom: var(--ww-header-gap) !important; gap: var(--ww-block-gap); } :root[data-visual-system="white-world"][data-design-system] :is(.page-header-actions, .ds-page-header-actions) { gap: var(--ww-inline-gap) !important; } /* Cards: one inner padding everywhere */ :root[data-visual-system="white-world"][data-design-system] :is(.card-body, .ds-card-body):not([class*=" p-"], [class^="p-"], [class*=" px-"], [class*=" py-"], [class*=" pt-"], [class*=" pb-"], [class*=" ps-"], [class*=" pe-"]) { padding: var(--ww-card-pad) !important; } :root[data-visual-system="white-world"][data-design-system] :is(.card-header, .ds-card-header):not([class*=" p-"], [class^="p-"], [class*=" px-"], [class*=" py-"], [class*=" pt-"], [class*=" pb-"], [class*=" ps-"], [class*=" pe-"]) { padding: var(--ww-card-pad-y) var(--ww-card-pad) !important; } :root[data-visual-system="white-world"][data-design-system] :is(.card-footer, .ds-card-footer):not([class*=" p-"], [class^="p-"], [class*=" px-"], [class*=" py-"], [class*=" pt-"], [class*=" pb-"], [class*=" ps-"], [class*=" pe-"]) { padding: var(--ww-card-pad-y) var(--ww-card-pad) !important; } :root[data-visual-system="white-world"][data-design-system] :is(.card-header, .ds-card-header) :is(h1, h2, h3, h4, h5, h6, .card-title) { margin: 0 !important; font-size: var(--ww-fs-16) !important; } /* A table reaches the card edge: the card body gives up its inset around it. */ :root[data-visual-system="white-world"][data-design-system] :is(.card-body, .ds-card-body):has(> :is(.table-responsive, .ds-table-wrap, table)):not(:has(> :not(.table-responsive, .ds-table-wrap, table, [hidden], .d-none, script, template))) { padding: 0 !important; } /* Forms: .mb-3 already gives 16 px between fields; no global override, so filter rows that zero it keep their alignment. */ /* Modals: header 20/24, body 24, footer 16/24; actions 8 apart, primary last (right). */ :root[data-visual-system="white-world"][data-design-system] :is(.modal-header, .ds-modal-header) { padding: 20px var(--ww-modal-pad) !important; gap: var(--ww-stack-gap); } :root[data-visual-system="white-world"][data-design-system] :is(.modal-body, .ds-modal-body):not([class*=" p-"], [class^="p-"], [class*=" px-"], [class*=" py-"], [class*=" pt-"], [class*=" pb-"], [class*=" ps-"], [class*=" pe-"]) { padding: var(--ww-modal-pad) !important; } :root[data-visual-system="white-world"][data-design-system] :is(.modal-footer, .ds-modal-footer) { padding: var(--ww-card-pad-y) var(--ww-modal-pad) !important; gap: var(--ww-inline-gap) !important; } :root[data-visual-system="white-world"][data-design-system] :is(.modal-footer, .ds-modal-footer) > :not(.me-auto, .ms-auto) { margin: 0 !important; } :root[data-visual-system="white-world"][data-design-system] :is(.modal-header, .ds-modal-header) .btn-close { margin: 0 0 0 auto !important; width: 32px; height: 32px; padding: 0 !important; border-radius: 8px; background-size: 12px; opacity: .6; } :root[data-visual-system="white-world"][data-design-system] :is(.modal-header, .ds-modal-header) .btn-close:hover { background-color: var(--ww-hover); opacity: 1; } /* Selected chips/filters marked with the other conventions the pages use. */ :root[data-visual-system="white-world"][data-design-system] :is(.ds-filter-chip, .ds-chip, .filter-chip, .chip):is(.is-active, .is-selected, [aria-selected="true"], [aria-checked="true"]) { background: var(--ww-selected) !important; border-color: var(--ww-t-200) !important; color: var(--ww-t-700) !important; } /* A sentence alert (text with inline , …) is prose, not a flex row: flex split it into pieces 12 px apart. Flex only when it has the icon + content structure. */ /* No !important: inline display:none set by JS must keep winning. */ :root[data-visual-system="white-world"][data-design-system] .ds-alert:not([hidden], .d-none):not(:has(> .ds-alert-content, > .ds-alert-body, > div)) { display: block; } :root[data-visual-system="white-world"][data-design-system] .ds-alert:not(:has(> .ds-alert-content, > .ds-alert-body, > div)) > :is(i, .ds-alert-icon):first-child { margin-right: 8px; } /* Top-bar title: one line, ellipsis; never pushes the icons off screen. */ :root[data-visual-system="white-world"][data-design-system] header.topbar .topbar-left { min-width: 0; flex: 1 1 auto; } :root[data-visual-system="white-world"][data-design-system] header.topbar :is(.topbar-title, .topbar-left > h5, .topbar-left > h4) { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block !important; } :root[data-visual-system="white-world"][data-design-system] header.topbar :is(.topbar-title, .topbar-left > h5, .topbar-left > h4) { margin: 0 !important; font-size: var(--ww-fs-14) !important; font-weight: var(--ww-fw-semibold) !important; } :root[data-visual-system="white-world"][data-design-system] header.topbar :is(.topbar-title, .topbar-left > h5, .topbar-left > h4) > i { margin-right: 8px; color: var(--ww-t-600) !important; } :root[data-visual-system="white-world"][data-design-system] header.topbar .topbar-right { flex: none; } :root[data-visual-system="white-world"][data-design-system] header.topbar .printer-selector-btn { max-width: 220px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } :root[data-visual-system="white-world"][data-design-system] header.topbar .topbar-right > .dropdown { margin-right: 0 !important; } :root[data-visual-system="white-world"][data-design-system] header.topbar .topbar-right { gap: 4px; } @media (max-width: 767px) { /* Phone: the icons always fit; the view title yields first, then the printer name. */ :root[data-visual-system="white-world"][data-design-system] header.topbar .topbar-left:has(+ .topbar-right .printer-selector-btn) { display: none !important; } :root[data-visual-system="white-world"][data-design-system] header.topbar .printer-selector-btn { max-width: 120px; } :root[data-visual-system="white-world"][data-design-system] header.topbar .user-menu-btn > :is(.fa-chevron-down, .fas.fa-chevron-down, .user-menu-caret) { display: none !important; } :root[data-visual-system="white-world"][data-design-system] header.topbar .topbar-right { gap: 0; margin-left: auto; } } :root[data-visual-system="white-world"][data-design-system] header.topbar :is(.topbar-title, .topbar-left > h5, .topbar-left > h4), :root[data-visual-system="white-world"][data-design-system] header.topbar :is(.topbar-title, .topbar-left > h5, .topbar-left > h4) :is(span, strong, small) { color: var(--ww-text) !important; -webkit-text-fill-color: currentColor; } /* Section titles: hierarchy by type, not by a turquoise bar (the accent is for where to act). */ :root[data-visual-system="white-world"][data-design-system] .ds-section-title { border-left: 0 !important; padding-left: 0 !important; margin-bottom: var(--ww-stack-gap) !important; font-size: var(--ww-fs-16) !important; } /* Ghost actions in a page header sit beside the primary: quiet text, turquoise icon like secondaries. */ :root[data-visual-system="white-world"][data-design-system] :is(.page-header-actions, .ds-page-header-actions, .page-header) :is(.ds-btn-ghost, .btn-ghost, .btn-link) { color: var(--ww-text-2) !important; } :root[data-visual-system="white-world"][data-design-system] :is(.page-header-actions, .ds-page-header-actions, .page-header) :is(.ds-btn-ghost, .btn-ghost, .btn-link):hover { color: var(--ww-text) !important; background: var(--ww-hover) !important; } :root[data-visual-system="white-world"][data-design-system] :is(.page-header-actions, .ds-page-header-actions, .page-header) :is(.ds-btn-ghost, .btn-ghost, .btn-link) > :is(i, .fa, .fas):first-child { color: var(--ww-t-600) !important; } /* A disabled primary is not where to act yet: neutral, not turquoise at 45 %. */ :root[data-visual-system="white-world"][data-design-system] :is(.btn-primary, .ds-btn-primary, .ds-btn--primary):is(:disabled, .disabled) { opacity: 1 !important; background: var(--ww-sunken) !important; border-color: var(--ww-sunken) !important; color: var(--ww-text-disabled) !important; box-shadow: none !important; } :root[data-visual-system="white-world"][data-design-system] :is(.btn-primary, .ds-btn-primary, .ds-btn--primary):is(:disabled, .disabled) :is(i, .fa, .fas, .far) { color: inherit !important; } :root[data-visual-system="white-world"][data-design-system] :is(.btn-primary, .ds-btn-primary, .ds-btn--primary):is(:disabled, .disabled)::after { opacity: 0 !important; } /* .ds-check-group used for ONE checkbox + label: the box sits beside its text, not above it. */ :root[data-visual-system="white-world"][data-design-system] .ds-check-group:has(> .ds-check-input) { flex-direction: row !important; align-items: flex-start; gap: var(--ww-inline-gap); } /* ---------- 3D viewer tools menu (Microl.ai, _viewer_toolbar.html) ---------- Move/Rotate is a segmented control, but app.js marks the active mode with .btn-primary: it came out as a dark chamfered slab with dark text inside a white menu. Here it is a selection. Menu items that app.js tags with .btn-danger / .btn-outline-danger (support debug) are menu items, not destructive buttons: no red frame; when on, they read as selected. */ :root[data-visual-system="white-world"][data-design-system] .viewer-tools-menu .viewer-toolbar-group { background: var(--ww-sunken) !important; border-radius: 9px !important; padding: 3px !important; gap: 2px; box-shadow: none !important; overflow: visible !important; } :root[data-visual-system="white-world"][data-design-system] .viewer-tools-menu .viewer-toolbar-group > .btn { background: transparent !important; border: 0 !important; border-radius: 7px !important; color: var(--ww-text-2) !important; box-shadow: none !important; clip-path: none !important; min-height: 30px; font-weight: var(--ww-fw-semibold); } :root[data-visual-system="white-world"][data-design-system] .viewer-tools-menu .viewer-toolbar-group > .btn::after { display: none !important; } :root[data-visual-system="white-world"][data-design-system] .viewer-tools-menu .viewer-toolbar-group > .btn :is(i, span) { color: inherit !important; } :root[data-visual-system="white-world"][data-design-system] .viewer-tools-menu .viewer-toolbar-group > .btn:is(.viewer-toolbar-toggle-active, [aria-pressed="true"]) { background: var(--ww-surface) !important; color: var(--ww-t-700) !important; box-shadow: 0 1px 2px rgb(21 24 28 / .1) !important; } :root[data-visual-system="white-world"][data-design-system] .viewer-tools-menu .viewer-toolbar-group > .btn:disabled { opacity: 1 !important; color: var(--ww-text-disabled) !important; } :root[data-visual-system="white-world"][data-design-system] .viewer-tools-menu .dropdown-item:is(.btn, .btn-danger, .btn-outline-danger, .btn-primary, .btn-light) { background: transparent !important; border: 0 !important; box-shadow: none !important; color: var(--ww-text) !important; justify-content: flex-start !important; min-height: 0; font-weight: var(--ww-fw-regular); clip-path: none !important; } :root[data-visual-system="white-world"][data-design-system] .viewer-tools-menu .dropdown-item:is(.btn, .btn-danger, .btn-outline-danger, .btn-primary, .btn-light)::after { display: none !important; } :root[data-visual-system="white-world"][data-design-system] .viewer-tools-menu .dropdown-item:hover { background: var(--ww-hover) !important; } :root[data-visual-system="white-world"][data-design-system] .viewer-tools-menu .dropdown-item:is(.viewer-toolbar-toggle-active, [aria-pressed="true"]) { background: var(--ww-selected) !important; color: var(--ww-t-700) !important; } :root[data-visual-system="white-world"][data-design-system] .viewer-tools-menu .dropdown-item:is(.viewer-toolbar-toggle-active, [aria-pressed="true"]) i { color: var(--ww-t-600) !important; } :root[data-visual-system="white-world"][data-design-system] .viewer-toolbar .btn.viewer-toolbar-toggle-active { box-shadow: none !important; } :root[data-visual-system="white-world"][data-design-system] .viewer-tools-menu .viewer-toolbar-menu-danger, :root[data-visual-system="white-world"][data-design-system] .viewer-tools-menu .viewer-toolbar-menu-danger i { color: var(--ww-err-text) !important; } /* Menu item icons label the item; the accent is not for decoration: grey, ink on hover. */ :root[data-visual-system="white-world"][data-design-system] .dropdown-menu .dropdown-item > :is(i, .fa, .fas, .far):first-child { color: var(--ww-text-3) !important; } :root[data-visual-system="white-world"][data-design-system] .dropdown-menu .dropdown-item:hover > :is(i, .fa, .fas, .far):first-child { color: var(--ww-text) !important; } :root[data-visual-system="white-world"][data-design-system] .dropdown-menu .dropdown-item:is(.active, [aria-pressed="true"], .viewer-toolbar-toggle-active) > :is(i, .fa, .fas, .far):first-child { color: var(--ww-t-600) !important; } :root[data-visual-system="white-world"][data-design-system] .dropdown-menu .dropdown-item:is(.text-danger, .viewer-toolbar-menu-danger) > :is(i, .fa, .fas, .far):first-child { color: var(--ww-err-text) !important; } /* Inside a selected chip every text piece takes the selection colour (a muted inner span fell to 3.5:1 on turquoise 50). */ :root[data-visual-system="white-world"][data-design-system] :is(.ds-filter-chip, .ds-chip, .filter-chip, .chip):is(.active, .is-active, .is-selected, [aria-pressed="true"], [aria-selected="true"], [aria-checked="true"]) :is(span, small, strong, em) { color: var(--ww-t-700) !important; }