From 46374abff6c2ab957a4a6c46d5226954dac337b1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20Z=C3=ADpek?= Date: Sun, 28 Aug 2022 23:34:21 +0200 Subject: [PATCH] General styling improvements --- client/src/assets/components/_button.scss | 2 +- client/src/assets/components/_input.scss | 20 +++++ client/src/assets/components/_modal.scss | 2 +- .../src/assets/components/_sensors-page.scss | 9 ++- client/src/assets/style.scss | 75 +------------------ client/src/assets/themes/_basic.scss | 63 ++++++++++++++++ client/src/assets/themes/_blue.scss | 33 ++++++++ .../components/DashboardFilters.tsx | 1 + 8 files changed, 130 insertions(+), 75 deletions(-) create mode 100644 client/src/assets/components/_input.scss create mode 100644 client/src/assets/themes/_basic.scss create mode 100644 client/src/assets/themes/_blue.scss diff --git a/client/src/assets/components/_button.scss b/client/src/assets/components/_button.scss index eee256d..77c3333 100644 --- a/client/src/assets/components/_button.scss +++ b/client/src/assets/components/_button.scss @@ -4,7 +4,7 @@ button { cursor: pointer; border: none; padding: 0.25rem 0.8rem; - border-radius: 0.25rem; + border-radius: var(--border-radius); display: inline-flex; align-items: center; justify-content: center; diff --git a/client/src/assets/components/_input.scss b/client/src/assets/components/_input.scss new file mode 100644 index 0000000..d383198 --- /dev/null +++ b/client/src/assets/components/_input.scss @@ -0,0 +1,20 @@ +select, +input { + padding: 0.15rem 0.4rem; + box-sizing: border-box; + border: 1px solid var(--input-border-color); + background-color: var(--input-bg-color); + color: var(--input-fg-color); + border-radius: var(--border-radius); + box-sizing: border-box; + padding: 0.25rem 0.5rem; + + &:focus { + border-color: var(--input-focus-border-color); + outline: none; + } + + &.small { + padding: 0.1rem 0.25rem; + } +} diff --git a/client/src/assets/components/_modal.scss b/client/src/assets/components/_modal.scss index 1859583..33180f3 100644 --- a/client/src/assets/components/_modal.scss +++ b/client/src/assets/components/_modal.scss @@ -36,7 +36,7 @@ color: var(--modal-fg-color); margin-top: 5vh; box-shadow: var(--box-shadow); - border-radius: 0.5rem; + border-radius: var(--border-radius); width: 20rem; max-height: 90%; overflow: auto; diff --git a/client/src/assets/components/_sensors-page.scss b/client/src/assets/components/_sensors-page.scss index 0f12ae8..e16d0c5 100644 --- a/client/src/assets/components/_sensors-page.scss +++ b/client/src/assets/components/_sensors-page.scss @@ -44,20 +44,25 @@ text-overflow: ellipsis; } + > .name { + margin-bottom: 0.5rem; + } + > .auth { .auth-value { display: flex; - align-items: center; font-size: 85%; margin: 0.25rem 0; .label { width: 2rem; background-color: #666; - padding: 0.2rem; + padding: 0 0.25rem; border-radius: 0.25rem; border-top-right-radius: 0; border-bottom-right-radius: 0; + display: flex; + align-items: center; } .value { diff --git a/client/src/assets/style.scss b/client/src/assets/style.scss index 0f1009c..4c86761 100644 --- a/client/src/assets/style.scss +++ b/client/src/assets/style.scss @@ -1,66 +1,4 @@ -:root { - --main-font: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; - --main-bg-color: #eee; - --main-fg-color: #000; - --button-bg-color: #3988ff; - --button-fg-color: #fff; - --button-hover-bg-color: #0f6fff; - --button-hover-fg-color: #fff; - --button-cancel-bg-color: transparent; - --button-cancel-fg-color: #000; - --button-remove-bg-color: transparent; - --button-remove-fg-color: #f00; - --header-bg-color: #fff; - --header-spacer-color: #ddd; - --header-shadow: linear-gradient(0deg, rgba(255, 255, 255, 0) 5%, rgba(190, 190, 190, 0.6) 100%); - --box-bg-color: #fff; - --box-fg-color: #111; - --box-loader-bg-color: rgba(128, 128, 128, 0.3); - --box-loader-fg-color: #fff; - --box-action-fg-color: #666; - --box-preview-bg-color: #3988ff; - --box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1); - --modal-overlay-bg-color: rgba(0, 0, 0, 0.3); - --modal-bg-color: #222; - --modal-fg-color: #eee; - --confirm-overlay-bg-color: rgba(0, 0, 0, 0.5); - --graph-axis-fg-color: #777; - --graph-grid-color: rgb(238, 238, 238); - --link-fg-color: #3988ff; - --menu-shadow: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(90, 90, 90, 0.2) 100%); - --filters-menu-shadow: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(90, 90, 90, 0.2) 100%); -} - -@media (prefers-color-scheme: dark) { - :root { - --main-bg-color: #222; - --main-fg-color: #ccc; - --header-bg-color: #111; - --header-spacer-color: #333; - --header-shadow: none; - --box-bg-color: #111; - --modal-bg-color: #222; - --box-fg-color: #eee; - --box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.3); - --graph-axis-fg-color: #666; - --graph-grid-color: rgb(25, 25, 25); - --button-bg-color: #0b3c9f; - --button-fg-color: #eee; - --button-cancel-fg-color: #ccc; - --modal-overlay-bg-color: rgba(128, 128, 128, 0.3); - --confirm-overlay-bg-color: rgba(128, 128, 128, 0.5); - } - - select, - input { - border: 1px solid #333; - background: #222; - color: #ccc; - border-radius: 0.25rem; - box-sizing: border-box; - padding: 0.1rem 0.25rem; - } -} +@import "themes/basic"; body, html { @@ -83,12 +21,7 @@ select { } @import "components/button"; - -input, -select { - padding: 0.15rem 0.4rem; - box-sizing: border-box; -} +@import "components/input"; a { color: var(--link-fg-color); @@ -123,7 +56,7 @@ main.layout { top: 0; bottom: 0; color: var(--box-fg-color); - width: 20rem; + width: 15rem; transition: left 0.1s; z-index: 2; display: flex; @@ -219,7 +152,7 @@ section.content { box-shadow: var(--box-shadow); background-color: var(--box-bg-color); color: var(--box-fg-color); - border-radius: 0.5rem; + border-radius: var(--border-radius); } @import "components/modal"; diff --git a/client/src/assets/themes/_basic.scss b/client/src/assets/themes/_basic.scss new file mode 100644 index 0000000..4de41df --- /dev/null +++ b/client/src/assets/themes/_basic.scss @@ -0,0 +1,63 @@ +:root { + --main-font: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; + --border-radius: 0.25rem; + --main-bg-color: #eee; + --main-fg-color: #000; + --button-bg-color: #3988ff; + --button-fg-color: #fff; + --button-hover-bg-color: #0f6fff; + --button-hover-fg-color: #fff; + --button-cancel-bg-color: transparent; + --button-cancel-fg-color: #000; + --button-remove-bg-color: transparent; + --button-remove-fg-color: #f00; + --header-bg-color: #fff; + --header-spacer-color: #ddd; + --header-shadow: linear-gradient(0deg, rgba(255, 255, 255, 0) 5%, rgba(190, 190, 190, 0.6) 100%); + --box-bg-color: #fff; + --box-fg-color: #111; + --box-loader-bg-color: rgba(128, 128, 128, 0.3); + --box-loader-fg-color: #fff; + --box-action-fg-color: #666; + --box-preview-bg-color: #3988ff; + --box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1); + --modal-overlay-bg-color: rgba(0, 0, 0, 0.5); + --modal-bg-color: #fff; + --modal-fg-color: #000; + --confirm-overlay-bg-color: rgba(0, 0, 0, 0.7); + --graph-axis-fg-color: #777; + --graph-grid-color: rgb(238, 238, 238); + --link-fg-color: #3988ff; + --menu-shadow: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(90, 90, 90, 0.2) 100%); + --filters-menu-shadow: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(90, 90, 90, 0.2) 100%); + --input-border-color: #ddd; + --input-focus-border-color: #3988ff; + --input-bg-color: #fff; + --input-fg-color: #000; +} + +@media (prefers-color-scheme: dark) { + :root { + --main-bg-color: #222; + --main-fg-color: #ccc; + --header-bg-color: #111; + --header-spacer-color: #333; + --header-shadow: none; + --box-bg-color: #111; + --modal-bg-color: #222; + --modal-fg-color: #eee; + --box-fg-color: #eee; + --box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.3); + --graph-axis-fg-color: #666; + --graph-grid-color: rgb(25, 25, 25); + --button-bg-color: #0b3c9f; + --button-fg-color: #eee; + --button-cancel-fg-color: #ccc; + --modal-overlay-bg-color: rgba(128, 128, 128, 0.3); + --confirm-overlay-bg-color: rgba(128, 128, 128, 0.5); + --input-border-color: #333; + --input-focus-border-color: #666; + --input-bg-color: #222; + --input-fg-color: #ccc; + } +} diff --git a/client/src/assets/themes/_blue.scss b/client/src/assets/themes/_blue.scss new file mode 100644 index 0000000..4c8cc87 --- /dev/null +++ b/client/src/assets/themes/_blue.scss @@ -0,0 +1,33 @@ +:root { + --main-font: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; + --border-radius: 0.15rem; + --main-bg-color: #000; + --main-fg-color: #fff; + --button-bg-color: #81f9a9; + --button-fg-color: #000; + --button-hover-bg-color: #81f9a9; + --button-hover-fg-color: #000; + --button-cancel-bg-color: transparent; + --button-cancel-fg-color: #eee; + --button-remove-bg-color: transparent; + --button-remove-fg-color: #f00; + --header-bg-color: #141723; + --header-spacer-color: #242940; + --header-shadow: none; + --box-bg-color: #1a1e2e; + --box-fg-color: #fff; + --box-loader-bg-color: rgba(128, 128, 128, 0.3); + --box-loader-fg-color: #fff; + --box-action-fg-color: #666; + --box-preview-bg-color: #3988ff; + --box-shadow: none; + --modal-overlay-bg-color: rgba(0, 0, 0, 0.3); + --modal-bg-color: #222; + --modal-fg-color: #eee; + --confirm-overlay-bg-color: rgba(0, 0, 0, 0.5); + --graph-axis-fg-color: #777; + --graph-grid-color: rgb(50, 50, 50); + --link-fg-color: #3988ff; + --menu-shadow: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(90, 90, 90, 0.2) 100%); + --filters-menu-shadow: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(90, 90, 90, 0.2) 100%); +} diff --git a/client/src/pages/dashboard/components/DashboardHeader/components/DashboardFilters.tsx b/client/src/pages/dashboard/components/DashboardHeader/components/DashboardFilters.tsx index c361ca9..3dde5d1 100644 --- a/client/src/pages/dashboard/components/DashboardHeader/components/DashboardFilters.tsx +++ b/client/src/pages/dashboard/components/DashboardHeader/components/DashboardFilters.tsx @@ -60,6 +60,7 @@ export const DashboardFilters = () => { name="interval" onChange={handleIntervalChange} value={value.interval} + className="small" >