feat(theme): popups - style context menus

skin.json

@@ -11,6 +11,10 @@
 		{
 			"MatchRegexString": ".fullheight",
 			"TargetCss": "dist/index.css"
+		},
+		{
+			"MatchRegexString": ".friendsui-container",
+			"TargetCss": "dist/index.css"
 		}
 	]
 }

src/client/popups/contextmenu/appactionbutton.scss

@@ -0,0 +1,6 @@
+#RemotePlayAnywhereDescription {
+	color: var(--contextmenu_fg-secondary);
+}
+
+#StreamingContextMenuItem {
+}

src/client/popups/contextmenu/contextmenu.scss

@@ -0,0 +1,105 @@
+@use "../../../shared/extends/contextmenu" as contextmenu;
+
+:root {
+	--contextmenu_container-spacing: 2px;
+	--contextmenu_fg: #000;
+	--contextmenu_fg-secondary: #6d6d6d;
+	--contextmenu_item-border: #9fc5f3;
+	// TODO: this is transparent
+	--contextmenu_item-gradient-start: #ecf5f9;
+	--contextmenu_item-gradient-end: #ddeefb;
+	--contextmenu_item-gradient: linear-gradient(
+		180deg,
+		var(--contextmenu_item-gradient-start),
+		var(--contextmenu_item-gradient-end)
+	);
+	--contextmenu_left-spacing: 27px;
+	--contextmenu_separator-dark: #e0e0e0;
+	--contextmenu_separator-light: #fff;
+}
+
+$icons: (
+	"PlusCircle": "add",
+	"Play": "play",
+);
+
+#Arrow {
+	background-color: var(--contextmenu_fg);
+	mask: var(--icon-arrow-right);
+
+	position: absolute;
+	right: 8px;
+	width: 4px;
+	height: 7px;
+
+	svg {
+		display: none;
+	}
+}
+
+#contextMenu {
+	@include contextmenu.container;
+
+	// child
+	& + & {
+		--offset: -3px;
+
+		margin-top: var(--offset);
+		margin-left: var(--offset);
+	}
+}
+
+#contextMenuContents {
+	@include contextmenu.container-left-border;
+
+	background-color: #f0f0f0;
+	padding: 0;
+
+	position: relative;
+}
+
+#contextMenuItem {
+	@include contextmenu.item;
+
+	@each $class, $icon in $icons {
+		&:has(.SVGIcon_#{$class}) {
+			--icon: var(--icon-#{$icon});
+
+			svg {
+				display: none;
+			}
+		}
+	}
+
+	&#active {
+		@include contextmenu.item-active;
+	}
+
+	&.disabled {
+		--contextmenu_fg: var(--contextmenu_fg-secondary);
+		--contextmenu_item-border: #d3d3d3;
+		--contextmenu_item-gradient-start: #f4f5f5;
+		--contextmenu_item-gradient-end: #e6e6e6;
+	}
+
+	&::before {
+		content: "";
+
+		@include contextmenu.icon-pos;
+
+		background-image: var(--icon);
+	}
+
+	svg:not([class]) {
+		@include contextmenu.icon-pos;
+	}
+}
+
+#ContextMenuSeparator {
+	@include contextmenu.separator;
+
+	// jumplist
+	&:last-child {
+		display: none;
+	}
+}

src/client/popups/contextmenu/friendsui.scss

@@ -0,0 +1,20 @@
+@use "../../../shared/extends/contextmenu" as contextmenu;
+
+.contextMenuUnselectable,
+.contextMenuUnselectable.disabled,
+.contextMenuGameTitle,
+.contextMenuBroadcast,
+.contextMenuGameOptions {
+	background-color: transparent;
+}
+
+.contextMenuGameName {
+	color: inherit;
+	font-weight: bold;
+}
+
+.recentName {
+	@include contextmenu.item;
+
+	margin: 0;
+}

src/client/popups/contextmenu/gamelistdropdown.scss

@@ -0,0 +1,57 @@
+@use "../../../shared/extends/contextmenu" as contextmenu;
+
+#AppCount {
+	opacity: 1;
+	color: var(--contextmenu_fg-secondary);
+}
+
+#DropDown {
+	@include contextmenu.container-left-border;
+
+	&::before {
+		top: var(--contextmenu_container-spacing);
+		bottom: var(--contextmenu_container-spacing);
+
+		margin-left: var(--contextmenu_container-spacing);
+	}
+}
+
+#Row {
+	@include contextmenu.item;
+
+	.DialogCheckbox {
+		--icon: icon("context-menu-checkmark");
+		--offset: -1px;
+		--size: 22px;
+
+		background-color: transparent;
+		border-radius: 3px;
+
+		position: absolute;
+		top: var(--offset);
+		left: var(--offset);
+		width: var(--size);
+		height: var(--size);
+
+		&.Active {
+			@include contextmenu.item-active;
+		}
+
+		// TODO: no idea if it's ever disabled, but whatever
+		&.Disabled {
+			--icon: icon("context-menu-checkmark-disabled");
+		}
+
+		svg {
+			background-image: var(--icon);
+
+			* {
+				display: none;
+			}
+		}
+	}
+}
+
+#Rule {
+	@include contextmenu.separator;
+}

src/client/popups/contextmenu/gamerecordingshare.scss

@@ -0,0 +1,53 @@
+@use "../../../shared/extends/contextmenu" as contextmenu;
+
+#AllChats {
+	--icon: var(--icon-users);
+}
+
+#AllChats,
+#Chat {
+	gap: 0;
+
+	flex-direction: row;
+	max-width: unset;
+	min-width: unset;
+
+	.avatarHolder {
+		--size: 22px;
+
+		position: absolute;
+		top: 0;
+		left: 1px;
+	}
+}
+
+#ChatDivider {
+	@include contextmenu.separator;
+}
+
+#ChatLabel,
+#SectionTitle {
+	display: none;
+}
+
+#ChatRow {
+	margin: 0;
+
+	flex-direction: column;
+}
+
+#Name {
+	mask: none;
+	text-align: start;
+	padding: 0;
+}
+
+#ShareMenuLabel {
+	margin: 0;
+}
+
+#ShareSheet {
+	svg {
+		display: none;
+	}
+}

src/client/popups/contextmenu/jumplist.scss

@@ -0,0 +1,22 @@
+@use "../../../shared/extends/contextmenu" as contextmenu;
+
+#GameIcon {
+	@include contextmenu.icon-pos;
+}
+
+#Icon:not(div) {
+	--icon-size: 22px;
+
+	@include contextmenu.icon-pos;
+	@include contextmenu.item-active;
+
+	background-image: icon("context-menu-radio"), var(--contextmenu_item-gradient);
+	background-position: center;
+	border-radius: 3px;
+
+	left: -1px;
+
+	path {
+		display: none;
+	}
+}

src/client/popups/contextmenu/library.scss

@@ -0,0 +1,55 @@
+$icons: (
+	//"BorrowApp"
+	"Cancel": "cancel",
+	"Connect": "play",
+	"Download": "download",
+	"Install": "download",
+	"Launch": "play",
+	//"Pause"
+	"Play": "play",
+	"PlayMusic": "play",
+	//"PreLoad"
+	//"PurchaseApp"
+	"Resume": "play",
+	"Stop": "cancel",
+	//"Stream"
+	"Update": "update"
+);
+
+#ContextMenuAction {
+	background-image: none;
+	font-weight: bold;
+	letter-spacing: 0;
+
+	// TODO
+	&.Stream,
+	&.Connect,
+	&.Launch,
+	&.PlayMusic,
+	&.Play {
+		//background: linear-gradient(-45deg, #59bf4040 0%, #5be33a40 70%);
+	}
+
+	&.Download,
+	&.Update,
+	&.PreLoad,
+	&.Resume,
+	&.Pause,
+	&.BorrowApp,
+	&.Stop,
+	&.Cancel,
+	&.Install,
+	&.PurchaseApp {
+		//background: linear-gradient(-45deg, #0056d640 8%, #1a9fff40 90%);
+	}
+
+	@each $class, $icon in $icons {
+		&.#{$class} {
+			--icon: var(--icon-#{$icon});
+		}
+	}
+
+	svg {
+		display: none;
+	}
+}

src/client/popups/contextmenu/menu.scss

@@ -0,0 +1,7 @@
+@use "../../../shared/extends/contextmenu" as contextmenu;
+
+#Separator {
+	@include contextmenu.separator;
+
+	border: none;
+}

src/client/popups/contextmenu/screenshotmanagerdialog.scss

@@ -0,0 +1,26 @@
+@use "../../../shared/extends/contextmenu" as contextmenu;
+
+#ComboboxSelector {
+	padding: 0;
+}
+
+#ComboboxSelectorContextMenu {
+	@include contextmenu.container;
+
+	border-radius: 0;
+	margin: 0;
+}
+
+#Option {
+	margin: 0;
+}
+
+#SearchBar {
+	opacity: 1;
+	border: none;
+	border-radius: 0;
+	box-shadow: none;
+	margin: 0;
+	margin-bottom: 2px;
+	margin-left: calc(var(--contextmenu_left-spacing) + 5px);
+}

src/shared/dialog.scss

@@ -42,3 +42,7 @@
 .DialogInput {
 	@extend %text-input-compact;
 }
+
+.DialogToggle_Label {
+	color: inherit;
+}