@charset "UTF-8"; @import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"); h1.page-title { font-size: 28px; font-weight: 600; color: #40499a; } /* ============================================================ QDNA Pro — Design Tokens (central) — compiled from _design-tokens.scss ------------------------------------------------------------ Drop-in CSS for file:// pages (homepage-mockup, tasklist-page, prototype previews). Mirrors the canonical _design-tokens.scss 1:1; if you edit one, edit the other. Two layers: A. PRIMITIVES — raw Figma values. B. SEMANTIC TOKENS — reference primitives via var(). Generated 2026-05-19 (FLY BABY FLY overnight migration). ============================================================ */ :root { /* ---------- Greys (Figma Colors/Grey/*) ---------- */ --c-grey-950: #0b0b0d; --c-grey-900: #18181c; --c-grey-800: #2e3036; --c-grey-700: #40444d; --c-grey-600: #565b66; --c-grey-500: #6b7280; --c-grey-400: #a6aab3; --c-grey-300: #c4c7cc; --c-grey-200: #d1d5db; --c-grey-100: #e7e9ec; --c-grey-50: #f0f1f2; /* ---------- Action purples (Figma Colors/Purple/*) ---------- */ --c-purple-700: #2a3268; --c-purple-600: #333a7b; --c-purple-500: #40499a; --c-purple-400: #5a64b8; --c-purple-300: #8a92d0; --c-purple-200: #a5acff; --c-purple-100: #c0c5ff; --c-purple-50: #e6e9ff; /* ---------- Action highlight (Figma Purple HIGHLIGHT/*) ---------- */ --c-action-500: #4652f3; --c-action-600: #3540d6; --c-action-700: #2a36b8; /* ---------- Signal colours (semantic-ish primitives) ---------- */ --c-signal-green-bg: #c5f5e2; --c-signal-green-text: #428b6e; --c-signal-green-100: #d8f4e3; --c-signal-yellow-bg: #feedb8; --c-signal-yellow-text: #bf7202; --c-signal-blue-bg: #e6eff9; --c-signal-blue-text: #6a8ab4; --c-signal-red-bg: #fee3e3; --c-signal-red-text: #c65a5a; --c-signal-red-soft: #fff0f0; /* Orange + pink pairs (02.07.2026, calendar): orange = the "in progress" event status, pink = personal events. Pink bg deliberately equals the tasklist pink pastel so the two systems stay visually related. */ --c-signal-orange-bg: #fdeadc; --c-signal-orange-text: #bc6a1f; --c-signal-pink-bg: #f6e1e8; --c-signal-pink-text: #b25777; /* ---------- Favorite / heart (Kim 22.07.2026) ---------- Red-pink used for the "favorite" heart. Was hardcoded in the heart-mode favorite button; promoted to a token so qdnapro-status-badge and the favorite button share one source. */ --c-favorite-heart: #ff4d6a; /* ---------- Bright signal accents (vivid; Kim 24.06.2026) ---------- The muted --c-signal-* are for soft pill backgrounds; these brights are for vivid accents (filled borders, fills, the toast warning). */ --c-success-bright: #1d9e75; /* vivid success green */ --c-warning-bright-bg: #fff3cd; /* vivid warning yellow set (toast reference) */ --c-warning-bright-text: #9a6a10; --c-warning-bright-border: #f0d060; /* ---------- Warning / danger ramp ---------- */ --c-warn-amber-500: #d97706; --c-warn-amber-600: #b45309; --c-warn-orange-500: #ea580c; --c-warn-orange-600: #c2410c; --c-warn-red-500: #dc2626; --c-warn-red-400: #f87171; --c-warn-red-300: #fca5a5; --c-warn-yellow-500: #fbbf24; --c-warn-yellow-600: #f59e0b; /* ---------- White + black alphas ---------- */ --c-white-04: rgba(255, 255, 255, 0.04); --c-white-06: rgba(255, 255, 255, 0.06); --c-white-08: rgba(255, 255, 255, 0.08); --c-white-10: rgba(255, 255, 255, 0.10); --c-white-12: rgba(255, 255, 255, 0.12); --c-white-14: rgba(255, 255, 255, 0.14); --c-white-22: rgba(255, 255, 255, 0.22); --c-white-28: rgba(255, 255, 255, 0.28); --c-white-45: rgba(255, 255, 255, 0.45); --c-white-55: rgba(255, 255, 255, 0.55); --c-white-65: rgba(255, 255, 255, 0.65); --c-white-70: rgba(255, 255, 255, 0.70); --c-white-85: rgba(255, 255, 255, 0.85); --c-white-90: rgba(255, 255, 255, 0.90); --c-black-06: rgba(0, 0, 0, 0.06); --c-black-08: rgba(0, 0, 0, 0.08); --c-black-12: rgba(0, 0, 0, 0.12); --c-black-30: rgba(0, 0, 0, 0.30); --c-black-40: rgba(0, 0, 0, 0.40); --c-black-45: rgba(0, 0, 0, 0.45); /* ---------- Brand purple alphas ---------- */ --c-action-08: rgba(70, 82, 243, 0.08); --c-action-12: rgba(70, 82, 243, 0.12); --c-action-18: rgba(70, 82, 243, 0.18); --c-action-22: rgba(70, 82, 243, 0.22); --c-action-25: rgba(70, 82, 243, 0.25); --c-action-30: rgba(70, 82, 243, 0.30); --c-action-40: rgba(70, 82, 243, 0.40); --c-action-50: rgba(70, 82, 243, 0.50); --c-action-70: rgba(70, 82, 243, 0.70); --c-purple-soft-12: rgba(64, 73, 154, 0.12); --c-purple-soft-18: rgba(64, 73, 154, 0.18); --c-purple-200-30: rgba(165, 172, 255, 0.30); --c-purple-200-50: rgba(165, 172, 255, 0.50); /* ============================================================ LAYER B — Semantic tokens (LIGHT) ============================================================ */ /* Brand */ --c-brand-purple: var(--c-purple-500); --c-brand-purple-hover: var(--c-purple-600); --c-brand-purple-press: var(--c-purple-700); --c-purple-highlight: var(--c-action-500); /* Surfaces */ --c-bg-page: #ebedfb; --c-bg-card: #ffffff; --c-bg-card-hover: #f7f8fa; --c-bg-secondary-purple: var(--c-purple-50); --c-bg-subtle-purple: #f3f5ff; --c-bg-subtle-hover: var(--c-grey-50); /* Sidebar */ --c-sidebar-bg: #3a4290; --c-sidebar-bg-active: #ffffff; --c-sidebar-icon: #c5c9eb; --c-sidebar-icon-active: var(--c-brand-purple); --c-sidebar-active-bg: #ffffff; /* Text */ --c-text-body: var(--c-grey-950); --c-text-muted: #6e7280; --c-text-disabled: #898e99; --c-text-disabled-pp: #8c92c2; --c-text-heading: #1a1f4d; --c-text-on-action: #ffffff; /* Tag colours */ --c-tag-handover-bg: #e7defb; --c-tag-handover-text: #6b3fb8; --c-tag-critical-bg: #ffe1de; --c-tag-critical-text: #c33a30; --c-tag-deadline-bg: #ffe2dc; --c-tag-deadline-text: #c33a30; --c-tag-warning-bg: #fff2d6; --c-tag-warning-text: #a06400; --c-tag-new-bg: var(--c-signal-green-100); --c-tag-new-text: #1f7a48; /* Borders */ --c-border-soft: rgba(0, 0, 0, 0.07); --c-border-soft-2: #e6e9ef; --c-border-card: #e1e3e6; --c-border-tree: #d4d8ec; --c-border-tree-bright: #d4d8ee; /* Shadows */ --shadow-card: 0 1px 2px rgba(20, 25, 80, 0.04), 0 4px 16px rgba(20, 25, 80, 0.04); /* Focus */ --focus-ring: var(--c-brand-purple); --focus-glow: var(--c-action-25); /* Radii — 4-based scale (matches the spacing scale). [Kim 24.06.2026] */ --r-1: 4px; --r-2: 8px; --r-3: 12px; --r-4: 16px; --r-5: 20px; /* Semantic radius tokens now reference the scale (were off-scale 8/10/14). Migration: --r-row 10→12, --r-card 14→16. Affects every component that uses them. */ --r-btn: var(--r-2); --r-button: var(--r-2); --r-row: var(--r-3); --r-card: var(--r-4); --r-pill: 999px; /* Spacing scale */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; /* Typography */ --ff: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; } /* ============================================================ LAYER B — Semantic tokens (DARK) ------------------------------------------------------------ Triggered by ANY of: [data-theme-dark] (boolean, used by tasklist on ) [data-theme="dark"] (value, used by some components) body[data-theme="dark"] (value, used by homepage) ============================================================ */ [data-theme-dark], [data-theme=dark], body[data-theme=dark] { /* Brand (lifted for dark contrast) */ --c-brand-purple: var(--c-purple-200); --c-brand-purple-hover: var(--c-purple-100); --c-brand-purple-press: var(--c-purple-300); --c-purple-highlight: var(--c-action-500); /* Surfaces */ --c-bg-page: var(--c-grey-950); --c-bg-card: var(--c-grey-800); --c-bg-card-hover: var(--c-grey-700); --c-bg-secondary-purple: var(--c-grey-950); --c-bg-subtle-purple: var(--c-grey-900); --c-bg-subtle-hover: var(--c-grey-600); /* Sidebar */ --c-sidebar-bg: var(--c-grey-800); --c-sidebar-bg-active: var(--c-grey-700); --c-sidebar-icon: var(--c-grey-300); --c-sidebar-icon-active: #ffffff; --c-sidebar-active-bg: var(--c-grey-700); /* Text */ --c-text-body: var(--c-grey-50); --c-text-muted: var(--c-grey-400); --c-text-disabled: var(--c-grey-500); --c-text-disabled-pp: var(--c-grey-500); --c-text-heading: var(--c-grey-50); --c-text-on-action: #ffffff; /* Borders */ --c-border-soft: var(--c-white-08); --c-border-soft-2: var(--c-white-08); --c-border-card: var(--c-white-10); --c-border-tree: var(--c-white-12); --c-border-tree-bright: var(--c-white-12); /* Shadows */ --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.40), 0 4px 16px rgba(0, 0, 0, 0.40); /* Focus */ --focus-ring: var(--c-purple-200); --focus-glow: var(--c-action-40); } /* ============================================================ Motion utilities (shared) ------------------------------------------------------------ .qdnapro-shake — brief horizontal nudge used to draw attention to a field that failed validation. Add the class to trigger it; the owning component removes it on `animationend` so it can re-fire on a repeated trigger. Standard form-validation cue. ============================================================ */ @keyframes qdnapro-shake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); } 30%, 50%, 70% { transform: translateX(-4px); } 40%, 60% { transform: translateX(4px); } } .qdnapro-shake { animation: qdnapro-shake 400ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both; } @media (prefers-reduced-motion: reduce) { .qdnapro-shake { animation: none; } } /* ============================================================ .qdnapro-slide-pages — horizontal page switch (one level deep) ------------------------------------------------------------ The "stap 1 schuift naar links, stap 2 schuift in" motion. It lived in THREE hand-written copies before 03.08.2026, all with the same numbers typed out again: - qdnapro-event-sheet (.es-pages / .es-page-main / .es-page-sub / .es-sub-open) - the PWA Herhalen-sheet (.ao-repeat-pages / -page-list / -page-preview, plain markup inside a qdnapro-bottom-sheet - so NOT in a component at all) - the PWA location/department chooser (.lp-pages) Kim 03.08.2026, after catching the third copy: make it one vocabulary. It lives here, next to .qdnapro-shake, because that is where cross-component motion already lives: every v2 component depends on design-tokens, bo2 gets it through style-v1.css and the PWA through sync-pwa-components, so no new component, dependency or registry entry. It is deliberately CSS-ONLY and shell-agnostic. The three consumers sit in a bottom sheet, in a popover and in a plain view, and each already owns its own open/close function - what was duplicated is the geometry, not the logic. MARKUP
(or --frame)
…
…
STATE (two class toggles, nothing else) - is-second on the viewport while page 2 is showing - is-current on exactly ONE page: the one you see The two are separate on purpose: is-second says which DIRECTION the first page leaves in, is-current says which page is visible. Toggling only is-current would slide page 1 out to the RIGHT, and then "back" reads as another step forward. TWO HEIGHT MODES, and picking the wrong one is the only real trap here: --frame the viewport has a height of its own (a sheet with a fixed detent). Every page fills it; page 1 stays in flow. Nothing is ever measured. Use this whenever you can - see the fixed-height note in the bottom-sheets skill for why measuring a sheet's content height turned into whack-a-mole. --auto the viewport grows with its content (a dialog that must not be taller than the list it shows). The page you SEE is in flow and sets the height, the other is taken out of flow so it cannot inflate it. The consumer is then responsible for the height DURING the slide: while page 2 is taller than page 1, the viewport jumps to the new height at once and overflow:hidden clips the leaving page. Pin min-height to the taller of the two for the length of the transition and release it after (see _slideChooserToStep in the PWA's 0-core.js). ============================================================ */ .qdnapro-slide-pages { position: relative; overflow: hidden; transition: min-height 0.32s cubic-bezier(0.22, 1, 0.36, 1); } .qdnapro-slide-page { position: absolute; top: 0; left: 0; width: 100%; transform: translateX(105%); opacity: 0; pointer-events: none; transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.32s ease; } .qdnapro-slide-page.is-current { transform: translateX(0); opacity: 1; pointer-events: auto; } /* Page 1 leaves to the LEFT instead of to the right, and fades FULLY out - any residual opacity shows ghost rows through page 2, which is transparent over the panel. */ .qdnapro-slide-pages.is-second .qdnapro-slide-page--first:not(.is-current) { transform: translateX(-28%); } /* --frame: the viewport brings its own height. */ .qdnapro-slide-pages--frame .qdnapro-slide-page { height: 100%; } .qdnapro-slide-pages--frame .qdnapro-slide-page--first { position: relative; } /* --auto: the page you see is in flow, so the viewport is as tall as that page and no taller. Specificity 0,3,0, so it beats the out-of-flow base rule. */ .qdnapro-slide-pages--auto .qdnapro-slide-page.is-current { position: relative; } @media (prefers-reduced-motion: reduce) { .qdnapro-slide-pages, .qdnapro-slide-page { transition: none; } } .btn { display: inline-flex; gap: 1rem; border-radius: 0.5rem; padding: 1rem; font-size: 16px; border: 0; background-color: #40499a; color: #FFFFFF; font-weight: 400; border: 1px solid transparent; cursor: pointer; font-family: "Inter"; } .btn.btn-size-sm { padding: 0.5rem; gap: 0.5rem; } .btn:focus { outline: 0; } .btn:hover, .btn.btn-state-hover { background-color: #333A7B; } .btn:focus-visible, .btn.btn-state-focus { background-color: #40499a; outline: 1px solid #40499a; outline-offset: 2px; } .btn:active, .btn.btn-state-active { background-color: #7075a2; } .btn:disabled, .btn.btn-state-disabled { background-color: #f0f1f2; color: #898e99; border-color: transparent; cursor: not-allowed; } .btn.btn-square { aspect-ratio: 1/1; padding: 0; align-items: center; justify-content: center; display: inline-flex; width: 2.5rem; height: 2.5rem; } /* * Make skins based on the provided colors at the top * the skins are placed in .btn-{skin-name} */ .btn-color-primary { background-color: #40499a; color: #FFFFFF; border: 1px solid transparent; } .btn-color-primary:hover, .btn-color-primary.btn-state-hover { background-color: #333A7B; } .btn-color-primary:focus-visible, .btn-color-primary.btn-state-focus { background-color: #40499a; outline-color: #40499a; } .btn-color-primary:active, .btn-color-primary.btn-state-active { background-color: #7075a2; } .btn-color-primary:disabled, .btn-color-primary.btn-state-disabled { background-color: #f0f1f2; color: #898e99; border-color: transparent; cursor: not-allowed; } .btn-color-orange { background-color: #ef8e02; color: #FFFFFF; border: 1px solid transparent; } .btn-color-orange:hover, .btn-color-orange.btn-state-hover { background-color: #bf7202; } .btn-color-orange:focus-visible, .btn-color-orange.btn-state-focus { background-color: #ef8e02; outline-color: #ef8e02; } .btn-color-orange:active, .btn-color-orange.btn-state-active { background-color: #d29c4d; } .btn-color-orange:disabled, .btn-color-orange.btn-state-disabled { background-color: #f0f1f2; color: #898e99; border-color: transparent; cursor: not-allowed; } .btn-color-subtle { background-color: transparent; color: #0B0B0D; border: 1px solid transparent; } .btn-color-subtle:hover, .btn-color-subtle.btn-state-hover { background-color: #F0F1F2; } .btn-color-subtle:focus-visible, .btn-color-subtle.btn-state-focus { background-color: #f0f1f2; outline-color: #0B0B0D; } .btn-color-subtle:active, .btn-color-subtle.btn-state-active { background-color: #f4f5f6; } .btn-color-subtle:disabled, .btn-color-subtle.btn-state-disabled { background-color: transparent; color: #898e99; border-color: transparent; cursor: not-allowed; } .btn-color-secondary { background-color: #f0f1f2; color: #0B0B0D; border: 1px solid transparent; } .btn-color-secondary:hover, .btn-color-secondary.btn-state-hover { background-color: #c4c7cc; } .btn-color-secondary:focus-visible, .btn-color-secondary.btn-state-focus { background-color: #f0f1f2; outline-color: #0B0B0D; } .btn-color-secondary:active, .btn-color-secondary.btn-state-active { background-color: #d6d8db; } .btn-color-secondary:disabled, .btn-color-secondary.btn-state-disabled { background-color: #f0f1f2; color: #898e99; border-color: transparent; cursor: not-allowed; } .btn-color-secondary-outline { background-color: #e6e9ff; color: #40499A; border: 1px solid #40499A; } .btn-color-secondary-outline:hover, .btn-color-secondary-outline.btn-state-hover { background-color: #daddf2; } .btn-color-secondary-outline:focus-visible, .btn-color-secondary-outline.btn-state-focus { background-color: #e6e9ff; outline-color: #40499A; } .btn-color-secondary-outline:active, .btn-color-secondary-outline.btn-state-active { background-color: #e5e7f6; } .btn-color-secondary-outline:disabled, .btn-color-secondary-outline.btn-state-disabled { background-color: #f0f1f2; color: #898e99; border-color: transparent; cursor: not-allowed; } .btn-color-secondary-white { background-color: transparent; color: #40499A; border: 1px solid transparent; } .btn-color-secondary-white:hover, .btn-color-secondary-white.btn-state-hover { background-color: #daddf2; } .btn-color-secondary-white:focus-visible, .btn-color-secondary-white.btn-state-focus { background-color: #e6e9ff; outline-color: #0B0B0D; } .btn-color-secondary-white:active, .btn-color-secondary-white.btn-state-active { background-color: #e5e7f6; } .btn-color-secondary-white:disabled, .btn-color-secondary-white.btn-state-disabled { background-color: transparent; color: #898e99; border-color: transparent; cursor: not-allowed; } .btn-color-secondary-purple { background-color: #e6e9ff; color: #40499A; border: 1px solid transparent; } .btn-color-secondary-purple:hover, .btn-color-secondary-purple.btn-state-hover { background-color: #daddf2; } .btn-color-secondary-purple:focus-visible, .btn-color-secondary-purple.btn-state-focus { background-color: #e6e9ff; outline-color: #0B0B0D; } .btn-color-secondary-purple:active, .btn-color-secondary-purple.btn-state-active { background-color: #e5e7f6; } .btn-color-secondary-purple:disabled, .btn-color-secondary-purple.btn-state-disabled { background-color: #f0f1f2; color: #898e99; border-color: transparent; cursor: not-allowed; } .btn-color-warning { background-color: #f0f1f2; color: #C65A5A; border: 1px solid transparent; } .btn-color-warning:hover, .btn-color-warning.btn-state-hover { background-color: #c4c7cc; } .btn-color-warning:focus-visible, .btn-color-warning.btn-state-focus { background-color: #c4c7cc; outline-color: #0B0B0D; } .btn-color-warning:active, .btn-color-warning.btn-state-active { background-color: #d6d8db; } .btn-color-warning:disabled, .btn-color-warning.btn-state-disabled { background-color: #f0f1f2; color: #898e99; border-color: transparent; cursor: not-allowed; } qdna-input { display: inline-block; width: 100%; position: relative; } qdna-input .input-wrapper { display: flex; align-items: center; overflow: hidden; padding: 1rem 1.25rem; border-radius: 0.5rem; background-color: #FFFFFF; border: 1px solid #ccc; width: 100%; line-height: 1rem; cursor: pointer; } qdna-input .input-wrapper:has(input-prefix) { padding: 8px 12px; } qdna-input .input-box { flex: 1; border: none; outline: none; background: transparent; font-size: 0.875rem; color: #0B0B0D; padding: 0; width: 100%; } qdna-input .input-box::placeholder { color: #a6aab3; } qdna-input[size=sm] .input-wrapper { padding: 0.625rem 0.75rem; } qdna-input[size=sm] .input-wrapper:has(input-prefix) { padding: 4px; } qdna-input:hover .input-wrapper, qdna-input[state=hover] .input-wrapper { border-color: #40499A; } qdna-input[state=focus] .input-wrapper { border-color: #40499A; box-shadow: 0 0 0 2px rgba(64, 73, 154, 0.1); } qdna-input[state=success] .input-wrapper { border-color: #428B6E; } qdna-input[state=error] .input-wrapper { border-color: #C65A5A; } qdna-input[disabled] .input-wrapper { background-color: #F0F1F2; border-color: transparent; color: #898E99; cursor: not-allowed; } qdna-input[disabled] .input-box { color: #898E99; cursor: not-allowed; } qdna-input .input-icon-prefix { display: flex; align-items: center; justify-content: center; padding-right: 0.75rem; color: #666; } qdna-input .input-external-prefix { display: flex; align-items: center; padding-right: 0.75rem; } qdna-input .input-clear { display: none; align-items: center; justify-content: center; padding: 0.5rem; font-size: 0.875; color: #777; cursor: pointer; } qdna-input[filled][clearable] .input-clear, qdna-input[filled][clearable=true] .input-clear { display: flex; } qdna-input[disabled] .input-clear { display: none; cursor: not-allowed; color: #ccc; } qdna-input.qdna-input-as-text .input-wrapper { padding: 0; border: none; border-radius: 0; background: transparent; box-shadow: none; } qdna-input.qdna-input-as-text .input-box { padding: 8px; border-radius: 4px; border: 1px solid #ccc; } qdna-input.qdna-input-as-text .input-box:disabled { border: none; padding-left: 0px; padding-right: 0px; } .input-dropdown { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid #C4C7CC; border-top: none; border-radius: 0 0 8px 8px; display: none; z-index: 1000; } .input-dropdown.open { display: block; } .input-wrapper.dropdown-open { border-radius: 8px 8px 0 0; } row-item { display: flex; align-items: center; padding: 6px 12px; cursor: pointer; } row-item:hover { background: #F5F6FA; } dropdown-row { display: block; padding: 8px 12px; border-bottom: 1px solid #E0E0E0; } dropdown-row:last-child { border-bottom: none; } qdna-input[type=checkbox] .input-wrapper { all: unset; display: inline-flex; align-items: center; gap: 8px; padding: 4px 6px; cursor: pointer; } qdna-input[type=checkbox] .input-box { all: revert; width: 16px; height: 16px; margin: 0; padding: 0; vertical-align: middle; accent-color: #40499A; cursor: pointer; } qdna-input[type=checkbox] .checkbox-label { all: unset; font-size: 14px; color: #0B0B0D; line-height: 1; } qdna-input[type=checkbox][disabled] .input-wrapper { opacity: 0.6; cursor: not-allowed; } .image-circle-ratio { width: 29px; height: 29px; aspect-ratio: 1/1; border-radius: calc(infinity * 1px); margin-right: 12px; } .label { display: inline-flex; align-items: center; align-content: center; border-radius: 0.25rem; padding: 0.25rem 0.5rem; font-family: "Inter"; font-size: 0.875rem; gap: 0.25rem; line-height: 1.25rem; border: 1px solid transparent; } .label.label-outline { cursor: pointer; } .label.label-sm { padding: 0rem 0.5rem; } .label-icon-prefix { font-size: 1.25rem; } .label-primary { background-color: #F3F7FC; color: #4F6887; } .label-primary.label-outline { background: transparent; } .label-primary.label-outline:hover { background-color: #F3F7FC; } .label-primary.label-border { border-color: #4F6887; } .label-yellow { background-color: #FEEDB8; color: #977F2E; } .label-yellow.label-outline { background: transparent; } .label-yellow.label-outline:hover { background-color: #FEEDB8; } .label-yellow.label-border { border-color: #977F2E; } .label-red { background-color: #fee3e3; color: #c65a5a; } .label-red.label-outline { background: transparent; } .label-red.label-outline:hover { background-color: #fee3e3; } .label-red.label-border { border-color: #c65a5a; } .label-green { background-color: #c5f5e2; color: #428b6e; } .label-green.label-outline { background: transparent; } .label-green.label-outline:hover { background-color: #c5f5e2; } .label-green.label-border { border-color: #428b6e; } .label-secondary { background-color: #f0f1f2; color: #6b7280; } .label-secondary.label-outline { background: transparent; } .label-secondary.label-outline:hover { background-color: #f0f1f2; } .label-secondary.label-border { border-color: #6b7280; } .label-blue { background-color: #ecedf5; color: #40499a; } .label-blue.label-outline { background: transparent; } .label-blue.label-outline:hover { background-color: #ecedf5; } .label-blue.label-border { border-color: #40499a; } .label-blue-2 { background-color: #ffffff; color: #40499a; } .label-blue-2.label-outline { background: transparent; } .label-blue-2.label-outline:hover { background-color: #ffffff; } .label-blue-2.label-border { border-color: #40499a; } .badge { background: #40499A; display: inline-flex; justify-content: center; align-items: center; gap: 10px; padding: 0.125rem 0.438rem; border-radius: 50px; color: #FFF; text-align: center; font-size: 0.75rem; font-style: normal; font-weight: 500; line-height: 1.25rem; border: 1px solid transparent; } .badge.badge-primary { background-color: #40499a; color: #ffffff; } .badge.badge-primary.badge-outline { border-color: #40499a; } .badge.badge-purple { background-color: #e6e9ff; color: #40499a; } .badge.badge-purple.badge-outline { border-color: #40499a; } .badge.badge-yellow { background-color: #FEEDB8; color: #977F2E; } .badge.badge-yellow.badge-outline { border-color: #977F2E; } .badge.badge-grey { background-color: #d3d5d9; color: #6b7280; } .badge.badge-grey.badge-outline { border-color: #6b7280; } .badge.badge-red { background-color: #fef1f1; color: #c65a5a; } .badge.badge-red.badge-outline { border-color: #c65a5a; } .badge.badge-transparent { background-color: transparent; color: #6b7280; } .badge.badge-transparent.badge-outline { border-color: transparent; } .indicator-badge { display: flex; width: 1.5rem; height: 1.5rem; justify-content: center; align-items: center; gap: 10px; flex-shrink: 0; background: #ff3a30; border-radius: 3.13rem; color: #FFF; text-align: center; font-size: 0.75rem; font-weight: 500; line-height: 20px; } .indicator-badge.badge-sm { width: 1.25rem; height: 1.25rem; font-size: 0.625rem; } .indicator-badge.badge-xs { width: 0.5rem; height: 0.5rem; font-size: 0rem; } .indicator-badge.badge-dot { font-size: 0rem; } .tag { background-color: #f0f1f2; color: #1e1f20; display: inline-flex; align-items: center; align-content: center; border-radius: 6.25rem; padding: 0.125rem 0.875rem; gap: 0.475rem; font-family: "Inter"; font-size: 1rem; font-weight: 600; line-height: 1.25rem; border: 1px solid transparent; } .tag.tag-filled { background-color: #c4c7cc; color: #1e1f20; } .tag.tag-sm { font-size: 0.75rem; padding: 0rem 0.5rem; gap: 0.25rem; } .tag-gray { background-color: #f0f1f2; color: #1e1f20; } .tag-gray.tag-filled { background-color: #c4c7cc; color: #1e1f20; } .tag-red { background-color: #fee3e3; color: #633030; } .tag-red.tag-filled { background-color: #fbaaaa; color: #633030; } .tag-yellow { background-color: #fef6db; color: #655522; } .tag-yellow.tag-filled { background-color: #fde594; color: #655522; } .tag-green { background-color: #e2faf1; color: #2f5d4a; } .tag-green.tag-filled { background-color: #8becc5; color: #2f5d4a; } .tag-blue { background-color: #e6eff9; color: #37475a; } .tag-blue.tag-filled { background-color: #b5ceed; color: #37475a; } .tag-dark-blue { background-color: #d6e0f9; color: #192a5a; } .tag-dark-blue.tag-filled { background-color: #85a1ec; color: #192a5a; } .tag-pink { background-color: #f6e1e8; color: #562d3a; } .tag-pink.tag-filled { background-color: #e5a6b9; color: #562d3a; } .tag-purple { background-color: #ebe9fb; color: #413b5e; } .tag-purple.tag-filled { background-color: #c4bcf3; color: #413b5e; } .tag-circle { display: flex; justify-content: center; align-items: center; width: 44px; height: 44px; padding: 2px 14px; gap: 8px; border-radius: 100px; position: relative; font-size: 0; } .tag-circle:not([class*=tag-]) { background: #C4C7CC; color: #1e1f20; } .tag-circle.tag-sm { width: 20px; height: 20px; padding: 2px 10px; gap: 4px; } .tag-circle .tag-icon-prefix, .tag-circle .tag-icon-suffix { font-size: 16px; } .tag-circle:not(.tag-sm) .tag-icon-prefix { position: absolute; left: -3px; top: -3px; width: 50px; height: 50px; border-radius: 25px; display: flex; align-items: center; justify-content: center; font-size: 20px; } .tag-circle.tag-sm .tag-icon-prefix { position: static; width: 16px; height: 16px; border: none; font-size: 16px; } .qdna-sidebar { background: #40499a; display: flex; width: 120px; max-width: 120px; flex-direction: column; align-items: center; padding: 8px; height: 100%; position: fixed; top: 0; left: 0; } .qdna-sidebar .sidebar-logo { cursor: pointer; padding-top: 10px; } .qdna-sidebar .sidebar-header { padding: 16px; } .qdna-sidebar .sidebar-header img { height: 60px; } .qdna-sidebar .sidebar-items { display: flex; flex-direction: column; margin-top: 1rem; border-top: 1px solid #666dae; } .qdna-sidebar .sidebar-items .sidebar-item { height: 90px; aspect-ratio: 1; background: transparent; display: flex; flex-direction: column; justify-content: center; align-items: center; flex-shrink: 0; cursor: pointer; border-radius: 8px; position: relative; padding: 0px 16px; width: 104px; } .qdna-sidebar .sidebar-items .sidebar-item .icon { width: 24px; height: 24px; aspect-ratio: 1/1; background-color: #fff; -webkit-mask: var(--icon) no-repeat center/contain; mask: var(--icon) no-repeat center/contain; } .qdna-sidebar .sidebar-items .sidebar-item .item-title { color: #FFF; text-align: center; font-size: 12px; } .qdna-sidebar .sidebar-items .sidebar-item .sidebar-indicator { position: absolute; top: 12px; right: 16px; z-index: 2; pointer-events: none; } .qdna-sidebar .sidebar-items .sidebar-item:hover { background: #333a7b; } .qdna-sidebar .sidebar-items .sidebar-item.active { background: #e6e9ff; } .qdna-sidebar .sidebar-items .sidebar-item.active .item-title { color: #40499a; } .qdna-sidebar .sidebar-items .sidebar-item.active .icon { background-color: #40499a; } .qdna-sidebar .sidebar-items .sidebar-item.active:hover { background: #e6e9ff; } .qdna-sidebar .sidebar-items .sidebar-item.active svg path { fill: #333a7b; } .qdna-sidebar .sidebar-footer { padding: 16px; } .qdna-sidebar .sidebar-footer img { height: 30px; } qdna-dropdown dropdown { background: #FFFFFF; border-radius: 12px; padding: 8px 4px; z-index: 3; box-shadow: 0 8px 12px 6px rgba(0, 0, 0, 0.15), 0 4px 4px 0 rgba(0, 0, 0, 0.3); } qdna-dropdown dropdown .qdna-dropdown-menu .menu-item { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; font-weight: 300; position: relative; border-radius: 8px; font-size: 14px; gap: 12px; cursor: pointer; } qdna-dropdown dropdown .qdna-dropdown-menu .menu-item .menu-content { display: flex; align-items: center; position: relative; gap: 12px; } qdna-dropdown dropdown .qdna-dropdown-menu .menu-item:hover { background-color: #e9e9e9; } qdna-dropdown dropdown .qdna-dropdown-menu .menu-item .item-icon { font-size: 24px; } qdna-dropdown dropdown .qdna-dropdown-menu .menu-item.item-danger { color: #C65A5A; } qdna-dropdown dropdown .qdna-dropdown-menu .menu-divider { position: relative; padding: 8px 16px; border-radius: 8px; } qdna-dropdown dropdown .qdna-dropdown-menu .menu-divider::after { display: block; content: ""; position: relative; height: 2px; width: 100%; background: #C4C7CC; } qdna-dialog { display: none; } qdna-dialog[open] { display: block; } .qdna-dialog-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 1000; } .qdna-dialog { background: #fff; padding: 20px; border-radius: 8px; min-width: 300px; max-width: 90%; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); } .qdna-dialog-title { font-size: 1.2em; margin-bottom: 10px; text-align: center; font-weight: bold; } qdna-dialog qdna-button { margin: 5px; } qdna-nav-button { display: flex; flex-direction: row; background-color: #FFF; border-radius: 8px; width: fit-content; box-shadow: 0 2px 8px 2px #E0E0E0; overflow: visible; position: relative; align-items: center; } navigation-group { display: flex; flex-direction: row; border-right: 1px solid #CCC; padding: 12px 8px; gap: 4px; } navigation-group:last-child { border-right: none; } .nav-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .nav-left { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; pointer-events: none; } navigation-group[type=doc-preview] .nav-left { display: flex; align-items: center; padding: 8px 12px; border-right: 1px solid #E0E0E0; } .nav-right { display: flex; align-items: center; gap: 4px; } .nav-avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; } .nav-username { font-size: 14px; font-weight: 500; color: #333; } .nav-page-current { display: flex; align-items: center; justify-content: center; height: 32px; padding: 0 12px; border: 1px solid #999; border-radius: 6px; font-size: 14px; font-weight: 500; white-space: nowrap; } .nav-page-separator { font-size: 14px; color: #999; } .nav-page-total { font-size: 14px; color: #999; } navigation-link { display: flex !important; align-items: center; cursor: pointer; color: black; border-radius: 4px; position: relative; text-decoration: none; transition: color 0.2s, background 0.2s; padding: 4px 12px !important; white-space: nowrap; } navigation-link:hover { color: #40499a; background: #EFEFEF; } navigation-link:hover::after { width: 50%; } navigation-link[active] { background: #e6e9ff; color: #40499a; } navigation-link[active]::after { content: ""; position: absolute; bottom: 0; left: 50%; height: 2px; width: 50%; background-color: #40499a; transition: width 0.3s ease; transform: translateX(-50%); transform-origin: center; } navigation-link .nav-link__arrow { font-size: 1rem; margin-left: 8px; display: inline-block; transition: transform 0.3s; } navigation-link .nav-link__arrow.is-open { transform: rotate(180deg); } navigation-link .nav-link__icon { font-size: 1.5rem; } navigation-link .nav-link__text { font-size: 16px; display: flex; flex-wrap: nowrap; } navigation-link[disabled] { cursor: not-allowed; pointer-events: none; opacity: 0.7; color: #9e9e9e; } navigation-link[disabled] .nav-link__icon, navigation-link[disabled] .nav-link__arrow, navigation-link[disabled] .nav-badge { color: #bdbdbd; } navigation-link[disabled][active] { background: #e6e9ff; color: #9e9e9e; } navigation-link[disabled][active]::after { background-color: #bdbdbd; } navigation-link[disabled][active] .nav-link__icon, navigation-link[disabled][active] .nav-link__arrow { color: #bdbdbd; } navigation-link[disabled][active] .nav-badge { opacity: 0.6; } navigation-link .nav-link__icon-wrapper { position: relative; display: inline-flex; align-items: center; } navigation-link .nav-badge { position: absolute; top: 10px; right: 10px; transform: translate(100%, -50%); width: 14px; height: 14px; padding: 0; display: flex; align-items: center; justify-content: center; font-size: 9px; line-height: 1; border-radius: 50%; color: #fff; overflow: hidden; } navigation-link .nav-badge--red { background: #ff4d4f; } navigation-link .nav-badge--highlight { background: #40499a; } navigation-link .nav-badge--dot { width: 8px; height: 8px; min-width: 8px; padding: 0; border-radius: 50%; } navigation-link.nav-link--sm .nav-badge { top: -2px; right: -4px; min-width: 14px; height: 14px; font-size: 9px; } navigation-link.nav-link--sm .nav-badge--dot { width: 6px; height: 6px; min-width: 6px; } navigation-link[disabled] .nav-badge { opacity: 0.6; } /* Dropdown: gebruikt door NavigationGroup (class toegevoegd in JS) */ .nav-dropdown { display: none; position: absolute; z-index: 1000; } .nav-dropdown.is-open { display: flex; } /* fallback: als er nog oude markup leeft */ .qdna-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: none; align-items: center; justify-content: center; z-index: 9999; } .qdna-modal-overlay.open { display: flex; } .qdna-modal { background: #fff; border-radius: 8px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); overflow: hidden; } /* Sizes */ .modal-sm { width: 400px; } .modal-md { width: 700px; } .modal-lg { width: 1000px; } .modal-xl { width: 90%; height: 90%; } modal-header, modal-body, modal-footer { display: block; padding: 1rem; } modal-header { border-bottom: 1px solid #ccc; position: relative; padding: 1rem; font-weight: bold; } .close-btn { position: absolute; top: 10px; right: 12px; background: none; border: none; font-size: 22px; cursor: pointer; line-height: 1; } modal-footer { border-top: 1px solid #ccc; text-align: right; } .qdna-card { border-radius: 0.5rem; background: #ffffff; display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 1rem; } .qdna-card.qdna-card--default { background: #ffffff; } .qdna-card.qdna-card--purple { background: #DADDF2; } .qdna-card > card-header.qdna-card__header { display: flex; padding: 1rem 1.5rem; justify-content: space-between; align-items: center; align-self: stretch; color: #40499A; border-bottom: 1px solid #D9DBEB; } .qdna-card > card-header.qdna-card__header h1, .qdna-card > card-header.qdna-card__header h2, .qdna-card > card-header.qdna-card__header h3, .qdna-card > card-header.qdna-card__header h4, .qdna-card > card-header.qdna-card__header h5, .qdna-card > card-header.qdna-card__header h6 { padding: 0; margin: 0; } .qdna-card > card-header.qdna-card__header > card-actions.qdna-card__actions { display: inline-flex; gap: 0.5rem; align-items: center; margin-left: auto; } .qdna-card > card-body.qdna-card__body { padding: 1rem 1.5rem 2rem 1.5rem; align-self: stretch; } .qdna-card .card-form-section { color: #0B0B0D; font-family: Inter; font-size: 14px; font-weight: 500; } .qdna-card .card-form-section .card-form-title { color: #0B0B0D; padding: 8px 0px 4px 0px; } .qdna-card .card-form-section .non_editable_field input:not(:disabled) { background-color: #ddd; } .ts-card-list-group .form-control:disabled, .ts-card-list-group .form-control[readonly] { background-color: transparent; border: none !important; box-shadow: none !important; } .ts-card-list-group button.form-control:disabled { color: #878787 !important; } .ts-card-list-group .select2-container--bootstrap4.select2-container--disabled .select2-selection__rendered { padding-left: 0; } .ts-card-list-group .ts-card-layout-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; } .ts-card-list-group .ts-card-layout-col { flex: 1 1 0; min-width: 0; } .ts-card-list-group .select2-container--bootstrap4.select2-container--disabled .select2-selection--single, .ts-card-list-group .select2-container--bootstrap4.select2-container--disabled .select2-selection--multiple { background-color: transparent !important; border: none !important; box-shadow: none !important; } @media (max-width: 991px) { .ts-card-list-group .ts-card-layout-col { flex-basis: 100%; } } qdna-card-unit-type { display: contents; } .unit-type { display: flex; flex-direction: column; min-width: 0; background: #fff; border-radius: 12px; overflow: hidden; cursor: pointer; font-weight: normal; text-decoration: none; justify-content: space-between; min-height: 120px; } .unit-type:hover { background-color: #f5f6f8; } .unit-type__top { display: flex; flex-direction: row; gap: 16px; padding: 1.25rem 1.5rem 0.5rem; align-items: center; } .unit-type__icon { flex: 0 0 48px; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; font-size: 44px; align-self: center; } .unit-type__icon img { width: 48px; height: 48px; border-radius: 0.5rem; object-fit: contain; display: block; } .unit-type__content { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; } .unit-type__heading { font-family: var(--Type-Font-Family-primary, Inter); font-size: var(--Font-size-Body-Inter-medium-14, 14px); font-weight: 600; line-height: var(--Line-Height-Body-Body-Medium-Caption, 24px); color: var(--Text-Body, #0B0B0D); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; } .unit-type__subheading { font-family: var(--Type-Font-Family-primary, Inter); font-size: var(--Font-size-Body-small-12, 12px); font-weight: 400; line-height: var(--Line-Height-Body-Body-Small, 20px); color: var(--Text-Body-Secondary, #6B7280); margin-top: 0; text-overflow: ellipsis; } .unit-type__info { display: flex; flex-flow: row; width: 100%; padding: 0.5rem 1.5rem 0.75rem; box-sizing: border-box; } .unit-type__info[hidden] { display: none; } .unit-type__pair { display: flex; gap: 4px; align-items: baseline; padding-right: 24px; } .unit-type__label, .unit-type__value { font-family: var(--Type-Font-Family-primary, Inter); font-size: var(--Font-size-Body-small-12, 12px); font-weight: 400; line-height: var(--Line-Height-Body-Body-Small, 20px); color: var(--Surface-Signal-Signal-grey-Detail, #6B7280); } :host { display: block; cursor: pointer; border-radius: 6px; transition: background 0.2s; width: 40%; max-width: 100%; box-sizing: border-box; --padding: 6px 10px; --font-size: 14px; --icon-size: 18px; --count-width: 30px; --color: #000; --opacity: 1; --hover-bg: rgba(0,0,0,0.06); } .wrapper { display: flex; justify-content: space-between; align-items: center; padding: var(--padding); font-size: var(--font-size); } .left { display: flex; align-items: center; gap: 0.5em; flex: 1; min-width: 0; } .icon { font-family: "Material Design Icons"; font-style: normal; display: inline-block; width: var(--icon-size); font-size: var(--icon-size); text-align: center; color: var(--color); opacity: var(--opacity); flex-shrink: 0; } .text { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--color); opacity: var(--opacity); } .count { min-width: var(--count-width); text-align: right; color: var(--color); opacity: var(--opacity); } :host(:hover) { background: var(--hover-bg); } @media (max-width: 600px) { :host { width: 80%; } } qdna-search-bar { display: inline-block; width: 100%; } qdna-search-bar .qdna-search-container { display: flex; align-items: center; padding: 0 8px; height: 40px; background: #FFF; border: 1px solid #dcdcdc; border-radius: 8px; transition: all 0.2s ease; gap: 6px; } qdna-search-bar .input { flex: 1; border: none; outline: none; background: transparent; font-size: 14px; font-family: inherit; color: #222; width: 100%; } qdna-search-bar .input::placeholder { color: #999; } qdna-search-bar .icon { color: #777; cursor: pointer; display: contents; } qdna-search-bar .close { display: none; } qdna-search-bar .left-btn { display: flex; align-items: center; justify-content: center; height: 30px; min-width: 30px; padding: 0; border: none; border-radius: 6px; background: #E6E9FF; color: #40499A; } qdna-search-bar .left-btn:focus, qdna-search-bar .left-btn:focus-visible { outline: none; } qdna-search-bar .btn-label:empty { display: none; } qdna-search-bar:not([state=focus]):not([state=filled]):hover .qdna-search-container { border-color: #40499A; border-radius: 8px; border: 1px solid #40499A; background: #FFF; } qdna-search-bar[state=focus] .qdna-search-container { border: 1px solid #40499A; box-shadow: 0 0 0 3px #ffffff, 0 0 0 4px #40499A; } qdna-search-bar[state=filled] .qdna-search-container { border-color: #40499A; } qdna-search-bar[disabled] .qdna-search-container { background: #f5f5f5; border-color: #e0e0e0; cursor: not-allowed; } qdna-search-bar[disabled] .input { cursor: not-allowed; color: #aaa; } qdna-search-bar[disabled] .icon { cursor: not-allowed; color: #ccc; } qdna-column-item { display: block; width: 100%; margin: 2px; } qdna-column-item .qdna-column-component { display: flex; align-items: center; justify-content: space-between; padding: 8px; border-radius: 8px; border: 1px solid #40499A; background: #E6E9FF; box-sizing: border-box; min-height: 40px; line-height: 1; } qdna-column-item .qdna-left-section { display: flex; align-items: center; gap: 16px; flex: 1; min-width: 0; } qdna-column-item .qdna-checkbox-wrapper { width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; position: relative; vertical-align: middle; } qdna-column-item .qdna-checkbox { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; } qdna-column-item .qdna-checkbox-ui { width: 16px; height: 16px; border-radius: 4px; background: #fff; border: 1.5px solid #40499A; box-sizing: border-box; transition: all 0.15s ease; display: flex; align-items: center; justify-content: center; } qdna-column-item[checkbox-shape=round] .qdna-checkbox-ui { border-radius: 50%; } qdna-column-item .qdna-checkbox-ui::after { content: ""; width: 4px; height: 8px; border: solid #ffffff; border-width: 0 2px 2px 0; transform: rotate(45deg); opacity: 0; } qdna-column-item[checked] .qdna-checkbox-ui { background: #4652F3; border-color: #4652F3; } qdna-column-item[checked] .qdna-checkbox-ui::after { opacity: 1; } qdna-column-item:not([checkbox-state=disabled]) .qdna-checkbox-wrapper:hover .qdna-checkbox-ui { border-color: #4652F3; } qdna-column-item:focus-within .qdna-checkbox-ui { outline: 2px solid rgba(70, 82, 243, 0.35); outline-offset: 2px; } qdna-column-item[checkbox-state=disabled] { pointer-events: none; } qdna-column-item[checkbox-state=disabled] .qdna-checkbox-ui { background: #F2F4F7; border-color: #D0D5DD; } qdna-column-item[checkbox-state=disabled][checked] .qdna-checkbox-ui::after { border-color: #101828; } qdna-column-item[checkbox-state=disabled] .qdna-column-component { opacity: 0.6; } qdna-column-item .qdna-visibility { width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; font-family: "Material Design Icons"; font-size: 18px; color: #40499A; flex-shrink: 0; } qdna-column-item:not([visibility=hidden]) .qdna-visibility::before { content: "\f01db"; } qdna-column-item[visibility=hidden] .qdna-visibility { display: none; } qdna-column-item .qdna-column-label { flex: 1; min-width: 0; font-size: 16px; line-height: 1; display: flex; align-items: center; color: #40499A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } qdna-column-item .qdna-right-section { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } qdna-column-item .qdna-column-message { font-size: 12px; color: #40499A; display: flex; align-items: center; white-space: nowrap; visibility: hidden; } qdna-column-item[message] .qdna-column-message { visibility: visible; } qdna-column-item .qdna-message-tick { width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; visibility: hidden; flex-shrink: 0; } qdna-column-item[message] .qdna-message-tick { visibility: visible; } qdna-column-item .qdna-message-tick::before { content: "✓"; font-size: 12px; font-weight: 600; line-height: 1; color: #40499A; } job-card { display: block; user-select: none; --bg-light: #f2f4f7; --bg-dark: #f2f4f7; } job-card .job-card { background: var(--bg-light); border: 1px solid #d0d5dd; border-radius: 8px; padding: 8px 10px; transition: background 0.2s ease; cursor: pointer; } job-card:hover .job-card { background: var(--bg-dark); } job-card[status=scheduled] { --bg-light: #f2f4f7; --bg-dark: #d0d5dd; } job-card[status=overdue] { --bg-light: #fde2e7; --bg-dark: #f7bfc8; } job-card[status=in-progress] { --bg-light: #fff6d1; --bg-dark: #ffe9a6; } job-card[status=completed] { --bg-light: #e6f7ec; --bg-dark: #c6efd9; } /* Drag / Active State */ job-card[state=drag] { --bg-light: #eef4ff; --bg-dark: #dbe4ff; } job-card[state=drag] .job-card { opacity: 0.6; cursor: grabbing; } job-card[state=active] { --bg-light: #eef4ff; --bg-dark: #dbe4ff; } job-card .row-time, job-card .row-user { display: flex; align-items: center; justify-content: space-between; gap: 8px; } job-card .row-user { margin-top: 6px; } job-card .avatar { width: 28px; height: 28px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #e4e7ec; flex-shrink: 0; } job-card .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } job-card .username { flex: 1; font-size: 14px; font-weight: 500; } job-card .time { font-size: 12px; white-space: nowrap; } job-card[size=sm] .row-time { display: none; } job-card[size=sm] .row-user { margin-top: 0; } job-card[size=sm] .username { font-size: 13px; } qdna-dropdown-menu { position: relative; display: block; font-family: inherit; width: 100%; } qdna-dropdown-menu.dropdown-disabled { opacity: 0.6; pointer-events: none; } qdna-dropdown-menu dropdown-trigger { display: flex; align-items: center; cursor: pointer; width: 100%; } qdna-dropdown-menu dropdown-trigger > * { width: 100%; } qdna-dropdown-menu dropdown { position: absolute; display: none; z-index: 999; background: #fff; border-radius: 12px; border: 1px solid #eee; padding: 4px 0; left: 0; right: 0; box-sizing: border-box; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); } qdna-dropdown-menu.dropdown-open dropdown { display: block; } qdna-dropdown-menu.dropdown-size-sm dropdown { font-size: 12px; } qdna-dropdown-menu.dropdown-size-md dropdown { font-size: 14px; } qdna-dropdown-menu.dropdown-size-lg dropdown { font-size: 16px; } dropdown-option { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; transition: background 0.2s ease; } dropdown-option:hover { background: #f5f6fa; } dropdown-option.selected { background: #eef2ff; color: #40499a; } dropdown-option.disabled { opacity: 0.5; cursor: not-allowed; } qdna-dropdown-menu dropdown { max-height: 260px; overflow-y: auto; } qdna-dropdown-menu dropdown::-webkit-scrollbar { width: 6px; } qdna-dropdown-menu dropdown::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; } dropdown-divider { display: block; height: 1px; margin: 4px 0; background: #eee; } dropdown-label { display: block; font-size: 12px; padding: 4px 8px; color: #888; } qdna-dropdown-menu.dropdown-open dropdown { animation: dropdownFade 0.15s ease; } @keyframes dropdownFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } qdna-toggle { display: inline-flex; cursor: pointer; user-select: none; } .qdna-toggle-root { --toggle-off: #d0d5dd; --toggle-on: #4625f3; --toggle-thumb: #ffffff; --toggle-focus: rgba(8, 117, 226, .35); } .qdna-toggle { position: relative; background: var(--toggle-off); border-radius: 999px; transition: background 0.25s ease, box-shadow 0.25s ease; } .qdna-toggle-thumb { position: absolute; background: var(--toggle-thumb); border-radius: 50%; top: 2px; left: 2px; transition: transform 0.25s ease; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); } .toggle-checked .qdna-toggle { background: var(--toggle-on); } .toggle-checked .qdna-toggle-thumb { transform: translateX(100%); } .toggle-disabled { opacity: 0.5; pointer-events: none; } .toggle-size-sm .qdna-toggle { width: 32px; height: 18px; } .toggle-size-sm .qdna-toggle-thumb { width: 14px; height: 14px; } .toggle-size-md .qdna-toggle { width: 40px; height: 22px; } .toggle-size-md .qdna-toggle-thumb { width: 18px; height: 18px; } .toggle-size-lg .qdna-toggle { width: 52px; height: 28px; } .toggle-size-lg .qdna-toggle-thumb { width: 24px; height: 24px; } qdna-due-date { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; font-size: 12px; font-weight: 400; overflow: hidden; color: var(--Text-Body, #0B0B0D); text-overflow: ellipsis; font-style: normal; line-height: var(--Line-Height-Body-Body-Small, 20px); /* 166.667% */ } qdna-due-date.status-complete { color: #428B6E; } qdna-due-date.status-complete i { color: #428B6E; } qdna-due-date.status-progress { color: #EF8E02; } qdna-due-date.status-progress i { color: #EF8E02; } qdna-due-date.status-open.priority-high, qdna-due-date.status-deadline.priority-high { color: #FF3A30; } qdna-due-date.status-open.priority-mid, qdna-due-date.status-deadline.priority-mid { color: #EF8E02; } qdna-due-date.status-open.priority-success, qdna-due-date.status-deadline.priority-success { color: #428B6E; } qdna-due-date.status-open i, qdna-due-date.status-deadline i { color: inherit; } [qdna-tooltip] { position: relative; display: inline-flex; align-items: center; justify-content: center; width: fit-content; --tooltip-bg: #40499A; --tooltip-text: #ffffff; --tooltip-radius: 4px; --tooltip-gap: 6px; --tooltip-padding: 4px 8px; --tooltip-font: 14px; } [qdna-tooltip]:not([tooltip-type=arrow])::before { content: attr(qdna-tooltip); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: var(--tooltip-gap); background: var(--tooltip-bg); color: var(--tooltip-text); padding: var(--tooltip-padding); font-size: var(--tooltip-font); border-radius: var(--tooltip-radius); width: max-content; max-width: 220px; white-space: normal; text-align: center; opacity: 0; pointer-events: none; transition: 0.15s ease; z-index: 9999; } [qdna-tooltip]:hover:not([tooltip-type=arrow])::before { opacity: 1; } [tooltip-type=arrow] { position: relative; } .qdna-tooltip-box { position: absolute; background: var(--tooltip-bg); color: var(--tooltip-text); padding: var(--tooltip-padding); font-size: var(--tooltip-font); border-radius: var(--tooltip-radius); text-align: center; width: max-content; max-width: 220px; opacity: 0; pointer-events: none; transition: 0.15s ease; z-index: 9999; } .qdna-tooltip-box.show { opacity: 1; } .qdna-tooltip-title { font-weight: 600; font-size: 13px; margin-bottom: 4px; } .qdna-tooltip-body { font-size: 12px; line-height: 1.4; } .qdna-tooltip-arrow { position: absolute; width: 8px; height: 8px; background: var(--tooltip-bg); transform: rotate(45deg); } [tooltip-type=arrow]:not([tooltip-position]) .qdna-tooltip-box, [tooltip-position=top] .qdna-tooltip-box { bottom: 100%; left: 50%; transform: translateX(-50%) translateY(calc(-1 * var(--tooltip-gap))); } [tooltip-type=arrow]:not([tooltip-position]) .qdna-tooltip-arrow, [tooltip-position=top] .qdna-tooltip-arrow { bottom: -4px; left: 50%; transform: translateX(-50%) rotate(45deg); } [tooltip-position=bottom] .qdna-tooltip-box { top: 100%; left: 50%; transform: translateX(-50%) translateY(var(--tooltip-gap)); } [tooltip-position=bottom] .qdna-tooltip-arrow { top: -4px; left: 50%; transform: translateX(-50%) rotate(45deg); } [tooltip-position=left] .qdna-tooltip-box { right: 100%; top: 50%; transform: translateY(-50%) translateX(calc(-1 * var(--tooltip-gap))); } [tooltip-position=left] .qdna-tooltip-arrow { right: -4px; top: 50%; transform: translateY(-50%) rotate(45deg); } [tooltip-position=right] .qdna-tooltip-box { left: 100%; top: 50%; transform: translateY(-50%) translateX(var(--tooltip-gap)); } [tooltip-position=right] .qdna-tooltip-arrow { left: -4px; top: 50%; transform: translateY(-50%) rotate(45deg); } [qdna-tooltip]:not([tooltip-type=arrow])[tooltip-color=purple] { --tooltip-bg: #40499A; --tooltip-text: #ffffff; } [qdna-tooltip]:not([tooltip-type=arrow])[tooltip-color=light-purple] { --tooltip-bg: #DADDF2; --tooltip-text: #40499A; } [qdna-tooltip]:not([tooltip-type=arrow])[tooltip-color=grey] { --tooltip-bg: #C4C7CC; --tooltip-text: #0B0B0D; } [qdna-tooltip]:not([tooltip-type=arrow])[tooltip-color=light-grey] { --tooltip-bg: #E1E3E6; --tooltip-text: #6B7280; } [tooltip-type=arrow][tooltip-color=purple] { --tooltip-bg: #40499A; --tooltip-text: #ffffff; } [tooltip-type=arrow][tooltip-color=light-purple] { --tooltip-bg: #DADDF2; --tooltip-text: #40499A; } [tooltip-type=arrow][tooltip-color=white] { --tooltip-bg: #ffffff; --tooltip-text: #40499A; } [qdna-tooltip]:not([tooltip-type=arrow])[tooltip-size=sm] { --tooltip-padding: 0px 8px; --tooltip-font: 12px; } [tooltip-type=arrow][tooltip-size=sm] { --tooltip-padding: 2px 8px; --tooltip-font: 10px; } [tooltip-type=arrow]:not([tooltip-size]), [tooltip-type=arrow][tooltip-size=lg] { --tooltip-padding: 10px 12px; --tooltip-font: 13px; } [qdna-tooltip][disabled], [qdna-tooltip].disabled { pointer-events: none; } [qdna-tooltip][disabled]::before, [qdna-tooltip].disabled::before { display: none !important; } [qdna-tooltip][disabled] .qdna-tooltip-box, [qdna-tooltip].disabled .qdna-tooltip-box { display: none !important; } .qdna-checkbox { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; position: relative; } .qdna-checkbox input { position: absolute; opacity: 0; width: 16px; height: 16px; margin: 0; cursor: pointer; } .qdna-checkbox .checkbox-box { width: 16px; height: 16px; border-radius: 4px; background: #FFFFFF; border: 1px solid #C4C7CC; position: relative; box-sizing: border-box; transition: all 0.2s ease; } .qdna-checkbox .checkbox-box::before { display: none !important; } .qdna-checkbox[data-shape=round] .checkbox-box { border-radius: 50%; } .qdna-checkbox:not(.disabled):hover input:not(:checked) + .checkbox-box { border-color: #4652F3; } .qdna-checkbox:focus-within .checkbox-box::before, .qdna-checkbox[state=focus] .checkbox-box::before { opacity: 0; } .qdna-checkbox input:checked + .checkbox-box { background: #4652F3; border-color: #4652F3; } .qdna-checkbox input:checked + .checkbox-box::after { content: ""; position: absolute; inset: 0; background-color: #FFFFFF; -webkit-mask: url("/img/check.svg") no-repeat center/12px; mask: url("/img/check.svg") no-repeat center/12px; } .qdna-checkbox.indeterminate-type input:checked + .checkbox-box::after { content: ""; position: absolute; top: 6px; left: 3px; width: 8px; height: 2px; background: #FFFFFF; -webkit-mask: none !important; mask: none !important; } .qdna-checkbox[data-state=success] input:not(:checked) + .checkbox-box { border-color: #428B6E; } .qdna-checkbox[data-state=success] input:checked + .checkbox-box { background: #6EE7B7; border-color: #428B6E; } .qdna-checkbox[data-state=error] input:not(:checked) + .checkbox-box { border-color: #C65A5A; } .qdna-checkbox[data-state=error] input:checked + .checkbox-box { background: #F87171; border-color: #C65A5A; } .qdna-checkbox.disabled { pointer-events: none; opacity: 0.6; } .qdna-checkbox.disabled input + .checkbox-box { background: #F0F1F2; border-color: #C4C7CC; } .qdna-checkbox.disabled input:checked + .checkbox-box { background: #FFFFFF; } .qdna-checkbox.disabled input:checked + .checkbox-box::after { background-color: #898E99; } .qdna-checkbox .checkbox-label { color: #333; } qdna-radio { display: inline-flex; align-items: center; gap: 8px; } .qdna-radio { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; position: relative; } .qdna-radio input { position: absolute; opacity: 0; pointer-events: none; } .qdna-radio .radio-circle { display: flex; width: 16px; height: 16px; padding: 4px; align-items: center; justify-content: center; border: 1px solid #C4C7CC; border-radius: 50%; background: #FFFFFF; box-sizing: border-box; position: relative; transition: all 0.2s ease; } .qdna-radio .radio-circle::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: #FFFFFF; opacity: 0; transition: opacity 0.2s ease; } .qdna-radio .radio-circle::before { content: ""; position: absolute; inset: -4px; border-radius: inherit; box-shadow: 0 0 0 2px #4652F3; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } .qdna-radio:not(.disabled):hover input:not(:checked) + .radio-circle { border-color: #4652F3; } .qdna-radio input:checked + .radio-circle { background: #4652F3; border-color: #4652F3; } .qdna-radio input:checked + .radio-circle::after { opacity: 1; } .qdna-radio[data-state=success] input:not(:checked) + .radio-circle { border-color: #428B6E; } .qdna-radio[data-state=success] input:checked + .radio-circle { background: #428B6E; border-color: #428B6E; } .qdna-radio[data-state=error] input:not(:checked) + .radio-circle { border-color: #C65A5A; } .qdna-radio[data-state=error] input:checked + .radio-circle { background: #C65A5A; border-color: #C65A5A; } .qdna-radio.disabled { pointer-events: none; opacity: 0.6; } .qdna-radio.disabled input:not(:checked) + .radio-circle { background: #E0E0E0; border-color: #C4C7CC; } .qdna-radio.disabled input:checked + .radio-circle { background: #FFFFFF; border-color: #C4C7CC; } .qdna-radio.disabled input:checked + .radio-circle::after { background: #9E9E9E; opacity: 1; } .qdna-radio .radio-label { color: #333; } qdna-menu-item { display: block; } .menu-item__container { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; cursor: pointer; border-radius: 6px; transition: background 0.2s ease; } .menu-item__container:hover { background: #f5f5f5; } .menu-item__left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; } .menu-item__control { display: flex; align-items: center; flex-shrink: 0; } .menu-item__prefix { display: flex; align-items: center; justify-content: center; min-width: 20px; flex-shrink: 0; } .menu-item__label { display: flex; align-items: center; gap: 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .menu-item__suffix { display: flex; align-items: center; justify-content: center; min-width: 20px; flex-shrink: 0; } .menu-item__prefix i, .menu-item__suffix i { font-size: 18px; } qdna-menu-item[disabled] .menu-item__container { opacity: 0.5; pointer-events: none; } .avatar { display: inline-flex; justify-content: center; align-items: center; border-radius: 50%; border: 1px solid; aspect-ratio: 1/1; overflow: hidden; font-weight: 600; transition: all 0.2s ease; cursor: pointer; } .avatar .avatar-content { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .avatar img { width: 100%; height: 100%; object-fit: cover; } .avatar-xs { width: 20px; height: 20px; font-size: 12px; } .avatar-sm { width: 34px; height: 34px; font-size: 12px; } .avatar-md { width: 48px; height: 48px; font-size: 16px; } .avatar-lg { width: 64px; height: 64px; font-size: 18px; } .avatar--green { border-color: #428B6E; background: #C5F5E2; } .avatar--green:hover { background: rgb(175.25, 241.25, 215.125); border-color: rgb(57.7902439024, 121.7097560976, 96.3170731707); } .avatar--green.is-selected { background: rgb(218.75, 248.75, 236.875); border-color: rgb(74.2097560976, 156.2902439024, 123.6829268293); } .avatar--pink { border-color: #C65A5A; background: #F87171; } .avatar--pink:hover { background: rgb(246.8020134228, 88.6979865772, 88.6979865772); border-color: rgb(191.4527027027, 71.0472972973, 71.0472972973); } .avatar--pink.is-selected { background: rgb(249.1979865772, 137.3020134228, 137.3020134228); border-color: rgb(204.5472972973, 108.9527027027, 108.9527027027); } .avatar--yellow { border-color: #B7791F; background: #FDE68A; } .avatar--yellow:hover { background: rgb(252.5714285714, 224.6428571429, 112.9285714286); border-color: rgb(161.1939252336, 106.5817757009, 27.3060747664); } .avatar--yellow.is-selected { background: rgb(253.4285714286, 235.3571428571, 163.0714285714); border-color: rgb(204.8060747664, 135.4182242991, 34.6939252336); } .avatar--blue { border-color: #2B6CB0; background: #BFDBFE; } .avatar--blue:hover { background: rgb(165.8923076923, 204.8769230769, 253.6076923077); border-color: rgb(37.9931506849, 95.4246575342, 155.5068493151); } .avatar--blue.is-selected { background: rgb(216.1076923077, 233.1230769231, 254.3923076923); border-color: rgb(48.0068493151, 120.5753424658, 196.4931506849); } .avatar--grey { border-color: #C4C7CC; background: #E5E7EB; } .avatar--grey:hover { background: rgb(214.5869565217, 217.6956521739, 223.9130434783); border-color: rgb(182.3227272727, 186.0181818182, 192.1772727273); } .avatar--grey.is-selected { background: rgb(243.4130434783, 244.3043478261, 246.0869565217); border-color: rgb(209.6772727273, 211.9818181818, 215.8227272727); } .avatar--red { border-color: #B91C1C; background: #FCA5A5; } .avatar--red:hover { background: rgb(251.1774193548, 140.3225806452, 140.3225806452); border-color: rgb(162.8521126761, 24.6478873239, 24.6478873239); } .avatar--red.is-selected { background: rgb(252.8225806452, 189.6774193548, 189.6774193548); border-color: rgb(207.1478873239, 31.3521126761, 31.3521126761); } .qdnapro-account-card { display: inline-flex; flex-direction: column; box-sizing: border-box; min-width: 280px; padding: 8px; gap: 4px; background: #ffffff; border: 1px solid #c4c7cc; border-radius: 8px; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.15), 0 8px 12px 6px rgba(0, 0, 0, 0.075); font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif; } .qdnapro-account-card .account-card-header { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 16px 16px 12px; } .qdnapro-account-card .account-card-header qdnapro-avatar { margin-bottom: 8px; } .qdnapro-account-card .account-card-name { font-size: 16px; font-weight: 600; line-height: 20px; color: #0b0b0d; } .qdnapro-account-card .account-card-email { font-size: 14px; font-weight: 400; line-height: 20px; color: #6b7280; } .qdnapro-account-card .account-card-items { display: flex; flex-direction: column; gap: 4px; } .qdnapro-account-card .account-card-items > qdnapro-menu-item { width: 100%; } [data-theme=dark] .qdnapro-account-card { background: #2e3036; border-color: #40444d; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.3), 0 8px 12px 6px rgba(0, 0, 0, 0.2); } [data-theme=dark] .qdnapro-account-card .account-card-name { color: #f0f1f2; } [data-theme=dark] .qdnapro-account-card .account-card-email { color: #a6aab3; } /* compiled from _action-bar.scss */ .qdnapro-action-bar { --action-bar-bg: #ffffff; --action-bar-border: #d9dbeb; --action-bar-offset: 16px; display: inline-flex; align-items: center; gap: 8px; height: 56px; padding: 0 16px; background: var(--action-bar-bg); border: 0.5px solid var(--action-bar-border); border-radius: 8px; box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.3); box-sizing: border-box; font-family: inherit; } .qdnapro-action-bar > * { vertical-align: middle; } .qdnapro-action-bar.action-bar-floating { position: fixed; left: 50%; transform: translateX(-50%); bottom: var(--action-bar-offset); z-index: 9000; } qdnapro-menu.action-bar-menu-floating { z-index: 9200; animation: action-bar-menu-pop 160ms cubic-bezier(0.22, 1, 0.36, 1); transform-origin: bottom left; } @keyframes action-bar-menu-pop { from { opacity: 0; transform: translateY(4px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } [data-theme=dark] .qdnapro-action-bar, [data-theme-dark] .qdnapro-action-bar { --action-bar-bg: #2e3036; --action-bar-border: rgba(255, 255, 255, 0.10); box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.45); } .qdnapro-activity-card { position: relative; box-sizing: border-box; display: grid; grid-template-columns: 48px 1fr; grid-template-areas: "tile body"; align-items: center; gap: 12px; padding: 8px 12px; min-height: 64px; background: var(--ac-surface, #ffffff); border: 1px solid var(--ac-border, #e1e3e6); border-radius: 14px; cursor: pointer; outline: none; user-select: none; text-decoration: none; transition: box-shadow 150ms ease-out, border-color 150ms ease-out, transform 150ms ease-out, background-color 150ms ease-out; } .qdnapro-activity-card.ac-has-actions { grid-template-areas: "tile body" "actions actions"; } .qdnapro-activity-card *, .qdnapro-activity-card *::before, .qdnapro-activity-card *::after { box-sizing: border-box; } .qdnapro-activity-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(0, 0, 0, 0.05); opacity: var(--ac-overlay-o, 0); transition: opacity 150ms ease-out; pointer-events: none; } @media (hover: hover) { .qdnapro-activity-card:hover { --ac-overlay-o: 0.5; border-color: rgba(0, 0, 0, 0.14); box-shadow: 0 3px 10px rgba(20, 25, 80, 0.08); transform: translateY(-1px); } } .qdnapro-activity-card:active { --ac-overlay-o: 1; transform: scale(0.985); transition: box-shadow 80ms ease-out, transform 80ms ease-out, background-color 80ms ease-out; } .qdnapro-activity-card:focus-visible { outline: 2px solid #40499a; outline-offset: 2px; } [data-theme=dark] .qdnapro-activity-card::after { background: rgba(255, 255, 255, 0.06); } /* === Dark mode - base card chrome === */ [data-theme=dark] .qdnapro-activity-card { background: #2e3036; border-color: rgba(255, 255, 255, 0.1); } [data-theme=dark] .qdnapro-activity-card .ac-label { color: #f0f1f2; } [data-theme=dark] .qdnapro-activity-card .ac-description { color: #a0a4b8; } [data-theme=dark] .qdnapro-activity-card:hover { box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4); border-color: rgba(255, 255, 255, 0.18); } /* === Icon tile === */ .qdnapro-activity-card .ac-tile { grid-area: tile; width: 48px; height: 48px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--ac-tile-bg, #f0f1f2); overflow: hidden; } .qdnapro-activity-card .ac-tile-tick svg { width: 32px; height: 32px; display: block; } /* === Text column === */ .qdnapro-activity-card .ac-body { grid-area: body; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; } .qdnapro-activity-card .ac-label { font-size: 15px; font-weight: 600; color: var(--ac-text, #0b0b0d); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .qdnapro-activity-card .ac-description { font-size: 12.5px; color: var(--ac-text-muted, #898e99); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* === Meta row: repeat tag (first) + completion stamp === Required pill lives OUTSIDE this row now (see the corner-badge block below), so the row only exists for the repeat tag and/or the stamp. */ .qdnapro-activity-card .ac-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; } .qdnapro-activity-card .ac-pill { flex: none; } /* Icon-only repeat tag (no text content) - the tag's own empty label span still carries its 4px icon-label gap, which would add lopsided trailing padding around nothing. Neutralised here, scoped to this one usage, same fix as qdnapro-activity-row's .row-icon-tag (Kim, 13.07.2026). */ .qdnapro-activity-card .ac-pill-repeat { gap: 0; } /* === Corner cluster: icon-only repeat tag + required pill side by side in the top-right corner (Kim, 13.07.2026). The chevron and its whole glyph column are gone, so the cluster owns the right edge against the card's own padding. */ .qdnapro-activity-card .ac-corner { position: absolute; top: 10px; right: 12px; z-index: 1; display: flex; align-items: center; gap: 4px; } /* Reserve room so a long title truncates before running under the corner cluster instead of behind it - worst case is repeat icon-tag plus "Verplicht"/"Required", ~120px covers it. */ .qdnapro-activity-card.ac-has-corner .ac-label, .qdnapro-activity-card.ac-has-corner .ac-description { padding-right: 120px; } /* === Status-tinted pill === A grey tag on a coloured status surface clashes (Kim, 13.07.2026), so every ".ac-pill" (required corner badge, completion stamp, and the repeat tag added 13.07.2026) follows the status palette: the "-2" tag tone as background with the matching tag text colour. The tag component paints itself from the --tag-bg/--tag-text custom properties, so overriding those here (three classes, beats the tag's own two-class selector) is enough. Open/repeat-done/disabled keep the tag's own grey/disabled look (no tint rule exists for ac-status-repeat-done, by design - see the repeat-done note further down). */ .qdnapro-activity-card.ac-status-in-progress .ac-pill { --tag-bg: #fde594; --tag-text: #655522; } .qdnapro-activity-card.ac-status-completed .ac-pill { --tag-bg: #8becc5; --tag-text: #2f5d4a; } .qdnapro-activity-card.ac-status-error .ac-pill { --tag-bg: #fbaaaa; --tag-text: #633030; } [data-theme=dark] .qdnapro-activity-card.ac-status-in-progress .ac-pill { --tag-bg: #7a6b2d; --tag-text: #fde594; } [data-theme=dark] .qdnapro-activity-card.ac-status-completed .ac-pill { --tag-bg: #3d7a62; --tag-text: #8becc5; } [data-theme=dark] .qdnapro-activity-card.ac-status-error .ac-pill { --tag-bg: #7a3838; --tag-text: #fbaaaa; } /* === Bottom action row: briefing / repeat buttons === Full-width row below the tile/text/glyph columns (Kim, 13.07.2026 - the old briefing/counter pills were too small as touch targets). Hairline divider reuses --ac-border, so it recolours the same way as the card border on every status. */ .qdnapro-activity-card .ac-actions { grid-area: actions; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--ac-border, #e1e3e6); } .qdnapro-activity-card .ac-action-btn { flex: none; } /* === Status-tinted action buttons === secondary-purple works on the white open card but clashes on the coloured status surfaces (Kim, 13.07.2026). On those statuses the buttons take the same "-2" tag tone family as the pill: -2 background, status text colour, the tag's own -2 hover token on hover/press. qdnapro-button paints from fixed class colours (no custom properties), so these five-class overrides simply out-specify its three-class rules; icons follow via currentColor. */ .qdnapro-activity-card.ac-status-in-progress .ac-actions .qdnapro-button.button-secondary-purple { background: #fde594; color: #655522; } .qdnapro-activity-card.ac-status-in-progress .ac-actions .qdnapro-button.button-secondary-purple:hover:not(.button-disabled), .qdnapro-activity-card.ac-status-in-progress .ac-actions .qdnapro-button.button-secondary-purple:active:not(.button-disabled) { background: #fddc71; } .qdnapro-activity-card.ac-status-completed .ac-actions .qdnapro-button.button-secondary-purple { background: #8becc5; color: #2f5d4a; } .qdnapro-activity-card.ac-status-completed .ac-actions .qdnapro-button.button-secondary-purple:hover:not(.button-disabled), .qdnapro-activity-card.ac-status-completed .ac-actions .qdnapro-button.button-secondary-purple:active:not(.button-disabled) { background: #6ee7b7; } .qdnapro-activity-card.ac-status-error .ac-actions .qdnapro-button.button-secondary-purple { background: #fbaaaa; color: #633030; } .qdnapro-activity-card.ac-status-error .ac-actions .qdnapro-button.button-secondary-purple:hover:not(.button-disabled), .qdnapro-activity-card.ac-status-error .ac-actions .qdnapro-button.button-secondary-purple:active:not(.button-disabled) { background: #f98d8d; } [data-theme=dark] .qdnapro-activity-card.ac-status-in-progress .ac-actions .qdnapro-button.button-secondary-purple { background: #7a6b2d; color: #fef6db; } [data-theme=dark] .qdnapro-activity-card.ac-status-in-progress .ac-actions .qdnapro-button.button-secondary-purple:hover:not(.button-disabled), [data-theme=dark] .qdnapro-activity-card.ac-status-in-progress .ac-actions .qdnapro-button.button-secondary-purple:active:not(.button-disabled) { background: #9a8a3b; } [data-theme=dark] .qdnapro-activity-card.ac-status-completed .ac-actions .qdnapro-button.button-secondary-purple { background: #3d7a62; color: #e2faf1; } [data-theme=dark] .qdnapro-activity-card.ac-status-completed .ac-actions .qdnapro-button.button-secondary-purple:hover:not(.button-disabled), [data-theme=dark] .qdnapro-activity-card.ac-status-completed .ac-actions .qdnapro-button.button-secondary-purple:active:not(.button-disabled) { background: #4d9c7c; } [data-theme=dark] .qdnapro-activity-card.ac-status-error .ac-actions .qdnapro-button.button-secondary-purple { background: #7a3838; color: #fee3e3; } [data-theme=dark] .qdnapro-activity-card.ac-status-error .ac-actions .qdnapro-button.button-secondary-purple:hover:not(.button-disabled), [data-theme=dark] .qdnapro-activity-card.ac-status-error .ac-actions .qdnapro-button.button-secondary-purple:active:not(.button-disabled) { background: #9a4747; } /* The count badge on the repeat button (qdnapro-button's own badge attr, "subtle" pairing = lavender) must follow the same status tint (Kim, 13.07.2026): the light status surface tone as badge background with the status text colour, so it reads as a quiet chip on the "-2" button. */ .qdnapro-activity-card.ac-status-in-progress .ac-actions [data-button-badge] { background-color: #fef6db; border-color: transparent; color: #655522; } .qdnapro-activity-card.ac-status-completed .ac-actions [data-button-badge] { background-color: #e2faf1; border-color: transparent; color: #2f5d4a; } .qdnapro-activity-card.ac-status-error .ac-actions [data-button-badge] { background-color: #fee3e3; border-color: transparent; color: #633030; } [data-theme=dark] .qdnapro-activity-card.ac-status-in-progress .ac-actions [data-button-badge] { background-color: #5a4d1f; color: #fde594; } [data-theme=dark] .qdnapro-activity-card.ac-status-completed .ac-actions [data-button-badge] { background-color: #2a5544; color: #8becc5; } [data-theme=dark] .qdnapro-activity-card.ac-status-error .ac-actions [data-button-badge] { background-color: #5a2b2b; color: #fbaaaa; } @keyframes qdnapro-ac-count-bump { 0% { transform: scale(1); } 35% { transform: scale(1.18); } 60% { transform: scale(0.95); } 100% { transform: scale(1); } } .qdnapro-activity-card .ac-badge-bump { animation: qdnapro-ac-count-bump 380ms ease-out; } @media (prefers-reduced-motion: reduce) { .qdnapro-activity-card .ac-badge-bump { animation: none; } } /* === Pulse (status-changed feedback) === */ @keyframes qdnapro-ac-pulse { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(64, 73, 154, 0.35); } 40% { transform: scale(1.015); box-shadow: 0 0 0 8px rgba(64, 73, 154, 0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(64, 73, 154, 0); } } .qdnapro-activity-card.ac-pulse { animation: qdnapro-ac-pulse 520ms ease-out; } @media (prefers-reduced-motion: reduce) { .qdnapro-activity-card.ac-pulse { animation: none; } } /* === Icon-color palette (qdnapro-tag --tag-bg values, light) === Only used by the "open" status - every other status overrides the tile colour directly further down. */ .qdnapro-activity-card.ac-color-grey { --ac-tile-bg: #f0f1f2; } .qdnapro-activity-card.ac-color-red { --ac-tile-bg: #fee3e3; } .qdnapro-activity-card.ac-color-yellow { --ac-tile-bg: #fef6db; } .qdnapro-activity-card.ac-color-green { --ac-tile-bg: #e2faf1; } .qdnapro-activity-card.ac-color-blue { --ac-tile-bg: #e6eff9; } .qdnapro-activity-card.ac-color-bright-blue { --ac-tile-bg: #d6e0f9; } .qdnapro-activity-card.ac-color-pink { --ac-tile-bg: #f6e1e8; } .qdnapro-activity-card.ac-color-purple { --ac-tile-bg: #ebe9fb; } [data-theme=dark] .qdnapro-activity-card.ac-color-grey { --ac-tile-bg: #565b66; } [data-theme=dark] .qdnapro-activity-card.ac-color-red { --ac-tile-bg: #5a2b2b; } [data-theme=dark] .qdnapro-activity-card.ac-color-yellow { --ac-tile-bg: #5a4d1f; } [data-theme=dark] .qdnapro-activity-card.ac-color-green { --ac-tile-bg: #2a5544; } [data-theme=dark] .qdnapro-activity-card.ac-color-blue { --ac-tile-bg: #2e3e54; } [data-theme=dark] .qdnapro-activity-card.ac-color-bright-blue { --ac-tile-bg: #2a3560; } [data-theme=dark] .qdnapro-activity-card.ac-color-pink { --ac-tile-bg: #4e2a36; } [data-theme=dark] .qdnapro-activity-card.ac-color-purple { --ac-tile-bg: #3a3555; } /* === Status overrides (always win over the icon-color pastel) === Each status sets the tile background directly (not through --ac-tile-bg) with a higher-specificity selector (2 classes + descendant), so it wins regardless of source order - same pattern as the tasklist-card [archived] override. Border colour reuses the tile's "-2" tone for definition, no new palette values invented. */ .qdnapro-activity-card.ac-status-in-progress { --ac-surface: #fef6db; --ac-border: #fde594; --ac-text: #655522; --ac-text-muted: #655522; } .qdnapro-activity-card.ac-status-in-progress .ac-tile { background: #fde594; } .qdnapro-activity-card.ac-status-completed { --ac-surface: #e2faf1; --ac-border: #8becc5; --ac-text: #2f5d4a; --ac-text-muted: #2f5d4a; } .qdnapro-activity-card.ac-status-completed .ac-tile { background: #8becc5; } /* repeat-done (Kim's compromise, 13.07.2026): a repeat activity never truly "completes", but after at least one fill-in it deserves the same satisfying green tile + text as completed - WITHOUT the green surface wash, so the card still reads as open/tappable for the next fill-in. Only --ac-text/--ac-text-muted are overridden (matching completed's values); --ac-surface/--ac-border are deliberately left unset so the card falls back to the neutral open chrome (#ffffff / #e1e3e6 via the base rule's own fallbacks). No pill/action-button tint rules exist for this status (unlike in-progress/completed/error) - deliberately, per spec. */ .qdnapro-activity-card.ac-status-repeat-done { --ac-text: #2f5d4a; --ac-text-muted: #2f5d4a; } .qdnapro-activity-card.ac-status-repeat-done .ac-tile { background: #8becc5; } .qdnapro-activity-card.ac-status-error { --ac-surface: #fee3e3; --ac-border: #fbaaaa; --ac-text: #633030; --ac-text-muted: #633030; } .qdnapro-activity-card.ac-status-error .ac-tile { background: #fbaaaa; } .qdnapro-activity-card.ac-status-disabled { --ac-surface: #f0f1f2; --ac-border: #e1e3e6; --ac-text: #898e99; --ac-text-muted: #898e99; cursor: not-allowed; pointer-events: none; } .qdnapro-activity-card.ac-status-disabled .ac-tile { background: #e1e3e6; filter: grayscale(1); } /* Dark-mode status overrides. Values from the tag dark palette: yellow(-2), green(-2), red(-2) pairs; grey base + grey hover for disabled. */ [data-theme=dark] .qdnapro-activity-card.ac-status-in-progress { --ac-surface: #5a4d1f; --ac-border: #7a6b2d; --ac-text: #fde594; --ac-text-muted: #fde594; } [data-theme=dark] .qdnapro-activity-card.ac-status-in-progress .ac-tile { background: #7a6b2d; } [data-theme=dark] .qdnapro-activity-card.ac-status-completed { --ac-surface: #2a5544; --ac-border: #3d7a62; --ac-text: #8becc5; --ac-text-muted: #8becc5; } [data-theme=dark] .qdnapro-activity-card.ac-status-completed .ac-tile { background: #3d7a62; } /* repeat-done dark tile + text (same split as light: surface/border stay the dark base card chrome set by the plain [data-theme=dark] .qdnapro-activity-card rule above). */ [data-theme=dark] .qdnapro-activity-card.ac-status-repeat-done { --ac-text: #8becc5; --ac-text-muted: #8becc5; } [data-theme=dark] .qdnapro-activity-card.ac-status-repeat-done .ac-tile { background: #3d7a62; } [data-theme=dark] .qdnapro-activity-card.ac-status-error { --ac-surface: #5a2b2b; --ac-border: #7a3838; --ac-text: #fbaaaa; --ac-text-muted: #fbaaaa; } [data-theme=dark] .qdnapro-activity-card.ac-status-error .ac-tile { background: #7a3838; } [data-theme=dark] .qdnapro-activity-card.ac-status-disabled { --ac-surface: #565b66; --ac-border: #6b7180; --ac-text: #6b7180; --ac-text-muted: #6b7180; } [data-theme=dark] .qdnapro-activity-card.ac-status-disabled .ac-tile { background: #6b7180; filter: grayscale(1); } /* === Force states (preview-only, mirrors real :hover / :active 1:1) === Used by the "Force states" preview section to make transient states screenshottable. Keep in sync with the real hover/active rules above. */ .qdnapro-activity-card.is-force-hover { --ac-overlay-o: 0.5; border-color: rgba(0, 0, 0, 0.14); box-shadow: 0 3px 10px rgba(20, 25, 80, 0.08); transform: translateY(-1px); } .qdnapro-activity-card.is-force-pressed { --ac-overlay-o: 1; transform: scale(0.985); } [data-theme=dark] .qdnapro-activity-card.is-force-hover { box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4); border-color: rgba(255, 255, 255, 0.18); } /* === Smallest screen (320px) === */ @media (max-width: 320px) { .qdnapro-activity-card { grid-template-columns: 40px 1fr; padding: 8px 10px; gap: 8px; } .qdnapro-activity-card .ac-tile { width: 40px; height: 40px; } .qdnapro-activity-card .ac-tile-tick svg { width: 26px; height: 26px; } } .qdnapro-activity-icon { display: inline-block; box-sizing: border-box; flex-shrink: 0; line-height: 0; vertical-align: middle; user-select: none; transition: opacity 140ms ease-out; } .qdnapro-activity-icon .activity-icon-img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; background: transparent; } .qdnapro-activity-icon.activity-icon-disabled { opacity: 0.5; } .qdnapro-activity-icon.activity-icon-missing { position: relative; background: rgba(0, 0, 0, 0.03); border: 1px dashed #c4c7cc; border-radius: 8px; } .qdnapro-activity-icon.activity-icon-missing::after { content: "?"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: "Inter", sans-serif; font-size: 14px; color: #898e99; } [data-theme=dark] .qdnapro-activity-icon.activity-icon-missing { background: rgba(255, 255, 255, 0.04); border-color: #565b66; } [data-theme=dark] .qdnapro-activity-icon.activity-icon-missing::after { color: #6b7280; } /* ============================================================ * qdnapro-activity-icon-picker * Ported into the components-v2 bundle so the picker is styled on * v1 pages that load the bundle (it previously only lived inline in * the preview + as a for-Sander SCSS drop-in). [Kim 2026-05-31] * ============================================================ */ .qdnapro-activity-icon-picker { display: flex; flex-direction: column; gap: 8px; box-sizing: border-box; } .qdnapro-activity-icon-picker *, .qdnapro-activity-icon-picker *::before, .qdnapro-activity-icon-picker *::after { box-sizing: border-box; } .qdnapro-activity-icon-picker .aip-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; } @media (max-width: 600px) { .qdnapro-activity-icon-picker .aip-grid { grid-template-columns: repeat(4, 1fr); } } .qdnapro-activity-icon-picker .aip-tile { display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid #e1e3e6; border-radius: 10px; background: #ffffff; cursor: pointer; outline: none; transition: background 120ms ease, border-color 120ms ease, box-shadow 150ms ease, transform 100ms ease; } .qdnapro-activity-icon-picker .aip-tile qdnapro-activity-icon { pointer-events: none; display: inline-flex; } .qdnapro-activity-icon-picker .aip-tile:hover { background: #ebedfb; border-color: #b8bde8; transform: translateY(-1px); } .qdnapro-activity-icon-picker .aip-tile:active { transform: translateY(0); } .qdnapro-activity-icon-picker .aip-tile:focus-visible { border-color: #40499a; box-shadow: 0 0 0 4px rgba(70, 82, 243, 0.2); } .qdnapro-activity-icon-picker .aip-tile.aip-tile-selected { border-color: #4652f3; background: rgba(70, 82, 243, 0.06); box-shadow: 0 0 0 3px rgba(70, 82, 243, 0.25); } .qdnapro-activity-icon-picker .aip-tile.aip-tile-selected:hover { background: rgba(70, 82, 243, 0.1); } .qdnapro-activity-icon-picker .aip-actions { display: flex; align-items: center; justify-content: flex-start; padding-top: 2px; } /* "View more" (Meer iconen) uses qdnapro-button (subtle-purple, small). */ /* ---- current-only (04.08.2026) ------------------------------------------ Kim, takenlijst-instellingen: "ik wil gewoon alleen de huidige icon laten zien en de meer icon knop naast elkaar, om ruimte te besparen". De host is normaal een KOLOM (grid boven, knop eronder); in deze stand wordt hij een RIJ, zodat de ene tegel en de knop naast elkaar staan. Dat scheelt op een dichte instellingenpagina een hele regel hoogte. Zie qdna-activity-icon-picker.js's `current-only` note voor de rest. */ .qdnapro-activity-icon-picker.aip-current-only { flex-direction: row; align-items: center; } /* De grid heeft hier één tegel, dus geen kolommenraster meer nodig. */ .qdnapro-activity-icon-picker.aip-current-only .aip-grid { display: flex; } /* De 2px die de knop in de kolomstand van de grid afduwt, hoort hier niet: naast elkaar moeten tegel en knop op één lijn staan. */ .qdnapro-activity-icon-picker.aip-current-only .aip-actions { padding-top: 0; } /* Lege tegel: alleen zichtbaar zolang er nog geen icoon gekozen is. Houdt de footprint vast zodat de rij niet verspringt, en gestippeld zodat het als "hier komt iets" leest en niet als een kapot icoon. */ .qdnapro-activity-icon-picker .aip-tile.aip-tile-empty { border-style: dashed; cursor: default; } .qdnapro-activity-icon-picker.aip-disabled { opacity: 0.55; pointer-events: none; } /* Error state */ .qdnapro-activity-icon-picker.aip-error .aip-grid { padding: 8px; border: 1px solid #c65a5a; border-radius: 12px; box-shadow: 0 0 0 4px rgba(198, 90, 90, 0.18); background: rgba(198, 90, 90, 0.04); } .qdnapro-activity-icon-picker .aip-error-message { margin: 0; font-size: 12px; line-height: 16px; color: #c65a5a; font-weight: 500; } /* Size: compact - dense grid for the full-set picker overlay */ .qdnapro-activity-icon-picker.aip-size-compact { gap: 6px; } .qdnapro-activity-icon-picker.aip-size-compact .aip-grid { grid-template-columns: repeat(12, 1fr); gap: 4px; } @media (max-width: 720px) { .qdnapro-activity-icon-picker.aip-size-compact .aip-grid { grid-template-columns: repeat(8, 1fr); } } @media (max-width: 480px) { .qdnapro-activity-icon-picker.aip-size-compact .aip-grid { grid-template-columns: repeat(6, 1fr); } } .qdnapro-activity-icon-picker.aip-size-compact .aip-tile { border-radius: 6px; } .qdnapro-activity-icon-picker.aip-size-compact .aip-tile:hover { transform: none; } .qdnapro-activity-icon-picker.aip-size-compact .aip-tile.aip-tile-selected { box-shadow: 0 0 0 2px rgba(70, 82, 243, 0.3); } /* ============================================================ * qdnapro-activity-icon-picker-overlay * Anchored search popover for the full activity-icon set. Ported * into the components-v2 bundle so it is styled on v1 pages that * load the bundle (it previously only lived inline in the preview). * The JS sets position (left/top/width) inline and toggles the * .aip-overlay-open class; this CSS supplies the box + chrome. * z-index 9100 keeps it above qdnapro-modal (z-index 9000). * [Kim 2026-05-31] * ============================================================ */ .qdnapro-activity-icon-picker-overlay { display: contents; } .qdnapro-activity-icon-picker-overlay *, .qdnapro-activity-icon-picker-overlay *::before, .qdnapro-activity-icon-picker-overlay *::after { box-sizing: border-box; } .aip-overlay-popover { position: fixed; z-index: 9100; display: none; flex-direction: column; background: #ffffff; border: 1px solid #c4c7cc; border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.08); max-height: 520px; width: 440px; overflow: hidden; font-family: "Inter", sans-serif; color: #0b0b0d; animation: aip-overlay-in 140ms cubic-bezier(0.2, 0.8, 0.2, 1); } .aip-overlay-popover.aip-overlay-open { display: flex; } @keyframes aip-overlay-in { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .aip-overlay-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 12px 16px; border-bottom: 1px solid #e5e5ea; flex-shrink: 0; } .aip-overlay-title { margin: 0; font-size: 14px; line-height: 20px; font-weight: 600; color: #40499a; } .aip-overlay-close { flex-shrink: 0; } .aip-overlay-body { display: flex; flex-direction: column; gap: 12px; padding: 12px 16px 0 16px; flex: 1 1 auto; min-height: 0; } .aip-overlay-toolbar { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .aip-overlay-search { flex: 1 1 auto; min-width: 0; } .aip-overlay-count { flex: 0 0 auto; font-size: 11px; color: #6e6e73; white-space: nowrap; } .aip-overlay-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 12px 4px 12px 0; border-top: 1px solid #e5e5ea; margin-top: -4px; } .aip-overlay-scroll::-webkit-scrollbar { width: 10px; } .aip-overlay-scroll::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.18); border-radius: 10px; } .aip-overlay-scroll::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.28); } .aip-overlay-sentinel { flex-shrink: 0; height: 1px; margin-top: 4px; pointer-events: none; } .aip-overlay-empty { text-align: center; padding: 40px 8px; color: #6e6e73; } .aip-overlay-empty-title { font-size: 14px; font-weight: 600; color: #1d1d1f; margin-bottom: 4px; } .aip-overlay-empty-sub { font-size: 12px; color: #6e6e73; } .aip-overlay-footer { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid #e5e5ea; flex-shrink: 0; } /* Compact tile grid inside the popover (auto-fill 36px cells). */ .aip-overlay-popover .qdnapro-activity-icon-picker.aip-size-compact .aip-grid { grid-template-columns: repeat(auto-fill, 36px); gap: 8px; justify-content: start; } /* ============================================================ * icon-set="mdi" — own simple tile grid (floweditor appearance modal, * 12.07.2026). Parallel to the .aip-grid/.aip-tile recipe above so both * modes look identical, WITHOUT touching qdnapro-activity-icon-picker * itself (that component is a load-bearing Tasklists dependency — see the * JS docblock for why this stays a separate, parallel grid). * ============================================================ */ .aip-overlay-mdi-grid { display: grid; grid-template-columns: repeat(auto-fill, 36px); gap: 8px; justify-content: start; } .aip-overlay-mdi-tile { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1px solid #e1e3e6; border-radius: 6px; background: #ffffff; color: #565b66; cursor: pointer; outline: none; transition: background 120ms ease, border-color 120ms ease, box-shadow 150ms ease; } .aip-overlay-mdi-tile qdnapro-icon { pointer-events: none; } .aip-overlay-mdi-tile:hover { background: #ebedfb; border-color: #b8bde8; } .aip-overlay-mdi-tile:focus-visible { border-color: #40499a; box-shadow: 0 0 0 4px rgba(70, 82, 243, 0.2); } .aip-overlay-mdi-tile.aip-overlay-mdi-tile-selected { border-color: #4652f3; background: rgba(70, 82, 243, 0.06); box-shadow: 0 0 0 3px rgba(70, 82, 243, 0.25); color: #40499a; } [data-theme=dark] .aip-overlay-mdi-tile { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.08); color: #d1d5db; } [data-theme=dark] .aip-overlay-mdi-tile:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.18); } [data-theme=dark] .aip-overlay-mdi-tile.aip-overlay-mdi-tile-selected { border-color: #a5acff; background: rgba(70, 82, 243, 0.18); box-shadow: 0 0 0 2px rgba(70, 82, 243, 0.3); color: #a5acff; } qdnapro-activity-row { display: flex; align-items: center; gap: 6px; position: relative; box-sizing: border-box; --c-focus-ring: #40499a; --c-focus-glow: rgba(70, 82, 243, 0.25); } .activity-row-inner { display: flex; align-items: center; gap: 8px; min-height: 64px; flex: 1; padding: 8px 12px 8px 32px; border-radius: 10px; position: relative; box-sizing: border-box; user-select: none; cursor: grab; outline: none; } .activity-row-inner.is-checkin, .activity-row-inner.is-checkin:active { cursor: pointer; } .activity-row-inner { background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.7); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 100ms ease; } .activity-row-inner:focus-visible, .activity-row-inner.force-focus { outline: none; box-shadow: 0 0 0 2px var(--c-focus-ring), 0 0 0 6px var(--c-focus-glow); } .activity-row-inner.disabled:focus-visible, .activity-row-inner.disabled.force-focus { box-shadow: none; } .activity-row-inner.is-pressing:not(.disabled), .activity-row-inner.force-active:not(.disabled) { background: rgba(70, 82, 243, 0.1); border-color: rgba(70, 82, 243, 0.28); box-shadow: 0 2px 10px rgba(70, 82, 243, 0.12); transform: scale(0.975); cursor: grabbing; transition: background 60ms ease, border-color 60ms ease, transform 60ms ease; } .activity-row-inner.disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; } .activity-row-inner.archived { opacity: 0.6; } .activity-row-inner.archived:hover:not(.disabled) .row-accent-bar { opacity: 0; } .activity-row-inner.archived.is-pressing:not(.disabled), .activity-row-inner.archived.force-active:not(.disabled) { background: rgba(255, 255, 255, 0.6); border-color: rgba(255, 255, 255, 0.7); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); transform: none; } .activity-row-inner.is-briefing { min-height: 56px; background: rgba(230, 239, 249, 0.75); border-color: rgba(181, 206, 237, 0.9); } .activity-row-inner.is-briefing:hover:not(.disabled), .activity-row-inner.is-briefing.force-hover:not(.disabled) { background: rgba(206, 222, 243, 0.88); border-color: rgba(133, 161, 236, 0.9); } qdnapro-activity-row[dragging] .activity-row-inner { opacity: 0.35; cursor: grabbing; } qdnapro-activity-row[drop-above] .activity-row-inner { box-shadow: 0 -3px 0 0 #4652f3, 0 0 0 2px rgba(70, 82, 243, 0.15); } qdnapro-activity-row[drop-below] .activity-row-inner { box-shadow: 0 3px 0 0 #4652f3, 0 0 0 2px rgba(70, 82, 243, 0.15); } .activity-row-inner:hover:not(.disabled), .activity-row-inner.force-hover:not(.disabled) { background: rgba(255, 255, 255, 0.82); border-color: rgba(255, 255, 255, 0.9); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); } .activity-row-inner { overflow: hidden; } .row-accent-bar { position: absolute; left: 4px; top: 50%; transform: translateY(-50%); width: 4px; height: 40px; background: #4652f3; border-radius: 2px; opacity: 0; transition: opacity 150ms ease; pointer-events: none; z-index: 1; } .activity-row-inner:hover:not(.disabled) .row-accent-bar, .activity-row-inner.force-hover:not(.disabled) .row-accent-bar { opacity: 1; } .activity-row-inner.is-checkin:hover .row-accent-bar, .activity-row-inner.is-checkin.force-hover .row-accent-bar { opacity: 0; } .row-grip { display: none; } .row-left { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; } .row-activity-icon { flex-shrink: 0; } .row-icon-placeholder { width: 40px; height: 40px; border-radius: 8px; background: rgba(0, 0, 0, 0.06); flex-shrink: 0; } .row-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .row-name { font-size: 14px; font-weight: 500; color: #0b0b0d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; } .row-sub { display: flex; align-items: center; gap: 8px; min-width: 0; } .row-sub:empty { display: none; } .row-status { display: flex; align-items: center; } .row-status:empty { display: none; } .row-meta { display: flex; align-items: center; gap: 5px; flex-shrink: 0; } .row-meta-id, .row-meta-version { font-size: 11px; color: #9ca3af; font-weight: 400; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; } .row-meta-dot { width: 2px; height: 2px; border-radius: 50%; background: #d1d5db; flex-shrink: 0; } .row-meta-desc { font-size: 11px; color: #9ca3af; font-weight: 400; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 0; } .row-type-tag { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; pointer-events: none; display: flex; align-items: center; gap: 6px; } .row-type-tag .row-icon-tag { gap: 0; } @media (max-width: 900px) { .row-type-tag { display: none; } } .row-divider { width: 1px; align-self: stretch; margin: 10px 4px; background: rgba(0, 0, 0, 0.08); flex-shrink: 0; } .row-right { display: flex; align-items: center; gap: 4px; flex-shrink: 0; } .row-col-btns { display: flex; gap: 4px; } .row-btn-divider { width: 1px; align-self: stretch; margin: 8px 2px; background: rgba(0, 0, 0, 0.08); flex-shrink: 0; } .row-required { display: flex; align-items: center; gap: 6px; padding-left: 8px; border-left: 1px solid rgba(0, 0, 0, 0.08); margin-left: 4px; } .row-required-label { font-size: 12px; font-weight: 500; color: #6b7280; white-space: nowrap; cursor: pointer; user-select: none; } .activity-row-inner.indent { margin-left: 44px; } .row-warning-slot { width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .row-warning-btn { flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; padding: 0; background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); display: flex; align-items: center; justify-content: center; cursor: pointer; outline: none; transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease; } .row-warning-btn--not-connected { border: 1px solid rgba(234, 88, 12, 0.35); color: #ea580c; } .row-warning-btn--not-connected:hover { background: rgba(255, 255, 255, 0.82); border-color: rgba(234, 88, 12, 0.55); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); color: #c2410c; } .row-warning-btn--unpublished { border: 1px solid rgba(217, 119, 6, 0.3); color: #d97706; } .row-warning-btn--unpublished:hover { background: rgba(255, 255, 255, 0.82); border-color: rgba(217, 119, 6, 0.5); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); color: #b45309; } .row-warning-btn--not-published { border: 1px solid rgba(239, 142, 2, 0.32); color: #ef8e02; } .row-warning-btn--not-published:hover { background: rgba(255, 255, 255, 0.82); border-color: rgba(239, 142, 2, 0.52); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); color: #c2740a; } .row-warning-btn--no-location { border: 1px solid rgba(239, 142, 2, 0.32); color: #ef8e02; } .row-warning-btn--no-location:hover { background: rgba(255, 255, 255, 0.82); border-color: rgba(239, 142, 2, 0.52); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); color: #c2740a; } .row-warning-btn:focus-visible { box-shadow: 0 0 0 2px var(--c-focus-ring), 0 0 0 6px var(--c-focus-glow); } .row-warning-btn:active { background: rgba(255, 255, 255, 0.7); transform: scale(0.97); } [data-theme=dark] qdnapro-activity-row { --c-focus-ring: #a5acff; --c-focus-glow: rgba(70, 82, 243, 0.40); } [data-theme=dark] .activity-row-inner { background: #2e3036; border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); } [data-theme=dark] .activity-row-inner:hover:not(.disabled), [data-theme=dark] .activity-row-inner.force-hover:not(.disabled) { background: #40444d; border-color: rgba(255, 255, 255, 0.14); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); } [data-theme=dark] .activity-row-inner.is-pressing:not(.disabled), [data-theme=dark] .activity-row-inner.force-active:not(.disabled) { background: rgba(70, 82, 243, 0.18); border-color: rgba(70, 82, 243, 0.4); box-shadow: 0 2px 10px rgba(70, 82, 243, 0.2); } [data-theme=dark] .activity-row-inner.is-briefing { background: #2e3e54; border-color: rgba(181, 206, 237, 0.2); } [data-theme=dark] .activity-row-inner.is-briefing:hover:not(.disabled), [data-theme=dark] .activity-row-inner.is-briefing.force-hover:not(.disabled) { background: #445a78; border-color: rgba(181, 206, 237, 0.32); } [data-theme=dark] .row-name { color: #f3f4f6; } [data-theme=dark] .row-meta-id, [data-theme=dark] .row-meta-version { color: #4b5563; } [data-theme=dark] .row-meta-dot { background: #374151; } [data-theme=dark] .row-meta-desc { color: #6b7280; } [data-theme=dark] .activity-row-inner.navigating:not(.disabled) { background: rgba(70, 82, 243, 0.15); border-color: rgba(70, 82, 243, 0.35); box-shadow: 0 2px 12px rgba(70, 82, 243, 0.25); } [data-theme=dark] .row-divider { background: rgba(255, 255, 255, 0.08); } [data-theme=dark] .row-btn-divider { background: rgba(255, 255, 255, 0.08); } [data-theme=dark] .row-icon-placeholder { background: rgba(255, 255, 255, 0.08); } [data-theme=dark] .row-required { border-left-color: rgba(255, 255, 255, 0.08); } [data-theme=dark] .row-required-label { color: #9ca3af; } [data-theme=dark] .row-warning-btn { background: rgba(20, 22, 35, 0.7); border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); color: #fbbf24; } [data-theme=dark] .row-warning-btn:hover { background: rgba(40, 44, 65, 0.85); border-color: rgba(255, 255, 255, 0.12); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); color: #f59e0b; } .qdnapro-agenda-list { display: block; box-sizing: border-box; width: 100%; background: #fff; font-family: var(--theme-font-family, "Inter", sans-serif); } .qdnapro-agenda-list__day { display: block; } .qdnapro-agenda-list__header { position: sticky; top: 0; z-index: 1; padding: 10px 16px 6px; background: #fff; border-bottom: 1px solid var(--c-grey-100, #e7e9ec); font-size: 13px; font-weight: 600; line-height: 16px; color: var(--c-grey-600, #565b66); } .qdnapro-agenda-list__header.is-today { color: var(--c-action-500, #4652f3); } .qdnapro-agenda-list__todaypill { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--c-action-500, #4652f3); color: #fff; font-weight: 700; } .qdnapro-agenda-list__day.is-past { opacity: 0.55; } .qdnapro-agenda-list__row { display: flex; align-items: stretch; gap: 8px; padding: 4px 8px 4px 12px; } .qdnapro-agenda-list__row:first-of-type { padding-top: 8px; } .qdnapro-agenda-list__time { flex: none; display: flex; flex-direction: column; gap: 2px; width: 56px; padding-top: 4px; } .qdnapro-agenda-list__start { font-size: 14px; font-weight: 600; line-height: 18px; color: var(--c-grey-950, #0b0b0d); } .qdnapro-agenda-list__dur { font-size: 12px; line-height: 16px; color: var(--c-grey-500, #6b7280); } .qdnapro-agenda-list__row .qdnapro-event-card { flex: 1; min-width: 0; height: auto; } .qdnapro-agenda-list__empty { padding: 24px 16px; text-align: center; font-size: 13px; line-height: 18px; color: var(--c-grey-500, #6b7280); } .qdnapro-alert { --alert-bg: var(--c-grey-50, #f0f1f2); --alert-text: var(--c-grey-600, #565b66); --alert-border: var(--c-grey-200, #d1d5db); display: flex; align-items: center; gap: 10px; box-sizing: border-box; width: 100%; padding: 14px 16px; border-radius: var(--r-3, 12px); border: 1px solid color-mix(in srgb, var(--alert-border) 45%, transparent); background: var(--alert-bg); color: var(--alert-text); font-family: var(--ff, "Inter", -apple-system, sans-serif); text-align: left; } .qdnapro-alert--error { --alert-bg: var(--c-signal-red-bg, #fee3e3); --alert-text: var(--c-signal-red-text, #c65a5a); --alert-border: var(--c-signal-red-text, #c65a5a); } .qdnapro-alert--warning { --alert-bg: var(--c-warning-bright-bg, #fff3cd); --alert-text: var(--c-warning-bright-text, #9a6a10); --alert-border: var(--c-warning-bright-border, #f0d060); } .qdnapro-alert--success { --alert-bg: var(--c-signal-green-bg, #c5f5e2); --alert-text: var(--c-signal-green-text, #428b6e); --alert-border: var(--c-signal-green-text, #428b6e); } .qdnapro-alert--info { --alert-bg: var(--c-signal-blue-bg, #e6eff9); --alert-text: var(--c-signal-blue-text, #6a8ab4); --alert-border: var(--c-signal-blue-text, #6a8ab4); } .qdnapro-alert__icon { flex: none; display: inline-flex; align-items: center; color: var(--alert-text); } .qdnapro-alert__icon qdnapro-icon { width: 20px; height: 20px; } .qdnapro-alert__main { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; } .qdnapro-alert__content { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .qdnapro-alert__title { font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--alert-text); } .qdnapro-alert__body { font-size: 13px; font-weight: 400; line-height: 1.45; color: var(--alert-text); } .qdnapro-alert__action { flex: none; display: flex; align-items: center; } .qdnapro-alert .qdnapro-alert__action .qdnapro-button { background: color-mix(in srgb, var(--alert-text) 12%, transparent); color: var(--alert-text); } .qdnapro-alert .qdnapro-alert__action .qdnapro-button:hover:not(.button-disabled) { background: color-mix(in srgb, var(--alert-text) 20%, transparent); } .qdnapro-alert .qdnapro-alert__action .qdnapro-button:active:not(.button-disabled) { background: color-mix(in srgb, var(--alert-text) 26%, transparent); } .qdnapro-alert__dismiss { flex: none; margin: 0 -6px 0 0; } .qdnapro-alert .qdnapro-alert__dismiss.qdnapro-icon-btn { color: var(--alert-text); } .qdnapro-alert .qdnapro-alert__dismiss.qdnapro-icon-btn:hover:not(.icon-btn-disabled) { background: color-mix(in srgb, var(--alert-text) 15%, transparent); } .qdnapro-alert--compact { padding: 10px 12px; gap: 8px; border-radius: var(--r-2, 8px); } .qdnapro-alert--compact .qdnapro-alert__icon qdnapro-icon { width: 18px; height: 18px; } .qdnapro-alert--compact .qdnapro-alert__title { font-size: 13px; } .qdnapro-alert--compact .qdnapro-alert__body { font-size: 12px; } .qdnapro-alert--compact .qdnapro-alert__main { gap: 6px 12px; } .qdnapro-answer-option { box-sizing: border-box; display: flex; align-items: center; gap: 0; border-radius: 7px; border: 1px solid #e2e4ef; background: #fafbff; overflow: visible; min-height: 38px; transition: border-color 140ms, box-shadow 140ms, transform 120ms, background 140ms; position: relative; font-family: "Inter", -apple-system, sans-serif; } .qdnapro-answer-option *, .qdnapro-answer-option *::before, .qdnapro-answer-option *::after { box-sizing: border-box; } .qdnapro-answer-option:hover, .qdnapro-answer-option--show-actions { border-color: #a8b2e8; box-shadow: 0 1px 5px rgba(64, 73, 154, 0.1); } .qdnapro-answer-option:hover .qdnapro-answer-option__drag, .qdnapro-answer-option--show-actions .qdnapro-answer-option__drag { opacity: 1; } .qdnapro-answer-option:hover .qdnapro-answer-option__actions, .qdnapro-answer-option--show-actions .qdnapro-answer-option__actions { opacity: 1; pointer-events: all; } .qdnapro-answer-option:hover .qdnapro-answer-option__act, .qdnapro-answer-option--show-actions .qdnapro-answer-option__act { transform: scale(1); opacity: 1; } .qdnapro-answer-option--draggable .qdnapro-answer-option__label { padding-left: 14px; } .qdnapro-answer-option--pressed { border-color: #a8b2e8; background: #eef0ff; box-shadow: inset 0 1px 3px rgba(64, 73, 154, 0.12); transform: translateY(1px); } .qdnapro-answer-option--dragging { border-color: #40499a; background: #ffffff; box-shadow: 0 10px 26px rgba(20, 24, 60, 0.22); transform: scale(1.015); z-index: 5; } .qdnapro-answer-option--dragging .qdnapro-answer-option__drag { opacity: 1; } .qdnapro-answer-option--unlinked { border-color: #ddb84a; background: #fffbf0; } .qdnapro-answer-option--confirming { border-color: #e4a0a0; background: #fff5f5; } .qdnapro-answer-option--confirming-unlink { border-color: #f0d060; background: #fffbf0; } .qdnapro-answer-option { --answer-option-accent-bg: var(--c-purple-50, #e6e9ff); --answer-option-accent-text: var(--c-purple-500, #40499a); } .qdnapro-answer-option--color-positive { --answer-option-accent-bg: var(--c-signal-green-bg, #c5f5e2); --answer-option-accent-text: var(--c-signal-green-text, #428b6e); } .qdnapro-answer-option--color-warning { --answer-option-accent-bg: var(--c-signal-yellow-bg, #feedb8); --answer-option-accent-text: var(--c-signal-yellow-text, #bf7202); } .qdnapro-answer-option--color-negative { --answer-option-accent-bg: var(--c-signal-red-bg, #fee3e3); --answer-option-accent-text: var(--c-signal-red-text, #c65a5a); } .qdnapro-answer-option--color-neutral_alt { --answer-option-accent-bg: var(--c-signal-blue-bg, #e6eff9); --answer-option-accent-text: var(--c-signal-blue-text, #6a8ab4); } .qdnapro-answer-option__drag { position: absolute; left: 4px; top: 50%; transform: translateY(-50%); width: 4px; height: 22px; background: #4652f3; border-radius: 2px; opacity: 0; transition: opacity 150ms ease; pointer-events: none; z-index: 1; } .qdnapro-answer-option__label { flex: 1; border: none; outline: none; background: transparent; color: #2a2e5e; font-family: inherit; font-size: 12px; padding: 9px 6px; line-height: 1.4; min-width: 0; } .qdnapro-answer-option__label:focus, .qdnapro-answer-option__label.is-editing { background: rgba(255, 255, 255, 0.9); border-radius: 4px; box-shadow: inset 0 0 0 1.5px #40499a; } .qdnapro-answer-option__label[readonly] { color: #6a6e9a; cursor: default; } .qdnapro-answer-option__label--static { display: flex; align-items: center; cursor: default; } .qdnapro-answer-option__label--static.is-empty { color: #8a8fb8; font-style: italic; } .qdnapro-answer-option__node-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--answer-option-accent-text, #40499a); } .qdnapro-answer-option--single .qdnapro-answer-option__node-icon { padding: 0 2px 0 10px; font-size: 18px; } .qdnapro-answer-option:not(.qdnapro-answer-option--single) .qdnapro-answer-option__node-icon { width: 22px; height: 22px; margin-left: 8px; border-radius: 6px; background: var(--answer-option-accent-bg, #e6e9ff); font-size: 14px; flex-shrink: 0; } .qdnapro-answer-option--draggable .qdnapro-answer-option__node-icon { margin-left: 14px; } .qdnapro-answer-option__conn { display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px; border-radius: 20px; font-size: 11px; font-weight: 600; white-space: nowrap; flex-shrink: 0; margin-right: 4px; font-family: inherit; } .qdnapro-answer-option__conn svg { width: 13px; height: 13px; } .qdnapro-answer-option__conn--linked { background: #eef0ff; color: #40499a; border: none; cursor: default; } .qdnapro-answer-option__conn--linked.qdnapro-answer-option__conn--has-tip { transition: background 120ms; } .qdnapro-answer-option__conn--linked.qdnapro-answer-option__conn--has-tip:hover { background: #e0e3ff; } .qdnapro-answer-option__conn--empty { background: #fff3cd; color: #8a6a10; border: 1px dashed #ddb84a; cursor: pointer; transition: background 120ms; } .qdnapro-answer-option__conn--empty:hover { background: #ffeea0; } .qdnapro-answer-option__conn--linked.qdnapro-answer-option__conn--warning { background: #fff3cd; color: #9a6a10; border: 1px solid #f0d060; animation: qdnapro-ao-pill-wiggle 3s ease-in-out infinite; transform-origin: center; } .qdnapro-answer-option__conn--linked.qdnapro-answer-option__conn--warning:hover { background: #ffeea0; } @keyframes qdnapro-ao-pill-wiggle { 0%, 84%, 100% { transform: translateX(0) rotate(0); } 87% { transform: translateX(-2px) rotate(-3deg); } 90% { transform: translateX(2px) rotate(3deg); } 93% { transform: translateX(-2px) rotate(-2deg); } 96% { transform: translateX(1px) rotate(1deg); } } @media (prefers-reduced-motion: reduce) { .qdnapro-answer-option__conn--warning { animation: none; } } .qdnapro-answer-option__actions { display: flex; align-items: center; gap: 2px; padding: 0 5px 0 0; flex-shrink: 0; opacity: 0; pointer-events: none; transition: opacity 140ms; } .qdnapro-answer-option__act { width: 26px; height: 26px; border-radius: 5px; border: 1px solid transparent; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; transition: background 120ms, border-color 120ms, color 120ms; flex-shrink: 0; } .qdnapro-answer-option__act svg { width: 15px; height: 15px; } .qdnapro-answer-option__act--unlink { color: #9a6a10; background: #fff3cd; border-color: #f0d060; } .qdnapro-answer-option__act--unlink:hover { background: #fde8a0; border-color: #d0a820; } .qdnapro-answer-option__act--delete { color: #c94040; background: #fde8e8; border-color: #e8b0b0; } .qdnapro-answer-option__act--delete:hover { background: #ffcccc; border-color: #c94040; } .qdnapro-answer-option__confirm { display: flex; align-items: center; gap: 8px; flex: 1; padding: 6px 10px; } .qdnapro-answer-option__confirm-icon { color: #c94040; font-size: 15px; flex-shrink: 0; display: flex; align-items: center; } .qdnapro-answer-option__confirm-icon svg { width: 16px; height: 16px; } .qdnapro-answer-option__confirm-text { flex: 1; font-size: 12px; font-weight: 600; color: #c94040; font-family: inherit; } .qdnapro-answer-option--confirming-unlink .qdnapro-answer-option__confirm-icon, .qdnapro-answer-option--confirming-unlink .qdnapro-answer-option__confirm-text { color: #9a6a10; } .qdnapro-answer-button { display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box; min-height: 56px; padding: 12px 16px; border: 1.5px solid transparent; border-radius: var(--r-3, 12px); background: color-mix(in srgb, var(--theme-btn-color, #40499a) 12%, #fff); color: var(--theme-btn-color, #40499a); font-family: var(--theme-font-family, "Inter", sans-serif); font-size: 16px; font-weight: 400; line-height: 1.25; text-align: left; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, transform 0.1s ease; } .qdnapro-answer-button:hover:not(.is-disabled):not(.is-active) { background: color-mix(in srgb, var(--theme-btn-color, #40499a) 20%, #fff); } .qdnapro-answer-button.is-pressed:not(.is-disabled) { background: color-mix(in srgb, var(--theme-btn-color, #40499a) 28%, #fff); transform: scale(0.98); } .qdnapro-answer-button.is-active { background: var(--theme-btn-selected-color, color-mix(in srgb, var(--theme-btn-color, #40499a) 22%, #fff)); color: var(--theme-btn-selected-text-color, var(--theme-btn-color, #40499a)); border-color: transparent; } .qdnapro-answer-button.is-disabled { background: var(--c-grey-50, #f0f1f2); color: var(--c-grey-400, #a6aab3); cursor: default; } .qdnapro-answer-button__tick { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 7px; border: 2px solid currentColor; color: inherit; background: transparent; opacity: 0.5; transition: background 0.18s ease, border-color 0.18s ease, opacity 0.18s ease, transform 0.2s cubic-bezier(0.34, 1.6, 0.5, 1); } .qdnapro-answer-button__tick svg { overflow: visible; } .qdnapro-answer-button__check { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset 0.15s ease; } .qdnapro-answer-button.is-active .qdnapro-answer-button__tick { opacity: 1; background: var(--theme-btn-color, #40499a); border-color: var(--theme-btn-color, #40499a); color: var(--theme-btn-text-color, #fff); animation: qab-tick-pop 0.52s cubic-bezier(0.34, 1.56, 0.5, 1); } .qdnapro-answer-button.is-active .qdnapro-answer-button__check { animation: qab-draw 0.38s cubic-bezier(0.22, 1, 0.36, 1) 0.04s forwards; } .qdnapro-answer-button.is-disabled .qdnapro-answer-button__tick { border-color: var(--c-grey-300, #c4c7cc); opacity: 1; } .qdnapro-answer-button__label { flex: 1; min-width: 0; } .qdnapro-answer-button--multiple-choice .qdnapro-answer-button__tick { border-radius: 50%; } .qdnapro-answer-button__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; overflow: hidden; } .qdnapro-answer-button__icon svg, .qdnapro-answer-button__icon img { display: block; width: 100%; height: 100%; object-fit: contain; } .qdnapro-answer-button.has-icon-mdi .qdnapro-answer-button__icon { width: 24px; height: 24px; } .qdnapro-answer-button.has-icon-mdi .qdnapro-answer-button__icon svg { fill: currentColor; } @keyframes qab-tick-pop { 0% { transform: scale(0.7) rotate(0deg); } 20% { transform: scale(1.22) rotate(-5deg); } 44% { transform: scale(0.9) rotate(3deg); } 64% { transform: scale(1.08) rotate(-1deg); } 80% { transform: scale(0.97) rotate(0deg); } 100% { transform: scale(1) rotate(0deg); } } @keyframes qab-draw { 0% { stroke-dashoffset: 24; } 62% { stroke-dashoffset: -1; } 80% { stroke-dashoffset: 0.7; } 100% { stroke-dashoffset: 0; } } .qdnapro-answer-button--compact { min-height: 48px; padding: 10px 14px; font-size: 15px; gap: 10px; } .qdnapro-answer-button--compact .qdnapro-answer-button__tick { width: 20px; height: 20px; border-radius: 6px; } .qdnapro-answer-button--compact.qdnapro-answer-button--multiple-choice .qdnapro-answer-button__tick { border-radius: 50%; } .qdnapro-answer-button--compact .qdnapro-answer-button__tick svg { width: 13px; height: 13px; } .qdnapro-answer-button--compact.has-icon-activity .qdnapro-answer-button__icon { width: 26px; height: 26px; } .qdnapro-answer-button--compact.has-icon-mdi .qdnapro-answer-button__icon { width: 20px; height: 20px; } :where([data-theme=dark], [data-theme-dark=true]) .qdnapro-answer-button { background: color-mix(in srgb, var(--theme-btn-color, #40499a) 20%, var(--c-grey-900, #18181c)); color: color-mix(in srgb, var(--theme-btn-color, #40499a) 70%, #fff); } :where([data-theme=dark], [data-theme-dark=true]) .qdnapro-answer-button:hover:not(.is-disabled):not(.is-active) { background: color-mix(in srgb, var(--theme-btn-color, #40499a) 30%, var(--c-grey-900, #18181c)); } :where([data-theme=dark], [data-theme-dark=true]) .qdnapro-answer-button.is-pressed:not(.is-disabled) { background: color-mix(in srgb, var(--theme-btn-color, #40499a) 40%, var(--c-grey-900, #18181c)); } :where([data-theme=dark], [data-theme-dark=true]) .qdnapro-answer-button.is-active { background: var(--theme-btn-selected-color, color-mix(in srgb, var(--theme-btn-color, #40499a) 35%, var(--c-grey-900, #18181c))); color: var(--theme-btn-selected-text-color, color-mix(in srgb, var(--theme-btn-color, #40499a) 70%, #fff)); } :where([data-theme=dark], [data-theme-dark=true]) .qdnapro-answer-button.is-disabled { background: var(--c-grey-900, #18181c); color: var(--c-grey-500, #6b7280); } .qdnapro-answer-button--green { background: var(--c-signal-green-bg, #c5f5e2); color: var(--c-signal-green-text, #428b6e); } .qdnapro-answer-button--green:hover:not(.is-disabled):not(.is-active) { background: color-mix(in srgb, var(--c-signal-green-bg, #c5f5e2) 85%, #000); } .qdnapro-answer-button--green.is-pressed:not(.is-disabled) { background: color-mix(in srgb, var(--c-signal-green-bg, #c5f5e2) 75%, #000); } .qdnapro-answer-button--green.is-active { background: color-mix(in srgb, var(--c-signal-green-bg, #c5f5e2) 80%, #000); color: var(--c-signal-green-text, #428b6e); } .qdnapro-answer-button--green.is-active .qdnapro-answer-button__tick { background: var(--c-success-bright, #1d9e75); border-color: var(--c-success-bright, #1d9e75); } .qdnapro-answer-button--red { background: var(--c-signal-red-bg, #fee3e3); color: var(--c-signal-red-text, #c65a5a); } .qdnapro-answer-button--red:hover:not(.is-disabled):not(.is-active) { background: color-mix(in srgb, var(--c-signal-red-bg, #fee3e3) 85%, #000); } .qdnapro-answer-button--red.is-pressed:not(.is-disabled) { background: color-mix(in srgb, var(--c-signal-red-bg, #fee3e3) 75%, #000); } .qdnapro-answer-button--red.is-active { background: color-mix(in srgb, var(--c-signal-red-bg, #fee3e3) 80%, #000); color: var(--c-signal-red-text, #c65a5a); } .qdnapro-answer-button--red.is-active .qdnapro-answer-button__tick { background: var(--c-warn-red-500, #dc2626); border-color: var(--c-warn-red-500, #dc2626); } .qdnapro-answer-button--positive { background: var(--c-signal-green-bg, #c5f5e2); color: var(--c-signal-green-text, #428b6e); } .qdnapro-answer-button--positive:hover:not(.is-disabled):not(.is-active) { background: color-mix(in srgb, var(--c-signal-green-bg, #c5f5e2) 85%, #000); } .qdnapro-answer-button--positive.is-pressed:not(.is-disabled) { background: color-mix(in srgb, var(--c-signal-green-bg, #c5f5e2) 75%, #000); } .qdnapro-answer-button--positive.is-active { background: color-mix(in srgb, var(--c-signal-green-bg, #c5f5e2) 80%, #000); color: var(--c-signal-green-text, #428b6e); } .qdnapro-answer-button--positive.is-active .qdnapro-answer-button__tick { background: var(--c-success-bright, #1d9e75); border-color: var(--c-success-bright, #1d9e75); } .qdnapro-answer-button--warning { background: var(--c-signal-yellow-bg, #feedb8); color: var(--c-signal-yellow-text, #bf7202); } .qdnapro-answer-button--warning:hover:not(.is-disabled):not(.is-active) { background: color-mix(in srgb, var(--c-signal-yellow-bg, #feedb8) 85%, #000); } .qdnapro-answer-button--warning.is-pressed:not(.is-disabled) { background: color-mix(in srgb, var(--c-signal-yellow-bg, #feedb8) 75%, #000); } .qdnapro-answer-button--warning.is-active { background: color-mix(in srgb, var(--c-signal-yellow-bg, #feedb8) 80%, #000); color: var(--c-signal-yellow-text, #bf7202); } .qdnapro-answer-button--warning.is-active .qdnapro-answer-button__tick { background: var(--c-warn-amber-500, #d97706); border-color: var(--c-warn-amber-500, #d97706); } .qdnapro-answer-button--negative { background: var(--c-signal-red-bg, #fee3e3); color: var(--c-signal-red-text, #c65a5a); } .qdnapro-answer-button--negative:hover:not(.is-disabled):not(.is-active) { background: color-mix(in srgb, var(--c-signal-red-bg, #fee3e3) 85%, #000); } .qdnapro-answer-button--negative.is-pressed:not(.is-disabled) { background: color-mix(in srgb, var(--c-signal-red-bg, #fee3e3) 75%, #000); } .qdnapro-answer-button--negative.is-active { background: color-mix(in srgb, var(--c-signal-red-bg, #fee3e3) 80%, #000); color: var(--c-signal-red-text, #c65a5a); } .qdnapro-answer-button--negative.is-active .qdnapro-answer-button__tick { background: var(--c-warn-red-500, #dc2626); border-color: var(--c-warn-red-500, #dc2626); } .qdnapro-answer-button--neutral_alt { background: var(--c-signal-blue-bg, #e6eff9); color: var(--c-signal-blue-text, #6a8ab4); } .qdnapro-answer-button--neutral_alt:hover:not(.is-disabled):not(.is-active) { background: color-mix(in srgb, var(--c-signal-blue-bg, #e6eff9) 85%, #000); } .qdnapro-answer-button--neutral_alt.is-pressed:not(.is-disabled) { background: color-mix(in srgb, var(--c-signal-blue-bg, #e6eff9) 75%, #000); } .qdnapro-answer-button--neutral_alt.is-active { background: color-mix(in srgb, var(--c-signal-blue-bg, #e6eff9) 80%, #000); color: var(--c-signal-blue-text, #6a8ab4); } .qdnapro-answer-button--neutral_alt.is-active .qdnapro-answer-button__tick { background: var(--c-signal-blue-text, #6a8ab4); border-color: var(--c-signal-blue-text, #6a8ab4); } .qdnapro-avatar { --av-bg: #c5f5e2; --av-border: #428b6e; --av-size: 48px; --av-padding: 8px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: var(--av-size); height: var(--av-size); flex-shrink: 0; padding: var(--av-padding); border: 0.5px solid var(--av-border); border-radius: 50%; background: var(--av-bg); overflow: hidden; user-select: none; transition: opacity 140ms ease-out; } .qdnapro-avatar .avatar-animal { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; pointer-events: none; } .qdnapro-avatar.avatar-size-72 { --av-size: 72px; --av-padding: 12px; } .qdnapro-avatar.avatar-size-48 { --av-size: 48px; --av-padding: 8px; } .qdnapro-avatar.avatar-size-34 { --av-size: 34px; --av-padding: 6px; } .qdnapro-avatar.avatar-size-28 { --av-size: 28px; --av-padding: 5px; } .qdnapro-avatar.avatar-size-20 { --av-size: 20px; --av-padding: 4px; } .qdnapro-avatar.avatar-color-green { --av-bg: #c5f5e2; --av-border: #428b6e; --av-icon: #428b6e; } .qdnapro-avatar.avatar-color-yellow { --av-bg: #feedb8; --av-border: #bf7202; --av-icon: #ef8e02; } .qdnapro-avatar.avatar-color-blue { --av-bg: #e6eff9; --av-border: #6a8ab4; --av-icon: #4f6887; } .qdnapro-avatar.avatar-color-red { --av-bg: #fee3e3; --av-border: #c65a5a; --av-icon: #c65a5a; } .qdnapro-avatar.avatar-color-neutral { --av-bg: var(--c-grey-100, #e7e9ec); --av-border: var(--c-grey-500, #6b7280); --av-icon: var(--c-grey-600, #565b66); } .qdnapro-avatar.avatar-color-purple { --av-bg: var(--c-purple-50, #e6e9ff); --av-border: var(--c-purple-200, #a5acff); --av-icon: var(--c-purple-500, #40499a); } .qdnapro-avatar.avatar-mode-photo { border: none; padding: 0; background: #f0f1f2; } .qdnapro-avatar .avatar-photo { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; } .qdnapro-avatar .avatar-initials { font-family: "Inter", sans-serif; font-weight: 600; color: #6b7280; text-align: center; line-height: 1; user-select: none; white-space: nowrap; transform: translateY(0.05em); } .qdnapro-avatar.avatar-mode-initials.avatar-size-72 .avatar-initials { font-size: 28px; } .qdnapro-avatar.avatar-mode-initials.avatar-size-48 .avatar-initials { font-size: 18px; } .qdnapro-avatar.avatar-mode-initials.avatar-size-34 .avatar-initials { font-size: 13px; } .qdnapro-avatar.avatar-mode-initials.avatar-size-28 .avatar-initials { font-size: 11px; } .qdnapro-avatar.avatar-mode-initials.avatar-size-20 .avatar-initials { font-size: 9px; } .qdnapro-avatar.avatar-mode-icon { color: var(--av-icon); } .qdnapro-avatar .avatar-icon { display: inline-flex; color: inherit; pointer-events: none; } .qdnapro-avatar .avatar-icon svg { fill: currentColor; width: 100%; height: 100%; } .qdnapro-avatar.avatar-mode-icon.avatar-size-72 .avatar-icon { width: 36px; height: 36px; } .qdnapro-avatar.avatar-mode-icon.avatar-size-48 .avatar-icon { width: 24px; height: 24px; } .qdnapro-avatar.avatar-mode-icon.avatar-size-34 .avatar-icon { width: 18px; height: 18px; } .qdnapro-avatar.avatar-mode-icon.avatar-size-28 .avatar-icon { width: 15px; height: 15px; } .qdnapro-avatar.avatar-mode-icon.avatar-size-20 .avatar-icon { width: 12px; height: 12px; } .qdnapro-avatar.avatar-mode-mark { color: var(--av-icon); } .qdnapro-avatar .avatar-mark { display: inline-flex; color: inherit; pointer-events: none; } .qdnapro-avatar .avatar-mark svg { display: block; fill: currentColor; width: 100%; height: 100%; } .qdnapro-avatar.avatar-mode-mark.avatar-size-72 .avatar-mark { width: 42px; height: 42px; } .qdnapro-avatar.avatar-mode-mark.avatar-size-48 .avatar-mark { width: 28px; height: 28px; } .qdnapro-avatar.avatar-mode-mark.avatar-size-34 .avatar-mark { width: 20px; height: 20px; } .qdnapro-avatar.avatar-mode-mark.avatar-size-28 .avatar-mark { width: 16px; height: 16px; } .qdnapro-avatar.avatar-mode-mark.avatar-size-20 .avatar-mark { width: 12px; height: 12px; } .qdnapro-avatar.avatar-disabled { opacity: 0.5; } .qdnapro-avatar.avatar-missing::after { content: "?"; position: absolute; font-family: "Inter", sans-serif; font-size: 0.5em; color: var(--av-border); } .qdnapro-avatar-stack { display: inline-flex; align-items: center; vertical-align: middle; } .qdnapro-avatar-stack [data-role=stack-item] { flex-shrink: 0; position: relative; } .qdnapro-avatar-stack [data-stack-hidden] { display: none; } .qdnapro-avatar-stack [data-role=overflow] { margin-left: 4px; flex-shrink: 0; } .qdnapro-avatar-stack[data-size="20"] [data-role=stack-item] { margin-right: -6px; } .qdnapro-avatar-stack[data-size="34"] [data-role=stack-item] { margin-right: -10px; } .qdnapro-avatar-stack[data-size="48"] [data-role=stack-item] { margin-right: -14px; } .qdnapro-avatar-stack[data-size="72"] [data-role=stack-item] { margin-right: -22px; } .qdnapro-avatar-stack [data-role=stack-item][data-stack-last] { margin-right: 0; } /* variant="button": the whole stack acts like a subtle-purple button (hover / active / focus), for use on a light-purple surface. [Kim 2026-06-17] */ .qdnapro-avatar-stack[variant=button] { cursor: pointer; padding: 4px 8px; border-radius: 8px; background: transparent; transition: background-color 120ms ease, box-shadow 120ms ease; } .qdnapro-avatar-stack[variant=button]:hover { background: #daddf2; } .qdnapro-avatar-stack[variant=button]:active { background: #c7cce8; } .qdnapro-avatar-stack[variant=button]:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(64, 73, 154, 0.45); } /* De sheet wordt bij openen naar geportald (zie _show). Container is position:fixed (NIET transform — dat zou de fixed kinderen vangen) zodat z-index geldt en hij een stacking-context op 1000 maakt; de fixed scrim/paneel blijven viewport-relatief. */ .qdnapro-bottom-sheet { position: fixed; inset: 0; z-index: 1000; display: none; font-family: var(--theme-font-family, "Inter", sans-serif); } .qdnapro-bottom-sheet.is-visible { display: block; } /* ÉÉN scrim-object dekt het HELE scherm — inclusief de iOS safe-areas (boven + onder), want position:fixed + inset:0 is viewport-relatief met viewport-fit= cover. Het paneel ligt erbovenop (later in de DOM) en wordt dus niet gedimd. Eén object = één uniforme dim, geen safe-area-trucs, geen timing-race. [Jan 30.06.2026] */ .qdnapro-bottom-sheet .bs-scrim { position: fixed; inset: 0; background: var(--c-black-45); /* INSTANT dim — geen opacity-transitie. De scrim is er zodra de sheet zichtbaar is (display:block via .is-visible) en verdwijnt ineens bij sluiten. Bewust geen animatie: een geanimeerde opacity op een safe-area-kruisend fixed element wordt door iOS WKWebView in de safe-area met andere timing gecomposit (lag). Het paneel slidet wel. [Jan 30.06.2026] */ } .qdnapro-bottom-sheet .bs-panel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1; /* boven de scrim (zelfde stacking-context) */ display: flex; flex-direction: column; box-sizing: border-box; max-height: 86%; background: var(--c-bg-card); border-radius: 32px 32px 0 0; /* Inline padding as a custom property so anything that has to CANCEL it (the full-bleed .bs-dialog-image) stays in step with variants that change it — the reading variant raises it to 16px. A hardcoded negative margin would silently be wrong on those variants. [Kim 31.07.2026] */ --bs-pad-x: 8px; padding: 4px var(--bs-pad-x) 0; box-shadow: 0 -10px 34px rgba(0, 0, 0, 0.16); transform: translateY(100%); /* Same timing as the scrim (no delay) — they start together so the panel sliding up and the screen darkening read as one motion. will-change keeps the slide on its own GPU layer (smooth on iOS, no jank). */ transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; outline: none; } .qdnapro-bottom-sheet.is-open .bs-panel { transform: translateY(0); } .qdnapro-bottom-sheet .bs-handle-zone { padding: 10px 0 24px; margin: 0 -16px; /* full-width grab target */ cursor: grab; touch-action: none; /* let the pointer-drag own the gesture */ flex-shrink: 0; } .qdnapro-bottom-sheet .bs-grab { width: 38px; height: 5px; border-radius: var(--r-pill); background: var(--c-grey-300); margin: 0 auto; } .qdnapro-bottom-sheet .bs-header { display: flex; align-items: flex-start; gap: 12px; padding: 4px 0 12px; flex-shrink: 0; } .qdnapro-bottom-sheet .bs-header-text { flex: 1; min-width: 0; } .qdnapro-bottom-sheet .bs-title { font-size: 16px; font-weight: 400; line-height: 1.3; color: var(--c-text-heading); } .qdnapro-bottom-sheet .bs-subtitle { font-size: 12px; font-weight: 400; line-height: 1.4; color: var(--c-text-muted); margin-top: 2px; } .qdnapro-bottom-sheet .bs-close { flex-shrink: 0; width: 30px; height: 30px; border: none; border-radius: var(--r-pill); background: var(--c-black-06); color: var(--c-text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .qdnapro-bottom-sheet .bs-close:active { background: var(--c-black-12); } .qdnapro-bottom-sheet .bs-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 8px; /* REVERTED 13.07.2026 (Kim): the global padding-bottom 0 made the button sheets (edit-exit confirm) sit cramped against the bottom edge, so the base keeps its breathing room + iOS safe-area again. ONLY the reading variant (further down) keeps the deliberate overflow feel at 0. 24px fixed breathing room + safe-area for the home indicator. [Kim 15.07.2026] */ padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); /* A bottom sheet must NEVER show a visible scrollbar — content still scrolls. Flat scrollbar-hide (the qdna-scrollbar-hidden mixin can't be used here: this partial is copied verbatim to the PWA). */ scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* old Edge/IE */ } .qdnapro-bottom-sheet .bs-body::-webkit-scrollbar { width: 0; height: 0; display: none; /* Chrome / Safari */ } /* Segment controls inside the body should size to content and center — not stretch full-width. */ .qdnapro-bottom-sheet .bs-body > qdnapro-segment { align-self: center; } /* Auto-card: buttons placed directly in the sheet body (not inside a group) always get a card frame — first button gets top corners, last gets bottom corners. This enforces the design rule that buttons are NEVER shown naked on the sheet surface. */ .qdnapro-bottom-sheet .bs-body > qdnapro-bottom-sheet-button { background: var(--c-grey-50); } .qdnapro-bottom-sheet.bs-variant-purple .bs-body > qdnapro-bottom-sheet-button { background: var(--c-white-14); } .qdnapro-bottom-sheet .bs-body > qdnapro-bottom-sheet-button:first-of-type { border-radius: 24px 24px 0 0; } .qdnapro-bottom-sheet .bs-body > qdnapro-bottom-sheet-button:last-of-type { border-radius: 0 0 24px 24px; } .qdnapro-bottom-sheet .bs-body > qdnapro-bottom-sheet-button:only-of-type { border-radius: 24px; } /* Purple variant — for action menus (the PWA's purple bottom sheets). Uses the fixed primitive --c-purple-500 (NOT --c-brand-purple, which lifts to light purple in dark mode — the sheet must stay purple). */ .qdnapro-bottom-sheet.bs-variant-purple .bs-panel { background: var(--c-purple-500); } .qdnapro-bottom-sheet.bs-variant-purple .bs-grab { background: var(--c-white-45); } .qdnapro-bottom-sheet.bs-variant-purple .bs-title { color: var(--c-text-on-action); } .qdnapro-bottom-sheet.bs-variant-purple .bs-subtitle { color: var(--c-white-45); } .qdnapro-bottom-sheet.bs-variant-purple .bs-close { background: var(--c-white-14); color: var(--c-text-on-action); } /* Glass variant — a dark, translucent, blurred panel (iOS/WhatsApp emoji-picker look). The scrim stays the normal dim; the panel itself is the frosted layer. Content on top is white. Consumers that want a glass surface (e.g. qdnapro-emoji-sheet) opt in with variant="glass". */ .qdnapro-bottom-sheet.bs-variant-glass .bs-panel { background: rgba(38, 38, 44, 0.72); backdrop-filter: blur(30px) saturate(160%); -webkit-backdrop-filter: blur(30px) saturate(160%); color: #fff; box-shadow: 0 -10px 34px rgba(0, 0, 0, 0.28); } .qdnapro-bottom-sheet.bs-variant-glass .bs-grab { background: var(--c-white-45); } .qdnapro-bottom-sheet.bs-variant-glass .bs-title { color: #fff; } .qdnapro-bottom-sheet.bs-variant-glass .bs-subtitle { color: var(--c-white-45); } /* Solid fallback where backdrop-filter is unsupported (old WebViews). */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .qdnapro-bottom-sheet.bs-variant-glass .bs-panel { background: #26262c; } } /* Reading variant — for text-heavy content (news items, briefings, questionnaire previews). Orthogonal to purple/glass: only the panel breathing-room + loose-text size change, the surface colours stay the base white card. [Kim 13.07.2026] Roomier horizontal panel padding (16px vs the base 8px, which is tuned for button-row sheets and stays unchanged). */ .qdnapro-bottom-sheet.bs-variant-reading .bs-panel { --bs-pad-x: 16px; padding: 4px var(--bs-pad-x) 0; } /* Body stays edge-to-edge inside that roomier panel (no horizontal padding) and runs to the bottom edge (matches the global base, kept explicit for clarity). */ .qdnapro-bottom-sheet.bs-variant-reading .bs-body { padding-left: 0; padding-right: 0; padding-bottom: 0; } /* 16px is the loose-text reading size, applied ONLY to text that opts in with the .bs-text wrapper — deliberately NOT to every .bs-body child. WYSIWYG briefing HTML brings its own sizes from the editor and must never be forced to 16px, so it is left untouched (it carries no .bs-text). [Kim 13.07.2026] */ .qdnapro-bottom-sheet.bs-variant-reading .bs-body .bs-text { font-size: 16px; line-height: 1.5; } /* Dialog variant — ALWAYS purple: a purple illustrated dialog (illustration + bold white title + white body text + optional consumer body content + a flexible footer). Serves both the destructive confirm (reset-units) AND a blocking notice (finish audit with mandatory units still open). `variant="confirm"` is an alias → same .bs-variant-dialog class. Composed from qdnapro-illustration + qdnapro-button using its own on-purple / on-purple-solid TYPES (see _button.scss) — layout only, no bespoke colour overrides. [Kim 15.07.2026] */ .qdnapro-bottom-sheet.bs-variant-dialog .bs-panel { background: var(--c-purple-500); } .qdnapro-bottom-sheet.bs-variant-dialog .bs-grab { background: var(--c-white-45); } .qdnapro-bottom-sheet .bs-body.bs-dialog { align-items: center; text-align: center; gap: 0; padding-top: 8px; } /* Gap illustration → title. Target the TAG, not .bs-dialog-illustration: qdnapro-illustration wipes its own className on render (this.className = …), so a class hook is dead by the time it paints and the gap collapsed to 0 ("cramped"). [Kim 15.07.2026] */ .qdnapro-bottom-sheet .bs-body.bs-dialog > qdnapro-illustration { display: block; margin: 0 auto 20px; } /* Full-bleed hero image (`image` attr), the alternative to the centered illustration. It MUST reach the panel edges: the celebration illustrations have their own purple background baked in, matching the dialog surface, so the artwork flows into the panel and the edge of its shape is invisible. Any padding turns that edge into a seam. The inline margins cancel the panel's own --bs-pad-x (never a hardcoded number: the reading variant raises that padding to 16px, and a fixed -8px would then leave the image 8px short on each side). The negative top margin eats most of the handle-zone's 24px breathing room so the image sits just under the grab handle. The panel's 32px top rounding is not clipped away: the artwork's own corners are transparent, so nothing pokes out. An opaque image WOULD need clipping here. [Kim 31.07.2026] */ .qdnapro-bottom-sheet .bs-body.bs-dialog > .bs-dialog-image { display: block; align-self: stretch; width: calc(100% + 2 * var(--bs-pad-x)); margin: -24px calc(-1 * var(--bs-pad-x)) 4px; } /* `centered` — wide-screen modifier: phone keeps the bottom sheet, tablet gets a centered dialog, from the same element. Below 768px this block does not exist, so a phone is untouched. 768px is the breakpoint the PWA documents module already uses for its tablet layout, not a new number. [Kim 31.07.2026] Centering is done with auto inline margins and a `bottom` offset, deliberately NOT with transform: the swipe-to-dismiss handler writes `panel.style.transform = translateY(...)` during a drag and clears it on release, so anything parked in transform would be wiped mid-gesture. This way the open/close slide and the drag keep working exactly as they do on a phone — dragging the dialog down still closes it. */ @media (min-width: 768px) { .qdnapro-bottom-sheet.bs-centered .bs-panel { max-width: 420px; margin-inline: auto; bottom: 7vh; border-radius: 32px; /* Shadow points outward on all sides now that it floats, instead of the upward-only shadow of a panel glued to the bottom edge. */ box-shadow: 0 18px 50px rgba(0, 0, 0, 0.24); max-height: 80%; } } .qdnapro-bottom-sheet .bs-dialog-title { font-size: 22px; font-weight: 700; line-height: 1.3; color: var(--c-text-on-action); } .qdnapro-bottom-sheet .bs-dialog-text { font-size: 15px; line-height: 1.6; color: var(--c-white-70); margin-top: 12px; max-width: 320px; } /* Consumer body content (stat rows, a notice line, etc.) sits below the illustration/ title/text. The dialog body centers its built-ins; this wrapper stretches full-width and left-aligns so custom rows aren't shrink-wrapped or centered. [Kim 15.07.2026] */ .qdnapro-bottom-sheet .bs-body.bs-dialog > .bs-dialog-content { align-self: stretch; width: 100%; text-align: left; margin-top: 20px; } .qdnapro-bottom-sheet .bs-dialog-footer { display: flex; gap: 12px; flex-shrink: 0; /* The footer sits OUTSIDE .bs-body, so it doesn't inherit the body's bottom breathing room — give it the same 24px + safe-area so the buttons don't glue to the panel edge. [Kim 15.07.2026] */ padding: 20px 0 calc(24px + env(safe-area-inset-bottom, 0px)); } .qdnapro-bottom-sheet .bs-dialog-footer qdnapro-button { flex: 1; } /* The dialog variant is always-purple; every OTHER variant keeps the base white card. Combining dialog with purple/glass/reading is not supported — variant is a single value (same limitation the reading variant already has). */ /* ── Top placement (placement="top") ───────────────────────────────────────────── The SAME sheet, hinged on the TOP edge: a quick, low-commitment options menu that drops down from under the header its trigger sits in (Outlook's calendar view- switcher is the reference). A bottom sheet is the intrusive one that takes over the screen; this is the light one for a handful of options. [Kim 29.07.2026] ONLY geometry + direction flip here — the surface variants (purple / glass / reading) are untouched and combine freely. Horizontal padding is deliberately left to the base (8px) or the reading variant (16px); only the vertical padding changes, because the grab-handle moved out of the top. --bs-top is set inline by _applyTopOffset(): the `anchor` element's bottom edge, or the literal `offset-top`. Absent → hang just below the notch. */ .qdnapro-bottom-sheet.bs-placement-top .bs-panel { top: var(--bs-top, env(safe-area-inset-top, 0px)); bottom: auto; /* Height follows the content; this cap only bites on a long list (and gives back whatever the header above already took). */ max-height: calc(86% - var(--bs-top, 0px)); /* Square, NOT rounded — the Outlook reference: the top sheet runs the panel straight into the header it hangs from, no corner radius at all. This is the DEFAULT for the top sheet (not an attribute): it has no other consumers yet than the two agenda menus, and flush corners are the intended look. The bottom sheet's own rounding (32px 32px 0 0, above) is untouched. [Kim 29.07.2026] */ border-radius: 0; /* Shadow falls DOWNWARD, away from the edge it hangs on. */ box-shadow: 0 10px 34px rgba(0, 0, 0, 0.16); /* Parked behind its own edge while closed (base sheet uses +100%). */ transform: translateY(-100%); padding-top: 16px; } .qdnapro-bottom-sheet.bs-placement-top.is-open .bs-panel { transform: translateY(0); } /* The scrim must start where the panel starts, NOT cover the whole screen (the base .bs-scrim above is inset:0 for the bottom sheet, which pins the scrim under the full viewport including any header the sheet hangs from). Fix lives HERE, at the source, rather than the consumer reaching for a z-index war it can't win: a header living inside its own stacking-context ancestor can never out-stack a scrim portalled straight onto , no matter what z-index it's given. Starting the scrim itself at --bs-top means the header simply falls OUTSIDE the dimmed area — no z-index needed anywhere. Same fallback chain as the panel's own `top` above. Consequence: a tap on the header no longer closes the sheet (it's outside the scrim) — intended for this pattern, the header stays usable; scrim-tap, Esc and the handle remain the ways to dismiss. [Kim 29.07.2026] */ .qdnapro-bottom-sheet.bs-placement-top .bs-scrim { top: var(--bs-top, env(safe-area-inset-top, 0px)); } /* Come out from UNDER the header, never OVER it (Kim 29.07.2026: "voelt veel natuurlijker"). The panel opens by sliding down from translateY(-100%), which parks it one panel-height ABOVE its own top edge — straight on top of the header it is supposed to hang under, and it paints there because the sheet sits on . Clipping the HOST at --bs-top kills that overlap for good: the host is already `position: fixed; inset: 0`, so its box IS the viewport and this clip is in viewport coordinates, which means NOTHING about the panel's or scrim's own geometry has to change. It also fixes the same overlap while DRAGGING the sheet closed by hand, which a reveal-animation on the panel alone would not. The scrim rule above stays as a belt-and-braces: if clip-path ever fails, the header still is not dimmed. */ .qdnapro-bottom-sheet.bs-placement-top { clip-path: inset(var(--bs-top, env(safe-area-inset-top, 0px)) 0 0 0); } /* Drop the panel's own compositing hint for top placement. `will-change: transform` promotes it to its own GPU layer, and a composited layer is exactly the case where iOS WKWebView has historically escaped an ancestor's clip-path — which would bring the overlap right back on the one platform that matters most here. The slide is a single short transform on a small panel, so it does not need the hint. */ .qdnapro-bottom-sheet.bs-placement-top .bs-panel { will-change: auto; } /* Grab-handle to the BOTTOM of the panel via flex order ONLY — the DOM stays as rendered, so render() and the pointer-drag binding remain shared with the bottom sheet. Every other panel child keeps order:0, hence its DOM order (header, body, and the dialog footer if there is one). */ .qdnapro-bottom-sheet.bs-placement-top .bs-handle-zone { order: 9; padding: 16px 0 12px; } /* No home-indicator to clear up here — the handle-zone underneath is the breathing room, so drop the base's 24px + safe-area-inset-bottom. */ .qdnapro-bottom-sheet.bs-placement-top .bs-body { padding-bottom: 0; } /* ── no-handle (boolean attr) ───────────────────────────────────────────────────── Hides the grab handle entirely — Outlook has none on its calendar quick menus, first requested for the agenda top sheets. Kept as a CLASS on the host (same pattern as bs-placement-top / bs-variant-purple), and the handle-zone element stays in the DOM (display:none only): the pointer-drag listener binds to .bs-handle-zone in the JS and would throw on null if it were removed. [Kim 29.07.2026] */ .qdnapro-bottom-sheet.bs-no-handle .bs-handle-zone { display: none; } /* The handle-zone doubled as this edge's breathing room — hiding it would otherwise glue the adjacent content straight to the panel edge, so give the space back: - bottom placement: the zone sits ABOVE the header/body (panel's top edge) → pad the panel's top. - top placement: the zone sits BELOW the body (flex order:9 above, panel's bottom edge) → pad the body's bottom, so the last option row keeps its breathing room. */ .qdnapro-bottom-sheet.bs-no-handle:not(.bs-placement-top) .bs-panel { padding-top: 16px; } .qdnapro-bottom-sheet.bs-placement-top.bs-no-handle .bs-body { padding-bottom: 16px; } /* Explainer "bullet" row: [icon/badge] + white text, used inside .bs-dialog-content for things like "what does this badge mean" (PWA documents badge-info dialog, 28.07.2026). NOT a new component — just a consumer-side row wrapping whatever icon the consumer passes (e.g. ) plus a text node. SAME class name + rule as the popover's dialog-arrow counterpart (see _popover.scss) so a sheet on phone and a popover on tablet render byte-identical content. The icon aligns to the TOP of the text block (flex-start) rather than a strict typographic baseline — the icon here is a status-badge pill, not a glyph, so there is no single baseline to hook into; top-aligning is the closest match to "icon next to the first text line" when the text can wrap to 2 lines. */ .qdnapro-bottom-sheet .bs-dialog-content .bs-dialog-bullet { display: flex; align-items: flex-start; gap: 12px; color: var(--c-white-90, rgba(255, 255, 255, 0.9)); font-size: 14px; line-height: 1.5; text-align: left; } .qdnapro-bottom-sheet .bs-dialog-content .bs-dialog-bullet + .bs-dialog-bullet { margin-top: 14px; } .qdnapro-bottom-sheet .bs-dialog-content .bs-dialog-bullet > qdnapro-status-badge { flex-shrink: 0; } .qdnapro-bottom-sheet-button { display: flex; align-items: center; width: 100%; box-sizing: border-box; border: none; border-top: none; border-radius: var(--r-3); padding: 13px 16px; font-family: var(--theme-font-family, "Inter", sans-serif); font-size: 16px; font-weight: 400; line-height: 1.2; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 0.14s ease, transform 0.1s ease; } .qdnapro-bottom-sheet-button .bsb-icon { display: inline-flex; align-items: center; flex-shrink: 0; margin-right: 14px; } .qdnapro-bottom-sheet-button .bsb-label { flex: 1; min-width: 0; } .qdnapro-bottom-sheet-button .bsb-check { display: none; align-items: center; flex-shrink: 0; margin-left: 12px; } .qdnapro-bottom-sheet-button.bsb-active .bsb-check { display: inline-flex; } .qdnapro-bottom-sheet-button .bsb-value { flex-shrink: 1; min-width: 0; max-width: 55%; margin-left: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; color: var(--c-text-muted); } .qdnapro-bottom-sheet-button.bsb-on-purple .bsb-value { color: var(--c-white-70); } .qdnapro-bottom-sheet-button.bsb-disabled .bsb-value { color: inherit; } .qdnapro-bottom-sheet-button.bsb-tile .bsb-value { display: none; } .qdnapro-bottom-sheet-button .bsb-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .qdnapro-bottom-sheet-button .bsb-text .bsb-label { flex: none; } .qdnapro-bottom-sheet-button .bsb-sub { font-size: 13px; line-height: 1.3; color: var(--c-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .qdnapro-bottom-sheet-button.bsb-has-sub:not(.bsb-tile) { align-items: flex-start; } .qdnapro-bottom-sheet-button.bsb-has-sub:not(.bsb-tile) .bsb-icon { margin-top: -2px; } .qdnapro-bottom-sheet-button.bsb-on-white { background: transparent; color: var(--c-purple-700); border-radius: 0; } .qdnapro-bottom-sheet-button.bsb-on-white:hover:not(.bsb-disabled):not(.bsb-active) { background: var(--c-grey-50); border-radius: var(--r-3); } .qdnapro-bottom-sheet-button.bsb-on-white.is-pressed { background: var(--c-grey-100); border-radius: var(--r-3); transform: scale(0.985); } .qdnapro-bottom-sheet-button.bsb-on-white.bsb-active { background: transparent; color: var(--c-purple-700); } .qdnapro-bottom-sheet-button.bsb-on-white.bsb-disabled { background: transparent; color: var(--c-grey-300); cursor: default; } .qdnapro-bottom-sheet-button.bsb-on-purple { background: transparent; color: var(--c-text-on-action); border-radius: 0; } .qdnapro-bottom-sheet-button.bsb-on-purple:hover:not(.bsb-disabled):not(.bsb-active) { background: var(--c-white-14); border-radius: var(--r-3); } .qdnapro-bottom-sheet-button.bsb-on-purple.is-pressed { background: var(--c-white-22); border-radius: var(--r-3); transform: scale(0.985); } .qdnapro-bottom-sheet-button.bsb-on-purple.bsb-active { background: transparent; color: var(--c-text-on-action); } .qdnapro-bottom-sheet-button.bsb-on-purple.bsb-disabled { background: transparent; color: var(--c-white-45); cursor: default; } .qdnapro-bottom-sheet-button.bsb-tile { flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 14px 8px; flex: 1; border-radius: var(--r-3); } .qdnapro-bottom-sheet-button.bsb-tile .bsb-icon { margin-right: 0; } .qdnapro-bottom-sheet-button.bsb-tile .bsb-label { flex: none; font-size: 12px; text-align: center; white-space: nowrap; } .qdnapro-bottom-sheet-button.bsb-tile .bsb-text { flex: none; align-items: center; gap: 1px; max-width: 100%; } .qdnapro-bottom-sheet-button.bsb-tile .bsb-sub { font-size: 11px; line-height: 1.25; max-width: 100%; text-align: center; } .qdnapro-bottom-sheet-button.bsb-tile .bsb-check, .qdnapro-bottom-sheet-button.bsb-tile.bsb-active .bsb-check { display: none; } .qdnapro-bottom-sheet-button-group.bsbg-tiles { display: flex; flex-direction: row; gap: 6px; } .qdnapro-bottom-sheet-button-group.bsbg-tiles .qdnapro-bottom-sheet-button { border-radius: var(--r-3); padding: 14px 8px; } .qdnapro-bottom-sheet-button-group.bsbg-tiles.bsbg-on-white .bsb-tile { background: var(--c-bg-card); color: var(--c-purple-700); } .qdnapro-bottom-sheet-button-group.bsbg-tiles.bsbg-on-white .bsb-tile:hover:not(.bsb-disabled) { background: var(--c-grey-100); } .qdnapro-bottom-sheet-button-group.bsbg-tiles.bsbg-on-white .bsb-tile.is-pressed { background: var(--c-grey-100); transform: scale(0.97); } .qdnapro-bottom-sheet-button-group.bsbg-tiles.bsbg-on-purple .bsb-tile { background: var(--c-white-22); color: var(--c-text-on-action); } .qdnapro-bottom-sheet-button-group.bsbg-tiles.bsbg-on-purple .bsb-tile:hover:not(.bsb-disabled) { background: var(--c-white-28); } .qdnapro-bottom-sheet-button-group.bsbg-tiles.bsbg-on-purple .bsb-tile.is-pressed { background: var(--c-white-28); transform: scale(0.97); } .qdnapro-bottom-sheet-button.bsb-destructive { background: var(--c-signal-red-soft); color: var(--c-tag-critical-text); margin-top: 8px; } .qdnapro-bottom-sheet-button.bsb-destructive:hover:not(.bsb-disabled) { background: var(--c-signal-red-bg); } .qdnapro-bottom-sheet-button.bsb-destructive.is-pressed { background: var(--c-signal-red-bg); transform: scale(0.985); } .qdnapro-bottom-sheet-button.bsb-destructive.bsb-disabled { background: var(--c-grey-50); color: var(--c-grey-400); cursor: default; } .qdnapro-bottom-sheet-button.bsb-warning { background: var(--c-warning-bright-bg); color: var(--c-warning-bright-text); margin-top: 8px; } .qdnapro-bottom-sheet-button.bsb-warning:hover:not(.bsb-disabled) { background: var(--c-signal-yellow-bg); } .qdnapro-bottom-sheet-button.bsb-warning.is-pressed { background: var(--c-signal-yellow-bg); transform: scale(0.985); } .qdnapro-bottom-sheet-button.bsb-warning.bsb-disabled { background: var(--c-grey-50); color: var(--c-grey-400); cursor: default; } .qdnapro-bottom-sheet-button.bsb-success { background: var(--c-signal-green-100); color: var(--c-signal-green-text); margin-top: 8px; } .qdnapro-bottom-sheet-button.bsb-success:hover:not(.bsb-disabled) { background: var(--c-signal-green-bg); } .qdnapro-bottom-sheet-button.bsb-success.is-pressed { background: var(--c-signal-green-bg); transform: scale(0.985); } .qdnapro-bottom-sheet-button.bsb-success.bsb-disabled { background: var(--c-grey-50); color: var(--c-grey-400); cursor: default; } .qdnapro-bottom-sheet-button-group { display: block; box-sizing: border-box; border-radius: var(--r-3); padding: 6px; } .qdnapro-bottom-sheet-button-group.bsbg-on-white { background: var(--c-grey-50); } .qdnapro-bottom-sheet-button-group.bsbg-on-purple { background: var(--c-white-14); } .qdnapro-bottom-sheet-button-group .qdnapro-bottom-sheet-button { border-radius: var(--r-row); padding: 11px 16px; border-top: none; } .qdnapro-bottom-sheet-button-group .qdnapro-bottom-sheet-button + .qdnapro-bottom-sheet-button { margin-top: 2px; border-top: none; } .qdnapro-bottom-sheet-button-group .qdnapro-bottom-sheet-button.bsb-on-white + .qdnapro-bottom-sheet-button.bsb-on-white, .qdnapro-bottom-sheet-button-group .qdnapro-bottom-sheet-button.bsb-on-purple + .qdnapro-bottom-sheet-button.bsb-on-purple { border-top: none; } .qdnapro-bottom-sheet-button-group .qdnapro-bottom-sheet-button:not(.is-pressed):not(:hover) { background: transparent; } .qdnapro-bottom-sheet-button-group.bsbg-on-white .qdnapro-bottom-sheet-button.bsb-on-white:hover:not(.bsb-disabled):not(.bsb-active) { background: var(--c-grey-100); } .qdnapro-bottom-sheet-button-group.bsbg-on-white .qdnapro-bottom-sheet-button.bsb-on-white.is-pressed { background: var(--c-grey-200); } .qdnapro-bottom-sheet-button-group.bsbg-on-purple .qdnapro-bottom-sheet-button { color: var(--c-text-on-action); } .qdnapro-bottom-sheet-button-group.bsbg-on-purple .qdnapro-bottom-sheet-button.bsb-active { background: transparent; color: var(--c-text-on-action); } .qdnapro-bottom-sheet-button-group.bsbg-on-purple .qdnapro-bottom-sheet-button.bsb-disabled { color: var(--c-white-45); cursor: default; } .qdnapro-bottom-sheet-button.bsb-on-purple .bsb-sub, .qdnapro-bottom-sheet-button-group.bsbg-on-purple .qdnapro-bottom-sheet-button .bsb-sub { color: var(--c-white-70); } .qdnapro-bottom-sheet-button.bsb-warning .bsb-sub, .qdnapro-bottom-sheet-button.bsb-destructive .bsb-sub, .qdnapro-bottom-sheet-button.bsb-success .bsb-sub { color: currentColor; opacity: 0.78; } .qdnapro-bottom-sheet-button.bsb-disabled .bsb-sub { color: inherit; opacity: 1; } .qdnapro-bottom-sheet-button.bsb-on-white.bsb-disabled .bsb-sub { color: var(--c-grey-300); } .qdnapro-bottom-sheet-button.bsb-on-purple.bsb-disabled .bsb-sub, .qdnapro-bottom-sheet-button-group.bsbg-on-purple .qdnapro-bottom-sheet-button.bsb-disabled .bsb-sub { color: var(--c-white-45); } @keyframes bsb-check-pop { 0% { transform: scale(0.6) rotate(0deg); } 20% { transform: scale(1.2) rotate(-5deg); } 44% { transform: scale(0.92) rotate(3deg); } 64% { transform: scale(1.06) rotate(-1deg); } 80% { transform: scale(0.97) rotate(0deg); } 100% { transform: scale(1) rotate(0deg); } } @keyframes bsb-check-draw { 0% { stroke-dashoffset: 22; } 62% { stroke-dashoffset: -1; } 80% { stroke-dashoffset: 0.7; } 100% { stroke-dashoffset: 0; } } .qdnapro-bottom-sheet-button .bsb-check-path { stroke-dasharray: 22; stroke-dashoffset: 22; } .qdnapro-bottom-sheet-button.bsb-active .bsb-check { animation: bsb-check-pop 0.52s cubic-bezier(0.34, 1.56, 0.5, 1) forwards; } .qdnapro-bottom-sheet-button.bsb-active .bsb-check-path { animation: bsb-check-draw 0.38s cubic-bezier(0.22, 1, 0.36, 1) 0.04s forwards; } .qdnapro-popover { position: fixed; z-index: 1001; width: 280px; padding: 6px; box-sizing: border-box; border-radius: var(--r-card); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22); font-family: var(--theme-font-family, "Inter", sans-serif); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.15s ease, visibility 0.15s ease; } .qdnapro-popover.is-open { opacity: 1; visibility: visible; pointer-events: auto; } qdnapro-popover:not(:defined) { display: none; } .qdnapro-popover::before { content: ""; position: absolute; width: 0; height: 0; border: 9px solid transparent; left: var(--pop-arrow-x, 50%); transform: translateX(-50%); } .qdnapro-popover.pop-below::before { top: -18px; } .qdnapro-popover.pop-above::before { bottom: -18px; } .qdnapro-popover.pop-variant-white { background: var(--c-bg-card); } .qdnapro-popover.pop-variant-white::before { border-bottom-color: var(--c-bg-card); } .qdnapro-popover.pop-variant-white.pop-above::before { border-top-color: var(--c-bg-card); border-bottom-color: transparent; } .qdnapro-popover.pop-variant-purple { background: var(--c-purple-500); } .qdnapro-popover.pop-variant-purple::before { border-bottom-color: var(--c-purple-500); } .qdnapro-popover.pop-variant-purple.pop-above::before { border-top-color: var(--c-purple-500); border-bottom-color: transparent; } .qdnapro-popover.pop-bare { width: auto; padding: 0; background: transparent; border: none; box-shadow: none; } .qdnapro-popover.pop-bare::before { display: none; } .qdnapro-popover .pop-body { display: flex; flex-direction: column; gap: 6px; } .qdnapro-popover .pop-dialog-body { align-items: center; text-align: center; gap: 0; } .qdnapro-popover .pop-dialog-body > qdnapro-illustration { display: block; margin: 0 auto 16px; max-width: 100%; } .qdnapro-popover .pop-dialog-title { font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--c-text-on-action); } .qdnapro-popover .pop-dialog-text { font-size: 14px; line-height: 1.6; color: var(--c-white-70); margin-top: 10px; } .qdnapro-popover .pop-dialog-body > .pop-dialog-content { align-self: stretch; width: 100%; text-align: left; margin-top: 16px; } .qdnapro-popover .pop-dialog-footer qdnapro-button { flex: 1; } .qdnapro-popover .pop-dialog-content .bs-dialog-bullet { display: flex; align-items: flex-start; gap: 12px; color: var(--c-white-90, rgba(255, 255, 255, 0.9)); font-size: 14px; line-height: 1.5; text-align: left; } .qdnapro-popover .pop-dialog-content .bs-dialog-bullet + .bs-dialog-bullet { margin-top: 14px; } .qdnapro-popover .pop-dialog-content .bs-dialog-bullet > qdnapro-status-badge { flex-shrink: 0; } .qdnapro-popover.pop-variant-dialog { top: 0; right: 0; bottom: 0; left: 0; width: auto; height: auto; padding: 0; background: transparent; border-radius: 0; box-shadow: none; display: flex; align-items: center; justify-content: center; } .qdnapro-popover.pop-variant-dialog::before { display: none; } .qdnapro-popover.pop-variant-dialog .pop-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: 0; } .qdnapro-popover.pop-variant-dialog .pop-panel { position: relative; z-index: 1; box-sizing: border-box; width: min(94vw, 702px); max-height: 86vh; overflow-y: auto; padding: 28px 24px 24px; border-radius: var(--r-card); background: var(--c-purple-500); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22); transform: scale(0.96); transition: transform 0.18s ease; } .qdnapro-popover.pop-variant-dialog.is-open .pop-panel { transform: scale(1); } .qdnapro-popover.pop-variant-dialog .pop-close { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; padding: 0; border: none; border-radius: 50%; background: var(--c-purple-700); color: #ffffff; display: flex; align-items: center; justify-content: center; cursor: pointer; } .qdnapro-popover.pop-variant-dialog .pop-dialog-body { padding-top: 4px; } .qdnapro-popover.pop-variant-dialog .pop-dialog-illustration { margin-bottom: 20px; } .qdnapro-popover.pop-variant-dialog .pop-dialog-footer { display: flex; gap: 12px; margin-top: 24px; } .qdnapro-popover.pop-dialog-light .pop-panel { background: var(--c-bg-card, #ffffff); } .qdnapro-popover.pop-dialog-light .pop-dialog-title { color: var(--c-text-heading, #1a1f4d); } .qdnapro-popover.pop-dialog-light .pop-dialog-text { color: var(--c-text-muted, #6e7280); } .qdnapro-popover.pop-dialog-light .pop-close { background: var(--c-bg-subtle-hover, #f5f6f8); color: var(--c-text-heading, #1a1f4d); } .qdnapro-popover.pop-variant-dialog .pop-header { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; margin-bottom: 16px; } .qdnapro-popover.pop-variant-dialog .pop-header > *:first-child { flex: 1 1 auto; min-width: 0; } .qdnapro-popover.pop-variant-dialog.pop-has-header .pop-close { position: static; top: auto; right: auto; flex: 0 0 auto; width: 44px; height: 44px; } .qdnapro-popover.pop-variant-dialog.pop-has-header .pop-panel { display: flex; flex-direction: column; overflow: hidden; padding-top: 16px; } .qdnapro-popover.pop-variant-dialog.pop-has-header .pop-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; } .qdnapro-popover.pop-variant-dialog.pop-size-medium .pop-panel { width: min(92vw, 520px); } .qdnapro-popover.pop-variant-dialog-arrow { width: 340px; background: var(--c-purple-500); padding: 20px 20px 18px; } .qdnapro-popover.pop-variant-dialog-arrow::before { border-bottom-color: var(--c-purple-500); } .qdnapro-popover.pop-variant-dialog-arrow.pop-above::before { border-top-color: var(--c-purple-500); border-bottom-color: transparent; } .qdnapro-popover.pop-variant-dialog-arrow .pop-dialog-footer { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; } .qdnapro-breadcrumb { display: inline-flex; align-items: center; gap: 6px; font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif; color: #6e7280; } .qdnapro-breadcrumb > * { font-size: 16px; font-weight: 400; color: #6e7280; text-decoration: none; } .qdnapro-breadcrumb > a:hover { color: #40499a; text-decoration: underline; } .qdnapro-breadcrumb .breadcrumb-current { color: #40499a; font-weight: 500; } .qdnapro-breadcrumb .breadcrumb-sep { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; color: #6e7280; flex-shrink: 0; } .qdnapro-breadcrumb .breadcrumb-sep svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } [data-theme=dark] .qdnapro-breadcrumb, [data-theme=dark] .qdnapro-breadcrumb > * { color: #a6aab3; } [data-theme=dark] .qdnapro-breadcrumb > a:hover { color: #c0c5ff; } [data-theme=dark] .qdnapro-breadcrumb .breadcrumb-current { color: #c0c5ff; } [data-theme=dark] .qdnapro-breadcrumb .breadcrumb-sep { color: #a6aab3; } .qdnapro-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; border: 1px solid transparent; border-radius: 8px; background: transparent; --btn-focus-ring: #40499a; --btn-focus-glow: rgba(70, 82, 243, 0.25); font-family: inter, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; text-decoration: none; white-space: nowrap; user-select: none; cursor: pointer; transition: background-color 120ms ease-out, border-color 120ms ease-out, color 120ms ease-out; } .qdnapro-button > qdnapro-number-indicator-badge[data-button-badge] { pointer-events: none; } .qdnapro-button.button-size-big { min-height: 56px; padding: 12px 16px; } .qdnapro-button.button-size-big.button-icon-only { width: 56px; min-width: 56px; padding: 0; } .qdnapro-button.button-size-small { min-height: 40px; padding: 8px 12px; } .qdnapro-button.button-size-small.button-icon-only { width: 40px; min-width: 40px; padding: 0; } .qdnapro-button.button-size-compact { min-height: 28px; padding: 4px 10px; gap: 6px; font-size: 13px; line-height: 18px; border-radius: 8px; } .qdnapro-button.button-size-compact.button-icon-only { width: 28px; min-width: 28px; padding: 0; } .qdnapro-button.button-size-micro { min-height: 24px; padding: 3px 10px; gap: 4px; font-size: 11px; font-weight: 700; line-height: 16px; border-radius: 6px; } .qdnapro-button.button-size-micro.button-icon-only { width: 24px; min-width: 24px; padding: 0; } .qdnapro-button.button-size-touch { min-height: 44px; padding: 10px 14px; } .qdnapro-button.button-size-touch.button-icon-only { width: 44px; min-width: 44px; padding: 0; } .qdnapro-button.button-size-touch-lg { min-height: 48px; padding: 10px 16px; } .qdnapro-button.button-size-touch-lg.button-icon-only { width: 48px; min-width: 48px; padding: 0; } .qdnapro-button:focus { outline: none; } .qdnapro-button:focus-visible, .qdnapro-button.force-focus { outline: 2px solid var(--btn-focus-ring); outline-offset: var(--btn-focus-offset, -2px); box-shadow: 0 0 0 4px var(--btn-focus-glow); } .qdnapro-button.button-disabled:focus-visible, .qdnapro-button.button-disabled.force-focus { outline: none; box-shadow: none; } .qdnapro-button.button-primary-purple { background: #40499a; color: #ffffff; --btn-focus-ring: #252b5e; --btn-focus-glow: rgba(70, 82, 243, 0.40); } .qdnapro-button.button-primary-purple:focus-visible, .qdnapro-button.button-primary-purple.force-focus { outline: none; box-shadow: 0 0 0 2px var(--btn-focus-ring), 0 0 0 6px var(--btn-focus-glow); } .qdnapro-button.button-primary-purple:hover:not(.button-disabled) { background: #333a7b; } .qdnapro-button.button-primary-purple:active:not(.button-disabled) { background: #252b5e; } .qdnapro-button.button-primary-orange { background: #ef8e02; color: #ffffff; --btn-focus-ring: #945800; --btn-focus-glow: rgba(239, 142, 2, 0.45); } .qdnapro-button.button-primary-orange:focus-visible, .qdnapro-button.button-primary-orange.force-focus { outline: none; box-shadow: 0 0 0 2px var(--btn-focus-ring), 0 0 0 6px var(--btn-focus-glow); } .qdnapro-button.button-primary-orange:hover:not(.button-disabled) { background: #bf7202; } .qdnapro-button.button-primary-orange:active:not(.button-disabled) { background: #945800; } .qdnapro-button.button-subtle { background: transparent; color: #0b0b0d; } .qdnapro-button.button-subtle:hover:not(.button-disabled) { background: #f0f1f2; } .qdnapro-button.button-subtle:active:not(.button-disabled) { background: #e4e6e8; } .qdnapro-button.button-subtle-purple-bg { background: transparent; color: #40499a; } .qdnapro-button.button-subtle-purple-bg:hover:not(.button-disabled) { background: #daddf2; } .qdnapro-button.button-subtle-purple-bg:active:not(.button-disabled) { background: #c7cce8; } .qdnapro-button.button-secondary { background: #f0f1f2; color: #0b0b0d; } .qdnapro-button.button-secondary:hover:not(.button-disabled) { background: #c4c7cc; } .qdnapro-button.button-secondary:active:not(.button-disabled) { background: #a7abb2; } .qdnapro-button.button-secondary.button-active { background: #e6e9ff; color: #40499a; } .qdnapro-button.button-secondary.button-active:hover:not(.button-disabled) { background: #daddf2; } .qdnapro-button.button-secondary.button-active:active:not(.button-disabled) { background: #c7cce8; } .qdnapro-button.button-secondary-outline { background: #e6e9ff; color: #40499a; border-color: #40499a; } .qdnapro-button.button-secondary-outline:hover:not(.button-disabled) { background: #daddf2; } .qdnapro-button.button-secondary-outline:active:not(.button-disabled) { background: #c7cce8; } .qdnapro-button.button-secondary-purple { background: #e6e9ff; color: #40499a; } .qdnapro-button.button-secondary-purple:hover:not(.button-disabled) { background: #daddf2; } .qdnapro-button.button-secondary-purple:active:not(.button-disabled) { background: #c7cce8; } .qdnapro-button.button-secondary-white { background: #ffffff; color: #40499a; } .qdnapro-button.button-secondary-white:hover:not(.button-disabled) { background: #daddf2; } .qdnapro-button.button-secondary-white:active:not(.button-disabled) { background: #c7cce8; } .qdnapro-button.button-warning-red { background: #f0f1f2; color: #c65a5a; } .qdnapro-button.button-warning-red:hover:not(.button-disabled) { background: #c4c7cc; } .qdnapro-button.button-warning-red:active:not(.button-disabled) { background: #a7abb2; } .qdnapro-button.button-warning-red-white { background: #ffffff; color: #c65a5a; } .qdnapro-button.button-warning-red-white:hover:not(.button-disabled) { background: #fbeaea; } .qdnapro-button.button-warning-red-white:active:not(.button-disabled) { background: #f5d9d9; } .qdnapro-button.button-warning-red-tint { background: #fde8e8; color: #c94040; border-color: #e8b0b0; } .qdnapro-button.button-warning-red-tint:hover:not(.button-disabled) { background: #ffcccc; border-color: #c94040; } .qdnapro-button.button-warning-red-tint:active:not(.button-disabled) { background: #f7b8b8; } .qdnapro-button.button-warning-yellow-tint { background: #fff3cd; color: #9a6a10; border-color: #f0d060; } .qdnapro-button.button-warning-yellow-tint:hover:not(.button-disabled) { background: #fde8a0; border-color: #d0a820; } .qdnapro-button.button-warning-yellow-tint:active:not(.button-disabled) { background: #fbdf85; } .qdnapro-button.button-warning-red-subtle { background: transparent; color: #0b0b0d; } .qdnapro-button.button-warning-red-subtle:hover:not(.button-disabled) { background: #ffcccc; } .qdnapro-button.button-warning-red-subtle:active:not(.button-disabled) { background: #f7b8b8; } .qdnapro-button.button-warning-yellow-subtle { background: transparent; color: #0b0b0d; } .qdnapro-button.button-warning-yellow-subtle:hover:not(.button-disabled) { background: #fde8a0; } .qdnapro-button.button-warning-yellow-subtle:active:not(.button-disabled) { background: #fbdf85; } .qdnapro-button.button-glass { background: rgba(255, 255, 255, 0.18); color: #ffffff; border-color: rgba(255, 255, 255, 0.3); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .qdnapro-button.button-glass:hover:not(.button-disabled) { background: rgba(255, 255, 255, 0.3); border-color: rgba(255, 255, 255, 0.4); } .qdnapro-button.button-glass:active:not(.button-disabled) { background: rgba(255, 255, 255, 0.38); } /* on-purple / on-purple-solid — for a purple/dark surface (e.g. qdnapro-bottom-sheet's confirm variant), where the plain button-subtle's hardcoded dark text would be invisible and primary-purple itself would blend into a purple background. [Kim 14.07.2026] */ .qdnapro-button.button-on-purple { background: transparent; color: #ffffff; } .qdnapro-button.button-on-purple:hover:not(.button-disabled) { background: rgba(255, 255, 255, 0.14); } .qdnapro-button.button-on-purple:active:not(.button-disabled) { background: rgba(255, 255, 255, 0.14); } .qdnapro-button.button-on-purple-solid { background: #2a3268; color: #ffffff; } .qdnapro-button.button-on-purple-solid:hover:not(.button-disabled) { background: #333a7b; } .qdnapro-button.button-on-purple-solid:active:not(.button-disabled) { background: #2a3268; } .qdnapro-button.button-disabled { background: #f0f1f2 !important; color: #898e99 !important; border-color: transparent !important; cursor: not-allowed; pointer-events: none; } .qdnapro-button.button-subtle.button-disabled { background: transparent !important; } .qdnapro-button.button-subtle-purple-bg.button-disabled { background: transparent !important; color: #8c92c2 !important; } [data-bg-context=purple] .qdnapro-button.button-disabled { background: #daddf2 !important; } [data-theme=dark] .qdnapro-button.button-primary-purple { background: #3842c2; color: #ffffff; } [data-theme=dark] .qdnapro-button.button-primary-purple:hover:not(.button-disabled) { background: #2a3192; } [data-theme=dark] .qdnapro-button.button-primary-orange { background: #ef8e02; color: #ffffff; } [data-theme=dark] .qdnapro-button.button-primary-orange:hover:not(.button-disabled) { background: #f2a535; } [data-theme=dark] .qdnapro-button.button-subtle { background: transparent; color: #e1e3e6; } [data-theme=dark] .qdnapro-button.button-subtle:hover:not(.button-disabled) { background: #565b66; } [data-theme=dark] .qdnapro-button.button-subtle-purple-bg { background: transparent; color: #f0f1f2; } [data-theme=dark] .qdnapro-button.button-subtle-purple-bg:hover:not(.button-disabled) { background: #565b66; } [data-theme=dark] .qdnapro-button.button-secondary { background: #2e3036; color: #e1e3e6; } [data-theme=dark] .qdnapro-button.button-secondary:hover:not(.button-disabled) { background: #40444d; } [data-theme=dark] .qdnapro-button.button-secondary.button-active { background: #3a3555; color: #a5acff; } [data-theme=dark] .qdnapro-button.button-secondary.button-active:hover:not(.button-disabled) { background: #4c4767; } [data-theme=dark] .qdnapro-button.button-secondary-outline { background: transparent; color: #f0f1f2; border-color: #565b66; } [data-theme=dark] .qdnapro-button.button-secondary-outline:hover:not(.button-disabled) { background: #40444d; border-color: #666dae; } [data-theme=dark] .qdnapro-button.button-secondary-purple { background: #3a3555; color: #a5acff; } [data-theme=dark] .qdnapro-button.button-secondary-purple:hover:not(.button-disabled) { background: #4c4767; } [data-theme=dark] .qdnapro-button.button-secondary-white { background: #2e3036; color: #e1e3e6; } [data-theme=dark] .qdnapro-button.button-secondary-white:hover:not(.button-disabled) { background: #40444d; } [data-theme=dark] .qdnapro-button.button-warning-red-white { background: #2e3036; color: #ec8585; } [data-theme=dark] .qdnapro-button.button-warning-red-white:hover:not(.button-disabled) { background: #40444d; } [data-theme=dark] .qdnapro-button.button-disabled { background: #40444d !important; color: #6b7280 !important; } [data-theme=dark] .qdnapro-button.button-subtle.button-disabled, [data-theme=dark] .qdnapro-button.button-subtle-purple-bg.button-disabled { background: transparent !important; color: #6b7280 !important; } .qdnapro-button.button-pill { border-radius: 999px; padding-left: 24px; padding-right: 24px; } .qdnapro-button.button-pill.button-icon-only { border-radius: 50%; } .qdnapro-button.button-pill.button-size-small { padding-left: 20px; padding-right: 20px; } .qdnapro-button.button-pill.button-size-touch { padding-left: 20px; padding-right: 20px; } [data-theme=dark] .qdnapro-button:focus-visible, [data-theme=dark] .qdnapro-button.force-focus { outline-color: #a5acff; box-shadow: 0 0 0 4px rgba(70, 82, 243, 0.4); } qdnapro-calendar-service-button { display: block; width: 100%; box-sizing: border-box; } qdnapro-calendar-service-button *, qdnapro-calendar-service-button *::before, qdnapro-calendar-service-button *::after { box-sizing: border-box; } .qdnapro-calendar-service-button .csb-inner { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 1px solid var(--c-grey-100); border-radius: var(--r-2); background: var(--c-bg-card, #ffffff); cursor: pointer; text-align: left; font-family: inherit; outline: none; transition: background 150ms ease, border-color 150ms ease; } .qdnapro-calendar-service-button .csb-icon-tile { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: var(--r-1); background: var(--csb-tint, var(--c-grey-50)); color: var(--csb-accent, var(--c-grey-600)); } .qdnapro-calendar-service-button .csb-icon-tile qdnapro-icon { width: 20px; height: 20px; color: inherit; } .qdnapro-calendar-service-button .csb-label { font-size: 13.5px; font-weight: 500; color: var(--c-grey-950, #0b0b0d); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .qdnapro-calendar-service-button .csb-inner:hover { background: var(--c-bg-subtle-hover, #f0f1f2); border-color: var(--c-grey-200, #d1d5db); } .qdnapro-calendar-service-button .csb-inner:active { background: var(--c-action-08, rgba(70, 82, 243, 0.08)); } .qdnapro-calendar-service-button .csb-inner:focus-visible { box-shadow: 0 0 0 2px var(--c-purple-500, #40499a), 0 0 0 4px var(--c-action-25, rgba(70, 82, 243, 0.25)); } .qdnapro-calendar-service-button--google .csb-icon-tile { --csb-accent: #4285f4; --csb-tint: rgba(66, 133, 244, 0.12); } .qdnapro-calendar-service-button--outlook .csb-icon-tile { --csb-accent: #0072c6; --csb-tint: rgba(0, 114, 198, 0.12); } .qdnapro-calendar-service-button--apple .csb-icon-tile { --csb-accent: #1c1b29; --csb-tint: rgba(28, 27, 41, 0.08); } [data-theme=dark] .qdnapro-calendar-service-button .csb-inner { background: var(--c-grey-800, #2e3036); border-color: var(--c-grey-700, #40444d); } [data-theme=dark] .qdnapro-calendar-service-button .csb-label { color: var(--c-grey-100, #e7e9ec); } [data-theme=dark] .qdnapro-calendar-service-button .csb-inner:hover { background: var(--c-grey-700, #40444d); border-color: var(--c-grey-600, #565b66); } .qdnapro-celebration { display: block; position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .qdnapro-celebration .qdnapro-celebration-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .qdnapro-party-scene { display: block; } .qdnapro-party-scene .ps-scene { position: relative; width: 100%; border-radius: 22px; overflow: hidden; background: radial-gradient(70% 80% at 50% 62%, #4b54ad 0%, #3c4392 55%, #333a7b 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); } .qdnapro-party-scene .ps-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; -webkit-user-drag: none; } .qdnapro-party-scene .ps-guest { opacity: 0; transform: translateY(2.2%) scale(0.975); transform-origin: 50% 90%; transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); } .qdnapro-party-scene .ps-guest.is-here { opacity: 1; transform: none; } .qdnapro-party-scene .ps-controls { display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; margin-top: 14px; } .qdnapro-party-scene .ps-btn { position: relative; overflow: hidden; appearance: none; cursor: pointer; font-family: inherit; border: none; border-radius: 16px; padding: 16px 32px; min-width: 240px; background: #1d2044; color: #fff; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; box-shadow: 0 10px 26px -10px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.1); transition: transform 0.1s ease; } .qdnapro-party-scene .ps-btn:active { transform: scale(0.97); } .qdnapro-party-scene .ps-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: linear-gradient(90deg, #40499A 0%, #5560c8 55%, #ff9d4d 100%); z-index: 0; } .qdnapro-party-scene .ps-lbl { position: relative; z-index: 1; display: inline-block; white-space: nowrap; } .qdnapro-party-scene .ps-reset { appearance: none; cursor: pointer; font-family: inherit; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 14px; padding: 14px 20px; background: transparent; color: #eef0ff; font-size: 14px; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity 0.2s ease, border-color 0.16s; } .qdnapro-party-scene .ps-reset.is-shown { opacity: 1; pointer-events: auto; } .qdnapro-party-scene .ps-reset:hover { border-color: #eb5757; color: #ff9c9c; } .qdnapro-party-scene .ps-count { width: 100%; text-align: center; font-size: 13px; color: #9aa0cf; font-variant-numeric: tabular-nums; } .qdnapro-party-scene .ps-count b { color: #eef0ff; font-weight: 700; } .qdnapro-score-count { display: block; text-align: center; } .qdnapro-score-count .sc-num { font-size: 56px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: #fff; font-variant-numeric: tabular-nums; display: inline-block; } .qdnapro-score-count .sc-num.is-pop { animation: qdnapro-score-pop 0.42s cubic-bezier(0.34, 1.56, 0.64, 1); } .qdnapro-score-count .sc-label { margin-top: 6px; font-size: 13px; font-weight: 600; letter-spacing: 0; color: rgba(255, 255, 255, 0.72); } @keyframes qdnapro-score-pop { 0% { transform: scale(1); } 45% { transform: scale(1.16); } 100% { transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .qdnapro-score-count .sc-num.is-pop { animation: none; } } .qdnapro-checkbox { --cb-size: 16px; --cb-border: #c4c7cc; --cb-bg: #ffffff; --cb-bg-hover: #f0f1f2; --cb-filled-bg: #4652f3; --cb-filled-border: #4652f3; --cb-mark: #ffffff; --cb-focus-ring: #40499a; --cb-focus-glow: rgba(70, 82, 243, 0.25); display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: var(--cb-size); height: var(--cb-size); flex-shrink: 0; border: 1px solid var(--cb-border); border-radius: 4px; background: var(--cb-bg); cursor: pointer; user-select: none; transition: background-color 120ms ease-out, border-color 120ms ease-out; } .qdnapro-checkbox .checkbox-mark { position: absolute; display: inline-flex; align-items: center; justify-content: center; width: 12px; height: 12px; color: var(--cb-mark); pointer-events: none; transform: scale(0); opacity: 0; transition: transform 220ms cubic-bezier(0.34, 1.35, 0.64, 1), opacity 140ms ease-out; } .qdnapro-checkbox .checkbox-mark svg { fill: currentColor; width: 100%; height: 100%; } .qdnapro-checkbox .checkbox-mark-dash { width: 8px; height: 2px; background: var(--cb-mark); border-radius: 1px; } .qdnapro-checkbox { position: relative; } .qdnapro-checkbox.checkbox-checked .checkbox-mark-check { transform: scale(1); opacity: 1; } .qdnapro-checkbox.checkbox-indeterminate .checkbox-mark-dash { transform: scale(1); opacity: 1; } .qdnapro-checkbox.checkbox-shape-square { border-radius: 4px; } .qdnapro-checkbox.checkbox-shape-round { border-radius: 50%; } .qdnapro-checkbox.checkbox-size-touch { --cb-size: 44px; border-width: 2px; } .qdnapro-checkbox.checkbox-size-touch.checkbox-shape-square { border-radius: 8px; } .qdnapro-checkbox.checkbox-size-touch .checkbox-mark { width: 32px; height: 32px; } .qdnapro-checkbox.checkbox-size-touch .checkbox-mark-dash { width: 22px; height: 5px; border-radius: 2px; } .qdnapro-checkbox.checkbox-size-touch-sm { --cb-size: 28px; } .qdnapro-checkbox.checkbox-size-touch-sm.checkbox-shape-square { border-radius: 6px; } .qdnapro-checkbox.checkbox-size-touch-sm .checkbox-mark { width: 20px; height: 20px; } .qdnapro-checkbox.checkbox-size-touch-sm .checkbox-mark-dash { width: 14px; height: 3px; border-radius: 1.5px; } .qdnapro-checkbox.checkbox-checked, .qdnapro-checkbox.checkbox-indeterminate { background: var(--cb-filled-bg); border-color: var(--cb-filled-border); } .qdnapro-checkbox:hover:not(.checkbox-disabled):not(.checkbox-checked):not(.checkbox-indeterminate) { background: var(--cb-bg-hover); } .qdnapro-checkbox:active:not(.checkbox-disabled) { background-image: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)); } .qdnapro-checkbox:focus { outline: none; } .qdnapro-checkbox:focus-visible, .qdnapro-checkbox.force-focus { outline: none; box-shadow: 0 0 0 2px var(--cb-focus-ring), 0 0 0 6px var(--cb-focus-glow); } .qdnapro-checkbox.force-hover:not(.checkbox-disabled):not(.checkbox-checked):not(.checkbox-indeterminate) { background: var(--cb-bg-hover); } .qdnapro-checkbox.force-pressed:not(.checkbox-disabled) { background-image: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)); } .qdnapro-checkbox.checkbox-state-error { --cb-border: #c65a5a; --cb-filled-bg: #f87171; --cb-filled-border: #c65a5a; --cb-focus-ring: #c65a5a; --cb-focus-glow: rgba(198, 90, 90, 0.25); } .qdnapro-checkbox.checkbox-state-success { --cb-border: #428b6e; --cb-filled-bg: #6ee7b7; --cb-filled-border: #428b6e; --cb-focus-ring: #428b6e; --cb-focus-glow: rgba(66, 139, 110, 0.25); } .qdnapro-checkbox.checkbox-disabled { --cb-border: #c4c7cc; --cb-bg: #f0f1f2; --cb-filled-bg: #f0f1f2; --cb-filled-border: #c4c7cc; --cb-mark: #898e99; opacity: 0.5; cursor: not-allowed; pointer-events: none; } [data-theme=dark] .qdnapro-checkbox { --cb-border: #565b66; --cb-bg: #2e3036; --cb-bg-hover: #40444d; --cb-filled-bg: #4652f3; --cb-filled-border: #4652f3; --cb-mark: #ffffff; --cb-focus-ring: #a5acff; --cb-focus-glow: rgba(70, 82, 243, 0.4); } [data-theme=dark] .qdnapro-checkbox.checkbox-state-error { --cb-border: #c65a5a; --cb-filled-bg: #c65a5a; --cb-filled-border: #c65a5a; --cb-focus-ring: #e89090; } [data-theme=dark] .qdnapro-checkbox.checkbox-state-success { --cb-border: #428b6e; --cb-filled-bg: #428b6e; --cb-filled-border: #428b6e; --cb-focus-ring: #7ccfa8; } [data-theme=dark] .qdnapro-checkbox.checkbox-disabled { --cb-border: #565b66; --cb-bg: #40444d; --cb-filled-bg: #40444d; --cb-filled-border: #565b66; --cb-mark: #6b7280; } /* === theme: glass — added 2026-06-08 === Translucent checkbox for a dark / coloured surface (login). Activate via data-theme="glass" on an ancestor; lila focus ring to match the inputs. */ [data-theme=glass] .qdnapro-checkbox { --cb-border: rgba(255, 255, 255, 0.45); --cb-bg: rgba(255, 255, 255, 0.15); --cb-bg-hover: rgba(255, 255, 255, 0.25); /* Checked = solid white box with a dark check, so it stands out on the dark surface (a tinted fill blends into the indigo - too low contrast). */ --cb-filled-bg: #ffffff; --cb-filled-border: #ffffff; --cb-mark: #26215c; --cb-focus-ring: #9a8fff; --cb-focus-glow: rgba(154, 143, 255, 0.35); } [data-theme=glass] .qdnapro-checkbox.checkbox-disabled { --cb-border: rgba(255, 255, 255, 0.25); --cb-bg: rgba(255, 255, 255, 0.08); --cb-filled-bg: rgba(255, 255, 255, 0.08); --cb-filled-border: rgba(255, 255, 255, 0.25); --cb-mark: rgba(255, 255, 255, 0.4); } /* ============================================================ * qdnapro-color-picker * Pastel swatch picker. Palette matches the tasklist-card * .tlc-color-* tints exactly so the swatch == the card tint. * ============================================================ */ .qdnapro-color-picker { display: block; box-sizing: border-box; } .qdnapro-color-picker *, .qdnapro-color-picker *::before, .qdnapro-color-picker *::after { box-sizing: border-box; } .qdnapro-color-picker .qcp-grid { display: flex; flex-wrap: wrap; gap: 10px; } .qdnapro-color-picker .qcp-swatch { position: relative; width: 36px; height: 36px; padding: 0; border-radius: 10px; border: 1px solid rgba(15, 23, 42, 0.1); background: var(--qcp-bg, #eef0f2); cursor: pointer; transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease; } .qdnapro-color-picker .qcp-swatch:hover { transform: translateY(-1px); } .qdnapro-color-picker .qcp-swatch:active { transform: translateY(0); } .qdnapro-color-picker .qcp-swatch:focus-visible { outline: none; border-color: #40499a; box-shadow: 0 0 0 4px rgba(70, 82, 243, 0.2); } .qdnapro-color-picker .qcp-swatch.qcp-swatch-selected { border-color: #40499a; box-shadow: 0 0 0 2px #40499a, 0 0 0 5px rgba(70, 82, 243, 0.18); } /* Variant "soft": LIGHT-purple selection ring (same hue as the focus glow) instead of the heavy dark #40499a ring. The checkmark still marks the pick. Looks much better on dark / saturated swatches. [Kim 2026-06-22] */ .qdnapro-color-picker.qcp-variant-soft .qcp-swatch.qcp-swatch-selected { border-color: rgba(70, 82, 243, 0.45); box-shadow: 0 0 0 3px rgba(70, 82, 243, 0.22); } /* Check mark - visible only on the selected swatch. */ .qdnapro-color-picker .qcp-check { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; } .qdnapro-color-picker .qcp-swatch-selected .qcp-check { opacity: 1; } .qdnapro-color-picker .qcp-check::after { content: ""; width: 10px; height: 6px; /* --qcp-check is set per swatch by the JS contrast detector: white on dark swatches, brand indigo on light ones. */ border-left: 2px solid var(--qcp-check, #40499a); border-bottom: 2px solid var(--qcp-check, #40499a); transform: rotate(-45deg) translateY(-1px); } /* Palette - matches the .tlc-color-* tasklist-card tints exactly. */ .qdnapro-color-picker .qcp-swatch--grey { --qcp-bg: #eef0f2; } .qdnapro-color-picker .qcp-swatch--red { --qcp-bg: #fde7e7; } .qdnapro-color-picker .qcp-swatch--yellow { --qcp-bg: #fdf3d6; } .qdnapro-color-picker .qcp-swatch--green { --qcp-bg: #e2faf1; } .qdnapro-color-picker .qcp-swatch--blue { --qcp-bg: #e6eff9; } .qdnapro-color-picker .qcp-swatch--bright-blue { --qcp-bg: #d6e0f9; } .qdnapro-color-picker .qcp-swatch--pink { --qcp-bg: #f6e1e8; } .qdnapro-color-picker .qcp-swatch--purple { --qcp-bg: #ebe9fb; } .qdnapro-color-picker.qcp-disabled { opacity: 0.55; pointer-events: none; } /* Semantic palette (floweditor per-option appearance modal, 12.07.2026): standaard / positive / warning / negative / neutral_alt — the closed 5-value set the OptionAppearanceOverlay.vue datamodel uses. Tints come from the shared signal design tokens (same tokens qdnapro-answer-button's --positive/--warning/--negative/--neutral_alt variants already use) so a picked colour reads identically in the picker and in the live preview. "standaard" has no signal token (it maps to '' in the datamodel) — a light brand-purple neutral (--c-purple-50) fits the "neutraal purper/grijs" ask better than plain grey in this purple-branded product. */ .qdnapro-color-picker .qcp-swatch--standaard { --qcp-bg: var(--c-purple-50, #e6e9ff); } .qdnapro-color-picker .qcp-swatch--positive { --qcp-bg: var(--c-signal-green-bg, #c5f5e2); } .qdnapro-color-picker .qcp-swatch--warning { --qcp-bg: var(--c-signal-yellow-bg, #feedb8); } .qdnapro-color-picker .qcp-swatch--negative { --qcp-bg: var(--c-signal-red-bg, #fee3e3); } .qdnapro-color-picker .qcp-swatch--neutral_alt { --qcp-bg: var(--c-signal-blue-bg, #e6eff9); } .qdnapro-date-picker { display: block; box-sizing: border-box; min-width: 232px; background: transparent; font-family: var(--theme-font-family, "Inter", sans-serif); user-select: none; } .qdnapro-date-picker.qdnapro-date-picker--panel { background: #ffffff; border: 1px solid #c4c7cc; border-radius: 8px; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.15), 0 8px 12px 6px rgba(0, 0, 0, 0.075); padding: 10px 12px; } .qdnapro-date-picker__header { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-bottom: 6px; } .qdnapro-date-picker__nav { display: flex; align-items: center; gap: 2px; flex: none; } .qdnapro-date-picker__label { font-size: 14px; font-weight: 600; line-height: 20px; color: var(--c-text-heading, #1a1f4d); } .qdnapro-date-picker__weekdays, .qdnapro-date-picker__grid { display: grid; grid-template-columns: repeat(7, 1fr); justify-items: center; gap: 2px; } .qdnapro-date-picker__weekdays span { font-size: 11px; line-height: 16px; text-align: center; color: var(--c-grey-500, #6b7280); padding: 2px 0 4px; } .qdnapro-date-picker__day { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 0; border-radius: 50%; padding: 0; background: transparent; font: inherit; font-size: 13px; line-height: 1; color: var(--c-text-body, #0b0b0d); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color 0.1s ease; } .qdnapro-date-picker__day:not(.is-disabled):not(.is-selected):hover, .qdnapro-date-picker__day.force-hover { background: var(--c-grey-50, #f0f1f2); } .qdnapro-date-picker__day:not(.is-disabled):not(.is-selected):active, .qdnapro-date-picker__day.force-pressed { background: var(--c-grey-100, #e7e9ec); } .qdnapro-date-picker__day.is-today { font-weight: 700; color: var(--c-brand-purple, #40499a); } .qdnapro-date-picker__day.is-selected { background: var(--c-purple-highlight, #4652f3); color: var(--c-text-on-action, #ffffff); font-weight: 600; } .qdnapro-date-picker__day.is-selected:not(.is-disabled):hover, .qdnapro-date-picker__day.is-selected.force-hover { background: var(--c-action-600, #3540d6); } .qdnapro-date-picker__day.is-selected:not(.is-disabled):active, .qdnapro-date-picker__day.is-selected.force-pressed { background: var(--c-action-700, #2a36b8); } .qdnapro-date-picker__day.is-muted { color: var(--c-grey-400, #a6aab3); } .qdnapro-date-picker__day.is-disabled { color: var(--c-text-disabled, #898e99); cursor: default; } .qdnapro-date-picker__day:focus { outline: none; } .qdnapro-date-picker__day:focus-visible, .qdnapro-date-picker__day.force-focus { outline: 2px solid var(--focus-ring, #40499a); outline-offset: 1px; box-shadow: 0 0 0 5px var(--focus-glow, rgba(70, 82, 243, 0.25)); } .qdnapro-date-picker__cell { position: relative; display: flex; align-items: center; justify-content: center; justify-self: stretch; height: 32px; } .qdnapro-date-picker__cell.is-band::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 0; pointer-events: none; } .qdnapro-date-picker__cell.is-band-ghost::before { background: var(--c-grey-50, #f0f1f2); } .qdnapro-date-picker__cell.is-band-fill::before { background: var(--c-action-12, rgba(70, 82, 243, 0.12)); } .qdnapro-date-picker__cell.is-band-round-start::before { border-top-left-radius: 16px; border-bottom-left-radius: 16px; } .qdnapro-date-picker__cell.is-band-round-end::before { border-top-right-radius: 16px; border-bottom-right-radius: 16px; } .qdnapro-date-picker__cell.is-band-bleed-start::before { left: -1px; } .qdnapro-date-picker__cell.is-band-bleed-end::before { right: -1px; } .qdnapro-date-picker__cell.is-band-fill .qdnapro-date-picker__day:not(.is-selected):not(.is-disabled) { color: var(--c-brand-purple, #40499a); font-weight: 600; } @media (prefers-reduced-motion: reduce) { .qdnapro-date-picker__day { transition: none; } } /* compiled from _divider.scss */ .qdnapro-divider { display: block; flex-shrink: 0; pointer-events: none; background: #d9dbeb; border: 0; margin: 0; padding: 0; } .qdnapro-divider.divider-horizontal { width: 100%; height: 1px; } .qdnapro-divider.divider-vertical { width: 1px; height: 100%; align-self: stretch; } .qdnapro-divider.divider-vertical.divider-fixed-length { align-self: center; } .qdnapro-divider.divider-color-neutral { background: #d9dbeb; } .qdnapro-divider.divider-color-subtle { background: rgba(0, 0, 0, 0.1); } [data-theme=dark] .qdnapro-divider.divider-color-neutral, [data-theme-dark] .qdnapro-divider.divider-color-neutral { background: rgba(255, 255, 255, 0.12); } [data-theme=dark] .qdnapro-divider.divider-color-subtle, [data-theme-dark] .qdnapro-divider.divider-color-subtle { background: rgba(255, 255, 255, 0.08); } .qdnapro-document-viewer { position: fixed; inset: 0; z-index: 9500; display: flex; flex-direction: column; background: #16182b; color: #eef0fb; -webkit-tap-highlight-color: transparent; user-select: none; font-family: var(--ff, "Inter", system-ui, -apple-system, sans-serif); transition: transform 180ms ease, opacity 180ms ease; } .qdnapro-document-viewer[hidden] { display: none; } .qdnapro-document-viewer .qdv-topbar { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 10px; padding-top: calc(8px + env(safe-area-inset-top, 0px)); padding-left: calc(10px + env(safe-area-inset-left, 0px)); padding-right: calc(10px + env(safe-area-inset-right, 0px)); background: #1d2038; border-bottom: 1px solid rgba(255, 255, 255, 0.08); transition: opacity 200ms ease, transform 200ms ease; } .qdnapro-document-viewer .qdv-fname { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; font-size: 0.95rem; font-weight: 600; } .qdnapro-document-viewer .qdv-fname qdnapro-file-icon { flex: 0 0 auto; } .qdnapro-document-viewer .qdv-fname-text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .qdnapro-document-viewer .qdv-tools { flex: 0 0 auto; display: flex; align-items: center; gap: 2px; } .qdnapro-document-viewer .qdv-tools qdnapro-icon-btn { color: #cfd2ea; } .qdnapro-document-viewer .qdv-tools qdnapro-icon-btn[hidden] { display: none; } .qdnapro-document-viewer .qdv-close { color: #cfd2ea; } .qdnapro-document-viewer .qdv-stage { flex: 1 1 auto; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; } .qdnapro-document-viewer .qdv-imgwrap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 180ms ease; touch-action: none; } .qdnapro-document-viewer .qdv-imgwrap.is-loaded { opacity: 1; } .qdnapro-document-viewer .qdv-img { max-width: 100%; max-height: 100%; object-fit: contain; transform-origin: center center; will-change: transform; -webkit-user-drag: none; } .qdnapro-document-viewer .qdv-pdf { position: absolute; inset: 0; overflow: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; display: flex; justify-content: center; overflow-anchor: none; } .qdnapro-document-viewer .qdv-pdf.is-zoomed { touch-action: pan-x pan-y; } .qdnapro-document-viewer .qdv-pdf-pages { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px)); transform-origin: top center; will-change: transform; } .qdnapro-document-viewer .qdv-page { position: relative; background: #ffffff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); max-width: 100%; flex: 0 0 auto; } .qdnapro-document-viewer .qdv-page canvas { display: block; width: 100%; height: 100%; } .qdnapro-document-viewer .qdv-page:not(.is-rendered)::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, #f2f3f8 30%, #e7e9f2 50%, #f2f3f8 70%); background-size: 200% 100%; animation: qdv-shimmer 1.2s ease-in-out infinite; } .qdnapro-document-viewer .qdv-pagepill { position: absolute; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: rgba(20, 22, 40, 0.82); color: #eef0fb; font-size: 0.8rem; font-weight: 600; padding: 5px 12px; border-radius: 999px; pointer-events: none; opacity: 0; transition: opacity 220ms ease; z-index: 3; } .qdnapro-document-viewer .qdv-pagepill.is-visible { opacity: 1; } .qdnapro-document-viewer.qdv-chrome-hidden .qdv-pagepill { bottom: 16px; } .qdnapro-document-viewer .qdv-textlayer { position: absolute; inset: 0; overflow: hidden; line-height: 1; text-align: initial; opacity: 1; forced-color-adjust: none; } .qdnapro-document-viewer .qdv-textlayer span, .qdnapro-document-viewer .qdv-textlayer br { color: transparent; position: absolute; white-space: pre; cursor: text; transform-origin: 0 0; } .qdnapro-document-viewer .qdv-textlayer ::selection { background: rgba(64, 73, 154, 0.35); } .qdnapro-document-viewer .qdv-textlayer .qdv-hl { background: rgba(255, 213, 0, 0.45); border-radius: 2px; } .qdnapro-document-viewer .qdv-textlayer .qdv-hl-current { background: rgba(255, 145, 0, 0.7); } .qdnapro-document-viewer .qdv-searchbar { position: absolute; left: 50%; transform: translateX(-50%); top: calc(8px + env(safe-area-inset-top, 0px)); z-index: 4; display: none; align-items: center; gap: 6px; max-width: calc(100% - 24px); padding: 6px 8px 6px 12px; background: #2a2e4d; color: #eef0fb; border-radius: 999px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); } .qdnapro-document-viewer.qdv-searching .qdv-searchbar { display: flex; } .qdnapro-document-viewer.qdv-searching .qdv-topbar { opacity: 0; pointer-events: none; } .qdnapro-document-viewer .qdv-search-input { flex: 1 1 auto; min-width: 80px; background: transparent; border: 0; outline: none; color: #eef0fb; font: inherit; font-size: 0.9rem; } .qdnapro-document-viewer .qdv-search-input::placeholder { color: #9498c6; } .qdnapro-document-viewer .qdv-search-count { flex: 0 0 auto; font-size: 0.78rem; color: #aeb2d6; min-width: 38px; text-align: right; font-variant-numeric: tabular-nums; } .qdnapro-document-viewer .qdv-searchbar qdnapro-icon-btn { color: #cfd2ea; flex: 0 0 auto; } .qdnapro-document-viewer .qdv-media { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .qdnapro-document-viewer .qdv-video { max-width: 100%; max-height: 100%; outline: none; background: #000; } .qdnapro-document-viewer .qdv-audio { width: 100%; max-width: 320px; margin-top: 8px; } .qdnapro-document-viewer .qdv-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .qdnapro-document-viewer .qdv-thumb { position: absolute; max-width: 90%; max-height: 90%; object-fit: contain; filter: blur(14px); opacity: 0.5; transform: scale(1.02); } .qdnapro-document-viewer .qdv-spinner { position: relative; width: 38px; height: 38px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.22); border-top-color: #eef0fb; animation: qdv-spin 0.8s linear infinite; } .qdnapro-document-viewer .qdv-card { max-width: 320px; margin: 0 auto; padding: 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; } .qdnapro-document-viewer .qdv-card-icon { --qdnapro-icon-size: 44px; width: 44px; height: 44px; color: #8b90c4; } .qdnapro-document-viewer .qdv-card-fileicon { margin-bottom: 4px; } .qdnapro-document-viewer .qdv-card-title { font-size: 1rem; font-weight: 600; color: #eef0fb; } .qdnapro-document-viewer .qdv-card-text { font-size: 0.875rem; line-height: 1.4; color: #aeb2d6; } .qdnapro-document-viewer .qdv-card qdnapro-button { margin-top: 6px; } .qdnapro-document-viewer .qdv-fb { position: absolute; left: calc(16px + env(safe-area-inset-left, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 4; display: flex; align-items: center; gap: 2px; padding: 4px 6px 4px 14px; background: rgba(29, 32, 56, 0.94); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 999px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.38), 0 1px 2px rgba(0, 0, 0, 0.4); transition: opacity 200ms ease, transform 200ms ease; } .qdnapro-document-viewer .qdv-fb[hidden] { display: none; } .qdnapro-document-viewer .qdv-fb-label { font-size: 0.82rem; font-weight: 600; color: #cfd2ea; white-space: nowrap; padding-right: 4px; } .qdnapro-document-viewer .qdv-fb-label[hidden] { display: none; } .qdnapro-document-viewer .qdv-fb qdnapro-icon-btn { color: #cfd2ea; border-radius: 50%; } .qdnapro-document-viewer .qdv-fb qdnapro-icon-btn.is-active { background: rgba(255, 255, 255, 0.16); color: #ffffff; } .qdnapro-document-viewer .qdv-fb-note { position: absolute; left: calc(16px + env(safe-area-inset-left, 0px)); bottom: calc(72px + env(safe-area-inset-bottom, 0px)); right: calc(16px + env(safe-area-inset-right, 0px)); max-width: 380px; z-index: 5; display: flex; flex-direction: column; gap: 10px; padding: 14px 14px 12px; background: #1d2038; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); } .qdnapro-document-viewer .qdv-fb-note[hidden] { display: none; } .qdnapro-document-viewer .qdv-fb-note-head { display: flex; align-items: flex-start; gap: 8px; font-size: 0.86rem; font-weight: 600; color: #eef0fb; line-height: 1.35; } .qdnapro-document-viewer .qdv-fb-note-head qdnapro-icon { flex: 0 0 auto; color: #9ea2c8; margin-top: 1px; } .qdnapro-document-viewer .qdv-fb-note-sub { margin: -4px 0 0; font-size: 0.78rem; color: #9ea2c8; line-height: 1.4; } .qdnapro-document-viewer .qdv-fb-note-input { width: 100%; box-sizing: border-box; resize: none; background: #2a2e4d; color: #eef0fb; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 0.85rem; line-height: 1.4; outline: none; } .qdnapro-document-viewer .qdv-fb-note-input::placeholder { color: #7d81ab; } .qdnapro-document-viewer .qdv-fb-note-input:focus { border-color: rgba(255, 255, 255, 0.32); } .qdnapro-document-viewer .qdv-fb-note-actions { display: flex; justify-content: flex-end; gap: 8px; } .qdnapro-document-viewer .qdv-fb-note-actions qdnapro-button.button-subtle { color: #cfd2ea; } .qdnapro-document-viewer.qdv-chrome-hidden .qdv-topbar { opacity: 0; transform: translateY(-100%); pointer-events: none; } .qdnapro-document-viewer.qdv-chrome-hidden .qdv-fb { opacity: 0; transform: translateY(8px); pointer-events: none; } @media (prefers-reduced-motion: reduce) { .qdnapro-document-viewer { transition: none; } .qdnapro-document-viewer .qdv-topbar, .qdnapro-document-viewer .qdv-fb { transition: none; } .qdnapro-document-viewer .qdv-spinner { animation-duration: 1.6s; } } @keyframes qdv-spin { to { transform: rotate(360deg); } } @keyframes qdv-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } :root.qdv-open, :root.qdv-open body { overflow: hidden; } .text-h1 { font-family: "Inter", sans-serif; letter-spacing: 0; font-weight: 600; font-size: 60px; line-height: 72px; } .text-h2 { font-family: "Inter", sans-serif; letter-spacing: 0; font-weight: 600; font-size: 40px; line-height: 56px; } .text-h3 { font-family: "Inter", sans-serif; letter-spacing: 0; font-weight: 600; font-size: 32px; line-height: 48px; } .text-h4 { font-family: "Inter", sans-serif; letter-spacing: 0; font-weight: 600; font-size: 28px; line-height: 44px; } .text-h5 { font-family: "Inter", sans-serif; letter-spacing: 0; font-weight: 600; font-size: 24px; line-height: 36px; } .text-h6 { font-family: "Inter", sans-serif; letter-spacing: 0; font-weight: 600; font-size: 20px; line-height: 24px; } .text-body-xs { font-family: "Inter", sans-serif; letter-spacing: 0; font-weight: 400; font-size: 10px; line-height: 20px; } .text-body-sm { font-family: "Inter", sans-serif; letter-spacing: 0; font-weight: 400; font-size: 12px; line-height: 20px; } .text-body-md { font-family: "Inter", sans-serif; letter-spacing: 0; font-weight: 400; font-size: 14px; line-height: 24px; } .text-body-lg { font-family: "Inter", sans-serif; letter-spacing: 0; font-weight: 400; font-size: 16px; line-height: 24px; } .text-body-xl { font-family: "Inter", sans-serif; letter-spacing: 0; font-weight: 400; font-size: 20px; line-height: 32px; } .qdnapro-drop-zone { --dz-c-border: #40499a; --dz-c-border-highlight: #4652f3; --dz-c-bg-tint: rgba(70, 82, 243, 0.08); --dz-c-bg-tint-full: rgba(70, 82, 243, 0.14); --dz-c-overlay-text: #40499a; --dz-c-overlay-text-highlight: #4652f3; --dz-c-reject-border: #c65a5a; --dz-c-reject-bg: rgba(198, 90, 90, 0.10); --dz-c-reject-bg-full: rgba(198, 90, 90, 0.16); --dz-c-reject-text: #6a3030; position: relative; display: block; box-sizing: border-box; border-radius: 12px; border: 2px solid transparent; transition: border-color 180ms ease, background 180ms ease; } .qdnapro-drop-zone .drop-zone-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: 0; transition: opacity 180ms ease; z-index: 2; } .qdnapro-drop-zone .drop-zone-march-svg { position: absolute; inset: 0; width: 100%; height: 100%; color: transparent; pointer-events: none; } .qdnapro-drop-zone .drop-zone-march-rect { width: calc(100% - 2px); height: calc(100% - 2px); animation: drop-zone-march 1.6s linear infinite; } .qdnapro-drop-zone.drop-zone-active .drop-zone-march-svg, .qdnapro-drop-zone.force-active .drop-zone-march-svg { color: var(--dz-march-color); } .qdnapro-drop-zone .drop-zone-overlay-inner { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 24px; text-align: center; } .qdnapro-drop-zone .drop-zone-overlay-icon { width: 32px; height: 32px; color: var(--dz-c-overlay-text); } .qdnapro-drop-zone.drop-zone-active .drop-zone-overlay-icon, .qdnapro-drop-zone.force-active .drop-zone-overlay-icon { animation: drop-zone-icon-figure8 6s ease-in-out infinite; } .qdnapro-drop-zone .drop-zone-overlay-icon svg { width: 100%; height: 100%; display: block; } .qdnapro-drop-zone .drop-zone-overlay-text { font-family: "Inter", sans-serif; font-size: 16px; font-weight: 600; color: var(--dz-c-overlay-text); line-height: 1.3; } .qdnapro-drop-zone .drop-zone-overlay-hint { font-family: "Inter", sans-serif; font-size: 13px; font-weight: 400; color: var(--dz-c-overlay-text); opacity: 0.7; line-height: 1.3; } .qdnapro-drop-zone > :not(.drop-zone-overlay):not(.drop-zone-input) { transition: opacity 180ms ease, filter 180ms ease, width 320ms ease-in-out; } .qdnapro-drop-zone.drop-zone-active > :not(.drop-zone-overlay):not(.drop-zone-input) { opacity: 0.45; filter: blur(6px); } .qdnapro-drop-zone.drop-zone-style-dashed.drop-zone-active:not(.drop-zone-reject) { border: 2px solid transparent; background: radial-gradient(ellipse at top left, var(--dz-c-bg-tint), transparent 55%), radial-gradient(ellipse at bottom right, var(--dz-c-bg-tint), transparent 55%); --dz-march-color: var(--dz-c-border); } .qdnapro-drop-zone.drop-zone-style-solid.drop-zone-active:not(.drop-zone-reject) { border: 2px solid var(--dz-c-border); background: radial-gradient(ellipse at top left, var(--dz-c-bg-tint), transparent 55%), radial-gradient(ellipse at bottom right, var(--dz-c-bg-tint), transparent 55%); } .qdnapro-drop-zone.drop-zone-style-highlight.drop-zone-active:not(.drop-zone-reject) { border: 2px solid transparent; background: var(--dz-c-bg-tint-full); --dz-c-overlay-text: var(--dz-c-overlay-text-highlight); --dz-march-color: var(--dz-c-border-highlight); } .qdnapro-drop-zone.drop-zone-style-dashed.drop-zone-active.drop-zone-reject { border: 2px dashed var(--dz-c-reject-border); background: radial-gradient(ellipse at top left, var(--dz-c-reject-bg), transparent 55%), radial-gradient(ellipse at bottom right, var(--dz-c-reject-bg), transparent 55%); --dz-c-overlay-text: var(--dz-c-reject-text); } .qdnapro-drop-zone.drop-zone-style-solid.drop-zone-active.drop-zone-reject { border: 2px solid var(--dz-c-reject-border); background: radial-gradient(ellipse at top left, var(--dz-c-reject-bg), transparent 55%), radial-gradient(ellipse at bottom right, var(--dz-c-reject-bg), transparent 55%); --dz-c-overlay-text: var(--dz-c-reject-text); } .qdnapro-drop-zone.drop-zone-style-highlight.drop-zone-active.drop-zone-reject { border: 2px dashed var(--dz-c-reject-border); background: var(--dz-c-reject-bg-full); --dz-c-overlay-text: var(--dz-c-reject-text); } .qdnapro-drop-zone.drop-zone-active .drop-zone-overlay { opacity: 1; } .qdnapro-drop-zone.drop-zone-clickable { cursor: pointer; } .qdnapro-drop-zone.drop-zone-clickable:not(.drop-zone-active):hover { border-color: var(--dz-c-border); opacity: 1; } .qdnapro-drop-zone.drop-zone-disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } [data-theme=dark] .qdnapro-drop-zone { --dz-c-border: #a5acff; --dz-c-border-highlight: #c4caff; --dz-c-bg-tint: rgba(165, 172, 255, 0.10); --dz-c-bg-tint-full: rgba(165, 172, 255, 0.18); --dz-c-overlay-text: #c4caff; --dz-c-overlay-text-highlight: #d6daff; --dz-c-reject-border: #fbaaaa; --dz-c-reject-bg: rgba(251, 170, 170, 0.10); --dz-c-reject-bg-full: rgba(251, 170, 170, 0.18); --dz-c-reject-text: #fee3e3; } @keyframes drop-zone-march { to { stroke-dashoffset: -12; } } @keyframes drop-zone-icon-figure8 { 0% { transform: translate(0, 0); } 12.5% { transform: translate(4px, 3px); } 25% { transform: translate(5px, 0); } 37.5% { transform: translate(4px, -3px); } 50% { transform: translate(0, 0); } 62.5% { transform: translate(-4px, 3px); } 75% { transform: translate(-5px, 0); } 87.5% { transform: translate(-4px, -3px); } 100% { transform: translate(0, 0); } } @media (prefers-reduced-motion: reduce) { .qdnapro-drop-zone .drop-zone-overlay-icon { animation: none; } .qdnapro-drop-zone::before { animation: none; } } .qdnapro-emoji-sheet { display: contents; } .qdnapro-bottom-sheet.es-sheet { z-index: 21000; } .qdnapro-bottom-sheet.es-sheet .bs-panel { height: 82%; max-height: 82%; padding: 4px 6px 0; } .qdnapro-bottom-sheet.es-sheet .bs-handle-zone { padding: 8px 0 4px; } .qdnapro-bottom-sheet.es-sheet .bs-body { overflow: hidden; gap: 0; padding-bottom: 0; } .es-root { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; font-family: var(--theme-font-family, "Inter", sans-serif); } .es-root .es-emoji, .es-root .es-tone { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; } .es-root .es-icon { width: 24px; height: 24px; display: block; flex-shrink: 0; } .es-root .es-tab .es-icon { width: 22px; height: 22px; } .es-root .es-search { flex-shrink: 0; padding: 6px 6px 10px; } .es-root .es-search-trigger, .es-root .es-search-field { width: 100%; height: 40px; box-sizing: border-box; display: flex; align-items: center; gap: 8px; padding: 0 12px; border: none; border-radius: 12px; background: var(--c-white-08); color: var(--c-white-55); font-size: 15px; } .es-root .es-search-trigger { cursor: text; text-align: left; } .es-root .es-search-placeholder { color: var(--c-white-45); } .es-root .es-search-field { display: none; } .es-root.es-searching .es-search-trigger { display: none; } .es-root.es-searching .es-search-field { display: flex; } .es-root .es-search-field-icon { color: var(--c-white-45); } .es-root .es-search-input { flex: 1; min-width: 0; border: none; background: none; outline: none; color: #fff; font-size: 15px; font-family: inherit; } .es-root .es-search-input::placeholder { color: var(--c-white-45); } .es-root .es-search-cancel { flex-shrink: 0; border: none; background: none; color: #fff; font-size: 15px; font-family: inherit; cursor: pointer; padding: 0 2px; } .es-root .es-scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scrollbar-width: none; -ms-overflow-style: none; } .es-root .es-scroll::-webkit-scrollbar { width: 0; height: 0; display: none; } .es-root .es-section-title { position: sticky; top: 0; z-index: 2; padding: 8px 8px 4px; font-size: 12px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-white-45); background: rgba(38, 38, 44, 0.86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .es-root .es-grid { display: grid; grid-template-columns: repeat(8, 1fr); padding: 2px 4px 6px; } .es-root .es-emoji { aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; border: none; background: none; border-radius: 10px; padding: 0; font-size: 27px; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; } .es-root .es-emoji:active { background: var(--c-white-14); } .es-root.es-has-query .es-section { display: none; } .es-root .es-results { padding-top: 8px; } .es-root .es-empty { padding: 44px 16px; text-align: center; font-size: 14px; color: var(--c-white-45); } .es-root .es-catnav { flex-shrink: 0; display: flex; align-items: center; gap: 2px; padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--c-white-08); } .es-root .es-tab { flex: 1; height: 40px; display: flex; align-items: center; justify-content: center; border: none; background: none; border-radius: 10px; color: var(--c-white-45); cursor: pointer; -webkit-tap-highlight-color: transparent; } .es-root .es-tab:active { background: var(--c-white-08); } .es-root .es-tab.is-active { color: #fff; background: var(--c-white-12); } .es-root .es-tone-popover { position: absolute; z-index: 5; display: flex; gap: 2px; padding: 6px; background: #fff; border-radius: 18px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28); } .es-root .es-tone-popover[hidden] { display: none; } .es-root .es-tone-popover::after { content: ""; position: absolute; bottom: -9px; left: var(--es-tail-x, 50%); transform: translateX(-50%); border: 9px solid transparent; border-top-color: #fff; border-bottom: 0; } .es-root .es-tone { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: none; background: none; border-radius: 10px; padding: 0; font-size: 26px; line-height: 1; cursor: pointer; } .es-root .es-tone:active { background: rgba(0, 0, 0, 0.06); } .qdnapro-empty-state[hidden] { display: none; } .qdnapro-empty-state { box-sizing: border-box; display: block; max-width: 620px; margin: 32px auto 0; padding: 44px 48px 48px; text-align: center; background: rgba(255, 255, 255, 0.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 16px; box-shadow: 0 1px 2px rgba(20, 25, 80, 0.04), 0 8px 24px rgba(20, 25, 80, 0.06); } .qdnapro-empty-state * { box-sizing: border-box; } /* Solid variant (surface="solid"): a light-purple card instead of the frosted-glass panel, so the empty state reads well on a plain white background (the default glass only works over a tinted/purple backdrop). */ .qdnapro-empty-state.empty-state-solid { background: #f1f2fd; -webkit-backdrop-filter: none; backdrop-filter: none; border: 1px solid #e4e6f8; box-shadow: none; } .qdnapro-empty-state.empty-state-solid .empty-state-title { color: #3a4290; } /* On the light-purple solid surface a plain `subtle` button's neutral grey hover (#f0f1f2) all but disappears against the card (#f1f2fd). Re-tint any subtle action to the subtle-on-purple treatment so a default `subtle` CTA reads correctly here without the consumer having to reach for a surface- specific button type. The solid card is light-purple in both themes, so these values apply in light and dark alike. Values mirror .qdnapro-button.button-subtle-purple-bg. [Kim 2026-07-09] */ .qdnapro-empty-state.empty-state-solid .empty-state-actions .qdnapro-button.button-subtle { color: #40499a; } .qdnapro-empty-state.empty-state-solid .empty-state-actions .qdnapro-button.button-subtle:hover:not(.button-disabled) { background: #daddf2; } .qdnapro-empty-state.empty-state-solid .empty-state-actions .qdnapro-button.button-subtle:active:not(.button-disabled) { background: #c7cce8; } /* Page variant (surface="page"): Kim's PWA empty-state design, 21.07.2026. Neutral background, no card/surface/shadow -- sits directly on the page/app background. Always a single vertical column (title, subtext, actions, illustration): the "extended" two-column grid never applies here, because the JS keeps `empty-state-extended` off whenever `empty-state-page` is on (see qdna-empty-state.js _render()). With `empty-state-extended` absent, the host stays plain `display: block` (the base .qdnapro-empty-state rule above), so the copy column and the illustration column -- both already siblings appended in that order -- simply stack top to bottom with no extra layout rule needed for that. Title and subtext use the semantic --c-brand-purple / --c-text-heading custom properties (design-tokens/_design-tokens.scss) instead of hardcoded hex, so both automatically read correctly in [data-theme=dark] with no separate dark-mode override required here. */ .qdnapro-empty-state.empty-state-page { max-width: 480px; padding: 8px 24px 32px; background: transparent; border: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } .qdnapro-empty-state.empty-state-page .empty-state-title { color: var(--c-brand-purple, #40499a); font-weight: 700; } .qdnapro-empty-state.empty-state-page .empty-state-wink { color: var(--c-text-heading, #1a1f4d); font-style: normal; } /* On-purple variant (surface="on-purple"): the page variant's layout, recoloured for a purple surface. The JS gives this variant BOTH empty-state-page and empty-state-on-purple, so everything above still applies and only the copy colours change here -- one layout, two colour sets, so a spacing fix can never land on one and miss the other. Used by the PWA tasklist chooser, which paints its own --c-purple-500 background; without this the page variant's brand-purple title and dark-grey subtext sit unreadable on that purple. [Kim 30.07.2026] */ .qdnapro-empty-state.empty-state-page.empty-state-on-purple .empty-state-title { color: var(--c-text-on-action, #ffffff); } .qdnapro-empty-state.empty-state-page.empty-state-on-purple .empty-state-wink { color: var(--c-white-70, rgba(255, 255, 255, 0.7)); } /* Actions row: 0, 1 or 2 qdnapro-button children (see the actions-slot contract in qdna-empty-state.js). Every button gets flex: 1 1 0, so a single button fills the whole row (soft full-width CTA) and two buttons split it evenly with equal height (align-items: stretch) -- no :only-child / :has() selector needed for that. Radius is bumped to the --r-3 (12px) token, scoped to this variant's actions row only, so qdnapro-button's normal 8px radius everywhere else is untouched. */ .qdnapro-empty-state.empty-state-page .empty-state-actions { width: 100%; max-width: 420px; margin: 0 auto; align-items: stretch; flex-wrap: nowrap; gap: 12px; } .qdnapro-empty-state.empty-state-page .empty-state-actions .qdnapro-button { flex: 1 1 0; min-width: 0; border-radius: var(--r-3, 12px); } @media (max-width: 480px) { .qdnapro-empty-state.empty-state-page .empty-state-actions { flex-wrap: wrap; } .qdnapro-empty-state.empty-state-page .empty-state-actions .qdnapro-button { flex: 1 1 100%; } } /* Illustration: large, and always faded to 60% opacity -- this is a decorative choice, not a "disabled" state, so it is done here rather than via qdnapro-illustration's own `disabled` attribute (which carries different semantics/styling). The generic 260px cap below is removed so the illustration's own `size` attribute fully controls its width, same as any other qdnapro-illustration usage. */ .qdnapro-empty-state.empty-state-page .empty-state-illustration { margin-top: 32px; opacity: 0.6; } .qdnapro-empty-state.empty-state-page .empty-state-illustration img, .qdnapro-empty-state.empty-state-page .empty-state-illustration svg { max-width: none; } /* Extended layout: two-column grid when preview or illustration is present. */ .qdnapro-empty-state.empty-state-extended { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto); align-items: center; text-align: left; max-width: 1020px; padding: 36px 40px 40px; gap: 28px; } .qdnapro-empty-state.empty-state-extended .empty-state-copy { align-items: flex-start; } .qdnapro-empty-state.empty-state-extended .empty-state-actions { justify-content: flex-start; } .qdnapro-empty-state .empty-state-copy { display: flex; flex-direction: column; align-items: center; } .qdnapro-empty-state .empty-state-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 999px; background: #e6e9ff; color: #40499a; font-size: 12px; font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase; margin-bottom: 16px; } .qdnapro-empty-state .empty-state-title { font-size: 28px; line-height: 36px; font-weight: 600; color: #0b0b0d; margin: 0 0 12px; } .qdnapro-empty-state .empty-state-wink { font-size: 16px; line-height: 24px; color: #4a4d5a; margin: 0 0 24px; font-style: italic; } .qdnapro-empty-state .empty-state-body { font-size: 15px; line-height: 24px; color: #6e7280; margin: 0 0 28px; max-width: 480px; } .qdnapro-empty-state .empty-state-body p { margin: 0 0 12px; } .qdnapro-empty-state .empty-state-body p:last-child { margin-bottom: 0; } .qdnapro-empty-state .empty-state-actions { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; } .qdnapro-empty-state .empty-state-preview, .qdnapro-empty-state .empty-state-illustration { display: flex; align-items: center; justify-content: center; } .qdnapro-empty-state .empty-state-preview img, .qdnapro-empty-state .empty-state-illustration img, .qdnapro-empty-state .empty-state-preview svg, .qdnapro-empty-state .empty-state-illustration svg { width: 100%; max-width: 260px; height: auto; display: block; } .qdnapro-empty-state .empty-state-preview img { border-radius: 10px; box-shadow: 0 1px 2px rgba(20, 25, 80, 0.05), 0 8px 22px rgba(20, 25, 80, 0.1); } @media (max-width: 960px) { .qdnapro-empty-state.empty-state-extended { grid-template-columns: 1fr; } .qdnapro-empty-state.empty-state-extended .empty-state-illustration { display: none; } } [data-theme=dark] .qdnapro-empty-state { background: rgba(46, 48, 54, 0.55); border-color: rgba(255, 255, 255, 0.08); } [data-theme=dark] .qdnapro-empty-state .empty-state-eyebrow { background: #3a3555; color: #c0c5ff; } [data-theme=dark] .qdnapro-empty-state .empty-state-title { color: #e1e3e6; } [data-theme=dark] .qdnapro-empty-state .empty-state-wink { color: #a6aab3; } [data-theme=dark] .qdnapro-empty-state .empty-state-body { color: #898e99; } .qdnapro-event-card { --event-card-bg: var(--c-purple-50, #e6e9ff); --event-card-text: var(--c-purple-500, #40499a); position: relative; display: flex; flex-direction: column; gap: 2px; box-sizing: border-box; width: 100%; height: 100%; min-width: 0; min-height: 0; padding: 4px 6px; overflow: hidden; border-radius: var(--r-2, 8px); background: var(--event-card-bg); color: var(--event-card-text); font-family: var(--theme-font-family, "Inter", sans-serif); text-align: left; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; transition: filter 0.16s ease, transform 0.1s ease, box-shadow 0.16s ease; } .qdnapro-event-card--complete { --event-card-bg: var(--c-signal-green-100, #d8f4e3); --event-card-text: var(--c-signal-green-text, #428b6e); } .qdnapro-event-card--overdue { --event-card-bg: var(--c-signal-red-bg, #fee3e3); --event-card-text: var(--c-signal-red-text, #c65a5a); } .qdnapro-event-card--blocked { --event-card-bg: var(--c-grey-50, #f0f1f2); --event-card-text: var(--c-grey-600, #565b66); } .qdnapro-event-card--inprogress { --event-card-bg: var(--c-signal-orange-bg, #fdeadc); --event-card-text: var(--c-signal-orange-text, #bc6a1f); } .qdnapro-event-card--personal { --event-card-bg: var(--c-signal-pink-bg, #f6e1e8); --event-card-text: var(--c-signal-pink-text, #b25777); } .qdnapro-event-card.is-draft { border: 1.5px dashed var(--event-card-text); background: color-mix(in srgb, var(--event-card-bg) 55%, transparent); } .qdnapro-event-card--size-small { padding: 2px 5px; gap: 1px; } .qdnapro-event-card--size-small .qdnapro-event-card__title { font-size: 12px; font-weight: 500; line-height: 16px; } .qdnapro-event-card--size-small .qdnapro-event-card__meta-text { font-size: 11px; line-height: 14px; } .qdnapro-event-card--size-small .qdnapro-event-card__meta .qdnapro-icon, .qdnapro-event-card--size-small .qdnapro-event-card__meta qdnapro-icon { width: 12px; height: 12px; } .qdnapro-event-card.is-pressed { filter: brightness(0.94); transform: scale(0.98); } .qdnapro-event-card:focus { outline: none; } .qdnapro-event-card:focus-visible, .qdnapro-event-card.force-focus { outline: none; box-shadow: 0 0 0 2px var(--c-purple-500, #40499a), 0 0 0 6px var(--c-purple-soft-18, rgba(64, 73, 154, 0.18)); } .qdnapro-event-card__title { flex: none; min-width: 0; font-size: 14px; font-weight: 600; line-height: 20px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; word-break: break-word; } .qdnapro-event-card__row { flex: none; display: flex; align-items: center; gap: 4px; min-width: 0; } .qdnapro-event-card__row .qdnapro-event-card__title { flex: 1; min-width: 0; } .qdnapro-event-card__avatar { flex: none; } .qdnapro-event-card__meta { flex: none; display: flex; align-items: center; gap: 4px; min-width: 0; } .qdnapro-event-card__meta .qdnapro-icon, .qdnapro-event-card__meta qdnapro-icon { flex: none; width: 16px; height: 16px; color: inherit; } .qdnapro-event-card__meta-text { min-width: 0; font-size: 12px; font-weight: 400; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .qdnapro-event-card__conflict { position: absolute; top: 2px; right: 2px; width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 0 1.5px #fff; pointer-events: none; } .qdnapro-event-card__conflict--overlap { background: #f59e0b; } .qdnapro-event-card__conflict--unavailable { background: #dc2626; } .qdnapro-event-card__conflict--accepted { background: transparent; } .qdnapro-event-card__conflict--overlap.qdnapro-event-card__conflict--accepted { box-shadow: 0 0 0 1.5px #fff, inset 0 0 0 1.5px #f59e0b; } .qdnapro-event-card__conflict--unavailable.qdnapro-event-card__conflict--accepted { box-shadow: 0 0 0 1.5px #fff, inset 0 0 0 1.5px #dc2626; } qdnapro-export-modal { display: none; } qdnapro-export-modal[open] { display: block; } qdnapro-export-modal .qpem-overlay { position: fixed; inset: 0; z-index: 1080; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(20, 22, 40, 0.45); } qdnapro-export-modal .qpem-dialog { width: 100%; max-width: 760px; max-height: 90vh; display: flex; flex-direction: column; background: #fff; border-radius: 16px; box-shadow: 0 24px 60px rgba(20, 22, 40, 0.28); padding: 24px 28px; overflow: hidden; } qdnapro-export-modal .qpem-head { display: flex; align-items: center; gap: 10px; } qdnapro-export-modal .qpem-head-icon { display: inline-flex; color: var(--c-purple-500, #40499a); } qdnapro-export-modal .qpem-title { margin: 0; font-size: 18px; font-weight: 700; color: var(--c-purple-500, #40499a); flex: 1; } qdnapro-export-modal .qpem-close { border: 0; background: transparent; cursor: pointer; color: #8a8f9e; padding: 4px; border-radius: 8px; display: inline-flex; } qdnapro-export-modal .qpem-close:hover { background: #f1f2f6; color: #4a4f5e; } qdnapro-export-modal .qpem-subtitle { margin: 12px 0 8px; color: #5a5f6e; font-size: 14px; } qdnapro-export-modal .qpem-hints { margin: 0 0 16px; padding-left: 20px; color: #5a5f6e; font-size: 13px; } qdnapro-export-modal .qpem-hints li { margin-bottom: 4px; } qdnapro-export-modal .qpem-panels { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: stretch; flex: 1; min-height: 0; } qdnapro-export-modal .qpem-panel { border: 1px solid #e9ecf3; border-radius: 12px; padding: 16px; display: flex; flex-direction: column; min-height: 0; } qdnapro-export-modal .qpem-panel-head { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--c-purple-500, #40499a); margin-bottom: 12px; } qdnapro-export-modal .qpem-selectall { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 14px; color: #5a5f6e; cursor: pointer; } qdnapro-export-modal .qpem-list { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; flex: 1; min-height: 80px; } qdnapro-export-modal .qpem-chip { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; border: 1px solid #e9ecf3; background: #fbfbfd; cursor: grab; user-select: none; color: #9aa0ae; } qdnapro-export-modal .qpem-chip:hover { border-color: #d7dbe6; } qdnapro-export-modal .qpem-chip--active { background: var(--c-purple-50, #e6e9ff); border-color: var(--c-purple-100, #c0c5ff); color: #2a2e5e; } qdnapro-export-modal .qpem-chip--dragging { opacity: 0.4; } qdnapro-export-modal .qpem-grip { color: #b3b8c6; cursor: grab; } qdnapro-export-modal .qpem-chip-label { flex: 1; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } qdnapro-export-modal .qpem-sort { border: 0; background: transparent; cursor: pointer; padding: 2px; border-radius: 6px; display: inline-flex; color: #b3b8c6; } qdnapro-export-modal .qpem-sort:hover { background: rgba(64, 73, 154, 0.1); } qdnapro-export-modal .qpem-sort--asc, qdnapro-export-modal .qpem-sort--desc { color: var(--c-purple-500, #40499a); } qdnapro-export-modal .qpem-marker { height: 2px; border-radius: 2px; background: var(--c-purple-400, #5a64b8); margin: 0 2px; } qdnapro-export-modal .qpem-movers { display: flex; flex-direction: column; justify-content: center; gap: 12px; } qdnapro-export-modal .qpem-foot { display: flex; align-items: center; justify-content: flex-end; gap: 20px; padding-top: 20px; } qdnapro-export-modal .qpem-cancel { border: 0; background: transparent; cursor: pointer; font-size: 15px; color: #5a5f6e; } qdnapro-export-modal .qpem-cancel:hover { color: #2a2e5e; } @media (max-width: 640px) { qdnapro-export-modal .qpem-panels { grid-template-columns: 1fr; } qdnapro-export-modal .qpem-movers { flex-direction: row; justify-content: center; } } .qdnapro-month-grid { --month-grid-cell: 64px; display: block; box-sizing: border-box; width: 100%; background: var(--c-bg-card, #fff); font-family: var(--theme-font-family, "Inter", sans-serif); user-select: none; -webkit-tap-highlight-color: transparent; } .qdnapro-month-grid__header { display: flex; align-items: center; gap: 2px; border-bottom: 1px solid var(--c-grey-100, #e7e9ec); } .qdnapro-month-grid__header-title { flex: 1 1 auto; min-width: 0; text-align: center; font-size: 14px; font-weight: 700; color: var(--c-grey-800, #1c1b29); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .qdnapro-month-grid__nav-btn { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--c-grey-600, #565b66); cursor: pointer; -webkit-tap-highlight-color: transparent; } .qdnapro-month-grid__nav-btn qdnapro-icon { display: block; width: 18px; height: 18px; } .qdnapro-month-grid__nav-btn:hover { color: var(--c-grey-800, #1c1b29); } .qdnapro-month-grid__nav-btn:disabled { color: var(--c-grey-300, #cdd1d6); cursor: not-allowed; pointer-events: none; } .qdnapro-month-grid__nav-btn:disabled:hover { color: var(--c-grey-300, #cdd1d6); } .qdnapro-month-grid__weekdays { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--c-grey-100, #e7e9ec); } .qdnapro-month-grid__weekday { padding: 6px 0 4px; text-align: center; font-size: 11px; font-weight: 600; line-height: 16px; color: var(--c-grey-500, #6b7280); text-transform: lowercase; } .qdnapro-month-grid__weeks { display: block; } .qdnapro-month-grid__week { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--c-grey-100, #e7e9ec); } .qdnapro-month-grid[fill] { display: flex; flex-direction: column; height: 100%; } .qdnapro-month-grid[fill] .qdnapro-month-grid__weeks { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } .qdnapro-month-grid[fill] .qdnapro-month-grid__week { flex: 1 1 0; min-height: var(--month-grid-cell); } .qdnapro-month-grid__cell { box-sizing: border-box; min-height: var(--month-grid-cell); min-width: 0; padding: 2px 2px 3px; border-right: 1px solid var(--c-grey-100, #e7e9ec); cursor: pointer; } .qdnapro-month-grid__cell:last-child { border-right: 0; } .qdnapro-month-grid__daynum { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin: 0 auto 2px; border-radius: 50%; font-size: 13px; font-weight: 500; line-height: 16px; color: var(--c-grey-800, #1c1b29); } .qdnapro-month-grid__cell--outside .qdnapro-month-grid__daynum { color: var(--c-grey-400, #9ca3af); } .qdnapro-month-grid__cell--blocked { cursor: not-allowed; opacity: 0.45; } .qdnapro-month-grid__cell.is-selected:not(.is-today) .qdnapro-month-grid__daynum { background: var(--c-bg-secondary-purple, #e6e9ff); color: var(--c-action-500, #4652f3); font-weight: 700; } .qdnapro-month-grid__cell.is-today .qdnapro-month-grid__daynum { background: var(--c-action-500, #4652f3); color: var(--c-bg-card, #fff); font-weight: 700; } .qdnapro-month-grid__bars { display: flex; flex-direction: column; gap: 1px; min-width: 0; margin-bottom: 1px; } .qdnapro-month-grid__bar, .qdnapro-month-grid__bar-spacer { display: block; box-sizing: border-box; height: 13px; min-width: 0; } .qdnapro-month-grid__bar-spacer { visibility: hidden; } .qdnapro-month-grid__bar { --month-grid-chip-bg: var(--c-purple-50, #e6e9ff); --month-grid-chip-text: var(--c-purple-500, #40499a); padding: 0 3px; background: var(--month-grid-chip-bg); color: var(--month-grid-chip-text); font-size: 10px; font-weight: 600; line-height: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; border-radius: 0; } .qdnapro-month-grid__bar-overlay { position: absolute; z-index: 1; top: calc(28px + var(--bar-lane, 0) * 14px); left: calc(14.2857142857% * var(--bar-start-col, 0) + var(--bar-inset-l, 0px)); width: calc(14.2857142857% * var(--bar-span-cols, 1) - var(--bar-inset-l, 0px) - var(--bar-inset-r, 0px)); pointer-events: none; } .qdnapro-month-grid__bar--dimmed { opacity: 0.45; } .qdnapro-month-grid__bar--round-start { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } .qdnapro-month-grid__bar--round-end { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } .qdnapro-month-grid__bar-label { pointer-events: none; } .qdnapro-month-grid__bar--inprogress { --month-grid-chip-bg: var(--c-signal-orange-bg, #fdeadc); --month-grid-chip-text: var(--c-signal-orange-text, #bc6a1f); } .qdnapro-month-grid__bar--complete { --month-grid-chip-bg: var(--c-signal-green-100, #d8f4e3); --month-grid-chip-text: var(--c-signal-green-text, #428b6e); } .qdnapro-month-grid__bar--overdue { --month-grid-chip-bg: var(--c-signal-red-bg, #fee3e3); --month-grid-chip-text: var(--c-signal-red-text, #c65a5a); } .qdnapro-month-grid__bar--blocked { --month-grid-chip-bg: var(--c-grey-50, #f0f1f2); --month-grid-chip-text: var(--c-grey-600, #565b66); } .qdnapro-month-grid__bar--personal { --month-grid-chip-bg: var(--c-signal-pink-bg, #f6e1e8); --month-grid-chip-text: var(--c-signal-pink-text, #b25777); } .qdnapro-month-grid__chips { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .qdnapro-month-grid__chip { --month-grid-chip-bg: var(--c-purple-50, #e6e9ff); --month-grid-chip-text: var(--c-purple-500, #40499a); display: block; min-width: 0; padding: 1px 3px; border-radius: 3px; background: var(--month-grid-chip-bg); color: var(--month-grid-chip-text); font-size: 10px; font-weight: 600; line-height: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; } .qdnapro-month-grid__chip--inprogress { --month-grid-chip-bg: var(--c-signal-orange-bg, #fdeadc); --month-grid-chip-text: var(--c-signal-orange-text, #bc6a1f); } .qdnapro-month-grid__chip--complete { --month-grid-chip-bg: var(--c-signal-green-100, #d8f4e3); --month-grid-chip-text: var(--c-signal-green-text, #428b6e); } .qdnapro-month-grid__chip--overdue { --month-grid-chip-bg: var(--c-signal-red-bg, #fee3e3); --month-grid-chip-text: var(--c-signal-red-text, #c65a5a); } .qdnapro-month-grid__chip--blocked { --month-grid-chip-bg: var(--c-grey-50, #f0f1f2); --month-grid-chip-text: var(--c-grey-600, #565b66); } .qdnapro-month-grid__chip--personal { --month-grid-chip-bg: var(--c-signal-pink-bg, #f6e1e8); --month-grid-chip-text: var(--c-signal-pink-text, #b25777); } .qdnapro-month-grid__more { padding: 1px 3px; font-size: 10px; font-weight: 600; line-height: 13px; color: var(--c-grey-500, #6b7280); pointer-events: none; } .qdnapro-month-grid__cell--outside .qdnapro-month-grid__chip, .qdnapro-month-grid__cell--outside .qdnapro-month-grid__more { opacity: 0.45; } .qdnapro-month-strip { display: block; box-sizing: border-box; width: 100%; background: #fff; font-family: var(--theme-font-family, "Inter", sans-serif); user-select: none; touch-action: pan-y; overflow-x: clip; } .qdnapro-month-strip__month { padding: 2px 0 2px; font-size: 15px; font-weight: 600; line-height: 20px; text-align: center; color: var(--c-grey-500, #6b7280); } .qdnapro-month-strip__weekdays { display: grid; grid-template-columns: repeat(7, 1fr); padding: 0 4px 2px; } .qdnapro-month-strip__weekdays span { font-size: 12px; line-height: 16px; text-align: center; color: var(--c-grey-500, #6b7280); } .qdnapro-month-strip__body { overflow: hidden; transition: height 0.25s ease; } .qdnapro-month-strip__rows { display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 48px; padding: 0 4px; transition: transform 0.25s ease; will-change: transform; } .qdnapro-month-strip__body.is-dragging, .qdnapro-month-strip__body.is-dragging .qdnapro-month-strip__rows { transition: none; } .qdnapro-month-strip__rows.is-enter-next { animation: qms-slide-next 0.24s cubic-bezier(0.2, 0.7, 0.3, 1); } .qdnapro-month-strip__rows.is-enter-prev { animation: qms-slide-prev 0.24s cubic-bezier(0.2, 0.7, 0.3, 1); } @keyframes qms-slide-next { from { translate: 28px 0; opacity: 0.35; } to { translate: 0 0; opacity: 1; } } @keyframes qms-slide-prev { from { translate: -28px 0; opacity: 0.35; } to { translate: 0 0; opacity: 1; } } .qdnapro-month-strip__day { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 0; padding: 0; background: transparent; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; } .qdnapro-month-strip__num { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; font-size: 14px; line-height: 1; color: var(--c-grey-950, #0b0b0d); background: var(--day-tint, transparent); transition: background 0.18s ease, color 0.18s ease; } @keyframes qdnapro-month-strip-pop { 0% { transform: scale(0.55); } 70% { transform: scale(1.12); } 100% { transform: scale(1); } } .qdnapro-month-strip__day.is-pop .qdnapro-month-strip__num { animation: qdnapro-month-strip-pop 0.28s cubic-bezier(0.34, 1.56, 0.64, 1); } .qdnapro-month-strip__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--c-purple-500, #40499a); } .qdnapro-month-strip__day.is-selected:not(.is-today):not(.is-disabled) .qdnapro-month-strip__num { background: var(--c-bg-secondary-purple, #e6e9ff); color: var(--c-purple-500, #40499a); font-weight: 600; } .qdnapro-month-strip__day.is-today:not(.is-disabled) .qdnapro-month-strip__num { background: var(--c-purple-500, #40499a); color: #fff; font-weight: 600; } .qdnapro-month-strip__day.is-muted .qdnapro-month-strip__num { color: var(--c-grey-400, #a6aab3); } .qdnapro-month-strip__day.is-muted .qdnapro-month-strip__dot { background: var(--c-grey-400, #a6aab3); } .qdnapro-month-strip__day.is-disabled { cursor: default; } .qdnapro-month-strip__day.is-disabled .qdnapro-month-strip__num { color: var(--c-grey-400, #a6aab3); background: transparent; } .qdnapro-month-strip__day.is-disabled .qdnapro-month-strip__dot { background: var(--c-grey-400, #a6aab3); } .qdnapro-month-strip__day:focus { outline: none; } .qdnapro-month-strip__day:focus-visible .qdnapro-month-strip__num { box-shadow: 0 0 0 2px var(--c-purple-500, #40499a), 0 0 0 6px var(--c-purple-soft-18, rgba(64, 73, 154, 0.18)); } .qdnapro-month-strip__months { display: none; gap: 8px; padding: 8px 12px 2px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: none; touch-action: pan-x; } .qdnapro-month-strip__months::-webkit-scrollbar { display: none; } .qdnapro-month-strip[expanded] .qdnapro-month-strip__months { display: flex; } .qdnapro-month-strip__months .qdnapro-button { flex: none; position: relative; } .qdnapro-month-strip__months .qdnapro-button::after { content: ""; position: absolute; left: 0; right: 0; top: -8px; bottom: -8px; } .qdnapro-month-strip__months .qdnapro-button.button-size-compact { min-height: 34px; padding: 6px 14px; font-size: 14px; line-height: 20px; } .qdnapro-month-strip__year-label { display: flex; align-items: center; flex: none; padding: 0 2px; font-size: 12px; font-weight: 700; line-height: 20px; color: var(--c-grey-500, #6b7280); white-space: nowrap; } .qdnapro-month-strip__grabber { display: flex; align-items: center; justify-content: center; padding: 10px 0 12px; cursor: grab; touch-action: none; } .qdnapro-month-strip__grabber span { width: 36px; height: 4px; border-radius: 999px; background: var(--c-grey-300, #c4c7cc); } .qdnapro-month-strip__grabber:focus { outline: none; } .qdnapro-month-strip__grabber:focus-visible span { box-shadow: 0 0 0 2px var(--c-purple-500, #40499a), 0 0 0 6px var(--c-purple-soft-18, rgba(64, 73, 154, 0.18)); } @media (prefers-reduced-motion: reduce) { .qdnapro-month-strip__body { transition: none; } .qdnapro-month-strip__rows { transition: none; } .qdnapro-month-strip__num { transition: none; } .qdnapro-month-strip__day.is-pop .qdnapro-month-strip__num { animation: none; } .qdnapro-month-strip__rows.is-enter-next, .qdnapro-month-strip__rows.is-enter-prev { animation: none; } } .qdnapro-time-grid { --time-grid-hour: 52px; display: block; box-sizing: border-box; width: 100%; height: 100%; min-height: 0; font-family: var(--theme-font-family, "Inter", sans-serif); } .qdnapro-time-grid__scroll-y { position: relative; width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; touch-action: pan-y; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scrollbar-width: none; } .qdnapro-time-grid__scroll-y::-webkit-scrollbar { width: 0; height: 0; display: none; } .qdnapro-time-grid__dayheader { position: sticky; top: 0; z-index: 7; display: flex; align-items: stretch; height: var(--time-grid-dayheader-h, 40px); background: var(--c-bg-card, #fff); border-bottom: 1px solid var(--c-grey-100, #e7e9ec); } .qdnapro-time-grid__dayheader-corner { flex: none; width: 56px; background: var(--c-bg-card, #fff); } .qdnapro-time-grid__dayheader-vp { flex: 1; min-width: 0; overflow: hidden; } .qdnapro-time-grid__dayheader-grid { display: flex; align-items: stretch; height: 100%; width: max-content; } .qdnapro-time-grid__daycell { appearance: none; -webkit-appearance: none; border: none; margin: 0; font: inherit; text-align: inherit; color: inherit; flex: none; width: var(--time-grid-colw, 120px); box-sizing: border-box; border-right: 1px solid var(--c-grey-100, #e7e9ec); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 2px 4px; background: var(--c-bg-card, #fff); cursor: pointer; } .qdnapro-time-grid__daycell:hover { background: var(--c-grey-50, #f0f1f2); } .qdnapro-time-grid__daycell:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--c-purple-500, #40499a); } .qdnapro-time-grid__daycell-weekday { font-size: 10px; font-weight: 600; line-height: 13px; color: var(--c-grey-500, #6b7280); text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; } .qdnapro-time-grid__daycell-daynum { font-size: 13px; font-weight: 600; line-height: 16px; color: var(--c-grey-800, #1c1b29); white-space: nowrap; } .qdnapro-time-grid__daycell.is-today .qdnapro-time-grid__daycell-weekday { color: var(--c-action-500, #4652f3); } .qdnapro-time-grid__daycell.is-today .qdnapro-time-grid__daycell-daynum { color: #fff; background: var(--c-action-500, #4652f3); padding: 1px 8px; border-radius: 999px; } .qdnapro-time-grid--has-day-header .qdnapro-time-grid__allday { top: var(--time-grid-dayheader-h, 40px); } .qdnapro-time-grid__allday { position: sticky; top: 0; z-index: 6; display: flex; align-items: stretch; background: var(--c-bg-card, #fff); border-bottom: 1px solid var(--c-grey-100, #e7e9ec); overflow: hidden; transition: height 0.2s ease; } .qdnapro-time-grid__allday.is-empty { border-bottom-width: 0; } .qdnapro-time-grid__allday-corner { flex: none; width: 56px; z-index: 1; background: var(--c-bg-card, #fff); } .qdnapro-time-grid__allday-vp { flex: 1; min-width: 0; overflow: hidden; } .qdnapro-time-grid__allday-grid { display: grid; row-gap: 2px; column-gap: 0; grid-auto-rows: 26px; align-items: stretch; padding: 4px 2px 4px 0; width: max-content; } .qdnapro-time-grid__allday-grid.is-scrollable { max-height: 112px; overflow-y: auto; } .qdnapro-time-grid__allday-grid .qdnapro-event-card { height: 26px; min-height: 0; padding: 3px 8px; margin: 0 1px; } .qdnapro-time-grid__allday-toggle { appearance: none; border: 0; background: transparent; text-align: left; padding: 3px 8px; margin: 0 1px; font-family: inherit; font-size: 12px; font-weight: 600; line-height: 20px; color: var(--c-grey-500, #6b7280); border-radius: var(--r-2, 8px); cursor: pointer; } .qdnapro-time-grid__allday-toggle:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--c-purple-500, #40499a), 0 0 0 6px var(--c-purple-soft-18, rgba(64, 73, 154, 0.18)); } .qdnapro-time-grid__hours { display: flex; align-items: stretch; } .qdnapro-time-grid__gutter { position: relative; flex: none; width: 56px; height: calc(var(--time-grid-hours, 24) * var(--time-grid-hour)); z-index: 5; background: var(--c-bg-card, #fff); } .qdnapro-time-grid__time { position: absolute; right: 8px; transform: translateY(-50%); font-size: 12px; line-height: 16px; color: var(--c-grey-500, #6b7280); white-space: nowrap; user-select: none; } .qdnapro-time-grid__scroll-x { flex: 1; min-width: 0; height: calc(var(--time-grid-hours, 24) * var(--time-grid-hour)); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; } .qdnapro-time-grid__scroll-x::-webkit-scrollbar { width: 0; height: 0; display: none; } .qdnapro-time-grid__strip { display: flex; align-items: stretch; height: 100%; } .qdnapro-time-grid__day { position: relative; flex: none; width: var(--time-grid-colw, 120px); box-sizing: border-box; height: 100%; border-right: 1px solid var(--c-grey-100, #e7e9ec); scroll-snap-align: start; background-image: repeating-linear-gradient(to bottom, var(--c-grey-100, #e7e9ec) 0, var(--c-grey-100, #e7e9ec) 1px, transparent 1px, transparent var(--time-grid-hour, 52px)); } .qdnapro-time-grid--week .qdnapro-time-grid__day { scroll-snap-align: none; } .qdnapro-time-grid--week .qdnapro-time-grid__day.is-weekstart { scroll-snap-align: start; } .qdnapro-time-grid__states { position: absolute; inset: 0; pointer-events: none; } .qdnapro-time-grid__state { position: absolute; left: 0; right: 0; } .qdnapro-time-grid__state--disabled { background: var(--c-grey-50, #f0f1f2); } .qdnapro-time-grid__events { position: absolute; inset: 0; pointer-events: none; } .qdnapro-time-grid__events .qdnapro-event-card { position: absolute; pointer-events: auto; } .qdnapro-time-grid__events .qdnapro-event-card[data-qtg-draggable] { cursor: grab; } .qdnapro-time-grid__events .qdnapro-event-card[data-qtg-draggable]:active, .qdnapro-time-grid__events .qdnapro-event-card.is-dragging { cursor: grabbing; } .qdnapro-time-grid__events .qdnapro-event-card.is-dragging { transition: none; z-index: 5; box-shadow: 0 6px 18px rgba(28, 27, 41, 0.22), 0 2px 6px rgba(28, 27, 41, 0.14); opacity: 0.92; } .qdnapro-time-grid__events .qdnapro-event-card.is-drag-return { transition: transform 0.2s cubic-bezier(0.34, 1.3, 0.64, 1); } @media (hover: hover) and (pointer: fine) { .qdnapro-time-grid__events .qdnapro-event-card[data-qtg-resizable]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; cursor: ns-resize; z-index: 1; } .qdnapro-time-grid__events .qdnapro-event-card[data-qtg-resizable]:hover::after { border-bottom: 2px solid var(--c-purple-500, #40499a); border-bottom-left-radius: var(--r-2, 8px); border-bottom-right-radius: var(--r-2, 8px); opacity: 0.55; } } .qdnapro-time-grid__events .qdnapro-event-card.is-resizing { transition: none; z-index: 5; cursor: ns-resize; box-shadow: 0 6px 18px rgba(28, 27, 41, 0.22), 0 2px 6px rgba(28, 27, 41, 0.14); opacity: 0.92; } .qdnapro-time-grid__events .qdnapro-event-card.is-drag-return.is-resizing { transition: height 0.2s cubic-bezier(0.34, 1.3, 0.64, 1); } .qdnapro-time-grid__drop { position: absolute; left: 2px; right: 2px; border: 2px dashed var(--c-purple-500, #40499a); border-radius: var(--r-2, 8px); background: var(--c-purple-soft-12, rgba(64, 73, 154, 0.12)); z-index: 2; pointer-events: none; box-sizing: border-box; } .qdnapro-time-grid__drop-label { position: absolute; top: 2px; left: 6px; font-size: 11px; font-weight: 600; line-height: 16px; color: var(--c-purple-500, #40499a); white-space: nowrap; } .qdnapro-time-grid__drop.is-reject { border-color: var(--c-signal-red-text, #c65a5a); background: var(--c-signal-red-bg, #fee3e3); } .qdnapro-time-grid__drop.is-reject .qdnapro-time-grid__drop-label { color: var(--c-signal-red-text, #c65a5a); } .qdnapro-time-grid__drop--resize .qdnapro-time-grid__drop-label { top: 100%; margin-top: 2px; } .qdnapro-time-grid__drop.is-over-estimate, .qdnapro-time-grid__drop.is-under-estimate { border-color: var(--c-signal-orange-text, #bc6a1f); background: var(--c-signal-orange-bg, #fdeadc); } .qdnapro-time-grid__drop.is-over-estimate .qdnapro-time-grid__drop-label, .qdnapro-time-grid__drop.is-under-estimate .qdnapro-time-grid__drop-label { color: var(--c-signal-orange-text, #bc6a1f); } @media (prefers-reduced-motion: reduce) { .qdnapro-time-grid__events .qdnapro-event-card.is-drag-return { transition: none; } .qdnapro-time-grid__allday { transition: none; } } .qdnapro-time-grid__now { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid var(--c-tag-critical-text); z-index: 3; pointer-events: none; } /* The "now" dot sits fully INSIDE today's column (fixed 29.07.2026, Kim: "valt altijd weg onder het linker paneel"). It used to be `left: -5px`, straddling the column's left edge, so half of it landed under the times gutter — and the gutter is opaque with z-index 5 against this line's z-index 3, so that half was simply painted over. In the day view today's column is ALWAYS the leftmost one, which is why it was always broken there rather than only sometimes. Raising the line above the gutter instead would be wrong: the line is supposed to slide under the gutter when you scroll horizontally, that is what makes the gutter read as a fixed panel. So the dot moves in, and the gutter keeps winning. */ .qdnapro-time-grid__now::before { content: ""; position: absolute; left: 0; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--c-tag-critical-text); } .qdnapro-time-picker { position: relative; display: inline-flex; align-items: center; gap: 2px; font-family: var(--theme-font-family, "Inter", sans-serif); user-select: none; } .qdnapro-time-picker__highlight { position: absolute; left: 4px; right: 4px; top: 50%; height: 40px; transform: translateY(-50%); border-radius: 10px; background: var(--c-purple-soft-08, rgba(64, 73, 154, 0.08)); pointer-events: none; } .qdnapro-time-picker__col { position: relative; width: 72px; height: 200px; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: none; border-radius: 10px; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 28%, #000 72%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 28%, #000 72%, transparent); } .qdnapro-time-picker__col::-webkit-scrollbar { display: none; } .qdnapro-time-picker__list { padding: 80px 0; } .qdnapro-time-picker__item { display: flex; align-items: center; justify-content: center; width: 100%; height: 40px; border: 0; padding: 0; background: transparent; font: inherit; font-size: 20px; font-variant-numeric: tabular-nums; color: var(--c-grey-400, #a6aab3); cursor: pointer; scroll-snap-align: center; -webkit-tap-highlight-color: transparent; transition: color 0.12s ease, font-weight 0.12s ease; } .qdnapro-time-picker__item.is-selected { color: var(--c-purple-500, #40499a); font-weight: 600; } .qdnapro-time-picker__colon { font-size: 20px; font-weight: 600; line-height: 40px; color: var(--c-grey-500, #6b7280); } .qdnapro-time-picker__col:focus { outline: none; } .qdnapro-time-picker__col:focus-visible { box-shadow: 0 0 0 2px var(--c-purple-500, #40499a), 0 0 0 6px var(--c-purple-soft-18, rgba(64, 73, 154, 0.18)); } .qdnapro-time-picker[disabled] { opacity: 0.45; } .qdnapro-time-picker[disabled] .qdnapro-time-picker__col { pointer-events: none; } @media (prefers-reduced-motion: reduce) { .qdnapro-time-picker__item { transition: none; } } .qdnapro-time-select { display: block; width: 100%; box-sizing: border-box; font-family: var(--theme-font-family, "Inter", sans-serif); font-size: 14px; line-height: 24px; } .qdnapro-time-select * { box-sizing: border-box; } .qdnapro-time-select .ts-label { display: flex; align-items: baseline; margin-bottom: 4px; font-weight: 500; color: var(--c-grey-950, #0b0b0d); } .qdnapro-time-select .ts-label .ts-required { color: var(--c-signal-red-text, #c65a5a); margin-right: 2px; font-weight: 500; } .qdnapro-time-select .ts-field { display: flex; align-items: center; gap: 8px; background: #ffffff; border: 1px solid var(--c-grey-300, #c4c7cc); border-radius: 8px; padding: 0 12px; cursor: text; transition: border-color 120ms ease-out, box-shadow 120ms ease-out; } .qdnapro-time-select.ts-size-default .ts-field { min-height: 52px; } .qdnapro-time-select.ts-size-small .ts-field { min-height: 40px; } .qdnapro-time-select .ts-icon { display: inline-flex; width: 16px; height: 16px; color: var(--c-grey-400, #a6aab3); flex-shrink: 0; } .qdnapro-time-select .ts-chevron { display: inline-flex; width: 14px; height: 14px; color: var(--c-grey-400, #a6aab3); flex-shrink: 0; transition: transform 150ms ease; } .qdnapro-time-select.ts-open .ts-chevron { transform: rotate(180deg); } .qdnapro-time-select .ts-input { flex: 1; min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; font: inherit; color: var(--c-grey-950, #0b0b0d); } .qdnapro-time-select .ts-input::placeholder { color: var(--c-grey-400, #a6aab3); font-weight: 500; } .qdnapro-time-select .ts-input:disabled { color: var(--c-grey-400, #a6aab3); cursor: not-allowed; } .qdnapro-time-select .ts-field:focus-within { border-color: #535ba4; box-shadow: 0 0 0 3px var(--c-action-40, rgba(70, 82, 243, 0.4)); } .qdnapro-time-select.ts-error .ts-field { border-color: var(--c-signal-red-text, #c65a5a); } .qdnapro-time-select.ts-error .ts-field:focus-within { border-color: var(--c-signal-red-text, #c65a5a); box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.4); } .qdnapro-time-select.ts-disabled .ts-field { background: var(--c-grey-50, #f0f1f2); border-color: transparent; cursor: not-allowed; } .qdnapro-time-select.ts-disabled .ts-field:focus-within { box-shadow: none; } .qdnapro-time-select .ts-message { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 13px; line-height: 20px; } .qdnapro-time-select .ts-message qdnapro-icon { display: inline-flex; width: 16px; height: 16px; flex-shrink: 0; } .qdnapro-time-select .ts-message-error { color: var(--c-signal-red-text, #c65a5a); } .qdnapro-time-select-panel { background: #ffffff; border: 1px solid var(--c-grey-300, #c4c7cc); border-radius: 8px; padding: 4px; overflow-y: auto; overflow-x: hidden; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.15), 0 8px 12px 6px rgba(0, 0, 0, 0.075); font-family: var(--theme-font-family, "Inter", sans-serif); } .qdnapro-time-select-panel::-webkit-scrollbar { width: 8px; height: 8px; } .qdnapro-time-select-panel::-webkit-scrollbar-track { background: transparent; } .qdnapro-time-select-panel::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px; } .qdnapro-time-select-panel:hover::-webkit-scrollbar-thumb, .qdnapro-time-select-panel:focus-within::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.22); } .qdnapro-time-select-panel::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.34); } .qdnapro-time-select-panel .ts-panel-list { display: flex; flex-direction: column; gap: 1px; } .qdnapro-time-select-option { display: flex; align-items: center; width: 100%; border: 0; border-radius: 6px; padding: 8px 12px; background: transparent; font: inherit; font-size: 14px; line-height: 20px; font-variant-numeric: tabular-nums; color: var(--c-grey-950, #0b0b0d); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; } .qdnapro-time-select-option:hover { background: var(--c-grey-50, #f0f1f2); } .qdnapro-time-select-option:active { background: var(--c-grey-100, #e7e9ec); } .qdnapro-time-select-option.is-active { background: var(--c-grey-50, #f0f1f2); } .qdnapro-time-select-option.is-selected { background: var(--c-action-500, #4652f3); color: #ffffff; font-weight: 600; } .qdnapro-time-select-option.is-selected:hover { background: var(--c-action-600, #3540d6); } .qdnapro-time-select-option.is-off-grid::after { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--c-purple-500, #40499a); margin-left: 8px; } .qdnapro-time-select-option.is-off-grid.is-selected::after { background: #ffffff; } [data-theme=dark] .qdnapro-time-select .ts-label { color: var(--c-grey-50, #f0f1f2); } [data-theme=dark] .qdnapro-time-select .ts-field { background: var(--c-grey-900, #18181c); border-color: var(--c-grey-600, #565b66); } [data-theme=dark] .qdnapro-time-select .ts-input { color: var(--c-grey-50, #f0f1f2); } [data-theme=dark] .qdnapro-time-select-panel { background: var(--c-grey-900, #18181c); border-color: var(--c-grey-600, #565b66); } [data-theme=dark] .qdnapro-time-select-option { color: var(--c-grey-50, #f0f1f2); } [data-theme=dark] .qdnapro-time-select-option:hover, [data-theme=dark] .qdnapro-time-select-option.is-active { background: var(--c-grey-800, #2e3036); } qdnapro-event-sheet { display: contents; } .qdnapro-bottom-sheet[data-es-sheet] .bs-panel { background: var(--c-grey-50); height: 86%; } .qdnapro-bottom-sheet[data-es-sheet] .bs-body { overflow: hidden; } .qdnapro-event-sheet-body { font-family: var(--theme-font-family, "Inter", sans-serif); flex: 1; min-height: 0; display: flex; flex-direction: column; } .qdnapro-event-sheet-body .es-pages { flex: 1; min-height: 0; } .qdnapro-event-sheet-body .es-page { display: flex; flex-direction: column; gap: 10px; } .qdnapro-event-sheet-body .es-page-main { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; -ms-overflow-style: none; } .qdnapro-event-sheet-body .es-page-main::-webkit-scrollbar { width: 0; height: 0; display: none; } .qdnapro-event-sheet-body .es-sub-head { display: flex; align-items: center; padding: 2px 0; } .qdnapro-event-sheet-body .es-back { display: inline-flex; align-items: center; gap: 4px; border: none; background: transparent; border-radius: var(--r-row); padding: 10px 14px 10px 8px; font-family: var(--theme-font-family, "Inter", sans-serif); font-size: 16px; color: var(--c-purple-700); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 0.14s ease; } .qdnapro-event-sheet-body .es-back:hover { background: var(--c-grey-100); } .qdnapro-event-sheet-body .es-back:active { background: var(--c-grey-200); } .qdnapro-event-sheet-body .es-tl-list { background: var(--c-bg-card); border-radius: var(--r-3); padding: 6px; flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } .qdnapro-event-sheet-body .es-tl-row { display: flex; align-items: center; gap: 12px; width: 100%; border: none; background: transparent; border-radius: var(--r-row); padding: 9px 12px; font-family: var(--theme-font-family, "Inter", sans-serif); font-size: 16px; line-height: 1.2; text-align: left; color: var(--c-purple-700); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 0.14s ease; } .qdnapro-event-sheet-body .es-tl-row:hover { background: var(--c-grey-50); } .qdnapro-event-sheet-body .es-tl-row:active { background: var(--c-grey-100); } .qdnapro-event-sheet-body .es-tl-row[hidden] { display: none; } .qdnapro-event-sheet-body .es-tl-ico { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 38px; height: 38px; border-radius: 12px; } .qdnapro-event-sheet-body .es-tl-ico .es-tl-img { width: 24px; height: 24px; object-fit: contain; display: block; } .qdnapro-event-sheet-body .es-tl-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .qdnapro-event-sheet-body .es-tl-check { display: none; flex-shrink: 0; color: var(--c-purple-700); } .qdnapro-event-sheet-body .es-tl-row.is-active .es-tl-check { display: inline-flex; } .qdnapro-event-sheet-body .es-type-empty { padding: 12px 16px; font-size: 14px; color: var(--c-text-muted); } .qdnapro-event-sheet-body .es-page-sub .qdnapro-bottom-sheet-button-group { background: var(--c-bg-card); } .qdnapro-event-sheet-body .es-topbar { display: flex; align-items: center; justify-content: space-between; padding: 2px 2px 4px; } .qdnapro-event-sheet-body .es-card { background: var(--c-bg-card); border-radius: var(--r-3); padding: 6px; } .qdnapro-event-sheet-body .es-card > qdnapro-bottom-sheet-button { border-radius: var(--r-row); } .qdnapro-event-sheet-body .es-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.28s cubic-bezier(0.22, 1, 0.36, 1); } .qdnapro-event-sheet-body .es-panel > .es-panel-inner { overflow: hidden; min-height: 0; } .qdnapro-event-sheet-body .es-panel.is-open { grid-template-rows: 1fr; } .qdnapro-event-sheet-body .es-panel-inner > qdnapro-month-strip, .qdnapro-event-sheet-body .es-panel-inner > qdnapro-time-picker { margin: 4px 6px 8px; } .qdnapro-event-sheet-body [data-es-panel=start-time] .es-panel-inner, .qdnapro-event-sheet-body [data-es-panel=end-time] .es-panel-inner { text-align: center; } .qdnapro-event-sheet-body .es-allday-row { display: flex; align-items: center; justify-content: space-between; padding: 7px 12px 7px 16px; } .qdnapro-event-sheet-body .es-allday-lead { display: inline-flex; align-items: center; gap: 12px; font-size: 16px; color: var(--c-purple-700); } .qdnapro-event-sheet-body .es-divider { height: 1px; margin: 4px 6px; background: var(--c-grey-100); } .qdnapro-event-sheet-body .es-dt-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 4px; } .qdnapro-event-sheet-body .es-dt-btn { display: inline-flex; align-items: center; gap: 10px; border: none; background: transparent; border-radius: var(--r-row); padding: 10px 12px; font-family: var(--theme-font-family, "Inter", sans-serif); font-size: 16px; line-height: 1.2; color: var(--c-purple-700); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 0.14s ease, color 0.14s ease; } .qdnapro-event-sheet-body .es-dt-btn:hover { background: var(--c-grey-50); } .qdnapro-event-sheet-body .es-dt-btn:active { background: var(--c-grey-100); } .qdnapro-event-sheet-body .es-dt-btn.is-active { background: var(--c-grey-50); color: var(--c-purple-500); } .qdnapro-event-sheet-body .es-card-when.es-allday-on .es-dt-time { display: none; } .qdnapro-event-sheet-body .es-card-desc { padding: 10px 12px 12px; } .qdnapro-event-sheet-body .es-card-title { padding: 10px 12px 12px; } .qdnapro-event-sheet-body .es-card-delete { padding: 8px 12px; background: transparent; border: 0; } .qdnapro-event-sheet-body .es-card-delete > qdnapro-button { width: 100%; } @keyframes es-wiggle { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } } .qdnapro-event-sheet-body .es-wiggle { animation: es-wiggle 0.4s ease; } /* Recurring personal events (Planner F6 fase 1, 20.07.2026) — the * repeat-interval/until fields inside the repeat sub-page, and the * edit/delete edit-scope chooser sub-page. Back-ported here (bo2 is the * canonical event-sheet source; the PWA copy is generated by * sync-v2-components) so a sync no longer wipes the PWA-side rules. */ .qdnapro-event-sheet-body .es-repeat-extra { display: flex; flex-direction: column; gap: 10px; } .qdnapro-event-sheet-body .es-scope-title { padding: 4px 12px 0; font-size: 12px; line-height: 1.4; color: var(--c-text-muted); } .qdnapro-event-sheet-body .es-scope-confirm-btn { width: calc(100% - 24px); margin: 4px 12px 0; } @media (prefers-reduced-motion: reduce) { .qdnapro-event-sheet-body .es-panel { transition: none; } .qdnapro-event-sheet-body .es-pages, .qdnapro-event-sheet-body .es-page-main, .qdnapro-event-sheet-body .es-page-sub { transition: none; } .qdnapro-event-sheet-body .es-wiggle { animation: none; } } .qdnapro-favorite-button { --c-focus-ring: #40499a; --c-focus-glow: rgba(70, 82, 243, 0.25); display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 32px; height: 32px; padding: 4px; border: none; border-radius: 4px; background: transparent; color: #898e99; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1), background-color 120ms ease, color 300ms ease-in-out, box-shadow 120ms ease; } .qdnapro-favorite-button:hover:not(.favorite-button-disabled) { background-color: #f0f1f2; color: #0b0b0d; transform: scale(1.1); } .qdnapro-favorite-button:active:not(.favorite-button-disabled) { transform: scale(0.9); transition: transform 80ms ease-out, background-color 120ms ease, color 300ms ease-in-out; } .qdnapro-favorite-button:focus { outline: none; } .qdnapro-favorite-button:focus-visible, .qdnapro-favorite-button.force-focus { outline: none; box-shadow: 0 0 0 2px var(--c-focus-ring), 0 0 0 6px var(--c-focus-glow); } .qdnapro-favorite-button .favorite-button-icons { position: relative; display: inline-block; width: 16px; height: 16px; flex-shrink: 0; } .qdnapro-favorite-button.favorite-button-size-big { width: 40px; height: 40px; border-radius: 8px; } .qdnapro-favorite-button.favorite-button-size-big .favorite-button-icons { width: 20px; height: 20px; } .qdnapro-favorite-button .favorite-icon { position: absolute; inset: 0; width: 100%; height: 100%; fill: currentColor; pointer-events: none; transition: opacity 300ms ease-in-out; } .qdnapro-favorite-button .favorite-icon-outline { opacity: 1; } .qdnapro-favorite-button .favorite-icon-filled { opacity: 0; fill: #40499a; } .qdnapro-favorite-button .favorite-icon-pulse { opacity: 0; fill: #40499a; } .qdnapro-favorite-button.favorite-button-favorited { color: #40499a; } .qdnapro-favorite-button.favorite-button-favorited .favorite-icon-outline { opacity: 0; } .qdnapro-favorite-button.favorite-button-favorited .favorite-icon-filled { opacity: 1; } .qdnapro-favorite-button.favorite-button-pulsing .favorite-icon-pulse { animation: qdnapro-favorite-pulse 600ms ease-out; } .qdnapro-favorite-button.favorite-button-disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } /* Heart mode (Kim 2026-06-30): red/pink fill, no ripple pulse, and a pop animation on the filled heart when favorited. Particles are spawned in JS and appended to . */ .qdnapro-favorite-button.favorite-button-mode-heart.favorite-button-favorited { color: #ff4d6a; } .qdnapro-favorite-button.favorite-button-mode-heart .favorite-icon-filled { fill: #ff4d6a; } .qdnapro-favorite-button.favorite-button-mode-heart .favorite-icon-pulse { display: none; } .qdnapro-favorite-button.favorite-button-mode-heart.favorite-button-popping .favorite-icon-filled { transform-origin: center; animation: qdnapro-heart-pop 520ms cubic-bezier(0.22, 1, 0.36, 1); } @keyframes qdnapro-heart-pop { 0% { transform: scale(1); } 20% { transform: scale(0.8); } 50% { transform: scale(1.45); } 70% { transform: scale(0.95); } 85% { transform: scale(1.1); } 100% { transform: scale(1); } } @keyframes qdnapro-favorite-pulse { 0% { opacity: 0.5; transform: scale(1); } 100% { opacity: 0; transform: scale(2); } } @media (prefers-reduced-motion: reduce) { .qdnapro-favorite-button, .qdnapro-favorite-button .favorite-icon { transition: opacity 120ms ease, color 120ms ease, background-color 120ms ease; } .qdnapro-favorite-button:hover:not(.favorite-button-disabled), .qdnapro-favorite-button:active:not(.favorite-button-disabled) { transform: none; } .qdnapro-favorite-button.favorite-button-pulsing .favorite-icon-pulse { animation: none; } .qdnapro-favorite-button.favorite-button-popping .favorite-icon-filled { animation: none; } } [data-theme=dark] .qdnapro-favorite-button { --c-focus-ring: #a5acff; --c-focus-glow: rgba(165, 172, 255, 0.40); color: #898e99; } [data-theme=dark] .qdnapro-favorite-button:hover:not(.favorite-button-disabled) { background-color: rgba(255, 255, 255, 0.08); color: #f0f1f2; } [data-theme=dark] .qdnapro-favorite-button.favorite-button-favorited { color: #a5acff; } [data-theme=dark] .qdnapro-favorite-button.favorite-button-favorited .favorite-icon-filled { fill: #a5acff; } [data-theme=dark] .qdnapro-favorite-button.favorite-button-favorited .favorite-icon-pulse { fill: #a5acff; } /* White variant: white star for use over photos / imagery. Placed last so it wins over the favorited + dark-theme colour rules. */ .qdnapro-favorite-button.favorite-button-variant-white, .qdnapro-favorite-button.favorite-button-variant-white.favorite-button-favorited, .qdnapro-favorite-button.favorite-button-variant-white:hover:not(.favorite-button-disabled) { color: #ffffff; } .qdnapro-favorite-button.favorite-button-variant-white .favorite-icon-filled, .qdnapro-favorite-button.favorite-button-variant-white .favorite-icon-pulse { fill: #ffffff; } /* ============================================================ * qdnapro-file-icon — compiled from _file-icon.scss * ============================================================ */ .qdnapro-file-icon { display: inline-flex; flex-shrink: 0; user-select: none; line-height: 1; /* Anchor for the absolutely-positioned fallback badge. Without this, the badge escapes to the nearest positioned ancestor and renders ABOVE the icon instead of overlaying it. [Kim 2026-05-06] */ position: relative; } .qdnapro-file-icon.file-icon-24 { width: 24px; height: 30px; } .qdnapro-file-icon.file-icon-32 { width: 32px; height: 40px; } .qdnapro-file-icon.file-icon-40 { width: 40px; height: 50px; } .qdnapro-file-icon.file-icon-48 { width: 48px; height: 60px; } /* Ext-text fallback badge — HIDDEN by default. The component's JS adds `qdnapro-file-icon-no-asset` to the host only when BOTH the ext-specific AND the generic SVG fail to load. The display:none keeps the badge from bleeding through anti-aliased / transparent pixels of a successful SVG load. */ .qdnapro-file-icon .qdnapro-file-icon-badge { display: none; } .qdnapro-file-icon.qdnapro-file-icon-no-asset .qdnapro-file-icon-badge { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #ffffff; border: 1px solid #c4c7cc; border-radius: 3px; color: #6b7280; font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 8px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; z-index: 0; } [data-theme=dark] .qdnapro-file-icon.qdnapro-file-icon-no-asset .qdnapro-file-icon-badge { background: #2e3036; border-color: #565b66; color: #a6aab3; } /* Dark-mode polish — subtle outer glow on the SVG body so the white paper-on-screen icon stays visible against dark canvas. */ [data-theme=dark] .qdnapro-file-icon svg { filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.1)); } /* ============================================================ * qdnapro-folder-icon — compiled from _folder-icon.scss * ============================================================ */ .qdnapro-folder-icon { display: inline-flex; flex-shrink: 0; user-select: none; line-height: 1; /* Anchor for the absolutely-positioned fallback badge. Without this, the badge escapes to the nearest positioned ancestor instead of overlaying the icon — same reasoning as qdnapro-file-icon. */ position: relative; } /* Ext-text fallback badge — HIDDEN by default. The component's JS adds `qdnapro-folder-icon-no-asset` to the host only when BOTH the variant-specific AND the "closed" fallback SVG fail to load. */ .qdnapro-folder-icon .qdnapro-folder-icon-badge { display: none; } .qdnapro-folder-icon.qdnapro-folder-icon-no-asset .qdnapro-folder-icon-badge { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #ffffff; border: 1px solid #c4c7cc; border-radius: 3px; color: #6b7280; font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 8px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; z-index: 0; } [data-theme=dark] .qdnapro-folder-icon.qdnapro-folder-icon-no-asset .qdnapro-folder-icon-badge { background: #2e3036; border-color: #565b66; color: #a6aab3; } .qdnapro-status-badge { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; /* keeps the 1px border "inside" (Figma stroke: Inside) */ gap: 8px; padding: 4px; border: 1px solid var(--c-purple-50, #e6e9ff); border-radius: 24px; background: #fff; overflow: hidden; /* Figma "Clip content" */ } /* Hidden when no status is set — collapse out of flow. */ .qdnapro-status-badge[hidden] { display: none; } /* Icon colours. qdnapro-icon renders MDI SVG with fill: currentColor, so setting `color` on the nested element tints the glyph. */ .qdnapro-status-badge .status-badge-heart { color: var(--c-favorite-heart, #ff4d6a); } .qdnapro-status-badge .status-badge-offline { color: var(--c-action-500, #4652f3); } .qdnapro-status-badge .status-badge-unread { color: var(--c-purple-500, #40499a); } /* ------------------------------------------------------------------ */ /* interactive variant (28.07.2026, PWA documents badge-info dialog) */ /* Opt-in: role="button" + tabindex is set by the JS. Purely visual */ /* additions here — hover/active feedback + the invisible hit-area. */ /* WITHOUT [interactive] none of this applies, so the default pill */ /* stays pixel-for-pixel what it was before this variant existed. */ /* ------------------------------------------------------------------ */ .qdnapro-status-badge.status-badge-interactive { position: relative; /* containing block for the ::after hit-area */ cursor: pointer; transition: background-color 120ms ease, border-color 120ms ease, transform 80ms ease-out; } .qdnapro-status-badge.status-badge-interactive:hover { /* Subtle — reuse the same soft purple wash the rest of the library uses for hover-on-white (qdnapro-grid-tile's --qgt-bg-hover token). */ background: var(--c-bg-card-hover, #f7f8fa); border-color: var(--c-purple-100, #c0c5ff); } .qdnapro-status-badge.status-badge-interactive:active { transform: scale(0.94); transition: transform 70ms ease-out; } .qdnapro-status-badge.status-badge-interactive:focus { outline: none; } .qdnapro-status-badge.status-badge-interactive:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus-ring), 0 0 0 6px var(--focus-glow); } /* Invisible hit-area, NOT a bigger pill. The pill itself keeps the Figma size (28px tall at size="small") because it sits right next to other controls — a 3-dot menu button in a list row, or the corner of a grid tile — and a large hit-area would eat into those neighbours. A flat 6px-per-side inset lands size="small" (28px tall) on a ~40px tappable square (the minimum touch target) without reaching far enough to overlap anything beside it; size="large" (32/36px tall) clears 40px with the same 6px, kept for one consistent rule. */ .qdnapro-status-badge.status-badge-interactive::after { content: ""; position: absolute; inset: -6px; } .qdnapro-file-upload { display: block; } .qdnapro-file-upload__note { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; margin-bottom: 16px; background: var(--c-bg-subtle-purple); border: 1px solid var(--c-purple-soft-12); border-radius: 10px; font-size: 13px; line-height: 1.45; color: var(--c-brand-purple); } .qdnapro-file-upload__note[hidden] { display: none; } .qdnapro-file-upload__note-icon { flex-shrink: 0; margin-top: 1px; color: var(--c-brand-purple); } .qdnapro-file-upload__note-text strong { color: var(--c-brand-purple); } .qdnapro-file-upload__zone { --fu-c-border: #40499a; --fu-c-bg-tint: rgba(70, 82, 243, 0.08); --fu-c-reject: #c65a5a; --fu-c-reject-tint: rgba(198, 90, 90, 0.10); position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 28px 16px; border: 2px dashed #c9ccdd; border-radius: 14px; background: #fafbff; text-align: center; cursor: pointer; transition: border-color 140ms ease, background 140ms ease; } .qdnapro-file-upload__zone:hover, .qdnapro-file-upload__zone:focus-visible { border-color: #8a8fd6; background: var(--c-bg-subtle-purple); outline: none; } .qdnapro-file-upload__zone.is-dragover { border-color: transparent; background: radial-gradient(ellipse at top left, var(--fu-c-bg-tint), transparent 55%), radial-gradient(ellipse at bottom right, var(--fu-c-bg-tint), transparent 55%); --fu-march-color: var(--fu-c-border); } .qdnapro-file-upload__zone.is-dragover.is-reject { background: radial-gradient(ellipse at top left, var(--fu-c-reject-tint), transparent 55%), radial-gradient(ellipse at bottom right, var(--fu-c-reject-tint), transparent 55%); --fu-march-color: var(--fu-c-reject); } .qdnapro-file-upload__zone-icon { color: #8b90c4; line-height: 0; } .qdnapro-file-upload__ants { position: absolute; inset: 0; width: 100%; height: 100%; color: transparent; pointer-events: none; } .qdnapro-file-upload__ants-rect { width: calc(100% - 2px); height: calc(100% - 2px); animation: qdna-fu-march 1.6s linear infinite; } .qdnapro-file-upload__zone.is-dragover .qdnapro-file-upload__ants { color: var(--fu-march-color); } @keyframes qdna-fu-march { to { stroke-dashoffset: -12; } } .qdnapro-file-upload__title { margin: 4px 0 0; font-size: 14px; font-weight: 600; color: #2f3550; } .qdnapro-file-upload__or { margin: 0; font-size: 12px; color: #9aa0b4; } .qdnapro-file-upload__hint { margin: 6px 0 0; font-size: 12px; color: #9aa0b4; } .qdnapro-file-upload__pick { flex: 0 0 auto; } .qdnapro-file-upload__chosen { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 10px 12px; border: 1px solid var(--c-border-soft-2); border-radius: 10px; background: #fff; } .qdnapro-file-upload__chosen[hidden] { display: none; } .qdnapro-file-upload__file-icon { flex-shrink: 0; color: var(--c-brand-purple); line-height: 0; } .qdnapro-file-upload__file-name { flex: 1 1 auto; font-size: 13px; color: #2f3550; word-break: break-all; } .qdnapro-file-upload__remove { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: none; border-radius: 8px; background: transparent; color: #9aa0b4; cursor: pointer; transition: background 120ms ease, color 120ms ease; } .qdnapro-file-upload__remove:hover { background: #f1f1f6; color: #c33a30; } .qdnapro-file-upload__error { margin: 12px 0 0; padding: 9px 12px; background: #fdecea; border: 1px solid #f3c4be; border-radius: 10px; font-size: 13px; color: #b3261e; } .qdnapro-file-upload__error[hidden] { display: none; } .qdnapro-file-upload.is-disabled { opacity: 0.6; pointer-events: none; } [data-theme=dark] .qdnapro-file-upload__zone { --fu-c-border: #a5acff; --fu-c-bg-tint: rgba(165, 172, 255, 0.10); --fu-c-reject: #fbaaaa; --fu-c-reject-tint: rgba(251, 170, 170, 0.10); } @media (prefers-reduced-motion: reduce) { .qdnapro-file-upload__ants-rect { animation: none; } } .qdnapro-filter-sheet-body { display: flex; flex-direction: column; gap: var(--s-6); } .qdnapro-filter-sheet-body .fs-section { display: flex; flex-direction: column; gap: var(--s-2); } .qdnapro-filter-sheet-body .fs-section-title { font-size: 12px; font-weight: var(--fw-medium); line-height: 1.3; color: var(--c-text-muted); text-transform: uppercase; letter-spacing: 0.04em; padding: 0 var(--s-1); } .fs-section-note { margin: 2px 0 8px; font-size: 12px; line-height: 1.4; color: var(--c-text-muted, #6e7280); } .qdnapro-filter-sheet-body .fs-footer { position: sticky; bottom: 0; z-index: 1; padding: var(--s-4) 0; background: var(--c-bg-card, #ffffff); border-top: 1px solid var(--c-border-soft-2, #e6e9ef); } .qdnapro-filter-sheet-body .fs-footer qdnapro-button { width: 100%; } .qdnapro-popover[data-fs-pop] { width: 340px; max-width: 92vw; } .qdnapro-popover[data-fs-pop] .qdnapro-filter-sheet-body { max-height: 72vh; overflow-y: auto; } .qdnapro-context-menu { position: fixed; top: 0; left: 0; z-index: 1002; display: none; box-sizing: border-box; } .qdnapro-context-menu.is-open { display: block; } .qdnapro-form-card { --form-card-header-bg: var(--theme-btn-color, var(--c-sidebar-bg, #3a4290)); --form-card-header-text: #ffffff; --form-card-subtitle: rgba(255, 255, 255, 0.75); --form-card-body-bg: var(--c-bg-card, #ffffff); --form-card-border: var(--c-border-card, #e1e3e6); --form-card-radius: var(--r-card, 16px); --form-card-max-height: none; display: flex; flex-direction: column; box-sizing: border-box; width: 100%; max-width: 420px; margin: 0 auto; overflow: hidden; border-radius: var(--form-card-radius); background: var(--form-card-body-bg); box-shadow: var(--shadow-card, 0 1px 2px rgba(20, 25, 80, 0.04), 0 4px 16px rgba(20, 25, 80, 0.08)); font-family: var(--theme-font-family, "Inter", sans-serif); } .qdnapro-form-card__header { display: flex; flex-direction: column; gap: 6px; box-sizing: border-box; padding: 20px 20px 18px; background: var(--form-card-header-bg); color: var(--form-card-header-text); } .qdnapro-form-card--celebratory .qdnapro-form-card__header { padding: 32px 24px 26px; align-items: center; text-align: center; } .qdnapro-form-card__image { width: 100%; border-radius: 12px; overflow: hidden; line-height: 0; margin-bottom: 4px; } .qdnapro-form-card__image[hidden] { display: none; } .qdnapro-form-card__image-img { display: block; width: 100%; max-height: 160px; object-fit: cover; } .qdnapro-form-card__title { font-size: 19px; font-weight: 600; line-height: 1.3; color: var(--form-card-header-text); overflow-wrap: anywhere; } .qdnapro-form-card--celebratory .qdnapro-form-card__title { font-size: 22px; } .qdnapro-form-card__subtitle { font-size: 13px; line-height: 1.4; color: var(--form-card-subtitle); overflow-wrap: anywhere; } .qdnapro-form-card__subtitle[hidden] { display: none; } .qdnapro-form-card__progress { display: flex; align-items: center; gap: 10px; margin-bottom: 2px; } .qdnapro-form-card__progress[hidden] { display: none; } .qdnapro-form-card__progress-pill { flex: 0 0 auto; padding: 2px 9px; border-radius: var(--r-pill, 999px); background: rgba(255, 255, 255, 0.18); font-size: 11px; font-weight: 600; letter-spacing: 0.01em; color: var(--form-card-header-text); } .qdnapro-form-card__progress-track { flex: 1 1 auto; height: 4px; border-radius: var(--r-pill, 999px); background: rgba(255, 255, 255, 0.2); overflow: hidden; } .qdnapro-form-card__progress-fill { display: block; height: 100%; width: 0%; border-radius: var(--r-pill, 999px); background: #ffffff; transition: width 220ms ease; } .qdnapro-form-card__body { flex: 1 1 auto; box-sizing: border-box; min-width: 0; padding: 20px; display: flex; flex-direction: column; gap: 16px; max-height: var(--form-card-max-height); overflow-y: auto; } .qdnapro-form-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; box-sizing: border-box; padding: 14px 20px 18px; border-top: 1px solid var(--form-card-border); } .qdnapro-form-card__footer[hidden] { display: none; } .qdnapro-form-card__footer [data-fc=prev][hidden] ~ [data-fc=next] { margin-left: auto; } .qdnapro-form-card__footer qdnapro-button { flex: 0 0 auto; } .qdnapro-form-card__footer qdnapro-button[hidden] { display: none; } qdnapro-format-rules { display: none; } qdnapro-format-rules[open] { display: block; } qdnapro-format-rules .qfr-scrim { position: fixed; inset: 0; z-index: 9400; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(20, 22, 40, 0.45); } qdnapro-format-rules .qfr-dialog { box-sizing: border-box; width: 100%; max-width: 820px; max-height: 90vh; display: flex; flex-direction: column; min-height: 0; gap: 14px; padding: 20px 24px; background: var(--c-bg-card, #fff); border-radius: 16px; box-shadow: 0 24px 60px rgba(20, 22, 40, 0.28); } qdnapro-format-rules .qfr-head { display: flex; align-items: flex-start; gap: 10px; } qdnapro-format-rules .qfr-head-icon { display: inline-flex; margin-top: 1px; color: var(--c-brand-purple, #40499a); } qdnapro-format-rules .qfr-head-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; } qdnapro-format-rules .qfr-title { font-size: 17px; font-weight: 650; color: var(--c-text-heading, #1a1f4d); } qdnapro-format-rules .qfr-subtitle { font-size: 12.5px; color: var(--c-text-muted, #6e7280); } qdnapro-format-rules .qfr-subtitle:empty { display: none; } qdnapro-format-rules .qfr-close { flex: 0 0 auto; border: 0; background: transparent; cursor: pointer; padding: 2px; color: var(--c-text-muted, #6e7280); border-radius: 6px; } qdnapro-format-rules .qfr-close:hover { background: var(--c-bg-subtle-hover, #f0f1f2); } qdnapro-format-rules .qfr-close:focus-visible { outline: 2px solid var(--focus-ring, #40499a); outline-offset: 1px; } qdnapro-format-rules .qfr-firstmatch { display: flex; align-items: flex-start; gap: 7px; margin: 0; padding: 9px 11px; border-radius: 8px; background: var(--c-bg-subtle-purple, #f3f5ff); font-size: 12.5px; color: var(--c-text-body, #24262c); } qdnapro-format-rules .qfr-firstmatch qdnapro-icon { flex: 0 0 auto; color: var(--c-brand-purple, #40499a); margin-top: 1px; } qdnapro-format-rules .qfr-list { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; min-height: 0; padding: 2px; } qdnapro-format-rules .qfr-empty { margin: 0; padding: 14px 2px; font-size: 12.5px; color: var(--c-text-muted, #6e7280); } qdnapro-format-rules .qfr-rule { border: 1px solid var(--c-purple-300, #8a92d0); border-radius: 8px; background: var(--c-bg-subtle-purple, #f3f5ff); padding: 10px; display: flex; flex-direction: column; gap: 8px; } qdnapro-format-rules .qfr-rule-fout { border-color: var(--c-tag-critical-text, #c33a30); } qdnapro-format-rules .qfr-cond { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } qdnapro-format-rules .qfr-nr { flex: 0 0 auto; font-size: 11px; font-weight: 650; color: var(--c-text-muted, #6e7280); background: var(--c-bg-card, #fff); border: 1px solid var(--c-border-tree, #d4d8ec); border-radius: 10px; padding: 1px 7px; } qdnapro-format-rules .qfr-op { flex: 0 0 168px; } qdnapro-format-rules .qfr-num { flex: 0 0 96px; } qdnapro-format-rules .qfr-and { font-size: 12.5px; color: var(--c-text-muted, #6e7280); } qdnapro-format-rules .qfr-del { margin-left: auto; flex: 0 0 auto; } qdnapro-format-rules .qfr-fmt { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } qdnapro-format-rules .qfr-flag { display: flex; align-items: center; gap: 6px; font-size: 12.5px; cursor: pointer; white-space: nowrap; } qdnapro-format-rules .qfr-color { display: inline-flex; align-items: center; gap: 2px; } qdnapro-format-rules .qfr-swatch { position: relative; width: 28px; height: 28px; flex: 0 0 28px; border-radius: 8px; cursor: pointer; outline: 2px solid rgba(64, 73, 154, 0.18); outline-offset: 1px; transition: outline-color 150ms; } qdnapro-format-rules .qfr-swatch:hover { outline-color: var(--c-brand-purple, #40499a); } qdnapro-format-rules .qfr-swatch-leeg { background-image: linear-gradient(to top right, transparent calc(50% - 1px), var(--c-grey-300, #c4c7cc) 50%, transparent calc(50% + 1px)); background-color: var(--c-bg-card, #fff); } qdnapro-format-rules .qfr-swatch-input { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; opacity: 0 !important; cursor: pointer !important; border: none !important; padding: 0 !important; margin: 0 !important; } qdnapro-format-rules .qfr-clear { border: 0; background: transparent; cursor: pointer; font-size: 15px; line-height: 1; padding: 2px 3px; border-radius: 4px; color: var(--c-text-muted, #6e7280); } qdnapro-format-rules .qfr-clear:hover { background: var(--c-bg-subtle-hover, #f0f1f2); color: var(--c-text-body, #24262c); } qdnapro-format-rules .qfr-clear:focus-visible { outline: 2px solid var(--focus-ring, #40499a); outline-offset: 1px; } qdnapro-format-rules .qfr-preview { margin-left: auto; min-width: 84px; text-align: right; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--c-border-tree, #d4d8ec); background: var(--c-bg-card, #fff); font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--c-text-body, #24262c); } qdnapro-format-rules .qfr-contrast { margin: 0; font-size: 12px; color: var(--c-tag-warning-text, #a06400); } qdnapro-format-rules .qfr-contrast[hidden] { display: none; } qdnapro-format-rules .qfr-addbar { display: flex; align-items: center; gap: 10px; } qdnapro-format-rules .qfr-max { font-size: 12px; color: var(--c-text-muted, #6e7280); } qdnapro-format-rules .qfr-foot { display: flex; align-items: center; gap: 10px; } qdnapro-format-rules .qfr-foot-spacer { flex: 1 1 auto; } qdnapro-format-rules .qfr-status { font-size: 12.5px; min-height: 1.2em; } qdnapro-format-rules .qfr-status-fout { color: var(--c-tag-critical-text, #c33a30); } qdnapro-format-rules .qfr-list::-webkit-scrollbar { width: 6px; } qdnapro-format-rules .qfr-list::-webkit-scrollbar-track { background: transparent; } qdnapro-format-rules .qfr-list::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.18); border-radius: 3px; } qdnapro-format-rules .qfr-list { scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, 0.18) transparent; } @media (max-width: 720px) { qdnapro-format-rules .qfr-op, qdnapro-format-rules .qfr-num { flex: 1 1 100px; } qdnapro-format-rules .qfr-preview { margin-left: 0; } } qdnapro-formula-editor { display: none; } qdnapro-formula-editor[open] { display: block; } qdnapro-formula-editor .qfe-scrim { position: fixed; inset: 0; z-index: 9400; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(20, 22, 40, 0.45); } qdnapro-formula-editor .qfe-dialog { box-sizing: border-box; width: 100%; max-width: 880px; max-height: 90vh; display: flex; flex-direction: column; min-height: 0; gap: 16px; padding: 20px 24px; background: var(--c-bg-card, #fff); border-radius: 16px; box-shadow: 0 24px 60px rgba(20, 22, 40, 0.28); } qdnapro-formula-editor .qfe-head { display: flex; align-items: flex-start; gap: 10px; } qdnapro-formula-editor .qfe-head-icon { display: inline-flex; margin-top: 1px; color: var(--c-brand-purple, #40499a); } qdnapro-formula-editor .qfe-head-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; } qdnapro-formula-editor .qfe-title { font-size: 17px; font-weight: 650; color: var(--c-text-heading, #1a1f4d); } qdnapro-formula-editor .qfe-subtitle { font-size: 12.5px; color: var(--c-text-muted, #6e7280); } qdnapro-formula-editor .qfe-subtitle:empty { display: none; } qdnapro-formula-editor .qfe-close { flex: 0 0 auto; border: 0; background: transparent; cursor: pointer; padding: 2px; color: var(--c-text-muted, #6e7280); border-radius: 6px; } qdnapro-formula-editor .qfe-close:hover { background: var(--c-bg-subtle-hover, #f0f1f2); } qdnapro-formula-editor .qfe-close:focus-visible { outline: 2px solid var(--focus-ring, #40499a); outline-offset: 1px; } qdnapro-formula-editor .qfe-cols { display: grid; grid-template-columns: minmax(0, 1fr) 104px minmax(0, 1.1fr); gap: 14px; align-items: start; min-height: 0; } qdnapro-formula-editor .qfe-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; } qdnapro-formula-editor .qfe-col-label { font-size: 11px; font-weight: 650; letter-spacing: 0.07em; text-transform: uppercase; color: var(--c-text-muted, #6e7280); } qdnapro-formula-editor .qfe-list { border: 1px solid var(--c-border-tree, #d4d8ec); border-radius: 10px; background: var(--c-bg-card, #fff); padding: 4px; max-height: 232px; overflow-y: auto; min-height: 0; } qdnapro-formula-editor .qfe-group { padding: 8px 10px 3px; font-size: 10.5px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-text-muted, #6e7280); } qdnapro-formula-editor .qfe-group-fail { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 12.5px; padding: 10px; } qdnapro-formula-editor .qfe-item .menu-item-label { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; color: var(--c-brand-purple, #40499a); } qdnapro-formula-editor .qfe-ops { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } qdnapro-formula-editor .qfe-ops qdnapro-button { width: 100%; } qdnapro-formula-editor .qfe-fieldwrap { display: flex; flex-direction: column; gap: 6px; } qdnapro-formula-editor .qfe-field { box-sizing: border-box; width: 100%; min-height: 84px; resize: vertical; padding: 12px 14px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 15px; line-height: 1.6; color: var(--c-text-body, #24262c); background: var(--c-bg-card, #fff); border: 1.5px solid var(--c-brand-purple, #40499a); border-radius: 10px; } qdnapro-formula-editor .qfe-field:focus { outline: none; box-shadow: 0 0 0 3px var(--c-bg-secondary-purple, #e6e9ff); } qdnapro-formula-editor .qfe-field::selection { background: var(--c-brand-purple, #40499a); color: #fff; } qdnapro-formula-editor .qfe-hint { margin: 0; font-size: 12.5px; color: var(--c-text-muted, #6e7280); } qdnapro-formula-editor .qfe-status { margin: 0; min-height: 1.2em; font-size: 12.5px; } qdnapro-formula-editor .qfe-status-goed { color: var(--c-tag-new-text, #1f7a48); } qdnapro-formula-editor .qfe-status-fout { color: var(--c-tag-critical-text, #c33a30); } qdnapro-formula-editor .qfe-status-waarschuwing { color: var(--c-tag-warning-text, #a06400); } qdnapro-formula-editor .qfe-foot { display: flex; align-items: center; gap: 10px; } qdnapro-formula-editor .qfe-foot-spacer { flex: 1 1 auto; } qdnapro-formula-editor .qfe-list::-webkit-scrollbar { width: 6px; } qdnapro-formula-editor .qfe-list::-webkit-scrollbar-track { background: transparent; } qdnapro-formula-editor .qfe-list::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.18); border-radius: 3px; } qdnapro-formula-editor .qfe-list { scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, 0.18) transparent; } @media (max-width: 720px) { qdnapro-formula-editor .qfe-cols { grid-template-columns: 1fr; } qdnapro-formula-editor .qfe-ops { grid-template-columns: repeat(4, 1fr); } qdnapro-formula-editor .qfe-list { max-height: 168px; } } .qdnapro-grid-tile { --qgt-bg: var(--c-bg-card, #ffffff); --qgt-bg-hover: var(--c-bg-card-hover, #f7f8fa); --qgt-bg-pressed: var(--c-purple-soft-12, rgba(64, 73, 154, 0.12)); --qgt-title-color: var(--c-text-heading, #1a1f4d); --qgt-meta-color: var(--c-text-muted, #6e7280); --qgt-focus-ring: var(--c-brand-purple, #40499a); --qgt-focus-glow: var(--c-purple-soft-18, rgba(64, 73, 154, 0.18)); --qgt-selected-ring: var(--c-brand-purple, #40499a); --qgt-selected-glow: var(--c-action-18, rgba(70, 82, 243, 0.18)); display: flex; flex-direction: column; align-items: center; box-sizing: border-box; position: relative; background: var(--qgt-bg); border-radius: var(--r-3, 12px); padding: 10px; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; font-family: var(--ff, "Inter", system-ui, -apple-system, sans-serif); color: var(--qgt-title-color); transition: box-shadow 150ms ease, transform 150ms ease, background-color 100ms ease-out; } .qdnapro-grid-tile:hover:not(.qgt-disabled) { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.06); transform: translateY(-1px); } .qdnapro-grid-tile.is-pressed:not(.qgt-disabled) { background: var(--qgt-bg-pressed); transform: scale(0.96); transition: transform 70ms ease-out; } .qdnapro-grid-tile:focus { outline: none; } .qdnapro-grid-tile:focus-visible, .qdnapro-grid-tile.force-focus { outline: none; box-shadow: inset 0 0 0 2px var(--qgt-focus-ring), inset 0 0 0 5px var(--qgt-focus-glow); } .qdnapro-grid-tile.qgt-selected { box-shadow: 0 0 0 3px var(--qgt-selected-glow); background: var(--c-bg-subtle-purple, #f3f5ff); } .qdnapro-grid-tile.qgt-selected .qgt-title { color: var(--qgt-selected-ring); } .qdnapro-grid-tile.qgt-selected:hover:not(.qgt-disabled) { box-shadow: 0 0 0 3px var(--qgt-selected-glow), 0 4px 10px rgba(0, 0, 0, 0.07); } .qdnapro-grid-tile.qgt-disabled { opacity: 0.5; cursor: default; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .qdnapro-grid-tile { transition: none; } .qdnapro-grid-tile:hover:not(.qgt-disabled) { transform: none; } .qdnapro-grid-tile.is-pressed:not(.qgt-disabled) { transform: none; transition: none; } } .qdnapro-grid-tile.force-hover { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.06); transform: translateY(-1px); } .qdnapro-grid-tile.force-pressed { background: var(--qgt-bg-pressed); transform: scale(0.96); } .qdnapro-grid-tile.qgt-size-s { width: 96px; } .qdnapro-grid-tile.qgt-size-s .qgt-artwork { width: 60px; height: 60px; } .qdnapro-grid-tile.qgt-size-s .qgt-artwork-icon { width: 30px; height: 30px; } .qdnapro-grid-tile.qgt-size-s .qgt-title { font-size: 12px; } .qdnapro-grid-tile.qgt-size-s .qgt-meta { font-size: 10px; } .qdnapro-grid-tile.qgt-size-m { width: 120px; } .qdnapro-grid-tile.qgt-size-m .qgt-artwork { width: 76px; height: 76px; } .qdnapro-grid-tile.qgt-size-m .qgt-artwork-icon { width: 38px; height: 38px; } .qdnapro-grid-tile.qgt-size-m .qgt-title { font-size: 13px; } .qdnapro-grid-tile.qgt-size-m .qgt-meta { font-size: 11px; } .qdnapro-grid-tile.qgt-size-l { width: 148px; } .qdnapro-grid-tile.qgt-size-l .qgt-artwork { width: 92px; height: 92px; } .qdnapro-grid-tile.qgt-size-l .qgt-artwork-icon { width: 46px; height: 46px; } .qdnapro-grid-tile.qgt-size-l .qgt-title { font-size: 14px; } .qdnapro-grid-tile.qgt-size-l .qgt-meta { font-size: 12px; } .qgt-artwork { position: relative; flex: 0 0 auto; border-radius: var(--r-3, 12px); display: flex; align-items: center; justify-content: center; background: var(--qgt-artwork-bg, var(--c-purple-soft-12, rgba(64, 73, 154, 0.12))); color: var(--qgt-artwork-fg, var(--c-brand-purple, #40499a)); overflow: hidden; } .qgt-artwork-activity { display: flex; align-items: center; justify-content: center; } .qgt-artwork-activity img, .qgt-artwork-activity .activity-icon-img { width: 100%; height: 100%; object-fit: contain; } .qgt-tint-purple { --qgt-artwork-bg: #ebe9fb; --qgt-artwork-fg: var(--c-brand-purple, #40499a); } .qgt-tint-grey { --qgt-artwork-bg: #eef0f2; --qgt-artwork-fg: var(--c-grey-600, #565b66); } .qgt-tint-red { --qgt-artwork-bg: #fde7e7; --qgt-artwork-fg: var(--c-signal-red-text, #c65a5a); } .qgt-tint-yellow { --qgt-artwork-bg: #fdf3d6; --qgt-artwork-fg: var(--c-signal-yellow-text, #bf7202); } .qgt-tint-green { --qgt-artwork-bg: #e2faf1; --qgt-artwork-fg: var(--c-signal-green-text, #428b6e); } .qgt-tint-blue { --qgt-artwork-bg: #e6eff9; --qgt-artwork-fg: var(--c-signal-blue-text, #6a8ab4); } .qgt-tint-bright-blue { --qgt-artwork-bg: #d6e0f9; --qgt-artwork-fg: #3a5eae; } .qgt-tint-pink { --qgt-artwork-bg: #f6e1e8; --qgt-artwork-fg: var(--c-signal-pink-text, #b25777); } [data-theme=dark] .qgt-tint-purple { --qgt-artwork-bg: #3a3555; --qgt-artwork-fg: var(--c-purple-200, #a5acff); } [data-theme=dark] .qgt-tint-grey { --qgt-artwork-bg: #40444d; --qgt-artwork-fg: var(--c-grey-300, #c4c7cc); } [data-theme=dark] .qgt-tint-red { --qgt-artwork-bg: #5a2b2b; --qgt-artwork-fg: var(--c-warn-red-400, #f87171); } [data-theme=dark] .qgt-tint-yellow { --qgt-artwork-bg: #5a4d1f; --qgt-artwork-fg: var(--c-warn-yellow-500, #fbbf24); } [data-theme=dark] .qgt-tint-green { --qgt-artwork-bg: #2a5544; --qgt-artwork-fg: #7fe0bc; } [data-theme=dark] .qgt-tint-blue { --qgt-artwork-bg: #2e3e54; --qgt-artwork-fg: #8fb4e0; } [data-theme=dark] .qgt-tint-bright-blue { --qgt-artwork-bg: #3a4a8a; --qgt-artwork-fg: #b9c8f5; } [data-theme=dark] .qgt-tint-pink { --qgt-artwork-bg: #4e2a36; --qgt-artwork-fg: #e4a0b8; } .qgt-slot-wrap { display: contents; } .qgt-badge { position: absolute; top: 0; right: -8px; transform: translateY(-30%); z-index: 2; } .qgt-badge:empty { display: none; } .qgt-body { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 8px; text-align: center; } .qgt-title { font-weight: 500; line-height: 1.3; color: var(--qgt-title-color); width: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; } .qgt-meta { font-weight: 400; line-height: 1.3; color: var(--qgt-meta-color); width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .qdna-icon-field { display: flex; align-items: center; gap: 24px; } .qdna-icon-field__preview-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 120px; } .qdna-icon-field__preview { width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--c-grey-50, #f0f1f2); } .qdna-icon-field__body { display: flex; flex-direction: column; gap: 16px; } .qdna-icon-field__sub { color: var(--c-grey-500, #6b7280); } .qdna-icon-field__btn { align-self: flex-start; } .qdnapro-history-item { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 8px; background: #ffffff; color: #0b0b0d; box-sizing: border-box; cursor: pointer; user-select: none; border: 0.5px solid transparent; transition: background-color 120ms ease; } .qdnapro-history-item:focus { outline: none; } .qdnapro-history-item:focus-visible, .qdnapro-history-item.force-focus { outline: 2px solid #40499a; outline-offset: -2px; box-shadow: 0 0 0 4px rgba(70, 82, 243, 0.25); } .qdnapro-history-item .history-item-row { display: flex; align-items: center; width: 100%; min-width: 0; } .qdnapro-history-item .history-item-row-top { gap: 4px; } .qdnapro-history-item .history-item-row-bottom { gap: 8px; } .qdnapro-history-item .history-item-subject { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: "Inter", sans-serif; font-size: 14px; line-height: 24px; font-weight: 500; } .qdnapro-history-item .history-item-preview { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: "Inter", sans-serif; font-size: 12px; line-height: 20px; font-weight: 400; } .qdnapro-history-item .history-item-time { flex-shrink: 0; font-family: "Inter", sans-serif; font-size: 12px; line-height: 20px; font-weight: 400; white-space: nowrap; } .qdnapro-history-item .history-item-actions { display: flex; gap: 0; flex-shrink: 0; } .qdnapro-history-item .history-item-actions > .qdnapro-icon-btn { width: 0; min-width: 0; max-width: 0; opacity: 0; overflow: hidden; pointer-events: none; transition: max-width 200ms cubic-bezier(0.4, 0, 0.2, 1), width 200ms cubic-bezier(0.4, 0, 0.2, 1), min-width 200ms cubic-bezier(0.4, 0, 0.2, 1), margin-left 200ms cubic-bezier(0.4, 0, 0.2, 1), opacity 150ms ease, background-color 120ms ease-out; } .qdnapro-history-item .history-item-actions > .history-item-more-btn { margin-left: 0; } .qdnapro-history-item:hover .history-item-actions > .qdnapro-icon-btn, .qdnapro-history-item:focus-within .history-item-actions > .qdnapro-icon-btn, .qdnapro-history-item.force-hover .history-item-actions > .qdnapro-icon-btn { width: 24px; min-width: 24px; max-width: 24px; opacity: 1; pointer-events: auto; } .qdnapro-history-item:hover .history-item-actions > .history-item-more-btn, .qdnapro-history-item:focus-within .history-item-actions > .history-item-more-btn, .qdnapro-history-item.force-hover .history-item-actions > .history-item-more-btn { margin-left: 4px; } .qdnapro-history-item .qdnapro-icon-btn.icon-btn-subtle:hover:not(.icon-btn-disabled) { background-color: #c4c7cc; } .qdnapro-history-item .qdnapro-icon-btn.icon-btn-subtle:active:not(.icon-btn-disabled) { background-color: #a7abb2; } .qdnapro-history-item:not(.history-item-disabled):hover { background: #f0f1f2; } .qdnapro-history-item:not(.history-item-disabled):active { background: #e4e6e8; } .qdnapro-history-item.force-hover:not(.history-item-disabled) { background: #f0f1f2; } .qdnapro-history-item.force-pressed:not(.history-item-disabled) { background: #e4e6e8; } .qdnapro-history-item.history-item-pinned .history-item-actions > .history-item-pin-btn { width: 24px; min-width: 24px; max-width: 24px; opacity: 1; pointer-events: auto; } .qdnapro-history-item.history-item-disabled, .qdnapro-history-item.history-item-disabled:hover, .qdnapro-history-item.history-item-disabled:active { color: #898e99; background: transparent; cursor: not-allowed; pointer-events: none; } .qdnapro-history-item.history-item-disabled:focus-visible, .qdnapro-history-item.history-item-disabled.force-focus { outline: none; box-shadow: none; } [data-theme=dark] .qdnapro-history-item { background: #1f2024; color: #f0f1f2; } [data-theme=dark] .qdnapro-history-item:not(.history-item-disabled):hover, [data-theme=dark] .qdnapro-history-item.force-hover:not(.history-item-disabled) { background: #2a2c33; } [data-theme=dark] .qdnapro-history-item:not(.history-item-disabled):active, [data-theme=dark] .qdnapro-history-item.force-pressed:not(.history-item-disabled) { background: #353841; } [data-theme=dark] .qdnapro-history-item .qdnapro-icon-btn.icon-btn-subtle:hover:not(.icon-btn-disabled) { background-color: #565b66; } [data-theme=dark] .qdnapro-history-item .qdnapro-icon-btn.icon-btn-subtle:active:not(.icon-btn-disabled) { background-color: #6b7280; } [data-theme=dark] .qdnapro-history-item.history-item-disabled, [data-theme=dark] .qdnapro-history-item.history-item-disabled:hover, [data-theme=dark] .qdnapro-history-item.history-item-disabled:active { color: #6b7280; background: transparent; } .qdnapro-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; line-height: 1; width: 1em; height: 1em; } .qdnapro-icon > svg { width: 100%; height: 100%; display: block; fill: currentColor; } .qdnapro-icon.icon-16 { width: 16px; height: 16px; } .qdnapro-icon.icon-20 { width: 20px; height: 20px; } .qdnapro-icon.icon-24 { width: 24px; height: 24px; } /* qdnapro-icon-btn compiled CSS -- generated from _icon-btn.scss 2026-05-13-danger */ .qdnapro-icon-btn { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 24px; height: 24px; min-width: 24px; padding: 0; border: 1px solid transparent; border-radius: 4px; background: transparent; --ib-focus-ring: #40499a; --ib-focus-glow: rgba(70, 82, 243, 0.25); cursor: pointer; user-select: none; transition: background-color 120ms ease-out, color 120ms ease-out; } .qdnapro-icon-btn qdnapro-icon { display: inline-flex; width: 16px; height: 16px; } .qdnapro-icon-btn.icon-btn-size-big { width: 28px; height: 28px; min-width: 28px; } .qdnapro-icon-btn.icon-btn-size-big qdnapro-icon { width: 20px; height: 20px; } .qdnapro-icon-btn:focus { outline: none; } .qdnapro-icon-btn:focus-visible, .qdnapro-icon-btn.force-focus { outline: 2px solid var(--ib-focus-ring); outline-offset: var(--ib-focus-offset, -2px); box-shadow: 0 0 0 4px var(--ib-focus-glow); } .qdnapro-icon-btn.icon-btn-disabled:focus-visible, .qdnapro-icon-btn.icon-btn-disabled.force-focus { outline: none; box-shadow: none; } .qdnapro-icon-btn:active:not(.icon-btn-disabled) { background-image: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)); } /* TYPE: primary-purple */ .qdnapro-icon-btn.icon-btn-primary-purple { background-color: #40499a; color: #ffffff; --ib-focus-ring: #252b5e; --ib-focus-glow: rgba(70, 82, 243, 0.40); } .qdnapro-icon-btn.icon-btn-primary-purple:focus-visible, .qdnapro-icon-btn.icon-btn-primary-purple.force-focus { outline: none; box-shadow: 0 0 0 2px var(--ib-focus-ring), 0 0 0 6px var(--ib-focus-glow); } .qdnapro-icon-btn.icon-btn-primary-purple:hover:not(.icon-btn-disabled) { background-color: #333a7b; } /* TYPE: secondary */ .qdnapro-icon-btn.icon-btn-secondary { background-color: #f0f1f2; color: #0b0b0d; } .qdnapro-icon-btn.icon-btn-secondary:hover:not(.icon-btn-disabled) { background-color: #c4c7cc; } /* TYPE: dropdown-search */ .qdnapro-icon-btn.icon-btn-dropdown-search { background-color: #d9dbeb; color: #40499a; } .qdnapro-icon-btn.icon-btn-dropdown-search:hover:not(.icon-btn-disabled) { background-color: #b3b6d7; } /* TYPE: dropdown-input */ .qdnapro-icon-btn.icon-btn-dropdown-input { background-color: transparent; color: #0b0b0d; } .qdnapro-icon-btn.icon-btn-dropdown-input:hover:not(.icon-btn-disabled) { background-color: #f0f1f2; } /* TYPE: bulk-select */ .qdnapro-icon-btn.icon-btn-bulk-select { background-color: #e6e9ff; color: #40499a; } .qdnapro-icon-btn.icon-btn-bulk-select:hover:not(.icon-btn-disabled) { background-color: #daddf2; } /* TYPE: input-icon */ .qdnapro-icon-btn.icon-btn-input-icon { background-color: transparent; color: #a6aab3; } .qdnapro-icon-btn.icon-btn-input-icon:hover:not(.icon-btn-disabled) { background-color: #f0f1f2; color: #0b0b0d; } .qdnapro-icon-btn.icon-btn-input-icon:active:not(.icon-btn-disabled) { color: #0b0b0d; } /* TYPE: subtle */ .qdnapro-icon-btn.icon-btn-subtle { background-color: transparent; color: #0b0b0d; } .qdnapro-icon-btn.icon-btn-subtle:hover:not(.icon-btn-disabled) { background-color: #f0f1f2; } .qdnapro-icon-btn.icon-btn-subtle:active:not(.icon-btn-disabled) { background-color: #e4e6e8; } /* TYPE: subtle-purple -- mirrors the button component's subtle-purple-bg specs (transparent bg, purple icon, light-purple hover/active). [Kim 2026-06-17] */ .qdnapro-icon-btn.icon-btn-subtle-purple { background-color: transparent; color: #40499a; } .qdnapro-icon-btn.icon-btn-subtle-purple:hover:not(.icon-btn-disabled) { background-color: #daddf2; } .qdnapro-icon-btn.icon-btn-subtle-purple:active:not(.icon-btn-disabled) { background-color: #c7cce8; } /* TYPE: subtle-error */ .qdnapro-icon-btn.icon-btn-subtle-error { background-color: transparent; color: #c65a5a; } .qdnapro-icon-btn.icon-btn-subtle-error:hover:not(.icon-btn-disabled) { background-color: rgba(198, 90, 90, 0.1); } .qdnapro-icon-btn.icon-btn-subtle-error:active:not(.icon-btn-disabled) { background-color: rgba(198, 90, 90, 0.18); } /* TYPE: danger -- red border + red icon + light red hover bg */ .qdnapro-icon-btn.icon-btn-danger { background-color: transparent; border-color: #fecaca; color: #ef4444; --ib-focus-ring: #ef4444; --ib-focus-glow: rgba(239, 68, 68, 0.20); } .qdnapro-icon-btn.icon-btn-danger:hover:not(.icon-btn-disabled) { background-color: #fef2f2; border-color: #f87171; color: #dc2626; } .qdnapro-icon-btn.icon-btn-danger:active:not(.icon-btn-disabled) { background-color: #fee2e2; border-color: #ef4444; color: #b91c1c; } /* TYPE: purple-active */ .qdnapro-icon-btn.icon-btn-purple-active { background-color: #daddf2; color: #40499a; } .qdnapro-icon-btn.icon-btn-purple-active:hover:not(.icon-btn-disabled) { background-color: #c7cce8; } .qdnapro-icon-btn.icon-btn-purple-active:active:not(.icon-btn-disabled) { background-color: #b3b8d6; } /* STATE: disabled */ .qdnapro-icon-btn.icon-btn-disabled { background-color: #f0f1f2 !important; background-image: none !important; color: #898e99 !important; border-color: transparent !important; cursor: not-allowed; pointer-events: none; } [data-bg-context=purple] .qdnapro-icon-btn.icon-btn-disabled { background-color: #daddf2 !important; } /* Dark mode */ [data-theme=dark] .qdnapro-icon-btn.icon-btn-primary-purple { background-color: #3842c2; color: #ffffff; } [data-theme=dark] .qdnapro-icon-btn.icon-btn-primary-purple:hover:not(.icon-btn-disabled) { background-color: #2a3192; } [data-theme=dark] .qdnapro-icon-btn.icon-btn-secondary { background-color: #2e3036; color: #e1e3e6; } [data-theme=dark] .qdnapro-icon-btn.icon-btn-secondary:hover:not(.icon-btn-disabled) { background-color: #40444d; } [data-theme=dark] .qdnapro-icon-btn.icon-btn-dropdown-search { background-color: #40444d; color: #e1e3e6; } [data-theme=dark] .qdnapro-icon-btn.icon-btn-dropdown-search:hover:not(.icon-btn-disabled) { background-color: #565b66; } [data-theme=dark] .qdnapro-icon-btn.icon-btn-dropdown-search.icon-btn-disabled { background-color: #2e3036 !important; } [data-theme=dark] .qdnapro-icon-btn.icon-btn-dropdown-input { background-color: transparent; color: #e1e3e6; } [data-theme=dark] .qdnapro-icon-btn.icon-btn-dropdown-input:hover:not(.icon-btn-disabled) { background-color: #565b66; } [data-theme=dark] .qdnapro-icon-btn.icon-btn-bulk-select { background-color: #0b0b0d; color: #f0f1f2; } [data-theme=dark] .qdnapro-icon-btn.icon-btn-bulk-select:hover:not(.icon-btn-disabled) { background-color: #40444d; } [data-theme=dark] .qdnapro-icon-btn.icon-btn-input-icon { background-color: transparent; color: #898e99; } [data-theme=dark] .qdnapro-icon-btn.icon-btn-input-icon:hover:not(.icon-btn-disabled) { background-color: #565b66; color: #e1e3e6; } [data-theme=dark] .qdnapro-icon-btn.icon-btn-input-icon:active:not(.icon-btn-disabled) { color: #e1e3e6; } [data-theme=dark] .qdnapro-icon-btn.icon-btn-subtle { background-color: transparent; color: #e1e3e6; } [data-theme=dark] .qdnapro-icon-btn.icon-btn-subtle:hover:not(.icon-btn-disabled) { background-color: #565b66; } [data-theme=dark] .qdnapro-icon-btn.icon-btn-subtle:active:not(.icon-btn-disabled) { background-color: #6b7280; } [data-theme=dark] .qdnapro-icon-btn.icon-btn-subtle-error { background-color: transparent; color: #fbaaaa; } [data-theme=dark] .qdnapro-icon-btn.icon-btn-subtle-error:hover:not(.icon-btn-disabled) { background-color: rgba(251, 170, 170, 0.12); } [data-theme=dark] .qdnapro-icon-btn.icon-btn-subtle-error:active:not(.icon-btn-disabled) { background-color: rgba(251, 170, 170, 0.2); } [data-theme=dark] .qdnapro-icon-btn.icon-btn-danger { background-color: transparent; border-color: rgba(252, 165, 165, 0.45); color: #fca5a5; } [data-theme=dark] .qdnapro-icon-btn.icon-btn-danger:hover:not(.icon-btn-disabled) { background-color: rgba(239, 68, 68, 0.15); border-color: #fca5a5; color: #ffffff; } [data-theme=dark] .qdnapro-icon-btn.icon-btn-danger:active:not(.icon-btn-disabled) { background-color: rgba(239, 68, 68, 0.25); border-color: #f87171; color: #ffffff; } [data-theme=dark] .qdnapro-icon-btn.icon-btn-purple-active { background-color: rgba(70, 82, 243, 0.2); color: #a5acff; } [data-theme=dark] .qdnapro-icon-btn.icon-btn-purple-active:hover:not(.icon-btn-disabled) { background-color: rgba(70, 82, 243, 0.3); } [data-theme=dark] .qdnapro-icon-btn.icon-btn-purple-active:active:not(.icon-btn-disabled) { background-color: rgba(70, 82, 243, 0.42); } [data-theme=dark] .qdnapro-icon-btn.icon-btn-disabled { background-color: #40444d !important; color: #6b7280 !important; } [data-theme=dark] .qdnapro-icon-btn:focus-visible, [data-theme=dark] .qdnapro-icon-btn.force-focus { outline-color: #a5acff; box-shadow: 0 0 0 4px rgba(70, 82, 243, 0.4); } /* === size: touch — 44×44 minimum tap target [2026-06-30] === */ .qdnapro-icon-btn.icon-btn-size-touch { width: 44px; height: 44px; min-width: 44px; } /* === variant: round — full circle [2026-06-30] === */ .qdnapro-icon-btn.icon-btn-round { border-radius: 50%; } /* === type: on-dark-purple — icon on var(--c-purple-700) surface [2026-06-30] === */ .qdnapro-icon-btn.icon-btn-on-dark-purple { background-color: transparent; color: var(--c-purple-50); } .qdnapro-icon-btn.icon-btn-on-dark-purple:hover:not(.icon-btn-disabled) { background-color: var(--c-purple-500); color: var(--c-purple-50); } .qdnapro-icon-btn.icon-btn-on-dark-purple.icon-btn-disabled { background-color: transparent !important; color: var(--c-purple-300) !important; } /* === type: filled-dark-purple — own var(--c-purple-700) surface [2026-06-30] === */ .qdnapro-icon-btn.icon-btn-filled-dark-purple { background-color: var(--c-purple-700); color: var(--c-purple-50); } .qdnapro-icon-btn.icon-btn-filled-dark-purple:hover:not(.icon-btn-disabled) { background-color: var(--c-purple-600); color: var(--c-purple-50); } .qdnapro-icon-btn.icon-btn-filled-dark-purple.icon-btn-disabled { background-color: transparent !important; color: var(--c-purple-300) !important; } /* ============================================================ * qdnapro-illustration — compiled from _illustration.scss * ============================================================ */ .qdnapro-illustration { display: inline-block; box-sizing: border-box; flex-shrink: 0; line-height: 0; vertical-align: middle; user-select: none; transition: opacity 140ms ease-out; height: auto; } .qdnapro-illustration .illustration-img { display: block; width: 100%; height: auto; max-width: 100%; object-fit: contain; pointer-events: none; background: transparent; } .qdnapro-illustration.illustration-disabled { opacity: 0.5; } .qdnapro-illustration.illustration-emphasis-soft { opacity: 0.6; } .qdnapro-illustration.illustration-emphasis-faint { opacity: 0.35; } .qdnapro-illustration.illustration-missing { position: relative; background: rgba(0, 0, 0, 0.03); border: 1px dashed #c4c7cc; border-radius: 12px; aspect-ratio: 4/3; height: auto; } .qdnapro-illustration.illustration-missing::after { content: "?"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: "Inter", sans-serif; font-size: 24px; color: #898e99; } [data-theme=dark] .qdnapro-illustration.illustration-missing { background: rgba(255, 255, 255, 0.04); border-color: #565b66; } [data-theme=dark] .qdnapro-illustration.illustration-missing::after { color: #6b7280; } .qdnapro-info-card { --info-card-title: var(--c-text-heading, #1a1d3a); --info-card-meta: var(--c-text-muted, #6a6e9a); --info-card-frame: var(--c-border, #e7e9ec); --info-card-fill: transparent; --info-card-icon-bg: #eef0f2; display: flex; align-items: flex-start; gap: 14px; box-sizing: border-box; padding: 16px; border: 1px solid var(--info-card-frame); border-radius: 18px; background: var(--info-card-fill); font-family: var(--theme-font-family, "Inter", sans-serif); text-align: left; } .qdnapro-info-card--on-purple { --info-card-title: #ffffff; --info-card-meta: rgba(255, 255, 255, 0.82); --info-card-frame: rgba(255, 255, 255, 0.20); --info-card-fill: rgba(255, 255, 255, 0.09); } .qdnapro-info-card--grey { --info-card-icon-bg: #eef0f2; } .qdnapro-info-card--red { --info-card-icon-bg: #fde7e7; } .qdnapro-info-card--yellow { --info-card-icon-bg: #fdf3d6; } .qdnapro-info-card--green { --info-card-icon-bg: #e2faf1; } .qdnapro-info-card--blue { --info-card-icon-bg: #e6eff9; } .qdnapro-info-card--bright-blue { --info-card-icon-bg: #d6e0f9; } .qdnapro-info-card--pink { --info-card-icon-bg: #f6e1e8; } .qdnapro-info-card--purple { --info-card-icon-bg: #ebe9fb; } .qdnapro-info-card__icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; padding: 8px; border-radius: 12px; background: var(--info-card-icon-bg); line-height: 0; } .qdnapro-info-card__icon-img { display: block; width: 40px; height: 40px; object-fit: contain; } .qdnapro-info-card__body { flex: 1 1 auto; min-width: 0; } .qdnapro-info-card__title { color: var(--info-card-title); font-size: 17px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; } .qdnapro-info-card__row { display: flex; align-items: center; gap: 8px; margin-top: 7px; color: var(--info-card-meta); font-size: 13px; line-height: 1.4; } .qdnapro-info-card__row .qdnapro-icon, .qdnapro-info-card__row qdnapro-icon { flex: 0 0 auto; width: 16px; height: 16px; color: inherit; } .qdnapro-info-card__row-text { min-width: 0; overflow-wrap: anywhere; } .qdnapro-ic { --ic-purple: var(--c-brand-purple, #40499a); --ic-purple-soft: var(--c-bg-secondary-purple, #e6e9ff); --ic-text: var(--c-text-body, #0b0b0d); --ic-muted: var(--c-text-muted, #6e7280); --ic-heading: var(--c-text-heading, #1a1f4d); --ic-border: var(--c-border-card, #e1e3e6); --ic-card: var(--c-bg-card, #ffffff); --ic-stage-bg: #1a1f2e; --ic-dim: rgba(16, 20, 45, 0.62); --ic-warn-bg: var(--c-tag-warning-bg, #fff2d6); --ic-warn-text: var(--c-tag-warning-text, #a06400); --ic-radius: var(--r-card, 14px); --ic-radius-sm: var(--r-btn, 8px); --ic-ff: var(--ff, "Inter", system-ui, -apple-system, "Segoe UI", sans-serif); box-sizing: border-box; display: flex; flex-direction: column; height: 100%; min-height: 0; font-family: var(--ic-ff); color: var(--ic-text); } .qdnapro-ic *, .qdnapro-ic *::before, .qdnapro-ic *::after { box-sizing: border-box; } .qdnapro-ic .qdnapro-ic-main { flex: 1 1 auto; min-height: 0; display: flex; gap: var(--s-5, 20px); align-items: stretch; } .qdnapro-ic .qdnapro-ic-stagewrap { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--s-3, 12px); } .qdnapro-ic .qdnapro-ic-stage { flex: 1 1 auto; min-height: 280px; position: relative; border-radius: var(--ic-radius); overflow: hidden; background: var(--ic-stage-bg); } .qdnapro-ic .qdnapro-ic-img { display: block; max-width: 100%; } .qdnapro-ic .qdnapro-ic-toolbar { flex: 0 0 auto; display: flex; gap: var(--s-2, 8px); align-items: center; } .qdnapro-ic .qdnapro-ic-side { flex: 0 0 230px; max-width: 230px; display: flex; flex-direction: column; gap: var(--s-3, 12px); padding-left: var(--s-5, 20px); border-left: 1px solid var(--ic-border); overflow-y: auto; } .qdnapro-ic .qdnapro-ic-side-heading { font-size: 13px; font-weight: var(--fw-semi, 600); color: var(--ic-heading); letter-spacing: 0.01em; } .qdnapro-ic .qdnapro-ic-previews { display: flex; flex-direction: column; gap: var(--s-5, 20px); } .qdnapro-ic .qdnapro-ic-preview-target { overflow: hidden; background: var(--ic-purple-soft); } .qdnapro-ic .qdnapro-ic-surface { display: flex; align-items: center; gap: var(--s-3, 12px); } .qdnapro-ic .qdnapro-ic-surface-target { flex: 0 0 auto; box-shadow: 0 0 0 1px var(--ic-border); } .qdnapro-ic .qdnapro-ic-surface-label { font-size: 12px; color: var(--ic-muted); } .qdnapro-ic .qdnapro-ic-device { display: flex; flex-direction: column; align-items: center; gap: var(--s-2, 8px); } .qdnapro-ic .qdnapro-ic-device-label { font-size: 11px; color: var(--ic-muted); } .qdnapro-ic .qdnapro-ic-device-frame { background: #d7dbe8; border-radius: 10px; padding: 8px; width: 100%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); } .qdnapro-ic .qdnapro-ic-device-target { width: 100%; aspect-ratio: 16/9; border-radius: 4px; } .qdnapro-ic .qdnapro-ic-device-phone .qdnapro-ic-device-frame { width: 96px; border-radius: 16px; padding: 10px 6px; position: relative; } .qdnapro-ic .qdnapro-ic-device-phone .qdnapro-ic-device-frame::before { content: ""; position: absolute; top: 5px; left: 50%; transform: translateX(-50%); width: 26px; height: 3px; border-radius: 2px; background: rgba(0, 0, 0, 0.18); } .qdnapro-ic .qdnapro-ic-device-phone .qdnapro-ic-device-target { border-radius: 6px; } .qdnapro-ic .qdnapro-ic-device-tablet .qdnapro-ic-device-frame { width: 150px; border-radius: 12px; } .qdnapro-ic .qdnapro-ic-device-desktop .qdnapro-ic-device-frame { width: 100%; padding: 0; overflow: hidden; } .qdnapro-ic .qdnapro-ic-device-desktop .qdnapro-ic-device-frame::before { content: ""; display: block; height: 16px; background: radial-gradient(circle 2px at 9px 8px, #b9bfd0 50%, transparent 51%), radial-gradient(circle 2px at 18px 8px, #b9bfd0 50%, transparent 51%), radial-gradient(circle 2px at 27px 8px, #b9bfd0 50%, transparent 51%), #eceef5; } .qdnapro-ic .qdnapro-ic-device-desktop .qdnapro-ic-device-target { border-radius: 0; } .qdnapro-ic .qdnapro-ic-footer { flex: 0 0 auto; display: flex; align-items: center; gap: var(--s-4, 16px); margin-top: var(--s-4, 16px); padding-top: var(--s-4, 16px); border-top: 1px solid var(--ic-border); } .qdnapro-ic .qdnapro-ic-warning { flex: 1 1 auto; min-width: 0; font-size: 12px; line-height: 1.35; color: var(--ic-warn-text); background: var(--ic-warn-bg); border-radius: var(--ic-radius-sm); padding: 8px 12px; } .qdnapro-ic .qdnapro-ic-warning[hidden] { display: none; } .qdnapro-ic .qdnapro-ic-actions { flex: 0 0 auto; margin-left: auto; display: flex; gap: var(--s-2, 8px); } .qdnapro-ic.is-shape-circle .cropper-view-box, .qdnapro-ic.is-shape-circle .cropper-face { border-radius: 50%; } .qdnapro-ic.is-shape-circle .qdnapro-ic-preview-target { border-radius: 50%; } .qdnapro-ic.is-shape-rounded .cropper-view-box, .qdnapro-ic.is-shape-rounded .cropper-face { border-radius: 12px; } .qdnapro-ic.is-shape-rounded .qdnapro-ic-surface-target { border-radius: 8px; } .qdnapro-ic .cropper-view-box { outline: 1px solid var(--ic-purple); } .qdnapro-ic .cropper-line, .qdnapro-ic .cropper-point { background-color: var(--ic-purple); } .qdnapro-ic .cropper-point.point-se::before { background-color: var(--ic-purple); } .qdnapro-ic .cropper-modal { background-color: var(--ic-dim); opacity: 1; } .qdnapro-ic .cropper-bg { background-image: none; } @media (max-width: 720px) { .qdnapro-ic .qdnapro-ic-main { flex-direction: column; } .qdnapro-ic .qdnapro-ic-side { flex: 0 0 auto; max-width: none; padding-left: 0; border-left: 0; border-top: 1px solid var(--ic-border); padding-top: var(--s-4, 16px); } .qdnapro-ic .qdnapro-ic-previews { flex-direction: row; flex-wrap: wrap; align-items: flex-start; } } .qdnapro-image-crop-trigger { display: inline-flex; align-items: center; gap: var(--s-2, 8px); cursor: pointer; font-family: var(--ff, "Inter", sans-serif); color: var(--c-brand-purple, #40499a); font-size: 13px; font-weight: var(--fw-medium, 500); } .qdnapro-image-crop-trigger .qdnapro-image-crop-thumb { width: 40px; height: 40px; border-radius: 8px; background: var(--c-bg-secondary-purple, #e6e9ff); background-size: cover; background-position: center; box-shadow: inset 0 0 0 1px var(--c-border-card, #e1e3e6); } [data-theme-dark] .qdnapro-ic, [data-theme=dark] .qdnapro-ic, body[data-theme=dark] .qdnapro-ic { --ic-card: var(--c-grey-800, #2e3036); --ic-border: var(--c-white-10, rgba(255, 255, 255, 0.10)); --ic-stage-bg: #0c0e16; --ic-purple-soft: var(--c-grey-700, #40444d); } [data-theme-dark] .qdnapro-ic .qdnapro-ic-device-frame, [data-theme=dark] .qdnapro-ic .qdnapro-ic-device-frame, body[data-theme=dark] .qdnapro-ic .qdnapro-ic-device-frame { background: #3a3f4d; } [data-theme-dark] .qdnapro-ic .qdnapro-ic-device-desktop .qdnapro-ic-device-frame::before, [data-theme=dark] .qdnapro-ic .qdnapro-ic-device-desktop .qdnapro-ic-device-frame::before, body[data-theme=dark] .qdnapro-ic .qdnapro-ic-device-desktop .qdnapro-ic-device-frame::before { background: #2b2f3a; } .text-h1 { font-family: "Inter", sans-serif; letter-spacing: 0; font-weight: 600; font-size: 60px; line-height: 72px; } .text-h2 { font-family: "Inter", sans-serif; letter-spacing: 0; font-weight: 600; font-size: 40px; line-height: 56px; } .text-h3 { font-family: "Inter", sans-serif; letter-spacing: 0; font-weight: 600; font-size: 32px; line-height: 48px; } .text-h4 { font-family: "Inter", sans-serif; letter-spacing: 0; font-weight: 600; font-size: 28px; line-height: 44px; } .text-h5 { font-family: "Inter", sans-serif; letter-spacing: 0; font-weight: 600; font-size: 24px; line-height: 36px; } .text-h6 { font-family: "Inter", sans-serif; letter-spacing: 0; font-weight: 600; font-size: 20px; line-height: 24px; } .text-body-xs { font-family: "Inter", sans-serif; letter-spacing: 0; font-weight: 400; font-size: 10px; line-height: 20px; } .text-body-sm { font-family: "Inter", sans-serif; letter-spacing: 0; font-weight: 400; font-size: 12px; line-height: 20px; } .text-body-md { font-family: "Inter", sans-serif; letter-spacing: 0; font-weight: 400; font-size: 14px; line-height: 24px; } .text-body-lg { font-family: "Inter", sans-serif; letter-spacing: 0; font-weight: 400; font-size: 16px; line-height: 24px; } .text-body-xl { font-family: "Inter", sans-serif; letter-spacing: 0; font-weight: 400; font-size: 20px; line-height: 32px; } .qdnapro-inbox-message { --msg-bg: #ffffff; --msg-bg-hover: #f0f1f2; --msg-text: #0b0b0d; --msg-text-muted: #6b7280; --msg-accent: #4652f3; box-sizing: border-box; } .qdnapro-inbox-message *, .qdnapro-inbox-message *::before, .qdnapro-inbox-message *::after { box-sizing: border-box; } .qdnapro-inbox-message { display: flex; align-items: stretch; gap: 8px; padding: 4px 8px 4px 4px; border-radius: 8px; background: var(--msg-bg); color: var(--msg-text); cursor: pointer; text-decoration: none; user-select: none; transition: background-color 120ms ease-out; } .qdnapro-inbox-message:hover:not(.inbox-message-swiping) { background: var(--msg-bg-hover); } .qdnapro-inbox-message.inbox-message-selected { --msg-bg: #e6e9ff; --msg-bg-hover: #daddf2; } .qdnapro-inbox-message.inbox-message-active { --msg-bg: #e6e9ff; --msg-bg-hover: #daddf2; box-shadow: inset 3px 0 0 0 var(--msg-accent); } .qdnapro-inbox-message:focus { outline: none; } .qdnapro-inbox-message:focus-visible, .qdnapro-inbox-message.force-focus { outline: none; box-shadow: 0 0 0 2px #40499a, 0 0 0 6px rgba(70, 82, 243, 0.25); } .qdnapro-inbox-message.inbox-message-active:focus-visible, .qdnapro-inbox-message.inbox-message-active.force-focus { box-shadow: inset 3px 0 0 0 var(--msg-accent), 0 0 0 2px #40499a, 0 0 0 6px rgba(70, 82, 243, 0.25); } .qdnapro-inbox-message .inbox-message-lead { flex-shrink: 0; display: flex; align-items: flex-start; gap: 4px; padding-top: 4px; width: 46px; justify-content: flex-end; } .qdnapro-inbox-message .inbox-message-unread-dot { flex-shrink: 0; width: 8px; height: 8px; margin-top: 13px; border-radius: 50%; background: var(--msg-accent); } .qdnapro-inbox-message .inbox-message-avatar-wrap { position: relative; display: inline-flex; flex-shrink: 0; } .qdnapro-inbox-message .inbox-message-avatar-status { position: absolute; right: -3px; bottom: -3px; box-sizing: border-box; background-repeat: no-repeat; background-position: center; background-size: contain; } .qdnapro-inbox-message .inbox-message-avatar-status.is-in-progress { width: 17px; height: 21px; background-image: url(/img/inbox-status/hourglass.svg); } .qdnapro-inbox-message .inbox-message-avatar-status.is-completed { width: 21px; height: 20px; background-image: url(/img/inbox-status/check.svg); } .qdnapro-inbox-message .inbox-message-avatar-status.is-overdue { width: 22px; height: 19px; background-image: url(/img/inbox-status/warning-red.svg); } .qdnapro-inbox-message .inbox-message-avatar-status.is-due-soon { width: 22px; height: 19px; background-image: url(/img/inbox-status/warning-yellow.svg); } .qdnapro-inbox-message .inbox-message-avatar-status.is-reminder { width: 18px; height: 21px; background-image: url(/img/inbox-status/bell.svg); } .qdnapro-inbox-message .inbox-message-avatar-status.is-scheduled { width: 21px; height: 20px; background-image: url(/img/inbox-status/timer.svg); } .qdnapro-inbox-message .inbox-message-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0; padding: 4px 0; } .qdnapro-inbox-message .inbox-message-row-1 { display: flex; align-items: center; gap: 4px; } .qdnapro-inbox-message .inbox-message-sender { flex: 1 1 auto; min-width: 0; font-family: "Inter", sans-serif; letter-spacing: 0; font-weight: 700; font-size: 14px; line-height: 24px; color: var(--msg-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .qdnapro-inbox-message:not(.inbox-message-unread) .inbox-message-sender { font-family: "Inter", sans-serif; letter-spacing: 0; font-weight: 500; font-size: 14px; line-height: 24px; } .qdnapro-inbox-message .inbox-message-actions { flex-shrink: 0; height: 24px; display: flex; align-items: center; gap: 0; } .qdnapro-inbox-message .inbox-message-paperclip { flex-shrink: 0; width: 20px; max-width: 20px; height: 20px; opacity: 1; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; color: var(--msg-text-muted); pointer-events: none; transition: max-width 200ms cubic-bezier(0.4, 0, 0.2, 1), width 200ms cubic-bezier(0.4, 0, 0.2, 1), opacity 150ms ease; } .qdnapro-inbox-message .inbox-message-forwarded { flex-shrink: 0; width: 20px; max-width: 20px; height: 20px; opacity: 1; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; color: var(--msg-text-muted); pointer-events: auto; transition: max-width 200ms cubic-bezier(0.4, 0, 0.2, 1), width 200ms cubic-bezier(0.4, 0, 0.2, 1), opacity 150ms ease; } .qdnapro-inbox-message .inbox-message-bookmark, .qdnapro-inbox-message .inbox-message-delete { width: 0; min-width: 0; max-width: 0; opacity: 0; overflow: hidden; pointer-events: none; transition: max-width 200ms cubic-bezier(0.4, 0, 0.2, 1), width 200ms cubic-bezier(0.4, 0, 0.2, 1), min-width 200ms cubic-bezier(0.4, 0, 0.2, 1), margin-left 200ms cubic-bezier(0.4, 0, 0.2, 1), opacity 150ms ease, color 120ms ease-out; } .qdnapro-inbox-message .inbox-message-delete { margin-left: 0; } .qdnapro-inbox-message:hover:not(.inbox-message-swiping) .inbox-message-paperclip, .qdnapro-inbox-message:focus-within:not(.inbox-message-swiping) .inbox-message-paperclip { width: 0; max-width: 0; opacity: 0; } .qdnapro-inbox-message:hover:not(.inbox-message-swiping) .inbox-message-bookmark, .qdnapro-inbox-message:hover:not(.inbox-message-swiping) .inbox-message-delete, .qdnapro-inbox-message:focus-within:not(.inbox-message-swiping) .inbox-message-bookmark, .qdnapro-inbox-message:focus-within:not(.inbox-message-swiping) .inbox-message-delete { width: 24px; min-width: 24px; max-width: 24px; opacity: 1; pointer-events: auto; } .qdnapro-inbox-message:hover:not(.inbox-message-swiping) .inbox-message-delete, .qdnapro-inbox-message:focus-within:not(.inbox-message-swiping) .inbox-message-delete { margin-left: 4px; } .qdnapro-inbox-message.inbox-message-bookmarked .inbox-message-paperclip { width: 0; max-width: 0; opacity: 0; } .qdnapro-inbox-message.inbox-message-bookmarked .inbox-message-bookmark { width: 24px; min-width: 24px; max-width: 24px; opacity: 1; pointer-events: auto; color: var(--msg-accent); } .qdnapro-inbox-message.inbox-message-navigate { position: relative; } .qdnapro-inbox-message.inbox-message-navigate .inbox-message-nav { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); display: flex; align-items: center; opacity: 0; pointer-events: none; transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1); } .qdnapro-inbox-message.inbox-message-navigate .inbox-message-timestamp, .qdnapro-inbox-message.inbox-message-navigate .inbox-message-due { transition: opacity 150ms ease; } .qdnapro-inbox-message.inbox-message-navigate:hover:not(.inbox-message-swiping) .inbox-message-nav, .qdnapro-inbox-message.inbox-message-navigate:focus-within:not(.inbox-message-swiping) .inbox-message-nav { opacity: 1; pointer-events: auto; } .qdnapro-inbox-message.inbox-message-navigate:hover:not(.inbox-message-swiping) .inbox-message-timestamp, .qdnapro-inbox-message.inbox-message-navigate:hover:not(.inbox-message-swiping) .inbox-message-due, .qdnapro-inbox-message.inbox-message-navigate:focus-within:not(.inbox-message-swiping) .inbox-message-timestamp, .qdnapro-inbox-message.inbox-message-navigate:focus-within:not(.inbox-message-swiping) .inbox-message-due { opacity: 0; } @media (prefers-reduced-motion: reduce) { .qdnapro-inbox-message .inbox-message-paperclip, .qdnapro-inbox-message .inbox-message-bookmark, .qdnapro-inbox-message .inbox-message-delete, .qdnapro-inbox-message .inbox-message-nav, .qdnapro-inbox-message .inbox-message-timestamp, .qdnapro-inbox-message .inbox-message-due { transition: none; } } .qdnapro-inbox-message .inbox-message-row-2 { display: flex; align-items: center; gap: 8px; margin-top: -2px; } .qdnapro-inbox-message .inbox-message-subject { flex: 1 1 auto; min-width: 0; font-family: "Inter", sans-serif; letter-spacing: 0; font-weight: 500; font-size: 14px; line-height: 24px; color: var(--msg-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .qdnapro-inbox-message.inbox-message-unread .inbox-message-subject { font-family: "Inter", sans-serif; letter-spacing: 0; font-weight: 700; font-size: 14px; line-height: 24px; color: var(--msg-accent); } .qdnapro-inbox-message .inbox-message-timestamp { flex-shrink: 0; font-family: "Inter", sans-serif; letter-spacing: 0; font-weight: 500; font-size: 12px; line-height: 20px; color: var(--msg-text); } .qdnapro-inbox-message.inbox-message-unread .inbox-message-timestamp { font-family: "Inter", sans-serif; letter-spacing: 0; font-weight: 700; font-size: 12px; line-height: 20px; color: var(--msg-accent); } .qdnapro-inbox-message .inbox-message-row-3 { display: flex; align-items: center; gap: 8px; margin-top: -2px; } .qdnapro-inbox-message .inbox-message-preview { flex: 1 1 auto; min-width: 0; font-family: "Inter", sans-serif; letter-spacing: 0; font-weight: 400; font-size: 12px; line-height: 20px; color: var(--msg-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .qdnapro-inbox-message .inbox-message-due { flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; font-family: "Inter", sans-serif; letter-spacing: 0; font-weight: 400; font-size: 12px; line-height: 20px; color: var(--msg-text); } .qdnapro-inbox-message .inbox-message-due qdnapro-icon { width: 16px; height: 16px; color: var(--msg-text-muted); } .qdnapro-inbox-message .inbox-message-tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; } .qdnapro-inbox-message.inbox-message-deadline-overdue .inbox-message-due, .qdnapro-inbox-message.inbox-message-deadline-overdue .inbox-message-due qdnapro-icon { color: #d93025; } .qdnapro-inbox-message.inbox-message-deadline-due-soon .inbox-message-due, .qdnapro-inbox-message.inbox-message-deadline-due-soon .inbox-message-due qdnapro-icon { color: #e8810a; } .qdnapro-inbox-message.inbox-message-deadline-overdue .inbox-message-due-standalone { background: rgba(217, 48, 37, 0.1); border-radius: 999px; padding: 2px 8px 2px 6px; margin-top: 2px; } .qdnapro-inbox-message.inbox-message-deadline-due-soon .inbox-message-due-standalone { background: rgba(232, 129, 10, 0.1); border-radius: 999px; padding: 2px 8px 2px 6px; margin-top: 2px; } .qdnapro-inbox-message .inbox-message-avatar-slot { position: relative; width: 34px; height: 34px; flex-shrink: 0; } .qdnapro-inbox-message .inbox-message-avatar-slot > qdnapro-avatar, .qdnapro-inbox-message .inbox-message-avatar-slot > .inbox-message-avatar-wrap { position: absolute; inset: 0; transition: opacity 120ms ease; } .qdnapro-inbox-message .inbox-message-select-checkbox { position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; opacity: 0; pointer-events: none; transition: opacity 120ms ease; } .qdnapro-inbox-message.inbox-message-selection-mode .inbox-message-avatar-slot > qdnapro-avatar, .qdnapro-inbox-message.inbox-message-selection-mode .inbox-message-avatar-slot > .inbox-message-avatar-wrap { opacity: 0; pointer-events: none; } .qdnapro-inbox-message.inbox-message-selection-mode .inbox-message-select-checkbox { opacity: 1; pointer-events: auto; } @media (hover: hover) { .qdnapro-inbox-message.inbox-message-selectable:not(.inbox-message-selection-mode):hover .inbox-message-avatar-slot > qdnapro-avatar, .qdnapro-inbox-message.inbox-message-selectable:not(.inbox-message-selection-mode):hover .inbox-message-avatar-slot > .inbox-message-avatar-wrap { opacity: 0; pointer-events: none; } .qdnapro-inbox-message.inbox-message-selectable:not(.inbox-message-selection-mode):hover .inbox-message-select-checkbox { opacity: 1; pointer-events: auto; } } .qdnapro-inbox-message.inbox-message-swiping { background: var(--c-bg-card, #ffffff); } .qdnapro-inbox-message.inbox-message-disabled { opacity: 0.55; cursor: not-allowed; pointer-events: none; } .qdnapro-inbox-message.inbox-message-disabled:focus-visible, .qdnapro-inbox-message.inbox-message-disabled.force-focus { box-shadow: none; } [data-bg-context=purple] .qdnapro-inbox-message { --msg-bg-hover: #daddf2; } [data-theme=dark] .qdnapro-inbox-message { --msg-bg: transparent; --msg-bg-hover: #565b66; --msg-text: #e1e3e6; --msg-text-muted: #a6aab3; --msg-accent: #a5acff; } [data-theme=dark] .qdnapro-inbox-message.inbox-message-selected { --msg-bg: rgba(165, 172, 255, 0.18); --msg-bg-hover: rgba(165, 172, 255, 0.28); } [data-theme=dark] .qdnapro-inbox-message.inbox-message-active { --msg-bg: rgba(165, 172, 255, 0.18); --msg-bg-hover: rgba(165, 172, 255, 0.28); box-shadow: inset 3px 0 0 0 var(--msg-accent); } [data-theme=dark] .qdnapro-inbox-message:focus-visible, [data-theme=dark] .qdnapro-inbox-message.force-focus { box-shadow: 0 0 0 2px #a5acff, 0 0 0 6px rgba(70, 82, 243, 0.4); } [data-theme=dark] .qdnapro-inbox-message.inbox-message-active:focus-visible, [data-theme=dark] .qdnapro-inbox-message.inbox-message-active.force-focus { box-shadow: inset 3px 0 0 0 var(--msg-accent), 0 0 0 2px #a5acff, 0 0 0 6px rgba(70, 82, 243, 0.4); } .qdnapro-input { display: block; font-family: inter, sans-serif; font-size: 14px; line-height: 24px; } .qdnapro-input.input-size-touch { font-size: 20px; line-height: 30px; } .qdnapro-input .input-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; } .qdnapro-input .input-header .input-label { font-weight: 500; color: #0b0b0d; display: inline-flex; align-items: baseline; } .qdnapro-input .input-header .input-label .input-required { color: #c65a5a; margin-right: 2px; font-weight: 500; } .qdnapro-input .input-header .input-label .input-optional { color: #6b6f78; font-weight: 400; margin-left: 2px; } .qdnapro-input .input-header .input-info-btn { flex-shrink: 0; } .qdnapro-input .input-hint { color: #6b6f78; font-size: 13px; line-height: 20px; margin-bottom: 8px; } .qdnapro-input .input-field-row { display: flex; align-items: center; gap: 8px; } .qdnapro-input.input-size-big .input-external-btn { width: 52px; min-width: 52px; min-height: 52px; } .qdnapro-input.input-size-small .input-external-btn { width: 40px; min-width: 40px; min-height: 40px; } .qdnapro-input.input-size-touch .input-external-btn { width: 56px; min-width: 56px; min-height: 56px; } .qdnapro-input .input-field { display: flex; align-items: center; gap: 8px; flex: 1; background: #ffffff; border: 1px solid #c4c7cc; border-radius: 8px; padding: 0 12px; box-sizing: border-box; transition: border-color 120ms ease-out, background-color 120ms ease-out; } /* Kleur van het LEADING-ICOON in de basis (besluit 78, vervolg 31.07.2026): stond op #a6aab3 en haalde daarmee dezelfde contrast-inversie als de placeholder had, namelijk een LAGERE verhouding dan de uitgeschakelde stand (#898e99), waardoor een gewoon veld leest als een veld dat je niet mag gebruiken. Gemeten met de WCAG-formule, niet op het oog: oud #a6aab3 op wit #ffffff -> 2.33:1 oud #a6aab3 op --c-grey-100 #e7e9ec -> 1.91:1 oud #a6aab3 op het uitgeschakelde vlak #f0f1f2 -> 2.06:1 disabled-icoon #898e99 op #f0f1f2 (zijn eigen vlak) -> 2.90:1 nieuw var(--c-text-muted) #6e7280 op wit -> 4.79:1 nieuw op #e7e9ec -> 3.94:1 nieuw op #f0f1f2 -> 4.24:1 De rangorde is daarmee weer gewoon-donkerder-dan-disabled. Het disabled-icoon zelf blijft #898e99: dat zat niet fout, het werd ingehaald door een basis die te licht stond. De grijze variant had dit icoon al eerder op --c-text-muted gezet; die regel blijft staan als zelfstandige garantie voor die variant. Met fallback #6e7280 erin, want `color` zonder fallback valt bij een niet resolvende var terug op erven, en dat is hier de bijna-zwarte veldtekst. Dark theme, glass en dark-purple zijn niet geraakt: die hebben elk hun eigen regel voor dit icoon, verderop in dit bestand. */ .qdnapro-input .input-field .input-leading-icon { display: inline-flex; width: 16px; height: 16px; color: var(--c-text-muted, #6e7280); flex-shrink: 0; } /* Leading avatar (dropdown trigger showing the selected user's photo). Sits in the same slot as the leading icon; slightly tighter right margin so the value text hugs it. [Kim 2026-07-20] */ .qdnapro-input .input-field .input-leading-avatar { display: inline-flex; flex-shrink: 0; margin-left: -2px; } .qdnapro-input .input-field .input-leading-btn { flex-shrink: 0; margin-left: -4px; } .qdnapro-input .input-field .input-pretab, .qdnapro-input .input-field .input-posttab { display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; background: #f0f1f2; color: #898e99; font-weight: 500; flex-shrink: 0; align-self: stretch; } .qdnapro-input .input-field .input-pretab qdnapro-icon, .qdnapro-input .input-field .input-posttab qdnapro-icon { display: inline-flex; width: 16px; height: 16px; color: #898e99; flex-shrink: 0; } .qdnapro-input .input-field .input-pretab .input-pretab-text, .qdnapro-input .input-field .input-pretab .input-posttab-text, .qdnapro-input .input-field .input-posttab .input-pretab-text, .qdnapro-input .input-field .input-posttab .input-posttab-text { white-space: nowrap; } .qdnapro-input .input-field .input-pretab { border-right: 1px solid #c4c7cc; } .qdnapro-input .input-field .input-posttab { border-left: 1px solid #c4c7cc; } .qdnapro-input .input-field .input-field-inner { display: flex; align-items: center; flex: 1; min-width: 0; padding: 0 12px; background: #ffffff; } .qdnapro-input .input-field .input-field-inner .input-native { width: 100%; } .qdnapro-input .input-field .input-native { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; color: #0b0b0d; padding: 0; min-width: 0; } /* Placeholder-kleur van de BASIS (besluit 78, klus 4b, Kim 31.07.2026): stond op #a6aab3 en haalde daarmee EEN LAGERE contrastverhouding dan de uitgeschakelde stand (#898e99), waardoor een leeg veld leek alsof je het niet mocht gebruiken. Gemeten met de WCAG-formule: oude basis-placeholder #a6aab3 op wit -> 2.33:1 oude basis-placeholder #a6aab3 op #e7e9ec -> 1.91:1 disabled-placeholder #898e99 op #e7e9ec -> 2.70:1 var(--c-text-muted) is dezelfde token die de grijze variant hieronder al gebruikt (zie die toelichting bij .input-grey verderop in dit bestand): op wit geeft dat 4.79:1, op #e7e9ec 3.94:1. Beide ruim boven de disabled-stand, dus de rangorde is weer gewoon-donkerder-dan-disabled. De disabled-placeholder zelf is niet aangepast: die zat niet fout, hij werd alleen ingehaald door een basis die te licht stond. */ .qdnapro-input .input-field .input-native::placeholder { color: var(--c-text-muted); font-weight: 500; } .qdnapro-input .input-field .input-native:disabled { color: #898e99; cursor: not-allowed; } .qdnapro-input .input-field .input-trailing { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; } .qdnapro-input .input-field .input-trailing .input-suffix-text { font-size: 14px; font-weight: 600; color: #6b7090; white-space: nowrap; padding-right: 2px; } .qdnapro-input .input-field .input-trailing .input-state-icon { display: inline-flex; width: 16px; height: 16px; } .qdnapro-input .input-field .input-trailing .input-state-success { color: #428b6e; } .qdnapro-input .input-field .input-trailing .input-state-error { color: #c65a5a; } .qdnapro-input .input-field .input-trailing .input-state-warning { color: #ef8e02; } .qdnapro-input .input-field .input-trailing .input-trailing-icon { display: inline-flex; width: 16px; height: 16px; color: #a6aab3; } .qdnapro-input .input-field .input-trailing .input-chevron { margin-right: -4px; } .qdnapro-input .input-field .input-trailing .input-mic-btn, .qdnapro-input .input-field .input-trailing .input-nova-btn { flex-shrink: 0; } .qdnapro-input.input-size-big .input-field { min-height: 52px; } .qdnapro-input.input-size-small .input-field { min-height: 40px; } .qdnapro-input.input-size-touch .input-field { min-height: 56px; } .qdnapro-input.input-type-defined-field .input-field { padding: 0; overflow: hidden; gap: 0; } /* [Kim 2026-05-01] Trailing positioned absolute so the textarea fills full width — native scrollbar lands flush on the right border. Clear-x floats over the top-right corner just left of the scrollbar. */ .qdnapro-input.input-type-expanding .input-field { align-items: stretch; position: relative; padding-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 0; overflow: hidden; } .qdnapro-input.input-type-expanding .input-field .input-leading-icon { align-self: flex-start; margin-top: 16px; margin-left: 12px; } .qdnapro-input.input-type-expanding .input-field .input-trailing { position: absolute; top: 8px; right: 20px; margin: 0; background: transparent; z-index: 1; } .qdnapro-input.input-type-expanding .input-field textarea.input-native { resize: none; overflow-y: hidden; line-height: 24px; min-height: 52px; padding: 14px 52px 14px 12px; font-family: inherit; display: block; box-sizing: border-box; width: 100%; } .qdnapro-input.input-type-expanding.input-size-small .input-field .input-leading-icon { margin-top: 10px; } .qdnapro-input.input-type-expanding.input-size-small .input-field .input-trailing { top: 4px; } .qdnapro-input.input-type-expanding.input-size-small .input-field textarea.input-native { min-height: 40px; padding: 8px 52px 8px 12px; } /* no-clear: no trailing clear-x, so the textarea reclaims the reserved right space and uses the full width. [Kim 2026-06-16] */ .qdnapro-input.input-type-expanding[no-clear] .input-field textarea.input-native { padding-right: 12px; } .qdnapro-input:not(.input-filled) [data-role=clear] { display: none; } .qdnapro-input.input-type-number .input-number-steppers { display: inline-flex; flex-direction: column; align-items: center; gap: 0; margin-right: -4px; } .qdnapro-input.input-type-number .input-number-steppers > qdnapro-icon-btn { width: 16px; height: 14px; display: inline-flex; align-items: center; justify-content: center; } .qdnapro-input.input-type-number .input-number-steppers > qdnapro-icon-btn qdnapro-icon { width: 14px; height: 14px; } .qdnapro-input.input-type-autocomplete .input-field-row, .qdnapro-input.input-type-phone .input-field-row { position: relative; } .qdnapro-input .input-ac-dropdown { position: absolute; top: calc(100% + 4px); left: 0; right: 0; max-height: 320px; overflow-y: auto; background: #ffffff; border: 1px solid #c4c7cc; border-radius: 8px; box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.08), 0 1px 2px 0 rgba(0, 0, 0, 0.14); padding: 8px; z-index: 1000; } .input-external-btn + .qdnapro-input .input-ac-dropdown { right: 60px; } .qdnapro-input .input-ac-item { display: flex; align-items: center; height: 40px; padding: 0 12px; border-radius: 4px; font-family: inter, -apple-system, BlinkMacSystemFont, sans-serif; font-size: 14px; line-height: 24px; font-weight: 500; color: #0b0b0d; cursor: pointer; user-select: none; } .qdnapro-input .input-ac-item + .qdnapro-input .input-ac-item { margin-top: 4px; } .qdnapro-input .input-ac-item strong { font-weight: 700; } .qdnapro-input .input-ac-item:hover, .qdnapro-input .input-ac-item.input-ac-item-active { background: #f0f1f2; } .qdnapro-input .input-ac-item.input-ac-item-disabled { color: #898e99; cursor: default; } .qdnapro-input .input-ac-empty { padding: 12px; font-size: 14px; line-height: 24px; font-weight: 500; color: #898e99; text-align: center; } .qdnapro-input .input-ac-loading { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; font-size: 14px; line-height: 24px; font-weight: 500; color: #555a66; } .qdnapro-input .input-ac-spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid #c4c7cc; border-top-color: #40499a; border-radius: 50%; animation: qdnapro-ac-spin 0.7s linear infinite; } @keyframes qdnapro-ac-spin { to { transform: rotate(360deg); } } .qdnapro-input .input-ac-error { padding: 12px; font-size: 14px; line-height: 24px; font-weight: 500; color: #c65a5a; text-align: center; } .qdnapro-input.input-ac-open .input-field { border-color: #535ba4; box-shadow: 0 0 0 3px rgba(70, 82, 243, 0.4); } /* Kleur van de CURRENCY-PREFIX (het euroteken) in de basis, dus bij een leeg of nog onveranderd veld (besluit 78, vervolg 31.07.2026). Zelfde contrast-inversie als de placeholder en het leading-icoon: stond op #a6aab3 en dat is LICHTER dan de uitgeschakelde stand #898e99, waardoor een gewoon bedragveld leest als een veld dat je niet mag gebruiken. Gemeten met de WCAG-formule: oud #a6aab3 op wit #ffffff -> 2.33:1 oud #a6aab3 op --c-grey-100 #e7e9ec -> 1.91:1 oud #a6aab3 op het uitgeschakelde vlak #f0f1f2 -> 2.06:1 disabled-prefix #898e99 op #f0f1f2 (zijn eigen vlak) -> 2.90:1 nieuw var(--c-text-muted) #6e7280 op wit -> 4.79:1 nieuw op #e7e9ec -> 3.94:1 nieuw op #f0f1f2 -> 4.24:1 De prefix volgde bewust de placeholder-kleur (het is dezelfde "nog niets ingevuld" stand), dus hij moest mee met de placeholder-fix. De twee regels hieronder blijven ongemoeid: gevuld gaat naar bijna-zwart, uitgeschakeld blijft #898e99. Fallback #6e7280 om dezelfde reden als bij het leading-icoon hierboven. */ .qdnapro-input.input-type-currency .input-currency-prefix { color: var(--c-text-muted, #6e7280); font-weight: 500; flex-shrink: 0; user-select: none; } .qdnapro-input.input-type-currency.input-filled .input-currency-prefix { color: #0b0b0d; } .qdnapro-input.input-type-currency.input-disabled .input-currency-prefix { color: #898e99; } .qdnapro-input.input-type-currency .input-native { text-align: left; } /* === number / currency +/- spinner horizontal layout === Ported to the build source 2026-06-19 (was only in for-sander/_input.scss, so the live counter never got its button nudges). Layout: [ - ] value [ + ]. The minus button is the first child of .input-field; the plus lives in .input-trailing. */ .qdnapro-input.input-type-number.input-number-horizontal .input-native { text-align: center; } .qdnapro-input.input-number-horizontal .input-field > qdnapro-icon-btn[data-role=step-down] { flex-shrink: 0; margin-left: -4px; margin-right: 4px; } .qdnapro-input.input-number-horizontal .input-trailing > qdnapro-icon-btn[data-role=step-up] { flex-shrink: 0; margin-right: -4px; } /* Currency + counter: place the minus button before the currency prefix via flex order, giving [ - ] [ € value ] [ + ]. The € stays next to the amount. */ .qdnapro-input.input-type-currency.input-number-horizontal .input-field > qdnapro-icon-btn[data-role=step-down] { order: -1; } .qdnapro-input.input-type-phone .input-country-picker { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; margin: 0 9px 0 4px; position: relative; background: transparent; border: none; cursor: pointer; font: inherit; color: #1d1f26; flex-shrink: 0; } .qdnapro-input.input-type-phone .input-country-picker::after { content: ""; position: absolute; right: -9px; top: 8px; bottom: 8px; width: 1px; background: #e1e3e6; } .qdnapro-input.input-type-phone .input-country-picker:hover { background: #f0f1f2; border-radius: 8px; } .qdnapro-input.input-type-phone .input-country-picker[disabled] { cursor: not-allowed; opacity: 0.6; } .qdnapro-input.input-type-phone .input-country-picker.input-country-picker-static { cursor: default; } .qdnapro-input.input-type-phone .input-country-picker.input-country-picker-static:hover { background: transparent; border-radius: 0; } .qdnapro-input.input-type-phone .input-country-picker .input-country-flag { font-size: 18px; line-height: 1; display: inline-flex; align-items: center; } .qdnapro-input.input-type-phone .input-country-picker .input-country-dial { font-weight: 500; color: #555a66; font-size: 14px; line-height: 1; } .qdnapro-input.input-type-phone .input-country-picker .input-country-chev { color: #898e99; margin-left: 2px; width: 14px; height: 14px; } .qdnapro-input .input-country-dropdown { position: absolute; top: calc(100% + 4px); left: 0; min-width: 220px; max-height: 280px; overflow-y: auto; background: #ffffff; border: 1px solid #c4c7cc; border-radius: 8px; box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.08), 0 1px 2px 0 rgba(0, 0, 0, 0.14); padding: 8px; z-index: 1000; } .qdnapro-input .input-country-item { display: flex; align-items: center; gap: 10px; width: 100%; height: 40px; padding: 0 12px; border-radius: 4px; background: transparent; border: none; cursor: pointer; font: inherit; color: #0b0b0d; text-align: left; } .qdnapro-input .input-country-item + .qdnapro-input .input-country-item { margin-top: 4px; } .qdnapro-input .input-country-item:hover, .qdnapro-input .input-country-item.input-country-item-active { background: #f0f1f2; } .qdnapro-input .input-country-item .input-country-flag { font-size: 18px; line-height: 1; flex-shrink: 0; } .qdnapro-input .input-country-item .input-country-name { flex: 1; font-weight: 500; } .qdnapro-input .input-country-item .input-country-dial { color: #555a66; font-weight: 500; flex-shrink: 0; } .qdnapro-input.input-type-number.input-number-right .input-native { text-align: right; } .qdnapro-input.input-filled .input-field .input-native { color: #0b0b0d; font-weight: 500; } .qdnapro-input.input-success .input-field { border-color: #428b6e; } .qdnapro-input.input-error .input-field { border-color: #c65a5a; } .qdnapro-input.input-warning .input-field { border-color: #ef8e02; } .qdnapro-input .input-field:hover { border-color: #40499a; } .qdnapro-input .input-field:focus-within { border-color: #535ba4; box-shadow: 0 0 0 3px rgba(70, 82, 243, 0.4); } .qdnapro-input .input-field:focus-within .input-native::placeholder { font-weight: 400; } .qdnapro-input.input-success .input-field:focus-within { border-color: #428b6e; box-shadow: 0 0 0 3px rgba(110, 231, 183, 0.4); } .qdnapro-input.input-error .input-field:focus-within { border-color: #c65a5a; box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.4); } .qdnapro-input.input-warning .input-field:focus-within { border-color: #ef8e02; box-shadow: 0 0 0 3px rgba(251, 191, 92, 0.4); } .qdnapro-input.input-select .input-field { border-color: #535ba4; box-shadow: 0 0 0 3px rgba(70, 82, 243, 0.4); } .qdnapro-input.input-select.input-success .input-field { border-color: #428b6e; box-shadow: 0 0 0 3px rgba(110, 231, 183, 0.4); } .qdnapro-input.input-select.input-error .input-field { border-color: #c65a5a; box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.4); } .qdnapro-input.input-select.input-warning .input-field { border-color: #ef8e02; box-shadow: 0 0 0 3px rgba(251, 191, 92, 0.4); } .qdnapro-input.input-disabled .input-field, .qdnapro-input.input-disabled .input-field:hover, .qdnapro-input.input-disabled .input-field:focus-within { background: #f0f1f2; border-color: transparent; /* [Kim 2026-05-01] no outer border for softer look */ box-shadow: none; } .qdnapro-input.input-disabled .input-field .input-native, .qdnapro-input.input-disabled .input-field:hover .input-native, .qdnapro-input.input-disabled .input-field:focus-within .input-native { color: #898e99; cursor: not-allowed; } .qdnapro-input.input-disabled .input-field .input-native::placeholder, .qdnapro-input.input-disabled .input-field:hover .input-native::placeholder, .qdnapro-input.input-disabled .input-field:focus-within .input-native::placeholder { color: #898e99; } .qdnapro-input.input-disabled .input-field .input-leading-icon, .qdnapro-input.input-disabled .input-field .input-trailing-icon, .qdnapro-input.input-disabled .input-field:hover .input-leading-icon, .qdnapro-input.input-disabled .input-field:hover .input-trailing-icon, .qdnapro-input.input-disabled .input-field:focus-within .input-leading-icon, .qdnapro-input.input-disabled .input-field:focus-within .input-trailing-icon { color: #898e99; } .qdnapro-input.input-disabled .input-field .input-pretab, .qdnapro-input.input-disabled .input-field .input-posttab, .qdnapro-input.input-disabled .input-field:hover .input-pretab, .qdnapro-input.input-disabled .input-field:hover .input-posttab, .qdnapro-input.input-disabled .input-field:focus-within .input-pretab, .qdnapro-input.input-disabled .input-field:focus-within .input-posttab { background: #e1e3e6; border-color: #c4c7cc; color: #898e99; } .qdnapro-input.input-disabled .input-field .input-pretab qdnapro-icon, .qdnapro-input.input-disabled .input-field .input-posttab qdnapro-icon, .qdnapro-input.input-disabled .input-field:hover .input-pretab qdnapro-icon, .qdnapro-input.input-disabled .input-field:hover .input-posttab qdnapro-icon, .qdnapro-input.input-disabled .input-field:focus-within .input-pretab qdnapro-icon, .qdnapro-input.input-disabled .input-field:focus-within .input-posttab qdnapro-icon { color: #898e99; } .qdnapro-input.input-disabled .input-field .input-field-inner, .qdnapro-input.input-disabled .input-field:hover .input-field-inner, .qdnapro-input.input-disabled .input-field:focus-within .input-field-inner { background: transparent; } .qdnapro-input.input-readonly .input-field, .qdnapro-input.input-readonly .input-field:hover, .qdnapro-input.input-readonly .input-field:focus-within { background: transparent; border-color: transparent; box-shadow: none; padding-left: 0; } .qdnapro-input.input-readonly .input-field .input-native, .qdnapro-input.input-readonly .input-field:hover .input-native, .qdnapro-input.input-readonly .input-field:focus-within .input-native { color: #6b6f78; } .qdnapro-input.input-readonly .input-field .input-field-inner, .qdnapro-input.input-readonly .input-field:hover .input-field-inner, .qdnapro-input.input-readonly .input-field:focus-within .input-field-inner { background: transparent; } .qdnapro-input.input-readonly .input-field .input-pretab, .qdnapro-input.input-readonly .input-field .input-posttab, .qdnapro-input.input-readonly .input-field:hover .input-pretab, .qdnapro-input.input-readonly .input-field:hover .input-posttab, .qdnapro-input.input-readonly .input-field:focus-within .input-pretab, .qdnapro-input.input-readonly .input-field:focus-within .input-posttab { background: transparent; border-color: transparent; color: #6b6f78; padding-left: 0; } .qdnapro-input.input-readonly .input-field .input-pretab qdnapro-icon, .qdnapro-input.input-readonly .input-field .input-posttab qdnapro-icon, .qdnapro-input.input-readonly .input-field:hover .input-pretab qdnapro-icon, .qdnapro-input.input-readonly .input-field:hover .input-posttab qdnapro-icon, .qdnapro-input.input-readonly .input-field:focus-within .input-pretab qdnapro-icon, .qdnapro-input.input-readonly .input-field:focus-within .input-posttab qdnapro-icon { color: #6b6f78; } .qdnapro-input .input-message { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 13px; line-height: 20px; } .qdnapro-input .input-message qdnapro-icon { display: inline-flex; width: 16px; height: 16px; flex-shrink: 0; } .qdnapro-input .input-message-error { color: #c65a5a; } .qdnapro-input .input-message-warning { color: #ef8e02; } [data-theme=dark] .qdnapro-input .input-label { color: #f0f1f2; } [data-theme=dark] .qdnapro-input .input-optional { color: #a6aab3; } [data-theme=dark] .qdnapro-input .input-hint { color: #a6aab3; } [data-theme=dark] .qdnapro-input .input-required { color: #f87171; } [data-theme=dark] .qdnapro-input .input-field { background: #0b0b0d; border-color: #565b66; } [data-theme=dark] .qdnapro-input .input-native { color: #f0f1f2; } [data-theme=dark] .qdnapro-input.input-filled .input-field .input-native { color: #f0f1f2; } [data-theme=dark] .qdnapro-input .input-native::placeholder { color: #898e99; } [data-theme=dark] .qdnapro-input .input-leading-icon, [data-theme=dark] .qdnapro-input .input-trailing-icon { color: #898e99; } [data-theme=dark] .qdnapro-input.input-filled .input-leading-icon, [data-theme=dark] .qdnapro-input.input-filled .input-trailing-icon { color: #e1e3e6; } /* Currency-prefix in de donkere stand: EXPLICIET op de kleur die hij hier vandaag ook al heeft, zodat de basis-fix hierboven (#a6aab3 -> var(--c-text-muted)) het donkere thema niet meesleept. Dit is geen nieuwe keuze: in het donkere thema resolveert --c-text-muted naar --c-grey-400 en dat IS #a6aab3, dus de donkere stand verandert niet. De regel staat er omdat de basis nu een token gebruikt dat per thema iets anders betekent, en omdat de preview de tokens zelf niet definieert (daar zou de fallback #6e7280 anders op de bijna-zwarte donkere vulling belanden). Anders dan de placeholder en het leading-icoon had de prefix nog geen eigen donkere regel voor de lege stand, alleen voor gevuld/uitgeschakeld/alleen-lezen. */ [data-theme=dark] .qdnapro-input.input-type-currency .input-currency-prefix { color: #a6aab3; } [data-theme=dark] .qdnapro-input .input-field:hover { border-color: #666dae; } [data-theme=dark] .qdnapro-input.input-focus .input-field, [data-theme=dark] .qdnapro-input .input-field:focus-within { border-color: #535ba4; box-shadow: 0 0 0 3px rgba(70, 82, 243, 0.4); } [data-theme=dark] .qdnapro-input.input-select .input-field { border-color: #535ba4; box-shadow: 0 0 0 3px rgba(70, 82, 243, 0.4); } [data-theme=dark] .qdnapro-input.input-success .input-field { border-color: #58b992; box-shadow: 0 0 0 3px rgba(139, 236, 197, 0.4); } [data-theme=dark] .qdnapro-input .input-state-success { color: #58b992; } [data-theme=dark] .qdnapro-input.input-error .input-field { border-color: #f98d8d; box-shadow: 0 0 0 3px rgba(249, 141, 141, 0.4); } [data-theme=dark] .qdnapro-input .input-state-error { color: #f87171; } [data-theme=dark] .qdnapro-input .input-message-error { color: #f87171; } [data-theme=dark] .qdnapro-input.input-warning .input-field { border-color: #ef8e02; box-shadow: 0 0 0 3px rgba(251, 191, 92, 0.4); } [data-theme=dark] .qdnapro-input .input-state-warning { color: #ef8e02; } [data-theme=dark] .qdnapro-input .input-message-warning { color: #ef8e02; } [data-theme=dark] .qdnapro-input.input-disabled .input-field { background: #40444d; border-color: transparent; } [data-theme=dark] .qdnapro-input.input-disabled .input-native { color: #6b7280; } [data-theme=dark] .qdnapro-input.input-disabled .input-leading-icon, [data-theme=dark] .qdnapro-input.input-disabled .input-trailing-icon { color: #6b7280; } [data-theme=dark] .qdnapro-input.input-readonly .input-field { background: transparent; border-color: #565b66; } [data-theme=dark] .qdnapro-input .input-pretab, [data-theme=dark] .qdnapro-input .input-posttab { background: #40444d; color: #a6aab3; } [data-theme=dark] .qdnapro-input .input-pretab qdnapro-icon, [data-theme=dark] .qdnapro-input .input-posttab qdnapro-icon { color: #a6aab3; } [data-theme=dark] .qdnapro-input .input-pretab { border-right-color: #565b66; } [data-theme=dark] .qdnapro-input .input-posttab { border-left-color: #565b66; } [data-theme=dark] .qdnapro-input .input-field-inner { background: #0b0b0d; } [data-theme=dark] .qdnapro-input.input-type-search .qdnapro-icon-btn.icon-btn-dropdown-search, [data-theme=dark] .qdnapro-input .qdnapro-icon-btn.icon-btn-dropdown-search { background: #40444d; color: #e1e3e6; } [data-theme=dark] .qdnapro-input.input-type-search .qdnapro-icon-btn.icon-btn-dropdown-search:hover:not(.icon-btn-disabled), [data-theme=dark] .qdnapro-input .qdnapro-icon-btn.icon-btn-dropdown-search:hover:not(.icon-btn-disabled) { background: #565b66; } [data-theme=dark] .qdnapro-input.input-type-phone .input-country-picker::after { background: #565b66; } [data-theme=dark] .qdnapro-input .input-ac-dropdown { background: #1f2028; border-color: #565b66; } [data-theme=dark] .qdnapro-input .input-ac-item { color: #e1e3e6; } [data-theme=dark] .qdnapro-input .input-ac-item:hover, [data-theme=dark] .qdnapro-input .input-ac-item.input-ac-item-active { background: #565b66; } [data-theme=dark] .qdnapro-input .input-ac-item strong { color: #f0f1f2; } [data-theme=dark] .qdnapro-input .input-ac-empty, [data-theme=dark] .qdnapro-input .input-ac-loading { color: #a6aab3; } [data-theme=dark] .qdnapro-input .input-ac-error { color: #f87171; } [data-theme=dark] .qdnapro-input .input-ac-spinner { border-color: #565b66; border-top-color: #4652f3; } /* === theme: glass — added 2026-06-08 === Translucent fields for use on a dark / coloured surface (e.g. the login stage). Same structure and behaviour as the default input; only the colours change. Activate by setting data-theme="glass" on an ancestor (the login form does this). Focus ring uses the login lila accent. */ [data-theme=glass] .qdnapro-input .input-field { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.28); } [data-theme=glass] .qdnapro-input .input-field .input-native { color: #ffffff; } [data-theme=glass] .qdnapro-input .input-field .input-native::placeholder { color: rgba(255, 255, 255, 0.7); } [data-theme=glass] .qdnapro-input .input-leading-icon, [data-theme=glass] .qdnapro-input .input-trailing-icon { color: rgba(255, 255, 255, 0.75); } [data-theme=glass] .qdnapro-input.input-filled .input-leading-icon, [data-theme=glass] .qdnapro-input.input-filled .input-trailing-icon { color: #ffffff; } /* Currency-prefix op glas: net als bij het donkere thema hierboven expliciet op de kleur die hij vandaag ook al heeft, zodat de basis-fix de doorschijnende vulling op de donkere loginachtergrond niet meesleept (daar zou #6e7280 juist SLECHTER worden). Puur behoud, geen nieuwe kleurkeuze. Openstaand puntje voor later: glas zet zijn placeholder op rgba(255,255,255,0.7) en zijn iconen op 0.75, dus strikt genomen hoort de prefix daar ook in die reeks mee en niet op een grijs uit het lichte palet. Dat is een aparte designkeuze en is hier niet gemaakt. */ [data-theme=glass] .qdnapro-input.input-type-currency .input-currency-prefix { color: #a6aab3; } [data-theme=glass] .qdnapro-input .input-field:hover { border-color: rgba(255, 255, 255, 0.45); } [data-theme=glass] .qdnapro-input.input-focus .input-field, [data-theme=glass] .qdnapro-input .input-field:focus-within { border-color: #9a8fff; background: rgba(255, 255, 255, 0.2); box-shadow: 0 0 0 3px rgba(154, 143, 255, 0.35); } /* Trailing icon buttons (password eye-toggle, clear-x) on glass. */ [data-theme=glass] .qdnapro-input .input-trailing .qdnapro-icon-btn.icon-btn-input-icon { color: rgba(255, 255, 255, 0.75); } [data-theme=glass] .qdnapro-input .input-trailing .qdnapro-icon-btn.icon-btn-input-icon:hover:not(.icon-btn-disabled) { background-color: rgba(255, 255, 255, 0.12); color: #ffffff; } /* State accents kept legible on the dark surface. */ [data-theme=glass] .qdnapro-input.input-error .input-field { border-color: #f98d8d; box-shadow: 0 0 0 3px rgba(249, 141, 141, 0.4); } [data-theme=glass] .qdnapro-input .input-state-error, [data-theme=glass] .qdnapro-input .input-message-error { color: #f98d8d; } [data-theme=glass] .qdnapro-input.input-success .input-field { border-color: #58b992; } [data-theme=glass] .qdnapro-input .input-state-success { color: #8becc5; } /* === type: date — added 2026-05-11 (compiled from _input.scss) === */ .qdnapro-input.input-type-date .input-native::-webkit-calendar-picker-indicator { display: none; } .qdnapro-input.input-type-date .input-native { text-align: left; min-width: 0; } [data-theme=dark] .qdnapro-input.input-type-date .input-native::-webkit-calendar-picker-indicator { display: none; } /* === type: time — added 2026-06-19 (native , mirrors date) === */ .qdnapro-input.input-type-time .input-native::-webkit-calendar-picker-indicator { display: none; } .qdnapro-input.input-type-time .input-native { text-align: left; min-width: 0; } [data-theme=dark] .qdnapro-input.input-type-time .input-native::-webkit-calendar-picker-indicator { display: none; } /* === date/time empty-state placeholder (added 2026-06-19) === When nothing is entered, show the dd/mm/yyyy (and HH:mm) format text in the same light-grey placeholder colour as other inputs (like the currency "0,00"); the value turns dark once filled (.input-filled). [Kim] Meegetrokken met de basis-placeholder-fix (besluit 78, klus 4b, 31.07.2026): deze regel gebruikte bewust dezelfde kleur als de basis-placeholder ("in the same light-grey placeholder colour as other inputs"), dus zonder deze mee te nemen zou alleen dit type de oude, te lichte 1.91:1-kleur houden. */ .qdnapro-input.input-type-date:not(.input-filled) .input-native, .qdnapro-input.input-type-time:not(.input-filled) .input-native { color: var(--c-text-muted); } [data-theme=dark] .qdnapro-input.input-type-date:not(.input-filled) .input-native, [data-theme=dark] .qdnapro-input.input-type-time:not(.input-filled) .input-native { color: #898e99; } /* === variant: round (pill-shape) — PWA only [2026-06-30] === Boolean attribute `round`. Rounds the field to a pill shape with slightly wider horizontal padding so the content breathes at the curved edges. Internal icon-btns already use border-radius: 50% so their hover circles stay round. The right trailing edge gets a small negative margin to keep the last icon optically centred. */ .qdnapro-input.input-round .input-field { border-radius: 9999px; padding-left: 20px; padding-right: 12px; } .qdnapro-input.input-round .input-field .input-trailing { margin-right: 4px; } /* === variant: dark-purple [2026-06-30] === Boolean attribute `dark-purple`. Deep-purple surface for use on purple-background pages (PWA list_page search, login, etc.). Tokens: surface=--c-purple-700, text=--c-purple-50, placeholder/icons=--c-purple-300, label=--c-white-04, hint=--c-purple-300. Focus ring unchanged (brand purple border). */ .qdnapro-input.input-dark-purple .input-field { background: var(--c-purple-700); border-color: transparent; transition: background-color 120ms ease-out, border-color 120ms ease-out; } .qdnapro-input.input-dark-purple .input-field:hover { background: var(--c-purple-600); border-color: transparent; } .qdnapro-input.input-dark-purple .input-field:focus-within { border-color: var(--c-brand); background: var(--c-purple-700); } .qdnapro-input.input-dark-purple .input-field .input-native { color: var(--c-purple-50); } .qdnapro-input.input-dark-purple .input-field .input-native::placeholder { color: var(--c-purple-300); font-weight: 500; } .qdnapro-input.input-dark-purple .input-field .input-leading-icon { color: var(--c-purple-300); } .qdnapro-input.input-dark-purple .input-label { color: var(--c-white-04); } .qdnapro-input.input-dark-purple .input-hint { color: var(--c-purple-300); } /* Clear-x, spinner ±, and eye-toggle icon-btns inside dark-purple */ .qdnapro-input.input-dark-purple .input-trailing .qdnapro-icon-btn.icon-btn-input-icon { color: var(--c-purple-50); } .qdnapro-input.input-dark-purple .input-trailing .qdnapro-icon-btn.icon-btn-input-icon:hover:not(.icon-btn-disabled) { background-color: var(--c-purple-600); color: var(--c-purple-50); } /* === variant: grey [2026-07-31] === Boolean attribute `grey`. Light-grey surface (--c-grey-100) so the field stands out against a white background instead of blending into it - built for the app-header search field (qdnapro-app-header slot="search"), but usable anywhere a field sits directly on white/near-white. No border of its own: the grey fill IS the shape (per Kim), same idea as dark-purple's border-color: transparent on its own surface. Placeholder/icon colours are left at their normal (non-grey) values on purpose: grey-100 (#e7e9ec) is close enough to white in luminance that the default grey-400 placeholder/icon colour still reads fine on it - a dedicated darker placeholder token was not needed the way dark-purple needed one for its much-lower-contrast dark surface. Combining with dark-purple is a no-op: see qdna-input.js render(), grey is ignored whenever dark-purple is also set. */ .qdnapro-input.input-grey .input-field { background: var(--c-grey-100, #e7e9ec); border-color: transparent; } .qdnapro-input.input-grey .input-field:hover { border-color: transparent; } /* Placeholder DONKERDER op de grijze vulling (Kim, 31.07.2026: "nu lijkt het veld ook disabled omdat de placeholder tekst te licht is, die moet echt donkerder"). Gemeten met de WCAG-formule, niet op het oog: de standaard-placeholder #a6aab3 op #e7e9ec -> 1.91:1 de DISABLED-placeholder #898e99 op #e7e9ec -> 2.70:1 De gewone placeholder was dus LICHTER dan de uitgeschakelde stand, en daarom las een leeg veld als een veld dat je niet mag gebruiken. Dat was een fout in de BASIS van dit component en niet alleen in deze variant; toen dit hier gebouwd werd, was de fix nog gescoped tot de grijze variant en geflagd voor Kim (de basis raakt elke input in de backoffice en de app, dat niemand gevraagd had). Besluit 78 / klus 4b (31.07.2026) heeft de basis zelf ook op var(--c-text-muted) gezet (zie de basis-regel bovenin dit bestand), dus deze regel hier is nu strikt genomen overbodig geworden (de basis levert al dezelfde kleur) maar blijft staan als expliciete, zelfstandige garantie voor deze variant. var(--c-text-muted) geeft 3.94:1, ruim boven de disabled-stand en boven de 3:1 die WCAG voor grote/secundaire tekst aanhoudt. */ .qdnapro-input.input-grey .input-field .input-native::placeholder { color: var(--c-text-muted); } /* En het loep-icoontje ervoor mee, anders blijft dat als enige licht achter en leest de rij nog steeds als uitgeschakeld. */ .qdnapro-input.input-grey .input-field .input-leading-icon { color: var(--c-text-muted); } /* Focus ring: restated here (not inherited from the base :focus-within rule) for the same reason dark-purple restates its own - the plain border-color: transparent rule above has equal selector specificity to the base ".qdnapro-input .input-field:focus-within" rule and comes later in the file, so without this override it would win on focus too and the ring would silently disappear. Token: var(--c-brand-purple) rather than dark-purple's var(--c-brand) - that token is not defined anywhere in this codebase (checked: absent from design-tokens/_design-tokens.scss and the compiled style-v1.css), so dark-purple's focus-within border-color is very likely a pre-existing, silently-broken rule. Not fixed here (out of scope for this task, and _input.scss for dark-purple is being read, not rewritten) - flagging it in the handoff instead of copying the same undefined token forward. */ .qdnapro-input.input-grey .input-field:focus-within { border-color: var(--c-brand-purple); background: var(--c-grey-100, #e7e9ec); } .qdnapro-label-circle { --lc-size: 44px; --lc-icon-size: 16px; --lc-bg: #f0f1f2; --lc-icon: #1e1f20; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: var(--lc-size); height: var(--lc-size); flex-shrink: 0; border-radius: 50%; background: var(--lc-bg); color: var(--lc-icon); user-select: none; } .qdnapro-label-circle .label-circle-icon { display: inline-flex; width: var(--lc-icon-size); height: var(--lc-icon-size); color: inherit; pointer-events: none; } .qdnapro-label-circle .label-circle-icon svg { fill: currentColor; width: 100%; height: 100%; } .qdnapro-label-circle.label-circle-size-big { --lc-size: 44px; --lc-icon-size: 16px; } .qdnapro-label-circle.label-circle-size-small { --lc-size: 20px; --lc-icon-size: 12px; outline: 1px solid color-mix(in srgb, currentColor 22%, transparent); outline-offset: -1px; } .qdnapro-label-circle.label-circle-color-grey { --lc-bg: #f0f1f2; --lc-icon: #1e1f20; } .qdnapro-label-circle.label-circle-color-grey-2 { --lc-bg: #c4c7cc; --lc-icon: #1e1f20; } .qdnapro-label-circle.label-circle-color-red { --lc-bg: #fee3e3; --lc-icon: #633030; } .qdnapro-label-circle.label-circle-color-red-2 { --lc-bg: #fbaaaa; --lc-icon: #633030; } .qdnapro-label-circle.label-circle-color-yellow { --lc-bg: #fef6db; --lc-icon: #655522; } .qdnapro-label-circle.label-circle-color-yellow-2 { --lc-bg: #fde594; --lc-icon: #655522; } .qdnapro-label-circle.label-circle-color-green { --lc-bg: #e2faf1; --lc-icon: #2f5d4a; } .qdnapro-label-circle.label-circle-color-green-2 { --lc-bg: #8becc5; --lc-icon: #2f5d4a; } .qdnapro-label-circle.label-circle-color-blue { --lc-bg: #e6eff9; --lc-icon: #37475a; } .qdnapro-label-circle.label-circle-color-blue-2 { --lc-bg: #b5ceed; --lc-icon: #37475a; } .qdnapro-label-circle.label-circle-color-bright-blue { --lc-bg: #85a1ec; --lc-icon: #192a5a; } .qdnapro-label-circle.label-circle-color-bright-blue-2 { --lc-bg: #d6e0f9; --lc-icon: #192a5a; } .qdnapro-label-circle.label-circle-color-pink { --lc-bg: #f6e1e8; --lc-icon: #562d3a; } .qdnapro-label-circle.label-circle-color-dark-pink { --lc-bg: #e5a6b9; --lc-icon: #562d3a; } .qdnapro-label-circle.label-circle-color-purple { --lc-bg: #ebe9fb; --lc-icon: #413b5e; } .qdnapro-label-circle.label-circle-color-dark-purple { --lc-bg: #c4bcf3; --lc-icon: #413b5e; } .qdnapro-label-circle.label-circle-disabled { opacity: 0.6; } /* Additive status-* colors (16.07.2026 — planner status filter). Solid dots (bg == icon color, no light-tint pairing like the 16 colors above) mapped 1:1 to qdnapro-event-card's own status tokens (see _event-card.scss: --c-purple-500, --c-signal-red/-orange/-green-text) — these are used icon-less (a pure color indicator, see qdna-menu-item.js), so only --lc-bg is ever visible; --lc-icon is set to the same value for consistency should an icon ever be added. No dark-theme override: event-card itself has none for these tokens either (raw signal primitives, not re-themed). First- class here (not a menu-item-scoped override) because this component's own render() unconditionally rewrites className on every re-render, which silently discarded any externally-added class-based override before this fix (Kim's live test, 16.07.2026 — filter dots rendered grey/empty). */ .qdnapro-label-circle.label-circle-color-status-planned { --lc-bg: var(--c-purple-500, #40499a); --lc-icon: var(--c-purple-500, #40499a); } .qdnapro-label-circle.label-circle-color-status-overdue { --lc-bg: var(--c-signal-red-text, #c65a5a); --lc-icon: var(--c-signal-red-text, #c65a5a); } .qdnapro-label-circle.label-circle-color-status-inprogress { --lc-bg: var(--c-signal-orange-text, #bc6a1f); --lc-icon: var(--c-signal-orange-text, #bc6a1f); } .qdnapro-label-circle.label-circle-color-status-complete { --lc-bg: var(--c-signal-green-text, #428b6e); --lc-icon: var(--c-signal-green-text, #428b6e); } [data-theme=dark] .qdnapro-label-circle.label-circle-color-grey { --lc-bg: #565b66; --lc-icon: #e1e3e6; } [data-theme=dark] .qdnapro-label-circle.label-circle-color-grey-2 { --lc-bg: #40444d; --lc-icon: #e1e3e6; } [data-theme=dark] .qdnapro-label-circle.label-circle-color-red { --lc-bg: #5a2b2b; --lc-icon: #fbaaaa; } [data-theme=dark] .qdnapro-label-circle.label-circle-color-red-2 { --lc-bg: #7a3838; --lc-icon: #fee3e3; } [data-theme=dark] .qdnapro-label-circle.label-circle-color-yellow { --lc-bg: #5a4d1f; --lc-icon: #fde594; } [data-theme=dark] .qdnapro-label-circle.label-circle-color-yellow-2 { --lc-bg: #7a6b2d; --lc-icon: #fef6db; } [data-theme=dark] .qdnapro-label-circle.label-circle-color-green { --lc-bg: #2a5544; --lc-icon: #8becc5; } [data-theme=dark] .qdnapro-label-circle.label-circle-color-green-2 { --lc-bg: #3d7a62; --lc-icon: #e2faf1; } [data-theme=dark] .qdnapro-label-circle.label-circle-color-blue { --lc-bg: #2e3e54; --lc-icon: #b5ceed; } [data-theme=dark] .qdnapro-label-circle.label-circle-color-blue-2 { --lc-bg: #445a78; --lc-icon: #e6eff9; } [data-theme=dark] .qdnapro-label-circle.label-circle-color-bright-blue { --lc-bg: #3a4a8a; --lc-icon: #d6e0f9; } [data-theme=dark] .qdnapro-label-circle.label-circle-color-bright-blue-2 { --lc-bg: #2a3560; --lc-icon: #85a1ec; } [data-theme=dark] .qdnapro-label-circle.label-circle-color-pink { --lc-bg: #4e2a36; --lc-icon: #e5a6b9; } [data-theme=dark] .qdnapro-label-circle.label-circle-color-dark-pink { --lc-bg: #6e3d50; --lc-icon: #f6e1e8; } [data-theme=dark] .qdnapro-label-circle.label-circle-color-purple { --lc-bg: #3a3555; --lc-icon: #c4bcf3; } [data-theme=dark] .qdnapro-label-circle.label-circle-color-dark-purple { --lc-bg: #524a7a; --lc-icon: #ebe9fb; } /* === BEGIN QDNA-LOGO CSS === */ .qdnapro-logo { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; color: inherit; line-height: 1; user-select: none; flex-shrink: 0; } .qdnapro-logo svg { display: block; height: 100%; width: auto; fill: currentColor; } /* === END QDNA-LOGO CSS === */ .qdnapro-members { box-sizing: border-box; display: inline-flex; align-items: center; gap: 8px; padding: 4px 8px 4px 4px; border-radius: 999px; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; transition: background-color 150ms ease; } .qdnapro-members:focus { outline: none; } .qdnapro-members:focus-visible { outline: 2px solid #40499a; outline-offset: 2px; } .qdnapro-members.members-disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } /* Trailing "+" circle. Same height as a 34px avatar so it visually lines up. Stroke-only SVG so it renders white over photos and purple on light surfaces via currentColor. */ .qdnapro-members .members-add { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; border: 1px solid transparent; transition: background-color 150ms ease, border-color 150ms ease; } .qdnapro-members .members-add svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; } /* --- Tone: on-photo (default) - glass over imagery. --- */ .qdnapro-members.members-tone-on-photo { color: #ffffff; } .qdnapro-members.members-tone-on-photo:hover:not(.members-disabled) { background: rgba(255, 255, 255, 0.12); } .qdnapro-members.members-tone-on-photo .members-add { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.3); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #ffffff; } .qdnapro-members.members-tone-on-photo:hover:not(.members-disabled) .members-add { background: rgba(255, 255, 255, 0.3); border-color: rgba(255, 255, 255, 0.42); } /* --- Tone: light - on a light surface (cards, panels). --- */ .qdnapro-members.members-tone-light { color: #40499a; } .qdnapro-members.members-tone-light:hover:not(.members-disabled) { background: rgba(70, 82, 243, 0.06); } .qdnapro-members.members-tone-light .members-add { background: #ffffff; border-color: #c4c7cc; color: #40499a; } .qdnapro-members.members-tone-light:hover:not(.members-disabled) .members-add { background: #f0f1f2; border-color: #898e99; } [data-theme=dark] .qdnapro-members.members-tone-light { color: #a5acff; } [data-theme=dark] .qdnapro-members.members-tone-light:hover:not(.members-disabled) { background: rgba(165, 172, 255, 0.1); } [data-theme=dark] .qdnapro-members.members-tone-light .members-add { background: #2e3036; border-color: #40444d; color: #a5acff; } [data-theme=dark] .qdnapro-members.members-tone-light:hover:not(.members-disabled) .members-add { background: #40444d; } .qdnapro-menu { display: inline-flex; flex-direction: column; box-sizing: border-box; min-width: 160px; padding: 8px; border-radius: 8px; gap: 4px; } .qdnapro-menu > qdnapro-menu-item, .qdnapro-menu > qdnapro-menu-separator, .qdnapro-menu > qdnapro-menu-section-heading, .qdnapro-menu > qdnapro-menu-header { width: 100%; } .qdnapro-menu.menu-color-neutral { background: #ffffff; border: 1px solid #c4c7cc; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.15), 0 8px 12px 6px rgba(0, 0, 0, 0.075); } .qdnapro-menu.menu-color-action { background: #40499a; border: 0.5px solid #333a7b; box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.075), 0 1px 2px 0 rgba(0, 0, 0, 0.15); } .qdnapro-menu.menu-embedded { min-width: 0; padding: 0; border-radius: 0; background: transparent; border: none; box-shadow: none; } .qdnapro-menu-header { display: flex; flex-direction: column; gap: 0; padding: 8px 16px; box-sizing: border-box; } .qdnapro-menu-header .menu-header-heading { font-family: "Inter", sans-serif; font-size: 14px; font-weight: 600; line-height: 20px; } .qdnapro-menu-header .menu-header-subheading { font-family: "Inter", sans-serif; font-size: 12px; font-weight: 400; line-height: 20px; } .qdnapro-menu-header.menu-header-color-neutral .menu-header-heading { color: #0b0b0d; } .qdnapro-menu-header.menu-header-color-neutral .menu-header-subheading { color: #6b7280; } .qdnapro-menu-header.menu-header-color-action .menu-header-heading { color: #ffffff; } .qdnapro-menu-header.menu-header-color-action .menu-header-subheading { color: rgba(255, 255, 255, 0.7); } .qdnapro-menu-separator { display: block; height: 1px; margin: 8px 0; border: none; box-sizing: content-box; } .qdnapro-menu-separator.menu-separator-color-neutral { background: #e5e7eb; } .qdnapro-menu-separator.menu-separator-color-action { background: rgba(255, 255, 255, 0.16); } .qdnapro-menu-section-heading { display: block; box-sizing: border-box; padding: 0 4px; margin-top: 4px; font-family: "Inter", sans-serif; font-size: 10px; font-weight: 400; line-height: 20px; letter-spacing: 0; user-select: none; } .qdnapro-menu-section-heading.menu-section-heading-color-neutral { color: #6b7280; } .qdnapro-menu-section-heading.menu-section-heading-color-action { color: rgba(255, 255, 255, 0.7); } [data-theme=dark] .qdnapro-menu.menu-color-neutral { background: #2e3036; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.3), 0 8px 12px 6px rgba(0, 0, 0, 0.2); } [data-theme=dark] .qdnapro-menu.menu-color-action { background: #333a7b; border: 0.5px solid rgba(255, 255, 255, 0.1); box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.2), 0 1px 2px 0 rgba(0, 0, 0, 0.3); } [data-theme=dark] .qdnapro-menu .qdnapro-menu-header.menu-header-color-neutral .menu-header-heading { color: #e1e3e6; } [data-theme=dark] .qdnapro-menu .qdnapro-menu-header.menu-header-color-neutral .menu-header-subheading { color: rgba(225, 227, 230, 0.65); } [data-theme=dark] .qdnapro-menu .qdnapro-menu-separator.menu-separator-color-neutral { background: rgba(255, 255, 255, 0.12); } [data-theme=dark] .qdnapro-menu .qdnapro-menu-separator.menu-separator-color-action { background: rgba(255, 255, 255, 0.2); } [data-theme=dark] .qdnapro-menu .qdnapro-menu-section-heading.menu-section-heading-color-neutral { color: rgba(225, 227, 230, 0.6); } .qdnapro-menu-item { --mi-text: #0b0b0d; --mi-text-muted: rgba(11, 11, 13, 0.55); --mi-icon: #0b0b0d; --mi-bg: transparent; --mi-bg-hover: #f5f6f8; --mi-bg-pressed: #e1e3e6; --mi-bg-selected: #f0f1f2; --mi-disabled-text: #898e99; --mi-destructive-text: #c4362a; --mi-destructive-bg-hover: #FEECEC; --mi-focus-ring: #40499a; --mi-focus-glow: rgba(70, 82, 243, 0.25); display: flex; align-items: center; box-sizing: border-box; width: 100%; background: var(--mi-bg); color: var(--mi-text); cursor: pointer; user-select: none; font-family: inherit; border: 0 solid transparent; transition: background-color 100ms ease-out; } .qdnapro-menu-item .menu-item-icon, .qdnapro-menu-item .menu-item-chevron, .qdnapro-menu-item .menu-item-check { display: inline-flex; flex-shrink: 0; color: var(--mi-icon); pointer-events: none; } .qdnapro-menu-item .menu-item-icon svg, .qdnapro-menu-item .menu-item-chevron svg, .qdnapro-menu-item .menu-item-check svg { fill: currentColor; width: 100%; height: 100%; } .qdnapro-menu-item .menu-item-chevron, .qdnapro-menu-item .menu-item-check { opacity: 0.85; } .qdnapro-menu-item .menu-item-label { flex: 1 0 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .qdnapro-menu-item .menu-item-shortcut { flex-shrink: 0; color: var(--mi-text-muted); font-family: "Menlo", "Monaco", monospace; letter-spacing: 0.3px; } /* Trailing area — a count pill (always visible) and/or hover-revealed action buttons (open + remove), grouped at the end of the row. The pill stays put; the actions fade in on hover/focus so the row is clean at rest. [Kim 2026-06-15] */ .qdnapro-menu-item .menu-item-trailing { display: flex; align-items: center; gap: 6px; flex-shrink: 0; margin-left: 6px; } .qdnapro-menu-item .menu-item-pill { flex-shrink: 0; } /* Tag — a real qdnapro-tag on the trailing edge (status label: "Nieuw" / "Pro" / "Beta"). The label's flex:1 pushes it right; it sits BEFORE the trailing slot so it coexists with a chevron/check/pill. flex-shrink:0 so it never squashes (the label truncates first). Disabled row fades the tag (opacity 0.4, same treatment as the avatar). [Kim 2026-07-20] */ .qdnapro-menu-item .menu-item-tag { flex-shrink: 0; } .qdnapro-menu-item.menu-item-disabled .menu-item-tag { opacity: 0.4; } /* Tag-as-label mode — the tag IS the row content (left after the leading slot), for checkbox + coloured-tag category pickers. The wrapper takes the flex:1 label slot so the tag hugs its content on the left and the row keeps a consistent height; long tag text clips at the wrapper edge. [Kim 2026-07-20] */ .qdnapro-menu-item .menu-item-tag-label { flex: 1 0 0; min-width: 0; display: flex; align-items: center; overflow: hidden; } .qdnapro-menu-item .menu-item-tag-label .menu-item-tag { max-width: 100%; } .qdnapro-menu-item .menu-item-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; opacity: 0; transition: opacity 0.15s ease; } .qdnapro-menu-item.menu-item-with-actions:hover .menu-item-actions, .qdnapro-menu-item.menu-item-with-actions:focus-within .menu-item-actions { opacity: 1; } .qdnapro-menu-item .menu-item-badge { flex-shrink: 0; background: rgba(0, 0, 0, 0.1); color: var(--mi-text); font-weight: 600; text-align: center; } .qdnapro-menu-item.menu-item-size-default { gap: 12px; min-height: 40px; padding: 8px 16px; border-radius: 8px; font-size: 14px; line-height: 24px; } .qdnapro-menu-item.menu-item-size-default .menu-item-icon { width: 24px; height: 24px; } .qdnapro-menu-item.menu-item-size-default .menu-item-chevron { width: 24px; height: 24px; } .qdnapro-menu-item.menu-item-size-default .menu-item-check { width: 16px; height: 16px; } .qdnapro-menu-item.menu-item-size-default .menu-item-shortcut { font-size: 12px; } .qdnapro-menu-item.menu-item-size-default .menu-item-badge { min-width: 18px; height: 18px; padding: 0 6px; border-radius: 9px; font-size: 11px; line-height: 18px; } .qdnapro-menu-item.menu-item-size-small { gap: 12px; min-height: 28px; padding: 4px 8px; border-radius: 4px; font-size: 12px; line-height: 20px; } .qdnapro-menu-item.menu-item-size-small .menu-item-icon { width: 16px; height: 16px; } .qdnapro-menu-item.menu-item-size-small .menu-item-chevron { width: 16px; height: 16px; } .qdnapro-menu-item.menu-item-size-small .menu-item-check { width: 16px; height: 16px; } .qdnapro-menu-item.menu-item-size-small .menu-item-shortcut { font-size: 11px; } .qdnapro-menu-item.menu-item-size-small .menu-item-badge { min-width: 16px; height: 16px; padding: 0 5px; border-radius: 8px; font-size: 10px; line-height: 16px; } .qdnapro-menu-item:hover:not(.menu-item-disabled):not(.menu-item-active) { background: var(--mi-bg-hover); } .qdnapro-menu-item:active:not(.menu-item-disabled) { background: var(--mi-bg-pressed); background-image: none; } .qdnapro-menu-item:focus { outline: none; } .qdnapro-menu-item:focus-visible, .qdnapro-menu-item.force-focus { outline: 2px solid var(--mi-focus-ring); outline-offset: -2px; box-shadow: 0 0 0 4px var(--mi-focus-glow); } .qdnapro-menu-item.menu-item-active { background: var(--mi-bg-selected); } .qdnapro-menu-item.force-hover:not(.menu-item-disabled):not(.menu-item-active) { background: var(--mi-bg-hover); } .qdnapro-menu-item.force-pressed:not(.menu-item-disabled) { background: var(--mi-bg-pressed); background-image: none; } .qdnapro-menu-item.menu-item-disabled { color: var(--mi-disabled-text) !important; cursor: not-allowed; pointer-events: none; } .qdnapro-menu-item.menu-item-disabled .menu-item-icon, .qdnapro-menu-item.menu-item-disabled .menu-item-chevron, .qdnapro-menu-item.menu-item-disabled .menu-item-check { color: var(--mi-disabled-text); } /* Fade illustrative leading visuals (coloured activity-icon, avatar, file-icon) when the row is disabled — they don't pick up the text colour, so without this they stay vivid and the row doesn't read as disabled. NB: target the element TAGS, not the menu-item-* classes — qdnapro-activity-icon / qdnapro-file-icon overwrite their own className on render, so the class selectors never match. [Kim 2026-06-15] */ .qdnapro-menu-item.menu-item-disabled qdnapro-activity-icon, .qdnapro-menu-item.menu-item-disabled .menu-item-avatar-wrap, .qdnapro-menu-item.menu-item-disabled qdnapro-file-icon { opacity: 0.5; } .qdnapro-menu-item.menu-item-variant-destructive:not(.menu-item-disabled) { --mi-bg-hover: var(--mi-destructive-bg-hover); color: var(--mi-destructive-text); } .qdnapro-menu-item.menu-item-variant-destructive:not(.menu-item-disabled) .menu-item-icon, .qdnapro-menu-item.menu-item-variant-destructive:not(.menu-item-disabled) .menu-item-chevron, .qdnapro-menu-item.menu-item-variant-destructive:not(.menu-item-disabled) .menu-item-check { color: var(--mi-destructive-text); } .qdnapro-menu-item .menu-item-activity-icon { flex-shrink: 0; margin-right: -8px; } .qdnapro-menu-item.menu-item-disabled .menu-item-activity-icon { opacity: 0.3; } .qdnapro-menu-item .menu-item-circle { flex-shrink: 0; margin-right: -4px; } .qdnapro-menu-item.menu-item-with-circle .menu-item-label { margin-left: 0; } .qdnapro-menu-item.menu-item-with-checkbox.menu-item-size-default { padding: 8px 4px; } .qdnapro-menu-item.menu-item-with-checkbox.menu-item-size-small { padding: 4px; } .qdnapro-menu-item.menu-item-with-checkbox .menu-item-checkbox-wrap { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0 4px; pointer-events: none; } .qdnapro-menu-item.menu-item-with-checkbox .menu-item-checkbox { pointer-events: none; } .qdnapro-menu-item.menu-item-with-avatar.menu-item-size-default { padding: 8px 4px; } .qdnapro-menu-item.menu-item-with-avatar.menu-item-size-small { padding: 4px; /* Small + avatar (e.g. a user-picker qdnapro-select): the default 12px row gap plus the avatar-wrap side padding left the radio, avatar and label too far apart. Tighten so avatar + label read as one unit. [Kim 2026-07-20] */ gap: 6px; } .qdnapro-menu-item.menu-item-with-avatar.menu-item-size-small .menu-item-avatar-wrap { padding: 0 1px; } .qdnapro-menu-item.menu-item-with-avatar .menu-item-avatar-wrap { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0 4px; pointer-events: none; } .qdnapro-menu-item.menu-item-with-avatar .menu-item-avatar { pointer-events: none; } .qdnapro-menu-item.menu-item-with-avatar.menu-item-disabled .menu-item-avatar-wrap { opacity: 0.4; } .qdnapro-menu-item.menu-item-with-radio.menu-item-size-default { padding: 8px 4px; } .qdnapro-menu-item.menu-item-with-radio.menu-item-size-small { padding: 4px; } .qdnapro-menu-item.menu-item-with-radio .menu-item-radio-wrap { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0 4px; pointer-events: none; } .qdnapro-menu-item.menu-item-with-radio .menu-item-radio { pointer-events: none; } .qdnapro-menu-item.menu-item-color-action { --mi-text: #ffffff; --mi-text-muted: rgba(255, 255, 255, 0.7); --mi-icon: #ffffff; --mi-bg-hover: rgba(255, 255, 255, 0.08); --mi-bg-pressed: rgba(255, 255, 255, 0.22); --mi-bg-selected: rgba(255, 255, 255, 0.16); --mi-disabled-text: #8c92c2; --mi-destructive-text: #ff9b9b; --mi-destructive-bg-hover: rgba(255, 155, 155, 0.18); --mi-focus-ring: #ffffff; --mi-focus-glow: rgba(255, 255, 255, 0.25); } .qdnapro-menu-item.menu-item-color-action .menu-item-badge { background: rgba(255, 255, 255, 0.22); color: #ffffff; } [data-theme=dark] .qdnapro-menu-item { --mi-text: #e1e3e6; --mi-text-muted: rgba(225, 227, 230, 0.6); --mi-icon: #e1e3e6; --mi-bg-hover: rgba(255, 255, 255, 0.06); --mi-bg-pressed: rgba(255, 255, 255, 0.14); --mi-bg-selected: rgba(255, 255, 255, 0.10); --mi-disabled-text: #6b7280; --mi-destructive-text: #ff9b9b; --mi-destructive-bg-hover: rgba(255, 155, 155, 0.14); --mi-focus-ring: #a5acff; --mi-focus-glow: rgba(70, 82, 243, 0.4); } [data-theme=dark] .qdnapro-menu-item .menu-item-badge { background: rgba(255, 255, 255, 0.14); color: var(--mi-text); } [data-theme=dark] .qdnapro-menu-item.menu-item-color-action { --mi-bg-hover: rgba(255, 255, 255, 0.10); --mi-bg-pressed: rgba(255, 255, 255, 0.24); --mi-bg-selected: rgba(255, 255, 255, 0.18); } /* === description variant — label + sub-text (Figma 9794:243715) === */ .qdnapro-menu-item { --mi-description-text: #6b7280; } [data-theme=dark] .qdnapro-menu-item { --mi-description-text: #898e99; } .qdnapro-menu-item.menu-item-color-action { --mi-description-text: rgba(255, 255, 255, 0.7); } .qdnapro-menu-item .menu-item-label-group { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 0; } .qdnapro-menu-item .menu-item-label-group .menu-item-label { flex: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .qdnapro-menu-item .menu-item-description { font-size: 10px; line-height: 14px; color: var(--mi-description-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 400; } .qdnapro-menu-item.menu-item-disabled .menu-item-description { color: var(--mi-disabled-text); } /* === END description variant CSS === */ /* === Mandatory marker (red asterisk before the label) — matches the unit-card mandatory convention (#DE5066). Prefixed inside .menu-item-label so it stays glued to the name and clips together with it. [Kim 2026-07-15] === */ .qdnapro-menu-item .menu-item-label .menu-item-mandatory-mark { color: #DE5066; font-weight: 700; margin-right: 3px; } /* Status circle-color values (planner status filter, 16.07.2026) used to be painted here via a menu-item-scoped override class (.menu-item-circle- status-*) instead of label-circle's own `color` attribute, because those 4 names didn't exist in qdnapro-label-circle's VALID_COLORS. That override never actually worked: label-circle's own render() unconditionally rewrites its className on every re-render (see qdna-label-circle.js), so the override class was wiped the instant the circle connected to the DOM — every status dot rendered grey/empty (Kim's live test, 16.07.2026). Fixed at the real cause: the 4 status-* names are now first-class colors on qdnapro-label-circle itself (see _label-circle.scss) and passed through as a normal `color` attribute from qdna-menu-item.js — nothing menu-item-scoped left to override here. */ /* ============================================================ qdnapro-modal compiled CSS Extracted from qdna-modal-preview.html so the bundle can ship modal styling to any v1/v2 page (Kim 2026-05-29). Two-layer card: outer GREY frame around inner WHITE window. ============================================================ */ .qdnapro-modal { display: none; position: fixed; inset: 0; z-index: 9000; pointer-events: none; } .qdnapro-modal.modal-open { display: flex; pointer-events: auto; } /* Bootstrap (globally loaded in v1) defines .modal-dialog with `pointer-events: none` (and .modal-content with `auto` to re-enable inside). Our v2 modal reuses the .modal-dialog / .modal-window class names, so Bootstrap's rule makes clicks fall through to the backdrop = modal closes on every interaction. Re-enable interaction explicitly when the v2 modal is open. */ .qdnapro-modal.modal-open .modal-dialog, .qdnapro-modal.modal-open .modal-window { pointer-events: auto; } /* Bootstrap also adds visual borders on .modal-header (border-bottom) and .modal-footer (border-top). Our v2 design uses padding-based separation, not border-keylines. Zero them out so the cascade from Bootstrap can't draw stray lines. */ .qdnapro-modal .modal-header { border-bottom: 0 !important; } .qdnapro-modal .modal-footer { border-top: 0 !important; } /* Bootstrap also injects sibling-margins on modal-footer children (.modal-footer > :not(:first-child) { margin-left: 0.25rem }, and :not(:last-child) { margin-right: 0.25rem }). On a 2-button footer that adds 8px extra to our `gap: 16px` → visual gap becomes 24px (= 48 device-px on retina). Zero the sibling-margins so the declared gap is the actual gap. */ .qdnapro-modal .modal-footer > * { margin-left: 0 !important; margin-right: 0 !important; } /* ── GEEN counter-zoom (meer) — verwijderd 2026-08-03, en dit is de uitleg ────────────────── Hier stond `.qdnapro-modal, .qdnapro-select-popover { zoom: 1.25 }`, om de legacy `body { zoom: 0.8 }` van de oude backoffice te compenseren: 0.8 × 1.25 = 1.0, zodat een position-fixed kind (de modal en de select-popover hangen beide aan ) op de juiste plek landde in plaats van op 0.8 × de plek. Die 0.8 bereikt een v1-pagina niet meer. Hij staat alleen nog in `web/css/style.css` (als `body { zoom: 72% }`), en die stylesheet wordt uitsluitend geladen door de LEGACY headers (`View/components/header.html`, `View/NewDesign/components/header.html`) — en die laden géén `style-v1.css` en géén `components.js`, dus daar bestaat geen v2-modal om te schalen. Gemeten op een v1-pagina: `getComputedStyle(document.body).zoom` = 1. Het gevolg was een knoop: de 1.25 had niets te compenseren, dus élke moderne pagina zette hem weer uit — en één van die neutralisaties (in `partials/_inbox.scss`) was NIET pagina-gescoopt en deed het dus app-breed. Netto stond alles op 1, maar via twee regels die elkaar opheffen. ⚠️ Zet hem niet terug "voor de zekerheid": dan wordt élk venster 25% te groot op elke pagina die geen eigen neutralisatie heeft. Komt de legacy body-zoom ooit terug op een pagina die wél v2-componenten laadt, dan hoort de correctie PAGINA-gescoopt bij die pagina te staan. ⓘ Er staat nog een dode `zoom: 1` in `projects-v2.html`, `home-v2.html` en `floweditor.html`. Die doen niets meer (1 op iets dat al 1 is) en mogen weg zodra iemand die pagina's aanraakt. */ .qdnapro-modal .modal-backdrop { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(11, 11, 13, 0.45); animation: qdnapro-modal-backdrop-in 160ms ease-out; } /* OUTER GREY CARD */ .qdnapro-modal .modal-dialog { background: #f0f1f2; border: 0.5px solid #ffffff; border-radius: 16px; padding: 8px; box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3), 0 8px 12px 6px rgba(0, 0, 0, 0.15); display: flex; width: 100%; max-width: 560px; max-height: calc(100vh - 48px); animation: qdnapro-modal-dialog-in 200ms cubic-bezier(0.2, 0.8, 0.2, 1); } .qdnapro-modal.modal-size-small .modal-dialog { max-width: 400px; } .qdnapro-modal.modal-size-medium .modal-dialog { max-width: 560px; } .qdnapro-modal.modal-size-large .modal-dialog { max-width: 800px; } .qdnapro-modal.modal-size-xlarge .modal-dialog { max-width: 1000px; } .qdnapro-modal.modal-size-xxlarge .modal-dialog { max-width: 1100px; } /* Layout: with-info - left side info-panel */ .qdnapro-modal.modal-layout-with-info .modal-dialog { gap: 8px; } .qdnapro-modal .modal-info { flex: 0 0 280px; min-width: 0; padding: 16px; display: flex; flex-direction: column; gap: 16px; font-family: "Inter", sans-serif; font-size: 14px; line-height: 22px; color: #0b0b0d; position: relative; overflow: visible; z-index: 0; } .qdnapro-modal .modal-info qdnapro-icon, .qdnapro-modal .modal-info > .modal-info-icon { color: #40499a; width: 24px; height: 24px; } .qdnapro-modal .qdnapro-modal-info-title { margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; color: #40499a; } .qdnapro-modal .qdnapro-modal-info-illustration { margin-top: auto; margin-left: -16px; margin-right: -16px; align-self: stretch; pointer-events: none; min-height: 160px; display: flex; align-items: flex-end; justify-content: flex-start; } .qdnapro-modal .qdnapro-modal-info-illustration qdnapro-illustration, .qdnapro-modal .qdnapro-modal-info-illustration img, .qdnapro-modal .qdnapro-modal-info-illustration svg { display: block; max-width: 100%; height: auto; } /* The illustration must never draw OVER its own info text. [Jan 27.07.2026] Why it could: the info column is a fixed-height flex column, and the artwork is sized by aspect-ratio from a fixed 240px WIDTH — several illustrations are portrait (share = 884px tall at width 240, idea 610, tool 556, hands-check 509), so as soon as the icon+title+text no longer left that much room the flex algorithm shrank this BOX while the artwork inside kept its height, and `align-items: flex-end` then pushed the overflow UPWARDS across the text. It is viewport-height dependent (the dialog is `min(800px, 100vh - 48px)`), so the same modal was fine on a big screen and unreadable on a laptop — measured on a 720px-tall viewport: hands-check covered 55px of text at 221 characters, share covered 430px (title included). Fix: let the artwork scale down into whatever height the box gets, staying bottom-left anchored, and clip as a last resort. `object-fit: contain` keeps the aspect ratio, so when there IS room the painted pixels are byte-identical to before (verified by pixel-diff over 9 fitting cases). */ .qdnapro-modal .qdnapro-modal-info-illustration { overflow: hidden; } .qdnapro-modal .qdnapro-modal-info-illustration qdnapro-illustration { align-self: stretch; /* host height := the (possibly shrunk) box height */ min-height: 0; /* ...and let it shrink at all */ } .qdnapro-modal .qdnapro-modal-info-illustration qdnapro-illustration img, .qdnapro-modal .qdnapro-modal-info-illustration qdnapro-illustration svg { height: 100%; object-fit: contain; object-position: left bottom; } /* Body utility classes */ .qdnapro-modal .qdnapro-modal-section-title { margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; color: #40499a; } .qdnapro-modal .qdnapro-modal-section-sub { margin: 0 0 8px; font-size: 14px; line-height: 22px; color: #40499a; font-weight: 500; } .qdnapro-modal .qdnapro-modal-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .qdnapro-modal .qdnapro-modal-error-banner { display: flex; align-items: center; gap: 8px; padding: 8px 0; font-size: 13px; line-height: 20px; font-weight: 500; color: #c65a5a; } .qdnapro-modal .qdnapro-modal-error-banner qdnapro-icon { color: inherit; flex-shrink: 0; } .qdnapro-modal .qdnapro-modal-info-head { display: flex; align-items: center; gap: 8px; } .qdnapro-modal .qdnapro-modal-info-head .qdnapro-modal-info-title { margin: 0; } .qdnapro-modal .qdnapro-modal-toggle-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 4px 0; } .qdnapro-modal .qdnapro-modal-toggle-text { display: flex; flex-direction: column; gap: 2px; } .qdnapro-modal .qdnapro-modal-toggle-label { font-size: 14px; line-height: 20px; font-weight: 600; color: #0b0b0d; } .qdnapro-modal .qdnapro-modal-toggle-sub { font-size: 12px; line-height: 16px; color: #6b7280; font-weight: 400; } .qdnapro-modal .qdnapro-modal-toggle-warn { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; line-height: 16px; font-weight: 500; color: #c65a5a; margin-top: 2px; } .qdnapro-modal .qdnapro-modal-divider { border: none; border-top: 1px solid #e1e3e6; margin: 16px 0 12px; } /* INNER WHITE CARD */ .qdnapro-modal .modal-window { background: #ffffff; border: 0.5px solid #c4c7cc; border-radius: 12px; padding: 16px 16px 12px; flex: 1 1 auto; min-width: 0; max-height: 100%; display: flex; flex-direction: column; gap: 10px; overflow: visible; position: relative; z-index: 1; } /* Fixed height + internal scroll for big modals */ .qdnapro-modal.modal-layout-with-info .modal-dialog, .qdnapro-modal.modal-size-large .modal-dialog, .qdnapro-modal.modal-size-xlarge .modal-dialog, .qdnapro-modal.modal-size-xxlarge .modal-dialog { height: min(800px, 100vh - 48px); } .qdnapro-modal.modal-layout-with-info .modal-window, .qdnapro-modal.modal-size-large .modal-window, .qdnapro-modal.modal-size-xlarge .modal-window, .qdnapro-modal.modal-size-xxlarge .modal-window { height: 100%; } .qdnapro-modal.modal-layout-with-info .modal-header, .qdnapro-modal.modal-layout-with-info .modal-footer, .qdnapro-modal.modal-size-large .modal-header, .qdnapro-modal.modal-size-large .modal-footer, .qdnapro-modal.modal-size-xlarge .modal-header, .qdnapro-modal.modal-size-xlarge .modal-footer, .qdnapro-modal.modal-size-xxlarge .modal-header, .qdnapro-modal.modal-size-xxlarge .modal-footer { flex-shrink: 0; } .qdnapro-modal.modal-layout-with-info .modal-body, .qdnapro-modal.modal-size-large .modal-body, .qdnapro-modal.modal-size-xlarge .modal-body, .qdnapro-modal.modal-size-xxlarge .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; /* The scroll container clips focus rings (overflow-y:auto coerces overflow-x to clip), so a field flush against the top edge loses its ring "under the header". 4px breathing room clears the 3px focus box-shadow on all sides; scroll-padding keeps a tabbed-to field from tucking under the top edge. [Kim 22.06.2026] */ padding: 4px; scroll-padding-top: 8px; } /* Scrollable modifier — any size modal with tall content. NOTE: the class is `qdnapro-modal-scrollable`, NOT `modal-scrollable`. qdna-modal.js connectedCallback strips every class starting with `modal-` from _originalClasses, so a `modal-*` modifier would not survive _render(). The `qdnapro-` prefix passes that filter. */ .qdnapro-modal.qdnapro-modal-scrollable .modal-dialog { overflow: hidden; } .qdnapro-modal.qdnapro-modal-scrollable .modal-window { overflow: hidden; } .qdnapro-modal.qdnapro-modal-scrollable .modal-header, .qdnapro-modal.qdnapro-modal-scrollable .modal-footer { flex-shrink: 0; } .qdnapro-modal.qdnapro-modal-scrollable .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; } /* Import-options modal: fit content instead of the fixed 800px the large/with-info frame forces (it was absurdly tall for a short paste box / upload card). Caps + scrolls only if content ever exceeds it. [Kim 22.06.2026] */ .qdnapro-modal.fe-import-modal.modal-size-large .modal-dialog, .qdnapro-modal.fe-import-modal.modal-layout-with-info .modal-dialog { height: auto; max-height: min(800px, 100vh - 48px); } .qdnapro-modal.fe-import-modal.modal-size-large .modal-window, .qdnapro-modal.fe-import-modal.modal-layout-with-info .modal-window { height: auto; } /* Center the (portrait) illustration in the info panel instead of the default bottom-LEFT corner-anchor. Scoped so corner-anchored illustrations in other modals keep their layout. [Kim 22.06.2026] */ .qdnapro-modal.fe-import-modal .qdnapro-modal-info-illustration { justify-content: center; } /* Floweditor confirm dialog (plugins/confirm/Box.vue, PLAN-alert-component.md TRACK 2, Kim 09.07.2026): needs to stack above BOTH the floweditor's own NodeOptions wizard modal (~9000-9100) and its dropdown/popover layer (.fe-add-datapoint-dropdown etc., 9200) — 9300 is the floweditor's established "always on top" tier (see .fe-conn-tip). Scoped to this class only so every other qdnapro-modal keeps the default 9000. */ .qdnapro-modal.fe-confirm-modal { z-index: 9300; } /* "Vraag toevoegen" type-picker (FormCardQuestions.vue, PLAN-form-card- redesign.md fase 4 delivery 4): opened FROM WITHIN the same NodeOptions wizard modal (~9000-9100) this tab lives in, so it needs the exact same "always on top" tier as .fe-confirm-modal above, for the exact same reason. Scoped to this class only. */ .qdnapro-modal.fe-typepicker-modal { z-index: 9300; } /* Briefing bij een vraag (View/v1/modals/briefing-editor.html, gedeeld met de activiteitenpagina). Op de flow editor gaat hij open vanuit het NodeOptions- wizardmodal (~9000-9100) en soms vanaf het canvas eronder, dus dezelfde "altijd bovenop"-laag als de twee hierboven. Alleen op deze klasse, die de flow editor via de include meegeeft: op de activiteitenpagina staat er niks boven en houdt het modal de standaard 9000. [Kim 03.08.2026] */ .qdnapro-modal.fe-briefing-modal { z-index: 9300; } .qdnapro-modal ::-webkit-scrollbar { width: 6px; height: 6px; } .qdnapro-modal ::-webkit-scrollbar-track { background: transparent; } .qdnapro-modal ::-webkit-scrollbar-corner { background: transparent; } .qdnapro-modal ::-webkit-scrollbar-thumb { background: transparent; border-radius: 6px; transition: background 160ms ease; } .qdnapro-modal *:hover::-webkit-scrollbar-thumb, .qdnapro-modal *:focus-within::-webkit-scrollbar-thumb { background: rgba(64, 73, 154, 0.22); } .qdnapro-modal ::-webkit-scrollbar-thumb:hover { background: rgba(64, 73, 154, 0.38); } .qdnapro-modal { scrollbar-width: thin; } .qdnapro-modal *:hover, .qdnapro-modal *:focus-within { scrollbar-color: rgba(64, 73, 154, 0.3) transparent; } .qdnapro-modal .modal-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 0 12px; } .qdnapro-modal .modal-title { margin: 0; flex: 1 1 auto; font-family: "Inter", sans-serif; font-size: 16px; line-height: 24px; font-weight: 600; color: #40499a; } .qdnapro-modal .modal-close { flex-shrink: 0; } .qdnapro-modal .modal-body { padding: 0 4px 8px 4px; overflow: visible; font-family: "Inter", sans-serif; font-size: 14px; line-height: 24px; color: #0b0b0d; } .qdnapro-modal .modal-body > * + * { margin-top: 8px; } .qdnapro-modal .qdnapro-modal-label { display: block; font-weight: 500; font-size: 14px; line-height: 24px; color: #0b0b0d; } .qdnapro-modal .modal-footer { display: flex; justify-content: flex-end; align-items: flex-end; gap: 16px; padding: 0; } /* secondary-label (e.g. "Delete") pins a button to the footer's LEFT edge — Kim 17.07.2026: destructive actions in planner dialogs belong in the footer, not floating in the body. space-between pushes it away from the cancel/confirm cluster; the cluster itself keeps its own `gap: 16px` via .modal-footer-right so cancel/confirm stay together regardless of how much room space-between opens up on a wide modal. */ .qdnapro-modal .modal-footer.modal-footer-has-secondary { justify-content: space-between; } .qdnapro-modal .modal-footer-right { display: flex; align-items: flex-end; gap: 16px; } /* Dark theme */ [data-theme=dark] .qdnapro-modal .modal-backdrop { background: rgba(0, 0, 0, 0.65); } [data-theme=dark] .qdnapro-modal .modal-dialog { background: #2e3036; border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 4px 4px rgba(0, 0, 0, 0.5), 0 8px 12px 6px rgba(0, 0, 0, 0.3); } [data-theme=dark] .qdnapro-modal .modal-window { background: #363940; border-color: #565b66; } [data-theme=dark] .qdnapro-modal .modal-title { color: #f0f1f2; } [data-theme=dark] .qdnapro-modal .modal-body { color: #f0f1f2; } [data-theme=dark] .qdnapro-modal .qdnapro-modal-label { color: #f0f1f2; } [data-theme=dark] .qdnapro-modal .modal-info { color: #f0f1f2; } [data-theme=dark] .qdnapro-modal .modal-info qdnapro-icon, [data-theme=dark] .qdnapro-modal .modal-info > .modal-info-icon { color: #a5acff; } [data-theme=dark] .qdnapro-modal .qdnapro-modal-info-title { color: #a5acff; } [data-theme=dark] .qdnapro-modal .qdnapro-modal-section-title { color: #a5acff; } [data-theme=dark] .qdnapro-modal .qdnapro-modal-section-sub { color: #a5acff; } [data-theme=dark] .qdnapro-modal .qdnapro-modal-error-banner { color: #ef6b6b; } [data-theme=dark] .qdnapro-modal .qdnapro-modal-toggle-label { color: #f0f1f2; } [data-theme=dark] .qdnapro-modal .qdnapro-modal-toggle-sub { color: #b8bcc4; } [data-theme=dark] .qdnapro-modal .qdnapro-modal-toggle-warn { color: #ef6b6b; } [data-theme=dark] .qdnapro-modal .qdnapro-modal-divider { border-top-color: #40444d; } @keyframes qdnapro-modal-backdrop-in { from { opacity: 0; } to { opacity: 1; } } @keyframes qdnapro-modal-dialog-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } @media (prefers-reduced-motion: reduce) { .qdnapro-modal .modal-backdrop, .qdnapro-modal .modal-dialog { animation: none; } } /* === BEGIN QDNA-NAV-ITEM CSS === */ .qdnapro-nav-item { box-sizing: border-box; position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 40px; padding: 8px 12px 8px 8px; border-radius: 8px; background: transparent; color: var(--c-nav-icon); text-decoration: none; cursor: pointer; user-select: none; font-family: "Inter", sans-serif; transition: background-color 120ms ease-out, color 120ms ease-out, transform 80ms ease-out, width 450ms cubic-bezier(0.22, 1, 0.36, 1), padding 450ms cubic-bezier(0.22, 1, 0.36, 1), gap 450ms cubic-bezier(0.22, 1, 0.36, 1); } .qdnapro-nav-item *, .qdnapro-nav-item *::before, .qdnapro-nav-item *::after { box-sizing: border-box; } .qdnapro-nav-item .nav-item-icon { flex-shrink: 0; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; color: inherit; position: relative; z-index: 1; } .qdnapro-nav-item .nav-item-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .qdnapro-nav-item .nav-item-label { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 500; line-height: 20px; color: var(--c-nav-label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 1; transform: translateX(0); max-width: 200px; transition: color 120ms ease-out, font-weight 120ms ease-out, opacity 280ms cubic-bezier(0.22, 1, 0.36, 1), max-width 450ms cubic-bezier(0.22, 1, 0.36, 1), transform 280ms cubic-bezier(0.22, 1, 0.36, 1); } .qdnapro-nav-item .nav-item-badge { position: absolute; z-index: 2; right: 12px; top: 50%; transform: translateY(-50%); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--c-nav-badge-bg); color: var(--c-nav-badge-text); font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; pointer-events: none; transition: right 450ms cubic-bezier(0.22, 1, 0.36, 1), top 450ms cubic-bezier(0.22, 1, 0.36, 1), transform 450ms cubic-bezier(0.22, 1, 0.36, 1); } .qdnapro-nav-item .nav-item-badge--dot { min-width: 8px; width: 8px; height: 8px; padding: 0; border-radius: 50%; } .qdnapro-nav-item:hover:not(.nav-item-disabled):not(.nav-item-active) { background: var(--c-nav-hover-bg); color: var(--c-nav-icon-hover); } .qdnapro-nav-item:hover:not(.nav-item-disabled):not(.nav-item-active) .nav-item-label { color: var(--c-nav-label-hover); } .qdnapro-nav-item.nav-item-active { background: var(--c-nav-active-bg); color: var(--c-nav-icon-active); } .qdnapro-nav-item.nav-item-active .nav-item-label { color: var(--c-nav-label-active); font-weight: 600; } .qdnapro-nav-item.nav-item-active:hover:not(.nav-item-disabled)::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(0, 0, 0, 0.06); pointer-events: none; } .qdnapro-nav-item:active:not(.nav-item-disabled) { transform: scale(0.97); } .qdnapro-nav-item:focus { outline: none; } .qdnapro-nav-item:focus-visible, .qdnapro-nav-item.force-focus { box-shadow: inset 0 0 0 2px var(--focus-ring); } .qdnapro-nav-item.nav-item-disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; } .qdnapro-nav-item[data-nav-mode=collapsed] { gap: 0; padding: 8px; width: 40px; height: 40px; min-height: 40px; align-self: flex-start; justify-content: flex-start; } .qdnapro-nav-item[data-nav-mode=collapsed] .nav-item-label { opacity: 0; transform: translateX(-16px); max-width: 0; } .qdnapro-nav-item[data-nav-mode=collapsed] .nav-item-badge { top: 3px; right: 4px; transform: translateY(0) scale(0.85); transform-origin: top right; } /* === END QDNA-NAV-ITEM CSS === */ /* === BEGIN QDNA-NAV-RAIL CSS === */ .qdnapro-nav-rail { box-sizing: border-box; display: flex; flex-direction: column; background: var(--c-nav-bg); color: var(--c-nav-icon); font-family: "Inter", sans-serif; user-select: none; transition: width 450ms cubic-bezier(0.22, 1, 0.36, 1); } .qdnapro-nav-rail *, .qdnapro-nav-rail *::before, .qdnapro-nav-rail *::after { box-sizing: border-box; } .qdnapro-nav-rail[data-mode=expanded] { width: 208px; } .qdnapro-nav-rail[data-mode=collapsed] { width: 84px; } .qdnapro-nav-rail .nav-rail-header { flex-shrink: 0; height: 56px; display: flex; align-items: center; gap: 8px; padding: 0 16px; position: relative; } .qdnapro-nav-rail[data-mode=collapsed] .nav-rail-header { padding: 0 6px 0 16px; } /* Split logo (Jan 2026-06-17): Q = anchor (never moves/re-renders); DNA = the letters, which slide down + fade on collapse and reverse on expand. Both .nav-rail-logo-q and .nav-rail-logo-dna are inline SVGs that share the ORIGINAL wordmark viewBox (180 180 980 420) and are overlaid at the same size (70×30 = 30·980/420), so the Q and DNA sit in the exact relative position + scale of the real combined logo — no guessed offsets. The container clips to the Q's width when collapsed; the DNA group additionally fades + drops. */ .qdnapro-nav-rail .nav-rail-logo { position: relative; height: 30px; overflow: hidden; flex-shrink: 0; color: var(--c-nav-icon); text-decoration: none; transition: width 450ms cubic-bezier(0.22, 1, 0.36, 1); } .qdnapro-nav-rail .nav-rail-logo-q, .qdnapro-nav-rail .nav-rail-logo-dna { position: absolute; left: 0; top: 0; width: 70px; height: 30px; pointer-events: none; } .qdnapro-nav-rail .nav-rail-logo-q svg, .qdnapro-nav-rail .nav-rail-logo-dna svg { width: 70px; height: 30px; fill: currentColor; display: block; } .qdnapro-nav-rail .nav-rail-logo-q { z-index: 1; } .qdnapro-nav-rail .nav-rail-logo-dna { opacity: 1; transform: translateY(0); transition: opacity 280ms cubic-bezier(0.22, 1, 0.36, 1), transform 450ms cubic-bezier(0.22, 1, 0.36, 1); } .qdnapro-nav-rail[data-mode=expanded] .nav-rail-logo { width: 70px; } .qdnapro-nav-rail[data-mode=collapsed] .nav-rail-logo { width: 34px; } .qdnapro-nav-rail[data-mode=collapsed] .nav-rail-logo-dna { opacity: 0; transform: translateX(-20px); } .qdnapro-nav-rail .nav-rail-toggle { margin-left: auto; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--c-nav-icon); border-radius: 6px; cursor: pointer; flex-shrink: 0; transition: background-color 120ms ease-out, color 120ms ease-out; } .qdnapro-nav-rail .nav-rail-toggle:hover { background: var(--c-nav-hover-bg); color: var(--c-nav-icon-hover); } .qdnapro-nav-rail .nav-rail-toggle:focus { outline: none; } .qdnapro-nav-rail .nav-rail-toggle:focus-visible { box-shadow: 0 0 0 2px var(--focus-ring), 0 0 0 5px var(--focus-glow); } .qdnapro-nav-rail .nav-rail-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 620ms cubic-bezier(0.22, 1, 0.36, 1); } .qdnapro-nav-rail[data-mode=collapsed] .nav-rail-toggle svg { transform: rotate(180deg); } .qdnapro-nav-rail .nav-rail-header-divider { flex-shrink: 0; height: 1px; background: var(--c-nav-divider); margin: 0 16px; } .qdnapro-nav-rail[data-mode=collapsed] .nav-rail-header-divider { margin: 0 12px; } .qdnapro-nav-rail .nav-rail-items { flex: 1 1 auto; min-height: 0; overflow: visible; padding: 12px 12px; display: flex; flex-direction: column; gap: 4px; } .qdnapro-nav-rail[data-mode=collapsed] .nav-rail-items { padding: 12px 12px; align-items: flex-start; } .qdnapro-nav-rail .nav-rail-bottom { flex-shrink: 0; padding: 8px 12px 16px; display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--c-nav-divider); } .qdnapro-nav-rail[data-mode=collapsed] .nav-rail-bottom { align-items: flex-start; } /* The version + build footer (.nav-rail-version, a slot="bottom" button that opened the About QDNA Pro splash) is REMOVED per 2026-07-31: that entry now lives in the profile dropdown as "Over QDNA Pro" (View/v1/base.html). The .nav-rail-bottom rules above stay — they are generic for any slot="bottom" child, not tied to the version block. */ /* Default surface tokens (navy palette) */ .qdnapro-nav-rail { --c-nav-bg: #3a4290; --c-nav-divider: rgba(255, 255, 255, 0.10); --c-nav-hover-bg: rgba(255, 255, 255, 0.08); --c-nav-active-bg: rgba(255, 255, 255, 0.16); --c-nav-icon: #c5c9eb; --c-nav-icon-hover: #ffffff; --c-nav-icon-active: #ffffff; --c-nav-label: #c5c9eb; --c-nav-label-hover: #ffffff; --c-nav-label-active: #ffffff; --c-nav-badge-bg: var(--c-warn-red-500); --c-nav-badge-text: #ffffff; } /* Page-level dark mode: rail becomes Grey/800. Active state mirrors activity row-btn active (saturated brand-purple tint with light-purple icon/label) for visual continuity. [Kim 2026-05-19] */ [data-theme-dark] .qdnapro-nav-rail, [data-theme=dark] .qdnapro-nav-rail, body[data-theme=dark] .qdnapro-nav-rail { --c-nav-bg: var(--c-grey-800); --c-nav-divider: rgba(255, 255, 255, 0.08); --c-nav-hover-bg: rgba(255, 255, 255, 0.06); --c-nav-active-bg: rgba(70, 82, 243, 0.20); --c-nav-icon: var(--c-grey-300); --c-nav-icon-hover: #ffffff; --c-nav-icon-active: #a5acff; --c-nav-label: var(--c-grey-300); --c-nav-label-hover: #ffffff; --c-nav-label-active: #a5acff; } /* Forced light theme via attribute on the rail itself. */ .qdnapro-nav-rail[data-theme=light] { --c-nav-bg: #ffffff; --c-nav-divider: rgba(0, 0, 0, 0.08); --c-nav-hover-bg: var(--c-purple-50); --c-nav-active-bg: var(--c-bg-secondary-purple); --c-nav-icon: var(--c-text-muted); --c-nav-icon-hover: var(--c-brand-purple); --c-nav-icon-active: var(--c-brand-purple); --c-nav-label: var(--c-text-body); --c-nav-label-hover: var(--c-brand-purple); --c-nav-label-active: var(--c-brand-purple); } /* === END QDNA-NAV-RAIL CSS === */ @property --qnp-beam-angle { syntax: ""; inherits: false; initial-value: 0deg; } .qdnapro-node-picker { --np-rail-bg: #3a4290; --np-rail-icon: #c5c9eb; --np-rail-icon-hover: #ffffff; --np-rail-active-bg: rgba(255, 255, 255, 0.16); --np-rail-hover-bg: rgba(255, 255, 255, 0.08); --np-rail-label: #c5c9eb; --np-rail-label-hover: #ffffff; --np-panel-bg: #ffffff; --np-panel-border: #e6e7ef; --np-panel-shadow: 0 18px 40px rgba(38, 42, 92, 0.16); --np-subhead: #8b8fb5; --np-node-text: #3a4290; --np-node-hover-bg: #f2f3fb; --np-node-icon: #5159a4; --np-rail-w: 56px; --np-panel-w: 208px; --np-cat-size: 36px; display: flex; align-items: stretch; height: 100%; min-height: 0; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; position: relative; } .qdnapro-node-picker *, .qdnapro-node-picker *::before, .qdnapro-node-picker *::after { box-sizing: border-box; } .qdnapro-node-picker__rail { flex: 0 0 auto; width: var(--np-rail-w); background: var(--np-rail-bg); display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0 10px; overflow-y: auto; z-index: 2; position: relative; } .qdnapro-node-picker__rail-pill { position: absolute; top: 0; left: 50%; width: var(--np-cat-size); height: var(--np-cat-size); margin-left: calc(var(--np-cat-size) / -2); border-radius: 8px; background: var(--np-rail-active-bg); opacity: 0; transform: translateY(0); transition: transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 160ms ease-out; pointer-events: none; z-index: 0; } .qdnapro-node-picker__cat { appearance: none; border: 0; background: transparent; color: var(--np-rail-icon); display: flex; align-items: center; justify-content: center; width: var(--np-cat-size); height: var(--np-cat-size); border-radius: 8px; cursor: pointer; position: relative; z-index: 1; transition: background-color 120ms ease-out, color 120ms ease-out; } .qdnapro-node-picker__cat:hover { background: var(--np-rail-hover-bg); color: var(--np-rail-icon-hover); } .qdnapro-node-picker__cat.is-active { color: #ffffff; } .qdnapro-node-picker__cat:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--np-rail-bg), 0 0 0 4px rgba(255, 255, 255, 0.7); } .qdnapro-node-picker__cat-icon { display: flex; align-items: center; justify-content: center; color: inherit; } .qdnapro-node-picker__cat-icon i { font-size: 18px; line-height: 1; } .qdnapro-node-picker__card { background: #ffffff; color: var(--np-node-icon); box-shadow: 0 2px 6px rgba(38, 42, 92, 0.2); } .qdnapro-node-picker__card:hover { background: #ffffff; color: var(--np-node-icon); } .qdnapro-node-picker__card.is-active { color: var(--np-node-icon); } .qdnapro-node-picker__card:hover .qdnapro-node-picker__cat-icon, .qdnapro-node-picker__card.is-active .qdnapro-node-picker__cat-icon { color: var(--np-node-icon); } @keyframes qdnapro-node-picker-card-pulse { 0% { box-shadow: 0 2px 6px rgba(38, 42, 92, 0.2), 0 0 0 0 rgba(255, 255, 255, 0.75); transform: scale(1); } 70% { box-shadow: 0 2px 6px rgba(38, 42, 92, 0.2), 0 0 0 9px rgba(255, 255, 255, 0); transform: scale(1.06); } 100% { box-shadow: 0 2px 6px rgba(38, 42, 92, 0.2), 0 0 0 0 rgba(255, 255, 255, 0); transform: scale(1); } } .qdnapro-node-picker[card-pulse] .qdnapro-node-picker__card { animation: qdnapro-node-picker-card-pulse 1.8s ease-out infinite; } @media (prefers-reduced-motion: reduce) { .qdnapro-node-picker[card-pulse] .qdnapro-node-picker__card { animation: none; } } .qdnapro-node-picker[node-pulse] .qdnapro-node-picker__cat[data-cat=questions] { animation: qdnapro-node-picker-card-pulse 1.8s ease-out infinite; } @media (prefers-reduced-motion: reduce) { .qdnapro-node-picker[node-pulse] .qdnapro-node-picker__cat[data-cat=questions] { animation: none; } } .qdnapro-node-picker__panel { flex: 0 0 auto; width: 0; overflow: hidden; background-color: var(--np-panel-bg); background-image: url("/assets/illustrations/node-picker-flow.svg"); background-repeat: no-repeat; background-position: bottom center; background-size: contain; border-right: 1px solid var(--np-panel-border); box-shadow: var(--np-panel-shadow); border-radius: 0 10px 10px 0; transition: width 200ms cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; z-index: 1; } .qdnapro-node-picker[data-open] .qdnapro-node-picker__panel { width: var(--np-panel-w); overflow-y: auto; padding: 8px 8px 10px; } .qdnapro-node-picker__panel-head { font-size: 15px; font-weight: 700; color: var(--np-node-text); padding: 0 4px 8px; white-space: normal; line-height: 1.3; } .qdnapro-node-picker__panel-sub { font-size: 12px; line-height: 1.4; color: var(--np-subhead); padding: 0 4px 12px; } .qdnapro-node-picker__form-card { position: relative; margin: 2px 2px 4px 14px; padding: 10px 10px 12px; background: #ffffff; border: 1.5px solid var(--np-panel-border); border-radius: 10px; box-shadow: 0 2px 8px rgba(38, 42, 92, 0.1); cursor: grab; user-select: none; transition: border-color 120ms ease, box-shadow 120ms ease; } .qdnapro-node-picker__form-card::before { content: ""; position: absolute; left: -10px; top: 50%; transform: translateY(-50%); width: 4px; height: 30px; background: #4652f3; border-radius: 2px; opacity: 0; transition: opacity 150ms ease; pointer-events: none; } .qdnapro-node-picker__form-card:hover { border-color: #b9c0f7; box-shadow: 0 4px 12px rgba(38, 42, 92, 0.16); } .qdnapro-node-picker__form-card:hover::before { opacity: 1; } .qdnapro-node-picker__form-card:active { cursor: grabbing; } .qdnapro-node-picker__form-card:focus-visible { outline: none; box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px rgba(81, 89, 164, 0.45); } .qdnapro-node-picker__form-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; background: conic-gradient(from var(--qnp-beam-angle), transparent 0deg, transparent 250deg, rgba(70, 82, 243, 0.9) 300deg, #b9c0f7 330deg, transparent 360deg); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; pointer-events: none; animation: qdnapro-node-picker-beam 3s linear infinite; } @keyframes qdnapro-node-picker-beam { to { --qnp-beam-angle: 360deg; } } .qdnapro-node-picker__form-card-header { background: #eceefb; color: var(--np-node-text); font-size: 12px; font-weight: 700; padding: 6px 8px; border-radius: 6px; margin-bottom: 10px; } .qdnapro-node-picker__form-card-field { height: 22px; border: 1.5px solid var(--np-panel-border); border-radius: 6px; background: #fbfbfe; } .qdnapro-node-picker__form-card-field + .qdnapro-node-picker__form-card-field { margin-top: 8px; } .qdnapro-node-picker__subhead { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--np-subhead); padding: 8px 4px 3px; white-space: nowrap; } .qdnapro-node-picker__subhead:first-of-type { padding-top: 0; } .qdnapro-node-picker__empty { font-size: 13px; color: var(--np-subhead); padding: 8px; } .qdnapro-node-picker__node { position: relative; display: flex; align-items: center; gap: 9px; padding: 6px 8px 6px 18px; margin-bottom: 12px; border-radius: 8px; cursor: grab; color: var(--np-node-text); font-size: 14px; font-weight: 500; line-height: 1.2; user-select: none; transition: background-color 110ms ease-out; } .qdnapro-node-picker__node::before { content: ""; position: absolute; left: 4px; top: 50%; transform: translateY(-50%); width: 4px; height: 22px; background: #4652f3; border-radius: 2px; opacity: 0; transition: opacity 150ms ease; pointer-events: none; } .qdnapro-node-picker__node:last-child { margin-bottom: 0; } .qdnapro-node-picker__node:hover { background: var(--np-node-hover-bg); } .qdnapro-node-picker__node:hover::before { opacity: 1; } .qdnapro-node-picker__node:active { cursor: grabbing; } .qdnapro-node-picker__node:focus-visible { outline: none; box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px rgba(81, 89, 164, 0.45); } .qdnapro-node-picker__node-icon { flex: 0 0 auto; width: 22px; display: flex; align-items: center; justify-content: center; color: var(--np-node-icon); } .qdnapro-node-picker__node-icon i { font-size: 19px; line-height: 1; } .qdnapro-node-picker__node-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (prefers-reduced-motion: reduce) { .qdnapro-node-picker__panel { transition: none; } .qdnapro-node-picker__form-card::after { animation: none; } } .qdnapro-nova { --nova-primary: #40499a; --nova-primary-hover: #333a7b; --nova-primary-pressed: #252b5e; --nova-primary-glow: rgba(70, 82, 243, 0.40); --nova-panel-bg: #ffffff; --nova-user-bubble: #f0f1f2; --nova-text: #0b0b0d; --nova-text-secondary: #6b7280; --nova-link: #4652f3; --nova-border: #c4c7cc; --nova-input-bg: #ffffff; --nova-placeholder: #a6aab3; --nova-divider: #e1e3e6; --nova-quick-hover: #e6e9ff; --nova-pinned-bg: #e6e9ff; --nova-menu-hover: #f0f1f2; --nova-error-bg: #fef2f2; --nova-error-text: #c65a5a; --nova-success: #428b6e; --nova-sparkle-grad-start: #4652f3; --nova-sparkle-grad-end: #40499a; position: relative; height: 100%; max-height: 100%; width: 0; min-width: 0; flex-shrink: 0; z-index: 10; display: flex; flex-direction: column; background: var(--nova-panel-bg); font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 14px; line-height: 24px; color: var(--nova-text); box-shadow: -4px 0 20px rgba(0, 0, 0, 0.06); box-sizing: border-box; overflow: hidden; transition: width 320ms ease-in-out; } .qdnapro-nova.nova-open { width: 390px; } .qdnapro-nova.nova-open.nova-expanded { width: min(720px, 100vw); } .qdnapro-nova > * { min-width: 390px; box-sizing: border-box; } .qdnapro-nova.nova-expanded > * { min-width: min(720px, 100vw); } .qdnapro-nova[floating] { position: fixed; top: 0; right: 0; height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; width: 0; z-index: 1040; transition: width 320ms ease-in-out; } .qdnapro-nova[floating].nova-open { width: 390px; } .qdnapro-nova[floating].nova-open.nova-expanded { width: min(720px, 100vw); } .qdnapro-nova.nova-theme-orange { --nova-primary: #F58F06; --nova-primary-hover: #d97c00; --nova-primary-pressed: #945800; --nova-primary-glow: rgba(239, 142, 2, 0.45); --nova-quick-hover: #fff3e0; --nova-pinned-bg: #fff3e0; --nova-sparkle-grad-start: #F58F06; --nova-sparkle-grad-end: #FBBF24; } .qdnapro-nova .nova-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 16px 4px; border-bottom: 1px solid transparent; flex-shrink: 0; } .qdnapro-nova .nova-title { margin: 0; font-size: 24px; line-height: 36px; font-weight: 600; color: var(--nova-primary); flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; } .qdnapro-nova .nova-title-back { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 0; background: transparent; color: var(--nova-primary); border-radius: 4px; cursor: pointer; flex-shrink: 0; } .qdnapro-nova .nova-title-back:hover { background: var(--nova-quick-hover); } .qdnapro-nova .nova-header-actions { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; } .qdnapro-nova .nova-header-divider { width: 1px; height: 20px; background: var(--nova-divider); margin: 0 4px; flex-shrink: 0; } .qdnapro-nova .nova-header-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; background: transparent; color: var(--nova-text); border-radius: 8px; cursor: pointer; transition: background-color 120ms ease-out; } .qdnapro-nova .nova-header-btn:hover { background: var(--nova-quick-hover); } .qdnapro-nova .nova-header-btn svg { width: 20px; height: 20px; } .qdnapro-nova .nova-context-pill { display: inline-flex; align-items: center; gap: 6px; margin: 0 12px 8px; padding: 4px 8px 4px 10px; background: var(--nova-pinned-bg); border-radius: 16px; font-size: 12px; line-height: 20px; font-weight: 500; color: var(--nova-primary); max-width: calc(100% - 24px); width: fit-content; box-sizing: border-box; } .qdnapro-nova .nova-context-pill svg { width: 14px; height: 14px; flex-shrink: 0; } .qdnapro-nova .nova-context-pill-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .qdnapro-nova .nova-context-pill-clear { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border: 0; background: transparent; color: var(--nova-primary); border-radius: 50%; cursor: pointer; padding: 0; margin-left: 2px; } .qdnapro-nova .nova-context-pill-clear:hover { background: rgba(0, 0, 0, 0.08); } .qdnapro-nova .nova-quick-actions { display: flex; flex-direction: column; gap: 4px; padding: 0 8px 8px; border-bottom: 1px solid var(--nova-divider); flex-shrink: 0; } .qdnapro-nova .nova-quick-action { display: flex; align-items: center; gap: 12px; padding: 6px 8px; border: 0; background: transparent; border-radius: 4px; cursor: pointer; font: inherit; font-size: 12px; line-height: 20px; color: var(--nova-text); text-align: left; width: 100%; } .qdnapro-nova .nova-quick-action:hover { background: var(--nova-quick-hover); } .qdnapro-nova .nova-quick-action svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--nova-primary); } .qdnapro-nova .nova-messages { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 12px; padding: 16px; position: relative; } .qdnapro-nova.nova-expanded .nova-messages { padding: 16px 24px; } .qdnapro-nova .nova-messages { scrollbar-width: thin; scrollbar-color: var(--nova-border) transparent; } .qdnapro-nova .nova-messages::-webkit-scrollbar { width: 6px; } .qdnapro-nova .nova-messages::-webkit-scrollbar-thumb { background: var(--nova-border); border-radius: 3px; } .qdnapro-nova .nova-msg-user-wrap { align-self: flex-end; max-width: 85%; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; } .qdnapro-nova .nova-msg-user { max-width: 100%; padding: 8px 12px; background: var(--nova-user-bubble); color: var(--nova-text); border-radius: 12px; font-size: 14px; line-height: 24px; font-weight: 500; word-wrap: break-word; white-space: pre-wrap; } .qdnapro-nova .nova-msg-user-actions { display: flex; gap: 0; opacity: 0; transition: opacity 120ms ease; pointer-events: none; } .qdnapro-nova .nova-msg-user-wrap:hover .nova-msg-user-actions, .qdnapro-nova .nova-msg-user-wrap:focus-within .nova-msg-user-actions { opacity: 1; pointer-events: auto; } .qdnapro-nova .nova-msg-ai { align-self: flex-start; width: 100%; padding: 8px 0; border-radius: 12px; display: flex; flex-direction: column; gap: 12px; } .qdnapro-nova .nova-msg-ai-heading { display: flex; align-items: baseline; gap: 4px; font-size: 16px; line-height: 24px; font-weight: 600; color: var(--nova-text); } .qdnapro-nova .nova-msg-ai-heading-emoji { font-size: 14px; line-height: 24px; flex-shrink: 0; } .qdnapro-nova .nova-msg-ai-body { font-size: 14px; line-height: 24px; color: var(--nova-text); word-wrap: break-word; } .qdnapro-nova .nova-msg-ai-body p { margin: 0 0 8px; } .qdnapro-nova .nova-msg-ai-body p:last-child { margin-bottom: 0; } .qdnapro-nova .nova-msg-ai-body strong { font-weight: 600; } .qdnapro-nova .nova-msg-ai-body a { color: var(--nova-link); text-decoration: underline; text-decoration-style: solid; } .qdnapro-nova .nova-msg-ai-body ul, .qdnapro-nova .nova-msg-ai-body ol { margin: 0 0 8px; padding-left: 20px; } .qdnapro-nova .nova-msg-ai-body li + li { margin-top: 4px; } .qdnapro-nova .nova-msg-ai-body code { background: var(--nova-user-bubble); padding: 1px 4px; border-radius: 3px; font-family: Menlo, Monaco, "Courier New", monospace; font-size: 12px; } .qdnapro-nova .nova-msg-ai-ref { display: flex; gap: 4px; font-size: 12px; line-height: 20px; } .qdnapro-nova .nova-msg-ai-ref-label { font-weight: 600; color: var(--nova-text); } .qdnapro-nova .nova-msg-ai-ref-value a { color: var(--nova-link); text-decoration: underline; } .qdnapro-nova .nova-streaming-cursor { display: inline-block; width: 8px; height: 16px; margin-left: 2px; background: currentColor; vertical-align: text-bottom; animation: nova-cursor-pulse 1s steps(2, end) infinite; } @keyframes nova-cursor-pulse { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } .qdnapro-nova .nova-thinking { display: flex; align-items: center; gap: 12px; height: 28px; padding: 0 12px; color: var(--nova-text-secondary); font-size: 16px; line-height: 24px; font-weight: 600; } .qdnapro-nova .nova-thinking-icon { width: 36px; height: 36px; flex-shrink: 0; position: relative; display: inline-flex; align-items: center; justify-content: center; } .qdnapro-nova .nova-thinking-sparkle { position: absolute; top: 50%; left: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; color: var(--nova-primary); animation: nova-sparkle-orbit 2.7s ease-in-out infinite; will-change: transform, opacity, filter; } .qdnapro-nova .nova-thinking-sparkle:nth-child(2) { animation-delay: -0.9s; } .qdnapro-nova .nova-thinking-sparkle:nth-child(3) { animation-delay: -1.8s; } .qdnapro-nova .nova-thinking-sparkle svg { width: 100%; height: 100%; display: block; } @keyframes nova-sparkle-orbit { 0% { transform: translate(0, -13px) scale(0.25); opacity: 0.18; filter: blur(0.6px); } 25% { transform: translate(13px, 0) scale(0.75); opacity: 0.7; filter: blur(0); } 50% { transform: translate(0, 13px) scale(1.5); opacity: 1; filter: blur(0); } 75% { transform: translate(-13px, 0) scale(0.75); opacity: 0.7; filter: blur(0); } 100% { transform: translate(0, -13px) scale(0.25); opacity: 0.18; filter: blur(0.6px); } } @media (prefers-reduced-motion: reduce) { .qdnapro-nova .nova-thinking-sparkle { animation-duration: 0s; transform: scale(1); opacity: 1; } .qdnapro-nova .nova-empty-hero svg path { animation: none; } } @keyframes nova-sparkle-big { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } } @keyframes nova-sparkle-small { 0%, 100% { transform: scale(0.7); } 50% { transform: scale(1.25); } } @keyframes nova-pop-in { 0% { opacity: 0; transform: scale(0.85); } 55% { opacity: 1; transform: scale(1.05); } 100% { opacity: 1; transform: scale(1); } } .qdnapro-nova .nova-empty-hero { animation: nova-pop-in 240ms ease-out both; } .qdnapro-nova .nova-quick-action { animation: nova-pop-in 240ms ease-out both; } .qdnapro-nova .nova-quick-action:nth-child(1) { animation-delay: 80ms; } .qdnapro-nova .nova-quick-action:nth-child(2) { animation-delay: 140ms; } .qdnapro-nova .nova-quick-action:nth-child(3) { animation-delay: 200ms; } .qdnapro-nova .nova-quick-action:nth-child(4) { animation-delay: 260ms; } .qdnapro-nova .nova-quick-action:nth-child(5) { animation-delay: 320ms; } .qdnapro-nova .nova-input-wrapper.nova-empty-mode { animation: nova-pop-in 240ms ease-out 280ms both; } @keyframes nova-history-enter { 0% { opacity: 0; transform: translateY(12px); } 100% { opacity: 1; transform: translateY(0); } } .qdnapro-nova .nova-history { animation: nova-history-enter 220ms cubic-bezier(0.4, 0, 0.2, 1) both; } @media (prefers-reduced-motion: reduce) { .qdnapro-nova .nova-empty-hero, .qdnapro-nova .nova-quick-action, .qdnapro-nova .nova-input-wrapper.nova-empty-mode, .qdnapro-nova .nova-history { animation: none; } } .qdnapro-nova .nova-msg-actions { display: flex; align-items: center; gap: 4px; margin-left: -4px; padding: 0; flex-wrap: wrap; } .qdnapro-nova .nova-action-btn { color: var(--nova-text-secondary); } .qdnapro-nova .nova-action-btn:hover { color: var(--nova-text); } .qdnapro-nova .nova-action-btn.nova-action-thumb { display: none; } .qdnapro-nova .nova-action-btn.nova-action-active { color: var(--nova-primary); background: var(--nova-pinned-bg); } /* Bronnen-chips onder een antwoord (echte qdnapro-source-pill's) + het bronnenpaneel dat van rechts over de chat schuift. De oude .nova-source-pill/ .nova-source-stack placeholder-stijlen zijn hier vervangen — de placeholder-div in de JS bestaat niet meer. [Jan 2026-08-05, afgestemd met Kim] */ .qdnapro-nova .nova-sources { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0 4px; } .qdnapro-nova .nova-sources qdnapro-source-pill { cursor: pointer; } .qdnapro-nova .nova-source-panel { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; background: var(--nova-panel-bg); transform: translateX(100%); transition: transform 0.25s ease; box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12); } .qdnapro-nova .nova-source-panel.nova-source-panel-in { transform: translateX(0); } .qdnapro-nova .nova-source-panel-head { display: flex; align-items: center; gap: 8px; padding: 12px; border-bottom: 1px solid var(--nova-divider); } .qdnapro-nova .nova-source-panel-open-btn { flex: 1 1 auto; } .qdnapro-nova .nova-source-panel-open-btn button { width: 100%; } .qdnapro-nova .nova-source-panel-kicker { padding: 12px 12px 0; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--nova-text-secondary); } .qdnapro-nova .nova-source-panel-title { display: flex; align-items: center; gap: 8px; padding: 4px 12px 8px; font-size: 14px; font-weight: 600; color: var(--nova-text); } .qdnapro-nova .nova-source-panel-title svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--nova-text-secondary); } .qdnapro-nova .nova-source-panel-body { flex: 1 1 auto; min-height: 0; /* flex-kind mag krimpen, anders klipt de passage-lijst stil */ overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 4px 12px 16px; scrollbar-width: thin; scrollbar-color: var(--nova-border) transparent; } .qdnapro-nova .nova-source-panel-body::-webkit-scrollbar { width: 6px; } .qdnapro-nova .nova-source-panel-body::-webkit-scrollbar-thumb { background: var(--nova-border); border-radius: 3px; } .qdnapro-nova .nova-source-passage { background: var(--nova-user-bubble); border-radius: 8px; padding: 10px 12px; } .qdnapro-nova .nova-source-passage-where { margin-bottom: 6px; font-size: 12px; font-weight: 600; color: var(--nova-text-secondary); } .qdnapro-nova .nova-source-passage-text { font-size: 13px; line-height: 20px; color: var(--nova-text); white-space: pre-wrap; } .qdnapro-nova .nova-source-passage-none { font-size: 13px; color: var(--nova-text-secondary); } .qdnapro-nova .nova-followups { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 4px; } .qdnapro-nova .nova-followup-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; background: transparent; border: 1px solid var(--nova-border); border-radius: 16px; cursor: pointer; font: inherit; font-size: 12px; line-height: 16px; color: var(--nova-text); transition: background-color 120ms ease-out, border-color 120ms ease-out; } .qdnapro-nova .nova-followup-chip:hover { background: var(--nova-quick-hover); border-color: #aab0d8; color: var(--nova-primary); } .qdnapro-nova .nova-followup-chip:active { background: #c7cce8; border-color: var(--nova-primary); color: var(--nova-primary); } .qdnapro-nova .nova-followup-chip svg { width: 12px; height: 12px; } .qdnapro-nova .nova-msg-error { align-self: stretch; padding: 12px; background: var(--nova-error-bg); border-radius: 12px; color: var(--nova-error-text); font-size: 13px; line-height: 20px; display: flex; flex-direction: column; gap: 8px; } .qdnapro-nova .nova-msg-error-retry { align-self: flex-start; padding: 4px 10px; background: var(--nova-error-text); color: #fff; border: 0; border-radius: 4px; font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; } .qdnapro-nova .nova-msg-error-retry:hover { opacity: 0.9; } .qdnapro-nova .nova-offline-banner { padding: 8px 12px; background: var(--nova-error-bg); color: var(--nova-error-text); font-size: 13px; line-height: 20px; text-align: center; flex-shrink: 0; } .qdnapro-nova .nova-scroll-bottom { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: var(--nova-panel-bg); border: 1px solid var(--nova-border); border-radius: 50%; color: var(--nova-text-secondary); cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 120ms ease-out, transform 200ms ease-out; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); } .qdnapro-nova.nova-show-scroll-bottom .nova-scroll-bottom { opacity: 1; pointer-events: auto; } .qdnapro-nova .nova-scroll-bottom:hover { color: var(--nova-primary); border-color: var(--nova-primary); } .qdnapro-nova .nova-scroll-bottom svg { width: 16px; height: 16px; } .qdnapro-nova .nova-empty-hero { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px 16px; color: var(--nova-text-secondary); text-align: center; flex: 1; } .qdnapro-nova .nova-empty-hero svg { width: 48px; height: 48px; color: var(--nova-primary); } .qdnapro-nova .nova-empty-hero svg path { transform-box: fill-box; transform-origin: center; } .qdnapro-nova .nova-empty-hero .sparkle-big { animation: nova-sparkle-big 2.2s ease-in-out infinite; } .qdnapro-nova .nova-empty-hero .sparkle-small { animation: nova-sparkle-small 1.5s ease-in-out -0.4s infinite; } .qdnapro-nova .nova-empty-hero-title { font-size: 16px; font-weight: 600; color: var(--nova-text); } .qdnapro-nova .nova-empty-hero-sub { font-size: 13px; line-height: 20px; } .qdnapro-nova .nova-welcome { display: flex; flex-direction: column; gap: 16px; padding: 16px; flex: 1; } .qdnapro-nova .nova-welcome-card { position: relative; background: #e6e9ff; border: 0.5px solid rgba(64, 73, 154, 0.12); border-radius: 16px; padding: 24px 20px 20px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; animation: nova-pop-in 240ms ease-out both; } .qdnapro-nova .nova-welcome-close { position: absolute; top: 8px; right: 8px; } .qdnapro-nova .nova-welcome-hero { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; margin-bottom: 4px; } .qdnapro-nova .nova-welcome-hero svg { width: 56px; height: 56px; color: var(--nova-primary); } .qdnapro-nova .nova-welcome-hero svg path { transform-box: fill-box; transform-origin: center; } .qdnapro-nova .nova-welcome-hero .sparkle-big { animation: nova-sparkle-big 2.2s ease-in-out infinite; } .qdnapro-nova .nova-welcome-hero .sparkle-small { animation: nova-sparkle-small 1.5s ease-in-out -0.4s infinite; } .qdnapro-nova .nova-welcome-title { font-size: 18px; line-height: 24px; font-weight: 600; color: #40499a; } .qdnapro-nova .nova-welcome-sub { font-size: 13px; line-height: 20px; color: var(--nova-text); max-width: 320px; } .qdnapro-nova .nova-welcome-privacy { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 6px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.55); font-size: 12px; line-height: 16px; font-weight: 500; color: #40499a; } .qdnapro-nova .nova-welcome-privacy-icon { flex-shrink: 0; color: #40499a; } .qdnapro-nova .nova-welcome-prompts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .qdnapro-nova .nova-welcome-prompts qdnapro-suggestion-chip { animation: nova-pop-in 240ms ease-out both; } .qdnapro-nova .nova-welcome-prompts qdnapro-suggestion-chip:nth-child(1) { animation-delay: 120ms; } .qdnapro-nova .nova-welcome-prompts qdnapro-suggestion-chip:nth-child(2) { animation-delay: 180ms; } .qdnapro-nova .nova-welcome-prompts qdnapro-suggestion-chip:nth-child(3) { animation-delay: 240ms; } .qdnapro-nova .nova-welcome-prompts qdnapro-suggestion-chip:nth-child(4) { animation-delay: 300ms; } @media (prefers-reduced-motion: reduce) { .qdnapro-nova .nova-welcome-card, .qdnapro-nova .nova-welcome-prompts qdnapro-suggestion-chip { animation: none; } } .qdnapro-nova.nova-theme-orange .nova-welcome-card { background: #fff5e6; border-color: rgba(245, 143, 6, 0.18); } .qdnapro-nova.nova-theme-orange .nova-welcome-title, .qdnapro-nova.nova-theme-orange .nova-welcome-privacy, .qdnapro-nova.nova-theme-orange .nova-welcome-privacy-icon { color: #b45a00; } .qdnapro-nova .nova-input-wrapper { padding: 12px 16px 16px; flex-shrink: 0; } .qdnapro-nova .nova-input-field { display: flex; flex-direction: column; gap: 4px; padding: 12px; background: var(--nova-input-bg); border: 1px solid var(--nova-border); border-radius: 8px; min-height: 80px; transition: border-color 120ms ease-out, box-shadow 120ms ease-out; } .qdnapro-nova .nova-input-field:focus-within { border-color: var(--nova-primary); box-shadow: 0 0 0 3px rgba(70, 82, 243, 0.2); } .qdnapro-nova.nova-theme-orange .nova-input-field:focus-within { box-shadow: 0 0 0 3px rgba(245, 143, 6, 0.25); } .qdnapro-nova .nova-input-attachments { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; } .qdnapro-nova .nova-input-attachment-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 4px 4px 8px; background: var(--nova-panel-bg); border: 1px solid var(--nova-border); border-radius: 999px; max-width: 220px; font-size: 12px; line-height: 1.2; color: var(--nova-text); } .qdnapro-nova .nova-input-attachment-pill qdnapro-file-icon { flex-shrink: 0; } .qdnapro-nova .nova-input-attachment-name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .qdnapro-nova .nova-input-attachment-remove { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 0; background: transparent; color: var(--nova-placeholder); cursor: pointer; border-radius: 50%; padding: 0; flex-shrink: 0; } .qdnapro-nova .nova-input-attachment-remove:hover { background: rgba(0, 0, 0, 0.06); color: var(--nova-text); } .qdnapro-nova .nova-input-top { display: flex; align-items: flex-start; gap: 8px; flex: 1; } .qdnapro-nova .nova-input-top-icon { width: 16px; height: 16px; margin-top: 4px; color: var(--nova-placeholder); flex-shrink: 0; } .qdnapro-nova .nova-input-textarea { flex: 1; border: 0; outline: 0; background: transparent; resize: none; font: inherit; font-family: inherit; font-size: 14px; line-height: 24px; color: var(--nova-text); max-height: 200px; min-height: 24px; padding: 0; width: 100%; } .qdnapro-nova .nova-input-textarea::placeholder { color: var(--nova-placeholder); } .qdnapro-nova .nova-input-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; } .qdnapro-nova .nova-input-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; min-width: 40px; border: 0; background: transparent; color: var(--nova-text); border-radius: 4px; cursor: pointer; padding: 8px; transition: background-color 120ms ease-out, color 120ms ease-out; } .qdnapro-nova .nova-input-btn svg { width: 20px; height: 20px; } .qdnapro-nova .nova-input-btn:hover { background: var(--nova-user-bubble); } .qdnapro-nova .nova-input-btn[disabled] { color: var(--nova-placeholder); cursor: not-allowed; } .qdnapro-nova .nova-input-btn[disabled]:hover { background: transparent; } .qdnapro-nova .nova-input-action { margin-left: auto; transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1), color 200ms cubic-bezier(0.4, 0, 0.2, 1); } .qdnapro-nova .nova-input-action.nova-action-send { background: var(--nova-primary); color: #ffffff; } .qdnapro-nova .nova-input-action.nova-action-send:hover { background: var(--nova-primary-hover); } .qdnapro-nova .nova-input-action.nova-action-send:active { background: var(--nova-primary-pressed); } .qdnapro-nova .nova-input-action.nova-action-stop { background: transparent; color: var(--nova-error-text); } .qdnapro-nova .nova-input-action.nova-action-stop:hover { background: rgba(198, 90, 90, 0.1); } .qdnapro-nova .nova-input-action.nova-action-stop:active { background: rgba(198, 90, 90, 0.18); } .qdnapro-nova .nova-input-action.nova-action-mic { background: transparent; color: var(--nova-text); } .qdnapro-nova .nova-input-action.nova-action-mic:hover { background: rgba(0, 0, 0, 0.06); } .qdnapro-nova .nova-action-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; transform-origin: center; transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1), opacity 140ms ease; will-change: transform, opacity; } .qdnapro-nova .nova-action-icon svg { display: block; width: 100%; height: 100%; } @media (prefers-reduced-motion: reduce) { .qdnapro-nova .nova-action-icon { transition: opacity 80ms ease; transform: none !important; } } .qdnapro-nova .nova-input-hint { padding: 4px 12px 0; font-size: 11px; line-height: 16px; color: var(--nova-placeholder); text-align: center; } .qdnapro-nova .nova-history { flex: 1; min-height: 0; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 8px; } .qdnapro-nova .nova-history-section-label { display: flex; align-items: center; gap: 6px; padding: 8px 8px 4px; font-size: 11px; line-height: 16px; font-weight: 600; color: var(--nova-text-secondary); text-transform: uppercase; letter-spacing: 0.04em; } .qdnapro-nova .nova-history-section-label svg { width: 12px; height: 12px; } .qdnapro-nova .nova-history-item { display: flex; align-items: flex-start; gap: 8px; padding: 8px; border-radius: 8px; cursor: pointer; position: relative; transition: background-color 120ms ease-out; } .qdnapro-nova .nova-history-item:hover { background: var(--nova-menu-hover); } .qdnapro-nova .nova-history-item.nova-history-active { background: var(--nova-pinned-bg); } .qdnapro-nova .nova-history-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .qdnapro-nova .nova-history-item-title { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--nova-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .qdnapro-nova .nova-history-item-snippet { font-size: 12px; line-height: 16px; color: var(--nova-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .qdnapro-nova .nova-history-item-meta { font-size: 11px; line-height: 14px; color: var(--nova-text-secondary); } .qdnapro-nova .nova-history-item-pin { color: var(--nova-primary); width: 12px; height: 12px; flex-shrink: 0; margin-top: 4px; } .qdnapro-nova .nova-history-item-menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 0; background: transparent; color: var(--nova-text-secondary); border-radius: 4px; cursor: pointer; flex-shrink: 0; opacity: 0; transition: opacity 120ms ease-out, background-color 120ms ease-out; } .qdnapro-nova .nova-history-item:hover .nova-history-item-menu-btn, .qdnapro-nova .nova-history-item-menu-btn:focus-visible, .qdnapro-nova .nova-history-item.nova-menu-open .nova-history-item-menu-btn { opacity: 1; } .qdnapro-nova .nova-history-item-menu-btn:hover { background: rgba(0, 0, 0, 0.08); } .qdnapro-nova .nova-history-item-menu-btn svg { width: 16px; height: 16px; } .qdnapro-nova .nova-menu { position: absolute; top: 36px; right: 8px; z-index: 10; min-width: 140px; padding: 4px; background: var(--nova-panel-bg); border: 1px solid var(--nova-border); border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); display: flex; flex-direction: column; gap: 2px; } .qdnapro-nova .nova-menu-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 0; background: transparent; color: var(--nova-text); border-radius: 4px; cursor: pointer; font: inherit; font-size: 13px; line-height: 20px; text-align: left; width: 100%; } .qdnapro-nova .nova-menu-item:hover { background: var(--nova-menu-hover); } .qdnapro-nova .nova-menu-item svg { width: 14px; height: 14px; color: var(--nova-text-secondary); flex-shrink: 0; } .qdnapro-nova .nova-menu-item.nova-menu-item-danger { color: var(--nova-error-text); } .qdnapro-nova .nova-menu-item.nova-menu-item-danger svg { color: var(--nova-error-text); } .qdnapro-nova .nova-menu-item.nova-menu-item-danger:hover { background: var(--nova-error-bg); } .qdnapro-nova .nova-history-empty { padding: 32px 16px; text-align: center; color: var(--nova-text-secondary); font-size: 13px; line-height: 20px; } .qdnapro-nova.nova-mic-recording .nova-input-field { border-color: #c65a5a; box-shadow: 0 0 0 3px rgba(198, 90, 90, 0.2); animation: nova-mic-border-pulse 1.4s ease-in-out infinite; } @keyframes nova-mic-border-pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(198, 90, 90, 0.2); } 50% { box-shadow: 0 0 0 5px rgba(198, 90, 90, 0.08); } } @media (prefers-reduced-motion: reduce) { .qdnapro-nova.nova-mic-recording .nova-input-field { animation: none; border-color: #c65a5a; box-shadow: 0 0 0 3px rgba(198, 90, 90, 0.2); } } .qdnapro-nova .nova-mic-autosend { display: flex; align-items: center; gap: 10px; margin: 8px 4px 0; padding: 7px 10px; border-radius: 8px; background: var(--nova-quick-hover); color: var(--nova-primary); font-size: 12px; line-height: 16px; } .qdnapro-nova .nova-mic-autosend-label { font-weight: 600; flex-shrink: 0; } .qdnapro-nova .nova-mic-autosend-bar { flex: 1; height: 3px; border-radius: 2px; background: rgba(64, 73, 154, 0.18); overflow: hidden; position: relative; } .qdnapro-nova .nova-mic-autosend-bar::after { content: ""; position: absolute; inset: 0; background: var(--nova-primary); transform-origin: left center; animation: nova-autosend-countdown linear forwards; } @keyframes nova-autosend-countdown { from { transform: scaleX(1); } to { transform: scaleX(0); } } .qdnapro-nova .nova-mic-autosend-cancel { flex-shrink: 0; border: 0; background: transparent; color: var(--nova-primary); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; padding: 2px 4px; border-radius: 4px; text-decoration: underline; } .qdnapro-nova .nova-mic-autosend-cancel:hover { background: rgba(64, 73, 154, 0.1); } @media (prefers-reduced-motion: reduce) { .qdnapro-nova .nova-mic-autosend-bar::after { animation: none; transform: scaleX(0.5); } } [data-theme=dark] .qdnapro-nova { --nova-panel-bg: #1f2028; --nova-user-bubble: #2e3036; --nova-text: #f0f1f2; --nova-text-secondary: #a6aab3; --nova-link: #8b93ff; --nova-border: #565b66; --nova-input-bg: #0b0b0d; --nova-placeholder: #898e99; --nova-divider: #3a3b42; --nova-quick-hover: rgba(70, 82, 243, 0.20); --nova-pinned-bg: #2a2d52; --nova-menu-hover: #2e3036; --nova-error-bg: #3a1e1e; --nova-error-text: #f87171; box-shadow: -4px 0 20px rgba(0, 0, 0, 0.35); } [data-theme=dark] .qdnapro-nova.nova-theme-orange { --nova-pinned-bg: #3a2a12; --nova-quick-hover: #2e3036; } [data-theme=dark] .qdnapro-nova { --nova-primary: #8b93ff; --nova-primary-hover: #6e78ff; --nova-primary-pressed: #5560e8; --nova-primary-glow: rgba(139, 147, 255, 0.45); } [data-theme=dark] .qdnapro-nova.nova-theme-orange { --nova-primary: #F58F06; --nova-primary-hover: #f2a535; --nova-primary-pressed: #d97c00; --nova-primary-glow: rgba(245, 143, 6, 0.45); } [data-theme=dark] .qdnapro-nova .nova-welcome-card { background: #2a2c4d; border-color: rgba(165, 172, 255, 0.18); } [data-theme=dark] .qdnapro-nova .nova-welcome-title, [data-theme=dark] .qdnapro-nova .nova-welcome-privacy, [data-theme=dark] .qdnapro-nova .nova-welcome-privacy-icon { color: #a5acff; } [data-theme=dark] .qdnapro-nova .nova-welcome-privacy { background: rgba(255, 255, 255, 0.08); } [data-theme=dark] .qdnapro-nova.nova-theme-orange .nova-welcome-card { background: #3d2e1a; border-color: rgba(251, 191, 92, 0.22); } [data-theme=dark] .qdnapro-nova.nova-theme-orange .nova-welcome-title, [data-theme=dark] .qdnapro-nova.nova-theme-orange .nova-welcome-privacy, [data-theme=dark] .qdnapro-nova.nova-theme-orange .nova-welcome-privacy-icon { color: #fbbf24; } /* ══════════════════════════════════════════════════════════════════════════ PWA-VARIANT: gesprekkenlijst NAAST de chat [Jan 04.08.2026] Alleen actief met het `pwa`-attribuut, dus het backoffice-zijpaneel merkt hier niets van: daar komt de geschiedenis nog steeds IN PLAATS VAN de chat. Onder 768px (telefoon) is er één kolom en gedraagt de variant zich exact als voorheen: de rechterkolom staat er in de DOM maar wordt niet getoond, en de geschiedenis-knop in de kop brengt je naar de volledige lijst. Vanaf 768px — dezelfde tabletgrens die de app in documenten, postvak en startscherm gebruikt — staat de lijst rechts en is die knop overbodig. ══════════════════════════════════════════════════════════════════════════ */ .qdnapro-nova[pwa] .nova-split { display: flex; flex: 1 1 auto; min-height: 0; overflow: hidden; } .qdnapro-nova[pwa] .nova-split-chat { display: flex; flex-direction: column; flex: 1 1 auto; /* ⚠️ min-width 0 is hier geen opsmuk: zonder deze regel weigert een flex-kind te krimpen onder zijn inhoud en duwt een lange regel in een chatbel de rechterkolom van het scherm af. */ min-width: 0; } /* Telefoon: de lijst staat in de DOM maar hoort niet in beeld. */ .qdnapro-nova[pwa] .nova-split-history { display: none; } @media (min-width: 768px) { .qdnapro-nova[pwa] .nova-split-history { display: flex; flex-direction: column; /* 320px: breed genoeg voor een gesprekstitel op twee regels, smal genoeg om de chat de hoofdrol te laten. Krimpt niet mee (flex 0 0 auto), want een gespreklijst van 120px is onleesbaar. */ flex: 0 0 320px; min-width: 0; overflow-y: auto; border-left: 1px solid var(--nova-divider); } /* De geschiedenis-knop in de kop wijst naar een lijst die al zichtbaar is. */ .qdnapro-nova[pwa] .nova-header-actions .nova-header-btn[data-role=history-btn] { display: none; } } /* ============================================================ * qdnapro-nova-launcher — compiled from _nova-launcher.scss * ============================================================ */ .qdnapro-nova-launcher { position: fixed; z-index: 9000; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: none; border-radius: 50%; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; background: linear-gradient(135deg, #4652f3 0%, #40499a 50%, #4652f3 100%); background-size: 200% 200%; background-position: 0% 0%; animation: nova-launcher-glide 8s ease-in-out infinite alternate; color: #ffffff; box-shadow: 0 4px 8px 0 rgba(64, 73, 154, 0.25), 0 8px 16px 4px rgba(0, 0, 0, 0.16), 0 2px 4px 0 rgba(0, 0, 0, 0.12); transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 200ms ease-out, background 160ms ease-out; } .qdnapro-nova-launcher .launcher-sparkle { width: 56%; height: 56%; display: block; pointer-events: none; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.18)); } .qdnapro-nova-launcher .launcher-sparkle path { transform-box: fill-box; transform-origin: center; } .qdnapro-nova-launcher .launcher-sparkle .sparkle-big { animation: nova-launcher-sparkle-big 2.2s ease-in-out infinite; } .qdnapro-nova-launcher .launcher-sparkle .sparkle-small { animation: nova-launcher-sparkle-small 1.5s ease-in-out -0.4s infinite; } .qdnapro-nova-launcher:hover, .qdnapro-nova-launcher.force-hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 6px 12px 0 rgba(64, 73, 154, 0.32), 0 12px 22px 6px rgba(0, 0, 0, 0.18), 0 4px 6px 0 rgba(0, 0, 0, 0.14); } .qdnapro-nova-launcher:hover::before, .qdnapro-nova-launcher.force-hover::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(70, 82, 243, 0.55); z-index: -1; animation: nova-launcher-pulse 1.8s ease-out infinite; } .qdnapro-nova-launcher:active, .qdnapro-nova-launcher.force-pressed { transform: translateY(0) scale(0.97); box-shadow: 0 2px 4px 0 rgba(64, 73, 154, 0.22), 0 4px 8px 2px rgba(0, 0, 0, 0.18), 0 1px 2px 0 rgba(0, 0, 0, 0.14); transition-duration: 90ms; } .qdnapro-nova-launcher:focus { outline: none; } .qdnapro-nova-launcher:focus-visible, .qdnapro-nova-launcher.force-focus { outline: 3px solid #ffffff; outline-offset: -3px; box-shadow: 0 0 0 3px #4652f3, 0 0 0 7px rgba(70, 82, 243, 0.3), 0 8px 16px 4px rgba(0, 0, 0, 0.18), 0 2px 4px 0 rgba(0, 0, 0, 0.12); } .qdnapro-nova-launcher.launcher-theme-orange { background: linear-gradient(135deg, #FBBF24 0%, #F58F06 50%, #FBBF24 100%); background-size: 200% 200%; background-position: 0% 0%; animation: nova-launcher-glide 8s ease-in-out infinite alternate; color: #ffffff; box-shadow: 0 4px 8px 0 rgba(245, 143, 6, 0.3), 0 8px 16px 4px rgba(0, 0, 0, 0.16), 0 2px 4px 0 rgba(0, 0, 0, 0.12); } .qdnapro-nova-launcher.launcher-theme-orange:hover, .qdnapro-nova-launcher.launcher-theme-orange.force-hover { box-shadow: 0 6px 12px 0 rgba(245, 143, 6, 0.38), 0 12px 22px 6px rgba(0, 0, 0, 0.18), 0 4px 6px 0 rgba(0, 0, 0, 0.14); } .qdnapro-nova-launcher.launcher-theme-orange:hover::before, .qdnapro-nova-launcher.launcher-theme-orange.force-hover::before { background: rgba(245, 143, 6, 0.55); } .qdnapro-nova-launcher.launcher-theme-orange:active, .qdnapro-nova-launcher.launcher-theme-orange.force-pressed { box-shadow: 0 2px 4px 0 rgba(245, 143, 6, 0.28), 0 4px 8px 2px rgba(0, 0, 0, 0.18), 0 1px 2px 0 rgba(0, 0, 0, 0.14); } .qdnapro-nova-launcher.launcher-theme-orange:focus-visible, .qdnapro-nova-launcher.launcher-theme-orange.force-focus { box-shadow: 0 0 0 3px #F58F06, 0 0 0 7px rgba(245, 143, 6, 0.32), 0 8px 16px 4px rgba(0, 0, 0, 0.18), 0 2px 4px 0 rgba(0, 0, 0, 0.12); } [data-theme=dark] .qdnapro-nova-launcher { background: linear-gradient(135deg, #5560e8 0%, #3842c2 50%, #5560e8 100%); background-size: 200% 200%; box-shadow: 0 4px 8px 0 rgba(70, 82, 243, 0.3), 0 8px 16px 4px rgba(0, 0, 0, 0.3), 0 2px 4px 0 rgba(0, 0, 0, 0.2); } [data-theme=dark] .qdnapro-nova-launcher:hover, [data-theme=dark] .qdnapro-nova-launcher.force-hover { box-shadow: 0 6px 12px 0 rgba(70, 82, 243, 0.4), 0 12px 22px 6px rgba(0, 0, 0, 0.32), 0 4px 6px 0 rgba(0, 0, 0, 0.22); } [data-theme=dark] .qdnapro-nova-launcher.launcher-theme-orange { background: linear-gradient(135deg, #FBBF24 0%, #d97c00 50%, #FBBF24 100%); background-size: 200% 200%; box-shadow: 0 4px 8px 0 rgba(251, 191, 36, 0.3), 0 8px 16px 4px rgba(0, 0, 0, 0.3), 0 2px 4px 0 rgba(0, 0, 0, 0.2); } @keyframes nova-launcher-sparkle-big { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } } @keyframes nova-launcher-sparkle-small { 0%, 100% { transform: scale(0.7); } 50% { transform: scale(1.25); } } @keyframes nova-launcher-pulse { 0% { transform: scale(1); opacity: 0.55; } 70% { transform: scale(1.5); opacity: 0; } 100% { transform: scale(1.5); opacity: 0; } } @keyframes nova-launcher-glide { 0% { background-position: 0% 0%; } 100% { background-position: 100% 100%; } } @media (prefers-reduced-motion: reduce) { .qdnapro-nova-launcher, .qdnapro-nova-launcher .launcher-sparkle .sparkle-big, .qdnapro-nova-launcher .launcher-sparkle .sparkle-small, .qdnapro-nova-launcher:hover::before { animation: none; } } .qdnapro-nova-message { --msg-text: var(--nova-text, #1a1c20); --msg-text-secondary: var(--nova-text-secondary, #6b7280); --msg-user-bubble: var(--nova-user-bubble, #f0f1f2); --msg-primary: var(--nova-primary, #40499a); --msg-error-bg: var(--nova-error-bg, #fee3e3); --msg-error-text: var(--nova-error-text, #c65a5a); --msg-pinned-bg: var(--nova-pinned-bg, #e6e9ff); --msg-border: var(--nova-border, #c4c7cc); --msg-link: var(--nova-link, #40499a); --msg-quick-hover: var(--nova-quick-hover, #f0f1f2); --msg-divider: var(--nova-divider, rgba(0, 0, 0, 0.1)); display: flex; flex-direction: column; } .qdnapro-nova-message.nova-msg-user { align-self: flex-end; max-width: 85%; padding: 8px 12px; background: var(--msg-user-bubble); color: var(--msg-text); border-radius: 20px; font-size: 14px; line-height: 24px; font-weight: 500; word-wrap: break-word; white-space: pre-wrap; } .qdnapro-nova-message.nova-msg-ai { align-self: flex-start; width: 100%; padding: 8px 12px; border-radius: 20px; gap: 12px; } .qdnapro-nova-message.nova-msg-ai .nova-msg-ai-body { font-size: 14px; line-height: 24px; color: var(--msg-text); word-wrap: break-word; } .qdnapro-nova-message.nova-msg-ai .nova-msg-ai-body p { margin: 0 0 8px; } .qdnapro-nova-message.nova-msg-ai .nova-msg-ai-body p:last-child { margin-bottom: 0; } .qdnapro-nova-message.nova-msg-ai .nova-msg-ai-body strong { font-weight: 600; } .qdnapro-nova-message.nova-msg-ai .nova-msg-ai-body a { color: var(--msg-link); text-decoration: underline; } .qdnapro-nova-message.nova-msg-ai .nova-msg-ai-body ul, .qdnapro-nova-message.nova-msg-ai .nova-msg-ai-body ol { margin: 0 0 8px; padding-left: 20px; } .qdnapro-nova-message.nova-msg-ai .nova-msg-ai-body li + li { margin-top: 4px; } .qdnapro-nova-message.nova-msg-ai .nova-msg-ai-body code { background: var(--msg-user-bubble); padding: 1px 4px; border-radius: 3px; font-family: Menlo, Monaco, "Courier New", monospace; font-size: 12px; } .qdnapro-nova-message.nova-msg-ai .nova-source-pill { display: inline-flex; align-items: center; gap: 8px; padding: 4px 8px 4px 4px; background: var(--msg-user-bubble); border: 0; border-radius: 4px; font-size: 12px; line-height: 20px; font-weight: 500; color: var(--msg-text-secondary); width: fit-content; cursor: pointer; transition: background-color 120ms ease-out; } .qdnapro-nova-message.nova-msg-ai .nova-source-pill:hover { background: var(--msg-quick-hover); } .qdnapro-nova-message.nova-msg-ai .nova-source-pill qdnapro-icon, .qdnapro-nova-message.nova-msg-ai .nova-source-pill .nova-source-icon { width: 16px; height: 16px; flex-shrink: 0; } .qdnapro-nova-message.nova-msg-ai .nova-source-stack { display: inline-flex; align-items: center; padding-right: 6px; } .qdnapro-nova-message.nova-msg-ai .nova-source-stack-item { width: 16px; height: 16px; border-radius: 50%; background: var(--msg-user-bubble); border: 0.5px solid var(--msg-divider); margin-right: -6px; } .qdnapro-nova-message.nova-msg-ai .nova-followups { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 0 4px; } .qdnapro-nova-message.nova-msg-ai .nova-followup-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; background: transparent; border: 1px solid var(--msg-border); border-radius: 16px; cursor: pointer; font: inherit; font-size: 12px; line-height: 16px; color: var(--msg-text); transition: background-color 120ms ease-out, border-color 120ms ease-out; } .qdnapro-nova-message.nova-msg-ai .nova-followup-chip:hover { background: var(--msg-quick-hover); border-color: var(--msg-primary); color: var(--msg-primary); } .qdnapro-nova-message.nova-msg-ai .nova-msg-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .qdnapro-nova-message.nova-msg-ai .nova-action-btn { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 0; background: transparent; color: var(--msg-text-secondary); border-radius: 4px; cursor: pointer; padding: 4px; transition: background-color 120ms ease-out, color 120ms ease-out; } .qdnapro-nova-message.nova-msg-ai .nova-action-btn:hover { background: var(--msg-user-bubble); color: var(--msg-text); } .qdnapro-nova-message.nova-msg-ai .nova-action-btn qdnapro-icon { width: 16px; height: 16px; } .qdnapro-nova-message.nova-msg-ai .nova-action-btn.nova-action-active { color: var(--msg-primary); background: var(--msg-pinned-bg); } .qdnapro-nova-message.nova-msg-ai .nova-action-btn:focus { outline: none; } .qdnapro-nova-message.nova-msg-ai .nova-action-btn:focus-visible, .qdnapro-nova-message.nova-msg-ai .nova-action-btn.force-focus, .qdnapro-nova-message.nova-msg-ai .nova-followup-chip:focus-visible, .qdnapro-nova-message.nova-msg-ai .nova-followup-chip.force-focus, .qdnapro-nova-message.nova-msg-ai .nova-source-pill:focus-visible, .qdnapro-nova-message.nova-msg-ai .nova-source-pill.force-focus { outline: 2px solid var(--msg-primary); outline-offset: -2px; box-shadow: 0 0 0 4px rgba(70, 82, 243, 0.25); } .qdnapro-nova-message.nova-msg-error { align-self: stretch; padding: 12px; background: var(--msg-error-bg); border-radius: 12px; color: var(--msg-error-text); font-size: 13px; line-height: 20px; gap: 8px; } .qdnapro-nova-message.nova-msg-error .nova-msg-error-retry { align-self: flex-start; padding: 4px 10px; background: var(--msg-error-text); color: #ffffff; border: 0; border-radius: 4px; font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; } .qdnapro-nova-message.nova-msg-error .nova-msg-error-retry:hover { opacity: 0.9; } .qdnapro-nova-message.nova-msg-error .nova-msg-error-retry:focus { outline: none; } .qdnapro-nova-message.nova-msg-error .nova-msg-error-retry:focus-visible, .qdnapro-nova-message.nova-msg-error .nova-msg-error-retry.force-focus { outline: 2px solid var(--msg-primary); outline-offset: -2px; box-shadow: 0 0 0 4px rgba(70, 82, 243, 0.25); } .qdnapro-nova-message.nova-msg-thinking { align-self: flex-start; flex-direction: row; align-items: center; gap: 12px; height: 36px; padding: 0; color: var(--msg-text-secondary); font-size: 16px; line-height: 24px; font-weight: 600; } .qdnapro-nova-message.nova-msg-thinking .nova-thinking-icon { position: relative; width: 36px; height: 36px; flex-shrink: 0; } .qdnapro-nova-message.nova-msg-thinking .nova-thinking-sparkle { position: absolute; top: 50%; left: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; color: var(--msg-primary); animation: nova-msg-sparkle-orbit 2.7s ease-in-out infinite; will-change: transform, opacity; } .qdnapro-nova-message.nova-msg-thinking .nova-thinking-sparkle:nth-child(2) { animation-delay: -0.9s; } .qdnapro-nova-message.nova-msg-thinking .nova-thinking-sparkle:nth-child(3) { animation-delay: -1.8s; } .qdnapro-nova-message.nova-msg-thinking .nova-thinking-sparkle svg { width: 100%; height: 100%; display: block; } [data-theme=dark] .qdnapro-nova-message.nova-msg-thinking .nova-thinking-sparkle { color: #f0f1ff; } @keyframes nova-msg-sparkle-orbit { 0% { transform: translate(0, -11px) scale(0.45); opacity: 0.35; } 25% { transform: translate(11px, 0) scale(0.85); opacity: 0.75; } 50% { transform: translate(0, 11px) scale(1.2); opacity: 1; } 75% { transform: translate(-11px, 0) scale(0.85); opacity: 0.75; } 100% { transform: translate(0, -11px) scale(0.45); opacity: 0.35; } } .qdnapro-nova-message.nova-msg-file { align-self: stretch; flex-direction: row; align-items: center; gap: 16px; padding: 12px 16px; background: #e6e9ff; border-radius: 8px; cursor: pointer; transition: background-color 120ms ease-out; } .qdnapro-nova-message.nova-msg-file:hover { background: #daddf2; } .qdnapro-nova-message.nova-msg-file:active { background: #c7cce8; } .qdnapro-nova-message.nova-msg-file:focus { outline: none; } .qdnapro-nova-message.nova-msg-file:focus-visible, .qdnapro-nova-message.nova-msg-file.force-focus { outline: 2px solid var(--msg-primary); outline-offset: -2px; box-shadow: 0 0 0 4px rgba(70, 82, 243, 0.25); } .qdnapro-nova-message.nova-msg-file .nova-msg-file-icon-wrap { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; } .qdnapro-nova-message.nova-msg-file .nova-msg-file-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 2px; } .qdnapro-nova-message.nova-msg-file .nova-msg-file-name { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--msg-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .qdnapro-nova-message.nova-msg-file .nova-msg-file-info { font-size: 12px; line-height: 16px; color: var(--msg-text-secondary); } .qdnapro-nova-message.nova-msg-file .nova-msg-file-open { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: transparent; color: #40499a; border: 1px solid #40499a; border-radius: 8px; font: inherit; font-size: 13px; font-weight: 500; line-height: 20px; pointer-events: none; } .qdnapro-nova-message.nova-msg-file .nova-msg-file-open qdnapro-icon { width: 16px; height: 16px; color: #40499a; } .qdnapro-nova-message.nova-msg-file .nova-msg-file-download { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: #40499a; pointer-events: none; } .qdnapro-nova-message.nova-msg-file .nova-msg-file-download qdnapro-icon { width: 20px; height: 20px; color: inherit; } .qdnapro-nova-message.nova-msg-file .nova-msg-file-download qdnapro-icon svg { fill: #40499a !important; } [data-theme=dark] .qdnapro-nova-message.nova-msg-file { background: #2a2c5a; border-color: #6b75d6; } [data-theme=dark] .qdnapro-nova-message.nova-msg-file:hover { background: #333a7b; } [data-theme=dark] .qdnapro-nova-message.nova-msg-file:active { background: #252b5e; } [data-theme=dark] .qdnapro-nova-message.nova-msg-file .nova-msg-file-open, [data-theme=dark] .qdnapro-nova-message.nova-msg-file .nova-msg-file-open qdnapro-icon { color: #b3bbf2; border-color: #6b75d6; } .qdnapro-number-indicator-badge { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; border-radius: 50px; border: 1px solid transparent; padding: 0 4px; font-family: "Inter", sans-serif; text-align: center; white-space: nowrap; line-height: 1; } .qdnapro-number-indicator-badge:focus-visible { outline: 1px solid #40499a; outline-offset: 2px; } .qdnapro-number-indicator-badge.number-indicator-badge-size-xs { min-width: 20px; height: 20px; font-size: 10px; line-height: 20px; opacity: 0.9; } .qdnapro-number-indicator-badge.number-indicator-badge-size-sm { min-width: 24px; height: 24px; font-size: 12px; line-height: 20px; } .qdnapro-number-indicator-badge.number-indicator-badge-size-md { min-width: 24px; height: 24px; font-size: 14px; line-height: 24px; } .qdnapro-number-indicator-badge.number-indicator-badge-size-lg { min-width: 24px; height: 24px; font-size: 16px; line-height: 24px; } .qdnapro-number-indicator-badge.number-indicator-badge-weight-regular { font-weight: 400; } .qdnapro-number-indicator-badge.number-indicator-badge-weight-medium { font-weight: 500; } .qdnapro-number-indicator-badge.number-indicator-badge-weight-bold { font-weight: 700; } .qdnapro-number-indicator-badge.number-indicator-badge-primary { background-color: #40499a; color: #ffffff; } .qdnapro-number-indicator-badge.number-indicator-badge-outlined { background-color: #e6e9ff; border-color: #40499a; color: #40499a; } .qdnapro-number-indicator-badge.number-indicator-badge-subtle { background-color: #e6e9ff; color: #40499a; } .qdnapro-number-indicator-badge.number-indicator-badge-muted { background-color: rgba(107, 114, 128, 0.3019607843); color: #6b7280; } .qdnapro-number-indicator-badge.number-indicator-badge-ghost { background-color: transparent; color: #6b7280; } .qdnapro-number-indicator-badge.number-indicator-badge-ghost-purple { background-color: transparent; color: #40499a; } .qdnapro-number-indicator-badge.number-indicator-badge-alert { background-color: #dc2626; color: #ffffff; } .qdnapro-number-indicator-badge.number-indicator-badge-on-primary { background-color: #252b5e; color: #ffffff; } .qdnapro-number-indicator-badge.number-indicator-badge-green { background-color: #e2faf1; border-color: #8becc5; color: #2f5d4a; } .qdnapro-number-indicator-badge.number-indicator-badge-yellow { background-color: #fef6db; border-color: #fde594; color: #655522; } .qdnapro-number-indicator-badge.number-indicator-badge-red { background-color: #fee3e3; border-color: #fbaaaa; color: #633030; } .qdnapro-number-indicator-badge.number-indicator-badge-borderless { border-color: transparent; } .qdnapro-number-indicator-badge.number-indicator-badge-dot { padding: 0; font-size: 0; line-height: 0; border-width: 0; } .qdnapro-number-indicator-badge.number-indicator-badge-dot.number-indicator-badge-size-xs { width: 6px; height: 6px; min-width: 6px; } .qdnapro-number-indicator-badge.number-indicator-badge-dot.number-indicator-badge-size-sm { width: 8px; height: 8px; min-width: 8px; } .qdnapro-number-indicator-badge.number-indicator-badge-dot.number-indicator-badge-size-md { width: 10px; height: 10px; min-width: 10px; } .qdnapro-number-indicator-badge.number-indicator-badge-dot.number-indicator-badge-size-lg { width: 12px; height: 12px; min-width: 12px; } [data-theme=dark] .qdnapro-number-indicator-badge.number-indicator-badge-primary { background-color: #c4c7cc; color: #ffffff; } [data-theme=dark] .qdnapro-number-indicator-badge.number-indicator-badge-outlined { background-color: #0b0b0d; border-color: #565b66; color: #f0f1f2; } [data-theme=dark] .qdnapro-number-indicator-badge.number-indicator-badge-subtle { background-color: #0b0b0d; color: #f0f1f2; } [data-theme=dark] .qdnapro-number-indicator-badge.number-indicator-badge-muted { background-color: rgba(107, 114, 128, 0.2); color: #a6aab3; } [data-theme=dark] .qdnapro-number-indicator-badge.number-indicator-badge-ghost { background-color: transparent; color: #a6aab3; } [data-theme=dark] .qdnapro-number-indicator-badge.number-indicator-badge-ghost-purple { background-color: transparent; color: #f0f1f2; } [data-theme=dark] .qdnapro-number-indicator-badge.number-indicator-badge-alert { background-color: #ef4444; color: #ffffff; } [data-theme=dark] .qdnapro-number-indicator-badge.number-indicator-badge-green { background-color: rgba(66, 139, 110, 0.2); border-color: rgba(139, 236, 197, 0.4); color: #a7e8cd; } [data-theme=dark] .qdnapro-number-indicator-badge.number-indicator-badge-yellow { background-color: rgba(151, 127, 46, 0.2); border-color: rgba(253, 229, 148, 0.4); color: #f0dc95; } [data-theme=dark] .qdnapro-number-indicator-badge.number-indicator-badge-red { background-color: rgba(198, 90, 90, 0.2); border-color: rgba(251, 170, 170, 0.4); color: #f6c0c0; } [data-theme=dark] .qdnapro-number-indicator-badge.number-indicator-badge-borderless { border-color: transparent; } qdnapro-photo-gallery { display: block; width: 100%; --pg-cell-size: 170px; } qdnapro-photo-gallery * { box-sizing: border-box; } qdnapro-photo-gallery .pg-grid { display: grid; /* auto-FILL + minmax(, 1fr): the KEY is auto-FILL (not auto-fit). auto-fill KEEPS the empty phantom tracks, so a small result set does NOT over-stretch (each item stays one track ≈ ) — that was the original bug with auto-fit, which collapses empty tracks and blows the few items up. The 1fr lets the real columns absorb the leftover width so the grid fills the card edge-to-edge (no empty column pooling on the right). Net: tile size depends only on CONTAINER WIDTH (responsive), never on filters or photo count. [Jan 2026-07-06] */ grid-template-columns: repeat(auto-fill, minmax(var(--pg-cell-size, 170px), 1fr)); gap: var(--s-3, 12px); justify-content: start; } qdnapro-photo-gallery .pg-cell { position: relative; aspect-ratio: 1/1; border-radius: var(--r-3, 12px); overflow: hidden; background: var(--c-bg-subtle-hover, #f0f1f2); } qdnapro-photo-gallery .pg-cell-thumb-btn { display: block; width: 100%; height: 100%; padding: 0; margin: 0; border: none; background: transparent; cursor: pointer; } qdnapro-photo-gallery .pg-cell-thumb { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 220ms cubic-bezier(0.2, 0.6, 0.2, 1); } qdnapro-photo-gallery .pg-cell-thumb-btn:hover .pg-cell-thumb { transform: scale(1.05); } qdnapro-photo-gallery .pg-cell-thumb-btn:focus-visible { outline: 2px solid var(--c-brand-purple, #40499a); outline-offset: -2px; } qdnapro-photo-gallery .pg-cell.pg-cell-selected { box-shadow: 0 0 0 3px var(--c-brand-purple, #40499a); } qdnapro-photo-gallery .pg-grid.pg-selecting .pg-cell-thumb-btn { cursor: pointer; } qdnapro-photo-gallery .pg-grid.pg-selecting .pg-cell-thumb-btn:hover .pg-cell-thumb { transform: none; } qdnapro-photo-gallery .pg-cell-check { position: absolute; top: var(--s-2, 8px); left: var(--s-2, 8px); z-index: 3; background: rgba(255, 255, 255, 0.85); border-radius: var(--r-1, 4px); padding: 2px; } qdnapro-photo-gallery .pg-cell-flag { position: absolute; top: var(--s-2, 8px); right: var(--s-2, 8px); z-index: 3; color: var(--c-signal-red-text, #b3261e); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)); pointer-events: none; } qdnapro-photo-gallery .pg-cell:has(.pg-cell-id) .pg-cell-flag { top: 22px; } qdnapro-photo-gallery .pg-cell-id { position: absolute; top: 4px; right: 6px; z-index: 3; font-size: 9px; font-weight: 700; line-height: 1; letter-spacing: 0.2px; font-variant-numeric: tabular-nums; pointer-events: none; color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.55); } qdnapro-photo-gallery .pg-cell-id.pg-id-dark { color: rgba(17, 17, 17, 0.9); text-shadow: 0 1px 1.5px rgba(255, 255, 255, 0.6); } qdnapro-photo-gallery .pg-cell-fav { position: absolute; bottom: var(--s-2, 8px); left: var(--s-2, 8px); z-index: 3; color: #ffd54a; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45)); pointer-events: none; } qdnapro-photo-gallery .pg-cell-comments { position: absolute; bottom: var(--s-2, 8px); right: var(--s-2, 8px); z-index: 3; display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: var(--r-pill, 999px); background: rgba(0, 0, 0, 0.55); color: #ffffff; font-size: 11px; font-weight: 600; line-height: 14px; pointer-events: none; } qdnapro-photo-gallery .pg-state[hidden] { display: none; } qdnapro-photo-gallery .pg-skel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--pg-cell-size, 170px), 1fr)); gap: var(--s-3, 12px); justify-content: start; } qdnapro-photo-gallery .pg-skel-cell { aspect-ratio: 1/1; border-radius: var(--r-3, 12px); background: linear-gradient(100deg, var(--c-grey-100, #f0f1f2) 30%, var(--c-grey-50, #f7f8f9) 50%, var(--c-grey-100, #f0f1f2) 70%); background-size: 200% 100%; animation: pg-skel-shimmer 1.4s ease-in-out infinite; } @keyframes pg-skel-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } qdnapro-photo-gallery .pg-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-2, 8px); padding: var(--s-8, 40px) var(--s-4, 16px); color: var(--c-text-muted, #6b7280); text-align: center; } qdnapro-photo-gallery .pg-empty h4 { margin: 0; color: var(--c-text-heading, #1a1f4d); } qdnapro-photo-gallery .pg-empty p { margin: 0; font-size: 13px; } qdnapro-photo-gallery .pg-sentinel { height: 1px; } qdnapro-modal.pg-lightbox.modal-size-xxlarge .modal-dialog { max-width: min(1400px, 95vw); width: 95vw; height: min(900px, 100vh - 48px); } qdnapro-modal.pg-lightbox .modal-body { display: flex; flex-direction: column; overflow: hidden; min-height: 0; gap: 0; } qdnapro-modal.pg-lightbox .pg-lb-stage { position: relative; display: flex; align-items: stretch; gap: var(--s-3, 12px); flex: 1 1 auto; min-height: 0; } qdnapro-modal.pg-lightbox .pg-lb-hero { position: relative; flex: 1 1 auto; min-width: 0; min-height: 0; } qdnapro-modal.pg-lightbox .pg-lb-viewport { position: absolute; inset: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: var(--r-3, 12px); background: var(--c-bg-subtle-hover, #f4f5fb); } qdnapro-modal.pg-lightbox .pg-lb-viewport.pg-zoomed { cursor: grab; } qdnapro-modal.pg-lightbox .pg-lb-viewport.pg-panning { cursor: grabbing; } qdnapro-modal.pg-lightbox .pg-lb-img { max-width: 100%; max-height: 100%; object-fit: contain; transform-origin: center center; transition: transform 120ms ease-out; will-change: transform; user-select: none; -webkit-user-drag: none; } qdnapro-modal.pg-lightbox .pg-lb-viewport.pg-panning .pg-lb-img { transition: none; } qdnapro-modal.pg-lightbox .pg-lb-overlay { position: absolute; inset: 0; margin: auto; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; opacity: 0; pointer-events: none; transition: opacity 260ms ease; will-change: opacity; user-select: none; -webkit-user-drag: none; } qdnapro-modal.pg-lightbox .pg-lb-overlay.pg-overlay-show { opacity: 1; } @media (prefers-reduced-motion: reduce) { qdnapro-modal.pg-lightbox .pg-lb-overlay { transition: none; } } qdnapro-modal.pg-lightbox .pg-lb-hero-tools { position: absolute; top: var(--s-2, 8px); right: var(--s-2, 8px); z-index: 4; display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: var(--r-pill, 999px); background: rgba(11, 11, 13, 0.55); backdrop-filter: blur(6px); } qdnapro-modal.pg-lightbox .pg-lb-hero-tools qdnapro-icon-btn { color: #ffffff; } qdnapro-modal.pg-lightbox .pg-lb-hero-tools qdnapro-icon-btn:hover { background: rgba(255, 255, 255, 0.16); } qdnapro-modal.pg-lightbox .pg-lb-hero-tools .pg-btn-dim { opacity: 0.4; pointer-events: none; } qdnapro-modal.pg-lightbox .pg-lb-zoom-level { min-width: 44px; padding: 4px 6px; border: none; background: transparent; color: #ffffff; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; border-radius: var(--r-2, 8px); } qdnapro-modal.pg-lightbox .pg-lb-zoom-level:hover { background: rgba(255, 255, 255, 0.16); } qdnapro-modal.pg-lightbox .pg-lb-arrow { width: 40px; height: 40px; border: none; border-radius: 50%; background: var(--c-bg-subtle-purple, rgba(64, 73, 154, 0.1)); color: var(--c-brand-purple, #40499a); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; align-self: center; transition: background-color 180ms ease, transform 180ms ease; } qdnapro-modal.pg-lightbox .pg-lb-arrow:hover { background: var(--c-purple-100, rgba(64, 73, 154, 0.2)); transform: scale(1.05); } qdnapro-modal.pg-lightbox .pg-lb-meta { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--s-3, 12px); margin-top: var(--s-3, 12px); padding-top: var(--s-3, 12px); border-top: 1px solid var(--c-border-soft, #e6e9ef); font-size: 13px; color: var(--c-text-muted, #6b7280); flex-shrink: 0; } qdnapro-modal.pg-lightbox .pg-lb-meta-text { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3, 12px); flex: 1 1 auto; min-width: 0; } qdnapro-modal.pg-lightbox .pg-lb-position { font-weight: 600; color: var(--c-text-heading, #1a1f4d); white-space: nowrap; } qdnapro-modal.pg-lightbox .pg-lb-user:empty, qdnapro-modal.pg-lightbox .pg-lb-date:empty, qdnapro-modal.pg-lightbox .pg-lb-node:empty, qdnapro-modal.pg-lightbox .pg-lb-location:empty { display: none; } qdnapro-modal.pg-lightbox .pg-lb-fase2-slot { display: inline-flex; align-items: center; gap: var(--s-2, 8px); padding-left: var(--s-3, 12px); margin-left: auto; flex-shrink: 0; border-left: 1px solid var(--c-border-soft, #e6e9ef); } qdnapro-modal.pg-lightbox .pg-lb-rating { margin: 0 2px; } qdnapro-modal.pg-lightbox .pg-lb-classify-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2, 8px); margin-top: var(--s-3, 12px); flex-shrink: 0; } qdnapro-modal.pg-lightbox .pg-lb-classify-btn.qdnapro-icon-btn { background: #edeefb; color: #40499a; flex: 0 0 auto; } qdnapro-modal.pg-lightbox .pg-lb-classify-btn.qdnapro-icon-btn:hover:not(.icon-btn-disabled) { background: #e3e5f8; } qdnapro-modal.pg-lightbox .pg-lb-classify-pills { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; } qdnapro-modal.pg-lightbox .pg-lb-classify-none { color: var(--c-text-muted, #8890b8); font-size: 12.5px; } qdnapro-modal.pg-lightbox .pg-lb-actions { margin-top: var(--s-3, 12px); display: flex; justify-content: flex-end; align-items: center; gap: var(--s-2, 8px); flex-shrink: 0; } qdnapro-modal.pg-lightbox .pg-lb-download { display: inline-flex; } qdnapro-modal.pg-lightbox .pg-lb-comments-toggle { position: relative; } qdnapro-modal.pg-lightbox .pg-lb-comments-toggle[data-count]:not([data-count=""])::after { content: attr(data-count); position: absolute; top: -4px; right: -4px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: var(--r-pill, 999px); background: var(--c-brand-purple, #40499a); color: #ffffff; font-size: 10px; font-weight: 700; line-height: 15px; text-align: center; pointer-events: none; } qdnapro-modal.pg-lightbox .pg-lb-comments-panel { margin-top: var(--s-3, 12px); padding-top: var(--s-3, 12px); border-top: 1px solid var(--c-border-soft, #e6e9ef); flex-shrink: 0; } qdnapro-modal.pg-lightbox .pg-lb-comments-panel[hidden] { display: none; } qdnapro-modal.pg-lightbox .pg-lb-comments-list { display: flex; flex-direction: column; gap: var(--s-3, 12px); max-height: 220px; overflow-y: auto; margin-bottom: var(--s-3, 12px); } qdnapro-modal.pg-lightbox .pg-comments-empty, qdnapro-modal.pg-lightbox .pg-comments-loading { margin: 0; color: var(--c-text-muted, #6b7280); font-size: 13px; } qdnapro-modal.pg-lightbox .pg-comment { display: flex; align-items: flex-start; gap: var(--s-2, 8px); } qdnapro-modal.pg-lightbox .pg-comment-avatar { flex-shrink: 0; margin-top: 2px; } qdnapro-modal.pg-lightbox .pg-comment-body { flex: 1 1 auto; min-width: 0; } qdnapro-modal.pg-lightbox .pg-comment-head { display: flex; align-items: baseline; gap: var(--s-2, 8px); } qdnapro-modal.pg-lightbox .pg-comment-author { font-weight: 600; font-size: 13px; color: var(--c-text-heading, #1a1f4d); } qdnapro-modal.pg-lightbox .pg-comment-date { font-size: 11px; color: var(--c-text-muted, #6b7280); } qdnapro-modal.pg-lightbox .pg-lb-comment-delete { margin-left: auto; } qdnapro-modal.pg-lightbox .pg-comment-message { font-size: 13px; color: var(--c-text-body, #333a4d); white-space: pre-wrap; word-break: break-word; } qdnapro-modal.pg-lightbox .pg-lb-comments-compose { display: flex; align-items: flex-end; gap: var(--s-2, 8px); } qdnapro-modal.pg-lightbox .pg-lb-comment-input { flex: 1 1 auto; min-width: 0; } qdnapro-modal.pg-lightbox.pg-lb-fullscreen-on .modal-backdrop { padding: 0; background: #0b0b0d; } qdnapro-modal.pg-lightbox.pg-lb-fullscreen-on .modal-dialog { width: 100%; height: 100%; max-width: none; max-height: none; border-radius: 0; border: none; padding: 0; background: #0b0b0d; box-shadow: none; } qdnapro-modal.pg-lightbox.pg-lb-fullscreen-on .modal-window { border-radius: 0; border: none; background: #0b0b0d; box-shadow: none; } qdnapro-modal.pg-lightbox.pg-lb-fullscreen-on .pg-lb-viewport { background: #0b0b0d; } qdnapro-modal.pg-lightbox.pg-lb-fullscreen-on .modal-title { color: #f0f1f2; } qdnapro-modal.pg-lightbox.pg-lb-fullscreen-on .pg-lb-meta, qdnapro-modal.pg-lightbox.pg-lb-fullscreen-on .pg-lb-position { color: #f0f1f2; } qdnapro-modal.pg-lightbox.pg-lb-fullscreen-on .pg-lb-meta, qdnapro-modal.pg-lightbox.pg-lb-fullscreen-on .pg-lb-classify-row, qdnapro-modal.pg-lightbox.pg-lb-fullscreen-on .pg-lb-comments-panel { border-top-color: rgba(255, 255, 255, 0.14); } qdnapro-modal.pg-lightbox.pg-lb-fullscreen-on .pg-lb-fase2-slot { border-left-color: rgba(255, 255, 255, 0.14); } qdnapro-modal.pg-lightbox.pg-lb-fullscreen-on .pg-lb-actions qdnapro-icon-btn { color: #ffffff; } qdnapro-modal.pg-lightbox.pg-lb-fullscreen-on .pg-lb-actions qdnapro-icon-btn:hover { background: rgba(255, 255, 255, 0.16); } qdnapro-modal.pg-classify-picker .pg-classify-list { display: flex; flex-direction: column; max-height: 44vh; overflow-y: auto; } qdnapro-modal.pg-classify-picker .pg-classify-check-row { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-bottom: 1px solid #f3f4fa; cursor: pointer; } qdnapro-modal.pg-classify-picker .pg-classify-check-row:last-child { border-bottom: none; } qdnapro-modal.pg-classify-picker .pg-classify-check-row input[type=checkbox] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--c-brand-purple, #40499a); } qdnapro-modal.pg-classify-picker .pg-classify-empty { margin: 0; color: var(--c-text-muted, #6b7280); font-size: 13px; } /* ============================================================ qdnapro-photo-tile compiled CSS Extracted from qdna-modal-preview.html (Kim 2026-05-29) so the bundle ships photo-tile styling. Keep in lockstep with the inline copy in qdna-photo-tile-preview.html / qdna-modal-preview.html. ============================================================ */ .qdnapro-photo-tile { --c-tile-radius: 8px; --c-tile-ring-radius: 12px; --c-tile-ring: #4652f3; --c-tile-overlay: rgba(107, 114, 128, 0.30); --c-focus-ring: #40499a; --c-focus-glow: rgba(70, 82, 243, 0.25); position: relative; display: inline-block; box-sizing: border-box; border: 0; padding: 0; margin: 0; background: transparent; border-radius: var(--c-tile-radius); overflow: visible; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; transition: transform 120ms cubic-bezier(0.4, 0, 0.2, 1); } .qdnapro-photo-tile .photo-tile-image { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--c-tile-radius); -webkit-user-drag: none; pointer-events: none; /* Same desaturate treatment as .project-card-photo so tiles match the rest of the UI's photo aesthetic (Kim 2026-05-29). */ filter: saturate(0.45) brightness(0.9); } /* Dark gradient overlay along the bottom of the tile — matches the `.project-card-photo::after` rule so tile + card share one visual language. Painted as an empty sibling so it doesn't conflict with the tile's own ::before (hover overlay) and ::after (ring). (Kim 2026-05-29) */ .qdnapro-photo-tile .photo-tile-gradient { position: absolute; inset: 0; border-radius: var(--c-tile-radius); background: linear-gradient(to bottom, rgba(22, 25, 75, 0) 0%, rgba(22, 25, 75, 0.25) 50%, rgba(22, 25, 75, 0.78) 100%); pointer-events: none; } .qdnapro-photo-tile::before { content: ""; position: absolute; inset: 0; border-radius: var(--c-tile-radius); background: var(--c-tile-overlay); opacity: 0; pointer-events: none; transition: opacity 140ms ease; } .qdnapro-photo-tile:hover:not(.photo-tile-disabled)::before { opacity: 1; } .qdnapro-photo-tile::after { content: ""; position: absolute; inset: -3px; border: 1px solid transparent; border-radius: var(--c-tile-ring-radius); pointer-events: none; transition: border-color 160ms ease; } .qdnapro-photo-tile.photo-tile-selected::after { border-color: var(--c-tile-ring); } /* Selected tiles also get the focus-glow box-shadow so the selection is visually unmistakable — without the glow the 1px ring is easy to miss against busy photos. (Kim 2026-05-29) */ .qdnapro-photo-tile.photo-tile-selected { box-shadow: 0 0 0 2px var(--c-focus-ring), 0 0 0 6px var(--c-focus-glow); } .qdnapro-photo-tile:active:not(.photo-tile-disabled) { transform: scale(0.97); } .qdnapro-photo-tile:active:not(.photo-tile-disabled)::before { opacity: 1; background: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)), var(--c-tile-overlay); } .qdnapro-photo-tile:focus { outline: none; } .qdnapro-photo-tile:focus-visible, .qdnapro-photo-tile.force-focus { outline: none; box-shadow: 0 0 0 2px var(--c-focus-ring), 0 0 0 6px var(--c-focus-glow); } .qdnapro-photo-tile.photo-tile-disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } .qdnapro-photo-tile.photo-tile-small { width: 87px; height: 65px; } [data-theme=dark] .qdnapro-photo-tile { --c-tile-ring: #a5acff; --c-tile-overlay: rgba(0, 0, 0, 0.40); --c-focus-ring: #a5acff; --c-focus-glow: rgba(70, 82, 243, 0.40); } .qdnapro-picker-tile { display: flex; flex-direction: column; align-items: stretch; text-align: left; padding: 0; border: 1px solid #e6e9ef; border-radius: 12px; background: #ffffff; cursor: pointer; font-family: inherit; color: #0b0b0d; overflow: hidden; transition: border-color 120ms ease, box-shadow 200ms ease, transform 200ms cubic-bezier(0.4, 0, 0.2, 1), background-color 120ms ease; } .qdnapro-picker-tile:hover { border-color: #40499a; box-shadow: 0 1px 2px rgba(20, 25, 80, 0.04), 0 8px 18px rgba(20, 25, 80, 0.08); transform: translateY(-2px); } .qdnapro-picker-tile:focus { outline: none; } .qdnapro-picker-tile:focus-visible { border-color: #40499a; box-shadow: 0 0 0 4px rgba(70, 82, 243, 0.25); } .qdnapro-picker-tile.picker-tile-selected { border-color: #40499a; background: #f3f5ff; box-shadow: 0 0 0 3px rgba(70, 82, 243, 0.18), 0 4px 14px rgba(20, 25, 80, 0.1); } .qdnapro-picker-tile.picker-tile-selected .picker-tile-title { color: #40499a; } .qdnapro-picker-tile.picker-tile-disabled { opacity: 0.5; pointer-events: none; cursor: not-allowed; } .qdnapro-picker-tile .picker-tile-thumb { height: 110px; background: linear-gradient(135deg, #f5f6fb 0%, #ebedfb 100%); display: flex; align-items: stretch; justify-content: stretch; padding: 12px; position: relative; overflow: hidden; } .qdnapro-picker-tile .picker-tile-body { padding: 12px 14px 14px; } .qdnapro-picker-tile .picker-tile-title { font-size: 14px; line-height: 20px; font-weight: 600; color: #1a1f4d; margin: 0 0 2px; } .qdnapro-picker-tile .picker-tile-desc { font-size: 12px; line-height: 18px; color: #6b7280; margin: 0; } .qdnapro-picker-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } @media (max-width: 720px) { .qdnapro-picker-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .qdnapro-picker-grid { grid-template-columns: 1fr; } } [data-theme=dark] .qdnapro-picker-tile { background: #2a2d36; border-color: rgba(255, 255, 255, 0.08); color: #e1e3e6; } [data-theme=dark] .qdnapro-picker-tile:hover { border-color: #a5acff; } [data-theme=dark] .qdnapro-picker-tile.picker-tile-selected { background: rgba(165, 172, 255, 0.1); border-color: #a5acff; } [data-theme=dark] .qdnapro-picker-tile.picker-tile-selected .picker-tile-title { color: #a5acff; } [data-theme=dark] .qdnapro-picker-tile .picker-tile-thumb { background: linear-gradient(135deg, #2e323d 0%, #2a2d36 100%); } [data-theme=dark] .qdnapro-picker-tile .picker-tile-title { color: #f0f1f2; } [data-theme=dark] .qdnapro-picker-tile .picker-tile-desc { color: #a6aab3; } qdnapro-picker-row { display: flex; align-items: center; gap: 8px; position: relative; box-sizing: border-box; overflow: hidden; padding: 6px 8px 6px 10px; border-radius: 8px; border: 1px solid transparent; background: transparent; cursor: pointer; user-select: none; outline: none; min-height: 40px; transition: background 150ms ease, border-color 150ms ease; --pr-focus-ring: #40499a; --pr-focus-glow: rgba(70, 82, 243, 0.25); } qdnapro-picker-row *, qdnapro-picker-row *::before, qdnapro-picker-row *::after { box-sizing: border-box; } qdnapro-picker-row.pr-has-meta { min-height: 48px; } qdnapro-picker-row:hover, qdnapro-picker-row.force-hover { background: #f5f6f8; } qdnapro-picker-row:focus-within { background: #f5f6f8; } qdnapro-picker-row:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--pr-focus-ring), 0 0 0 5px var(--pr-focus-glow); } qdnapro-picker-row[draggable=true] { cursor: grab; } qdnapro-picker-row.is-dragging { opacity: 0.5; cursor: grabbing; } .pr-accent-bar { position: absolute; left: 4px; top: 50%; transform: translateY(-50%); width: 4px; height: 24px; background: #4652f3; border-radius: 2px; opacity: 0; transition: opacity 150ms ease; pointer-events: none; z-index: 1; } qdnapro-picker-row:hover .pr-accent-bar, qdnapro-picker-row:focus-within .pr-accent-bar, qdnapro-picker-row.force-hover .pr-accent-bar { opacity: 1; } .pr-leading { position: relative; width: 28px; height: 28px; flex: none; } .pr-visual { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 1; transition: opacity 150ms ease; } .pr-visual qdnapro-avatar { flex: none; } .pr-options-btn { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 150ms ease; } qdnapro-picker-row:hover .pr-visual, qdnapro-picker-row:focus-within .pr-visual, qdnapro-picker-row.force-hover .pr-visual { opacity: 0; } qdnapro-picker-row:hover .pr-options-btn, qdnapro-picker-row:focus-within .pr-options-btn, qdnapro-picker-row.force-hover .pr-options-btn { opacity: 1; pointer-events: auto; } .pr-tile { width: 28px; height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; background: var(--pr-tile-bg, #eef0f2); } .pr-tile-color-grey { --pr-tile-bg: #eef0f2; } .pr-tile-color-red { --pr-tile-bg: #fde7e7; } .pr-tile-color-yellow { --pr-tile-bg: #fdf3d6; } .pr-tile-color-green { --pr-tile-bg: #e2faf1; } .pr-tile-color-blue { --pr-tile-bg: #e6eff9; } .pr-tile-color-bright-blue { --pr-tile-bg: #d6e0f9; } .pr-tile-color-pink { --pr-tile-bg: #f6e1e8; } .pr-tile-color-purple { --pr-tile-bg: #ebe9fb; } [data-theme=dark] .pr-tile-color-grey { --pr-tile-bg: #40444d; } [data-theme=dark] .pr-tile-color-red { --pr-tile-bg: #5a2b2b; } [data-theme=dark] .pr-tile-color-yellow { --pr-tile-bg: #5a4d1f; } [data-theme=dark] .pr-tile-color-green { --pr-tile-bg: #2a5544; } [data-theme=dark] .pr-tile-color-blue { --pr-tile-bg: #2e3e54; } [data-theme=dark] .pr-tile-color-bright-blue { --pr-tile-bg: #3a4a8a; } [data-theme=dark] .pr-tile-color-pink { --pr-tile-bg: #4e2a36; } [data-theme=dark] .pr-tile-color-purple { --pr-tile-bg: #3a3555; } .pr-body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 1px; } .pr-label { font-size: 13.5px; font-weight: 500; color: #22203a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; } .pr-meta { font-size: 11.5px; color: #8b899c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; } @media (prefers-reduced-motion: reduce) { .pr-accent-bar, .pr-visual, .pr-options-btn, qdnapro-picker-row { transition: none !important; } } [data-theme=dark] qdnapro-picker-row { --pr-focus-ring: #a5acff; --pr-focus-glow: rgba(70, 82, 243, 0.40); } [data-theme=dark] qdnapro-picker-row:hover, [data-theme=dark] qdnapro-picker-row:focus-within, [data-theme=dark] qdnapro-picker-row.force-hover { background: rgba(255, 255, 255, 0.06); } [data-theme=dark] .pr-label { color: #f0f1f2; } [data-theme=dark] .pr-meta { color: #a0a4b8; } /* qdnapro-placeholder-image — host + img styling. Mirrors the qdnapro-illustration approach: width-driven with auto height, plus an optional cover mode and a soft missing-asset fallback. */ .qdnapro-placeholder-image { display: inline-block; line-height: 0; border-radius: 12px; overflow: hidden; background: #f0f1f6; } .qdnapro-placeholder-image .placeholder-image-img { display: block; width: 100%; height: auto; } /* Cover mode: consumer sets width + height on the host, image fills it. */ .qdnapro-placeholder-image.placeholder-image-cover { line-height: 0; } .qdnapro-placeholder-image.placeholder-image-cover .placeholder-image-img { width: 100%; height: 100%; object-fit: cover; } /* Missing asset: soft dashed placeholder instead of a broken-image icon. */ .qdnapro-placeholder-image.placeholder-image-missing { position: relative; min-height: 80px; border: 1px dashed #c4c7cc; background: repeating-linear-gradient(45deg, #f6f7fb, #f6f7fb 8px, #eef0f6 8px, #eef0f6 16px); } .qdnapro-progress { display: block; box-sizing: border-box; width: 100%; font-family: var(--theme-font-family, "Inter", sans-serif); --pg-fill: var(--c-success-bright); --pg-track: var(--c-black-12); } .qdnapro-progress.progress-tone-purple { --pg-fill: var(--c-brand-purple); } .qdnapro-progress.progress-tone-neutral { --pg-fill: var(--c-grey-500); } .qdnapro-progress.progress-tone-highlight { --pg-fill: var(--c-purple-highlight); } .qdnapro-progress .progress-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; } .qdnapro-progress .progress-label { font-size: 13px; color: var(--c-text-muted); } .qdnapro-progress .progress-pct { font-size: 13px; font-weight: 600; color: var(--c-text-body); } .qdnapro-progress .progress-track { height: 6px; background: var(--pg-track); border-radius: var(--r-pill); overflow: hidden; } .qdnapro-progress .progress-fill { height: 100%; background: var(--pg-fill); border-radius: var(--r-pill); transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); position: relative; overflow: hidden; } .qdnapro-progress .progress-fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.38) 50%, transparent 100%); animation: progress-shimmer 2.4s ease-in-out infinite; } @keyframes progress-shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } @media (prefers-reduced-motion: reduce) { .qdnapro-progress .progress-fill { transition: none; } .qdnapro-progress .progress-fill::after { animation: none; } } .qdnapro-progress.progress-indeterminate .progress-fill { width: 40% !important; transition: none; animation: progress-indeterminate-slide 1.2s ease-in-out infinite; } @keyframes progress-indeterminate-slide { 0% { transform: translateX(-120%); } 100% { transform: translateX(320%); } } @media (prefers-reduced-motion: reduce) { .qdnapro-progress.progress-indeterminate .progress-fill { animation: none; transform: none; width: 50% !important; opacity: 0.5; } .qdnapro-progress.progress-indeterminate .progress-fill::after { animation: none; } } .qdnapro-progress.progress-variant-highlight { padding: 12px 14px; border-radius: var(--r-card); background: var(--c-black-06); } .qdnapro-progress.progress-variant-highlight.progress-tone-success { background: var(--c-signal-green-bg); } .qdnapro-progress.progress-variant-highlight.progress-tone-purple { background: var(--c-bg-secondary-purple); } .qdnapro-progress.progress-variant-highlight.progress-tone-neutral { background: var(--c-black-06); } .qdnapro-progress.progress-variant-highlight.progress-tone-highlight { background: var(--c-action-08); } .qdnapro-progress.progress-variant-highlight .progress-track { height: 8px; } .qdnapro-progress.progress-variant-highlight .progress-label { font-weight: 600; color: var(--c-text-body); } .qdnapro-progress.progress-variant-highlight .progress-pct { font-size: 15px; } .qdnapro-project-card { --c-card-bg: #ffffff; --c-card-border: #e6e9ef; --c-card-divider: #c4c7cc; --c-text-body: #0b0b0d; --c-text-secondary: #6b7280; --c-photo-fallback: linear-gradient(135deg, #d6dafa 0%, #f0e7fa 100%); /* Density scale knob: 1 = default; [density=compact] sets 0.8 so the whole absolute-positioned layout (sizes, positions, fonts) scales uniformly to the 80% look WITHOUT the zoom property. [Kim 2026-06-03] */ --pc-scale: 1; display: block; box-sizing: border-box; width: 100%; background: var(--c-card-bg); border: calc(1px * var(--pc-scale)) solid var(--c-card-border); border-radius: calc(12px * var(--pc-scale)); overflow: hidden; box-shadow: 0 calc(1px * var(--pc-scale)) calc(2px * var(--pc-scale)) rgba(20, 25, 80, 0.04), 0 calc(6px * var(--pc-scale)) calc(16px * var(--pc-scale)) rgba(20, 25, 80, 0.05); color: var(--c-text-body); font-family: "Inter", system-ui, sans-serif; transition: transform 140ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 140ms cubic-bezier(0.4, 0, 0.2, 1); } .qdnapro-project-card[data-mode=animated]:active { transform: scale(0.99); box-shadow: 0 calc(1px * var(--pc-scale)) calc(1px * var(--pc-scale)) rgba(20, 25, 80, 0.04), 0 calc(2px * var(--pc-scale)) calc(6px * var(--pc-scale)) rgba(20, 25, 80, 0.04); } .qdnapro-project-card[data-mode=animated]:active:has(.project-card-favorite:active, .project-card-menu-trigger:active, .project-card-action:active) { transform: none; box-shadow: 0 calc(1px * var(--pc-scale)) calc(2px * var(--pc-scale)) rgba(20, 25, 80, 0.04), 0 calc(6px * var(--pc-scale)) calc(16px * var(--pc-scale)) rgba(20, 25, 80, 0.05); } .qdnapro-project-card[data-mode=animated]:focus-visible { outline: none; box-shadow: 0 calc(1px * var(--pc-scale)) calc(2px * var(--pc-scale)) rgba(20, 25, 80, 0.04), 0 calc(6px * var(--pc-scale)) calc(16px * var(--pc-scale)) rgba(20, 25, 80, 0.05), 0 0 0 calc(4px * var(--pc-scale)) rgba(70, 82, 243, 0.25); } .qdnapro-project-card .project-card-frame { position: relative; min-height: calc(208px * var(--pc-scale)); } .qdnapro-project-card .project-card-upper-clip { position: absolute; top: 0; left: 0; right: 0; bottom: calc(50px * var(--pc-scale)); overflow: hidden; } .qdnapro-project-card .project-card-photo { position: absolute; top: 0; left: 0; right: 0; height: calc(124px * var(--pc-scale)); background-size: cover; background-position: center; background-color: #d6dafa; z-index: 2; filter: saturate(0.45) brightness(0.9); transition: transform 600ms cubic-bezier(0.34, 1.05, 0.5, 1); } .qdnapro-project-card .project-card-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(22, 25, 75, 0) 0%, rgba(22, 25, 75, 0.25) 50%, rgba(22, 25, 75, 0.78) 100%); pointer-events: none; } .qdnapro-project-card .project-card-photo-placeholder { background-image: var(--c-photo-fallback); } .qdnapro-project-card .project-card-header { position: absolute; top: 0; left: 0; right: 0; height: calc(44px * var(--pc-scale)); padding: calc(8px * var(--pc-scale)) calc(44px * var(--pc-scale)) 0 calc(8px * var(--pc-scale)); display: flex; align-items: flex-start; justify-content: space-between; z-index: 1; } .qdnapro-project-card .project-card-logo { border-radius: calc(4px * var(--pc-scale)) !important; } .qdnapro-project-card .project-card-header-actions { display: inline-flex; align-items: center; gap: calc(4px * var(--pc-scale)); } .qdnapro-project-card .project-card-name { position: absolute; top: calc(132px * var(--pc-scale)); left: 0; right: calc(56px * var(--pc-scale)); margin: 0; padding: 0 calc(8px * var(--pc-scale)); font-size: calc(16px * var(--pc-scale)); line-height: calc(24px * var(--pc-scale)); font-weight: 600; color: var(--c-text-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; z-index: 3; will-change: transform; transition: transform 600ms cubic-bezier(0.34, 1.05, 0.5, 1), right 600ms cubic-bezier(0.34, 1.05, 0.5, 1); } .qdnapro-project-card .project-card-org { position: absolute; top: calc(160px * var(--pc-scale)); left: 0; right: 0; margin: 0; padding: 0 calc(8px * var(--pc-scale)); font-size: calc(12px * var(--pc-scale)); line-height: calc(20px * var(--pc-scale)); font-weight: 400; color: var(--c-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; z-index: 1; will-change: transform; transition: transform 600ms cubic-bezier(0.34, 1.05, 0.5, 1); } .qdnapro-project-card .project-card-info { position: absolute; top: calc(184px * var(--pc-scale)); left: 0; right: 0; height: calc(28px * var(--pc-scale)); padding: 0 calc(8px * var(--pc-scale)); display: flex; align-items: center; justify-content: space-between; z-index: 1; will-change: transform; transition: transform 600ms cubic-bezier(0.34, 1.05, 0.5, 1); } .qdnapro-project-card .project-card-team { display: inline-flex; align-items: center; } .qdnapro-project-card .project-card-date { display: inline-flex; align-items: center; gap: calc(4px * var(--pc-scale)); color: var(--c-text-secondary); font-size: calc(10px * var(--pc-scale)); line-height: calc(20px * var(--pc-scale)); } .qdnapro-project-card .project-card-date qdnapro-icon { color: currentColor; } .qdnapro-project-card .project-card-top-actions { position: absolute; top: calc(8px * var(--pc-scale)); right: calc(8px * var(--pc-scale)); z-index: 4; display: inline-flex; align-items: center; } .qdnapro-project-card .project-card-favorite { flex: 0 0 auto; width: calc(32px * var(--pc-scale)); height: calc(32px * var(--pc-scale)); background-color: rgba(255, 255, 255, 0.55); backdrop-filter: blur(calc(8px * var(--pc-scale))) saturate(1.5); -webkit-backdrop-filter: blur(calc(8px * var(--pc-scale))) saturate(1.5); box-shadow: 0 calc(1px * var(--pc-scale)) calc(3px * var(--pc-scale)) rgba(0, 0, 0, 0.08), 0 0 0 calc(1px * var(--pc-scale)) rgba(0, 0, 0, 0.04); transition: opacity 200ms ease, background-color 160ms ease; } .qdnapro-project-card .project-card-favorite:not(.favorite-button-favorited) { opacity: 0; pointer-events: none; } .qdnapro-project-card:hover .project-card-favorite:not(.favorite-button-favorited), .qdnapro-project-card:focus-within .project-card-favorite:not(.favorite-button-favorited) { opacity: 1; pointer-events: auto; } .qdnapro-project-card .project-card-favorite:hover { background-color: rgba(255, 255, 255, 0.75); } .qdnapro-project-card .project-card-menu-trigger { flex: 0 0 auto; width: 0 !important; min-width: 0 !important; max-width: 0; height: calc(32px * var(--pc-scale)) !important; min-height: calc(32px * var(--pc-scale)) !important; max-height: calc(32px * var(--pc-scale)) !important; opacity: 0; overflow: hidden; pointer-events: none; margin-left: 0; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; transition: max-width 200ms cubic-bezier(0.4, 0, 0.2, 1), width 200ms cubic-bezier(0.4, 0, 0.2, 1), min-width 200ms cubic-bezier(0.4, 0, 0.2, 1), margin-left 200ms cubic-bezier(0.4, 0, 0.2, 1), opacity 150ms ease, background 120ms ease; } .qdnapro-project-card:hover .project-card-menu-trigger, .qdnapro-project-card:focus-within .project-card-menu-trigger { width: calc(32px * var(--pc-scale)) !important; min-width: calc(32px * var(--pc-scale)) !important; max-width: calc(32px * var(--pc-scale)); opacity: 1; pointer-events: auto; margin-left: calc(8px * var(--pc-scale)); background: rgba(255, 255, 255, 0.55) !important; backdrop-filter: blur(calc(8px * var(--pc-scale))) saturate(1.5); -webkit-backdrop-filter: blur(calc(8px * var(--pc-scale))) saturate(1.5); box-shadow: 0 calc(1px * var(--pc-scale)) calc(3px * var(--pc-scale)) rgba(0, 0, 0, 0.08), 0 0 0 calc(1px * var(--pc-scale)) rgba(0, 0, 0, 0.04); } .qdnapro-project-card:hover .project-card-menu-trigger:hover, .qdnapro-project-card:focus-within .project-card-menu-trigger:hover { background: rgba(255, 255, 255, 0.75) !important; } .qdnapro-project-card .project-card-divider { position: absolute; bottom: calc(50px * var(--pc-scale)); left: 0; right: 0; height: calc(1px * var(--pc-scale)); background: var(--c-card-divider); z-index: 4; } /* Checklist action — hidden until the backend feature lands. (Kim 2026-05-30 — placeholder, re-enable when the page exists.) */ .qdnapro-project-card .project-card-action-list { display: none !important; } /* ============================================================ Archived variant — set via [archived] attribute on the host. Photo is heavily desaturated, pin-button is hidden, a "Gearchiveerd" chip sits top-left, and a diagonal GEARCHIVEERD watermark crosses the photo. (Kim 2026-05-29) ============================================================ */ .qdnapro-project-card[archived] { opacity: 0.85; } .qdnapro-project-card[archived] .project-card-photo { filter: saturate(0.15) brightness(0.85); } .qdnapro-project-card[archived] .project-card-favorite { display: none !important; } .qdnapro-project-card .project-card-archived-chip { position: absolute; top: calc(8px * var(--pc-scale)); left: calc(8px * var(--pc-scale)); z-index: 4; display: inline-flex; align-items: center; gap: calc(4px * var(--pc-scale)); padding: calc(4px * var(--pc-scale)) calc(9px * var(--pc-scale)) calc(4px * var(--pc-scale)) calc(7px * var(--pc-scale)); background: rgba(40, 42, 52, 0.72); border: calc(1px * var(--pc-scale)) solid rgba(255, 255, 255, 0.2); border-radius: calc(999px * var(--pc-scale)); backdrop-filter: blur(calc(8px * var(--pc-scale))) saturate(1.2); -webkit-backdrop-filter: blur(calc(8px * var(--pc-scale))) saturate(1.2); color: #fff; font-size: calc(11px * var(--pc-scale)); font-weight: 500; line-height: calc(14px * var(--pc-scale)); letter-spacing: calc(0.2px * var(--pc-scale)); pointer-events: none; } .qdnapro-project-card .project-card-archived-chip qdnapro-icon { color: #fff; flex: 0 0 auto; } .qdnapro-project-card .project-card-watermark { position: absolute; top: 50%; left: 50%; z-index: 3; transform: translate(-50%, -50%) rotate(-18deg); pointer-events: none; white-space: nowrap; font-size: calc(22px * var(--pc-scale)); font-weight: 800; letter-spacing: calc(4px * var(--pc-scale)); color: rgba(255, 255, 255, 0.55); text-shadow: 0 calc(2px * var(--pc-scale)) calc(6px * var(--pc-scale)) rgba(0, 0, 0, 0.45), 0 0 calc(1px * var(--pc-scale)) rgba(0, 0, 0, 0.6); text-transform: uppercase; } /* Slot="menu" qdnapro-menu — sits as a floating popover anchored to the 3-dots trigger. Hidden by default; the menu's `open` attribute (toggled by qdnapro-project-card._toggleMenu) reveals it. (Kim 2026-05-29) */ .qdnapro-project-card .project-card-menu { position: absolute; top: calc(48px * var(--pc-scale)); right: calc(8px * var(--pc-scale)); z-index: 6; display: none; } .qdnapro-project-card .project-card-menu[open] { display: inline-flex; } .qdnapro-project-card .project-card-actions { position: absolute; bottom: 0; left: 0; right: 0; height: calc(50px * var(--pc-scale)); padding: calc(4px * var(--pc-scale)) calc(8px * var(--pc-scale)) calc(8px * var(--pc-scale)); display: flex; align-items: center; justify-content: space-between; z-index: 4; background: var(--c-card-bg); } .qdnapro-project-card .project-card-actions-left { display: inline-flex; align-items: center; gap: calc(8px * var(--pc-scale)); } .qdnapro-project-card .project-card-action-date { display: inline-flex; align-items: center; gap: calc(4px * var(--pc-scale)); color: var(--c-text-secondary); font-size: calc(12px * var(--pc-scale)); line-height: calc(20px * var(--pc-scale)); white-space: nowrap; } .qdnapro-project-card .project-card-action-date qdnapro-icon { color: currentColor; } .qdnapro-project-card .project-card-action-bell { position: relative; } /* Non-interactive action indicators (Kim 2026-06-02): the lightbulb (task count) + bell have no behaviour yet, so they read as static info — no hover highlight, no hand-cursor — until interaction is built. Paired with tabindex -1 + a click guard in JS so they are neither focusable nor clickable. !important beats the qdnapro-button :hover/cursor rules. */ .qdnapro-project-card .project-card-action-static { cursor: default !important; } .qdnapro-project-card .project-card-action-static:hover, .qdnapro-project-card .project-card-action-static:active { background: transparent !important; } .qdnapro-project-card .project-card-badge { position: absolute; top: calc(8px * var(--pc-scale)); right: calc(6px * var(--pc-scale)); width: calc(8px * var(--pc-scale)); height: calc(8px * var(--pc-scale)); border-radius: 50%; background: #ff3a30; pointer-events: none; } .qdnapro-project-card[data-mode=animated][data-animation=compact] { cursor: pointer; } .qdnapro-project-card[data-mode=animated][data-animation=compact] .project-card-header { display: none; } .qdnapro-project-card[data-mode=animated][data-animation=compact] .project-card-photo { transform: translateY(0) scale(1); transition: transform 600ms cubic-bezier(0.34, 1.05, 0.5, 1) 300ms; } .qdnapro-project-card[data-mode=animated][data-animation=compact] .project-card-name { transition: transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1), right 420ms cubic-bezier(0.34, 1.05, 0.5, 1); transition-delay: 120ms; } .qdnapro-project-card[data-mode=animated][data-animation=compact] .project-card-org { transition: transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1); transition-delay: 60ms; } .qdnapro-project-card[data-mode=animated][data-animation=compact] .project-card-info { transition: transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1); transition-delay: 0ms; } .qdnapro-project-card[data-mode=animated][data-animation=compact]:hover .project-card-photo, .qdnapro-project-card[data-mode=animated][data-animation=compact]:focus-within .project-card-photo { transform: translateY(calc(-78px * var(--pc-scale))) scale(1.15); transition-delay: 200ms; pointer-events: none; } .qdnapro-project-card[data-mode=animated][data-animation=compact]:hover .project-card-name, .qdnapro-project-card[data-mode=animated][data-animation=compact]:focus-within .project-card-name { transform: translateY(calc(-62px * var(--pc-scale))); right: 0; transition-delay: 400ms; } .qdnapro-project-card[data-mode=animated][data-animation=compact]:hover .project-card-org, .qdnapro-project-card[data-mode=animated][data-animation=compact]:focus-within .project-card-org { transform: translateY(calc(-62px * var(--pc-scale))); transition-delay: 460ms; } .qdnapro-project-card[data-mode=animated][data-animation=compact]:hover .project-card-info, .qdnapro-project-card[data-mode=animated][data-animation=compact]:focus-within .project-card-info { transform: translateY(calc(-62px * var(--pc-scale))); transition-delay: 520ms; } .qdnapro-project-card[data-mode=static-front] .project-card-name { transition: none; } .qdnapro-project-card[data-mode=static-back] .project-card-name { transform: translateY(calc(-88px * var(--pc-scale))); transition: none; right: 0; } .qdnapro-project-card[data-mode=static-back] .project-card-org, .qdnapro-project-card[data-mode=static-back] .project-card-info { transform: translateY(calc(-88px * var(--pc-scale))); transition: none; } /* ============================================================ ANIMATION VARIANT: overlay (experiment, Kim 2026-05-29) ============================================================ Rust state: photo extends down to the divider position (calc(158px * var(--pc-scale)) instead of 124). Title sits in its idle position but white on the gradient. Keyline hidden. Hover: photo subtle zoom 1.06 (no translate). Title, org and date staggered translate up onto the photo. All three get a glass-pill background. Avatars stay free (no glass). */ .qdnapro-project-card[data-mode=animated][data-animation=overlay] .project-card-header, .qdnapro-project-card[data-mode=animated][data-animation=overlay] .project-card-divider { display: none; } /* Photo: taller (down to keyline) + subtle zoom on hover. */ .qdnapro-project-card[data-mode=animated][data-animation=overlay] .project-card-photo { height: calc(158px * var(--pc-scale)); transform: scale(1); transition: transform 600ms cubic-bezier(0.34, 1.05, 0.5, 1); } .qdnapro-project-card[data-mode=animated][data-animation=overlay]:hover .project-card-photo, .qdnapro-project-card[data-mode=animated][data-animation=overlay]:focus-within .project-card-photo { transform: scale(1.06); } /* Title: white in idle (already on photo gradient). On hover it also becomes a glass-pill. */ .qdnapro-project-card[data-mode=animated][data-animation=overlay] .project-card-name { color: #fff; text-shadow: 0 calc(1px * var(--pc-scale)) calc(3px * var(--pc-scale)) rgba(0, 0, 0, 0.5); z-index: 3; transition: transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1), right 420ms cubic-bezier(0.34, 1.05, 0.5, 1); transition-delay: 120ms; } .qdnapro-project-card[data-mode=animated][data-animation=overlay] .project-card-org { color: #fff; text-shadow: 0 calc(1px * var(--pc-scale)) calc(3px * var(--pc-scale)) rgba(0, 0, 0, 0.5); z-index: 3; transition: transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1); transition-delay: 60ms; } .qdnapro-project-card[data-mode=animated][data-animation=overlay] .project-card-info { z-index: 3; transition: transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1); transition-delay: 0ms; } .qdnapro-project-card[data-mode=animated][data-animation=overlay] .project-card-date { color: #fff; text-shadow: 0 calc(1px * var(--pc-scale)) calc(3px * var(--pc-scale)) rgba(0, 0, 0, 0.5); } .qdnapro-project-card[data-mode=animated][data-animation=overlay] .project-card-date qdnapro-icon { color: #fff; } /* HOVER: stagger up + glass-pill backgrounds appear. */ .qdnapro-project-card[data-mode=animated][data-animation=overlay]:hover .project-card-name, .qdnapro-project-card[data-mode=animated][data-animation=overlay]:focus-within .project-card-name { transform: translateY(calc(-62px * var(--pc-scale))); transition-delay: 400ms; } .qdnapro-project-card[data-mode=animated][data-animation=overlay]:hover .project-card-org, .qdnapro-project-card[data-mode=animated][data-animation=overlay]:focus-within .project-card-org { transform: translateY(calc(-62px * var(--pc-scale))); transition-delay: 460ms; } .qdnapro-project-card[data-mode=animated][data-animation=overlay]:hover .project-card-info, .qdnapro-project-card[data-mode=animated][data-animation=overlay]:focus-within .project-card-info { transform: translateY(calc(-62px * var(--pc-scale))); transition-delay: 520ms; } @keyframes pc-compact-photo-in { 0% { transform: translateY(0) scale(1); } 25% { transform: translateY(0) scale(1.15); } 100% { transform: translateY(-78px) scale(1.15); } } @media (prefers-reduced-motion: reduce) { .qdnapro-project-card[data-mode=animated][data-animation=compact] .project-card-photo, .qdnapro-project-card[data-mode=animated][data-animation=compact] .project-card-name, .qdnapro-project-card[data-mode=animated][data-animation=compact] .project-card-org, .qdnapro-project-card[data-mode=animated][data-animation=compact] .project-card-info { transition: none; animation: none; } .qdnapro-project-card[data-mode=animated][data-animation=compact]:hover .project-card-photo, .qdnapro-project-card[data-mode=animated][data-animation=compact]:focus-within .project-card-photo { transform: translateY(calc(-124px * var(--pc-scale))); animation: none; } .qdnapro-project-card[data-mode=animated][data-animation=compact]:hover .project-card-name, .qdnapro-project-card[data-mode=animated][data-animation=compact]:focus-within .project-card-name { transform: translateY(calc(-88px * var(--pc-scale))); } .qdnapro-project-card[data-mode=animated][data-animation=compact]:hover .project-card-org, .qdnapro-project-card[data-mode=animated][data-animation=compact]:focus-within .project-card-org, .qdnapro-project-card[data-mode=animated][data-animation=compact]:hover .project-card-info, .qdnapro-project-card[data-mode=animated][data-animation=compact]:focus-within .project-card-info { transform: translateY(calc(-88px * var(--pc-scale))); } /* Overlay variant: drop the staggered easing, snap into place. */ .qdnapro-project-card[data-mode=animated][data-animation=overlay] .project-card-photo, .qdnapro-project-card[data-mode=animated][data-animation=overlay] .project-card-name, .qdnapro-project-card[data-mode=animated][data-animation=overlay] .project-card-org, .qdnapro-project-card[data-mode=animated][data-animation=overlay] .project-card-info, .qdnapro-project-card[data-mode=animated][data-animation=overlay] .project-card-date { transition: none; animation: none; } .qdnapro-project-card[data-mode=animated][data-animation=overlay]:hover .project-card-name, .qdnapro-project-card[data-mode=animated][data-animation=overlay]:focus-within .project-card-name, .qdnapro-project-card[data-mode=animated][data-animation=overlay]:hover .project-card-org, .qdnapro-project-card[data-mode=animated][data-animation=overlay]:focus-within .project-card-org, .qdnapro-project-card[data-mode=animated][data-animation=overlay]:hover .project-card-info, .qdnapro-project-card[data-mode=animated][data-animation=overlay]:focus-within .project-card-info { transform: translateY(calc(-62px * var(--pc-scale))); } } [data-theme=dark] .qdnapro-project-card { --c-card-bg: #2a2d36; --c-card-border: rgba(255, 255, 255, 0.08); --c-card-divider: rgba(255, 255, 255, 0.12); --c-text-body: #f0f1f2; --c-text-secondary: #a6aab3; --c-photo-fallback: linear-gradient(135deg, #2e323d 0%, #2a2d36 100%); box-shadow: 0 calc(1px * var(--pc-scale)) calc(2px * var(--pc-scale)) rgba(0, 0, 0, 0.3), 0 calc(6px * var(--pc-scale)) calc(16px * var(--pc-scale)) rgba(0, 0, 0, 0.2); } /* ============================================================ Density: compact — uniform 0.8 scale of the whole card so it matches the legacy 80%-zoom look while the page renders at 100%. Non-breaking: cards without [density] keep --pc-scale:1. [Kim 2026-06-03] ============================================================ */ .qdnapro-project-card[density=compact] { --pc-scale: 0.8; } .qdnapro-push-notification { --pn-surface: rgba(255, 255, 255, 0.92); --pn-title: var(--c-text-heading, #1a1d3a); --pn-body: var(--c-text-heading, #1a1d3a); --pn-meta: var(--c-text-muted, #6a6e9a); --pn-tile-bg: var(--c-purple-500, #40499a); --pn-tile-glyph: #ffffff; display: flex; align-items: flex-start; gap: 11px; box-sizing: border-box; width: 100%; padding: 13px 14px; border-radius: var(--r-3, 12px); background: var(--pn-surface); -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4); box-shadow: 0 6px 18px rgba(40, 46, 100, 0.1); font-family: var(--ff, "Inter", -apple-system, sans-serif); text-align: left; } .qdnapro-push-notification--info { --pn-tile-bg: var(--c-signal-blue-text, #6a8ab4); } .qdnapro-push-notification--success { --pn-tile-bg: var(--c-signal-green-text, #428b6e); } .qdnapro-push-notification--warning { --pn-tile-bg: var(--c-warning-bright-text, #9a6a10); } .qdnapro-push-notification--error { --pn-tile-bg: var(--c-signal-red-text, #c65a5a); } .qdnapro-push-notification__tile { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--r-2, 8px); background: var(--pn-tile-bg); color: var(--pn-tile-glyph); line-height: 0; } .qdnapro-push-notification__tile qdnapro-icon, .qdnapro-push-notification__tile .qdnapro-icon { width: 18px; height: 18px; color: inherit; } .qdnapro-push-notification__tile-img { display: block; width: 32px; height: 32px; border-radius: var(--r-2, 8px); object-fit: cover; } .qdnapro-push-notification__main { flex: 1 1 auto; min-width: 0; } .qdnapro-push-notification__headline { display: flex; align-items: baseline; gap: 6px; } .qdnapro-push-notification__title { min-width: 0; color: var(--pn-title); font-size: 14px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; } .qdnapro-push-notification--collapsed .qdnapro-push-notification__title { flex: 0 1 auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .qdnapro-push-notification__time { flex: 0 0 auto; color: var(--pn-meta); font-size: 12px; font-weight: 400; line-height: 1.3; white-space: nowrap; } .qdnapro-push-notification__body { margin-top: 2px; color: var(--pn-body); font-size: 13.5px; font-weight: 400; line-height: 1.42; overflow-wrap: anywhere; } .qdnapro-push-notification--collapsed .qdnapro-push-notification__body { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .qdnapro-push-notification__chevron, .qdnapro-push-notification__dismiss { flex: 0 0 auto; margin: -1px -4px 0 0; } .qdnapro-radio { --rb-size: 16px; --rb-border: #e1e3e6; --rb-bg: #f0f1f2; --rb-bg-hover: #e1e3e6; --rb-selected-bg: #4652f3; --rb-selected-bg-hover: #3842c2; --rb-selected-dot: #ffffff; --rb-focus-ring: #40499a; --rb-focus-glow: rgba(70, 82, 243, 0.25); display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: var(--rb-size); height: var(--rb-size); flex-shrink: 0; border: 1px solid var(--rb-border); border-radius: 50%; background: var(--rb-bg); cursor: pointer; user-select: none; transition: background-color 140ms ease-out, border-color 140ms ease-out; } .qdnapro-radio .radio-dot { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--rb-selected-dot); transform: scale(0); opacity: 0; pointer-events: none; transition: transform 220ms cubic-bezier(0.34, 1.35, 0.64, 1), opacity 140ms ease-out; } .qdnapro-radio.radio-selected { background: var(--rb-selected-bg); border-color: var(--rb-selected-bg); } .qdnapro-radio.radio-selected .radio-dot { transform: scale(1); opacity: 1; } .qdnapro-radio:hover:not(.radio-disabled):not(.radio-selected) { background: var(--rb-bg-hover); } .qdnapro-radio:hover:not(.radio-disabled).radio-selected { background: var(--rb-selected-bg-hover); border-color: var(--rb-selected-bg-hover); } .qdnapro-radio:active:not(.radio-disabled) { background-image: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)); } .qdnapro-radio:focus { outline: none; } .qdnapro-radio:focus-visible, .qdnapro-radio.force-focus { outline: none; box-shadow: 0 0 0 2px var(--rb-focus-ring), 0 0 0 6px var(--rb-focus-glow); } .qdnapro-radio.force-hover:not(.radio-disabled):not(.radio-selected) { background: var(--rb-bg-hover); } .qdnapro-radio.force-hover:not(.radio-disabled).radio-selected { background: var(--rb-selected-bg-hover); border-color: var(--rb-selected-bg-hover); } .qdnapro-radio.force-pressed:not(.radio-disabled) { background-image: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)); } .qdnapro-radio.radio-state-error { --rb-border: #c65a5a; --rb-bg-hover: #fbd5d5; --rb-selected-bg: #c65a5a; --rb-selected-bg-hover: #a04444; --rb-selected-dot: #ffffff; --rb-focus-ring: #c65a5a; --rb-focus-glow: rgba(198, 90, 90, 0.25); } .qdnapro-radio.radio-state-success { --rb-border: #428b6e; --rb-bg-hover: #c5ebd9; --rb-selected-bg: #428b6e; --rb-selected-bg-hover: #2f5d4a; --rb-selected-dot: #ffffff; --rb-focus-ring: #428b6e; --rb-focus-glow: rgba(66, 139, 110, 0.25); } .qdnapro-radio.radio-disabled { --rb-border: #e1e3e6; --rb-bg: #f0f1f2; opacity: 0.5; cursor: not-allowed; pointer-events: none; } .qdnapro-radio.radio-disabled.radio-selected { background: #f0f1f2; border-color: #e1e3e6; } .qdnapro-radio.radio-disabled.radio-selected .radio-dot { background: #898e99; } [data-theme=dark] .qdnapro-radio { --rb-border: #565b66; --rb-bg: #2e3036; --rb-bg-hover: #40444d; --rb-selected-bg: #4652f3; --rb-selected-bg-hover: #5a66ff; --rb-selected-dot: #ffffff; --rb-focus-ring: #a5acff; --rb-focus-glow: rgba(70, 82, 243, 0.4); } [data-theme=dark] .qdnapro-radio.radio-state-error { --rb-border: #c65a5a; --rb-bg-hover: #5a2b2b; --rb-selected-bg: #c65a5a; --rb-selected-bg-hover: #a04444; --rb-focus-ring: #e89090; } [data-theme=dark] .qdnapro-radio.radio-state-success { --rb-border: #428b6e; --rb-bg-hover: #2a5544; --rb-selected-bg: #428b6e; --rb-selected-bg-hover: #2f5d4a; --rb-focus-ring: #7ccfa8; } [data-theme=dark] .qdnapro-radio.radio-disabled { --rb-border: #565b66; --rb-bg: #40444d; } [data-theme=dark] .qdnapro-radio.radio-disabled.radio-selected { background: #40444d; border-color: #565b66; } [data-theme=dark] .qdnapro-radio.radio-disabled.radio-selected .radio-dot { background: #6b7280; } .qdnapro-range-slider { --rs-track: #e1e3e6; --rs-fill: #4652f3; --rs-dot: #b8bcd6; --rs-handle: #ffffff; --rs-handle-border: #4652f3; --rs-handle-glow: rgba(70, 82, 243, 0.25); --rs-label: #6b70a6; --rs-label-active: #1a1f4d; display: block; position: relative; box-sizing: border-box; padding: 6px 12px 4px; user-select: none; -webkit-user-select: none; touch-action: none; } .qdnapro-range-slider .rs-track { position: relative; height: 6px; margin: 14px 0 6px; border-radius: 999px; background: var(--rs-track); } .qdnapro-range-slider .rs-fill { position: absolute; top: 0; height: 100%; border-radius: 999px; background: var(--rs-fill); } .qdnapro-range-slider .rs-dot { position: absolute; top: 50%; width: 4px; height: 4px; margin-left: -2px; margin-top: -2px; border-radius: 50%; background: var(--rs-dot); pointer-events: none; } .qdnapro-range-slider .rs-handle { position: absolute; top: 50%; width: 18px; height: 18px; margin-left: -9px; padding: 0; transform: translateY(-50%); border-radius: 50%; background: var(--rs-handle); border: 2px solid var(--rs-handle-border); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); cursor: grab; z-index: 2; transition: box-shadow 140ms ease-out, transform 120ms ease-out; } .qdnapro-range-slider .rs-handle:hover { box-shadow: 0 0 0 6px var(--rs-handle-glow), 0 1px 3px rgba(0, 0, 0, 0.18); } .qdnapro-range-slider .rs-handle:active { cursor: grabbing; transform: translateY(-50%) scale(1.08); } .qdnapro-range-slider .rs-handle:focus { outline: none; } .qdnapro-range-slider .rs-handle:focus-visible { box-shadow: 0 0 0 4px var(--rs-handle-glow), 0 1px 3px rgba(0, 0, 0, 0.18); } .qdnapro-range-slider .rs-labels { position: relative; height: 16px; margin-top: 2px; } .qdnapro-range-slider .rs-label { position: absolute; top: 0; transform: translateX(-50%); font-size: 11px; line-height: 16px; font-weight: 600; color: var(--rs-label); white-space: nowrap; transition: color 120ms ease-out; } .qdnapro-range-slider .rs-label.is-active { color: var(--rs-label-active); } .qdnapro-range-slider.is-disabled { opacity: 0.5; pointer-events: none; } .qdnapro-recipient-picker [hidden] { display: none; } .qdnapro-recipient-picker { display: flex; flex-direction: column; gap: var(--s-4); } .rp-section-title { font-size: 12px; font-weight: var(--fw-medium); line-height: 1.3; color: var(--c-text-muted); text-transform: uppercase; letter-spacing: 0.04em; padding: 0 var(--s-1); margin-bottom: var(--s-2); } .rp-search { padding: 0 var(--s-1); } .rp-search qdnapro-input { width: 100%; } .rp-body { display: flex; flex-direction: column; height: var(--rp-list-height, 320px); overflow-y: auto; } .rp-body::-webkit-scrollbar { width: 8px; height: 8px; } .rp-body::-webkit-scrollbar-track { background: transparent; } .rp-body::-webkit-scrollbar-thumb { background: transparent; border-radius: 8px; transition: background 160ms ease; } .rp-body:hover::-webkit-scrollbar-thumb, .rp-body:focus-within::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.22); } .rp-body::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.34); } .rp-hint, .rp-empty { padding: var(--s-4) var(--s-1); font-size: 13px; line-height: 1.4; color: var(--c-text-muted); text-align: center; } .rp-busy { display: flex; align-items: center; justify-content: center; padding: var(--s-6) 0; } .rp-spinner { display: block; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--c-border-soft-2, #e6e9ef); border-top-color: var(--c-brand-purple); animation: rp-spin 0.8s linear infinite; } @keyframes rp-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .rp-spinner { animation-duration: 1.6s; } } .rp-results-list { display: flex; flex-direction: column; gap: var(--s-1); } .rp-row { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-1); border-radius: var(--r-2); cursor: pointer; } .rp-row:hover { background: var(--c-bg-subtle-hover); } .rp-row--disabled { cursor: not-allowed; opacity: 0.5; } .rp-row--disabled:hover { background: transparent; } .rp-row-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .rp-row-name { font-size: 14px; font-weight: var(--fw-medium); color: var(--c-text-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rp-row-role { font-size: 12px; line-height: 1.3; color: var(--c-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rp-row-access { flex-shrink: 0; font-size: 12px; line-height: 1.3; color: var(--c-text-muted); white-space: nowrap; text-align: right; } .rp-footer { display: flex; justify-content: flex-end; gap: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--c-border-soft-2, #e6e9ef); } .qdnapro-resource-timeline { --resource-timeline-label-col: 220px; --resource-timeline-row-compact: 44px; --resource-timeline-header: 44px; display: block; box-sizing: border-box; width: 100%; height: 100%; min-height: 0; font-family: var(--theme-font-family, "Inter", sans-serif); } .qdnapro-resource-timeline__scroll { display: grid; grid-template-columns: var(--resource-timeline-label-col) repeat(7, 1fr); align-content: start; width: 100%; height: 100%; overflow: auto; scrollbar-width: thin; background: var(--c-bg-card, #fff); } .qdnapro-resource-timeline__scroll::-webkit-scrollbar { width: 8px; height: 8px; } .qdnapro-resource-timeline__scroll::-webkit-scrollbar-thumb { background: var(--c-grey-200, #d8dade); border-radius: 8px; } .qdnapro-resource-timeline__scroll::-webkit-scrollbar-track { background: transparent; } .qdnapro-resource-timeline__corner { position: sticky; top: 0; left: 0; z-index: 4; height: var(--resource-timeline-header); background: var(--c-bg-card, #fff); border-bottom: 1px solid var(--c-grey-100, #e7e9ec); border-right: 1px solid var(--c-grey-100, #e7e9ec); box-sizing: border-box; } .qdnapro-resource-timeline__corner--search { display: flex; align-items: center; padding: 0 10px; } .qdnapro-resource-timeline__corner--search .qdnapro-resource-timeline__searchinput { flex: 1; min-width: 0; } .qdnapro-resource-timeline__daycell { appearance: none; -webkit-appearance: none; border: none; margin: 0; font: inherit; text-align: inherit; color: inherit; position: sticky; top: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; height: var(--resource-timeline-header); min-width: 0; background: var(--c-bg-card, #fff); border-bottom: 1px solid var(--c-grey-100, #e7e9ec); border-right: 1px solid var(--c-grey-100, #e7e9ec); padding: 2px 4px; box-sizing: border-box; cursor: pointer; } .qdnapro-resource-timeline__daycell:hover { background: var(--c-grey-50, #f0f1f2); } .qdnapro-resource-timeline__daycell:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--c-purple-500, #40499a); } .qdnapro-resource-timeline__weekday { font-size: 10px; font-weight: 600; line-height: 13px; color: var(--c-grey-500, #6b7280); text-transform: uppercase; letter-spacing: 0.03em; } .qdnapro-resource-timeline__daynum { font-size: 13px; font-weight: 600; line-height: 16px; color: var(--c-grey-800, #1c1b29); white-space: nowrap; } .qdnapro-resource-timeline__daycell.is-today .qdnapro-resource-timeline__weekday { color: var(--c-action-500, #4652f3); } .qdnapro-resource-timeline__daycell.is-today .qdnapro-resource-timeline__daynum { color: #fff; background: var(--c-action-500, #4652f3); padding: 1px 8px; border-radius: 999px; } .qdnapro-resource-timeline__todaytag { font-size: 9px; font-weight: 700; line-height: 11px; color: var(--c-action-500, #4652f3); text-transform: uppercase; letter-spacing: 0.04em; } .qdnapro-resource-timeline__daycell.is-today .qdnapro-resource-timeline__todaytag { display: none; } .qdnapro-resource-timeline__topspace, .qdnapro-resource-timeline__botspace { grid-column: 1/-1; height: 0; } .qdnapro-resource-timeline__label { position: sticky; left: 0; z-index: 2; display: flex; align-items: center; gap: 10px; height: var(--resource-timeline-row-compact, 44px); min-width: 0; padding: 0 12px; background: var(--c-bg-card, #fff); border-bottom: 1px solid var(--c-grey-100, #e7e9ec); border-right: 1px solid var(--c-grey-100, #e7e9ec); box-sizing: border-box; } .qdnapro-resource-timeline__labeltext { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .qdnapro-resource-timeline__labelname { font-size: 13px; font-weight: 600; line-height: 16px; color: var(--c-grey-800, #1c1b29); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .qdnapro-resource-timeline__labelmeta { font-size: 11px; font-weight: 500; line-height: 14px; color: var(--c-grey-500, #6b7280); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .qdnapro-resource-timeline__cell { position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0; height: var(--resource-timeline-row-compact, 44px); padding: 3px 4px; box-sizing: border-box; background: var(--c-bg-card, #fff); border-bottom: 1px solid var(--c-grey-100, #e7e9ec); border-right: 1px solid var(--c-grey-100, #e7e9ec); overflow: hidden; cursor: default; } .qdnapro-resource-timeline__cell.is-today { background: rgba(64, 73, 154, 0.04); } .qdnapro-resource-timeline__cell.is-empty { cursor: pointer; } .qdnapro-resource-timeline__cell.is-disabled, .qdnapro-resource-timeline__cell.is-unavailable { background: repeating-linear-gradient(135deg, var(--c-grey-50, #f0f1f2) 0 6px, rgba(107, 114, 128, 0.14) 6px 12px); } .qdnapro-resource-timeline__cell.is-disabled { cursor: not-allowed; } .qdnapro-resource-timeline__cell.is-unavailable { cursor: pointer; } .qdnapro-resource-timeline__cell.is-drop-target { background: var(--c-purple-soft-12, rgba(64, 73, 154, 0.12)); } .qdnapro-resource-timeline__cell.is-drop-target::before { content: ""; position: absolute; inset: 1px; pointer-events: none; background-image: repeating-linear-gradient(to right, var(--c-purple-500, #40499a) 0 6px, transparent 0 12px), repeating-linear-gradient(to right, var(--c-purple-500, #40499a) 0 6px, transparent 0 12px), repeating-linear-gradient(to bottom, var(--c-purple-500, #40499a) 0 6px, transparent 0 12px), repeating-linear-gradient(to bottom, var(--c-purple-500, #40499a) 0 6px, transparent 0 12px); background-repeat: repeat-x, repeat-x, repeat-y, repeat-y; background-size: 12px 2px, 12px 2px, 2px 12px, 2px 12px; background-position: 0 0, 0 100%, 0 0, 100% 0; animation: qdna-resource-timeline-march 1.6s linear infinite; } @keyframes qdna-resource-timeline-march { to { background-position: 12px 0, -12px 100%, 0 -12px, 100% 12px; } } @media (prefers-reduced-motion: reduce) { .qdnapro-resource-timeline__cell.is-drop-target::before { animation: none; } } .qdnapro-resource-timeline__chip { flex: 1 1 22px; min-height: 22px; padding: 2px 6px; } .qdnapro-resource-timeline__chip .qdnapro-event-card__meta { display: none; } .qdnapro-resource-timeline__chip .qdnapro-event-card__avatar { --av-size: 16px; --av-padding: 3px; } .qdnapro-resource-timeline__chip[draggable=true] { cursor: grab; } .qdnapro-resource-timeline__chip.is-dragging { opacity: 0.5; cursor: grabbing; } .qdnapro-resource-timeline__chip--draft { border: 1.5px dashed var(--event-card-text, currentColor); background: color-mix(in srgb, var(--event-card-bg, transparent) 55%, transparent); } .qdnapro-resource-timeline__more { appearance: none; border: 0; background: transparent; text-align: left; padding: 1px 6px; margin: 0; font-family: inherit; font-size: 10px; font-weight: 600; line-height: 14px; color: var(--c-grey-500, #6b7280); border-radius: var(--r-1, 4px); cursor: pointer; } .qdnapro-resource-timeline__more:hover { background: var(--c-grey-50, #f0f1f2); } .qdnapro-resource-timeline__more:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--c-purple-500, #40499a), 0 0 0 6px var(--c-purple-soft-18, rgba(64, 73, 154, 0.18)); } .qdnapro-resource-timeline--wide .qdnapro-resource-timeline__daycell, .qdnapro-resource-timeline--wide .qdnapro-resource-timeline__cell { min-width: 88px; } .qdnapro-row-btn { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; box-sizing: border-box; padding: 0; border: none; border-radius: 8px; background: rgba(0, 0, 0, 0.04); color: #6b7280; cursor: pointer; user-select: none; outline: none; transition: background 120ms ease, color 120ms ease; } .qdnapro-row-btn *, .qdnapro-row-btn *::before, .qdnapro-row-btn *::after { box-sizing: border-box; } .qdnapro-row-btn svg, .qdnapro-row-btn qdnapro-icon { display: inline-flex; flex-shrink: 0; pointer-events: none; color: inherit; } .qdnapro-row-btn svg { fill: currentColor; } .qdnapro-row-btn.row-btn-size-36 { width: 36px; height: 36px; } .qdnapro-row-btn.row-btn-size-36 svg, .qdnapro-row-btn.row-btn-size-36 qdnapro-icon { width: 20px; height: 20px; } .qdnapro-row-btn.row-btn-size-40 { width: 40px; height: 40px; } .qdnapro-row-btn.row-btn-size-40 svg, .qdnapro-row-btn.row-btn-size-40 qdnapro-icon { width: 20px; height: 20px; } .qdnapro-row-btn.row-btn-size-28 { width: 28px; height: 28px; border-radius: 4px; } .qdnapro-row-btn.row-btn-size-28 svg, .qdnapro-row-btn.row-btn-size-28 qdnapro-icon { width: 16px; height: 16px; } .qdnapro-row-btn:hover:not(.row-btn-disabled) { background: rgba(0, 0, 0, 0.08); color: #0b0b0d; } .qdnapro-row-btn:active:not(.row-btn-disabled) { background: rgba(0, 0, 0, 0.12); } .qdnapro-row-btn:focus-visible { box-shadow: 0 0 0 2px var(--c-focus-ring, #40499a), 0 0 0 5px var(--c-focus-glow, rgba(70, 82, 243, 0.2)); } .qdnapro-row-btn.row-btn-active { background: rgba(70, 82, 243, 0.12); color: #40499a; } .qdnapro-row-btn.row-btn-active:hover:not(.row-btn-disabled) { background: rgba(70, 82, 243, 0.18); color: #333a7b; } .qdnapro-row-btn.row-btn-active.row-btn-variant-concept { background: rgba(245, 158, 11, 0.16); color: #b45309; } .qdnapro-row-btn.row-btn-active.row-btn-variant-concept:hover:not(.row-btn-disabled) { background: rgba(245, 158, 11, 0.24); color: #92400e; } .qdnapro-row-btn.row-btn-disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; } [data-theme=dark] .qdnapro-row-btn { background: rgba(255, 255, 255, 0.05); color: #9ca3af; } [data-theme=dark] .qdnapro-row-btn:hover:not(.row-btn-disabled) { background: rgba(255, 255, 255, 0.1); color: #ffffff; } [data-theme=dark] .qdnapro-row-btn:active:not(.row-btn-disabled) { background: rgba(255, 255, 255, 0.14); } [data-theme=dark] .qdnapro-row-btn.row-btn-active { background: rgba(70, 82, 243, 0.2); color: #a5acff; } [data-theme=dark] .qdnapro-row-btn.row-btn-active:hover:not(.row-btn-disabled) { background: rgba(70, 82, 243, 0.3); color: #ffffff; } [data-theme=dark] .qdnapro-row-btn.row-btn-active.row-btn-variant-concept { background: rgba(245, 158, 11, 0.22); color: #fbbf24; } [data-theme=dark] .qdnapro-row-btn.row-btn-active.row-btn-variant-concept:hover:not(.row-btn-disabled) { background: rgba(245, 158, 11, 0.32); color: #fcd34d; } .qdnapro-segment { display: inline-flex; align-items: center; gap: 8px; padding: 3px; background: #f0f1f2; border-radius: 10px; box-sizing: border-box; position: relative; } .qdnapro-segment.segment-size-small { border-radius: 8px; } .qdnapro-segment.segment-disabled { background: rgba(240, 241, 242, 0.7); pointer-events: none; } [data-theme=dark] .qdnapro-segment, .theme-dark .qdnapro-segment { background: #2a2d35; } [data-theme=dark] .qdnapro-segment.segment-disabled, .theme-dark .qdnapro-segment.segment-disabled { background: rgba(42, 45, 53, 0.6); } .segment-track-pill { position: absolute; top: 3px; left: 0; height: calc(100% - 6px); width: 0; transform: translateX(0); border-radius: 8px; background: #ffffff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08); pointer-events: none; z-index: 0; transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1), width 280ms cubic-bezier(0.4, 0, 0.2, 1); } .segment-size-small .segment-track-pill { border-radius: 6px; } [data-theme=dark] .qdnapro-segment .segment-track-pill, .theme-dark .qdnapro-segment .segment-track-pill { background: #1e2028; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2); } .qdnapro-segment-item { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 64px; height: 36px; padding: 0 14px; box-sizing: border-box; position: relative; z-index: 1; border-radius: 8px; font-family: inherit; font-size: 13px; font-weight: 500; line-height: 1; white-space: nowrap; color: rgba(11, 11, 13, 0.55); cursor: pointer; user-select: none; -webkit-user-select: none; outline: none; border: none; background: transparent; transition: color 200ms ease, background 150ms ease, box-shadow 150ms ease; } .qdnapro-segment-item .segment-item-icon { display: flex; align-items: center; flex-shrink: 0; width: 16px; height: 16px; color: inherit; } .qdnapro-segment-item .segment-item-label { position: relative; } .qdnapro-segment-item .segment-item-label::after { content: attr(data-text); display: block; height: 0; overflow: hidden; visibility: hidden; font-weight: 600; pointer-events: none; } .qdnapro-segment-item:not(.segment-item-active):not(.segment-item-disabled):hover { color: rgba(11, 11, 13, 0.75); background: rgba(11, 11, 13, 0.06); } .qdnapro-segment-item:not(.segment-item-active):not(.segment-item-disabled):active { background: rgba(11, 11, 13, 0.1); color: rgba(11, 11, 13, 0.85); } .qdnapro-segment-item:focus-visible { box-shadow: 0 0 0 2px #40499a, 0 0 0 4px rgba(70, 82, 243, 0.25); } .qdnapro-segment-item.segment-item-active { color: #0b0b0d; font-weight: 600; cursor: default; } .qdnapro-segment-item.segment-item-active:focus-visible { box-shadow: 0 0 0 2px #40499a, 0 0 0 4px rgba(70, 82, 243, 0.25); } .qdnapro-segment-item.segment-item-disabled { color: #898e99; cursor: not-allowed; pointer-events: none; opacity: 0.7; } .segment-size-small .qdnapro-segment-item { height: 28px; padding: 0 10px; border-radius: 6px; font-size: 12px; gap: 4px; } .segment-size-small .qdnapro-segment-item .segment-item-icon { width: 14px; height: 14px; } [data-theme=dark] .qdnapro-segment-item, .theme-dark .qdnapro-segment-item { color: rgba(240, 241, 242, 0.5); } [data-theme=dark] .qdnapro-segment-item:not(.segment-item-active):not(.segment-item-disabled):hover, .theme-dark .qdnapro-segment-item:not(.segment-item-active):not(.segment-item-disabled):hover { color: rgba(240, 241, 242, 0.75); background: rgba(240, 241, 242, 0.08); } [data-theme=dark] .qdnapro-segment-item:not(.segment-item-active):not(.segment-item-disabled):active, .theme-dark .qdnapro-segment-item:not(.segment-item-active):not(.segment-item-disabled):active { background: rgba(240, 241, 242, 0.12); color: rgba(240, 241, 242, 0.9); } [data-theme=dark] .qdnapro-segment-item.segment-item-active, .theme-dark .qdnapro-segment-item.segment-item-active { color: #f0f1f2; } [data-theme=dark] .qdnapro-segment-item.segment-item-disabled, .theme-dark .qdnapro-segment-item.segment-item-disabled { color: #55585f; opacity: 0.6; } .qdnapro-segment.segment-variant-sliding-pills { background: transparent; padding: 0; gap: 4px; border-radius: 0; } .qdnapro-segment.segment-variant-sliding-pills .segment-track-pill { top: 0; height: 100%; border-radius: 20px; background: #e8eafd; box-shadow: none; } .qdnapro-segment.segment-variant-sliding-pills .qdnapro-segment-item { border-radius: 20px; color: #8890b8; } .qdnapro-segment.segment-variant-sliding-pills .qdnapro-segment-item:not(.segment-item-active):not(.segment-item-disabled):hover { color: #40499a; background: rgba(65, 73, 154, 0.06); } .qdnapro-segment.segment-variant-sliding-pills .qdnapro-segment-item:not(.segment-item-active):not(.segment-item-disabled):active { color: #40499a; background: rgba(65, 73, 154, 0.1); } .qdnapro-segment-tiles { box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; width: 100%; } .qdnapro-segment-tiles *, .qdnapro-segment-tiles *::before, .qdnapro-segment-tiles *::after { box-sizing: border-box; } .qdnapro-segment-tiles .segment-label { font-size: 11px; font-weight: 500; color: rgba(11, 11, 13, 0.55); letter-spacing: 0.06em; text-transform: uppercase; } .qdnapro-segment-tiles .segment-shell { position: relative; } .qdnapro-segment-tiles .segment-track { position: relative; display: flex; background: #f0f1f2; border-radius: 10px; padding: 3px; gap: 0; } .qdnapro-segment-tiles .segment-pill { position: absolute; top: 3px; bottom: 3px; border-radius: 8px; background: var(--c-bg-card); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08); pointer-events: none; z-index: 0; transition: left 280ms cubic-bezier(0.4, 0, 0.2, 1), width 280ms cubic-bezier(0.4, 0, 0.2, 1); } .qdnapro-segment-tiles .segment-tile { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 10px 8px; border-radius: 7px; cursor: pointer; user-select: none; outline: none; transition: color 180ms ease; } .qdnapro-segment-tiles .segment-tile > qdnapro-icon { font-size: 18px; color: rgba(11, 11, 13, 0.55); transition: color 180ms ease; pointer-events: none; } .qdnapro-segment-tiles .segment-tile > span { font-size: 10px; font-weight: 500; color: rgba(11, 11, 13, 0.55); text-align: center; line-height: 1.3; transition: color 180ms ease; pointer-events: none; } .qdnapro-segment-tiles .segment-tile:focus-visible { box-shadow: 0 0 0 2px var(--focus-ring); border-radius: 7px; } .qdnapro-segment-tiles .segment-tile.active > qdnapro-icon { color: #3c3489; } .qdnapro-segment-tiles .segment-tile.active > span { color: #3c3489; font-weight: 600; } .qdnapro-segment-tiles .segment-tile:not(.active):not(.segment-tile--disabled):hover > qdnapro-icon { color: rgba(11, 11, 13, 0.75); } .qdnapro-segment-tiles .segment-tile:not(.active):not(.segment-tile--disabled):hover > span { color: rgba(11, 11, 13, 0.75); } .qdnapro-segment-tiles .segment-tile--disabled { cursor: not-allowed; opacity: 0.45; } .qdnapro-segment-tiles .segment-tile--disabled > qdnapro-icon { color: rgba(11, 11, 13, 0.45); } .qdnapro-segment-tiles .segment-tile--disabled > span { color: rgba(11, 11, 13, 0.45); } .qdnapro-segment-tiles--smiley .segment-tile { gap: 6px; padding: 12px 10px; } .qdnapro-segment-tiles--smiley .segment-tile-smileys { display: flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: nowrap; pointer-events: none; } .qdnapro-segment-tiles--smiley .segment-tile-smileys qdnapro-smiley { pointer-events: none; } .qdnapro-segment-tiles .segment-overlay { position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); display: flex; align-items: flex-start; gap: 10px; padding: 12px 38px 12px 14px; min-height: 52px; background: var(--c-bg-card); border-radius: 10px; border: 0.5px solid var(--c-border-soft); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.08); z-index: 20; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(6px); transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms; } .qdnapro-segment-tiles .segment-overlay.is-below { bottom: auto; top: calc(100% + 8px); transform: translateY(-6px); } .qdnapro-segment-tiles .segment-overlay.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); transition: opacity 180ms ease, transform 180ms ease; } .qdnapro-segment-tiles .segment-overlay .segment-overlay-close { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: none; border-radius: 6px; background: transparent; color: rgba(11, 11, 13, 0.45); font-size: 16px; cursor: pointer; transition: background 140ms ease, color 140ms ease; } .qdnapro-segment-tiles .segment-overlay .segment-overlay-close:hover { background: var(--c-black-06); color: rgba(11, 11, 13, 0.75); } .qdnapro-segment-tiles .segment-overlay .segment-overlay-close:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus-ring); } .qdnapro-segment-tiles .segment-overlay .segment-desc-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--c-bg-card-hover); border: 0.5px solid var(--c-border-soft); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .qdnapro-segment-tiles .segment-overlay .segment-desc-icon qdnapro-icon { font-size: 16px; color: #3c3489; } .qdnapro-segment-tiles .segment-overlay .segment-desc-icon--warning { background: #fff5ed; border-color: rgba(214, 122, 47, 0.25); } .qdnapro-segment-tiles .segment-overlay .segment-desc-icon--warning qdnapro-icon { color: #d67a2f; } .qdnapro-segment-tiles .segment-overlay .segment-desc-text { flex: 1; } .qdnapro-segment-tiles .segment-overlay .segment-desc-text strong { display: block; font-size: 12px; font-weight: 600; color: #3c3489; line-height: 1.3; margin-bottom: 3px; } .qdnapro-segment-tiles .segment-overlay .segment-desc-text p { font-size: 11px; color: rgba(11, 11, 13, 0.65); line-height: 1.5; margin: 0; } qdnapro-segment-tile { display: none !important; } [data-theme=dark] .qdnapro-segment-tiles .segment-track, .theme-dark .qdnapro-segment-tiles .segment-track { background: #2a2d35; } [data-theme=dark] .qdnapro-segment-tiles .segment-tile > qdnapro-icon, .theme-dark .qdnapro-segment-tiles .segment-tile > qdnapro-icon { color: rgba(240, 241, 242, 0.5); } [data-theme=dark] .qdnapro-segment-tiles .segment-tile > span, .theme-dark .qdnapro-segment-tiles .segment-tile > span { color: rgba(240, 241, 242, 0.5); } [data-theme=dark] .qdnapro-segment-tiles .segment-tile.active > qdnapro-icon, .theme-dark .qdnapro-segment-tiles .segment-tile.active > qdnapro-icon { color: var(--c-brand-purple); } [data-theme=dark] .qdnapro-segment-tiles .segment-tile.active > span, .theme-dark .qdnapro-segment-tiles .segment-tile.active > span { color: var(--c-brand-purple); font-weight: 600; } [data-theme=dark] .qdnapro-segment-tiles .segment-tile:not(.active):not(.segment-tile--disabled):hover > qdnapro-icon, .theme-dark .qdnapro-segment-tiles .segment-tile:not(.active):not(.segment-tile--disabled):hover > qdnapro-icon { color: rgba(240, 241, 242, 0.75); } [data-theme=dark] .qdnapro-segment-tiles .segment-tile:not(.active):not(.segment-tile--disabled):hover > span, .theme-dark .qdnapro-segment-tiles .segment-tile:not(.active):not(.segment-tile--disabled):hover > span { color: rgba(240, 241, 242, 0.75); } [data-theme=dark] .qdnapro-segment-tiles .segment-tile--disabled > qdnapro-icon, .theme-dark .qdnapro-segment-tiles .segment-tile--disabled > qdnapro-icon { color: rgba(240, 241, 242, 0.3); } [data-theme=dark] .qdnapro-segment-tiles .segment-tile--disabled > span, .theme-dark .qdnapro-segment-tiles .segment-tile--disabled > span { color: rgba(240, 241, 242, 0.3); } [data-theme=dark] .qdnapro-segment-tiles .segment-overlay .segment-overlay-close, .theme-dark .qdnapro-segment-tiles .segment-overlay .segment-overlay-close { color: rgba(240, 241, 242, 0.45); } [data-theme=dark] .qdnapro-segment-tiles .segment-overlay .segment-overlay-close:hover, .theme-dark .qdnapro-segment-tiles .segment-overlay .segment-overlay-close:hover { background: rgba(240, 241, 242, 0.08); color: rgba(240, 241, 242, 0.75); } [data-theme=dark] .qdnapro-segment-tiles .segment-overlay .segment-desc-icon qdnapro-icon, .theme-dark .qdnapro-segment-tiles .segment-overlay .segment-desc-icon qdnapro-icon { color: var(--c-brand-purple); } [data-theme=dark] .qdnapro-segment-tiles .segment-overlay .segment-desc-icon--warning, .theme-dark .qdnapro-segment-tiles .segment-overlay .segment-desc-icon--warning { background: rgba(214, 122, 47, 0.15); border-color: rgba(214, 122, 47, 0.3); } [data-theme=dark] .qdnapro-segment-tiles .segment-overlay .segment-desc-icon--warning qdnapro-icon, .theme-dark .qdnapro-segment-tiles .segment-overlay .segment-desc-icon--warning qdnapro-icon { color: #e8994a; } [data-theme=dark] .qdnapro-segment-tiles .segment-overlay .segment-desc-text strong, .theme-dark .qdnapro-segment-tiles .segment-overlay .segment-desc-text strong { color: var(--c-brand-purple); } [data-theme=dark] .qdnapro-segment-tiles .segment-overlay .segment-desc-text p, .theme-dark .qdnapro-segment-tiles .segment-overlay .segment-desc-text p { color: rgba(240, 241, 242, 0.65); } .qdnapro-score-scale { --qss-neutral-idle-bg: color-mix(in srgb, var(--theme-btn-color, #40499a) 10%, #fff); --qss-neutral-idle-text: var(--theme-btn-color, #40499a); --qss-neutral-selected-bg: var(--theme-btn-selected-color, var(--theme-btn-color, #40499a)); --qss-neutral-selected-text: var(--theme-btn-selected-text-color, #fff); --qss-separator: rgba(0, 0, 0, 0.08); --qss-selected-shadow: 0 8px 20px rgba(20, 25, 80, 0.16), 0 2px 6px rgba(20, 25, 80, 0.10); --qss-grow: 7px; --qss-grad-1: var(--c-warn-red-500, #dc2626); --qss-grad-2: var(--c-warn-yellow-500, #fbbf24); --qss-grad-3: var(--c-success-bright, #1d9e75); display: block; box-sizing: border-box; width: 100%; max-width: 640px; margin: 0 auto; font-family: var(--theme-font-family, "Inter", sans-serif); } .qdnapro-score-scale .qss-bar { display: flex; align-items: center; width: 100%; height: 56px; overflow: visible; box-shadow: var(--shadow-card, 0 1px 2px rgba(20, 25, 80, 0.04)); touch-action: pan-y; } .qdnapro-score-scale.is-dragging .qss-segment { transition: none; } .qdnapro-score-scale .qss-segment { box-sizing: border-box; flex: 1 1 0; min-width: 0; height: 56px; display: flex; align-items: center; justify-content: center; padding: 0; border: none; border-right: 1px solid var(--qss-separator); background: var(--qss-neutral-idle-bg); color: var(--qss-neutral-idle-text); font-family: inherit; font-size: 15px; font-weight: 500; cursor: pointer; position: relative; z-index: 0; transition: height 150ms cubic-bezier(0.34, 1.56, 0.64, 1), border-radius 150ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 150ms ease-out, background-color 150ms ease-out, color 150ms ease-out, filter 150ms ease-out, opacity 150ms ease-out; } .qdnapro-score-scale .qss-segment:first-child { border-top-left-radius: var(--r-3, 12px); border-bottom-left-radius: var(--r-3, 12px); } .qdnapro-score-scale .qss-segment:last-child { border-right: none; border-top-right-radius: var(--r-3, 12px); border-bottom-right-radius: var(--r-3, 12px); } .qdnapro-score-scale .qss-segment:has(+ .qss-segment.is-selected) { border-right-color: transparent; } .qdnapro-score-scale .qss-segment:hover:not(:disabled):not(.is-selected) { filter: brightness(0.97); } .qdnapro-score-scale .qss-segment:focus { outline: none; } .qdnapro-score-scale .qss-segment:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--c-action-500, #4652f3); z-index: 3; } .qdnapro-score-scale .qss-num { line-height: 1; pointer-events: none; } .qdnapro-score-scale .qss-segment.is-selected { height: calc(56px + var(--qss-grow) * 2); border-radius: var(--r-2, 8px); background: var(--qss-neutral-selected-bg); color: var(--qss-neutral-selected-text); border-right-color: transparent; box-shadow: var(--qss-selected-shadow); z-index: 2; } .qdnapro-score-scale .qss-segment.is-selected .qss-num { font-weight: 700; font-size: 17px; } .qdnapro-score-scale.is-gradient .qss-segment { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); border-right-color: rgba(255, 255, 255, 0.35); } .qdnapro-score-scale.is-gradient .qss-segment:not(.is-selected) { filter: saturate(0.45) brightness(1.05); opacity: 0.82; } .qdnapro-score-scale.is-gradient .qss-segment.is-selected { background-color: transparent; filter: none; opacity: 1; } .qdnapro-score-scale .qss-footer { margin-top: var(--s-2, 8px); } .qdnapro-score-scale .qss-endpoints { display: flex; justify-content: space-between; gap: var(--s-2, 8px); font-size: 12px; color: var(--c-text-muted, #6e7280); } .qdnapro-score-scale .qss-label-min, .qdnapro-score-scale .qss-label-max { max-width: 48%; } .qdnapro-score-scale .qss-label-max { text-align: right; } .qdnapro-score-scale .qss-bands { position: relative; height: 18px; margin-top: var(--s-1, 4px); } .qdnapro-score-scale .qss-band { position: absolute; top: 0; text-align: center; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--c-text-muted, #6e7280); padding-top: var(--s-1, 4px); border-top: 1px solid var(--c-border-soft-2, #e6e9ef); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .qdnapro-score-scale.is-disabled { opacity: 0.55; } .qdnapro-score-scale.is-disabled .qss-segment { cursor: not-allowed; } [data-theme=dark] .qdnapro-score-scale { --qss-neutral-idle-bg: color-mix(in srgb, var(--theme-btn-color, #40499a) 22%, var(--c-grey-900, #18181c)); --qss-neutral-idle-text: color-mix(in srgb, var(--theme-btn-color, #40499a) 70%, #fff); --qss-neutral-selected-bg: var(--theme-btn-selected-color, var(--theme-btn-color, #40499a)); --qss-neutral-selected-text: var(--theme-btn-selected-text-color, #fff); --qss-separator: rgba(255, 255, 255, 0.1); --qss-selected-shadow: 0 8px 20px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.30); } [data-theme=dark] .qdnapro-score-scale .qss-band { border-top-color: var(--c-border-soft, rgba(255, 255, 255, 0.08)); } @media (max-width: 420px) { .qdnapro-score-scale .qss-segment { font-size: 13px; } } @media (prefers-reduced-motion: reduce) { .qdnapro-score-scale .qss-segment { transition: none; } } .qdnapro-likert-scale { --likert-accent: var(--c-brand-purple, #40499a); --qls-nvt-color: var(--c-grey-500, #6b7280); --qls-nvt-ring: var(--c-grey-400, #a6aab3); --qls-circle-size: 28px; --qls-gap: var(--s-2, 8px); display: block; box-sizing: border-box; width: 100%; font-family: var(--theme-font-family, "Inter", sans-serif); container: qdnapro-likert-scale/inline-size; } .qdnapro-likert-scale *, .qdnapro-likert-scale *::before, .qdnapro-likert-scale *::after { box-sizing: border-box; } .qdnapro-likert-scale__row { display: flex; align-items: flex-start; width: 100%; gap: var(--s-4, 16px); padding: 6px 4px 9px; overflow-x: auto; overflow-y: hidden; } .qdnapro-likert-scale__row::-webkit-scrollbar { height: 6px; } .qdnapro-likert-scale__row::-webkit-scrollbar-track { background: transparent; } .qdnapro-likert-scale__row::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; } .qdnapro-likert-scale__row:hover::-webkit-scrollbar-thumb, .qdnapro-likert-scale__row:focus-within::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.22); } .qdnapro-likert-scale__row::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.34); } .qdnapro-likert-scale__scale { display: flex; flex: 1 1 auto; justify-content: space-between; gap: var(--s-1, 4px); min-width: 0; } .qdnapro-likert-scale__item { display: flex; flex: 1 1 0; min-width: 0; } .qdnapro-likert-scale__item--nvt { flex: 0 0 auto; } .qdnapro-likert-scale__option { display: flex; flex-direction: column; align-items: center; gap: var(--qls-gap); width: 100%; border: none; background: transparent; padding: 4px; border-radius: 8px; cursor: pointer; font: inherit; color: inherit; transition: background-color 150ms ease-out; } .qdnapro-likert-scale__option:focus { outline: none; } .qdnapro-likert-scale__label { width: 100%; max-width: 96px; font-size: 12px; font-weight: 700; line-height: 1.25; color: var(--c-text-heading, #1a1f4d); text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; } .qdnapro-likert-scale__item--nvt .qdnapro-likert-scale__label { color: var(--c-text-muted, #6e7280); } .qdnapro-likert-scale__divider { align-self: stretch; width: 1px; min-width: 1px; margin-top: calc(2.5em + var(--qls-gap)); background: var(--c-border-soft-2, #e6e9ef); } .qdnapro-likert-scale__dot { width: var(--qls-circle-size); height: var(--qls-circle-size); min-width: var(--qls-circle-size); flex-shrink: 0; border-radius: 50%; border: 2px solid var(--likert-accent); background: transparent; display: inline-flex; align-items: center; justify-content: center; transition: background-color 150ms ease-out, border-color 150ms ease-out, box-shadow 150ms ease-out, transform 100ms ease-out; } .qdnapro-likert-scale__check { width: 58%; height: 58%; fill: none; stroke: var(--qls-check-color, #fff); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; opacity: 0; pointer-events: none; overflow: visible; } .qdnapro-likert-scale__option.is-selected .qdnapro-likert-scale__check { opacity: 1; animation: qls-check-pop 0.52s cubic-bezier(0.34, 1.56, 0.5, 1), qls-check-draw 0.38s cubic-bezier(0.22, 1, 0.36, 1) 0.04s forwards; } @keyframes qls-check-pop { 0% { transform: scale(0.7) rotate(0deg); } 20% { transform: scale(1.22) rotate(-5deg); } 44% { transform: scale(0.9) rotate(3deg); } 64% { transform: scale(1.08) rotate(-1deg); } 80% { transform: scale(0.97) rotate(0deg); } 100% { transform: scale(1) rotate(0deg); } } @keyframes qls-check-draw { 0% { stroke-dashoffset: 24; } 62% { stroke-dashoffset: -1; } 80% { stroke-dashoffset: 0.7; } 100% { stroke-dashoffset: 0; } } @media (prefers-reduced-motion: reduce) { .qdnapro-likert-scale__option.is-selected .qdnapro-likert-scale__check { animation: none; stroke-dashoffset: 0; } } .qdnapro-likert-scale__option:hover:not(:disabled):not(.is-selected) .qdnapro-likert-scale__dot { background: color-mix(in srgb, var(--likert-accent) 12%, transparent); } .qdnapro-likert-scale__option:focus-visible .qdnapro-likert-scale__dot { box-shadow: 0 0 0 3px color-mix(in srgb, var(--likert-accent) 30%, transparent); } .qdnapro-likert-scale__option.is-selected .qdnapro-likert-scale__dot { background: var(--likert-accent); border-color: var(--likert-accent); transform: scale(1.08); } .qdnapro-likert-scale__option:active:not(:disabled) .qdnapro-likert-scale__dot { transform: scale(0.94); } .qdnapro-likert-scale__dot--nvt { border-color: var(--qls-nvt-ring); } .qdnapro-likert-scale__option--nvt:hover:not(:disabled):not(.is-selected) .qdnapro-likert-scale__dot { background: color-mix(in srgb, var(--qls-nvt-color) 12%, transparent); } .qdnapro-likert-scale__option--nvt:focus-visible .qdnapro-likert-scale__dot { box-shadow: 0 0 0 3px color-mix(in srgb, var(--qls-nvt-color) 30%, transparent); } .qdnapro-likert-scale__option--nvt.is-selected .qdnapro-likert-scale__dot { background: var(--qls-nvt-color); border-color: var(--qls-nvt-color); } .qdnapro-likert-scale.is-readonly .qdnapro-likert-scale__option { cursor: default; } .qdnapro-likert-scale.is-readonly .qdnapro-likert-scale__option:hover .qdnapro-likert-scale__dot { background: transparent; } .qdnapro-likert-scale.is-readonly .qdnapro-likert-scale__option--nvt:hover .qdnapro-likert-scale__dot { background: transparent; } .qdnapro-likert-scale.is-readonly .qdnapro-likert-scale__option.is-selected .qdnapro-likert-scale__dot { background: var(--likert-accent); } .qdnapro-likert-scale.is-readonly .qdnapro-likert-scale__option--nvt.is-selected .qdnapro-likert-scale__dot { background: var(--qls-nvt-color); } .qdnapro-likert-scale.is-disabled { opacity: 0.55; } .qdnapro-likert-scale.is-disabled .qdnapro-likert-scale__option { cursor: not-allowed; } [data-theme=dark] .qdnapro-likert-scale { --qls-nvt-color: var(--c-grey-400, #a6aab3); --qls-nvt-ring: var(--c-grey-600, #565b66); } [data-theme=dark] .qdnapro-likert-scale__divider { background: var(--c-border-soft, rgba(255, 255, 255, 0.08)); } [data-theme=dark] .qdnapro-likert-scale__label { color: var(--c-text-heading, #e1e3e6); } @container qdnapro-likert-scale (max-width: 680px) { .qdnapro-likert-scale__row { flex-direction: column; align-items: stretch; gap: var(--s-2, 8px); overflow: visible; } .qdnapro-likert-scale__scale { flex-direction: column; align-items: stretch; gap: var(--s-2, 8px); } .qdnapro-likert-scale__item { flex: 0 0 auto; } .qdnapro-likert-scale__option { flex-direction: row; align-items: center; justify-content: flex-start; gap: var(--s-3, 12px); min-height: 44px; padding: 6px 4px; } .qdnapro-likert-scale__dot { order: 0; } .qdnapro-likert-scale__label { order: 1; flex: 1 1 auto; width: auto; max-width: none; text-align: left; min-height: 0; -webkit-line-clamp: initial; display: block; overflow: visible; } .qdnapro-likert-scale__divider { display: none; } .qdnapro-likert-scale__item--nvt { margin-top: var(--s-2, 8px); padding-top: var(--s-3, 12px); border-top: 1px solid var(--c-border-soft-2, #e6e9ef); } } @media (prefers-reduced-motion: reduce) { .qdnapro-likert-scale__dot { transition: none; } } .qdnapro-smiley { --smiley-size: 56px; display: inline-flex; align-items: center; justify-content: center; line-height: 0; } .qdnapro-smiley__visual { display: inline-flex; transform-origin: 50% 78%; will-change: transform; } .qdnapro-smiley__img { display: block; width: var(--smiley-size); height: var(--smiley-size); object-fit: contain; user-select: none; -webkit-user-drag: none; pointer-events: none; } .qdnapro-smiley--interactive { cursor: pointer; -webkit-tap-highlight-color: transparent; } .qdnapro-smiley--interactive:focus-visible { outline: 2px solid var(--c-action-500, #4652f3); outline-offset: 2px; border-radius: 8px; } .qdnapro-smiley--interactive[data-face=sad] .qdnapro-smiley__visual { animation: qsm-idle-sad 4.4s ease-in-out infinite; } .qdnapro-smiley--interactive[data-face=meh] .qdnapro-smiley__visual { animation: qsm-idle-meh 5.2s ease-in-out infinite; } .qdnapro-smiley--interactive[data-face=ok] .qdnapro-smiley__visual { animation: qsm-idle-ok 3.6s ease-in-out infinite; } .qdnapro-smiley--interactive[data-face=smile] .qdnapro-smiley__visual { animation: qsm-idle-smile 2.8s ease-in-out infinite; } .qdnapro-smiley--interactive[data-face=yay] .qdnapro-smiley__visual { animation: qsm-idle-yay 2.1s ease-in-out infinite; } @keyframes qsm-idle-sad { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(2px) rotate(-2.5deg); } } @keyframes qsm-idle-meh { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(1px) rotate(1deg); } } @keyframes qsm-idle-ok { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } @keyframes qsm-idle-smile { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-5px) rotate(2.5deg); } } @keyframes qsm-idle-yay { 0%, 20%, 100% { transform: translateY(0) rotate(0deg); } 10% { transform: translateY(-6px) rotate(-4deg); } 30% { transform: translateY(-6px) rotate(4deg); } } .qdnapro-smiley--interactive[data-face=sad] .qdnapro-smiley__visual.is-reacting { animation: qsm-react-sad 0.72s cubic-bezier(0.36, 0, 0.66, -0.06) 1; } .qdnapro-smiley--interactive[data-face=meh] .qdnapro-smiley__visual.is-reacting { animation: qsm-react-meh 0.5s ease-in-out 1; } .qdnapro-smiley--interactive[data-face=ok] .qdnapro-smiley__visual.is-reacting { animation: qsm-react-ok 0.5s cubic-bezier(0.34, 1.2, 0.64, 1) 1; } .qdnapro-smiley--interactive[data-face=smile] .qdnapro-smiley__visual.is-reacting { animation: qsm-react-smile 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1; } .qdnapro-smiley--interactive[data-face=yay] .qdnapro-smiley__visual.is-reacting { animation: qsm-react-yay 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) 1; } @keyframes qsm-react-sad { 0% { transform: translateY(0) rotate(0deg) scale(1); } 22% { transform: translateY(3px) rotate(-9deg) scale(0.96); } 44% { transform: translateY(3px) rotate(7deg) scale(0.96); } 66% { transform: translateY(3px) rotate(-5deg) scale(0.97); } 85% { transform: translateY(2px) rotate(1deg) scale(0.99); } 100% { transform: translateY(2px) rotate(0deg) scale(1); } } @keyframes qsm-react-meh { 0% { transform: rotate(0deg) scale(1); } 30% { transform: rotate(-6deg) scale(1.02); } 60% { transform: rotate(4deg) scale(1.01); } 100% { transform: rotate(0deg) scale(1); } } @keyframes qsm-react-ok { 0% { transform: translateY(0) scale(1); } 35% { transform: translateY(6px) scale(0.95); } 65% { transform: translateY(-3px) scale(1.03); } 100% { transform: translateY(0) scale(1); } } @keyframes qsm-react-smile { 0% { transform: scale(1) translateY(0); } 32% { transform: scale(1.2) translateY(-8px); } 58% { transform: scale(0.95) translateY(2px); } 78% { transform: scale(1.06) translateY(-2px); } 100% { transform: scale(1) translateY(0); } } @keyframes qsm-react-yay { 0% { transform: scale(1) translateY(0) rotate(0deg); } 14% { transform: scale(1.24) translateY(-13px) rotate(-7deg); } 30% { transform: scale(0.93) translateY(0) rotate(5deg); } 46% { transform: scale(1.17) translateY(-10px) rotate(-4deg); } 62% { transform: scale(0.96) translateY(0) rotate(2deg); } 82% { transform: scale(1.04) translateY(-2px) rotate(0deg); } 100% { transform: scale(1) translateY(0) rotate(0deg); } } @media (prefers-reduced-motion: reduce) { .qdnapro-smiley__visual { animation: none !important; } } .qdnapro-smiley-picker { display: block; } .qdnapro-smiley-picker .qsp-track { display: flex; justify-content: space-between; gap: 4px; } .qdnapro-smiley-picker .qsp-option { box-sizing: border-box; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 4px 10px; border-radius: 14px; border: 1px solid transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 0.16s ease, border-color 0.16s ease; } .qdnapro-smiley-picker .qsp-option:hover { background: color-mix(in srgb, var(--theme-btn-color, #40499a) 8%, transparent); } .qdnapro-smiley-picker .qsp-option.is-active { background: color-mix(in srgb, var(--theme-btn-color, #40499a) 15%, transparent); border-color: var(--theme-btn-color, #40499a); } .qdnapro-smiley-picker .qsp-option:focus-visible { outline: 2px solid var(--c-action-500, #4652f3); outline-offset: 2px; } .qdnapro-smiley-picker .qsp-label { font-size: 11px; font-weight: 600; color: var(--c-text-muted, #6b7280); text-align: center; line-height: 1.3; } .qdnapro-smiley-picker .qsp-option.is-active .qsp-label { color: var(--theme-btn-color, #40499a); } .qdnapro-smiley-picker.is-disabled .qsp-option { cursor: default; opacity: 0.5; pointer-events: none; } @media (max-width: 420px) { .qdnapro-smiley-picker .qsp-track { gap: 0; } .qdnapro-smiley-picker .qsp-label { font-size: 9.5px; } } /* ============================================================ * qdnapro-select — compiled from _select.scss * ============================================================ */ .qdnapro-select { display: block; width: 100%; position: relative; } .qdnapro-select > qdnapro-menu-item, .qdnapro-select > qdnapro-menu-section-heading, .qdnapro-select > qdnapro-menu-divider { display: none !important; } .qdnapro-select-trigger { display: block; width: 100%; cursor: pointer; } .qdnapro-select-popover { background: #ffffff; border: 1px solid #c4c7cc; border-radius: 8px; padding: 4px; max-height: 320px; overflow-y: auto; overflow-x: hidden; box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.08), 0 1px 2px 0 rgba(0, 0, 0, 0.14); display: flex; flex-direction: column; gap: 4px; /* Hide the scrollbar — content still scrolls. Flat scrollbar-hide (the qdna-scrollbar-hidden mixin isn't in scope in the components-v2 bundle, same reason as _bottom-sheet.scss). [Kim 2026-07-20] */ scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* old Edge/IE */ } .qdnapro-select-popover::-webkit-scrollbar { width: 0; height: 0; display: none; /* Chrome / Safari */ } /* `dense` popover — tighten the row spacing (radio / avatar / label closer) for selects that opt in via the `dense` attribute (e.g. the Auditritme user pickers). Scoped to this popover modifier so no menu-item elsewhere is affected. [Kim 2026-07-20] */ .qdnapro-select-popover--dense .qdnapro-menu-item { gap: 6px; } .qdnapro-select-popover--dense .qdnapro-menu-item.menu-item-with-avatar .menu-item-avatar-wrap { padding: 0 1px; } .qdnapro-select-popover .qdnapro-select-search { position: sticky; top: 0; z-index: 1; background: #ffffff; padding: 4px; margin: -4px -4px 0 -4px; border-bottom: 1px solid #e1e3e6; } .qdnapro-select-popover .qdnapro-select-menu { background: transparent; border: none; box-shadow: none; padding: 0; width: 100%; } .qdnapro-select-popover .qdnapro-select-empty { padding: 16px 12px; text-align: center; font-family: "Inter", sans-serif; font-size: 13px; line-height: 18px; color: #898e99; } [data-theme=dark] .qdnapro-select-popover { background: #1f2028; border-color: #565b66; box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.3), 0 1px 2px 0 rgba(0, 0, 0, 0.4); } [data-theme=dark] .qdnapro-select-popover .qdnapro-select-search { background: #1f2028; border-bottom-color: #40444d; } [data-theme=dark] .qdnapro-select-popover .qdnapro-select-empty { color: #898e99; } /* ============================================================ * touch mode — opt-in via a `touch` attribute on * (PWA flow only; never set in the backoffice, so desktop selects are * byte-for-byte unaffected). qdna-select.js adds the modifier class * BELOW to the popover ROOT itself (not the host) because the popover * is portaled to document.body — a `.flow …` ancestor selector would * never reach it there. Verified current values before overriding: * option row was min-height 40px / padding 8px 16px / 14px label * (_menu-item.scss menu-item-size-default); checkbox/radio indicator * was 16px (_checkbox.scss / _radio.scss default --cb-size/--rb-size); * search input text was 14px (inherited .qdnapro-input default), NOT * 13px as first assumed — still bumped to 16px since anything under * 16px triggers iOS Safari's auto-zoom-on-focus. [2026-07-13] * ============================================================ */ /* Option rows — Material/Apple touch guidance: >=48px tap target, 16px label (never smaller — readability at arm's length). */ .qdnapro-select-popover--touch .qdnapro-menu-item.menu-item-size-default { /* min-height (not fixed height) is a floor — the row grows when a long label wraps to two lines. align-items: center (from _menu-item.scss) keeps the toggle centred against the taller row. */ min-height: 48px; padding: 12px 16px; font-size: 16px; line-height: 24px; } .qdnapro-select-popover--touch .qdnapro-menu-item .menu-item-label { font-size: 16px; /* Let long option labels WRAP instead of truncating with an ellipsis — the wider break-out popover plus wrapping means a full "Antwoordoptie" label shows. Overrides the base .menu-item-label nowrap/ellipsis. */ white-space: normal; overflow: visible; text-overflow: clip; } /* Checkbox/radio indicator — bump from the 16px default toward the 28px already established by qdnapro-checkbox's own size="touch-sm" (dense-row touch convention, see _checkbox.scss). Mark/dot scale with it. */ .qdnapro-select-popover--touch .qdnapro-menu-item qdnapro-checkbox { --cb-size: 28px; } .qdnapro-select-popover--touch .qdnapro-menu-item qdnapro-checkbox .checkbox-mark { width: 20px; height: 20px; } .qdnapro-select-popover--touch .qdnapro-menu-item qdnapro-checkbox .checkbox-mark-dash { width: 14px; height: 3px; } .qdnapro-select-popover--touch .qdnapro-menu-item qdnapro-radio { --rb-size: 28px; } .qdnapro-select-popover--touch .qdnapro-menu-item qdnapro-radio .radio-dot { width: 7px; height: 7px; } /* A little extra room between rows once they're taller. */ .qdnapro-select-popover--touch .qdnapro-select-menu { gap: 6px; } /* Search input — >=16px is CRITICAL (anything smaller makes iOS Safari auto-zoom on focus). Extra height/padding + explicit specificity (two classes on the search element itself) so this reliably beats _input.scss's own `.qdnapro-input.input-size-small .input-field` rule regardless of partial import order. */ .qdnapro-select-popover--touch .qdnapro-select-search.input-size-small .input-field { min-height: 48px; padding: 0 14px; } .qdnapro-select-popover--touch .qdnapro-select-search .input-native { font-size: 16px; } .qdnapro-share-body { display: flex; flex-direction: column; gap: 12px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } .qdnapro-share-warn { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--c-tag-warning-bg); color: var(--c-tag-warning-text); border: 1px solid #f0d060; font-size: 13px; line-height: 18px; } .qdnapro-share-note { margin: 0; color: var(--c-text-muted); font-size: 12px; line-height: 16px; } .qdnapro-share-channels { display: flex; flex-direction: column; gap: 6px; } .qdnapro-share-channel { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; border: 1px solid var(--c-border-card); border-radius: 12px; background: var(--c-bg-card); color: var(--c-text-body); font-family: inherit; font-size: 14px; font-weight: 500; line-height: 20px; text-align: left; cursor: pointer; transition: background 120ms ease-out, border-color 120ms ease-out; } .qdnapro-share-channel:hover { background: var(--c-bg-subtle-purple); border-color: var(--c-purple-100); } .qdnapro-share-channel:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } .qdnapro-share-channel:active { background: var(--c-purple-50); } .qdnapro-share-channel-icon { flex-shrink: 0; display: inline-flex; color: var(--c-purple-500); } .qdnapro-share-channel-label { flex: 1 1 auto; } .qdnapro-share-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 10px; border: 1px solid transparent; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 14px; font-weight: 600; line-height: 20px; cursor: pointer; user-select: none; transition: background 120ms ease-out, border-color 120ms ease-out, color 120ms ease-out; } .qdnapro-share-btn .share-btn-icon { display: inline-flex; flex-shrink: 0; } .qdnapro-share-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } .qdnapro-share-btn.share-btn-icon-only { gap: 0; padding: 8px; border-radius: 8px; } .qdnapro-share-btn.share-btn-disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } .qdnapro-share-btn.share-btn-primary { background: var(--c-brand-purple); color: var(--c-text-on-action); } .qdnapro-share-btn.share-btn-primary:hover { background: var(--c-brand-purple-hover); } .qdnapro-share-btn.share-btn-primary:active { background: var(--c-brand-purple-press); } .qdnapro-share-btn.share-btn-subtle { background: transparent; color: var(--c-purple-500); } .qdnapro-share-btn.share-btn-subtle .share-btn-icon { color: var(--c-purple-500); } .qdnapro-share-btn.share-btn-subtle:hover { background: var(--c-bg-subtle-purple); } .qdnapro-share-btn.share-btn-secondary { background: var(--c-bg-card); color: var(--c-text-body); border-color: var(--c-border-card); } .qdnapro-share-btn.share-btn-secondary .share-btn-icon { color: var(--c-purple-500); } .qdnapro-share-btn.share-btn-secondary:hover { background: var(--c-bg-card-hover); } .qdnapro-share-inbox-body { display: flex; flex-direction: column; gap: 10px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } .qdnapro-share-inbox-list { display: flex; flex-direction: column; max-height: 46vh; overflow-y: auto; margin: 0 -4px; padding: 0 4px; } /* Pick-mode header slot: custom fields (frequentie + set) boven de Teams/Personen- secties. Onderrand scheidt ze van de zoek/lijst. [Jan 2026-07-11] */ .qdnapro-share-inbox-header { display: flex; flex-direction: column; gap: 12px; padding-bottom: 12px; margin-bottom: 2px; border-bottom: 1px solid var(--c-border, #e6e4f2); } .qdnapro-share-inbox-header .mdash-fld { display: flex; flex-direction: column; gap: 3px; } .qdnapro-share-inbox-header label { font-size: 10.5px; color: var(--c-text-muted, #6b6884); text-transform: uppercase; letter-spacing: 0.04em; padding-left: 2px; } .qdnapro-share-inbox-header select { font-size: 13px; color: #22203a; border: 1px solid #d9d7e8; background: #fff; border-radius: 10px; padding: 8px 12px; width: 100%; cursor: pointer; } .qdnapro-share-inbox-header select:focus { outline: none; border-color: #394290; } .qdnapro-share-inbox-section { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--c-text-muted); padding: 10px 4px 4px; } .qdnapro-share-inbox-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--c-text-body); font-family: inherit; text-align: left; cursor: pointer; transition: background 110ms ease-out, border-color 110ms ease-out; } .qdnapro-share-inbox-row:hover { background: var(--c-bg-subtle-purple); } .qdnapro-share-inbox-row.is-selected { background: var(--c-bg-subtle-purple); border-color: var(--c-purple-100); } .qdnapro-share-inbox-row:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } .qdnapro-share-inbox-check { flex-shrink: 0; } .qdnapro-share-inbox-avatar { flex-shrink: 0; } .qdnapro-share-inbox-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; } .qdnapro-share-inbox-name { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .qdnapro-share-inbox-sub { font-size: 12px; color: var(--c-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .qdnapro-share-inbox-comment-wrap { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--c-border-card); } .qdnapro-share-inbox-comment-label { font-size: 12px; font-weight: 600; color: var(--c-text-muted); } .qdnapro-share-link { display: flex; flex-direction: column; gap: 12px; box-sizing: border-box; width: 100%; border: 1px solid var(--c-grey-100, #e7e9ec); border-radius: var(--r-3, 12px); background: #fff; padding: 16px; align-items: stretch; font-family: "Inter", sans-serif; } .qdnapro-share-link--card { align-items: center; } .qdnapro-share-link__heading { align-self: flex-start; font-size: 15px; font-weight: 700; color: #22203a; } .qdnapro-share-link__desc { align-self: flex-start; margin-top: -4px; font-size: 13px; line-height: 1.5; color: var(--c-grey-500, #6b7280); } .qdnapro-share-link__head { width: 100%; display: flex; justify-content: flex-end; min-height: 4px; } .qdnapro-share-link__badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; line-height: 1.4; } .qdnapro-share-link__badge--active { background: var(--c-signal-green-bg, #c5f5e2); color: var(--c-signal-green-text, #428b6e); } .qdnapro-share-link__badge--inactive { background: var(--c-grey-100, #e7e9ec); color: var(--c-grey-600, #565b66); } .qdnapro-share-link__qr { display: flex; align-items: center; justify-content: center; padding: 4px; } .qdnapro-share-link__qr canvas, .qdnapro-share-link__qr img, .qdnapro-share-link__qr table { display: block; } .qdnapro-share-link__meta { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 20px; font-size: 0.8rem; color: var(--c-grey-500, #6b7280); } .qdnapro-share-link__url { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: var(--r-2, 8px); background: var(--c-grey-50, #f0f1f2); } .qdnapro-share-link__url-text { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: Menlo, monospace; font-size: 12.5px; color: #22203a; } .qdnapro-share-link__actions { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; } .qdnapro-share-link__copy qdnapro-icon, .qdnapro-share-link__deactivate qdnapro-icon { margin-right: 6px; vertical-align: middle; } .qdnapro-sidebar { display: flex; flex-direction: column; width: 297px; max-height: 100vh; background: #ffffff; border-radius: 8px; box-sizing: border-box; font-family: "Inter", inter, sans-serif; overflow: hidden; transition: max-height 180ms ease-out; } .qdnapro-sidebar.sidebar-collapsed .sidebar-search, .qdnapro-sidebar.sidebar-collapsed .sidebar-items { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; pointer-events: none; overflow: hidden; } .qdnapro-sidebar .sidebar-top { display: flex; flex-direction: column; gap: 8px; padding: 12px; flex-shrink: 0; overflow: hidden; min-width: 0; } .qdnapro-sidebar .sidebar-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 0 4px 8px; } .qdnapro-sidebar .sidebar-title { margin: 0; font-family: "Inter", inter, sans-serif; font-size: 20px; font-weight: 600; line-height: 24px; color: #40499a; } .qdnapro-sidebar .sidebar-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; } .qdnapro-sidebar .sidebar-search { display: block; width: 100%; max-width: 100%; box-sizing: border-box; min-width: 0; max-height: 80px; opacity: 1; transition: max-height 180ms ease-out, opacity 120ms ease-out, padding 180ms ease-out, margin 180ms ease-out; } .qdnapro-sidebar .sidebar-items { display: flex; flex-direction: column; gap: 8px; padding: 12px; overflow-y: auto; overflow-x: hidden; flex: 1 1 auto; min-height: 0; max-height: 1200px; opacity: 1; transition: max-height 220ms ease-out, opacity 140ms ease-out, padding 220ms ease-out, margin 220ms ease-out; } .qdnapro-sidebar .sidebar-items > hr { margin: 0; border: 0; border-top: 1px solid #d9dbeb; width: 100%; } .qdnapro-sidebar .sidebar-items > qdnapro-tree-item { width: 100%; margin: 0; } [data-theme=dark] .qdnapro-sidebar { background: #1f2028; } [data-theme=dark] .qdnapro-sidebar .sidebar-title { color: #f0f1f2; } [data-theme=dark] .qdnapro-sidebar .sidebar-items > hr { border-top-color: #3a3b42; } [data-theme=dark] .qdnapro-sidebar qdnapro-input .input-field { background: #2a2b34; border-color: #3a3b42; } [data-theme=dark] .qdnapro-sidebar qdnapro-input .input-native { color: #e1e3e6; } [data-theme=dark] .qdnapro-sidebar qdnapro-input .input-native::placeholder { color: #a6aab3; } .qdnapro-slider { --qs-track: var(--c-grey-100, #e7e9ec); --qs-fill: var(--c-purple-500, #40499a); --qs-dot: var(--c-grey-300, #c4c7cc); --qs-dot-active: var(--c-purple-500, #40499a); --qs-default-marker: var(--c-grey-400, #a6aab3); --qs-handle: #fff; --qs-handle-border: var(--c-purple-500, #40499a); --qs-handle-glow: var(--c-action-500, #4652f3); display: flex; align-items: center; gap: 10px; box-sizing: border-box; padding: 6px 4px; user-select: none; -webkit-user-select: none; touch-action: none; font-family: var(--theme-font-family, "Inter", sans-serif); } .qdnapro-slider.qdnapro-slider--neutral { --qs-track: var(--c-grey-50, #f0f1f2); --qs-fill: var(--c-grey-400, #a6aab3); --qs-dot-active: var(--c-grey-400, #a6aab3); --qs-handle-border: var(--c-grey-400, #a6aab3); --qs-handle-glow: var(--c-grey-300, #c4c7cc); } .qdnapro-slider.qdnapro-slider--sentiment .qs-track { background: linear-gradient(90deg, var(--c-warn-red-500, #dc2626), var(--c-warn-yellow-500, #fbbf24), var(--c-success-bright, #1d9e75)); } .qdnapro-slider.qdnapro-slider--sentiment .qs-fill { background: transparent; } .qdnapro-slider.qdnapro-slider--sentiment { --qs-handle-border: var(--c-grey-700, #40444d); --qs-handle-glow: var(--c-grey-400, #a6aab3); --qs-dot: rgba(255, 255, 255, 0.6); --qs-dot-active: #fff; } .qdnapro-slider.qdnapro-slider--highlight { --qs-track: var(--c-bg-subtle-purple, #f3f5ff); --qs-fill: var(--c-purple-highlight, #4652f3); --qs-dot-active: var(--c-purple-highlight, #4652f3); --qs-handle-border: var(--c-purple-highlight, #4652f3); --qs-handle-glow: var(--c-purple-highlight, #4652f3); } .qdnapro-slider .qs-icon { flex-shrink: 0; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; color: var(--c-text-muted, #6b7280); } .qdnapro-slider .qs-icon svg { width: 100%; height: 100%; fill: currentColor; } .qdnapro-slider .qs-track { position: relative; flex: 1; min-width: 0; height: 6px; margin: 14px 0; border-radius: 999px; background: var(--qs-track); } .qdnapro-slider .qs-fill { position: absolute; top: 0; height: 100%; border-radius: 999px; background: var(--qs-fill); } .qdnapro-slider .qs-dot { position: absolute; top: 50%; width: 5px; height: 5px; margin-left: -2.5px; margin-top: -2.5px; border-radius: 50%; background: var(--qs-dot); pointer-events: none; transition: background 120ms ease-out, transform 120ms ease-out; } .qdnapro-slider .qs-dot.is-active { background: var(--qs-dot-active); transform: scale(1.15); } .qdnapro-slider .qs-default-marker { position: absolute; top: 50%; width: 2px; height: 12px; margin-left: -1px; margin-top: -6px; border-radius: 1px; background: var(--qs-default-marker); pointer-events: none; z-index: 1; } .qdnapro-slider .qs-handle { position: absolute; top: 50%; width: 18px; height: 18px; margin-left: -9px; padding: 0; transform: translateY(-50%); border-radius: 50%; background: var(--qs-handle); border: 2px solid var(--qs-handle-border); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); cursor: grab; z-index: 2; transition: box-shadow 140ms ease-out, transform 120ms ease-out; } .qdnapro-slider .qs-handle:hover { box-shadow: 0 0 0 6px color-mix(in srgb, var(--qs-handle-glow) 25%, transparent), 0 1px 3px rgba(0, 0, 0, 0.18); } .qdnapro-slider .qs-handle:active, .qdnapro-slider.is-dragging .qs-handle { cursor: grabbing; transform: translateY(-50%) scale(1.08); } .qdnapro-slider .qs-handle:focus { outline: none; } .qdnapro-slider .qs-handle:focus-visible { box-shadow: 0 0 0 4px color-mix(in srgb, var(--qs-handle-glow) 25%, transparent), 0 1px 3px rgba(0, 0, 0, 0.18); } .qdnapro-slider .qs-handle qdnapro-tooltip { position: absolute; bottom: calc(100% + 8px); left: 50%; z-index: 3; pointer-events: none; transform: translateX(-50%) scale(0.92); } .qdnapro-slider .qs-handle qdnapro-tooltip.tooltip-visible { transform: translateX(-50%) scale(1); } .qdnapro-slider .qs-input { flex-shrink: 0; width: 68px; } .qdnapro-slider.qdnapro-slider--touch .qs-track { height: 10px; margin: 22px 0; } .qdnapro-slider.qdnapro-slider--touch .qs-handle { width: 44px; height: 44px; margin-left: -22px; border-width: 3px; } .qdnapro-slider.qdnapro-slider--touch .qs-dot { width: 7px; height: 7px; margin-left: -3.5px; margin-top: -3.5px; } .qdnapro-slider.qdnapro-slider--touch .qs-icon { width: 28px; height: 28px; } .qdnapro-slider.qdnapro-slider--touch .qs-default-marker { width: 3px; height: 18px; margin-left: -1.5px; margin-top: -9px; } .qdnapro-slider.is-disabled { opacity: 0.5; pointer-events: none; } [data-theme=dark] .qdnapro-slider { --qs-track: var(--c-grey-700, #40444d); --qs-dot: var(--c-grey-500, #6b7280); --qs-default-marker: var(--c-grey-300, #c4c7cc); --qs-handle: var(--c-grey-100, #e7e9ec); --qs-handle-border: var(--c-purple-300, #8a92d0); --qs-handle-glow: var(--c-purple-200, #a5acff); } [data-theme=dark] .qdnapro-slider.qdnapro-slider--neutral { --qs-track: var(--c-grey-700, #40444d); --qs-fill: var(--c-grey-400, #a6aab3); --qs-dot-active: var(--c-grey-300, #c4c7cc); --qs-handle-border: var(--c-grey-300, #c4c7cc); --qs-handle-glow: var(--c-grey-500, #6b7280); } [data-theme=dark] .qdnapro-slider.qdnapro-slider--sentiment { --qs-handle-border: var(--c-grey-300, #c4c7cc); --qs-handle-glow: var(--c-grey-500, #6b7280); } /* ============================================================ Skeleton loader — central CSS for all v1 pages that show a skeleton while data loads. Same shimmer / .sk-bone vocabulary as the homepage-mockup proto so every page lookt consistent. (Kim 2026-05-29.) Usage: ...
Toggle visibility by adding / removing `is-skeleton-loading` on the body. The page-specific layout (.sk-card shape, grid columns, etc.) lives in the page's own stylesheet — only the bone / shimmer primitives live here. ============================================================ */ @keyframes sk-shimmer { 0% { background-position: -800px 0; } 100% { background-position: 800px 0; } } /* Page-default — light theme. Dark mode overrides below. */ body { --sk-base: #cdd0ef; --sk-shine: #dcdff6; --sk-card-bg: #e2e5f8; } body[data-theme=dark] { --sk-base: #1e1f2e; --sk-shine: #262840; --sk-card-bg: #14151f; } /* The bone — single shimmer-painted rectangle. Compose into page-specific skeleton shapes by stacking these inside .sk-card wrappers (page-side). */ .sk-bone { background: linear-gradient(90deg, var(--sk-base) 25%, var(--sk-shine) 50%, var(--sk-base) 75%); background-size: 800px 100%; animation: sk-shimmer 1.5s infinite linear; border-radius: 4px; } /* Generic skeleton card chrome — page can override grid layout and individual card dimensions. Pages that want a different look can skip this class and style their own wrapper. */ .sk-card { background: var(--sk-card-bg); border: 1px solid rgba(64, 73, 154, 0.12); border-radius: 12px; padding: 0; display: flex; flex-direction: column; overflow: hidden; } @media (prefers-reduced-motion: reduce) { .sk-bone { animation: none; } } /* ============================================================ qdnapro-skeleton-bone — atomic shimmer placeholder. The shimmer paint (.sk-bone, @keyframes sk-shimmer) and the --sk-* color vars live in skeleton/_skeleton-compiled.css and are NOT duplicated here. This file only makes the custom element a block box and adds the circle/pill radius modifiers. The shape overrides beat .sk-bone's 4px on specificity (type + class), so bundle source-order does not matter. (Kim 2026-05-30) ============================================================ */ qdnapro-skeleton-bone { display: block; flex-shrink: 0; } qdnapro-skeleton-bone.skeleton-bone-circle { border-radius: 50%; } qdnapro-skeleton-bone.skeleton-bone-pill { border-radius: 999px; } qdnapro-skeleton-inbox-row { box-sizing: border-box; display: flex; align-items: stretch; gap: 8px; padding: 4px 8px; border-radius: 8px; opacity: 0; animation: ski-row-enter 240ms cubic-bezier(0.34, 1.56, 0.64, 1) both; } qdnapro-skeleton-inbox-row:nth-of-type(1) { animation-delay: 0ms; } qdnapro-skeleton-inbox-row:nth-of-type(2) { animation-delay: 25ms; } qdnapro-skeleton-inbox-row:nth-of-type(3) { animation-delay: 50ms; } qdnapro-skeleton-inbox-row:nth-of-type(4) { animation-delay: 75ms; } qdnapro-skeleton-inbox-row:nth-of-type(5) { animation-delay: 100ms; } qdnapro-skeleton-inbox-row:nth-of-type(6) { animation-delay: 125ms; } qdnapro-skeleton-inbox-row:nth-of-type(7) { animation-delay: 150ms; } qdnapro-skeleton-inbox-row:nth-of-type(8) { animation-delay: 175ms; } qdnapro-skeleton-inbox-row:nth-of-type(9) { animation-delay: 200ms; } qdnapro-skeleton-inbox-row:nth-of-type(10) { animation-delay: 225ms; } qdnapro-skeleton-inbox-row:nth-of-type(11) { animation-delay: 250ms; } qdnapro-skeleton-inbox-row:nth-of-type(12) { animation-delay: 275ms; } qdnapro-skeleton-inbox-row:nth-of-type(n + 13) { animation-delay: 0ms; } @keyframes ski-row-enter { 0% { opacity: 0; transform: translateY(6px); } 100% { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { qdnapro-skeleton-inbox-row { animation: none; opacity: 1; } } qdnapro-skeleton-inbox-row .ski-lead { flex-shrink: 0; display: flex; align-items: flex-start; justify-content: flex-end; width: 50px; padding-top: 4px; } qdnapro-skeleton-inbox-row .ski-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0; padding: 4px 0; } qdnapro-skeleton-inbox-row .ski-row-1 { display: flex; align-items: center; height: 24px; } qdnapro-skeleton-inbox-row .ski-row-2 { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 24px; margin-top: -2px; } qdnapro-skeleton-inbox-row .ski-row-3 { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 20px; margin-top: -2px; } /* ============================================================ qdnapro-skeleton-project-card — composes skeleton-bone atoms into a project-card-shaped loading placeholder. Mirrors the original .pv2-skeleton-card chrome so the skeleton -> real card swap has zero layout shift (same 12px radius, 1px border, 208px min-height, 158px photo block). Card surface color comes from --sk-card-bg in skeleton/_skeleton-compiled.css. (Kim 2026-05-30) ============================================================ */ qdnapro-skeleton-project-card { display: flex; flex-direction: column; overflow: hidden; min-height: 208px; background: var(--sk-card-bg); border: 1px solid rgba(64, 73, 154, 0.12); border-radius: 12px; } /* Photo block fills the top edge-to-edge; the card's own radius + overflow:hidden clips the corners, so the bone itself has no radius. Beats .sk-bone's 4px on specificity (type + class + :first-child). */ qdnapro-skeleton-project-card > .sk-bone:first-child { border-radius: 0; } qdnapro-skeleton-project-card .ssp-body { flex: 1; display: flex; align-items: center; gap: 12px; padding: 12px; } qdnapro-skeleton-project-card .ssp-spacer { flex: 1; } .text-h1 { font-family: "Inter", sans-serif; letter-spacing: 0; font-weight: 600; font-size: 60px; line-height: 72px; } .text-h2 { font-family: "Inter", sans-serif; letter-spacing: 0; font-weight: 600; font-size: 40px; line-height: 56px; } .text-h3 { font-family: "Inter", sans-serif; letter-spacing: 0; font-weight: 600; font-size: 32px; line-height: 48px; } .text-h4 { font-family: "Inter", sans-serif; letter-spacing: 0; font-weight: 600; font-size: 28px; line-height: 44px; } .text-h5 { font-family: "Inter", sans-serif; letter-spacing: 0; font-weight: 600; font-size: 24px; line-height: 36px; } .text-h6 { font-family: "Inter", sans-serif; letter-spacing: 0; font-weight: 600; font-size: 20px; line-height: 24px; } .text-body-xs { font-family: "Inter", sans-serif; letter-spacing: 0; font-weight: 400; font-size: 10px; line-height: 20px; } .text-body-sm { font-family: "Inter", sans-serif; letter-spacing: 0; font-weight: 400; font-size: 12px; line-height: 20px; } .text-body-md { font-family: "Inter", sans-serif; letter-spacing: 0; font-weight: 400; font-size: 14px; line-height: 24px; } .text-body-lg { font-family: "Inter", sans-serif; letter-spacing: 0; font-weight: 400; font-size: 16px; line-height: 24px; } .text-body-xl { font-family: "Inter", sans-serif; letter-spacing: 0; font-weight: 400; font-size: 20px; line-height: 32px; } .qdnapro-source-pill { display: inline-flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 4px; box-sizing: border-box; font-family: "Inter", sans-serif; font-size: 12px; line-height: 20px; font-weight: 500; color: #6b7280; background: #f0f1f2; transition: background-color 120ms ease-out; user-select: none; } .qdnapro-source-pill[role=button]:hover, .qdnapro-source-pill.force-hover { background: #e4e6e8; } .qdnapro-source-pill[role=button]:active, .qdnapro-source-pill.force-pressed { background: #c4c7cc; } .qdnapro-source-pill.source-pill-type-text { gap: 0; } .qdnapro-source-pill .source-pill-leading { display: inline-flex; align-items: center; flex-shrink: 0; } .qdnapro-source-pill qdnapro-file-icon.source-pill-leading { width: 16px; height: 16px; } .qdnapro-source-pill qdnapro-file-icon.source-pill-leading .qdnapro-file-icon-badge { display: none; } .qdnapro-source-pill .source-pill-favicon { width: 16px; height: 17px; border-radius: 100px; border: 1px solid #c4c7cc; overflow: hidden; background: #f5f6f8; position: relative; } .qdnapro-source-pill .source-pill-favicon img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 120ms ease; } .qdnapro-source-pill .source-pill-favicon-letter { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 600; color: #6b7280; text-transform: uppercase; line-height: 1; z-index: 0; user-select: none; } .qdnapro-source-pill .source-pill-favicon-fallback { background: #d6d8de; } .qdnapro-source-pill .source-pill-favicon-fallback img { display: none; } .qdnapro-source-pill .source-pill-stack { display: inline-flex; align-items: center; padding-right: 6px; } .qdnapro-source-pill .source-pill-stack-item { width: 16px; height: 17px; border-radius: 100px; border: 1px solid #c4c7cc; background: #f5f6f8; margin-right: -6px; overflow: hidden; position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .qdnapro-source-pill .source-pill-stack-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 120ms ease; } .qdnapro-source-pill .source-pill-stack-item .source-pill-favicon-letter { font-size: 8px; } .qdnapro-source-pill .source-pill-stack-fallback { background: #d6d8de; } .qdnapro-source-pill .source-pill-stack-fallback img { display: none; } .qdnapro-source-pill .source-pill-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; } .qdnapro-source-pill[role=button] { cursor: pointer; } .qdnapro-source-pill:focus { outline: none; } .qdnapro-source-pill[role=button]:focus-visible, .qdnapro-source-pill.force-focus { outline: 2px solid #40499a; outline-offset: 2px; } [data-theme=dark] .qdnapro-source-pill { color: #a6aab3; background: #2e3036; } [data-theme=dark] .qdnapro-source-pill[role=button]:hover, [data-theme=dark] .qdnapro-source-pill.force-hover { background: #40444d; } [data-theme=dark] .qdnapro-source-pill[role=button]:active, [data-theme=dark] .qdnapro-source-pill.force-pressed { background: #565b66; } [data-theme=dark] .qdnapro-source-pill .source-pill-favicon, [data-theme=dark] .qdnapro-source-pill .source-pill-stack-item { background: #1f2028; border-color: #565b66; } [data-theme=dark] .qdnapro-source-pill .source-pill-favicon-fallback, [data-theme=dark] .qdnapro-source-pill .source-pill-stack-fallback { background: #565b66; } qdnapro-star-rating { --c-focus-ring: #40499a; --c-focus-glow: rgba(70, 82, 243, 0.25); display: inline-flex; align-items: center; gap: 2px; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; } qdnapro-star-rating .star-rating-star { color: #c7c9d1; transition: color 120ms ease, transform 120ms cubic-bezier(0.34, 1.56, 0.64, 1); } qdnapro-star-rating .star-rating-star-filled { color: #ffd54a; } qdnapro-star-rating:not(.star-rating-readonly) .star-rating-star:hover { transform: scale(1.15); } qdnapro-star-rating:focus { outline: none; } qdnapro-star-rating:focus-visible { outline: none; border-radius: 4px; box-shadow: 0 0 0 2px var(--c-focus-ring), 0 0 0 6px var(--c-focus-glow); } qdnapro-star-rating.star-rating-readonly { cursor: default; } [data-theme=dark] qdnapro-star-rating { --c-focus-ring: #a5acff; --c-focus-glow: rgba(165, 172, 255, 0.40); } [data-theme=dark] qdnapro-star-rating .star-rating-star { color: #4a4e5c; } [data-theme=dark] qdnapro-star-rating .star-rating-star-filled { color: #ffd54a; } .qdnapro-stat-card { --sc-accent: #40499a; --sc-soft: #f3f5ff; --sc-border: #d7daf0; flex: 1; min-width: 0; min-height: 80px; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--c-bg-card); border: 1px solid var(--c-border-soft-2); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); cursor: pointer; font-family: inherit; -webkit-tap-highlight-color: transparent; transition: box-shadow 160ms ease, transform 160ms cubic-bezier(0.4, 0, 0.2, 1), border-color 140ms ease, background-color 140ms ease; } .qdnapro-stat-card.stat-card-tone-purple { --sc-accent: #40499a; --sc-soft: #f3f5ff; --sc-border: #d7daf0; } .qdnapro-stat-card.stat-card-tone-red { --sc-accent: #e5484d; --sc-soft: #fdf1f1; --sc-border: #f6d2d3; } .qdnapro-stat-card.stat-card-tone-green { --sc-accent: #1f9d6b; --sc-soft: #eafaf2; --sc-border: #c8ecdb; } .qdnapro-stat-card.stat-card-tone-blue { --sc-accent: #3b82f6; --sc-soft: #eef4ff; --sc-border: #cfe0fd; } .qdnapro-stat-card.stat-card-tone-orange { --sc-accent: #ef8e02; --sc-soft: #fff6e8; --sc-border: #fbe1b8; } .qdnapro-stat-card.stat-card-tone-gray { --sc-accent: #6b7280; --sc-soft: #f3f4f6; --sc-border: #dadce0; } .qdnapro-stat-card .stat-card-icon { width: 34px; height: 34px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 9px; } .qdnapro-stat-card .stat-card-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .qdnapro-stat-card .stat-card-value { font-size: 20px; font-weight: 600; color: var(--c-text-heading); line-height: 1.1; white-space: nowrap; } .qdnapro-stat-card .stat-card-label { font-size: 11px; font-weight: 500; color: var(--c-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .qdnapro-stat-card.stat-card-variant-accent { background: var(--sc-soft); border-color: var(--sc-border); box-shadow: none; } .qdnapro-stat-card.stat-card-variant-accent .stat-card-icon { width: 40px; height: 40px; background: var(--c-bg-card); border-radius: 10px; box-shadow: 0 1px 2px rgba(20, 25, 80, 0.1); } .qdnapro-stat-card.stat-card-variant-accent .stat-card-value { font-size: 22px; } .qdnapro-stat-card.stat-card-variant-accent .stat-card-label { color: var(--sc-accent); } .qdnapro-stat-card.stat-card-variant-empty { background: var(--c-bg-card); border: 1.5px dashed #c5caea; box-shadow: none; } .qdnapro-stat-card.stat-card-variant-empty .stat-card-icon { background: var(--sc-soft); opacity: 0.55; } .qdnapro-stat-card.stat-card-variant-empty .stat-card-value { display: none; } .qdnapro-stat-card.stat-card-variant-empty .stat-card-label { font-size: 16px; font-weight: 500; color: #8492b4; transition: color 140ms ease; } .qdnapro-stat-card .stat-card-sub { font-size: 12px; font-weight: 500; color: #b0bad8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 140ms ease; } .qdnapro-stat-card.stat-card-variant-empty:not(.stat-card-disabled):hover { border-color: #7d88d0; box-shadow: none; transform: translateY(-2px); } .qdnapro-stat-card.stat-card-variant-empty:not(.stat-card-disabled):hover .stat-card-label { color: #40499a; } .qdnapro-stat-card.stat-card-variant-empty:not(.stat-card-disabled):hover .stat-card-sub { color: #7d88d0; } .qdnapro-stat-card.stat-card-warning { --sc-accent: #ef8e02; --sc-soft: #fff6e8; --sc-border: #fbe1b8; } .qdnapro-stat-card.stat-card-warning.stat-card-variant-empty { border-color: #f2a93a; } .qdnapro-stat-card.stat-card-warning.stat-card-variant-empty .stat-card-icon { opacity: 1; } .qdnapro-stat-card.stat-card-warning .stat-card-sub { color: #c2780a; } .qdnapro-stat-card.stat-card-warning.stat-card-variant-empty .stat-card-label { color: #a8670a; } .qdnapro-stat-card.stat-card-warning.stat-card-variant-empty:not(.stat-card-disabled):hover { border-color: #ef8e02; } .qdnapro-stat-card.stat-card-warning.stat-card-variant-empty:not(.stat-card-disabled):hover .stat-card-label { color: #8a5500; } .qdnapro-stat-card.stat-card-warning.stat-card-variant-empty:not(.stat-card-disabled):hover .stat-card-sub { color: #a8670a; } .qdnapro-stat-card:not(.stat-card-disabled):hover { border-color: var(--sc-accent); box-shadow: 0 4px 14px rgba(20, 25, 80, 0.1); transform: translateY(-2px); } .qdnapro-stat-card.stat-card-variant-accent:not(.stat-card-disabled):hover { box-shadow: 0 6px 18px rgba(20, 25, 80, 0.12); } .qdnapro-stat-card:not(.stat-card-disabled):active { transform: translateY(0) scale(0.985); box-shadow: 0 1px 2px rgba(20, 25, 80, 0.12); transition-duration: 60ms; } .qdnapro-stat-card:focus { outline: none; } .qdnapro-stat-card:not(.stat-card-disabled):focus-visible { outline: none; border-color: var(--sc-accent); box-shadow: 0 0 0 4px var(--focus-glow); } .qdnapro-stat-card.stat-card-disabled { opacity: 0.5; pointer-events: none; cursor: not-allowed; } .qdnapro-stat-card-row { display: flex; gap: 10px; min-width: 0; } [data-theme=dark] .qdnapro-stat-card, [data-theme-dark] .qdnapro-stat-card { background: #2a2d36; border-color: var(--c-white-08); } [data-theme=dark] .qdnapro-stat-card .stat-card-value, [data-theme-dark] .qdnapro-stat-card .stat-card-value { color: #f0f1fa; } [data-theme=dark] .qdnapro-stat-card .stat-card-label, [data-theme-dark] .qdnapro-stat-card .stat-card-label { color: rgba(255, 255, 255, 0.45); } [data-theme=dark] .qdnapro-stat-card.stat-card-variant-accent, [data-theme-dark] .qdnapro-stat-card.stat-card-variant-accent { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.1); } [data-theme=dark] .qdnapro-stat-card.stat-card-variant-accent .stat-card-icon, [data-theme-dark] .qdnapro-stat-card.stat-card-variant-accent .stat-card-icon { background: rgba(255, 255, 255, 0.1); box-shadow: none; } .qdnapro-suggestion-chip { --c-focus-ring: #40499a; --c-focus-glow: rgba(70, 82, 243, 0.25); display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; background: transparent; border: 1px solid #c4c7cc; border-radius: 16px; font-family: "Inter", sans-serif; font-size: 12px; line-height: 16px; font-weight: 500; color: #0b0b0d; cursor: pointer; user-select: none; transition: background-color 120ms ease-out, border-color 120ms ease-out, color 120ms ease-out, box-shadow 120ms ease-out; box-sizing: border-box; } .qdnapro-suggestion-chip .suggestion-chip-icon { width: 16px; height: 16px; flex-shrink: 0; } .qdnapro-suggestion-chip .suggestion-chip-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; } .qdnapro-suggestion-chip:focus { outline: none; } .qdnapro-suggestion-chip:focus-visible, .qdnapro-suggestion-chip.force-focus { outline: none; box-shadow: 0 0 0 2px var(--c-focus-ring), 0 0 0 6px var(--c-focus-glow); } .qdnapro-suggestion-chip.suggestion-chip-theme-purple:hover:not(.suggestion-chip-disabled), .qdnapro-suggestion-chip.suggestion-chip-theme-purple.force-hover:not(.suggestion-chip-disabled) { background: #e6e9ff; border-color: #aab0d8; color: #40499a; } .qdnapro-suggestion-chip.suggestion-chip-theme-purple:active:not(.suggestion-chip-disabled), .qdnapro-suggestion-chip.suggestion-chip-theme-purple.force-pressed:not(.suggestion-chip-disabled) { background: #c7cce8; border-color: #40499a; color: #40499a; } .qdnapro-suggestion-chip.suggestion-chip-theme-orange:hover:not(.suggestion-chip-disabled), .qdnapro-suggestion-chip.suggestion-chip-theme-orange.force-hover:not(.suggestion-chip-disabled) { background: #fff3e0; border-color: #f5b770; color: #945800; } .qdnapro-suggestion-chip.suggestion-chip-theme-orange:active:not(.suggestion-chip-disabled), .qdnapro-suggestion-chip.suggestion-chip-theme-orange.force-pressed:not(.suggestion-chip-disabled) { background: #ffe4ba; border-color: #F58F06; color: #945800; } .qdnapro-suggestion-chip.suggestion-chip-disabled, .qdnapro-suggestion-chip.suggestion-chip-disabled:hover, .qdnapro-suggestion-chip.suggestion-chip-disabled:active { color: #898e99; background: transparent; border-color: #e1e3e6; cursor: not-allowed; pointer-events: none; } [data-theme=dark] .qdnapro-suggestion-chip { border-color: #565b66; color: #f0f1f2; } [data-theme=dark] .qdnapro-suggestion-chip.suggestion-chip-theme-purple:hover:not(.suggestion-chip-disabled), [data-theme=dark] .qdnapro-suggestion-chip.suggestion-chip-theme-purple.force-hover:not(.suggestion-chip-disabled) { background: rgba(70, 82, 243, 0.3); border-color: #7c84c5; color: #ffffff; } [data-theme=dark] .qdnapro-suggestion-chip.suggestion-chip-theme-purple:active:not(.suggestion-chip-disabled), [data-theme=dark] .qdnapro-suggestion-chip.suggestion-chip-theme-purple.force-pressed:not(.suggestion-chip-disabled) { background: rgba(70, 82, 243, 0.45); border-color: #a5acff; color: #ffffff; } [data-theme=dark] .qdnapro-suggestion-chip.suggestion-chip-theme-orange:hover:not(.suggestion-chip-disabled), [data-theme=dark] .qdnapro-suggestion-chip.suggestion-chip-theme-orange.force-hover:not(.suggestion-chip-disabled) { background: rgba(245, 143, 6, 0.25); border-color: #c97e22; color: #ffe4ba; } [data-theme=dark] .qdnapro-suggestion-chip.suggestion-chip-theme-orange:active:not(.suggestion-chip-disabled), [data-theme=dark] .qdnapro-suggestion-chip.suggestion-chip-theme-orange.force-pressed:not(.suggestion-chip-disabled) { background: rgba(245, 143, 6, 0.4); border-color: #f5b770; color: #ffffff; } [data-theme=dark] .qdnapro-suggestion-chip.suggestion-chip-disabled, [data-theme=dark] .qdnapro-suggestion-chip.suggestion-chip-disabled:hover, [data-theme=dark] .qdnapro-suggestion-chip.suggestion-chip-disabled:active { color: #6b7280; border-color: #3a3b42; } qdnapro-table { display: flex; flex-direction: column; min-height: 0; } .qdnapro-table-wrapper { position: relative; width: 100%; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: auto; border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } .qdnapro-table-spinner { position: absolute; inset: 0; z-index: 10; display: none; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.65); border-radius: 8px; pointer-events: none; } .qdnapro-table-spinner:not([hidden]) { display: flex; } .qdnapro-table-spinner::after { content: ""; width: 28px; height: 28px; border: 3px solid #e5e7eb; border-top-color: #1a56db; border-radius: 50%; animation: qdnapro-table-spin 0.65s linear infinite; } @keyframes qdnapro-table-spin { to { transform: rotate(360deg); } } .qdnapro-table-sentinel { height: 1px; pointer-events: none; } .qdnapro-table-list { width: 100%; border-collapse: collapse; background: #ffffff; font-size: 14px; } .qdnapro-table-list thead th { position: sticky; top: 0; z-index: 2; padding: 10px 16px; background: #f8f9fb; color: #6b7280; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; text-align: left; border-bottom: 1px solid #e5e7eb; user-select: none; } .qdnapro-table-list thead th.col-checkbox { width: 44px; padding: 10px 12px; } .qdnapro-table-list thead th.is-sortable { cursor: pointer; } .qdnapro-table-list thead th.is-sortable:hover { background: #f1f3f5; } .qdnapro-table-list thead th.is-sortable:hover .col-sort-icon { opacity: 1; } .qdnapro-table-list thead th.is-sortable.is-sorted { color: #1a56db; } .qdnapro-table-list thead th.is-sortable.is-sorted .col-sort-icon { opacity: 1; color: #1a56db; } .qdnapro-table-list thead th.is-orderable { cursor: grab; } .qdnapro-table-list thead th.is-orderable:active { cursor: grabbing; } .qdnapro-table-list thead th.is-dragging { opacity: 0.4; } .qdnapro-table-list thead th.drop-before { box-shadow: inset 2px 0 0 0 #1a56db; } .qdnapro-table-list thead th.drop-after { box-shadow: inset -2px 0 0 0 #1a56db; } .qdnapro-table-list thead th .col-header-content { display: inline-flex; align-items: center; gap: 4px; } .qdnapro-table-list thead th .col-sort-icon { flex-shrink: 0; opacity: 0.4; transition: opacity 0.15s; } .qdnapro-table-list thead th .col-sort-icon svg { width: 14px; height: 14px; fill: currentColor !important; } .qdnapro-table-list th.col-sticky, .qdnapro-table-list td.col-sticky { position: sticky; left: 0; z-index: 1; box-shadow: inset -1px 0 0 #e5e7eb; } .qdnapro-table-list td.col-sticky { background: #ffffff; } .qdnapro-table-list thead th.col-sticky { z-index: 3; } .qdnapro-table-list tbody tr:hover td.col-sticky { background: #f9fafb; } .qdnapro-table-list tbody tr.is-selected td.col-sticky { background: #eff6ff; } .qdnapro-table-list qdnapro-checkbox { --cb-bg: #ffffff; --cb-bg-hover: #f0f1f2; --cb-border: #c4c7cc; --cb-filled-bg: #4652f3; --cb-filled-border: #4652f3; --cb-mark: #ffffff; } .qdnapro-table-list tbody tr { border-bottom: 1px solid #f3f4f6; transition: background 0.1s; } .qdnapro-table-list tbody tr:last-child { border-bottom: none; } .qdnapro-table-list tbody tr:hover { background: #f9fafb; } .qdnapro-table-list tbody tr.is-selected { background: #eff6ff; } .qdnapro-table-list tbody tr.is-clickable { cursor: pointer; } .qdnapro-table-list tbody tr.qdnapro-table-empty-row td.col-empty { text-align: center; padding: 52px 16px; color: #9ca3af; font-size: 14px; } .qdnapro-table-list tbody td { padding: 11px 16px; vertical-align: middle; color: #111827; font-size: 14px; } .qdnapro-table-list tbody td.col-checkbox { width: 44px; padding: 11px 12px; } .qdnapro-table-list tbody td .col-number { font-variant-numeric: tabular-nums; } .qdnapro-table-list tbody td .col-thumbnail { display: inline-flex; align-items: center; } .qdnapro-table-list tbody td .col-thumbnail img { width: 36px; height: 36px; object-fit: cover; border-radius: 4px; background: #f3f4f6; display: block; } .qdnapro-table-list tbody td .col-thumbnail-text { display: inline-flex; align-items: center; gap: 10px; } .qdnapro-table-list tbody td .col-thumbnail-text img, .qdnapro-table-list tbody td .col-thumbnail-text qdnapro-avatar { flex-shrink: 0; width: 36px; height: 36px; object-fit: cover; border-radius: 4px; background: #f3f4f6; } .qdnapro-table-list tbody td .col-thumbnail-text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .qdnapro-table-list tbody td .col-icon-text { display: inline-flex; align-items: center; gap: 7px; } .qdnapro-table-list tbody td .col-avatar { display: inline-flex; } .qdnapro-table-list tbody td .col-avatar img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: #e5e7eb; } .qdnapro-table-list tbody td .col-avatar img.is-empty { background: #f3f4f6; } .qdnapro-table-grid { display: none; gap: 16px; padding: 16px; } .qdnapro-table-grid:not([hidden]) { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } .qdnapro-table-grid-empty { width: 100%; text-align: center; padding: 52px 16px; color: #9ca3af; font-size: 14px; } .qdnapro-table-card { display: flex; flex-direction: column; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07); overflow: hidden; width: auto; transition: box-shadow 0.15s, border-color 0.15s; } .qdnapro-table-card.is-clickable { cursor: pointer; } .qdnapro-table-card.is-clickable:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.11); border-color: #d1d5db; } .qdnapro-table-card.is-selected { border-color: #1a56db; background: #eff6ff; } .qdnapro-table-card__image { width: 100%; height: 136px; overflow: hidden; background: #f3f4f6; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .qdnapro-table-card__image img { width: 100%; height: 100%; object-fit: cover; display: block; } .qdnapro-table-card__image img.qdnapro-table-card__thumb { object-position: top left; } .qdnapro-table-card__image qdnapro-avatar { width: 112px; height: 112px; border-radius: 50%; overflow: hidden; flex-shrink: 0; } .qdnapro-table-card__image qdnapro-avatar img { width: 100%; height: 100%; object-fit: cover; } .qdnapro-table-card__body { display: flex; flex-direction: column; gap: 3px; padding: 14px 15px; flex: 1; } .qdnapro-table-card__title { font-size: 14px; font-weight: 600; color: #111827; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .qdnapro-table-card__subtitle { font-size: 12.5px; color: #6b7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .qdnapro-table-card__stats { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 9px; } .qdnapro-table-card__stat { display: flex; flex-direction: column; gap: 1px; } .qdnapro-table-card__stat-label { font-size: 10.5px; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.04em; } .qdnapro-table-card__stat-value { font-size: 13px; color: #374151; font-weight: 500; } .text-h1 { font-family: "Inter", sans-serif; letter-spacing: 0; font-weight: 600; font-size: 60px; line-height: 72px; } .text-h2 { font-family: "Inter", sans-serif; letter-spacing: 0; font-weight: 600; font-size: 40px; line-height: 56px; } .text-h3 { font-family: "Inter", sans-serif; letter-spacing: 0; font-weight: 600; font-size: 32px; line-height: 48px; } .text-h4 { font-family: "Inter", sans-serif; letter-spacing: 0; font-weight: 600; font-size: 28px; line-height: 44px; } .text-h5 { font-family: "Inter", sans-serif; letter-spacing: 0; font-weight: 600; font-size: 24px; line-height: 36px; } .text-h6 { font-family: "Inter", sans-serif; letter-spacing: 0; font-weight: 600; font-size: 20px; line-height: 24px; } .text-body-xs { font-family: "Inter", sans-serif; letter-spacing: 0; font-weight: 400; font-size: 10px; line-height: 20px; } .text-body-sm { font-family: "Inter", sans-serif; letter-spacing: 0; font-weight: 400; font-size: 12px; line-height: 20px; } .text-body-md { font-family: "Inter", sans-serif; letter-spacing: 0; font-weight: 400; font-size: 14px; line-height: 24px; } .text-body-lg { font-family: "Inter", sans-serif; letter-spacing: 0; font-weight: 400; font-size: 16px; line-height: 24px; } .text-body-xl { font-family: "Inter", sans-serif; letter-spacing: 0; font-weight: 400; font-size: 20px; line-height: 32px; } .qdnapro-tag { --tag-bg: #f0f1f2; --tag-bg-hover: #e1e3e6; --tag-text: #1e1f20; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; flex-shrink: 0; gap: 4px; padding: 0 8px; border-radius: 16px; background: var(--tag-bg); color: var(--tag-text); font-family: "Inter", sans-serif; font-weight: 600; user-select: none; outline: 2px solid transparent; outline-offset: -2px; transition: background-color 120ms ease; } .qdnapro-tag .tag-icon { display: inline-flex; flex-shrink: 0; color: inherit; pointer-events: none; } .qdnapro-tag .tag-icon svg { fill: currentColor; width: 100%; height: 100%; } .qdnapro-tag .tag-label { line-height: 1; white-space: nowrap; } .qdnapro-tag.tag-size-big { height: 28px; font-size: 14px; line-height: 1; } .qdnapro-tag.tag-size-big .tag-icon { width: 14px; height: 14px; } .qdnapro-tag.tag-size-small { height: 24px; font-size: 12px; line-height: 1; padding: 0 8px; } .qdnapro-tag.tag-size-small .tag-icon { width: 12px; height: 12px; } /* Removable ✕ (selection tokens / removable pills). */ .qdnapro-tag.tag-removable { padding-right: 4px; } .qdnapro-tag .tag-remove { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0; margin: 0; border: 0; background: transparent; color: inherit; cursor: pointer; border-radius: 50%; opacity: 0.6; transition: background-color 120ms ease, opacity 120ms ease; } .qdnapro-tag .tag-remove:hover { opacity: 1; background: rgba(0, 0, 0, 0.1); } .qdnapro-tag .tag-remove:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; } .qdnapro-tag .tag-remove qdnapro-icon { display: inline-flex; pointer-events: none; } .qdnapro-tag .tag-remove qdnapro-icon svg { fill: currentColor; width: 100%; height: 100%; } .qdnapro-tag.tag-size-big .tag-remove { width: 18px; height: 18px; } .qdnapro-tag.tag-size-big .tag-remove qdnapro-icon { width: 14px; height: 14px; } .qdnapro-tag.tag-size-small .tag-remove { width: 16px; height: 16px; } .qdnapro-tag.tag-size-small .tag-remove qdnapro-icon { width: 12px; height: 12px; } .qdnapro-tag.tag-disabled .tag-remove { pointer-events: none; } .qdnapro-tag.tag-color-grey { --tag-bg: #f0f1f2; --tag-bg-hover: #e1e3e6; --tag-text: #1e1f20; } .qdnapro-tag.tag-color-grey-2 { --tag-bg: #c4c7cc; --tag-bg-hover: #a6aab3; --tag-text: #1e1f20; } .qdnapro-tag.tag-color-red { --tag-bg: #fee3e3; --tag-bg-hover: #fcc6c6; --tag-text: #633030; } .qdnapro-tag.tag-color-red-2 { --tag-bg: #fbaaaa; --tag-bg-hover: #f98d8d; --tag-text: #633030; } .qdnapro-tag.tag-color-yellow { --tag-bg: #fef6db; --tag-bg-hover: #feedb8; --tag-text: #655522; } .qdnapro-tag.tag-color-yellow-2 { --tag-bg: #fde594; --tag-bg-hover: #fddc71; --tag-text: #655522; } .qdnapro-tag.tag-color-green { --tag-bg: #e2faf1; --tag-bg-hover: #a8f1d4; --tag-text: #2f5d4a; } .qdnapro-tag.tag-color-green-2 { --tag-bg: #8becc5; --tag-bg-hover: #6ee7b7; --tag-text: #2f5d4a; } .qdnapro-tag.tag-color-blue { --tag-bg: #e6eff9; --tag-bg-hover: #cedef3; --tag-text: #37475a; } .qdnapro-tag.tag-color-blue-2 { --tag-bg: #b5ceed; --tag-bg-hover: #9dbde7; --tag-text: #37475a; } .qdnapro-tag.tag-color-bright-blue { --tag-bg: #85a1ec; --tag-bg-hover: #5d82e5; --tag-text: #192a5a; } .qdnapro-tag.tag-color-bright-blue-2 { --tag-bg: #d6e0f9; --tag-bg-hover: #aec1f2; --tag-text: #192a5a; } .qdnapro-tag.tag-color-pink { --tag-bg: #f6e1e8; --tag-bg-hover: #eec3d0; --tag-text: #562d3a; } .qdnapro-tag.tag-color-dark-pink { --tag-bg: #e5a6b9; --tag-bg-hover: #dd88a1; --tag-text: #562d3a; } .qdnapro-tag.tag-color-purple { --tag-bg: #ebe9fb; --tag-bg-hover: #d8d2f7; --tag-text: #413b5e; } .qdnapro-tag.tag-color-dark-purple { --tag-bg: #c4bcf3; --tag-bg-hover: #b1a5ef; --tag-text: #413b5e; } .qdnapro-tag.tag-interactive { cursor: pointer; } .qdnapro-tag.tag-interactive:hover { background: var(--tag-bg-hover); } .qdnapro-tag.tag-interactive:focus { outline: none; } .qdnapro-tag.tag-interactive:focus-visible, .qdnapro-tag.tag-interactive.force-focus { outline: 2px solid #40499a; outline-offset: -2px; box-shadow: 0 0 0 4px rgba(70, 82, 243, 0.25); } .qdnapro-tag.tag-disabled, .qdnapro-tag.tag-disabled.tag-interactive { --tag-bg: #f0f1f2; --tag-bg-hover: #f0f1f2; --tag-text: #898e99; cursor: not-allowed; } .qdnapro-tag.tag-disabled:focus-visible, .qdnapro-tag.tag-disabled.force-focus, .qdnapro-tag.tag-disabled.tag-interactive:focus-visible, .qdnapro-tag.tag-disabled.tag-interactive.force-focus { outline: 2px solid transparent; box-shadow: none; } [data-theme=dark] .qdnapro-tag.tag-color-grey { --tag-bg: #565b66; --tag-bg-hover: #6b7180; --tag-text: #e1e3e6; } [data-theme=dark] .qdnapro-tag.tag-color-grey-2 { --tag-bg: #40444d; --tag-bg-hover: #54596b; --tag-text: #e1e3e6; } [data-theme=dark] .qdnapro-tag.tag-color-red { --tag-bg: #5a2b2b; --tag-bg-hover: #7a3838; --tag-text: #fbaaaa; } [data-theme=dark] .qdnapro-tag.tag-color-red-2 { --tag-bg: #7a3838; --tag-bg-hover: #9a4747; --tag-text: #fee3e3; } [data-theme=dark] .qdnapro-tag.tag-color-yellow { --tag-bg: #5a4d1f; --tag-bg-hover: #7a6b2d; --tag-text: #fde594; } [data-theme=dark] .qdnapro-tag.tag-color-yellow-2 { --tag-bg: #7a6b2d; --tag-bg-hover: #9a8a3b; --tag-text: #fef6db; } [data-theme=dark] .qdnapro-tag.tag-color-green { --tag-bg: #2a5544; --tag-bg-hover: #3d7a62; --tag-text: #8becc5; } [data-theme=dark] .qdnapro-tag.tag-color-green-2 { --tag-bg: #3d7a62; --tag-bg-hover: #4d9c7c; --tag-text: #e2faf1; } [data-theme=dark] .qdnapro-tag.tag-color-blue { --tag-bg: #2e3e54; --tag-bg-hover: #445a78; --tag-text: #b5ceed; } [data-theme=dark] .qdnapro-tag.tag-color-blue-2 { --tag-bg: #445a78; --tag-bg-hover: #5a7596; --tag-text: #e6eff9; } [data-theme=dark] .qdnapro-tag.tag-color-bright-blue { --tag-bg: #3a4a8a; --tag-bg-hover: #4d5fae; --tag-text: #d6e0f9; } [data-theme=dark] .qdnapro-tag.tag-color-bright-blue-2 { --tag-bg: #2a3560; --tag-bg-hover: #3a4a8a; --tag-text: #85a1ec; } [data-theme=dark] .qdnapro-tag.tag-color-pink { --tag-bg: #4e2a36; --tag-bg-hover: #6e3d50; --tag-text: #e5a6b9; } [data-theme=dark] .qdnapro-tag.tag-color-dark-pink { --tag-bg: #6e3d50; --tag-bg-hover: #8a516a; --tag-text: #f6e1e8; } [data-theme=dark] .qdnapro-tag.tag-color-purple { --tag-bg: #3a3555; --tag-bg-hover: #524a7a; --tag-text: #c4bcf3; } [data-theme=dark] .qdnapro-tag.tag-color-dark-purple { --tag-bg: #524a7a; --tag-bg-hover: #6c629a; --tag-text: #ebe9fb; } [data-theme=dark] .qdnapro-tag.tag-disabled, [data-theme=dark] .qdnapro-tag.tag-disabled.tag-interactive { --tag-bg: #2e3034; --tag-bg-hover: #2e3034; --tag-text: #6b7180; } .qdnapro-tasklist-card { position: relative; box-sizing: border-box; display: flex; align-items: stretch; background: var(--c-bg-card, #ffffff); border: 1px solid var(--c-border-card, #e1e3e6); border-radius: 14px; overflow: hidden; cursor: pointer; min-height: 84px; transition: box-shadow 160ms ease, border-color 160ms ease, transform 120ms ease; user-select: none; outline: none; /* Never inherit the anchor underline when the card is wrapped in a link (e.g. the projects-v2 tasklist grid). */ text-decoration: none; } .qdnapro-tasklist-card *, .qdnapro-tasklist-card *::before, .qdnapro-tasklist-card *::after { box-sizing: border-box; } .qdnapro-tasklist-card:hover { box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1); border-color: rgba(0, 0, 0, 0.12); } .qdnapro-tasklist-card:active { transform: scale(0.985); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); transition: box-shadow 80ms ease, transform 80ms ease; } .qdnapro-tasklist-card:focus-visible { outline: 2px solid #40499a; outline-offset: 2px; } /* === Dark mode - base card chrome === In the bundle these read from the global --c-* tokens, but in the standalone library preview those tokens are absent, so the light fallbacks would win and the card would stay light. These explicit dark overrides make the base chrome correct in dark mode everywhere. Values match the dark palette already used in this file (surface #2e3036, neutral tile #40444d, primary text #f0f1f2, muted #a0a4b8, subtle border rgba(255,255,255,0.10)). */ [data-theme=dark] .qdnapro-tasklist-card { background: #2e3036; border-color: rgba(255, 255, 255, 0.1); } [data-theme=dark] .qdnapro-tasklist-card .tlc-tile { background: #40444d; } [data-theme=dark] .qdnapro-tasklist-card .tlc-name { color: #f0f1f2; } [data-theme=dark] .qdnapro-tasklist-card .tlc-sub { color: #a0a4b8; } .qdnapro-tasklist-card .tlc-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 12px 0 12px 12px; } .qdnapro-tasklist-card .tlc-tile { width: 60px; height: 60px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 13px; background: var(--c-grey-100, #f0f1f2); } .qdnapro-tasklist-card.has-color .tlc-tile { background: var(--tlc-bg, var(--c-grey-100, #f0f1f2)); } .qdnapro-tasklist-card .tlc-body { flex: 1; min-width: 0; padding: 16px 20px 16px 12px; display: flex; flex-direction: column; justify-content: center; } .qdnapro-tasklist-card .tlc-name { font-size: 16px; font-weight: 500; color: var(--c-grey-900, #0b0b0d); line-height: 1.3; text-decoration: none; /* Wrap to a second line, then truncate with an ellipsis - never a third line. `white-space: normal` is explicit so it always beats the legacy page-level `.tlc-name { white-space: nowrap }`. The 60px icon tile keeps the card >= 84px tall, which fits two 16px/1.3 lines, so the card height does not grow. */ white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } .qdnapro-tasklist-card .tlc-sub { font-size: 12.5px; color: var(--c-grey-500, #898e99); margin-top: 4px; } /* Compact variant: smaller tile + body, for dense list contexts. */ .qdnapro-tasklist-card.tlc-compact { min-height: 72px; } .qdnapro-tasklist-card.tlc-compact .tlc-icon { padding: 9px 0 9px 9px; } .qdnapro-tasklist-card.tlc-compact .tlc-tile { width: 48px; height: 48px; border-radius: 11px; } .qdnapro-tasklist-card.tlc-compact .tlc-body { padding: 12px 14px 12px 10px; } .qdnapro-tasklist-card.tlc-compact .tlc-name { font-size: 14px; } .qdnapro-tasklist-card.tlc-compact .tlc-sub { font-size: 11.5px; } /* === List variant: one-line picker/panel row === `list` wins over `compact` (enforced in JS render(): compact is never applied together with tlc-list). One row, ~40px total (6px icon-block padding top/bottom + 28px tile = 40px), a small 28px icon tile (same color/icon vocabulary as every other mode), single-line ellipsized name, ~8px radius. No count/meta/archived-chip/actions/favorite ever render in this mode (guarded in JS), so there is nothing to style for them here. Hover uses a FLAT background tint - the house list-row convention (matches qdnapro-menu-item's --mi-bg-hover and the event-sheet row hover), not the free-floating card's shadow-lift - because this variant sits inline in a list, not as its own card. */ .qdnapro-tasklist-card.tlc-list { min-height: 40px; border-radius: 8px; align-items: center; } .qdnapro-tasklist-card.tlc-list:hover { background: var(--c-grey-50, #f0f1f2); box-shadow: none; border-color: var(--c-border-card, #e1e3e6); } .qdnapro-tasklist-card.tlc-list:active { transform: none; box-shadow: none; } .qdnapro-tasklist-card.tlc-list .tlc-icon { padding: 6px 0 6px 6px; } .qdnapro-tasklist-card.tlc-list .tlc-tile { width: 28px; height: 28px; border-radius: 6px; } .qdnapro-tasklist-card.tlc-list .tlc-body { padding: 6px 12px 6px 8px; } .qdnapro-tasklist-card.tlc-list .tlc-name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* Override the base rule's 2-line clamp box - single line only. */ display: block; -webkit-line-clamp: unset; } [data-theme=dark] .qdnapro-tasklist-card.tlc-list:hover { background: rgba(255, 255, 255, 0.06); } /* === Hover action buttons (favorite + 3-dots) === Behaviour mirrors the project-card top-actions EXACTLY (Kim 2026-06-01): - Right-anchored inline-flex in the top-right corner. - The favorite (star) is hidden at rest and fades in on hover; once it is favorited (.favorite-button-favorited) it STAYS visible in the corner, so you see at a glance which lists are marked. - The 3-dots SLIDES IN: collapsed to width 0 at rest (so there is no empty box), expands to 32px + an 8px left margin on hover - the same width/opacity transition .project-card-menu-trigger uses. The project card uses a glass surface (it sits on a photo); the tasklist card is white, so the buttons get a solid-white surface + ring instead (glass is invisible on white). */ .qdnapro-tasklist-card .tlc-actions { position: absolute; top: 8px; right: 8px; z-index: 2; display: inline-flex; align-items: center; } /* Favorite (star): hidden at rest, fades in on hover, persists when marked. */ .qdnapro-tasklist-card .tlc-actions .qdnapro-favorite-button { flex: 0 0 auto; background: #ffffff; box-shadow: 0 2px 6px rgba(20, 25, 80, 0.22), 0 0 0 1px rgba(20, 25, 80, 0.14); transition: opacity 200ms ease, background-color 160ms ease; } .qdnapro-tasklist-card .tlc-actions .qdnapro-favorite-button:not(.favorite-button-favorited) { opacity: 0; pointer-events: none; } .qdnapro-tasklist-card:hover .tlc-actions .qdnapro-favorite-button:not(.favorite-button-favorited), .qdnapro-tasklist-card:focus-within .tlc-actions .qdnapro-favorite-button:not(.favorite-button-favorited) { opacity: 1; pointer-events: auto; } .qdnapro-tasklist-card .tlc-actions .qdnapro-favorite-button:hover { background: #f3f4fb; } /* 3-dots: slides in from width 0 on hover (mirrors .project-card-menu-trigger). */ .qdnapro-tasklist-card .tlc-actions .qdnapro-button { flex: 0 0 auto; width: 0 !important; min-width: 0 !important; max-width: 0; height: 32px !important; min-height: 32px !important; max-height: 32px !important; opacity: 0; overflow: hidden; pointer-events: none; margin-left: 0; padding: 0 !important; border: 0 !important; border-radius: 4px !important; background: transparent !important; box-shadow: none !important; transition: max-width 200ms cubic-bezier(0.4, 0, 0.2, 1), width 200ms cubic-bezier(0.4, 0, 0.2, 1), min-width 200ms cubic-bezier(0.4, 0, 0.2, 1), margin-left 200ms cubic-bezier(0.4, 0, 0.2, 1), opacity 150ms ease, background 120ms ease; } .qdnapro-tasklist-card:hover .tlc-actions .qdnapro-button, .qdnapro-tasklist-card:focus-within .tlc-actions .qdnapro-button { width: 32px !important; min-width: 32px !important; max-width: 32px; opacity: 1; pointer-events: auto; margin-left: 8px; background: #ffffff !important; box-shadow: 0 2px 6px rgba(20, 25, 80, 0.22), 0 0 0 1px rgba(20, 25, 80, 0.14) !important; } .qdnapro-tasklist-card:hover .tlc-actions .qdnapro-button:hover, .qdnapro-tasklist-card:focus-within .tlc-actions .qdnapro-button:hover { background: #f3f4fb !important; } /* Dark-mode surfaces. */ [data-theme=dark] .qdnapro-tasklist-card .tlc-actions .qdnapro-favorite-button { background: #2e3036; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.14); } [data-theme=dark] .qdnapro-tasklist-card .tlc-actions .qdnapro-favorite-button:hover { background: #383b42; } [data-theme=dark] .qdnapro-tasklist-card:hover .tlc-actions .qdnapro-button, [data-theme=dark] .qdnapro-tasklist-card:focus-within .tlc-actions .qdnapro-button { background: #2e3036 !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.14) !important; } [data-theme=dark] .qdnapro-tasklist-card:hover .tlc-actions .qdnapro-button:hover, [data-theme=dark] .qdnapro-tasklist-card:focus-within .tlc-actions .qdnapro-button:hover { background: #383b42 !important; } /* === Archived state (mirrors the project-card archived variant) === The tasklist card has no photo to desaturate, so the colour tile IS the imagery: it is fully greyed out (grayscale 1) so the pastel identity drops away, exactly like the project card's desaturated photo. Card dims to 0.85 (same as the project card) and the name is muted. */ .qdnapro-tasklist-card[archived] { opacity: 0.85; } .qdnapro-tasklist-card[archived] .tlc-tile { filter: grayscale(1) brightness(0.98); background: var(--c-grey-100, #eef0f2); } .qdnapro-tasklist-card[archived] .tlc-name { color: var(--c-grey-600, #6b7280); } /* The favorite/pin makes no sense on an archived tasklist; keep only the 3-dots (which offers "Activeren"). */ .qdnapro-tasklist-card[archived] .tlc-actions .qdnapro-favorite-button { display: none; } .qdnapro-tasklist-card .tlc-archived-chip { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; padding: 2px 9px 2px 7px; border-radius: 999px; background: var(--c-grey-100, #eef0f2); color: var(--c-grey-600, #6b7280); font-size: 11px; font-weight: 600; line-height: 16px; letter-spacing: 0.2px; } .qdnapro-tasklist-card .tlc-archived-chip qdnapro-icon { flex: 0 0 auto; } [data-theme=dark] .qdnapro-tasklist-card .tlc-archived-chip { background: rgba(255, 255, 255, 0.08); color: #a0a4b8; } /* Archived variant in dark mode: a dark neutral tile (the archived light rule sets its own background, so it must be re-overridden here) and a lighter muted grey name, so the dimmed/desaturated treatment reads correctly on the dark card surface. */ [data-theme=dark] .qdnapro-tasklist-card[archived] .tlc-tile { background: #40444d; } [data-theme=dark] .qdnapro-tasklist-card[archived] .tlc-name { color: #a0a4b8; } /* === Colour palette (qdnapro-tag light pastels) === */ .qdnapro-tasklist-card.tlc-color-grey { --tlc-bg: #eef0f2; } .qdnapro-tasklist-card.tlc-color-red { --tlc-bg: #fde7e7; } .qdnapro-tasklist-card.tlc-color-yellow { --tlc-bg: #fdf3d6; } .qdnapro-tasklist-card.tlc-color-green { --tlc-bg: #e2faf1; } .qdnapro-tasklist-card.tlc-color-blue { --tlc-bg: #e6eff9; } .qdnapro-tasklist-card.tlc-color-bright-blue { --tlc-bg: #d6e0f9; } .qdnapro-tasklist-card.tlc-color-pink { --tlc-bg: #f6e1e8; } .qdnapro-tasklist-card.tlc-color-purple { --tlc-bg: #ebe9fb; } [data-theme=dark] .qdnapro-tasklist-card.tlc-color-grey { --tlc-bg: #40444d; } [data-theme=dark] .qdnapro-tasklist-card.tlc-color-red { --tlc-bg: #5a2b2b; } [data-theme=dark] .qdnapro-tasklist-card.tlc-color-yellow { --tlc-bg: #5a4d1f; } [data-theme=dark] .qdnapro-tasklist-card.tlc-color-green { --tlc-bg: #2a5544; } [data-theme=dark] .qdnapro-tasklist-card.tlc-color-blue { --tlc-bg: #2e3e54; } [data-theme=dark] .qdnapro-tasklist-card.tlc-color-bright-blue { --tlc-bg: #3a4a8a; } [data-theme=dark] .qdnapro-tasklist-card.tlc-color-pink { --tlc-bg: #4e2a36; } [data-theme=dark] .qdnapro-tasklist-card.tlc-color-purple { --tlc-bg: #3a3555; } [data-theme=dark] .qdnapro-tasklist-card:hover { box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4); border-color: rgba(255, 255, 255, 0.18); } .qdnapro-text-link { --tl-c-focus-ring: #40499a; --tl-c-focus-glow: rgba(70, 82, 243, 0.25); --tl-c-bg-hover: var(--c-grey-50); --tl-c-bg-pressed: #e4e6e8; --tl-c-text: var(--c-text-body); --tl-c-text-hover: var(--c-text-body); --tl-c-text-pressed: #2e3138; display: inline-flex; align-items: center; justify-content: center; padding: 2px var(--s-1); border: 0.5px solid transparent; border-radius: var(--r-2); background: transparent; color: var(--tl-c-text); font-family: var(--ff); font-weight: 700; font-size: 14px; line-height: 24px; white-space: nowrap; cursor: pointer; transition: background 120ms ease, border-color 120ms ease, color 120ms ease, text-decoration 120ms ease, opacity 120ms ease; } .qdnapro-text-link:focus { outline: none; } .qdnapro-text-link:focus-visible, .qdnapro-text-link.force-focus { outline: 2px solid var(--tl-c-focus-ring); outline-offset: -2px; box-shadow: 0 0 0 4px var(--tl-c-focus-glow); } .qdnapro-text-link[disabled], .qdnapro-text-link.text-link-disabled { opacity: 0.4; cursor: not-allowed; } .qdnapro-text-link[disabled]:focus-visible, .qdnapro-text-link[disabled].force-focus, .qdnapro-text-link.text-link-disabled:focus-visible, .qdnapro-text-link.text-link-disabled.force-focus { outline: 2px solid transparent; box-shadow: none; } .qdnapro-text-link.text-link-neutral { --tl-c-text: var(--c-text-body); --tl-c-text-pressed: #2e3138; } .qdnapro-text-link.text-link-error { --tl-c-text: var(--c-signal-red-text); --tl-c-text-pressed: #6a3030; } .qdnapro-text-link.text-link-success { --tl-c-text: var(--c-signal-green-text); --tl-c-text-pressed: #2f6a52; } .qdnapro-text-link.text-link-highlight { --tl-c-text: var(--c-purple-highlight); --tl-c-text-pressed: #252b5e; } .qdnapro-text-link.text-link-10 { font-size: 10px; line-height: 20px; } .qdnapro-text-link.text-link-12 { font-size: 12px; line-height: 20px; } .qdnapro-text-link.text-link-14 { font-size: 14px; line-height: 24px; } .qdnapro-text-link.text-link-16 { font-size: 16px; line-height: 24px; } .qdnapro-text-link.text-link-20 { font-size: 20px; line-height: 32px; } .qdnapro-text-link.text-link-weight-regular { font-weight: var(--fw-regular); } .qdnapro-text-link.text-link-weight-medium { font-weight: var(--fw-medium); } .qdnapro-text-link.text-link-weight-semibold { font-weight: var(--fw-semi); } .qdnapro-text-link.text-link-weight-bold { font-weight: 700; } .qdnapro-text-link.text-link-hover-link:not([disabled]):not(.text-link-disabled):hover, .qdnapro-text-link.text-link-hover-link.text-link-active { text-decoration: underline; } .qdnapro-text-link.text-link-hover-bg:not([disabled]):not(.text-link-disabled):hover, .qdnapro-text-link.text-link-hover-bg.text-link-active { background: var(--tl-c-bg-hover); } .qdnapro-text-link.text-link-hover-bg.text-link-error:not([disabled]):not(.text-link-disabled):hover, .qdnapro-text-link.text-link-hover-bg.text-link-error.text-link-active { background: #fef1f1; border-color: var(--c-signal-red-text); color: var(--c-signal-red-text); } .qdnapro-text-link.text-link-hover-bg.text-link-success:not([disabled]):not(.text-link-disabled):hover, .qdnapro-text-link.text-link-hover-bg.text-link-success.text-link-active { background: #f0fdf8; border-color: var(--c-signal-green-text); } .qdnapro-text-link.text-link-hover-link:not([disabled]):not(.text-link-disabled):active, .qdnapro-text-link.text-link-hover-link.text-link-pressed, .qdnapro-text-link.text-link-hover-link.force-pressed { background: var(--tl-c-bg-pressed); color: var(--tl-c-text-pressed); text-decoration: underline; } .qdnapro-text-link.text-link-hover-bg:not([disabled]):not(.text-link-disabled):active, .qdnapro-text-link.text-link-hover-bg.text-link-pressed, .qdnapro-text-link.text-link-hover-bg.force-pressed { background: var(--tl-c-bg-pressed); color: var(--tl-c-text-pressed); } .qdnapro-text-link.text-link-hover-bg.text-link-error:not([disabled]):not(.text-link-disabled):active, .qdnapro-text-link.text-link-hover-bg.text-link-error.text-link-pressed, .qdnapro-text-link.text-link-hover-bg.text-link-error.force-pressed { background: #fce0e0; border-color: #a44848; color: #6a3030; } .qdnapro-text-link.text-link-hover-bg.text-link-success:not([disabled]):not(.text-link-disabled):active, .qdnapro-text-link.text-link-hover-bg.text-link-success.text-link-pressed, .qdnapro-text-link.text-link-hover-bg.text-link-success.force-pressed { background: #ddf7ec; border-color: #357059; color: #2f6a52; } [data-theme=dark] .qdnapro-text-link { --tl-c-bg-hover: #40444d; --tl-c-bg-pressed: #565b66; --tl-c-text: #e1e3e6; --tl-c-text-hover: #e1e3e6; --tl-c-text-pressed: #f0f1f2; } [data-theme=dark] .qdnapro-text-link.text-link-neutral { --tl-c-text: #e1e3e6; --tl-c-text-pressed: #f0f1f2; } [data-theme=dark] .qdnapro-text-link.text-link-error { --tl-c-text: #fbaaaa; --tl-c-text-pressed: #fee3e3; } [data-theme=dark] .qdnapro-text-link.text-link-success { --tl-c-text: #8becc5; --tl-c-text-pressed: #e2faf1; } [data-theme=dark] .qdnapro-text-link.text-link-highlight { --tl-c-text: #aab2ff; --tl-c-text-pressed: #d6daff; } [data-theme=dark] .qdnapro-text-link.text-link-hover-bg.text-link-error:not([disabled]):not(.text-link-disabled):hover, [data-theme=dark] .qdnapro-text-link.text-link-hover-bg.text-link-error.text-link-active { background: #5a2b2b; border-color: #fbaaaa; color: #fee3e3; } [data-theme=dark] .qdnapro-text-link.text-link-hover-bg.text-link-success:not([disabled]):not(.text-link-disabled):hover, [data-theme=dark] .qdnapro-text-link.text-link-hover-bg.text-link-success.text-link-active { background: #2a5544; border-color: #8becc5; color: #e2faf1; } [data-theme=dark] .qdnapro-text-link.text-link-hover-bg.text-link-error:not([disabled]):not(.text-link-disabled):active, [data-theme=dark] .qdnapro-text-link.text-link-hover-bg.text-link-error.text-link-pressed, [data-theme=dark] .qdnapro-text-link.text-link-hover-bg.text-link-error.force-pressed { background: #7a3838; border-color: #fee3e3; color: #fee3e3; } [data-theme=dark] .qdnapro-text-link.text-link-hover-bg.text-link-success:not([disabled]):not(.text-link-disabled):active, [data-theme=dark] .qdnapro-text-link.text-link-hover-bg.text-link-success.text-link-pressed, [data-theme=dark] .qdnapro-text-link.text-link-hover-bg.text-link-success.force-pressed { background: #3d7a62; border-color: #e2faf1; color: #e2faf1; } .qdnapro-timestamp { --ts-color: #898e99; display: inline; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ts-color); font-weight: 400; font-variant-numeric: tabular-nums; white-space: nowrap; } .qdnapro-timestamp.timestamp-color-purple { --ts-color: #40499a; } .qdnapro-timestamp.timestamp-color-highlight { --ts-color: #4652f3; } .qdnapro-timestamp.timestamp-weight-regular { font-weight: 400; } .qdnapro-timestamp.timestamp-weight-bold { font-weight: 700; } .qdnapro-timestamp.timestamp-size-10 { font-size: 10px; line-height: 14px; } .qdnapro-timestamp.timestamp-size-11 { font-size: 11px; line-height: 16px; } .qdnapro-timestamp.timestamp-size-12 { font-size: 12px; line-height: 18px; } .qdnapro-timestamp.timestamp-size-13 { font-size: 13px; line-height: 18px; } .qdnapro-timestamp.timestamp-size-14 { font-size: 14px; line-height: 20px; } .qdnapro-timestamp.timestamp-size-15 { font-size: 15px; line-height: 22px; } .qdnapro-timestamp.timestamp-size-16 { font-size: 16px; line-height: 24px; } .qdnapro-timestamp.timestamp-inline { align-self: baseline; } [data-theme=dark] .qdnapro-timestamp { --ts-color: #b8bcc4; } [data-theme=dark] .qdnapro-timestamp.timestamp-color-purple { --ts-color: #b8bcc4; } [data-theme=dark] .qdnapro-timestamp.timestamp-color-highlight { --ts-color: #a5acff; } .qdnapro-toast { --toast-bg: #0b0b0d; --toast-text: #ffffff; position: fixed; z-index: 10000; transform: translate(-50%, 4px); transform-origin: center; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: none; background: var(--toast-bg); color: var(--toast-text); font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 13px; font-weight: 500; line-height: 18px; white-space: nowrap; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18), 0 1px 3px rgba(0, 0, 0, 0.1); opacity: 0; pointer-events: none; transition: opacity 160ms ease-out, transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1); } .qdnapro-toast.toast-position-top { transform: translate(-50%, calc(-100% + 4px)); } .qdnapro-toast.toast-position-bottom { transform: translate(-50%, 4px); } .qdnapro-toast .toast-icon { flex-shrink: 0; display: inline-flex; color: inherit; } .qdnapro-toast .toast-label { flex: 1 1 auto; } .qdnapro-toast .toast-action { flex-shrink: 0; appearance: none; border: none; background: transparent; margin: -4px -6px -4px 4px; padding: 4px 10px; border-radius: 999px; font-family: inherit; font-size: 13px; font-weight: 700; line-height: 18px; color: inherit; cursor: pointer; pointer-events: auto; opacity: 0.95; } .qdnapro-toast .toast-action:hover { background: rgba(255, 255, 255, 0.14); } .qdnapro-toast .toast-action:active { opacity: 0.75; } .qdnapro-toast.toast-variant-yellow .toast-action:hover, .qdnapro-toast.toast-variant-red .toast-action:hover { background: rgba(0, 0, 0, 0.08); } .qdnapro-toast.toast-variant-dark { --toast-bg: #0b0b0d; --toast-text: #ffffff; } .qdnapro-toast.toast-variant-purple { --toast-bg: #40499a; --toast-text: #ffffff; } .qdnapro-toast.toast-variant-yellow { --toast-bg: var(--c-warning-bright-bg); --toast-text: var(--c-warning-bright-text); border: 1px solid var(--c-warning-bright-border); } .qdnapro-toast.toast-variant-red { --toast-bg: #fde8e8; --toast-text: #c94040; border: 1px solid #e8b0b0; } .qdnapro-toast.toast-visible, .qdnapro-toast[visible] { opacity: 1; } .qdnapro-toast.toast-visible.toast-position-top, .qdnapro-toast[visible].toast-position-top { transform: translate(-50%, -100%); } .qdnapro-toast.toast-visible.toast-position-bottom, .qdnapro-toast[visible].toast-position-bottom { transform: translate(-50%, 0); } [data-theme=dark] .qdnapro-toast { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.25); } [data-theme=dark] .qdnapro-toast.toast-variant-dark { --toast-bg: #f0f1f2; --toast-text: #0b0b0d; } [data-theme=dark] .qdnapro-toast.toast-variant-purple { --toast-bg: #a5acff; --toast-text: #0b0b0d; } @media (prefers-reduced-motion: reduce) { .qdnapro-toast { transition: opacity 120ms linear; } .qdnapro-toast.toast-position-top { transform: translate(-50%, -100%) !important; } .qdnapro-toast.toast-position-bottom { transform: translate(-50%, 0) !important; } } .qdnapro-toggle { --tg-bg: #c4c7cc; --tg-bg-active: #4652f3; --tg-bg-hover: #b0b4ba; --tg-bg-active-hover: #3842c2; --tg-thumb: #ffffff; --tg-focus-ring: #40499a; --tg-focus-glow: rgba(70, 82, 243, 0.25); position: relative; display: inline-block; box-sizing: border-box; background: var(--tg-bg); border-radius: 999px; cursor: pointer; user-select: none; flex-shrink: 0; transition: background-color 180ms ease-out; } .qdnapro-toggle .toggle-thumb { position: absolute; top: 50%; background: var(--tg-thumb); border-radius: 50%; box-shadow: 0 0 0 rgba(0, 0, 0, 0.04), 0 3px 8px rgba(0, 0, 0, 0.15), 0 3px 1px rgba(0, 0, 0, 0.06); pointer-events: none; transform-origin: left center; transition: left 320ms cubic-bezier(0.34, 1.35, 0.64, 1), transform 200ms cubic-bezier(0.34, 1.35, 0.64, 1), background-color 180ms ease-out; } .qdnapro-toggle.toggle-active .toggle-thumb { transform-origin: right center; } .qdnapro-toggle.toggle-size-average { width: 51px; height: 31px; } .qdnapro-toggle.toggle-size-average .toggle-thumb { width: 27px; height: 27px; left: 2px; transform: translateY(-50%); } .qdnapro-toggle.toggle-size-average.toggle-active .toggle-thumb { left: 22px; } .qdnapro-toggle.toggle-size-small { width: 37px; height: 22px; } .qdnapro-toggle.toggle-size-small .toggle-thumb { width: 18px; height: 18px; left: 2px; transform: translateY(-50%); } .qdnapro-toggle.toggle-size-small.toggle-active .toggle-thumb { left: 17px; } .qdnapro-toggle.toggle-active { background: var(--tg-bg-active); } .qdnapro-toggle:hover:not(.toggle-disabled):not(.toggle-active), .qdnapro-toggle.force-hover:not(.toggle-disabled):not(.toggle-active) { background: var(--tg-bg-hover); } .qdnapro-toggle:hover:not(.toggle-disabled).toggle-active, .qdnapro-toggle.force-hover:not(.toggle-disabled).toggle-active { background: var(--tg-bg-active-hover); } .qdnapro-toggle:active:not(.toggle-disabled) .toggle-thumb, .qdnapro-toggle.force-pressed:not(.toggle-disabled) .toggle-thumb { transform: translateY(-50%) scaleX(1.15); } .qdnapro-toggle:focus { outline: none; } .qdnapro-toggle:focus-visible, .qdnapro-toggle.force-focus { outline: none; box-shadow: 0 0 0 2px var(--tg-focus-ring), 0 0 0 6px var(--tg-focus-glow); } .qdnapro-toggle.toggle-disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } .qdnapro-toggle.toggle-disabled:not(.toggle-active) { background: #f0f1f2; } .qdnapro-toggle.toggle-disabled.toggle-active { background: #f0f1f2; } [data-theme=dark] .qdnapro-toggle { --tg-bg: #565b66; --tg-bg-active: #4652f3; --tg-bg-hover: #6b7280; --tg-bg-active-hover: #5a66ff; --tg-thumb: #e1e3e6; --tg-focus-ring: #a5acff; --tg-focus-glow: rgba(70, 82, 243, 0.4); } [data-theme=dark] .qdnapro-toggle.toggle-disabled:not(.toggle-active) { background: #40444d; } [data-theme=dark] .qdnapro-toggle.toggle-disabled.toggle-active { background: #40444d; } .qdnapro-action-btn { --ab-bg: transparent; --ab-bg-hover: #f0f1f2; --ab-bg-active: #e6e9ff; --ab-bg-active-hover: #daddf2; --ab-icon: #0b0b0d; --ab-icon-active: #40499a; --ab-underline: #40499a; --ab-focus-ring: #0b0b0d; --ab-focus-glow: rgba(70, 82, 243, 0.25); --ab-disabled-bg: #f0f1f2; --ab-disabled-icon: #898e99; --ab-active-line-width: 16px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 4px; box-sizing: border-box; padding: 0; border: 1px solid transparent; border-radius: 4px; background: var(--ab-bg); color: var(--ab-icon); cursor: pointer; user-select: none; flex-shrink: 0; transition: background-color 120ms ease-out, color 120ms ease-out; font-family: inherit; } .qdnapro-action-btn qdnapro-icon, .qdnapro-action-btn .action-btn-icon, .qdnapro-action-btn .action-btn-chevron { display: inline-flex; flex-shrink: 0; pointer-events: none; color: inherit; } .qdnapro-action-btn svg { fill: currentColor; width: 100%; height: 100%; } .qdnapro-action-btn .action-btn-icon-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .qdnapro-action-btn .action-btn-dot { position: absolute; top: -2px; right: -2px; width: 8px; height: 8px; border-radius: 50%; background: #ff3a30; pointer-events: none; box-shadow: 0 0 0 1.5px var(--ab-dot-ring, #ffffff); } .qdnapro-action-btn::after { content: ""; position: absolute; bottom: 0; left: 50%; width: var(--ab-active-line-width); height: 2px; background: var(--ab-underline); border-radius: 1px 1px 0 0; transform: translateX(-50%) scaleX(0); transform-origin: center; opacity: 0; transition: transform 260ms cubic-bezier(0.34, 1.35, 0.64, 1), opacity 180ms ease-out; pointer-events: none; } .qdnapro-action-btn.action-btn-active::after { transform: translateX(-50%) scaleX(1); opacity: 1; } .qdnapro-action-btn[disabled].action-btn-active::after, .qdnapro-action-btn.action-btn-disabled.action-btn-active::after { background: var(--ab-disabled-icon); opacity: 0.6; } .qdnapro-action-btn.action-btn-shape-square.action-btn-size-default { width: 40px; height: 40px; min-width: 40px; } .qdnapro-action-btn.action-btn-shape-square.action-btn-size-default qdnapro-icon, .qdnapro-action-btn.action-btn-shape-square.action-btn-size-default .action-btn-icon { width: 20px; height: 20px; } .qdnapro-action-btn.action-btn-shape-square.action-btn-size-small { width: 28px; height: 28px; min-width: 28px; --ab-active-line-width: 12px; } .qdnapro-action-btn.action-btn-shape-square.action-btn-size-small qdnapro-icon, .qdnapro-action-btn.action-btn-shape-square.action-btn-size-small .action-btn-icon { width: 16px; height: 16px; } .qdnapro-action-btn.action-btn-shape-square.action-btn-size-small::after { bottom: 0; height: 1.5px; } .qdnapro-action-btn.action-btn-shape-thin.action-btn-size-default { width: 20px; height: 40px; min-width: 20px; --ab-active-line-width: 12px; } .qdnapro-action-btn.action-btn-shape-thin.action-btn-size-default qdnapro-icon, .qdnapro-action-btn.action-btn-shape-thin.action-btn-size-default .action-btn-icon { width: 16px; height: 16px; } .qdnapro-action-btn.action-btn-shape-thin.action-btn-size-small { width: 20px; height: 28px; min-width: 20px; --ab-active-line-width: 10px; } .qdnapro-action-btn.action-btn-shape-thin.action-btn-size-small qdnapro-icon, .qdnapro-action-btn.action-btn-shape-thin.action-btn-size-small .action-btn-icon { width: 14px; height: 14px; } .qdnapro-action-btn.action-btn-shape-thin.action-btn-size-small::after { bottom: 0; height: 1.5px; } .qdnapro-action-btn.action-btn-has-chevron.action-btn-shape-square.action-btn-size-default { width: 60px; } .qdnapro-action-btn.action-btn-has-chevron.action-btn-shape-square.action-btn-size-small { width: auto; min-width: 44px; padding: 0 4px; } .qdnapro-action-btn .action-btn-chevron { opacity: 0.7; } .qdnapro-action-btn.action-btn-has-chevron .action-btn-chevron { width: 12px; height: 12px; } .qdnapro-action-btn.action-btn-type-table { --ab-bg-hover: #e1e3e6; } .qdnapro-action-btn.action-btn-color-highlight { --ab-icon: #4652f3; --ab-bg-active: #e6e9ff; --ab-bg-active-hover: #daddf2; --ab-icon-active: #4652f3; --ab-underline: #4652f3; --ab-focus-ring: #40499a; } .qdnapro-action-btn.action-btn-active { background: var(--ab-bg-active); color: var(--ab-icon-active); } .qdnapro-action-btn:hover:not([disabled]):not(.action-btn-active) { background: var(--ab-bg-hover); } .qdnapro-action-btn:hover:not([disabled]).action-btn-active { background: var(--ab-bg-active-hover); } .qdnapro-action-btn:active:not([disabled]) { background-image: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)); } .qdnapro-action-btn:focus { outline: none; } .qdnapro-action-btn:focus-visible, .qdnapro-action-btn.force-focus { outline: 2px solid var(--ab-focus-ring); outline-offset: -2px; box-shadow: 0 0 0 4px var(--ab-focus-glow); } .qdnapro-action-btn.force-hover:not([disabled]):not(.action-btn-active) { background: var(--ab-bg-hover); } .qdnapro-action-btn.force-hover:not([disabled]).action-btn-active { background: var(--ab-bg-active-hover); } .qdnapro-action-btn.force-pressed:not([disabled]) { background-image: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)); } .qdnapro-action-btn[disabled], .qdnapro-action-btn.action-btn-disabled { background: var(--ab-disabled-bg) !important; color: var(--ab-disabled-icon) !important; cursor: not-allowed; pointer-events: none; } .qdnapro-action-btn[disabled].action-btn-active, .qdnapro-action-btn.action-btn-disabled.action-btn-active { background: var(--ab-bg-active) !important; color: var(--ab-disabled-icon) !important; opacity: 0.6; } [data-theme=dark] .qdnapro-action-btn { --ab-bg: transparent; --ab-bg-hover: #565b66; --ab-bg-active: #2a2d52; --ab-bg-active-hover: #3a3f6b; --ab-icon: #e1e3e6; --ab-icon-active: #a5acff; --ab-underline: #a5acff; --ab-focus-ring: #e1e3e6; --ab-focus-glow: rgba(70, 82, 243, 0.4); --ab-disabled-bg: #40444d; --ab-disabled-icon: #6b7280; --ab-dot-ring: #2e3036; } [data-theme=dark] .qdnapro-action-btn.action-btn-type-table { --ab-bg-hover: #40444d; } [data-theme=dark] .qdnapro-action-btn.action-btn-color-highlight { --ab-icon: #a5acff; --ab-bg-hover: rgba(70, 82, 243, 0.18); --ab-bg-active: #4652f3; --ab-bg-active-hover: #5a66ff; --ab-icon-active: #ffffff; --ab-underline: #ffffff; --ab-focus-ring: #a5acff; } .qdnapro-tooltip { --tt-bg: #c4c7cc; --tt-border: #c4c7cc; --tt-text: #0b0b0d; --tt-title: #0b0b0d; --tt-pointer-size: 8px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 0 8px; border: 1px solid var(--tt-border); border-radius: 4px; background: var(--tt-bg); color: var(--tt-text); font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 400; box-sizing: border-box; position: relative; white-space: nowrap; box-shadow: 0 1px 4px rgba(12, 12, 13, 0.05); max-width: 320px; } .qdnapro-tooltip[hidden] { display: none; } .qdnapro-tooltip.tooltip-big { padding: 4px 8px; } .qdnapro-tooltip.tooltip-small { padding: 0 8px; } .qdnapro-tooltip .tooltip-title { color: var(--tt-title); font-size: 14px; line-height: 24px; font-weight: 500; text-align: center; } .qdnapro-tooltip .tooltip-body { color: var(--tt-text); text-align: center; } .qdnapro-tooltip.tooltip-big .tooltip-body { font-size: 10px; line-height: 20px; } .qdnapro-tooltip.tooltip-small .tooltip-body { font-size: 12px; line-height: 20px; } .qdnapro-tooltip.tooltip-floating.tooltip-big .tooltip-body { font-size: 14px; line-height: 24px; } .qdnapro-tooltip.tooltip-purple { --tt-bg: #40499a; --tt-border: #40499a; --tt-text: #ffffff; --tt-title: #ffffff; } .qdnapro-tooltip.tooltip-purple-dark { --tt-bg: #2a3268; --tt-border: #2a3268; --tt-text: #ffffff; --tt-title: #ffffff; } .qdnapro-tooltip.tooltip-light-purple { --tt-bg: #e6e9ff; --tt-border: #daddf2; --tt-text: #40499a; --tt-title: #40499a; } .qdnapro-tooltip.tooltip-neutral-dark { --tt-bg: #c4c7cc; --tt-border: #c4c7cc; --tt-text: #0b0b0d; --tt-title: #0b0b0d; } .qdnapro-tooltip.tooltip-neutral-light { --tt-bg: #e1e3e6; --tt-border: #e1e3e6; --tt-text: #6b7280; --tt-title: #6b7280; } .qdnapro-tooltip.tooltip-pointer::before { content: ""; position: absolute; width: var(--tt-pointer-size); height: var(--tt-pointer-size); background: var(--tt-bg); border: 1px solid var(--tt-border); box-sizing: border-box; pointer-events: none; } .qdnapro-tooltip.tooltip-pointer.tooltip-position-top::before { bottom: calc(var(--tt-pointer-size) * -0.5 - 1px); left: 50%; transform: translateX(-50%) rotate(45deg); border-top-color: transparent; border-left-color: transparent; } .qdnapro-tooltip.tooltip-pointer.tooltip-position-bottom::before { top: calc(var(--tt-pointer-size) * -0.5 - 1px); left: 50%; transform: translateX(-50%) rotate(45deg); border-bottom-color: transparent; border-right-color: transparent; } .qdnapro-tooltip.tooltip-pointer.tooltip-position-left::before { right: calc(var(--tt-pointer-size) * -0.5 - 1px); top: 50%; transform: translateY(-50%) rotate(45deg); border-top-color: transparent; border-left-color: transparent; } .qdnapro-tooltip.tooltip-pointer.tooltip-position-right::before { left: calc(var(--tt-pointer-size) * -0.5 - 1px); top: 50%; transform: translateY(-50%) rotate(45deg); border-bottom-color: transparent; border-right-color: transparent; } .qdnapro-tooltip { opacity: 0; transform: scale(0.92); transition: opacity 120ms ease-out, transform 120ms ease-out; } .qdnapro-tooltip.tooltip-visible { opacity: 1; transform: scale(1); } .qdnapro-tooltip:not(.tooltip-managed) { opacity: 1; transform: none; } [data-theme=dark] .qdnapro-tooltip { --tt-bg: #40444d; --tt-border: #40444d; --tt-text: #e1e3e6; --tt-title: #e1e3e6; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); } [data-theme=dark] .qdnapro-tooltip.tooltip-purple { --tt-bg: #3842c2; --tt-border: #3842c2; --tt-text: #ffffff; --tt-title: #ffffff; } [data-theme=dark] .qdnapro-tooltip.tooltip-light-purple { --tt-bg: #2a2d52; --tt-border: #3a3f6b; --tt-text: #8b93ff; --tt-title: #8b93ff; } [data-theme=dark] .qdnapro-tooltip.tooltip-neutral-dark { --tt-bg: #40444d; --tt-border: #40444d; --tt-text: #e1e3e6; --tt-title: #e1e3e6; } [data-theme=dark] .qdnapro-tooltip.tooltip-neutral-light { --tt-bg: #2e3036; --tt-border: #2e3036; --tt-text: #a6aab3; --tt-title: #a6aab3; } .qdnapro-touch-button { --qtb-bg: var(--c-bg-card, #ffffff); --qtb-bg-hover: var(--c-grey-100, #e7e9ec); --qtb-bg-pressed: var(--c-grey-200, #d1d5db); --qtb-border: var(--c-grey-100, #e7e9ec); --qtb-border-hover: var(--c-grey-200, #d1d5db); --qtb-border-pressed: var(--c-grey-300, #c4c7cc); --qtb-label-color: var(--c-text-body, #0b0b0d); --qtb-disabled-bg: #f0f1f2; --qtb-disabled-color: #898e99; --btn-focus-ring: #40499a; --btn-focus-glow: rgba(70, 82, 243, 0.25); position: relative; display: flex; box-sizing: border-box; width: 100%; background: var(--qtb-bg); border: 1px solid var(--qtb-border); border-radius: var(--r-3, 12px); color: var(--qtb-label-color); font-family: var(--ff, "Inter", system-ui, -apple-system, sans-serif); cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; transition: background-color 120ms ease-out, border-color 120ms ease-out, color 120ms ease-out; } .qdnapro-touch-button .qtb-label { font-size: 16px; font-weight: 500; line-height: 24px; overflow: hidden; overflow-wrap: anywhere; } .qdnapro-touch-button .qtb-icon { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; line-height: 0; transition: opacity 120ms ease-out; } .qdnapro-touch-button .qtb-badge { display: flex; align-items: center; line-height: 0; } .qdnapro-touch-button.qtb-variant-grid { flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 104px; padding: 12px; text-align: center; } .qdnapro-touch-button.qtb-variant-grid .qtb-label { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; } .qdnapro-touch-button.qtb-variant-grid .qtb-badge { position: absolute; top: 8px; right: 8px; pointer-events: none; } .qdnapro-touch-button.qtb-variant-row { flex-direction: row; align-items: center; gap: 24px; min-height: 58px; padding: 8px; text-align: left; } .qdnapro-touch-button.qtb-variant-row .qtb-label { flex: 1 1 auto; min-width: 0; white-space: nowrap; text-overflow: ellipsis; } .qdnapro-touch-button.qtb-variant-row .qtb-badge { flex: 0 0 auto; margin-left: auto; margin-right: 8px; pointer-events: none; } .qdnapro-touch-button:hover:not(.qtb-disabled), .qdnapro-touch-button.force-hover:not(.qtb-disabled) { background: var(--qtb-bg-hover); border-color: var(--qtb-border-hover); } .qdnapro-touch-button.is-pressed:not(.qtb-disabled), .qdnapro-touch-button.force-pressed:not(.qtb-disabled) { background: var(--qtb-bg-pressed); border-color: var(--qtb-border-pressed); } .qdnapro-touch-button:focus { outline: none; } .qdnapro-touch-button:focus-visible, .qdnapro-touch-button.force-focus { outline: 2px solid var(--btn-focus-ring); outline-offset: -2px; box-shadow: 0 0 0 4px var(--btn-focus-glow); } .qdnapro-touch-button.qtb-disabled { background: var(--qtb-disabled-bg); color: var(--qtb-disabled-color); border-color: transparent; cursor: not-allowed; pointer-events: none; } .qdnapro-touch-button.qtb-disabled:focus-visible, .qdnapro-touch-button.qtb-disabled.force-focus { outline: none; box-shadow: none; } .qdnapro-touch-button.qtb-disabled .qtb-icon { opacity: 0.3; } [data-theme=dark] .qdnapro-touch-button { --qtb-bg: var(--c-bg-card, #2a2d34); --qtb-bg-hover: #343841; --qtb-bg-pressed: #3e434d; --qtb-border: #40444d; --qtb-border-hover: #4b505a; --qtb-border-pressed: #575d68; --qtb-label-color: var(--c-text-body, #f0f1f2); --qtb-disabled-bg: #40444d; --qtb-disabled-color: #6b7280; } @media (prefers-reduced-motion: reduce) { .qdnapro-touch-button { transition: none; } } qdnapro-translation-panel { display: contents; } body.qtp-open .stats-bar, body.qtp-open .mgr-stack-trigger, body.qtp-open .insert-zone { pointer-events: none; } .qtp { position: fixed; top: 0; right: 0; bottom: 0; width: 420px; max-width: 92vw; background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%); border-left: 1px solid rgba(255, 255, 255, 0.55); display: flex; flex-direction: column; z-index: 1050; box-shadow: -8px 0 32px rgba(40, 46, 100, 0.18); overflow: hidden; font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; box-sizing: border-box; transform: translateX(100%); transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1); } .qtp--visible { transform: translateX(0); } .qtp * { box-sizing: border-box; } .qtp-header { display: flex; align-items: center; padding: 11px 16px; background: rgba(65, 73, 154, 0.55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255, 255, 255, 0.12); flex-shrink: 0; gap: 9px; } .qtp-header-spacer { flex: 1; } .qtp-at-btn { position: relative; overflow: hidden; } .qtp-at-btn::after { content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 55%; background: linear-gradient(120deg, transparent 0%, rgba(65, 73, 154, 0.13) 50%, transparent 100%); transform: translateX(-200%); animation: qtp-shimmer 3.4s ease-in-out infinite; pointer-events: none; } @keyframes qtp-shimmer { 0% { transform: translateX(-200%); } 30% { transform: translateX(220%); } 100% { transform: translateX(220%); } } .qtp-at-icon { display: inline-block; } .qtp-at-icon--spin { animation: qtp-rotate 0.8s linear infinite; } @keyframes qtp-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .qtp-at-bar { padding: 9px 14px; background: transparent; border-bottom: 1px solid rgba(216, 219, 237, 0.6); font-size: 12px; color: #3f499a; flex-shrink: 0; } .qtp-at-bar--done { background: rgba(34, 140, 90, 0.1); border-bottom-color: rgba(34, 140, 90, 0.18); color: #1a7a50; display: flex; align-items: center; gap: 6px; } .qtp-at-bar--error { background: rgba(196, 54, 42, 0.1); border-bottom-color: rgba(196, 54, 42, 0.18); color: #c4362a; display: flex; align-items: center; gap: 6px; } .qtp-at-bar-question { display: block; margin-bottom: 7px; font-weight: 500; } .qtp-at-dir { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; } .qtp-at-dir-lang { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 22px; padding: 0 8px; border-radius: 6px; background: rgba(65, 73, 154, 0.1); color: #3f499a; font-size: 12px; font-weight: 600; } .qtp-at-dir-arrow { flex-shrink: 0; color: rgba(63, 73, 154, 0.55); } .qtp-at-bar-btns { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .qtp-lang-bar { display: flex; padding: 8px 14px; background: rgba(255, 255, 255, 0.5); border-bottom: 1px solid rgba(216, 219, 237, 0.7); flex-shrink: 0; } .qtp-lang-seg .qdnapro-segment-item[data-missing] { position: relative; } .qtp-lang-seg .qdnapro-segment-item[data-missing]::after { content: ""; position: absolute; top: 3px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: #e8a320; box-shadow: 0 0 0 2px #fff; pointer-events: none; } .qtp-col-headers { display: grid; grid-template-columns: 1fr 1fr; flex-shrink: 0; background: rgba(255, 255, 255, 0.5); border-bottom: 2px solid rgba(216, 219, 237, 0.7); } .qtp-col-h { font-size: 11px; font-weight: 700; color: #41499a; text-transform: uppercase; letter-spacing: 0.07em; display: flex; align-items: center; gap: 6px; padding: 8px 12px; } .qtp-col-h:first-child { border-right: 1px solid #d8dbed; } .qtp-missing-pill { font-size: 10px; background: #fdf0dc; color: #b47a14; border-radius: 4px; padding: 2px 6px; border: 1px solid #e8a320; font-weight: 600; text-transform: none; letter-spacing: 0; } .qtp-body { flex: 1; overflow-y: auto; padding: 8px 10px; display: flex; flex-direction: column; gap: 7px; scrollbar-width: none; } .qtp-body::-webkit-scrollbar { width: 0; height: 0; } .qtp-empty { padding: 28px 16px; text-align: center; color: #8890b8; font-size: 13px; } .qtp-card { border-radius: 7px; border: 1px solid #d0d3ea; overflow: hidden; background: #fff; transition: box-shadow 120ms; flex-shrink: 0; } .qtp-card:hover { box-shadow: 0 2px 10px rgba(65, 73, 154, 0.14); } .qtp-card--selected, .qtp-card--selected:hover { box-shadow: 0 0 0 2px #6b74d6, 0 4px 14px rgba(65, 73, 154, 0.18); } .qtp-card--spotlight { animation: qtp-spotlight 900ms ease-out forwards; } .qtp-card--archived { border-color: #d2d5e4; background: #f6f7fa; } .qtp-card--archived .qtp-meta { background: rgba(120, 124, 150, 0.08); border-bottom-color: #e2e4ee; } @keyframes qtp-spotlight { 0% { box-shadow: 0 0 0 3px rgba(65, 73, 154, 0.55); } 60% { box-shadow: 0 0 0 3px rgba(65, 73, 154, 0.25); } 100% { box-shadow: none; } } .qtp-card--badge .qtp-meta { padding-left: 12px; } .qtp-card--badge .qtp-badge { border-radius: 6px; } .qtp-section-divider { display: flex; align-items: center; gap: 8px; margin: 16px 2px 8px; flex-shrink: 0; } .qtp-section-divider::after { content: ""; flex: 1; height: 2px; border-radius: 2px; background: #40499a; } .qtp-section-label { flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; background: #40499a; color: #fff; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 3px 8px; border-radius: 5px; } .qtp-section-icon { display: inline-block; } .qtp-meta { display: flex; align-items: center; gap: 7px; padding: 6px 10px 6px 0; background: rgba(65, 73, 154, 0.06); border-bottom: 1px solid #e4e6f4; cursor: pointer; } .qtp-badge { font-size: 11px; padding: 3px 8px; border-radius: 6px 0 0 6px; color: #fff; font-weight: 600; white-space: nowrap; } .qtp-node-id { font-size: 11px; color: #9099c0; font-weight: 500; flex-shrink: 0; } .qtp-meta--icon { padding-left: 10px; gap: 8px; } .qtp-activity-icon { flex-shrink: 0; } .qtp-icon-placeholder { width: 26px; height: 26px; border-radius: 6px; background: #e4e6f4; flex-shrink: 0; } .qtp-title { flex: 0 1 auto; min-width: 0; font-size: 13px; font-weight: 600; color: #2a3170; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .qtp-tag { flex-shrink: 0; font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 5px; white-space: nowrap; color: #40499a; background: rgba(65, 73, 154, 0.12); } .qtp-tag--archived { color: #6b7280; background: #e7e8f0; } .qtp-save { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-left: auto; } .qtp-save--saving { background: #e8a320; } .qtp-save--saved { background: #3e9e6e; } .qtp-save--error { background: #c4362a; } .qtp-cols { display: grid; grid-template-columns: 1fr 1fr; } .qtp-col { padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; min-height: 50px; } .qtp-col--primary { padding-right: 4px; } .qtp-col--target { padding-left: 4px; background: #f4f5fb; border-left: 1px solid #e4e6f4; } .qtp-field { display: block; width: 100%; } .qtp-field-group { display: flex; flex-direction: column; } .qtp-field-caption { font-size: 10px; font-weight: 600; color: #9098bb; text-transform: uppercase; letter-spacing: 0.045em; line-height: 1.3; margin-bottom: 3px; } .qtp-field-caption--section { margin: 2px 0 4px; color: #7a82ac; } .qtp-ans-row .qtp-field { flex: 1; min-width: 0; } .qtp-field--missing .input-field { border-color: #e8a320 !important; background: #fffcf3 !important; } qdnapro-activity-row.qtp-row-focused .activity-row-inner { box-shadow: 0 0 0 2px #6b74d6, 0 4px 14px rgba(65, 73, 154, 0.18); } qdnapro-section-header.qtp-row-focused .sh-pill { box-shadow: 0 0 0 2px #6b74d6, 0 4px 14px rgba(65, 73, 154, 0.18); border-radius: 8px; } .qtp-ans-divider { height: 1px; background: #e4e6f4; margin: 2px 0; } .qtp-ans-row { display: flex; align-items: flex-start; gap: 6px; } .qtp-ans-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; margin-top: 11px; } qdnapro-translation-modal { display: contents; } .qtm { font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; } .qtm * { box-sizing: border-box; } .qtm-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .qtm-source { min-width: 0; flex: 1; } .qtm-field-label { font-size: 11px; font-weight: 700; color: #41499a; text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 6px; } .qtm-source-row { display: flex; align-items: center; gap: 8px; min-width: 0; } .qtm-source-text { min-width: 0; font-size: 14px; font-weight: 600; color: #2a3170; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .qtm-source-empty { color: #9aa0c2; font-weight: 500; } .qtm-pill { flex-shrink: 0; display: inline-flex; align-items: center; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 3px 8px; border-radius: 5px; color: #40499a; background: rgba(65, 73, 154, 0.12); } .qtm-pill--source { color: #fff; background: #40499a; } .qtm-at-btn { position: relative; overflow: hidden; flex-shrink: 0; } .qtm-at-btn::after { content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 55%; background: linear-gradient(120deg, transparent 0%, rgba(65, 73, 154, 0.13) 50%, transparent 100%); transform: translateX(-200%); animation: qtm-shimmer 3.4s ease-in-out infinite; pointer-events: none; } .qtm-at-btn[disabled]::after { animation: none; } @keyframes qtm-shimmer { 0% { transform: translateX(-200%); } 30% { transform: translateX(220%); } 100% { transform: translateX(220%); } } .qtm-at-icon { display: inline-block; } .qtm-at-icon--spin { animation: qtm-rotate 0.8s linear infinite; } @keyframes qtm-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .qtm-at-bar-host:not(:empty) { margin-bottom: 12px; } .qtm-at-bar { padding: 10px 12px; border: 1px solid rgba(216, 219, 237, 0.8); border-radius: 8px; font-size: 12px; color: #3f499a; background: rgba(65, 73, 154, 0.04); } .qtm-at-bar--done { background: rgba(34, 140, 90, 0.1); border-color: rgba(34, 140, 90, 0.2); color: #1a7a50; display: flex; align-items: center; gap: 6px; } .qtm-at-bar--error { background: rgba(196, 54, 42, 0.1); border-color: rgba(196, 54, 42, 0.2); color: #c4362a; display: flex; align-items: center; gap: 6px; } .qtm-at-bar-question { display: block; margin-bottom: 8px; font-weight: 500; } .qtm-at-bar-btns { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .qtm-fields { display: flex; flex-direction: column; gap: 12px; } .qtm-empty { padding: 22px 16px; text-align: center; color: #8890b8; font-size: 13px; } .qtm-field-row { display: flex; flex-direction: row; align-items: center; gap: 10px; } .qtm-field-row .qtm-pill { flex-shrink: 0; min-width: 38px; justify-content: center; } .qtm-field { flex: 1; min-width: 0; } .qtm-field--missing .input-field { border-color: #e8a320 !important; background: #fffcf3 !important; } .qdnapro-tree-item { display: flex; align-items: center; gap: 8px; box-sizing: border-box; border-radius: 8px; cursor: pointer; user-select: none; overflow: hidden; font-family: "Inter", sans-serif; color: #0b0b0d; background: transparent; border: 0.5px solid transparent; transition: background-color 120ms, color 120ms; } .qdnapro-tree-item:focus { outline: none; } .qdnapro-tree-item:focus-visible, .qdnapro-tree-item.force-focus { outline: 2px solid #40499a; outline-offset: -2px; box-shadow: 0 0 0 4px rgba(70, 82, 243, 0.25); } .qdnapro-tree-item > .tree-item-chevron-btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; cursor: pointer; flex-shrink: 0; } .qdnapro-tree-item > .tree-item-chevron-btn > .tree-item-chevron-icon { transition: transform 160ms ease; transform: rotate(-90deg); } .qdnapro-tree-item > .tree-item-chevron-btn:hover { background: rgba(0, 0, 0, 0.04); } .qdnapro-tree-item > .tree-item-chevron-btn:active { background: rgba(0, 0, 0, 0.08); } .qdnapro-tree-item > .tree-item-chevron-btn:focus { outline: none; } .qdnapro-tree-item > .tree-item-chevron-btn:focus-visible, .qdnapro-tree-item > .tree-item-chevron-btn.force-focus { outline: 2px solid #40499a; outline-offset: -2px; box-shadow: 0 0 0 4px rgba(70, 82, 243, 0.25); } .qdnapro-tree-item > .tree-item-icon { flex-shrink: 0; } .qdnapro-tree-item > .tree-item-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .qdnapro-tree-item > .tree-item-badge { flex-shrink: 0; } .qdnapro-tree-item.tree-item-expanded > .tree-item-chevron-btn > .tree-item-chevron-icon { transform: rotate(0deg); } .qdnapro-tree-item.tree-item-large { min-height: 40px; padding: 8px 12px; font-size: 14px; line-height: 24px; font-weight: 400; } .qdnapro-tree-item.tree-item-large > .tree-item-chevron-btn { width: 24px; height: 24px; } .qdnapro-tree-item.tree-item-large.tree-item-type-subfolder { padding-left: 24px; padding-right: 8px; } .qdnapro-tree-item.tree-item-large.tree-item-type-subfolder.tree-item-active { padding-left: 48px; } .qdnapro-tree-item.tree-item-small { min-height: 32px; padding: 4px 8px; font-size: 12px; line-height: 20px; font-weight: 400; gap: 8px; } .qdnapro-tree-item.tree-item-small > .tree-item-chevron-btn { width: 16px; height: 16px; } .qdnapro-tree-item.tree-item-small.tree-item-type-subfolder { padding-left: 24px; padding-right: 8px; } .qdnapro-tree-item.tree-item-small.tree-item-type-subfolder.tree-item-active { padding-left: 48px; } .qdnapro-tree-item.tree-item-type-subfolder:not(.tree-item-active):not(.tree-item-disabled) { color: #6b7280; } .qdnapro-tree-item.tree-item-type-chevron:not(.tree-item-active):not(.tree-item-disabled) > .tree-item-label { font-weight: 700; } .qdnapro-tree-item:not(.tree-item-active):not(.tree-item-disabled):hover { background: #f0f1f2; } .qdnapro-tree-item:not(.tree-item-active):not(.tree-item-disabled):active { background: #e4e6e8; } .qdnapro-tree-item.tree-item-active { background: #e6e9ff; color: #40499a; } .qdnapro-tree-item.tree-item-active > .tree-item-label { font-weight: 700; } .qdnapro-tree-item.tree-item-active:hover { background: #daddf2; } .qdnapro-tree-item.tree-item-active:active { background: #c7cce8; } .qdnapro-tree-item.tree-item-disabled, .qdnapro-tree-item.tree-item-disabled:hover { color: #898e99; background: transparent; cursor: not-allowed; pointer-events: none; } [data-theme=dark] .qdnapro-tree-item { color: #e1e3e6; } [data-theme=dark] .qdnapro-tree-item > .tree-item-icon, [data-theme=dark] .qdnapro-tree-item > .tree-item-chevron-btn > .tree-item-chevron-icon { color: #e1e3e6; } [data-theme=dark] .qdnapro-tree-item > .tree-item-badge { color: #a6aab3; background: transparent; } [data-theme=dark] .qdnapro-tree-item:not(.tree-item-active):not(.tree-item-disabled):hover { background: #565b66; } [data-theme=dark] .qdnapro-tree-item.tree-item-active { background: #4652f3; color: #f0f1f2; } [data-theme=dark] .qdnapro-tree-item.tree-item-active:hover { background: #3842c2; } [data-theme=dark] .qdnapro-tree-item.tree-item-active > .tree-item-icon, [data-theme=dark] .qdnapro-tree-item.tree-item-active > .tree-item-badge, [data-theme=dark] .qdnapro-tree-item.tree-item-active > .tree-item-chevron-btn > .tree-item-chevron-icon { color: #f0f1f2; } [data-theme=dark] .qdnapro-tree-item.tree-item-disabled, [data-theme=dark] .qdnapro-tree-item.tree-item-disabled:hover { color: #6b7280; } [data-theme=dark] .qdnapro-tree-item.tree-item-disabled > .tree-item-icon, [data-theme=dark] .qdnapro-tree-item.tree-item-disabled > .tree-item-badge, [data-theme=dark] .qdnapro-tree-item.tree-item-disabled > .tree-item-chevron-btn > .tree-item-chevron-icon, [data-theme=dark] .qdnapro-tree-item.tree-item-disabled:hover > .tree-item-icon, [data-theme=dark] .qdnapro-tree-item.tree-item-disabled:hover > .tree-item-badge, [data-theme=dark] .qdnapro-tree-item.tree-item-disabled:hover > .tree-item-chevron-btn > .tree-item-chevron-icon { color: #6b7280; } [data-theme=dark] .qdnapro-tree-item:focus-visible, [data-theme=dark] .qdnapro-tree-item.force-focus { outline-color: #a5acff; box-shadow: 0 0 0 4px rgba(70, 82, 243, 0.4); } .qdnapro-unit-input-row { position: relative; display: flex; align-items: center; gap: 10px; box-sizing: border-box; padding: 8px 12px; border: 1.5px solid transparent; border-bottom: 1px solid var(--c-border-soft); border-radius: var(--r-row); font-family: var(--theme-font-family, "Inter", sans-serif); transition: border-color 0.2s, background 0.2s; } .qdnapro-unit-input-row.uir-borderless { border-bottom: none; } /* Error = soft red background; no coloured border. */ .qdnapro-unit-input-row.uir-error { background: var(--c-signal-red-soft); } .qdnapro-unit-input-row .uir-error-msg { font-size: 12px; color: var(--c-tag-critical-text); margin-top: 3px; } .qdnapro-unit-input-row .uir-main { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; cursor: pointer; border-radius: var(--r-3); /* 12px — the pressed-zone radius Kim picked */ padding: 4px; margin: -4px; transform-origin: left center; -webkit-tap-highlight-color: transparent; transition: background 0.12s ease, transform 0.1s ease; } /* Pressed state (added via JS pointerdown — reliable on touch): purple-tinted highlight over image + name + EAN, plus a small squash. */ .qdnapro-unit-input-row .uir-main.is-pressed { background: var(--c-purple-soft-12); transform: scale(0.98); } .qdnapro-unit-input-row .uir-image { position: relative; flex-shrink: 0; } .qdnapro-unit-input-row.uir-no-image .uir-image { width: 0; overflow: visible; } .qdnapro-unit-input-row .uir-image img { width: 48px; height: 48px; object-fit: cover; border-radius: var(--r-btn); display: block; } .qdnapro-unit-input-row .uir-image-empty { width: 48px; height: 48px; border-radius: var(--r-btn); background: var(--c-black-06); } .qdnapro-unit-input-row .uir-status-circle { position: absolute; bottom: -6px; left: -6px; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; pointer-events: none; opacity: 0; transform: scale(0.4); z-index: 2; border: 2px solid var(--c-bg-card, #fff); } .qdnapro-unit-input-row.uir-filled .uir-status-circle { background: var(--c-success-bright, #1db87a); opacity: 1; transform: scale(1); animation: uir-badge-pop 0.52s cubic-bezier(0.34, 1.56, 0.5, 1); } .qdnapro-unit-input-row.uir-error .uir-status-circle { background: var(--c-tag-critical-text, #c0392b); opacity: 1; transform: scale(1); animation: uir-badge-pop 0.52s cubic-bezier(0.34, 1.56, 0.5, 1); } .qdnapro-unit-input-row .uir-check-path { stroke-dasharray: 23; stroke-dashoffset: 23; } .qdnapro-unit-input-row.uir-filled .uir-check-path { animation: uir-draw 0.38s cubic-bezier(0.22, 1, 0.36, 1) 0.04s forwards; } @keyframes uir-badge-pop { 0% { transform: scale(0.7) rotate(0deg); } 20% { transform: scale(1.22) rotate(-5deg); } 44% { transform: scale(0.9) rotate(3deg); } 64% { transform: scale(1.08) rotate(-1deg); } 80% { transform: scale(0.97) rotate(0deg); } 100% { transform: scale(1) rotate(0deg); } } @keyframes uir-draw { 0% { stroke-dashoffset: 23; } 62% { stroke-dashoffset: -1; } 80% { stroke-dashoffset: 0.7; } 100% { stroke-dashoffset: 0; } } .qdnapro-unit-input-row .uir-text { flex: 1; min-width: 0; } .qdnapro-unit-input-row .uir-name { font-size: 16px; font-weight: 400; color: var(--theme-field-text-color, #1d1d1b); line-height: 1.5em; max-height: 1.5em; overflow: hidden; white-space: normal; word-break: break-word; transition: max-height 0.26s cubic-bezier(0.22, 1, 0.36, 1); } .qdnapro-unit-input-row .uir-name.is-clamped { white-space: nowrap; text-overflow: ellipsis; } .qdnapro-unit-input-row.uir-no-meta .uir-name { max-height: 3em; } .qdnapro-unit-input-row.uir-no-meta .uir-name.is-clamped { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-overflow: ellipsis; white-space: normal; } .qdnapro-unit-input-row.uir-filled .uir-name { color: var(--theme-description-color, #6b6b6b); } .qdnapro-unit-input-row .uir-meta { font-size: 12px; color: var(--theme-description-color, #8a8a8a); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .qdnapro-unit-input-row .uir-meta[hidden] { display: none; } .qdnapro-unit-input-row .uir-input { flex-shrink: 0; flex-grow: 1; display: flex; align-items: center; justify-content: flex-end; gap: 8px; } .qdnapro-unit-input-row .uir-input qdnapro-input { width: 96px; } /* With ± counter buttons (spinner) the field needs room for − field + . The ± touch buttons (~44px each) + a decimal value clipped at 138px; widened so "0,00" / counts stay visible. Not viewport-gated: the clip is field-vs-content, present everywhere. */ .qdnapro-unit-input-row .uir-input qdnapro-input[spinner] { width: 180px; } /* Drop the in-field state icon (the red "!" alert-circle) inside the per-unit row. The error is already signalled by the red row border, the red ✗ on the image, and the "Still to fill" line — the extra "!" only eats width, which hurts most on the narrow number/date/decimal fields. Scoped to this row only (not qdnapro-input elsewhere). 5 classes + element (51) beats the component's own .input-state-icon display rule (40) without !important. */ .qdnapro-unit-input-row .uir-input qdnapro-input .input-field .input-trailing .input-state-icon { display: none; } /* Narrow screens (phone) + per-unit ONLY: drop the in-field clear (×) button. In the compact "input for every unit" rows the × eats the width the value needs — it clips "€ 2,00" / "0,000" on decimal + currency. On phone that space is too precious; on tablet/desktop there's room, so the × stays there. Select-all + retype still clears. Scoped to .qdnapro-unit-input-row so single full-width fields keep their ×. [Kim 2026-07-01] */ @media (max-width: 767px) { .qdnapro-unit-input-row .uir-input qdnapro-input .input-field .input-trailing qdnapro-icon-btn[icon=close] { display: none; } /* Currency still needs a bit more room for the € prefix + value (even without the ×). */ .qdnapro-unit-input-row[input-type=currency] .uir-input qdnapro-input { width: 130px; } /* Date: the native picker (dd/mm/yyyy + calendar icon) has a wide intrinsic min (~200px). At the 96px default it overflowed off-screen. Widen so it fits; the name column yields (Kim's pick — option 1). Time is narrower but also clipped at 96px. */ .qdnapro-unit-input-row[input-type=date] .uir-input qdnapro-input { width: 200px; } .qdnapro-unit-input-row[input-type=time] .uir-input qdnapro-input { width: 120px; } } /* Per-unit message channel: the field's OWN validation message stays hidden — the per-unit error is carried by the row instead ("Still to fill" under the name, set by advanced_input.js). The long required message ("You have to fill out all required form fields.") would otherwise run off a narrow phone field. Auto-scoped to per-unit because only the per-unit screen wraps the input in .qdnapro-unit-input-row; the single full-width field (not-per-unit) is unwrapped and keeps the fuller message. Covers both blur and submit paths in one rule. The constraints hint (a separate line below the field) is NOT .input-message, so min/max/range hints still show. */ .qdnapro-unit-input-row .uir-input qdnapro-input .input-message { display: none; } .qdnapro-unit-input-row .uir-scan { flex-shrink: 0; background: color-mix(in srgb, var(--theme-btn-color, #40499a) 12%, #fff); color: var(--theme-btn-color, #40499a); } .qdnapro-unit-input-row .uir-scan qdnapro-icon { color: var(--theme-btn-color, #40499a); } .qdnapro-unit-input-row.uir-layout-stacked { flex-wrap: wrap; } .qdnapro-unit-input-row.uir-layout-stacked .uir-main { width: 100%; } .qdnapro-unit-input-row.uir-layout-stacked .uir-input { width: 100%; margin-top: 6px; } .qdnapro-unit-input-row.uir-layout-stacked .uir-input qdnapro-input { flex: 1; width: auto; } .qdnapro-unit-input-row[input-type=text]:not(.uir-layout-stacked) .uir-main, .qdnapro-unit-input-row[input-type=expanding]:not(.uir-layout-stacked) .uir-main { flex: 4 1 0; } .qdnapro-unit-input-row[input-type=text]:not(.uir-layout-stacked) .uir-input, .qdnapro-unit-input-row[input-type=expanding]:not(.uir-layout-stacked) .uir-input { flex: 6 1 0; min-width: 0; max-width: 564px; } .qdnapro-unit-input-row[input-type=text]:not(.uir-layout-stacked) .uir-input qdnapro-input, .qdnapro-unit-input-row[input-type=expanding]:not(.uir-layout-stacked) .uir-input qdnapro-input { flex: 1; width: auto; min-width: 0; } @media (min-width: 768px) { .qdnapro-unit-input-row[input-type=number] .uir-input qdnapro-input, .qdnapro-unit-input-row[input-type=currency] .uir-input qdnapro-input { width: 160px; } .qdnapro-unit-input-row[input-type=date] .uir-input qdnapro-input { width: 170px; } .qdnapro-unit-input-row[input-type=time] .uir-input qdnapro-input { width: 130px; } } .qdnapro-unit-input-row[input-type=number]:not(.uir-layout-stacked) .uir-input, .qdnapro-unit-input-row[input-type=currency]:not(.uir-layout-stacked) .uir-input, .qdnapro-unit-input-row[input-type=date]:not(.uir-layout-stacked) .uir-input, .qdnapro-unit-input-row[input-type=time]:not(.uir-layout-stacked) .uir-input, .qdnapro-unit-input-row[input-type=photo]:not(.uir-layout-stacked) .uir-input { flex-grow: 0; } @media (min-width: 768px) { .qdnapro-unit-input-row { border: 1px solid var(--c-border-card); border-radius: var(--r-row); margin-bottom: 8px; } .qdnapro-unit-input-row.uir-borderless { border: 1.5px solid transparent; border-bottom: none; border-radius: var(--r-row); margin-bottom: 0; } } .qdnapro-wizard-modal { display: none; position: fixed; inset: 0; z-index: 9000; /* Geen ingebakken zoom, en dat is sinds 2026-08-03 de regel voor ELK venster: `qdnapro-modal` had er een van 1.25 voor de legacy `body { zoom: 0.8 }`, en die is weggehaald omdat die body-zoom een v1-pagina niet meer bereikt (zie de uitleg in `components/v2/modal/_modal.scss`). Zet hier dus ook geen counter-zoom terug; komt zo'n pagina er ooit weer, dan hoort de correctie bij die PAGINA. */ } .qdnapro-wizard-modal.wm-open { display: flex; } .wm-scrim { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(11, 11, 13, 0.45); animation: qdnapro-wm-scrim-in 160ms ease-out; } /* OUTER GREY FRAME — identical to qdnapro-modal .modal-dialog. */ .wm-dialog { background: #f0f1f2; border: 0.5px solid #ffffff; border-radius: 16px; padding: 8px; box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3), 0 8px 12px 6px rgba(0, 0, 0, 0.15); width: 480px; max-width: calc(100vw - 48px); transition: width 0.38s cubic-bezier(0.4, 0, 0.2, 1); animation: qdnapro-wm-dialog-in 200ms cubic-bezier(0.2, 0.8, 0.2, 1); } /* Step viewport (inside the 8px grey padding). Steps stack + slide here. */ .wm-steps { position: relative; height: var(--wm-height, 540px); max-height: calc(100vh - 64px); overflow: hidden; } /* AUTO-HEIGHT hosts (opt-in attribute, 20.07.2026): the component writes the active step's measured natural height as an inline style; this transition makes step changes glide on the SAME curve as the width. Gated on the attribute so fixed-height hosts (Master Picker) never animate height. */ .qdnapro-wizard-modal[auto-height] .wm-steps { transition: height 0.38s cubic-bezier(0.4, 0, 0.2, 1); } /* Each step IS the white window — same border as qdnapro-modal .modal-window. */ .qdnapro-wizard-step { position: absolute; inset: 0; display: flex; flex-direction: column; background: #ffffff; border: 0.5px solid #c4c7cc; border-radius: 12px; overflow: hidden; transition: transform 0.36s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.28s ease; } .qdnapro-wizard-step.wm-active { transform: none; opacity: 1; } .qdnapro-wizard-step.wm-off-left { transform: translateX(-70px); opacity: 0; pointer-events: none; } .qdnapro-wizard-step.wm-off-right { transform: translateX(70px); opacity: 0; pointer-events: none; } /* Optional centered segment / tab bar under the header (like qdnapro-modal's tabs row, e.g. "Vragen | Tijdsinstellingen"). Drop a qdnapro-segment in a .wm-tabbar; omit the element when it's not needed (= hidden). [Kim 2026-06-15] */ .wm-tabbar { display: flex; justify-content: center; padding: 6px 16px 8px; flex-shrink: 0; } /* with-info step: transparent so the grey dialog frame shows on the left; a grey info panel + 8px gap + the white bordered main. Mirrors qdnapro-modal. */ .qdnapro-wizard-step.wm-with-info { flex-direction: row; gap: 8px; background: transparent; border: 0; border-radius: 0; overflow: visible; } .wm-info { flex: 0 0 260px; min-width: 0; align-self: stretch; padding: 16px; display: flex; flex-direction: column; gap: 14px; overflow: hidden; } .wm-info-head { display: flex; align-items: center; gap: 8px; } .wm-info-head qdnapro-icon { color: #40499a; } .wm-info-title { font-size: 16px; line-height: 24px; font-weight: 600; color: #40499a; } .wm-info-text { font-size: 14px; line-height: 22px; color: #1a1f4d; } .wm-info-illustration { margin-top: auto; margin-left: -16px; margin-right: -16px; margin-bottom: -16px; align-self: stretch; pointer-events: none; display: flex; align-items: flex-end; justify-content: flex-start; /* Decorative illustration always at 60% opacity so it stays subtle behind the content, consistent across every modal. [Kim 2026-06-15] */ opacity: 0.6; } .wm-info-illustration qdnapro-illustration, .wm-info-illustration img, .wm-info-illustration svg { display: block; max-width: 100%; height: auto; } /* The DMS folder-access role art is tall portrait; without a height cap it fills the whole info column. Cap it so it sits as a subtle bottom illustration like the landscape ones. Scoped to the role-* assets so the other picker consumers (teams/locations/KPIs) are untouched. [Kim 2026-07-21] */ .wm-info-illustration img[src*=role-] { width: auto; max-height: 300px; margin-left: auto; margin-right: auto; } .wm-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; background: #ffffff; border: 0.5px solid #c4c7cc; border-radius: 12px; overflow: hidden; } .qdnapro-wizard-modal ::-webkit-scrollbar { width: 8px; height: 8px; } .qdnapro-wizard-modal ::-webkit-scrollbar-track { background: transparent; } .qdnapro-wizard-modal ::-webkit-scrollbar-corner { background: transparent; } .qdnapro-wizard-modal ::-webkit-scrollbar-thumb { background: transparent; border-radius: 8px; transition: background 160ms ease; } .qdnapro-wizard-modal *:hover::-webkit-scrollbar-thumb, .qdnapro-wizard-modal *:focus-within::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.22); } .qdnapro-wizard-modal ::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.34); } @keyframes qdnapro-wm-scrim-in { from { opacity: 0; } to { opacity: 1; } } @keyframes qdnapro-wm-dialog-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } } /* dark theme */ [data-theme=dark] .wm-dialog, [data-theme-dark] .wm-dialog { background: #1f2229; border-color: rgba(255, 255, 255, 0.08); } [data-theme=dark] .qdnapro-wizard-step, [data-theme-dark] .qdnapro-wizard-step, [data-theme=dark] .wm-main, [data-theme-dark] .wm-main { background: #2a2d36; border-color: rgba(255, 255, 255, 0.1); } qdnapro-unit-type { display: contents; } .qdnapro-unit-type { display: flex; flex-direction: column; min-width: 0; background: #fff; border-radius: 12px; overflow: hidden; cursor: pointer; font-weight: normal; text-decoration: none; justify-content: space-between; min-height: 120px; } .qdnapro-unit-type:hover { background-color: #f5f6f8; } .qdnapro-unit-type *, .qdnapro-unit-type *::before, .qdnapro-unit-type *::after { box-sizing: border-box; } .utc-top { display: flex; flex-direction: row; gap: 16px; padding: 1.25rem 1.5rem 0.5rem; align-items: center; } .utc-icon { flex: 0 0 48px; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; font-size: 44px; align-self: center; } .utc-icon img { width: 48px; height: 48px; border-radius: 0.5rem; object-fit: contain; display: block; } .utc-content { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; } .utc-heading { font-family: var(--Type-Font-Family-primary, Inter); font-size: var(--Font-size-Body-Inter-medium-14, 14px); font-weight: 600; line-height: var(--Line-Height-Body-Body-Medium-Caption, 24px); color: var(--Text-Body, #0b0b0d); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; } .utc-subheading { font-family: var(--Type-Font-Family-primary, Inter); font-size: var(--Font-size-Body-small-12, 12px); font-weight: 400; line-height: var(--Line-Height-Body-Body-Small, 20px); color: var(--Text-Body-Secondary, #6b7280); margin-top: 0; text-overflow: ellipsis; } .utc-footer { display: flex; flex-flow: row; width: 100%; padding: 0.5rem 1.5rem 0.75rem; box-sizing: border-box; } .utc-footer[hidden] { display: none; } .utc-pair { display: flex; gap: 4px; align-items: baseline; padding-right: 24px; } .utc-label, .utc-value { font-family: var(--Type-Font-Family-primary, Inter); font-size: var(--Font-size-Body-small-12, 12px); font-weight: 400; line-height: var(--Line-Height-Body-Body-Small, 20px); color: var(--Surface-Signal-Signal-grey-Detail, #6b7280); } .qdnapro-date-carousel { --dc-active: #3a4290; --dc-card-bg: #ffffff; --dc-border: rgba(58, 66, 144, 0.13); --dc-border-past: rgba(58, 66, 144, 0.07); --dc-name-idle: #9096c4; --dc-day-idle: #525aaa; --dc-name-past: #a8accc; --dc-day-past: #7378b0; --dc-dot-idle: rgba(58, 66, 144, 0.22); --dc-title-color: #1a1733; --dc-month-color: #525aaa; display: block; cursor: grab; -webkit-user-select: none; user-select: none; border-bottom: 0.5px solid var(--dc-border); overflow-x: clip; } .qdnapro-date-carousel.is-dragging { cursor: grabbing; } .qdnapro-date-carousel__header { display: flex; align-items: flex-start; justify-content: space-between; padding: 0 8px; min-height: 52px; max-height: 52px; overflow: hidden; transition: max-height 0.28s cubic-bezier(0.2, 0, 0, 1), min-height 0.28s cubic-bezier(0.2, 0, 0, 1), opacity 0.18s ease, transform 0.28s cubic-bezier(0.2, 0, 0, 1); } .qdnapro-date-carousel__header-info { display: flex; flex-direction: column; gap: 2px; } .qdnapro-date-carousel__header-title { font-size: 18px; font-weight: 500; color: var(--dc-title-color); line-height: 1.2; } .qdnapro-date-carousel__header-month { font-size: 13px; font-weight: 500; color: var(--dc-month-color); letter-spacing: 0.02em; } .qdnapro-date-carousel__vandaag-btn { flex-shrink: 0; align-self: flex-start; transform-origin: right center; } .qdnapro-date-carousel__vandaag-btn.is-popping-in { animation: qdnapro-dc-btn-in 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } .qdnapro-date-carousel__vandaag-btn.is-popping-out { animation: qdnapro-dc-btn-out 0.2s ease-in forwards; } .qdnapro-date-carousel__strip-wrap { clip-path: inset(-200px 0px -200px 0px); padding: 10px 0 8px; margin-top: -10px; -webkit-mask: linear-gradient(to right, transparent 0%, black 11%, black 89%, transparent 100%); mask: linear-gradient(to right, transparent 0%, black 11%, black 89%, transparent 100%); touch-action: pan-y; } .qdnapro-date-carousel__strip { display: flex; gap: 8px; will-change: transform; } .qdnapro-date-carousel__card { width: 56px; height: 72px; border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; -webkit-tap-highlight-color: transparent; box-sizing: border-box; transition: transform 0.15s ease, background-color 0.12s ease, border-color 0.12s ease, opacity 0.12s ease, width 0.28s cubic-bezier(0.2, 0, 0, 1), height 0.28s cubic-bezier(0.2, 0, 0, 1), border-radius 0.28s cubic-bezier(0.2, 0, 0, 1); } .qdnapro-date-carousel__card--idle { background: var(--dc-card-bg); border: 0.5px solid var(--dc-border); } .qdnapro-date-carousel__card--idle .qdnapro-date-carousel__card-name { color: var(--dc-name-idle); } .qdnapro-date-carousel__card--idle .qdnapro-date-carousel__card-day { color: var(--dc-day-idle); } .qdnapro-date-carousel__card--idle .qdnapro-date-carousel__card-dot { background: var(--dc-dot-idle); } .qdnapro-date-carousel__card--past { background: var(--dc-card-bg); border: 0.5px solid var(--dc-border-past); opacity: 0.48; } .qdnapro-date-carousel__card--past .qdnapro-date-carousel__card-name { color: var(--dc-name-past); } .qdnapro-date-carousel__card--past .qdnapro-date-carousel__card-day { color: var(--dc-day-past); } .qdnapro-date-carousel__card--past .qdnapro-date-carousel__card-dot { background: var(--dc-dot-idle); } .qdnapro-date-carousel__card--active { background: var(--dc-active); border: none; } .qdnapro-date-carousel__card--active .qdnapro-date-carousel__card-name { color: rgba(255, 255, 255, 0.6); } .qdnapro-date-carousel__card--active .qdnapro-date-carousel__card-day { color: #ffffff; } .qdnapro-date-carousel__card--active .qdnapro-date-carousel__card-dot { background: rgba(255, 255, 255, 0.5); } .qdnapro-date-carousel__card-name { font-size: 12px; line-height: 1; margin-bottom: 4px; font-weight: 400; transition: color 0.12s ease, font-size 0.28s cubic-bezier(0.2, 0, 0, 1), margin-bottom 0.28s cubic-bezier(0.2, 0, 0, 1); } .qdnapro-date-carousel__card-day { font-size: 23px; line-height: 1; font-weight: 500; transition: color 0.12s ease, font-size 0.28s cubic-bezier(0.2, 0, 0, 1); } .qdnapro-date-carousel__card-dot { width: 4px; height: 4px; border-radius: 50%; margin-top: 5px; } .qdnapro-date-carousel .drag-mode .qdnapro-date-carousel__card--active:not(.is-growing) { transform: scale(1.1); transition: transform 0.18s ease; } .qdnapro-date-carousel__card.is-pressing { transform: scale(0.86); transition: transform 0.09s ease-in; } .qdnapro-date-carousel[compact] .qdnapro-date-carousel__header { max-height: 0; min-height: 0; opacity: 0; transform: translateY(-4px); pointer-events: none; } .qdnapro-date-carousel[compact] .qdnapro-date-carousel__card { width: 38px; height: 44px; border-radius: 10px; } .qdnapro-date-carousel[compact] .qdnapro-date-carousel__card-name { font-size: 9px; margin-bottom: 2px; } .qdnapro-date-carousel[compact] .qdnapro-date-carousel__card-day { font-size: 15px; } .qdnapro-date-carousel[compact] .qdnapro-date-carousel__card-dot { width: 3px; height: 3px; margin-top: 2px; } .qdnapro-date-carousel[compact] .qdnapro-date-carousel__strip-wrap { padding: 6px 0; margin-top: -6px; } @keyframes qdnapro-dc-grow { 0% { transform: scale(1); } 55% { transform: scale(1.18); } 100% { transform: scale(1.1); } } @keyframes qdnapro-dc-pop { 0% { transform: scale(0.86); } 50% { transform: scale(1.12); } 72% { transform: scale(0.96); } 87% { transform: scale(1.03); } 100% { transform: scale(1); } } @keyframes qdnapro-dc-confirm { 0% { transform: scale(1.1); } 45% { transform: scale(1.15); } 70% { transform: scale(0.97); } 100% { transform: scale(1); } } @keyframes qdnapro-dc-wiggle { 0% { transform: scale(1) rotate(0deg); } 25% { transform: scale(0.93) rotate(-3deg); } 60% { transform: scale(1.04) rotate(2.5deg); } 80% { transform: scale(0.98) rotate(-1deg); } 100% { transform: scale(1) rotate(0deg); } } .qdnapro-date-carousel__card.is-growing { animation: qdnapro-dc-grow 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; transition: none; } .qdnapro-date-carousel__card.is-popping { animation: qdnapro-dc-pop 0.48s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; transition: none; } .qdnapro-date-carousel__card.is-confirming { animation: qdnapro-dc-confirm 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; transition: none; } .qdnapro-date-carousel__card.is-wiggle { animation: qdnapro-dc-wiggle 0.36s ease forwards; transition: none; } @keyframes qdnapro-dc-btn-in { 0% { transform: scale(0.4); opacity: 0; } 65% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } @keyframes qdnapro-dc-btn-out { 0% { transform: scale(1); opacity: 1; } 35% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(0.4); opacity: 0; } } .qdnapro-unit-card { display: flex; position: relative; overflow: visible; cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; font-family: "Inter", system-ui, -apple-system, sans-serif; transition: transform 170ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 120ms ease; } .qdnapro-unit-card__frame { flex: 1 1 auto; min-width: 0; display: flex; position: relative; box-sizing: border-box; border: 1.5px solid var(--c-border-soft-2); border-radius: var(--r-2); background: var(--c-bg-card); overflow: hidden; transition: border-color 120ms ease, background 120ms ease; } .qdnapro-unit-card.is-pressing { transform: scale(0.95); transition: transform 70ms ease-out; } @media (prefers-reduced-motion: reduce) { .qdnapro-unit-card, .qdnapro-unit-card.is-pressing { transition: none; transform: none; } } .qdnapro-unit-card.view-grid-compact .qdnapro-unit-card__frame, .qdnapro-unit-card.view-grid-standard .qdnapro-unit-card__frame { flex-direction: column; } .qdnapro-unit-card.view-grid-compact .qdnapro-unit-card__name, .qdnapro-unit-card.view-grid-standard .qdnapro-unit-card__name { flex: 1 0 auto; padding: 8px 6px 6px; font-size: 14px; line-height: 1.3; font-weight: 400; color: var(--c-text-heading); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; white-space: normal; overflow: hidden; } .qdnapro-unit-card.view-grid-compact .qdnapro-unit-card__image-wrap, .qdnapro-unit-card.view-grid-standard .qdnapro-unit-card__image-wrap { width: 100%; aspect-ratio: 1/1; flex-shrink: 0; } .qdnapro-unit-card.view-grid-compact .qdnapro-unit-card__check-badge, .qdnapro-unit-card.view-grid-standard .qdnapro-unit-card__check-badge { position: absolute; bottom: 6px; right: 6px; } .qdnapro-unit-card.view-grid-standard .qdnapro-unit-card__name { font-size: 15px; padding: 9px 11px 7px; } .qdnapro-unit-card.view-grid-standard .qdnapro-unit-card__fallback-abbr { font-size: 24px; } .qdnapro-unit-card.view-grid-standard .qdnapro-unit-card__check-badge { bottom: 8px; right: 8px; width: 26px; height: 26px; } .qdnapro-unit-card.view-list-compact .qdnapro-unit-card__frame, .qdnapro-unit-card.view-list-large .qdnapro-unit-card__frame { flex-direction: row; align-items: center; } .qdnapro-unit-card.view-list-compact .qdnapro-unit-card__image-wrap, .qdnapro-unit-card.view-list-large .qdnapro-unit-card__image-wrap { width: 48px; height: 48px; flex-shrink: 0; order: -1; } .qdnapro-unit-card.view-list-compact .qdnapro-unit-card__status-bar, .qdnapro-unit-card.view-list-large .qdnapro-unit-card__status-bar { display: none; } .qdnapro-unit-card.view-list-compact .qdnapro-unit-card__name, .qdnapro-unit-card.view-list-large .qdnapro-unit-card__name { flex: 1; padding: 0 12px; font-size: 14px; font-weight: 500; color: var(--c-text-heading); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .qdnapro-unit-card.view-list-compact .qdnapro-unit-card__check-badge, .qdnapro-unit-card.view-list-large .qdnapro-unit-card__check-badge { position: static; margin-right: 10px; flex-shrink: 0; } .qdnapro-unit-card.view-list-large .qdnapro-unit-card__image-wrap { width: 64px; height: 64px; } .qdnapro-unit-card.view-list-large .qdnapro-unit-card__name { font-size: 14px; font-weight: 600; } .qdnapro-unit-card.view-list-large .qdnapro-unit-card__check-badge { margin-right: 14px; width: 26px; height: 26px; } .qdnapro-unit-card.flat.view-list-compact .qdnapro-unit-card__frame, .qdnapro-unit-card.flat.view-list-large .qdnapro-unit-card__frame { border: 1.5px solid transparent; border-bottom: 1px solid var(--c-border-soft); border-radius: 0; } .qdnapro-unit-card__clear { display: none; } .qdnapro-unit-card.view-list-compact .qdnapro-unit-card__clear, .qdnapro-unit-card.view-list-large .qdnapro-unit-card__clear { display: flex; flex-shrink: 0; margin-left: 4px; } .qdnapro-unit-card__image-wrap { display: flex; align-items: center; justify-content: center; background: #f6f7fb; overflow: hidden; } .qdnapro-unit-card__image { width: 100%; height: 100%; object-fit: contain; display: block; } .qdnapro-unit-card__fallback { width: 100%; height: 100%; min-height: 68px; display: flex; align-items: center; justify-content: center; background: var(--uc-fb-bg, #eef0fb); } .qdnapro-unit-card__fallback-abbr { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; color: var(--uc-fb-fg, #4a52a0); } .qdnapro-unit-card__check-badge { width: 22px; height: 22px; border-radius: 50%; background: var(--c-brand-purple); display: flex; align-items: center; justify-content: center; color: var(--c-text-on-action); flex-shrink: 0; pointer-events: none; opacity: 0; transform: scale(0.4); transition: opacity 150ms ease, transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1); } .qdnapro-unit-card__check-badge svg { display: block; } .qdnapro-unit-card__lp-ring { position: absolute; inset: 0; border-radius: inherit; border: 2.5px solid var(--c-brand-purple); pointer-events: none; opacity: 0; } .qdnapro-unit-card__status-bar { display: flex; align-items: center; gap: 6px; padding: 7px 10px; font-size: 13px; font-weight: 500; line-height: 1.2; color: #fff; position: relative; z-index: 2; flex-shrink: 0; } .qdnapro-unit-card__status-icon { display: flex; flex-shrink: 0; } .qdnapro-unit-card__status-icon svg { display: block; } .qdnapro-unit-card__status-label { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .qdnapro-unit-card.result-ok .qdnapro-unit-card__status-bar { background: #6bb6ab; } .qdnapro-unit-card.result-not-ok .qdnapro-unit-card__status-bar { background: #de5066; } .qdnapro-unit-card.result-future-fix .qdnapro-unit-card__status-bar { background: #ef8e01; } .qdnapro-unit-card.result-issue .qdnapro-unit-card__status-bar { background: #8a4ea0; } .qdnapro-unit-card.has-result.view-grid-compact .qdnapro-unit-card__check-badge, .qdnapro-unit-card.has-result.view-grid-standard .qdnapro-unit-card__check-badge { bottom: 36px; } .qdnapro-unit-card.is-selected { box-shadow: 0 0 0 3px var(--focus-glow); } .qdnapro-unit-card.is-selected .qdnapro-unit-card__frame { background: var(--c-bg-subtle-purple); } .qdnapro-unit-card.is-selected .qdnapro-unit-card__frame::after { content: ""; position: absolute; inset: 0; background: rgba(26, 31, 77, 0.32); pointer-events: none; z-index: 1; } .qdnapro-unit-card.is-selected .qdnapro-unit-card__check-badge { opacity: 1; transform: scale(1); z-index: 2; animation: uc-badge-pop 0.52s cubic-bezier(0.34, 1.56, 0.5, 1); } .qdnapro-unit-card__check-path { stroke-dasharray: 23; stroke-dashoffset: 23; transition: stroke-dashoffset 0.15s ease; } .qdnapro-unit-card.is-selected .qdnapro-unit-card__check-path { animation: uc-draw 0.38s cubic-bezier(0.22, 1, 0.36, 1) 0.04s forwards; } @keyframes uc-badge-pop { 0% { transform: scale(0.7) rotate(0deg); } 20% { transform: scale(1.22) rotate(-5deg); } 44% { transform: scale(0.9) rotate(3deg); } 64% { transform: scale(1.08) rotate(-1deg); } 80% { transform: scale(0.97) rotate(0deg); } 100% { transform: scale(1) rotate(0deg); } } @keyframes uc-draw { 0% { stroke-dashoffset: 23; } 62% { stroke-dashoffset: -1; } 80% { stroke-dashoffset: 0.7; } 100% { stroke-dashoffset: 0; } } .qdnapro-unit-card.status-problem.view-list-compact .qdnapro-unit-card__frame, .qdnapro-unit-card.status-problem.view-list-large .qdnapro-unit-card__frame { border-left-color: #e04060; border-left-width: 3px; } .qdnapro-unit-card .qdnapro-unit-card__image-wrap { position: relative; } .qdnapro-unit-card .qdnapro-unit-card__mandatory-badge { position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; border-radius: 50%; background: #DE5066; border: 2px solid var(--c-bg-card); box-sizing: border-box; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); pointer-events: none; z-index: 4; } .qdnapro-unit-card .qdnapro-unit-card__mandatory-badge svg { width: 12px; height: 12px; display: block; } .qdnapro-unit-card.is-mandatory.view-grid-compact .qdnapro-unit-card__name, .qdnapro-unit-card.is-mandatory.view-grid-standard .qdnapro-unit-card__name { padding-right: 14px; } .qdnapro-unit-card.view-list-compact .qdnapro-unit-card__mandatory-badge { width: 16px; height: 16px; top: -6px; right: -6px; border: 2px solid var(--c-bg-card); box-sizing: border-box; } .qdnapro-unit-card.view-list-compact .qdnapro-unit-card__mandatory-badge svg { width: 9px; height: 9px; } .qdnapro-unit-context { display: block; } .qdnapro-unit-context.is-empty { display: none; } .qdnapro-unit-context__bar { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; max-width: 200px; background: transparent; border: 1px solid transparent; border-radius: 8px; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; transition: background 120ms ease-out; } .qdnapro-unit-context__bar:hover { background: var(--c-grey-100); } .qdnapro-unit-context__bar:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-glow); border-color: var(--focus-ring); } .qdnapro-unit-context__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: var(--fw-medium); color: var(--c-text-heading); } .qdnapro-unit-context__chevron { flex: none; display: inline-flex; align-items: center; color: var(--c-text-muted); } .qdnapro-unit-context__chevron svg { display: block; } .qdnapro-unit-context__overlay { position: fixed; inset: 0; z-index: 2147483000; display: flex; } .qdnapro-unit-context__overlay[hidden] { display: none; } .qdnapro-unit-context__backdrop { position: absolute; inset: 0; background: var(--c-black-30); opacity: 0; transition: opacity 240ms ease; } .qdnapro-unit-context__panel { position: relative; flex: 1; display: flex; flex-direction: column; background: var(--c-bg-card); clip-path: circle(0% at 100% 0%); transition: clip-path 340ms cubic-bezier(0.4, 0, 0.2, 1); will-change: clip-path; } .qdnapro-unit-context__overlay.is-open .qdnapro-unit-context__backdrop { opacity: 1; } .qdnapro-unit-context__overlay.is-open .qdnapro-unit-context__panel { clip-path: circle(150% at 100% 0%); } .qdnapro-unit-context__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); padding: 18px var(--s-4) var(--s-3); } .qdnapro-unit-context__heading-wrap { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; } .qdnapro-unit-context__title { font-size: 24px; font-weight: var(--fw-semi); color: var(--c-text-heading); line-height: 1.3; } .qdnapro-unit-context__subtitle { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: var(--r-pill); background: var(--c-bg-secondary-purple); font-size: 20px; font-weight: var(--fw-medium); color: var(--c-brand-purple); } .qdnapro-unit-context__subtitle.is-pulsing { animation: qdnapro-unit-context-count-pop 420ms cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes qdnapro-unit-context-count-pop { 0% { transform: scale(1); } 30% { transform: scale(1.18); } 55% { transform: scale(0.94); } 75% { transform: scale(1.05); } 100% { transform: scale(1); } } .qdnapro-icon-btn.qdnapro-unit-context__close { flex: none; color: var(--c-text-muted); } .qdnapro-unit-context__hint { display: inline-flex; align-self: center; align-items: center; gap: 6px; margin: 0 var(--s-4) var(--s-2); padding: 4px 10px; border-radius: 6px; background: var(--c-bg-secondary-purple); color: var(--c-brand-purple); font-size: 14px; font-weight: var(--fw-medium); line-height: 1.3; } .qdnapro-unit-context__hint::before { content: ""; flex: 0 0 auto; width: 16px; height: 16px; background-color: var(--c-brand-purple); -webkit-mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M11 9h2V7h-2m1 13c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8m0-18A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2m-1 15h2v-6h-2z'/%3E%3C/svg%3E"); mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M11 9h2V7h-2m1 13c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8m0-18A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2m-1 15h2v-6h-2z'/%3E%3C/svg%3E"); } .qdnapro-unit-context__search { padding: 0 var(--s-4) var(--s-3); } .qdnapro-unit-context__list { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 2px var(--s-3) var(--s-4); display: flex; flex-direction: column; gap: 6px; } .qdnapro-unit-context__list[hidden] { display: none; } .qdnapro-unit-context__empty { flex: 1; display: flex; align-items: flex-start; justify-content: center; padding: 40px var(--s-4); color: var(--c-text-muted); font-size: 13px; } .qdnapro-unit-context__empty[hidden] { display: none; } @media (min-width: 640px) { .qdnapro-unit-context__overlay { align-items: center; justify-content: center; padding: var(--s-6); } .qdnapro-unit-context__panel { flex: none; width: 480px; max-width: 100%; max-height: 80vh; border-radius: var(--r-card); box-shadow: var(--shadow-card); overflow: hidden; } } .qdnapro-summary-badge { display: inline-flex; align-items: center; gap: var(--s-1); padding: 8px 16px; background: color-mix(in srgb, var(--theme-btn-color, #40499a) 10%, white); color: var(--theme-btn-color, #40499a); border-radius: var(--r-btn); font-family: "Inter", sans-serif; font-size: 16px; font-weight: 500; line-height: 1; white-space: nowrap; } qdnapro-pwa-main-menu-item, .qdnapro-pwa-main-menu-item { display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; } qdnapro-pwa-main-menu-item .pmi-circle, .qdnapro-pwa-main-menu-item .pmi-circle { width: 60px; height: 60px; border-radius: 50%; background: rgba(255, 255, 255, 0.15); display: flex; align-items: center; justify-content: center; transition: background 120ms ease-out; } qdnapro-pwa-main-menu-item .pmi-circle qdnapro-activity-icon, .qdnapro-pwa-main-menu-item .pmi-circle qdnapro-activity-icon { width: 36px; height: 36px; display: block; } qdnapro-pwa-main-menu-item:hover .pmi-circle, qdnapro-pwa-main-menu-item .pmi-circle.force-hover, .qdnapro-pwa-main-menu-item:hover .pmi-circle, .qdnapro-pwa-main-menu-item .pmi-circle.force-hover { background: rgba(255, 255, 255, 0.25); } qdnapro-pwa-main-menu-item .pmi-circle.is-pressed, qdnapro-pwa-main-menu-item .pmi-circle.force-pressed, .qdnapro-pwa-main-menu-item .pmi-circle.is-pressed, .qdnapro-pwa-main-menu-item .pmi-circle.force-pressed { background: rgba(255, 255, 255, 0.35); } qdnapro-pwa-main-menu-item .pmi-label, .qdnapro-pwa-main-menu-item .pmi-label { font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 12px; font-weight: 500; color: #ffffff; text-align: center; line-height: 1.3; max-width: 72px; word-break: break-word; } .qdnapro-bottom-nav { --bn-height: 60px; position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: stretch; height: calc(var(--bn-height) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--c-brand-purple); border-top: none; box-shadow: 0 -2px 16px rgba(20, 25, 80, 0.18); box-sizing: border-box; } .qdnapro-bottom-nav *, .qdnapro-bottom-nav *::before, .qdnapro-bottom-nav *::after { box-sizing: border-box; } .qdnapro-bottom-nav { transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1), opacity 0.22s ease; } .qdnapro-bottom-nav.nav-hidden { transform: translateY(calc(100% + 24px)); opacity: 0; pointer-events: none; } .qdnapro-bottom-nav-btn { flex: 1 1 0; min-width: 0; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px 4px; background: transparent; border: none; border-radius: 0; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; color: var(--c-white-65); font-family: "Inter", sans-serif; text-decoration: none; transition: color 120ms ease-out; } .qdnapro-bottom-nav-btn__icon { width: 48px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 999px; position: relative; transition: background-color 120ms ease-out, transform 100ms cubic-bezier(0.34, 1.56, 0.64, 1); } .qdnapro-bottom-nav-btn__icon svg { width: 24px; height: 24px; fill: currentColor; stroke: none; pointer-events: none; } .qdnapro-bottom-nav-btn__svg-filled { display: none; position: absolute; width: 24px; height: 24px; fill: currentColor; stroke: none; pointer-events: none; clip-path: inset(0 100% 0 0); } .qdnapro-bottom-nav-btn__dot { position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--c-text-on-action); opacity: 0; transition: opacity 150ms ease-out; pointer-events: none; } .qdnapro-bottom-nav-btn__label { display: none; font-size: 10px; font-weight: 500; line-height: 1; letter-spacing: 0.01em; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .qdnapro-bottom-nav-btn [data-role=nav-badge] { position: absolute; top: 4px; right: calc(50% - 26px); z-index: 2; font-variant-numeric: tabular-nums; pointer-events: none; } .qdnapro-bottom-nav-btn.has-badge { z-index: 2; } @media (hover: hover) { .qdnapro-bottom-nav-btn:hover:not(.is-disabled):not(.is-fab) .qdnapro-bottom-nav-btn__icon { background: var(--c-white-12); } } .qdnapro-bottom-nav-btn:active:not(.is-disabled):not(.is-fab) .qdnapro-bottom-nav-btn__icon, .qdnapro-bottom-nav-btn.is-pressing:not(.is-disabled):not(.is-fab) .qdnapro-bottom-nav-btn__icon { background: var(--c-white-22); transform: scale(0.88); } .qdnapro-bottom-nav-btn.is-active { color: var(--c-text-on-action); } .qdnapro-bottom-nav-btn.is-active .qdnapro-bottom-nav-btn__icon { background: var(--c-white-22); } .qdnapro-bottom-nav-btn.is-active .qdnapro-bottom-nav-btn__dot { opacity: 1; } @media (hover: hover) { .qdnapro-bottom-nav-btn.is-active:hover:not(.is-disabled) .qdnapro-bottom-nav-btn__icon { background: var(--c-white-28); } } .qdnapro-bottom-nav-btn.is-active:active:not(.is-disabled) .qdnapro-bottom-nav-btn__icon, .qdnapro-bottom-nav-btn.is-active.is-pressing:not(.is-disabled) .qdnapro-bottom-nav-btn__icon { background: var(--c-white-22); transform: scale(0.88); } .qdnapro-bottom-nav-btn.is-disabled { color: var(--c-white-28); cursor: not-allowed; pointer-events: none; opacity: 0.45; } .qdnapro-bottom-nav-btn:focus { outline: none; } .qdnapro-bottom-nav-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; border-radius: 4px; } .qdnapro-bottom-nav-btn.is-fab { overflow: visible; } .qdnapro-bottom-nav-btn.is-fab .qdnapro-bottom-nav-btn__icon { width: 52px; height: 52px; border-radius: 50%; background: #ffffff; color: var(--c-brand-purple); transform: translateY(-8px); box-shadow: 0 2px 8px rgba(20, 25, 80, 0.2), 0 6px 20px rgba(20, 25, 80, 0.14); transition: background-color 120ms ease-out, box-shadow 120ms ease-out, transform 150ms cubic-bezier(0.34, 1.56, 0.64, 1); } .qdnapro-bottom-nav-btn.is-fab .qdnapro-bottom-nav-btn__icon svg { stroke-width: 2; } @media (hover: hover) { .qdnapro-bottom-nav-btn.is-fab:hover:not(.is-disabled) .qdnapro-bottom-nav-btn__icon { background: var(--c-white-90); transform: translateY(-12px); box-shadow: 0 4px 14px rgba(20, 25, 80, 0.28), 0 8px 28px rgba(20, 25, 80, 0.18); } } .qdnapro-bottom-nav-btn.is-fab:active:not(.is-disabled) .qdnapro-bottom-nav-btn__icon, .qdnapro-bottom-nav-btn.is-fab.is-pressing:not(.is-disabled) .qdnapro-bottom-nav-btn__icon { background: var(--c-white-85); transform: translateY(-4px) scale(0.93); box-shadow: 0 1px 4px rgba(20, 25, 80, 0.14), 0 2px 8px rgba(20, 25, 80, 0.1); } .qdnapro-bottom-nav-btn.is-fab.is-active { color: var(--c-white-65); } .qdnapro-bottom-nav-btn.is-fab.is-active .qdnapro-bottom-nav-btn__icon { background: #ffffff; color: var(--c-brand-purple); } .qdnapro-bottom-nav-btn.is-fab.is-active .qdnapro-bottom-nav-btn__dot { display: none; } .qdnapro-bottom-nav-btn.is-fab:focus-visible { outline-offset: 4px; border-radius: 50%; } .qdnapro-bottom-nav[variant=sliding-pill] { position: relative; user-select: none; cursor: grab; } .qdnapro-bottom-nav[variant=sliding-pill]:active { cursor: grabbing; } .qdnapro-bottom-nav[variant=sliding-pill] .qdnapro-bottom-nav-btn .qdnapro-bottom-nav-btn__icon { background: transparent !important; } .qdnapro-bottom-nav[variant=sliding-pill] .qdnapro-bottom-nav-btn__dot { display: none; } .qdnapro-bottom-nav[variant=sliding-pill] .qdnapro-bottom-nav-btn.has-badge { z-index: 2; } .qdnapro-bottom-nav[variant=sliding-pill] qdnapro-bottom-nav-btn { position: relative; z-index: 0; cursor: inherit; color: var(--c-white-55) !important; } .qdnapro-bottom-nav[variant=sliding-pill] .qdnapro-bottom-nav__pill { position: absolute; top: calc((var(--bn-height) - 40px) / 2); left: 0; width: 48px; height: 40px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); backdrop-filter: brightness(1.5); -webkit-backdrop-filter: brightness(1.5); border: 0.5px solid rgba(255, 255, 255, 0.12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 2px 6px rgba(0, 0, 0, 0.1); transform: translateX(0); transition: transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; z-index: 1; } .qdnapro-bottom-nav[variant=floating-glass], .qdnapro-bottom-nav[variant=floating-solid] { left: 16px; right: 16px; bottom: 20px; height: auto; padding: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5); border: 1px solid rgba(255, 255, 255, 0.55); box-shadow: 0 8px 32px rgba(20, 25, 80, 0.16), 0 2px 8px rgba(20, 25, 80, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.75); user-select: none; cursor: grab; touch-action: none; } .qdnapro-bottom-nav[variant=floating-glass]:active, .qdnapro-bottom-nav[variant=floating-solid]:active { cursor: grabbing; } .qdnapro-bottom-nav[variant=floating-glass]::after, .qdnapro-bottom-nav[variant=floating-solid]::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; } .qdnapro-bottom-nav[variant=floating-glass] .qdnapro-bottom-nav-btn, .qdnapro-bottom-nav[variant=floating-solid] .qdnapro-bottom-nav-btn { padding: 11px 4px; color: rgba(50, 55, 100, 0.45); position: relative; z-index: 0; cursor: inherit; } .qdnapro-bottom-nav[variant=floating-glass] .qdnapro-bottom-nav-btn.has-badge, .qdnapro-bottom-nav[variant=floating-solid] .qdnapro-bottom-nav-btn.has-badge { z-index: 2; } .qdnapro-bottom-nav[variant=floating-glass] .qdnapro-bottom-nav-btn .qdnapro-bottom-nav-btn__icon, .qdnapro-bottom-nav[variant=floating-solid] .qdnapro-bottom-nav-btn .qdnapro-bottom-nav-btn__icon { width: 44px; height: 40px; background: transparent !important; } .qdnapro-bottom-nav[variant=floating-glass] .qdnapro-bottom-nav-btn .qdnapro-bottom-nav-btn__icon svg, .qdnapro-bottom-nav[variant=floating-solid] .qdnapro-bottom-nav-btn .qdnapro-bottom-nav-btn__icon svg { width: 28px; height: 28px; } .qdnapro-bottom-nav[variant=floating-glass] .qdnapro-bottom-nav-btn .qdnapro-bottom-nav-btn__svg-filled, .qdnapro-bottom-nav[variant=floating-solid] .qdnapro-bottom-nav-btn .qdnapro-bottom-nav-btn__svg-filled { display: block; color: var(--c-brand-purple); width: 28px; height: 28px; } .qdnapro-bottom-nav[variant=floating-glass] .qdnapro-bottom-nav-btn .qdnapro-bottom-nav-btn__label, .qdnapro-bottom-nav[variant=floating-solid] .qdnapro-bottom-nav-btn .qdnapro-bottom-nav-btn__label { display: none; } .qdnapro-bottom-nav[variant=floating-glass] .qdnapro-bottom-nav-btn .qdnapro-bottom-nav-btn__dot, .qdnapro-bottom-nav[variant=floating-solid] .qdnapro-bottom-nav-btn .qdnapro-bottom-nav-btn__dot { display: none; } @media (hover: hover) { .qdnapro-bottom-nav[variant=floating-glass] .qdnapro-bottom-nav-btn:hover:not(.is-disabled) .qdnapro-bottom-nav-btn__icon, .qdnapro-bottom-nav[variant=floating-solid] .qdnapro-bottom-nav-btn:hover:not(.is-disabled) .qdnapro-bottom-nav-btn__icon { background: transparent !important; } } .qdnapro-bottom-nav[variant=floating-glass] .qdnapro-bottom-nav-btn:active:not(.is-disabled) .qdnapro-bottom-nav-btn__icon, .qdnapro-bottom-nav[variant=floating-glass] .qdnapro-bottom-nav-btn.is-pressing:not(.is-disabled) .qdnapro-bottom-nav-btn__icon, .qdnapro-bottom-nav[variant=floating-solid] .qdnapro-bottom-nav-btn:active:not(.is-disabled) .qdnapro-bottom-nav-btn__icon, .qdnapro-bottom-nav[variant=floating-solid] .qdnapro-bottom-nav-btn.is-pressing:not(.is-disabled) .qdnapro-bottom-nav-btn__icon { background: transparent !important; transform: scale(0.92); } .qdnapro-bottom-nav[variant=floating-glass] .qdnapro-bottom-nav-btn.is-active, .qdnapro-bottom-nav[variant=floating-solid] .qdnapro-bottom-nav-btn.is-active { color: var(--c-brand-purple); } .qdnapro-bottom-nav[variant=floating-glass] .qdnapro-bottom-nav-btn.is-active .qdnapro-bottom-nav-btn__icon, .qdnapro-bottom-nav[variant=floating-solid] .qdnapro-bottom-nav-btn.is-active .qdnapro-bottom-nav-btn__icon { background: transparent !important; } .qdnapro-bottom-nav[variant=floating-glass] .qdnapro-bottom-nav-btn[icon=plus-circle].is-active .qdnapro-bottom-nav-btn__icon, .qdnapro-bottom-nav[variant=floating-solid] .qdnapro-bottom-nav-btn[icon=plus-circle].is-active .qdnapro-bottom-nav-btn__icon { position: relative; } .qdnapro-bottom-nav[variant=floating-glass] .qdnapro-bottom-nav-btn[icon=plus-circle].is-active .qdnapro-bottom-nav-btn__icon::before, .qdnapro-bottom-nav[variant=floating-solid] .qdnapro-bottom-nav-btn[icon=plus-circle].is-active .qdnapro-bottom-nav-btn__icon::before { content: ""; position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; transform: translate(-50%, -50%); border-radius: 50%; background: #ffffff; z-index: 0; } .qdnapro-bottom-nav[variant=floating-glass] .qdnapro-bottom-nav-btn[icon=plus-circle].is-active .qdnapro-bottom-nav-btn__svg-filled, .qdnapro-bottom-nav[variant=floating-solid] .qdnapro-bottom-nav-btn[icon=plus-circle].is-active .qdnapro-bottom-nav-btn__svg-filled { z-index: 1; } .qdnapro-bottom-nav[variant=floating-glass] .qdnapro-bottom-nav__pill, .qdnapro-bottom-nav[variant=floating-solid] .qdnapro-bottom-nav__pill { position: absolute; top: calc(50% - 26px); left: 0; width: 68px; height: 52px; border-radius: 999px; background: rgba(64, 73, 154, 0.1); backdrop-filter: none; -webkit-backdrop-filter: none; border: none; box-shadow: none; transform: translateX(0); transition: transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; z-index: 1; } .qdnapro-bottom-nav[variant=floating-solid] { background: var(--c-brand-purple); backdrop-filter: none; -webkit-backdrop-filter: none; border: none; box-shadow: 0 8px 28px rgba(20, 25, 80, 0.28), 0 2px 8px rgba(20, 25, 80, 0.16); } .qdnapro-bottom-nav[variant=floating-solid] .qdnapro-bottom-nav-btn { color: var(--c-white-65); } .qdnapro-bottom-nav[variant=floating-solid] .qdnapro-bottom-nav-btn.is-active { color: #ffffff; } .qdnapro-bottom-nav[variant=floating-solid] .qdnapro-bottom-nav__pill { background: rgba(255, 255, 255, 0.18); } .qdnapro-bottom-nav[variant=floating-solid] .qdnapro-bottom-nav-btn .qdnapro-bottom-nav-btn__svg-filled { display: none; } .qdnapro-bottom-nav[variant=floating-solid] .qdnapro-bottom-nav-btn[icon=plus-circle].is-active .qdnapro-bottom-nav-btn__icon::before { display: none; } @keyframes qdnapro-slide-in-right { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes qdnapro-slide-in-left { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes qdnapro-slide-out-left { from { transform: translateX(0); opacity: 1; } to { transform: translateX(-30%); opacity: 0; } } @keyframes qdnapro-slide-out-right { from { transform: translateX(0); opacity: 1; } to { transform: translateX(30%); opacity: 0; } } .qdnapro-page-stack { position: relative; overflow: hidden; } .qdnapro-page { will-change: transform, opacity; } .qdnapro-page--enter-fwd { animation: qdnapro-slide-in-right 280ms cubic-bezier(0.22, 1, 0.36, 1) both; } .qdnapro-page--leave-fwd { position: absolute !important; inset: 0; animation: qdnapro-slide-out-left 240ms cubic-bezier(0.4, 0, 0.8, 0.6) both; pointer-events: none; } .qdnapro-page--enter-bwd { animation: qdnapro-slide-in-left 280ms cubic-bezier(0.22, 1, 0.36, 1) both; } .qdnapro-page--leave-bwd { position: absolute !important; inset: 0; animation: qdnapro-slide-out-right 240ms cubic-bezier(0.4, 0, 0.8, 0.6) both; pointer-events: none; } .qdnapro-tab-bar { --tb-pill-duration: 220ms; --tb-track-bg: var(--c-grey-50); --tb-pill-bg: var(--c-bg-card); display: flex; align-items: center; position: relative; width: 100%; box-sizing: border-box; padding: var(--s-1); gap: 2px; background: var(--tb-track-bg); border-radius: var(--r-4); font-family: var(--ff); } @media (prefers-reduced-motion: reduce) { .qdnapro-tab-bar { --tb-pill-duration: 0ms; } } .qdnapro-tab-bar__pill { position: absolute; top: var(--s-1); left: 0; bottom: var(--s-1); width: 0; transform: translateX(0); background: var(--tb-pill-bg); border-radius: var(--r-3); box-shadow: var(--shadow-card); pointer-events: none; z-index: 0; opacity: 0; transition: transform var(--tb-pill-duration) cubic-bezier(0.05, 0.7, 0.1, 1), width var(--tb-pill-duration) cubic-bezier(0.05, 0.7, 0.1, 1), opacity 120ms ease; } .qdnapro-tab-bar-item { position: relative; z-index: 1; flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 var(--s-2); box-sizing: border-box; border-radius: var(--r-3); cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; outline: none; background: transparent; transition: color 150ms ease; } .qdnapro-tab-bar-item__label { font-size: 14px; font-weight: var(--fw-medium); line-height: 1.2; color: var(--c-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 150ms ease, font-weight 150ms ease; } .qdnapro-tab-bar-item.is-active .qdnapro-tab-bar-item__label { color: var(--c-brand-purple); font-weight: var(--fw-semi); } .qdnapro-tab-bar-item:not(.is-active):hover .qdnapro-tab-bar-item__label { color: var(--c-text-body); } .qdnapro-tab-bar-item:focus-visible { box-shadow: 0 0 0 2px var(--focus-ring), 0 0 0 4px var(--focus-glow); } .qdnapro-tab-bar-item__badge { flex-shrink: 0; } [data-theme-dark] .qdnapro-tab-bar, [data-theme=dark] .qdnapro-tab-bar, body[data-theme=dark] .qdnapro-tab-bar { --tb-track-bg: var(--c-grey-800); --tb-pill-bg: var(--c-grey-900); } .qdnapro-app-header { --qah-bg: var(--c-bg-card, #ffffff); --qah-fg: var(--c-text-heading, #1a1f4d); --qah-subtitle-color: var(--c-text-muted, #6e7280); --qah-border-color: var(--c-border-soft, rgba(0, 0, 0, 0.07)); --qah-height: 56px; --qah-selection-fg: var(--c-brand-purple, #40499a); display: block; width: 100%; background: var(--qah-bg); border-bottom: 1px solid var(--qah-border-color); padding-top: env(safe-area-inset-top, 0px); box-sizing: border-box; } .qdnapro-app-header *, .qdnapro-app-header *::before, .qdnapro-app-header *::after { box-sizing: border-box; } .qdnapro-app-header.qah-variant-transparent { --qah-bg: transparent; --qah-border-color: transparent; } .qah-row { display: flex; align-items: center; min-height: var(--qah-height); gap: 8px; padding: 4px 12px; } .qah-back { flex: 0 0 auto; } .qah-back[hidden] { display: none; } .qah-title-cluster { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; } .qah-titles { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; } .qah-avatar { flex: 0 0 auto; display: flex; align-items: center; } .qah-avatar:empty { display: none; } .qah-title { color: var(--qah-fg); font-size: 17px; font-weight: 500; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .qah-title:empty { display: none; } .qah-subtitle { color: var(--qah-subtitle-color); font-size: 13px; font-weight: 400; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .qah-subtitle:empty { display: none; } .qah-leading [hidden], .qah-search [hidden], .qah-actions [hidden], .qah-nova [hidden] { display: none; } .qah-leading { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; } .qah-leading:empty { display: none; } .qah-search { flex: 1 1 auto; min-width: 0; max-width: 520px; margin-left: auto; margin-right: auto; display: flex; align-items: center; justify-content: center; } .qah-search:empty { display: none; } .qah-search > * { flex: 1 1 auto; min-width: 0; width: 100%; } .qah-row:has(.qah-search:not(:empty)) .qah-title-cluster { flex: 0 1 auto; } .qdnapro-app-header.qah-align-start { --qah-search-gutter: 32px; } @media (min-width: 1024px) { .qdnapro-app-header.qah-align-start .qah-row:has(.qah-search:not(:empty)) { position: relative; } .qdnapro-app-header.qah-align-start .qah-row:has(.qah-search:not(:empty)) .qah-search { position: absolute; top: 50%; left: var(--qah-search-gutter); right: var(--qah-search-gutter); transform: translateY(-50%); } .qdnapro-app-header.qah-align-start .qah-row:has(.qah-search:not(:empty)) .qah-title-cluster { max-width: 140px; } .qdnapro-app-header.qah-align-start .qah-row:has(.qah-search:not(:empty)) .qah-actions, .qdnapro-app-header.qah-align-start .qah-row:has(.qah-search:not(:empty)) .qah-nova { margin-left: auto; } } @media (min-width: 1280px) { .qdnapro-app-header.qah-align-start .qah-row:has(.qah-search:not(:empty)) .qah-title-cluster { max-width: 260px; } } @media (min-width: 1440px) { .qdnapro-app-header.qah-align-start .qah-row:has(.qah-search:not(:empty)) .qah-title-cluster { max-width: 340px; } } .qah-actions, .qah-nova { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; } .qah-actions:empty, .qah-nova:empty { display: none; } .qah-context:empty { display: none; } .qah-cancel { flex: 0 0 auto; display: none; } .qah-selection-count { flex: 1 1 auto; min-width: 0; display: none; color: var(--qah-selection-fg); font-size: 15px; font-weight: 500; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .qah-selection-actions { flex: 0 0 auto; display: none; align-items: center; } .qdnapro-app-header.qah-align-center { --qah-center-gutter: 60px; } .qdnapro-app-header.qah-align-center .qah-row { position: relative; } .qdnapro-app-header.qah-align-center .qah-actions, .qdnapro-app-header.qah-align-center .qah-nova { margin-left: auto; } .qdnapro-app-header.qah-align-center .qah-title-cluster { position: absolute; top: 50%; left: var(--qah-center-gutter); right: var(--qah-center-gutter); transform: translateY(-50%); justify-content: center; } .qdnapro-app-header.qah-align-center .qah-titles { flex: 0 1 auto; text-align: center; } .qdnapro-app-header.qah-align-center .qah-title-cluster { pointer-events: none; } .qdnapro-app-header.qah-align-center .qah-titles, .qdnapro-app-header.qah-align-center .qah-avatar { pointer-events: auto; } @media (min-width: 600px) { .qdnapro-app-header.qah-align-center { --qah-center-gutter: 76px; } } @media (min-width: 1024px) { .qdnapro-app-header.qah-align-center { --qah-center-gutter: 92px; } } .qdnapro-app-header.qah-mode-selection { --qah-bg: var(--c-bg-card, #ffffff); --qah-border-color: var(--c-border-soft, rgba(0, 0, 0, 0.07)); } .qdnapro-app-header.qah-mode-selection .qah-back, .qdnapro-app-header.qah-mode-selection .qah-title-cluster, .qdnapro-app-header.qah-mode-selection .qah-leading, .qdnapro-app-header.qah-mode-selection .qah-search, .qdnapro-app-header.qah-mode-selection .qah-actions, .qdnapro-app-header.qah-mode-selection .qah-nova { display: none; } .qdnapro-app-header.qah-mode-selection .qah-cancel { display: flex; } .qdnapro-app-header.qah-mode-selection .qah-selection-count { display: block; } .qdnapro-app-header.qah-mode-selection .qah-selection-actions { display: flex; } @media (min-width: 600px) { .qah-row { padding: 6px 20px; gap: 12px; } .qah-title { font-size: 19px; } } @media (min-width: 1024px) { .qah-row { padding: 8px 32px; } } .qdnapro-swipe-row { position: relative; display: block; overflow: hidden; /* Let the browser keep owning vertical scrolling at all times — the component's own axis-lock decides whether a given gesture is horizontal before it ever calls preventDefault. */ touch-action: pan-y; isolation: isolate; /* keep the panel/content stacking local to this row */ } /* Content layer — whatever the host slotted in, unmodified. Always painted with its own opaque background (default var(--c-bg-card)) so a transparent child never lets a button's background show through, even at rest (not just while .swiping is present). A consumer can retint this per instance via style="--qsr-content-bg: ...". */ .qdnapro-swipe-row .qsr-content { position: relative; z-index: 1; background: var(--qsr-content-bg, var(--c-bg-card)); will-change: transform; } /* Action panels — anchored to the edge the content recedes FROM, sized to exactly the currently revealed width (set inline by the JS: resting width = sum of that side's button widths; grows to match the live drag distance once it exceeds that). Because the panel is never wider than what's actually exposed, the OUTERMOST button (flush against the true edge) is the very first thing a drag reveals — no dead full-row space to cross before anything becomes visible. */ .qdnapro-swipe-row .qsr-panel { position: absolute; top: 0; bottom: 0; z-index: 0; display: flex; align-items: stretch; overflow: hidden; } .qdnapro-swipe-row .qsr-panel-left { right: 0; justify-content: flex-end; /* group flush against the true right edge */ } .qdnapro-swipe-row .qsr-panel-right { left: 0; justify-content: flex-start; /* group flush against the true left edge */ } .qdnapro-swipe-row .qsr-panel-empty { width: 0 !important; } /* Each button is a REAL