fix(theme): various fixes

- library filter context menu background - library content borders - library home content spacing - scrollbar thumb colors - etc.
ricewind012 · Feb 12, 2025 · 9a49959 · 9a49959
1 parent a3ddbd5
commit 9a49959
Show file tree

Hide file tree

Showing 17 changed files with 77 additions and 82 deletions.
diff --git a/plugin/components/ribbon.tsx b/plugin/components/ribbon.tsx
@@ -64,7 +64,7 @@ interface RibbonContainerProps {
 }
 
 export const RibbonContainer: FC<RibbonContainerProps> = ({ children }) => (
-	<div className="ribbon-sections-container">{children}</div>
+	<div className="ribbon-container">{children}</div>
 );
 
 interface RibbonGameSectionButtonProps {

diff --git a/theme/client/library/collections/allcollections.scss b/theme/client/library/collections/allcollections.scss
@@ -80,7 +80,7 @@
 #ScrollContainer {
 	background-color: var(--bg-main) !important;
 	background-image: none !important;
-	border: var(--library_container-border) !important;
+	border: none !important;
 	border-radius: 0 !important;
 	padding: var(--library_body-spacing) !important;
 }

diff --git a/theme/client/library/gamelist/gamelistbar.scss b/theme/client/library/gamelist/gamelistbar.scss
@@ -1,5 +1,4 @@
 #Container {
-	background-color: transparent !important;
 	background-image: linear-gradient(
 		0deg,
 		#728fb7 88.41%,

diff --git a/theme/client/library/gamelist/gamelistdropdown.scss b/theme/client/library/gamelist/gamelistdropdown.scss
@@ -15,7 +15,11 @@
 }
 
 #CheckboxWithImage {
-	@include style.white-gradient;
+	@include style.white-gradient(
+		$opacity-start: 0.2,
+		$opacity-end: 0.15,
+		$size: 7px
+	);
 
 	border: 1px solid transparent !important;
 	padding: 2px 3px !important;
@@ -27,10 +31,6 @@
 	height: var(--icon-size) !important;
 
 	&#Active {
-		--wg-size: 7px;
-		--wg-opacity-1: 0.2;
-		--wg-opacity-2: 0.15;
-
 		background-image: linear-gradient(0deg, #a0d5f2 0%, #66c8ff 22.5%),
 			var(--white-gradient);
 		border-color: #bbe7ff !important;

diff --git a/theme/client/library/home/libraryhome.scss b/theme/client/library/home/libraryhome.scss
@@ -10,7 +10,7 @@
 #LibraryHome,
 #UpdatesContainer {
 	background-image: none !important;
-	padding: var(--library_spacing) !important;
+	padding: var(--library_body-spacing) !important;
 
 	height: unset !important;
 }
diff --git a/theme/client/library/home/libraryhomeshowcases.scss b/theme/client/library/home/libraryhomeshowcases.scss
@@ -25,13 +25,13 @@
 
 #AddShowcaseRow {
 	margin: 0 !important;
-	margin-top: calc(var(--library_spacing) * -1) !important;
+	margin-top: calc(var(--library_body-spacing) * -1) !important;
 }
 
 #ChildrenContainer {
 	margin: 0 !important;
 
-	// for #libraryhomeplaynext_PlayNextSubhead
+	// #libraryhomeplaynext_PlayNextSubhead
 	position: relative !important;
 }
 

diff --git a/theme/client/library/library.scss b/theme/client/library/library.scss
@@ -21,7 +21,7 @@
 }
 
 #AppDetailsMain {
-	border: none !important;
+	border: var(--library_container-border) !important;
 }
 
 #LeftListSizableContainer {

diff --git a/theme/client/popups/contextmenus/contextmenu.scss b/theme/client/popups/contextmenus/contextmenu.scss
@@ -52,7 +52,7 @@ $icons: (
 #contextMenuContents {
 	@include contextmenu.container-left-border;
 
-	background-color: #f0f0f0;
+	background-color: transparent;
 	padding: 0;
 
 	position: relative;

diff --git a/theme/client/popups/contextmenus/gamelistdropdown.scss b/theme/client/popups/contextmenus/gamelistdropdown.scss
@@ -25,7 +25,7 @@
 		--size: 22px;
 
 		background-color: transparent;
-		border-radius: 3px;
+		border-radius: var(--border-radius);
 
 		position: absolute;
 		top: var(--offset);

diff --git a/theme/client/popups/contextmenus/jumplist.scss b/theme/client/popups/contextmenus/jumplist.scss
@@ -12,7 +12,7 @@
 
 	background-image: icon("context-menu-radio"), var(--contextmenu_item-gradient);
 	background-position: center;
-	border-radius: 3px;
+	border-radius: var(--border-radius);
 
 	left: -1px;
 

diff --git a/theme/shared/components/ribbon.scss b/theme/shared/components/ribbon.scss
@@ -52,35 +52,60 @@
 	}
 }
 
+.ribbon-container {
+	@include style.white-gradient(
+		$opacity-start: 0.575,
+		$opacity-end: 0.15,
+		$size: 26px
+	);
+
+	--shadow-color: rgba(255, 255, 255, 0.5);
+	--spacing: 2px;
+
+	background-image: linear-gradient(
+			0deg,
+			#bdd1ea 14.1%,
+			#93b0d5 84.62%,
+			#506580 156.7%
+		),
+		var(--white-gradient);
+	box-shadow: inset 0 0 9.3px var(--shadow-color);
+	border-radius: var(--border-radius-large);
+	gap: var(--spacing);
+	padding: var(--spacing);
+
+	display: flex;
+}
+
 .ribbon-section {
-	--shd: 1px 1px var(--shadow-color);
+	--shadow: 1px 1px var(--shadow-color);
 
 	font-size: var(--font-size-small);
 	border: 1px solid #8198b9;
 	border-radius: var(--border-radius);
 	box-shadow:
-		var(--shd),
-		inset var(--shd);
+		var(--shadow),
+		inset var(--shadow);
 
 	display: flex;
 	flex-direction: column;
 }
 
 .ribbon-section-body {
 	--max-item-count: 3;
-	--gap-y: 5px;
-	--padding-y: 6px;
-	--spacing-x: 10px;
+	--spacing: 5px;
+	--spacing-y: var(--spacing);
+	--spacing-x: calc(var(--spacing) * 2);
 
 	color: var(--blue-text);
-	gap: var(--gap-y) var(--spacing-x);
-	padding: var(--padding-y) var(--spacing-x);
+	gap: var(--spacing-y) var(--spacing-x);
+	padding: var(--spacing-y) var(--spacing-x);
 
 	display: flex;
 	flex-direction: column;
 	flex-wrap: wrap;
 	max-height: calc(
-		var(--gap-y) * (var(--max-item-count) - 1) + var(--padding-y) * 2 +
+		var(--spacing-y) * (var(--max-item-count) - 1) + var(--spacing-y) * 2 +
 			var(--icon-size) * var(--max-item-count)
 	);
 }
@@ -93,27 +118,3 @@
 	text-align: center;
 	padding: var(--spacing) calc(var(--spacing) * 2);
 }
-
-.ribbon-sections-container {
-	@include style.white-gradient;
-
-	--shadow-color: rgba(255, 255, 255, 0.5);
-	--spacing: 2px;
-	--wg-opacity-1: 0.575;
-	--wg-opacity-2: 0.15;
-	--wg-size: 26px;
-
-	background-image: linear-gradient(
-			0deg,
-			#bdd1ea 14.1%,
-			#93b0d5 84.62%,
-			#506580 156.7%
-		),
-		var(--white-gradient);
-	box-shadow: inset 0 0 9.3px var(--shadow-color);
-	border-radius: var(--border-radius-large);
-	gap: var(--spacing);
-	padding: var(--spacing);
-
-	display: flex;
-}
diff --git a/theme/shared/extends/_contextmenu.scss → theme/shared/extends/contextmenu.scss b/theme/shared/extends/_contextmenu.scss → theme/shared/extends/contextmenu.scss
@@ -1,7 +1,9 @@
 @mixin container {
-	background: #f5f5f5;
+	background: #f0f0f0;
 	border: 1px solid #979797;
-	box-shadow: var(--popup-shadow);
+	box-shadow:
+		var(--popup-shadow),
+		inset 0 0 0 var(--contextmenu_container-spacing) #f5f5f5;
 	padding: var(--contextmenu_container-spacing);
 }
 
@@ -38,7 +40,7 @@
 	// #contextmenu_UpperCase
 	text-transform: unset;
 	border: 1px solid transparent;
-	border-radius: 3px;
+	border-radius: var(--border-radius);
 	padding: 1px calc(8px * 2 + 4px) 2px
 		calc(5px + var(--contextmenu_left-spacing));
 

diff --git a/theme/shared/extends/_controls.scss → theme/shared/extends/controls.scss b/theme/shared/extends/_controls.scss → theme/shared/extends/controls.scss
@@ -1,10 +1,8 @@
 @use "shared/extends/style";
 
 @mixin button {
-	@include style.lighter;
-	@include style.white-gradient;
-	--lighter-opacity: 0.35;
-	--wg-size: 9px;
+	@include style.lighter($opacity: 0.35);
+	@include style.white-gradient($size: 9px);
 
 	background: linear-gradient(0deg, #bdd1ea 9%, #93b0d4 54%, #506580),
 		var(--lighter-bg), var(--white-gradient) !important;
@@ -42,8 +40,7 @@
 }
 
 @mixin progress-bar-inner {
-	@include style.white-gradient;
-	--wg-size: 9px;
+	@include style.white-gradient($size: 9px);
 
 	background-color: transparent !important;
 	background-image: linear-gradient(
@@ -84,7 +81,7 @@
 	font-size: var(--font-size);
 	text-shadow: none;
 	border: 1px solid #767676;
-	border-radius: 3px;
+	border-radius: var(--border-radius);
 	box-shadow: var(4px 4px 4px -2px rgba(0, 0, 0, 0.5));
 	padding: 3px 5px 3px 4px;
 }
diff --git a/theme/shared/extends/_library.scss → theme/shared/extends/library.scss b/theme/shared/extends/_library.scss → theme/shared/extends/library.scss
diff --git a/theme/shared/extends/_style.scss → theme/shared/extends/style.scss b/theme/shared/extends/_style.scss → theme/shared/extends/style.scss
@@ -14,9 +14,10 @@
 	height: var(--icon-size) !important;
 }
 
-@mixin lighter {
+@mixin lighter($opacity) {
 	--lighter: rgba(255, 255, 255, var(--lighter-opacity));
 	--lighter-bg: linear-gradient(0deg, var(--lighter), var(--lighter));
+	--lighter-opacity: #{$opacity};
 }
 
 @mixin link {
@@ -34,16 +35,18 @@
 	}
 }
 
-@mixin white-gradient {
-	--wg-opacity-1: 0.75;
-	--wg-opacity-2: 0.25;
-	--wg-color: 255, 255, 255;
+@mixin white-gradient($opacity-start: 0.75, $opacity-end: 0.25, $size: 12px) {
+	--wg-opacity-1: #{$opacity-start};
+	--wg-opacity-2: #{$opacity-end};
+	--wg-color: #fff;
 	--wg-deg: 180deg;
-	--wg-size: 12px;
+	--wg-size: #{$size};
+	// prettier-ignore
 	--white-gradient: linear-gradient(
 		var(--wg-deg),
-		rgba(var(--wg-color), var(--wg-opacity-1)),
-		rgba(var(--wg-color), var(--wg-opacity-2)) var(--wg-size),
+		color-mix(in srgb, var(--wg-color) calc(var(--wg-opacity-1) * 100%), transparent),
+		color-mix(in srgb, var(--wg-color) calc(var(--wg-opacity-2) * 100%), transparent)
+			var(--wg-size),
 		transparent var(--wg-size)
 	);
 
@@ -66,10 +69,7 @@
 }
 
 @mixin section-header {
-	@include white-gradient;
-	--wg-size: 7px;
-	--wg-opacity-1: 0.5;
-	--wg-opacity-2: 0.15;
+	@include white-gradient($opacity-start: 0.5, $opacity-end: 0.15, $size: 7px);
 	--bg: #bdd1ea;
 
 	background-image: linear-gradient(180deg, var(--bg), var(--bg)),

diff --git a/theme/shared/scrollbar.scss b/theme/shared/scrollbar.scss
@@ -34,13 +34,19 @@
 	box-shadow: inset 0 0 0 1px var(--button-shadow) !important;
 
 	&:hover {
+		--button-border: #3c7fb1;
+		--button-shadow: rgba(255, 255, 255, 0.9);
+
 		--gradient-color-1: rgb(227, 244, 252);
 		--gradient-color-2: rgb(214, 238, 251);
 		--gradient-color-3: rgb(169, 219, 246);
 		--gradient-color-4: rgb(156, 202, 227);
 	}
 
 	&:active {
+		--button-border: #18598a;
+		--button-shadow: #fff;
+
 		--gradient-color-1: rgb(202, 236, 249);
 		--gradient-color-2: rgb(175, 225, 247);
 		--gradient-color-3: rgb(111, 202, 240);
@@ -66,16 +72,6 @@
 
 	display: flex !important;
 	height: 16px;
-
-	&:hover {
-		--button-border: #3c7fb1;
-		--button-shadow: rgba(255, 255, 255, 0.9);
-	}
-
-	&:active {
-		--button-border: #18598a;
-		--button-shadow: #fff;
-	}
 }
 
 @each $arrow in decrement, increment {

diff --git a/theme/shared/vars.scss b/theme/shared/vars.scss
@@ -12,8 +12,8 @@
 	--font-size: 9pt;
 	--font-size-small: 8pt;
 
-	--border-radius-large: 4px;
-	--border-radius: 2px;
+	--border-radius-large: 5px;
+	--border-radius: 2.5px;
 
 	--anim-time: 150ms;
 	--icon-size: 16px;