this repo has no description
Test a bunch of perf-related style changes
+17
-11
+10
-6
src/app.css
+10
-6
src/app.css
···
144
144
user-select: none;
145
145
}
146
146
.deck > header .header-grid {
147
-
background-color: var(--bg-blur-color);
147
+
background-color: var(--bg-color);
148
+
/* background-color: var(--bg-blur-color);
148
149
background-image: linear-gradient(to bottom, var(--bg-color), transparent);
149
-
backdrop-filter: saturate(180%) blur(20px);
150
+
backdrop-filter: saturate(180%) blur(20px); */
150
151
border-bottom: var(--hairline-width) solid var(--divider-color);
151
152
min-height: 3em;
152
153
display: grid;
···
895
896
.status-carousel > ul {
896
897
display: flex;
897
898
overflow-x: auto;
898
-
overflow-y: hidden;
899
+
overflow-y: clip;
899
900
scroll-snap-type: x mandatory;
900
901
scroll-behavior: smooth;
901
902
margin: 0;
···
904
905
align-items: flex-start;
905
906
counter-reset: index;
906
907
min-height: 160px;
908
+
max-height: 65vh;
909
+
max-height: 65dvh;
907
910
}
908
911
.status-carousel > ul > li {
909
912
scroll-snap-align: center;
···
915
918
list-style: none;
916
919
margin: 0;
917
920
padding: 0;
918
-
max-height: 65vh;
919
-
max-height: 65dvh;
921
+
/* max-height: 65vh;
922
+
max-height: 65dvh; */
920
923
counter-increment: index;
921
924
position: relative;
922
925
}
···
1422
1425
right: max(16px, env(safe-area-inset-right));
1423
1426
padding: 16px;
1424
1427
background-color: var(--button-bg-blur-color);
1425
-
backdrop-filter: blur(16px);
1428
+
/* backdrop-filter: blur(16px); */
1426
1429
z-index: 10;
1427
1430
box-shadow: 0 3px 8px -1px var(--drop-shadow-color),
1428
1431
0 10px 36px -4px var(--button-bg-blur-color);
···
2471
2474
border-bottom: 0;
2472
2475
border-radius: 16px;
2473
2476
background-color: var(--bg-faded-blur-color);
2477
+
backdrop-filter: blur(16px);
2474
2478
background-image: none;
2475
2479
border-radius: 16px;
2476
2480
min-height: 4em;
+1
-1
src/components/media-post.css
+1
-1
src/components/media-post.css
+4
-2
src/components/shortcuts.css
+4
-2
src/components/shortcuts.css
···
59
59
left: 0;
60
60
right: 0;
61
61
z-index: 100;
62
-
background-color: var(--bg-blur-color);
63
-
backdrop-filter: blur(16px) saturate(3);
62
+
background-color: var(--bg-color);
63
+
/* background-color: var(--bg-blur-color);
64
+
backdrop-filter: blur(16px) saturate(3); */
64
65
border-top: var(--hairline-width) solid var(--outline-color);
65
66
box-shadow: 0 -8px 16px -8px var(--drop-shadow-color);
66
67
overflow: auto;
···
165
166
padding: env(safe-area-inset-top) env(safe-area-inset-right) 0
166
167
env(safe-area-inset-left);
167
168
background-color: var(--bg-faded-blur-color);
169
+
backdrop-filter: blur(16px);
168
170
border: 0;
169
171
box-shadow: none;
170
172
border-bottom: var(--hairline-width) solid var(--bg-faded-color);
+2
-2
src/components/status.css
+2
-2
src/components/status.css
···
206
206
.status-card:not(.status-carousel .status)
207
207
:is(.content, .poll, .media-container) {
208
208
max-height: 160px !important;
209
-
overflow: hidden;
209
+
overflow: clip;
210
210
}
211
211
.status.small:not(.status-carousel .status)
212
212
.status-card
···
1957
1957
color: var(--media-fg-color);
1958
1958
background-color: var(--media-bg-color);
1959
1959
border: var(--hairline-width) solid var(--media-outline-color);
1960
-
mix-blend-mode: luminosity;
1960
+
/* mix-blend-mode: luminosity; */
1961
1961
border-radius: 4px;
1962
1962
padding: 4px;
1963
1963
opacity: 0.65;