diff --git a/src/_data/facets.json b/src/_data/facets.json index 56474701..106c435a 100644 --- a/src/_data/facets.json +++ b/src/_data/facets.json @@ -40,7 +40,7 @@ "category": "Themes", "featured": true, "author": "A theme by [@tokono.ma](https://bsky.app/profile/tokono.ma)", - "desc": "The classic Diffuse browser and playback console on top of the Blur background system. A nostalgic, minimal audio bar with light indicators." + "desc": "A recreation of the Diffuse v3 theme with the browser of the new Blur theme." }, { "url": "facets/data/cache-tracks/index.html", diff --git a/src/facets/themes/blur-classic/controller/element.css b/src/facets/themes/blur-classic/controller/element.css index 00bea5a6..30aef670 100644 --- a/src/facets/themes/blur-classic/controller/element.css +++ b/src/facets/themes/blur-classic/controller/element.css @@ -43,13 +43,13 @@ main { .progress__track { background-color: rgba(255, 255, 255, 0.25); border-radius: var(--radius-sm); - height: 3px; + height: 0.23em; overflow: hidden; } .progress__fill { background-color: rgba(255, 255, 255, 0.325); - height: 3px; + height: 0.23em; transition: width 250ms linear; } @@ -89,7 +89,7 @@ main { .control-btn__icon { align-items: center; display: flex; - height: 20px; + height: 1.54em; justify-content: center; margin: var(--space-2xs) 0; @@ -100,29 +100,29 @@ main { .control-btn__icon i.ph-repeat, .control-btn__icon i.ph-shuffle { - font-size: 110%; + font-size: 1.1em; } .control-btn__icon i.ph-rewind, .control-btn__icon i.ph-fast-forward { - font-size: 110%; + font-size: 1.1em; } /* Light indicators */ .light { - height: 4px; + height: 0.31em; } .light--placeholder { - height: 4px; + height: 0.31em; width: 0; } .light--small { border-radius: 50%; - height: 4px; - width: 4px; + height: 0.31em; + width: 0.31em; background-color: rgba(255, 255, 255, 0.25); } @@ -132,10 +132,10 @@ main { .light--large { border-radius: var(--radius-sm); - height: 4px; + height: 0.31em; position: relative; - width: 17px; - left: -2px; + width: 1.31em; + left: -0.15em; background-color: rgba(255, 255, 255, 0.25); } @@ -147,14 +147,8 @@ main { .play-text { font-family: Arial, ui-sans-serif, system-ui, sans-serif; - font-size: 85%; + font-size: 0.85em; font-weight: 700; - letter-spacing: 4px; + letter-spacing: 0.31em; white-space: nowrap; } - -/* Loading spinner */ - -.menu__loader { - cursor: pointer; -} diff --git a/src/facets/themes/blur-classic/controller/element.js b/src/facets/themes/blur-classic/controller/element.js index 89c94c7e..4817e150 100644 --- a/src/facets/themes/blur-classic/controller/element.js +++ b/src/facets/themes/blur-classic/controller/element.js @@ -189,7 +189,6 @@ class ClassicController extends DiffuseElement { return html` - @@ -226,20 +225,9 @@ class ClassicController extends DiffuseElement { - -
- - - - -
- - - - - +
+
+

Background Image

+
+
+ + -
+
+ + + -
-

Background Color

-
- - -
-
- +
+

Background Color

+
+ + +
+
- + diff --git a/src/facets/themes/blur-classic/facet/index.inline.js b/src/facets/themes/blur-classic/facet/index.inline.js index 91864b85..f983d75d 100644 --- a/src/facets/themes/blur-classic/facet/index.inline.js +++ b/src/facets/themes/blur-classic/facet/index.inline.js @@ -89,11 +89,56 @@ document.querySelector("#btn-new-deck")?.addEventListener("click", async () => { window.open(url.toString(), "_blank"); }); -document.querySelector("#btn-settings")?.addEventListener("click", () => { - const main = document.querySelector("main"); - const btn = document.querySelector("#btn-settings"); - const isOpen = main?.classList.toggle("settings-open") ?? false; - btn?.setAttribute("data-active", isOpen ? "t" : "f"); +const settingsBtn = document.querySelector("#btn-settings"); +const settingsPanel = + /** @type {HTMLElement | null} */ (document.querySelector("#settings-panel")); +const settingsBackdrop = document.querySelector("#settings-backdrop"); +const browserEl = document.querySelector("db-browser"); + +let settingsOpen = false; + +function positionSettingsPanel() { + if (!browserEl || !settingsPanel) return; + const rect = browserEl.getBoundingClientRect(); + settingsPanel.style.top = `${rect.top}px`; + settingsPanel.style.left = `${rect.left}px`; + settingsPanel.style.width = `${rect.width}px`; + settingsPanel.style.height = `${rect.height}px`; +} + +function openSettings() { + settingsOpen = true; + positionSettingsPanel(); + settingsBackdrop?.classList.add("settings-open"); + settingsPanel?.classList.add("settings-open"); + settingsBtn?.setAttribute("data-active", "t"); +} + +function closeSettings() { + settingsOpen = false; + settingsBackdrop?.classList.remove("settings-open"); + settingsPanel?.classList.remove("settings-open"); + settingsBtn?.setAttribute("data-active", "f"); +} + +settingsBtn?.addEventListener("click", () => { + if (settingsOpen) closeSettings(); + else openSettings(); +}); + +settingsBackdrop?.addEventListener("click", closeSettings); + +document.querySelector("#settings-close")?.addEventListener( + "click", + closeSettings, +); + +document.addEventListener("keydown", (e) => { + if (e.key === "Escape" && settingsOpen) closeSettings(); +}); + +window.addEventListener("resize", () => { + if (settingsOpen) positionSettingsPanel(); }); //////////////////////////////////////////// diff --git a/src/facets/themes/blur/browser/element.css b/src/facets/themes/blur/browser/element.css index 733e69f0..2db363b7 100644 --- a/src/facets/themes/blur/browser/element.css +++ b/src/facets/themes/blur/browser/element.css @@ -119,6 +119,7 @@ border-left: 1px solid var(--border-color); border-radius: 0; font-size: var(--fs-sm); + font-weight: 500; margin-left: var(--space-3xs); max-width: 12rem; overflow: hidden;