PostERG/xamxam
1
0
Fork 0
mirror of https://codeberg.org/PostERG/xamxam.git synced 2026-06-25 16:19:19 +02:00
Code Issues Packages Projects Releases Wiki Activity

refactor public search bar

Browse Source 
- one big input with positioned magnifying glass icon
- fix search input left padding to prevent placeholder overlapping magnifying glass
- add !important to search input styles to override base form element rules
- reduce search input vertical padding
- bump search input vertical padding to space-2xs
This commit is contained in:
Pontoporeia
2026-05-08 19:18:29 +02:00
parent 862ed02136
commit 7ccadbb224
1 changed files with 12 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
app/public/assets/css/common.css
View File

@@ -49,6 +49,7 @@ header {
.nav-logo {
text-decoration: none;
font-size: var(--step--1);
}
.nav-left {
@@ -80,6 +81,8 @@ header {
text-transform: uppercase;
color: var(--accent-foreground);
text-decoration: none;
padding: var(--space-3xs) var(--space-xs);
border-radius: var(--radius);
text-shadow:
0 0 16px var(--header-shadow-strong),
0 0 32px var(--header-shadow-soft);
@@ -328,17 +331,18 @@ main * {
.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);
font-family: inherit;
padding: var(--space-2xs) var(--space-s) !important;
padding-left: calc(18px + var(--space-l)) !important;
border: 1px solid var(--accent-primary) !important;
border-radius: var(--radius) !important;
background: var(--bg-primary) !important;
font-size: var(--step-0) !important;
color: var(--text-primary) !important;
font-family: inherit !important;
}
.header-search-input-wrap input::placeholder {
color: var(--accent-primary);
color: var(--accent-primary) !important;
}
/* ============================================================
@@ -381,8 +385,6 @@ main * {
:focus-visible {
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 */