From bfa8f8ab685d9786185910a806fa5e53c0706fe0 Mon Sep 17 00:00:00 2001 From: Julien Maille Date: Sat, 23 Oct 2021 23:57:16 +0200 Subject: [PATCH 1/2] IMP: more color transitions --- dribbblish-dynamic.js | 44 ++++--------------------------------------- user.css | 32 +++++++++++++++++++++++++++++++ 2 files changed, 36 insertions(+), 40 deletions(-) diff --git a/dribbblish-dynamic.js b/dribbblish-dynamic.js index 67c45e9..93370e2 100644 --- a/dribbblish-dynamic.js +++ b/dribbblish-dynamic.js @@ -210,7 +210,7 @@ function toggleDark(setDark) { setRootColor('subtext', setDark ? "#EAEAEA" : "#3D3D3D") setRootColor('notification', setDark ? "#303030" : "#DDDDDD") - updateColors(textColor, sidebarColor, false) + updateColors(textColor, sidebarColor) } function checkDarkLightMode() { @@ -285,7 +285,7 @@ var currentColor; var currentSideColor; var colorFadeInterval = false; -function updateColors(textColHex, sideColHex, animate=false) { +function updateColors(textColHex, sideColHex) { let update = (textColHex, sideColHex) => { currentColor = textColHex; currentSideColor = sideColHex; @@ -307,43 +307,7 @@ function updateColors(textColHex, sideColHex, animate=false) { clearInterval(colorFadeInterval); // clear any interval that might be running - if(!animate) { - update(textColHex, sideColHex); - return; - } - - let clamp = (num,min,max) => Math.min(Math.max(num, min), max); - let lerp = (a,b,u) => (1-u) * a + u * b; - let toMS = s => parseFloat(s) * (/\ds$/.test(s) ? 1000 : 1); - - let interval = 10; // 10 ms between each call - var duration = toMS(getComputedStyle(document.documentElement).getPropertyValue("--song-transition-speed")); - if(duration < 1) duration = 1; - let startC1 = hexToRgb(currentColor); - let startC2 = hexToRgb(currentSideColor); - - let endC1 = hexToRgb(textColHex); - let endC2 = hexToRgb(sideColHex); - - var start; - - colorFadeInterval = setInterval(function(){ - if(!start) { start = performance.now() } - let elapsed = performance.now()-start; - let ratio = clamp(elapsed/duration, 0, 1) - - let currentC1 = []; - let currentC2 = []; - for(var i = 0; i < 3; i++){ - currentC1[i] = lerp(startC1[i], endC1[i], ratio); - currentC2[i] = lerp(startC2[i], endC2[i], ratio); - } - - update(rgbToHex(currentC1), rgbToHex(currentC2)); - - if (elapsed>duration){ clearInterval(colorFadeInterval) } - - }, interval); + update(textColHex, sideColHex); } let nearArtistSpanText = "" @@ -432,7 +396,7 @@ function pickCoverColor(img) { sidebarColor = swatches[lightCols[col]].getHex() break } - updateColors(textColor, sidebarColor, true) + updateColors(textColor, sidebarColor) } waitForElement([".main-nowPlayingBar-left"], (queries) => { diff --git a/user.css b/user.css index 92e18ae..81e7fad 100644 --- a/user.css +++ b/user.css @@ -1351,3 +1351,35 @@ 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 From d34c221be5250c9483ac519479e952a649ad6257 Mon Sep 17 00:00:00 2001 From: Julien Maille Date: Sun, 24 Oct 2021 09:27:05 +0200 Subject: [PATCH 2/2] refactor --- dribbblish-dynamic.js | 33 +++++++++-------------- user.css | 63 +++++++++++++++++++++---------------------- 2 files changed, 43 insertions(+), 53 deletions(-) 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