dan/dribbblish-dynamic-theme
1
0
Fork 0
mirror of https://github.com/danbulant/dribbblish-dynamic-theme synced 2026-07-09 21:21:34 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor

Browse source
This commit is contained in:
Julien Maille 2021-10-24 09:27:05 +02:00
parent bfa8f8ab68
commit d34c221be5
2 changed files with 43 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
dribbblish-dynamic.js
View file

@ -286,10 +286,6 @@ var currentSideColor;
var colorFadeInterval = false; var colorFadeInterval = false;
function updateColors(textColHex, sideColHex) { function updateColors(textColHex, sideColHex) {
let update = (textColHex, sideColHex) => {
currentColor = textColHex;
currentSideColor = sideColHex;
let isLightBg = isLight(textColorBg) let isLightBg = isLight(textColorBg)
if (isLightBg) textColHex = LightenDarkenColor(textColHex, -15) // vibrant color is always too bright for white bg mode if (isLightBg) textColHex = LightenDarkenColor(textColHex, -15) // vibrant color is always too bright for white bg mode
@ -303,11 +299,6 @@ function updateColors(textColHex, sideColHex) {
setRootColor('tab-active', buttonBgColHex) setRootColor('tab-active', buttonBgColHex)
setRootColor('button-disabled', buttonBgColHex) setRootColor('button-disabled', buttonBgColHex)
setRootColor('sidebar', sideColHex) setRootColor('sidebar', sideColHex)
};
clearInterval(colorFadeInterval); // clear any interval that might be running
update(textColHex, sideColHex);
} }
let nearArtistSpanText = "" let nearArtistSpanText = ""

63
user.css
View file

@ -39,6 +39,37 @@
font-weight: 500; font-weight: 500;
} }
/* smooth color transitions */
@property --spice-sidebar {
syntax: '<color>';
initial-value: magenta;
inherits: true;
}
@property --spice-main {
syntax: '<color>';
initial-value: magenta;
inherits: true;
}
@property --spice-text {
syntax: '<color>';
initial-value: magenta;
inherits: true;
}
@property --spice-button {
syntax: '<color>';
initial-value: magenta;
inherits: true;
}
:root {
transition: all var(--song-transition-speed) linear;
transition-property: --spice-sidebar, --spice-main, --spice-text, --spice-button;
}
body { body {
--glue-font-family: "Google Sans Display","Roboto",spotify-circular,spotify-circular-cyrillic,spotify-circular-arabic,spotify-circular-hebrew,Helvetica Neue,helvetica,arial,Hiragino Kaku Gothic Pro,Meiryo,MS Gothic,sans-serif; --glue-font-family: "Google Sans Display","Roboto",spotify-circular,spotify-circular-cyrillic,spotify-circular-arabic,spotify-circular-hebrew,Helvetica Neue,helvetica,arial,Hiragino Kaku Gothic Pro,Meiryo,MS Gothic,sans-serif;
--info-font-family: "Roboto",spotify-circular,spotify-circular-cyrillic,spotify-circular-arabic,spotify-circular-hebrew,Helvetica Neue,helvetica,arial,Hiragino Kaku Gothic Pro,Meiryo,MS Gothic,sans-serif; --info-font-family: "Roboto",spotify-circular,spotify-circular-cyrillic,spotify-circular-arabic,spotify-circular-hebrew,Helvetica Neue,helvetica,arial,Hiragino Kaku Gothic Pro,Meiryo,MS Gothic,sans-serif;
@ -1351,35 +1382,3 @@ html.right-expanded-cover.buddyfeed-visible .main-coverSlotExpanded-container {
.main-tag-container { .main-tag-container {
background-color: var(--spice-text); background-color: var(--spice-text);
} }
/* smooth color transitions */
@property --spice-sidebar {
syntax: '<color>';
initial-value: magenta;
inherits: true;
}
@property --spice-main {
syntax: '<color>';
initial-value: magenta;
inherits: true;
}
@property --spice-text {
syntax: '<color>';
initial-value: magenta;
inherits: true;
}
@property --spice-button {
syntax: '<color>';
initial-value: magenta;
inherits: true;
}
html {
transition: --spice-sidebar var(--song-transition-speed),
--spice-main var(--song-transition-speed),
--spice-text var(--song-transition-speed),
--spice-button var(--song-transition-speed);
}