simon/jacuzzi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

changed style and increased performance

Browse Source
This commit is contained in:
Simon
2026-06-23 19:38:59 +00:00
parent d6865d7c35
commit 55828c9726
3 changed files with 120 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/css/style.css
View File

@@ -781,7 +781,9 @@ body.theme-light .setting-item select option {
@media (max-width: 768px) {
.grid-container {
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
/* Exactly two larger cards per row on phones, rather than packing in
several small ones. */
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 10px;
gap: 12px;
padding: 16px;
@@ -887,6 +889,14 @@ body.theme-light .setting-item select option {
box-shadow: 0 6px 16px var(--shadow);
position: relative;
margin-bottom: 0;
/* Off-screen cards are kept in the DOM (so infinite scroll and scroll
position are untouched) but the browser skips their style, layout, and
paint work. This is what keeps a grid of hundreds of cards smooth on
mobile. `auto` lets the browser remember each card's real rendered height
so the scroll height stays stable; the fallback is only a first-paint
estimate for cards that have never been on screen. */
content-visibility: auto;
contain-intrinsic-size: auto 300px;
}
.video-card:hover {
@@ -924,7 +934,7 @@ body.theme-light .setting-item select option {
}
.video-card.is-title-active .video-title-text {
animation: video-title-marquee 10s linear infinite;
animation: video-title-marquee var(--marquee-duration, 10s) linear infinite;
will-change: transform;
}