mirror of
https://github.com/danbulant/dribbblish-dynamic-theme
synced 2026-05-25 04:52:10 +00:00
Merge pull request #96 from JulienMaille/colors-in-scss
change colors to be handled inside scss
This commit is contained in:
Erik
GitHub
commit
294e69b3d8
7 changed files with 161 additions and 262 deletions
162
src/color.ini
162
src/color.ini
|
|
@ -1,162 +0,0 @@
|
|||
[base]
|
||||
text = FFFFFF
|
||||
subtext = F0F0F0
|
||||
sidebar-text = FFFFFF
|
||||
main = 000000
|
||||
sidebar = 1ed760
|
||||
player = 000000
|
||||
card = 000000
|
||||
shadow = 202020
|
||||
selected-row = 797979
|
||||
button = 1ed760
|
||||
button-active = 1ed760
|
||||
button-disabled = 535353
|
||||
tab-active = 166632
|
||||
notification = 1db954
|
||||
notification-error = e22134
|
||||
misc = BFBFBF
|
||||
|
||||
|
||||
[white]
|
||||
text = 363636
|
||||
subtext = 3D3D3D
|
||||
sidebar-text = FFF9F4
|
||||
main = FFF9F4
|
||||
sidebar = FFA789
|
||||
player = FFF9F4
|
||||
card = FFF9F4
|
||||
shadow = d3d3d3
|
||||
selected-row = 6D6D6D
|
||||
button = ff8367
|
||||
button-active = ff8367
|
||||
button-disabled = 535353
|
||||
tab-active = ffdace
|
||||
notification = FFA789
|
||||
notification-error = e22134
|
||||
misc = BFBFBF
|
||||
|
||||
[dark]
|
||||
text = F0F0F0
|
||||
subtext = F0F0F0
|
||||
sidebar-text = 0a0e14
|
||||
main = 0a0e14
|
||||
sidebar = C2D935
|
||||
player = 0a0e14
|
||||
card = 0a0e14
|
||||
shadow = 202020
|
||||
selected-row = DEDEDE
|
||||
button = C2D935
|
||||
button-active = C2D935
|
||||
button-disabled = 535353
|
||||
tab-active = 727d2b
|
||||
notification = C2D935
|
||||
notification-error = e22134
|
||||
misc = BFBFBF
|
||||
|
||||
[dracula]
|
||||
text = f8f8f2
|
||||
subtext = f8f8f2
|
||||
sidebar-text = F0F0F0
|
||||
main = 44475a
|
||||
sidebar = 6272a4
|
||||
player = 44475a
|
||||
card = 6272a4
|
||||
shadow = 000000
|
||||
selected-row = bd93f9
|
||||
button = ffb86c
|
||||
button-active = 8be9fd
|
||||
button-disabled = 535353
|
||||
tab-active = 6272a4
|
||||
notification = bd93f9
|
||||
notification-error = e22134
|
||||
misc = BFBFBF
|
||||
|
||||
[nord-light]
|
||||
text = 2e3440
|
||||
subtext = 3b4252
|
||||
sidebar-text = ECEFF4
|
||||
main = ECEFF4
|
||||
sidebar = 5E81AC
|
||||
player = ECEFF4
|
||||
card = ebcb8b
|
||||
shadow = eceff4
|
||||
selected-row = 4c566a
|
||||
button = 81a1c1
|
||||
button-active = 81a1c1
|
||||
button-disabled = c0c0c0
|
||||
tab-active = ebcb8b
|
||||
notification = a3be8c
|
||||
notification-error = bf616a
|
||||
misc = BFBFBF
|
||||
|
||||
[nord-dark]
|
||||
text = ECEFF4
|
||||
subtext = E5E9F0
|
||||
sidebar-text = 434c5e
|
||||
main = 2e3440
|
||||
sidebar = 88C0D0
|
||||
player = 2e3440
|
||||
card = 2e3440
|
||||
shadow = 2E3440
|
||||
selected-row = D8DEE9
|
||||
button = 81A1C1
|
||||
button-active = 81A1C1
|
||||
button-disabled = 434C5E
|
||||
tab-active = 434C5E
|
||||
notification = A3BE8C
|
||||
notification-error = BF616A
|
||||
misc = BFBFBF
|
||||
|
||||
[purple]
|
||||
text = f1eaff
|
||||
subtext = f1eaff
|
||||
sidebar-text = e0d0ff
|
||||
main = 0A0E14
|
||||
sidebar = 6F3C89
|
||||
player = 0A0E14
|
||||
card = 0A0E14
|
||||
shadow = 3a2645
|
||||
selected-row = EBDFFF
|
||||
button = c76af6
|
||||
button-active = 6F3C89
|
||||
button-disabled = 535353
|
||||
tab-active = 58306D
|
||||
notification = ff9e00
|
||||
notification-error = f61379
|
||||
misc = DEDEDE
|
||||
|
||||
[samourai]
|
||||
text = ebdbb2
|
||||
subtext = ebdbb2
|
||||
sidebar-text = 461217
|
||||
main = 461217
|
||||
sidebar = ebdbb2
|
||||
player = 461217
|
||||
card = 461217
|
||||
shadow = 3a2645
|
||||
selected-row = 909090
|
||||
button = e7a52d
|
||||
button-active = e7a52d
|
||||
button-disabled = 535353
|
||||
tab-active = e7a52d
|
||||
notification = e7a52d
|
||||
notification-error = e22134
|
||||
misc = BFBFBF
|
||||
|
||||
[beach-sunset]
|
||||
text = FFFFFF
|
||||
subtext = F0F0F0
|
||||
sidebar-text = F0F0F0
|
||||
main = 262626
|
||||
sidebar = bd3e3e
|
||||
player = 262626
|
||||
card = 262626
|
||||
shadow = 000000
|
||||
selected-row = d1d6e2
|
||||
button = f1a84f
|
||||
button-active = c98430
|
||||
button-disabled = 535353
|
||||
tab-active = f1a84f
|
||||
notification = c98430
|
||||
notification-error = e22134
|
||||
misc = BFBFBF
|
||||
18
src/loaders/color-loader.js
Normal file
18
src/loaders/color-loader.js
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
const TRIM_REGEX = /colors: \((?<colors>.*?)\);/s;
|
||||
const COLOR_REGEX = /(?<key>[\w-]*?):.*?#(?<color>.*?),?$/gm;
|
||||
|
||||
module.exports = function (content, map, meta) {
|
||||
const colors = content
|
||||
.match(TRIM_REGEX)
|
||||
.groups.colors.split("\n")
|
||||
.map((l) => l.trim())
|
||||
.join("\n");
|
||||
const matches = [...colors.matchAll(COLOR_REGEX)];
|
||||
const ini = ["[base]"];
|
||||
for (let i = 0; i < matches.length; i++) {
|
||||
const { key, color } = matches[i].groups;
|
||||
ini.push(`${key} = ${color}`);
|
||||
}
|
||||
|
||||
return ini.join("\n");
|
||||
};
|
||||
33
src/styles/Colors.scss
Normal file
33
src/styles/Colors.scss
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
$colors: (
|
||||
text: #ffffff,
|
||||
subtext: #f0f0f0,
|
||||
sidebar-text: #ffffff,
|
||||
main: #000000,
|
||||
sidebar: #1ed760,
|
||||
player: #000000,
|
||||
card: #000000,
|
||||
shadow: #202020,
|
||||
selected-row: #797979,
|
||||
button: #1ed760,
|
||||
button-active: #1ed760,
|
||||
button-disabled: #535353,
|
||||
tab-active: #166632,
|
||||
notification: #1db954,
|
||||
notification-error: #e22134,
|
||||
misc: #bfbfbf
|
||||
);
|
||||
|
||||
:root {
|
||||
@each $key, $color in $colors {
|
||||
--spice-#{$key}: #{$color};
|
||||
--spice-rgb-#{$key}: #{red($color)}, #{green($color)}, #{blue($color)};
|
||||
}
|
||||
}
|
||||
|
||||
@function spiceColor($key, $alpha: 1) {
|
||||
@if $alpha == 1 {
|
||||
@return var(--spice-#{$key});
|
||||
} @else {
|
||||
@return rgba(var(--spice-rgb-#{$key}), $alpha);
|
||||
}
|
||||
}
|
||||
|
|
@ -5,7 +5,7 @@
|
|||
inset: 0px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--spice-text);
|
||||
color: spiceColor("text");
|
||||
|
||||
&[active] {
|
||||
display: flex;
|
||||
|
|
@ -15,7 +15,7 @@
|
|||
z-index: 1;
|
||||
position: relative;
|
||||
width: clamp(500px, 50%, 650px);
|
||||
background-color: rgba(var(--spice-rgb-main), 0.9);
|
||||
background-color: spiceColor("main", 0.9);
|
||||
backdrop-filter: blur(3px);
|
||||
padding: 20px 15px;
|
||||
border-radius: var(--main-corner-radius);
|
||||
|
|
@ -69,7 +69,7 @@
|
|||
position: absolute;
|
||||
margin-left: 10px;
|
||||
bottom: -2px;
|
||||
color: var(--spice-text);
|
||||
color: spiceColor("text");
|
||||
padding: 0px;
|
||||
height: 100%;
|
||||
stroke-width: 2px;
|
||||
|
|
@ -116,7 +116,7 @@
|
|||
.main-type-mesto {
|
||||
grid-area: description;
|
||||
height: min-content;
|
||||
color: var(--spice-subtext);
|
||||
color: spiceColor("subtext");
|
||||
}
|
||||
|
||||
.x-settings-secondColumn {
|
||||
|
|
|
|||
|
|
@ -1,26 +1,26 @@
|
|||
button.main-button-primary {
|
||||
background-color: rgba(var(--spice-rgb-selected-row), 0.4) !important;
|
||||
background-color: spiceColor("selected-row", 0.4) !important;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background-color: rgba(var(--spice-rgb-selected-row), 0.6) !important;
|
||||
background-color: spiceColor("selected-row", 0.6) !important;
|
||||
}
|
||||
|
||||
span {
|
||||
color: var(--spice-subtext) !important;
|
||||
color: spiceColor("subtext") !important;
|
||||
}
|
||||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
background-color: rgba(var(--spice-rgb-selected-row), 0.4) !important;
|
||||
background-color: spiceColor("selected-row", 0.4) !important;
|
||||
border-radius: 4px !important;
|
||||
padding: 6px 10px 6px 48px;
|
||||
color: var(--spice-text) !important;
|
||||
color: spiceColor("text") !important;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background-color: rgba(var(--spice-rgb-selected-row), 0.6) !important;
|
||||
background-color: spiceColor("selected-row", 0.6) !important;
|
||||
}
|
||||
|
||||
&[type="range"] {
|
||||
|
|
@ -34,7 +34,7 @@ textarea {
|
|||
height: 16px;
|
||||
margin-top: -4px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--spice-text);
|
||||
background-color: spiceColor("text");
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
|
|
@ -53,8 +53,8 @@ textarea {
|
|||
padding: 0 5px;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
color: var(--spice-sidebar-text);
|
||||
background-color: var(--spice-button);
|
||||
color: spiceColor("sidebar-text");
|
||||
background-color: spiceColor("button");
|
||||
transition: opacity 0.25s ease;
|
||||
opacity: 0;
|
||||
}
|
||||
|
|
@ -71,7 +71,7 @@ textarea {
|
|||
&::-webkit-slider-runnable-track {
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
background-color: rgba(var(--spice-rgb-text), 0.2);
|
||||
background-color: spiceColor("text", 0.2);
|
||||
border-radius: 50vw;
|
||||
}
|
||||
}
|
||||
|
|
@ -83,7 +83,7 @@ textarea {
|
|||
border: none;
|
||||
border-radius: 4px !important;
|
||||
padding: 0px 10px;
|
||||
color: var(--spice-subtext) !important;
|
||||
color: spiceColor("subtext") !important;
|
||||
}
|
||||
|
||||
&[type="time"] {
|
||||
|
|
@ -103,12 +103,12 @@ textarea {
|
|||
position: absolute;
|
||||
inset: -5px;
|
||||
border-radius: 4px;
|
||||
background-color: rgba(var(--spice-rgb-selected-row), 0.4);
|
||||
background-color: spiceColor("selected-row", 0.4);
|
||||
}
|
||||
|
||||
&:hover::before,
|
||||
&:active::before {
|
||||
background-color: rgba(var(--spice-rgb-selected-row), 0.6);
|
||||
background-color: spiceColor("selected-row", 0.6);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
@return #{"invert("}$v#{")"};
|
||||
}
|
||||
|
||||
@import "Colors";
|
||||
@import "Inputs";
|
||||
@import "ConfigMenu";
|
||||
@import "NoAds";
|
||||
|
|
@ -86,7 +87,7 @@ body {
|
|||
}
|
||||
|
||||
.os-scrollbar-handle {
|
||||
background-color: var(--spice-text) !important;
|
||||
background-color: spiceColor("text") !important;
|
||||
border-radius: calc(var(--scrollbar-vertical-size) / 2);
|
||||
}
|
||||
|
||||
|
|
@ -99,7 +100,7 @@ body {
|
|||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: var(--spice-text) !important;
|
||||
background-color: spiceColor("text") !important;
|
||||
border-radius: calc(var(--scrollbar-vertical-size) / 2);
|
||||
}
|
||||
|
||||
|
|
@ -131,7 +132,7 @@ body {
|
|||
|
||||
.x-searchInput-searchInputSearchIcon,
|
||||
.x-searchInput-searchInputClearButton {
|
||||
color: var(--spice-text) !important;
|
||||
color: spiceColor("text") !important;
|
||||
}
|
||||
|
||||
.main-home-homeHeader,
|
||||
|
|
@ -162,7 +163,7 @@ body {
|
|||
background-color: unset !important;
|
||||
}
|
||||
.main-topBar-overlay {
|
||||
background-color: var(--spice-main);
|
||||
background-color: spiceColor("main");
|
||||
}
|
||||
|
||||
.main-entityHeader-shadow,
|
||||
|
|
@ -177,19 +178,19 @@ body {
|
|||
}
|
||||
|
||||
.main-trackList-trackListRow:hover {
|
||||
background-color: rgba(var(--spice-rgb-selected-row), 0.2) !important;
|
||||
background-color: spiceColor("selected-row", 0.2) !important;
|
||||
}
|
||||
|
||||
.main-trackList-trackListRow:focus-within,
|
||||
[aria-selected="true"] > .main-trackList-trackListRow {
|
||||
background-color: rgba(var(--spice-rgb-selected-row), 0.4) !important;
|
||||
background-color: spiceColor("selected-row", 0.4) !important;
|
||||
}
|
||||
|
||||
span.artist-artistVerifiedBadge-badge svg > path:first-of-type {
|
||||
fill: var(--spice-button);
|
||||
fill: spiceColor("button");
|
||||
}
|
||||
span.artist-artistVerifiedBadge-badge svg > path:last-of-type {
|
||||
fill: var(--spice-text);
|
||||
fill: spiceColor("text");
|
||||
}
|
||||
|
||||
/* Full window artist background */
|
||||
|
|
@ -212,7 +213,7 @@ span.artist-artistVerifiedBadge-badge svg > path:last-of-type {
|
|||
}
|
||||
|
||||
.main-entityHeader-background.main-entityHeader-overlay:after {
|
||||
background-image: linear-gradient(transparent, transparent), linear-gradient(var(--spice-main), var(--spice-main));
|
||||
background-image: linear-gradient(transparent, transparent), linear-gradient(spiceColor("main"), spiceColor("main"));
|
||||
}
|
||||
|
||||
.artist-artistOverview-overview .main-entityHeader-withBackgroundImage h1 {
|
||||
|
|
@ -221,37 +222,37 @@ span.artist-artistVerifiedBadge-badge svg > path:last-of-type {
|
|||
}
|
||||
|
||||
.main-contextMenu-menu {
|
||||
background-color: var(--spice-button);
|
||||
background-color: spiceColor("button");
|
||||
}
|
||||
|
||||
.main-contextMenu-menuHeading,
|
||||
.main-contextMenu-menuItemButton,
|
||||
.main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):focus,
|
||||
.main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):hover {
|
||||
color: var(--spice-main);
|
||||
color: spiceColor("main");
|
||||
}
|
||||
|
||||
.main-playPauseButton-button {
|
||||
background-color: var(--spice-button);
|
||||
background-color: spiceColor("button");
|
||||
color: white;
|
||||
}
|
||||
|
||||
/** Queue page header */
|
||||
.queue-queue-title,
|
||||
.queue-playHistory-title {
|
||||
color: var(--spice-text) !important;
|
||||
color: spiceColor("text") !important;
|
||||
}
|
||||
|
||||
/** Artist page */
|
||||
.artist-artistOverview-heading {
|
||||
color: var(--spice-text) !important;
|
||||
color: spiceColor("text") !important;
|
||||
}
|
||||
.artist-artistAbout-content .artist-artistAbout-cityBlock div,
|
||||
.artist-artistAbout-content .artist-artistAbout-stats div {
|
||||
color: var(--spice-text) !important;
|
||||
color: spiceColor("text") !important;
|
||||
}
|
||||
.artist-artistAbout-content div {
|
||||
color: var(--spice-text) !important;
|
||||
color: spiceColor("text") !important;
|
||||
}
|
||||
|
||||
/** Cards */
|
||||
|
|
@ -287,7 +288,7 @@ span.artist-artistVerifiedBadge-badge svg > path:last-of-type {
|
|||
}
|
||||
|
||||
.Root__main-view {
|
||||
background-color: var(--spice-main);
|
||||
background-color: spiceColor("main");
|
||||
border-radius: var(--main-corner-radius) var(--main-corner-radius) 0 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
@ -300,14 +301,14 @@ span.artist-artistVerifiedBadge-badge svg > path:last-of-type {
|
|||
|
||||
.main-buddyFeed-headerTitle,
|
||||
.main-buddyFeed-activityMetadata .main-buddyFeed-username a {
|
||||
color: var(--spice-sidebar-text);
|
||||
color: spiceColor("sidebar-text");
|
||||
}
|
||||
|
||||
.main-buddyFeed-activityMetadata .main-buddyFeed-artistAndTrackName a,
|
||||
.main-buddyFeed-activityMetadata .main-buddyFeed-artistAndTrackName span,
|
||||
.main-buddyFeed-activityMetadata .main-buddyFeed-playbackContextLink,
|
||||
.main-buddyFeed-activityMetadata .main-buddyFeed-timestamp {
|
||||
color: rgba(var(--spice-rgb-sidebar-text), 0.8);
|
||||
color: spiceColor("sidebar-text", 0.8);
|
||||
}
|
||||
|
||||
.main-buddyFeed-buddyFeedRoot .main-avatar-avatar,
|
||||
|
|
@ -324,11 +325,11 @@ span.artist-artistVerifiedBadge-badge svg > path:last-of-type {
|
|||
|
||||
.view-homeShortcutsGrid-shortcut {
|
||||
overflow: hidden;
|
||||
background-color: rgba(var(--spice-rgb-selected-row), 0.4);
|
||||
background-color: spiceColor("selected-row", 0.4);
|
||||
}
|
||||
|
||||
.view-homeShortcutsGrid-shortcut:hover {
|
||||
background-color: rgba(var(--spice-rgb-selected-row), 0.6);
|
||||
background-color: spiceColor("selected-row", 0.6);
|
||||
}
|
||||
|
||||
.cover-art,
|
||||
|
|
@ -355,8 +356,8 @@ span.artist-artistVerifiedBadge-badge svg > path:last-of-type {
|
|||
}
|
||||
|
||||
.main-avatar-avatar.main-avatar-withBadge:after {
|
||||
box-shadow: 0 0 0 2px var(--spice-sidebar);
|
||||
background-color: var(--spice-notification);
|
||||
box-shadow: 0 0 0 2px spiceColor("sidebar");
|
||||
background-color: spiceColor("notification");
|
||||
right: 0;
|
||||
}
|
||||
|
||||
|
|
@ -367,25 +368,25 @@ span.artist-artistVerifiedBadge-badge svg > path:last-of-type {
|
|||
|
||||
.main-nowPlayingBar-container {
|
||||
border-radius: 0 0 var(--main-corner-radius) var(--main-corner-radius);
|
||||
background-color: var(--spice-main);
|
||||
background-color: spiceColor("main");
|
||||
border-top: 0;
|
||||
min-width: 518px;
|
||||
|
||||
&.with-shadow {
|
||||
background: radial-gradient(ellipse at right 50% bottom -80px, rgba(var(--spice-rgb-sidebar), 0.55), var(--spice-main) 60%);
|
||||
background: radial-gradient(ellipse at right 50% bottom -80px, spiceColor("sidebar", 0.55), spiceColor("main") 60%);
|
||||
}
|
||||
}
|
||||
|
||||
.main-buddyFeed-findFriendsButton {
|
||||
color: var(--spice-sidebar-text);
|
||||
color: spiceColor("sidebar-text");
|
||||
}
|
||||
|
||||
.main-connectBar-connectBar {
|
||||
border-radius: 0 0 var(--main-corner-radius) var(--main-corner-radius);
|
||||
border: 2px solid var(--spice-main);
|
||||
border: 2px solid spiceColor("main");
|
||||
border-top: 0;
|
||||
background-color: var(--spice-button) !important;
|
||||
color: var(--spice-text) !important;
|
||||
background-color: spiceColor("button") !important;
|
||||
color: spiceColor("text") !important;
|
||||
}
|
||||
|
||||
.Root__nav-bar {
|
||||
|
|
@ -405,7 +406,7 @@ span.artist-artistVerifiedBadge-badge svg > path:last-of-type {
|
|||
html,
|
||||
.Root__nav-bar,
|
||||
.main-buddyFeed-buddyFeed {
|
||||
background-color: var(--spice-sidebar) !important;
|
||||
background-color: spiceColor("sidebar") !important;
|
||||
}
|
||||
|
||||
html {
|
||||
|
|
@ -419,7 +420,7 @@ html {
|
|||
.main-rootlist-rootlistContent span,
|
||||
.main-navBar-entryPoints span {
|
||||
z-index: 1;
|
||||
color: var(--spice-sidebar-text);
|
||||
color: spiceColor("sidebar-text");
|
||||
}
|
||||
|
||||
.main-navBar-navBarItem svg {
|
||||
|
|
@ -455,8 +456,8 @@ html {
|
|||
width: 32px;
|
||||
height: 32px;
|
||||
margin: 0px;
|
||||
color: var(--spice-sidebar);
|
||||
background-color: rgba(var(--spice-rgb-main), 0.7);
|
||||
color: spiceColor("sidebar");
|
||||
background-color: spiceColor("main", 0.7);
|
||||
border-radius: var(--sidebar-icons-border-radius);
|
||||
}
|
||||
}
|
||||
|
|
@ -467,10 +468,10 @@ html {
|
|||
right: 12px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
color: var(--spice-sidebar-text) !important;
|
||||
background-color: var(--spice-button);
|
||||
color: spiceColor("sidebar-text") !important;
|
||||
background-color: spiceColor("button");
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 0 2px var(--spice-sidebar);
|
||||
box-shadow: 0 0 0 2px spiceColor("sidebar");
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
|
|
@ -524,13 +525,13 @@ html.sidebar-hide-text .GlueDropTarget span {
|
|||
.main-rootlist-rootlist::before {
|
||||
top: 0px;
|
||||
height: 5%;
|
||||
background: linear-gradient(to bottom, var(--spice-sidebar) 10%, transparent);
|
||||
background: linear-gradient(to bottom, spiceColor("sidebar") 10%, transparent);
|
||||
}
|
||||
|
||||
.main-rootlist-rootlist::after {
|
||||
bottom: 0px;
|
||||
height: 15%;
|
||||
background: linear-gradient(to top, var(--spice-sidebar) 10%, transparent);
|
||||
background: linear-gradient(to top, spiceColor("sidebar") 10%, transparent);
|
||||
}
|
||||
|
||||
.Root__nav-bar .os-scrollbar-vertical,
|
||||
|
|
@ -544,11 +545,11 @@ html.sidebar-hide-text .GlueDropTarget span {
|
|||
}
|
||||
|
||||
input:checked ~ .x-toggle-indicatorWrapper {
|
||||
background-color: rgba(var(--spice-rgb-button), 0.4);
|
||||
background-color: spiceColor("button", 0.4);
|
||||
}
|
||||
|
||||
input:hover:checked ~ .x-toggle-indicatorWrapper {
|
||||
background-color: rgba(var(--spice-rgb-button), 0.5) !important;
|
||||
background-color: spiceColor("button", 0.5) !important;
|
||||
}
|
||||
|
||||
input:hover:not([disabled]):not(:active) ~ .x-toggle-indicatorWrapper {
|
||||
|
|
@ -564,8 +565,8 @@ input:hover:not([disabled]):not(:active) ~ .x-toggle-indicatorWrapper {
|
|||
}
|
||||
|
||||
.main-topBar-historyButtons svg {
|
||||
color: var(--spice-button);
|
||||
fill: var(--spice-button);
|
||||
color: spiceColor("button");
|
||||
fill: spiceColor("button");
|
||||
}
|
||||
|
||||
.playback-bar__progress-time,
|
||||
|
|
@ -597,8 +598,8 @@ input:hover:not([disabled]):not(:active) ~ .x-toggle-indicatorWrapper {
|
|||
|
||||
.progress-bar {
|
||||
--progress-bar-height: 2px;
|
||||
--fg-color: var(--spice-button);
|
||||
--bg-color: rgba(var(--spice-rgb-text), 0.2);
|
||||
--fg-color: #{spiceColor("button")};
|
||||
--bg-color: #{spiceColor("text", 0.2)};
|
||||
}
|
||||
|
||||
.progress-bar__slider {
|
||||
|
|
@ -629,8 +630,8 @@ input:hover:not([disabled]):not(:active) ~ .x-toggle-indicatorWrapper {
|
|||
padding: 0 5px;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
color: var(--spice-text);
|
||||
background-color: var(--spice-button);
|
||||
color: spiceColor("text");
|
||||
background-color: spiceColor("button");
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
|
@ -681,12 +682,12 @@ input:hover:not([disabled]):not(:active) ~ .x-toggle-indicatorWrapper {
|
|||
}
|
||||
|
||||
.main-trackInfo-release a {
|
||||
color: var(--spice-subtext);
|
||||
color: spiceColor("subtext");
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
color: var(--spice-text);
|
||||
color: spiceColor("text");
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -700,7 +701,7 @@ input:hover:not([disabled]):not(:active) ~ .x-toggle-indicatorWrapper {
|
|||
|
||||
.main-entityHeader-metaDataText,
|
||||
.main-duration-container {
|
||||
color: var(--spice-subtext);
|
||||
color: spiceColor("subtext");
|
||||
}
|
||||
|
||||
/** Sidebar */
|
||||
|
|
@ -745,7 +746,7 @@ html.sidebar-hide-text .main-rootlist-rootlistItem {
|
|||
}
|
||||
|
||||
.main-rootlist-dropIndicator {
|
||||
background: var(--spice-selected-row);
|
||||
background: spiceColor("selected-row");
|
||||
height: 2px;
|
||||
}
|
||||
|
||||
|
|
@ -843,7 +844,7 @@ li.GlueDropTarget {
|
|||
}
|
||||
|
||||
#dribbblish-update {
|
||||
color: var(--spice-button-active);
|
||||
color: spiceColor("button-active");
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
|
@ -877,7 +878,7 @@ li.GlueDropTarget {
|
|||
|
||||
& span {
|
||||
display: block !important;
|
||||
color: var(--spice-subtext);
|
||||
color: spiceColor("subtext");
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -886,10 +887,10 @@ li.GlueDropTarget {
|
|||
|
||||
// Workaround for #73 (https://github.com/JulienMaille/dribbblish-dynamic-theme/issues/73)
|
||||
& button {
|
||||
color: var(--spice-subtext);
|
||||
color: spiceColor("subtext");
|
||||
|
||||
&:hover {
|
||||
color: var(--spice-text);
|
||||
color: spiceColor("text");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -906,7 +907,7 @@ li.GlueDropTarget {
|
|||
.main-playPauseButton-button svg {
|
||||
width: 32px !important;
|
||||
height: 32px !important;
|
||||
color: var(--spice-button);
|
||||
color: spiceColor("button");
|
||||
}
|
||||
|
||||
/* Spotify style player bar */
|
||||
|
|
@ -972,12 +973,12 @@ li.GlueDropTarget {
|
|||
.main-likedSongsButton-likedSongsIcon svg,
|
||||
.main-yourEpisodesButton-yourEpisodesIcon svg,
|
||||
.main-createPlaylistButton-createPlaylistIcon svg {
|
||||
fill: var(--spice-sidebar-text);
|
||||
fill: spiceColor("sidebar-text");
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
.main-yourEpisodesButton-yourEpisodesIcon svg path {
|
||||
fill: var(--spice-sidebar-text);
|
||||
fill: spiceColor("sidebar-text");
|
||||
}
|
||||
|
||||
/** Grid */
|
||||
|
|
@ -1000,7 +1001,7 @@ span.main-userWidget-displayName,
|
|||
|
||||
/** Sidebar config */
|
||||
#dribs-hidden-list {
|
||||
background-color: rgba(var(--spice-rgb-main), 0.3);
|
||||
background-color: spiceColor("main", 0.3);
|
||||
}
|
||||
|
||||
#dribs-sidebar-config {
|
||||
|
|
@ -1017,12 +1018,12 @@ span.main-userWidget-displayName,
|
|||
#dribs-sidebar-config button {
|
||||
min-width: 60px;
|
||||
border-radius: 3px;
|
||||
background-color: var(--spice-main);
|
||||
color: var(--spice-text);
|
||||
border: 1px solid var(--spice-text);
|
||||
background-color: spiceColor("main");
|
||||
color: spiceColor("text");
|
||||
border: 1px solid spiceColor("text");
|
||||
}
|
||||
#dribs-sidebar-config button:disabled {
|
||||
color: var(--spice-button-disabled);
|
||||
color: spiceColor("button-disabled");
|
||||
}
|
||||
|
||||
.main-navBar-entryPoints {
|
||||
|
|
@ -1107,7 +1108,7 @@ span.main-userWidget-displayName,
|
|||
|
||||
.main-navBar-navBar a:hover,
|
||||
.main-navBar-navBar a:hover span {
|
||||
color: var(--spice-sidebar-text) !important;
|
||||
color: spiceColor("sidebar-text") !important;
|
||||
}
|
||||
|
||||
div.GlueDropTarget.personal-library {
|
||||
|
|
@ -1171,7 +1172,7 @@ html.right-expanded-cover.buddyfeed-visible .main-coverSlotExpanded-container {
|
|||
|
||||
/** Mini dribbblish */
|
||||
.x-categoryCard-CategoryCard > div {
|
||||
background-color: var(--spice-main);
|
||||
background-color: spiceColor("main");
|
||||
width: calc(100% - 14px);
|
||||
height: calc(100% - 6px);
|
||||
margin: 3px 10px;
|
||||
|
|
@ -1188,7 +1189,7 @@ html.right-expanded-cover.buddyfeed-visible .main-coverSlotExpanded-container {
|
|||
}
|
||||
|
||||
.x-heroCategoryCard-HeroCategoryCard > div {
|
||||
background-color: var(--spice-main);
|
||||
background-color: spiceColor("main");
|
||||
width: calc(100% - 20px);
|
||||
height: calc(100% - 6px);
|
||||
margin: 3px 16px;
|
||||
|
|
@ -1197,22 +1198,22 @@ html.right-expanded-cover.buddyfeed-visible .main-coverSlotExpanded-container {
|
|||
|
||||
.main-dropDown-dropDown,
|
||||
.x-sortBox-sortDropdown {
|
||||
background-color: rgba(var(--spice-rgb-selected-row), 0.4) !important;
|
||||
color: var(--spice-subtext);
|
||||
background-color: spiceColor("selected-row", 0.4) !important;
|
||||
color: spiceColor("subtext");
|
||||
}
|
||||
|
||||
.main-dropDown-dropDown:hover,
|
||||
.x-sortBox-sortDropdown:hover {
|
||||
background-color: rgba(var(--spice-rgb-selected-row), 0.6) !important;
|
||||
background-color: spiceColor("selected-row", 0.6) !important;
|
||||
}
|
||||
|
||||
.connect-device-list-item:focus,
|
||||
.connect-device-list-item:hover {
|
||||
background-color: rgba(var(--spice-rgb-selected-row), 0.3);
|
||||
background-color: spiceColor("selected-row", 0.3);
|
||||
}
|
||||
|
||||
.bookmark-filter {
|
||||
color: var(--spice-main) !important;
|
||||
color: spiceColor(main) !important;
|
||||
}
|
||||
|
||||
/* 1.1.56 */
|
||||
|
|
@ -1233,13 +1234,13 @@ html.right-expanded-cover.buddyfeed-visible .main-coverSlotExpanded-container {
|
|||
}
|
||||
|
||||
.main-userWidget-dropDownMenu > li > button {
|
||||
color: rgba(var(--spice-rgb-selected-row), 0.7);
|
||||
color: spiceColor("selected-row", 0.7);
|
||||
padding-left: 8px;
|
||||
text-decoration: none;
|
||||
}
|
||||
.main-userWidget-dropDownMenu > li > button:hover,
|
||||
.main-userWidget-dropDownMenu > li > button:focus {
|
||||
color: var(--spice-text);
|
||||
color: spiceColor("text");
|
||||
}
|
||||
|
||||
.main-userWidget-dropDownMenu svg {
|
||||
|
|
@ -1253,30 +1254,30 @@ html.right-expanded-cover.buddyfeed-visible .main-coverSlotExpanded-container {
|
|||
}
|
||||
|
||||
.main-actionBar-ActionBarRow button:not(.main-playButton-primary) {
|
||||
color: var(--spice-subtext);
|
||||
color: spiceColor("subtext");
|
||||
}
|
||||
|
||||
/* explicit icon */
|
||||
.main-tag-container {
|
||||
background-color: var(--spice-text);
|
||||
background-color: spiceColor("text");
|
||||
}
|
||||
/* progressbar tooltip text color */
|
||||
.playback-bar .prog-tooltip {
|
||||
color: var(--spice-sidebar-text) !important;
|
||||
color: spiceColor("sidebar-text") !important;
|
||||
}
|
||||
|
||||
/* edit button of CustomApps */
|
||||
.reddit-sort-container button.switch,
|
||||
.new-releases-header button.switch,
|
||||
.lyrics-tabBar-header button.switch {
|
||||
background-color: rgba(var(--spice-rgb-subtext), 0.15) !important;
|
||||
color: var(--spice-text);
|
||||
background-color: spiceColor("subtext", 0.15) !important;
|
||||
color: spiceColor("text");
|
||||
}
|
||||
|
||||
.reddit-sort-container button.switch:hover,
|
||||
.new-releases-header button.switch:hover,
|
||||
.lyrics-tabBar-header button.switch:hover {
|
||||
background-color: rgba(var(--spice-rgb-subtext), 0.3) !important;
|
||||
background-color: spiceColor("subtext", 0.3) !important;
|
||||
}
|
||||
|
||||
.lyrics-lyricsContainer-LyricsBackground {
|
||||
|
|
@ -1301,7 +1302,7 @@ html.right-expanded-cover.buddyfeed-visible .main-coverSlotExpanded-container {
|
|||
.main-contextMenu-menuItemButton,
|
||||
.main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):focus,
|
||||
.main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):hover {
|
||||
color: var(--spice-sidebar-text) !important;
|
||||
color: spiceColor("sidebar-text") !important;
|
||||
}
|
||||
|
||||
/* translucent background cover */
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ const path = require("path");
|
|||
|
||||
/** @type {import('webpack').Configuration} */
|
||||
module.exports = {
|
||||
entry: [path.resolve(__dirname, "./src/js/main.js"), path.resolve(__dirname, "./src/styles/main.scss")],
|
||||
entry: [path.resolve(__dirname, "./src/js/main.js"), path.resolve(__dirname, "./src/styles/main.scss"), path.resolve(__dirname, "./src/styles/Colors.scss")],
|
||||
output: {
|
||||
path: path.resolve(__dirname, "dist"),
|
||||
filename: "dribbblish-dynamic.js"
|
||||
|
|
@ -14,12 +14,12 @@ module.exports = {
|
|||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.js$/,
|
||||
test: /main\.js$/,
|
||||
exclude: /node_modules/,
|
||||
use: []
|
||||
},
|
||||
{
|
||||
test: /\.scss$/,
|
||||
test: /main\.scss$/,
|
||||
exclude: /node_modules/,
|
||||
type: "asset/resource",
|
||||
generator: {
|
||||
|
|
@ -33,6 +33,15 @@ module.exports = {
|
|||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
test: /Colors\.scss$/,
|
||||
exclude: /node_modules/,
|
||||
type: "asset/resource",
|
||||
generator: {
|
||||
filename: "color.ini"
|
||||
},
|
||||
use: [path.resolve(__dirname, "./src/loaders/color-loader.js")]
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -46,7 +55,7 @@ module.exports = {
|
|||
"process.env.DRIBBBLISH_VERSION": JSON.stringify(process.env.DRIBBBLISH_VERSION || "Dev")
|
||||
}),
|
||||
new CopyPlugin({
|
||||
patterns: [{ from: "src/assets", to: "assets" }, { from: "src/color.ini" }]
|
||||
patterns: [{ from: "src/assets", to: "assets" }]
|
||||
})
|
||||
],
|
||||
optimization: {
|
||||
|
|
|
|||
Loading…
Reference in a new issue