the-glorious-startpage/css/search-box.css
2020-06-04 09:13:56 +08:00

37 lines
689 B
CSS

#searchBox {
background: var(--base-bg);
color: var(--base-color);
text-align: center;
font-family: roboto-bold;
width: 30vw;
height: 48px;
border: none;
border-radius: 24px;
padding-left: 10px;
padding-right: 10px;
margin: 0;
opacity: 0;
position: absolute;
backdrop-filter: blur(var(--blur-strength));
left: 50%;
top: 60%;
pointer-events: none;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
transition: opacity var(--transition-speed),
top var(--transition-speed),
visibility var(--transition-speed),
pointer-events var(--transition-speed) ;
}
#searchBox.show {
opacity: 1;
top: 100%;
pointer-events: initial;
}