From faf221c9bae1955893ac1d7303347526c50afbfd Mon Sep 17 00:00:00 2001 From: OleSTEEP Date: Tue, 7 Oct 2025 14:37:21 +0300 Subject: [PATCH] frontend: move style properties to components --- frontend/src/lib/components/add_button.svelte | 36 +++- frontend/src/lib/components/calendar.svelte | 62 ++++++ .../src/lib/components/create_button.svelte | 52 ++++- .../src/lib/components/horisontal_bar.svelte | 12 +- .../src/lib/components/horisontal_item.svelte | 31 ++- frontend/src/lib/components/image.svelte | 22 ++- frontend/src/lib/components/img_button.svelte | 42 +++- frontend/src/lib/components/queue_item.svelte | 40 +++- frontend/src/lib/css/global.css | 109 ----------- frontend/src/lib/css/themes.css | 180 ------------------ 10 files changed, 289 insertions(+), 297 deletions(-) diff --git a/frontend/src/lib/components/add_button.svelte b/frontend/src/lib/components/add_button.svelte index 70ae0dc..b95464b 100644 --- a/frontend/src/lib/components/add_button.svelte +++ b/frontend/src/lib/components/add_button.svelte @@ -1,5 +1,37 @@ - \ No newline at end of file + + + \ No newline at end of file diff --git a/frontend/src/lib/components/calendar.svelte b/frontend/src/lib/components/calendar.svelte index cbc7ed6..765dcaa 100644 --- a/frontend/src/lib/components/calendar.svelte +++ b/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; + } + } \ No newline at end of file diff --git a/frontend/src/lib/components/create_button.svelte b/frontend/src/lib/components/create_button.svelte index 6ff86f7..1cbda9e 100644 --- a/frontend/src/lib/components/create_button.svelte +++ b/frontend/src/lib/components/create_button.svelte @@ -5,4 +5,54 @@
-
\ No newline at end of file + + + \ No newline at end of file diff --git a/frontend/src/lib/components/horisontal_bar.svelte b/frontend/src/lib/components/horisontal_bar.svelte index 47d58b2..2567cde 100644 --- a/frontend/src/lib/components/horisontal_bar.svelte +++ b/frontend/src/lib/components/horisontal_bar.svelte @@ -21,4 +21,14 @@ {/if} - \ No newline at end of file + + + \ No newline at end of file diff --git a/frontend/src/lib/components/horisontal_item.svelte b/frontend/src/lib/components/horisontal_item.svelte index 2a71fca..08b3abc 100644 --- a/frontend/src/lib/components/horisontal_item.svelte +++ b/frontend/src/lib/components/horisontal_item.svelte @@ -4,4 +4,33 @@
{text} -
\ No newline at end of file + + + \ No newline at end of file diff --git a/frontend/src/lib/components/image.svelte b/frontend/src/lib/components/image.svelte index 0525899..9902909 100644 --- a/frontend/src/lib/components/image.svelte +++ b/frontend/src/lib/components/image.svelte @@ -4,8 +4,28 @@
- { + { // addImage(plus.id, this.id); // document.getElementById("screenshots").appendChild(new HorisontalImage().html); }}/>
+ + diff --git a/frontend/src/lib/components/img_button.svelte b/frontend/src/lib/components/img_button.svelte index 53c740c..3a2fab9 100644 --- a/frontend/src/lib/components/img_button.svelte +++ b/frontend/src/lib/components/img_button.svelte @@ -4,4 +4,44 @@
{name} -
\ No newline at end of file + + + \ No newline at end of file diff --git a/frontend/src/lib/components/queue_item.svelte b/frontend/src/lib/components/queue_item.svelte index ba3f921..748eb26 100644 --- a/frontend/src/lib/components/queue_item.svelte +++ b/frontend/src/lib/components/queue_item.svelte @@ -12,4 +12,42 @@

{name}

- \ No newline at end of file + + + \ No newline at end of file diff --git a/frontend/src/lib/css/global.css b/frontend/src/lib/css/global.css index 67909bf..67d9e2e 100644 --- a/frontend/src/lib/css/global.css +++ b/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; } \ No newline at end of file diff --git a/frontend/src/lib/css/themes.css b/frontend/src/lib/css/themes.css index f63c4a6..6636594 100644 --- a/frontend/src/lib/css/themes.css +++ b/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; - } } \ No newline at end of file