diff --git a/assets/css/style.css b/assets/css/style.css index 20bab1c..591c198 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -14,10 +14,51 @@ body { color: var(--text-color); } +main { + min-height: 100vh; +} + .app-header { background: linear-gradient(135deg, var(--person-accent, #4a90e2) 0%, #2c5282 100%); } +/* Header top: title (left) · balance + persona (right from md up); mobile: second row = persona menu */ +.app-header-top { + display: grid; + grid-template-columns: minmax(0, 1fr) auto; + column-gap: 0.75rem; + row-gap: 0.5rem; + align-items: center; +} + +.app-header-brand { + grid-column: 1; + grid-row: 1; + min-width: 0; +} + +.app-header-actions { + grid-column: 2; + grid-row: 1; + justify-self: end; + max-width: 100%; +} + +.app-header-persona-mobile { + grid-column: 1 / -1; + grid-row: 2; +} + +@media (min-width: 768px) { + .app-header-persona-mobile { + display: none; + } + + .app-header-top { + row-gap: 0.35rem; + } +} + .persona-chip { min-height: 2.75rem; touch-action: manipulation; @@ -28,6 +69,11 @@ body { box-shadow: 0 0 0 0.15rem rgba(255, 255, 255, 0.35); } +.persona-chip-mobile.active { + font-weight: 600; + background-color: rgba(74, 144, 226, 0.14); +} + .family-hub-body .card { border-color: var(--border-color); } @@ -65,26 +111,74 @@ body { padding: 20px; } -/* Tab Styles */ -.tabs { +/* Header tab nav */ +.app-header.app-header-with-tabs .tabs { display: flex; - border-bottom: 1px solid var(--border-color); - margin-bottom: 20px; + flex-wrap: wrap; + gap: 0.5rem; + margin-top: 0.35rem; + margin-bottom: 0; } -.tab { - padding: 10px 20px; - cursor: pointer; +@media (min-width: 768px) { + .app-header.app-header-with-tabs .app-header-top { + margin-bottom: 0.35rem; + } + + .app-header.app-header-with-tabs .tabs { + margin-top: 1.1rem; + } +} + +.app-header .tab { + display: inline-flex; + align-items: center; + gap: 0.45rem; + min-height: 2.5rem; + padding: 0.45rem 0.9rem; + border-radius: 999px; border: 1px solid transparent; - border-bottom: none; - margin-right: 5px; + text-decoration: none; + font-weight: 500; + transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } -.tab.active { - background: white; - border-color: var(--border-color); - border-bottom: 1px solid white; - margin-bottom: -1px; +body.header-tone-dark .app-header .tab { + color: rgba(255, 255, 255, 0.92); + background: rgba(255, 255, 255, 0.12); + border-color: rgba(255, 255, 255, 0.28); +} + +body.header-tone-dark .app-header .tab:hover, +body.header-tone-dark .app-header .tab:focus-visible { + color: #fff; + background: rgba(255, 255, 255, 0.2); + border-color: rgba(255, 255, 255, 0.45); +} + +body.header-tone-dark .app-header .tab.active { + color: #1f2a37; + background: rgba(255, 255, 255, 0.92); + border-color: rgba(255, 255, 255, 0.96); +} + +body.header-tone-light .app-header .tab { + color: #1f2a37; + background: rgba(255, 255, 255, 0.5); + border-color: rgba(31, 42, 55, 0.25); +} + +body.header-tone-light .app-header .tab:hover, +body.header-tone-light .app-header .tab:focus-visible { + color: #111827; + background: rgba(255, 255, 255, 0.7); + border-color: rgba(31, 42, 55, 0.4); +} + +body.header-tone-light .app-header .tab.active { + color: #fff; + background: #1f2a37; + border-color: #1f2a37; } /* Mobile Responsive */ @@ -92,14 +186,22 @@ body { .container { padding: 10px; } - - .tabs { - flex-direction: column; + + .app-header h1.h3 { + font-size: 1.3rem; } - - .tab { - margin-right: 0; - margin-bottom: 5px; + + .user-balance { + max-width: 58vw; + } + + .app-header .tabs { + gap: 0.4rem; + } + + .app-header .tab { + padding: 0.4rem 0.8rem; + min-height: 2.3rem; } } @@ -110,3 +212,28 @@ body { .calendar-agenda-today { background-color: rgba(74, 144, 226, 0.06); } + +/* Calendar tab: Google column first; side-by-side 70% / 30% from xl up when embed is configured */ +@media (min-width: 1200px) { + .calendar-tab-layout-split > .calendar-tab-google { + flex: 0 0 70%; + max-width: 70%; + width: 70%; + } + + .calendar-tab-layout-split > .calendar-tab-agenda { + flex: 0 0 30%; + max-width: 30%; + width: 30%; + } +} + +.calendar-tv-view .calendar-embed iframe { + min-height: 70vh; +} + +@media (min-width: 1200px) { + .calendar-tv-view .calendar-embed iframe { + min-height: 78vh; + } +} diff --git a/includes/header.php b/includes/header.php index e262f29..eddfc4d 100644 --- a/includes/header.php +++ b/includes/header.php @@ -9,33 +9,72 @@ - -
+ + + +
-
-

Family Hub

-
- - 0): ?> -
- Balance
- - + +
+

Family Hub

+
+ + Add people in Family settings. + + +
+ Balance
+ + +
+ + - + + 0): ?> + +
+
+ + + +
+