dan/dribbblish-dynamic-theme
1
0
Fork 0
mirror of https://github.com/danbulant/dribbblish-dynamic-theme synced 2026-05-19 04:08:53 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

changed default sidebar color to be darker & improve loader styles

Browse source
This commit is contained in:
Send_Nukez 2021-12-10 20:05:07 +01:00
parent ead9615ef3
commit 4dd2d42ca4
4 changed files with 30 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
CHANGELOG.md
View file

@ -1,2 +1,5 @@
Fixed:
- Weird pill-shaped background on Playlist pages title (#137)
- Weird pill-shaped background on Playlist pages title (#137)
Improved:
- Changed default `sidebar` color to be darker, so you won't get flashed green on startup

13
src/js/Loader.js
View file

@ -5,17 +5,20 @@ export default class Loader {
constructor() {
this.#container = document.createElement("div");
this.#container.id = "dribbblish-loader";
this.#container.innerHTML = `
<svg width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
<circle fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
</svg>
this.#container.innerHTML = /* html */ `
<div>
<svg width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
<circle fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
</svg>
<span>Loading...</span>
</div>
`;
document.body.appendChild(this.#container);
}
show(text) {
this.#container.setAttribute("text", text ?? "");
this.#container.querySelector("span").innerText = text ?? "";
this.#container.setAttribute("active", "");
}

2
src/styles/Colors.scss
View file

@ -3,7 +3,7 @@ $colors: (
subtext: #f0f0f0,
sidebar-text: #ffffff,
main: #000000,
sidebar: #1ed760,
sidebar: #121212,
player: #000000,
card: #000000,
shadow: #202020,

32
src/styles/Loader.scss
View file

@ -14,6 +14,8 @@ $duration: 1.4s;
pointer-events: none;
opacity: 0;
transition: opacity 1s ease-in;
color: spiceColor("subtext");
@include spiceFont("glue", 32px, "Bold");
&[active] {
opacity: 1;
@ -21,6 +23,7 @@ $duration: 1.4s;
}
&::before {
z-index: -1;
content: "";
position: absolute;
inset: 0px;
@ -28,23 +31,22 @@ $duration: 1.4s;
backdrop-filter: blur(10px);
}
&::after {
content: attr(text);
position: absolute;
bottom: 40%;
color: spiceColor("subtext");
@include spiceFont("glue", 32px, "Bold");
}
& > div {
display: flex;
flex-direction: column;
gap: 16px;
align-items: center;
svg {
animation: rotator $duration linear infinite;
svg {
animation: rotator $duration linear infinite;
circle {
stroke: spiceColor("sidebar");
stroke-dasharray: $offset;
stroke-dashoffset: 0;
transform-origin: center;
animation: dash $duration ease-in-out infinite;
circle {
stroke: spiceColor("text");
stroke-dasharray: $offset;
stroke-dashoffset: 0;
transform-origin: center;
animation: dash $duration ease-in-out infinite;
}
}
}
}