diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 59bd17d..0be6e89 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -10,6 +10,8 @@ let workout_type = $state(""); let duration_minutes = $state(0); + let selected_cell: `${number}:${number}` | undefined = $state(undefined); + onMount(() => { const today = new Date(); date = today.toISOString().split("T")[0]; @@ -79,7 +81,7 @@ /> - @@ -97,14 +99,18 @@ {wk.workout_type} {wk.duration_minutes} - + + {/each} @@ -136,7 +142,7 @@ padding: 16px; } - tbody tr:nth-child(even) { + tr:nth-child(even) { background-color: #f2f2f2; color: #000; } @@ -144,7 +150,6 @@ tbody tr:hover { background-color: #c2c2c2; color: #000; - font-weight: bold; } th { @@ -155,17 +160,45 @@ font-size: 0.95rem; } - button { + .button { width: 3rem; height: 2rem; cursor: pointer; - border: none; border-radius: 5px; - background-color: transparent; + background-color: white; + border: solid; + border-width: 2px; } - button:hover { - background-color: #fff; + + .button-delete { + display: flex; + justify-content: center; + text-align: center; + align-items: center; + vertical-align: middle; + border-color: red; + color: red; } + + .button-save { + background-color: white; + border-color: green; + color: green; + } + + .button-save:hover { + background-color: green; + border-color: green; + } + .button-delete:hover { + background-color: red; + border-color: red; + } + + :global .button:hover svg { + stroke: white; + } + input[type="text"] { width: 100%; padding: 8px;