diff --git a/dribbblish-dynamic.js b/dribbblish-dynamic.js index 93370e2..170fc29 100644 --- a/dribbblish-dynamic.js +++ b/dribbblish-dynamic.js @@ -286,28 +286,19 @@ var currentSideColor; var colorFadeInterval = false; function updateColors(textColHex, sideColHex) { - let update = (textColHex, sideColHex) => { - currentColor = textColHex; - currentSideColor = sideColHex; + let isLightBg = isLight(textColorBg) + if (isLightBg) textColHex = LightenDarkenColor(textColHex, -15) // vibrant color is always too bright for white bg mode - let isLightBg = isLight(textColorBg) - if (isLightBg) textColHex = LightenDarkenColor(textColHex, -15) // vibrant color is always too bright for white bg mode - - let darkColHex = LightenDarkenColor(textColHex, isLightBg ? 12 : -20) - let darkerColHex = LightenDarkenColor(textColHex, isLightBg ? 30 : -40) - let buttonBgColHex = setLightness(textColHex, isLightBg ? 0.90 : 0.14) - setRootColor('text', textColHex) - setRootColor('button', darkerColHex) - setRootColor('button-active', darkColHex) - setRootColor('selected-row', darkerColHex) - setRootColor('tab-active', buttonBgColHex) - setRootColor('button-disabled', buttonBgColHex) - setRootColor('sidebar', sideColHex) - }; - - clearInterval(colorFadeInterval); // clear any interval that might be running - - update(textColHex, sideColHex); + let darkColHex = LightenDarkenColor(textColHex, isLightBg ? 12 : -20) + let darkerColHex = LightenDarkenColor(textColHex, isLightBg ? 30 : -40) + let buttonBgColHex = setLightness(textColHex, isLightBg ? 0.90 : 0.14) + setRootColor('text', textColHex) + setRootColor('button', darkerColHex) + setRootColor('button-active', darkColHex) + setRootColor('selected-row', darkerColHex) + setRootColor('tab-active', buttonBgColHex) + setRootColor('button-disabled', buttonBgColHex) + setRootColor('sidebar', sideColHex) } let nearArtistSpanText = "" diff --git a/user.css b/user.css index 81e7fad..0a131a7 100644 --- a/user.css +++ b/user.css @@ -39,6 +39,37 @@ font-weight: 500; } + +/* smooth color transitions */ +@property --spice-sidebar { + syntax: ''; + initial-value: magenta; + inherits: true; +} + +@property --spice-main { + syntax: ''; + initial-value: magenta; + inherits: true; +} + +@property --spice-text { + syntax: ''; + initial-value: magenta; + inherits: true; +} + +@property --spice-button { + syntax: ''; + initial-value: magenta; + inherits: true; +} + +:root { + transition: all var(--song-transition-speed) linear; + transition-property: --spice-sidebar, --spice-main, --spice-text, --spice-button; +} + 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; --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 { background-color: var(--spice-text); } - -/* smooth color transitions */ -@property --spice-sidebar { - syntax: ''; - initial-value: magenta; - inherits: true; -} - -@property --spice-main { - syntax: ''; - initial-value: magenta; - inherits: true; -} - -@property --spice-text { - syntax: ''; - initial-value: magenta; - inherits: true; -} - -@property --spice-button { - syntax: ''; - 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); -} \ No newline at end of file