Redetzke/GHOSTWIRE
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 6 Wiki Activity

Redesign login page: dark single column with stacked logo

Browse Source
This commit is contained in:
Daniel Redetzke
2026-10-03 20:08:47 +03:00
parent c620606258
commit 31629fe904
2 changed files with 17 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app.css
+14 -8
View File
@@ -207,13 +207,19 @@ dialog::backdrop { background: rgba(22, 23, 26, .55); }
.toast.err { background: var(--bad-ink); } .toast.err { background: var(--bad-ink); }
/* login */ /* login */
.loginpage { min-height: 100vh; display: grid; place-items: center; padding: 32px 16px; background: var(--ink); } .loginpage { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 48px; padding: 32px 16px; background: var(--ink); color: #f4f4f1; }
.loginbox { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 20px; } .loginbox { width: 100%; max-width: 360px; display: flex; flex-direction: column; align-items: center; gap: 40px; }
.loginbox .brand { justify-content: center; padding: 0; } .loginbox .brand { flex-direction: column; gap: 18px; padding: 0; text-align: center; }
.loginbox .brand .wm { font-size: 20px; } .loginbox .brand .wm { font-size: 24px; letter-spacing: 0.18em; margin-right: -0.18em; }
.loginbox .brand .kana { font-size: 11px; } .loginbox .brand .kana { font-size: 12px; letter-spacing: 0.4em; margin: 6px -0.4em 0 0; }
.loginform { background: var(--surface); border-radius: 14px; padding: 28px; display: flex; flex-direction: column; gap: 16px; } .loginform { width: 100%; display: flex; flex-direction: column; gap: 14px; }
.loginform input { min-height: 44px; } .loginform .field > label { color: #c9c9c3; }
.loginform .btn { min-height: 44px; width: 100%; } .loginform input { min-height: 44px; font-size: 15px; background: #1f2024; border-color: #34353b; color: #fff; }
.loginform input:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px rgba(42, 120, 214, .25); }
.loginform .btn { min-height: 44px; width: 100%; margin-top: 10px; font-size: 15px; font-weight: 600; background: #f4f4f1; border-color: #f4f4f1; color: var(--ink); }
.loginform .btn:hover { background: #fff; border-color: #fff; }
.loginform .err-text { color: #ff8a80; }
.loginform .err-text:empty { display: none; }
.loginfoot { margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #8d8e93; }
.err-text { color: var(--bad-ink); font-size: 13px; margin: 0; } .err-text { color: var(--bad-ink); font-size: 13px; margin: 0; }
.loading-page { padding: 40px; color: var(--ink-3); } .loading-page { padding: 40px; color: var(--ink-3); }
app.js
+3 -2
View File
@@ -405,8 +405,9 @@
h('div', { class: 'field' }, h('label', { htmlFor: 'p' }, 'Password'), pw), h('div', { class: 'field' }, h('label', { htmlFor: 'p' }, 'Password'), pw),
err, btn); err, btn);
app.replaceChildren(h('div', { class: 'loginpage' }, h('div', { class: 'loginbox' }, app.replaceChildren(h('div', { class: 'loginpage' }, h('div', { class: 'loginbox' },
brand(44), brand(72),
form))); form),
h('p', { class: 'loginfoot' }, 'WireGuard server manager')));
pw.focus(); pw.focus();
} }