/* ============================================================================ VDM Styles – zusätzliche Farbschemata "Dark (Teal)" & "Metall" + UI-Effekte Übernommen aus BC Data (BI.Data). Aktivierung über data-vdm-style="darkteal" bzw. data-vdm-style="metal" am -Element (setzt MainLayout per JS) sowie über die Klassen .vdm-style-darkteal / .vdm-style-metal am Shell. Diese Datei ergänzt site.css – sie ersetzt nichts. ========================================================================== */ /* ---------- Basis: Effekt-Variablen (helles Standard-Theme) ---------- */ :root { --vdm-fx-primary: var(--vdm-accent-green, #1f9d45); --btn-glow: var(--vdm-fx-primary); --btn-glow-shadow: rgba(31, 157, 69, .28); --spot-color: var(--vdm-fx-primary); /* Freiraum unten rechts, damit fixe/sticky Aktionsleisten nicht unter der Chat-Blase (56px + 24px Rand) liegen. Zentrale Quelle fuer .vdm-fab-safe. */ --vdm-chat-safe: 5rem; } /* Wiederverwendbar: an eine sticky/fixe untere Aktionsleiste haengen, deren rechter Button sonst von der Chat-Blase ueberlappt wuerde. */ .vdm-fab-safe { padding-right: var(--vdm-chat-safe) !important; } /* ---------- Seiten-Hilfe: "i Hilfe"-Button (oben rechts) + Popup-Inhalt ---------- */ /* Header, der den Hilfe-Button oben rechts traegt: als Positions-Anker markieren. */ .vdm-has-hilfe { position: relative; } /* Der Button positioniert sich in der oberen rechten Ecke seines Headers. */ .vdm-hilfe-btn { position: absolute; top: 0.9rem; right: 1rem; z-index: 6; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.7rem; border: 1px solid var(--vdm-border, #d9dde3); border-radius: 999px; background: var(--vdm-surface, #fff); color: var(--vdm-text-muted, #5b6470); font-size: 0.82rem; line-height: 1.1; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease; } .vdm-hilfe-btn:hover, .vdm-hilfe-btn:focus-visible { background: var(--vdm-surface-hover, #eef1f5); color: var(--vdm-text, #1f2733); border-color: var(--vdm-accent, #2563eb); box-shadow: 0 2px 8px rgba(0, 0, 0, .08); } .vdm-hilfe-btn i { font-size: 1rem; } /* Inhalt in der Hoehe begrenzen + scrollen, damit das Popup bei kleiner Fensterhoehe nicht nach oben unter das Menueband waechst. */ .vdm-hilfe-popup { max-height: 62vh; overflow-y: auto; } .vdm-hilfe-popup p { margin: 0 0 0.75rem; line-height: 1.55; } .vdm-hilfe-popup p:last-child { margin-bottom: 0; } /* Auf schmalen Screens nur das "i" zeigen. */ @media (max-width: 640px) { .vdm-hilfe-btn-label { display: none; } } /* ---------- Tour-Karten-Marker (Leaflet/vdmTourMap, global) ---------- Die nummerierten Kreis-Marker werden von tourenkarte.js per JS erzeugt und bekommen daher KEIN Blazor-Scope-Attribut -> die Styles muessen global sein (nicht nur in Vertrieb/Tour.razor.css), damit sie auch auf anderen Seiten (z. B. Tourenplanung-Zeitplan) wirken. */ .tour-map-marker-wrap { background: transparent; border: 0; } /* Stopp-Marker (Tourenplanung UI-Konzept, Phase B2): 28px Kreis, Text 12px/700, Fuellung Primaerblau #2563EB. Zustaende via Klassen (is-selected/is-critical/is-closure); Farbe nie alleiniger Traeger -> die Nummer bleibt immer sichtbar. */ .tour-map-marker { display: grid; place-items: center; width: 28px; height: 28px; border: 2px solid #fff; border-radius: 999px; background: var(--marker-fill, #2563eb); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25), 0 6px 16px rgba(15, 23, 42, .28); color: #fff; font-size: 12px; font-weight: 700; line-height: 1; } /* Ausgewaehlter Stopp: dunkleres Blau + heller Aussenring. */ .tour-map-marker.is-selected { background: #1d4ed8; box-shadow: 0 0 0 4px #93c5fd, 0 6px 16px rgba(15, 23, 42, .30); } /* Schliesstag: Bernstein (Warnung, nicht rot). */ .tour-map-marker.is-closure { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.30), 0 6px 16px rgba(15, 23, 42, .28); } /* Kritischer Stopp (rote Ampel): Fehlerrot. */ .tour-map-marker.is-critical { background: #dc2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.28), 0 6px 16px rgba(15, 23, 42, .28); } /* Phase H5: Zusatzkennzeichnung "2x" fuer eine in beiden Laeufen (T01 + TZ01) besuchte Ausgabe. Hellblau (#0284C7, Zweitanlieferung) - bewusst nicht rot. Text bleibt Traeger (nicht nur Farbe). */ .tour-map-marker-badge { position: absolute; top: -7px; right: -9px; min-width: 16px; height: 15px; padding: 0 3px; border: 1.5px solid #fff; border-radius: 999px; background: #0284c7; color: #fff; font-size: 9px; font-weight: 700; line-height: 12px; text-align: center; box-shadow: 0 1px 3px rgba(15, 23, 42, .35); } /* Küchen-/Startmarker (Tourenplanung §32 / UI-Konzept): eigener visueller Typ – hohler Kreis ○ in dunklem Gruen auf hellem Gruen, 24px, 2px Aussenring. Klar anders als Stopps. */ .tour-map-start-marker-wrap { background: transparent; border: 0; } .tour-map-start-marker { display: grid; place-items: center; width: 24px; height: 24px; border: 2px solid #2e7d32; border-radius: 999px; background: #e8f5e9; box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.18), 0 6px 16px rgba(15, 23, 42, .28); color: #2e7d32; font-size: 1rem; font-weight: 900; line-height: 1; } /* ---------- Tourenplanung: Etappen-Badges + Karten-Infofenster (M2/M3/M4) ---------- */ /* Fahrzeit-Badge am Etappen-Mittelpunkt ("17 Min") – dezent, neutral. */ .tour-leg-badge-wrap { background: transparent; border: 0; } .tour-leg-badge { display: inline-block; padding: 1px 7px; border: 1px solid #cbd5e1; border-radius: 999px; background: #fff; color: #475569; font-size: 10px; font-weight: 600; line-height: 15px; white-space: nowrap; box-shadow: 0 1px 2px rgba(15, 23, 42, .18); } /* Gemeinsames Layout der Karten-Tooltips (Marker-Infofenster + Segment-Tooltip). */ .tour-mk-tip, .tour-seg-tip { min-width: 168px; max-width: 220px; } .tour-tip-h { font-size: 12px; font-weight: 700; color: #0f172a; margin-bottom: 2px; } .tour-seg-tip .tour-tip-h { color: #1d4ed8; } .tour-tip-sub { font-size: 11px; color: #64748b; margin-bottom: 5px; } .tour-tip-row { display: flex; justify-content: space-between; gap: 12px; color: #475569; font-size: 11px; margin: 2px 0; } .tour-tip-row b { color: #0f172a; font-variant-numeric: tabular-nums; } .tour-tip-row b.tour-tip-gruen { color: #15803d; } .tour-tip-row b.tour-tip-gelb { color: #a16207; } .tour-tip-row b.tour-tip-rot { color: #b91c1c; } .tour-tip-note { margin-top: 5px; padding: 3px 6px; border-radius: 6px; background: #fef3c7; border: 1px solid #fde68a; color: #92400e; font-size: 10.5px; font-weight: 600; } /* ---------- Warenfluss-Ablaufdiagramm (in der Hilfe) ---------- */ .vdm-flow { margin: 0 0 1.1rem; } .vdm-flow-title { font-weight: 600; margin-bottom: 0.5rem; color: var(--vdm-text-strong, #30343a); } .vdm-flow-steps { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.4rem; } .vdm-flow-step { flex: 1 1 130px; min-width: 120px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.3rem; padding: 0.65rem 0.5rem; border: 1px solid var(--vdm-border-card, #d9dde2); border-radius: 10px; background: var(--vdm-surface-card, #fff); } .vdm-flow-step.is-active { border-color: var(--vdm-accent, #2563eb); box-shadow: 0 0 0 2px rgba(37, 99, 235, .15); background: var(--vdm-surface-hover, #f2f6ff); } .vdm-flow-ic { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--vdm-surface-hover, #eef1f5); color: var(--vdm-accent, #2563eb); font-size: 1.1rem; } .vdm-flow-step.is-active .vdm-flow-ic { background: var(--vdm-accent, #2563eb); color: #fff; } .vdm-flow-step-title { font-weight: 600; font-size: 0.86rem; color: var(--vdm-text-strong, #30343a); } .vdm-flow-step-sub { font-size: 0.76rem; line-height: 1.35; color: var(--vdm-text-muted, #5b6470); } .vdm-flow-arrow { display: flex; align-items: center; color: var(--vdm-text-muted, #9aa2ad); font-size: 1.15rem; } /* Klickbare Schritte (mit Berechtigung) */ button.vdm-flow-step { font: inherit; cursor: pointer; } .vdm-flow-step.is-link:hover, .vdm-flow-step.is-link:focus-visible { border-color: var(--vdm-accent, #2563eb); box-shadow: 0 2px 10px rgba(0, 0, 0, .08); } .vdm-flow-step.is-link:hover .vdm-flow-ic { background: var(--vdm-accent, #2563eb); color: #fff; } /* Ohne Berechtigung: ausgegraut, nicht klickbar */ .vdm-flow-step.is-disabled { opacity: 0.55; cursor: not-allowed; } .vdm-flow-lock { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.7rem; color: var(--vdm-text-muted, #9aa2ad); margin-top: 0.15rem; } @media (max-width: 520px) { .vdm-flow-steps { flex-direction: column; } .vdm-flow-arrow { transform: rotate(90deg); align-self: center; } } /* Bestehendes Standard-Dunkel: dezenter neutraler Glow */ [data-vdm-style="dark"], .vdm-style-dark { --btn-glow: #9db8d4; --btn-glow-shadow: rgba(157, 184, 212, .35); --vdm-fx-primary: #9db8d4; --spot-color: #9db8d4; } /* ============================================================================ Theme "Dark (Teal)" – Nachtarbeit / Beamer, Türkis-Glow (aus BC Data "dark") ========================================================================== */ [data-vdm-style="darkteal"], .vdm-style-darkteal { color-scheme: dark; /* BC-Data-Palette */ --bg: #0f151d; --surface: #18202b; --surface-2: #202a37; --text: #e6edf5; --muted: #97a4b6; --border: #2a3646; --primary: #2bb3a3; --primary-600: #21a394; --primary-50: rgba(43, 179, 163, .16); --accent: #e0a83e; --danger: #e5675a; --danger-bg: #3a2320; --ok: #4bbf87; --ok-bg: #14301f; --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px rgba(0, 0, 0, .45); --shadow-sm: 0 1px 3px rgba(0, 0, 0, .4); --sidebar: linear-gradient(180deg, #141b25 0%, #0b1017 100%); --btn-glow: #37e0cf; --btn-glow-shadow: rgba(55, 224, 207, .55); --vdm-fx-primary: #2bb3a3; --spot-color: #2bb3a3; /* Mapping auf das bestehende VDM-Variablensystem */ --vdm-surface-app: var(--bg); --vdm-surface-card: var(--surface); --vdm-surface-card-muted: var(--surface-2); --vdm-surface-card-elevated: var(--surface-2); --vdm-border-card: var(--border); --vdm-shadow-card: var(--shadow-sm); --vdm-text-strong: var(--text); --vdm-text-muted: var(--muted); --vdm-text-disabled: #6b7a8d; --vdm-icon-muted: var(--muted); --vdm-icon-soft: var(--muted); --vdm-accent-green: var(--primary); --vdm-accent-green-hover: var(--primary-600); /* Hooks für seiten-spezifische Dark-Blöcke (Fallback = alter Wert im Standard-Dunkel) */ --vdm-dark-bg: var(--bg); --vdm-dark-card: var(--surface); --vdm-dark-card-2: var(--surface-2); } /* ============================================================================ Theme "Metall" – near-black + Kupfer/Orange (aus BC Data "metal") ========================================================================== */ [data-vdm-style="metal"], .vdm-style-metal { color-scheme: dark; /* BC-Data-Palette */ --bg: #100f11; --surface: #161517; --surface-2: #1e1c20; --text: #ece9e6; --muted: #9b968f; --border: #2a282c; --primary: #e78a53; --primary-600: #d3743d; --primary-50: rgba(231, 138, 83, .16); --accent: #fbcb97; --danger: #d0564a; --danger-bg: #2c1a18; --ok: #5f8787; --ok-bg: #16211f; --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 12px 34px rgba(0, 0, 0, .55); --shadow-sm: 0 1px 3px rgba(0, 0, 0, .5); --sidebar: linear-gradient(180deg, #161416 0%, #0c0b0d 100%); --btn-glow: #ffa463; --btn-glow-shadow: rgba(231, 138, 83, .55); --vdm-fx-primary: #e78a53; --spot-color: #e78a53; /* Mapping auf das bestehende VDM-Variablensystem */ --vdm-surface-app: var(--bg); --vdm-surface-card: var(--surface); --vdm-surface-card-muted: var(--surface-2); --vdm-surface-card-elevated: var(--surface-2); --vdm-border-card: var(--border); --vdm-shadow-card: var(--shadow-sm); --vdm-text-strong: var(--text); --vdm-text-muted: var(--muted); --vdm-text-disabled: #716c66; --vdm-icon-muted: var(--muted); --vdm-icon-soft: var(--muted); --vdm-accent-green: var(--primary); --vdm-accent-green-hover: var(--primary-600); /* Hooks für seiten-spezifische Dark-Blöcke (Fallback = alter Wert im Standard-Dunkel) */ --vdm-dark-bg: var(--bg); --vdm-dark-card: var(--surface); --vdm-dark-card-2: var(--surface-2); } /* Farbpunkt in den Theme-Auswahl-Buttons (Profil-Panel) */ .vdm-style-dot { width: 15px; height: 15px; border-radius: 50%; display: inline-block; flex: 0 0 auto; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); } /* ---------- Gezielte App-Overrides für beide neuen Schemata ---------- */ [data-vdm-style="darkteal"] body, [data-vdm-style="metal"] body { background: var(--bg); color: var(--text); } [data-vdm-style="darkteal"] .top-menu-host, [data-vdm-style="metal"] .top-menu-host { background: color-mix(in srgb, var(--surface) 85%, transparent); border-bottom-color: var(--border); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } [data-vdm-style="darkteal"] input:not([type="checkbox"]):not([type="radio"]), [data-vdm-style="darkteal"] select, [data-vdm-style="darkteal"] textarea { background-color: var(--surface-2); border-color: #33414f; color: var(--text); } [data-vdm-style="metal"] input:not([type="checkbox"]):not([type="radio"]), [data-vdm-style="metal"] select, [data-vdm-style="metal"] textarea { background-color: #1c1a1e; border-color: #332f35; color: var(--text); } [data-vdm-style="darkteal"] .dxbl-grid .dxbl-grid-data-row:hover > td { background: #1e2733; } [data-vdm-style="metal"] .dxbl-grid .dxbl-grid-data-row:hover > td { background: #1c1a1e; } [data-vdm-style="darkteal"] .badge { background: #263140; color: #d9b877; } [data-vdm-style="metal"] .badge { background: #2a2228; color: #f0c79a; } /* ============================================================================ DevExpress-Integration: Neutral-Farbrampe der Fluent-Themes übersteuern. Alle DX-Flächen (Grids, Popups, Kalender, Filterzeilen, Toolbars) hängen an --dxds-neutral-10…250 (10 = hellster Text im Dark-Mode, 250 = tiefster Grund). html[data-vdm-style=...] (0,1,1) schlägt die :root-Definition (0,1,0) von DX. ========================================================================== */ /* Dark (Teal): Slate-Blau-Rampe – 230 = Surface #18202b, 250 = App-Grund #0f151d */ html[data-vdm-style="darkteal"] { --dxds-neutral-10: #f2f6fb; --dxds-neutral-20: #e6ecf4; --dxds-neutral-30: #d9e2ed; --dxds-neutral-40: #ccd7e5; --dxds-neutral-50: #bfccdd; --dxds-neutral-60: #b2c1d4; --dxds-neutral-70: #a5b6cb; --dxds-neutral-80: #99abc2; --dxds-neutral-90: #8da0b8; --dxds-neutral-100: #8295ae; --dxds-neutral-110: #7789a3; --dxds-neutral-120: #6d7f98; --dxds-neutral-130: #64748b; --dxds-neutral-140: #5b6a80; --dxds-neutral-150: #526075; --dxds-neutral-160: #49566a; --dxds-neutral-170: #414d60; --dxds-neutral-180: #394556; --dxds-neutral-190: #323d4d; --dxds-neutral-200: #2b3544; --dxds-neutral-210: #252e3c; --dxds-neutral-220: #202834; --dxds-neutral-230: #18202b; --dxds-neutral-240: #131a23; --dxds-neutral-250: #0f151d; /* Akzent-Rampe (Teal) – DX-Hook für eigene Akzentfarben: färbt Zeilen-Selektion, Links, Sortier-Header, Fokus-Ringe usw. */ --dxbl-accent-color-10: #e2f5f3; --dxbl-accent-color-20: #c5ebe6; --dxbl-accent-color-30: #a5e0d9; --dxbl-accent-color-40: #86d6cb; --dxbl-accent-color-50: #67cbbe; --dxbl-accent-color-60: #49bfb0; --dxbl-accent-color-70: #2bb3a3; --dxbl-accent-color-80: #27a294; --dxbl-accent-color-90: #219084; --dxbl-accent-color-100: #1d8377; --dxbl-accent-color-110: #197165; --dxbl-accent-color-120: #146054; --dxbl-accent-color-130: #104e45; --dxbl-accent-color-140: #0c3d36; --dxbl-accent-color-150: #082c27; --dxbl-accent-color-160: #051d19; --dxbl-accent-color-170: #02100d; } /* Metall: warme Near-Black-Rampe – 230 = Surface #161517, 250 = App-Grund #100f11 */ html[data-vdm-style="metal"] { --dxds-neutral-10: #f4f1ee; --dxds-neutral-20: #e8e4e1; --dxds-neutral-30: #dcd8d4; --dxds-neutral-40: #d0ccc7; --dxds-neutral-50: #c4bfba; --dxds-neutral-60: #b8b3ad; --dxds-neutral-70: #aca7a1; --dxds-neutral-80: #a19b94; --dxds-neutral-90: #958f88; --dxds-neutral-100: #89837c; --dxds-neutral-110: #7e7871; --dxds-neutral-120: #736d66; --dxds-neutral-130: #68625c; --dxds-neutral-140: #5e5852; --dxds-neutral-150: #534e49; --dxds-neutral-160: #494440; --dxds-neutral-170: #403c38; --dxds-neutral-180: #373431; --dxds-neutral-190: #2f2c2a; --dxds-neutral-200: #2a282c; --dxds-neutral-210: #242226; --dxds-neutral-220: #1e1c20; --dxds-neutral-230: #161517; --dxds-neutral-240: #131214; --dxds-neutral-250: #100f11; /* Akzent-Rampe (Kupfer/Orange) */ --dxbl-accent-color-10: #fdf1e9; --dxbl-accent-color-20: #fae0cf; --dxbl-accent-color-30: #f7cfb4; --dxbl-accent-color-40: #f3bd99; --dxbl-accent-color-50: #f0ac7f; --dxbl-accent-color-60: #ec9b66; --dxbl-accent-color-70: #e78a53; --dxbl-accent-color-80: #d97a42; --dxbl-accent-color-90: #c66c38; --dxbl-accent-color-100: #b25f30; --dxbl-accent-color-110: #9e5228; --dxbl-accent-color-120: #8a4621; --dxbl-accent-color-130: #75391a; --dxbl-accent-color-140: #602e14; --dxbl-accent-color-150: #4b230e; --dxbl-accent-color-160: #361809; --dxbl-accent-color-170: #210e05; } /* ============================================================================ Effekt: Button-Hover – rotierender Leucht-Rand in Theme-Farbe (reines CSS) Gilt für Bootstrap- (.btn) und DevExpress-Buttons (.dxbl-btn). ========================================================================== */ @property --btn-angle { syntax: ""; initial-value: 0deg; inherits: false; } .btn, .dxbl-btn { position: relative; } .btn::before, .dxbl-btn::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .3s ease; background: conic-gradient(from var(--btn-angle), transparent 0deg, var(--btn-glow, var(--vdm-fx-primary)) 24deg, transparent 62deg, transparent 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .btn:hover:not(:disabled)::before, .dxbl-btn:hover:not(:disabled):not(.dxbl-disabled)::before { opacity: 1; animation: btnSpin 2s ease-in-out 1 both; } .btn:hover:not(:disabled), .dxbl-btn:hover:not(:disabled):not(.dxbl-disabled) { box-shadow: 0 0 10px -5px var(--btn-glow-shadow, transparent); } @keyframes btnSpin { to { --btn-angle: 360deg; } } @media (prefers-reduced-motion: reduce) { .btn:hover::before, .dxbl-btn:hover::before { animation: none; } } /* ============================================================================ Effekt: Spotlight-Karten – leuchtender Rand an der Cursor-Position Klasse .spot auf die Karte/Kachel setzen; Farbe je Karte via --spot-color. JS-Begleiter: wwwroot/js/ui-effects.js (setzt --mx/--my). ========================================================================== */ .spot { position: relative; } .spot::before, .spot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s ease; } /* nur ein Hauch Aufhellung am Mauspunkt */ .spot::before { z-index: 2; background: radial-gradient(150px circle at var(--mx, -400px) var(--my, -400px), rgba(255, 255, 255, .01), transparent 60%); } /* leuchtender Rand an der Cursor-Position (Haupteffekt) */ .spot::after { z-index: 3; padding: 1.5px; background: radial-gradient(380px circle at var(--mx, -400px) var(--my, -400px), #fff, var(--spot-color, var(--vdm-fx-primary)) 16%, transparent 52%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .spot:hover::before { opacity: 1; } .spot:hover::after { opacity: 1; } @media (hover: none) { .spot::before, .spot::after { display: none; } } /* Begleitender Hover-Lift für Kacheln mit .spot */ .spot { transition: transform .16s ease, box-shadow .16s ease, border-color .15s ease; } .spot:hover { box-shadow: var(--vdm-shadow-card, 0 8px 24px rgba(15, 30, 50, .07)); } /* ============================================================================ Dark (Teal): Feinabgleich an das BI.Data-"Dark"-Vorbild. Die Palette ist bereits identisch (aus BI.Data uebernommen). Hier nur die letzte Farb-Inkonsistenz: der Top-Menue-Akzent ist app-weit hart auf Blau (#3b82f6) gesetzt und aendert sich nicht mit dem Schema. Fuer darkteal auf die Teal-Primaerfarbe umstellen (aktive Kontext-Links / Hover-Marker). Gilt ausschliesslich fuer darkteal – Hell/Dunkel/Metall bleiben unberuehrt. ========================================================================== */ html[data-vdm-style="darkteal"] .vdm-topbar-host { --vdm-nav-accent: #2bb3a3; } html[data-vdm-style="metal"] .vdm-topbar-host { --vdm-nav-accent: #e78a53; } /* ============================================================================ Drawer-Hero: einmaliger Glanz-Sweep beim Oeffnen (1,5 s verzoegert) und bei Hover. Endliche Animation (1 Durchlauf) -> kein Dauerlauf/CPU im Ruhezustand. Die eigentlichen ::after-Sweeps stehen pro Drawer-Komponente; hier nur die geteilte Keyframe (global, wird von den scoped-CSS referenziert). ========================================================================== */ @keyframes vdmHeroSweep { 0% { opacity: 0; background-position: 150% 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { opacity: 0; background-position: -60% 0; } } /* Separater Keyframe fuer Hover, damit der Browser die Animation garantiert neu startet (gleicher Name wuerde nicht neu ausloesen). */ @keyframes vdmHeroSweepHover { 0% { opacity: 0; background-position: 150% 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { opacity: 0; background-position: -60% 0; } } /* Dediziertes Shine-Element im Drawer-Header (echtes , keine Pseudo- Element-Konflikte). Sweep einmal beim Oeffnen (1,4 s verzoegert) + bei Hover. Der Header muss position:relative + overflow:hidden haben (ist gesetzt). */ /* Statischer Glas-Look (edel, ruhig, keine Bewegung): feine Glanzkante an der Oberkante + weicher Eck-Schimmer oben rechts. Weisse Transluzenz -> funktioniert auf allen Theme-Verlaeufen. */ .vdm-hero-shine { position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit; overflow: hidden; background: radial-gradient(100% 80% at 104% -20%, rgba(255, 255, 255, 0.09), transparent 46%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15); /* Hover laesst das Glas weich aufleuchten und dimmt beim Rausgehen zurueck */ transition: box-shadow 0.4s ease, background 0.5s ease; /* Beim Oeffnen blendet der Sheen sanft ein */ animation: vdmHeroGlassIn 0.6s ease 0.05s 1 both; } @keyframes vdmHeroGlassIn { from { opacity: 0; } to { opacity: 1; } } .entity-detail-hero:hover .vdm-hero-shine, .artikel-detail-hero:hover .vdm-hero-shine, .rezepte-drawer-hero:hover .vdm-hero-shine { background: radial-gradient(100% 80% at 104% -20%, rgba(255, 255, 255, 0.15), transparent 48%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24); } @media (prefers-reduced-motion: reduce) { .vdm-hero-shine { animation: none; transition: none; } } /* ============================================================================ Drawer-Ein-/Ausfahrt smoother (DevExpress-Drawer) + sanftes Content-Einblenden. Weiches Easing statt "Aufploppen"; endliche Animation -> kein Dauerlauf. Der Lade-Spinner/-Zustand bleibt unberuehrt. ========================================================================== */ .dxbl-drawer { --dxbl-drawer-animation-duration: 0.32s; } .dxbl-drawer-panel { transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), width 0.32s cubic-bezier(0.22, 1, 0.36, 1) !important; } .entity-detail, .artikel-detail, .rezepte-drawer-content { animation: vdmDrawerContentIn 0.4s ease 0.06s both; } @keyframes vdmDrawerContentIn { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .dxbl-drawer-panel { transition: none !important; } .entity-detail, .artikel-detail, .rezepte-drawer-content { animation: none; } } /* ============================================================================ Tabellen-Zeilenauswahl: einheitlich in der Theme-Basisfarbe (statt DX-Blau). Gilt fuer alle DevExpress-Grids. Hell=Gruen, Dark Teal=Teal, Metall=Kupfer. ========================================================================== */ html[data-vdm-style="light"] .dxbl-grid .dxbl-grid-data-row.dxbl-grid-selected-row > td, html[data-vdm-style="light"] .dxbl-grid .dxbl-grid-data-row.dxbl-grid-focused-row > td { background-color: rgba(31, 157, 69, 0.14) !important; } html[data-vdm-style="darkteal"] .dxbl-grid .dxbl-grid-data-row.dxbl-grid-selected-row > td, html[data-vdm-style="darkteal"] .dxbl-grid .dxbl-grid-data-row.dxbl-grid-focused-row > td { background-color: rgba(43, 179, 163, 0.26) !important; } html[data-vdm-style="metal"] .dxbl-grid .dxbl-grid-data-row.dxbl-grid-selected-row > td, html[data-vdm-style="metal"] .dxbl-grid .dxbl-grid-data-row.dxbl-grid-focused-row > td { background-color: rgba(231, 138, 83, 0.26) !important; } /* ============================================================================ App-Launcher-Kacheln: Hover-Effekt wie bei Buttons - diagonaler Glanz-/Spiegel-Sweep (::before) - rotierender Leucht-Rand in Theme-Farbe via --btn-glow (::after, wie .btn) Ersetzt gezielt die generischen .spot-Pseudoelemente fuer diese Kacheln. ========================================================================== */ @property --tile-angle { syntax: ""; initial-value: 0deg; inherits: false; } .vdm-launcher-tile { position: relative; overflow: hidden; isolation: isolate; transition: transform .16s ease, box-shadow .16s ease, border-color .15s ease; } /* Glanz-Sweep */ .vdm-launcher-tile::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .22) 50%, transparent 58%); background-size: 250% 100%; background-position: 150% 0; -webkit-mask: none; mask: none; opacity: 0; transition: opacity .2s ease; } .vdm-launcher-tile:hover::before { opacity: 1; animation: tileShine .7s ease forwards; } @keyframes tileShine { from { background-position: 150% 0; } to { background-position: -60% 0; } } /* Rotierender Leucht-Rand (analog .btn::before) */ .vdm-launcher-tile::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 1.5px; pointer-events: none; opacity: 0; transition: opacity .3s ease; background: conic-gradient(from var(--tile-angle), transparent 0deg, var(--btn-glow, var(--vdm-fx-primary)) 30deg, transparent 72deg, transparent 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .vdm-launcher-tile:hover::after { opacity: 1; animation: tileSpin 2s ease-in-out 1 both; } @keyframes tileSpin { to { --tile-angle: 360deg; } } .vdm-launcher-tile:hover { transform: translateY(-2px); box-shadow: 0 0 12px -4px var(--btn-glow-shadow, transparent), 0 12px 26px rgba(2, 6, 23, .18); } @media (prefers-reduced-motion: reduce) { .vdm-launcher-tile:hover::before, .vdm-launcher-tile:hover::after { animation: none; } .vdm-launcher-tile:hover { transform: none; } } /* ============================================================================ /* ============================================================================ Chat-Widget – Theme "Dunkel" (global, valide Selektoren; matcht Komponenten- Klassen trotz CSS-Isolation). Blaue Akzente bleiben, nur Flaechen werden dunkel. ========================================================================== */ html[data-vdm-style="dark"] .chat-panel { background:#1e293b; color:#e2e8f0; border-color:rgba(255,255,255,.08); } html[data-vdm-style="dark"] .chat-msg.is-other { background:#334155; color:#e2e8f0; } html[data-vdm-style="dark"] .chat-input, html[data-vdm-style="dark"] .chat-search { background:#0f172a; color:#e2e8f0; border-color:rgba(255,255,255,.15); } html[data-vdm-style="dark"] .chat-avatar { background:#475569; color:#e2e8f0; } html[data-vdm-style="dark"] .chat-neu-buttons, html[data-vdm-style="dark"] .chat-input-row { border-color:rgba(255,255,255,.08); } html[data-vdm-style="dark"] .chat-mention-pop, html[data-vdm-style="dark"] .chat-msg-menu, html[data-vdm-style="dark"] .chat-quick-menu, html[data-vdm-style="dark"] .chat-forward { background:#1e293b; color:#e2e8f0; border-color:rgba(255,255,255,.12); } html[data-vdm-style="dark"] .chat-msg-menu-item:hover, html[data-vdm-style="dark"] .chat-quick-item:hover { background:rgba(255,255,255,.08); } html[data-vdm-style="dark"] .chat-msg-menu-item.is-danger { color:#f87171; } html[data-vdm-style="dark"] .chat-presence-dot--corner { border-color:#1e293b; } /* Teilen-Dialog (interne Memos) – Dunkel */ html[data-vdm-style="dark"] .chat-teilen-dialog { background:#1e293b; color:#e2e8f0; } html[data-vdm-style="dark"] .chat-teilen-note, html[data-vdm-style="dark"] .chat-teilen-suche { background:#0f172a; color:#e2e8f0; border-color:rgba(255,255,255,.15); } html[data-vdm-style="dark"] .chat-teilen-btn { color:#93b4ff; border-color:rgba(147,180,255,.4); } html[data-vdm-style="dark"] .chat-teilen-av { background:#475569; color:#e2e8f0; } html[data-vdm-style="dark"] .chat-msg.is-other .chat-mention-tag { background: rgba(59,130,246,.25); color:#93b4ff; } html[data-vdm-style="dark"] .ki-aus-dialog { background:#1e293b; color:#e2e8f0; } html[data-vdm-style="dark"] .ki-aus-frage { background:#0f172a; color:#e2e8f0; border-color:rgba(255,255,255,.15); } /* ---- SCEA-Dashboard-Widgets (global, damit alle SCEA-Kacheln dieselben Listen-Styles nutzen) ---- */ .scea-loading { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--vdm-text-muted,#606873); padding:8px 2px; } .scea-spinner { width:14px; height:14px; border:2px solid color-mix(in srgb, var(--vdm-border-card,#d9dde2) 70%, transparent); border-top-color:var(--vdm-accent-green,#1f9d45); border-radius:50%; display:inline-block; animation:scea-spin .7s linear infinite; } @keyframes scea-spin { to { transform:rotate(360deg); } } .scea-tip { padding:4px 8px; font-size:12.5px; } .scea-tip strong { display:block; } .scea-empty { font-size:13px; color:var(--vdm-text-muted,#606873); } .scea-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; max-height:240px; overflow-y:auto; } .scea-item { display:flex; align-items:center; justify-content:space-between; gap:.6rem; padding:5px 6px; border-bottom:1px solid color-mix(in srgb, var(--vdm-border-card,#d9dde2) 65%, transparent); font-size:13px; color:var(--vdm-text-strong,#30343a); } .scea-item:last-child { border-bottom:0; } .scea-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .scea-sub { display:block; font-size:11px; color:var(--vdm-text-muted,#606873); } .scea-val { flex:none; font-weight:800; color:#b45309; } .scea-val small { color:var(--vdm-text-muted,#606873); font-weight:400; } .scea-stand { font-size:11px; color:var(--vdm-text-muted,#606873); align-self:center; margin-right:auto; } .scea-pager { display:inline-flex; align-items:center; gap:.4rem; } .scea-pageinfo { font-size:12px; color:var(--vdm-text-muted,#606873); min-width:44px; text-align:center; } /* Zeile mit Fortschrittsbalken (Anteil) – Look wie 'Revenue Analysis / % Sold'. */ .scea-item-bar { display:grid; grid-template-columns: minmax(0,1fr) 90px auto; align-items:center; gap:.6rem; } .scea-barwrap { height:8px; border-radius:999px; background:color-mix(in srgb, var(--vdm-border-card,#d9dde2) 55%, transparent); overflow:hidden; } .scea-bar { display:block; height:100%; border-radius:999px; background:var(--vdm-accent-green,#1f9d45); } .scea-bar.is-warn { background:#d97706; } .scea-bar.is-krit { background:#dc2626; } /* Grosse KPI-Zahl fuer einfache Kennzahl-Kacheln (global, da als DashCard-ChildContent gerendert). */ .dc-kpi-value { font-size:1.9rem; font-weight:800; line-height:1.1; color:var(--vdm-text-strong,#30343a); } .dc-kpi-caption { font-size:0.8rem; color:var(--vdm-text-muted,#606873); margin-top:2px; } .dc-kpi-warn { color:#b45309; font-weight:600; } /* Teamwoche-Kachel: Wochentage-Reihe + Mitarbeiterzeilen. */ .tw-days { display:grid; grid-template-columns:repeat(auto-fit,minmax(78px,1fr)); gap:.5rem; } .tw-day { border:1px solid var(--vdm-border-card,#d9dde2); border-radius:8px; padding:6px 8px; background:var(--vdm-surface-card,#fff); min-width:0; } .tw-day-name { font-weight:800; font-size:.85rem; color:var(--vdm-text-strong,#30343a); } .tw-day-date { font-size:.78rem; color:var(--vdm-text-muted,#606873); } .tw-day-sub { font-size:.72rem; color:var(--vdm-text-muted,#606873); margin-top:2px; } .tw-members { list-style:none; margin:.6rem 0 0; padding:0; display:flex; flex-direction:column; gap:5px; } .tw-member { display:flex; align-items:center; gap:.6rem; border:1px solid var(--vdm-border-card,#d9dde2); border-left-width:4px; border-radius:6px; padding:5px 8px; font-size:13px; } .tw-member-name { font-weight:700; min-width:120px; color:var(--vdm-text-strong,#30343a); } .tw-member-stats { color:var(--vdm-text-muted,#606873); } /* Listen-Kacheln sollen die (durch Nachbarkacheln erzwungene) Kartenhoehe fuellen, statt bei fixer max-height zu scrollen und darunter weisse Flaeche zu lassen. .dc .dc-body ... hebt die Spezifitaet ueber die scoped max-height der Widgets. */ .dc .dc-body .psp-list, .dc .dc-body .lpr-list, .dc .dc-body .trz-list, .dc .dc-body .scea-list, .dc .dc-body .ptr-list { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; } /* Betriebskalender als normale Dashboard-Kachel: Terminliste deckeln + scrollbar. */ .moddash .operations-calendar-widget-list { max-height:300px; overflow-y:auto; } /* Kompakter Dashboard-Header: nur die Aktionsleiste rechts, kein Titelblock (mehr Platz fuer Kacheln). */ .dashboard-header--compact { display:flex; justify-content:flex-end; align-items:center; flex-wrap:wrap; gap:.5rem; min-height:0; margin:0 0 .5rem 0; padding:0; border:0; background:transparent; box-shadow:none; } .dashboard-header--compact .dashboard-header-actions { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; } /* Wiederverwendbarer Lade-Indikator (pulsierende Punkte + optionaler Spruch). */ .vdm-loading { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:2.75rem 0; color: var(--vdm-text-muted, #606873); } .vdm-loading-dots { display:flex; gap:9px; } .vdm-loading-msg { font-size:.92rem; text-align:center; max-width:26rem; } .vdm-loading .dot { width:11px; height:11px; border-radius:50%; background: var(--vdm-fx-primary, #2bb3a3); animation: vdm-loading-pulse 1s ease-in-out infinite; } .vdm-loading .dot:nth-child(2) { animation-delay:.15s; } .vdm-loading .dot:nth-child(3) { animation-delay:.3s; } @keyframes vdm-loading-pulse { 0%,100% { transform:scale(.55); opacity:.35; } 50% { transform:scale(1); opacity:1; } } @media (prefers-reduced-motion: reduce) { .vdm-loading .dot { animation:none; opacity:.7; } } /* ---------- Fuhrpark Phase 3: Faelligkeiten-/Historie-Grid ---------- */ .fuhrpark-cell-sub { font-size:.82em; opacity:.7; } .fuhrpark-cell-note { white-space:pre-line; max-width:32rem; } .fuhrpark-row-overdue > td { background: rgba(220, 53, 69, .12); } .fuhrpark-row-urgent > td { background: rgba(255, 165, 0, .14); } .fuhrpark-row-done > td { opacity:.6; } /* ============================================================================ Fuhrpark-Dialoge (DxPopup) – GLOBALE Formular-/Tabellen-Styles. DxPopup rendert seinen Inhalt in ein Portal am DOM-Ende; die scoped .razor.css-Regeln (mit b--Attribut) greifen dort nicht zuverlaessig, weshalb Editor-Labels an den Feldern kleben, Checkboxen/Spaltenkoepfe verrutschen und Abstaende fehlen. Diese Regeln spiegeln die scoped Dialog-Styles als NORMALE globale Selektoren, damit sie unabhaengig von Scope/Portal wirken. Additiv, nur Theme-Tokens (bricht keine Themes). Wirkt ausschliesslich auf .fuhrpark-* Klassen bzw. die Popup-CssClass .fuhrpark-dialog-popup (an den Dialogen gesetzt). ========================================================================== */ /* ---- Popup-Grundlayout: Innenabstand fuer den Dialog-Body ---- */ .fuhrpark-dialog-popup .dxbl-popup-body { padding: 1.1rem 1.2rem 1rem; } /* ---- Editor-Container ---- */ .fuhrpark-editor, .fuhrpark-verantwortliche { display: flex; flex-direction: column; gap: 0.9rem; min-width: 0; } .fuhrpark-editor-hint { margin: 0; color: var(--vdm-text-muted, #606873); font-size: 0.85rem; line-height: 1.4; } /* ---- Formular-Grid (2 Spalten) ---- */ .fuhrpark-editor-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem 1.1rem; } /* ---- Feld = Label (span) ueber Control ---- */ .fuhrpark-editor label, .fuhrpark-editor-grid label, .fuhrpark-editor-full { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; } .fuhrpark-editor label > span, .fuhrpark-editor-grid label > span, .fuhrpark-editor-full > span { color: var(--vdm-text-muted, #606873); font-size: 0.8rem; font-weight: 600; line-height: 1.25; } /* ---- Felder ueber volle Breite (Notiz, Beschreibung, Betreff/Grund ...) ---- */ .fuhrpark-editor-full { grid-column: 1 / -1; } /* ---- Checkbox-Zeile: Box + Text nebeneinander ausgerichtet. Hoehere Spezifitaet (0,2,x) als die Basis-Label-Regel (0,1,1), damit flex-row nicht von flex-column ueberschrieben wird. ---- */ .fuhrpark-editor .fuhrpark-editor-check, .fuhrpark-editor-grid .fuhrpark-editor-check, .fuhrpark-verantwortliche .fuhrpark-editor-check { display: flex; flex-direction: row; align-items: center; gap: 0.5rem; min-width: 0; } .fuhrpark-editor .fuhrpark-editor-check > span, .fuhrpark-editor-grid .fuhrpark-editor-check > span, .fuhrpark-verantwortliche .fuhrpark-editor-check > span { color: var(--vdm-text-strong, #30343a); font-size: 0.82rem; font-weight: 600; } /* ---- Statischer Info-Wert (z. B. "Aktueller Status: In Ordnung") ---- */ .fuhrpark-editor-static { padding: 0.4rem 0.55rem; border: 1px solid var(--vdm-border-card, #eceef2); border-radius: 0.42rem; background: var(--vdm-surface-card-muted, #f8fafc); color: var(--vdm-text-strong, #1f2937); font-size: 0.85rem; } /* ---- Abschnitte im Editor (Stammdaten / Technik / Fristen ...) ---- */ .fuhrpark-editor-sec { display: flex; flex-direction: column; gap: 0.7rem; padding: 0.8rem; border: 1px solid var(--vdm-border-card, #eceef2); border-radius: 0.62rem; background: var(--vdm-surface-card-muted, #f8fafc); } .fuhrpark-editor-title { color: var(--vdm-text-strong, #0f172a); font-size: 0.9rem; font-weight: 800; } /* ---- Textarea / Memo: volle Breite, mindest-Hoehe, vertikal groessenbar ---- */ .fuhrpark-editor textarea, .fuhrpark-verantwortliche textarea { min-height: 90px; resize: vertical; } /* ---- DevExpress-Controls in den Feldern auf volle Breite ---- */ .fuhrpark-editor .dxbl-text-edit, .fuhrpark-editor .dxbl-spin-edit, .fuhrpark-editor .dxbl-combobox, .fuhrpark-editor .dxbl-date-edit, .fuhrpark-editor .dxbl-memo, .fuhrpark-editor label > input[type="file"], .fuhrpark-verantwortliche .dxbl-text-edit, .fuhrpark-verantwortliche .dxbl-spin-edit, .fuhrpark-verantwortliche .dxbl-combobox, .fuhrpark-verantwortliche .dxbl-date-edit, .fuhrpark-verantwortliche .dxbl-memo { width: 100%; } /* ---- Aktionsleiste (Abbrechen links, Speichern rechts) ---- */ .fuhrpark-editor-actions { display: flex; justify-content: flex-end; align-items: center; gap: 0.5rem; grid-column: 1 / -1; margin-top: 0.4rem; padding-top: 0.8rem; border-top: 1px solid var(--vdm-border-card, #eceef2); } .fuhrpark-editor-actions .vdm-btn-primary.dxbl-btn { background-color: var(--vdm-accent-green, #1f9d45); border-color: var(--vdm-accent-green, #1f9d45); color: #fff; } /* ---- Verantwortlichen-/Tabelle im Popup: saubere Spaltenabstaende ---- */ .fuhrpark-dialog-popup .fuhrpark-vtable { width: 100%; border-collapse: collapse; font-size: 0.85rem; } .fuhrpark-dialog-popup .fuhrpark-vtable thead th { padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--vdm-border-card, #d9dde2); color: var(--vdm-text-muted, #64748b); font-size: 0.73rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; text-align: left; white-space: nowrap; background: var(--vdm-surface-card-muted, #f8fafc); } .fuhrpark-dialog-popup .fuhrpark-vtable tbody td { padding: 0.55rem 0.7rem; border-bottom: 1px solid rgba(148, 163, 184, 0.22); color: var(--vdm-text-strong, #1f2937); vertical-align: top; } .fuhrpark-dialog-popup .fuhrpark-vtable-actions { display: flex; flex-wrap: wrap; gap: 0.15rem; justify-content: flex-end; white-space: nowrap; } /* ---- Soft-Pill (z. B. "Hauptverantwortlich") in der Popup-Tabelle ---- */ .fuhrpark-dialog-popup .detail-soft-pill { display: inline-flex; align-items: center; min-height: 1.55rem; margin-left: 0.4rem; padding: 0.14rem 0.55rem; border-radius: 999px; color: #334155; background: var(--vdm-surface-card-muted, #f1f5f9); border: 1px solid rgba(148, 163, 184, 0.4); font-size: 0.76rem; font-weight: 700; } /* ---- Responsiv: schmale Dialoge einspaltig ---- */ @media (max-width: 560px) { .fuhrpark-editor-grid { grid-template-columns: 1fr; } } /* ========================================================================== Phase 7.2 – Mobile Fahrer-Selfservice-Dialoge ("Mein Fahrzeug": Tanken / Kilometerstand). Globale Selektoren (DxPopup wird per Portal ausserhalb des Komponenten-Scopes gerendert). Einspaltig, grosse Touch-Felder. Nur Theme-Tokens, additiv (bricht keine Themes). ========================================================================== */ .mf-dialog-popup .dxbl-popup-body { padding: 1.1rem 1.2rem 1rem; } /* Formular: strikt einspaltig, grosszuegige Abstaende fuer die Bedienung mit dem Daumen. */ .mf-form { display: flex; flex-direction: column; gap: 0.95rem; min-width: 0; } .mf-field { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; } .mf-field > span { color: var(--vdm-text-muted, #606873); font-size: 0.85rem; font-weight: 600; line-height: 1.25; } /* Controls auf volle Breite + hohe Touch-Ziele (>= 44px). */ .mf-form .dxbl-text-edit, .mf-form .dxbl-spin-edit, .mf-form .dxbl-date-edit, .mf-form .mf-file { width: 100%; } .mf-form .dxbl-text-edit, .mf-form .dxbl-spin-edit, .mf-form .dxbl-date-edit { min-height: 2.75rem; } .mf-form .mf-file { padding: 0.6rem 0; font-size: 0.95rem; } .mf-file-info { margin-top: 0.35rem; color: var(--vdm-text-muted, #606873); font-size: 0.8rem; } /* Aktionsleiste = Sheet-Footer: grosse Buttons, Speichern rechts, unten fixiert. */ .mf-form-actions { flex: 0 0 auto; display: flex; justify-content: flex-end; align-items: center; gap: 0.6rem; padding: 0.85rem 1.2rem; padding-bottom: max(0.85rem, env(safe-area-inset-bottom)); border-top: 1px solid var(--vdm-border-card, #eceef2); background: var(--vdm-surface-card, #fff); } .mf-form-actions .dxbl-btn { min-height: 2.75rem; padding-inline: 1.1rem; font-weight: 700; } .mf-form-actions .vdm-btn-primary.dxbl-btn { background-color: var(--vdm-accent-green, #1f9d45); border-color: var(--vdm-accent-green, #1f9d45); color: #fff; } /* ========================================================================== Eigenes Fahrer-Sheet (ersetzt DxPopup fuer die mobilen Dialoge). Voll unter eigener Kontrolle: zentriert auf Desktop, vollflaechig (Fullscreen) auf dem Handy, ueber dem Chat-Button (z-index > 1200). Selektoren global. ========================================================================== */ .mf-sheet-overlay { position: fixed; inset: 0; z-index: 2000; /* ueber Chat-FAB (1200) */ display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(15, 23, 32, 0.5); overscroll-behavior: contain; } .mf-sheet { display: flex; flex-direction: column; width: 100%; max-width: 560px; max-height: 90vh; background: var(--vdm-surface-card, #fff); color: var(--vdm-text, #1b2430); border-radius: 14px; box-shadow: 0 18px 48px rgba(15, 23, 32, 0.28); overflow: hidden; } .mf-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 1rem 1.2rem; border-bottom: 1px solid var(--vdm-border-card, #eceef2); } .mf-sheet-head h2 { margin: 0; font-size: 1.15rem; font-weight: 700; line-height: 1.2; } .mf-sheet-close { flex: 0 0 auto; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border: none; background: transparent; color: var(--vdm-text-muted, #606873); font-size: 1.6rem; line-height: 1; cursor: pointer; border-radius: 8px; } .mf-sheet-close:hover { background: var(--vdm-surface-muted, #f1f3f6); } .mf-sheet-close:disabled { opacity: 0.5; cursor: default; } .mf-sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 1.1rem 1.2rem; } /* Handy: Sheet vollflaechig, keine Raender/Rundungen. */ @media (max-width: 640px) { .mf-sheet-overlay { padding: 0; } .mf-sheet { max-width: 100vw; width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; } }