your personal website on atproto - mirror
blento.app
flo-bit.dev
Merge pull request #62 from unbedenklich/fix-time-color-background
fixed timer color
+9
-12
src/lib/cards/TimerCard/TimerCard.svelte
+9
-12
src/lib/cards/TimerCard/TimerCard.svelte
···
88
class="text-base-900 dark:text-base-100 accent:text-base-900 flex items-center text-3xl font-bold @xs:text-4xl @sm:text-5xl @md:text-6xl @lg:text-7xl"
89
style="font-variant-numeric: tabular-nums;"
90
>
91
-
<NumberFlow value={clockHours} format={{ minimumIntegerDigits: 2 }} trend={1} />
92
-
<span class="text-base-400 dark:text-base-500 mx-0.5 @sm:mx-1">:</span>
93
<NumberFlow
94
value={clockMinutes}
95
format={{ minimumIntegerDigits: 2 }}
96
digits={{ 1: { max: 5 } }}
97
trend={1}
98
/>
99
-
<span class="text-base-400 dark:text-base-500 mx-0.5 @sm:mx-1">:</span>
100
<NumberFlow
101
value={clockSeconds}
102
format={{ minimumIntegerDigits: 2 }}
···
121
>
122
{#if eventDays > 0}
123
<div class="flex flex-col items-center">
124
-
<NumberFlow
125
-
value={eventDays}
126
-
trend={-1}
127
-
class="text-3xl font-bold @xs:text-4xl @sm:text-5xl @md:text-6xl @lg:text-7xl"
128
-
/>
129
-
<span class="text-base-500 dark:text-base-400 text-xs @sm:text-sm">days</span>
130
</div>
131
{/if}
132
<div class="flex flex-col items-center">
···
136
format={{ minimumIntegerDigits: 2 }}
137
class="text-3xl font-bold @xs:text-4xl @sm:text-5xl @md:text-6xl @lg:text-7xl"
138
/>
139
-
<span class="text-base-500 dark:text-base-400 text-xs @sm:text-sm">hrs</span>
140
</div>
141
<div class="flex flex-col items-center">
142
<NumberFlow
···
146
digits={{ 1: { max: 5 } }}
147
class="text-3xl font-bold @xs:text-4xl @sm:text-5xl @md:text-6xl @lg:text-7xl"
148
/>
149
-
<span class="text-base-500 dark:text-base-400 text-xs @sm:text-sm">min</span>
150
</div>
151
<div class="flex flex-col items-center">
152
<NumberFlow
···
156
digits={{ 1: { max: 5 } }}
157
class="text-3xl font-bold @xs:text-4xl @sm:text-5xl @md:text-6xl @lg:text-7xl"
158
/>
159
-
<span class="text-base-500 dark:text-base-400 text-xs @sm:text-sm">sec</span>
160
</div>
161
</div>
162
</NumberFlowGroup>
···
88
class="text-base-900 dark:text-base-100 accent:text-base-900 flex items-center text-3xl font-bold @xs:text-4xl @sm:text-5xl @md:text-6xl @lg:text-7xl"
89
style="font-variant-numeric: tabular-nums;"
90
>
91
+
<NumberFlow value={clockHours} format={{ minimumIntegerDigits: 2 }} />
92
+
<span class="text-base-400 dark:text-base-500 accent:text-accent-950 mx-0.5">:</span>
93
<NumberFlow
94
value={clockMinutes}
95
format={{ minimumIntegerDigits: 2 }}
96
digits={{ 1: { max: 5 } }}
97
trend={1}
98
/>
99
+
<span class="text-base-400 dark:text-base-500 accent:text-accent-950 mx-0.5">:</span>
100
<NumberFlow
101
value={clockSeconds}
102
format={{ minimumIntegerDigits: 2 }}
···
121
>
122
{#if eventDays > 0}
123
<div class="flex flex-col items-center">
124
+
<NumberFlow value={eventDays} trend={-1} class="text-4xl font-bold" />
125
+
<span class="text-base-500 dark:text-base-400 accent:text-base-700 text-xs">days</span
126
+
>
127
</div>
128
{/if}
129
<div class="flex flex-col items-center">
···
133
format={{ minimumIntegerDigits: 2 }}
134
class="text-3xl font-bold @xs:text-4xl @sm:text-5xl @md:text-6xl @lg:text-7xl"
135
/>
136
+
<span class="text-base-500 dark:text-base-400 accent:text-base-700 text-xs">hrs</span>
137
</div>
138
<div class="flex flex-col items-center">
139
<NumberFlow
···
143
digits={{ 1: { max: 5 } }}
144
class="text-3xl font-bold @xs:text-4xl @sm:text-5xl @md:text-6xl @lg:text-7xl"
145
/>
146
+
<span class="text-base-500 dark:text-base-400 accent:text-base-700 text-xs">min</span>
147
</div>
148
<div class="flex flex-col items-center">
149
<NumberFlow
···
153
digits={{ 1: { max: 5 } }}
154
class="text-3xl font-bold @xs:text-4xl @sm:text-5xl @md:text-6xl @lg:text-7xl"
155
/>
156
+
<span class="text-base-500 dark:text-base-400 accent:text-base-700 text-xs">sec</span>
157
</div>
158
</div>
159
</NumberFlowGroup>