maxim.dolgolyov/Learn_System
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(bg): rain — drops instead of vertical stripes

Browse Source 
Linear-gradients tiled at 3px wide produced striped curtains, not
rain. Switched to two pseudo-element layers of elongated radial
ellipses (1.5px × 12-18px) scattered across 130-180px tiles —
sparse drops at two depths with different fall speeds.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Maxim Dolgolyov
2026-05-29 21:38:25 +03:00
parent f6fbe922a9
commit 79992d23c5
1 changed files with 39 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/css/ls.css
+39 -11
View File
@@ -1486,27 +1486,55 @@ body[data-bg-tone="dark"] .frame-unlock-hint {
}
/* ── 12. rain (paid, animated) ──────────────────────────────────
Two layers of vertical streaks moving down at different rates
for parallax. The streaks are linear-gradients tiled at small
sizes so they read as drops. */
Two pseudo-element layers of elongated radial 'drops' tiled at
different sizes/speeds so they read as actual rain — not striped
curtains. Drops are 1.5px wide × 12-18px tall ellipses scattered
across a 160-200px tile. */
@keyframes ls-bg-rain-front {
from { background-position: 0 0; }
to { background-position: 0 80px; }
to { background-position: 0 180px; }
}
@keyframes ls-bg-rain-back {
from { background-position: 0 0; }
to { background-position: 0 120px; }
to { background-position: 0 130px; }
}
.bg-rain,
.bg-preview.bg-rain {
background-color: #0a1828;
position: relative;
overflow: hidden;
}
.bg-rain::before,
.bg-preview.bg-rain::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(180deg, transparent 0%, transparent 40%, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0.20) 70%, transparent 80%),
linear-gradient(180deg, transparent 0%, transparent 30%, rgba(255,255,255,0.30) 45%, rgba(255,255,255,0.10) 60%, transparent 70%);
background-size: 3px 80px, 5px 120px;
background-position: 0 0, 25% 0;
background-repeat: repeat, repeat;
animation: ls-bg-rain-front 0.6s linear infinite, ls-bg-rain-back 1.1s linear infinite;
radial-gradient(ellipse 1.5px 14px at 12% 18%, rgba(255,255,255,0.70), transparent 80%),
radial-gradient(ellipse 1.5px 12px at 32% 58%, rgba(255,255,255,0.65), transparent 80%),
radial-gradient(ellipse 1.5px 16px at 55% 12%, rgba(255,255,255,0.60), transparent 80%),
radial-gradient(ellipse 1.5px 14px at 76% 70%, rgba(255,255,255,0.70), transparent 80%),
radial-gradient(ellipse 1.5px 12px at 90% 32%, rgba(255,255,255,0.55), transparent 80%),
radial-gradient(ellipse 1.5px 18px at 22% 86%, rgba(255,255,255,0.60), transparent 80%),
radial-gradient(ellipse 1.5px 13px at 48% 92%, rgba(255,255,255,0.55), transparent 80%);
background-size: 180px 180px;
background-repeat: repeat;
animation: ls-bg-rain-front 0.9s linear infinite;
}
.bg-rain::after,
.bg-preview.bg-rain::after {
content: '';
position: absolute;
inset: 0;
background-image:
radial-gradient(ellipse 1px 10px at 18% 28%, rgba(255,255,255,0.45), transparent 80%),
radial-gradient(ellipse 1px 9px at 45% 72%, rgba(255,255,255,0.40), transparent 80%),
radial-gradient(ellipse 1px 11px at 68% 14%, rgba(255,255,255,0.45), transparent 80%),
radial-gradient(ellipse 1px 10px at 85% 50%, rgba(255,255,255,0.40), transparent 80%),
radial-gradient(ellipse 1px 8px at 30% 95%, rgba(255,255,255,0.35), transparent 80%);
background-size: 130px 130px;
background-repeat: repeat;
animation: ls-bg-rain-back 0.55s linear infinite;
}
/* ── 13. snow (paid, animated) ──────────────────────────────────