simono41/phanpy
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Test a bunch of perf-related style changes

Browse source
This commit is contained in:
Lim Chee Aun 2024-01-02 12:27:22 +08:00
parent d8ceb03d74
commit d54511aa10
4 changed files with 17 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/app.css
View file

@ -144,9 +144,10 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
user-select: none; user-select: none;
} }
.deck > header .header-grid { .deck > header .header-grid {
background-color: var(--bg-blur-color); background-color: var(--bg-color);
/* background-color: var(--bg-blur-color);
background-image: linear-gradient(to bottom, var(--bg-color), transparent); background-image: linear-gradient(to bottom, var(--bg-color), transparent);
backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); */
border-bottom: var(--hairline-width) solid var(--divider-color); border-bottom: var(--hairline-width) solid var(--divider-color);
min-height: 3em; min-height: 3em;
display: grid; display: grid;
@ -895,7 +896,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
.status-carousel > ul { .status-carousel > ul {
display: flex; display: flex;
overflow-x: auto; overflow-x: auto;
overflow-y: hidden; overflow-y: clip;
scroll-snap-type: x mandatory; scroll-snap-type: x mandatory;
scroll-behavior: smooth; scroll-behavior: smooth;
margin: 0; margin: 0;
@ -904,6 +905,8 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
align-items: flex-start; align-items: flex-start;
counter-reset: index; counter-reset: index;
min-height: 160px; min-height: 160px;
max-height: 65vh;
max-height: 65dvh;
} }
.status-carousel > ul > li { .status-carousel > ul > li {
scroll-snap-align: center; scroll-snap-align: center;
@ -915,8 +918,8 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
max-height: 65vh; /* max-height: 65vh;
max-height: 65dvh; max-height: 65dvh; */
counter-increment: index; counter-increment: index;
position: relative; position: relative;
} }
@ -1422,7 +1425,7 @@ body:has(.media-modal-container + .status-deck) .media-post-link {
right: max(16px, env(safe-area-inset-right)); right: max(16px, env(safe-area-inset-right));
padding: 16px; padding: 16px;
background-color: var(--button-bg-blur-color); background-color: var(--button-bg-blur-color);
backdrop-filter: blur(16px); /* backdrop-filter: blur(16px); */
z-index: 10; z-index: 10;
box-shadow: 0 3px 8px -1px var(--drop-shadow-color), box-shadow: 0 3px 8px -1px var(--drop-shadow-color),
0 10px 36px -4px var(--button-bg-blur-color); 0 10px 36px -4px var(--button-bg-blur-color);
@ -2471,6 +2474,7 @@ ul.link-list li a .icon {
border-bottom: 0; border-bottom: 0;
border-radius: 16px; border-radius: 16px;
background-color: var(--bg-faded-blur-color); background-color: var(--bg-faded-blur-color);
backdrop-filter: blur(16px);
background-image: none; background-image: none;
border-radius: 16px; border-radius: 16px;
min-height: 4em; min-height: 4em;

2
src/components/media-post.css
View file

@ -34,7 +34,7 @@
word-break: break-word; word-break: break-word;
word-wrap: break-word; word-wrap: break-word;
overflow-wrap: break-word; overflow-wrap: break-word;
mix-blend-mode: luminosity; /* mix-blend-mode: luminosity; */
-webkit-line-clamp: 3; -webkit-line-clamp: 3;
line-clamp: 3; line-clamp: 3;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;

6
src/components/shortcuts.css
View file

@ -59,8 +59,9 @@
left: 0; left: 0;
right: 0; right: 0;
z-index: 100; z-index: 100;
background-color: var(--bg-blur-color); background-color: var(--bg-color);
backdrop-filter: blur(16px) saturate(3); /* background-color: var(--bg-blur-color);
backdrop-filter: blur(16px) saturate(3); */
border-top: var(--hairline-width) solid var(--outline-color); border-top: var(--hairline-width) solid var(--outline-color);
box-shadow: 0 -8px 16px -8px var(--drop-shadow-color); box-shadow: 0 -8px 16px -8px var(--drop-shadow-color);
overflow: auto; overflow: auto;
@ -165,6 +166,7 @@ shortcuts .tab-bar[hidden] {
padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 padding: env(safe-area-inset-top) env(safe-area-inset-right) 0
env(safe-area-inset-left); env(safe-area-inset-left);
background-color: var(--bg-faded-blur-color); background-color: var(--bg-faded-blur-color);
backdrop-filter: blur(16px);
border: 0; border: 0;
box-shadow: none; box-shadow: none;
border-bottom: var(--hairline-width) solid var(--bg-faded-color); border-bottom: var(--hairline-width) solid var(--bg-faded-color);

4
src/components/status.css
View file

@ -206,7 +206,7 @@
.status-card:not(.status-carousel .status) .status-card:not(.status-carousel .status)
:is(.content, .poll, .media-container) { :is(.content, .poll, .media-container) {
max-height: 160px !important; max-height: 160px !important;
overflow: hidden; overflow: clip;
} }
.status.small:not(.status-carousel .status) .status.small:not(.status-carousel .status)
.status-card .status-card
@ -1957,7 +1957,7 @@ a.card:is(:hover, :focus):visited {
color: var(--media-fg-color); color: var(--media-fg-color);
background-color: var(--media-bg-color); background-color: var(--media-bg-color);
border: var(--hairline-width) solid var(--media-outline-color); border: var(--hairline-width) solid var(--media-outline-color);
mix-blend-mode: luminosity; /* mix-blend-mode: luminosity; */
border-radius: 4px; border-radius: 4px;
padding: 4px; padding: 4px;
opacity: 0.65; opacity: 0.65;