Pierre-Olivier Mercier
ef29a0c7f1
Users can now generate a random disposable alias by selecting an allowed domain from a dropdown and clicking "Generate alias", without specifying a custom local part. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
575 lines
12 KiB
CSS
575 lines
12 KiB
CSS
/* ============================================================
|
|
CSS custom properties
|
|
============================================================ */
|
|
:root {
|
|
--bg: linear-gradient(165deg, #b2d9f5 0%, #ceeabd 50%, #edf6e8 100%);
|
|
--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: #2fa700;
|
|
--input-focus-shadow: 0 0 0 3px rgba(47,167,0,.15);
|
|
--btn-primary-bg: #2fa700;
|
|
--btn-primary-hover: #279100;
|
|
--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: linear-gradient(165deg, #06101e 0%, #091a0d 55%, #0f1117 100%);
|
|
--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: #35b800;
|
|
--input-focus-shadow: 0 0 0 3px rgba(53,184,0,.20);
|
|
--btn-primary-bg: #35b800;
|
|
--btn-primary-hover: #2fa700;
|
|
--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);
|
|
background-attachment: fixed;
|
|
color: var(--text);
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 1.5rem;
|
|
padding: 2rem 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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.btn-group .btn {
|
|
flex: 1;
|
|
}
|
|
|
|
/* ============================================================
|
|
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;
|
|
max-width: 100% !important;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.form-field altcha-widget .altcha {
|
|
background: var(--input-bg);
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
color: var(--text);
|
|
font-family: inherit;
|
|
font-size: 0.9375rem;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
max-width: 100% !important;
|
|
}
|
|
|
|
.form-field altcha-widget .altcha-main {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
padding: 0.625rem 0.875rem;
|
|
}
|
|
|
|
.form-field altcha-widget .altcha-checkbox {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.form-field altcha-widget .altcha-checkbox input[type="checkbox"] {
|
|
width: 1.125rem;
|
|
height: 1.125rem;
|
|
accent-color: var(--btn-primary-bg);
|
|
cursor: pointer;
|
|
margin: 0;
|
|
}
|
|
|
|
.form-field altcha-widget .altcha-label {
|
|
flex: 1;
|
|
}
|
|
|
|
.form-field altcha-widget .altcha-label label {
|
|
cursor: pointer;
|
|
color: var(--text);
|
|
}
|
|
|
|
.form-field altcha-widget .altcha-logo {
|
|
color: var(--text-muted);
|
|
display: flex;
|
|
align-items: center;
|
|
transition: color .15s;
|
|
}
|
|
|
|
.form-field altcha-widget .altcha-logo:hover {
|
|
color: var(--text);
|
|
}
|
|
|
|
.form-field altcha-widget .altcha-footer {
|
|
font-size: 0.75rem;
|
|
color: var(--text-muted);
|
|
padding: 0.35rem 0.875rem;
|
|
border-top: 1px solid var(--border);
|
|
background: var(--btn-secondary-bg);
|
|
}
|
|
|
|
.form-field altcha-widget .altcha-footer a {
|
|
color: var(--btn-primary-bg);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.form-field altcha-widget .altcha-footer a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* ============================================================
|
|
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;
|
|
}
|
|
|
|
.alias-create {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
margin-top: 1rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.alias-domain-select {
|
|
font-size: 0.875rem;
|
|
padding: 0.25rem 0.5rem;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
background: var(--surface);
|
|
color: var(--text);
|
|
}
|
|
|
|
.alias-create-error {
|
|
font-size: 0.8rem;
|
|
color: var(--danger);
|
|
}
|
|
|
|
/* ============================================================
|
|
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;
|
|
}
|