Skip to content

Commit c5042a8

Browse files
arcbtcarcbtc
authored
feat: extension scroll, improves performance of firefox (#10)
* added extension scroll * fixed * some firefox tweaks
1 parent 33fbd47 commit c5042a8

3 files changed

Lines changed: 347 additions & 18 deletions

File tree

‎assets/css/lnbits.css‎

Lines changed: 173 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,136 @@ a:hover, a:focus {
2222
padding-right: 50px
2323
}
2424

25+
.ln-extensions-row {
26+
align-items: stretch;
27+
}
28+
29+
.ln-extensions-wall {
30+
display: flex;
31+
align-items: stretch;
32+
position: relative;
33+
height: calc(100% + (var(--ln-section-pad) * 2));
34+
margin-top: calc(var(--ln-section-pad) * -1);
35+
margin-bottom: calc(var(--ln-section-pad) * -1);
36+
}
37+
38+
.ln-extensions-wall__frame {
39+
position: relative;
40+
width: 100%;
41+
max-height: 560px;
42+
margin-top: 0;
43+
overflow: hidden;
44+
}
45+
46+
.ln-extensions-wall__track {
47+
--scroll-duration: 48s;
48+
display: flex;
49+
flex-direction: column;
50+
animation: ln-extensions-scroll var(--scroll-duration) linear infinite;
51+
}
52+
53+
.ln-extensions-wall__grid {
54+
display: grid;
55+
grid-template-columns: repeat(4, minmax(140px, 1fr));
56+
gap: 10px;
57+
padding: 0 12px 16px;
58+
}
59+
60+
.ln-extension-card {
61+
display: flex;
62+
align-items: center;
63+
gap: 10px;
64+
padding: 8px 10px;
65+
border-radius: 10px;
66+
border: 1px solid rgba(255, 255, 255, 0.12);
67+
background: rgba(9, 11, 18, 0.72);
68+
box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35);
69+
color: var(--ln-text);
70+
text-decoration: none;
71+
transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
72+
}
73+
74+
.ln-extension-card:hover,
75+
.ln-extension-card:focus {
76+
transform: translateY(-4px);
77+
border-color: rgba(255, 30, 230, 0.6);
78+
box-shadow: 0 14px 28px rgba(255, 30, 230, 0.18);
79+
color: var(--ln-text);
80+
}
81+
82+
.ln-extension-card__icon {
83+
width: 44px;
84+
height: 44px;
85+
flex: 0 0 44px;
86+
border-radius: 10px;
87+
overflow: hidden;
88+
background: rgba(255, 255, 255, 0.06);
89+
display: flex;
90+
align-items: center;
91+
justify-content: center;
92+
font-weight: 700;
93+
color: rgba(255, 255, 255, 0.7);
94+
}
95+
96+
.ln-extension-card__icon img {
97+
width: 100%;
98+
height: 100%;
99+
object-fit: cover;
100+
}
101+
102+
.ln-extension-card__text {
103+
display: flex;
104+
flex-direction: column;
105+
gap: 4px;
106+
flex: 1;
107+
min-width: 0;
108+
}
109+
110+
.ln-extension-card__name {
111+
font-size: 0.72rem;
112+
font-weight: 600;
113+
line-height: 1.1;
114+
}
115+
116+
.ln-extension-card__desc {
117+
font-size: 0.66rem;
118+
color: var(--ln-muted);
119+
line-height: 1.2;
120+
min-height: 2.2em;
121+
display: -webkit-box;
122+
-webkit-line-clamp: 2;
123+
-webkit-box-orient: vertical;
124+
overflow: hidden;
125+
text-overflow: ellipsis;
126+
}
127+
128+
.ln-extension-card__name,
129+
.ln-extension-card__desc {
130+
width: 100%;
131+
overflow: hidden;
132+
text-overflow: ellipsis;
133+
}
134+
135+
.ln-extension-card__name,
136+
.ln-extension-card__desc {
137+
display: block;
138+
}
139+
140+
@keyframes ln-extensions-scroll {
141+
0% {
142+
transform: translateY(0);
143+
}
144+
100% {
145+
transform: translateY(-50%);
146+
}
147+
}
148+
149+
@media (prefers-reduced-motion: reduce) {
150+
.ln-extensions-wall__track {
151+
animation: none;
152+
}
153+
}
154+
25155
.ud-contact {
26156
background-color: white;
27157
}
@@ -402,6 +532,13 @@ body.body--dark {
402532
--ln-section-glow:
403533
radial-gradient(620px 320px at 70% 25%, rgba(255, 30, 230, 0.16), transparent 65%),
404534
radial-gradient(520px 280px at 15% 80%, rgba(39, 215, 255, 0.14), transparent 62%);
535+
--ln-section-pad: 120px;
536+
}
537+
538+
@media (max-width: 767px) {
539+
.ln-section--extensions {
540+
--ln-section-pad: 80px;
541+
}
405542
}
406543

407544
.ln-section--bootstrap {
@@ -598,3 +735,39 @@ body.body--dark {
598735
background-position: 40% 20%, 60% 0%, 70% 30%;
599736
}
600737
}
738+
739+
@-moz-document url-prefix() {
740+
.ud-header,
741+
.ln-btn-outline,
742+
.ln-btn-tile,
743+
.ln-card,
744+
.ln-video-btn,
745+
.ln-extension-card {
746+
backdrop-filter: none;
747+
}
748+
749+
.ud-hero,
750+
.ud-hero::before {
751+
animation: none;
752+
}
753+
754+
.ln-section::before {
755+
mix-blend-mode: normal;
756+
opacity: 0.35;
757+
}
758+
759+
.ln-contrib-marquee {
760+
mask-image: none;
761+
}
762+
763+
.ln-contrib-marquee::before,
764+
.ln-contrib-marquee::after {
765+
display: none;
766+
}
767+
768+
.ln-funding-logos,
769+
.navbar-brand img,
770+
.ud-footer .ud-footer-logo img {
771+
filter: none;
772+
}
773+
}

‎assets/js/landing.js‎

Lines changed: 39 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -275,11 +275,46 @@ window.addEventListener("DOMContentLoaded", () => {
275275

276276
track.appendChild(fragment);
277277

278-
const duration = Math.max(40, items.length * 1.1);
279-
track.style.animationDuration = duration + "s";
280-
if (window.innerWidth <= 767) {
281-
track.style.animationDuration = duration * 1.6 + "s";
278+
function parseDuration(value) {
279+
if (!value) {
280+
return null;
281+
}
282+
const trimmed = value.trim();
283+
if (!trimmed) {
284+
return null;
285+
}
286+
if (trimmed.endsWith("ms")) {
287+
return parseFloat(trimmed) / 1000;
288+
}
289+
if (trimmed.endsWith("s")) {
290+
return parseFloat(trimmed);
291+
}
292+
return parseFloat(trimmed);
293+
}
294+
295+
function applyContribSpeed(seconds) {
296+
if (!seconds || Number.isNaN(seconds)) {
297+
return;
298+
}
299+
const slower = seconds * 1.5;
300+
track.style.animationDuration = slower + "s";
301+
}
302+
303+
let duration = null;
304+
const rootValue = window.getComputedStyle(document.documentElement)
305+
.getPropertyValue("--extensions-scroll-duration");
306+
duration = parseDuration(rootValue);
307+
308+
if (!duration) {
309+
duration = Math.max(40, items.length * 1.1);
282310
}
311+
applyContribSpeed(duration);
312+
313+
window.addEventListener("extensions-scroll-duration", (event) => {
314+
if (event && event.detail && typeof event.detail.duration === "number") {
315+
applyContribSpeed(event.detail.duration);
316+
}
317+
});
283318
}
284319

285320
fetch("https://api.github.com/repos/lnbits/lnbits", {

0 commit comments

Comments
 (0)