dan/dribbblish-dynamic-theme
1
0
Fork 0
mirror of https://github.com/danbulant/dribbblish-dynamic-theme synced 2026-06-19 14:41:15 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor stuff and change notification styles

Browse source
This commit is contained in:
Send_Nukez 2021-12-24 21:40:54 +01:00 committed by GitHub Action
parent decfe17aa2
commit 56b109cc01
13 changed files with 115 additions and 103 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
CHANGELOG.md
View file

@ -6,4 +6,5 @@ Fixed:
Improved:
- Add `embedWidgetGenerator` modals to custom modal styles. (Things like the [spicetify-marketplace](https://github.com/CharlieS1103/spicetify-marketplace) options)
- Changed custom app tab styles to fit in with the theme
- Changed custom app tab styles to fit in with the theme
- Changed notification styles to fit in with other elements of the theme

9
src/js/Dribbblish.js
View file

@ -1,7 +1,8 @@
import ConfigMenu from "./ConfigMenu";
import Info from "./Info";
import Loader from "./Loader";
import { icons } from "./Icons";
import Overlay from "./Overlay";
import Icon, { icons } from "./Icons";
export default class Dribbblish {
/**
@ -23,7 +24,10 @@ export default class Dribbblish {
/** @type {Loader} */
loader;
/** @type {Icons} */
/** @type {Overlay} */
overlay;
/** @type {Icon} */
icons;
/** @type {Object.<string, listener[]>} */
@ -36,6 +40,7 @@ export default class Dribbblish {
this.config = new ConfigMenu();
this.info = new Info();
this.loader = new Loader();
this.overlay = new Overlay();
this.icons = icons;
let tries = 0;

22
src/js/Loader.js
View file

@ -1,28 +1,18 @@
import { icons } from "./Icons";
import Overlay from "./Overlay";
export default class Loader {
/** @type {HTMLDivElement} */
#container;
/** @type {Overlay} */
#overlay;
constructor() {
this.#container = document.createElement("div");
this.#container.id = "dribbblish-loader";
this.#container.innerHTML = /* html */ `
<div>
${icons.get("loading", { size: 64 })}
<span></span>
</div>
`;
document.body.appendChild(this.#container);
this.#overlay = new Overlay();
}
show(text) {
this.#container.querySelector("span").innerText = text ?? "Loading...";
this.#container.setAttribute("active", "");
this.#overlay.show({ icon: "loading", text });
}
hide() {
this.#container.removeAttribute("active");
this.#overlay.hide();
}
}

68
src/js/Overlay.js Normal file
View file

@ -0,0 +1,68 @@
import { defaults } from "./Util";
import { icons } from "./Icons";
export default class Overlay {
/**
* @typedef {Object} DribbblishOverlayOptions
* @property {String} icon
* @property {String} text
* @property {DribbblishOverlayColor} color
*/
/**
* @typedef {Object} DribbblishOverlayColor
* @property {String} [icon]
* @property {String} [text]
*/
/** @type {HTMLDivElement} */
#container;
/** @type {HTMLElement} */
#iconElem;
/** @type {HTMLSpanElement} */
#textElem;
constructor() {
this.#container = document.createElement("div");
this.#container.id = "dribbblish-overlay";
this.#container.innerHTML = /* html */ `
<div>
<i></i>
<span>Loading...</span>
</div>
`;
this.#iconElem = this.#container.querySelector("i");
this.#textElem = this.#container.querySelector("span");
document.body.appendChild(this.#container);
}
/**
*
* @param {DribbblishOverlayOptions} options
*/
show(options) {
const defaultOptions = {
icon: "",
text: "",
color: {
icon: "var(--spice-text)",
text: "var(--spice-subtext)"
}
};
options = defaults(options, defaultOptions);
if (options.icon != "" && !options.icon.startsWith("<svg")) options.icon = icons.get(options.icon, { size: 64 });
this.#iconElem.innerHTML = options.icon;
this.#iconElem.style.setProperty("--color", options.color.icon);
this.#textElem.innerHTML = options.text;
this.#textElem.style.setProperty("--color", options.color.text);
this.#container.setAttribute("active", "");
}
hide() {
this.#container.removeAttribute("active");
}
}

5
src/styles/ConfigMenu.scss
View file

@ -23,16 +23,13 @@
z-index: 1;
position: relative;
width: clamp(500px, 50%, 650px);
background-color: spiceColor("main", 0.95);
backdrop-filter: blur(3px);
padding: 20px 15px;
border-radius: var(--main-corner-radius);
display: flex;
gap: 8px;
flex-direction: column;
align-items: center;
justify-content: center;
@include spiceShadow();
@include spiceGlass();
> h2 {
font-size: 32px;

9
src/styles/ConnectDeviceList.scss
View file

@ -1,13 +1,6 @@
.connect-device-list-container {
$border-color: spiceColor("subtext", 0.1, 0.1);
border: 1px solid $border-color;
border-radius: var(--main-corner-radius);
padding: 8px;
background-color: spiceColor("main", 0.75, -0.1) !important;
backdrop-filter: blur(10px);
border-radius: var(--main-corner-radius);
@include spiceShadow();
@include spiceGlass(lightOffset(0.8, -0.1));
&::before {
display: none;

10
src/styles/ContextMenu.scss
View file

@ -1,10 +1,7 @@
.main-contextMenu-menu {
$border-color: spiceColor("subtext", 0.1, 0.1);
position: relative;
overflow: visible;
background-color: transparent !important;
border: 1px solid $border-color;
border-radius: var(--main-corner-radius);
padding: 8px;
@ -13,10 +10,7 @@
content: "";
position: absolute;
inset: 0px;
background-color: spiceColor("main", 0.75, -0.1) !important;
backdrop-filter: blur(10px);
border-radius: var(--main-corner-radius);
@include spiceShadow();
@include spiceGlass(lightOffset(0.8, -0.1));
}
.main-contextMenu-menuItem {
@ -34,7 +28,7 @@
&::after {
left: 8px;
right: 8px;
border-color: $border-color;
border-color: spiceColor("subtext", 0.1, 0.1);
}
}
}

1
src/styles/Lyrics.scss Normal file
View file

@ -0,0 +1 @@
// TODO: improve default lyrics styles when the classes are mapped `see: https://github.com/JulienMaille/dribbblish-dynamic-theme/issues/144`

5
src/styles/Modals.scss
View file

@ -5,15 +5,12 @@
.GenericModal {
z-index: 1;
position: relative;
background-color: spiceColor("main", 0.95);
backdrop-filter: blur(3px);
padding: 24px 16px;
border-radius: var(--main-corner-radius);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
@include spiceShadow();
@include spiceGlass();
// Popups (`Spicetify.PopupModal.display()`)
generic-modal & {

10
src/styles/Loader.scss → src/styles/Overlay.scss
View file

@ -1,4 +1,4 @@
#dribbblish-loader {
#dribbblish-overlay {
z-index: 999999;
position: fixed;
inset: 0px;
@ -31,8 +31,12 @@
gap: 16px;
align-items: center;
svg {
color: spiceColor("text");
& > * {
color: var(--color);
&:empty {
display: none;
}
}
}
}

50
src/styles/Popup.scss
View file

@ -1,50 +0,0 @@
.GenericModal__overlay {
backdrop-filter: blur(3px) brightness(60%);
background-color: transparent;
.GenericModal {
z-index: 1;
position: relative;
width: clamp(500px, 50%, 650px);
background-color: spiceColor("main", 0.95);
backdrop-filter: blur(3px);
padding: 24px 16px;
border-radius: var(--main-corner-radius);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
@include spiceShadow();
.main-trackCreditsModal-container {
display: flex;
gap: 16px;
background-color: transparent;
width: 100%;
.main-trackCreditsModal-header {
display: flex;
gap: 16px;
padding: 0px;
width: 100%;
border: none;
h1 {
text-align: center;
width: 100%;
@include spiceFont("glue", 2em, "Bold");
}
button {
position: absolute;
top: 16px;
right: 16px;
}
}
.main-trackCreditsModal-mainSection {
padding: 0px 26px;
}
}
}
}

8
src/styles/Util.scss
View file

@ -11,3 +11,11 @@
@mixin spiceShadow() {
box-shadow: 0px 0px 8px spiceColor("subtext", 0.1, 0.1);
}
@mixin spiceGlass($opacity: 0.95) {
background-color: spiceColor("main", $opacity);
backdrop-filter: blur(10px);
border: 1px solid spiceColor("subtext", 0.1, 0.1);
border-radius: var(--main-corner-radius);
@include spiceShadow();
}

18
src/styles/main.scss
View file

@ -7,10 +7,11 @@
@import "NoAds";
@import "Markdown";
@import "Info";
@import "Loader";
@import "Modals";
@import "ConnectDeviceList";
@import "Lyrics";
@import "Icons";
@import "Overlay";
@import "CustomAppTabBar";
:root {
@ -595,13 +596,8 @@ html.sidebar-hide-text .GlueDropTarget span {
text-align: center;
white-space: nowrap;
pointer-events: none;
border: 1px solid spiceColor("subtext", 0.1, 0.1);
border-radius: var(--main-corner-radius);
color: spiceColor("subtext");
background-color: spiceColor("main", 0.75, -0.1) !important;
backdrop-filter: blur(10px);
border-radius: var(--main-corner-radius);
@include spiceShadow();
@include spiceGlass();
}
.minimal-player .player-controls__buttons {
@ -1288,6 +1284,14 @@ html.right-expanded-cover.buddyfeed-visible .main-coverSlotExpanded-container {
display: none;
}
// Notifications
.main-notificationBubbleContainer-NotificationBubbleContainer {
.main-notificationBubble-NotificationBubble {
color: spiceColor("subtext");
@include spiceGlass();
}
}
// ! WORKAROUNDS / TEMP FIXES
// Spotify UI breaks after advertisements #63
canvas[width="250"][height="250"] {