dan/dribbblish-dynamic-theme
1
0
Fork 0
mirror of https://github.com/danbulant/dribbblish-dynamic-theme synced 2026-06-08 17:20:47 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

improve background image rendering

Browse source
This commit is contained in:
Send_Nukez 2021-10-29 15:04:32 +02:00
parent 9ddbac2510
commit 2e50173c45
2 changed files with 11 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
CHANGELOG.md
View file

@ -1,8 +1,11 @@
Add: Added:
- New settings area called "Consistency" for things that make it more consistent with the original spotify theme - New settings area called "Consistency" for things that make it more consistent with the original spotify theme
- Ability to hide album name and year in playbar (#85) - Ability to hide album name and year in playbar (#85)
Fix: Fixed:
- Some sidebar items hawing wrong width on hover [(see)](https://github.com/JulienMaille/dribbblish-dynamic-theme/issues/87#issuecomment-954305428) - Some sidebar items hawing wrong width on hover [(see)](https://github.com/JulienMaille/dribbblish-dynamic-theme/issues/87#issuecomment-954305428)
- Sidebar config buttons being below the text - Sidebar config buttons being below the text
- Fix #87 by not showing the playing indicator above "Liked Songs" - Fix #87 by not showing the playing indicator above "Liked Songs"
Improved:
- Background image now dosen't leak out of the main center area

15
src/styles/main.scss
View file

@ -1263,23 +1263,18 @@ html.right-expanded-cover.buddyfeed-visible .main-coverSlotExpanded-container {
/* translucent background cover */ /* translucent background cover */
.Root__top-container::before { .Root__top-container::before {
z-index: 3;
content: ""; content: "";
position: absolute;
inset: var(--main-gap) var(--buddy-feed-width) var(--main-gap) var(--sidebar-width);
pointer-events: none;
background-image: var(--image-url); background-image: var(--image-url);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
background-position: center center; background-position: center center;
position: fixed;
display: block;
top: 0;
left: 0;
right: 0;
bottom: 0;
filter: blur(15px); filter: blur(15px);
pointer-events: none; border-radius: var(--main-corner-radius);
backface-visibility: hidden;
will-change: transform;
opacity: calc(0.07 + 0.03 * var(--is_light, 0)); opacity: calc(0.07 + 0.03 * var(--is_light, 0));
z-index: +3;
transition: background-image var(--song-transition-speed) linear; transition: background-image var(--song-transition-speed) linear;
} }