Steam beta: headerbar fixes

tkashkin · Nov 16, 2023 · 75d4092 · 75d4092
1 parent 830d91f
commit 75d4092
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 31 deletions.
diff --git a/adwaita/variants/base/main_window/headerbar/headerbar.css b/adwaita/variants/base/main_window/headerbar/headerbar.css
@@ -305,3 +305,11 @@ body.ContextMenuPopupBody.DesktopUI div[class*="steamtemplates_NewIndicator_"] s
 	opacity: 0 !important;
 }
 
+/* Headerbar - hide empty divs in menus */
+#SteamDesktop .steamdesktop_TopBar_3Z7VQ div[class*="supernav_SuperNav_"] div:not([class]),
+#SteamDesktop .steamdesktop_TopBar_3Z7VQ div[class*="steamdesktop_RootMenuBar_"] div:not([class]),
+#SteamDesktop .steamdesktop_TopBar_3Z7VQ div[class*="steamdesktop_RootMenuBar_"] div:not([class])
+{
+	display: none !important;
+}
+
diff --git a/adwaita/variants/base/main_window/headerbar/menu.css b/adwaita/variants/base/main_window/headerbar/menu.css
@@ -77,29 +77,25 @@
 	-webkit-mask-repeat: no-repeat;
 	-webkit-mask-position: center;
 	-webkit-mask-size: 16px;
-}
-
-#SteamDesktop .steamdesktop_TopBar_3Z7VQ div[class*="rootmenu_RootMenuButton_"]:nth-child(1)::before
-{
 	-webkit-mask-image: var(--icon_menu_main);
 }
 
-#SteamDesktop .steamdesktop_TopBar_3Z7VQ div[class*="rootmenu_RootMenuButton_"]:nth-child(2)::before
+#SteamDesktop .steamdesktop_TopBar_3Z7VQ div[class*="rootmenu_RootMenuButton_"] ~ div[class*="rootmenu_RootMenuButton_"]::before
 {
 	-webkit-mask-image: var(--icon_menu_view);
 }
 
-#SteamDesktop .steamdesktop_TopBar_3Z7VQ div[class*="rootmenu_RootMenuButton_"]:nth-child(3)::before
+#SteamDesktop .steamdesktop_TopBar_3Z7VQ div[class*="rootmenu_RootMenuButton_"] ~ div[class*="rootmenu_RootMenuButton_"] ~ div[class*="rootmenu_RootMenuButton_"]::before
 {
 	-webkit-mask-image: var(--icon_menu_friends);
 }
 
-#SteamDesktop .steamdesktop_TopBar_3Z7VQ div[class*="rootmenu_RootMenuButton_"]:nth-child(4)::before
+#SteamDesktop .steamdesktop_TopBar_3Z7VQ div[class*="rootmenu_RootMenuButton_"] ~ div[class*="rootmenu_RootMenuButton_"] ~ div[class*="rootmenu_RootMenuButton_"] ~ div[class*="rootmenu_RootMenuButton_"]::before
 {
 	-webkit-mask-image: var(--icon_menu_games);
 }
 
-#SteamDesktop .steamdesktop_TopBar_3Z7VQ div[class*="rootmenu_RootMenuButton_"]:nth-child(5)::before
+#SteamDesktop .steamdesktop_TopBar_3Z7VQ div[class*="rootmenu_RootMenuButton_"] ~ div[class*="rootmenu_RootMenuButton_"] ~ div[class*="rootmenu_RootMenuButton_"] ~ div[class*="rootmenu_RootMenuButton_"] ~ div[class*="rootmenu_RootMenuButton_"]::before
 {
 	-webkit-mask-image: var(--icon_menu_help);
 }

diff --git a/adwaita/variants/base/main_window/headerbar/navigation.css b/adwaita/variants/base/main_window/headerbar/navigation.css
@@ -128,11 +128,14 @@
 {
 	display: none !important;
 	background: none !important;
-	height: 0px !important;
+	height: 0 !important;
 }
 
-/* Navigation Icon Hackery */
-#SteamDesktop .steamdesktop_TopBar_3Z7VQ div[class*="supernav_SuperNav_"] > div:nth-child(n+3):nth-child(-n+7) > div::before
+/**
+ * Navigation Icon Hackery
+ * `~` selector is used instead of `:nth-child(n of <selector>)` because of outdated CEF
+ */
+#SteamDesktop .steamdesktop_TopBar_3Z7VQ div[class*="supernav_SuperNav_"] > div[class*="supernav_SuperNavMenu_"] > div::before
 {
 	background-color: var(--fg);
 	content: "";
@@ -141,49 +144,45 @@
 	-webkit-mask-repeat: no-repeat;
 	-webkit-mask-position: center;
 	-webkit-mask-size: 16px;
-}
-
-#SteamDesktop .steamdesktop_TopBar_3Z7VQ div[class*="supernav_SuperNav_"] > div:nth-child(3) > div::before
-{
 	-webkit-mask-image: var(--icon_nav_store);
 }
 
-#SteamDesktop .steamdesktop_TopBar_3Z7VQ div[class*="supernav_SuperNav_"] > div:nth-child(4) > div::before
+#SteamDesktop .steamdesktop_TopBar_3Z7VQ div[class*="supernav_SuperNav_"] > div[class*="supernav_SuperNavMenu_"] ~ div[class*="supernav_SuperNavMenu_"] > div::before
 {
 	-webkit-mask-image: var(--icon_nav_library);
 }
 
-#SteamDesktop .steamdesktop_TopBar_3Z7VQ div[class*="supernav_SuperNav_"] > div:nth-child(5) > div::before
+#SteamDesktop .steamdesktop_TopBar_3Z7VQ div[class*="supernav_SuperNav_"] > div[class*="supernav_SuperNavMenu_"] ~ div[class*="supernav_SuperNavMenu_"] ~ div[class*="supernav_SuperNavMenu_"] > div::before
 {
 	-webkit-mask-image: var(--icon_nav_community);
 }
 
-#SteamDesktop .steamdesktop_TopBar_3Z7VQ div[class*="supernav_SuperNav_"] > div:nth-child(6) > div::before
+#SteamDesktop .steamdesktop_TopBar_3Z7VQ div[class*="supernav_SuperNav_"] > div[class*="supernav_SuperNavMenu_"] ~ div[class*="supernav_SuperNavMenu_"] ~ div[class*="supernav_SuperNavMenu_"] ~ div[class*="supernav_SuperNavMenu_"] > div::before
 {
 	-webkit-mask-image: var(--icon_nav_profile);
 }
 
-#SteamDesktop .steamdesktop_TopBar_3Z7VQ div[class*="supernav_SuperNav_"] > div:nth-child(7) > div::before
-{
-	-webkit-mask-image: var(--icon_nav_console);
-}
-
 /* Profile button text */
-#SteamDesktop .steamdesktop_TopBar_3Z7VQ div[class*="supernav_SuperNav_"] > div:nth-child(6) > div > span
+#SteamDesktop .steamdesktop_TopBar_3Z7VQ div[class*="supernav_SuperNav_"] > div[class*="supernav_SuperNavMenu_"] ~ div[class*="supernav_SuperNavMenu_"] ~ div[class*="supernav_SuperNavMenu_"] ~ div[class*="supernav_SuperNavMenu_"] > div > span
 {
 	text-indent: -9999px !important;
 	line-height: 0 !important;
 }
 
 /* Profile button fake text */
-#SteamDesktop .steamdesktop_TopBar_3Z7VQ div[class*="supernav_SuperNav_"] > div:nth-child(6) > div > span::after
+#SteamDesktop .steamdesktop_TopBar_3Z7VQ div[class*="supernav_SuperNav_"] > div[class*="supernav_SuperNavMenu_"] ~ div[class*="supernav_SuperNavMenu_"] ~ div[class*="supernav_SuperNavMenu_"] ~ div[class*="supernav_SuperNavMenu_"] > div > span::after
 {
 	content: var(--string_nav_profile) !important;
 	text-indent: 0 !important;
 	display: block !important;
 	line-height: 24px !important;
 }
 
+#SteamDesktop .steamdesktop_TopBar_3Z7VQ div[class*="supernav_SuperNav_"] > div[class*="supernav_SuperNavMenu_"] ~ div[class*="supernav_SuperNavMenu_"] ~ div[class*="supernav_SuperNavMenu_"] ~ div[class*="supernav_SuperNavMenu_"] ~ div[class*="supernav_SuperNavMenu_"] > div::before
+{
+	-webkit-mask-image: var(--icon_nav_console);
+}
+
 /* Small window width - make buttons compact */
 @media (max-width: 1400px)
 {
@@ -206,7 +205,7 @@
 	}
 
 	/* Profile button fake text */
-	#SteamDesktop .steamdesktop_TopBar_3Z7VQ div[class*="supernav_SuperNav_"] > div:nth-child(6) > div > span::after
+	#SteamDesktop .steamdesktop_TopBar_3Z7VQ div[class*="supernav_SuperNav_"] > div[class*="supernav_SuperNavMenu_"] ~ div[class*="supernav_SuperNavMenu_"] ~ div[class*="supernav_SuperNavMenu_"] ~ div[class*="supernav_SuperNavMenu_"] > div > span::after
 	{
 		line-height: 14px !important;
 	}
@@ -215,7 +214,7 @@
 /* Smaller window width - hide console button if it's visible */
 @media (max-width: 1200px)
 {
-	#SteamDesktop .steamdesktop_TopBar_3Z7VQ div[class*="supernav_SuperNav_"] > div:nth-child(7)
+	#SteamDesktop .steamdesktop_TopBar_3Z7VQ div[class*="supernav_SuperNav_"] > div[class*="supernav_SuperNavMenu_"] ~ div[class*="supernav_SuperNavMenu_"] ~ div[class*="supernav_SuperNavMenu_"] ~ div[class*="supernav_SuperNavMenu_"] ~ div[class*="supernav_SuperNavMenu_"]
 	{
 		display: none !important;
 	}

diff --git a/theme.json b/theme.json
@@ -1,7 +1,7 @@
 {
-    "name": "Adwaita For Steam",
-    "author": "tkashkin",
-    "version": "v1.14",
+    "name": "Adwaita for Steam",
+    "author": "tk",
+    "version": "v1.15",
     "manifest_version": 8,
     "description": "A skin to make Steam look more like a native GNOME app",
     "target": "Desktop",
@@ -132,7 +132,7 @@
             }
         },
         "Enable Custom CSS": {
-            "type": "dropdown",
+            "type": "checkbox",
             "values": {
                 "No": {},
                 "Yes": {