fix(dribbblish): update whole theme (#874)

This commit is contained in:
harbassan 2022-12-13 13:43:36 +13:00 committed by GitHub
parent e84ae3f7a6
commit ad22edee6a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 255 additions and 123 deletions

View File

@ -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`
@ -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;

View File

@ -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);
}