diff --git a/frontend/src/app.css b/frontend/src/app.css index eb93c94..e60fc97 100644 --- a/frontend/src/app.css +++ b/frontend/src/app.css @@ -1181,6 +1181,238 @@ button.capture-shell__nav-item { background: transparent; } +/* + * Mobile (≤1023px): geringerer Platzbedarf bei Schaltern und Menüs. + * Haupt- + Sub-Navigation: horizontale, scrollbare Chip-Leisten (kein Umbruch). + */ +@media (max-width: 1023px) { + .app-main { + padding-top: 12px; + padding-left: max(12px, env(safe-area-inset-left, 0px)); + padding-right: max(12px, env(safe-area-inset-right, 0px)); + } + + .page-title { + font-size: 1.125rem; + margin-bottom: 10px; + letter-spacing: -0.02em; + } + + .btn { + padding: 8px 14px; + font-size: 13px; + border-radius: 9px; + } + + .card { + padding: 12px 14px; + } + + .card + .card { + margin-top: 10px; + } + + /* globale Tab-Zeile: bei Bedarf horizontal scrollbar */ + .tabs { + display: flex; + flex-wrap: nowrap; + overflow-x: auto; + overflow-y: hidden; + gap: 2px; + padding: 2px; + margin-bottom: 12px; + border-radius: 8px; + -webkit-overflow-scrolling: touch; + scrollbar-width: none; + } + + .tabs::-webkit-scrollbar { + display: none; + } + + .tab { + flex: 0 0 auto; + min-height: 38px; + padding: 6px 12px; + font-size: 12px; + border-radius: 7px; + } + + /* Capture-Shell / AppSubnavShell: kompakte Chips + Scroll-Snap */ + .capture-shell__layout { + gap: 10px; + } + + .capture-shell__nav-wrap { + width: 100%; + max-width: none; + margin-left: calc(-1 * max(12px, env(safe-area-inset-left, 0px))); + margin-right: calc(-1 * max(12px, env(safe-area-inset-right, 0px))); + padding-left: max(12px, env(safe-area-inset-left, 0px)); + padding-right: max(12px, env(safe-area-inset-right, 0px)); + box-sizing: border-box; + } + + .capture-shell__nav { + gap: 5px; + padding-bottom: 4px; + scroll-snap-type: x proximity; + scroll-padding-inline: max(12px, env(safe-area-inset-left, 0px)); + } + + .capture-shell__nav-item { + padding: 6px 11px; + min-height: 36px; + font-size: 12px; + font-weight: 600; + gap: 5px; + border-radius: 999px; + border-width: 1px; + scroll-snap-align: start; + box-sizing: border-box; + } + + .capture-shell__nav-item svg { + width: 15px !important; + height: 15px !important; + } + + /* Admin-Seitenleiste oben: dieselbe Chip-Idee wie Subnav */ + .admin-top-nav { + flex-wrap: nowrap; + overflow-x: auto; + overflow-y: hidden; + gap: 6px; + border-bottom: none; + margin-bottom: 14px; + padding-bottom: 4px; + margin-left: calc(-1 * max(12px, env(safe-area-inset-left, 0px))); + margin-right: calc(-1 * max(12px, env(safe-area-inset-right, 0px))); + padding-left: max(12px, env(safe-area-inset-left, 0px)); + padding-right: max(12px, env(safe-area-inset-right, 0px)); + -webkit-overflow-scrolling: touch; + scrollbar-width: none; + scroll-snap-type: x proximity; + } + + .admin-top-nav::-webkit-scrollbar { + display: none; + } + + .admin-top-nav__link { + flex: 0 0 auto; + scroll-snap-align: start; + min-height: 36px; + padding: 6px 11px; + font-size: 12px; + font-weight: 600; + border-bottom: none; + margin-bottom: 0; + border-radius: 999px; + background: var(--surface2); + border: 1px solid var(--border2); + gap: 5px; + box-sizing: border-box; + align-items: center; + } + + .admin-top-nav__link svg { + width: 15px; + height: 15px; + flex-shrink: 0; + } + + .admin-top-nav__link--active { + background: var(--accent); + color: #fff !important; + border-color: var(--accent); + } + + .admin-top-nav__link:hover { + background: var(--surface); + color: var(--text1); + } + + .admin-top-nav__link--active:hover { + color: #fff !important; + background: color-mix(in srgb, var(--accent) 90%, #000); + } + + /* Segment-Schalter (Liste/Kalender, Gruppe/Verein, Rahmen-Tabs) */ + .planning-segment-group { + border-radius: 8px; + } + + .planning-segment-group__btn { + padding: 6px 10px; + font-size: 0.78rem; + min-height: 34px; + box-sizing: border-box; + } + + .planning-segment-group--comfort .planning-segment-group__btn { + padding: 7px 11px; + font-size: 0.8125rem; + min-height: 36px; + } + + .planning-segment-group--equal .planning-segment-group__btn { + min-width: 0; + flex: 1 1 0; + } + + .framework-edit__tabbar { + padding: 4px 0 8px; + margin-bottom: 10px; + gap: 6px; + } + + .framework-edit__tabbar .planning-segment-group__btn { + padding: 6px 8px; + font-size: 11px; + line-height: 1.25; + min-height: 34px; + } + + .training-planning-create__cta, + .training-planning-create__secondary { + min-height: 42px; + padding-left: 1rem; + padding-right: 1rem; + } + + .admin-assignments-wrap { + padding: 14px; + } + + .admin-assignments-wrap__title { + font-size: 1.05rem; + } + + /* Framework-Slot-Chips (falls sehr breit): leicht kompakter */ + .framework-slot-chip { + padding: 7px 12px; + font-size: 0.8rem; + } + + /* Untere Hauptnavigation: etwas kompakter */ + .bottom-nav { + gap: 0; + padding-top: 5px; + } + + .nav-item { + min-width: 52px; + max-width: 90px; + padding: 1px 2px 3px; + gap: 2px; + } + + .nav-item span { + font-size: 9.5px; + } +} + /* Trainingsplanung: kompakte Segmente (Gruppe / Verein) */ .planning-segment-group { display: inline-flex;