feat: add Compact Connect Bar Snippet

this commit also lints the code
Comfy-Themes · Sep 13, 2024 · 1f08962 · 1f08962
1 parent 7239734
commit 1f08962
Show file tree

Hide file tree

Showing 2 changed files with 1,502 additions and 23 deletions.
diff --git a/Comfy/app.css b/Comfy/app.css
diff --git a/Comfy/assets/_snippets.scss b/Comfy/assets/_snippets.scss
@@ -34,7 +34,6 @@
 	}
 
 	&:has(#main.Comfy-Dark-Modals-Snippet) {
-
 		.ABD0FGjBGqGZG33bP7Lc,
 		.main-duplicateTrackModal-container {
 			background-color: var(--spice-main);
@@ -43,7 +42,6 @@
 	}
 
 	#main {
-
 		&.Comfy-nord-Snippet.Custom-Playbar-Snippet,
 		&.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet {
 			.Root__top-container {
@@ -169,10 +167,13 @@
 		}
 
 		&.Playbar-Above-Right-Panel-Snippet {
-
 			.artist-artistOverview-artistOverviewContent,
 			.main-actionBarBackground-background {
-				min-height: calc(100vh - min(30vh, clamp(250px, 250px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px) / 424 * 150, 400px)) - 50px) !important;
+				min-height: calc(
+					100vh -
+						min(30vh, clamp(250px, 250px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px) / 424 * 150, 400px)) -
+						50px
+				) !important;
 			}
 
 			.Root__top-container {
@@ -293,12 +294,10 @@
 		}
 
 		&.Smooth-Progress-Bar-Snippet {
-
 			.playback-bar,
 			.pn5V0OzovI9p6b8nWq8p.gglUjikTBtMzCZFgSmpS .x-progressBar-sliderArea {
-
-				>div,
-				~div {
+				> div,
+				~ div {
 					-webkit-transition-delay: 0s;
 					transition-delay: 0s;
 					-webkit-transition-duration: 1000ms;
@@ -308,7 +307,7 @@
 					transition-property: transform, left;
 					transition-property: transform, left, -webkit-transform;
 					-webkit-transition-timing-function: linear;
-					transition-timing-function: linear
+					transition-timing-function: linear;
 				}
 			}
 		}
@@ -324,29 +323,41 @@
 		}
 
 		&.Remove-Connect-Bar-Snippet {
-
 			.main-connectBar-connectBar,
 			.main-devicePicker-indicator {
 				display: none !important;
 			}
 		}
 
+		// Connect bar
+		&.Compact-Connect-Bar-Snippet {
+			.main-nowPlayingBar-container {
+				.main-connectBar-connectBar {
+					position: absolute;
+					margin-left: auto;
+					padding: 0.75rem 1rem;
+					top: -45%;
+					// bottom: calc(100% + 0.75rem); // can use this too
+					right: 0;
+				}
+			}
+		}
+
 		&.Remove-Lyrics-Button-Snippet {
 			.main-nowPlayingBar-lyricsButton {
 				display: none !important;
 			}
 		}
 
 		&.Hoverable-Timers-Snippet {
-
 			.playback-bar,
 			.pn5V0OzovI9p6b8nWq8p.gglUjikTBtMzCZFgSmpS {
-				>div {
+				> div {
 					transition: all 0.3s ease;
 					opacity: 0;
 				}
 
-				&:hover>div {
+				&:hover > div {
 					transition: all 0.3s ease;
 					opacity: 1 !important;
 				}
@@ -374,7 +385,7 @@
 					padding-block: 8px;
 
 					.main-topBar-topbarContentWrapper {
-						>*:not(.main-topBar-searchBar):not(:has(ul)) {
+						> *:not(.main-topBar-searchBar):not(:has(ul)) {
 							justify-content: center;
 							display: flex;
 						}
@@ -450,7 +461,10 @@
 		&.Header-Background {
 			.main-entityHeader-imageContainerNew {
 				align-self: center;
-				left: calc(clamp(128px, 128px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px)/424*104, 232px) + 24px + var(--content-spacing));
+				left: calc(
+					clamp(128px, 128px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px)/424 * 104, 232px) + 24px +
+						var(--content-spacing)
+				);
 				position: relative;
 				z-index: 1;
 			}
@@ -462,15 +476,23 @@
 				min-width: fit-content;
 				box-shadow: 0 2px 4px rgba(var(--spice-rgb-shadow), 0.1);
 				justify-content: space-evenly !important;
-				height: calc(clamp(128px, 128px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px)/424*104, 232px) + 48px);
+				height: calc(
+					clamp(128px, 128px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px)/424 * 104, 232px) + 48px
+				);
 			}
 
-			.main-entityHeader-imageContainerNew+.main-entityHeader-headerText {
-				padding-left: calc(clamp(128px, 128px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px) / 424 * 104, 232px) + 32px + var(--content-spacing));
-				margin-right: calc(clamp(128px, 128px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px) / 424 * 104, 232px) + var(--content-spacing));
+			.main-entityHeader-imageContainerNew + .main-entityHeader-headerText {
+				padding-left: calc(
+					clamp(128px, 128px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px) / 424 * 104, 232px) + 32px +
+						var(--content-spacing)
+				);
+				margin-right: calc(
+					clamp(128px, 128px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px) / 424 * 104, 232px) +
+						var(--content-spacing)
+				);
 			}
 
-			&:not(.Topbar-Inside-Titlebar-Snippet) .main-entityHeader-topbarContentFadeIn>* {
+			&:not(.Topbar-Inside-Titlebar-Snippet) .main-entityHeader-topbarContentFadeIn > * {
 				opacity: var(--top-bar-opacity) !important;
 			}
 		}
@@ -483,7 +505,7 @@
 		}
 
 		&.Lyrics {
-			main>div>div:empty {
+			main > div > div:empty {
 				--lyrics-color-background: transparent !important;
 			}
 		}
@@ -539,4 +561,4 @@
 			}
 		}
 	}
-}
+}