/* QuestDL Notifications — canonical semantic SVG icon system. * Shared by frontend shortcodes, Notification Center, admin UI, and admin iframe previews. * Keep this file the single source for icon colors, line treatment, and neon frames. */ :root { /* Accessible accents on the plugin's default light surfaces. */ --qdl-icon-violet: #7C3AED; --qdl-icon-purple: #7E22CE; --qdl-icon-cyan: #087F99; --qdl-icon-sky: #0369A1; --qdl-icon-blue: #1D4ED8; --qdl-icon-teal: #0F766E; --qdl-icon-gold: #92400E; --qdl-icon-orange: #B45309; --qdl-icon-pink: #BE185D; --qdl-icon-green: #047857; --qdl-icon-red: #B91C1C; --qdl-icon-indigo: #4338CA; --qdl-icon-neutral: #475569; } /* * Canonical icons use bespoke 48-unit outline artwork. Stroke scales with the SVG * box so the same drawing stays balanced from compact 16px controls to 40px tiles. * The static drop-shadow is intentionally subtle; there are no SVG filters or loops. */ .qdl-icon-svg { display: block; overflow: visible; filter: drop-shadow(0 0 1px color-mix(in srgb, currentColor 18%, transparent)); } .qdl-icon-svg :is(path, line, polyline, polygon, rect, circle, ellipse) { stroke-linecap: round; stroke-linejoin: round; vector-effect: none; } /* Optional dark-surface palette follows the sample's neon-on-graphite style without * imposing dark mode on the normally bright QuestDL site. */ :is(.qdl-theme-dark, .qdl-icon-theme-dark, .dark, .dark-mode, [data-theme="dark"], [data-color-scheme="dark"]) { --qdl-icon-violet: #9B75FF; --qdl-icon-purple: #B895FF; --qdl-icon-cyan: #27D7E8; --qdl-icon-sky: #5CB5FF; --qdl-icon-blue: #5CB5FF; --qdl-icon-teal: #31D6C3; --qdl-icon-gold: #FFE04E; --qdl-icon-orange: #FFA04F; --qdl-icon-pink: #FF4F87; --qdl-icon-green: #68E2B5; --qdl-icon-red: #FF6178; --qdl-icon-indigo: #B0A2FF; --qdl-icon-neutral: #B8C2D8; } :is(.qdl-theme-dark, .qdl-icon-theme-dark, .dark, .dark-mode, [data-theme="dark"], [data-color-scheme="dark"]) :is( .qdl-notification-icon, .qdl-toast-icon, .qdl-detail-source-icon, .qdl-header-loyalty-ribbon-icon, .qdl-guest-notification-icon, .qdl-template-card-icon, .qdl-template-preview-icon, .qdl-ui-icon, .qdl-overview-icon, .qdl-live-icon, .qdl-center-search-icon, .qdl-sort-control-icon, .qdl-category-toggle-icon, .qdl-category-chevron, .qdl-filter-state-icon, .qdl-view-chip-icon, .qdl-view-chip-close ) { border-color: color-mix(in srgb, var(--qdl-icon-accent, currentColor) 64%, #273144) !important; background: linear-gradient(145deg, color-mix(in srgb, var(--qdl-icon-accent, currentColor) 16%, #141923), color-mix(in srgb, var(--qdl-icon-accent, currentColor) 7%, #111722)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 0 0 1px color-mix(in srgb, var(--qdl-icon-accent, currentColor) 8%, transparent), 0 0 6px color-mix(in srgb, var(--qdl-icon-accent, currentColor) 16%, transparent) !important; } /* Feature identity lives on the SVG itself, so frontend/PHP/JS/admin previews agree. */ .qdl-icon-key-headset, .qdl-icon-key-quest-headset, .qdl-icon-key-nav-games, .qdl-icon-key-category-game, .qdl-icon-key-category-woocommerce { color: var(--qdl-icon-cyan); } .qdl-icon-key-bag, .qdl-icon-key-category-orders, .qdl-icon-key-nav-dashboard, .qdl-icon-key-state-week { color: var(--qdl-icon-blue); } .qdl-icon-key-message, .qdl-icon-key-category-message { color: var(--qdl-icon-sky); } .qdl-icon-key-spark, .qdl-icon-key-category-promotion, .qdl-icon-key-bolt, .qdl-icon-key-category-system { color: var(--qdl-icon-orange); } .qdl-icon-key-gift, .qdl-icon-key-category-reward { color: var(--qdl-icon-gold); } .qdl-icon-key-download, .qdl-icon-key-category-downloads { color: var(--qdl-icon-teal); } .qdl-icon-key-info, .qdl-icon-key-notification-hub, .qdl-icon-key-nav-notifications, .qdl-icon-key-category-diamonds, .qdl-icon-key-state-unread, .qdl-icon-key-illustration-empty { color: var(--qdl-icon-violet); } .qdl-icon-key-close, .qdl-icon-key-arrow-right, .qdl-icon-key-chevron-down, .qdl-icon-key-sort, .qdl-icon-key-filter, .qdl-icon-key-user { color: var(--qdl-icon-indigo); } .qdl-icon-key-check, .qdl-icon-key-refresh, .qdl-icon-key-state-online { color: var(--qdl-icon-green); } .qdl-icon-key-state-important, .qdl-icon-key-state-offline, .qdl-icon-key-illustration-error, .qdl-icon-key-illustration-offline { color: var(--qdl-icon-red); } .qdl-icon-key-search, .qdl-icon-key-arrow-up-right, .qdl-icon-key-state-all, .qdl-icon-key-illustration-search-empty, .qdl-icon-key-settings { color: var(--qdl-icon-blue); } .qdl-icon-key-more, .qdl-icon-key-illustration-filter-empty { color: var(--qdl-icon-neutral); } .qdl-icon-key-illustration-guest-empty { color: var(--qdl-icon-cyan); } /* Wrappers can read the canonical SVG key and use the same color for its frame. */ :is(.qdl-notification-icon, .qdl-toast-icon, .qdl-source-icon, .qdl-toast-source-icon, .qdl-detail-source-icon, .qdl-header-loyalty-ribbon-icon, .qdl-guest-notification-icon, .qdl-template-card-icon, .qdl-template-preview-icon, .qdl-ui-icon, .qdl-overview-icon, .qdl-live-icon, .qdl-center-search-icon, .qdl-sort-control-icon, .qdl-category-toggle-icon, .qdl-category-chevron, .qdl-filter-state-icon, .qdl-view-chip-icon, .qdl-view-chip-close):has(> svg.qdl-icon-key-headset), :is(.qdl-notification-icon, .qdl-toast-icon, .qdl-source-icon, .qdl-toast-source-icon, .qdl-detail-source-icon, .qdl-header-loyalty-ribbon-icon, .qdl-guest-notification-icon, .qdl-template-card-icon, .qdl-template-preview-icon, .qdl-ui-icon, .qdl-overview-icon, .qdl-live-icon, .qdl-center-search-icon, .qdl-sort-control-icon, .qdl-category-toggle-icon, .qdl-category-chevron, .qdl-filter-state-icon, .qdl-view-chip-icon, .qdl-view-chip-close):has(> svg.qdl-icon-key-quest-headset), :is(.qdl-notification-icon, .qdl-toast-icon, .qdl-source-icon, .qdl-toast-source-icon, .qdl-detail-source-icon, .qdl-header-loyalty-ribbon-icon, .qdl-guest-notification-icon, .qdl-template-card-icon, .qdl-template-preview-icon, .qdl-ui-icon, .qdl-overview-icon, .qdl-live-icon, .qdl-center-search-icon, .qdl-sort-control-icon, .qdl-category-toggle-icon, .qdl-category-chevron, .qdl-filter-state-icon, .qdl-view-chip-icon, .qdl-view-chip-close):has(> svg.qdl-icon-key-nav-games), :is(.qdl-notification-icon, .qdl-toast-icon, .qdl-source-icon, .qdl-toast-source-icon, .qdl-detail-source-icon, .qdl-header-loyalty-ribbon-icon, .qdl-guest-notification-icon, .qdl-template-card-icon, .qdl-template-preview-icon, .qdl-ui-icon, .qdl-overview-icon, .qdl-live-icon, .qdl-center-search-icon, .qdl-sort-control-icon, .qdl-category-toggle-icon, .qdl-category-chevron, .qdl-filter-state-icon, .qdl-view-chip-icon, .qdl-view-chip-close):has(> svg.qdl-icon-key-category-game), :is(.qdl-notification-icon, .qdl-toast-icon, .qdl-source-icon, .qdl-toast-source-icon, .qdl-detail-source-icon, .qdl-header-loyalty-ribbon-icon, .qdl-guest-notification-icon, .qdl-template-card-icon, .qdl-template-preview-icon, .qdl-ui-icon, .qdl-overview-icon, .qdl-live-icon, .qdl-center-search-icon, .qdl-sort-control-icon, .qdl-category-toggle-icon, .qdl-category-chevron, .qdl-filter-state-icon, .qdl-view-chip-icon, .qdl-view-chip-close):has(> svg.qdl-icon-key-category-woocommerce) { --qdl-icon-accent: var(--qdl-icon-cyan); } :is(.qdl-notification-icon, .qdl-toast-icon, .qdl-source-icon, .qdl-toast-source-icon, .qdl-detail-source-icon, .qdl-header-loyalty-ribbon-icon, .qdl-guest-notification-icon, .qdl-template-card-icon, .qdl-template-preview-icon, .qdl-ui-icon, .qdl-overview-icon, .qdl-live-icon, .qdl-center-search-icon, .qdl-sort-control-icon, .qdl-category-toggle-icon, .qdl-category-chevron, .qdl-filter-state-icon, .qdl-view-chip-icon, .qdl-view-chip-close):has(> svg.qdl-icon-key-bag), :is(.qdl-notification-icon, .qdl-toast-icon, .qdl-source-icon, .qdl-toast-source-icon, .qdl-detail-source-icon, .qdl-header-loyalty-ribbon-icon, .qdl-guest-notification-icon, .qdl-template-card-icon, .qdl-template-preview-icon, .qdl-ui-icon, .qdl-overview-icon, .qdl-live-icon, .qdl-center-search-icon, .qdl-sort-control-icon, .qdl-category-toggle-icon, .qdl-category-chevron, .qdl-filter-state-icon, .qdl-view-chip-icon, .qdl-view-chip-close):has(> svg.qdl-icon-key-category-orders), :is(.qdl-notification-icon, .qdl-toast-icon, .qdl-source-icon, .qdl-toast-source-icon, .qdl-detail-source-icon, .qdl-header-loyalty-ribbon-icon, .qdl-guest-notification-icon, .qdl-template-card-icon, .qdl-template-preview-icon, .qdl-ui-icon, .qdl-overview-icon, .qdl-live-icon, .qdl-center-search-icon, .qdl-sort-control-icon, .qdl-category-toggle-icon, .qdl-category-chevron, .qdl-filter-state-icon, .qdl-view-chip-icon, .qdl-view-chip-close):has(> svg.qdl-icon-key-nav-dashboard) { --qdl-icon-accent: var(--qdl-icon-blue); } :is(.qdl-notification-icon, .qdl-toast-icon, .qdl-source-icon, .qdl-toast-source-icon, .qdl-detail-source-icon, .qdl-header-loyalty-ribbon-icon, .qdl-guest-notification-icon, .qdl-template-card-icon, .qdl-template-preview-icon, .qdl-ui-icon, .qdl-overview-icon, .qdl-live-icon, .qdl-center-search-icon, .qdl-sort-control-icon, .qdl-category-toggle-icon, .qdl-category-chevron, .qdl-filter-state-icon, .qdl-view-chip-icon, .qdl-view-chip-close):has(> svg.qdl-icon-key-category-diamonds), :is(.qdl-notification-icon, .qdl-toast-icon, .qdl-source-icon, .qdl-toast-source-icon, .qdl-detail-source-icon, .qdl-header-loyalty-ribbon-icon, .qdl-guest-notification-icon, .qdl-template-card-icon, .qdl-template-preview-icon, .qdl-ui-icon, .qdl-overview-icon, .qdl-live-icon, .qdl-center-search-icon, .qdl-sort-control-icon, .qdl-category-toggle-icon, .qdl-category-chevron, .qdl-filter-state-icon, .qdl-view-chip-icon, .qdl-view-chip-close):has(> svg.qdl-icon-key-nav-notifications), :is(.qdl-notification-icon, .qdl-toast-icon, .qdl-source-icon, .qdl-toast-source-icon, .qdl-detail-source-icon, .qdl-header-loyalty-ribbon-icon, .qdl-guest-notification-icon, .qdl-template-card-icon, .qdl-template-preview-icon, .qdl-ui-icon, .qdl-overview-icon, .qdl-live-icon, .qdl-center-search-icon, .qdl-sort-control-icon, .qdl-category-toggle-icon, .qdl-category-chevron, .qdl-filter-state-icon, .qdl-view-chip-icon, .qdl-view-chip-close):has(> svg.qdl-icon-key-notification-hub), :is(.qdl-notification-icon, .qdl-toast-icon, .qdl-source-icon, .qdl-toast-source-icon, .qdl-detail-source-icon, .qdl-header-loyalty-ribbon-icon, .qdl-guest-notification-icon, .qdl-template-card-icon, .qdl-template-preview-icon, .qdl-ui-icon, .qdl-overview-icon, .qdl-live-icon, .qdl-center-search-icon, .qdl-sort-control-icon, .qdl-category-toggle-icon, .qdl-category-chevron, .qdl-filter-state-icon, .qdl-view-chip-icon, .qdl-view-chip-close):has(> svg.qdl-icon-key-state-unread) { --qdl-icon-accent: var(--qdl-icon-violet); } :is(.qdl-notification-icon, .qdl-toast-icon, .qdl-source-icon, .qdl-toast-source-icon, .qdl-detail-source-icon, .qdl-header-loyalty-ribbon-icon, .qdl-guest-notification-icon, .qdl-template-card-icon, .qdl-template-preview-icon, .qdl-ui-icon, .qdl-overview-icon, .qdl-live-icon, .qdl-center-search-icon, .qdl-sort-control-icon, .qdl-category-toggle-icon, .qdl-category-chevron, .qdl-filter-state-icon, .qdl-view-chip-icon, .qdl-view-chip-close):has(> svg.qdl-icon-key-message), :is(.qdl-notification-icon, .qdl-toast-icon, .qdl-source-icon, .qdl-toast-source-icon, .qdl-detail-source-icon, .qdl-header-loyalty-ribbon-icon, .qdl-guest-notification-icon, .qdl-template-card-icon, .qdl-template-preview-icon, .qdl-ui-icon, .qdl-overview-icon, .qdl-live-icon, .qdl-center-search-icon, .qdl-sort-control-icon, .qdl-category-toggle-icon, .qdl-category-chevron, .qdl-filter-state-icon, .qdl-view-chip-icon, .qdl-view-chip-close):has(> svg.qdl-icon-key-category-message) { --qdl-icon-accent: var(--qdl-icon-sky); } :is(.qdl-notification-icon, .qdl-toast-icon, .qdl-source-icon, .qdl-toast-source-icon, .qdl-detail-source-icon, .qdl-header-loyalty-ribbon-icon, .qdl-guest-notification-icon, .qdl-template-card-icon, .qdl-template-preview-icon, .qdl-ui-icon, .qdl-overview-icon, .qdl-live-icon, .qdl-center-search-icon, .qdl-sort-control-icon, .qdl-category-toggle-icon, .qdl-category-chevron, .qdl-filter-state-icon, .qdl-view-chip-icon, .qdl-view-chip-close):has(> svg.qdl-icon-key-gift), :is(.qdl-notification-icon, .qdl-toast-icon, .qdl-source-icon, .qdl-toast-source-icon, .qdl-detail-source-icon, .qdl-header-loyalty-ribbon-icon, .qdl-guest-notification-icon, .qdl-template-card-icon, .qdl-template-preview-icon, .qdl-ui-icon, .qdl-overview-icon, .qdl-live-icon, .qdl-center-search-icon, .qdl-sort-control-icon, .qdl-category-toggle-icon, .qdl-category-chevron, .qdl-filter-state-icon, .qdl-view-chip-icon, .qdl-view-chip-close):has(> svg.qdl-icon-key-category-reward) { --qdl-icon-accent: var(--qdl-icon-gold); } :is(.qdl-notification-icon, .qdl-toast-icon, .qdl-source-icon, .qdl-toast-source-icon, .qdl-detail-source-icon, .qdl-header-loyalty-ribbon-icon, .qdl-guest-notification-icon, .qdl-template-card-icon, .qdl-template-preview-icon, .qdl-ui-icon, .qdl-overview-icon, .qdl-live-icon, .qdl-center-search-icon, .qdl-sort-control-icon, .qdl-category-toggle-icon, .qdl-category-chevron, .qdl-filter-state-icon, .qdl-view-chip-icon, .qdl-view-chip-close):has(> svg.qdl-icon-key-download), :is(.qdl-notification-icon, .qdl-toast-icon, .qdl-source-icon, .qdl-toast-source-icon, .qdl-detail-source-icon, .qdl-header-loyalty-ribbon-icon, .qdl-guest-notification-icon, .qdl-template-card-icon, .qdl-template-preview-icon, .qdl-ui-icon, .qdl-overview-icon, .qdl-live-icon, .qdl-center-search-icon, .qdl-sort-control-icon, .qdl-category-toggle-icon, .qdl-category-chevron, .qdl-filter-state-icon, .qdl-view-chip-icon, .qdl-view-chip-close):has(> svg.qdl-icon-key-category-downloads) { --qdl-icon-accent: var(--qdl-icon-teal); } :is(.qdl-notification-icon, .qdl-toast-icon, .qdl-source-icon, .qdl-toast-source-icon, .qdl-detail-source-icon, .qdl-header-loyalty-ribbon-icon, .qdl-guest-notification-icon, .qdl-template-card-icon, .qdl-template-preview-icon, .qdl-ui-icon, .qdl-overview-icon, .qdl-live-icon, .qdl-center-search-icon, .qdl-sort-control-icon, .qdl-category-toggle-icon, .qdl-category-chevron, .qdl-filter-state-icon, .qdl-view-chip-icon, .qdl-view-chip-close):has(> svg.qdl-icon-key-check), :is(.qdl-notification-icon, .qdl-toast-icon, .qdl-source-icon, .qdl-toast-source-icon, .qdl-detail-source-icon, .qdl-header-loyalty-ribbon-icon, .qdl-guest-notification-icon, .qdl-template-card-icon, .qdl-template-preview-icon, .qdl-ui-icon, .qdl-overview-icon, .qdl-live-icon, .qdl-center-search-icon, .qdl-sort-control-icon, .qdl-category-toggle-icon, .qdl-category-chevron, .qdl-filter-state-icon, .qdl-view-chip-icon, .qdl-view-chip-close):has(> svg.qdl-icon-key-refresh), :is(.qdl-notification-icon, .qdl-toast-icon, .qdl-source-icon, .qdl-toast-source-icon, .qdl-detail-source-icon, .qdl-header-loyalty-ribbon-icon, .qdl-guest-notification-icon, .qdl-template-card-icon, .qdl-template-preview-icon, .qdl-ui-icon, .qdl-overview-icon, .qdl-live-icon, .qdl-center-search-icon, .qdl-sort-control-icon, .qdl-category-toggle-icon, .qdl-category-chevron, .qdl-filter-state-icon, .qdl-view-chip-icon, .qdl-view-chip-close):has(> svg.qdl-icon-key-state-online) { --qdl-icon-accent: var(--qdl-icon-green); } :is(.qdl-notification-icon, .qdl-toast-icon, .qdl-source-icon, .qdl-toast-source-icon, .qdl-detail-source-icon, .qdl-header-loyalty-ribbon-icon, .qdl-guest-notification-icon, .qdl-template-card-icon, .qdl-template-preview-icon, .qdl-ui-icon, .qdl-overview-icon, .qdl-live-icon, .qdl-center-search-icon, .qdl-sort-control-icon, .qdl-category-toggle-icon, .qdl-category-chevron, .qdl-filter-state-icon, .qdl-view-chip-icon, .qdl-view-chip-close):has(> svg.qdl-icon-key-state-important), :is(.qdl-notification-icon, .qdl-toast-icon, .qdl-source-icon, .qdl-toast-source-icon, .qdl-detail-source-icon, .qdl-header-loyalty-ribbon-icon, .qdl-guest-notification-icon, .qdl-template-card-icon, .qdl-template-preview-icon, .qdl-ui-icon, .qdl-overview-icon, .qdl-live-icon, .qdl-center-search-icon, .qdl-sort-control-icon, .qdl-category-toggle-icon, .qdl-category-chevron, .qdl-filter-state-icon, .qdl-view-chip-icon, .qdl-view-chip-close):has(> svg.qdl-icon-key-state-offline), :is(.qdl-notification-icon, .qdl-toast-icon, .qdl-source-icon, .qdl-toast-source-icon, .qdl-detail-source-icon, .qdl-header-loyalty-ribbon-icon, .qdl-guest-notification-icon, .qdl-template-card-icon, .qdl-template-preview-icon, .qdl-ui-icon, .qdl-overview-icon, .qdl-live-icon, .qdl-center-search-icon, .qdl-sort-control-icon, .qdl-category-toggle-icon, .qdl-category-chevron, .qdl-filter-state-icon, .qdl-view-chip-icon, .qdl-view-chip-close):has(> svg.qdl-icon-key-illustration-error), :is(.qdl-notification-icon, .qdl-toast-icon, .qdl-source-icon, .qdl-toast-source-icon, .qdl-detail-source-icon, .qdl-header-loyalty-ribbon-icon, .qdl-guest-notification-icon, .qdl-template-card-icon, .qdl-template-preview-icon, .qdl-ui-icon, .qdl-overview-icon, .qdl-live-icon, .qdl-center-search-icon, .qdl-sort-control-icon, .qdl-category-toggle-icon, .qdl-category-chevron, .qdl-filter-state-icon, .qdl-view-chip-icon, .qdl-view-chip-close):has(> svg.qdl-icon-key-illustration-offline) { --qdl-icon-accent: var(--qdl-icon-red); } /* Complete semantic frame mapping for UI keys not tied to a notification source. */ :where(.qdl-notification-icon, .qdl-toast-icon, .qdl-source-icon, .qdl-toast-source-icon, .qdl-detail-source-icon, .qdl-header-loyalty-ribbon-icon, .qdl-guest-notification-icon, .qdl-template-card-icon, .qdl-template-preview-icon, .qdl-ui-icon, .qdl-overview-icon, .qdl-live-icon, .qdl-center-search-icon, .qdl-sort-control-icon, .qdl-category-toggle-icon, .qdl-category-chevron, .qdl-filter-state-icon, .qdl-view-chip-icon, .qdl-view-chip-close):has(> svg.qdl-icon-key-spark), :where(.qdl-notification-icon, .qdl-toast-icon, .qdl-source-icon, .qdl-toast-source-icon, .qdl-detail-source-icon, .qdl-header-loyalty-ribbon-icon, .qdl-guest-notification-icon, .qdl-template-card-icon, .qdl-template-preview-icon, .qdl-ui-icon, .qdl-overview-icon, .qdl-live-icon, .qdl-center-search-icon, .qdl-sort-control-icon, .qdl-category-toggle-icon, .qdl-category-chevron, .qdl-filter-state-icon, .qdl-view-chip-icon, .qdl-view-chip-close):has(> svg.qdl-icon-key-category-promotion), :where(.qdl-notification-icon, .qdl-toast-icon, .qdl-source-icon, .qdl-toast-source-icon, .qdl-detail-source-icon, .qdl-header-loyalty-ribbon-icon, .qdl-guest-notification-icon, .qdl-template-card-icon, .qdl-template-preview-icon, .qdl-ui-icon, .qdl-overview-icon, .qdl-live-icon, .qdl-center-search-icon, .qdl-sort-control-icon, .qdl-category-toggle-icon, .qdl-category-chevron, .qdl-filter-state-icon, .qdl-view-chip-icon, .qdl-view-chip-close):has(> svg.qdl-icon-key-bolt), :where(.qdl-notification-icon, .qdl-toast-icon, .qdl-source-icon, .qdl-toast-source-icon, .qdl-detail-source-icon, .qdl-header-loyalty-ribbon-icon, .qdl-guest-notification-icon, .qdl-template-card-icon, .qdl-template-preview-icon, .qdl-ui-icon, .qdl-overview-icon, .qdl-live-icon, .qdl-center-search-icon, .qdl-sort-control-icon, .qdl-category-toggle-icon, .qdl-category-chevron, .qdl-filter-state-icon, .qdl-view-chip-icon, .qdl-view-chip-close):has(> svg.qdl-icon-key-category-system) { --qdl-icon-accent: var(--qdl-icon-orange); } :where(.qdl-notification-icon, .qdl-toast-icon, .qdl-source-icon, .qdl-toast-source-icon, .qdl-detail-source-icon, .qdl-header-loyalty-ribbon-icon, .qdl-guest-notification-icon, .qdl-template-card-icon, .qdl-template-preview-icon, .qdl-ui-icon, .qdl-overview-icon, .qdl-live-icon, .qdl-center-search-icon, .qdl-sort-control-icon, .qdl-category-toggle-icon, .qdl-category-chevron, .qdl-filter-state-icon, .qdl-view-chip-icon, .qdl-view-chip-close):has(> svg.qdl-icon-key-search), :where(.qdl-notification-icon, .qdl-toast-icon, .qdl-source-icon, .qdl-toast-source-icon, .qdl-detail-source-icon, .qdl-header-loyalty-ribbon-icon, .qdl-guest-notification-icon, .qdl-template-card-icon, .qdl-template-preview-icon, .qdl-ui-icon, .qdl-overview-icon, .qdl-live-icon, .qdl-center-search-icon, .qdl-sort-control-icon, .qdl-category-toggle-icon, .qdl-category-chevron, .qdl-filter-state-icon, .qdl-view-chip-icon, .qdl-view-chip-close):has(> svg.qdl-icon-key-arrow-up-right), :where(.qdl-notification-icon, .qdl-toast-icon, .qdl-source-icon, .qdl-toast-source-icon, .qdl-detail-source-icon, .qdl-header-loyalty-ribbon-icon, .qdl-guest-notification-icon, .qdl-template-card-icon, .qdl-template-preview-icon, .qdl-ui-icon, .qdl-overview-icon, .qdl-live-icon, .qdl-center-search-icon, .qdl-sort-control-icon, .qdl-category-toggle-icon, .qdl-category-chevron, .qdl-filter-state-icon, .qdl-view-chip-icon, .qdl-view-chip-close):has(> svg.qdl-icon-key-state-all), :where(.qdl-notification-icon, .qdl-toast-icon, .qdl-source-icon, .qdl-toast-source-icon, .qdl-detail-source-icon, .qdl-header-loyalty-ribbon-icon, .qdl-guest-notification-icon, .qdl-template-card-icon, .qdl-template-preview-icon, .qdl-ui-icon, .qdl-overview-icon, .qdl-live-icon, .qdl-center-search-icon, .qdl-sort-control-icon, .qdl-category-toggle-icon, .qdl-category-chevron, .qdl-filter-state-icon, .qdl-view-chip-icon, .qdl-view-chip-close):has(> svg.qdl-icon-key-illustration-search-empty), :where(.qdl-notification-icon, .qdl-toast-icon, .qdl-source-icon, .qdl-toast-source-icon, .qdl-detail-source-icon, .qdl-header-loyalty-ribbon-icon, .qdl-guest-notification-icon, .qdl-template-card-icon, .qdl-template-preview-icon, .qdl-ui-icon, .qdl-overview-icon, .qdl-live-icon, .qdl-center-search-icon, .qdl-sort-control-icon, .qdl-category-toggle-icon, .qdl-category-chevron, .qdl-filter-state-icon, .qdl-view-chip-icon, .qdl-view-chip-close):has(> svg.qdl-icon-key-settings) { --qdl-icon-accent: var(--qdl-icon-blue); } :where(.qdl-notification-icon, .qdl-toast-icon, .qdl-source-icon, .qdl-toast-source-icon, .qdl-detail-source-icon, .qdl-header-loyalty-ribbon-icon, .qdl-guest-notification-icon, .qdl-template-card-icon, .qdl-template-preview-icon, .qdl-ui-icon, .qdl-overview-icon, .qdl-live-icon, .qdl-center-search-icon, .qdl-sort-control-icon, .qdl-category-toggle-icon, .qdl-category-chevron, .qdl-filter-state-icon, .qdl-view-chip-icon, .qdl-view-chip-close):has(> svg.qdl-icon-key-close), :where(.qdl-notification-icon, .qdl-toast-icon, .qdl-source-icon, .qdl-toast-source-icon, .qdl-detail-source-icon, .qdl-header-loyalty-ribbon-icon, .qdl-guest-notification-icon, .qdl-template-card-icon, .qdl-template-preview-icon, .qdl-ui-icon, .qdl-overview-icon, .qdl-live-icon, .qdl-center-search-icon, .qdl-sort-control-icon, .qdl-category-toggle-icon, .qdl-category-chevron, .qdl-filter-state-icon, .qdl-view-chip-icon, .qdl-view-chip-close):has(> svg.qdl-icon-key-arrow-right), :where(.qdl-notification-icon, .qdl-toast-icon, .qdl-source-icon, .qdl-toast-source-icon, .qdl-detail-source-icon, .qdl-header-loyalty-ribbon-icon, .qdl-guest-notification-icon, .qdl-template-card-icon, .qdl-template-preview-icon, .qdl-ui-icon, .qdl-overview-icon, .qdl-live-icon, .qdl-center-search-icon, .qdl-sort-control-icon, .qdl-category-toggle-icon, .qdl-category-chevron, .qdl-filter-state-icon, .qdl-view-chip-icon, .qdl-view-chip-close):has(> svg.qdl-icon-key-chevron-down), :where(.qdl-notification-icon, .qdl-toast-icon, .qdl-source-icon, .qdl-toast-source-icon, .qdl-detail-source-icon, .qdl-header-loyalty-ribbon-icon, .qdl-guest-notification-icon, .qdl-template-card-icon, .qdl-template-preview-icon, .qdl-ui-icon, .qdl-overview-icon, .qdl-live-icon, .qdl-center-search-icon, .qdl-sort-control-icon, .qdl-category-toggle-icon, .qdl-category-chevron, .qdl-filter-state-icon, .qdl-view-chip-icon, .qdl-view-chip-close):has(> svg.qdl-icon-key-sort), :where(.qdl-notification-icon, .qdl-toast-icon, .qdl-source-icon, .qdl-toast-source-icon, .qdl-detail-source-icon, .qdl-header-loyalty-ribbon-icon, .qdl-guest-notification-icon, .qdl-template-card-icon, .qdl-template-preview-icon, .qdl-ui-icon, .qdl-overview-icon, .qdl-live-icon, .qdl-center-search-icon, .qdl-sort-control-icon, .qdl-category-toggle-icon, .qdl-category-chevron, .qdl-filter-state-icon, .qdl-view-chip-icon, .qdl-view-chip-close):has(> svg.qdl-icon-key-filter), :where(.qdl-notification-icon, .qdl-toast-icon, .qdl-source-icon, .qdl-toast-source-icon, .qdl-detail-source-icon, .qdl-header-loyalty-ribbon-icon, .qdl-guest-notification-icon, .qdl-template-card-icon, .qdl-template-preview-icon, .qdl-ui-icon, .qdl-overview-icon, .qdl-live-icon, .qdl-center-search-icon, .qdl-sort-control-icon, .qdl-category-toggle-icon, .qdl-category-chevron, .qdl-filter-state-icon, .qdl-view-chip-icon, .qdl-view-chip-close):has(> svg.qdl-icon-key-user) { --qdl-icon-accent: var(--qdl-icon-indigo); } :where(.qdl-notification-icon, .qdl-toast-icon, .qdl-source-icon, .qdl-toast-source-icon, .qdl-detail-source-icon, .qdl-header-loyalty-ribbon-icon, .qdl-guest-notification-icon, .qdl-template-card-icon, .qdl-template-preview-icon, .qdl-ui-icon, .qdl-overview-icon, .qdl-live-icon, .qdl-center-search-icon, .qdl-sort-control-icon, .qdl-category-toggle-icon, .qdl-category-chevron, .qdl-filter-state-icon, .qdl-view-chip-icon, .qdl-view-chip-close):has(> svg.qdl-icon-key-state-week) { --qdl-icon-accent: var(--qdl-icon-blue); } :where(.qdl-notification-icon, .qdl-toast-icon, .qdl-source-icon, .qdl-toast-source-icon, .qdl-detail-source-icon, .qdl-header-loyalty-ribbon-icon, .qdl-guest-notification-icon, .qdl-template-card-icon, .qdl-template-preview-icon, .qdl-ui-icon, .qdl-overview-icon, .qdl-live-icon, .qdl-center-search-icon, .qdl-sort-control-icon, .qdl-category-toggle-icon, .qdl-category-chevron, .qdl-filter-state-icon, .qdl-view-chip-icon, .qdl-view-chip-close):has(> svg.qdl-icon-key-more), :where(.qdl-notification-icon, .qdl-toast-icon, .qdl-source-icon, .qdl-toast-source-icon, .qdl-detail-source-icon, .qdl-header-loyalty-ribbon-icon, .qdl-guest-notification-icon, .qdl-template-card-icon, .qdl-template-preview-icon, .qdl-ui-icon, .qdl-overview-icon, .qdl-live-icon, .qdl-center-search-icon, .qdl-sort-control-icon, .qdl-category-toggle-icon, .qdl-category-chevron, .qdl-filter-state-icon, .qdl-view-chip-icon, .qdl-view-chip-close):has(> svg.qdl-icon-key-illustration-filter-empty) { --qdl-icon-accent: var(--qdl-icon-neutral); } :where(.qdl-notification-icon, .qdl-toast-icon, .qdl-source-icon, .qdl-toast-source-icon, .qdl-detail-source-icon, .qdl-header-loyalty-ribbon-icon, .qdl-guest-notification-icon, .qdl-template-card-icon, .qdl-template-preview-icon, .qdl-ui-icon, .qdl-overview-icon, .qdl-live-icon, .qdl-center-search-icon, .qdl-sort-control-icon, .qdl-category-toggle-icon, .qdl-category-chevron, .qdl-filter-state-icon, .qdl-view-chip-icon, .qdl-view-chip-close):has(> svg.qdl-icon-key-illustration-guest-empty) { --qdl-icon-accent: var(--qdl-icon-cyan); } :where(.qdl-notification-icon, .qdl-toast-icon, .qdl-source-icon, .qdl-toast-source-icon, .qdl-detail-source-icon, .qdl-header-loyalty-ribbon-icon, .qdl-guest-notification-icon, .qdl-template-card-icon, .qdl-template-preview-icon, .qdl-ui-icon, .qdl-overview-icon, .qdl-live-icon, .qdl-center-search-icon, .qdl-sort-control-icon, .qdl-category-toggle-icon, .qdl-category-chevron, .qdl-filter-state-icon, .qdl-view-chip-icon, .qdl-view-chip-close):has(> svg.qdl-icon-key-info), :where(.qdl-notification-icon, .qdl-toast-icon, .qdl-source-icon, .qdl-toast-source-icon, .qdl-detail-source-icon, .qdl-header-loyalty-ribbon-icon, .qdl-guest-notification-icon, .qdl-template-card-icon, .qdl-template-preview-icon, .qdl-ui-icon, .qdl-overview-icon, .qdl-live-icon, .qdl-center-search-icon, .qdl-sort-control-icon, .qdl-category-toggle-icon, .qdl-category-chevron, .qdl-filter-state-icon, .qdl-view-chip-icon, .qdl-view-chip-close):has(> svg.qdl-icon-key-notification-hub), :where(.qdl-notification-icon, .qdl-toast-icon, .qdl-source-icon, .qdl-toast-source-icon, .qdl-detail-source-icon, .qdl-header-loyalty-ribbon-icon, .qdl-guest-notification-icon, .qdl-template-card-icon, .qdl-template-preview-icon, .qdl-ui-icon, .qdl-overview-icon, .qdl-live-icon, .qdl-center-search-icon, .qdl-sort-control-icon, .qdl-category-toggle-icon, .qdl-category-chevron, .qdl-filter-state-icon, .qdl-view-chip-icon, .qdl-view-chip-close):has(> svg.qdl-icon-key-illustration-empty) { --qdl-icon-accent: var(--qdl-icon-violet); } :is(.qdl-notification-icon, .qdl-toast-icon, .qdl-detail-source-icon, .qdl-header-loyalty-ribbon-icon, .qdl-guest-notification-icon, .qdl-template-card-icon, .qdl-template-preview-icon) { color: var(--qdl-icon-accent, var(--qdl-icon-violet)) !important; border: 1px solid color-mix(in srgb, var(--qdl-icon-accent, var(--qdl-icon-violet)) 34%, white) !important; background: linear-gradient(145deg, color-mix(in srgb, var(--qdl-icon-accent, var(--qdl-icon-violet)) 13%, white), color-mix(in srgb, var(--qdl-icon-accent, var(--qdl-icon-violet)) 5%, #F8FAFF)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.94), 0 0 0 1px color-mix(in srgb, var(--qdl-icon-accent, var(--qdl-icon-violet)) 7%, white), 0 3px 10px color-mix(in srgb, var(--qdl-icon-accent, var(--qdl-icon-violet)) 12%, transparent) !important; } /* Compact control icons receive an inset neon outline without changing layout size. */ :is(.qdl-notification-header .qdl-popover-read-all .qdl-ui-icon, .qdl-notification-header .qdl-popover-close .qdl-ui-icon, .qdl-notification-more .qdl-ui-icon, .qdl-notification-expand .qdl-ui-icon, .qdl-notification-action .qdl-ui-icon, .qdl-notification-state-read > i.qdl-ui-icon, .qdl-center-search-clear .qdl-ui-icon, .qdl-category-toggle-icon, .qdl-category-chevron, .qdl-filter-state-icon, .qdl-overview-icon, .qdl-clear-view .qdl-ui-icon, .qdl-preferences-back .qdl-ui-icon, .qdl-settings-link .qdl-ui-icon, .qdl-connectivity-retry .qdl-ui-icon, .qdl-load-more .qdl-ui-icon, .qdl-state-retry .qdl-ui-icon, .qdl-view-chip-icon, .qdl-view-chip-close, .qdl-live-icon) { color: var(--qdl-icon-accent, var(--qdl-icon-indigo)); border-radius: 6px; background: color-mix(in srgb, var(--qdl-icon-accent, var(--qdl-icon-indigo)) 8%, white); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--qdl-icon-accent, var(--qdl-icon-indigo)) 22%, white), inset 0 1px 0 rgba(255,255,255,.78); } /* Icon art is intentionally static: notification/card effects remain separate from icon motion. */ .qdl-notification-item.qdl-effect-pulse .qdl-notification-icon, .qdl-template-preview[data-effect="pulse"] .qdl-template-preview-icon { animation: none !important; } .qdl-notification-item.qdl-effect-shine .qdl-notification-icon::after, .qdl-template-preview[data-effect="shine"] .qdl-template-preview-icon::after { content: none !important; display: none !important; animation: none !important; } @media (prefers-reduced-motion: reduce) { .qdl-icon-svg, .qdl-icon-svg *, .qdl-notification-icon, .qdl-toast-icon, .qdl-template-card-icon, .qdl-template-preview-icon, .qdl-header-loyalty-ribbon-icon { animation: none !important; transition: none !important; } } @media (forced-colors: active) { :is(.qdl-notification-icon, .qdl-toast-icon, .qdl-detail-source-icon, .qdl-header-loyalty-ribbon-icon, .qdl-guest-notification-icon, .qdl-template-card-icon, .qdl-template-preview-icon, .qdl-notification-header .qdl-popover-read-all .qdl-ui-icon, .qdl-notification-header .qdl-popover-close .qdl-ui-icon, .qdl-notification-more .qdl-ui-icon, .qdl-notification-expand .qdl-ui-icon, .qdl-notification-action .qdl-ui-icon, .qdl-notification-state-read > i.qdl-ui-icon, .qdl-center-search-clear .qdl-ui-icon, .qdl-category-toggle-icon, .qdl-category-chevron, .qdl-filter-state-icon, .qdl-overview-icon, .qdl-clear-view .qdl-ui-icon, .qdl-preferences-back .qdl-ui-icon, .qdl-settings-link .qdl-ui-icon, .qdl-connectivity-retry .qdl-ui-icon, .qdl-load-more .qdl-ui-icon, .qdl-state-retry .qdl-ui-icon, .qdl-view-chip-icon, .qdl-view-chip-close, .qdl-live-icon) { background: Canvas !important; color: CanvasText !important; border-color: ButtonText !important; box-shadow: none !important; filter: none !important; } .qdl-icon-svg { color: CanvasText !important; } .qdl-icon-svg :is(path, line, polyline, polygon, rect, circle, ellipse)[stroke="currentColor"] { stroke: CanvasText !important; } }