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:
37 0 2px 16px var(--drop-shadow-color),
38 0 32px 64px var(--drop-shadow-color);
39}
40#search-command-container input:focus {
41 outline: 0;
42 background-color: var(--bg-color);
43 border-color: var(--link-color);
44}
45
46@media (min-width: 40em) {
47 #search-command-container {
48 padding-top: max(calc(50vh - 10em), 16px);
49 background-image: radial-gradient(
50 closest-side,
51 var(--backdrop-color),
52 transparent
53 );
54 }
55}