resources/css/app.css
Rama main · réplica de lectura del repositorio original.
@import "tailwindcss";
/* ============================================================
Design-Basis v2 »Bühnenlicht« — semantische Token-Ebene (design-basis.md §0/§1)
============================================================ */
@theme {
/* ---------- Flächen ---------- */
--color-surface-canvas: #F2F3F5; /* Seitenhintergrund (v2, kühl) */
--color-surface: #FFFFFF; /* Karten, Tabellen, Modal */
--color-surface-sunken: #F4F5F6; /* Modal-Footer, Zebra */
--color-surface-header: #FBFBFC; /* Tabellenkopf */
--color-surface-hover: #EFF4F9; /* Zeilen-Hover, akzentgetönt */
--color-surface-inverse: #222831; /* Band: Navigation, Toolbar, Kalender-/Modalkopf */
/* ---------- Rahmen ---------- */
--color-border-hairline: #EEEFF1; /* Zeilentrenner */
--color-border-subtle: #E3E5E9; /* Karten, Segmented-Track */
--color-border: #C9CDD3; /* Eingaben, Buttons */
--color-border-strong: #8B929C; /* Datenraster, 3:1-Pflicht */
/* ---------- Text (Kontrast auf --color-surface) ---------- */
--color-text: #1C1F24; /* 15,1:1 */
--color-text-muted: #5F6169; /* 6,3:1 */
--color-text-subtle: #74767E; /* 4,6:1 — Minimum für Text */
--color-text-inverse: #F4F4F2; /* auf dem Band */
--color-text-inverse-muted: #A9B1BC; /* Kontextzeilen auf dem Band, nie unter 11,5px */
/* ---------- Akzent (abgeleitet aus Bestands-#3073ae) ---------- */
--color-accent-50: #EEF4FA;
--color-accent-100: #D9E7F4;
--color-accent-200: #B7D0E8;
--color-accent-500: #3073AE; /* Flächen, Icons — NICHT für Text auf Weiß */
--color-accent-600: #276293; /* Primär, Links, Fokus — 4,6:1 */
--color-accent-700: #1E4E77; /* Hover / Aktiv */
--color-accent-900: #14314A;
/* ---------- Status ---------- */
--color-success: #157F4F; --color-success-surface: #E8F5EE; --color-success-border: #A8D8BF;
--color-warning: #8A5A00; --color-warning-surface: #FCF3E1; --color-warning-border: #E8CE92;
--color-danger: #B3261E; --color-danger-surface: #FDEDEC; --color-danger-border: #F0B9B4;
--color-info: #276293; --color-info-surface: #EEF4FA; --color-info-border: #B7D0E8;
/* ---------- Radien ---------- */
--radius-sm: 4px; /* Kalenderkacheln, Zellen */
--radius-md: 6px; /* alle Steuerelemente */
--radius-lg: 12px; /* Karten, Modale, Listen-Container */
--radius-pill: 999px; /* Chips, Zähler */
/* ---------- Elevation ---------- */
--shadow-raised: 0 1px 2px rgba(28,31,36,.06), 0 1px 1px rgba(28,31,36,.04);
--shadow-overlay: 0 8px 24px -8px rgba(28,31,36,.18), 0 2px 6px rgba(28,31,36,.06);
--shadow-card: 0 1px 2px rgba(28,31,36,.06), 0 6px 16px -8px rgba(28,31,36,.10);
/* ---------- Steuerhöhen ---------- */
--control-h-sm: 28px;
--control-h-md: 32px;
--control-h-lg: 40px;
/* ---------- Zeilenhöhen ---------- */
--row-h: 40px; /* Standard-Datenzeile */
--row-h-project: 44px; /* Projektlisten (Badges + Avatare) */
--row-h-compact: 34px; /* wählbares Kompakt-Profil */
/* ---------- Typografie ---------- */
--font-heading: Lexend, system-ui, sans-serif;
--font-body: Inter, system-ui, sans-serif;
--font-sans: Inter, system-ui, sans-serif;
--font-lexend: Lexend, system-ui, sans-serif;
/* ---------- Gelernte Sonderfarben (feste Marker, AA auf Weiß) ----------
Für etablierte Spezialfälle: violet = Lifecycle/BI-Chips, pink =
"zuletzt angelegt"-Marker (Bulk), orange = Verifizierung/Nachträglich,
teal = Ausgleichstage/Sonder-Marker. Nutzergepflegte Farben (Terminarten,
Inventar-Status, Räume, Gewerke) kommen weiterhin dynamisch aus der DB. */
--color-special-violet: #6D28D9;
--color-special-violet-surface: #F2EEFA;
--color-special-violet-border: #D6C9F0;
--color-special-pink: #B03578;
--color-special-pink-surface: #F9ECF3;
--color-special-pink-border: #EDC2DA;
--color-special-orange: #B04A0A;
--color-special-orange-surface: #FAF0E6;
--color-special-orange-border: #F0CBA4;
--color-special-teal: #0F766E;
--color-special-teal-surface: #E7F4F2;
--color-special-teal-border: #A9D8D2;
/* ---------- Sonstiges (Bestand, weiter genutzt) ---------- */
--z-100: 100;
}
/* Fokus — verbindlich, nie überschreiben */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
outline: 2px solid var(--color-accent-600);
outline-offset: 2px;
}
:root {
/*General*/
--dp-font-family: 'lexend', sans-serif; /*Font family for the date picker*/
--dp-border-radius: 5px; /*Configurable border-radius*/
--dp-cell-border-radius: 4px; /*Specific border radius for the calendar cell*/
--dp-common-transition: all 0.1s ease-in; /*Generic transition applied on buttons and calendar cells*/
/*Sizing*/
--dp-button-height: 35px; /*Size for buttons in overlays*/
--dp-month-year-row-height: 35px; /*Height of the month-year select row*/
--dp-month-year-row-button-size: 35px; /*Specific height for the next/previous buttons*/
--dp-button-icon-height: 20px; /*Icon sizing in buttons*/
--dp-cell-size: 35px; /*Width and height of calendar cell*/
--dp-cell-padding: 5px; /*Padding in the cell*/
--dp-common-padding: 10px; /*Common padding used*/
--dp-input-icon-padding: 35px; /*Padding on the left side of the input if icon is present*/
--dp-input-padding: 6px 30px 6px 12px; /*Padding in the input*/
--dp-menu-min-width: 260px; /*Adjust the min width of the menu*/
--dp-action-buttons-padding: 2px 5px; /*Adjust padding for the action buttons in action row*/
--dp-row-margin: 5px 0; /*Adjust the spacing between rows in the calendar*/
--dp-calendar-header-cell-padding: 0.5rem; /*Adjust padding in calendar header cells*/
--dp-two-calendars-spacing: 10px; /*Space between multiple calendars*/
--dp-overlay-col-padding: 3px; /*Padding in the overlay column*/
--dp-time-inc-dec-button-size: 32px; /*Sizing for arrow buttons in the time picker*/
--dp-menu-padding: 6px 8px; /*Menu padding*/
/*Font sizes*/
--dp-font-size: 1rem; /*Default font-size*/
--dp-preview-font-size: 0.8rem; /*Font size of the date preview in the action row*/
--dp-time-font-size: 0.8rem; /*Font size in the time picker*/
/*Transitions*/
--dp-animation-duration: 0.1s; /*Transition duration*/
--dp-menu-appear-transition-timing: cubic-bezier(.4, 0, 1, 1); /*Timing on menu appear animation*/
--dp-transition-timing: ease-out; /*Timing on slide animations*/
}
@font-face {
font-family: 'Inter';
src: local('Inter-Regular'), url('../fonts/Inter-Regular.woff2') format('woff2');
font-display: swap;
}
@font-face {
font-family: 'Lexend';
src: local('Lexend-Regular'), url('../fonts/Lexend-Regular.woff2') format('woff2');
font-display: swap;
}
body {
scrollbar-width: thin; /* Für Firefox */
scrollbar-color: rgba(210, 210, 213, 0.44) transparent; /* Für Firefox */
}
[x-cloak] {
display: none;
}
::-webkit-scrollbar {
width: 9px;
height: 9px;
}
::-webkit-scrollbar-track {
background-color: transparent;
box-shadow: none;
}
::-webkit-scrollbar-thumb {
background-color: rgba(210, 210, 213, 0.44);
border-radius: 16px;
border: 4px solid transparent;
background-clip: content-box;
box-shadow: none;
}
::-webkit-scrollbar-thumb:hover {
background-color: #a8bbbf;
}
.base-menu-link {
.base-menu-icon {
@apply text-text-subtle;
}
}
.stateColorDefault {
background-color: #FCFCFBFF;
border: 1px solid #afafaf;
color: #696868;
}
.stateColorRed {
background: rgba(100, 26, 84, 0.15);
border: 1px solid #641A54;
color: #641A54;
}
.stateColorPink {
background: rgba(218, 63, 135, 0.15);
border: 1px solid #DA3F87;
color: #DA3F87
}
.stateColorOrange {
background: rgba(235, 122, 61, 0.15);
border: 1px solid #EB7A3D;
color: #EB7A3D;
}
.stateColorYellow {
background: rgba(241, 182, 64, 0.15);
border: 1px solid #F1B640;
color: #F1B640;
}
.stateColorGreen {
background: rgba(134, 197, 84, 0.15);
border: 1px solid #86C554;
color: #86C554;
}
.stateColorDarkGreen {
background: rgba(46, 170, 99, 0.15);
border: 1px solid #2EAA63;
color: #2EAA63;
}
.stateColorDodgeBlue {
background: rgba(61, 195, 203, 0.15);
border: 1px solid #3DC3CB;
color: #3DC3CB;
}
.stateColorBlue {
background: rgba(22, 143, 195, 0.15);
border: 1px solid #168FC3;
color: #168FC3;
}
.stateColorGreenBlue {
background: rgba(77, 144, 142, 0.15);
border: 1px solid #4D908E;
color: #4D908E;
}
.stateColorDarkBlue {
background: rgba(33, 72, 92, 0.15);
border: 1px solid #21485C;
color: #21485C;
}
.transition-enter-active {
@apply transition ease-out duration-100;
}
.transition-enter-from,
.transition-leave-to {
@apply transform opacity-0 scale-95;
}
.transition-enter-to,
.transition-leave-from {
@apply transform opacity-100 scale-100;
}
.transition-leave-active {
@apply transition ease-in duration-75;
}
.event-disabled {
background-image: repeating-linear-gradient(
-45deg,
transparent 0,
transparent 10px,
color-mix(in srgb, var(--event-contrast-color, currentColor) 18%, transparent) 10px,
color-mix(in srgb, var(--event-contrast-color, currentColor) 18%, transparent) 20px
);
}
.tooltip {
@apply invisible absolute;
}
.has-tooltip:hover .tooltip {
margin-top: -1rem;
margin-left: 1.5rem;
@apply visible z-50;
}
.artwork {
.chip {
@apply inline-flex items-center rounded-full px-2.5 py-1 text-[11px] font-medium ring-1 ring-inset
bg-white/10 ring-white/20;
}
/* Alias auf BaseUIButton variant="secondary" (Design-Basis v1) */
.artwork-container {
@apply mx-auto container px-4 sm:px-6 md:px-6 lg:px-8 xl:px-8 2xl:px-8 mt-5 pb-20;
}
/* Volle Breite für Board-/Tabellen-Seiten (z.B. Kanban), Padding identisch zum artwork-container */
.artwork-container-fluid {
@apply w-full max-w-none px-4 sm:px-6 md:px-6 lg:px-8 xl:px-8 2xl:px-8 mt-5 pb-20;
}
/* Linksverankerte Projektseiten (Designkonzept „Ankerlinie = Seitenkante"):
-page = volle Breite mit Seitenpadding (Kopfzeile), -column = an derselben
Ankerlinie hängende Inhaltsspalte mit 1536px-Deckel. Werkzeug-Komponenten
(Kalender/Schichten/Budget/Terminliste) laufen ohne Wrapper vollbreit. */
.artwork-anchored-page {
@apply w-full max-w-none px-4 sm:px-6 md:px-6 lg:px-8 xl:px-8 2xl:px-8;
}
.artwork-anchored-column {
@apply w-full max-w-[96rem] px-4 sm:px-6 md:px-6 lg:px-8 xl:px-8 2xl:px-8;
}
.background-color {
@apply bg-white;
}
/* Layout Helpers */
.ui-grid-2 { @apply grid grid-cols-1 gap-2 md:grid-cols-2; }
.ui-hint { @apply text-[12px] text-zinc-500; }
.ui-error { @apply text-[12px] text-rose-600; }
/* Card */
.ui-card { @apply rounded-lg border border-zinc-200 bg-white/90 p-3; }
.ui-card-header { @apply flex items-center gap-2 mb-2; }
.ui-card-title { @apply text-[13.5px] font-semibold text-zinc-900; }
.ui-dot { @apply inline-block size-2.5 rounded-full; }
/* Aliasse auf die BaseUIButton-Varianten (Design-Basis v1) — Templates nutzen sie noch direkt */
.ui-button { @apply select-none inline-flex items-center gap-x-1.5 justify-center rounded-md border border-border bg-surface min-h-8 px-3 text-[13px] font-medium text-text cursor-pointer hover:bg-surface-sunken transition-[background-color,border-color] duration-150 ease-out disabled:bg-surface-canvas disabled:text-text-subtle disabled:border-border-subtle disabled:cursor-not-allowed;}
.ui-button-small { @apply select-none inline-flex items-center gap-x-1.5 justify-center rounded-md border border-border bg-surface min-h-7 px-2.5 text-xs font-medium text-text cursor-pointer hover:bg-surface-sunken transition-[background-color,border-color] duration-150 ease-out disabled:bg-surface-canvas disabled:text-text-subtle disabled:border-border-subtle disabled:cursor-not-allowed;}
.ui-button-add { @apply select-none inline-flex items-center gap-x-1.5 justify-center rounded-md bg-accent-600 text-white border border-accent-600 min-h-8 px-3 text-[13px] font-medium cursor-pointer hover:bg-accent-700 hover:border-accent-700 transition-[background-color,border-color] duration-150 ease-out disabled:bg-surface-canvas disabled:text-text-subtle disabled:border-border-subtle disabled:cursor-not-allowed;}
.ui-button-add-small { @apply select-none inline-flex items-center gap-x-1.5 justify-center rounded-md bg-accent-600 text-white border border-accent-600 min-h-7 px-2.5 text-xs font-medium cursor-pointer hover:bg-accent-700 hover:border-accent-700 transition-[background-color,border-color] duration-150 ease-out disabled:bg-surface-canvas disabled:text-text-subtle disabled:border-border-subtle disabled:cursor-not-allowed;}
.ui-button-delete { @apply select-none inline-flex items-center gap-x-1.5 justify-center rounded-md bg-surface text-danger border border-danger-border min-h-8 px-3 text-[13px] font-medium cursor-pointer hover:bg-danger-surface transition-[background-color,border-color] duration-150 ease-out disabled:bg-surface-canvas disabled:text-text-subtle disabled:border-border-subtle disabled:cursor-not-allowed;}
/* Inputs kompakt */
.ui-input :deep(input),
.ui-input { @apply h-10; }
/* Checkbox kompakt */
.ui-checkbox { @apply size-4 rounded border-zinc-300 text-indigo-600 focus:ring-indigo-500; }
.ui-checkbox-emerald { @apply text-emerald-600 focus:ring-emerald-500; }
.ui-checkbox-amber { @apply text-amber-600 focus:ring-amber-500; }
/* Project Chip */
.ui-project-chip { @apply flex items-center gap-2 rounded-md border border-zinc-200 bg-zinc-50 px-3 py-2; }
.ui-project-link { @apply inline-block max-w-[28rem] truncate text-indigo-600 hover:underline; }
/* Segment-Schalter */
.ui-segment {
@apply inline-flex rounded-md border border-zinc-200 bg-white p-0.5 shadow-sm;
}
.ui-segment-btn {
@apply relative inline-flex items-center justify-center rounded-[6px] px-3 py-1.5 text-[12.5px] text-zinc-700 transition;
}
.ui-segment-btn.is-active {
@apply bg-zinc-100 text-zinc-900;
}
/* Buttons */
.ui-icon-btn {
@apply inline-flex items-center justify-center rounded-md border border-transparent text-text-subtle hover:text-danger;
}
/* Transition */
.fade-enter-active, .fade-leave-active { transition: opacity .15s ease, transform .15s ease; }
.fade-enter-from, .fade-leave-to { opacity: 0; transform: translateY(-2px); }
/* Buttons */
/* Sticky Footer innerhalb des Modals */
/* Sticky-Modal-Footer (v2): surface-sunken, Hairline-Oberkante, kein Blur */
.ui-footer {
@apply sticky bottom-0 left-0 w-full bg-surface-sunken border-t border-border-subtle pt-2 pb-2 mt-2;
}
.ui-lb-btn { /* placeholder, falls extern benötigt */ }
.card-header {
@apply flex items-center gap-2 -mt-1;
}
.card-dot {
@apply inline-block size-2 rounded-full;
}
.card-title {
@apply text-[13px] font-semibold text-zinc-900;
}
/* --- Helpers --- */
.hint { @apply text-[12px] text-zinc-500; }
.err { @apply text-[12px] text-rose-600; }
/* --- Listbox default classes via props (keine globalen Änderungen nötig) --- */
.border-color {
&.soft-green {
@apply border-[#edf5ef];
}
&.soft-red {
@apply border-[#f6eaea];
}
&.soft-yellow {
@apply border-[#f8f3dd];
}
}
.aw-checklist-input {
@apply col-start-1 row-start-1 size-4 appearance-none rounded-sm border border-border bg-surface checked:border-accent-600 checked:bg-accent-600 indeterminate:border-accent-600 indeterminate:bg-accent-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent-600 disabled:border-border-subtle disabled:bg-surface-sunken disabled:checked:bg-surface-sunken forced-colors:appearance-auto
}
.aw-input-svg {
@apply pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-disabled:stroke-gray-950/25 dark:group-has-disabled:stroke-white/25;
}
}
.timeline-container {
@apply flex flex-col gap-2 w-full;
.timeline-dates-container,
.timeline-times-container {
@apply flex flex-row gap-2;
.timeline-date-input,
.timeline-time-input {
@apply h-8 placeholder:subpixel-antialiased rounded-md w-full border-border focus:border-accent-600;
}
}
.timeline-error-text {
@apply text-danger text-xs;
}
.timeline-textarea {
@apply block w-full placeholder:subpixel-antialiased rounded-md border-border focus:border-accent-600;
}
}
.base-menu-link {
@apply cursor-pointer flex items-center px-4 py-2 text-sm subpixel-antialiased;
.base-menu-icon {
@apply mr-3 h-5 w-5;
}
}
.input {
@apply rounded-md px-2.5 w-full text-sm border border-border bg-surface text-text placeholder-text-subtle placeholder-transparent transition-[border-color,background-color] duration-150 ease-out;
&:disabled {
@apply bg-surface-sunken text-text-subtle cursor-not-allowed;
}
}
.input-label {
@apply cursor-text px-1 absolute left-0 -top-6 peer-placeholder-shown:text-xs transition-all subpixel-antialiased peer-placeholder-shown:text-text-subtle peer-placeholder-shown:left-2 pointer-events-none;
}
.input-checklist {
color: var(--color-success);
@apply border border-border rounded-md p-2.5 text-sm text-left;
}
.input-checklist-small {
color: var(--color-success);
@apply border border-border rounded-md p-0.5 text-sm text-left;
}
.input-checklist-dark {
color: var(--color-success);
@apply rounded-md p-2 text-sm text-left;
}
.menu-button {
@apply w-full flex items-center justify-between border border-border bg-surface rounded-md px-3 min-h-8 py-1 text-sm placeholder-transparent;
span {
@apply text-left float-left text-sm placeholder-transparent text-text-muted;
}
}
.menu-button-no-padding {
@apply w-full flex items-center justify-between border border-border bg-surface rounded-md px-3 min-h-8 text-sm placeholder-transparent;
span {
@apply text-left float-left text-sm placeholder-transparent text-text-muted;
}
}
.menu-button-no-flex {
@apply w-full block border border-border bg-surface rounded-md px-3 min-h-8 py-1 text-sm placeholder-transparent;
span {
@apply text-left float-left text-sm placeholder-transparent text-text-muted;
}
}
.btn-icon {
@apply grid place-items-center size-8 rounded-md border border-border bg-surface text-text hover:bg-surface-sunken transition-colors;
}
/* Inputs */
.form-input {
@apply w-full rounded-md border border-border bg-surface py-2 pr-3 text-sm text-text placeholder:text-text-subtle focus:border-accent-600;
}
.form-textarea {
@apply rounded-md border border-border bg-surface py-2.5 pr-3 pl-3 text-sm text-text placeholder:text-text-subtle focus:border-accent-600;
}
/* Position Picker spots */
.picker-spot {
@apply absolute h-20 w-28 rounded-lg border-2 border-dashed border-white/70 bg-white/20 hover:bg-white/30 focus:outline-none transition-colors;
}
/* Scrollbar (WebKit) */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-thumb {
background-color: rgba(24, 24, 27, 0.12);
border-radius: 999px;
border: 2px solid transparent;
background-clip: content-box;
}
::-webkit-scrollbar-track {
background: transparent;
}
/*
* Horizontale Scrollbarkeit immer sichtbar machen (Pflichtenheft 3.4).
* Wenn ein Container horizontal scrollbar ist, soll der Scrollbalken dauerhaft
* sichtbar sein – nicht nur als Overlay beim Scrollen (macOS/WebKit-Verhalten).
* Greift global über die in der App genutzten Tailwind-Overflow-Utilities.
*/
.overflow-x-auto,
.overflow-x-scroll,
.overflow-auto,
.overflow-scroll {
scrollbar-width: thin; /* Firefox */
scrollbar-color: rgba(24, 24, 27, 0.25) transparent;
}
.overflow-x-auto::-webkit-scrollbar,
.overflow-x-scroll::-webkit-scrollbar,
.overflow-auto::-webkit-scrollbar,
.overflow-scroll::-webkit-scrollbar {
-webkit-appearance: none; /* erzwingt klassische, dauerhaft sichtbare Scrollbalken statt Overlay */
height: 10px;
}
/*
* Bewusstes Opt-out: .no-scrollbar (z.B. Filter-Chip-Reihen) bleibt ohne Balken.
* !important, damit das Opt-out unabhängig von der Quellreihenfolge gewinnt.
*/
.no-scrollbar {
scrollbar-width: none !important; /* Firefox */
-ms-overflow-style: none !important; /* IE/Edge alt */
}
.no-scrollbar::-webkit-scrollbar {
display: none !important;
}
.modal {
@apply relative transform bg-white text-left shadow-2xl transition-all sm:my-8 sm:w-full rounded-lg;
}
.modal-header {
@apply mb-6;
.full-modal {
@apply px-6 pt-4 pb-2;
}
.not-full-modal {
@apply pt-4 pb-2;
}
.model-title {
@apply font-medium font-lexend text-zinc-900;
}
.modal-description {
@apply text-gray-400 font-lexend font-light;
}
}
.checklist-card {
@apply w-72 min-w-72 rounded-lg;
.checklist-card-header {
@apply px-4 py-2 flex items-center justify-between text-white truncate rounded-t-lg;
}
.checklist-card-body {
@apply bg-gray-100 rounded-b-lg;
.checklist-card-body-project {
@apply w-full text-xs mb-2 flex items-start gap-x-2 px-4 py-2;
}
.checklist-body-add-task {
@apply px-5 py-2.5 cursor-pointer flex items-center text-center justify-center;
}
}
}
.checklist-listview-head-bar {
@apply bg-gray-50 px-5 py-2.5 rounded-lg;
.head-bar-grid {
@apply grid grid-cols-12 grid-rows-1 gap-6;
}
}
.checklist-listview-container {
@apply space-y-5 mt-5 min-h-screen;
}
.dp__btn {
@apply !font-lexend !text-xs;
}
.dp__menu {
@apply !rounded-b-3xl !rounded-tr-3xl !font-lexend;
}
.dp__action_row {
@apply !px-4 !py-3;
}
.dp__action_cancel {
@apply !font-lexend !px-4 !py-4
}
.dp__action_select {
@apply !font-lexend !px-4 !py-4
}
.badge {
@apply inline-flex items-center gap-1.5 rounded-full bg-white px-2.5 py-0.5 text-[11px] text-zinc-700 ring-1 ring-zinc-200;
}
/* === PrimeVue Tooltip: global width/word-wrap + visuals (aw-tooltip) ===
Ensures tooltips don't collapse to 1-char width after horizontal scroll.
Applied to any tooltip created with directive option { class: 'aw-tooltip' }.
*/
.aw-tooltip {
/* Tunable via CSS var if needed per scope */
--aw-tooltip-min-width: 12ch; /* ensures ~10–14 chars fit per line */
--aw-tooltip-max-width: 24rem; /* ≈ Tailwind max-w-sm */
z-index: 9999 !important; /* ensure tooltip renders above HeadlessUI Float portals */
}
/* PrimeVue-Theme deckelt .p-tooltip auf 12.5rem — hier gilt stattdessen die CSS-Variable */
.aw-tooltip.p-tooltip {
max-width: var(--aw-tooltip-max-width);
}
/* Breitere Variante für erklärende Tooltips (per tooltip-css-class="aw-tooltip-wide") */
.aw-tooltip-wide {
--aw-tooltip-max-width: 32rem;
}
/* Aufzählungen in HTML-Tooltips (allow-html): echte Liste mit hängendem Einzug */
.aw-tooltip .p-tooltip-text ul {
margin: 0.375rem 0 0;
padding-left: 1.1rem;
list-style: disc;
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.aw-tooltip .p-tooltip-text {
display: inline-block;
min-width: var(--aw-tooltip-min-width);
max-width: var(--aw-tooltip-max-width);
white-space: pre-line; /* wie normal, erhält aber \n → mehrzeilige Tooltips (z.B. Aufzählungen) */
overflow-wrap: anywhere; /* modern, allows breaking long tokens */
word-break: break-word; /* fallback for older browsers */
/* Visuals aligned with previous Tailwind classes */
background-color: var(--color-primary, #222);
color: #fff; /* contrast text */
font-weight: 500; /* ~font-medium */
font-size: 0.75rem; /* ~text-xs */
padding: 0.25rem 0.5rem; /* ~px-2 py-1 */
border: 1px solid #1f2937; /* ~border-gray-800 */
border-radius: 0.5rem; /* rounded-md/lg */
box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1); /* ~shadow-lg */
}
/* ============================================================
Schichtplan — Personenbereich (unteres Panel in ShiftPlan.vue)
Zwei Farbwelten über EINEN Variablensatz (--uo-*): Standard ist die
bisherige dunkle Fläche (Band-Ink), `.user-overview-light` schaltet
pro Person auf die helle Design-Fläche um. Die Werte auf :root sind
bewusst die Dunkel-Werte, damit geteilte Komponenten (DragElement im
Projekt-Schichten-Tab) außerhalb des Panels unverändert aussehen.
Statusfarben: auf Dunkel die hellen *-border-Töne (lesbar auf Ink),
auf Hell die kräftigen Basistöne (AA auf Weiß).
============================================================ */
:root {
--uo-bg: var(--color-surface-inverse);
--uo-text: #FFFFFF;
--uo-text-muted: rgba(255, 255, 255, 0.75);
--uo-text-subtle: rgba(255, 255, 255, 0.6);
--uo-line: rgba(255, 255, 255, 0.3);
--uo-line-strong: rgba(255, 255, 255, 0.4);
--uo-chip-bg: rgba(255, 255, 255, 0.1);
--uo-chip-text: var(--color-text-inverse);
--uo-cell-bg: rgba(244, 245, 246, 0.1);
--uo-cell-ring: transparent;
--uo-hover-ring: rgba(255, 255, 255, 0.4);
--uo-active-ring: rgba(255, 255, 255, 0.7);
--uo-success-text: var(--color-success-border);
--uo-danger-text: var(--color-danger-border);
--uo-warning-text: var(--color-warning-border);
--uo-orange-text: #F08B32;
--uo-teal-text: var(--color-special-teal-border);
--uo-staff-none-bg: rgba(255, 255, 255, 0.1);
--uo-staff-none-text: rgba(255, 255, 255, 0.5);
--uo-staff-low-bg: color-mix(in srgb, var(--color-danger) 25%, transparent);
--uo-staff-low-text: var(--color-danger-surface);
--uo-staff-partial-bg: color-mix(in srgb, var(--color-warning) 25%, transparent);
--uo-staff-partial-text: var(--color-warning-surface);
--uo-staff-full-bg: color-mix(in srgb, var(--color-success) 25%, transparent);
--uo-staff-full-text: var(--color-success-surface);
--uo-kw-attention-bg: color-mix(in srgb, var(--color-warning) 50%, transparent);
--uo-kw-attention-ring: color-mix(in srgb, var(--color-warning-border) 70%, transparent);
--uo-kw-requested-bg: color-mix(in srgb, var(--color-accent-500) 50%, transparent);
--uo-kw-requested-ring: color-mix(in srgb, var(--color-accent-200) 70%, transparent);
--uo-kw-committed-bg: color-mix(in srgb, var(--color-success) 50%, transparent);
--uo-kw-committed-ring: color-mix(in srgb, var(--color-success-border) 70%, transparent);
}
.user-overview-light {
--uo-bg: var(--color-surface-canvas);
--uo-text: var(--color-text);
--uo-text-muted: var(--color-text-muted);
--uo-text-subtle: var(--color-text-subtle);
--uo-line: var(--color-border);
--uo-line-strong: var(--color-border-strong);
--uo-chip-bg: rgba(28, 31, 36, 0.08);
--uo-chip-text: var(--color-text);
--uo-cell-bg: var(--color-surface);
--uo-cell-ring: var(--color-border-subtle);
--uo-hover-ring: var(--color-border-strong);
--uo-active-ring: var(--color-text);
--uo-success-text: var(--color-success);
--uo-danger-text: var(--color-danger);
--uo-warning-text: var(--color-warning);
--uo-orange-text: var(--color-special-orange);
--uo-teal-text: var(--color-special-teal);
--uo-staff-none-bg: rgba(28, 31, 36, 0.08);
--uo-staff-none-text: var(--color-text-subtle);
--uo-staff-low-bg: var(--color-danger-surface);
--uo-staff-low-text: var(--color-danger);
--uo-staff-partial-bg: var(--color-warning-surface);
--uo-staff-partial-text: var(--color-warning);
--uo-staff-full-bg: var(--color-success-surface);
--uo-staff-full-text: var(--color-success);
--uo-kw-attention-bg: var(--color-warning-surface);
--uo-kw-attention-ring: var(--color-warning-border);
--uo-kw-requested-bg: var(--color-accent-50);
--uo-kw-requested-ring: var(--color-accent-200);
--uo-kw-committed-bg: var(--color-success-surface);
--uo-kw-committed-ring: var(--color-success-border);
}