style(css): refactor styles and update for Firefox v133.0

Author: amnweb

README.md

@@ -3,31 +3,25 @@
 <img src="screenshots/firefox-25-11-2023.jpg" alt="screenshot" title="Screenshot" width="900">
 <img src="screenshots/Screenshot 2023-12-04 144143.png" alt="screenshot" title="Screenshot" width="900">
 
-
 # Rounded Corners
 <img src="screenshots/rounded-corners.png" alt="screenshot" title="Screenshot" width="900">
 
-# Sidebar Support
-<img src="screenshots/sidebar-demo.png" alt="screenshot" title="Screenshot" width="900">
-<img src="screenshots/sidebar-demo-video.gif" alt="screenshot" title="Screenshot" width="900">
- 
 
 # How to install
 1. Go to `about:support` and click the "Open Folder/Show in Finder" button for the root directory of your browser profile/s.
 2. Download and copy the `chrome` folder and `user.js` into the profile folder.
 3. Restart Firefox.
 
+> **Note:** FireFox v133.0+ only
+
 # Tweaks
 - To enable macOS button style, open `user.js`, find `fp.tweak.macos-button` and set it to `true`.  
 - To disable bookmarks autohide open `user.js`, find `fp.tweak.autohide-bookmarks` and set it to `false`.
 - To enable or disable rounded corners, open `user.js`, find `fp.tweak.rounded-corners` and set it to `true` or `false`.  
-- To enable support for sidebar, open `user.js`, find `fp.tweak.sidebar-enabled` and set it to `true` or `false`.
 - To enable or disable White Mode, open `user.js`, find `browser.in-content.dark-mode` and set it to `true` or `false`. Then find and set `ui.systemUsesDarkTheme` to `1` or `0`.
-> [!NOTE]
-> To get the sidebar support you will need to install the [Sidebar Tabs](https://github.com/asamuzaK/sidebarTabs) extension.
 
-# Experimental
-Install or update Firefox Plus directly from PowerShell.
+
+# Install or update Firefox Plus directly from PowerShell.
 
 1. Open PowerShell.
 2. Copy and paste this command
@@ -46,4 +40,4 @@ iex ((New-Object System.Net.WebClient).DownloadString('https://raw.githubusercon
 
 # License
 
-This project is licensed under the MIT License.
+This project is licensed under the MIT License.

chrome/content/common.css

@@ -275,4 +275,6 @@
         backdrop-filter: blur(12px);
     }
 
-}
+}
+
+ 

chrome/global/general.css

@@ -841,4 +841,11 @@ menuitem[checked="true"]>.menu-iconic-left,
 
 .findbar-textbox[status="notfound"] {
     outline: 2px solid #E22850 !important;
+  }
+
+  #tabbrowser-tabbox {  
+    @media (-moz-bool-pref: "sidebar.revamp") {
+      outline: 0px solid transparent !important;
+      box-shadow: none !important
+    }
   }

chrome/global/rounded-corners.css

@@ -1,4 +1,4 @@
-:root[tabsintitlebar] #titlebar:-moz-window-inactive {
+:root[tabsintitlebar] #TabsToolbar:-moz-window-inactive {
   opacity: 1 !important;
 }
 #main-window:not([chromehidden~="toolbar"]) {

chrome/icons/icons.css

@@ -45,37 +45,35 @@
 			list-style-image: url("mac-close.svg") !important;
 		}
 	}
-
+    .titlebar-buttonbox {
+        margin: 0 8px !important;
+    }
 	.titlebar-button {
 		& > .toolbarbutton-icon {
-			width: 24px !important;
-			height: 24px !important;
+			width: 14px !important;
+			height: 14px !important;
 		}
 	}
 	.titlebar-button {
-		padding: 0 0px !important;
+		padding: 0 4px !important;
 		filter: grayscale(1) brightness(6);
 		opacity: 0.25 !important;
 	}
 
-	#titlebar:hover .titlebar-button {
+	#TabsToolbar:hover .titlebar-button {
 		filter: grayscale(0) brightness(1);
 		opacity: 0.8 !important;
 	}
 
-	:-moz-window-inactive .titlebar-button {
-		opacity: 0.5 !important;
-	}
-
-	.titlebar-button:hover,
+ 	.titlebar-button:hover,
 	.titlebar-button:not(.titlebar-close):hover {
 		background-color: transparent !important;
 	}
 
 	toolbar[brighttext] .titlebar-close:hover:active {
 		background-color: transparent !important;
 	}
-	#titlebar .titlebar-button:hover {
+	#TabsToolbar .titlebar-button:hover {
 		opacity: 1 !important;
 	}
 }