From e8e5547695fafbcd3ea2bef8783c19f6105edc57 Mon Sep 17 00:00:00 2001 From: euzu Date: Fri, 13 Jun 2025 16:46:51 +0200 Subject: [PATCH] some web ui styling --- .../component/preferences/preferences.scss | 19 ++++++++++++++----- .../src/component/preferences/preferences.tsx | 2 +- .../source-selector-editor.scss | 1 + .../src/component/user-view/user-view.scss | 10 +++++++++- frontend/src/scss/_default.scss | 4 ++++ frontend/src/scss/_preferences.scss | 3 ++- frontend/src/scss/_theme.scss | 19 +++++++++++++++++-- 7 files changed, 48 insertions(+), 10 deletions(-) diff --git a/frontend/src/component/preferences/preferences.scss b/frontend/src/component/preferences/preferences.scss index cb7c8ff6c..e514d7b45 100644 --- a/frontend/src/component/preferences/preferences.scss +++ b/frontend/src/component/preferences/preferences.scss @@ -44,6 +44,7 @@ min-width: 32px; } gap: 12px; + padding: 8px 4px; button { @include common.iconButton(); @@ -62,14 +63,21 @@ gap: 8px; align-items: center; cursor: pointer; - //color: var(--icon-button-hover-color); - //color: var(--icon-button-hover-background-color); + color: var(--menu-button-color); + background-color: var(--menu-button-background-color); border: 1px solid transparent; - border-radius: 4px; - padding: 4px; + border-radius: var(--border-radius); + padding: 8px 16px; user-select: none; white-space: nowrap; + &_update { svg { fill: var(--menu-icon-color-update); } } + &_user { svg { fill: var(--menu-icon-color-user); } } + &_api_server { svg { fill: var(--menu-icon-color-api_server); } } + &_main_config { svg { fill: var(--menu-icon-color-main_config); } } + &_status { svg { fill: var(--menu-icon-color-status); } } + + * { pointer-events: none; } @@ -86,7 +94,8 @@ } &-menu-action.selected { - color: var(--label-color); + color: var(--menu-button-hover-color); + background-color: var(--menu-button-hover-background-color); } } diff --git a/frontend/src/component/preferences/preferences.tsx b/frontend/src/component/preferences/preferences.tsx index e30e09dbe..3112739b8 100644 --- a/frontend/src/component/preferences/preferences.tsx +++ b/frontend/src/component/preferences/preferences.tsx @@ -48,7 +48,7 @@ export default function Preferences(props: PreferencesProps) {
{sidebar_actions.map(action =>
{getIconByName(action.icon)}
)}
diff --git a/frontend/src/component/source-selector-editor/source-selector-editor.scss b/frontend/src/component/source-selector-editor/source-selector-editor.scss index fe5cb32cd..947d7d881 100644 --- a/frontend/src/component/source-selector-editor/source-selector-editor.scss +++ b/frontend/src/component/source-selector-editor/source-selector-editor.scss @@ -12,6 +12,7 @@ &__content { display: flex; + padding: 12px; flex-flow: column; flex: 1 1 auto; min-width: 340px; diff --git a/frontend/src/component/user-view/user-view.scss b/frontend/src/component/user-view/user-view.scss index f5996491c..f45dd1ae4 100644 --- a/frontend/src/component/user-view/user-view.scss +++ b/frontend/src/component/user-view/user-view.scss @@ -221,9 +221,17 @@ dialog:not([open]) { padding-left: 4px; } span { + //padding: 4px; + //transform: scale(0.9) translateY(5px); padding: 4px; - transform: scale(0.9) translateY(5px); @include common.iconButton(); + &:first-child { + border-radius: var(--icon-button-border-radius) 0 0 var(--icon-button-border-radius) !important; + } + + &:last-child { + border-radius: 0 var(--icon-button-border-radius) var(--icon-button-border-radius) 0 !important; + } } } } diff --git a/frontend/src/scss/_default.scss b/frontend/src/scss/_default.scss index 82a25eaa4..2975bbeb1 100644 --- a/frontend/src/scss/_default.scss +++ b/frontend/src/scss/_default.scss @@ -118,3 +118,7 @@ select { option { cursor: pointer; } + +dialog { + padding: 0 !important; +} \ No newline at end of file diff --git a/frontend/src/scss/_preferences.scss b/frontend/src/scss/_preferences.scss index 44757b2d6..5114593ae 100644 --- a/frontend/src/scss/_preferences.scss +++ b/frontend/src/scss/_preferences.scss @@ -27,7 +27,8 @@ justify-content: flex-end; align-items: center; gap: 12px; - background-color: inherit; + background-color: var(--toolbar-bg-color); + padding: 8px 16px; label { flex: 1 1 auto; diff --git a/frontend/src/scss/_theme.scss b/frontend/src/scss/_theme.scss index 815be4e87..fcc544b10 100644 --- a/frontend/src/scss/_theme.scss +++ b/frontend/src/scss/_theme.scss @@ -21,6 +21,7 @@ --tool-button-color: #fff; --tool-button-hover-color: #ffffff; --tool-button-hover-background-color: #0c8a13; + --default-button-background-color: #124a9b; --toolbar-background-color: #282A36; --toolbar-button-hover-color: #ffffff; @@ -47,16 +48,21 @@ --border-radius: 8px; --icon-button-border-radius: 4px; - --icon-button-background-color: #124a9b; + --icon-button-background-color: var(--default-button-background-color); --icon-button-color: #ffffff; --icon-button-hover-background-color: #0d6efd; --icon-button-hover-color: #ffffff; --icon-button-hover-border-color: #ced9fb; + --menu-button-color:#fffff; + --menu-button-background-color: #20273344; + + --menu-button-hover-color:#fffff; + --menu-button-hover-background-color: #202733; --text-button-border-radius: 4px; --text-button-border-color: transparent; - --text-button-background-color: #124a9b; + --text-button-background-color: var(--default-button-background-color); --text-button-color: #ffffff; --text-button-hover-background-color: #0d6efd; --text-button-hover-color: #ffffff; @@ -92,4 +98,13 @@ --breadcrumb-color: #c4c4c4; --breadcrumb-active-background-color: #4ad96e; --breadcrumb-active-color: #000; + + --menu-icon-color-update: #A3D8FF; + --menu-icon-color-user: #0ABAB5; + --menu-icon-color-api_server: #FF9D23; + --menu-icon-color-main_config: #FF2DF1; + --menu-icon-color-status : #F9E400; + + --toolbar-bg-color: #161b25; + }