mit fixer, desktop-orientierter `min-width` (z. B. min-width: 640px) — auf dem Handy erzwingt das horizontalen Overflow bzw. einen horizontalen Scrollbalken. Wir deckeln den Dialog auf Viewport-Breite und lassen seinen Inhalt schrumpfen. Wie das Sidebar-Overlay an die `z-mobile-layout`- Body-Klasse gehaengt (schmaler Viewport ODER erzwungener "Mobile Device Mode"). */ body.z-mobile-layout .rz-dialog { max-width: 100vw !important; max-height: 100dvh !important; } body.z-mobile-layout .rz-dialog-content, body.z-mobile-layout .rz-dialog-content * { min-width: 0 !important; } /* DropDowns müssen sich mehr abheben */ .rz-dropdown-panel { position: absolute; background-color: var(--rz-dropdown-open-background-color); border-radius: var(--rz-input-border-radius); /* klare, sichtbare Kante */ border: 1px solid rgba(0, 0, 0, 0.28); /* starke, tief gestaffelte Schatten */ box-shadow: 0 22px 60px rgba(0, 0, 0, 0.45), 0 8px 18px rgba(0, 0, 0, 0.28), 0 1px 0 rgba(255, 255, 255, 0.08) inset; /* leichter Lift */ transform: translateY(3px); } /* Grünen Rahmen bei der Validierung ausblenden */ .valid.modified:not([type=checkbox]) { outline: 0 !important; } /* Alle RadzenSwitch innerhalb von RadzenFormField auf 20px Höhe setzen */ .rz-form-field .rz-switch { height: 20px !important; min-height: 20px !important; margin-top: 0.5rem; /* entspricht rz-my-2 */ margin-bottom: 0.5rem; margin-left: 0.25rem; /* entspricht rz-mx-1 */ margin-right: 0.25rem; } /* Multiselect-Dropdowns mit Chips: kompakte Pillen, damit das Feld die Standard-Feldhöhe der übrigen Formfelder behält */ .rz-dropdown-chips { --rz-chip-padding-block: 0.0625rem; --rz-chip-padding-inline: 0.5rem; --rz-chip-font-size: 0.8125rem; } /* Mit Chips bleibt die Content-Box exakt auf Standard-Feldhöhe (53px) */ .rz-dropdown-chips:has(.rz-chip) { padding-bottom: 5px; } .rz-dropdown-chips .rz-chip .rz-button { min-width: 1rem; width: 1rem; height: 1rem; } .rz-dropdown-chips .rz-chip .rz-button .rzi { font-size: 0.875rem; } /* Fokusfarbe von Labels in Formfields deaktivieren */ .rz-form-field.rz-state-focused .rz-form-field-label { color: inherit !important; } /* Radzen FormField bei Fokus hervorheben */ .rz-form-field.rz-state-focused { box-shadow: 0 0 6px 1px rgba(205, 205, 205, 0.4); } /* Footer Anpassung Padding war im Original zu hoch */ :root { --rz-footer-padding: 0.5rem 1rem !important; --rz-fieldset-padding: 0.5rem !important; --rz-tabs-padding: 0rem !important; --rz-grid-header-filter-icon-active-color: #bae945 !important; } .main-component-progressbar { height: 5px; } /* Kommt ein Fieldset gleich nach einem Fieldset -> Abstand halten*/ .rz-fieldset + .rz-fieldset { margin-top: 20px; } /* Locked Icon - Hinweis, dass das Formfield nicht bearbeitet werden darf */ .lockedIcon { color: #FFFFFF55 !important; font-size: 1rem !important; } /* Rote Checkbox bei Tristate Checkbox false */ .rz-chkbox-redGreen .rz-chkbox-box .rzi-times { color: white !important; background-color: rgb(125, 48, 65) !important; } .rz-chkbox-redGreen .rz-chkbox-box:has(.rzi-times) { background-color: rgb(125, 48, 65) !important; } /* Grüne Checkbox bei Tristate Checkbox true */ .rz-chkbox-redGreen .rz-chkbox-box .rzi-check { color: white !important; background-color: rgb(48, 125, 65) !important; } .rz-chkbox-redGreen .rz-chkbox-box:has(.rzi-check) { background-color: rgb(48, 125, 65) !important; } /* Nur ungültige Textboxen innerhalb eines Radzen Data Grids */ .rz-datatable .rz-textbox.invalid, .rz-datatable .rz-dropdown.invalid, .rz-datatable .rz-numeric-input.invalid, .rz-datatable .rz-masked.invalid, .rz-datatable .rz-datepicker .invalid { border: 2px solid var(--rz-danger) !important; box-shadow: none !important; border-radius: 2px; outline: 0 !important; } .grid-goto-link { color: #fdd07a !important; } .goto-link { color: #fdd07a !important; text-decoration: underline !important; } .mark.highlight-match { background-color: #ffe08a; color: #000; border-radius: 3px; padding: 0 2px; } /* Download Link for File Download Dialog*/ .fileDownloadLink { color: white; } .fileDownloadLink:hover { color: white; } .rz-message-popup { z-index: 100; } .rz-form-field:has(.rz-dropdown.invalid) { border: 2px solid var(--rz-danger); border-radius: 4px; padding: 2px; } .rz-form-field:has(.rz-textbox.invalid) { border: 2px solid var(--rz-danger); border-radius: 4px; padding: 2px; } .rz-form-field:has(.ggt-picker.invalid) { border: 2px solid var(--rz-danger); border-radius: 4px; padding: 2px; } .rz-form-field-content > .rz-dropdown.invalid, .rz-form-field-content > .rz-textbox.invalid, .rz-form-field-content > .ggt-picker.invalid > .rz-inputtext { border: none !important; box-shadow: none !important; outline: 0 !important; } /* Right Sidebar */ .sidebar-stack { height: 100%; display: flex; flex-direction: column; } .flex-spacer { flex-grow: 1; } /* Form Field */ .rz-form-field { border-radius: 12px; } .rz-form-field-content { width: 100%; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; border-bottom-left-radius: 12px; border-top-left-radius: 12px; border-bottom-right-radius: 12px; border-top-right-radius: 12px; color: var(--rz-text-color, #fff); font-size: 0.95rem; transition: all 0.3s ease; } .rz-form-field:not(.rz-variant-outlined):not(.rz-floating-label) .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) *:focus ~ .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) *:focus-within ~ .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) :not(.rz-state-empty) ~ .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) .rz-radio-button-list-vertical ~ .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) .rz-radio-button-list-horizontal ~ .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) .rz-checkbox-list-vertical ~ .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) .rz-checkbox-list-horizontal ~ .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) .rz-chkbox ~ .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) .rz-fileupload ~ .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined) .rz-state-empty:has(.rz-placeholder) ~ .rz-form-field-label, .rz-form-field:not(.rz-variant-outlined).rz-state-focused .rz-form-field-label { background-color: transparent !important; color: var(--rz-base) !important; } /* Radzen 10 setzt auf gefloatete Labels "background-color: inherit !important" mit Selektoren bis Spezifität (0,6,0) — das schlägt die Regel oben und erscheint auf gesperrten Feldern als heller Chip (das Input dunkelt ab, der Content nicht). Die verdreifachten Klassen heben diese Regel auf (0,7,0), damit sie unabhängig von der Ladereihenfolge gewinnt. Outlined bleibt ausgenommen: dort maskiert das Label bewusst die Border. */ .rz-form-field.rz-form-field.rz-form-field:not(.rz-variant-outlined) .rz-form-field-label.rz-form-field-label.rz-form-field-label { background-color: transparent !important; } span.rz-switch-circle.rz-readonly { background-color: var(--rz-input-disabled-color) !important; } .fk-readonly { padding: 0.75rem 2.5rem 0.75rem 0.75rem; /* Beispiel: links rein, rechts Platz für Icon */ box-sizing: border-box; color: var(--rz-input-disabled-color); padding-left: 7px !important; } /* Tabs, welche die volle Seitenhöhe nutzen */ .tabview-fill { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .zgrid-tab-fill { display: flex; flex: 1 1 auto; min-height: 0; overflow: hidden; } /* ZDataGrid im Tab: Menüzeile oben, Grid füllt die Resthöhe */ .zdatagrid-tab-fill { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; } /* Container, der die Panels hält, muss Resthöhe bekommen */ .tabview-fill .rz-tabview-panels { flex: 1 1 auto; min-height: 0; display: flex; } /* Panel selbst darf nicht den Body scrollen lassen */ .tabview-fill .rz-tabview-panel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: auto; } /* Linke Seiten Tab Buttons brauchen etwas Abstand zum Tab Content*/ .rz-tabview-left > .rz-tabview-nav { margin-right: 2px; margin-top: 35px } .rz-tabview-panel { padding: 1px; } /* Permission Spalte im Permission Selektor*/ .permission-cell { line-height: 1.2; } .permission-description { font-size: 0.95rem; font-weight: 500; } .permission-key { font-size: 0.75rem; color: var(--rz-text-secondary-color, #888); margin-top: 2px; } /* Grid Dialog. Grid soll scrollen, nicht der Dialog */ .rz-dialog.dlg-grid { display: flex; flex-direction: column; } /* Content muss Resthöhe bekommen, darf schrumpfen, aber NICHT selbst scrollen */ .rz-dialog.dlg-grid > .rz-dialog-content { flex: 1 1 auto; /* statt 0 1 auto */ min-height: 0; /* entscheidend */ overflow: hidden; /* verhindert den 2. Scroller */ display: flex; flex-direction: column; } /* Grid füllt dann die Content-Fläche und scrollt intern */ .rz-dialog.dlg-grid > .rz-dialog-content > .rz-data-grid.rz-grid-grow { flex: 1 1 auto; min-height: 0; } /* Grid-Scrollbar auch im Dialog wie im Theme */ .rz-dialog .rz-data-grid-data::-webkit-scrollbar { width: var(--rz-scrollbar-size); height: var(--rz-scrollbar-size); } .rz-dialog .rz-data-grid-data::-webkit-scrollbar-track { background: var(--rz-scrollbar-background); } .rz-dialog .rz-data-grid-data::-webkit-scrollbar-thumb { background: var(--rz-scrollbar-color); border-radius: var(--rz-scrollbar-border-radius); border: var(--rz-scrollbar-border); } /* Firefox (falls relevant) */ .rz-dialog .rz-data-grid-data { scrollbar-width: thin; scrollbar-color: var(--rz-scrollbar-color) var(--rz-scrollbar-background); } /* Grid Goto Link mit Edit Control*/ .fk-editor-row { display: flex; align-items: center; gap: .5rem; min-width: 0; /* wichtig, damit der Editor schrumpfen darf */ } .fk-editor-row .goto-link { flex: 0 0 auto; /* Link bleibt “klein” */ } /* Optional: wenn dein Renderer Radzen Inputs/Dropdowns rendert, sorgt das dafür, dass der Editor den restlichen Platz nimmt */ .fk-editor-row :is(.rz-dropdown, .rz-autocomplete, .rz-textbox, .rz-numeric, .rz-datepicker, .rz-inputtext) { flex: 1 1 auto; min-width: 0; } /* ===== Homescreen ===== */ .homescreen-container { position: relative; width: 100%; min-height: calc(100vh - 200px); } .homescreen-edit-btn { position: absolute; top: 4px; right: 4px; z-index: 10; } .homescreen-grid { position: relative; width: 100%; min-height: calc(100vh - 200px); } .homescreen-grid.edit-mode { background-image: radial-gradient(circle, var(--rz-text-disabled-color) 1px, transparent 1px); background-size: 32px 32px; } .homescreen-tile { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: var(--rz-border-radius); cursor: pointer; transition: background-color 0.15s, transform 0.15s; user-select: none; gap: 2px; } .homescreen-tile:hover { background-color: rgba(255, 255, 255, 0.08); } .homescreen-tile.no-hover:hover { background-color: transparent; } .homescreen-tile .tile-icon { font-size: 28px; line-height: 1; } .homescreen-tile .tile-title { font-size: 9px; line-height: 1.1; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; padding: 0 2px; } .homescreen-grid.edit-mode .homescreen-tile { animation: tile-wobble 0.3s ease-in-out infinite alternate; cursor: grab; } @keyframes tile-wobble { 0% { transform: rotate(-0.5deg); } 100% { transform: rotate(0.5deg); } } .homescreen-tile .tile-delete { display: none; position: absolute; top: -10px; left: -10px; width: 20px; height: 20px; border-radius: 50%; background: var(--rz-danger); color: white; font-size: 13px; line-height: 20px; text-align: center; cursor: pointer; z-index: 5; } .homescreen-grid.edit-mode .homescreen-tile .tile-delete { display: block; } .homescreen-drop-ghost { position: absolute; border: 2px dashed var(--rz-primary); border-radius: var(--rz-border-radius); background: rgba(59, 130, 246, 0.1); pointer-events: none; display: none; z-index: 4; } /* Widget tile */ .homescreen-widget { background: transparent; border: none; overflow: visible; } .homescreen-widget .widget-content { width: 100%; height: 100%; overflow: hidden; } /* Widget resize handle (edit mode): bottom-right grip on grid tiles, right-edge grip on footer items. touch-action none for pointer-resize on touch. */ .tile-resize-handle { position: absolute; right: -10px; bottom: -10px; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; background: rgba(128, 128, 128, 0.6); border-radius: 50%; cursor: nwse-resize; z-index: 5; touch-action: none; user-select: none; } .tile-resize-handle .rzi { font-size: 12px; color: white; pointer-events: none; } .tile-resize-handle:hover { background: var(--rz-primary); } .homescreen-tile.resizing { outline: 2px dashed var(--rz-primary); outline-offset: 2px; } .footer-resize-handle { position: absolute; right: -3px; top: 2px; bottom: 2px; width: 7px; border-radius: 3px; background: rgba(128, 128, 128, 0.6); cursor: ew-resize; z-index: 5; touch-action: none; user-select: none; } .footer-resize-handle:hover { background: var(--rz-primary); } .footer-dock-item.resizing { outline: 2px dashed var(--rz-primary); outline-offset: 1px; } /* Widget options button */ .widget-options-btn { position: absolute; bottom: -10px; left: -10px; width: 20px; height: 20px; display: none; align-items: center; justify-content: center; background: rgba(128, 128, 128, 0.6); border-radius: 50%; cursor: pointer; z-index: 4; transition: opacity 0.15s ease; } .homescreen-grid.edit-mode .widget-options-btn, .footer-dock-item.edit-mode .widget-options-btn { display: flex; } .widget-options-btn .rzi { font-size: 12px; color: white; } /* Widget picker panel (edit mode) */ .homescreen-widget-picker { position: fixed; right: 16px; top: 80px; width: 180px; max-height: calc(100vh - 120px); overflow-y: auto; background: var(--rz-panel-background-color); border: 1px solid var(--rz-border-color); border-radius: var(--rz-border-radius); padding: 8px; z-index: 20; box-shadow: 0 4px 12px rgba(0,0,0,0.3); } .homescreen-widget-picker h4 { margin: 0 0 8px 0; font-size: 12px; opacity: 0.6; text-transform: uppercase; letter-spacing: 0.5px; } .widget-picker-item { display: flex; flex-direction: column; align-items: center; padding: 8px; cursor: grab; border-radius: var(--rz-border-radius); margin-bottom: 4px; gap: 4px; } .widget-picker-item:hover { background: rgba(255, 255, 255, 0.08); } .widget-picker-item .rzi { font-size: 24px; } .widget-picker-item span { font-size: 11px; } .widget-picker-item .worker-avatar-thumb { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; } .widget-picker-item small { font-size: 9px; opacity: 0.5; } /* Widget picker search */ .widget-picker-search { width: 100%; padding: 4px 8px; margin-bottom: 8px; border: 1px solid var(--rz-border-color); border-radius: var(--rz-border-radius); background: var(--rz-input-background-color); color: var(--rz-text-color); font-size: 12px; outline: none; box-sizing: border-box; } .widget-picker-search:focus { border-color: var(--rz-primary); } .widget-picker-search::placeholder { opacity: 0.5; } /* Widget picker paging */ .widget-picker-paging { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 6px 0 2px; border-top: 1px solid var(--rz-border-color); margin-top: 4px; } .widget-picker-page-btn { background: none; border: none; color: var(--rz-text-color); cursor: pointer; padding: 2px; border-radius: var(--rz-border-radius); display: flex; align-items: center; } .widget-picker-page-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); } .widget-picker-page-btn:disabled { opacity: 0.3; cursor: default; } .widget-picker-page-btn .rzi { font-size: 18px; } .widget-picker-page-info { font-size: 11px; opacity: 0.6; } /* Widget picker loading spinner */ .widget-picker-loading { display: flex; justify-content: center; padding: 12px 0; opacity: 0.5; } .widget-picker-spinner { font-size: 22px; animation: widget-spin 1s linear infinite; } @keyframes widget-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* AI Worker Widget */ .ai-worker-widget { display: flex; flex-wrap: nowrap; gap: 0; padding: 0; align-items: center; } .worker-head { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; transition: opacity 0.5s; flex-shrink: 0; } .worker-head img { width: 100%; height: 100%; object-fit: cover; } .worker-head .rzi { font-size: 28px; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .worker-head.worker-pulse { animation: worker-pulse-anim 1.5s ease-in-out infinite; } @keyframes worker-pulse-anim { 0%, 100% { opacity: 0.6; } 50% { opacity: 1.0; } } /* LED Widgets */ .led-widget { display: flex; align-items: center; justify-content: center; box-sizing: border-box; } .led-widget.led-widget--labeled { justify-content: flex-start; gap: 8px; padding: 0 8px; } .led-dot { width: 16px; height: 16px; border-radius: 50%; flex: 0 0 auto; background: var(--led-color, var(--rz-base-400)); transition: opacity 0.25s ease-in-out, box-shadow 0.25s ease-in-out; } .led-dot.led-off { opacity: 0.25; box-shadow: none; } .led-dot.led-on { opacity: 1; box-shadow: 0 0 6px 1px var(--led-color, var(--rz-base-400)); } .led-dot.led-blink { animation: led-blink var(--led-blink, 800ms) steps(1, end) infinite; } @keyframes led-blink { 0%, 49% { opacity: 1; box-shadow: 0 0 6px 1px var(--led-color, var(--rz-base-400)); } 50%, 100% { opacity: 0.2; box-shadow: none; } } .led-widget__label { font-size: 0.8rem; line-height: 1; color: var(--rz-text-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Clock Widget */ .clock-widget { display: flex; align-items: center; justify-content: center; gap: 4px; user-select: none; } .clock-widget-icon { font-size: 18px; opacity: 0.6; } .clock-widget-time { font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; opacity: 0.85; } /* Online Users Widget */ .online-users-widget { display: flex; align-items: center; justify-content: center; gap: 4px; user-select: none; } .online-users-widget-icon { font-size: 18px; opacity: 0.6; } .online-users-widget-count { font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; opacity: 0.85; } /* Footer Dock (inside ZERPLiteFooter) */ .footer-dock-zone { display: none; } .footer-dock-zone:has(.footer-dock-item), .footer-dock-zone.edit-mode { display: flex; align-items: center; padding: 0 6px; } /* Footer-Dock ist ein Desktop-Feature: Widget-Kacheln haben feste Breiten (SpanX * 32px) und koennen weder schrumpfen noch umbrechen — auf schmalen Geraeten wuerden sie abgeschnitten. Im Mobile-Modus komplett aus (gewinnt per Spezifitaet gegen die :has()-Anzeige-Regel oben). */ body.z-mobile-layout .footer-dock-zone { display: none; } .footer-dock-zone.edit-mode { background: rgba(255, 255, 255, 0.04); border-radius: 6px; min-height: 34px; min-width: 40px; } .footer-dock-items { display: flex; align-items: center; gap: 4px; } .footer-dock-item { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 8px; cursor: pointer; transition: all 0.15s ease; position: relative; } .footer-dock-item:hover { background: rgba(255, 255, 255, 0.1); transform: scale(1.15); } .footer-dock-item.no-hover:hover { background: transparent; transform: none; } .footer-dock-item .rzi { font-size: 20px; opacity: 0.85; } .footer-dock-item img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; } .footer-dock-item .tile-delete { position: absolute; top: -8px; left: -8px; width: 16px; height: 16px; font-size: 11px; line-height: 16px; text-align: center; background: var(--rz-danger); color: white; border-radius: 50%; cursor: pointer; z-index: 5; } .footer-dock-item .widget-options-btn { bottom: -8px; left: -8px; width: 16px; height: 16px; } .footer-dock-item .widget-options-btn .rzi { font-size: 10px; } .footer-dock-item.edit-mode { animation: homescreen-wobble 0.3s ease-in-out infinite alternate; } .footer-dock-empty-slot { width: 30px; height: 30px; border: 2px dashed currentColor; opacity: 0.15; border-radius: 8px; display: flex; align-items: center; justify-content: center; } .footer-dock-empty-slot .rzi { font-size: 16px; opacity: 0.2; } .footer-dock-empty-slot.drag-over { border-color: var(--rz-primary); opacity: 0.7; background: rgba(var(--rz-primary-rgb, 51, 133, 255), 0.15); transition: all 0.15s ease; } .footer-dock-empty-slot.drag-over .rzi { opacity: 0.8; } .footer-drop-indicator { width: 3px; height: 32px; background: var(--rz-primary); border-radius: 2px; flex-shrink: 0; animation: footer-indicator-pulse 0.8s ease-in-out infinite; } @keyframes footer-indicator-pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1.0; } } /* ============================================================================ ZMarkDownViewer — structural / shared CSS ============================================================================ */ .host-howto-page { display: grid; gap: 3rem; width: 100%; } .host-howto-header { display: grid; gap: 1rem; } .host-howto-title { margin: 0; padding-top: 1rem; } .z-markdown-viewer { display: block; } .z-markdown-viewer__surface { position: relative; border: 1px solid var(--rz-base-300); padding: 1rem; padding-top: 2.5rem; transition: background-color 0.2s ease, color 0.2s ease; } .z-markdown-viewer__surface--light { background-color: var(--z-md-surface-light-bg, #ffffff); color: var(--z-md-surface-light-color, #1a1a1a); } .z-markdown-viewer__surface--dark { background-color: var(--z-md-surface-dark-bg, #1a1a1a); color: var(--z-md-surface-dark-color, #e0e0e0); } .z-markdown-viewer__toolbar { position: absolute; top: 0.25rem; right: 0.25rem; display: flex; gap: 0.125rem; z-index: 1; } .z-markdown-viewer__btn { opacity: 0.6; transition: opacity 0.15s ease; } .z-markdown-viewer__btn:hover { opacity: 1; } .z-markdown-viewer__surface--light .z-markdown-viewer__btn { color: var(--z-md-surface-light-color, #1a1a1a) !important; } .z-markdown-viewer__surface--dark .z-markdown-viewer__btn { color: var(--z-md-surface-dark-color, #e0e0e0) !important; } .z-markdown-viewer__content { line-height: 1.6; word-wrap: break-word; overflow-wrap: break-word; } .z-markdown-viewer__content h1, .z-markdown-viewer__content h2, .z-markdown-viewer__content h3, .z-markdown-viewer__content h4, .z-markdown-viewer__content h5, .z-markdown-viewer__content h6 { margin-top: 1em; margin-bottom: 0.5em; font-weight: 600; color: inherit; } .z-markdown-viewer__content h1 { font-size: 1.75em; border-bottom: 1px solid var(--rz-base-300); padding-bottom: 0.3em; } .z-markdown-viewer__content h2 { font-size: 1.4em; border-bottom: 1px solid var(--rz-base-300); padding-bottom: 0.25em; } .z-markdown-viewer__content h3 { font-size: 1.2em; } .z-markdown-viewer__content p { margin: 0.5em 0; } .z-markdown-viewer__content code { padding: 0.15em 0.4em; border-radius: 4px; font-size: 0.9em; font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace; } .z-markdown-viewer__surface--light .z-markdown-viewer__content code { background-color: var(--z-md-code-light-bg, #f1f3f5); color: var(--z-md-code-light-color, #be185d); } .z-markdown-viewer__surface--dark .z-markdown-viewer__content code { background-color: var(--z-md-code-dark-bg, #2b313a); color: var(--z-md-code-dark-color, #f472b6); } .z-markdown-viewer__content pre { padding: 1em; border-radius: 6px; overflow-x: auto; margin: 0.75em 0; } .z-markdown-viewer__surface--light .z-markdown-viewer__content pre { background-color: var(--z-md-pre-light-bg, #eceff3); border: 1px solid var(--z-md-pre-light-border, #d7dbe0); } .z-markdown-viewer__surface--dark .z-markdown-viewer__content pre { background-color: var(--z-md-pre-dark-bg, #2d2d2d); } .z-markdown-viewer__surface--light .z-markdown-viewer__content pre code, .z-markdown-viewer__surface--dark .z-markdown-viewer__content pre code { padding: 0; background: none; color: inherit; } .z-markdown-viewer__content table { border-collapse: collapse; width: 100%; margin: 0.75em 0; } .z-markdown-viewer__content th, .z-markdown-viewer__content td { padding: 0.5em 0.75em; text-align: left; } .z-markdown-viewer__surface--light .z-markdown-viewer__content th, .z-markdown-viewer__surface--light .z-markdown-viewer__content td { border: 1px solid var(--z-md-table-light-border, #ddd); } .z-markdown-viewer__surface--dark .z-markdown-viewer__content th, .z-markdown-viewer__surface--dark .z-markdown-viewer__content td { border: 1px solid var(--z-md-table-dark-border, #444); } .z-markdown-viewer__surface--light .z-markdown-viewer__content th { background-color: var(--z-md-th-light-bg, #f0f0f0); } .z-markdown-viewer__surface--dark .z-markdown-viewer__content th { background-color: var(--z-md-th-dark-bg, #2d2d2d); } .z-markdown-viewer__content blockquote { margin: 0.75em 0; padding: 0.5em 1em; border-left: 4px solid var(--rz-primary); } .z-markdown-viewer__surface--light .z-markdown-viewer__content blockquote { background-color: var(--z-md-blockquote-light-bg, #f9f9f9); } .z-markdown-viewer__surface--dark .z-markdown-viewer__content blockquote { background-color: var(--z-md-blockquote-dark-bg, #2a2a2a); } .z-markdown-viewer__content ul, .z-markdown-viewer__content ol { padding-left: 1.5em; margin: 0.5em 0; } .z-markdown-viewer__content hr { border: none; border-top: 1px solid var(--rz-base-300); margin: 1em 0; } .z-markdown-viewer__content a { color: var(--rz-primary); text-decoration: none; } .z-markdown-viewer__content a:hover { text-decoration: underline; } .z-markdown-viewer__content img { max-width: 100%; height: auto; } .z-markdown-viewer__empty { opacity: 0.5; font-style: italic; padding: 0.5em 0; } /* ============================================================================ ZJsonViewer — structural / shared CSS ============================================================================ */ .z-json-viewer { display: flex; flex-direction: column; gap: 0.5rem; } .z-json-viewer__error { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 0.75rem; font-size: 0.85rem; line-height: 1.35; } .z-json-viewer__surface { overflow: visible; } .z-json-viewer__empty { padding: 0.9rem 1rem; opacity: 0.78; font-size: 0.9rem; } /* /Sys/AiToolLog double-click dialog: the JSON viewer fills the whole dialog body. */ .rz-dialog:has(.ai-toollog-json) { display: flex; flex-direction: column; } .rz-dialog-content:has(.ai-toollog-json) { flex: 1 1 auto; min-height: 0; } .ai-toollog-json { height: 100%; } .ai-toollog-json .z-json-viewer, .ai-toollog-json .z-json-viewer__surface { height: 100%; } .ai-toollog-json .z-json-viewer__code-frame { height: 100%; min-height: 0; } /* Fehler- bzw. Operation-Text im Detail-Reiter der Log-Masken (Farben via rz-*-Klassen) */ .ai-toollog-error, .agent-apicall-operation { margin: 0; padding: 0.5rem; max-height: 40vh; overflow: auto; white-space: pre-wrap; word-break: break-word; border-radius: var(--rz-border-radius); } .z-json-viewer__code-frame { position: relative; min-height: var(--z-json-viewer-height, calc(12 * 1.55em + 1.8rem)); height: var(--z-json-viewer-height, calc(12 * 1.55em + 1.8rem)); overflow: auto; scrollbar-gutter: stable; color: var(--rz-input-value-color, var(--rz-text-color)); background-color: var(--rz-input-background-color, var(--rz-base-50)); border: var(--rz-input-border, 1px solid var(--rz-input-border-color, rgba(0,0,0,.23))); border-block-end: var(--rz-input-border-block-end, var(--rz-input-border, 1px solid var(--rz-input-border-color, rgba(0,0,0,.23)))); border-radius: var(--rz-input-border-radius, 12px); box-shadow: var(--rz-input-shadow); transition: var(--rz-input-transition, all .15s ease); outline: none; cursor: text; } .z-json-viewer__code-frame--resizable { resize: vertical; max-height: var(--z-json-viewer-max-height, none); } .z-json-viewer__code-frame:hover { box-shadow: var(--rz-input-shadow); background-color: var(--rz-input-background-color, var(--rz-base-50)); border: var(--rz-input-border, 1px solid var(--rz-input-border-color, rgba(0,0,0,.23))); border-block-end: var(--rz-input-border-block-end, var(--rz-input-border, 1px solid var(--rz-input-border-color, rgba(0,0,0,.23)))); } .z-json-viewer__code-frame:focus, .z-json-viewer__code-frame:focus-visible, .z-json-viewer__code-frame:focus-within { box-shadow: var(--rz-input-shadow); background-color: var(--rz-input-background-color, var(--rz-base-50)); border: var(--rz-input-border, 1px solid var(--rz-input-border-color, rgba(0,0,0,.23))); border-block-end: var(--rz-input-border-block-end, var(--rz-input-border, 1px solid var(--rz-input-border-color, rgba(0,0,0,.23)))); outline: var(--rz-input-focus-outline, none); outline-offset: var(--rz-input-focus-outline-offset, 0); } .z-json-viewer__code { margin: 0; padding-top: var(--rz-input-padding-block, .625rem); padding-right: var(--rz-input-padding-inline, .75rem); padding-bottom: var(--rz-input-padding-block, .625rem); padding-left: var(--rz-input-padding-inline, .75rem); min-height: 100%; overflow: visible; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.87rem; line-height: 1.55; white-space: pre; tab-size: 2; } .z-json-viewer__code--wrap { white-space: pre-wrap; word-break: break-word; } .z-json-viewer__copy-btn { position: absolute; top: calc(var(--rz-input-padding-block, .625rem) - 0.05rem); right: calc(var(--rz-input-padding-inline, .75rem) + 0.7rem); z-index: 2; display: inline-flex; align-items: center; justify-content: center; min-width: 0; width: 1.9rem; height: 1.9rem; padding: 0; border-radius: 999px; background: color-mix(in srgb, var(--rz-base-background-color, var(--rz-base)) 78%, transparent); backdrop-filter: blur(2px); } .z-json-viewer__copy-btn .rz-button-text { display: none; } .z-json-viewer__copy-btn .rzi { font-size: 1rem; } .z-json-viewer__token--punct { color: var(--rz-text-color); } .z-json-viewer__token--key { color: var(--rz-primary); } .z-json-viewer__token--string { color: var(--rz-success); } .z-json-viewer__token--number { color: var(--rz-info); } .z-json-viewer__token--bool { color: var(--rz-warning); font-weight: 600; } .z-json-viewer__token--null { color: var(--rz-danger); font-style: italic; } /* =================================================================== * ZGrid — generic mobile / accordion view * Active when ZGrid.UseMobileInlineView is true (mobile viewport or * forced Mobile Device Mode). Theme-safe: uses card-background-color * + text-color for adaptive surfaces; semantic colors paired with on-*. * =================================================================== */ .zgrid-desktop-hidden { display: none !important; } /* Desktop-Grid temporaer sichtbar wenn editiert wird (Inline-Edit-Row) */ .zgrid-desktop-shown-for-edit { display: block; } .zgrid-mob-topbar { position: sticky; top: 0; z-index: 5; display: flex; flex-direction: column; gap: 0.4rem; padding: 0.5rem 0.6rem; background: var(--rz-card-background-color); border-bottom: 1px solid var(--rz-base-border-color); } .zgrid-mob-search { display: flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.6rem; border-radius: 6px; background: var(--rz-base-background-color); border: 1px solid var(--rz-base-border-color); } .zgrid-mob-search-input { flex: 1 1 auto; border: none; outline: none; background: transparent; color: var(--rz-text-color); font-size: 0.95rem; } .zgrid-mob-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; } .zgrid-mob-actions > .rz-button { min-width: 42px; min-height: 42px; padding: 0 0.8rem; } .zgrid-mob-hamburger { display: flex; flex-direction: column; border: 1px solid var(--rz-base-border-color); border-radius: 6px; overflow: hidden; background: var(--rz-card-background-color); margin-top: 0.25rem; } .zgrid-mob-hamburger-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.75rem; background: transparent; border: none; border-bottom: 1px solid var(--rz-base-border-color); color: var(--rz-text-color); font: inherit; text-align: left; cursor: pointer; min-height: 44px; } .zgrid-mob-hamburger-item:last-child { border-bottom: none; } .zgrid-mob-hamburger-item:hover:not([disabled]) { background: var(--rz-base-100); color: var(--rz-base-900); } .zgrid-mob-hamburger-item[disabled] { opacity: 0.5; cursor: not-allowed; } .zgrid-mob-list { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.5rem 0.6rem 1.5rem 0.6rem; } .zgrid-mob-card { background: var(--rz-card-background-color); border: 1px solid var(--rz-base-border-color); border-radius: 6px; overflow: hidden; color: var(--rz-text-color); } .zgrid-mob-card.is-expanded { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); } .zgrid-mob-card.is-editing { border-color: var(--rz-primary); } .zgrid-mob-card-head { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.7rem; cursor: pointer; min-height: 56px; } .zgrid-mob-card-headmain { flex: 1 1 auto; display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; } .zgrid-mob-card-line { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.95rem; } .zgrid-mob-card-line:first-child { font-weight: 600; } .zgrid-mob-card-chevron { flex: 0 0 auto; color: var(--rz-text-color); opacity: 0.7; } .zgrid-mob-card-body { padding: 0.6rem 0.7rem 0.8rem 0.7rem; border-top: 1px solid var(--rz-base-border-color); display: flex; flex-direction: column; gap: 0.4rem; } .zgrid-mob-card-detail { display: flex; flex-direction: column; gap: 0.05rem; padding: 0.2rem 0; border-bottom: 1px dashed var(--rz-base-border-color); } .zgrid-mob-card-detail:last-of-type { border-bottom: none; } .zgrid-mob-card-detail-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.02em; opacity: 0.65; } .zgrid-mob-card-detail-value { font-size: 0.95rem; word-break: break-word; } .zgrid-mob-card-edit-hint { padding: 0.5rem 0.6rem; border-radius: 6px; background: var(--rz-info); color: var(--rz-on-info); font-size: 0.85rem; } .zgrid-mob-card-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; } .zgrid-mob-card-actions > .rz-button { flex: 1 1 calc(50% - 0.4rem); min-height: 42px; } .zgrid-mob-empty { text-align: center; padding: 1.5rem 1rem; color: var(--rz-text-color); opacity: 0.65; } /* ZGrid mobile auto-edit-form */ .zgrid-mob-edit-form { display: flex; flex-direction: column; gap: 0.7rem; } .zgrid-mob-edit-field { display: flex; flex-direction: column; gap: 0.25rem; } .zgrid-mob-edit-field-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.02em; opacity: 0.75; color: var(--rz-text-color); } .zgrid-mob-edit-field-required { color: var(--rz-danger); margin-left: 0.15rem; } .zgrid-mob-edit-field-readonly { padding: 0.5rem 0.6rem; border-radius: 4px; background: var(--rz-base-background-color); border: 1px dashed var(--rz-base-border-color); color: var(--rz-text-color); word-break: break-word; } /* Form-Controls bei schmaler Breite immer 100% */ .zgrid-mob-edit-field .rz-textbox, .zgrid-mob-edit-field .rz-dropdown, .zgrid-mob-edit-field .rz-datepicker, .zgrid-mob-edit-field .rz-numeric, .zgrid-mob-edit-field .rz-password { width: 100% !important; } /* Im Edit-Modus gibt es keinen Card-Head -> oberen Trenner weglassen */ .zgrid-mob-card.is-editing .zgrid-mob-card-body { border-top: none; } /* Secret-Eingabefelder (ZFormFieldText IsSecret): type="text" mit CSS-Maskierung, damit Browser-Passwortmanager sie ignorieren (kein Speichern-Dialog, kein Autofill). */ input.z-secret-mask, .z-secret-mask input { -webkit-text-security: disc; }