Bug 1408146 - Port
bug 1391539 to TB: Show tab separators when hovering tabs. r=jorgk
--- a/mail/base/content/tabmail.css
+++ b/mail/base/content/tabmail.css
@@ -41,17 +41,17 @@
.tab-label {
white-space: nowrap;
}
.tab-close-button {
display: none;
}
-.tabmail-tabs > .tabmail-tab:first-child > .tab-stack > .tab-content >
+.tabmail-tabs > .tabmail-tab[first-tab] > .tab-stack > .tab-content >
.tab-close-button {
visibility: collapse;
}
.tabmail-tabs:not([closebuttons="noclose"]):not([closebuttons="closeatend"]) >
.tabmail-tab[selected="true"]:not(:only-child) > .tab-stack > .tab-content > .tab-close-button {
display: -moz-box;
}
--- a/mail/themes/linux/mail/tabmail.css
+++ b/mail/themes/linux/mail/tabmail.css
@@ -33,20 +33,16 @@ tabpanels {
/**
* Tab
*/
.tabmail-tab {
list-style-image: url("moz-icon://stock/gtk-file?size=menu");
}
-.tabmail-tab:not(:first-child) > .tab-stack > .tab-background[selected=true] {
- border-inline-start-style: solid;
-}
-
.tabmail-tab > .tab-stack > .tab-content > .tab-label-container {
/* tabmail-tab focus ring */
border: 1px dotted transparent;
margin: -1px !important; /* let the border not consume any space, like outline */
}
.tabmail-tab[selected]:focus > .tab-stack > .tab-content > .tab-label-container {
border-color: -moz-DialogText;
--- a/mail/themes/osx/mail/tabmail.css
+++ b/mail/themes/osx/mail/tabmail.css
@@ -26,23 +26,19 @@
margin-top: 1px;
margin-bottom: 0;
}
.tabmail-tab {
list-style-image: url("chrome://messenger/skin/icons/item.png");
}
-.tab-background[selected=true] {
- border-inline-start-style: solid;
-}
-
-:root:-moz-any(:not([tabsintitlebar]), [sizemode=fullscreen]) .tabmail-tab:first-child >
- .tab-stack > .tab-background[selected=true] {
- border-inline-start-style: none;
+:root[tabsintitlebar]:not([sizemode=fullscreen]) .tabmail-tab[first-tab]::before {
+ content: '';
+ display: -moz-box;
}
.tabmail-tab[type="glodaSearch"] .tab-stack > .tab-content > .tab-icon-image {
transform: scaleX(-1);
}
.tabmail-tab:not(:hover) > .tab-stack > .tab-content >
.tab-icon-image:not([selected="true"]) {
--- a/mail/themes/shared/mail/tabmail.css
+++ b/mail/themes/shared/mail/tabmail.css
@@ -1,13 +1,14 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
#tabs-toolbar {
+ --tabs-top-border-width: 0px;
--tab-toolbar-overlap: 1px;
}
#tabs-toolbar:-moz-lwtheme {
--tab-line-color: var(--lwt-accent-color);
}
#tabs-toolbar {
@@ -100,28 +101,29 @@
/* Selected tab */
.tab-background {
border: 1px none transparent;
background-clip: padding-box;
}
+:root:not([tabsintitlebar]) #tabs-toolbar,
+#mail-toolbar-menubar2[toolbarname]:not([autohide=true]) ~ #tabs-toolbar {
+ --tabs-top-border-width: 1px;
+}
+
+:root:not([tabsintitlebar]) .tab-background,
#mail-toolbar-menubar2[toolbarname]:not([autohide=true]) ~ #tabs-toolbar > .tabmail-tabs >
.tabmail-tab > .tab-stack > .tab-background {
border-top-style: solid;
}
.tab-background[selected=true] {
- border-inline-end-style: solid;
- border-color: var(--tabs-border);
- border-image: linear-gradient(var(--tabs-border),
- var(--tabs-border) calc(100% - 1px - var(--tab-toolbar-overlap)),
- transparent calc(100% - 1px - var(--tab-toolbar-overlap)));
- border-image-slice: 1;
+ border-top-color: var(--tabs-border);
background-color: var(--toolbar-bgcolor);
background-image: var(--toolbar-bgimage);
background-repeat: repeat-x;
}
.tab-line[selected=true] {
background-color: var(--tab-line-color);
}
@@ -178,35 +180,56 @@
@media (min-resolution: 1.1dppx) {
.tab-throbber {
list-style-image: url("chrome://global/skin/icons/loading@2x.png");
}
}
/* Tab separators */
+.tabmail-tab::after,
.tabmail-tab::before {
- margin-top: 5px;
- margin-bottom: 4px;
- margin-inline-start: -1px;
- border-left: 1px solid currentColor;
- opacity: 0;
- content: '';
- display: -moz-box;
+ border-left: 1px solid;
+ border-image: linear-gradient(transparent 5px,
+ currentColor 5px,
+ currentColor calc(100% - 5px),
+ transparent calc(100% - 5px));
+ border-image-slice: 1;
+ opacity: 0.3;
}
-.tabmail-tab:not([selected]):not(:hover) +
-.tabmail-tab:not([selected]):not(:hover)::before {
- opacity: 0.2;
- transition: opacity 100ms ease;
+/* Show full height tab separators on hover. */
+.tabmail-tab:not([selected=true]):last-child:hover::after,
+.tabmail-tab:not([selected]) + .tabmail-tab:not([selected]):hover::before,
+.tabmail-tab:not([selected]):hover + .tabmail-tab:not([selected])::before,
+:root[tabsintitlebar] #mail-toolbar-menubar2[autohide=true] ~ #tabs-toolbar > .tabmail-tabs > .tabmail-tab::after,
+:root[tabsintitlebar] #mail-toolbar-menubar2[autohide=true] ~ #tabs-toolbar > .tabmail-tabs > .tabmail-tab::before {
+ border-image: linear-gradient(transparent calc(1px + var(--tabs-top-border-width)),
+ currentColor calc(1px + var(--tabs-top-border-width)),
+ currentColor calc(100% - 1px - var(--tab-toolbar-overlap)),
+ transparent calc(100% - 1px - var(--tab-toolbar-overlap)));
+ border-image-slice: 1;
}
-:root[tabsintitlebar] #tabs-toolbar > .tabmail-tabs > .tabmail-tab::before {
- margin-top: 0;
- margin-bottom: 1px;
+/* Show full height tab separators on selected tabs. */
+.tabmail-tab[visuallyselected]::before,
+.tabmail-tab[visuallyselected]:last-child::after,
+.tabmail-tab[visuallyselected] + .tabmail-tab::before {
+ border-color: var(--tabs-border);
+ border-image: linear-gradient(transparent 1px,
+ var(--tabs-border) 1px,
+ var(--tabs-border) calc(100% - 1px - var(--tab-toolbar-overlap)),
+ transparent calc(100% - 1px - var(--tab-toolbar-overlap))) 1 !important;
+ opacity: 1;
+}
+
+.tabmail-tab:last-child::after,
+.tabmail-tab + .tabmail-tab::before {
+ content: '';
+ display: -moz-box;
}
/**
* Tab Scrollbox Arrow Buttons
*/
.tabmail-arrowscrollbox > .scrollbutton-up,
.tabmail-arrowscrollbox > stack > .scrollbutton-down {
--- a/mail/themes/windows/mail/tabmail.css
+++ b/mail/themes/windows/mail/tabmail.css
@@ -21,20 +21,16 @@
* Tab
*/
.tabmail-tab {
list-style-image: url("chrome://global/skin/icons/folder-item.png");
-moz-image-region: rect(0px, 16px, 16px, 0px);
}
-.tabmail-tab:not(:first-child) > .tab-stack > .tab-background[selected=true] {
- border-inline-start-style: solid;
-}
-
tabpanels {
-moz-appearance: none;
background-color: transparent;
}
/* tabmail-tab focus ring */
.tabmail-tab > .tab-stack > .tab-content > .tab-label-container {
border: 1px dotted transparent;
@@ -101,21 +97,16 @@ tabpanels {
:root[tabsintitlebar] #tabs-toolbar {
--toolbarbutton-icon-fill-opacity: 1;
}
:root[tabsintitlebar][sizemode=normal] #tabs-toolbar {
margin-top: 6px;
}
- #mail-toolbar-menubar2:not([autohide=true]) ~ #tabs-toolbar > .tabmail-tabs >
- .tabmail-tab > .tab-stack > .tab-background {
- border-top-style: none;
- }
-
#alltabs-button:not(:-moz-lwtheme):not([disabled]) {
border-color: transparent;
margin-top: 0;
margin-bottom: -1px;
}
#alltabs-button:not(:-moz-lwtheme):not([disabled]):hover,
.tabmail-arrowscrollbox >
@@ -158,20 +149,20 @@ tabpanels {
#tabs-toolbar {
margin-top: 6px;
}
}
}
@media (-moz-windows-glass),
(-moz-os-version: windows-win8) and (-moz-windows-default-theme) {
- :root[sizemode=normal] .tabmail-tab:first-child > .tab-stack >
- .tab-background[selected=true] {
- border-inline-start-style: solid;
- border-inline-start-color: rgba(10%, 10%, 10%, .4);
+ :root[sizemode=normal] .tabmail-tab[first-tab][visuallyselected]:before {
+ content: '';
+ display: -moz-box;
+ --tabs-border: rgba(10%, 10%, 10%, .4);
}
}
@media (-moz-os-version: windows-win8) and (-moz-windows-default-theme) {
#messengerWindow[darkwindowframe="true"]
#tabs-toolbar:not(:-moz-lwtheme):not(:-moz-window-inactive),
#messengerWindow[darkwindowframe="true"]
.tabmail-tab:not([selected="true"]):not(:-moz-lwtheme):not(:-moz-window-inactive) {