diff --git a/theme/shared/browser/extensions/tree-style-tab.inc.css b/theme/shared/browser/extensions/tree-style-tab.inc.css index 135acc91..20e0f631 100644 --- a/theme/shared/browser/extensions/tree-style-tab.inc.css +++ b/theme/shared/browser/extensions/tree-style-tab.inc.css @@ -92,14 +92,15 @@ .treestyletab-splitter[orient="horizontal"] { -moz-appearance: none !important; background: #fafafa; - border-right: 1px solid #a7aba7; min-width: 4px; width: 4px; + border-right: 1px solid; + border-color: #a7aba7 !important; } tabbrowser[treestyletab-tabbar-position="right"] .treestyletab-splitter[orient="horizontal"] { border-right: none; - border-left: 1px solid #a7aba7 + border-left: 1px solid; } .treestyletab-splitter[orient="horizontal"]:hover { @@ -111,6 +112,7 @@ tabbrowser[treestyletab-tabbar-position="right"] .treestyletab-splitter[orient=" #main-window@darkTheme@ .treestyletab-splitter { background: #454c4c; + border-color: #1e2222 !important; } /* ====== Tab ====== */ @@ -136,7 +138,7 @@ tabbrowser[treestyletab-tabbar-position="right"] .treestyletab-splitter[orient=" outline-offset: -3px; } -@treeDefault@ .tabbrowser-tab[selected]:hover, +@treeDefault@ .tabbrowser-tab[visuallyselected]:hover, @treeDefault@[darkvariant] .tabbrowser-tab:hover, @treeDefault@[darkvariant] .tabs-newtab-button:hover, @treeDefault@[darkvariant] #new-tab-button:hover { @@ -160,30 +162,23 @@ tabbrowser[treestyletab-tabbar-position="right"] .treestyletab-splitter[orient=" /* Invert indentation (right aligned) */ @treeDefault@[treestyletab-tab-inverted] .tab-content .tab-text { - margin-right: 4px !important; text-align: right; } /* Invert content (icon on the right) */ -@treeDefault@[treestyletab-tab-contents-inverted] .tab-content .tab-icon-image { - margin-left: 2px; -} -, -@treeDefault@[treestyletab-tab-contents-inverted] .tab-content .tab-text { - margin: 0 20px !important; -} +@treeDefault@[treestyletab-tab-contents-inverted] .tab-content .tab-icon-image, @treeDefault@[treestyletab-tab-contents-inverted] .tab-close-button { - margin: 0 4px; + margin: 0 2px; } /* ====== Close Button ====== */ -@treeDefault@ .tab-close-button { +@treeDefault@[treestyletab-narrow-scrollbar] .tab-close-button { display: none; } @treeDefault@ .tabbrowser-tab:hover .tab-close-button, -@treeDefault@ .tabbrowser-tab[selected] .tab-close-button { +@treeDefault@ .tabbrowser-tab[visuallyselected] .tab-close-button { display: block; } @@ -191,7 +186,7 @@ tabbrowser[treestyletab-tabbar-position="right"] .treestyletab-splitter[orient=" display: none; } -@treeDefault@ .tabbrowser-tab[selected] .tab-close-button { +@treeDefault@ .tabbrowser-tab[visuallyselected] .tab-close-button { list-style-image: url(chrome://symbolic-icons/skin/close_white.svg) !important; } @@ -200,41 +195,45 @@ tabbrowser[treestyletab-tabbar-position="right"] .treestyletab-splitter[orient=" @tree@ .tabbrowser-tab:hover .tab-background-start, @tree@ .tabbrowser-tab:hover .tab-background-middle, @tree@ .tabbrowser-tab:hover .tab-background-end, -@tree@ .tabbrowser-tab[selected] .tab-background-start, -@tree@ .tabbrowser-tab[selected] .tab-background-middle, -@tree@ .tabbrowser-tab[selected] .tab-background-end { +@tree@ .tabbrowser-tab[visuallyselected] .tab-background-start, +@tree@ .tabbrowser-tab[visuallyselected] .tab-background-middle, +@tree@ .tabbrowser-tab[visuallyselected] .tab-background-end { display: none; } -@treeDefault@ .tabbrowser-tab[selected] { +@treeDefault@ .tabbrowser-tab[visuallyselected] { border-radius: 0; background: Highlight; } -@treeDefault@[darkvariant] .tabbrowser-tab[selected] { +@treeDefault@[darkvariant] .tabbrowser-tab[visuallyselected] { background: #215d9c; } -@treeDefault@ .tabbrowser-tab[selected] > .tab-stack { +@treeDefault@ .tabbrowser-tab[visuallyselected] > .tab-stack { color: HighlightText; } /* ====== Pinned Tabs ====== */ -@treeDefault@ .tabbrowser-tab[pinned] .tab-icon-image { - width: 18px; - height: 18px; - margin-left: -3px; -} - @treeDefault@ .tabbrowser-tab[pinned] { padding-bottom: 30px; padding-right: 30px; + min-width: 34px; +} + +@treeDefault@ .tabbrowser-tab[pinned] .tab-stack { + margin: 0 4px; } @treeDefault@ .tabbrowser-tab[pinned] .tab-content { - padding-left: 0; - margin-left: 11px; + margin: 0 4px !important; +} + +@treeDefault@ .tabbrowser-tab[pinned] .tab-icon-image { + width: 18px; + height: 18px; + margin: 0 4px !important; } /* ====== Expander Icon ====== */ @@ -248,20 +247,24 @@ tabbrowser[treestyletab-tabbar-position="right"] .treestyletab-splitter[orient=" } /* Selected or Dark theme*/ -@treeDefault@@modernBlack@ .tabbrowser-tab[selected] .treestyletab-twisty, +@treeDefault@@modernBlack@ .tabbrowser-tab[visuallyselected] .treestyletab-twisty, @treeDefault@@modernBlack@[darkvariant] .treestyletab-twisty { list-style-image: url("chrome://symbolic-icons/skin/extensions/twisty-adwaita-white-l.png") !important; } -@treeDefault@@modernBlack@[treestyletab-tab-contents-inverted] .tabbrowser-tab[selected] .treestyletab-twisty, +@treeDefault@@modernBlack@[treestyletab-tab-contents-inverted] .tabbrowser-tab[visuallyselected] .treestyletab-twisty, @treeDefault@@modernBlack@[darkvariant][treestyletab-tab-contents-inverted] .treestyletab-twisty { list-style-image: url("chrome://symbolic-icons/skin/extensions/twisty-adwaita-white-r.png") !important; } /* ====== Tab Notification Bubble ====== */ -.tab-icon-overlay { +@treeDefault@ .tab-icon-overlay { margin-top: -10px !important; - -moz-margin-start: -12px !important; - -moz-margin-end: -4px !important; + -moz-margin-start: -16px !important; + -moz-margin-end: 0 !important; +} +@treeDefault@[treestyletab-tab-contents-inverted] .tab-icon-overlay { + -moz-margin-start: -8px !important; + -moz-margin-end: -8px !important; }