fix: container support for tabline

akshat46 · Mar 4, 2021 · 4a21dc9 · 4a21dc9
1 parent 625c05c
commit 4a21dc9
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 2 deletions.
diff --git a/chrome/config.css b/chrome/config.css
@@ -1,8 +1,6 @@
 /* order of these files is important and should not be changed */
 
 @import "icons/extension-icons.css";
-@import "window-controls/wc-without-tabline.css";
-@import "hide-tabline.css";
 @import "userChrome-static.css";
 
 :root {

diff --git a/chrome/userChrome-tabline.css b/chrome/userChrome-tabline.css
@@ -43,8 +43,61 @@ tab:not([pinned="true"]) .tab-stack:hover .tab-icon-image {
     transform: translateX(-23px) !important;
 }
 
+/* containers */
+tab:not([selected="true"]).identity-color-blue > .tab-stack,
+tab:not([selected="true"]).identity-color-orange > .tab-stack,
+tab:not([selected="true"]).identity-color-green > .tab-stack,
+tab:not([selected="true"]).identity-color-pink > .tab-stack{
+    border-radius: 0 0 7px 7px !important;
+}
+
+tab[selected="true"].identity-color-blue > .tab-stack .tab-label-container,
+tab[selected="true"].identity-color-orange > .tab-stack .tab-label-container,
+tab[selected="true"].identity-color-green > .tab-stack .tab-label-container,
+tab[selected="true"].identity-color-pink > .tab-stack .tab-label-container{
+   color: #000 !important;
+}
+
+/* blue */
+tab[selected="true"].identity-color-blue > .tab-stack > .tab-background{
+   background: linear-gradient(to right, #3182CE , #0BC5EA) !important;
+}
+
+tab:not([selected="true"]).identity-color-blue > .tab-stack > .tab-background{
+    border-top: solid 4px #63B3ED !important;
+}
+
+/* orange */
+tab[selected="true"].identity-color-orange > .tab-stack > .tab-background{
+   background: linear-gradient(to right, #DD6B20 , #F56565) !important;
+}
+
+tab:not([selected="true"]).identity-color-orange > .tab-stack > .tab-background{
+    border-top: solid 4px #F6AD55 !important;
+}
+
+/* green */
+tab[selected="true"].identity-color-green > .tab-stack > .tab-background{
+   background: linear-gradient(to right, #38A169 , #38B2AC) !important;
+}
+
+tab:not([selected="true"]).identity-color-green > .tab-stack > .tab-background{
+    border-top: solid 4px #68D391 !important;
+}
+
+/* pink */
+tab[selected="true"].identity-color-pink > .tab-stack > .tab-background{
+   background: linear-gradient(to right, #D53F8C , #9F7AEA) !important;
+}
+
+tab:not([selected="true"]).identity-color-pink > .tab-stack > .tab-background{
+    border-top: solid 4px #F687B3 !important;
+}
+
+
 .tab-stack .tab-close-button {
     border-radius: 50%;
+    margin-left: -20px !important;
     background: var(--lwt-text-color);
     fill: var(--lwt-accent-color) !important;
     transform: translateX(30px) !important;
@@ -54,3 +107,8 @@ tab:not([pinned="true"]) .tab-stack:hover .tab-icon-image {
 .tab-stack:hover .tab-close-button {
     transform: translateX(0px) !important;
 }
+
+#tabbrowser-tabs[closebuttons="activetab"] > #tabbrowser-arrowscrollbox > 
+.tabbrowser-tab > .tab-stack > .tab-content > .tab-close-button:not([selected="true"]){
+    display: block !important;
+}
diff --git a/chrome/variables.css b/chrome/variables.css
@@ -209,6 +209,28 @@
     --toolbarbutton-active-background: var(--lwt-toolbarbutton-active-background, hsla(0, 0%, 100%, 0.17)) !important;
 }
 
+/* Container identity colors */
+
+.identity-color-pink {
+    --identity-tab-color: #ED64A6 !important;
+    --identity-icon-color: #ED64A6 !important;
+}
+
+.identity-color-blue {
+    --identity-tab-color: #4299E1 !important;
+    --identity-icon-color: #4299E1 !important;
+}
+
+.identity-color-green {
+    --identity-tab-color: #48BB78 !important;
+    --identity-icon-color: #48BB78 !important;
+}
+
+.identity-color-orange {
+    --identity-tab-color: #ED8936 !important;
+    --identity-icon-color: #ED8936 !important;
+}
+
 /* /1* special case for urlbar buttons *1/ */
 /* :-moz-any(#urlbar, #searchbar) { */
 /*     --toolbarbutton-hover-background: var(--dark-4) !important; */