/* Core UI Kit — W4 Theme bridge + panel Vzhled. Načítat PO core-ui.css. Bridge mapuje kontrakt --th-* (počítá ho engine w4-theme.js) na kit tokeny --cui-*; aktivuje se AŽ atributem data-w4theme="on" na , takže bez enginu platí výchozí tokeny kitu. Pochází z webapp4 host adapteru (core-ui-webapp4.css, jen tokenová část). */ :root[data-w4theme="on"] { --cui-canvas: var(--th-canvas, var(--th-bg)); --cui-bg: var(--th-bg); --cui-surface: var(--th-surface); --cui-surface-2: var(--th-surface-2); --cui-panel: var(--th-panel); --cui-panel-high: color-mix(in srgb, var(--th-panel) 88%, var(--th-text) 12%); --cui-surface-raised: var(--th-surface-raised, var(--th-panel)); --cui-surface-overlay: var(--th-surface-overlay, var(--cui-panel-high)); --cui-surface-inset: var(--th-surface-inset, color-mix(in srgb, var(--th-bg) 88%, var(--th-text) 12%)); --cui-code-surface: var(--th-code-surface, var(--cui-surface-inset)); --cui-text: var(--th-text); --cui-muted: var(--th-muted); --cui-dim: var(--th-dim); --cui-line: var(--th-line); --cui-line-strong: color-mix(in srgb, var(--th-muted) 30%, transparent); --cui-hover: var(--th-hover); --cui-accent: var(--th-accent); --cui-accent-strong: var(--th-accent); --cui-accent-soft: var(--th-accent-soft); --cui-on-accent: var(--th-on-accent); --cui-ok: var(--th-ok); --cui-ok-soft: color-mix(in srgb, var(--th-ok) 14%, transparent); --cui-warning: var(--th-warn); --cui-warning-soft: color-mix(in srgb, var(--th-warn) 14%, transparent); --cui-error: var(--th-err); --cui-error-soft: color-mix(in srgb, var(--th-err) 14%, transparent); --cui-info: var(--th-info, #5ca4ea); --cui-info-soft: var(--th-info-soft, color-mix(in srgb, var(--cui-info) 14%, transparent)); --cui-shadow-sm: var(--th-shadow); --cui-shadow: var(--th-shadow); --cui-backdrop: color-mix(in srgb, var(--th-canvas) 68%, transparent); } body.theme-light .cui-app, body.theme-light .cui-picker, body.theme-light .cui-popover, body.theme-light .cui-modal, body.theme-light .cui-drawer, body.theme-light .cui-toasts { color-scheme: light; } /* ===== Panel Vzhled (W4ThemePanel) ===== */ .cui-th-panel { display: flex; flex-direction: column; gap: 8px; padding: 4px 2px; min-width: 240px; } .cui-th-grp { display: flex; flex-direction: column; align-items: stretch; gap: 5px; font-size: 12px; color: var(--cui-muted); } .cui-th-lbl { display: flex; align-items: center; gap: 8px; font-size: 11.5px; } .cui-th-state { margin-left: auto; font-size: 10.5px; color: var(--cui-dim); } .cui-th-pill { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--cui-line); background: none; color: var(--cui-muted); cursor: pointer; } .cui-th-pill:hover { background: var(--cui-hover); color: var(--cui-text); } .cui-th-pill.on { background: var(--cui-accent-soft); color: var(--cui-accent); border-color: transparent; } .cui-th-save { flex-direction: row; align-items: center; gap: 6px; } .cui-th-save .cui-th-pill { margin-left: 0; } .cui-th-name { flex: 1; min-width: 0; background: transparent; border: 1px solid var(--cui-line); border-radius: 8px; padding: 5px 9px; font-size: 12px; color: var(--cui-text); } .cui-th-name::placeholder { color: var(--cui-dim); } .cui-th-ic { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; } .cui-th-hue { appearance: none; -webkit-appearance: none; width: 100%; height: 10px; border-radius: 6px; outline: none; border: none; padding: 0; margin: 2px 0 0; background: linear-gradient(90deg, hsl(15,80%,55%), hsl(60,80%,50%), hsl(110,65%,45%), hsl(170,65%,42%), hsl(220,80%,58%), hsl(270,72%,58%), hsl(320,72%,56%), hsl(345,78%,55%)); } .cui-th-hue::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid rgba(0,0,0,.4); box-shadow: 0 1px 4px rgba(0,0,0,.45); cursor: pointer; } .cui-th-hue::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid rgba(0,0,0,.4); box-shadow: 0 1px 4px rgba(0,0,0,.45); cursor: pointer; } .cui-th-hue:disabled { opacity: .3; } /* pozadí: levý šedý úsek = schodovitá poloha „bez tóniny" (0–14), pak duha 15–345 */ .cui-th-hue--bg { background: linear-gradient(90deg, #838b99 0%, #838b99 4.1%, #4a4f59 4.15%, hsl(15,80%,55%) 4.5%, hsl(60,80%,50%) 18%, hsl(110,65%,45%) 32%, hsl(170,65%,42%) 47%, hsl(220,80%,58%) 63%, hsl(270,72%,58%) 78%, hsl(320,72%,56%) 92%, hsl(345,78%,55%) 100%); } .cui-th-hue--base { background: linear-gradient(90deg, #0b0d12, #f8fafc); } .cui-th-hue--con { background: linear-gradient(90deg, #7a828f, #f5f7fa); } .cui-th-chips { display: flex; flex-wrap: wrap; gap: 5px; } .cui-th-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--cui-line); color: var(--cui-muted); cursor: pointer; user-select: none; } .cui-th-chip:hover { background: var(--cui-hover); color: var(--cui-text); } .cui-th-chip.on { background: var(--cui-accent-soft); color: var(--cui-accent); border-color: transparent; } .cui-th-chip .cui-th-x { display: inline-flex; opacity: .55; } .cui-th-chip .cui-th-x:hover { opacity: 1; color: var(--cui-error); } .cui-th-chip .cui-th-x .cui-th-ic { width: 11px; height: 11px; } /* ===== Účetní menu + rychlý přepínač (standardní pravý horní roh; vzor webapp4/ecowheel) ===== */ .cui-th-quick { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; border: 1px solid transparent; background: none; color: var(--cui-muted); cursor: pointer; font-size: 11.5px; font-weight: 600; padding: 0; } .cui-th-quick:hover { background: var(--cui-hover); color: var(--cui-text); border-color: var(--cui-line); } .cui-th-quick.on { background: var(--cui-accent-soft); color: var(--cui-accent); } .cui-th-quick .cui-th-ic { width: 14px; height: 14px; } .cui-acct { position: relative; } .cui-acct-ic { width: 16px; height: 16px; min-width: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: var(--cui-muted); } .cui-acct-btn { display: flex; align-items: center; gap: 8px; padding: 3px 9px 3px 3px; border-radius: 12px; border: 1px solid transparent; background: none; color: var(--cui-text); cursor: pointer; font: inherit; } .cui-acct-btn:hover { background: var(--cui-hover); border-color: var(--cui-line); } .cui-acct-tile { position: relative; width: 36px; height: 34px; min-width: 36px; border-radius: 11px; background: linear-gradient(135deg, #2b4f92, #14264a); overflow: hidden; display: block; transition: transform .15s ease, box-shadow .15s ease; } .cui-acct-tile svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .cui-acct-tile svg path { fill: #fff; opacity: .28; stroke: none; } .cui-acct-ini { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 12.5px; letter-spacing: .02em; } .cui-acct-btn:hover .cui-acct-tile { transform: scale(1.08); box-shadow: 0 5px 16px rgba(20,38,74,.4); } .cui-acct-tile.big { width: 44px; height: 41px; min-width: 44px; border-radius: 12px; } .cui-acct-tile.big .cui-acct-ini { font-size: 15px; } .cui-acct-name { font-size: 13px; max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cui-acct-chev { width: 12px !important; height: 12px !important; min-width: 12px !important; } .cui-acct-pop { position: absolute; right: 0; top: calc(100% + 8px); width: 292px; max-width: calc(100vw - 20px); background: var(--cui-panel); color: var(--cui-text); border: 1px solid var(--cui-line); border-radius: 13px; box-shadow: var(--cui-shadow); padding: 8px; z-index: 1400; } .cui-acct-pop[hidden] { display: none; } .cui-acct-head { display: flex; gap: 11px; align-items: center; padding: 8px 8px 10px; border-bottom: 1px solid var(--cui-line); margin-bottom: 6px; } .cui-acct-who { min-width: 0; flex: 1; } .cui-acct-who b { font-size: 13.5px; font-weight: 600; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cui-acct-who > span { font-size: 11px; color: var(--cui-muted); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cui-acct-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px; color: var(--cui-accent); background: var(--cui-accent-soft); border-radius: 999px; padding: 1px 7px; margin-top: 3px; } .cui-acct-badge .cui-acct-ic { width: 10px; height: 10px; min-width: 10px; color: currentColor; } .cui-acct-sec { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--cui-muted); padding: 7px 9px 3px; } .cui-acct-row { display: flex; align-items: center; gap: 9px; padding: 8px 9px; border-radius: 9px; font-size: 13px; color: var(--cui-text); cursor: pointer; text-decoration: none; user-select: none; } .cui-acct-row:hover { background: var(--cui-hover); } .cui-acct-row.danger, .cui-acct-row.danger .cui-acct-ic { color: var(--cui-error); } .cui-acct-row.danger:hover { background: color-mix(in srgb, var(--cui-error) 12%, transparent); } .cui-acct-ext { margin-left: auto; width: 12px !important; height: 12px !important; min-width: 12px !important; } .cui-acct-cur { margin-left: auto; color: var(--cui-muted); font-size: 12px; display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cui-acct-flag { width: 15px; height: 11px; min-width: 15px; border-radius: 2.5px; overflow: hidden; display: inline-block; box-shadow: inset 0 0 0 .5px rgba(128,128,128,.35); } .cui-acct-flag svg { display: block; width: 100%; height: 100%; } .cui-acct-lcheck { width: 13px !important; height: 13px !important; min-width: 13px !important; margin-left: auto; color: var(--cui-accent); } .cui-acct-chev2 { width: 12px !important; height: 12px !important; min-width: 12px !important; transition: transform .15s ease; } .cui-acct-row[aria-expanded="true"] .cui-acct-chev2 { transform: rotate(180deg); } .cui-acct-langlist { display: flex; flex-direction: column; gap: 1px; padding: 2px 4px 4px 32px; } .cui-acct-langlist[hidden] { display: none; } .cui-acct-langopt { display: flex; align-items: center; gap: 8px; padding: 6px 9px; border-radius: 8px; color: var(--cui-text); font-size: 12.5px; cursor: pointer; text-decoration: none; } .cui-acct-langopt:hover { background: var(--cui-hover); } .cui-acct-langopt.on { color: var(--cui-accent); } .cui-acct-thwrap { padding: 2px 4px 4px 10px; } .cui-acct-thwrap[hidden] { display: none; } .cui-acct-div { height: 1px; background: var(--cui-line); margin: 6px 4px; }