/* ===== Ganztagsplaner Web – Design System ===== Farbpalette "Ocean Blue" identisch zur Desktop-Anwendung (GTP.Common\AppTheme.cs) */ :root { --gtp-primary: #2E9DE6; --gtp-primary-dark: #1976D2; --gtp-primary-light: #E3F2FD; --gtp-accent: #2ACACD; --gtp-bg: #ffffff; --gtp-surface: #ffffff; --gtp-border: #E0E0E0; --gtp-text: #212121; --gtp-text-muted: #666666; --gtp-danger: #F44336; --gtp-success: #4CAF50; --gtp-warning: #FF9800; --gtp-info: #2196F3; --gtp-warning-bg: #FFF3E0; --gtp-radius: 6px; --gtp-shadow: 0 1px 2px rgba(0, 0, 0, .06); /* Basisschrift: Browser-Standard 16px (früher 14px) – alle rem-Angaben skalieren mit */ --gtp-font-size: 16px; } /* ===== Farbthemes (Desktop: GTP.Common\AppTheme.cs, ThemeDefinitions) ===== Auswahl in der Administration; gespeichert per localStorage am . */ [data-theme="vibrant-purple"] { --gtp-primary: #8E44AD; --gtp-primary-dark: #6C3483; --gtp-primary-light: #F3E9F8; --gtp-accent: #1ABC9C; } [data-theme="fresh-green"] { --gtp-primary: #27AE60; --gtp-primary-dark: #1E8B4D; --gtp-primary-light: #E7F7EE; --gtp-accent: #F39C12; } [data-theme="sunset-orange"] { --gtp-primary: #E67E22; --gtp-primary-dark: #CA6F1E; --gtp-primary-light: #FCF0E4; --gtp-accent: #1ABC9C; } [data-theme="rose-pink"] { --gtp-primary: #E91E63; --gtp-primary-dark: #C2185B; --gtp-primary-light: #FCE4EC; --gtp-accent: #FF9800; } [data-theme="soft-rose"] { --gtp-primary: #FF8A9A; --gtp-primary-dark: #E67A8A; --gtp-primary-light: #FFEEF1; --gtp-accent: #FFB74D; } [data-theme="deep-ocean"] { --gtp-primary: #006064; --gtp-primary-dark: #004D40; --gtp-primary-light: #E0F2F3; --gtp-accent: #00BCD4; } [data-theme="radiant-yellow"] { --gtp-primary: #D4A80B; --gtp-primary-dark: #B7950B; --gtp-primary-light: #FCF6DC; --gtp-accent: #E67E22; } [data-theme="mystic-indigo"] { --gtp-primary: #4B0082; --gtp-primary-dark: #2E0854; --gtp-primary-light: #EFE6F8; --gtp-accent: #7F00FF; } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; font-family: "Segoe UI", system-ui, -apple-system, sans-serif; font-size: var(--gtp-font-size); line-height: 1.45; color: var(--gtp-text); background: var(--gtp-bg); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } h1 { font-size: 1.4rem; margin: 0 0 4px 0; line-height: 1.3; } h2 { font-size: 1.15rem; margin: 0 0 8px 0; line-height: 1.3; } a { color: var(--gtp-primary); } /* ===== Shell: Titelzeile + Menüleiste + Statusleiste (wie Desktop-Fenster) ===== */ .gtp-shell { display: flex; flex-direction: column; height: 100vh; overflow: hidden; background: #fff; } /* Titelzeile (entspricht der Fenster-Titelleiste: "Ganztagsplaner 2.1 - Lizenziert für ...") */ .gtp-titlebar { display: flex; align-items: center; gap: 8px; padding: 6px 14px; background: #fff; border-bottom: 1px solid var(--gtp-border); font-size: .875rem; color: var(--gtp-text-muted); } .gtp-titlebar .gtp-logo { width: 22px; height: 22px; border-radius: 4px; } .gtp-titlebar .spacer { flex: 1; } .gtp-username { font-size: .875rem; color: var(--gtp-text-muted); } .gtp-titlebar-link { display: inline-flex; align-items: center; gap: 4px; margin-left: 10px; padding: 2px 8px; border-radius: 4px; color: var(--gtp-text-muted); text-decoration: none; border: 1px solid var(--gtp-border); background: #fafafa; } .gtp-titlebar-link:hover { color: var(--gtp-primary-dark); border-color: var(--gtp-primary); background: #fff; } .gtp-titlebar-link.active { color: var(--gtp-primary-dark); border-color: var(--gtp-primary); font-weight: 600; } /* Menüleiste: schlichte Text-Tabs wie im Desktop */ .gtp-menubar { display: flex; align-items: center; flex-wrap: wrap; background: #fff; border-bottom: 1px solid var(--gtp-border); padding: 0 6px; } .gtp-tab { display: inline-flex; align-items: center; gap: 5px; color: var(--gtp-text); text-decoration: none; padding: 10px 14px 7px 14px; border-bottom: 3px solid transparent; font-weight: 400; font-size: .9375rem; white-space: nowrap; transition: background .12s; } .gtp-tab:hover { background: #F5F5F5; } .gtp-tab.active { border-bottom-color: var(--gtp-primary); color: var(--gtp-primary-dark); font-weight: 600; } .gtp-tab .gtp-icon { color: var(--gtp-primary); } .gtp-main { position: relative; flex: 1 1 auto; min-height: 60vh; overflow: auto; padding: 8px 10px; width: 100%; } .gtp-page { min-height: 40vh; } /* Sofort-Schleier nach Login (vor gtp.js) – verhindert Aufblitzen der Kinder-Seite */ html.gtp-entry-veil-pending::before { content: ""; position: fixed; inset: 0; z-index: 10000; background: var(--gtp-bg, #fff); pointer-events: all; } /* Willkommen nach Login: zentrierte Karte statt Toast */ .gtp-page-veil.is-welcome { z-index: 10001; background: radial-gradient(ellipse 80% 60% at 50% 40%, color-mix(in srgb, var(--gtp-primary-light) 70%, #fff) 0%, var(--gtp-bg, #fff) 70%); } .gtp-welcome-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; /* Feste Breite – kein Springen bei kurzem/langem Nachrichtentext */ width: min(440px, 88vw); max-width: min(440px, 88vw); box-sizing: border-box; padding: 36px 32px 32px; border-radius: 20px; background: rgba(255, 255, 255, 0.92); border: 1px solid color-mix(in srgb, var(--gtp-primary) 18%, transparent); box-shadow: 0 4px 24px color-mix(in srgb, var(--gtp-primary) 12%, transparent), 0 20px 48px rgba(15, 23, 42, 0.08); opacity: 0; transform: translateY(10px); /* kein scale – sonst wirkt die Karte kurz schmaler */ transition: opacity .45s ease, transform .45s ease; } .gtp-page-veil.is-covering .gtp-welcome-card { opacity: 1; transform: none; transition-delay: .08s; } .gtp-welcome-icon { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; color: var(--gtp-primary); background: linear-gradient(145deg, color-mix(in srgb, var(--gtp-primary-light) 90%, #fff), color-mix(in srgb, var(--gtp-accent) 25%, var(--gtp-primary-light))); box-shadow: 0 0 0 8px color-mix(in srgb, var(--gtp-primary) 10%, transparent); animation: gtp-welcome-pulse 2.8s ease-in-out infinite; } .gtp-welcome-icon svg { display: block; transform-origin: 50% 50%; animation: gtp-welcome-sparkle 2.8s ease-in-out infinite; } .gtp-welcome-kicker { font-size: 1.05rem; font-weight: 700; color: var(--gtp-text); letter-spacing: -0.01em; } .gtp-welcome-message { font-size: 1.05rem; font-weight: 500; line-height: 1.45; color: var(--gtp-text-muted); width: 100%; min-height: 2.9em; /* Platz für 2 Zeilen – weniger Höhen-Sprung bei Textwechsel */ } @keyframes gtp-welcome-pulse { 0%, 100% { transform: translateY(0) scale(1); box-shadow: 0 0 0 8px color-mix(in srgb, var(--gtp-primary) 10%, transparent); } 50% { transform: translateY(-3px) scale(1.04); box-shadow: 0 0 0 14px color-mix(in srgb, var(--gtp-primary) 6%, transparent); } } @keyframes gtp-welcome-sparkle { 0%, 100% { transform: rotate(-6deg) scale(1); opacity: 0.92; } 40% { transform: rotate(8deg) scale(1.08); opacity: 1; } 70% { transform: rotate(-2deg) scale(1.02); opacity: 0.96; } } @media (prefers-reduced-motion: reduce) { .gtp-welcome-icon, .gtp-welcome-icon svg { animation: none; } .gtp-welcome-card { transition: none; } } /* ===== Seitenwechsel: Vollbild-Schleier + Lade-Indikator (theme-aware) ===== */ .gtp-page-veil { position: fixed; inset: 0; z-index: 500; background: var(--gtp-bg, #fff); opacity: 0; pointer-events: none; display: flex; align-items: center; justify-content: center; transition: opacity .4s ease; } .gtp-page-veil.is-covering { opacity: 1; pointer-events: auto; transition: none; /* sofort deckend – kein Durchscheinen */ } /* Dünne Top-Fortschrittsleiste */ .gtp-page-veil-progress { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--gtp-primary-light); overflow: hidden; } .gtp-page-veil-progress-fill { position: absolute; top: 0; left: 0; height: 100%; width: 36%; background: linear-gradient(90deg, var(--gtp-primary), var(--gtp-accent)); border-radius: 0 2px 2px 0; animation: gtp-veil-slide 1.1s ease-in-out infinite; } .gtp-page-veil-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease; } .gtp-page-veil.is-covering .gtp-page-veil-inner { opacity: 1; transform: none; transition-delay: .1s; /* erst Fläche, dann Indikator */ } .gtp-page-veil-ring { width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--gtp-primary-light); border-top-color: var(--gtp-primary); border-right-color: var(--gtp-accent); animation: gtp-veil-spin .8s linear infinite; box-shadow: 0 0 0 6px var(--gtp-primary-light); } .gtp-page-veil-text { font-size: .88rem; font-weight: 500; color: var(--gtp-text-muted); letter-spacing: .01em; } @keyframes gtp-veil-spin { to { transform: rotate(360deg); } } @keyframes gtp-veil-slide { 0% { left: -40%; } 100% { left: 100%; } } @media (prefers-reduced-motion: reduce) { .gtp-page-veil, .gtp-page-veil.is-covering { transition: none; } .gtp-page-veil-inner { transition: none; opacity: 1; transform: none; } .gtp-page-veil-ring, .gtp-page-veil-progress-fill { animation: none; } .gtp-page-veil-ring { border-color: var(--gtp-primary); } } /* Globale Statusleiste unten (Desktop: Gradient-Border oben, Badge rechts) */ .gtp-statusbar-global { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 32px; padding: 0 12px; background: #fff; border-top: 2px solid var(--gtp-primary); border-image: linear-gradient(90deg, var(--gtp-primary), var(--gtp-accent)) 1; } .gtp-statusbar-right { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; min-width: 0; } .gtp-statusbar-date { font-size: .78rem; font-weight: 600; color: var(--gtp-text-muted); text-transform: capitalize; } .gtp-statusbar-image { display: inline-flex; align-items: center; flex-shrink: 0; padding: 1px 8px; border-radius: 4px; border: 1px solid var(--gtp-border, #d0d7e2); background: #f4f6f8; font-size: .72rem; font-weight: 500; font-family: inherit; color: var(--gtp-text-muted); text-transform: none; letter-spacing: 0; white-space: nowrap; opacity: 1; } .db-badge { display: inline-flex; align-items: center; gap: 6px; border-radius: 12px; padding: 2px 10px; font-size: .75rem; font-weight: 600; color: var(--gtp-info); border: 1px solid rgba(33, 150, 243, .4); background: rgba(33, 150, 243, .08); white-space: nowrap; } /* ===== Ribbon (wie Telerik RadRibbonView im Desktop) ===== */ .gtp-ribbon { display: flex; align-items: stretch; flex-wrap: wrap; background: #fff; border: 1px solid var(--gtp-border); border-radius: 4px 4px 0 0; padding: 2px 2px 0 2px; /* Kein overflow:auto – das würde die Dropdown-Menüs abschneiden */ } .ribbon-group { display: flex; flex-direction: column; padding: 0 4px; border-right: 1px solid #EEEEEE; } .ribbon-group:last-child { border-right: none; } .ribbon-buttons { display: flex; gap: 4px; flex: 1; align-items: stretch; } .ribbon-buttons > .dropdown { flex: 0 0 auto; } .ribbon-btn { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 5px; min-width: 72px; max-width: 148px; padding: 8px 10px 5px 10px; background: none; border: none; border-radius: 4px; cursor: pointer; font-family: inherit; font-size: .82rem; line-height: 1.2; color: var(--gtp-text); text-align: center; white-space: normal; overflow: hidden; flex: 0 0 auto; } .ribbon-btn > span { display: block; max-width: 100%; overflow-wrap: break-word; hyphens: auto; } .ribbon-btn .gtp-icon { color: var(--gtp-primary); } .ribbon-btn:hover { background: var(--gtp-primary-light); } .ribbon-btn.is-active { background: var(--gtp-primary-light); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gtp-primary) 35%, transparent); color: var(--gtp-primary-dark); font-weight: 600; } .ribbon-btn.is-active .gtp-icon { color: var(--gtp-primary-dark); } .ribbon-btn:disabled { color: #BDBDBD; cursor: default; background: none; } .ribbon-btn:disabled .gtp-icon { color: #BDBDBD; } .ribbon-btn .chevron { color: var(--gtp-text-muted); margin-top: -2px; } .ribbon-group-label { text-align: center; font-size: .78rem; color: var(--gtp-text-muted); padding: 2px 2px 3px 2px; white-space: nowrap; } /* Eingabefelder und Badges in einer Ribbon-Gruppe nicht auf volle Höhe ziehen (sonst wirken z. B. -Listen */ .gtp-combobox { position: relative; display: inline-block; width: 220px; max-width: 100%; vertical-align: middle; box-sizing: border-box; } .gtp-combobox-input { width: 100%; box-sizing: border-box; /* rechts immer Platz für ✕ + Chevron – sonst springt die Breite */ padding: 7px 48px 7px 10px; font: inherit; font-size: .86rem; color: var(--gtp-text); background: var(--gtp-surface); border: 1px solid var(--gtp-border); border-radius: 6px; outline: none; position: relative; z-index: 45; transition: border-color .12s ease, box-shadow .12s ease; text-overflow: ellipsis; } .gtp-combobox-input:focus, .gtp-combobox.open .gtp-combobox-input { border-color: var(--gtp-primary, #1F6FB2); box-shadow: 0 0 0 3px var(--gtp-primary-light, rgba(31, 111, 178, .15)); } .gtp-combobox-clear { position: absolute; right: 26px; top: 50%; transform: translateY(-50%); z-index: 46; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: none; border-radius: 4px; background: transparent; color: var(--gtp-text-muted); cursor: pointer; } .gtp-combobox-clear:hover { background: var(--gtp-primary-light, rgba(31, 111, 178, .12)); color: var(--gtp-text); } .gtp-combobox-chevron { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); color: var(--gtp-text-muted); pointer-events: none; z-index: 45; transition: transform .15s ease; } .gtp-combobox.open .gtp-combobox-chevron { transform: translateY(-50%) rotate(180deg); } .gtp-combobox-overlay { position: fixed; inset: 0; z-index: 40; } .gtp-combobox-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 50; min-width: 100%; max-height: 280px; overflow-y: auto; background: var(--gtp-surface); border: 1px solid var(--gtp-border); border-radius: 8px; box-shadow: 0 8px 24px rgba(16, 42, 67, .16); padding: 5px; } .gtp-combobox-option { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: .86rem; color: var(--gtp-text); white-space: normal; } .gtp-combobox-opt-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .gtp-combobox-opt-text { font-weight: 700; line-height: 1.3; } .gtp-combobox-opt-detail { font-size: .78rem; font-weight: 400; color: var(--gtp-text-muted); line-height: 1.3; } .gtp-combobox-option.highlighted, .gtp-combobox-option:hover { background: var(--gtp-primary-light); color: var(--gtp-primary-dark, #14497a); } .gtp-combobox-opt-icon { display: inline-flex; } .gtp-combobox-empty { padding: 10px 12px; font-size: .82rem; color: var(--gtp-text-muted); } .gtp-combobox-filter { width: 180px; } /* In Dialogen: Comboboxen füllen die Label-/Zeilenbreite (Massenbearbeitung A/B usw.) */ .modal-body .form-row > label { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 240px; } .modal-body .form-row > label .field-hint { font-size: .78rem; color: var(--gtp-text-muted); line-height: 1.3; } /* ToggleSwitch ist selbst ein