mirror of
https://codeberg.org/PostERG/xamxam.git
synced 2026-06-26 00:29: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
@@ -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);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user