diff options
| author | (quasar) nebula <qznebula@protonmail.com> | 2025-07-02 16:51:50 -0300 |
|---|---|---|
| committer | (quasar) nebula <qznebula@protonmail.com> | 2025-07-02 16:51:50 -0300 |
| commit | 060ba5929f0c169c79f62f956af0a40c248c62d5 (patch) | |
| tree | ef8a6ac260c08695ca118ebbb33f58d604fff962 /src/static/css | |
| parent | 1c7593373b82de7fea10110ecd95a2ba3f862767 (diff) | |
css: lyrics dimming gradient
Diffstat (limited to 'src/static/css')
| -rw-r--r-- | src/static/css/site.css | 23 |
1 files changed, 23 insertions, 0 deletions
diff --git a/src/static/css/site.css b/src/static/css/site.css index 02a42668..e82c371e 100644 --- a/src/static/css/site.css +++ b/src/static/css/site.css @@ -1840,6 +1840,29 @@ p.image-details.origin-details .origin-details { margin-top: 0.25em; } +.lyrics-entry { + clip-path: inset(-15px -20px); +} + +.lyrics-entry::after { + content: ""; + pointer-events: none; + display: block; + + /* Slight stretching past the bottom of the screen seems + * to make resizing the window (and "revealing" that area) + * a bit smoother. + */ + position: fixed; + bottom: -20px; + left: 0; + right: 0; + + height: calc(20px + min(90px, 13.5vh)); + background: linear-gradient(to bottom, transparent, black 70%, black); + opacity: 0.6; +} + .js-hide, .js-show-once-data, .js-hide-once-data { |