hnzio/mood-tracking
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 7 Wiki Activity

Refine tabbar delete and sleep visuals

Browse Source
This commit is contained in:
Florian Heinz
2026-05-21 19:06:15 +02:00
parent fef6c2407d
commit d4d2313b01
2 changed files with 63 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/app.css
+60 -20
View File
@@ -1010,8 +1010,11 @@ body.page-dashboard .content {
}
.sleep-phase-bar__fill {
position: absolute;
inset: 0 auto 0 0;
display: block;
height: 100%;
width: var(--sleep-actual-left, 0);
min-width: 0.28rem;
max-width: 100%;
overflow: hidden;
@@ -4740,23 +4743,22 @@ input[type="range"] {
.ios-tabbar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
left: 0.9rem;
right: 0.9rem;
bottom: max(0.8rem, env(safe-area-inset-bottom));
z-index: 120;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
min-height: calc(5.05rem + env(safe-area-inset-bottom));
padding: 0.42rem 0.75rem calc(0.42rem + env(safe-area-inset-bottom));
border: 0;
border-top: 1px solid rgba(255, 255, 255, 0.24);
border-radius: 1.8rem 1.8rem 0 0;
gap: 0.26rem;
min-height: 4.45rem;
padding: 0.48rem;
border: 1px solid rgba(255, 255, 255, 0.32);
border-radius: 2.05rem;
background:
radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.34), transparent 38%),
linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.07)),
rgba(13, 22, 35, 0.5);
box-shadow: 0 -18px 70px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.26);
radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.3), transparent 46%),
linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.07)),
rgba(35, 45, 60, 0.68);
box-shadow: 0 18px 55px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.28);
backdrop-filter: blur(38px) saturate(1.8) contrast(1.06);
-webkit-backdrop-filter: blur(38px) saturate(1.8) contrast(1.06);
}
@@ -4766,8 +4768,8 @@ input[type="range"] {
place-items: center;
align-content: center;
gap: 0.18rem;
min-height: 3.7rem;
border-radius: 1.25rem;
min-height: 3.42rem;
border-radius: 1.55rem;
color: rgba(239, 247, 255, 0.68);
font-size: 0.72rem;
font-weight: 590;
@@ -4776,10 +4778,12 @@ input[type="range"] {
}
.ios-tabbar a.active {
background: transparent;
color: #64d2ff;
background:
radial-gradient(circle at 30% 0%, rgba(255, 255, 255, 0.4), transparent 52%),
linear-gradient(180deg, rgba(100, 210, 255, 0.72), rgba(10, 132, 255, 0.58));
color: #fff;
transform: translateY(-1px);
box-shadow: none;
box-shadow: 0 10px 30px rgba(10, 132, 255, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.38);
}
.ios-tabbar__icon {
@@ -4951,6 +4955,40 @@ input[type="range"] {
font-weight: 560;
}
.timeline-card__delete .trash-button span {
position: relative;
display: block;
width: 0.98rem;
height: 1.08rem;
margin-top: 0.1rem;
border: 2px solid currentColor;
border-top: 0;
border-radius: 0 0 0.18rem 0.18rem;
}
.timeline-card__delete .trash-button span::before {
content: "";
position: absolute;
left: -0.18rem;
right: -0.18rem;
top: -0.34rem;
height: 0.16rem;
border-radius: 999px;
background: currentColor;
}
.timeline-card__delete .trash-button span::after {
content: "";
position: absolute;
left: 50%;
top: -0.55rem;
width: 0.46rem;
height: 0.16rem;
border-radius: 999px;
background: currentColor;
transform: translateX(-50%);
}
.timeline-card--with-image .timeline-card__time-chip {
top: 1.18rem;
right: 4.7rem;
@@ -4999,8 +5037,10 @@ input[type="range"] {
}
.ios-tabbar a.active {
background: transparent;
color: #007aff;
background:
radial-gradient(circle at 30% 0%, rgba(255, 255, 255, 0.78), transparent 52%),
linear-gradient(180deg, rgba(100, 210, 255, 0.68), rgba(0, 122, 255, 0.46));
color: #fff;
}
.ios-tabbar__icon {