Use native sleep progress and iOS delete
This commit is contained in:
+26
-8
@@ -1009,15 +1009,31 @@ body.page-dashboard .content {
|
|||||||
background: rgba(255, 255, 255, 0.16);
|
background: rgba(255, 255, 255, 0.16);
|
||||||
}
|
}
|
||||||
|
|
||||||
.sleep-phase-bar__fill {
|
.sleep-phase-bar__progress {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inset: 0 auto 0 0;
|
inset: 0;
|
||||||
display: block;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: var(--sleep-actual-left, 0);
|
|
||||||
min-width: 0.28rem;
|
|
||||||
max-width: 100%;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
border: 0;
|
||||||
|
border-radius: inherit;
|
||||||
|
appearance: none;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sleep-phase-bar__progress::-webkit-progress-bar {
|
||||||
|
border-radius: inherit;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sleep-phase-bar__progress::-webkit-progress-value {
|
||||||
|
border-radius: inherit;
|
||||||
|
background: linear-gradient(90deg, #64d2ff, #0a84ff);
|
||||||
|
box-shadow: 0 0 18px rgba(10, 132, 255, 0.38);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sleep-phase-bar__progress::-moz-progress-bar {
|
||||||
border-radius: inherit;
|
border-radius: inherit;
|
||||||
background: linear-gradient(90deg, #64d2ff, #0a84ff);
|
background: linear-gradient(90deg, #64d2ff, #0a84ff);
|
||||||
box-shadow: 0 0 18px rgba(10, 132, 255, 0.38);
|
box-shadow: 0 0 18px rgba(10, 132, 255, 0.38);
|
||||||
@@ -4949,10 +4965,12 @@ input[type="range"] {
|
|||||||
min-width: 2.85rem;
|
min-width: 2.85rem;
|
||||||
min-height: 2.85rem;
|
min-height: 2.85rem;
|
||||||
border-radius: 999px;
|
border-radius: 999px;
|
||||||
background: rgba(242, 242, 247, 0.92);
|
border-color: rgba(255, 255, 255, 0.48);
|
||||||
color: rgba(28, 28, 30, 0.86);
|
background: #ff3b30;
|
||||||
|
color: #fff;
|
||||||
font-size: 1.05rem;
|
font-size: 1.05rem;
|
||||||
font-weight: 560;
|
font-weight: 560;
|
||||||
|
box-shadow: 0 10px 26px rgba(255, 59, 48, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.28);
|
||||||
}
|
}
|
||||||
|
|
||||||
.timeline-card__delete .trash-button span {
|
.timeline-card__delete .trash-button span {
|
||||||
|
|||||||
@@ -222,7 +222,7 @@ $formatBalanceValue = static function (?array $entry) use ($settings): string {
|
|||||||
|
|
||||||
<?php if ($eventType === 'sleep' && $sleepActualTotal > 0): ?>
|
<?php if ($eventType === 'sleep' && $sleepActualTotal > 0): ?>
|
||||||
<div class="sleep-phase-bar" aria-label="Schlafdauer" style="--sleep-optimal-left: <?= e((string) $sleepOptimalPercent) ?>%; --sleep-actual-left: <?= e((string) $sleepActualPercent) ?>%">
|
<div class="sleep-phase-bar" aria-label="Schlafdauer" style="--sleep-optimal-left: <?= e((string) $sleepOptimalPercent) ?>%; --sleep-actual-left: <?= e((string) $sleepActualPercent) ?>%">
|
||||||
<span class="sleep-phase-bar__fill" aria-hidden="true"></span>
|
<progress class="sleep-phase-bar__progress" value="<?= e((string) $sleepActualTotal) ?>" max="<?= e((string) $sleepBarTotal) ?>"><?= e(format_duration_hours($sleepActualTotal)) ?></progress>
|
||||||
<span class="sleep-phase-bar__target"><span><?= e(format_duration_hours($optimalSleepHours)) ?></span></span>
|
<span class="sleep-phase-bar__target"><span><?= e(format_duration_hours($optimalSleepHours)) ?></span></span>
|
||||||
</div>
|
</div>
|
||||||
<div class="sleep-phase-summary"><span><?= e(format_duration_hours($sleepActualTotal)) ?></span><span>Ziel <?= e(format_duration_hours($optimalSleepHours)) ?></span></div>
|
<div class="sleep-phase-summary"><span><?= e(format_duration_hours($sleepActualTotal)) ?></span><span>Ziel <?= e(format_duration_hours($optimalSleepHours)) ?></span></div>
|
||||||
|
|||||||
Reference in New Issue
Block a user