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>

frontend/src/lib/components/calendar.svelte

@@ -119,4 +119,66 @@
     @media screen and (max-width: 290px) {
         .weekdays li, .days li {width: 12.2%;}
     }
+
+    @media (prefers-color-scheme: light) {
+        .month {
+            background: #5C8DC0;
+        }
+
+        .month ul li {
+            color: white;
+        }
+
+        .weekdays {
+            background-color: #F4F4F4;
+        }
+
+        .weekdays li {
+            color: black;
+        }
+
+        .days {
+            background: #F4F4F4;
+        }
+
+        .days li {
+            color: black;
+        }
+
+        .days li .active {
+            color: white !important;
+            background: #5C8DC0;
+        }
+    }
+
+    @media (prefers-color-scheme: dark) {
+        .month {
+            background: #2791FF;
+        }
+
+        .month ul li {
+            color: white;
+        }
+
+        .weekdays {
+            background-color: #192431;
+        }
+
+        .weekdays li {
+            color: white;
+        }
+
+        .days {
+            background: #192431;
+        }
+
+        .days li {
+            color: white;
+        }
+
+        .days li .active {
+            color: white !important;
+            background: #2791FF;
+        }
+    }
 </style>

frontend/src/lib/components/create_button.svelte

@@ -5,4 +5,54 @@
 
 <div class="create">
     <button class="rounded" id="create" {onclick}>Создать</button>
-</div>
+</div>
+
+<style>
+    /* Поле с кнопкой "Создать" */
+    .create {
+        width: 100%;
+        position: fixed;
+        bottom: 0;
+        text-align: center;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .create button {
+        margin: 0.5rem;
+        padding: 1rem;
+        cursor: pointer;
+    }
+
+    @media (prefers-color-scheme: light) {
+        .create {
+            background-color: #D9D9D9;
+        }
+
+        .create button {
+            background-color: #3CAA36;
+            color: white;
+        }
+
+        .create button:hover {
+            background-color: #3b8d37;
+            color: white;
+        }
+    }
+
+    @media (prefers-color-scheme: dark) {
+        .create {
+            background-color: #192431;
+        }
+
+        .create button {
+            background-color: #3CAA36;
+            color: white;
+        }
+
+        .create button:hover {
+            background-color: #3b8d37;
+            color: white;
+        }
+    }
+</style>

frontend/src/lib/components/horisontal_bar.svelte

@@ -21,4 +21,14 @@
         <Image />
     {/if}
     
-</div>
+</div>
+
+<style>
+    /* Вертикальный список */
+    :global(.horisontal-bar) {
+        display: flex;
+        overflow-x: scroll;
+        align-content: center;
+        padding: 0.5rem;
+    }
+</style>

frontend/src/lib/components/horisontal_item.svelte

@@ -4,4 +4,33 @@
 
 <div class="horisontal-item rounded">
     {text}
-</div>
+</div>
+
+<style>
+    /* Элемент вертикального списка (тег, бадж, жанр) */
+    .horisontal-item {
+        padding: 0.25rem;
+    }
+
+    @media (prefers-color-scheme: light) {
+        .horisontal-item {
+            background-color: #5C8DC0;
+            color: white;
+        }
+
+        .horisontal-item:hover {
+            background-color: #567aa1;
+        }
+    }
+
+    @media (prefers-color-scheme: dark) {
+        .horisontal-item {
+            background-color: #2791FF;
+            color: white;
+        }
+
+        .horisontal-item:hover {
+            background-color: #2c7dd4;
+        }
+    }
+</style>

frontend/src/lib/components/image.svelte

@@ -4,8 +4,28 @@
 </script>
 
 <div class="{direction} {input ? "input" : ""} image rounded">
-    <AddButton handler={() => {
+    <AddButton size=48 handler={() => {
         // addImage(plus.id, this.id);
         // document.getElementById("screenshots").appendChild(new HorisontalImage().html);
     }}/>
 </div>
+
+<style>
+    /* Вертикальное изображение */
+    .vertical {
+        aspect-ratio: 11 / 16;
+    }
+
+    /* Горизонтальное изображение */
+    .horisontal {
+        aspect-ratio: 16 / 11;
+    }
+
+    :global(.image) {
+        margin-left: auto;
+        margin-right: auto;
+        align-content: center;
+        text-align: center;
+        width: 11rem;
+    }
+</style>

frontend/src/lib/components/img_button.svelte

@@ -4,4 +4,44 @@
 
 <div class="imgbutton {style}">
     <img src={image} alt={name}>
-</div>
+</div>
+
+<style>
+    /* Кнопка с изображением */
+    .imgbutton {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        margin: 0;
+        align-content: center;
+        text-align: center;
+        font-size: small;
+        padding: 0.5rem;
+    }
+
+    .imgbutton img {
+        margin-left: auto;
+        margin-right: auto;
+        width: 2rem;
+    }
+    
+    .imgbutton {
+        color: white;
+    }
+
+    .remove {
+        background-color: #FC1F1C;
+    }
+
+    .remove:hover {
+        background-color: #d32522;
+    }
+
+    .edit {
+        background-color: #1BC304;
+    }
+
+    .edit:hover {
+        background-color: #1c9d0b;
+    }
+</style>

frontend/src/lib/components/queue_item.svelte

@@ -12,4 +12,42 @@
     <p class="ellipsis">{name}</p>
     <ImgButton style="edit" name="Изменить" image={edit_btn}/>
     <ImgButton style="remove" name="Удалить" image={remove_btn}/>
-</div>
+</div>
+
+<style>
+    /* Элемент в очереди */
+    .queue-item {
+        margin: 0;
+        padding: 0;
+    }
+
+    .queue-item p {
+        margin: 0.5rem;
+    }
+
+    :global(.queue-item + .queue-item) {
+        margin-top: 0.5rem;
+    }
+
+    @media (prefers-color-scheme: light) {
+        .queue-item {
+            background-color: #5C8DC0;
+            color: white;
+        }
+
+        .queue-item p {
+            color: white;
+        }
+    }
+
+    @media (prefers-color-scheme: dark) {
+        .queue-item {
+            background-color: #2791FF;
+            color: white;
+        }
+
+        .queue-item p {
+            color: white;
+        }
+    }
+</style>

frontend/src/lib/css/global.css

@@ -39,38 +39,6 @@ button {
     overflow: hidden;
 }
 
-/* Вертикальное изображение */
-.vertical {
-    aspect-ratio: 11 / 16;
-}
-
-/* Горизонтальное изображение */
-.horisontal {
-    aspect-ratio: 16 / 11;
-}
-
-.image {
-    margin-left: auto;
-    margin-right: auto;
-    align-content: center;
-    text-align: center;
-    width: 11rem;
-}
-
-/* Кнопка "плюс" */
-.plus {
-    font-family: Arial, Helvetica, sans-serif;
-    aspect-ratio: 1 / 1;
-    height: 32px;
-    font-size: x-large;
-    cursor: pointer;
-}
-
-/* Кнопка "плюс" на изображении должна быть больше */
-.image .plus {
-    height: 48px;
-}
-
 /* Поле с обложкой */
 .cover {
     padding: 2rem;
@@ -78,22 +46,6 @@ button {
     align-content: center;
 }
 
-/* Поле с кнопкой "Создать" */
-.create {
-    width: 100%;
-    position: fixed;
-    bottom: 0;
-    text-align: center;
-    display: flex;
-    flex-direction: column;
-}
-
-.create button {
-    margin: 0.5rem;
-    padding: 1rem;
-    cursor: pointer;
-}
-
 /* Поле с заполняемыми полями */
 .fields {
     width: 100%;
@@ -111,77 +63,16 @@ button {
     margin-bottom: 0;
 }
 
-/* Вертикальный список */
-.horisontal-bar {
-    display: flex;
-    overflow-x: scroll;
-    align-content: center;
-    padding: 0.5rem;
-}
-
 .horisontal-bar * {
     margin: 0;
     margin-right: 0.5rem;
     align-content: center;
 }
 
-/* Элемент вертикального списка (тег, бадж, жанр) */
-.horisontal-item {
-    padding: 0.25rem;
-    cursor: pointer;
-}
-
-/* Элемент в очереди */
-.queue-item {
-    margin: 0;
-    padding: 0;
-}
-
-.queue-item + .queue-item {
-    margin-top: 0.5rem;
-}
-
-.queue-item p {
-    margin: 0.5rem;
-}
-
 /* Текст с троеточием в конце */
 .ellipsis {
     display: block;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-}
-
-/* Кнопка с изображением */
-.imgbutton {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    margin: 0;
-    align-content: center;
-    text-align: center;
-    font-size: small;
-    padding: 0.5rem;
-}
-
-.imgbutton * {
-    margin: 0;
-}
-
-.imgbutton img {
-    margin-left: auto;
-    margin-right: auto;
-    width: 2rem;
-}
-
-/* Кнопка "Удалить" */
-.remove {
-    cursor: pointer;
-}
-
-/* Кнопка "Изменить" */
-.edit {
-    cursor: pointer;
-    margin-left: auto;
 }

frontend/src/lib/css/themes.css

@@ -16,103 +16,13 @@
         color: black;
     }
 
-    .plus {
-        background-color: #5C8DC0;
-        color: white;
-    }
-
-    .plus:hover {
-        background-color: #567aa1;
-    }
-
-    .horisontal-item {
-        background-color: #5C8DC0;
-        color: white;
-    }
-
-    .horisontal-item:hover {
-        background-color: #567aa1;
-    }
-
     .cover .image {
         background-color: white;
     }
 
-    .create {
-        background-color: #D9D9D9;
-    }
-
-    .create button {
-        background-color: #3CAA36;
-        color: white;
-    }
-
-    .create button:hover {
-        background-color: #3b8d37;
-        color: white;
-    }
-
     .fields {
         background-color: white;
     }
-
-    .queue-item {
-        background-color: #5C8DC0;
-        color: white;
-    }
-
-    .queue-item p {
-        color: white;
-    }
-
-    .imgbutton {
-        color: white;
-    }
-
-    .month {
-        background: #5C8DC0;
-    }
-
-    .month ul li {
-        color: white;
-    }
-
-    .weekdays {
-        background-color: #F4F4F4;
-    }
-
-    .weekdays li {
-        color: black;
-    }
-
-    .days {
-        background: #F4F4F4;
-    }
-
-    .days li {
-        color: black;
-    }
-
-    .days li .active {
-        color: white !important;
-        background: #5C8DC0;
-    }
-
-    .remove {
-        background-color: #FC1F1C;
-    }
-
-    .remove:hover {
-        background-color: #d32522;
-    }
-
-    .edit {
-        background-color: #1BC304;
-    }
-
-    .edit:hover {
-        background-color: #1c9d0b;
-    }
 }
 
 @media (prefers-color-scheme: dark) {
@@ -133,101 +43,11 @@
         color: white;
     }
 
-    .plus {
-        background-color: #2791FF;
-        color: white;
-    }
-
-    .plus:hover {
-        background-color: #2c7dd4;
-    }
-
-    .horisontal-item {
-        background-color: #2791FF;
-        color: white;
-    }
-
-    .horisontal-item:hover {
-        background-color: #2c7dd4;
-    }
-
     .cover .image {
         background-color: #131A22;
     }
 
-    .create {
-        background-color: #192431;
-    }
-
-    .create button {
-        background-color: #3CAA36;
-        color: white;
-    }
-
-    .create button:hover {
-        background-color: #3b8d37;
-        color: white;
-    }
-
     .fields {
         background-color: #131A22;
     }
-
-    .queue-item {
-        background-color: #2791FF;
-        color: white;
-    }
-
-    .queue-item p {
-        color: white;
-    }
-
-    .imgbutton {
-        color: white;
-    }
-
-    .month {
-        background: #2791FF;
-    }
-
-    .month ul li {
-        color: white;
-    }
-
-    .weekdays {
-        background-color: #192431;
-    }
-
-    .weekdays li {
-        color: white;
-    }
-
-    .days {
-        background: #192431;
-    }
-
-    .days li {
-        color: white;
-    }
-
-    .days li .active {
-        color: white !important;
-        background: #2791FF;
-    }
-
-    .remove {
-        background-color: #FC1F1C;
-    }
-
-    .remove:hover {
-        background-color: #d32522;
-    }
-
-    .edit {
-        background-color: #1BC304;
-    }
-
-    .edit:hover {
-        background-color: #1c9d0b;
-    }
 }