alice.mosphere.at
this repo has no description
1#search-command-container {
2 position: fixed;
3 inset: 0;
4 z-index: 1002;
5 background-color: var(--backdrop-darker-color);
6 background-image: radial-gradient(
7 farthest-corner at top,
8 var(--backdrop-color),
9 transparent
10 );
11 display: flex;
12 justify-content: center;
13 align-items: flex-start;
14 padding: 16px;
15 transition: opacity 0.1s ease-in-out;
16}
17#search-command-container[hidden] {
18 opacity: 0;
19 pointer-events: none;
20}
21
22#search-command-container form {
23 width: calc(40em - 32px);
24 max-width: 100%;
25 transition: transform 0.1s ease-in-out;
26}
27#search-command-container[hidden] form {
28 transform: translateY(-64px) scale(0.9);
29}
30#search-command-container input {
31 width: 100%;
32 padding: 16px;
33 border-radius: 999px;
34 background-color: var(--bg-faded-color);
35 border: 2px solid var(--outline-color);
36 box-shadow: 0 2px 16px var(--drop-shadow-color),
37 0 32px 64px var(--drop-shadow-color);
38}
39#search-command-container input:focus {
40 outline: 0;
41 background-color: var(--bg-color);
42 border-color: var(--link-color);
43}
44
45@media (min-width: 40em) {
46 #search-command-container {
47 align-items: center;
48 background-image: radial-gradient(
49 closest-side,
50 var(--backdrop-color),
51 transparent
52 );
53 }
54}