ChaoticByte/drinks-manager
1
1
Fork 0
Code Issues Pull requests Projects Releases 20 Packages Wiki Activity Actions

Small improvements to the UI

Browse source
This commit is contained in:
Julian Müller (ChaoticByte) 2024-02-13 19:16:59 +01:00
parent 0f4b1d9da2
commit 69c6b79267
2 changed files with 43 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

76
static/css/main.css
View file

@ -19,14 +19,15 @@
--font-family: "Inter"; --font-family: "Inter";
--color: #fafafa; --color: #fafafa;
--color-error: #ff682c; --color-error: #ff682c;
--bg-page-color: #222222; --bg-page: linear-gradient(#18151a, #060a0e);
--bg-color: #4e4e4e; --bg-color: #ffffff2c;
--bg-hover-color: #636363; --bg-hover-color: #ffffff50;
--bg-color2: #383838; --bg-color2: #ffffff44;
--bg-hover-color2: #4a4a4a; --bg-dropdown-color: #3a3a3f;
--border-color: #808080; --bg-dropdown-hover-color: #59595c;
--border-color: #ffffff67;
--bg-globalmessage: #161616; --bg-globalmessage: #161616;
--border-radius: .5rem; --border-radius: .25rem;
} }
/* General */ /* General */
@ -37,7 +38,8 @@ body {
width: 100vw; width: 100vw;
min-height: 100vh; min-height: 100vh;
font-family: var(--font-family); font-family: var(--font-family);
background: var(--bg-page-color); font-size: 17px;
background: var(--bg-page);
color: var(--color); color: var(--color);
overflow-x: hidden; overflow-x: hidden;
} }
@ -47,7 +49,7 @@ a {
} }
h1 { h1 {
font-size: 1.8rem; font-size: 28px;
} }
h1, h2, h3, h4 { h1, h2, h3, h4 {
@ -66,9 +68,9 @@ input[type="number"]::-webkit-inner-spin-button {
} }
input[type="text"], input[type="password"], input[type="number"], select { input[type="text"], input[type="password"], input[type="number"], select {
padding: .6rem .8rem; padding: .5rem .8rem;
text-align: center; text-align: center;
font-size: 1rem; font-size: 16px;
color: var(--color); color: var(--color);
border: none; border: none;
outline: none; outline: none;
@ -82,7 +84,7 @@ select {
appearance: none; appearance: none;
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
height: 2.5rem; height: 2.2rem;
background-image: url("/static/material-icons/arrow-drop-down.svg"); background-image: url("/static/material-icons/arrow-drop-down.svg");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: right; background-position: right;
@ -165,11 +167,7 @@ th {
flex-direction: row; flex-direction: row;
margin-top: 1rem; margin-top: 1rem;
width: 94%; width: 94%;
gap: 1rem; gap: 2rem;
}
.userinfo {
font-size: 1.05rem;
} }
.userinfo > span { .userinfo > span {
@ -224,7 +222,7 @@ main {
} }
.footer > div { .footer > div {
font-size: .95rem; font-size: 16px;
margin-top: .15rem; margin-top: .15rem;
margin-bottom: .15rem; margin-bottom: .15rem;
} }
@ -302,8 +300,8 @@ main {
text-align: center !important; text-align: center !important;
background: var(--bg-color); background: var(--bg-color);
color: var(--color); color: var(--color);
font-size: 1rem; font-size: 16px;
padding: .6rem .8rem; padding: .5rem .8rem;
outline: none; outline: none;
border: none; border: none;
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);
@ -338,8 +336,8 @@ main {
.appform > .forminput { .appform > .forminput {
width: 100%; width: 100%;
flex-direction: row; flex-direction: row;
justify-content: space-evenly; justify-content: space-between;
align-items: center; align-items: flex-end;
flex-wrap: wrap; flex-wrap: wrap;
gap: 1rem; gap: 1rem;
} }
@ -366,30 +364,28 @@ main {
} }
.dropdownlist { .dropdownlist {
margin-top: 3rem;
position: absolute; position: absolute;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
pointer-events: none; pointer-events: none;
border-radius: var(--border-radius) !important; gap: .5rem;
z-index: 200;
margin-top: 3.2rem;
opacity: 0%; opacity: 0%;
transition: opacity 100ms;
box-shadow: 0 .25rem 1rem #00000090;
} }
.dropdownchoice { .dropdownchoice {
border-radius: 0 !important; z-index: 200;
border-radius: var(--border-radius) !important;
margin: 0; margin: 0;
text-align: center; text-align: center;
justify-content: center; justify-content: center;
background: var(--bg-color2) !important; background: var(--bg-dropdown-color) !important;
backdrop-filter: none !important;
width: initial; width: initial;
box-shadow: 0 0 1.5rem #00000090;
} }
.dropdownchoice:hover { .dropdownchoice:hover {
background: var(--bg-hover-color2) !important; background: var(--bg-dropdown-hover-color) !important;
} }
.dropdownlist :first-child { .dropdownlist :first-child {
@ -409,7 +405,7 @@ main {
} }
.customnumberinput { .customnumberinput {
height: 2.5rem; height: 2.2rem;
} }
.customnumberinput button { .customnumberinput button {
@ -477,7 +473,7 @@ main {
.userlist > li > div { .userlist > li > div {
flex-grow: 1; flex-grow: 1;
text-align: center; text-align: center;
padding: .8rem 1.1rem; padding: .7rem 1.1rem;
} }
.loginform { .loginform {
@ -505,7 +501,7 @@ main {
.drinks-list > li > .button { .drinks-list > li > .button {
width: 100%; width: 100%;
justify-content: space-between; justify-content: space-between;
padding: .8rem 1.1rem; padding: .7rem 1.1rem;
} }
/* Statistics */ /* Statistics */
@ -525,6 +521,18 @@ main {
width: 16rem; width: 16rem;
} }
/* Blur */
@supports (backdrop-filter: blur()) {
:root {
--bg-dropdown-color: var(--bg-color);
--bg-dropdown-hover-color: var(--bg-hover-color);
}
.dropdownchoice {
backdrop-filter: blur(32px);
}
}
/* Responsive */ /* Responsive */
@media only screen and (max-width: 1200px) { @media only screen and (max-width: 1200px) {

1
static/css/simple-keyboard_dark.css
View file

@ -6,6 +6,7 @@
max-width: 100%; max-width: 100%;
background: transparent; background: transparent;
font-family: "Inter"; font-family: "Inter";
font-size: 16px;
} }
.simple-keyboard.darkTheme .hg-button { .simple-keyboard.darkTheme .hg-button {
height: 50px; height: 50px;