mirror of
https://github.com/morpheusthewhite/spicetify-themes.git
synced 2024-11-22 02:42:54 +01:00
fix(dribbblish): update whole theme (#874)
This commit is contained in:
harbassan
GitHub
parent
e84ae3f7a6
commit
ad22edee6a
@ -12,6 +12,7 @@ const DribbblishShared = {
|
||||
}
|
||||
};
|
||||
|
||||
// register drib menu item
|
||||
DribbblishShared.configMenu.register();
|
||||
DribbblishShared.configMenu.addItem(new Spicetify.Menu.Item(
|
||||
"Right expanded cover",
|
||||
@ -34,13 +35,6 @@ function waitForElement(els, func, timeout = 100) {
|
||||
}
|
||||
}
|
||||
|
||||
// Avoid clipping playlists at the bottom of scroll node
|
||||
waitForElement([".main-rootlist-wrapper"], () => {
|
||||
const mainRootlist = document.querySelector(".main-rootlist-wrapper");
|
||||
const playListItems = document.getElementsByClassName("main-rootlist-rootlistItemLink")
|
||||
mainRootlist.style.height = `${playListItems.length * 56}px`;
|
||||
});
|
||||
|
||||
waitForElement([
|
||||
`ul[tabindex="0"]`,
|
||||
`ul[tabindex="0"] .GlueDropTarget--playlists.GlueDropTarget--folders`
|
||||
@ -72,7 +66,7 @@ waitForElement([
|
||||
|
||||
Spicetify.CosmosAsync.get(
|
||||
`sp://core-playlist/v1/playlist/${uri.toURI()}/metadata`,
|
||||
{ policy: { picture: true } }
|
||||
{ policy: { picture: true } }
|
||||
).then(res => {
|
||||
const meta = res.metadata;
|
||||
let img = link.querySelector("img");
|
||||
@ -99,12 +93,7 @@ waitForElement([".Root__top-container"], ([topContainer]) => {
|
||||
topContainer.prepend(shadow);
|
||||
});
|
||||
|
||||
waitForElement([".main-rootlist-rootlistPlaylistsScrollNode"], (queries) => {
|
||||
const fade = document.createElement("div");
|
||||
fade.id = "dribbblish-sidebar-fade-in";
|
||||
queries[0].append(fade);
|
||||
});
|
||||
|
||||
// allow resizing of the navbar
|
||||
waitForElement([
|
||||
".Root__nav-bar .LayoutResizer__input, .Root__nav-bar .LayoutResizer__resize-bar input"
|
||||
], ([resizer]) => {
|
||||
@ -124,6 +113,37 @@ waitForElement([
|
||||
updateVariable();
|
||||
});
|
||||
|
||||
// allow resizing of the buddy feed
|
||||
waitForElement([".Root__right-sidebar .LayoutResizer__input, .Root__right-sidebar .LayoutResizer__resize-bar input"], ([resizer]) => {
|
||||
const observer = new MutationObserver(updateVariable);
|
||||
observer.observe(resizer, { attributes: true, attributeFilter: ["value"] });
|
||||
function updateVariable() {
|
||||
let value = resizer.value;
|
||||
if (value == 320) {
|
||||
value = 72;
|
||||
document.documentElement.classList.add("buddyFeed-hide-text");
|
||||
} else {
|
||||
document.documentElement.classList.remove("buddyFeed-hide-text");
|
||||
}
|
||||
}
|
||||
updateVariable();
|
||||
});
|
||||
|
||||
// add fade effect on playlist/folder list
|
||||
waitForElement([".main-navBar-navBar .os-viewport.os-viewport-native-scrollbars-invisible"], ([scrollNode]) => {
|
||||
scrollNode.setAttribute("fade", "bottom");
|
||||
scrollNode.addEventListener("scroll", () => {
|
||||
if (scrollNode.scrollTop == 0) {
|
||||
scrollNode.setAttribute("fade", "bottom");
|
||||
} else if (scrollNode.scrollHeight - scrollNode.clientHeight - scrollNode.scrollTop == 0) {
|
||||
scrollNode.setAttribute("fade", "top");
|
||||
} else {
|
||||
scrollNode.setAttribute("fade", "full");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// improve styles at smaller sizes
|
||||
waitForElement([".Root__main-view .os-resize-observer-host"], ([resizeHost]) => {
|
||||
const observer = new ResizeObserver(updateVariable);
|
||||
observer.observe(resizeHost);
|
||||
@ -144,6 +164,7 @@ waitForElement([".Root__main-view .os-resize-observer-host"], ([resizeHost]) =>
|
||||
});
|
||||
|
||||
(function Dribbblish() {
|
||||
// dynamic playback time tooltip
|
||||
const progBar = document.querySelector(".playback-bar");
|
||||
const root = document.querySelector(".Root");
|
||||
|
||||
@ -185,6 +206,7 @@ waitForElement([".Root__main-view .os-resize-observer-host"], ([resizeHost]) =>
|
||||
}
|
||||
});
|
||||
|
||||
// filepicker for custom folder images
|
||||
const filePickerForm = document.createElement("form");
|
||||
filePickerForm.setAttribute("aria-hidden", true);
|
||||
filePickerForm.innerHTML = '<input type="file" class="hidden-visually" />';
|
||||
@ -222,6 +244,7 @@ waitForElement([".Root__main-view .os-resize-observer-host"], ([resizeHost]) =>
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
|
||||
// context menu items for custom folder images
|
||||
new Spicetify.ContextMenu.Item("Remove folder image",
|
||||
([uri]) => {
|
||||
const id = Spicetify.URI.from(uri).id;
|
||||
|
||||
@ -1,7 +1,3 @@
|
||||
.Root {
|
||||
padding-top: 30px;
|
||||
}
|
||||
|
||||
:root {
|
||||
--bar-height: 70px;
|
||||
--bar-cover-art-size: 40px;
|
||||
@ -12,6 +8,10 @@
|
||||
--os-windows-icon-dodge: 0;
|
||||
}
|
||||
|
||||
html.buddyFeed-hide-text {
|
||||
--panel-width: 72px !important;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Google Sans Display";
|
||||
src: url("glue-resources/fonts/GoogleSansDisplayRegular.woff2") format("woff2");
|
||||
@ -41,21 +41,14 @@
|
||||
}
|
||||
|
||||
body {
|
||||
--glue-font-family: "Google Sans Display","Roboto",spotify-circular,spotify-circular-cyrillic,spotify-circular-arabic,spotify-circular-hebrew,Helvetica Neue,helvetica,arial,Hiragino Kaku Gothic Pro,Meiryo,MS Gothic,sans-serif;
|
||||
--info-font-family: "Roboto",spotify-circular,spotify-circular-cyrillic,spotify-circular-arabic,spotify-circular-hebrew,Helvetica Neue,helvetica,arial,Hiragino Kaku Gothic Pro,Meiryo,MS Gothic,sans-serif;
|
||||
--glue-font-family: "Google Sans Display", "Roboto", spotify-circular, spotify-circular-cyrillic, spotify-circular-arabic, spotify-circular-hebrew, Helvetica Neue, helvetica, arial,
|
||||
Hiragino Kaku Gothic Pro, Meiryo, MS Gothic, sans-serif;
|
||||
--info-font-family: "Roboto", spotify-circular, spotify-circular-cyrillic, spotify-circular-arabic, spotify-circular-hebrew, Helvetica Neue, helvetica, arial, Hiragino Kaku Gothic Pro, Meiryo,
|
||||
MS Gothic, sans-serif;
|
||||
font-family: var(--glue-font-family);
|
||||
letter-spacing: normal;
|
||||
}
|
||||
|
||||
.main-type-mesto,
|
||||
.main-type-mestoBold,
|
||||
.main-type-ballad,
|
||||
.main-type-balladBold,
|
||||
.main-type-canon {
|
||||
font-family: var(--info-font-family);
|
||||
letter-spacing: normal;
|
||||
}
|
||||
|
||||
.main-type-bass {
|
||||
font-family: var(--glue-font-family);
|
||||
}
|
||||
@ -91,17 +84,13 @@ input {
|
||||
.x-actionBarBackground-background,
|
||||
.main-actionBarBackground-background,
|
||||
.main-entityHeader-overlay,
|
||||
.main-entityHeader-backgroundColor
|
||||
{
|
||||
.main-entityHeader-backgroundColor {
|
||||
background-color: unset !important;
|
||||
background-image: unset !important;
|
||||
}
|
||||
|
||||
.main-playButton-PlayButton.main-playButton-primary {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.connect-title, .connect-header {
|
||||
.connect-title,
|
||||
.connect-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -153,10 +142,6 @@ span.artist-artistVerifiedBadge-badge svg > path:last-of-type {
|
||||
padding-left: 9%;
|
||||
}
|
||||
|
||||
.main-entityHeader-background.main-entityHeader-overlay:after {
|
||||
background-image: linear-gradient(transparent,transparent),linear-gradient(var(--spice-main), var(--spice-main));
|
||||
}
|
||||
|
||||
.artist-artistOverview-overview .main-entityHeader-withBackgroundImage h1 {
|
||||
font-size: 120px !important;
|
||||
line-height: 120px !important;
|
||||
@ -184,8 +169,7 @@ span.artist-artistVerifiedBadge-badge svg > path:last-of-type {
|
||||
}
|
||||
|
||||
.main-playPauseButton-button {
|
||||
background-color: var(--spice-button);
|
||||
color: white;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
/** Queue page header */
|
||||
@ -213,7 +197,8 @@ span.artist-artistVerifiedBadge-badge svg > path:last-of-type {
|
||||
-webkit-box-shadow: unset;
|
||||
}
|
||||
|
||||
.main-cardImage-imagePlaceholder, .main-cardImage-image {
|
||||
.main-cardImage-imagePlaceholder,
|
||||
.main-cardImage-image {
|
||||
border-radius: var(--cover-border-radius);
|
||||
}
|
||||
|
||||
@ -239,7 +224,7 @@ span.artist-artistVerifiedBadge-badge svg > path:last-of-type {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.main-buddyFeed-buddyFeed {
|
||||
.main-buddyFeed-friendsFeedContainer {
|
||||
box-shadow: unset;
|
||||
-webkit-box-shadow: unset;
|
||||
z-index: 0;
|
||||
@ -260,12 +245,6 @@ span.artist-artistVerifiedBadge-badge svg > path:last-of-type {
|
||||
color: rgba(var(--spice-rgb-sidebar-text), 0.8);
|
||||
}
|
||||
|
||||
.main-buddyFeed-buddyFeedRoot .main-avatar-avatar,
|
||||
.main-buddyFeed-buddyFeedRoot .main-buddyFeed-overlay {
|
||||
width: 32px !important;
|
||||
height: 32px !important;
|
||||
}
|
||||
|
||||
.main-avatar-avatar.main-avatar-withBadge:after {
|
||||
box-shadow: 0 0 0 2px var(--spice-sidebar);
|
||||
background-color: var(--spice-notification);
|
||||
@ -298,17 +277,18 @@ span.artist-artistVerifiedBadge-badge svg > path:last-of-type {
|
||||
width: var(--sidebar-width) !important;
|
||||
}
|
||||
|
||||
.main-buddyFeed-buddyFeedRoot {
|
||||
height: 100%;
|
||||
.spotify__os--is-windows .Root__nav-bar,
|
||||
.spotify__os--is-windows .main-buddyFeed-friendsFeedContainer {
|
||||
padding-top: 15px;
|
||||
}
|
||||
|
||||
.main-buddyFeed-buddyFeedRoot .os-content {
|
||||
.main-buddyFeed-friendsFeedContainer .os-content {
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
|
||||
html,
|
||||
.Root__nav-bar,
|
||||
.main-buddyFeed-buddyFeed {
|
||||
.main-buddyFeed-friendsFeedContainer {
|
||||
background-color: var(--spice-sidebar) !important;
|
||||
}
|
||||
|
||||
@ -322,17 +302,13 @@ html {
|
||||
.main-rootlist-rootlistItemLink:visited,
|
||||
.main-rootlist-rootlistContent span,
|
||||
.main-navBar-entryPoints span {
|
||||
color: var(--spice-sidebar-text)
|
||||
color: var(--spice-sidebar-text);
|
||||
}
|
||||
|
||||
.main-navBar-navBarItem {
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
#spicetify-show-list >* {
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.main-rootlist-statusIcons {
|
||||
color: var(--spice-sidebar-text);
|
||||
padding-right: 16px;
|
||||
@ -349,9 +325,6 @@ html {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
color: var(--spice-sidebar-text) !important;
|
||||
background-color: var(--spice-button);
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 0 2px var(--spice-sidebar);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@ -384,11 +357,11 @@ html.sidebar-hide-text .main-rootlist-statusIcons {
|
||||
}
|
||||
|
||||
.Root__nav-bar .os-scrollbar-vertical,
|
||||
.main-buddyFeed-buddyFeedRoot .os-scrollbar-vertical {
|
||||
.main-buddyFeed-friendsFeedContainer .os-scrollbar-vertical,
|
||||
.main-buddyFeed-friendsFeedContainer .os-scrollbar-horizontal {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/** */
|
||||
.main-topBar-historyButtons .main-topBar-button {
|
||||
background-color: unset;
|
||||
width: 24px;
|
||||
@ -413,7 +386,8 @@ html.sidebar-hide-text .main-rootlist-statusIcons {
|
||||
bottom: calc(var(--main-gap) + var(--bar-height) - 12px / 2);
|
||||
}
|
||||
|
||||
.Root.is-connectBarVisible .playback-bar {
|
||||
/* when connect bar is visible */
|
||||
.main-nowPlayingBar-nowPlayingBar:nth-last-child(2) .playback-bar {
|
||||
bottom: calc(var(--main-gap) + var(--bar-height) + 24px - 12px / 2);
|
||||
}
|
||||
|
||||
@ -540,6 +514,7 @@ html.sidebar-hide-text .main-rootlist-rootlistItem {
|
||||
.main-navBar-navBarItem .search-icon {
|
||||
flex: 0 0 auto;
|
||||
margin-right: 8px;
|
||||
color: var(--spice-sidebar-text);
|
||||
}
|
||||
|
||||
.main-collectionLinkButton-icon,
|
||||
@ -591,7 +566,6 @@ li.GlueDropTarget {
|
||||
}
|
||||
.dribs-playlist-list {
|
||||
padding: 0px 8px;
|
||||
padding-bottom: 56px;
|
||||
}
|
||||
#dribbblish-back-shadow {
|
||||
z-index: 2;
|
||||
@ -656,9 +630,6 @@ li.GlueDropTarget {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.main-playPauseButton-button {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.main-playPauseButton-button svg {
|
||||
width: 32px !important;
|
||||
@ -716,14 +687,14 @@ li.GlueDropTarget {
|
||||
padding: var(--main-gap) 0;
|
||||
}
|
||||
|
||||
.spotify__container--is-desktop.buddyfeed-visible .Root__top-container {
|
||||
.spotify__container--is-desktop .Root__top-container--right-sidebar-visible {
|
||||
grid-template-areas:
|
||||
"top-bar top-bar top-bar"
|
||||
"nav-bar main-view buddy-feed"
|
||||
"nav-bar now-playing-bar buddy-feed";
|
||||
"nav-bar main-view right-sidebar"
|
||||
"nav-bar now-playing-bar right-sidebar";
|
||||
}
|
||||
|
||||
html:not(.buddyfeed-visible) .Root__top-container {
|
||||
.Root__top-container:not(.Root__top-container--right-sidebar-visible) {
|
||||
grid-template-areas:
|
||||
"top-bar top-bar"
|
||||
"nav-bar main-view"
|
||||
@ -738,51 +709,6 @@ span.main-userWidget-displayName,
|
||||
display: none;
|
||||
}
|
||||
|
||||
/** Sidebar config */
|
||||
#dribs-hidden-list {
|
||||
background-color: rgba(var(--spice-rgb-main), .3);
|
||||
}
|
||||
|
||||
#dribs-sidebar-config {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
top: -30px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#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);
|
||||
}
|
||||
#dribs-sidebar-config button:disabled {
|
||||
color: var(--spice-button-disabled);
|
||||
}
|
||||
|
||||
.main-navBar-entryPoints {
|
||||
--left-sidebar-padding-left: 24px;
|
||||
--left-sidebar-padding-right: 24px;
|
||||
}
|
||||
|
||||
div.GlueDropTarget.personal-library {
|
||||
padding: 0 8px;
|
||||
}
|
||||
div.GlueDropTarget.personal-library >* {
|
||||
padding: 0 16px;
|
||||
height: 56px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
div.GlueDropTarget.personal-library >*.active {
|
||||
background: var(--spice-button);
|
||||
}
|
||||
|
||||
/** Big cover, small cover */
|
||||
.main-coverSlotExpanded-container {
|
||||
position: fixed;
|
||||
@ -802,8 +728,8 @@ html.right-expanded-cover .main-coverSlotExpanded-container {
|
||||
left: unset;
|
||||
}
|
||||
|
||||
html.right-expanded-cover.buddyfeed-visible .main-coverSlotExpanded-container {
|
||||
right: calc(var(--main-gap) + var(--buddy-feed-width) + 10px);
|
||||
html.right-expanded-cover .Root__top-container--right-sidebar-visible .main-coverSlotExpanded-container {
|
||||
right: calc(var(--main-gap) + var(--panel-width) + 10px);
|
||||
left: unset;
|
||||
}
|
||||
|
||||
@ -896,9 +822,6 @@ html.right-expanded-cover.buddyfeed-visible .main-coverSlotExpanded-container {
|
||||
.main-userWidget-dropDownMenu > li svg {
|
||||
position: absolute;
|
||||
}
|
||||
.main-buddyFeed-buddyFeed.main-buddyFeed-buddyFeed-expanded {
|
||||
z-index: 4;
|
||||
}
|
||||
.main-view-container {
|
||||
min-height: 90vh !important;
|
||||
}
|
||||
@ -907,3 +830,189 @@ html.right-expanded-cover.buddyfeed-visible .main-coverSlotExpanded-container {
|
||||
min-height: 85vh !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* player control buttons */
|
||||
button.main-shuffleButton-button {
|
||||
position: absolute;
|
||||
left: 200px;
|
||||
}
|
||||
|
||||
.player-controls__buttons {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
button.main-skipForwardButton-button,
|
||||
button.main-repeatButton-button,
|
||||
button.main-skipBackButton-button,
|
||||
button.main-shuffleButton-button {
|
||||
color: var(--spice-text);
|
||||
}
|
||||
|
||||
.player-controls__left,
|
||||
.player-controls__right {
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.control-button {
|
||||
color: var(--spice-text);
|
||||
}
|
||||
|
||||
.main-genericButton-button {
|
||||
color: var(--spice-text);
|
||||
}
|
||||
|
||||
/* increase spacing b/w history buttons */
|
||||
.main-topBar-historyButtons {
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
/* add top spacing to all */
|
||||
section.contentSpacing {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
/* add fade to sidebar playlist list */
|
||||
.main-navBar-navBar .os-viewport.os-viewport-native-scrollbars-invisible[fade="full"] {
|
||||
-webkit-mask-image: linear-gradient(transparent 0%, black 10%, black 90%, transparent 100%);
|
||||
}
|
||||
.main-navBar-navBar .os-viewport.os-viewport-native-scrollbars-invisible[fade="top"] {
|
||||
-webkit-mask-image: linear-gradient(transparent 0%, black 10%);
|
||||
}
|
||||
.main-navBar-navBar .os-viewport.os-viewport-native-scrollbars-invisible[fade="bottom"] {
|
||||
-webkit-mask-image: linear-gradient(black 90%, transparent 100%);
|
||||
}
|
||||
|
||||
/* fix sidebar playlist section */
|
||||
.main-navBar-navBar .main-rootlist-wrapper {
|
||||
contain: layout;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
/* buddy feed w/ hidden text*/
|
||||
.buddyFeed-hide-text .NdQkQZhcYIEcJnRdAYcQ {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.buddyFeed-hide-text .main-buddyFeed-friendActivity {
|
||||
padding: 0 0 0 4px;
|
||||
}
|
||||
|
||||
.buddyFeed-hide-text .main-avatar-avatar > div > div > div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-top: 7px;
|
||||
}
|
||||
|
||||
.buddyFeed-hide-text .main-avatar-avatar,
|
||||
.buddyFeed-hide-text .main-avatar-avatar div,
|
||||
.buddyFeed-hide-text .main-buddyFeed-overlay {
|
||||
width: 32px !important;
|
||||
height: 32px !important;
|
||||
}
|
||||
|
||||
/* buddy feed heading and icons */
|
||||
.NdQkQZhcYIEcJnRdAYcQ h1 {
|
||||
color: var(--spice-sidebar-text);
|
||||
}
|
||||
|
||||
.NdQkQZhcYIEcJnRdAYcQ {
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
.spotify__os--is-windows .zuwPpHAEtIqahnB2u9NR {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
span.YEaaNScT6lyJCVBeQoxd button {
|
||||
color: var(--spice-sidebar-text);
|
||||
}
|
||||
|
||||
.main-avatar-avatar.BzunmwrVMyWGpopPJRt2::after {
|
||||
background: var(--spice-sidebar-text);
|
||||
}
|
||||
|
||||
/* fix marketplace heading alignment */
|
||||
.marketplace-header {
|
||||
flex-direction: row !important;
|
||||
}
|
||||
|
||||
.marketplace-header__left {
|
||||
position: initial !important;
|
||||
}
|
||||
|
||||
/* liked songs sidebar icon */
|
||||
a.main-collectionLinkButton-collectionLinkButton.main-collectionLinkButton-selected.active {
|
||||
background: var(--spice-button);
|
||||
}
|
||||
|
||||
.main-collectionLinkButton-collectionLinkButton {
|
||||
height: 56px !important;
|
||||
}
|
||||
|
||||
.GlueDropTarget.GlueDropTarget--tracks.personal-library {
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
.main-collectionLinkButton-collectionLinkText {
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
/* topbar play button */
|
||||
.main-topBar-topbarContent .main-playButton-PlayButton > button > span {
|
||||
inline-size: 32px;
|
||||
block-size: 32px;
|
||||
min-block-size: auto;
|
||||
}
|
||||
.main-topBar-topbarContent .main-playButton-PlayButton svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
.main-topBar-topbarContent .main-playButton-PlayButton > button > span > span {
|
||||
position: initial;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
/* keep progress knob on page : important for js to work */
|
||||
.progress-bar:not(:hover):not(:focus):not(.DuvrswZugGajIFNXObAr) .progress-bar__slider {
|
||||
display: block;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/* progress bar moves smoothly */
|
||||
.x-progressBar-fillColor {
|
||||
transition: transform 1s linear;
|
||||
}
|
||||
|
||||
.progress-bar__slider {
|
||||
transition: left 1s linear;
|
||||
}
|
||||
|
||||
.playback-progressbar-isInteractive .DuvrswZugGajIFNXObAr .x-progressBar-fillColor,
|
||||
.playback-progressbar-isInteractive .DuvrswZugGajIFNXObAr .progress-bar__slider {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
/* marketplace page */
|
||||
.marketplace-header__left h1,
|
||||
.marketplace-card-type-heading {
|
||||
font-family: var(--font-family, CircularSpTitle, CircularSpTitle-Tall, CircularSp-Arab, CircularSp-Hebr, CircularSp-Cyrl, CircularSp-Grek, CircularSp-Deva, var(--fallback-fonts, sans-serif));
|
||||
}
|
||||
|
||||
[dir="ltr"] .collection-collection-tabBar {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.marketplace-tabBar,
|
||||
.main-topBar-topbarContent {
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
/* playbutton color */
|
||||
.main-playButton-PlayButton > button > span {
|
||||
color: var(--spice-text);
|
||||
}
|
||||
|
||||
/* lyrics background */
|
||||
.lyrics-lyrics-background {
|
||||
background-color: var(--spice-main);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user