vv-shell[vv-page="/search"] { display: flex; flex-direction: column; gap: calc(var(--padding) / 2); } /* # Search */ section.search { display: flex; gap: var(--padding); border-radius: 6px; padding: var(--padding); background-color: rgba(255, 255, 255, .1); } section.search form { display: contents; } section.search input { flex: 1 1 auto; border-radius: 6px; padding: 0 var(--padding); border: solid 2px rgba(255, 255, 255, .1); background-color: rgba(255, 255, 255, .1); } section.search input:focus { outline: none; border-color: white; } section.search select { padding: 5px; border: none; background-color: transparent; } section.search select :is(option, optgroup) { color: black; } /* # Center */ section.center { display: flex; flex: 1 1 auto; align-items: center; flex-direction: column; justify-content: center; fill: var(--color-accent); gap: calc(var(--padding) / 2); } section.center svg { width: 60px; } /* # Result */ section.result { display: flex; } section.result button { flex: 1 1 auto; text-align: left; padding: var(--padding); } /* # Stats */ section.stats { min-height: calc(var(--padding) * 2); display: flex; align-items: center; gap: calc(var(--padding) / 2); justify-content: space-between; } vv-shell[vv-page="/search"] section.stats button { display: none; }