@import '_content/Blazor.SignaturePad/Blazor.SignaturePad.g22u5lm4z9.bundle.scp.css'; @import '_content/FJ.Shared/FJ.Shared.2frlewq1eu.bundle.scp.css'; @import '_content/LeafletForBlazor/LeafletForBlazor.2tlzv4i6ec.bundle.scp.css'; /* /Components/Base/AddressMap.razor.rz.scp.css */ /* Feste Höhe, volle Breite. isolation: Leaflet gibt seinen Ebenen z-index bis 1000 - ohne eigenen Stapelkontext lägen sie über Auswahllisten und Tooltips von MudBlazor. */ .address-map-frame[b-x2lbtknbmc] { position: relative; isolation: isolate; overflow: hidden; width: 100%; border-radius: var(--mud-default-borderradius); border: 1px solid var(--mud-palette-lines-default); } /* RealTimeMap zeichnet ein eigenes -Element um seine Karte; es soll weder Rand noch Hintergrund mitbringen. */ .address-map-frame[b-x2lbtknbmc] body { margin: 0; background: transparent; } /* /Components/Base/ArticleImageGallery.razor.rz.scp.css */ /* display: contents - die ScrollListSection bleibt das Flex-Element des Reiters, der Rahmen trägt nur das Scope-Attribut für ::deep. */ .article-gallery[b-zrz5o81l2w] { display: contents; } /* Kacheln so breit, wie der Platz hergibt - wie die Fotogalerie des Projekts. */ [b-zrz5o81l2w] .article-gallery__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } [b-zrz5o81l2w] .article-gallery__tile { display: flex; flex-direction: column; overflow: hidden; border-radius: 12px; } .article-gallery__image[b-zrz5o81l2w], .article-gallery__main-image[b-zrz5o81l2w] { display: flex; align-items: center; justify-content: center; width: 100%; padding: 0; border: 0; background: var(--mud-palette-background-gray); cursor: zoom-in; } .article-gallery__image[b-zrz5o81l2w] { aspect-ratio: 1 / 1; } .article-gallery__main-image[b-zrz5o81l2w] { height: 280px; } .article-gallery__image img[b-zrz5o81l2w], .article-gallery__main-image img[b-zrz5o81l2w] { width: 100%; height: 100%; object-fit: contain; display: block; } [b-zrz5o81l2w] .article-gallery__main { overflow: hidden; border-radius: 12px; } [b-zrz5o81l2w] .article-gallery__caption { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } [b-zrz5o81l2w] .article-gallery__zone { border-style: dashed; cursor: pointer; } /* /Components/Base/ChangeHistory.razor.rz.scp.css */ .history[b-2wbqmk9ehn] { max-width: 880px; } .history[b-2wbqmk9ehn] .history__timeline { padding-top: 0; } .history__card[b-2wbqmk9ehn] { border: 1px solid var(--mud-palette-lines-default); border-radius: 12px; padding: 12px 14px; background: var(--mud-palette-surface); } .history__head[b-2wbqmk9ehn] { display: flex; align-items: center; gap: 10px; } .history__who[b-2wbqmk9ehn] { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; min-width: 0; flex: 1 1 auto; } .history__name[b-2wbqmk9ehn] { font-weight: 600; font-size: 0.9rem; } .history__action[b-2wbqmk9ehn] { font-size: 0.85rem; color: var(--mud-palette-text-secondary); } .history__time[b-2wbqmk9ehn] { flex: none; font-size: 0.78rem; color: var(--mud-palette-text-secondary); white-space: nowrap; } /* Feld links, Werte rechts - als Raster, damit die Pfeile untereinander stehen. */ .history__fields[b-2wbqmk9ehn] { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; column-gap: 16px; row-gap: 4px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--mud-palette-lines-default); font-size: 0.85rem; } .history__label[b-2wbqmk9ehn] { color: var(--mud-palette-text-secondary); } .history__values[b-2wbqmk9ehn] { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; white-space: pre-line; overflow-wrap: anywhere; } .history__old[b-2wbqmk9ehn] { color: var(--mud-palette-text-secondary); text-decoration: line-through; } .history__new[b-2wbqmk9ehn] { font-weight: 500; } @media (max-width: 599px) { .history__fields[b-2wbqmk9ehn] { grid-template-columns: 1fr; } .history__label[b-2wbqmk9ehn] { margin-top: 6px; } } /* /Components/Base/ColorSwatchPicker.razor.rz.scp.css */ /* Das Symbol vor dem Feld zeigt die gewählte (oder aus dem Namen folgende) Farbe - AdornmentColor kennt nur die Themenfarben. */ .color-swatch[b-llksi08ysi] .mud-input-adornment-start .mud-icon-root { color: var(--swatch); } /* /Components/Base/ConstructionDiarySectionView.razor.rz.scp.css */ /* Zeilen eines Abschnitts: Zeit links, Text in der Mitte, Stunden und Stand rechts - auf dem Telefon rutschen die Werte unter den Text. */ .diary-section__row[b-lmwub1o8z4] { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 6px 0; border-bottom: 1px solid var(--mud-palette-lines-default); } .diary-section__row--muted[b-lmwub1o8z4] { opacity: 0.65; } .diary-section__row[b-lmwub1o8z4] .diary-section__time { min-width: 7.5em; font-variant-numeric: tabular-nums; } .diary-section__text[b-lmwub1o8z4] { flex: 1 1 12em; min-width: 0; } .diary-section__row[b-lmwub1o8z4] .diary-section__values { margin-left: auto; } /* Fotos als Kacheln - große Tippflächen wie in der Fortschrittsmeldung. */ .diary-section__photos[b-lmwub1o8z4] { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; } .diary-section__photo[b-lmwub1o8z4] { position: relative; aspect-ratio: 1; padding: 0; border: none; border-radius: 10px; overflow: hidden; background: var(--mud-palette-background-gray); cursor: pointer; } .diary-section__photo img[b-lmwub1o8z4] { width: 100%; height: 100%; object-fit: cover; display: block; } .diary-section__photo-caption[b-lmwub1o8z4] { position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 6px; font-size: 0.75rem; color: #fff; background: rgba(0, 0, 0, 0.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; } /* /Components/Base/CountrySelect.razor.rz.scp.css */ /* Weiße Flaggenteile (Österreich, Polen) verschwänden sonst auf hellem Grund. */ [b-u1ts41tp0m] .country-flag { border-radius: 2px; box-shadow: 0 0 0 1px var(--mud-palette-lines-default); flex-shrink: 0; } /* /Components/Base/CustomFieldValueView.razor.rz.scp.css */ /* Mehrzeiliger Text in einer Tabellenzelle: höchstens zwei Zeilen, der ganze Text steht im Tooltip (title). */ [b-lnm9jxgmch].custom-field-value { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; max-width: 320px; } /* /Components/Base/FormFieldEditor.razor.rz.scp.css */ /* Überschriften heben sich im Editor ab - so ist der Aufbau des Formulars beim Sortieren zu sehen. */ .form-field-editor-host[b-7z76vbfr28] .form-field-editor--heading { border-left: 4px solid var(--mud-palette-primary); background: var(--mud-palette-background-gray); } /* /Components/Base/FormRecordEditor.razor.rz.scp.css */ /* Eine Spalte, auf dem Rechner nicht breiter als ein Telefon im Querformat - ausgefüllt wird auf der Baustelle. */ .form-record[b-gaiykvq3xt] { max-width: 720px; margin: 0 auto; } .form-record[b-gaiykvq3xt] .form-record__title { overflow-wrap: anywhere; } .form-record[b-gaiykvq3xt] .form-record__heading { font-weight: 600; border-bottom: 2px solid var(--mud-palette-primary); padding-bottom: 2px; } .form-record[b-gaiykvq3xt] .form-record__field { border-radius: 12px; } .form-record[b-gaiykvq3xt] .form-record__field--missing { border-color: var(--mud-palette-warning); border-width: 2px; } .form-record[b-gaiykvq3xt] .form-record__label { font-weight: 500; } .form-record__required[b-gaiykvq3xt] { color: var(--mud-palette-error); margin-left: 2px; } .form-record[b-gaiykvq3xt] .form-record__answer { white-space: pre-wrap; } .form-record__missing[b-gaiykvq3xt] { margin: 4px 0 0 18px; } /* Große Tippflächen: mit Handschuhen und in der Sonne zu treffen. */ .form-record[b-gaiykvq3xt] .form-record__button { min-height: 52px; border-radius: 12px; } .form-record[b-gaiykvq3xt] .form-record__toggle .mud-toggle-item { min-height: 48px; min-width: 96px; } .form-record[b-gaiykvq3xt] .form-record__upload { display: block; width: 100%; margin-top: 8px; } .form-record__photos[b-gaiykvq3xt] { display: flex; flex-wrap: wrap; gap: 8px; } .form-record__photo[b-gaiykvq3xt] { position: relative; } .form-record[b-gaiykvq3xt] .form-record__photo-remove { position: absolute; top: -6px; right: -6px; background: var(--mud-palette-surface); } .form-record__thumb[b-gaiykvq3xt] { width: 96px; height: 96px; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: var(--mud-palette-background-gray); cursor: zoom-in; } .form-record__thumb img[b-gaiykvq3xt] { width: 100%; height: 100%; object-fit: cover; display: block; } .form-record__signature-image[b-gaiykvq3xt] { display: block; max-width: 100%; max-height: 9rem; background: #fff; border-radius: 8px; margin-bottom: 4px; } /* Das Unterschriftenfeld gehört der Bibliothek (Blazor.SignaturePad) und kommt mit 300x150 Pixeln - auf dem Telefon unterschreibt der Kunde mit dem Finger über die ganze Breite. Über CSS zu skalieren ist unbedenklich: Das Skript setzt die Zeichenfläche vor jedem Strich auf clientWidth/clientHeight (siehe MaintenanceRunDialog der Immobilienverwaltung). Weißer Grund, weil das PNG sonst im dunklen Thema unsichtbar schwarz auf schwarz wäre. */ .form-record__pad[b-gaiykvq3xt] .signature { width: 100%; height: 12rem; background: #fff; touch-action: none; } .form-record__actions[b-gaiykvq3xt] { position: sticky; bottom: 0; padding: 12px 0 8px; margin-top: 12px; background: var(--mud-palette-background); z-index: 2; } /* /Components/Base/FormTemplateChoices.razor.rz.scp.css */ /* Große Tippflächen, Text linksbündig - auf dem Telefon die Auswahl eines Formulars. */ .form-template-choices[b-fw1blmbdgm] .form-template-choice { min-height: 60px; border-radius: 12px; justify-content: flex-start; } /* /Components/Base/GlobalSearchBox.razor.rz.scp.css */ .global-search[b-taojdqn7w5] { width: 100%; max-width: 560px; } .global-search[b-taojdqn7w5] .mud-input-control { margin: 0; } .global-search__title[b-taojdqn7w5] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .global-search__group[b-taojdqn7w5] { display: block; margin: 4px 0 2px; line-height: 1.4; } .global-search__excerpt[b-taojdqn7w5] { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; } /* /Components/Base/MailViewer.razor.rz.scp.css */ /* Füllt den Dialog: Kopf und Anhänge behalten ihre Höhe, der Text bekommt den Rest und scrollt selbst. */ .mail-viewer[b-1ahmz656w5] { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 12px; } .mail-viewer__head[b-1ahmz656w5] { flex: none; padding: 4px 8px 0; } .mail-viewer[b-1ahmz656w5] .mail-viewer__subject { overflow-wrap: anywhere; } .mail-viewer__people[b-1ahmz656w5] { flex: 1 1 auto; min-width: 0; } /* Absender links, Datum rechts auf derselben Grundlinie; wird es eng, rutscht das Datum darunter. */ .mail-viewer__line[b-1ahmz656w5] { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 16px; } .mail-viewer__sender[b-1ahmz656w5] { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; } .mail-viewer[b-1ahmz656w5] .mail-viewer__name { font-weight: 600; } .mail-viewer[b-1ahmz656w5] .mail-viewer__address, .mail-viewer[b-1ahmz656w5] .mail-viewer__recipient-list { overflow-wrap: anywhere; } .mail-viewer[b-1ahmz656w5] .mail-viewer__date { flex: none; white-space: nowrap; } .mail-viewer__recipients[b-1ahmz656w5] { display: flex; align-items: baseline; gap: 8px; } .mail-viewer[b-1ahmz656w5] .mail-viewer__label { flex: none; min-width: 72px; } .mail-viewer[b-1ahmz656w5] .mail-viewer__recipient-list { flex: 1 1 auto; min-width: 0; } /* Viele Anhänge scrollen in ihrem Bereich - der Text bleibt sichtbar. */ .mail-viewer__attachments[b-1ahmz656w5] { flex: none; max-height: 30vh; overflow-y: auto; padding: 8px; border-top: 1px solid var(--mud-palette-lines-default); } .mail-viewer__attachment-list[b-1ahmz656w5] { display: flex; flex-wrap: wrap; gap: 8px; } .mail-viewer[b-1ahmz656w5] .mail-viewer__attachment { display: flex; align-items: center; max-width: 320px; min-width: 0; padding-right: 4px; } .mail-viewer[b-1ahmz656w5] .mail-viewer__attachment-open { flex: 1 1 auto; min-width: 0; justify-content: flex-start; text-transform: none; text-align: left; } .mail-viewer[b-1ahmz656w5] .mail-viewer__attachment-open .mud-button-label { min-width: 0; } .mail-viewer__attachment-text[b-1ahmz656w5] { display: flex; flex-direction: column; min-width: 0; } .mail-viewer[b-1ahmz656w5] .mail-viewer__attachment-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mail-viewer[b-1ahmz656w5] .mail-viewer__alert { flex: none; } /* Die Mail zeigt sich wie im Mailprogramm auf Weiß - ihr HTML rechnet damit, auch im dunklen Design. */ .mail-viewer__frame[b-1ahmz656w5] { flex: 1 1 auto; min-height: 240px; width: 100%; border: 1px solid var(--mud-palette-lines-default); border-radius: var(--mud-default-borderradius); background: #fff; } .mail-viewer__text[b-1ahmz656w5] { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.95rem; line-height: 1.5; } /* /Components/Base/MeasurementRowEditor.razor.rz.scp.css */ /* Ein Abzug steht erkennbar anders da - ein farbiger Rand links statt einer zweiten Farbe für die ganze Zeile. Die Mud-Bausteine tragen das Attribut der CSS-Isolation nicht, deshalb über den eigenen Rahmen und ::deep. */ .measurement-row-host[b-u11ntrt8aq] .measurement-row--deduction { border-left: 3px solid var(--mud-palette-warning); } .measurement-row-host[b-u11ntrt8aq] .measurement-row__result { white-space: nowrap; font-variant-numeric: tabular-nums; } .measurement-row-host[b-u11ntrt8aq] .measurement-row__formula input { font-variant-numeric: tabular-nums; } /* /Components/Base/ProjectCalendar.razor.rz.scp.css */ /* Das Monatsblatt: links die Kalenderwochen, daneben Heron.MudCalendar. Dessen Markup ist nicht unseres - darum ::deep. */ .project-calendar__month[b-u4bat0fdnt] { display: flex; } /* Kopf und Zeilen wie im Paket: Kopfzeile 1.5rem, darunter gleich hohe Wochen; 1px oben und unten für dessen Rahmen. */ .project-calendar__weeks[b-u4bat0fdnt] { display: flex; flex-direction: column; flex: 0 0 2.25rem; padding: 1px 0; font-size: 0.7rem; color: var(--mud-palette-text-secondary); background-color: var(--mud-palette-background-gray); border: 1px solid var(--mud-palette-lines-default); border-right: none; } .project-calendar__weeks-head[b-u4bat0fdnt] { height: 1.5rem; line-height: 1.5rem; text-align: center; font-weight: 600; } .project-calendar__week[b-u4bat0fdnt] { flex: 1 1 0; padding-top: 6px; text-align: center; border-top: 1px solid var(--mud-palette-table-lines); } .project-calendar__month[b-u4bat0fdnt] .mud-cal-month-grid-header { height: 1.5rem; font-size: 0.75rem; font-weight: 600; color: var(--mud-palette-text-secondary); } /* Die ganze Zelle wählt den Tag, nicht nur ihre Nummer. */ .project-calendar__month[b-u4bat0fdnt] .mud-cal-month-cell-link { display: block; height: 100%; } .project-calendar__month[b-u4bat0fdnt] .mud-cal-month-cell-title { padding: 4px 6px; font-size: 0.75rem; } .project-calendar__month[b-u4bat0fdnt] .project-calendar__today .mud-cal-month-cell-title { width: fit-content; margin: 2px; padding: 2px 7px; border-radius: 12px; color: var(--mud-palette-primary-text); background-color: var(--mud-palette-primary); } .project-calendar__month[b-u4bat0fdnt] .project-calendar__selected { box-shadow: inset 0 0 0 2px var(--mud-palette-primary); } /* „+N Mehr" gehört in seine Spalte - das Paket zieht es über die ganze Zeile, ein Klick daneben träfe den falschen Tag. */ .project-calendar__month[b-u4bat0fdnt] .mud-cal-overflow-message { width: calc(100% / 7); padding-left: 6px; font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--mud-palette-text-secondary); } /* Ein Eintrag: Symbol in der Farbe der Art und der Satz in einer Zeile, abgeschnitten - ganz im Tooltip und in der Tagesansicht. */ .project-calendar__item[b-u4bat0fdnt] { display: flex; align-items: center; gap: 2px; min-width: 0; padding: 1px 4px; border-radius: var(--mud-default-borderradius); font-size: 0.75rem; line-height: 1.25rem; } .project-calendar__item:hover[b-u4bat0fdnt] { background-color: var(--mud-palette-action-default-hover); } .project-calendar__item--outside[b-u4bat0fdnt] { opacity: 0.45; } .project-calendar__item-text[b-u4bat0fdnt] { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* Schmal: nur das Symbol, mittig in der Spalte. */ @media (max-width: 599.98px) { .project-calendar__item[b-u4bat0fdnt] { justify-content: center; padding: 1px 0; } } .project-calendar__list-day[b-u4bat0fdnt] { padding: 6px 4px; } .project-calendar__list-day + .project-calendar__list-day[b-u4bat0fdnt] { border-top: 1px solid var(--mud-palette-lines-default); } /* /Components/Base/ProjectCalendarEntry.razor.rz.scp.css */ .calendar-entry__row[b-en4p5jyj5f] { padding: 6px 8px; border-radius: var(--mud-default-borderradius); } .calendar-entry__row--clickable[b-en4p5jyj5f] { cursor: pointer; } .calendar-entry__row--clickable:hover[b-en4p5jyj5f] { background-color: var(--mud-palette-action-default-hover); } /* Die Zeilen einer Zusammenfassung stehen eingerückt unter dem Text des Eintrags. */ .calendar-entry__line[b-en4p5jyj5f] { margin-left: 28px; padding-top: 2px; padding-bottom: 2px; } /* Die Texte sind MudText - ohne ::deep erreicht sie das isolierte CSS nicht. */ .calendar-entry[b-en4p5jyj5f] .calendar-entry__text { min-width: 0; overflow-wrap: anywhere; } .calendar-entry[b-en4p5jyj5f] .calendar-entry__figure { white-space: nowrap; } .calendar-entry__row:not(.calendar-entry__line)[b-en4p5jyj5f] .calendar-entry__detail { display: block; padding-left: 28px; } /* /Components/Base/ProjectChat.razor.rz.scp.css */ /* Die Kette „nur die Liste scrollt": Das Gespräch füllt seine Umgebung (Reiter-Panel oder Seite mit fester Höhe), die ScrollListSection bekommt den Rest, die Eingabe unten behält ihre Höhe. */ .project-chat[b-dre1afybpa] { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } .project-chat__list[b-dre1afybpa] { display: flex; flex-direction: column; gap: 4px; padding: 4px 4px 8px; } .project-chat__divider[b-dre1afybpa] { display: flex; justify-content: center; margin: 8px 0 4px; } .project-chat__row[b-dre1afybpa] { display: flex; justify-content: flex-start; } .project-chat__row--own[b-dre1afybpa] { justify-content: flex-end; } .project-chat[b-dre1afybpa] .project-chat__bubble { max-width: min(80%, 560px); padding: 6px 10px 4px; border-radius: 14px 14px 14px 4px; background: var(--mud-palette-background-gray); color: var(--mud-palette-text-primary); } .project-chat[b-dre1afybpa] .project-chat__bubble--own { border-radius: 14px 14px 4px 14px; background: color-mix(in srgb, var(--mud-palette-primary) 16%, var(--mud-palette-surface)); } .project-chat[b-dre1afybpa] .project-chat__bubble--deleted { background: transparent; border: 1px dashed var(--mud-palette-lines-default); } .project-chat[b-dre1afybpa] .project-chat__author { display: block; font-weight: 600; color: var(--mud-palette-primary); } /* Klartext mit Zeilenumbrüchen; lange Adressen brechen statt die Blase zu sprengen. */ .project-chat__text[b-dre1afybpa] { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.95rem; line-height: 1.4; } .project-chat[b-dre1afybpa] .project-chat__deleted { font-style: italic; color: var(--mud-palette-text-secondary); } .project-chat__meta[b-dre1afybpa] { display: flex; align-items: center; justify-content: flex-end; gap: 4px; min-height: 20px; font-size: 0.72rem; color: var(--mud-palette-text-secondary); } .project-chat[b-dre1afybpa] .project-chat__menu .mud-icon-button { padding: 2px; } .project-chat__photo[b-dre1afybpa] { display: block; padding: 0; margin: 2px 0 4px; border: 0; border-radius: 10px; overflow: hidden; background: var(--mud-palette-background-gray); cursor: zoom-in; } .project-chat__photo img[b-dre1afybpa] { display: block; max-width: 240px; max-height: 240px; width: 100%; object-fit: cover; } .project-chat__composer[b-dre1afybpa] { flex: none; padding-top: 8px; border-top: 1px solid var(--mud-palette-lines-default); } .project-chat__input-row[b-dre1afybpa] { display: flex; align-items: flex-end; gap: 6px; } .project-chat[b-dre1afybpa] .project-chat__input { flex: 1 1 auto; min-width: 0; margin-top: 0; } .project-chat[b-dre1afybpa] .project-chat__upload { flex: none; width: auto; margin: 0; } /* Telefon: größere Schrift in der Eingabe (iOS zoomt unter 16 px ungefragt hinein) und Blasen fast über die Breite. */ .project-chat--mobile[b-dre1afybpa] .project-chat__input textarea { font-size: 1rem; } .project-chat--mobile[b-dre1afybpa] .project-chat__bubble { max-width: 88%; } .project-chat__composer--mobile[b-dre1afybpa] { padding-bottom: env(safe-area-inset-bottom); } /* /Components/Base/ProjectCosts.razor.rz.scp.css */ .project-costs__description[b-c9k121hbv1] { max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* /Components/Base/ProjectFileInfoPanel.razor.rz.scp.css */ .project-file-info__facts[b-ayvxca4i0o] { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 16px; row-gap: 8px; align-items: center; margin: 0; } .project-file-info__facts dt[b-ayvxca4i0o] { color: var(--mud-palette-text-secondary); font-size: 0.8125rem; } .project-file-info__facts dd[b-ayvxca4i0o] { margin: 0; font-size: 0.875rem; overflow-wrap: anywhere; } /* /Components/Base/ProjectFiles.razor.rz.scp.css */ /* Wie die Ablagefläche im DATANORM-Dialog: position: relative an der WURZEL von MudFileUpload, damit das versteckte Datei-Feld genau über der Fläche liegt und der Drop ankommt. Hier flacher, weil sie über einer Liste stehen bleibt. */ .project-files-drop-host[b-vqgis5489o] .project-files-drop { position: relative; display: block; width: 100%; } .project-files-drop-host[b-vqgis5489o] .project-files-drop__area { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px; border: 2px dashed var(--mud-palette-lines-inputs); border-radius: 12px; background: var(--mud-palette-background-gray); transition: border-color 120ms ease, background-color 120ms ease; } .project-files-drop-host[b-vqgis5489o] .project-files-drop__area--dragging { border-color: var(--mud-palette-primary); background: color-mix(in srgb, var(--mud-palette-primary) 8%, var(--mud-palette-surface)); } /* /Components/Base/ProjectPhotoGallery.razor.rz.scp.css */ /* Kacheln so breit, wie der Platz hergibt: auf dem Telefon zwei nebeneinander, im Dialog am Rechner fünf oder sechs. */ .photo-gallery__grid[b-hhivznvtuz] { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; } [b-hhivznvtuz] .photo-gallery__tile { display: flex; flex-direction: column; overflow: hidden; border-radius: 12px; } .photo-gallery__image[b-hhivznvtuz] { display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; border: 0; background: var(--mud-palette-background-gray); cursor: zoom-in; } .photo-gallery__image img[b-hhivznvtuz] { width: 100%; height: 100%; object-fit: cover; display: block; } .photo-gallery__meta[b-hhivznvtuz] { padding: 6px 8px 4px; } [b-hhivznvtuz] .photo-gallery__comment { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; } [b-hhivznvtuz] .photo-gallery__by { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* /Components/Base/ProjectProgressTimeline.razor.rz.scp.css */ /* Der Anker: MudTimeline und MudPaper tragen das Scope-Attribut nicht selbst. */ .progress-timeline-host[b-2yc0sfwshb] { max-width: 880px; } .progress-timeline-host[b-2yc0sfwshb] .progress-timeline { padding-top: 0; } .progress-timeline-host[b-2yc0sfwshb] .progress-timeline__card { border-radius: 12px; } .progress-timeline__note[b-2yc0sfwshb] { word-break: break-word; } .progress-timeline__photos[b-2yc0sfwshb] { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 6px; margin-top: 8px; } .progress-timeline__photo[b-2yc0sfwshb] { aspect-ratio: 1; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: var(--mud-palette-background-gray); cursor: zoom-in; } .progress-timeline__photo img[b-2yc0sfwshb] { width: 100%; height: 100%; object-fit: cover; display: block; } /* /Components/Base/ProjectTaskPlanView.razor.rz.scp.css */ /* Der Plan füllt die Breite; die Markierungen liegen darauf, ihre Spitze auf der Stelle. */ .plan-view__surface[b-l8z97dwpdk] { position: relative; width: 100%; border-radius: 8px; overflow: hidden; background: var(--mud-palette-background-gray); user-select: none; touch-action: manipulation; } .plan-view__surface img[b-l8z97dwpdk] { display: block; width: 100%; height: auto; } .plan-view__surface--picking[b-l8z97dwpdk] { cursor: crosshair; } .plan-view__pin[b-l8z97dwpdk] { position: absolute; transform: translate(-50%, -100%); padding: 0; border: 0; background: transparent; line-height: 0; cursor: pointer; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45)); } .plan-view__pin--closed[b-l8z97dwpdk] { opacity: 0.7; } /* Beim Setzen stören die anderen Markierungen nicht: blass und nicht antippbar - der Tipp geht auf den Plan. */ .plan-view__pin--passive[b-l8z97dwpdk] { opacity: 0.45; pointer-events: none; } .plan-view__pin--active[b-l8z97dwpdk] { pointer-events: none; z-index: 1; } /* /Components/Base/ProjectTaskTable.razor.rz.scp.css */ /* Die Frist färbt die Zeile ein wenig - so fällt Überfälliges auch in einer langen Liste auf, ohne dass man die Spalte liest. */ [b-aeze9asb1j] .task-row--overdue { background-color: rgba(var(--mud-palette-error-rgb), 0.07); } [b-aeze9asb1j] .task-row--due-soon { background-color: rgba(var(--mud-palette-warning-rgb), 0.08); } [b-aeze9asb1j] .task-row--closed { opacity: 0.75; } /* /Components/Base/SalesDocumentGroupEditor.razor.rz.scp.css */ /* Die Zeilen einer Gruppe eingerückt, mit einer Führungslinie links - so sieht man auch bei langen Gruppen, wohin eine Zeile gehört. */ .sales-group-children[b-jbv4runw55] { margin: 0 8px 8px 22px; padding-left: 12px; border-left: 2px solid var(--mud-palette-lines-default); } /* /Components/Base/SidePanel.razor.rz.scp.css */ /* Überlappt den Dialoginhalt (.mud-dialog-content ist position: relative) statt ihn zu verdrängen - wie ein MudDrawer mit Variante Temporary, nur ohne Abdunkeln: Man soll daneben noch sehen, woran man gerade ist. Der Rahmen deckt den Inhalt ab, lässt Klicks aber durch und schneidet das weggeschobene Panel ab (sonst horizontaler Scrollbalken). */ .side-panel-host[b-uedw5x5per] { position: absolute; inset: 0; z-index: 10; overflow: hidden; pointer-events: none; } /* Auf einer Seite (Firma): am Fenster statt am Dialoginhalt, unter der App-Leiste und über dem Seiteninhalt. */ .side-panel-host--page[b-uedw5x5per] { position: fixed; top: var(--mud-appbar-height); z-index: calc(var(--mud-zindex-appbar) - 1); } .side-panel[b-uedw5x5per] { position: absolute; top: 0; right: 0; bottom: 0; max-width: 100%; display: flex; flex-direction: column; pointer-events: auto; background: var(--mud-palette-surface); border-left: 1px solid var(--mud-palette-lines-default); box-shadow: var(--mud-elevation-8); transform: translateX(100%); visibility: hidden; transition: transform 225ms cubic-bezier(0, 0, 0.2, 1), visibility 0s linear 225ms; } .side-panel--open[b-uedw5x5per] { transform: none; visibility: visible; transition: transform 225ms cubic-bezier(0, 0, 0.2, 1); } .side-panel--resizing[b-uedw5x5per] { user-select: none; } .side-panel__head[b-uedw5x5per] { border-bottom: 1px solid var(--mud-palette-lines-default); } .side-panel__body[b-uedw5x5per] { min-height: 0; } /* Der Griff liegt halb über dem Rand, damit er breit genug zum Treffen ist, ohne Inhalt zu verdecken. touch-action: none, sonst scrollt der Browser, statt die Zeigerbewegung zu liefern. */ .side-panel__splitter[b-uedw5x5per] { position: absolute; top: 0; bottom: 0; left: -5px; width: 10px; z-index: 1; cursor: col-resize; touch-action: none; outline: none; } .side-panel__splitter[b-uedw5x5per]::after { content: ""; position: absolute; top: 0; bottom: 0; left: 4px; width: 2px; background: transparent; transition: background-color 150ms; } .side-panel__splitter:hover[b-uedw5x5per]::after, .side-panel__splitter:focus-visible[b-uedw5x5per]::after, .side-panel--resizing .side-panel__splitter[b-uedw5x5per]::after { background: var(--mud-palette-primary); } .side-panel__grip[b-uedw5x5per] { position: absolute; top: 50%; left: 2px; width: 6px; height: 40px; margin-top: -20px; border-radius: 3px; background: var(--mud-palette-lines-inputs); } @media (pointer: coarse) { .side-panel__splitter[b-uedw5x5per] { left: -12px; width: 24px; } .side-panel__splitter[b-uedw5x5per]::after { left: 11px; } .side-panel__grip[b-uedw5x5per] { left: 8px; width: 8px; } } /* Telefon: volle Breite, nichts zu ziehen. */ @media (max-width: 599.98px) { .side-panel[b-uedw5x5per] { width: 100% !important; border-left: 0; } .side-panel__splitter[b-uedw5x5per] { display: none; } } /* /Components/Base/SiteMaterial.razor.rz.scp.css */ /* Wie die übrigen Karten der Baustellenseite: große Tippflächen, runde Ecken. */ .site-material[b-4st6au7pls] .site-material__big-button { min-height: 56px; font-size: 1.05rem; border-radius: 12px; } .site-material[b-4st6au7pls] .site-material__card { border-radius: 12px; } .site-material[b-4st6au7pls] .site-material__text { overflow-wrap: anywhere; } /* /Components/Base/SiteTasks.razor.rz.scp.css */ /* Große Tippflächen - bedient mit einer Hand auf dem Gerüst, wie der Rest der Baustellenseite. */ [b-x6mqud49cg] .site-tasks__big-button { min-height: 52px; border-radius: 12px; } [b-x6mqud49cg] .site-tasks__card { border-radius: 12px; } [b-x6mqud49cg] .site-tasks__card--overdue { border-color: var(--mud-palette-error); background-color: rgba(var(--mud-palette-error-rgb), 0.06); } [b-x6mqud49cg] .site-tasks__card--due-soon { border-color: var(--mud-palette-warning); } .site-tasks__open[b-x6mqud49cg] { display: block; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; } .site-tasks__thumb[b-x6mqud49cg] { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; } [b-x6mqud49cg] .site-tasks__title { font-weight: 600; overflow-wrap: anywhere; } /* /Components/Base/SiteWeatherBadge.razor.rz.scp.css */ /* Das Popover landet im MudPopoverProvider, nicht unter .site-weather - Regeln für seinen Inhalt hängen darum am Panel. Das Symbol ist eine eigene kleine Tippfläche in der Karte - hervorgehoben, damit man sieht, dass sich darunter mehr verbirgt. */ .site-weather__activator[b-8epffj24p0] { height: 28px; padding: 0 6px; border-radius: 14px; cursor: pointer; line-height: 1; } .site-weather__activator:hover[b-8epffj24p0], .site-weather__activator:focus-visible[b-8epffj24p0] { background-color: var(--mud-palette-action-default-hover); } .site-weather__temperature[b-8epffj24p0] { line-height: 1; } .site-weather__panel[b-8epffj24p0] { width: min(360px, calc(100vw - 32px)); text-transform: none; text-align: left; } .site-weather__panel[b-8epffj24p0] .site-weather__big-icon { font-size: 56px; } .site-weather__panel[b-8epffj24p0] .site-weather__head-temperature { line-height: 1.1; } .site-weather__facts[b-8epffj24p0] { gap: 8px 16px; } .site-weather__panel[b-8epffj24p0] .site-weather__hour { min-width: 3rem; } .site-weather__panel[b-8epffj24p0] .site-weather__weekday { width: 4.5rem; } .site-weather__panel[b-8epffj24p0] .site-weather__range { min-width: 4.5rem; } /* /Components/Base/StatTile.razor.rz.scp.css */ /* Getönte Fläche statt Schatten: Die Farbe der Kennzahl trägt die Kachel zu 6 %, der Kreis um das Symbol zu 14 % - hell wie dunkel ohne eigene Regeln, weil color-mix auf die Palettenvariablen rechnet. */ .stat-tile[b-ua2hfg1h4x] { display: flex; align-items: center; gap: 14px; height: 100%; padding: 16px 18px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--stat-color) 18%, var(--mud-palette-lines-default)); background: color-mix(in srgb, var(--stat-color) 6%, var(--mud-palette-surface)); transition: transform 120ms ease, box-shadow 120ms ease; } .stat-tile--clickable[b-ua2hfg1h4x] { cursor: pointer; } .stat-tile--clickable:hover[b-ua2hfg1h4x] { transform: translateY(-1px); box-shadow: 0 6px 18px color-mix(in srgb, var(--stat-color) 18%, transparent); } .stat-tile__icon[b-ua2hfg1h4x] { flex: none; width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--stat-color) 14%, transparent); } .stat-tile__body[b-ua2hfg1h4x] { min-width: 0; } .stat-tile__value[b-ua2hfg1h4x] { font-size: 1.5rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .stat-tile__label[b-ua2hfg1h4x] { font-size: 0.85rem; font-weight: 500; color: var(--mud-palette-text-primary); } .stat-tile__caption[b-ua2hfg1h4x] { font-size: 0.75rem; color: var(--mud-palette-text-secondary); } .stat-tile--dense[b-ua2hfg1h4x] { padding: 10px 12px; gap: 10px; border-radius: 12px; } .stat-tile--dense .stat-tile__icon[b-ua2hfg1h4x] { width: 34px; height: 34px; } .stat-tile--dense .stat-tile__value[b-ua2hfg1h4x] { font-size: 1.15rem; } .stat-tile--dense .stat-tile__label[b-ua2hfg1h4x] { font-size: 0.78rem; } /* /Components/Base/StepIndicator.razor.rz.scp.css */ .steps[b-tdr0nxn225] { display: flex; align-items: center; gap: 8px; } .steps__step[b-tdr0nxn225] { display: flex; align-items: center; gap: 8px; flex: none; } .steps__bubble[b-tdr0nxn225] { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 600; border: 2px solid var(--mud-palette-lines-inputs); color: var(--mud-palette-text-secondary); } .steps__label[b-tdr0nxn225] { font-size: 0.85rem; color: var(--mud-palette-text-secondary); white-space: nowrap; } .steps__step--current .steps__bubble[b-tdr0nxn225] { border-color: var(--mud-palette-primary); background: var(--mud-palette-primary); color: var(--mud-palette-primary-text); } .steps__step--current .steps__label[b-tdr0nxn225] { color: var(--mud-palette-text-primary); font-weight: 600; } .steps__step--done .steps__bubble[b-tdr0nxn225] { border-color: var(--mud-palette-primary); color: var(--mud-palette-primary); } .steps__line[b-tdr0nxn225] { flex: 1 1 24px; min-width: 16px; height: 2px; border-radius: 1px; background: var(--mud-palette-lines-default); } .steps__line--done[b-tdr0nxn225] { background: var(--mud-palette-primary); } /* Auf dem Telefon nur die Blasen und die Beschriftung des aktuellen Schritts. */ @media (max-width: 599px) { .steps__step:not(.steps__step--current) .steps__label[b-tdr0nxn225] { display: none; } } /* /Components/Dialogs/ArticleDialog.razor.rz.scp.css */ /* Das Foto aus DATANORM neben dem Hinweis zur Bezugsquelle: feste Kachel, damit Laden, Bild und „nicht verfügbar" gleich viel Platz nehmen und nichts springt. */ .article-photo[b-50b0r7ayyo] { flex: 0 0 auto; width: 120px; height: 120px; display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid var(--mud-palette-lines-default); border-radius: var(--mud-default-borderradius); background: var(--mud-palette-background); } /* /Components/Dialogs/DataNormImportDialog.razor.rz.scp.css */ /* Die Ablagefläche: gestrichelt, großzügig, beim Hereinziehen in der Primärfarbe getönt. Der Wächter gegen Datei-Drops neben die Fläche liegt global (file-drop-guard.js). position: relative gehört an die WURZEL von MudFileUpload, nicht an die Fläche darin: Das versteckte ist ein Geschwister des CustomContent und legt sich per position: absolute über seinen nächsten positionierten Vorfahren. An der Fläche gesetzt, spannte es sich über den ganzen Dialog - der Drop kam nie an (gemeldet am 2026-09-16). Wie im Bild-Dialog (ImageEditDialog.razor.css). */ .datanorm-drop-host[b-o1a4kfpzgd] .datanorm-drop { position: relative; display: block; width: 100%; } .datanorm-drop-host[b-o1a4kfpzgd] .datanorm-drop__area { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 32px 24px; border: 2px dashed var(--mud-palette-lines-inputs); border-radius: 16px; background: var(--mud-palette-background-gray); text-align: center; transition: border-color 120ms ease, background-color 120ms ease; } .datanorm-drop-host[b-o1a4kfpzgd] .datanorm-drop__area--dragging { border-color: var(--mud-palette-primary); background: color-mix(in srgb, var(--mud-palette-primary) 8%, var(--mud-palette-surface)); } /* Die Wahl des Lieferanten als zwei Karten statt Radioknöpfen: Die ganze Karte ist die Fläche zum Klicken, die gewählte trägt einen Rahmen in der Primärfarbe. */ .datanorm__choice[b-o1a4kfpzgd] { height: 100%; padding: 14px; border-radius: 12px; border: 1px solid var(--mud-palette-lines-default); cursor: pointer; transition: border-color 120ms ease, background-color 120ms ease; } .datanorm__choice--selected[b-o1a4kfpzgd] { border: 2px solid var(--mud-palette-primary); padding: 13px; background: color-mix(in srgb, var(--mud-palette-primary) 5%, var(--mud-palette-surface)); } .datanorm__choice--disabled[b-o1a4kfpzgd] { cursor: default; opacity: 0.6; } /* /Components/Dialogs/FileViewerDialog.razor.rz.scp.css */ /* Die Herkunft im Kopf (A-8.9): eine Zeile, die den Platz neben den Knöpfen nimmt. Gekürzt wird vorne zuerst (Kunde, Projekt, Bereich schrumpfen hundertmal stärker), der Dateiname behält am längsten seinen Platz. */ .file-viewer-origin[b-b8jdsplxrt] { flex: 1 1 auto; min-width: 0; overflow: hidden; } .file-viewer-origin[b-b8jdsplxrt] .mud-breadcrumbs { flex-wrap: nowrap; min-width: 0; } .file-viewer-origin[b-b8jdsplxrt] .mud-breadcrumb-item { display: flex; align-items: center; flex: 0 100 auto; min-width: 24px; } .file-viewer-origin[b-b8jdsplxrt] .mud-breadcrumb-item:last-child { flex: 0 1 auto; min-width: 96px; } .file-viewer-origin[b-b8jdsplxrt] .mud-breadcrumb-separator { flex: none; padding: 0 2px; color: var(--mud-palette-text-secondary); } .file-viewer-origin[b-b8jdsplxrt] .mud-tooltip-root { display: flex; min-width: 0; max-width: 100%; } .file-viewer-origin[b-b8jdsplxrt] .file-viewer-origin__crumb { display: flex; align-items: center; gap: 4px; min-width: 0; color: var(--mud-palette-text-secondary); } .file-viewer-origin[b-b8jdsplxrt] a.file-viewer-origin__crumb:hover { color: var(--mud-palette-primary); } .file-viewer-origin[b-b8jdsplxrt] .file-viewer-origin__crumb--current { gap: 8px; color: var(--mud-palette-text-primary); } .file-viewer-origin[b-b8jdsplxrt] .file-viewer-origin__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Telefon: vor dem Dateinamen nur die Symbole - Tooltip und Informationen sagen den Rest. */ @media (max-width: 599.98px) { .file-viewer-origin[b-b8jdsplxrt] .mud-breadcrumb-item:not(:last-child) .file-viewer-origin__text { display: none; } .file-viewer-origin[b-b8jdsplxrt] .mud-breadcrumb-item { flex: none; min-width: 0; } .file-viewer-origin[b-b8jdsplxrt] .mud-breadcrumb-item:last-child { flex: 0 1 auto; min-width: 0; } } .file-viewer__zoom[b-b8jdsplxrt] { min-width: 48px; text-align: center; } .file-viewer-surface[b-b8jdsplxrt] { width: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: repeating-conic-gradient(var(--mud-palette-background-gray) 0% 25%, transparent 0% 50%) 50% / 24px 24px; border: 1px solid var(--mud-palette-lines-default); border-radius: var(--mud-default-borderradius); touch-action: none; user-select: none; } .file-viewer-surface img[b-b8jdsplxrt] { max-width: 100%; max-height: 100%; transition: transform 0.05s linear; transform-origin: center center; } .file-viewer-loading[b-b8jdsplxrt] { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; pointer-events: none; } .file-viewer-text[b-b8jdsplxrt] { overflow-y: auto; padding: 4px 8px; } .file-viewer-pre[b-b8jdsplxrt] { margin: 0; font-family: ui-monospace, "Cascadia Mono", "DejaVu Sans Mono", monospace; font-size: 0.85rem; line-height: 1.5; white-space: pre; overflow-x: auto; } /* Erkannter Text (Mail, OCR) bricht um - Fließtext ohne Zeilenumbrüche stünde sonst in einer einzigen Zeile. */ .file-viewer-pre--wrap[b-b8jdsplxrt] { white-space: pre-wrap; } /* Markdown: lesbare Abstände, Tabellen mit Linien - das HTML kommt aus Markdig und ist bereinigt. */ .file-viewer-markdown[b-b8jdsplxrt] table { border-collapse: collapse; margin: 12px 0; } .file-viewer-markdown[b-b8jdsplxrt] th, .file-viewer-markdown[b-b8jdsplxrt] td { border: 1px solid var(--mud-palette-lines-default); padding: 4px 10px; text-align: left; } .file-viewer-markdown[b-b8jdsplxrt] blockquote { margin: 12px 0; padding: 4px 12px; border-left: 4px solid var(--mud-palette-primary); color: var(--mud-palette-text-secondary); } .file-viewer-markdown[b-b8jdsplxrt] ul { padding-left: 24px; } .file-viewer-markdown[b-b8jdsplxrt] li:has(> input[type="checkbox"]) { list-style: none; margin-left: -20px; } .file-viewer-markdown[b-b8jdsplxrt] h1, .file-viewer-markdown[b-b8jdsplxrt] h2 { margin: 16px 0 8px; } /* /Components/Dialogs/MapDialog.razor.rz.scp.css */ .map-dialog__title[b-dz8lit5uy0] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* /Components/Dialogs/MessagePhotoDialog.razor.rz.scp.css */ .message-photo[b-d0u2q0cyvs] { display: flex; align-items: center; justify-content: center; height: 100%; min-height: 0; } .message-photo img[b-d0u2q0cyvs] { max-width: 100%; max-height: calc(100dvh - 180px); object-fit: contain; border-radius: 8px; } /* /Components/Dialogs/ProjectProgressDialog.razor.rz.scp.css */ /* Die Fotos zum Antippen: große Flächen fürs Telefon, gewählte mit Rahmen und Haken. */ .progress-dialog__photos[b-xpp80ksdpl] { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; } .progress-dialog__photo[b-xpp80ksdpl] { position: relative; aspect-ratio: 1; padding: 0; border: 3px solid transparent; border-radius: 10px; overflow: hidden; background: var(--mud-palette-background-gray); cursor: pointer; } .progress-dialog__photo img[b-xpp80ksdpl] { width: 100%; height: 100%; object-fit: cover; display: block; } .progress-dialog__photo--selected[b-xpp80ksdpl] { border-color: var(--mud-palette-primary); } .progress-dialog__photo[b-xpp80ksdpl] .progress-dialog__check { position: absolute; top: 4px; right: 4px; background: var(--mud-palette-surface); border-radius: 50%; } /* /Components/Dialogs/ProjectTaskDialog.razor.rz.scp.css */ /* Die Fotos zum Antippen - wie im Fortschritts-Dialog: große Flächen fürs Telefon, gewählte mit Rahmen und Haken. */ .task-dialog__photos[b-x94f887u8j] { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; } .task-dialog__photo[b-x94f887u8j] { position: relative; aspect-ratio: 1; padding: 0; border: 3px solid transparent; border-radius: 10px; overflow: hidden; background: var(--mud-palette-background-gray); cursor: pointer; } .task-dialog__photo img[b-x94f887u8j] { width: 100%; height: 100%; object-fit: cover; display: block; } .task-dialog__photo--selected[b-x94f887u8j] { border-color: var(--mud-palette-primary); } .task-dialog__photo[b-x94f887u8j] .task-dialog__check { position: absolute; top: 4px; right: 4px; background: var(--mud-palette-surface); border-radius: 50%; } /* /Components/Layout/AppTitle.razor.rz.scp.css */ .app-title[b-cskhhuttiq] { min-width: 0; } /* Auf dem Telefon wird der Titel KLEINER statt abgeschnitten - wie in der Wettkampfanmeldung: Die Schrift folgt der Fensterbreite und steht nie mit Auslassungspunkten da. 3,3vw sind bei 360 px rund 11,9 px - so passt der Titel neben Menü und Konto. Ab etwa 600 px greift die volle Größe (1,25rem). */ .app-title[b-cskhhuttiq] .mud-typography { font-size: clamp(0.7rem, 3.3vw, 1.25rem); white-space: nowrap; } /* Wortmarke: etwas enger und halbfett, der zweite Teil mager - dieselbe Anmutung wie in den anderen Anwendungen. Das Leerzeichen steht im Text (siehe AppTitle.razor), nicht als Abstand im CSS. */ .app-title[b-cskhhuttiq] .mud-typography { font-weight: 600; letter-spacing: -0.015em; } .app-title[b-cskhhuttiq] .app-title__rest { font-weight: 400; } /* /Components/Pages/CustomFields.razor.rz.scp.css */ /* Eine Zeile je Feld; die Trennlinie steht zwischen den Zeilen, nicht unter der letzten. */ [b-d1dnjso1l4] .custom-field-row { border-bottom: 1px solid var(--mud-palette-lines-default); background: var(--mud-palette-surface); } [b-d1dnjso1l4] .mud-drop-zone > :last-child .custom-field-row { border-bottom: none; } /* /Components/Pages/Messages.razor.rz.scp.css */ /* Wie die Baustellenliste: eine Karte ist eine große Tippfläche, telefonbreit auf dem Rechner. */ .messages-list[b-k92etlghbw] { max-width: 720px; } .messages-list[b-k92etlghbw] .messages-list__card { border-radius: 12px; } .messages-list[b-k92etlghbw] .messages-list__button { justify-content: flex-start; align-items: center; padding: 12px 14px; text-transform: none; border-radius: inherit; } .messages-list[b-k92etlghbw] .messages-list__name, .messages-list[b-k92etlghbw] .messages-list__line { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .messages-list[b-k92etlghbw] .messages-list__author { font-weight: 600; } /* /Components/Pages/PdfTemplates.razor.rz.scp.css */ /* Die Seite ist genau so hoch wie der Platz unter der App-Leiste (abzüglich mt-6 des Containers und pb-8 des Hauptbereichs): Kopf, Auswahl und Meldungen behalten ihre Höhe, Editor und Vorschau teilen sich den Rest und scrollen in sich. Die Leiste darüber bleibt so immer sichtbar. */ .pdf-template-page[b-2bkwk0f5it] { display: flex; flex-direction: column; height: calc(100dvh - var(--mud-appbar-height) - 24px - 32px); min-height: 640px; } .pdf-template-workspace[b-2bkwk0f5it] { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .pdf-template-column[b-2bkwk0f5it] { display: flex; flex-direction: column; min-height: 0; } /* MudPaper ist eine Kind-Komponente - ohne ::deep erreicht die Regel ihre Wurzel nicht. min-height: 0, sonst wächst sie mit dem Inhalt (ein PDF mit mehreren Seiten) über die Spalte hinaus. */ .pdf-template-column[b-2bkwk0f5it] .pdf-template-paper { min-height: 0; } .pdf-template-editor-host[b-2bkwk0f5it], .pdf-template-preview[b-2bkwk0f5it] { min-height: 0; position: relative; } /* BlazorMonaco rendert einen eigenen Container - ohne Höhe bliebe er 0 Pixel hoch. */ .pdf-template-editor-host[b-2bkwk0f5it] .pdf-template-editor { position: absolute; inset: 0; } /* Der Viewer füllt die Vorschau und scrollt seine Seiten selbst. */ .pdf-template-preview[b-2bkwk0f5it] .blazorpdf-container { position: absolute; inset: 0; height: auto; } .pdf-template-error[b-2bkwk0f5it] { white-space: pre-wrap; word-break: break-word; } /* Schmale Schirme: untereinander, jede Fläche mit fester Höhe - die Seite scrollt. Ein Editor, der mit dem Inhalt wächst, schöbe die Vorschau aus dem Blick. */ @media (max-width: 1279.98px) { .pdf-template-page[b-2bkwk0f5it] { height: auto; min-height: 0; } .pdf-template-workspace[b-2bkwk0f5it] { grid-template-columns: minmax(0, 1fr); } .pdf-template-column[b-2bkwk0f5it] { height: 75dvh; min-height: 480px; } } /* /Components/Pages/ShiftPlanner.razor.rz.scp.css */ /* Das Raster des Schichtplaners: eine Spalte für die Mitarbeiter, je Tag eine weitere. Breiter als der Schirm scrollt es waagerecht in sich, die Seite nicht. */ .shift-planner[b-gbh79rg4g2] { overflow-x: auto; border: 1px solid var(--mud-palette-lines-default); border-radius: var(--mud-default-borderradius); background: var(--mud-palette-surface); } .shift-planner[b-gbh79rg4g2] .shift-grid { display: grid; min-width: 820px; } .shift-planner[b-gbh79rg4g2] .shift-grid__corner, .shift-planner[b-gbh79rg4g2] .shift-grid__day { position: sticky; top: 0; z-index: 1; padding: 8px; background: var(--mud-palette-background-gray); border-bottom: 1px solid var(--mud-palette-lines-default); } .shift-planner[b-gbh79rg4g2] .shift-grid__day { text-align: center; border-left: 1px solid var(--mud-palette-lines-default); } .shift-planner[b-gbh79rg4g2] .shift-grid__day--today { box-shadow: inset 0 -3px 0 var(--mud-palette-primary); } .shift-planner[b-gbh79rg4g2] .shift-grid__day--weekend, .shift-planner[b-gbh79rg4g2] .shift-cell--weekend { background: color-mix(in srgb, var(--mud-palette-background-gray) 60%, transparent); } /* Die Kolonne als eigene Zeile, mit ihrer Farbe als Rand - eingeklappt tragen ihre Tageszellen die Baustellen. */ .shift-planner[b-gbh79rg4g2] .shift-grid__group { padding: 4px 4px 4px 2px; border-left: 4px solid var(--group-color); border-bottom: 1px solid var(--mud-palette-lines-default); background: color-mix(in srgb, var(--group-color) 8%, var(--mud-palette-surface)); min-width: 0; } .shift-planner[b-gbh79rg4g2] .shift-grid__employee { padding: 6px 8px; border-bottom: 1px solid var(--mud-palette-lines-default); min-width: 0; } .shift-planner[b-gbh79rg4g2] .shift-grid__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .shift-planner[b-gbh79rg4g2] .shift-cell { position: relative; min-height: 64px; padding: 4px 4px 28px; display: flex; flex-direction: column; gap: 4px; border-left: 1px solid var(--mud-palette-lines-default); border-bottom: 1px solid var(--mud-palette-lines-default); } .shift-planner[b-gbh79rg4g2] .shift-cell--summary { min-height: 48px; padding: 4px; justify-content: center; background: color-mix(in srgb, var(--group-color) 8%, var(--mud-palette-surface)); } /* Platz für das „+" unten rechts, damit es keinen Baustellen-Chip verdeckt. */ .shift-planner[b-gbh79rg4g2] .shift-cell--summary-add { padding-bottom: 28px; } .shift-planner[b-gbh79rg4g2] .shift-cell--today { background: color-mix(in srgb, var(--mud-palette-primary) 5%, transparent); } .shift-planner[b-gbh79rg4g2] .shift-cell--can-drop { background: color-mix(in srgb, var(--mud-palette-success) 12%, transparent); } .shift-planner[b-gbh79rg4g2] .shift-cell--no-drop { background: color-mix(in srgb, var(--mud-palette-error) 10%, transparent); } /* „+" erst beim Überfahren - sonst stünde in jeder leeren Zelle ein Knopf. */ .shift-planner[b-gbh79rg4g2] .shift-cell__add { position: absolute; right: 2px; bottom: 2px; opacity: 0; transition: opacity 0.15s; } .shift-planner[b-gbh79rg4g2] .shift-cell:hover .shift-cell__add, .shift-planner[b-gbh79rg4g2] .shift-cell__add:focus-within { opacity: 1; } /* Ein Einsatz: Rand und Tönung in der Farbe der Baustelle. */ .shift-chip[b-gbh79rg4g2] { display: grid; grid-template-columns: 1fr auto; column-gap: 4px; padding: 2px 6px; border-left: 4px solid var(--project-color); border-radius: 6px; background: color-mix(in srgb, var(--project-color) 14%, var(--mud-palette-surface)); cursor: grab; user-select: none; } .shift-chip--row[b-gbh79rg4g2] { display: block; cursor: pointer; width: 100%; } .shift-chip[b-gbh79rg4g2] .shift-chip__number { font-weight: 600; white-space: nowrap; } .shift-chip[b-gbh79rg4g2] .shift-chip__hours { white-space: nowrap; font-variant-numeric: tabular-nums; } .shift-chip[b-gbh79rg4g2] .shift-chip__name { grid-column: 1 / -1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--mud-palette-text-secondary); } /* Eine zusammengefasste Baustelle: antippen klappt die Kolonne auf, ziehen lässt sie sich nicht. */ .shift-chip--summary[b-gbh79rg4g2] { cursor: pointer; align-items: center; } /* Telefon: je Tag die Kolonnen untereinander, eingeklappt ihre Baustellen nebeneinander (umbrechend). */ .shift-day-group[b-gbh79rg4g2] { padding: 4px 0 4px 8px; border-left: 4px solid var(--group-color); margin-top: 8px; } .shift-day-group__summary[b-gbh79rg4g2] { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0; } .shift-day-group__summary .shift-chip[b-gbh79rg4g2] { min-width: 140px; } /* /Components/Pages/Site.razor.rz.scp.css */ /* Eine Spalte, auf dem Rechner nicht breiter als ein Telefon im Querformat - die Seite ist fürs Gerüst gebaut. */ .site[b-pgqsiyb9e5] { max-width: 640px; margin: 0 auto; } .site[b-pgqsiyb9e5] .site__title { overflow-wrap: anywhere; } .site[b-pgqsiyb9e5] .site__card { border-radius: 12px; } /* Große Tippflächen: mit Handschuhen und in der Sonne zu treffen. */ .site[b-pgqsiyb9e5] .site__big-button { min-height: 56px; font-size: 1.05rem; border-radius: 12px; } .site[b-pgqsiyb9e5] .site__upload { display: block; width: 100%; } .site[b-pgqsiyb9e5] .site__last-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .site__photo-row[b-pgqsiyb9e5] { display: flex; gap: 10px; align-items: flex-start; } .site__thumb[b-pgqsiyb9e5] { flex: 0 0 96px; width: 96px; height: 96px; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: var(--mud-palette-background-gray); cursor: zoom-in; } .site__thumb img[b-pgqsiyb9e5] { width: 100%; height: 100%; object-fit: cover; display: block; } /* /Components/Pages/SiteForms.razor.rz.scp.css */ /* Eine Spalte wie die Baustellenseite - fürs Telefon gebaut. */ .site-forms[b-zno9pot17r] { max-width: 720px; margin: 0 auto; } .site-forms[b-zno9pot17r] .site-forms__title { overflow-wrap: anywhere; } .site-forms[b-zno9pot17r] .site-forms__card { border-radius: 12px; } .site-forms[b-zno9pot17r] .site-forms__button { min-height: 64px; border-radius: 12px; justify-content: flex-start; padding: 8px 12px; } /* /Components/Pages/SiteMessages.razor.rz.scp.css */ /* So hoch wie der sichtbare Bildschirm unter der Leiste (abzüglich der Ränder aus dem MainLayout: mt-6 oben, pb-8 unten) - erst dadurch scrollt nur die Liste, und die Eingabe bleibt über der Tastatur stehen. Eine Spalte, auf dem Rechner telefonbreit. */ .site-messages[b-gn014bv36e] { display: flex; flex-direction: column; max-width: 720px; margin: 0 auto; height: calc(100dvh - var(--mud-appbar-height) - 56px); min-height: 320px; } .site-messages[b-gn014bv36e] .site-messages__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* /Components/Pages/SiteProjects.razor.rz.scp.css */ /* Eine Karte ist eine einzige große Tippfläche - der Text darin bleibt normal gesetzt statt in Großbuchstaben. */ .site-list[b-6arusbtovm] .site-list__button { justify-content: flex-start; align-items: center; padding: 12px 14px; text-transform: none; border-radius: inherit; } .site-list[b-6arusbtovm] .site-list__card { border-radius: 12px; } .site-list[b-6arusbtovm] .site-list__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* /Components/Pages/TimeClock.razor.rz.scp.css */ /* Eine Spalte, auf dem Telefon die ganze Breite, am Schreibtisch nicht breiter als ein Telefon. */ .time-clock[b-0xxvo39g0m] { max-width: 560px; margin-inline: auto; } /* Die laufende Zeit: groß und mit gleich breiten Ziffern, damit sie beim Weiterzählen nicht springt. */ .time-clock[b-0xxvo39g0m] .time-clock__timer { font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: 0.02em; } .time-clock[b-0xxvo39g0m] .time-clock__status { border-radius: 14px; border-width: 2px; } .time-clock[b-0xxvo39g0m] .time-clock__status--running { border-color: var(--mud-palette-success); } .time-clock[b-0xxvo39g0m] .time-clock__status--paused { border-color: var(--mud-palette-warning); } /* Tippflächen für Handschuhe: mindestens 56 px hoch. */ .time-clock[b-0xxvo39g0m] .time-clock__button { min-height: 56px; font-size: 1.1rem; } .time-clock[b-0xxvo39g0m] .time-clock__entry { cursor: pointer; border-radius: 12px; }