Motschen/Retroblur
1
0
Fork 0
mirror of https://github.com/Motschen/Retroblur.git synced 2025-12-15 12:35:09 +01:00
Code Issues Packages Projects Releases Wiki Activity

Retroblur 1.1.0 - LyricsPlus & Local resources

Browse Source 
LyricsPlus:
- Previous and 3rd next line are now visible
- Blur around active and next line
- DVD-screensaver style no lyrics available page

The background image is now stored locally
This commit is contained in:
Motschen
2021-10-21 17:22:50 +02:00
parent 1d7c02c9eb
commit 48517aed18
4 changed files with 67 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@@ -5,4 +5,6 @@ Based on https://github.com/schnensch0/ziro
![Home](https://github.com/Motschen/Retroblur/blob/main/preview/home.png?raw=true)
![Playlist](https://github.com/Motschen/Retroblur/blob/main/preview/playlist.png?raw=true)
![Synced Lyrics](https://github.com/Motschen/Retroblur/blob/main/preview/synced_lyrics.png?raw=true)
</p>

BIN
assets/background_purple.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 267 KiB

BIN
preview/synced_lyrics.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 MiB

68
user.css
View File

@@ -8,10 +8,9 @@
--spice-misc: rgba(30, 30, 30, 0.8);
--spice-player: rgba(30, 30, 30, 0.8);
}
/* https://wallpapercave.com/wp/wp5003466.jpg */
/* https://wallpapercave.com/wp/wp4786586.jpg */
/* Source: https://wallpapercave.com/wp/wp5003466.jpg */
body, .root {
background-image: url("https://wallpapercave.com/wp/wp5003466.jpg") !important;
background-image: url("./background_purple.jpg") !important;
background-repeat: no-repeat;
background-size: 100%;
}
@@ -586,3 +585,66 @@ input:hover:not([disabled]):not(:active)~.x-toggle-indicatorWrapper {
.npv-progress-bar__rail {
height: 6px;
}
/* Lyrics */
.lyrics-lyricsContainer-LyricsContainer {
height: calc(100vh - 116px) !important;
}
.lyrics-lyricsContainer-SyncedLyrics .lyrics-lyricsContainer-LyricsLine:first-of-type {
opacity: 0.9 !important;
}
.lyrics-lyricsContainer-SyncedLyrics .lyrics-lyricsContainer-LyricsLine:nth-child(2) {
color: var(--lyrics-color-active) !important;
opacity: 1 !important;
text-shadow: 0 0 15px var(--spice-button-disabled) !important;
}
.lyrics-lyricsContainer-SyncedLyrics .lyrics-lyricsContainer-LyricsLine:nth-child(3) {
opacity: 1 !important;
text-shadow: 0 0 10px var(--lyrics-color-inactive) !important;
}
.lyrics-lyricsContainer-SyncedLyrics .lyrics-lyricsContainer-LyricsLine:nth-child(4) {
opacity: 0.9 !important;
}
.lyrics-lyricsContainer-SyncedLyrics .lyrics-lyricsContainer-LyricsLine:last-of-type {
opacity: 0.5 !important;
}
@keyframes glow {
from {
text-shadow: 0 0 10px var(--spice-button);
}
to {
}
}
/* Based on https://cssdeck.com/blog/pure-css-bouncing-ball/ */
@keyframes moveX {
from { left: 0px; } to { left: 65vw; }
}
@keyframes moveY {
from { top: 0px; } to { top: 80vh; }
}
.lyrics-lyricsContainer-LyricsUnavailablePage {
padding: 10px !important;
white-space: nowrap;
height: 13%;
width: 20%;
position: absolute;
animation: glow 3s ease infinite alternate,
moveX 4.05s linear 0s infinite alternate,
moveY 4.4s linear 0s infinite alternate-reverse;
}
.lyrics-lyricsContainer-LyricsBackground {
opacity: 0.5 !important;
}
/* Change text of the container
.lyrics-lyricsContainer-LyricsUnavailablePage > span {
visibility: hidden;
}
.lyrics-lyricsContainer-LyricsUnavailablePage > span:after {
content: '...' !important;
visibility: visible;
display: block;
}
*/