@import url('./icons.css'); .skip-link { position: absolute; top: -100%; left: 0; background: var(--pc-color-primary); color: #fff; padding: 0.5rem 1rem; z-index: 9999; font-weight: 600; text-decoration: none; } .skip-link:focus { top: 0; } /* Light ist Default. Das data-theme-Attribut wird vom Bootstrap-Script (App.razor) vor dem ersten Paint auf gesetzt: gespeicherte Wahl, sonst OS-Präferenz. Da es auf sitzt, greifen die Dark-Regeln app-weit – inkl. DevExpress-Popups. */ :root { color-scheme: light; --pc-color-primary: #25665a; --pc-color-primary-foreground: #ffffff; --pc-color-primary-soft: #e7f3ef; --pc-color-portal: #3268a8; --pc-color-portal-soft: #eaf2fb; --pc-color-app-bg: #f7f8f9; --pc-color-navigation: #ffffff; --pc-color-surface: #ffffff; --pc-color-surface-muted: #f1f4f6; --pc-color-border: #d9e1e6; --pc-color-text: #17202a; --pc-color-text-muted: #596977; --pc-color-hover: #edf4f2; --pc-color-active: #dceee9; --pc-color-danger-soft: #fff1f0; --pc-color-danger-strong: #b42318; --pc-color-success-soft: #ecfdf3; --pc-color-success-strong: #05603a; --pc-color-warning-soft: #fff4ce; --pc-focus-ring: #0f766e; } [data-theme="dark"] { color-scheme: dark; --pc-color-primary: #65c3b3; --pc-color-primary-foreground: #0f171a; --pc-color-primary-soft: #17332f; --pc-color-portal: #8bbbf0; --pc-color-portal-soft: #172a42; --pc-color-app-bg: #101418; --pc-color-navigation: #151b20; --pc-color-surface: #1a2026; --pc-color-surface-muted: #202932; --pc-color-border: #34414d; --pc-color-text: #f2f5f7; --pc-color-text-muted: #aab6c1; --pc-color-hover: #20342f; --pc-color-active: #21423c; --pc-color-danger-soft: #3a2120; --pc-color-danger-strong: #f5a8a0; --pc-color-success-soft: #16291f; --pc-color-success-strong: #6ee7a8; --pc-color-warning-soft: #382f17; --pc-focus-ring: #78d7c8; } @media (max-width: 700px) { .workbasket-desktop-grid, .workbasket-grid { display: none !important; visibility: hidden !important; } .workbasket-mobile-list { display: flex !important; flex-direction: column; gap: 0.75rem; } .workbasket-mobile-card { background: #fff; border: 1px solid var(--dxds-color-border-neutral-default-rest); border-radius: 8px; color: var(--dxds-color-content-neutral-default-rest); display: flex; flex-direction: column; gap: 0.45rem; min-height: 8.75rem; padding: 1rem; text-decoration: none; } .workbasket-mobile-card strong { color: var(--dxds-color-content-neutral-default-rest); font-size: 1rem; line-height: 1.25; } .workbasket-mobile-card-kicker, .workbasket-mobile-meta { color: var(--dxds-color-content-neutral-subtle-rest); font-size: 0.85rem; } .workbasket-mobile-meta { display: flex; flex-wrap: wrap; gap: 0.35rem; } .workbasket-mobile-meta span { background: var(--dxds-color-background-neutral-subtle-rest); border-radius: 999px; padding: 0.15rem 0.5rem; } .workbasket-mobile-open { align-self: flex-start; color: var(--dxds-color-content-brand-default-rest); font-weight: 650; margin-top: 0.15rem; } .portal-main input, .portal-main select, .portal-main textarea, .portal-main .dxbl-text-edit-input, .portal-main .dxbl-btn { min-height: 2.75rem; } .portal-main a { min-height: 2.25rem; } .portal-section-heading a, .portal-latest a { align-items: center; display: inline-flex; } } html, body { background: var(--pc-color-app-bg); color: var(--pc-color-text); display: flex; flex-direction: column; height: 100%; overflow: hidden; margin: 0; } a { color: var(--pc-color-primary); } img { height: auto; max-width: 100%; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--pc-focus-ring); outline-offset: 2px; } /* Critical public shell styles live globally so the first page stays usable even if isolated CSS is stale or not loaded in a published demo profile. */ .public-shell, .login-entry { background: var(--pc-color-app-bg); color: var(--pc-color-text); } .public-shell { display: flex; flex-direction: column; min-height: 100dvh; overflow-x: hidden; } .public-shell-inner { box-sizing: border-box; margin-inline: auto; width: min(1200px, 100%); } .public-topbar { background: var(--pc-color-surface); border-bottom: 1px solid var(--pc-color-border); position: sticky; top: 0; z-index: 10; } .public-topbar-inner { align-items: center; column-gap: 1rem; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; min-height: 4.25rem; padding: 0.875rem clamp(1rem, 3.5vw, 2rem); } .public-topbar-inner:has(.public-nav:last-child) { grid-template-columns: auto minmax(0, 1fr); } .public-brand, .login-brand { align-items: center; color: var(--pc-color-text); display: inline-flex; gap: 0.75rem; min-width: 0; text-decoration: none; } .public-brand .hausera-logo { flex: 0 1 auto; height: 2.5rem; max-width: min(13rem, 48vw); width: auto; } .login-brand img { flex: 0 0 2.25rem; height: 2.25rem; max-height: 2.25rem; max-width: 2.25rem; width: 2.25rem; } .public-brand span, .login-brand span { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; } .public-brand strong, .login-brand strong { font-size: 1.05rem; overflow-wrap: anywhere; } .public-brand small, .login-brand small { color: var(--pc-color-text-muted); font-size: 0.8rem; margin-top: 0.15rem; } .public-nav { align-items: center; display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; justify-content: center; min-width: 0; } .public-nav a { color: var(--pc-color-text-muted); font-size: 0.95rem; font-weight: 650; min-height: 2.5rem; padding: 0.4rem 0.1rem; text-decoration: none; white-space: nowrap; } .public-actions { align-items: center; display: flex; flex-wrap: nowrap; gap: 1.1rem; justify-content: flex-end; min-width: 0; } .public-actions .theme-toggle { flex: 0 0 auto; } .public-login { align-items: center; background: var(--pc-color-primary); border: 1px solid var(--pc-color-primary); border-radius: 0.25rem; color: var(--pc-color-primary-foreground); display: inline-flex; font-weight: 700; gap: 0.5rem; min-height: 2.75rem; padding: 0.6rem 1rem; text-decoration: none; white-space: nowrap; } .public-content { flex: 1 0 auto; min-width: 0; } .public-footer { background: var(--pc-color-surface); border-top: 1px solid var(--pc-color-border); } .public-footer-inner { align-items: start; column-gap: 2rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; padding: 1.25rem clamp(1rem, 3.5vw, 2rem) 1.35rem; } .public-footer-copy { display: grid; gap: 0.35rem; min-width: 0; } .public-footer-copy strong { color: var(--pc-color-text); font-size: 1rem; } .public-footer-copy p { margin: 0; } .public-footer-copy > p:first-of-type { color: var(--pc-color-text-muted); } .public-footer-note { color: var(--pc-color-text-muted); font-size: 0.92rem; line-height: 1.5; max-width: 46rem; } .public-footer-trust { display: flex; flex-wrap: wrap; gap: 0.5rem; padding-top: 0.2rem; } .public-footer-trust span { background: var(--pc-color-surface-muted); border: 1px solid var(--pc-color-border); border-radius: 999px; color: var(--pc-color-text-muted); font-size: 0.85rem; font-weight: 650; padding: 0.35rem 0.65rem; } .public-footer-links { align-items: start; display: flex; justify-content: flex-end; } .public-footer-links nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; } .public-footer-links a { color: var(--pc-color-text-muted); font-weight: 650; min-height: 2rem; padding: 0.25rem 0; text-decoration: none; } .public-footer-links a:hover, .public-footer-links a:focus-visible, .public-nav a:hover, .public-nav a:focus-visible { color: var(--pc-color-primary); } .public-login:hover { background: color-mix(in srgb, var(--pc-color-primary) 92%, #000000 8%); border-color: color-mix(in srgb, var(--pc-color-primary) 92%, #000000 8%); color: var(--pc-color-primary-foreground); } @media (max-width: 980px) { .public-topbar-inner { grid-template-columns: auto minmax(0, 1fr); row-gap: 0.75rem; } .public-actions { grid-column: 2; justify-content: flex-end; } .public-nav { grid-column: 1 / -1; justify-content: flex-start; } .public-footer-inner { grid-template-columns: 1fr; row-gap: 1rem; } .public-footer-links { justify-content: flex-start; } } @media (max-width: 640px) { .public-topbar { position: static; } .public-topbar-inner { grid-template-columns: minmax(0, 1fr) auto; min-height: 0; padding: 0.85rem 1rem 0.7rem; } .public-brand img, .login-brand img { height: 2rem; max-width: 2rem; width: 2rem; } .public-brand small { white-space: normal; } .public-nav { border-top: 1px solid var(--pc-color-border); display: flex; gap: 0.2rem 0.75rem; grid-column: 1 / -1; justify-content: flex-start; padding-top: 0.65rem; } .public-nav a { background: transparent; border: 0; border-radius: 0; font-size: 0.88rem; min-height: 2rem; padding: 0.25rem 0; } .public-actions { grid-column: 2; grid-row: 1; justify-content: flex-end; } .public-login { justify-content: center; min-height: 2.35rem; padding: 0.45rem 0.75rem; width: auto; } .public-footer-inner { padding: 1rem 1rem 1.1rem; } } /* Critical public page/CMS styles live globally so published demo pages do not fall back to unstyled text if isolated CSS is stale or missing. */ .public-info-page { box-sizing: border-box; color: var(--pc-color-text); display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); margin: 0 auto; max-width: 1200px; overflow-x: hidden; padding: clamp(2rem, 5vw, 4.5rem) clamp(1rem, 4vw, 3rem) clamp(2.5rem, 5vw, 4rem); width: min(100%, 1200px); } .public-info-header, .public-info-blocks { max-width: 58rem; width: 100%; } .public-info-header { display: grid; gap: 0.45rem; } .public-info-header span { color: var(--pc-color-text-muted); font-weight: 700; } .public-info-header h1, .public-info-empty h1, .public-info-block h2 { letter-spacing: 0; line-height: 1.15; margin: 0; } .public-info-header h1, .public-info-empty h1 { font-size: clamp(2rem, 5vw, 3.5rem); } .public-info-header p, .public-info-empty p, .public-info-block p, .cms-rich-text { color: var(--pc-color-text-muted); line-height: 1.65; margin: 0; overflow-wrap: anywhere; } .public-info-blocks { display: grid; gap: 1rem; } .public-info-block, .public-info-empty { border-top: 1px solid var(--pc-color-border); display: grid; gap: 0.75rem; min-width: 0; padding-top: 1.1rem; } .public-info-block h2 { font-size: 1.15rem; } .cms-rich-text { white-space: pre-line; } .cms-rich-text :where(p, ul, ol, blockquote) { margin-bottom: 0.85rem; margin-top: 0; } .cms-rich-text :where(p, ul, ol, blockquote):last-child { margin-bottom: 0; } .cms-rich-text :where(img, iframe, video, table) { max-width: 100%; } .cms-rich-text :where(img) { height: auto; } .cms-rich-text table { border-collapse: collapse; display: block; overflow-x: auto; } .cms-rich-text ul { list-style: none; margin-top: 0.5rem; padding-left: 0; } .cms-rich-text ul li { padding-left: 1.5rem; position: relative; } .cms-rich-text ul li::before { color: var(--pc-color-primary); content: "✓"; font-weight: 700; left: 0; position: absolute; } .public-info-block a { align-items: center; color: var(--pc-color-primary); display: inline-flex; font-weight: 700; max-width: 100%; min-height: 2.75rem; text-decoration: none; width: fit-content; } .public-info-block--calltoaction { background: color-mix(in srgb, var(--pc-color-primary) 6%, var(--pc-color-surface)); border: 1px solid color-mix(in srgb, var(--pc-color-primary) 18%, transparent); border-radius: 0.625rem; padding: 1.5rem 1.75rem; } .public-info-block a.public-info-cta-btn { align-items: center; background: #25665a; border: 1px solid #25665a; border-radius: 0.375rem; color: #ffffff; display: inline-flex; font-size: 0.9375rem; font-weight: 700; justify-content: center; min-height: 2.75rem; padding: 0 1.25rem; text-decoration: none; width: fit-content; } [data-theme="dark"] .public-info-block a.public-info-cta-btn { background: #65c3b3; border-color: #65c3b3; color: #0f171a; } @media (max-width: 560px) { .public-info-page { gap: 1.25rem; padding: 1.25rem 1rem 2.5rem; } .public-info-header h1, .public-info-empty h1 { font-size: 2rem; } .public-info-block a, .public-info-block a.public-info-cta-btn { justify-content: center; text-align: center; width: 100%; } .cms-rich-text :where(ol) { padding-left: 1.2rem; } .cms-rich-text table, .cms-rich-text thead, .cms-rich-text tbody, .cms-rich-text tr, .cms-rich-text th, .cms-rich-text td { display: block; width: 100%; } .cms-rich-text table { overflow-x: visible; } } /* Critical login styles are global on purpose. Account pages are server-rendered and must still look like the product if isolated component CSS is stale after publish. */ .login-entry { align-items: center; background: linear-gradient(135deg, rgb(18 96 83 / 0.10), transparent 40%), linear-gradient(315deg, rgb(45 73 115 / 0.10), transparent 44%), var(--pc-color-app-bg); display: grid; gap: clamp(2rem, 5vw, 5rem); grid-template-columns: minmax(0, 1fr) minmax(22rem, 27rem); margin: 0 auto; max-width: 78rem; min-height: 100%; padding: clamp(1.5rem, 4vw, 3.5rem) clamp(1rem, 4vw, 3rem); width: 100%; } .login-story, .login-intro { display: flex; flex-direction: column; gap: clamp(1.25rem, 3vw, 2rem); justify-content: center; padding: 0; } .login-copy { max-width: 42rem; } .tenant-login-logo { display: block; height: auto; margin-bottom: 1.25rem; max-height: 4.5rem; max-width: min(18rem, 70vw); object-fit: contain; object-position: left center; } .login-eyebrow, .login-panel-heading p { color: var(--pc-color-primary); font-size: 0.78rem; font-weight: 800; letter-spacing: 0; margin: 0 0 0.75rem; text-transform: uppercase; } .login-copy h1 { font-size: clamp(2.2rem, 4vw, 3.8rem); line-height: 1.02; margin: 0; max-width: 42rem; } .login-copy p:not(.login-eyebrow) { color: var(--pc-color-text-muted); font-size: clamp(1rem, 1.2vw, 1.1rem); line-height: 1.65; margin: 1.1rem 0 0; max-width: 36rem; } .login-proof, .login-trust-list { display: grid; gap: 0.875rem; grid-template-columns: 1fr; margin: 0; max-width: 36rem; } .login-proof article, .login-trust-list div { background: color-mix(in srgb, var(--pc-color-surface) 76%, transparent); border: 1px solid var(--pc-color-border); border-radius: 8px; display: grid; gap: 0.7rem; grid-template-columns: auto minmax(0, 1fr); padding: 0.95rem 1rem; } .login-proof article > span, .login-trust-list dt span { color: var(--pc-color-primary); } .login-proof h2 { font-size: 1rem; line-height: 1.25; margin: 0; } .login-proof p, .login-trust-list dd { color: var(--pc-color-text-muted); font-size: 0.9rem; line-height: 1.45; margin: 0.35rem 0 0; } .login-trust-list dt { align-items: center; display: flex; font-weight: 750; gap: 0.5rem; margin-bottom: 0.4rem; } .tenant-contact, .login-panel { background: var(--pc-color-surface); border: 1px solid var(--pc-color-border); border-radius: 8px; } .tenant-contact { display: flex; flex-wrap: wrap; font-style: normal; gap: 0.5rem 1rem; padding: 1rem; } .tenant-contact strong, .tenant-powered-by { flex-basis: 100%; } .tenant-contact a { font-weight: 650; } .tenant-powered-by { color: var(--pc-color-text-muted); font-size: 0.85rem; } .login-panel { align-self: center; box-shadow: 0 22px 60px rgb(15 23 42 / 0.12); display: flex; flex-direction: column; gap: 1rem; padding: clamp(1.35rem, 2.4vw, 1.85rem); } .login-panel-heading h2 { font-size: 1.85rem; line-height: 1.1; margin: 0; } .login-panel-heading span { color: var(--pc-color-text-muted); display: block; line-height: 1.5; margin-top: 0.55rem; } .login-contact-link { display: inline-flex; font-weight: 700; margin-top: 0.75rem; } .login-form { margin-top: 0.2rem; } .login-form label, .login-form .dxbl-fl-cpt, .login-form .dxbl-text-edit-label, .login-form .dxbl-checkbox-label, .login-options { color: var(--pc-color-text); } .login-form input, .login-form .dxbl-text-edit, .login-form .dxbl-text-edit-input { background: var(--pc-color-surface-muted) !important; border-color: var(--pc-color-border) !important; color: var(--pc-color-text) !important; } .login-options { align-items: center; display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: space-between; } .login-options a, .login-links a { color: var(--pc-color-primary); font-weight: 650; } .login-submit, .login-submit.dxbl-btn { background-color: var(--pc-color-primary) !important; border-color: var(--pc-color-primary) !important; color: var(--pc-color-primary-foreground) !important; min-height: 2.875rem; } .login-submit:hover, .login-submit:focus { background-color: color-mix(in srgb, var(--pc-color-primary) 90%, #000000 10%) !important; border-color: color-mix(in srgb, var(--pc-color-primary) 90%, #000000 10%) !important; } .login-submit .dxbl-btn-caption, .login-submit .dxbl-image { color: var(--pc-color-primary-foreground) !important; } .login-links { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; justify-content: center; } @media (max-width: 960px) { .login-entry { align-items: start; grid-template-columns: 1fr; max-width: 42rem; } .login-panel { align-self: stretch; order: -1; } .login-copy h1 { font-size: 2.35rem; } .login-copy p:not(.login-eyebrow) { max-width: none; } } @media (max-width: 560px) { .login-entry { gap: 1.5rem; padding: 1rem; } .login-story, .login-intro { padding: 0; } .login-panel { box-shadow: none; padding: 1.1rem; } .login-copy h1 { font-size: 1.9rem; } .login-options { align-items: flex-start; flex-direction: column; } } .w-100 { width: 100% !important; } .h-100 { height: 100% !important; } .h-auto { height: auto !important; } .overflow-hidden { overflow: hidden !important; } .text-danger { color: var(--dxds-color-content-danger-default-rest); } .alert { border: 1px solid var(--dxds-color-border-transparent-rest); border-radius: .25rem; margin-bottom: 1rem; padding: .75rem 1.25rem; position: relative; } .alert-danger { background-color: var(--dxds-color-surface-danger-subdued-rest); border-color: var(--dxds-color-border-danger-default-rest); color: var(--dxds-color-content-danger-default-rest); } .alert-warning { background-color: var(--dxds-color-surface-warning-subdued-rest); border-color: var(--dxds-color-border-warning-default-rest); color: var(--dxds-color-content-warning-default-rest); } .alert-success { background-color: var(--dxds-color-surface-success-subdued-rest); border-color: var(--dxds-color-border-success-default-rest); color: var(--dxds-color-content-success-default-rest); } .valid.modified:not([type=checkbox]) { outline: 1px solid var(--dxds-color-border-success-default-rest); } .invalid { outline: 1px solid var(--dxds-color-border-danger-default-rest); } .validation-message { color: var(--dxds-color-content-danger-default-rest); } .button-link { text-decoration: unset; } .title { display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem 0; } .title.title-secondary { padding: 0.313rem 0 0; color: var(--dxds-color-content-secondary-default-rest); } .title-header-text { font-size: var(--dxds-font-size-headline-lg); font-weight: var(--dxds-font-weight-headline-default); letter-spacing: var(--dxds-letter-spacing-headline-lg); line-height: var(--dxds-line-height-headline-lg); } .title-content-text { font-size: var(--dxds-font-size-base-lg); font-weight: var(--dxds-font-weight-base-default); letter-spacing: var(--dxds-letter-spacing-base-lg); line-height: var(--dxds-line-height-base-lg); } .main-content { align-items: center; display: flex; height: 100%; justify-content: center; width: 100%; } .block-content { display: flex; flex-direction: column; gap: 0.625rem; height: auto; max-width: 100%; width: 31.25rem; } .or { align-items: center; display: flex; flex-direction: row; padding: 0.3125rem 0; } .or .or-line { opacity: 0.2; width: 100%; border-bottom: 1px solid var(--dxds-color-content-neutral-default-rest); } .or .or-text { padding: 0 0.625rem 0 0.625rem; font-size: var(--dxds-font-size-caption-md); line-height: var(--dxds-line-height-caption-md); color: var(--dxds-color-content-neutral-subdued-rest); } .links-container { align-items: center; display: flex; gap: 0.25rem; justify-content: center; } .links-container .dot { border-radius: 50%; height: 0.3125rem; margin: 0 0.1875rem; opacity: 0.7; width: 0.3125rem; background-color: var(--dxds-color-surface-neutral-default-rest); } .manage-layout { display: flex; flex-direction: column; gap: 0.625rem; } .info-message { align-items: center; display: flex; justify-content: center; padding: 0.625rem 1rem 0.625rem 1rem; position: relative; background: var(--dxds-color-surface-info-subdued-rest); } .info-message.info-panel { margin-bottom: 0.625rem; } .manage-content { display: flex; flex-direction: column; gap: 0.625rem; } .large-input { font-size: 1.875rem; height: 4.3125rem; } .title-content-text-secondary { font-size: var(--dxds-font-size-title-md); line-height: var(--dxds-line-height-title-md); } .button-group { display: flex; flex-direction: row; gap: 0.625rem; } .confirm-button { margin-top: 0.3125rem; } .display-desktop { display: block; } .display-mobile { display: none; } @media (max-width: 768px) { .display-desktop { display: none; } .display-mobile { display: block; } } /* ============================================================ Theme-Umschalter ============================================================ */ .theme-toggle { background: transparent; border: 1px solid var(--pc-color-border); border-radius: 0.375rem; color: var(--pc-color-text); cursor: pointer; font-size: 1rem; height: 2.25rem; width: 2.25rem; display: inline-flex; align-items: center; justify-content: center; transition: background-color 0.15s, border-color 0.15s; } .theme-toggle:hover { background: var(--pc-color-hover); border-color: var(--pc-color-primary); } .theme-toggle:focus-visible { outline: 2px solid var(--pc-focus-ring); outline-offset: 1px; } /* ============================================================ DevExpress Fluent – Dark-Overrides (data-theme="dark") DevExpress bleibt auf Fluent Light geladen; das dunkle Aussehen wird per CSS erzwungen. IThemeChangeService NICHT verwenden – das blendet app-weit alle DevExpress-Icons aus. Siehe Felten-Referenz. ============================================================ */ /* Menü / Navigation */ [data-theme="dark"] .dxbl-menu, [data-theme="dark"] .dxbl-menu-item, [data-theme="dark"] .dxbl-menu-item-text { background: var(--pc-color-navigation) !important; color: var(--pc-color-text) !important; } /* Buttons (Secondary/Text) */ [data-theme="dark"] .dxbl-btn-secondary, [data-theme="dark"] .dxbl-btn-outline-secondary, [data-theme="dark"] .dxbl-btn-secondary .dxbl-btn-caption, [data-theme="dark"] .dxbl-btn-outline-secondary .dxbl-btn-caption { color: var(--pc-color-text) !important; } /* Texteingaben / Selects / ComboBox */ [data-theme="dark"] .dxbl-text-edit { --dxbl-text-edit-bg: var(--pc-color-surface); --dxbl-text-edit-color: var(--pc-color-text); --dxbl-text-edit-border-color: var(--pc-color-border); --dxbl-text-edit-btn-bg: var(--pc-color-surface-muted); --dxbl-text-edit-btn-color: var(--pc-color-text); --dxbl-text-edit-btn-hover-color: var(--pc-color-text); background: var(--pc-color-surface) !important; border-color: var(--pc-color-border) !important; color: var(--pc-color-text) !important; } [data-theme="dark"] .dxbl-text-edit-input, [data-theme="dark"] .dxbl-edit-input { background: var(--pc-color-surface) !important; border-color: var(--pc-color-border) !important; color: var(--pc-color-text) !important; } [data-theme="dark"] .dxbl-text-edit .dxbl-edit-btn-dropdown { background: var(--pc-color-surface-muted) !important; border-color: var(--pc-color-border) !important; color: var(--pc-color-text) !important; } [data-theme="dark"] .dxbl-text-edit .dxbl-edit-btn-dropdown svg { color: var(--pc-color-text) !important; fill: var(--pc-color-text) !important; opacity: 1 !important; } /* Dropdown-Listen / Popups */ [data-theme="dark"] .dxbl-popup, [data-theme="dark"] .dxbl-dropdown, [data-theme="dark"] .dxbl-listbox, [data-theme="dark"] .dxbl-listbox-item { background: var(--pc-color-surface) !important; border-color: var(--pc-color-border) !important; color: var(--pc-color-text) !important; } [data-theme="dark"] .dxbl-listbox-item.dxbl-active, [data-theme="dark"] .dxbl-listbox-item:hover { background: var(--pc-color-hover) !important; } /* Checkboxen */ [data-theme="dark"] .dxbl-checkbox-check-element { background: var(--pc-color-surface) !important; border-color: var(--pc-color-border) !important; } [data-theme="dark"] .dxbl-checkbox-checked .dxbl-checkbox-check-element { background: var(--pc-color-primary) !important; border-color: var(--pc-color-primary) !important; } [data-theme="dark"] .dxbl-checkbox-label, [data-theme="dark"] .dxbl-checkbox .dxbl-text { color: var(--pc-color-text) !important; } /* HTML-Editor: Toolbar/Ribbon (DevExpress Blazor dxbl-*) */ [data-theme="dark"] .dxbl-toolbar, [data-theme="dark"] .dxbl-btn-toolbar, [data-theme="dark"] .dxbl-btn-plain-toolbar, [data-theme="dark"] .dxbl-ribbon-toolbar, [data-theme="dark"] .dxbl-office-bar-dropdown, [data-theme="dark"] .dxbl-office-bar-coloredit { background: var(--pc-color-surface-muted) !important; border-color: var(--pc-color-border) !important; color: var(--pc-color-text) !important; } [data-theme="dark"] .dxbl-toolbar-btn, [data-theme="dark"] .dxbl-toolbar-btn .dxbl-btn-caption, [data-theme="dark"] .dxbl-toolbar-btn svg { color: var(--pc-color-text) !important; fill: var(--pc-color-text) !important; } /* HTML-Editor: Wrapper + Inhaltsbereich (DevExtreme/Quill dx-/ql-Klassen) */ [data-theme="dark"] .dxbl-html-editor, [data-theme="dark"] .dx-htmleditor, [data-theme="dark"] .dx-htmleditor-content, [data-theme="dark"] .ql-container, [data-theme="dark"] .ql-editor { background: var(--pc-color-surface) !important; border-color: var(--pc-color-border) !important; color: var(--pc-color-text) !important; } /* Platzhaltertext im leeren Editor */ [data-theme="dark"] .ql-editor.ql-blank::before { color: var(--pc-color-text-muted) !important; } /* Grid */ [data-theme="dark"] .dxbl-grid, [data-theme="dark"] .dxbl-grid-table, [data-theme="dark"] .dxbl-grid-header, [data-theme="dark"] .dxbl-grid-cell { background: var(--pc-color-surface) !important; border-color: var(--pc-color-border) !important; color: var(--pc-color-text) !important; }