fix(Sleek): update theme (#707)

* fix(Sleek): color changes

* fix(Sleek): update css

* Sleek: update images

* fix(Sleek): highlight cur track

Sleek/color.ini

@@ -2,20 +2,20 @@
 ; Green on dark grey background
 text               = 8bc34a
 subtext            = b4b4b4
-button-text        = 202020
+nav-active-text    = 202020
 main               = 202020
 sidebar            = 202020
 player             = 242424
 card               = 242424
 shadow             = 000000
-selected-row       = 2a3c17
-sub-button         = 6a913d
+main-secondary     = 171717
 button             = 8bc34a
+button-secondary   = 6a913d
 button-active      = 98da4b
 button-disabled    = 353535
-sidebar-button     = 8bc34a
+nav-active         = 8bc34a
 play-button        = 8bc34a
-tab-active         = 303030
+tab-active         = 171717
 notification       = 242424
 notification-error = 242424
 playback-bar       = 8bc34a
@@ -25,20 +25,20 @@ misc               = FFFFFF
 ; Pink on dark blue background
 text               = d98ba1
 subtext            = d7d7d7
-button-text        = D8DEE9
+nav-active-text    = 131c26
 main               = 131c26
 sidebar            = 131c26
 player             = 131c26
-card               = 131c26
+card               = 131c26z
 shadow             = 0e0e13
-selected-row       = 0f1720
-sub-button         = d98ba1
+main-secondary     = 09111b
 button             = d98ba1
+button-secondary   = d98ba1
 button-active      = ff84ac
 button-disabled    = 192531
-sidebar-button     = ff84ac
+nav-active         = ff84ac
 play-button        = d98ba1
-tab-active         = 192531
+tab-active         = 09111b
 notification       = 192531
 notification-error = 192531
 playback-bar       = d98ba1
@@ -48,20 +48,20 @@ misc               = FFFFFF
 ; Salmon on dark blue background
 text               = f88379
 subtext            = d7d7d7
-button-text        = 131c26
+nav-active-text    = 131c26
 main               = 131c26
 sidebar            = 131c26
 player             = 131c26
 card               = 131c26
 shadow             = 0e0e13
-selected-row       = 0f1720
-sub-button         = f88379
+main-secondary     = 09111b
 button             = f88379
+button-secondary   = f88379
 button-active      = fb958b
 button-disabled    = 192531
-sidebar-button     = fb958b
+nav-active         = fb958b
 play-button        = f88379
-tab-active         = 192531
+tab-active         = 09111b
 notification       = 192531
 notification-error = 192531
 playback-bar       = f88379
@@ -71,91 +71,91 @@ misc               = FFFFFF
 ; White on dark blue background
 text               = ffffff
 subtext            = ffffff
-button-text        = ffffff
+nav-active-text    = ffffff
 main               = 020816
 sidebar            = 051024
 player             = 030b1e
 card               = 0a1527
 shadow             = 000000
-selected-row       = 09162e
-sub-button         = ffffff
+main-secondary     = 06142d
 button             = 1464b5
+button-secondary   = ffffff
 button-active      = 4a99e9
 button-disabled    = 21282f
-sidebar-button     = 37b778
+nav-active         = 37b778
 play-button        = 37b778
 tab-active         = 0a1527
 notification       = 051024
 notification-error = 051024
 playback-bar       = 37b778
-misc               = BFBFBF
+misc               = FFFFFF
 
 [Deeper]
 ; Light blue on dark background
 text               = 4f9a87
 subtext            = 4f9a87
-button-text        = 4f9a87
+nav-active-text    = 4f9a87
 main               = 040614
 sidebar            = 0F111A
 player             = 0F111A
 card               = 0C1C19
 shadow             = 000000
-selected-row       = 040614
-sub-button         = 4f9a87
+main-secondary     = 131520
 button             = 4f9a87
+button-secondary   = 4f9a87
 button-active      = 4a99e9
 button-disabled    = 0C1C19
-sidebar-button     = 040614
+nav-active         = 040614
 play-button        = 4f9a87
 tab-active         = 0a1527
 notification       = 051024
 notification-error = 051024
 playback-bar       = 4f9a87
-misc               = 0C1C19
+misc               = FFFFFF
 
 [Psycho]
 ; Red on dark grey background
-text               = e00000
+text               = c20000
 subtext            = ffffff
-button-text        = ffffff
+nav-active-text    = 101010
 main               = 101010
 sidebar            = 171717
 player             = 171717
 card               = 171717
 shadow             = 000000
-selected-row       = 330d0d
-sub-button         = a20606
-button             = e00000
-button-active      = e00000
+main-secondary     = 1f1f1f
+button             = c20000
+button-secondary   = a20606
+button-active      = c20000
 button-disabled    = 404040
-sidebar-button     = e00000
-play-button        = e00000
+nav-active         = 9f0909
+play-button        = c20000
 tab-active         = 171717
 notification       = 5e0000
 notification-error = 5e0000
-playback-bar       = e00000
-misc               = adadad
+playback-bar       = c20000
+misc               = FFFFFF
 
 [UltraBlack]
 ; White on black background
 text               = FFFFFF
 subtext            = DEDEDE
-button-text        = 000000
+nav-active-text    = 000000
 main               = 000000
 sidebar            = 000000
 player             = 000000
 card               = 000000
 shadow             = 000000
-selected-row       = 111111
-sub-button         = DEDEDE
+main-secondary     = 292929
 button             = 1DB954
+button-secondary   = DEDEDE
 button-active      = 1DB954
 button-disabled    = 2f2f2f
-sidebar-button     = DEDEDE
+nav-active         = DEDEDE
 play-button        = DEDEDE
-tab-active         = 111111
-notification       = 111111
-notification-error = 111111
+tab-active         = 292929
+notification       = 292929
+notification-error = 292929
 playback-bar       = DEDEDE
 misc               = FFFFFF
 
@@ -163,18 +163,18 @@ misc               = FFFFFF
 ; Light grey on blue background
 text               = D8DEE9
 subtext            = E5E9F0
-button-text        = D8DEE9
+nav-active-text    = D8DEE9
 main               = 2E3440
 sidebar            = 2E3440
 player             = 2E3440
 card               = 2E3440
 shadow             = 1d2128
-selected-row       = 434c5e
-sub-button         = D8DEE9
+main-secondary     = 434c5e
 button             = 5E81AC
+button-secondary   = D8DEE9
 button-active      = 81A1C1
 button-disabled    = 434C5E
-sidebar-button     = 4c566a
+nav-active         = 4c566a
 play-button        = 5E81AC
 tab-active         = 3b4252
 notification       = 3b4252
@@ -184,45 +184,45 @@ misc               = FFFFFF
 
 [Futura]
 ; Cyan on dark background
-text               = 00FF9C
+text               = 34ad7e
 subtext            = DEDEDE
-button-text        = 2E2837
+nav-active-text    = 2E2837
 main               = 2E2837
 sidebar            = 2E2837
 player             = 2E2837
 card               = 2E2837
 shadow             = 000000
-selected-row       = 584e64
-sub-button         = 00FF9C
-button             = 00FF9C
+main-secondary     = 51485b
+button             = 34ad7e
+button-secondary   = 34ad7e
 button-active      = 00bf76
 button-disabled    = 3f3c45
-sidebar-button     = 00FF9C
-play-button        = 00FF9C
-tab-active         = 383145
-notification       = 383145
-notification-error = 383145
-playback-bar       = 00FF9C
+nav-active         = 34ad7e
+play-button        = 34ad7e
+tab-active         = 51485b
+notification       = 51485b
+notification-error = 51485b
+playback-bar       = 34ad7e
 misc               = FFFFFF
 
 [Elementary]
 ; Purple and pink on dark background
 text               = c59dff
 subtext            = dedede
-button-text        = 1d1821
+nav-active-text    = 1d1821
 main               = 1f1f29
 sidebar            = 1d1821
 player             = 1d1821
 card               = 2E2837
 shadow             = 000000
-selected-row       = 1d1821
-sub-button         = c59dff
+main-secondary     = 1d1821
 button             = d4516f
+button-secondary   = c59dff
 button-active      = f16d8c
 button-disabled    = 2E303E
-sidebar-button     = d4516f
+nav-active         = d4516f
 play-button        = d4516f
-tab-active         = 2E2837
+tab-active         = 1d1821
 notification       = 2E2837
 notification-error = 2E2837
 playback-bar       = c59dff
@@ -232,18 +232,18 @@ misc               = FFFFFF
 ; Yellow, pink and blue on dark background
 text               = dcd88c
 subtext            = 9fbfb7
-button-text        = 1d1821
+nav-active-text    = 1d1821
 main               = 181b1e
 sidebar            = 181b1e
 player             = 181b1e
 card               = 17191d
 shadow             = 000000
-selected-row       = 131417
-sub-button         = dcd88c
+main-secondary     = 0b0d0e
 button             = f6867c
+button-secondary   = dcd88c
 button-active      = f6867c
 button-disabled    = 242a2e
-sidebar-button     = f6867c
+nav-active         = f6867c
 play-button        = f6867c
 tab-active         = 131417
 notification       = 131417
@@ -255,44 +255,43 @@ misc               = FFFFFF
 ; https://draculatheme.com/contribute
 text               = 50fa7b
 subtext            = bd93f9
-button-text        = 282a36
+nav-active-text    = 282a36
 main               = 282a36
 sidebar            = 282a36
 player             = 282a36
 card               = 282a36
 shadow             = 000000
-selected-row       = 282a36
-sub-button         = ff79c6
+main-secondary     = 1c1e26
 button             = 50fa7b
+button-secondary   = ff79c6
 button-active      = 00bf76
 button-disabled    = 3f3c45
-sidebar-button     = 50fa7b
+nav-active         = 50fa7b
 play-button        = 50fa7b
-tab-active         = 383145
-notification       = 383145
-notification-error = 383145
+tab-active         = 1c1e26
+notification       = 1c1e26
+notification-error = 1c1e26
 playback-bar       = 50fa7b
-misc               = f8f8f2
+misc               = FFFFFF
 
 ; Description
 
-; text = main text, playlist names in main field, name of playlist selected in sidebar, headings
-; subtext = text in main buttons in sidebar, playlist names in sidebar, artist names, and mini infos
-; button-text = text in main buttons in sidebar when active
-; main = main field or main bg
-; sidebar = sidebar bg
-; player = player bg
-; card = card bg
-; shadow = bg of buttons like account, pop-up lyrics, full app display in main field
-; selected-row = bg color of the song selected
-; sub-button = download and options button
-; button = playlist buttons bg in sidebar, drop-down menus, now playing song, like button
-; button-active = hover on song selected
-; button-disabled = seekbar bg, volume bar bg, scrollbar
-; sidebar-button = sidebar buttons bg
-; play-button = color of main play button in main field
-; tab-active = button bg in main field (playlists, podcasts, artists, albums)
-; notification = notification ('Added to liked songs' etc.)
-; notification-error = error
-; playback-bar = seekbar fg, main play/pause button bg
-; misc = miscellaneous
+; text             = main text, playlist names in main field, name of playlist selected in sidebar, headings
+; subtext          = text in main buttons in sidebar, playlist names in sidebar, artist names, and mini infos
+; nav-active-text  = text in main buttons in sidebar when active
+; main             = main bg
+; main-secondary   = bg color of selected song rows, bg color of artist/track cards
+; sidebar          = sidebar bg
+; player           = player bg
+; card             = popup-card bg
+; shadow           = all shadows
+; button           = playlist buttons bg in sidebar, drop-down menus, now playing song, like button
+; button-secondary = download and options button
+; button-active    = hover on song selected
+; button-disabled  = seekbar bg, volume bar bg, scrollbar
+; nav-active       = sidebar buttons bg
+; play-button      = color of main play button in main field
+; tab-active       = button bg in main field (playlists, podcasts, artists, albums)
+; notification     = notification ('Added to liked songs' etc.)
+; playback-bar     = seekbar fg, volume bar fg, main play/pause button
+; misc             = miscellaneous

Sleek/user.css

@@ -1,5 +1,10 @@
 /* Version 14/10/21 */
 
+.encore-dark-theme .encore-bright-accent-set {
+  --background-highlight: var(--spice-play-button);
+  --background-press: var(--spice-play-button);
+  --background-base: var(--spice-play-button);
+}
 
 /* TOPBAR */
 
@@ -18,8 +23,11 @@
   color: var(--spice-text);
   height: 17px !important;
   stroke: var(--spice-text);
-  stroke-width: 1px;
-  float: right;
+}
+
+/* change appearance of x icon on 'search' tab */
+.x-searchInput-searchInputClearButton {
+  color: var(--spice-text);
 }
 
 [role='searchbox']::placeholder {
@@ -129,13 +137,14 @@ ul.main-navBar-entryPoints > div.GlueDropTarget >*.active {
 }
 /* change colors of active tab */
 .main-navBar-navBarLinkActive {
-  background-color: var(--spice-sidebar-button);
+  background-color: var(--spice-nav-active);
 }
 
 .main-navBar-navBarLinkActive,
 .main-navBar-navBarLinkActive:focus,
 .main-navBar-navBarLinkActive:hover {
-  color: var(--spice-button-text) !important;
+  color: var(--spice-nav-active-text) !important;
+  transition: none;
 }
 
 
@@ -146,6 +155,10 @@ ul.main-navBar-entryPoints > div.GlueDropTarget >*.active {
   bottom: 107px;
 }
 
+/* revert playback bar position when in full-screen mode */
+._U2P19b627vsKWCNNffn .playback-bar {
+  bottom: auto;
+}
 
 /* round cover art when collapsed */
 .main-coverSlotCollapsed-container .cover-art-image {
@@ -159,7 +172,7 @@ ul.main-navBar-entryPoints > div.GlueDropTarget >*.active {
 }
 
 /* hide and move progress time location */
-.playback-bar__progress-time-elapsed.main-type-finale {
+.playback-bar__progress-time-elapsed {
   opacity: 0;
   position: absolute;
   bottom: 13px;
@@ -176,7 +189,7 @@ ul.main-navBar-entryPoints > div.GlueDropTarget >*.active {
 }
 
 /* show time on hover */
-.playback-bar:hover .playback-bar__progress-time-elapsed.main-type-finale,
+.playback-bar:hover .playback-bar__progress-time-elapsed,
 .playback-bar:hover .main-playbackBarRemainingTime-container {
   opacity: 1;
 }
@@ -189,7 +202,7 @@ ul.main-navBar-entryPoints > div.GlueDropTarget >*.active {
 }
 
 .player-controls__buttons {
-  transform: translateY(6px);
+  transform: translateY(3px);
   align-items: center;
 }
 
@@ -200,14 +213,14 @@ ul.main-navBar-entryPoints > div.GlueDropTarget >*.active {
 
 /* change appearance of play-button */
 .main-playPauseButton-button {
-  background-color: var(--spice-player);
+  background-color: inherit;
   color: var(--spice-text);
   transition-duration: 0.15s !important;
 }
 
 .main-playPauseButton-button svg {
-  height: 21px;
-  width: 21px;
+  height: 19px;
+  width: 19px;
 }
 
 .main-playPauseButton-button:focus, .main-playPauseButton-button:hover {
@@ -253,6 +266,10 @@ p.main-buddyFeed-timestamp.main-type-finale,
   display: none;
 }
 
+.WiPggcPDzbwGxoxwLWFf.contentSpacing {
+  display: none;
+}
+
 .desktoproutes-homepage-takeover-ad-hptoComponent-parentContainer,
 .desktoproutes-homepage-takeover-ad-hptoComponent-container {
   display: none !important;
@@ -263,27 +280,12 @@ p.main-buddyFeed-timestamp.main-type-finale,
   display: none;
 }
 
- /* remove vector (circle) from input bar to allow padding to be reduced */
- .x-searchInput-searchInputIcon {
-   visibility: hidden;
- } 
-
-/* remove vector (circle) from "search in playlist" to allow padding to be reduced */
- .x-filterBox-searchIconContainer {
-   visibility: hidden;
- }
-
-/* remove vector (circle) from "created playlist(s)" to allow padding to be reduced */
- .playlist-inlineSearchBox-searchIconContainer {
-   visibility: hidden;
- }
-
 /* change input box appearance */
 input {
-  background-color: unset !important;
+  background-color: var(--spice-main-secondary) !important;
   border-bottom: solid 1px var(--spice-text) !important;
   border-radius: 0 !important;
-  padding: 6px 10px !important;
+  padding: 6px 10px 6px 48px;
   color: var(--spice-text) !important;
 }
 
@@ -369,11 +371,11 @@ a.x-heroCategoryCard-HeroCategoryCard {
 
 /* recolor sub-buttons */
 .main-moreButton-button {
-  color: var(--spice-sub-button);
+  color: var(--spice-button-secondary);
 }
 
 .x-downloadButton-button {
-  color: var(--spice-sub-button) !important;
+  color: var(--spice-button-secondary) !important;
 }
 
 .x-downloadButton-button:hover {
@@ -381,24 +383,24 @@ a.x-heroCategoryCard-HeroCategoryCard {
 }
 
 .main-addButton-button {
-  color: var(--spice-sub-button);
+  color: var(--spice-button-secondary);
 }
 
 .main-entityHeader-metaDataText {
-  color: var(--spice-sub-button);
+  color: var(--spice-button-secondary);
 }
 
 .x-sortBox-sortDropdown {
-  background-color: var(--spice-selected-row) !important;
+  background-color: var(--spice-main-secondary) !important;
 }
 
 .x-filterBox-searchIconContainer {
-  color: var(--spice-sub-button) !important;
+  color: var(--spice-button-secondary) !important;
 }
 
 .x-filterBox-expandButton:focus,
 .x-filterBox-expandButton:hover {
-  background-color: var(--spice-selected-row) !important;
+  background-color: var(--spice-main-secondary) !important;
 }
 
 .x-sortBox-sortDropdown,
@@ -408,13 +410,13 @@ a.x-heroCategoryCard-HeroCategoryCard {
 
 /* change background color of 'home' tab shortcut items */
 .view-homeShortcutsGrid-shortcut {
-  background-color: rgba(var(--spice-rgb-selected-row), 0.6) !important;
+  background-color: rgba(var(--spice-rgb-main-secondary), .3) !important;
 }
 
 .view-homeShortcutsGrid-shortcut:focus-within,
 .view-homeShortcutsGrid-shortcut:hover,
 .view-homeShortcutsGrid-shortcut[data-context-menu-open='true'] {
-  background-color: var(--spice-selected-row) !important;
+  background-color: rgba(var(--spice-rgb-main-secondary), .5) !important;
 }
 
 /* 'see more' button fix */
@@ -425,7 +427,7 @@ a.x-heroCategoryCard-HeroCategoryCard {
 
 /* card background color for editing playlist details */
 .main-playlistEditDetailsModal-descriptionTextarea {
-  background: var(--spice-card);
+  background: var(--spice-main-secondary);
 }
 
 .main-playlistEditDetailsModal-textElementLabel {
@@ -540,19 +542,24 @@ span.artist-artistVerifiedBadge-badge path:last-child {
 
 /* change background color of selected row */
 .main-trackList-trackListRow.main-trackList-selected, .main-trackList-trackListRow.main-trackList-selected:hover {
-  background-color: rgba(var(--spice-rgb-selected-row), 0.8) !important;
+  background-color: rgba(var(--spice-rgb-main-secondary), 0.6) !important;
 }
 
 .main-trackList-trackListRow:focus-within,
 .main-trackList-trackListRow:hover {
-  background-color: rgba(var(--spice-rgb-selected-row), 0.4);
+  background-color: rgba(var(--spice-rgb-main-secondary), 0.4);
 }
 
 /* When song is currently playing */
 .main-trackList-active .main-type-mesto,
 .main-trackList-active .main-trackList-rowSubTitle,
 .main-trackList-active .main-trackList-rowSubTitle a,
-.main-trackList-active .main-trackList-rowMarker {
+.main-trackList-active .main-trackList-rowMarker,
+.main-trackList-active .main-trackList-rowSectionVariable,
+.main-trackList-active .main-trackList-rowSectionVariable a,
+.main-trackList-active .main-trackList-rowSectionVariable span,
+.main-trackList-active .main-trackList-rowMarker,
+.main-trackList-active .main-trackList-rowDuration {
   color: var(--spice-button) !important;
 }
 
@@ -593,7 +600,7 @@ span.artist-artistVerifiedBadge-badge path:last-child {
   .main-trackList-rowSectionVariable a,
 .main-trackList-trackListRow:hover:not(.main-trackList-disabled):not(.main-trackList-active)
   .main-trackList-rowSectionVariable a {
-  color: var(--spice-text) !important;
+    color: var(--spice-text) !important;
 }
 
 
@@ -608,21 +615,16 @@ span.artist-artistVerifiedBadge-badge path:last-child {
 
 /* TEMPORARY */
 
-/* change progress bar color */
-.dt2nNuPMSEfD8Pv4Na9G {
-  background-color: var(--spice-playback-bar) !important;
-}
-
 /* change delete playlist dialog box colors */
-._XjIr3Jebi9c96f7h74J {
-  background-color: var(--spice-player);
+.K8PtC1Way9XetxDGwCGx {
+  background-color: var(--spice-card);
 }
 
-._XjIr3Jebi9c96f7h74J > *:not(div) {
+.K8PtC1Way9XetxDGwCGx > *:not(div) {
   color: var(--spice-text);
 }
 
-.reDC8RlgDXoQ_bz0umLz > *:not(div) {
+.awGNDbf1c8TGBAFR0pv8 > *:not(div) {
   color: white;
 }
 
@@ -631,3 +633,140 @@ span.artist-artistVerifiedBadge-badge path:last-child {
   justify-content: space-between !important;
 }
 
+/* change appearance of verified artist badge */
+.Ov0avbbVFKCQwhi1UwYi {
+  border: 2px solid var(--spice-text);
+  border-radius: 3px;
+  width: fit-content;
+  text-align: center;
+  padding: 0 5px;
+}
+
+span.Ov0avbbVFKCQwhi1UwYi path:nth-child(1) {
+  display: none;
+}
+
+span.Ov0avbbVFKCQwhi1UwYi path:last-child {
+  fill: var(--spice-text) !important;
+  stroke: var(--spice-text);
+}
+
+.Ov0avbbVFKCQwhi1UwYi span {
+  font-weight: bold;
+}
+
+/* change progress bar color */
+.epWhU7hHGktzlO_dop6z {
+  background-color: var(--spice-playback-bar) !important;
+}
+
+.player-controls__buttons.player-controls__buttons--new-icons div svg{
+  width: 14px;
+  height: 14px;
+}
+
+.fGLwlk:active .ButtonInner-sc-14ud5tc-0,
+.fGLwlk:hover .ButtonInner-sc-14ud5tc-0  {
+  background-color: var(--spice-play-button);
+}
+
+span.ellipsis-one-line.main-type-mestoBold {
+  font-weight: 700;
+  font-size: 0.875rem;
+}
+
+.UyzJidwrGk3awngSGIwv {
+  color: inherit;
+}
+
+.fcehhQ {
+  color: inherit;
+}
+
+.icon.collection-icon svg {
+  stroke: var(--spice-subtext);
+  stroke-width: 10px;
+}
+
+:hover > .icon.collection-icon svg {
+  stroke: var(--spice-button-secondary);
+  stroke-width: 10px;
+}
+
+.wCl7pMTEE68v1xuZeZiB,
+._bjbHn5TABOW2s5LsEGX,
+.HbKLiGoYM4dpuK8L4TMX,
+.w6j_vX6SF5IxSXrrkYw5  {
+  color: var(--spice-button-secondary);
+}
+
+.bRkxrs {
+  color: var(--spice-subtext);
+}
+
+.x-sortBox-sortDropdown {
+  background-color: var(--spice-main-secondary) !important;
+}
+
+.Z35BWOA10YGn5uc9YgAp:focus-within,
+.Z35BWOA10YGn5uc9YgAp:hover,
+.Z35BWOA10YGn5uc9YgAp[data-context-menu-open='true'] {
+  background-color: rgba(var(--spice-rgb-main-secondary), 1) !important;
+}
+
+.Z35BWOA10YGn5uc9YgAp {
+  background-color: rgba(var(--spice-rgb-main-secondary), 0.5) !important;
+}
+
+.main-card-card:hover, .main-card-card[data-context-menu-open=true] {
+  background-color: rgba(var(--spice-rgb-main-secondary), 1) !important;
+}
+
+.main-card-card {
+  background-color: rgba(var(--spice-rgb-main-secondary), 0.5) !important;
+}
+
+.CbHJjxYxldG7uUPMYMaP {
+  background-color: rgba(var(--spice-rgb-main-secondary), 1) !important;
+}
+
+.Z35BWOA10YGn5uc9YgAp {
+  transition: none;
+}
+
+.main-card-card {
+  transition: none;
+}
+
+img.main-image-image.CmkY1Ag0tJDfnFXbGgju.main-entityHeader-shadow {
+  border-radius: 7%;
+}
+
+/* change appearance of 'playlist' tag  */
+.main-entityHeader-subtitle.main-entityHeader-small.main-entityHeader-uppercase.main-entityHeader-bold {
+  border: 2px var(--spice-text) solid;
+  border-radius: 3px;
+  width: fit-content;
+  display: inline;
+  text-align: center;
+  padding: 3px 7px;
+}
+
+.main-topBar-topbarContent span.IconWrapper__Wrapper-sc-1hf1hjl-0.jWeDTW {
+  top: 9px;
+  left: 9px;
+}
+
+.main-topBar-topbarContent span.IconWrapper__Wrapper-sc-1hf1hjl-0.jWeDTW svg {
+  height: 20px;
+  width: 20px;
+}
+
+.main-topBar-topbarContent .ButtonInner-sc-14ud5tc-0.cSeieV.encore-bright-accent-set {
+  width: 38px;
+  height: 38px;
+}
+
+.x-progressBar-progressBarBg, .w699O0LgQRghXyl3bs9u {
+  border-radius: 0;
+}