mirror of
https://codeberg.org/PostERG/xamxam.git
synced 2026-06-25 16:19:19 +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;
|
||||
}
|
||||
|
||||
@@ -158,24 +158,10 @@
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.prose h1,
|
||||
.prose h2,
|
||||
.prose h3 {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 400;
|
||||
.prose :where(h1, h2, h3) {
|
||||
margin: 1.5em 0 0.5em 0;
|
||||
}
|
||||
|
||||
.prose h1 {
|
||||
font-size: var(--step-3);
|
||||
}
|
||||
.prose h2 {
|
||||
font-size: var(--step-2);
|
||||
}
|
||||
.prose h3 {
|
||||
font-size: var(--step-1);
|
||||
}
|
||||
|
||||
.prose a {
|
||||
color: var(--accent-primary);
|
||||
text-decoration: underline;
|
||||
@@ -204,7 +190,7 @@
|
||||
font-size: 0.88em;
|
||||
background: var(--bg-tertiary);
|
||||
padding: 0.1em 0.3em;
|
||||
border-radius: 2px;
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
|
||||
@@ -48,14 +48,7 @@ header {
|
||||
);
|
||||
|
||||
.nav-logo {
|
||||
font-family: var(--font-display);
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--accent-foreground);
|
||||
text-decoration: none;
|
||||
text-shadow:
|
||||
0 0 16px var(--header-shadow-strong),
|
||||
0 0 32px var(--header-shadow-soft);
|
||||
}
|
||||
|
||||
.nav-left {
|
||||
@@ -66,7 +59,6 @@ header {
|
||||
|
||||
.nav-left-links,
|
||||
.nav-right-links {
|
||||
font-family: var(--font-display);
|
||||
display: flex;
|
||||
gap: var(--space-l);
|
||||
align-items: center;
|
||||
@@ -80,7 +72,7 @@ header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: var(--step-2);
|
||||
font-size: var(--step-0);
|
||||
|
||||
a {
|
||||
font-family: var(--font-display);
|
||||
@@ -88,6 +80,9 @@ header {
|
||||
text-transform: uppercase;
|
||||
color: var(--accent-foreground);
|
||||
text-decoration: none;
|
||||
text-shadow:
|
||||
0 0 16px var(--header-shadow-strong),
|
||||
0 0 32px var(--header-shadow-soft);
|
||||
}
|
||||
|
||||
ul {
|
||||
@@ -100,21 +95,9 @@ header {
|
||||
}
|
||||
|
||||
ul a {
|
||||
font-size: var(--step--1);
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--accent-foreground);
|
||||
text-decoration: none;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
|
||||
a,
|
||||
ul a {
|
||||
text-shadow:
|
||||
0 0 16px var(--header-shadow-strong),
|
||||
0 0 32px var(--header-shadow-soft);
|
||||
}
|
||||
|
||||
ul a:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
@@ -260,7 +243,6 @@ header {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: var(--space-s) var(--space-s);
|
||||
font-size: var(--step-1);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@@ -300,6 +282,21 @@ main * {
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
HEADINGS — global scale, shared by admin + public pages
|
||||
All headings use the same font size (slightly smaller than
|
||||
the previous h1). Individual page overrides for size have
|
||||
been removed so everything inherits from here.
|
||||
============================================================ */
|
||||
|
||||
:where(h1, h2, h3, h4, h5, h6) {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--step-2);
|
||||
font-weight: 400;
|
||||
margin: 0 0 var(--space-l) 0;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
SEARCH BAR (shared)
|
||||
============================================================ */
|
||||
@@ -310,37 +307,37 @@ main * {
|
||||
background: linear-gradient(180deg, var(--gradient-4) 0%, #ffffffee 100%);
|
||||
}
|
||||
|
||||
.header-search-wrap form[role="search"] {
|
||||
.header-search-form {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.header-search-input-wrap {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2xs);
|
||||
padding: var(--space-3xs) var(--space-s);
|
||||
border: 1px solid var(--accent-primary);
|
||||
border-radius: 10px;
|
||||
background: var(--bg-primary);
|
||||
width: 100%;
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.header-search-wrap form[role="search"] svg {
|
||||
color: var(--text-tertiary);
|
||||
flex-shrink: 0;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
.header-search-icon {
|
||||
position: absolute;
|
||||
left: var(--space-s);
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
stroke: var(--accent-primary);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.header-search-wrap form[role="search"] input {
|
||||
flex: 1;
|
||||
border: none;
|
||||
font-size: var(--step--1);
|
||||
.header-search-input-wrap input {
|
||||
width: 100%;
|
||||
padding: var(--space-xs) var(--space-s) var(--space-xs) var(--space-xl);
|
||||
border: 1px solid var(--accent-primary);
|
||||
border-radius: var(--radius);
|
||||
background: var(--bg-primary);
|
||||
font-size: var(--step-0);
|
||||
color: var(--text-primary);
|
||||
background: transparent;
|
||||
padding: var(--space-3xs) 0;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.header-search-wrap form[role="search"] input::placeholder {
|
||||
.header-search-input-wrap input::placeholder {
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
|
||||
@@ -380,10 +377,12 @@ main * {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* Consistent keyboard-focus outline for all interactive elements */
|
||||
/* Consistent keyboard-focus ring for all interactive elements */
|
||||
:focus-visible {
|
||||
outline: 2px solid var(--accent-primary);
|
||||
outline-offset: 2px;
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px var(--accent-primary);
|
||||
border-radius: var(--radius);
|
||||
padding: var(--space-3xs) var(--space-xs);
|
||||
}
|
||||
|
||||
/* Respect user motion preferences */
|
||||
@@ -396,10 +395,61 @@ main * {
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
FORM ELEMENTS — base input / select / textarea / button
|
||||
============================================================ */
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: var(--space-3xs);
|
||||
}
|
||||
|
||||
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="color"]),
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit;
|
||||
font-size: var(--step--1);
|
||||
padding: var(--space-2xs) var(--space-xs);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: var(--radius);
|
||||
background: transparent;
|
||||
color: var(--text-primary);
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
|
||||
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="color"]):focus,
|
||||
select:focus,
|
||||
textarea:focus {
|
||||
outline: none;
|
||||
border: 2px solid var(--accent-primary);
|
||||
}
|
||||
|
||||
input::placeholder,
|
||||
textarea::placeholder {
|
||||
color: var(--text-tertiary);
|
||||
font-size: var(--step--1);
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
min-height: 80px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
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.5rem center;
|
||||
padding-right: 1.5rem;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
BUTTONS — shared .btn base class
|
||||
Targets both <a> and <button>, always has a background.
|
||||
border-radius: 10px; padding: var(--space-xs)
|
||||
border-radius: var(--radius); padding: var(--space-xs)
|
||||
============================================================ */
|
||||
|
||||
.btn {
|
||||
@@ -408,7 +458,7 @@ main * {
|
||||
justify-content: center;
|
||||
gap: var(--space-3xs);
|
||||
padding: var(--space-xs);
|
||||
border-radius: 10px;
|
||||
border-radius: var(--radius);
|
||||
font-size: var(--step--1);
|
||||
font-family: inherit;
|
||||
font-weight: 500;
|
||||
@@ -573,7 +623,7 @@ main * {
|
||||
fieldset {
|
||||
/*background: var(--bg-secondary);*/
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--radius);
|
||||
padding: var(--space-m);
|
||||
margin: 0;
|
||||
}
|
||||
@@ -624,7 +674,7 @@ td {
|
||||
|
||||
dialog {
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: 6px;
|
||||
border-radius: var(--radius);
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
padding: 0;
|
||||
@@ -649,5 +699,5 @@ details > summary::-webkit-details-marker {
|
||||
border-radius: 15px;
|
||||
}
|
||||
audio::-webkit-media-controls-enclosure {
|
||||
border-radius: 10px;
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
padding: var(--space-m);
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: 8px;
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
.access-req-stat-number {
|
||||
@@ -63,7 +63,7 @@
|
||||
.access-req-empty {
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: 8px;
|
||||
border-radius: var(--radius);
|
||||
padding: var(--space-xl);
|
||||
text-align: center;
|
||||
color: var(--text-secondary);
|
||||
@@ -79,7 +79,7 @@
|
||||
.access-req-card {
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: 8px;
|
||||
border-radius: var(--radius);
|
||||
padding: var(--space-m);
|
||||
transition: box-shadow 0.2s;
|
||||
}
|
||||
@@ -97,7 +97,6 @@
|
||||
}
|
||||
|
||||
.access-req-card__thesis h3 {
|
||||
font-size: var(--step-1);
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin: 0 0 var(--space-3xs) 0;
|
||||
@@ -171,7 +170,7 @@
|
||||
.access-req-card__admin-notes {
|
||||
background: var(--bg-primary);
|
||||
padding: var(--space-s);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--radius);
|
||||
font-size: var(--step--1);
|
||||
line-height: 1.6;
|
||||
}
|
||||
@@ -237,14 +236,7 @@
|
||||
/* Dialog textarea/label enhancements */
|
||||
.admin-dialog textarea {
|
||||
width: 100%;
|
||||
font-family: inherit;
|
||||
font-size: var(--step--1);
|
||||
padding: var(--space-2xs);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: 4px;
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
resize: vertical;
|
||||
margin: var(--space-s) 0;
|
||||
}
|
||||
|
||||
|
||||
@@ -31,7 +31,7 @@
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* ── Inputs, selects, textareas ─────────────────────────────────────────── */
|
||||
/* ── Inputs, selects, textareas (admin forms use bottom-border style) ──── */
|
||||
.admin-form
|
||||
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(
|
||||
[type="hidden"]
|
||||
@@ -42,16 +42,10 @@
|
||||
.admin-inline-form input[type="number"],
|
||||
.admin-inline-form 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;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
padding: var(--space-3xs) 0;
|
||||
}
|
||||
|
||||
.admin-form
|
||||
@@ -62,28 +56,16 @@
|
||||
.admin-form textarea:focus,
|
||||
.admin-inline-form input:focus,
|
||||
.admin-inline-form select:focus {
|
||||
outline: none;
|
||||
border-bottom-color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.admin-form input::placeholder,
|
||||
.admin-form textarea::placeholder {
|
||||
font-size: var(--step--1);
|
||||
color: var(--text-tertiary);
|
||||
border-bottom: 2px solid var(--accent-primary);
|
||||
}
|
||||
|
||||
.admin-form textarea {
|
||||
resize: vertical;
|
||||
min-height: 100px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Select custom arrow */
|
||||
/* Select custom arrow overrides for bottom-border style */
|
||||
.admin-form select,
|
||||
.admin-inline-form 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;
|
||||
}
|
||||
@@ -133,7 +115,7 @@
|
||||
background: transparent;
|
||||
border: 1px dashed var(--border-primary);
|
||||
padding: var(--space-3xs) var(--space-2xs);
|
||||
border-radius: 3px;
|
||||
border-radius: var(--radius);
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
}
|
||||
@@ -272,10 +254,6 @@
|
||||
|
||||
.thesis-add-header h1 {
|
||||
margin: 0;
|
||||
font-size: var(--step-1);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.mode-toggle {
|
||||
@@ -284,7 +262,7 @@
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: 3px;
|
||||
border-radius: var(--radius);
|
||||
padding: var(--space-3xs) var(--space-xs);
|
||||
transition: color 0.15s, border-color 0.15s;
|
||||
}
|
||||
@@ -317,7 +295,7 @@
|
||||
.flash-warning,
|
||||
.flash-success {
|
||||
padding: var(--space-xs) var(--space-s);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--radius);
|
||||
font-size: var(--step--1);
|
||||
margin-bottom: var(--space-s);
|
||||
border-left: 3px solid;
|
||||
@@ -348,7 +326,7 @@
|
||||
padding: var(--space-3xs) var(--space-xs);
|
||||
background: var(--blue-muted-bg);
|
||||
border: 1px solid var(--blue-muted-border, var(--border-primary));
|
||||
border-radius: 3px;
|
||||
border-radius: var(--radius);
|
||||
font-size: var(--step--2);
|
||||
margin-bottom: var(--space-xs);
|
||||
}
|
||||
@@ -372,7 +350,6 @@
|
||||
|
||||
.licence-info h3 {
|
||||
margin-top: var(--space-m);
|
||||
font-size: var(--step-0);
|
||||
}
|
||||
|
||||
.licence-degree {
|
||||
@@ -380,12 +357,11 @@
|
||||
padding: var(--space-s);
|
||||
background: var(--bg-primary);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
.licence-degree h4 {
|
||||
margin: 0 0 var(--space-2xs);
|
||||
font-size: var(--step--1);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@@ -400,7 +376,6 @@
|
||||
}
|
||||
|
||||
.licence-generalites h3 {
|
||||
font-size: var(--step-0);
|
||||
margin-bottom: var(--space-xs);
|
||||
}
|
||||
|
||||
@@ -428,12 +403,11 @@
|
||||
text-align: center;
|
||||
background: var(--bg-primary);
|
||||
border: 2px solid var(--error);
|
||||
border-radius: 8px;
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
.share-error h1 {
|
||||
color: var(--error);
|
||||
font-size: var(--step-1);
|
||||
margin-bottom: var(--space-s);
|
||||
}
|
||||
|
||||
@@ -449,7 +423,7 @@
|
||||
background: var(--text-primary);
|
||||
color: var(--bg-primary);
|
||||
text-decoration: none;
|
||||
border-radius: 4px;
|
||||
border-radius: var(--radius);
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
|
||||
@@ -473,17 +447,6 @@
|
||||
width: 100%;
|
||||
padding: var(--space-xs);
|
||||
margin: var(--space-2xs) 0 var(--space-s);
|
||||
font-size: var(--step--1);
|
||||
font-family: inherit;
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: 3px;
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.password-gate input[type="password"]:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.password-gate button {
|
||||
@@ -515,7 +478,7 @@
|
||||
padding: var(--space-3xs) var(--space-xs);
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--radius);
|
||||
min-width: 0;
|
||||
max-width: 260px;
|
||||
}
|
||||
@@ -524,7 +487,7 @@
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
object-fit: cover;
|
||||
border-radius: 3px;
|
||||
border-radius: var(--radius);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@@ -571,7 +534,7 @@
|
||||
background: transparent;
|
||||
border: 1px dashed var(--border-primary);
|
||||
padding: var(--space-3xs) var(--space-2xs);
|
||||
border-radius: 3px;
|
||||
border-radius: var(--radius);
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
width: 100%;
|
||||
@@ -612,7 +575,7 @@
|
||||
padding: var(--space-3xs) var(--space-xs);
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--radius);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
@@ -708,7 +671,7 @@
|
||||
padding: var(--space-3xs) var(--space-xs);
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--radius);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
@@ -758,7 +721,7 @@ a.admin-file-name:hover {
|
||||
padding: 1px 5px;
|
||||
background: var(--bg-primary);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: 3px;
|
||||
border-radius: var(--radius);
|
||||
color: var(--text-secondary);
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -791,7 +754,7 @@ a.admin-file-name:hover {
|
||||
padding: var(--space-xs) var(--space-s);
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
.recap-file-thumb-link {
|
||||
@@ -802,7 +765,7 @@ a.admin-file-name:hover {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
object-fit: cover;
|
||||
border-radius: 3px;
|
||||
border-radius: var(--radius);
|
||||
display: block;
|
||||
}
|
||||
|
||||
@@ -843,7 +806,7 @@ a.recap-file-name:hover {
|
||||
padding: 1px 6px;
|
||||
background: var(--bg-primary);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: 3px;
|
||||
border-radius: var(--radius);
|
||||
color: var(--text-secondary);
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -868,7 +831,6 @@ a.recap-file-name:hover {
|
||||
}
|
||||
|
||||
.recap-section h2 {
|
||||
font-size: var(--step-0);
|
||||
font-weight: 600;
|
||||
margin: 0 0 var(--space-s);
|
||||
letter-spacing: 0.04em;
|
||||
@@ -917,7 +879,6 @@ a.recap-file-name:hover {
|
||||
|
||||
.thanks-success h1,
|
||||
.thanks-error h1 {
|
||||
font-size: var(--step-3);
|
||||
margin: 0;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
@@ -981,7 +942,6 @@ a.recap-file-name:hover {
|
||||
}
|
||||
|
||||
.retry-email-section h2 {
|
||||
font-size: var(--step-0);
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
letter-spacing: 0.04em;
|
||||
@@ -1017,7 +977,7 @@ a.recap-file-name:hover {
|
||||
.retry-email-form input[type="email"] {
|
||||
padding: var(--space-xs) var(--space-s);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--radius);
|
||||
font-size: var(--step-0);
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
@@ -15,32 +15,32 @@
|
||||
|
||||
.cards-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: var(--space-s);
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: var(--space-xs) var(--space-s) var(--space-m);
|
||||
}
|
||||
|
||||
@media (min-width: 1400px) {
|
||||
.cards-container {
|
||||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.cards-container {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.cards-container {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* Each card = list item containing a block <a> link */
|
||||
.card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
cursor: pointer;
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: 8px;
|
||||
border-radius: var(--radius);
|
||||
background: var(--bg-primary);
|
||||
overflow: hidden;
|
||||
transition:
|
||||
@@ -186,7 +186,7 @@
|
||||
text-decoration: none;
|
||||
padding: var(--space-3xs) var(--space-2xs);
|
||||
background: var(--accent-muted);
|
||||
border-radius: 3px;
|
||||
border-radius: var(--radius);
|
||||
font-size: var(--step--1);
|
||||
}
|
||||
|
||||
@@ -219,7 +219,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;
|
||||
|
||||
@@ -14,10 +14,12 @@
|
||||
/* ---- 6-column index layout ---- */
|
||||
.repertoire-index {
|
||||
display: grid;
|
||||
grid-template-columns: 0.7fr 1.2fr 1.4fr 0.9fr 1.4fr 1fr;
|
||||
grid-template-columns: repeat(6, minmax(15vw, min-content));
|
||||
grid-template-rows: auto 1fr;
|
||||
gap: 0;
|
||||
gap: var(--space-s);
|
||||
justify-content: space-between;
|
||||
padding: 0;
|
||||
margin: 0 var(--space-s);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@@ -73,7 +75,7 @@
|
||||
font-size: var(--step--2);
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-secondary);
|
||||
color: var(--text-primary);
|
||||
font-weight: 400;
|
||||
margin: 0;
|
||||
padding: var(--space-xs) var(--space-2xs) var(--space-3xs);
|
||||
@@ -105,6 +107,7 @@
|
||||
margin: 0;
|
||||
font-family: inherit;
|
||||
font-size: var(--step-0);
|
||||
font-weight: normal;
|
||||
color: var(--text-primary);
|
||||
line-height: 1.4;
|
||||
cursor: pointer;
|
||||
@@ -138,7 +141,7 @@
|
||||
/* Years column — big bold numbers */
|
||||
.repertoire-col[data-col="years"] .rep-entry {
|
||||
font-size: var(--step-3);
|
||||
font-weight: 700;
|
||||
font-weight: normal;
|
||||
line-height: 1.1;
|
||||
letter-spacing: -0.02em;
|
||||
padding: var(--space-3xs) 0;
|
||||
@@ -259,7 +262,7 @@
|
||||
.search-filter-select {
|
||||
font-size: var(--step--1);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: 3px;
|
||||
border-radius: var(--radius);
|
||||
padding: var(--space-3xs) var(--space-2xs);
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
@@ -268,7 +271,7 @@
|
||||
}
|
||||
|
||||
.search-filter-select:focus {
|
||||
border-color: var(--accent-primary);
|
||||
border: 2px solid var(--accent-primary);
|
||||
}
|
||||
|
||||
.search-apply-btn {
|
||||
@@ -299,7 +302,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;
|
||||
@@ -349,7 +352,7 @@
|
||||
background: var(--bg-primary, #fff);
|
||||
border: 1px solid var(--border-primary, #ddd);
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,.13);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--radius);
|
||||
overflow: hidden;
|
||||
pointer-events: auto;
|
||||
max-height: 80vh;
|
||||
|
||||
@@ -32,7 +32,7 @@
|
||||
.sys-status-section {
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: 6px;
|
||||
border-radius: var(--radius);
|
||||
padding: var(--space-s) var(--space-m);
|
||||
margin-bottom: var(--space-m);
|
||||
}
|
||||
@@ -46,7 +46,7 @@
|
||||
background: none;
|
||||
border: 1px solid var(--border-primary);
|
||||
color: var(--text-secondary);
|
||||
border-radius: 3px;
|
||||
border-radius: var(--radius);
|
||||
font-size: var(--step--2);
|
||||
font-family: inherit;
|
||||
padding: var(--space-3xs) var(--space-2xs);
|
||||
@@ -80,7 +80,7 @@
|
||||
.srv-card {
|
||||
background: var(--bg-primary);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: 5px;
|
||||
border-radius: var(--radius);
|
||||
padding: var(--space-s) var(--space-m);
|
||||
}
|
||||
.srv-card__header {
|
||||
@@ -138,7 +138,7 @@
|
||||
.php-item {
|
||||
background: var(--bg-primary);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--radius);
|
||||
padding: var(--space-3xs) var(--space-xs);
|
||||
}
|
||||
.php-item__key {
|
||||
@@ -157,14 +157,14 @@
|
||||
/* ── Disk bar ──────────────────────────────────────────────────────────── */
|
||||
.disk-bar-wrap {
|
||||
background: var(--border-primary);
|
||||
border-radius: 3px;
|
||||
border-radius: var(--radius);
|
||||
height: 6px;
|
||||
margin-top: var(--space-2xs);
|
||||
overflow: hidden;
|
||||
}
|
||||
.disk-bar {
|
||||
height: 100%;
|
||||
border-radius: 3px;
|
||||
border-radius: var(--radius);
|
||||
width: var(--disk-pct, 0%);
|
||||
background: var(--disk-color, var(--accent-green));
|
||||
transition: width .3s;
|
||||
@@ -198,7 +198,7 @@
|
||||
rgba(0,0,0,0.03) 6px,
|
||||
rgba(0,0,0,0.03) 12px
|
||||
);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--radius);
|
||||
animation: sys-panel-shimmer 1s linear infinite;
|
||||
background-size: 200% 200%;
|
||||
}
|
||||
@@ -220,13 +220,7 @@
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
.log-toolbar select {
|
||||
background: var(--bg-primary);
|
||||
border: 1px solid var(--border-primary);
|
||||
color: var(--text-primary);
|
||||
border-radius: 4px;
|
||||
padding: var(--space-3xs) var(--space-xs);
|
||||
font-size: var(--step--1);
|
||||
font-family: inherit;
|
||||
}
|
||||
.log-toolbar select:focus { outline: 2px solid var(--accent-primary); }
|
||||
|
||||
@@ -244,7 +238,7 @@
|
||||
.log-unavailable {
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--radius);
|
||||
padding: var(--space-m);
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--step--1);
|
||||
@@ -268,7 +262,7 @@
|
||||
.log-output {
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--radius);
|
||||
padding: var(--space-s);
|
||||
overflow-x: auto;
|
||||
font-family: ui-monospace, "SFMono-Regular", Consolas, "Courier New", monospace;
|
||||
@@ -282,7 +276,7 @@
|
||||
display: block;
|
||||
white-space: pre;
|
||||
padding: var(--space-3xs) var(--space-3xs);
|
||||
border-radius: 2px;
|
||||
border-radius: var(--radius);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.log-line + .log-line { border-top: 1px solid var(--border-primary); }
|
||||
@@ -302,7 +296,7 @@
|
||||
.log-count-badge {
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: 3px;
|
||||
border-radius: var(--radius);
|
||||
font-size: var(--step--2);
|
||||
padding: var(--space-3xs) var(--space-2xs);
|
||||
color: var(--text-secondary);
|
||||
@@ -342,7 +336,7 @@
|
||||
font-weight: 400;
|
||||
font-family: ui-monospace, monospace;
|
||||
padding: var(--space-3xs) var(--space-3xs);
|
||||
border-radius: 3px;
|
||||
border-radius: var(--radius);
|
||||
margin-left: var(--space-xs);
|
||||
vertical-align: middle;
|
||||
line-height: 1.6;
|
||||
@@ -364,7 +358,7 @@
|
||||
font-size: var(--step--2);
|
||||
font-family: ui-monospace, monospace;
|
||||
padding: var(--space-3xs) var(--space-2xs);
|
||||
border-radius: 3px;
|
||||
border-radius: var(--radius);
|
||||
margin-left: var(--space-2xs);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@@ -37,15 +37,9 @@
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
/* Title (h1) — primary heading, very large */
|
||||
/* Title (h1) — inherits global scale from common.css */
|
||||
.tfe-title {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--step-3);
|
||||
font-weight: 400;
|
||||
color: var(--text-primary);
|
||||
margin: 0;
|
||||
line-height: 1.15;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
/* Metadata description list — target <dl> directly inside article > header */
|
||||
@@ -111,14 +105,14 @@ article dl dd a {
|
||||
aside figure {
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
border-radius: 8px;
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
aside figure img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
border-radius: 8px;
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
aside figure embed,
|
||||
@@ -165,7 +159,7 @@ aside figcaption {
|
||||
padding: var(--space-s) var(--space-m);
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: 6px;
|
||||
border-radius: var(--radius);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
@@ -219,7 +213,7 @@ aside figcaption {
|
||||
.tfe-restricted-access {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
border-radius: var(--radius);
|
||||
padding: var(--space-m);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -260,25 +254,14 @@ aside figcaption {
|
||||
|
||||
.tfe-access-request-form input[type="email"],
|
||||
.tfe-access-request-form textarea {
|
||||
font-family: inherit;
|
||||
font-size: var(--step--1);
|
||||
padding: var(--space-2xs) var(--space-3xs);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
border-color: var(--border);
|
||||
background: var(--background);
|
||||
color: var(--text-primary);
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.tfe-access-request-form input[type="email"]:focus,
|
||||
.tfe-access-request-form textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.tfe-access-request-form textarea {
|
||||
resize: vertical;
|
||||
min-height: 80px;
|
||||
border: 2px solid var(--accent);
|
||||
}
|
||||
|
||||
.tfe-btn-request-access {
|
||||
@@ -298,7 +281,7 @@ aside figcaption {
|
||||
.tfe-access-message {
|
||||
font-size: var(--step--1);
|
||||
padding: var(--space-2xs);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--radius);
|
||||
margin-top: var(--space-3xs);
|
||||
}
|
||||
|
||||
|
||||
@@ -101,6 +101,9 @@
|
||||
--border-primary: #dddddd;
|
||||
--border-secondary: #cccccc;
|
||||
|
||||
/* Border radius */
|
||||
--radius: 10px;
|
||||
|
||||
/* Status */
|
||||
--success: #5cd69d;
|
||||
--error: #f25a5a;
|
||||
|
||||
Reference in New Issue
Block a user