diff --git a/chrome/config.css b/chrome/config.css index baa96dd..8d08e37 100644 --- 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 index cf1106b..523bf14 100644 --- 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; +} \ No newline at end of file diff --git a/chrome/variables.css b/chrome/variables.css index 4b9c62a..4c9bac8 100755 --- 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; */