class Search extends Component { refs = { search: '#search', input: '#search input[type="text"]', engines: '.search-engines', close: '.close' }; constructor() { super(); this.engines = CONFIG.search.engines; } style() { return ` #search { position: absolute; display: flex; align-items: center; justify-content: center; width: calc(100% - 2px); height: 100%; background: rgb(24 24 29 / 80%); z-index: 99; visibility: hidden; top: -100%; backdrop-filter: blur(5px); transition: all .2s ease-in-out; } #search.active { top: 0; visibility: visible; } #search div { position: relative; width: 80%; } #search input { border: 0; outline: 0; width: 100%; box-shadow: inset 0 -2px #737373; padding: .5em 0; background: none; font: 500 22px 'Roboto', sans-serif; letter-spacing: 1px; color: #d4be98; } #search input:focus { box-shadow: inset 0 -2px #d4be98; } #search input::selection { background: #e78a4e; color: #313244; } #search .close { background: 0; border: 0; outline: 0; color: #d4be98; position: absolute; right: 0; cursor: pointer; top: 15px; } #search .close:hover { filter: opacity(.5); } .search-engines { list-style: none; color: rgba(212, 190, 152, 0.5); display: flex; padding: 0; top: 50px; left: 0; margin: 1em 0 0 0; } .search-engines li p { cursor: default; transition: all .2s; font-size: 12px; font-family: 'Roboto', sans-serif; } .search-engines li { margin: 0 1em 0 0; } .search-engines li.active { color: #d4be98; font-weight: 700; } `; } imports() { return [ this.resources.fonts.roboto, this.resources.icons.material ]; } template() { return `
!${key}