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

akshat46 · akshat46 · commit ddfa7a8c67fb · 2021-03-06T09:56:25.000-08:00
diff --git a/chrome/config.css b/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 */
diff --git a/chrome/window-controls/wc-with-tabline.css b/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);
 }
diff --git a/chrome/window-controls/wc-without-tabline-r.css b/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 {
diff --git a/chrome/window-controls/wc-without-tabline.css b/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;
diff --git a/chrome/window-controls/window-controls.css b/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;

Original file line number	Diff line number	Diff line change
`@@ -1,11 +1,14 @@`
	`1`	`+@import "window-controls.css";`
	`2`	`+@import "wc-without-tabline.css";`
	`3`	`+`
`1`	`4`	`#TabsToolbar.browser-toolbar {`
`2`	`5`	`left: auto !important;`
`3`	`6`	`right: var(--wc-right-space) !important;`
`4`	`7`	`}`
`5`	`8`
`6`	`9`	`:root:not([inFullscreen]) toolbar#nav-bar {`
`7`	`10`	`margin-left: 0 !important;`
`8`		`- margin-right: calc(var(--wc-right-space) * 2 + 60px) !important;`
	`11`	`+ margin-right: calc(var(--wc-left-space) * 2 + 60px) !important;`
`9`	`12`	`}`
`10`	`13`
`11`	`14`	`.titlebar-buttonbox {`