mirror of
https://codeberg.org/PostERG/xamxam.git
synced 2026-06-25 08:09:18 +02:00
style: unify form element styles in common.css, redesign focus rings, refactor public search bar, tweak admin section
This commit is contained in:
Pontoporeia
@@ -16,16 +16,10 @@
|
||||
white-space: nowrap;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
.admin-body header nav > a,
|
||||
.admin-body header nav ul {
|
||||
.admin-body header nav .nav-left,
|
||||
.admin-body header nav .nav-right-links {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.admin-body header nav,
|
||||
.admin-body header nav ul,
|
||||
.admin-body header nav li {
|
||||
list-style: none;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.admin-body header nav ul [data-nav-logout] a {
|
||||
opacity: 0.6;
|
||||
@@ -40,7 +34,7 @@
|
||||
}
|
||||
|
||||
/* Public-site link icon in admin nav */
|
||||
.admin-body header nav > a svg {
|
||||
.admin-body header nav .nav-logo svg {
|
||||
vertical-align: middle;
|
||||
margin-right: 0.4em;
|
||||
}
|
||||
@@ -57,14 +51,17 @@
|
||||
overflow-y: auto;
|
||||
padding: var(--space-l) var(--space-l) var(--space-2xl);
|
||||
width: 100%;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(149, 87, 181, 0.18) 0%,
|
||||
rgba(0, 0, 0, 0) 6%
|
||||
);
|
||||
}
|
||||
|
||||
.admin-body main > h1,
|
||||
.admin-list-header > h1 {
|
||||
font-size: var(--step-2);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
margin: 0 0 var(--space-l) 0;
|
||||
}
|
||||
|
||||
@@ -115,7 +112,7 @@
|
||||
|
||||
.toast {
|
||||
padding: var(--space-s) var(--space-m);
|
||||
border-radius: 8px;
|
||||
border-radius: var(--radius);
|
||||
font-size: var(--step-0);
|
||||
border-left: 4px solid;
|
||||
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
|
||||
@@ -170,7 +167,7 @@
|
||||
.admin-stat {
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--radius);
|
||||
padding: var(--space-2xs) var(--space-s);
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
@@ -201,7 +198,7 @@
|
||||
gap: var(--space-s);
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--radius);
|
||||
padding: var(--space-2xs) var(--space-s);
|
||||
margin-bottom: var(--space-m);
|
||||
font-size: var(--step--1);
|
||||
@@ -245,23 +242,6 @@
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.admin-filters input[type="text"],
|
||||
.admin-filters select {
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: 3px;
|
||||
font-size: var(--step--1);
|
||||
font-family: inherit;
|
||||
padding: var(--space-3xs) var(--space-xs);
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.admin-filters input[type="text"]:focus,
|
||||
.admin-filters select:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.admin-filters-btn {
|
||||
/* deprecated alias for .btn--primary; kept for backward-compat */
|
||||
}
|
||||
@@ -278,7 +258,7 @@
|
||||
padding: var(--space-2xs) var(--space-s);
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--radius);
|
||||
margin-bottom: var(--space-s);
|
||||
font-size: var(--step--1);
|
||||
}
|
||||
@@ -326,7 +306,7 @@
|
||||
.status-badge {
|
||||
display: inline-block;
|
||||
padding: var(--space-3xs) var(--space-2xs);
|
||||
border-radius: 3px;
|
||||
border-radius: var(--radius);
|
||||
font-size: var(--step--2);
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.04em;
|
||||
@@ -346,7 +326,7 @@
|
||||
display: inline-block;
|
||||
font-size: var(--step--2);
|
||||
padding: var(--space-3xs) var(--space-3xs);
|
||||
border-radius: 3px;
|
||||
border-radius: var(--radius);
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--text-secondary);
|
||||
letter-spacing: 0.03em;
|
||||
@@ -411,14 +391,13 @@
|
||||
/* ── Thesis info sections (thanks page) ─────────────────────────────────── */
|
||||
.admin-body main > section:not([aria-labelledby^="settings-"]) {
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: 6px;
|
||||
border-radius: var(--radius);
|
||||
padding: var(--space-m);
|
||||
margin-bottom: var(--space-m);
|
||||
}
|
||||
|
||||
.admin-body main > section:not([aria-labelledby^="settings-"]) h2 {
|
||||
margin: 0 0 var(--space-s);
|
||||
font-size: var(--step-1);
|
||||
border-bottom: 1px solid var(--border-primary);
|
||||
padding-bottom: var(--space-2xs);
|
||||
}
|
||||
@@ -449,7 +428,6 @@
|
||||
}
|
||||
|
||||
.admin-body main > section[aria-labelledby^="settings-"] > h2 {
|
||||
font-size: var(--step-1);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
@@ -490,7 +468,7 @@
|
||||
/* ── Account status block ───────────────────────────────────────────────── */
|
||||
.admin-account-status {
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--radius);
|
||||
padding: var(--space-s) var(--space-m);
|
||||
margin-bottom: var(--space-l);
|
||||
display: flex;
|
||||
@@ -514,7 +492,7 @@
|
||||
font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
|
||||
font-size: var(--step--2);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: 3px;
|
||||
border-radius: var(--radius);
|
||||
padding: var(--space-3xs) var(--space-3xs);
|
||||
color: var(--text-secondary);
|
||||
background: var(--bg-secondary);
|
||||
@@ -529,7 +507,7 @@
|
||||
/* ── Danger zone (account page) ─────────────────────────────────────────── */
|
||||
.admin-danger-zone {
|
||||
border: 1px solid var(--danger-border-muted);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--radius);
|
||||
padding: var(--space-m) var(--space-m);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -553,7 +531,7 @@
|
||||
.admin-login-box {
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--radius);
|
||||
padding: var(--space-l);
|
||||
width: 100%;
|
||||
max-width: 380px;
|
||||
@@ -561,7 +539,6 @@
|
||||
|
||||
.admin-login-box h2 {
|
||||
margin: 0 0 var(--space-m);
|
||||
font-size: var(--step-0);
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -597,7 +574,7 @@
|
||||
background: var(--success-muted-bg);
|
||||
border: 1px solid var(--success);
|
||||
border-left: 3px solid var(--success);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--radius);
|
||||
padding: var(--space-xs) var(--space-s);
|
||||
font-size: var(--step--1);
|
||||
margin: 0;
|
||||
@@ -607,7 +584,7 @@
|
||||
background: var(--accent-muted);
|
||||
border: 1px solid var(--error);
|
||||
border-left: 3px solid var(--error);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--radius);
|
||||
padding: var(--space-xs) var(--space-s);
|
||||
font-size: var(--step--1);
|
||||
margin-bottom: var(--space-s);
|
||||
@@ -712,39 +689,55 @@
|
||||
max-height: 100px;
|
||||
object-fit: cover;
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: 3px;
|
||||
border-radius: var(--radius);
|
||||
display: block;
|
||||
margin-top: var(--space-2xs);
|
||||
}
|
||||
|
||||
/* ── List page toolbar (title + filters + stats + import, one row) ───────── */
|
||||
.admin-list-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-m);
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
gap: var(--space-m) var(--space-l);
|
||||
margin-bottom: var(--space-m);
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.admin-list-toolbar h1 {
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.admin-list-toolbar .admin-stats {
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
.admin-list-toolbar .admin-filters {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-xs);
|
||||
margin-bottom: 0;
|
||||
flex-wrap: wrap;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.admin-list-toolbar .admin-filters input[type="text"] {
|
||||
.admin-list-toolbar .admin-filters__search {
|
||||
display: flex;
|
||||
gap: var(--space-xs);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.admin-list-toolbar .admin-filters__search input[type="text"] {
|
||||
min-width: 10rem;
|
||||
flex: 1 1 10rem;
|
||||
}
|
||||
|
||||
.admin-list-toolbar .admin-filters select {
|
||||
.admin-list-toolbar .admin-filters__dropdowns {
|
||||
display: flex;
|
||||
gap: var(--space-xs);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.admin-list-toolbar .admin-filters__dropdowns select {
|
||||
min-width: 7rem;
|
||||
flex: 1 1 7rem;
|
||||
}
|
||||
@@ -754,10 +747,16 @@
|
||||
}
|
||||
|
||||
.admin-list-toolbar__right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-xs);
|
||||
}
|
||||
|
||||
.admin-btn-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-s);
|
||||
flex-shrink: 0;
|
||||
gap: var(--space-xs);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* ── Dialog ───────────────────────────────────────────────────────────── */
|
||||
@@ -776,7 +775,6 @@
|
||||
}
|
||||
|
||||
.admin-dialog__header h2 {
|
||||
font-size: var(--step-0);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
@@ -792,7 +790,7 @@
|
||||
color: var(--text-tertiary);
|
||||
padding: var(--space-3xs);
|
||||
line-height: 1;
|
||||
border-radius: 3px;
|
||||
border-radius: var(--radius);
|
||||
transition: color 0.15s;
|
||||
}
|
||||
|
||||
@@ -853,7 +851,7 @@
|
||||
font-size: var(--step--2);
|
||||
font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: 3px;
|
||||
border-radius: var(--radius);
|
||||
padding: var(--space-xs);
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
@@ -876,7 +874,7 @@
|
||||
margin-bottom: var(--space-m);
|
||||
font-size: var(--step--1);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--radius);
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
@@ -980,7 +978,7 @@
|
||||
font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
|
||||
font-size: var(--step--2);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: 3px;
|
||||
border-radius: var(--radius);
|
||||
padding: var(--space-3xs);
|
||||
color: var(--text-secondary);
|
||||
background: var(--bg-secondary);
|
||||
@@ -1002,19 +1000,14 @@
|
||||
.param-form input[type="password"] {
|
||||
width: 100%;
|
||||
max-width: 380px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-bottom: 1px solid var(--border-primary);
|
||||
font-size: var(--step--1);
|
||||
font-family: inherit;
|
||||
padding: var(--space-3xs) 0;
|
||||
border-radius: 0;
|
||||
transition: border-color 0.15s;
|
||||
padding: var(--space-3xs) 0;
|
||||
}
|
||||
|
||||
.param-form input[type="password"]:focus {
|
||||
outline: none;
|
||||
border-bottom-color: var(--accent-primary);
|
||||
border-bottom: 2px solid var(--accent-primary);
|
||||
}
|
||||
|
||||
.param-form > button {
|
||||
@@ -1097,12 +1090,6 @@
|
||||
.param-smtp-test-row input[type="email"] {
|
||||
width: 100%;
|
||||
padding: var(--space-xs) var(--space-s);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: 4px;
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
font-size: var(--step--1);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.param-smtp-test-row input[type="email"]:focus {
|
||||
outline: 2px solid var(--accent-primary);
|
||||
@@ -1146,28 +1133,18 @@
|
||||
.param-grid input[type="email"],
|
||||
.param-grid select {
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-bottom: 1px solid var(--border-primary);
|
||||
font-size: var(--step--1);
|
||||
font-family: inherit;
|
||||
padding: var(--space-3xs) 0;
|
||||
border-radius: 0;
|
||||
transition: border-color 0.15s;
|
||||
padding: var(--space-3xs) 0;
|
||||
}
|
||||
.param-grid input:focus,
|
||||
.param-grid select:focus {
|
||||
outline: none;
|
||||
border-bottom-color: var(--accent-primary);
|
||||
border-bottom: 2px solid var(--accent-primary);
|
||||
}
|
||||
.param-grid select {
|
||||
cursor: pointer;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 0 center;
|
||||
padding-right: 1.2rem;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
.param-fieldset-inline legend {
|
||||
padding: 0 var(--space-xs);
|
||||
@@ -1190,7 +1167,7 @@
|
||||
/* ── Settings page sections — legacy aliases (kept for any remaining use) ─ */
|
||||
.admin-settings-section {
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: 6px;
|
||||
border-radius: var(--radius);
|
||||
padding: var(--space-m) var(--space-l);
|
||||
margin-bottom: var(--space-l);
|
||||
}
|
||||
@@ -1213,7 +1190,7 @@
|
||||
gap: var(--space-s);
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--radius);
|
||||
padding: var(--space-xs) var(--space-m);
|
||||
font-size: var(--step--1);
|
||||
}
|
||||
@@ -1234,7 +1211,7 @@
|
||||
|
||||
.admin-account-status {
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--radius);
|
||||
padding: var(--space-s) var(--space-m);
|
||||
margin-bottom: var(--space-l);
|
||||
display: flex;
|
||||
@@ -1258,7 +1235,7 @@
|
||||
font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
|
||||
font-size: var(--step--2);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: 3px;
|
||||
border-radius: var(--radius);
|
||||
padding: var(--space-3xs) var(--space-3xs);
|
||||
color: var(--text-secondary);
|
||||
background: var(--bg-secondary);
|
||||
@@ -1272,7 +1249,7 @@
|
||||
|
||||
.admin-danger-zone {
|
||||
border: 1px solid var(--danger-border-muted);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--radius);
|
||||
padding: var(--space-m) var(--space-m);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -1299,7 +1276,7 @@
|
||||
gap: var(--space-m);
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--radius);
|
||||
padding: var(--space-xs) var(--space-m);
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -1388,7 +1365,7 @@
|
||||
min-height: 2.75rem;
|
||||
padding: 0 var(--space-2xs);
|
||||
border: 1px solid var(--border-secondary);
|
||||
border-radius: 10px;
|
||||
border-radius: var(--radius);
|
||||
color: var(--text-primary);
|
||||
font-size: var(--step--1);
|
||||
text-decoration: none;
|
||||
@@ -1434,7 +1411,7 @@
|
||||
gap: var(--space-m);
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--radius);
|
||||
padding: var(--space-xs) var(--space-m);
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -1531,7 +1508,7 @@
|
||||
.fhb-sortable-panel,
|
||||
.fhb-form-preview-panel {
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: 6px;
|
||||
border-radius: var(--radius);
|
||||
padding: var(--space-s);
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
@@ -1581,7 +1558,7 @@
|
||||
background: var(--bg-primary);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-left: 4px solid var(--accent-primary);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--radius);
|
||||
padding: var(--space-2xs) var(--space-xs);
|
||||
cursor: default;
|
||||
transition: box-shadow 0.15s, border-color 0.15s;
|
||||
@@ -1670,7 +1647,7 @@
|
||||
|
||||
.fhb-fieldset-preview {
|
||||
border: 1px solid var(--border-secondary);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--radius);
|
||||
padding: var(--space-xs);
|
||||
background: var(--bg-primary);
|
||||
}
|
||||
@@ -1700,7 +1677,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2xs);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--radius);
|
||||
padding: var(--space-3xs) var(--space-xs);
|
||||
font-size: var(--step--2);
|
||||
border: 1px dashed var(--border-primary);
|
||||
@@ -1731,6 +1708,6 @@
|
||||
font-weight: 600;
|
||||
color: var(--accent-primary);
|
||||
background: var(--accent-muted);
|
||||
border-radius: 2px;
|
||||
border-radius: var(--radius);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user