diff --git a/static/css/main.css b/static/css/main.css index 4ba0fc7..a6bcf52 100644 --- a/static/css/main.css +++ b/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) { diff --git a/static/css/simple-keyboard_dark.css b/static/css/simple-keyboard_dark.css index e380b77..ffee807 100644 --- a/static/css/simple-keyboard_dark.css +++ b/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;