diff --git a/assets/css/app.css b/assets/css/app.css index 3b92ccf..992b235 100644 --- a/assets/css/app.css +++ b/assets/css/app.css @@ -890,7 +890,7 @@ body.page-dashboard .content { display: flex; min-height: 2.35rem; margin-top: 1.55rem; - overflow: hidden; + overflow: visible; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.08); @@ -898,13 +898,14 @@ body.page-dashboard .content { .sleep-phase-bar__target { position: absolute; - left: var(--sleep-optimal-left, 100%); + left: min(var(--sleep-optimal-left, 100%), calc(100% - 2px)); top: -1.28rem; bottom: 0; width: 0; 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; } .sleep-phase-bar__target span { @@ -924,7 +925,8 @@ body.page-dashboard .content { align-items: center; justify-content: center; gap: 0.25rem; - min-width: max-content; + min-width: 0; + flex-basis: 0; padding: 0.35rem 0.65rem; color: rgba(255, 255, 255, 0.94); font-size: 0.82rem; @@ -934,6 +936,7 @@ body.page-dashboard .content { } .sleep-phase-bar__segment--deep { + border-radius: 999px 0 0 999px; background: linear-gradient(135deg, rgba(44, 82, 180, 0.92), rgba(38, 52, 124, 0.92)); } @@ -948,9 +951,14 @@ body.page-dashboard .content { .sleep-phase-bar__segment--rest { min-width: 0; padding: 0; + border-radius: 0 999px 999px 0; background: rgba(255, 255, 255, 0.1); } +.sleep-phase-bar__segment:last-of-type { + border-radius: 0 999px 999px 0; +} + .media-lightbox[hidden] { display: none; } @@ -2297,7 +2305,7 @@ body.page-dashboard .content { .timeline-card--with-image .timeline-card__time-chip, .timeline-card--with-image .timeline-card__delete { - top: 0.75rem; + top: 2.05rem; } .timeline-card--with-image .timeline-card__time-chip { @@ -2310,7 +2318,7 @@ body.page-dashboard .content { } .timeline-card--with-image .timeline-card__delete { - right: 0.75rem; + right: 1.6rem; } .timeline-card__delete .ghost-button { @@ -2333,8 +2341,8 @@ body.page-dashboard .content { } .timeline-card--with-image .signal-row { - top: 0.75rem; - left: 0.75rem; + top: 2.05rem; + left: 2.05rem; } .timeline-card .signal-pill {