mirror of
https://codeberg.org/vlw/victorwesterlund.com.git
synced 2025-09-13 19:13:42 +02:00
Victor Westerlund
a63714304b
Styling overrides for the clear button present in some browsers for input="search"
59 lines
No EOL
1.4 KiB
CSS
59 lines
No EOL
1.4 KiB
CSS
main {
|
|
align-self: start;
|
|
width: 100%;
|
|
max-width: 900px;
|
|
}
|
|
|
|
#search {
|
|
width: 100%;
|
|
height: 80px;
|
|
color: rgb(var(--color-background));
|
|
background-color: rgb(var(--color-contrast));
|
|
}
|
|
|
|
input[type="search"] {
|
|
width: 100%;
|
|
height: 100%;
|
|
font-size: 18px;
|
|
color: inherit;
|
|
padding: 0 calc(var(--padding) * 1.5);
|
|
background-color: transparent;
|
|
border: none;
|
|
outline: none;
|
|
}
|
|
|
|
input[type="search"]::selection {
|
|
color: rgb(var(--color-contrast));
|
|
background-color: rgb(var(--color-background));
|
|
}
|
|
|
|
input[type="search"]::placeholder {
|
|
color: rgba(var(--color-background),.4);
|
|
}
|
|
|
|
input[type="search"]::-webkit-search-cancel-button {
|
|
-webkit-appearance: none;
|
|
height: 32px;
|
|
width: 32px;
|
|
background: center no-repeat rgba(var(--color-background),.1) url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAQAAABKfvVzAAAAAXNSR0IArs4c6QAAAFRJREFUeNrlkrkNADEIBK8JunD/GVW4oLnMAViagNBkLDsS3/d4sEiiqUGy7kACmyj2DeQRavEgTRGkZ4oUuyPF7ojYBRi35ENP1+qHG7+GP9/b8QPsDLZNvX0megAAAABJRU5ErkJggg==');
|
|
cursor: pointer;
|
|
}
|
|
|
|
#results {
|
|
text-align: center;
|
|
font-size: 18px;
|
|
padding: 0 var(--padding);
|
|
}
|
|
|
|
/* -- Media Queries -- */
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
#search {
|
|
color: rgb(var(--color-contrast));
|
|
background-color: rgba(var(--color-contrast),.15);
|
|
}
|
|
|
|
input[type="search"]::placeholder {
|
|
color: rgba(var(--color-contrast),.4);
|
|
}
|
|
} |