kamen
/
graphicek
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

General styling improvements

This commit is contained in:
Jan Zípek 2022-08-28 23:34:21 +02:00
parent e74c9d0793
commit 46374abff6
Signed by: kamen
GPG Key ID: A17882625B33AC31
8 changed files with 130 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/assets/components/_button.scss
View File

@ -4,7 +4,7 @@ button {
cursor: pointer; cursor: pointer;
border: none; border: none;
padding: 0.25rem 0.8rem; padding: 0.25rem 0.8rem;
border-radius: 0.25rem; border-radius: var(--border-radius);
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;

20
client/src/assets/components/_input.scss Normal file
View File

@ -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;
}
}

2
client/src/assets/components/_modal.scss
View File

@ -36,7 +36,7 @@
color: var(--modal-fg-color); color: var(--modal-fg-color);
margin-top: 5vh; margin-top: 5vh;
box-shadow: var(--box-shadow); box-shadow: var(--box-shadow);
border-radius: 0.5rem; border-radius: var(--border-radius);
width: 20rem; width: 20rem;
max-height: 90%; max-height: 90%;
overflow: auto; overflow: auto;

9
client/src/assets/components/_sensors-page.scss
View File

@ -44,20 +44,25 @@
text-overflow: ellipsis; text-overflow: ellipsis;
} }
> .name {
margin-bottom: 0.5rem;
}
> .auth { > .auth {
.auth-value { .auth-value {
display: flex; display: flex;
align-items: center;
font-size: 85%; font-size: 85%;
margin: 0.25rem 0; margin: 0.25rem 0;
.label { .label {
width: 2rem; width: 2rem;
background-color: #666; background-color: #666;
padding: 0.2rem; padding: 0 0.25rem;
border-radius: 0.25rem; border-radius: 0.25rem;
border-top-right-radius: 0; border-top-right-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
display: flex;
align-items: center;
} }
.value { .value {

75
client/src/assets/style.scss
View File

@ -1,66 +1,4 @@
:root { @import "themes/basic";
--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;
}
}
body, body,
html { html {
@ -83,12 +21,7 @@ select {
} }
@import "components/button"; @import "components/button";
@import "components/input";
input,
select {
padding: 0.15rem 0.4rem;
box-sizing: border-box;
}
a { a {
color: var(--link-fg-color); color: var(--link-fg-color);
@ -123,7 +56,7 @@ main.layout {
top: 0; top: 0;
bottom: 0; bottom: 0;
color: var(--box-fg-color); color: var(--box-fg-color);
width: 20rem; width: 15rem;
transition: left 0.1s; transition: left 0.1s;
z-index: 2; z-index: 2;
display: flex; display: flex;
@ -219,7 +152,7 @@ section.content {
box-shadow: var(--box-shadow); box-shadow: var(--box-shadow);
background-color: var(--box-bg-color); background-color: var(--box-bg-color);
color: var(--box-fg-color); color: var(--box-fg-color);
border-radius: 0.5rem; border-radius: var(--border-radius);
} }
@import "components/modal"; @import "components/modal";

63
client/src/assets/themes/_basic.scss Normal file
View File

@ -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;
}
}

33
client/src/assets/themes/_blue.scss Normal file
View File

@ -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%);
}

1
client/src/pages/dashboard/components/DashboardHeader/components/DashboardFilters.tsx
View File

@ -60,6 +60,7 @@ export const DashboardFilters = () => {
name="interval" name="interval"
onChange={handleIntervalChange} onChange={handleIntervalChange}
value={value.interval} value={value.interval}
className="small"
> >
<option value="hour">Hour</option> <option value="hour">Hour</option>
<option value="day">Day</option> <option value="day">Day</option>