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"
>