diff --git a/style.css b/style.css index 6810eea..3ef40a9 100644 --- a/style.css +++ b/style.css @@ -429,6 +429,58 @@ b { color: #a6da95; } +.root .search { + opacity: 0; + pointer-events: none; + position: absolute; + right: 0; + top: 0; + height: 1.8rem; + translate: -.2rem .3rem; + width: 30%; + display: flex; + align-items: center; + justify-content: end; + transition: opacity .2s; +} + +details[open] .search { + opacity: 1; + pointer-events: all; +} + +.search input[type="text"] { + position: absolute; + background: #363a4f; + border: none; + border-radius: 6px; + padding: 0; + color: #cad3f5; + inset: 0; + padding-left: .5rem; +} + +input[type="text"]:focus-visible { + outline: none; +} + +.search > svg { + right: 0; + top: 0; + bottom: 0; + height: 70%; + scale: -1 1; + color: #939ab7; +} + +.excluded { + display: none; +} + +.nothing-found { + color: #8087a2; +} + @media only screen and (max-width: 820px) { body { margin: 1rem;