Small improvements to the UI

static/css/main.css

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

static/css/simple-keyboard_dark.css

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