🎨 ux(browser): update chrome css to include a different background image and some fixes

.config/browser/chrome/userChrome.css

@@ -9,28 +9,16 @@
 /*------------------------------------------------*/
 /* Background Color */
 
-@media (prefers-color-scheme: dark) {
+#browser {
-  #tabbrowser-tabbox,
+  background-image: url(arch-logo.png) !important;
-  #tabbrowser-tabpanels,
+  background-size: cover !important;
-  #browser,
+  background-position: center !important;
-  #appcontent {
-    background-image: url(night-lake.jpg) !important;
-    background-size: cover !important;
-    background-position: center !important;
-  }
 }
-@media (prefers-color-scheme: light) {
+
-  #navigator-toolbox,
+#tabbrowser-tabpanels,
-  #sidebar-box,
+#appcontent,
-  #tabbrowser-tabbox,
+#tabbrowser-tabbox {
-  #tabbrowser-tabpanels,
+  background: none !important;
-  #browser,
-  #appcontent,
-  #sidebar-select-box,
-  .browser-sidebar2,
-  tab.tabbrowser-tab * {
-    background-color: #e6e6e6 !important;
-  }
 }
 
 @media (prefers-color-scheme: dark) {
@@ -673,7 +661,7 @@ tab,
 /* Expand Side bar on hover */
 
 #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] {
-  --sidebar-width: 40px;
+  --sidebar-width: 69px;
   --sidebar-hover-width: 350px;
   background: none !important;
   position: relative;
@@ -789,7 +777,7 @@ tab,
 @media (prefers-color-scheme: dark) {
   #sidebar2-box browser {
     border-radius: 15px !important;
-    margin: 10px 10px 10px 0px !important;
+    margin: 3px 10px 10px 0px !important;
     border: 3px solid rgba(0, 0, 0, 0);
     transition: border 0.3s ease;
     box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5);
@@ -801,6 +789,10 @@ tab,
   }
 }
 
+.browser-sidebar2 {
+  background: none !important;
+}
+
 @media (prefers-color-scheme: light) {
   #sidebar2-box browser {
     border-radius: 15px !important;