fix: search bar icon/placeholder overlap caused by specificity conflict

The base input rule uses a high-specificity :not() chain (0,8,1) that
overpowered .header-search-input-wrap input (0,1,1). The base padding
won, so the search input's padding-left (which makes room for the icon)
was overridden. Switched to #site-search-input (1,0,0) to win the
specificity battle.
This commit is contained in:
Pontoporeia
2026-07-05 15:00:47 +02:00
parent 10df92b643
commit 148ffe79f0
2 changed files with 7 additions and 2 deletions
+2 -2
View File
@@ -47,7 +47,7 @@ form[role="search"]:not(.header-search-form) {
pointer-events: none;
}
.header-search-input-wrap input {
#site-search-input {
width: 100%;
padding: var(--space-2xs) var(--space-s);
padding-left: calc(18px + var(--space-l));
@@ -59,7 +59,7 @@ form[role="search"]:not(.header-search-form) {
font-family: inherit;
}
.header-search-input-wrap input::placeholder {
#site-search-input::placeholder {
color: var(--accent-primary);
font-family: var(--font-body);
font-weight: 300;