diff --git a/static/css/dashboard.css b/static/css/dashboard.css index 35b88305..066f6868 100644 --- a/static/css/dashboard.css +++ b/static/css/dashboard.css @@ -144,6 +144,20 @@ body { image-rendering: crisp-edges; } +.login-logo-fallback { + width: 80px; + height: 80px; + margin: 0 auto 1.25rem; + border-radius: 16px; + background: var(--bg2); + display: flex; + align-items: center; + justify-content: center; + color: var(--orange); + font-size: 2rem; + box-shadow: var(--shadow); +} + .login-header h1 { font-size: 1.75rem; font-weight: 800; @@ -170,8 +184,9 @@ body { .form-group label { position: absolute; - top: 1.125rem; + top: 50%; left: 1.25rem; + transform: translateY(-50%); font-size: 0.875rem; color: var(--fg3); pointer-events: none; @@ -180,6 +195,9 @@ body { padding: 0 0.375rem; z-index: 2; font-weight: 500; + display: flex; + align-items: center; + gap: 0.5rem; } .form-group input:focus ~ label, @@ -189,10 +207,11 @@ body { font-size: 0.7rem; color: var(--orange); font-weight: 600; + transform: translateY(0); } .form-group input { - padding: 1.625rem 1.25rem 1rem 1.25rem; + padding: 1rem 1.25rem; background: var(--bg0); border: 2px solid var(--bg3); border-radius: 12px; @@ -200,6 +219,7 @@ body { color: var(--fg1); transition: all 0.3s; width: 100%; + box-sizing: border-box; } .form-group input:focus { @@ -225,6 +245,8 @@ body { gap: 0.5rem; text-transform: uppercase; letter-spacing: 0.05em; + margin: 0 auto; + max-width: 200px; } .login-btn:hover { @@ -280,7 +302,7 @@ body { margin: 1rem; } - .login-logo { + .login-logo, .login-logo-fallback { width: 64px; height: 64px; } diff --git a/static/index.html b/static/index.html index 4cca6d92..73ecb4b8 100644 --- a/static/index.html +++ b/static/index.html @@ -8,7 +8,6 @@ - @@ -18,23 +17,30 @@