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} |
- {
e.stopPropagation();
e.preventDefault();
deleteRow(i);
- }}>
+
+
|
{/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;