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

2
src/styles/Colors.scss
View file

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

32
src/styles/Loader.scss
View file

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