diff --git a/php/public/img/Background_Light.jpg b/php/public/img/Background_Light.jpg new file mode 100644 index 00000000..ecbe6d0b Binary files /dev/null and b/php/public/img/Background_Light.jpg differ diff --git a/php/public/img/background.png b/php/public/img/background.png deleted file mode 100644 index 1d4d5e8c..00000000 Binary files a/php/public/img/background.png and /dev/null differ diff --git a/php/public/style.css b/php/public/style.css index d4c25a8e..3d77cdea 100644 --- a/php/public/style.css +++ b/php/public/style.css @@ -11,24 +11,23 @@ a { a.button, input[type="submit"] { - padding: 6px 16px; + padding: 8px 16px; width: auto; - min-height: 34px; + height: 34px; cursor: pointer; background-color: #0082c9; font-weight: bold; - border-radius: 100px; + border-radius: 8px; margin: 3px 3px 3px 0; - font-size: 13px; + font-size: 14px; color: white; - border: 1px solid black; + border: .5px solid black; outline: none; } a.button:focus, input[type="submit"]:focus { - color: black; - border: 2px solid black; + border: 1px solid black; } summary { @@ -97,7 +96,7 @@ div.toast { top: 50%; left: 50%; transform: translate(-50%, -50%); - border-radius: 16px; + border-radius: 12px; } .login > .monospace { @@ -109,14 +108,32 @@ form { margin: 0; } -input { - padding: 10px; - margin-top: 15px; +input[type="text"], +input[type="password"], +select { + padding-left: 8px; + padding-right: 8px; + height: 34px; margin-bottom: 15px; + border-radius: 8px; + border: .5px solid black; +} + +textarea { + border-radius: 8px; + border: .5px solid black; +} + +input[type="text"]:focus, +input[type="password"]:focus, +textarea:focus, +select:focus { + border: 1px solid black; } .login > form > input[type="password"], -.login > form > input[type="text"] { +.login > form > input[type="text"], +.login > form > input[type="submit"] { width: 100%; } @@ -126,28 +143,25 @@ input { display: block; } -.login > a.button , -.login > input[type="submit"] { +.login a.button, +.login input[type="submit"] { margin-left: auto; margin-right: auto; display: block; text-align: center; - line-height: 33px; - margin-top: 20px; } .login-wrapper { - height: 100%; - width: 100%; - background-color: #0082c9; - background-image: linear-gradient( - 40deg - , #0082c9 0%, #30b6ff 100%); - background-size: contain; - background-image: url('/img/background.png'), linear-gradient( - 40deg - , #0082c9 0%, #30b6ff 100%); - position: relative; + min-height: 100dvh; + min-width: 100vw; + position: fixed; + width: 100vw; + height: auto; + background-image: url("img/Background_Light.jpg"); + + background-position: center; + background-repeat: no-repeat; + background-size: cover; } main { @@ -181,6 +195,10 @@ header { display: flex; } +header > form { + margin: 0 8px; +} + .loading { color: grey; }