diff --git a/src/locutus.ts b/src/locutus.ts index 3294080..ce81ac5 100644 --- a/src/locutus.ts +++ b/src/locutus.ts @@ -210,8 +210,12 @@ export class App { - - +
+ +
+
+ +
`; diff --git a/www/res/styles/styles.css b/www/res/styles/styles.css index a7951f0..05db78f 100644 --- a/www/res/styles/styles.css +++ b/www/res/styles/styles.css @@ -1,8 +1,9 @@ html { font-family: 'Arial', sans-serif; - --bg-win: rgba(192, 192, 192, 0.25); - --bg: rgba(224, 224, 224, 0.5); + --bg-win: #C0C0C040; + --bg: #FFFFFF80; + --bg-border: #FFFFFFC0; --fg-soft: rgba(32, 32, 32, 0.5); --footer-height: 2em; } @@ -57,15 +58,22 @@ main { } #windows > * { - padding: 0.5em 1em; + padding: 1em 2em; } div.window-login, div.window-welcome { - max-width: 650px; margin: calc(max(var(--vh, 1vh) * 25, 8em) - 8em) auto 1em auto; } +div.window-login { + max-width: 450px; +} + +div.window-welcome { + max-width: 650px; +} + div.window-login h1, div.window-welcome h1 { text-align: center; @@ -93,23 +101,23 @@ footer div { form { max-width: 400px; - margin: 1.5em auto; + margin: 1.5em auto 1em auto; } -form input, +form input:is([type=text], [type=password]), form button, +form fieldset, a.button, form div { - border: 1px solid var(--bg); + border: 1px solid var(--bg-border); border-radius: 4px; - outline: none; padding: 0.5em 1em; display: block; box-sizing: border-box; margin: 1em auto; font-size: 1em; color: #000000; - transition: border-color 0.125s, background-color 0.125s; + transition: border-color 0.0625s, background-color 0.0625s; } form input, @@ -132,8 +140,9 @@ a.button { width: 100px; } -form input, -form button { +form input:is([type=text], [type=password]), +form button, +form fieldset { width: 100%; }