feat: replace Bootstrap with custom CSS and add profile page
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
- Add self-hosted style.css replacing Bootstrap CDN dependency - Add profile.html with tabbed view (account info, emails/aliases, API token) - Refactor login handler to pass structured data to template instead of building HTML strings - Add brand-name and brand-logo flags/env vars for UI customization - Update CSP to allow brand logo domain and remove CDN references - Update all templates to pass template vars to header/footer and use new CSS classes Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
910dd7b47a
commit
99def55e80
12 changed files with 796 additions and 107 deletions
|
|
@ -1,49 +1,46 @@
|
|||
{{template "header"}}
|
||||
<h1 class="display-4">Change your password <small class="text-muted">Fill the following fields!</small></h1>
|
||||
{{template "header" .}}
|
||||
<h1 class="page-title">Change your password</h1>
|
||||
<p class="page-subtitle">Fill the following fields!</p>
|
||||
|
||||
<form method="post" action="change">
|
||||
{{if .error}}<div class="alert alert-danger" role="alert">{{.error}}</div>{{end}}
|
||||
{{if .error}}<div class="alert alert-error" role="alert">{{.error}}</div>{{end}}
|
||||
<input type="hidden" name="csrf_token" value="{{ .csrf_token }}">
|
||||
<div class="form-group">
|
||||
<div class="form-field">
|
||||
<input name="login" required="" class="form-control" id="input_0" type="text" placeholder="Login" autofocus>
|
||||
</div>
|
||||
<div class="form-group input-group">
|
||||
<div class="form-field input-group">
|
||||
<input name="password" required="" class="form-control" id="input_1" type="password" placeholder="Current password">
|
||||
<div class="input-group-append">
|
||||
<button class="btn btn-outline-secondary" type="button" onclick="document.getElementById('input_1').type = document.getElementById('input_1').type=='password'?'text':'password'">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye" viewBox="0 0 16 16">
|
||||
<path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
|
||||
<path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<button class="btn-toggle-password" type="button" onclick="var i=document.getElementById('input_1');i.type=i.type=='password'?'text':'password'">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
||||
<path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
|
||||
<path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="form-group input-group">
|
||||
<div class="form-field input-group">
|
||||
<input name="newpassword" required="" class="form-control" id="input_2" type="password" placeholder="New password">
|
||||
<div class="input-group-append">
|
||||
<button class="btn btn-outline-secondary" type="button" onclick="document.getElementById('input_2').type = document.getElementById('input_2').type=='password'?'text':'password'">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye" viewBox="0 0 16 16">
|
||||
<path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
|
||||
<path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<button class="btn-toggle-password" type="button" onclick="var i=document.getElementById('input_2');i.type=i.type=='password'?'text':'password'">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
||||
<path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
|
||||
<path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="form-group input-group">
|
||||
<div class="form-field input-group">
|
||||
<input name="new2password" required="" class="form-control" id="input_3" type="password" placeholder="Retype new password">
|
||||
<div class="input-group-append">
|
||||
<button class="btn btn-outline-secondary" type="button" onclick="document.getElementById('input_3').type = document.getElementById('input_3').type=='password'?'text':'password'">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye" viewBox="0 0 16 16">
|
||||
<path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
|
||||
<path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<button class="btn-toggle-password" type="button" onclick="var i=document.getElementById('input_3');i.type=i.type=='password'?'text':'password'">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
||||
<path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
|
||||
<path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="form-field">
|
||||
<altcha-widget challengeurl="altcha-challenge"></altcha-widget>
|
||||
</div>
|
||||
<button class="btn btn-primary" type="submit">Change my password</button>
|
||||
<a href="/lost" class="btn btn-outline-secondary">Forgot your password?</a>
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-primary" type="submit">Change my password</button>
|
||||
<a href="/lost" class="btn btn-secondary">Forgot your password?</a>
|
||||
</div>
|
||||
</form>
|
||||
{{template "footer"}}
|
||||
{{template "footer" .}}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
{{define "footer"}}
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,18 +1,17 @@
|
|||
{{define "header"}}
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- Required meta tags -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
|
||||
<!-- Bootstrap CSS -->
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
|
||||
|
||||
<title>nemunai.re password change</title>
|
||||
<script src="altcha.min.js" type="module" async defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="jumbotron">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>{{if .brand_name}}{{.brand_name}} - {{end}}Password management</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="altcha.min.js" type="module" async defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="card{{if .card_wide}} card-wide{{end}}">
|
||||
<div class="brand">
|
||||
{{if .brand_logo}}<img src="{{.brand_logo}}" alt="" class="brand-logo">{{end}}
|
||||
<span class="brand-name">{{if .brand_name}}{{.brand_name}}{{else}}Password management{{end}}</span>
|
||||
</div>
|
||||
{{end}}
|
||||
|
|
|
|||
|
|
@ -1,18 +1,21 @@
|
|||
{{template "header"}}
|
||||
<h1 class="display-4">Sign in <small class="text-muted">Don't have an account? <a href="/register">Create one!</a></small></h1>
|
||||
{{template "header" .}}
|
||||
<h1 class="page-title">Sign in</h1>
|
||||
<p class="page-subtitle">Don't have an account? <a href="/register">Create one!</a></p>
|
||||
|
||||
<form method="post" action="login">
|
||||
{{if .error}}<div class="alert alert-danger" role="alert">{{.error}}</div>{{end}}
|
||||
<div class="form-group">
|
||||
{{if .error}}<div class="alert alert-error" role="alert">{{.error}}</div>{{end}}
|
||||
<div class="form-field">
|
||||
<input name="login" required="" class="form-control" id="input_0" type="text" placeholder="Login" autofocus>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="form-field">
|
||||
<input name="password" required="" class="form-control" id="input_1" type="password" placeholder="Current password">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="form-field">
|
||||
<altcha-widget challengeurl="altcha-challenge"></altcha-widget>
|
||||
</div>
|
||||
<button class="btn btn-primary" type="submit">Sign in</button>
|
||||
<a href="/lost" class="btn btn-outline-secondary">Forgot your password?</a>
|
||||
</form>
|
||||
{{template "footer"}}
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-primary" type="submit">Sign in</button>
|
||||
<a href="/lost" class="btn btn-secondary">Forgot your password?</a>
|
||||
</div>
|
||||
</form>
|
||||
{{template "footer" .}}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,19 @@
|
|||
{{template "header"}}
|
||||
<h1 class="display-4">Forgot your password? <small class="text-muted">We'll send you a link by e-mail to reset it!</small></h1>
|
||||
{{template "header" .}}
|
||||
<h1 class="page-title">Forgot your password?</h1>
|
||||
<p class="page-subtitle">We'll send you a link by e-mail to reset it!</p>
|
||||
|
||||
<form method="post" action="lost">
|
||||
{{if .error}}<div class="alert alert-danger" role="alert">{{.error}}</div>{{end}}
|
||||
{{if .error}}<div class="alert alert-error" role="alert">{{.error}}</div>{{end}}
|
||||
<input type="hidden" name="csrf_token" value="{{ .csrf_token }}">
|
||||
<div class="form-group">
|
||||
<div class="form-field">
|
||||
<input name="login" required="" class="form-control" id="input_0" type="text" placeholder="Login" autofocus>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="form-field">
|
||||
<altcha-widget challengeurl="altcha-challenge"></altcha-widget>
|
||||
</div>
|
||||
<button class="btn btn-primary" type="submit">Reset my password</button>
|
||||
<a href="/change" class="btn btn-outline-success">Just want to change your password?</a>
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-primary" type="submit">Reset my password</button>
|
||||
<a href="/change" class="btn btn-secondary">Just want to change your password?</a>
|
||||
</div>
|
||||
</form>
|
||||
{{template "footer"}}
|
||||
{{template "footer" .}}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
{{template "header"}}
|
||||
{{if .message}}<div class="alert alert-success">{{.message}}</div>{{end}}
|
||||
{{if .error}}<div class="alert alert-danger">{{.error}}</div>{{end}}
|
||||
{{if .details}}<p>{{.details}}</p>{{end}}
|
||||
{{template "footer"}}
|
||||
{{template "header" .}}
|
||||
<div class="message-page">
|
||||
{{if .message}}<div class="alert alert-success">{{.message}}</div>{{end}}
|
||||
{{if .error}}<div class="alert alert-error">{{.error}}</div>{{end}}
|
||||
{{if .details}}<p class="details-text">{{.details}}</p>{{end}}
|
||||
</div>
|
||||
{{template "footer" .}}
|
||||
|
|
|
|||
76
static/profile.html
Normal file
76
static/profile.html
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
{{template "header" .}}
|
||||
<h1 class="page-title">Welcome, {{.login}}</h1>
|
||||
|
||||
<nav class="tabs">
|
||||
<button class="tab-btn active" onclick="showTab(this,'account')">Account</button>
|
||||
{{if or .emails .aliases}}<button class="tab-btn" onclick="showTab(this,'email')">Email & Aliases</button>{{end}}
|
||||
<button class="tab-btn" onclick="showTab(this,'api')">API</button>
|
||||
</nav>
|
||||
|
||||
<div id="tab-account" class="tab-panel">
|
||||
{{if .fields}}
|
||||
<table class="info-table">
|
||||
{{range .fields}}
|
||||
<tr>
|
||||
<th>{{.Label}}</th>
|
||||
<td>{{.Value}}</td>
|
||||
</tr>
|
||||
{{end}}
|
||||
</table>
|
||||
{{else}}
|
||||
<p class="section-empty">No account information available.</p>
|
||||
{{end}}
|
||||
</div>
|
||||
|
||||
{{if or .emails .aliases}}
|
||||
<div id="tab-email" class="tab-panel hidden">
|
||||
{{if .emails}}
|
||||
<h3 class="section-title">Email addresses</h3>
|
||||
<ul class="email-list">
|
||||
{{range .emails}}
|
||||
<li>{{.}}</li>
|
||||
{{end}}
|
||||
</ul>
|
||||
{{end}}
|
||||
{{if .aliases}}
|
||||
<h3 class="section-title">Disposable aliases</h3>
|
||||
<ul class="alias-list">
|
||||
{{range .aliases}}
|
||||
<li id="{{.ElemID}}" class="alias-item">
|
||||
<span class="alias-value">{{.Value}}</span>
|
||||
<button class="btn btn-danger btn-sm"
|
||||
data-alias="{{.URLSafe}}"
|
||||
data-token="{{.Token}}"
|
||||
data-elem="{{.ElemID}}"
|
||||
onclick="deleteAlias(this)">Delete</button>
|
||||
</li>
|
||||
{{end}}
|
||||
</ul>
|
||||
{{end}}
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
<div id="tab-api" class="tab-panel hidden">
|
||||
<p class="section-desc">Use this token to authenticate with the Addy.io-compatible alias API:</p>
|
||||
<div class="api-token-box">{{.api_token}}</div>
|
||||
<p class="section-desc">Endpoint: <code>POST /api/v1/aliases</code> — <code>DELETE /api/v1/aliases/{alias}</code></p>
|
||||
<p class="section-desc">Set the <code>Authorization: Bearer <token></code> header on each request.</p>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function showTab(btn, name) {
|
||||
document.querySelectorAll('.tab-panel').forEach(function(p) { p.classList.add('hidden'); });
|
||||
document.querySelectorAll('.tab-btn').forEach(function(b) { b.classList.remove('active'); });
|
||||
document.getElementById('tab-' + name).classList.remove('hidden');
|
||||
btn.classList.add('active');
|
||||
}
|
||||
function deleteAlias(btn) {
|
||||
fetch('/api/v1/aliases/' + btn.dataset.alias, {
|
||||
method: 'DELETE',
|
||||
headers: {'Authorization': 'Bearer ' + btn.dataset.token}
|
||||
}).then(function(r) {
|
||||
if (r.ok) document.getElementById(btn.dataset.elem).remove();
|
||||
});
|
||||
}
|
||||
</script>
|
||||
{{template "footer" .}}
|
||||
|
|
@ -1,23 +1,26 @@
|
|||
{{template "header"}}
|
||||
<h1 class="display-4">Forgot your password? <small class="text-muted">Define a new one!</small></h1>
|
||||
{{template "header" .}}
|
||||
<h1 class="page-title">Forgot your password?</h1>
|
||||
<p class="page-subtitle">Define a new one!</p>
|
||||
|
||||
<form method="post" action="reset">
|
||||
{{if .error}}<div class="alert alert-danger" role="alert">{{.error}}</div>{{end}}
|
||||
{{if .error}}<div class="alert alert-error" role="alert">{{.error}}</div>{{end}}
|
||||
<input type="hidden" name="csrf_token" value="{{ .csrf_token }}">
|
||||
<div class="form-group">
|
||||
<div class="form-field">
|
||||
<input required="" class="form-control" id="input_0" type="text" placeholder="Email" value="{{ .login }}" disabled="">
|
||||
</div>
|
||||
<input type="hidden" name="login" value="{{ .login }}">
|
||||
<input type="hidden" name="token" value="{{ .token }}">
|
||||
<div class="form-group">
|
||||
<div class="form-field">
|
||||
<input autofocus name="newpassword" required="" class="form-control" id="input_2" type="password" placeholder="New password">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="form-field">
|
||||
<input name="new2password" required="" class="form-control" id="input_3" type="password" placeholder="Retype new password">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="form-field">
|
||||
<altcha-widget challengeurl="altcha-challenge"></altcha-widget>
|
||||
</div>
|
||||
<button class="btn btn-primary" type="submit">Reset my password</button>
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-primary" type="submit">Reset my password</button>
|
||||
</div>
|
||||
</form>
|
||||
{{template "footer"}}
|
||||
{{template "footer" .}}
|
||||
|
|
|
|||
479
static/style.css
Normal file
479
static/style.css
Normal file
|
|
@ -0,0 +1,479 @@
|
|||
/* ============================================================
|
||||
CSS custom properties
|
||||
============================================================ */
|
||||
:root {
|
||||
--bg: #f4f6f9;
|
||||
--card-bg: #ffffff;
|
||||
--card-shadow: 0 4px 24px rgba(0,0,0,.10);
|
||||
--text: #1a1d23;
|
||||
--text-muted: #6b7280;
|
||||
--border: #d1d5db;
|
||||
--input-bg: #ffffff;
|
||||
--input-focus-border: #4f46e5;
|
||||
--input-focus-shadow: 0 0 0 3px rgba(79,70,229,.15);
|
||||
--btn-primary-bg: #4f46e5;
|
||||
--btn-primary-hover: #4338ca;
|
||||
--btn-secondary-bg: #f3f4f6;
|
||||
--btn-secondary-hover: #e5e7eb;
|
||||
--btn-secondary-text: #374151;
|
||||
--alert-error-bg: #fef2f2;
|
||||
--alert-error-border: #fca5a5;
|
||||
--alert-error-text: #991b1b;
|
||||
--alert-success-bg: #f0fdf4;
|
||||
--alert-success-border: #86efac;
|
||||
--alert-success-text: #166534;
|
||||
--brand-border: #e5e7eb;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--bg: #0f1117;
|
||||
--card-bg: #1e2130;
|
||||
--card-shadow: 0 4px 24px rgba(0,0,0,.40);
|
||||
--text: #e5e7eb;
|
||||
--text-muted: #9ca3af;
|
||||
--border: #374151;
|
||||
--input-bg: #111827;
|
||||
--input-focus-border: #6366f1;
|
||||
--input-focus-shadow: 0 0 0 3px rgba(99,102,241,.20);
|
||||
--btn-primary-bg: #6366f1;
|
||||
--btn-primary-hover: #4f46e5;
|
||||
--btn-secondary-bg: #374151;
|
||||
--btn-secondary-hover: #4b5563;
|
||||
--btn-secondary-text: #d1d5db;
|
||||
--alert-error-bg: #3b1515;
|
||||
--alert-error-border: #7f1d1d;
|
||||
--alert-error-text: #fca5a5;
|
||||
--alert-success-bg: #052e16;
|
||||
--alert-success-border: #14532d;
|
||||
--alert-success-text: #86efac;
|
||||
--brand-border: #374151;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Base
|
||||
============================================================ */
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Card
|
||||
============================================================ */
|
||||
.card {
|
||||
background: var(--card-bg);
|
||||
border-radius: 12px;
|
||||
box-shadow: var(--card-shadow);
|
||||
padding: 2rem 2.5rem;
|
||||
width: 100%;
|
||||
max-width: 440px;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Brand
|
||||
============================================================ */
|
||||
.brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.625rem;
|
||||
padding-bottom: 1.25rem;
|
||||
margin-bottom: 1.5rem;
|
||||
border-bottom: 1px solid var(--brand-border);
|
||||
}
|
||||
|
||||
.brand-logo {
|
||||
height: 2rem;
|
||||
width: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.brand-name {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.01em;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Page title / subtitle
|
||||
============================================================ */
|
||||
.page-title {
|
||||
font-size: 1.375rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.page-subtitle a {
|
||||
color: var(--btn-primary-bg);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.page-subtitle a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Alerts
|
||||
============================================================ */
|
||||
.alert {
|
||||
border-radius: 8px;
|
||||
padding: 0.75rem 1rem;
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 1rem;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.alert-error {
|
||||
background: var(--alert-error-bg);
|
||||
border-color: var(--alert-error-border);
|
||||
color: var(--alert-error-text);
|
||||
}
|
||||
|
||||
.alert-success {
|
||||
background: var(--alert-success-bg);
|
||||
border-color: var(--alert-success-border);
|
||||
color: var(--alert-success-text);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Forms
|
||||
============================================================ */
|
||||
.form-field {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0.625rem 0.875rem;
|
||||
font-size: 0.9375rem;
|
||||
font-family: inherit;
|
||||
background: var(--input-bg);
|
||||
color: var(--text);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
transition: border-color .15s, box-shadow .15s;
|
||||
outline: none;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
border-color: var(--input-focus-border);
|
||||
box-shadow: var(--input-focus-shadow);
|
||||
}
|
||||
|
||||
.form-control::placeholder {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.form-control:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Input group with toggle button */
|
||||
.input-group {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.input-group .form-control {
|
||||
padding-right: 3rem;
|
||||
}
|
||||
|
||||
.btn-toggle-password {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 2.75rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: var(--text-muted);
|
||||
border-radius: 0 8px 8px 0;
|
||||
transition: color .15s;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.btn-toggle-password:hover {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Buttons
|
||||
============================================================ */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.625rem 1.25rem;
|
||||
font-size: 0.9375rem;
|
||||
font-family: inherit;
|
||||
font-weight: 500;
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--btn-primary-bg);
|
||||
color: #ffffff;
|
||||
border-color: var(--btn-primary-bg);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: var(--btn-primary-hover);
|
||||
border-color: var(--btn-primary-hover);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: var(--btn-secondary-bg);
|
||||
color: var(--btn-secondary-text);
|
||||
border-color: var(--border);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: var(--btn-secondary-hover);
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Message page
|
||||
============================================================ */
|
||||
.message-page {
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
|
||||
.details-text {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.9rem;
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
altcha widget
|
||||
============================================================ */
|
||||
.form-field altcha-widget {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Card wide (profile page)
|
||||
============================================================ */
|
||||
.card-wide {
|
||||
max-width: 680px;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Tabs
|
||||
============================================================ */
|
||||
.tabs {
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
border-bottom: 2px solid var(--border);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.tab-btn {
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 0.9rem;
|
||||
font-family: inherit;
|
||||
font-weight: 500;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-bottom: 2px solid transparent;
|
||||
margin-bottom: -2px;
|
||||
cursor: pointer;
|
||||
color: var(--text-muted);
|
||||
border-radius: 4px 4px 0 0;
|
||||
transition: color .15s, border-color .15s;
|
||||
}
|
||||
|
||||
.tab-btn:hover {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.tab-btn.active {
|
||||
color: var(--btn-primary-bg);
|
||||
border-bottom-color: var(--btn-primary-bg);
|
||||
}
|
||||
|
||||
.tab-panel.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Profile: Account tab
|
||||
============================================================ */
|
||||
.info-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.info-table th,
|
||||
.info-table td {
|
||||
padding: 0.5rem 0.625rem;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid var(--border);
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.info-table th {
|
||||
width: 38%;
|
||||
color: var(--text-muted);
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.info-table tr:last-child th,
|
||||
.info-table tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.section-empty {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Profile: Email & Aliases tab
|
||||
============================================================ */
|
||||
.section-title {
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 0.625rem;
|
||||
}
|
||||
|
||||
.section-title + .section-title,
|
||||
.email-list + .section-title,
|
||||
.alias-list + .section-title {
|
||||
margin-top: 1.25rem;
|
||||
}
|
||||
|
||||
.email-list {
|
||||
list-style: none;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.email-list li {
|
||||
padding: 0.4rem 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.email-list li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.alias-list {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.alias-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
padding: 0.4rem 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.alias-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.alias-value {
|
||||
font-size: 0.875rem;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Profile: API tab
|
||||
============================================================ */
|
||||
.api-token-box {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
font-size: 0.8125rem;
|
||||
background: var(--input-bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
padding: 0.75rem 1rem;
|
||||
word-break: break-all;
|
||||
margin: 0.75rem 0;
|
||||
user-select: all;
|
||||
}
|
||||
|
||||
.section-desc {
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.section-desc code {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
font-size: 0.8125rem;
|
||||
background: var(--btn-secondary-bg);
|
||||
padding: 0.1em 0.35em;
|
||||
border-radius: 4px;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Button variants
|
||||
============================================================ */
|
||||
.btn-danger {
|
||||
background: #dc2626;
|
||||
color: #ffffff;
|
||||
border-color: #dc2626;
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background: #b91c1c;
|
||||
border-color: #b91c1c;
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
padding: 0.3rem 0.75rem;
|
||||
font-size: 0.8125rem;
|
||||
border-radius: 6px;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue