Add style for Pagefind
This commit is contained in:
parent
d48c752d31
commit
0202b451de
1 changed files with 53 additions and 0 deletions
53
src/styles/search.scss
Normal file
53
src/styles/search.scss
Normal file
|
@ -0,0 +1,53 @@
|
||||||
|
input {
|
||||||
|
background: #0a0a0a;
|
||||||
|
color: white;
|
||||||
|
border: 1px #2d2d2d solid;
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 12px 16px;
|
||||||
|
font-size: 14px;
|
||||||
|
&:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
mark {
|
||||||
|
background: gainsboro;
|
||||||
|
padding: 2px 4px;
|
||||||
|
border-radius: 4px;
|
||||||
|
margin: -2px -4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagefind-ui__message {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.pagefind-ui__results {
|
||||||
|
padding: 0px 18px;
|
||||||
|
}
|
||||||
|
.pagefind-ui__drawer {
|
||||||
|
position: absolute;
|
||||||
|
top: 79px;
|
||||||
|
max-width: 620px;
|
||||||
|
background: rgba(22, 22, 22, 0.75);
|
||||||
|
border-radius: 6px;
|
||||||
|
border: 1px #2d2d2d solid;
|
||||||
|
backdrop-filter: blur(24px);
|
||||||
|
padding: 12px 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagefind-ui__search-clear, .pagefind-ui__hidden {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 916px){
|
||||||
|
.pagefind-ui__drawer {
|
||||||
|
left: 12px;
|
||||||
|
width: 100%;
|
||||||
|
max-width: calc(100% - 74px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 650px){
|
||||||
|
.pagefind-ui__drawer {
|
||||||
|
top: 122px !important;
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in a new issue