Locutus/locutus
2
1
Fork 0
Code Issues Pull Requests Projects Releases Activity

Restyle login window

Browse Source
This commit is contained in:
Lorenz Stechauner
2022-08-29 23:21:23 +02:00
parent 0c0dafbecf
commit f656079c7e
2 changed files with 26 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/locutus.ts
View File

@ -210,8 +210,12 @@ export class App {
<input name="account" placeholder="Account name" type="text" required/> <input name="account" placeholder="Account name" type="text" required/>
<input name="domain" placeholder="Domain" type="text" pattern="([a-zA-Z0-9_-]+\\.)+[a-zA-Z]{2,}" required/> <input name="domain" placeholder="Domain" type="text" pattern="([a-zA-Z0-9_-]+\\.)+[a-zA-Z]{2,}" required/>
<input name="password" placeholder="Password" type="password" required/> <input name="password" placeholder="Password" type="password" required/>
<fieldset>
<label><input name="saveAccountName" type="checkbox"/> Save Account Name</label> <label><input name="saveAccountName" type="checkbox"/> Save Account Name</label>
</fieldset>
<fieldset>
<label><input name="keepSession" type="checkbox"/> Keep me signed in</label> <label><input name="keepSession" type="checkbox"/> Keep me signed in</label>
</fieldset>
<button type="submit">Login</button> <button type="submit">Login</button>
</form>`; </form>`;

31
www/res/styles/styles.css
View File

@ -1,8 +1,9 @@
html { html {
font-family: 'Arial', sans-serif; font-family: 'Arial', sans-serif;
--bg-win: rgba(192, 192, 192, 0.25); --bg-win: #C0C0C040;
--bg: rgba(224, 224, 224, 0.5); --bg: #FFFFFF80;
--bg-border: #FFFFFFC0;
--fg-soft: rgba(32, 32, 32, 0.5); --fg-soft: rgba(32, 32, 32, 0.5);
--footer-height: 2em; --footer-height: 2em;
} }
@ -57,15 +58,22 @@ main {
} }
#windows > * { #windows > * {
padding: 0.5em 1em; padding: 1em 2em;
} }
div.window-login, div.window-login,
div.window-welcome { div.window-welcome {
max-width: 650px;
margin: calc(max(var(--vh, 1vh) * 25, 8em) - 8em) auto 1em auto; 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-login h1,
div.window-welcome h1 { div.window-welcome h1 {
text-align: center; text-align: center;
@ -93,23 +101,23 @@ footer div {
form { form {
max-width: 400px; 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 button,
form fieldset,
a.button, a.button,
form div { form div {
border: 1px solid var(--bg); border: 1px solid var(--bg-border);
border-radius: 4px; border-radius: 4px;
outline: none;
padding: 0.5em 1em; padding: 0.5em 1em;
display: block; display: block;
box-sizing: border-box; box-sizing: border-box;
margin: 1em auto; margin: 1em auto;
font-size: 1em; font-size: 1em;
color: #000000; color: #000000;
transition: border-color 0.125s, background-color 0.125s; transition: border-color 0.0625s, background-color 0.0625s;
} }
form input, form input,
@ -132,8 +140,9 @@ a.button {
width: 100px; width: 100px;
} }
form input, form input:is([type=text], [type=password]),
form button { form button,
form fieldset {
width: 100%; width: 100%;
} }