diff options
Diffstat (limited to 'comm/mail/themes/shared/mail/tabmail.css')
| -rw-r--r-- | comm/mail/themes/shared/mail/tabmail.css | 484 |
1 files changed, 484 insertions, 0 deletions
diff --git a/comm/mail/themes/shared/mail/tabmail.css b/comm/mail/themes/shared/mail/tabmail.css new file mode 100644 index 0000000000..e179394919 --- /dev/null +++ b/comm/mail/themes/shared/mail/tabmail.css @@ -0,0 +1,484 @@ +/* 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/. */ + +:root { + --tabs-toolbar-background-color: rgba(0, 0, 0, 0.075); + --tabs-toolbar-box-shadow: inset 0 3px 9px -6px rgba(0, 0, 0, 0.5); +} + +@media (prefers-color-scheme: dark) { + :root { + --tabs-toolbar-background-color: rgba(0, 0, 0, 0.15); + } +} + +@media (prefers-color-scheme: light) { + :root { + --tabs-toolbar-background-color: rgba(255, 255, 255, 0.15); + } +} + +@media (prefers-contrast) { + :root { + --tabs-toolbar-background-color: transparent; + --tabs-toolbar-box-shadow: none; + } +} + +#tabmail { + overflow: hidden; +} + +#tabmail-tabs .tabmail-tab:first-child .tab-close-button, +#tabmail-tabs[closebuttons="activetab"] .tabmail-tab:not([selected="true"]) .tab-close-button { + display: none; +} + +.tabmail-tab[selected="true"] { + box-shadow: 0 2px 8px -5px var(--color-black); +} + +.tab-drop-indicator { + position: absolute; + top: 0; + /* The z-index needs to be big enough to trump other positioned UI pieces + that we want to overlay. The selected tab uses 2. */ + z-index: 3; +} + +#tabs-toolbar { + appearance: none; + --tabs-top-border-width: 1px; + background-image: linear-gradient(to top, var(--chrome-content-separator-color) 0, + var(--tabs-toolbar-background-color) 1px); + box-shadow: var(--tabs-toolbar-box-shadow); + padding-top: 3px; + padding-inline: 3px; +} + +#tabs-toolbar:-moz-lwtheme { + --tabline-color: var(--lwt-tab-line-color, currentColor); +} + +#tabmail-arrowscrollbox { + min-height: var(--tab-min-height); +} + +#tabmail-arrowscrollbox::part(scrollbox-clip) { + contain: inline-size; +} + +#tabpanelcontainer { + min-height: 0; +} + +.tab-stack { + min-height: inherit; +} + +.tabmail-tab { + appearance: none; + align-items: stretch; + flex: 100 100; + background-color: transparent; + border-radius: 4px 4px 0 0; + border-width: 0; + margin: 0; + margin-inline-end: 1px; + padding: 0; + max-width: var(--tab-max-width); + min-width: var(--tab-min-width); + width: 0; + overflow: hidden; +} + +/* The selected tab should appear above adjacent tabs and the highlight + of #tabs-toolbar */ +.tabmail-tab[selected=true] { + position: relative; + z-index: 2; +} + +.tab-content { + padding-inline: 9px; + display: flex; + align-items: center; + min-width: 0; +} + +.tab-content > :is(.tab-throbber, .tab-icon-image, .tab-close-button) { + flex: 0 0 auto; +} + +.tab-content > .tab-label-container { + flex: 1 1 auto; +} + +.tab-label-container { + overflow: hidden; +} + +.tab-label-container[textoverflow] { + mask-image: linear-gradient(to left, transparent, black 2em); +} + +.tab-label-container[textoverflow]:-moz-locale-dir(rtl) { + mask-image: linear-gradient(to right, transparent, black 2em); +} + +.tab-throbber, +.tab-icon-image, +button.tab-close-button { + margin-block: 1px 0; +} + +.tab-throbber, +.tab-icon-image { + height: 16px; + width: 16px; + margin-inline-end: 6px; + -moz-context-properties: fill, stroke, stroke-opacity; + fill: color-mix(in srgb, currentColor 20%, transparent); + stroke: currentColor; +} + +.tab-icon-image:not([src]) { + visibility: hidden; +} + +.tab-throbber:not([busy]):not([thinking]), +.tab-throbber[busy] + .tab-icon-image, +.tab-throbber[thinking] + .tab-icon-image, +.tab-throbber[busy][thinking] + .tab-icon-image { + display: none; +} + +.tab-label { + white-space: nowrap; + margin-inline-end: 0; + margin-inline-start: 0; +} + +button.tab-close-button { + margin-inline: 1px -2px; + padding: 2px; +} + +.tab-close-icon { + width: 16px; + height: 16px; + -moz-context-properties: fill, fill-opacity; + fill: currentColor; + fill-opacity: var(--toolbarbutton-icon-fill-opacity); +} + +.tabmail-tab:not([selected],:-moz-lwtheme) { + color: inherit; +} + +.tabmail-tab:-moz-lwtheme { + color: inherit; +} + +.tabmail-tab[visuallyselected=true]:-moz-lwtheme { + color: var(--lwt-tab-text, var(--toolbar-color, inherit)); +} + +.tab-line { + height: 2px; + margin-top: 3px; + margin-inline: 3px; + border-radius: 3px; +} + +/* Selected tab */ + +.tab-background { + background-clip: padding-box; +} + +.tab-background[selected=true] { + background-color: var(--toolbar-bgcolor); + background-repeat: repeat-x; +} + +.tab-line[selected=true] { + background-color: var(--tabline-color); +} + +/* + * LightweightThemeConsumer will set the current lightweight theme's header + * image to the lwt-header-image variable, used in each of the following rulesets. + */ + +/* Lightweight theme on tabs */ +.tabmail-tab .tab-background[selected=true]:-moz-lwtheme { + background-attachment: scroll, scroll, fixed; + background-color: transparent; + background-image: linear-gradient(var(--lwt-selected-tab-background-color, transparent), + var(--lwt-selected-tab-background-color, transparent)), + linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), + var(--lwt-header-image, none); + background-position: 0 0, 0 0, right top; + background-repeat: repeat-x, repeat-x, no-repeat; + background-size: auto 100%, auto 100%, auto auto; +} + +/* Tab hover */ + +.tabmail-tab:hover .tab-background:not([selected=true]) { + background-color: rgba(0, 0, 0, 0.1); +} + +/* Adjust button hover color relative to the darker background. */ +#tabs-toolbar:not([brighttext]) button.tab-close-button:hover { + background-color: color-mix(in srgb, transparent 80%, CurrentColor); +} + +#tabs-toolbar:not([brighttext]) button.tab-close-button:hover:active { + background-color: color-mix(in srgb, transparent 70%, CurrentColor); +} + +#tabs-toolbar[brighttext] .tabmail-tab:hover .tab-background:not([selected=true]) { + background-color: rgba(255, 255, 255, 0.05); +} + +.tab-line:not([selected=true]) { + opacity: 0; + transform: scaleX(0); + transition: transform 250ms var(--animation-easing-function), + opacity 250ms var(--animation-easing-function); +} + +.tabmail-tab:hover .tab-line:not([selected=true]) { + background-color: rgba(0, 0, 0, 0.2); + opacity: 1; + transform: none; +} + +#tabs-toolbar[brighttext] .tabmail-tab:hover .tab-line:not([selected=true]) { + background-color: rgba(255, 255, 255, 0.2); +} + +.tab-throbber { + list-style-image: none; +} + +@media (prefers-reduced-motion: reduce) { + .tab-throbber[busy] { + background-image: url("chrome://messenger/skin/icons/hourglass.svg"); + background-position: center; + background-repeat: no-repeat; + opacity: 0.8; + } +} + +@media (prefers-reduced-motion: no-preference) { + .tab-throbber[busy] { + position: relative; + overflow: hidden; + } + + .tab-throbber[busy]::before { + content: ""; + position: absolute; + background-image: var(--icon-loading); + background-position: left center; + background-repeat: no-repeat; + width: 480px; + height: 100%; + animation: tab-throbber-animation 1.05s steps(30) infinite; + opacity: 0.7; + } + + .tab-throbber[busy]:-moz-locale-dir(rtl)::before { + animation-name: tab-throbber-animation-rtl; + } + + @keyframes tab-throbber-animation { + 0% { transform: translateX(0); } + 100% { transform: translateX(-100%); } + } + + @keyframes tab-throbber-animation-rtl { + 0% { transform: translateX(0); } + 100% { transform: translateX(100%); } + } +} + +/** + * Tab Scrollbox Arrow Buttons + */ + +#tabmail-arrowscrollbox::part(scrollbutton-up), +#tabmail-arrowscrollbox::part(scrollbutton-down) { + fill: var(--toolbarbutton-icon-fill, currentColor); + fill-opacity: var(--toolbarbutton-icon-fill-opacity); +} + +/* Tab Overflow */ +#tabmail-arrowscrollbox:not([scrolledtostart])::part(overflow-start-indicator), +#tabmail-arrowscrollbox:not([scrolledtoend])::part(overflow-end-indicator) { + width: 18px; + background-image: url("chrome://messenger/skin/icons/overflow-indicator.png"); + background-size: 17px 100%; + background-repeat: no-repeat; + border-left: 1px solid; + border-image: linear-gradient(rgba(255,255,255,.2), + rgba(255,255,255,.2) calc(100% - var(--tabs-tabbar-border-size)), + transparent calc(100% - var(--tabs-tabbar-border-size))); + border-image-slice: 1; + margin-bottom: var(--tabs-tabbar-border-size); + pointer-events: none; + position: relative; + z-index: 3; /* the selected tab's z-index + 1 */ +} + +#tabmail-arrowscrollbox:-moz-locale-dir(rtl)::part(overflow-start-indicator), +#tabmail-arrowscrollbox:-moz-locale-dir(ltr)::part(overflow-end-indicator) { + transform: scaleX(-1); +} + +#tabmail-arrowscrollbox:not([scrolledtostart])::part(overflow-start-indicator) { + margin-inline-start: -1px; + margin-inline-end: -17px; +} + +#tabmail-arrowscrollbox:not([scrolledtoend])::part(overflow-end-indicator) { + margin-inline-start: -17px; + margin-inline-end: -1px; +} + +#tabmail-arrowscrollbox[scrolledtostart]::part(overflow-start-indicator), +#tabmail-arrowscrollbox[scrolledtoend]::part(overflow-end-indicator) { + opacity: 0; +} + +#tabmail-arrowscrollbox::part(overflow-start-indicator), +#tabmail-arrowscrollbox::part(overflow-end-indicator) { + transition: opacity 150ms ease; +} + +/** + * All Tabs Button + */ + +#alltabs-button { + list-style-image: url("chrome://messenger/skin/icons/arrow-dropdown.svg"); +} + +#alltabs-button .toolbarbutton-icon { + width: 16px; + height: 16px; +} + +#alltabs-button > .toolbarbutton-text, +#alltabs-button > .toolbarbutton-menu-dropmarker { + display: none; +} + +/* All Tabs Menupopup */ + +.alltabs-item { + list-style-image: var(--icon-draft); +} + +.alltabs-item[selected] { + font-weight: bold; +} + +.alltabs-item[busy] { + list-style-image: url("chrome://global/skin/icons/loading.png") !important; +} + +.alltabs-item > .menu-iconic-left { + fill: MenuText; +} + +.alltabs-item[_moz-menuactive="true"] > .menu-iconic-left { + fill: -moz-menuhovertext; +} + +/* Content Tabs */ +.chromeTabInstance[collapsed="false"] .contentTabToolbox, +.contentTabInstance[collapsed="false"] .contentTabToolbox { + display: none; +} + +.contentTabAddress { + display: flex; + align-items: center; +} + +.contentTabAddress > .contentTabSecurity { + flex: 0 0 auto; +} + +.contentTabAddress > .contentTabUrlInput { + flex: 1 1 auto; +} + +.contentTabSecurity { + height: 16px; + width: 16px; + -moz-context-properties: fill; + fill: currentColor; + /* Position within the input. */ + position: relative; + /* Make sure we take up no width in the flow. */ + margin-inline-end: -16px; + /* Move within the input. Input has a margin of 3px and border of 1px, so this + * is 5px within. */ + inset-inline-start: 9px; +} + +.contentTabSecurity.secure-connection-icon { + fill: #12bc00; +} + +.contentTabSecurity:not([src]) { + display: none; +} + +.contentTabSecurity[src] + .contentTabUrlInput { + /* 5px before the icon + 16px width + 4px after. */ + padding-inline-start: 25px; +} + +.contentTabSecurity:not([src]) + .contentTabUrlInput { + padding-inline-start: 4px; +} + +.nav-button { + appearance: none; + list-style-image: var(--icon-nav-back); + border: 1px solid transparent; + border-radius: 2px; + margin: 5px 2px; + margin-inline-start: 2px; + -moz-context-properties: stroke; + stroke: currentColor; +} + +.nav-button[disabled="true"] { + color: inherit; +} + +.nav-button[disabled="true"] > .toolbarbutton-icon { + opacity: 0.4; +} + +.nav-button:not([disabled="true"]):hover { + background-color: var(--toolbarbutton-hover-background); + cursor: pointer; +} + +.nav-button > .toolbarbutton-text { + display: none; +} + +.back-btn:-moz-locale-dir(rtl), +.forward-btn:-moz-locale-dir(ltr) { + list-style-image: var(--icon-nav-forward); +} |