diff --git a/assets/css/app.css b/assets/css/app.css index 7bfa793..55e4e4a 100644 --- a/assets/css/app.css +++ b/assets/css/app.css @@ -1004,6 +1004,16 @@ body.page-dashboard .content { background: rgba(255, 255, 255, 0.08); } +.sleep-phase-bar::before { + content: ""; + position: absolute; + inset: 0 auto 0 0; + width: var(--sleep-actual-width, 0); + min-width: 0.2rem; + border-radius: inherit; + background: linear-gradient(135deg, rgba(90, 188, 242, 0.9), rgba(44, 126, 190, 0.9)); +} + .sleep-phase-bar__fill { position: absolute; inset: 0 auto 0 0; @@ -1012,8 +1022,9 @@ body.page-dashboard .content { min-width: 0.18rem; overflow: hidden; border-radius: inherit; - background: linear-gradient(135deg, rgba(90, 188, 242, 0.9), rgba(44, 126, 190, 0.9)); + background: transparent; box-shadow: 0 12px 28px rgba(6, 16, 28, 0.2); + z-index: 1; } .sleep-phase-bar__target { @@ -1025,7 +1036,7 @@ body.page-dashboard .content { border-left: 2px solid rgba(255, 255, 255, 0.92); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45)); pointer-events: none; - z-index: 2; + z-index: 3; } .sleep-phase-bar__target span { @@ -1137,6 +1148,7 @@ body.page-dashboard .content { font-size: 0.68rem; transform: translateY(-50%); pointer-events: none; + z-index: 2; } .media-lightbox[hidden] { diff --git a/templates/pages/dashboard.php b/templates/pages/dashboard.php index 230d2d1..4ef5e41 100644 --- a/templates/pages/dashboard.php +++ b/templates/pages/dashboard.php @@ -112,6 +112,7 @@ $formatBalanceValue = static function (?array $entry) use ($settings): string { + @@ -220,7 +221,7 @@ $formatBalanceValue = static function (?array $entry) use ($settings): string { 0): ?> -
+
0): ?> ['Tief', 'deep'], 'rem' => ['REM', 'rem'], 'core' => ['Kern', 'core']] as $phase => [$label, $class]): ?>