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
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
89
style="font-variant-numeric: tabular-nums;"
90
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>
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
93
<NumberFlow
94
94
value={clockMinutes}
95
95
format={{ minimumIntegerDigits: 2 }}
96
96
digits={{ 1: { max: 5 } }}
97
97
trend={1}
98
98
/>
99
-
<span class="text-base-400 dark:text-base-500 mx-0.5 @sm:mx-1">:</span>
99
+
<span class="text-base-400 dark:text-base-500 accent:text-accent-950 mx-0.5">:</span>
100
100
<NumberFlow
101
101
value={clockSeconds}
102
102
format={{ minimumIntegerDigits: 2 }}
···
121
121
>
122
122
{#if eventDays > 0}
123
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>
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
+
>
130
127
</div>
131
128
{/if}
132
129
<div class="flex flex-col items-center">
···
136
133
format={{ minimumIntegerDigits: 2 }}
137
134
class="text-3xl font-bold @xs:text-4xl @sm:text-5xl @md:text-6xl @lg:text-7xl"
138
135
/>
139
-
<span class="text-base-500 dark:text-base-400 text-xs @sm:text-sm">hrs</span>
136
+
<span class="text-base-500 dark:text-base-400 accent:text-base-700 text-xs">hrs</span>
140
137
</div>
141
138
<div class="flex flex-col items-center">
142
139
<NumberFlow
···
146
143
digits={{ 1: { max: 5 } }}
147
144
class="text-3xl font-bold @xs:text-4xl @sm:text-5xl @md:text-6xl @lg:text-7xl"
148
145
/>
149
-
<span class="text-base-500 dark:text-base-400 text-xs @sm:text-sm">min</span>
146
+
<span class="text-base-500 dark:text-base-400 accent:text-base-700 text-xs">min</span>
150
147
</div>
151
148
<div class="flex flex-col items-center">
152
149
<NumberFlow
···
156
153
digits={{ 1: { max: 5 } }}
157
154
class="text-3xl font-bold @xs:text-4xl @sm:text-5xl @md:text-6xl @lg:text-7xl"
158
155
/>
159
-
<span class="text-base-500 dark:text-base-400 text-xs @sm:text-sm">sec</span>
156
+
<span class="text-base-500 dark:text-base-400 accent:text-base-700 text-xs">sec</span>
160
157
</div>
161
158
</div>
162
159
</NumberFlowGroup>