frontend: move style properties to components

frontend/src/lib/components/add_button.svelte

@@ -1,5 +1,37 @@
 <script lang="ts">
-    const { handler } = $props();
+    const { handler, size = 32 } = $props();
 </script>
 
-<button class="plus round" onclick={handler}>+</button>
+<button class="plus round" style="height: {size}px;" onclick={handler}>+</button>
+
+<style>
+    /* Кнопка "плюс" */
+    .plus {
+        font-family: Arial, Helvetica, sans-serif;
+        aspect-ratio: 1 / 1;
+        font-size: x-large;
+        cursor: pointer;
+    }
+
+    @media (prefers-color-scheme: light) {
+        .plus {
+            background-color: #5C8DC0;
+            color: white;
+        }
+
+        .plus:hover {
+            background-color: #567aa1;
+        }
+    }
+
+    @media (prefers-color-scheme: dark) {
+        .plus {
+            background-color: #2791FF;
+            color: white;
+        }
+
+        .plus:hover {
+            background-color: #2c7dd4;
+        }
+    }
+</style>