PostERG/xamxam
1
0
Fork 0
mirror of https://codeberg.org/PostERG/xamxam.git synced 2026-06-26 08:39:18 +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 { .nav-logo {
text-decoration: none; text-decoration: none;
font-size: var(--step--1);
} }
.nav-left { .nav-left {
@@ -80,6 +81,8 @@ header {
text-transform: uppercase; text-transform: uppercase;
color: var(--accent-foreground); color: var(--accent-foreground);
text-decoration: none; text-decoration: none;
padding: var(--space-3xs) var(--space-xs);
border-radius: var(--radius);
text-shadow: text-shadow:
0 0 16px var(--header-shadow-strong), 0 0 16px var(--header-shadow-strong),
0 0 32px var(--header-shadow-soft); 0 0 32px var(--header-shadow-soft);
@@ -328,17 +331,18 @@ main * {
.header-search-input-wrap input { .header-search-input-wrap input {
width: 100%; width: 100%;
padding: var(--space-xs) var(--space-s) var(--space-xs) var(--space-xl); padding: var(--space-2xs) var(--space-s) !important;
border: 1px solid var(--accent-primary); padding-left: calc(18px + var(--space-l)) !important;
border-radius: var(--radius); border: 1px solid var(--accent-primary) !important;
background: var(--bg-primary); border-radius: var(--radius) !important;
font-size: var(--step-0); background: var(--bg-primary) !important;
color: var(--text-primary); font-size: var(--step-0) !important;
font-family: inherit; color: var(--text-primary) !important;
font-family: inherit !important;
} }
.header-search-input-wrap input::placeholder { .header-search-input-wrap input::placeholder {
color: var(--accent-primary); color: var(--accent-primary) !important;
} }
/* ============================================================ /* ============================================================
@@ -381,8 +385,6 @@ main * {
:focus-visible { :focus-visible {
outline: none; outline: none;
box-shadow: 0 0 0 2px var(--accent-primary); box-shadow: 0 0 0 2px var(--accent-primary);
border-radius: var(--radius);
padding: var(--space-3xs) var(--space-xs);
} }
/* Respect user motion preferences */ /* Respect user motion preferences */