alice.mosphere.at
this repo has no description
1#modal-container > div {
2 position: fixed;
3 top: 0;
4 inset-inline-end: 0;
5 height: 100%;
6 width: 100%;
7 z-index: 1000;
8 display: flex;
9 justify-content: center;
10 align-items: center;
11 background-color: var(--backdrop-color);
12 animation: appear 0.5s var(--timing-function) both;
13 transition: all 0.5s var(--timing-function);
14
15 &.solid {
16 background-color: var(--backdrop-solid-color);
17 }
18
19 --compose-button-dimension: 56px;
20 --compose-button-dimension-half: calc(var(--compose-button-dimension) / 2);
21 --compose-button-dimension-margin: 16px;
22
23 &.min {
24 /* Minimized */
25 pointer-events: none;
26 user-select: none;
27 overflow: hidden;
28 transform: scale(0);
29 --end: max(
30 var(--compose-button-dimension-margin),
31 env(safe-area-inset-right)
32 );
33 :dir(rtl) & {
34 --end: max(
35 var(--compose-button-dimension-margin),
36 env(safe-area-inset-left)
37 );
38 }
39 --bottom: max(
40 var(--compose-button-dimension-margin),
41 env(safe-area-inset-bottom)
42 );
43 --origin-end: calc(100% - var(--compose-button-dimension-half) - var(--end));
44 :dir(rtl) & {
45 --origin-end: calc(var(--compose-button-dimension-half) + var(--end));
46 }
47 --origin-bottom: calc(
48 100% -
49 var(--compose-button-dimension-half) -
50 var(--bottom)
51 );
52 transform-origin: var(--origin-end) var(--origin-bottom);
53 }
54
55 .sheet {
56 transition: transform 0.3s var(--timing-function);
57 transform-origin: 80% 80%;
58 }
59
60 &:has(~ div) .sheet {
61 transform: scale(0.975);
62 }
63}
64
65@media (max-width: calc(40em - 1px)) {
66 #app[data-shortcuts-view-mode='tab-menu-bar'] ~ #modal-container > div.min {
67 border: 2px solid red;
68
69 --bottom: calc(
70 var(--compose-button-dimension-margin) +
71 env(safe-area-inset-bottom) +
72 52px
73 );
74 }
75}