mirror of
https://codeberg.org/likwid/likwid.git
synced 2026-02-09 21:13:09 +00:00
ux: unify auth page styling
This commit is contained in:
parent
e1f6b120c4
commit
8e904f247a
3 changed files with 62 additions and 170 deletions
|
|
@ -482,6 +482,52 @@
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
.ui-auth-page {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 4rem 0;
|
||||
}
|
||||
|
||||
.ui-auth-card {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.ui-auth-card h1 {
|
||||
margin-bottom: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ui-auth-card .field {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.ui-auth-card label {
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.ui-auth-card .ui-btn {
|
||||
width: 100%;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.ui-auth-error {
|
||||
color: var(--color-error);
|
||||
font-size: 0.875rem;
|
||||
min-height: 1.25rem;
|
||||
}
|
||||
|
||||
.ui-auth-alt {
|
||||
text-align: center;
|
||||
margin-top: 1.5rem;
|
||||
font-size: 0.875rem;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.ui-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -13,23 +13,23 @@ const publicDemoSite = isEnabled((globalThis as any).process?.env?.PUBLIC_DEMO_S
|
|||
---
|
||||
|
||||
<Layout title="Login">
|
||||
<section class="auth-page">
|
||||
<div class="auth-card">
|
||||
<section class="ui-auth-page">
|
||||
<div class="ui-auth-card ui-card">
|
||||
<h1>Login</h1>
|
||||
<form id="login-form">
|
||||
<div class="field">
|
||||
<label for="username">Username</label>
|
||||
<input type="text" id="username" name="username" required />
|
||||
<input type="text" id="username" name="username" class="ui-input" required />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="password">Password</label>
|
||||
<input type="password" id="password" name="password" required />
|
||||
<input type="password" id="password" name="password" class="ui-input" required />
|
||||
</div>
|
||||
<div id="error" class="error"></div>
|
||||
<button type="submit">Login</button>
|
||||
<div id="error" class="ui-auth-error"></div>
|
||||
<button type="submit" class="ui-btn ui-btn-primary">Login</button>
|
||||
</form>
|
||||
{!publicDemoSite ? (
|
||||
<p class="alt-action">
|
||||
<p class="ui-auth-alt">
|
||||
Don't have an account? <a href="/register">Register</a>
|
||||
</p>
|
||||
) : null}
|
||||
|
|
@ -74,80 +74,3 @@ const publicDemoSite = isEnabled((globalThis as any).process?.env?.PUBLIC_DEMO_S
|
|||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.auth-page {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 4rem 0;
|
||||
}
|
||||
|
||||
.auth-card {
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 2rem;
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-bottom: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.field {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
background: var(--color-primary);
|
||||
color: var(--color-on-primary);
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
margin-top: 1rem;
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: transform var(--motion-fast) var(--easing-standard), background-color var(--motion-fast) var(--easing-standard), box-shadow var(--motion-fast) var(--easing-standard);
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background: var(--color-primary-hover);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
button:active {
|
||||
transform: translateY(0);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.error {
|
||||
color: var(--color-error);
|
||||
font-size: 0.875rem;
|
||||
min-height: 1.25rem;
|
||||
}
|
||||
|
||||
.alt-action {
|
||||
text-align: center;
|
||||
margin-top: 1.5rem;
|
||||
font-size: 0.875rem;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -5,30 +5,30 @@ import { API_BASE as apiBase } from '../lib/api';
|
|||
---
|
||||
|
||||
<Layout title="Register">
|
||||
<section class="auth-page">
|
||||
<div class="auth-card">
|
||||
<section class="ui-auth-page">
|
||||
<div class="ui-auth-card ui-card">
|
||||
<h1>Register</h1>
|
||||
<form id="register-form">
|
||||
<div class="field">
|
||||
<label for="username">Username</label>
|
||||
<input type="text" id="username" name="username" required minlength="3" />
|
||||
<input type="text" id="username" name="username" class="ui-input" required minlength="3" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="email">Email</label>
|
||||
<input type="email" id="email" name="email" required />
|
||||
<input type="email" id="email" name="email" class="ui-input" required />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="display_name">Display Name (optional)</label>
|
||||
<input type="text" id="display_name" name="display_name" />
|
||||
<input type="text" id="display_name" name="display_name" class="ui-input" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="password">Password</label>
|
||||
<input type="password" id="password" name="password" required minlength="8" />
|
||||
<input type="password" id="password" name="password" class="ui-input" required minlength="8" />
|
||||
</div>
|
||||
<div id="error" class="error"></div>
|
||||
<button type="submit">Create Account</button>
|
||||
<div id="error" class="ui-auth-error"></div>
|
||||
<button type="submit" class="ui-btn ui-btn-primary">Create Account</button>
|
||||
</form>
|
||||
<p class="alt-action">
|
||||
<p class="ui-auth-alt">
|
||||
Already have an account? <a href="/login">Login</a>
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -73,80 +73,3 @@ import { API_BASE as apiBase } from '../lib/api';
|
|||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.auth-page {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 4rem 0;
|
||||
}
|
||||
|
||||
.auth-card {
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 2rem;
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-bottom: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.field {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
background: var(--color-primary);
|
||||
color: var(--color-on-primary);
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
margin-top: 1rem;
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: transform var(--motion-fast) var(--easing-standard), background-color var(--motion-fast) var(--easing-standard), box-shadow var(--motion-fast) var(--easing-standard);
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background: var(--color-primary-hover);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
button:active {
|
||||
transform: translateY(0);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.error {
|
||||
color: var(--color-error);
|
||||
font-size: 0.875rem;
|
||||
min-height: 1.25rem;
|
||||
}
|
||||
|
||||
.alt-action {
|
||||
text-align: center;
|
||||
margin-top: 1.5rem;
|
||||
font-size: 0.875rem;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue