fix(firefoxCSS): window-controls on right side with tabline

chrome/config.css

@@ -38,12 +38,12 @@
     /* uncomment and add gradient value for selected tab gradient*/
 
     /******WINDOW CONTROL PLACEMENT VARS******/
-    --wc-vertical-shift: 15px;
+    --wc-vertical-shift: 18px;
     /* larger value moves window controls down,*/
     /* can be negative(moves controls up) */
     /* Experiemntal: 55px if tabline visible, -25px if tabline hidden */
-    --wc-left-space: 10px; /* add space to the left of window controls*/
-    --wc-right-space: 15px; /* add space to the right of window controls*/
+    --wc-left-space: 15px; /* add space to the left of window controls*/
+    --wc-right-space: 18px; /* add space to the right of window controls*/
     /* left-space shifts window-controls */
     /* if you want to shift window controls to the left: positive value */
     /* if you want to shift them to the right: smaller or negative value */

chrome/window-controls/wc-with-tabline.css

@@ -1,8 +1,6 @@
 @import "window-controls.css";
 
-#TabsToolbar .titlebar-buttonbox-container {
-    display: inline-block !important;
-    position: absolute;
-    top: var(--wc-vertical-shift) !important;
-    left: var(--wc-horizontal-shift) !important;
+#TabsToolbar.browser-toolbar {
+    margin-left: var(--wc-left-space);
+    margin-right: var(--wc-right-space);
 }

chrome/window-controls/wc-without-tabline-r.css

@@ -1,11 +1,14 @@
+@import "window-controls.css";
+@import "wc-without-tabline.css";
+
 #TabsToolbar.browser-toolbar {
     left: auto !important;
     right: var(--wc-right-space) !important;
 }
 
 :root:not([inFullscreen]) toolbar#nav-bar {
     margin-left: 0 !important;
-    margin-right: calc(var(--wc-right-space) * 2 + 60px) !important;
+    margin-right: calc(var(--wc-left-space) * 2 + 60px) !important;
 }
 
 .titlebar-buttonbox {

chrome/window-controls/wc-without-tabline.css

@@ -1,5 +1,21 @@
 @import "window-controls.css";
 
+:root:not([inFullscreen]) toolbar#nav-bar {
+    z-index: 1 !important;
+    position: relative !important;
+    margin-left: calc(
+        var(--wc-right-space) * 2 + 60px
+    ) !important; /* shift toolbar to the right based on initial width */
+}
+
+#TabsToolbar .toolbar-items {
+    display: none !important;
+}
+
+.titlebar-buttonbox {
+    flex-direction: row-reverse;
+}
+
 #TabsToolbar.browser-toolbar {
     display: inline-block !important;
     position: absolute;

chrome/window-controls/window-controls.css

@@ -1,11 +1,3 @@
-:root:not([inFullscreen]) toolbar#nav-bar {
-    z-index: 1 !important;
-    position: relative !important;
-    margin-left: calc(
-        var(--wc-right-space) * 2 + 60px
-    ) !important; /* shift toolbar to the right based on initial width */
-}
-
 /*-min max close size*/
 .titlebar-button > .toolbarbutton-icon {
     height: 14px !important;
@@ -14,29 +6,25 @@
     min-width: 14px !important;
 }
 
-#TabsToolbar .toolbar-items{
-    display: none !important;
-}
-
-#titlebar{
+#titlebar {
     -moz-appearance: none !important;
 }
 
 .titlebar-button {
-	transition: all 0.3s ease !important;
-	padding: 0px 8px !important;
-	background: none !important;
+    transition: all 0.3s ease !important;
+    padding: 0px 8px !important;
+    background: none !important;
     -moz-context-properties: fill, fill-opacity !important;
 }
 
 .titlebar-buttonbox {
     display: flex;
-    flex-direction: row-reverse;
     -moz-context-properties: fill, fill-opacity !important;
 }
 
 /* close button */
 .titlebar-close {
+    -moz-appearance: none !important;
     fill: var(--red) !important;
     opacity: 0.7 !important;
     list-style-image: url(circle.svg) !important;
@@ -48,6 +36,7 @@
 
 /* minimize button */
 .titlebar-min {
+    -moz-appearance: none !important;
     fill: var(--yellow) !important;
     opacity: 0.7 !important;
     list-style-image: url(circle.svg) !important;
@@ -59,6 +48,7 @@
 
 /* maximize button */
 .titlebar-max {
+    -moz-appearance: none !important;
     fill: var(--green) !important;
     opacity: 0.7 !important;
     list-style-image: url(circle.svg) !important;
@@ -70,6 +60,7 @@
 
 /* restore button */
 .titlebar-restore {
+    -moz-appearance: none !important;
     fill: var(--green) !important;
     opacity: 0.7 !important;
     list-style-image: url(circle.svg) !important;