use our own carousel classes

Comfy-Themes · Sep 25, 2024 · f90e439 · f90e439
1 parent 22095d4
commit f90e439
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 31 deletions.
diff --git a/Comfy/assets/_settings.scss b/Comfy/assets/_settings.scss
@@ -130,41 +130,69 @@
 			width: 100%;
 			padding-inline: 0px;
 
-			.search-searchCategory-categoryGrid {
-				overflow-y: hidden;
+			.search-searchCategory-contentArea {
 
-				&Item {
-					cursor: pointer;
-					padding: 2px;
+				&.search-searchCategory-showLeftButton .search-searchCategory-categoryGrid {
+					-webkit-mask-image: linear-gradient(90deg, transparent, var(--spice-sidebar) 120px);
+					mask-image: linear-gradient(90deg, transparent, var(--spice-sidebar) 120px);
+				}
 
-					button::after {
-						border: none !important;
-					}
+				&.search-searchCategory-showRightButton .search-searchCategory-categoryGrid {
+					-webkit-mask-image: linear-gradient(90deg, var(--spice-sidebar) calc(100% - 120px), transparent);
+					mask-image: linear-gradient(90deg, var(--spice-sidebar) calc(100% - 120px), transparent);
+				}
 
-					&:active,
-					&:focus,
-					&:hover {
-						text-decoration: none;
-					}
+				&.search-searchCategory-showLeftButton.search-searchCategory-showRightButton .search-searchCategory-categoryGrid {
+					-webkit-mask-image: linear-gradient(90deg, transparent, var(--spice-sidebar) 120px, var(--spice-sidebar) calc(100% - 120px), transparent);
+					mask-image: linear-gradient(90deg, transparent, var(--spice-sidebar) 120px, var(--spice-sidebar) calc(100% - 120px), transparent);
+				}
 
-					&:focus-visible {
-						outline: none;
-						text-decoration: none;
+				.search-searchCategory-categoryGrid {
+					overflow-y: hidden;
 
-						&>* {
-							outline: 5px auto #3673d4;
+					&Item {
+						cursor: pointer;
+						padding: 2px;
+
+						button::after {
+							border: none !important;
 						}
-					}
 
-					&>* {
-						margin-inline-end: 8px;
-						margin-block-end: 0 !important;
+						&:active,
+						&:focus,
+						&:hover {
+							text-decoration: none;
+						}
+
+						&:focus-visible {
+							outline: none;
+							text-decoration: none;
+
+							&>* {
+								outline: 5px auto #3673d4;
+							}
+						}
+
+						&>* {
+							margin-inline-end: 8px;
+							margin-block-end: 0 !important;
+						}
 					}
 				}
 			}
 		}
+
+		.search-searchCategory-showRightButton .search-searchCategory-carouselButtonRight,
+		.search-searchCategory-showRightButton:hover .search-searchCategory-carouselButtonRight,
+		.search-searchCategory-showLeftButton .search-searchCategory-carouselButtonLeft,
+		.search-searchCategory-showLeftButton:hover .search-searchCategory-carouselButtonLeft {
+			cursor: pointer;
+			opacity: 1;
+			pointer-events: auto;
+		}
 	}
 
+
 	// Contents Styling
 	.setting-header {
 		text-align: center;

diff --git a/Comfy/theme.script.js b/Comfy/theme.script.js
@@ -731,26 +731,26 @@ todo:
 					"div",
 					{
 						className: `search-searchCategory-contentArea
-						${showLeftButton ? "sbdtp9NBYCnW1lw4uyA4" : ""}
-						${showRightButton ? "vtK4LGTA_YdTF8p6SIu_" : ""}
-						${showRightButton && showLeftButton ? "sbdtp9NBYCnW1lw4uyA4 vtK4LGTA_YdTF8p6SIu_" : ""}`
+						${showLeftButton ? "search-searchCategory-showLeftButton" : ""}
+						${showRightButton ? "search-searchCategory-showRightButton" : ""}
+						${showRightButton && showLeftButton ? "search-searchCategory-showLeftButton search-searchCategory-showRightButton" : ""}`
 							.trim()
 							.replace(/\s+/g, " ")
 					},
 					Spicetify.React.createElement(
 						"div",
 						{
 							ref: containerRef,
-							className: "search-searchCategory-categoryGrid J4qD2RoZgGLbOdpfs63w",
-							onScroll: handleResize, // Adjust this if you find that `handleResize` is still not being optimized
+							className: "search-searchCategory-categoryGrid",
+							onScroll: handleResize,
 							onKeyDown: handleKeyDown,
 							role: "list",
 							tabIndex: 0,
 							onMouseDown: handleMouseDown
 						},
 						Spicetify.React.createElement(
 							"div",
-							{ role: "presentation", className: "aKOZdeebnsaeeMTiugmO" },
+							{ role: "presentation" },
 							chips.map((chip, index) =>
 								Spicetify.React.createElement(
 									"a",
@@ -778,11 +778,11 @@ todo:
 					),
 					Spicetify.React.createElement(
 						"div",
-						{ className: "search-searchCategory-carousel e1CGifl7UjMqePPNhj5A", dir: "ltr" },
+						{ className: "search-searchCategory-carousel" },
 						Spicetify.React.createElement(
 							"button",
 							{
-								className: `search-searchCategory-carouselButton ZbimwwLeKzV0_OVbLg0e`,
+								className: `search-searchCategory-carouselButton search-searchCategory-carouselButtonLeft`,
 								tabIndex: -1,
 								onClick: () => handleButtonClick("LEFT"),
 								inert: true
@@ -796,7 +796,7 @@ todo:
 						Spicetify.React.createElement(
 							"button",
 							{
-								className: `search-searchCategory-carouselButton P0I0a36y0BWbeGseMsmE`,
+								className: `search-searchCategory-carouselButton search-searchCategory-carouselButtonRight`,
 								tabIndex: -1,
 								onClick: () => handleButtonClick("RIGHT"),
 								inert: true