alice.mosphere.at
this repo has no description
1#shortcuts-button {
2 position: fixed;
3 bottom: 16px;
4 bottom: max(16px, env(safe-area-inset-bottom));
5 inset-inline-start: 16px;
6 inset-inline-start: max(16px, env(safe-area-inset-left));
7 padding: 16px;
8 background-color: var(--bg-faded-blur-color);
9 z-index: 101;
10 transition: all 0.3s ease-in-out;
11 border: var(--hairline-width) solid var(--bg-color);
12
13 body.exp-tab-bar-v2 & {
14 box-shadow:
15 inset 0 -4px 16px -8px var(--button-bg-blur-color),
16 0 3px 8px -1px var(--drop-shadow-color);
17 }
18}
19#shortcuts-button .icon {
20 transform: translateY(2px); /* Balance the icon's vertical alignment */
21}
22#app:has(#home-page):not(:has(#home-page ~ .deck-container)):has(header[hidden])
23 #shortcuts-button,
24#app:has(#home-page ~ .deck-container header[hidden]) #shortcuts-button,
25#shortcuts-button[hidden] {
26 transform: translateY(200%);
27 pointer-events: none;
28 user-select: none;
29}
30#shortcuts-button:is(:hover, :focus) {
31 background-color: var(--bg-color);
32 filter: none;
33}
34#shortcuts-button:active {
35 transform: scale(0.95);
36 transition: none;
37}
38
39@media (min-width: calc(40em + 56px + 8px)) {
40 #shortcuts-button {
41 inset-inline-end: 16px;
42 inset-inline-end: max(16px, env(safe-area-inset-right));
43 inset-inline-start: auto;
44 top: 16px;
45 top: max(16px, env(safe-area-inset-top));
46 bottom: auto;
47 }
48 #app:has(#home-page):not(:has(#home-page ~ .deck-container)):has(
49 header[hidden]
50 )
51 #shortcuts-button,
52 #app:has(#home-page ~ .deck-container header[hidden]) #shortcuts-button,
53 #shortcuts-button[hidden] {
54 transform: translateY(-200%);
55 }
56}
57
58/* TAB BAR */
59
60body.exp-tab-bar-v2 {
61 --compose-button-width: 56px;
62 --tmp-inset-sides: max(var(--sai-left), var(--sai-right), 16px);
63 --tmp-inset-bottom: max(16px, var(--sai-bottom));
64 --tmp-inset-new: calc(
65 (var(--tmp-inset-sides) + var(--tmp-inset-bottom)) /
66 2.4
67 );
68 --inset-new: var(--tmp-inset-new);
69}
70
71#shortcuts .tab-bar:not([hidden]) {
72 position: fixed;
73 bottom: 0;
74 left: 0;
75 right: 0;
76 z-index: 100;
77 background-color: var(--bg-color);
78 /* background-color: var(--bg-blur-color);
79 backdrop-filter: blur(16px) saturate(3); */
80 border-top: var(--hairline-width) solid var(--outline-color);
81 box-shadow: 0 -8px 16px -8px var(--drop-shadow-color);
82 overflow: auto;
83 transition: all 0.3s ease-in-out;
84 padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom)
85 env(safe-area-inset-left);
86 user-select: none;
87 -webkit-touch-callout: none;
88
89 body.exp-tab-bar-v2 & {
90 transition:
91 all 0.3s ease-in-out,
92 max-width 0s;
93 inset-inline-end: auto;
94 --inset-inline-start: max(16px, var(--inset-new), var(--sai-inline-start));
95 --inset-inline-end: max(16px, var(--inset-new), var(--sai-inline-end));
96 inset-inline-start: var(--inset-inline-start);
97 inset-block-end: max(16px, var(--inset-new));
98 max-width: calc(
99 100vw -
100 var(--inset-inline-start) -
101 var(--inset-inline-end) -
102 var(--compose-button-width) -
103 8px
104 );
105 border-radius: 999px;
106 box-shadow:
107 0 3px 8px -1px var(--drop-shadow-color),
108 0 10px 36px -4px var(--drop-shadow-color);
109 outline: 1px solid var(--outline-color);
110 padding: 0;
111
112 @media (pointer: coarse) {
113 &:active {
114 transform: scale(1.025);
115 transition-duration: 0.1s;
116 }
117 }
118 }
119}
120body.exp-tab-bar-v2 {
121 #filters-page ~ #shortcuts .tab-bar:not([hidden]),
122 #lists-page ~ #shortcuts .tab-bar:not([hidden]) {
123 max-width: calc(100vw - var(--inset-inline-start) - var(--inset-inline-end));
124 }
125}
126#shortcuts .tab-bar ul {
127 display: flex;
128 margin: 0;
129 padding: 0;
130}
131#shortcuts .tab-bar li {
132 flex-grow: 1;
133 margin: 0;
134 padding: 0;
135 list-style: none;
136 display: flex;
137 justify-content: center;
138 min-width: 20vw;
139 flex-basis: 20vw;
140
141 body.exp-tab-bar-v2 & {
142 @media (orientation: landscape) {
143 flex-grow: 0;
144 min-width: auto;
145 flex-basis: auto;
146 }
147 ~ li {
148 margin-inline-start: -3%;
149 @media (orientation: landscape) {
150 margin-inline-start: 0;
151 }
152 }
153 }
154}
155#shortcuts .tab-bar li a {
156 -webkit-tap-highlight-color: transparent;
157 display: block;
158 color: var(--text-insignificant-color);
159 font-size: 10px;
160 display: flex;
161 flex-direction: column;
162 align-items: center;
163 justify-content: flex-start;
164 padding: 8px;
165 text-decoration: none;
166 text-shadow: 0 var(--hairline-width) var(--bg-color);
167 width: 100%;
168
169 body.exp-tab-bar-v2 & {
170 min-height: 56px;
171 justify-content: center;
172 @media (orientation: landscape) {
173 width: auto;
174 font-size: 14px;
175 gap: 4px;
176 flex-direction: row;
177 min-height: 0;
178 }
179 }
180
181 @media (hover: hover) {
182 &:is(:hover, :focus) {
183 color: var(--text-color);
184 }
185 }
186}
187#shortcuts .tab-bar li a:active {
188 transform: scale(0.95);
189 transition: none;
190}
191#shortcuts .tab-bar li a * {
192 pointer-events: none;
193}
194#shortcuts .tab-bar li a span {
195 width: 100%;
196 text-align: center;
197 display: block;
198 white-space: nowrap;
199 text-overflow: ellipsis;
200 overflow: hidden;
201
202 body.exp-tab-bar-v2 & {
203 @media (orientation: landscape) {
204 text-align: left;
205 line-height: 1;
206 }
207 }
208}
209#shortcuts .tab-bar li a {
210 position: relative;
211 &:before {
212 content: '';
213 position: absolute;
214 border-radius: 8px;
215 z-index: -1;
216 transform: scale(0.5);
217 opacity: 0;
218 transition: all 0.1s ease-in-out;
219 inset: 2px;
220 background-color: var(--bg-faded-color);
221 }
222
223 body.exp-tab-bar-v2 &:before {
224 border-radius: 999px;
225 }
226}
227#shortcuts .tab-bar li a.is-active {
228 color: var(--link-color);
229 /* background-image: radial-gradient(
230 closest-side at 50% 50%,
231 var(--bg-color),
232 transparent
233 ); */
234 &:before {
235 transform: scale(1);
236 opacity: 1;
237 }
238}
239#app:has(#home-page):not(:has(#home-page ~ .deck-container)):has(header[hidden])
240 #shortcuts
241 .tab-bar,
242#app:has(#home-page ~ .deck-container header[hidden]) #shortcuts .tab-bar,
243shortcuts .tab-bar[hidden] {
244 transform: translateY(200%);
245 pointer-events: none;
246 user-select: none;
247}
248
249@media (max-width: calc(40em - 1px)) {
250 #app[data-shortcuts-view-mode='tab-menu-bar'] .deck-container {
251 padding-bottom: 52px;
252 }
253 #shortcuts .tab-bar li a.has-subtitle .icon,
254 #shortcuts .tab-bar li a.has-subtitle .icon svg {
255 width: 14px !important;
256 height: 14px !important;
257 }
258 #shortcuts .tab-bar li a span {
259 line-height: 1;
260 }
261}
262
263@media (min-width: 40em) and (hover: hover) {
264 #app[data-shortcuts-view-mode='tab-menu-bar'] .timeline-deck {
265 margin-top: 44px;
266 }
267 #app[data-shortcuts-view-mode='tab-menu-bar'] .timeline-deck > header {
268 --margin-top: calc(44px + 8px);
269 }
270 #shortcuts .tab-bar:not([hidden]) {
271 top: 0;
272 bottom: auto;
273 padding: env(safe-area-inset-top) env(safe-area-inset-right) 0
274 env(safe-area-inset-left);
275 background-color: var(--bg-faded-blur-color);
276 backdrop-filter: blur(16px);
277 border: 0;
278 box-shadow: none;
279 border-bottom: var(--hairline-width) solid var(--bg-faded-color);
280
281 body.exp-tab-bar-v2 & {
282 transition: none;
283 left: 0;
284 right: 0;
285 inset-block-end: auto;
286 border-radius: 0;
287 outline: 0;
288 max-width: none;
289 box-shadow: none;
290 }
291 }
292 #shortcuts .tab-bar ul:before {
293 content: '';
294 margin: auto;
295 }
296 #shortcuts .tab-bar ul:after {
297 content: '';
298 margin: auto;
299 }
300 #shortcuts .tab-bar li {
301 flex-grow: 0;
302 min-width: auto;
303 flex-basis: auto;
304 }
305 #shortcuts .tab-bar li a {
306 padding: 0 16px;
307 width: auto;
308 flex-direction: row;
309 font-size: 14px;
310 height: 44px;
311 gap: 4px;
312
313 &:before {
314 inset: 4px 0;
315 background-color: var(--bg-color);
316 }
317
318 body.exp-tab-bar-v2 & {
319 min-height: 0;
320 &:before {
321 inset: 4px 0;
322 border-radius: 8px;
323 background-color: var(--bg-color);
324 }
325 }
326 }
327 #shortcuts .tab-bar li a span {
328 text-align: left;
329 line-height: 1;
330 }
331 #app:has(#home-page):not(:has(#home-page ~ .deck-container)):has(
332 header[hidden]
333 )
334 #shortcuts
335 .tab-bar,
336 #app:has(#home-page ~ .deck-container header[hidden]) #shortcuts .tab-bar,
337 shortcuts .tab-bar[hidden] {
338 transform: translateY(-150%);
339 pointer-events: none;
340 user-select: none;
341 }
342}