mirror of
https://gitlab.winehq.org/wine/wine-gecko.git
synced 2024-09-13 09:24:08 -07:00
468608bd3e
--HG-- rename : browser/themes/windows/browser-lightweightTheme.css => browser/themes/osx/browser-lightweightTheme.css extra : rebase_source : bff72afa778aeec4789a81ec29e73e6df5cc18c9
258 lines
7.5 KiB
CSS
258 lines
7.5 KiB
CSS
%if 0
|
|
/* 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/. */
|
|
%endif
|
|
|
|
%define tabHeight 30px
|
|
%define tabCurveWidth 30px
|
|
%define tabCurveHalfWidth 15px
|
|
|
|
/* image preloading hack */
|
|
#TabsToolbar::before {
|
|
content: '';
|
|
display: block;
|
|
background-image:
|
|
url(chrome://browser/skin/tabbrowser/tab-background-end.png),
|
|
url(chrome://browser/skin/tabbrowser/tab-background-middle.png),
|
|
url(chrome://browser/skin/tabbrowser/tab-background-start.png);
|
|
}
|
|
|
|
.tabbrowser-tab,
|
|
.tabs-newtab-button {
|
|
-moz-appearance: none;
|
|
background-color: transparent;
|
|
border-radius: 0;
|
|
border-width: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.tabbrowser-tab {
|
|
-moz-box-align: stretch;
|
|
}
|
|
|
|
/* The selected tab should appear above adjacent tabs and .tabs-newtab-button */
|
|
.tabbrowser-tab[selected=true] {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.tab-background-middle {
|
|
-moz-box-flex: 1;
|
|
background-clip: padding-box;
|
|
border-left: @tabCurveHalfWidth@ solid transparent;
|
|
border-right: @tabCurveHalfWidth@ solid transparent;
|
|
margin: 0 -@tabCurveHalfWidth@;
|
|
}
|
|
|
|
.tab-content {
|
|
-moz-padding-end: 9px;
|
|
-moz-padding-start: 9px;
|
|
}
|
|
|
|
.tab-throbber,
|
|
.tab-icon-image,
|
|
.tab-close-button {
|
|
margin-top: 1px;
|
|
}
|
|
|
|
.tab-throbber,
|
|
.tab-icon-image {
|
|
height: 16px;
|
|
width: 16px;
|
|
}
|
|
|
|
.tab-icon-image {
|
|
list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
|
|
}
|
|
|
|
.tab-throbber {
|
|
list-style-image: url("chrome://browser/skin/tabbrowser/connecting.png");
|
|
}
|
|
|
|
.tab-throbber[progress] {
|
|
list-style-image: url("chrome://browser/skin/tabbrowser/loading.png");
|
|
}
|
|
|
|
.tab-throbber:not([pinned]),
|
|
.tab-icon-image:not([pinned]) {
|
|
-moz-margin-end: 6px;
|
|
}
|
|
|
|
.tab-label {
|
|
-moz-margin-end: 0;
|
|
-moz-margin-start: 0;
|
|
}
|
|
|
|
.tab-close-button {
|
|
-moz-margin-start: 4px;
|
|
-moz-margin-end: -2px;
|
|
padding: 0;
|
|
}
|
|
|
|
.tab-background,
|
|
.tabs-newtab-button {
|
|
/* overlap the tab curves */
|
|
-moz-margin-end: -@tabCurveHalfWidth@;
|
|
-moz-margin-start: -@tabCurveHalfWidth@;
|
|
}
|
|
|
|
.tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
|
|
-moz-padding-end: @tabCurveHalfWidth@;
|
|
-moz-padding-start: @tabCurveHalfWidth@;
|
|
}
|
|
|
|
.tab-background-start[selected=true]::after,
|
|
.tab-background-start[selected=true]::before,
|
|
.tab-background-start,
|
|
.tab-background-end,
|
|
.tab-background-end[selected=true]::after,
|
|
.tab-background-end[selected=true]::before {
|
|
min-height: @tabHeight@;
|
|
width: @tabCurveWidth@;
|
|
}
|
|
|
|
/* Selected tab */
|
|
|
|
/*
|
|
Tab background pseudo-elements which are positioned above .tab-background-start/end:
|
|
- ::before - provides the fill of the tab curve and is clipped to the tab shape. This is where
|
|
pointer events go for the curve.
|
|
- ::after - provides the border/stroke of the tab curve and is overlayed above ::before. Pointer
|
|
events go through to ::before to get the proper shape.
|
|
*/
|
|
|
|
|
|
.tab-background-start[selected=true]::after,
|
|
.tab-background-end[selected=true]::after {
|
|
/* position ::after on top of its parent */
|
|
-moz-margin-start: -@tabCurveWidth@;
|
|
margin-bottom: -1px;
|
|
display: -moz-box;
|
|
}
|
|
|
|
.tab-background-start[selected=true]::before,
|
|
.tab-background-end[selected=true]::before {
|
|
/* all ::before pseudo elements */
|
|
content: "";
|
|
display: -moz-box;
|
|
}
|
|
|
|
.tab-background-start[selected=true]:-moz-locale-dir(ltr)::before,
|
|
.tab-background-end[selected=true]:-moz-locale-dir(rtl)::before {
|
|
clip-path: url(chrome://browser/content/browser.xul#tab-curve-clip-path-start);
|
|
}
|
|
|
|
.tab-background-end[selected=true]:-moz-locale-dir(ltr)::before,
|
|
.tab-background-start[selected=true]:-moz-locale-dir(rtl)::before {
|
|
clip-path: url(chrome://browser/content/browser.xul#tab-curve-clip-path-end);
|
|
}
|
|
|
|
.tab-background-start[selected=true]:-moz-locale-dir(ltr)::after,
|
|
.tab-background-end[selected=true]:-moz-locale-dir(rtl)::after {
|
|
content: url(chrome://browser/skin/tabbrowser/tab-stroke-start.png);
|
|
}
|
|
|
|
.tab-background-end[selected=true]:-moz-locale-dir(ltr)::after,
|
|
.tab-background-start[selected=true]:-moz-locale-dir(rtl)::after {
|
|
content: url(chrome://browser/skin/tabbrowser/tab-stroke-end.png);
|
|
}
|
|
|
|
.tab-background-start[selected=true]::before,
|
|
.tab-background-end[selected=true]::before {
|
|
background-color: -moz-dialog;
|
|
background-image: @fgTabTexture@;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.tab-background-middle[selected=true] {
|
|
background-color: transparent;
|
|
background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle.png),
|
|
@fgTabBackgroundMiddle@;
|
|
background-repeat: repeat-x;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
/* Selected tab lightweight theme styles */
|
|
.tab-background-middle[selected=true]:-moz-lwtheme {
|
|
/* Don't stretch the LWT header images */
|
|
background-size: 100% 100%, 100% 100%, auto auto;
|
|
}
|
|
|
|
.tab-background-start[selected=true]:-moz-lwtheme::before,
|
|
.tab-background-end[selected=true]:-moz-lwtheme::before {
|
|
background-image: @fgTabTextureLWT@;
|
|
}
|
|
|
|
.tab-background-middle[selected=true]:-moz-lwtheme {
|
|
background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle-lwtheme.png), @fgTabTextureLWT@;
|
|
}
|
|
|
|
.tab-background-start[selected=true]:-moz-lwtheme::before,
|
|
.tab-background-end[selected=true]:-moz-lwtheme::before,
|
|
.tab-background-middle[selected=true]:-moz-lwtheme {
|
|
background-color: transparent;
|
|
}
|
|
|
|
/* End selected tab */
|
|
|
|
/* new tab button border and gradient on hover */
|
|
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]),
|
|
.tabs-newtab-button:hover {
|
|
background-image: url(chrome://browser/skin/tabbrowser/tab-background-start.png),
|
|
url(chrome://browser/skin/tabbrowser/tab-background-middle.png),
|
|
url(chrome://browser/skin/tabbrowser/tab-background-end.png);
|
|
background-position: left bottom, @tabCurveWidth@ bottom, right bottom;
|
|
background-repeat: no-repeat;
|
|
background-size: @tabCurveWidth@ 100%, calc(100% - (2 * @tabCurveWidth@)) 100%, @tabCurveWidth@ 100%;
|
|
}
|
|
|
|
/* Tab pointer-events */
|
|
.tabbrowser-tab {
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Allow pointer-events on ::before of the ends of selected tabs
|
|
since they are clipped to the curve shape. */
|
|
.tab-background-start[selected=true]::before,
|
|
.tab-background-end[selected=true]::before,
|
|
.tab-background-middle,
|
|
.tabs-newtab-button,
|
|
.tab-close-button {
|
|
pointer-events: auto;
|
|
}
|
|
|
|
/* Pinned tabs */
|
|
|
|
/* pinned tabs need position: fixed for separator when overflowing */
|
|
#tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned]::before {
|
|
position: fixed;
|
|
}
|
|
|
|
.tabbrowser-tab[pinned][titlechanged]:not([selected="true"]) > .tab-stack > .tab-content {
|
|
background-image: radial-gradient(farthest-corner at center bottom, rgb(255,255,255) 3%, rgba(186,221,251,0.75) 20%, rgba(127,179,255,0.25) 40%, rgba(127,179,255,0) 70%);
|
|
background-position: center bottom 1px;
|
|
background-repeat: no-repeat;
|
|
background-size: 85% 100%;
|
|
}
|
|
|
|
/* Background tab separators (3px wide).
|
|
Also show separators beside the selected tab when dragging it. */
|
|
#tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
|
|
.tabbrowser-tab:not([selected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
|
|
#tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([selected]):not([beforehovered]):not(:hover)::after {
|
|
-moz-margin-start: -1.5px;
|
|
-moz-margin-end: -1.5px;
|
|
content: url(chrome://browser/skin/tabbrowser/tab-separator.png);
|
|
display: -moz-box;
|
|
width: 3px;
|
|
}
|
|
|
|
/* New tab button */
|
|
|
|
.tabs-newtab-button {
|
|
clip-path: url(chrome://browser/content/browser.xul#tab-clip-path-outer);
|
|
width: 66px;
|
|
}
|