From 043acf33bdf8cc338dcc7af5b1256d861a6bb03e Mon Sep 17 00:00:00 2001
From: Till-JS <101404291+Till-JS@users.noreply.github.com>
Date: Wed, 3 Dec 2025 16:12:17 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix(clock):=20fix=20Svelte=20cla?=
 =?UTF-8?q?ss=20directive=20syntax=20errors?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace class: directives containing slashes with inline conditionals
Svelte's class: directive doesn't support Tailwind classes with /

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 apps/clock/apps/web/src/routes/timers/+page.svelte | 13 +++----------
 1 file changed, 3 insertions(+), 10 deletions(-)

diff --git a/apps/clock/apps/web/src/routes/timers/+page.svelte b/apps/clock/apps/web/src/routes/timers/+page.svelte
index 28b109df1..6df007956 100644
--- a/apps/clock/apps/web/src/routes/timers/+page.svelte
+++ b/apps/clock/apps/web/src/routes/timers/+page.svelte
@@ -370,10 +370,7 @@
 				{#each allTimers as timer (timer.id)}
 					{@const isLocal = isLocalTimer(timer)}
 					<div
-						class="card relative overflow-hidden transition-all"
-						class:ring-2={timer.status === 'running'}
-						class:ring-primary={timer.status === 'running'}
-						class:bg-success/5={timer.status === 'finished'}
+						class="card relative overflow-hidden transition-all {timer.status === 'running' ? 'ring-2 ring-primary' : ''} {timer.status === 'finished' ? 'bg-green-500/5' : ''}"
 					>
 						<!-- Progress background -->
 						<div
@@ -400,9 +397,7 @@
 							<!-- Time Display -->
 							<div class="mb-4 text-center">
 								<span
-									class="font-mono text-5xl font-light tracking-tight"
-									class:text-primary={timer.status === 'running'}
-									class:text-success={timer.status === 'finished'}
+									class="font-mono text-5xl font-light tracking-tight {timer.status === 'running' ? 'text-primary' : ''} {timer.status === 'finished' ? 'text-green-500' : ''}"
 								>
 									{getTimerDisplay(timer)}
 								</span>
@@ -411,9 +406,7 @@
 							<!-- Progress bar -->
 							<div class="mb-4 h-1.5 overflow-hidden rounded-full bg-muted">
 								<div
-									class="h-full rounded-full transition-all duration-1000"
-									class:bg-primary={timer.status !== 'finished'}
-									class:bg-success={timer.status === 'finished'}
+									class="h-full rounded-full transition-all duration-1000 {timer.status === 'finished' ? 'bg-green-500' : 'bg-primary'}"
 									style="width: {getProgress(timer)}%"
 								></div>
 							</div>