Flexoki-Spotify/user.css at main · wlygon7/Flexoki-Spotify · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
/* === FLEXOKI SPICETIFY THEME === */

/* Force variables AFTER Spotify's own :root block */
html, html body, html body .Root {
    --spice-button: #D14D41;
    --spice-button-active: #D14D41;
    --essential-positive: #D14D41;
    --text-positive: #D14D41;
    --essential-bright-accent: #D14D41;
    --text-bright-accent: #D14D41;
}

.encore-dark-theme,
.encore-dark-theme .encore-base-set {
    --background-press: #1C1B1A !important;
    --background-highlight: #D14D41 !important;
    --text-positive: #D14D41 !important;
    --essential-positive: #D14D41 !important;
    --essential-bright-accent: #D14D41 !important;
    --text-bright-accent: #D14D41 !important;
}

/* Nuclear green kill — I'm so done with this crap */
svg[style*="color: var(--positive)"],
svg[style*="fill: #1db954"],
svg[style*="fill: #1ed760"],
[style*="color: #1db954"],
[style*="color: #1ed760"],
[style*="fill: #1db954"],
[style*="fill: #1ed760"] {
    filter: invert(41%) sepia(53%) saturate(1081%) hue-rotate(323deg) brightness(85%) contrast(91%) !important;
    color: #D14D41 !important;
    fill: #D14D41 !important;
}

/* Kill the green accent set */
.encore-dark-theme .encore-bright-accent-set {
    --background-highlight: #D14D41;
    --background-press: #C44336;
}

/* Selected/playing row */
.main-trackList-trackListRow.MxoETbR0GSKhCd1hp6Np,
.main-trackList-trackListRow.MxoETbR0GSKhCd1hp6Np:hover {
    background-color: #C44336;
}

/* Active/selected state color for text */
.encore-dark-theme {
    --text-bright-accent: #D14D41;
}

/* Primary action buttons (the big play button circle thingy :p) */
.ButtonInner-large-iconOnly {
    background-color: #D14D41;
    color: white;
}

.ButtonInner-medium-iconOnly {
    background-color: #D14D41;
}

/* e-9890 button system (newer Spotify UI?) */
.e-9890-button-primary__inner,
.e-91000-button-primary__inner {
    background-color: #D14D41;
}

/* Playing icon — force to Flexoki warm white, not green :) */
.main-trackList-playingIcon {
    filter: grayscale(100%) brightness(200%);
}

/* Tracklist active text stays white (hopefully) */
.main-trackList-trackListRow.main-trackList-active .main-trackList-rowTitle {
    color: white;
}

.main-trackList-trackListRow.main-trackList-active .main-trackList-rowMarker {
    color: rgba(253, 253, 253, 0.4);
}

/* Play button on cards (hover) */
.main-playButton-PlayButton svg,
.main-playButton-PlayButton button svg,

/* Now playing bar — big play/pause circle */
/* .ButtonInner-large-iconOnly svg, */

/* Force play/pause icon to white inside the big red circle */
.ButtonInner-large-iconOnly svg {
    filter: brightness(0) invert(1) !important;
    color: white !important;
    fill: white !important;
}

/* Track list playing indicator (animated bars) */
.main-trackList-playingIcon svg,

/* Playback controls */
[data-testid="control-button-playpause"] svg,

/* Card play buttons */
[data-testid="play-button"] svg,
.main-card-PlayButtonContainer svg {
    filter: invert(41%) sepia(53%) saturate(1081%) hue-rotate(323deg) brightness(85%) contrast(91%) !important;
}