1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/browser/themes/shared/tabs.inc.css Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,286 @@
1.4 +%if 0
1.5 +/* This Source Code Form is subject to the terms of the Mozilla Public
1.6 + * License, v. 2.0. If a copy of the MPL was not distributed with this
1.7 + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
1.8 +%endif
1.9 +
1.10 +%define tabCurveWidth 30px
1.11 +%define tabCurveHalfWidth 15px
1.12 +
1.13 +/* image preloading hack */
1.14 +#tabbrowser-tabs::before {
1.15 + /* Because of bug 853415, we need to ordinal this to the first position: */
1.16 + -moz-box-ordinal-group: 0;
1.17 + content: '';
1.18 + display: block;
1.19 + background-image:
1.20 + url(chrome://browser/skin/tabbrowser/tab-background-end.png),
1.21 + url(chrome://browser/skin/tabbrowser/tab-background-middle.png),
1.22 + url(chrome://browser/skin/tabbrowser/tab-background-start.png);
1.23 +}
1.24 +
1.25 +#tabbrowser-tabs {
1.26 + min-height: @tabMinHeight@;
1.27 +}
1.28 +
1.29 +.tabbrowser-tab,
1.30 +.tabs-newtab-button {
1.31 + -moz-appearance: none;
1.32 + background-color: transparent;
1.33 + border-radius: 0;
1.34 + border-width: 0;
1.35 + margin: 0;
1.36 + padding: 0;
1.37 +}
1.38 +
1.39 +.tabbrowser-tab {
1.40 + -moz-box-align: stretch;
1.41 +}
1.42 +
1.43 +.tabbrowser-tab[remote] {
1.44 + text-decoration: underline;
1.45 +}
1.46 +
1.47 +/* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */
1.48 +.tabbrowser-tab[selected=true] {
1.49 + position: relative;
1.50 + z-index: 2;
1.51 +}
1.52 +
1.53 +.tab-background-middle {
1.54 + -moz-box-flex: 1;
1.55 + background-clip: padding-box;
1.56 + border-left: @tabCurveHalfWidth@ solid transparent;
1.57 + border-right: @tabCurveHalfWidth@ solid transparent;
1.58 + margin: 0 -@tabCurveHalfWidth@;
1.59 +}
1.60 +
1.61 +.tab-content {
1.62 + -moz-padding-end: 9px;
1.63 + -moz-padding-start: 9px;
1.64 +}
1.65 +
1.66 +.tab-throbber,
1.67 +.tab-icon-image,
1.68 +.tab-close-button {
1.69 + margin-top: 1px;
1.70 +}
1.71 +
1.72 +.tab-throbber,
1.73 +.tab-icon-image {
1.74 + height: 16px;
1.75 + width: 16px;
1.76 +}
1.77 +
1.78 +.tab-icon-image {
1.79 + list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
1.80 +}
1.81 +
1.82 +.tab-throbber {
1.83 + list-style-image: url("chrome://browser/skin/tabbrowser/connecting.png");
1.84 +}
1.85 +
1.86 +.tab-throbber[progress] {
1.87 + list-style-image: url("chrome://browser/skin/tabbrowser/loading.png");
1.88 +}
1.89 +
1.90 +.tab-throbber:not([pinned]),
1.91 +.tab-icon-image:not([pinned]) {
1.92 + -moz-margin-end: 6px;
1.93 +}
1.94 +
1.95 +.tab-label {
1.96 + -moz-margin-end: 0;
1.97 + -moz-margin-start: 0;
1.98 +}
1.99 +
1.100 +.tab-close-button {
1.101 + -moz-margin-start: 4px;
1.102 + -moz-margin-end: -2px;
1.103 + padding: 0;
1.104 +}
1.105 +
1.106 +.tab-background,
1.107 +.tabs-newtab-button {
1.108 + /* overlap the tab curves */
1.109 + -moz-margin-end: -@tabCurveHalfWidth@;
1.110 + -moz-margin-start: -@tabCurveHalfWidth@;
1.111 +}
1.112 +
1.113 +.tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
1.114 + -moz-padding-end: @tabCurveHalfWidth@;
1.115 + -moz-padding-start: @tabCurveHalfWidth@;
1.116 +}
1.117 +
1.118 +.tab-background-start[selected=true]::after,
1.119 +.tab-background-start[selected=true]::before,
1.120 +.tab-background-start,
1.121 +.tab-background-end,
1.122 +.tab-background-end[selected=true]::after,
1.123 +.tab-background-end[selected=true]::before {
1.124 + min-height: @tabMinHeight@;
1.125 + width: @tabCurveWidth@;
1.126 +}
1.127 +
1.128 +.tabbrowser-tab:not([selected=true]),
1.129 +.tabbrowser-tab:-moz-lwtheme {
1.130 + color: inherit;
1.131 +}
1.132 +
1.133 +/* Selected tab */
1.134 +
1.135 +/*
1.136 + Tab background pseudo-elements which are positioned above .tab-background-start/end:
1.137 + - ::before - provides the fill of the tab curve and is clipped to the tab shape. This is where
1.138 + pointer events go for the curve.
1.139 + - ::after - provides the border/stroke of the tab curve and is overlayed above ::before. Pointer
1.140 + events go through to ::before to get the proper shape.
1.141 + */
1.142 +
1.143 +
1.144 +.tab-background-start[selected=true]::after,
1.145 +.tab-background-end[selected=true]::after {
1.146 + /* position ::after on top of its parent */
1.147 + -moz-margin-start: -@tabCurveWidth@;
1.148 + background-size: 100% 100%;
1.149 + content: "";
1.150 + display: -moz-box;
1.151 + position: relative;
1.152 +}
1.153 +
1.154 +.tab-background-start[selected=true]::before,
1.155 +.tab-background-end[selected=true]::before {
1.156 + /* all ::before pseudo elements */
1.157 + content: "";
1.158 + display: -moz-box;
1.159 +}
1.160 +
1.161 +.tab-background-start[selected=true]:-moz-locale-dir(ltr):not(:-moz-lwtheme)::before,
1.162 +.tab-background-end[selected=true]:-moz-locale-dir(rtl):not(:-moz-lwtheme)::before {
1.163 + background-image: url(chrome://browser/skin/tabbrowser/tab-selected-start.svg);
1.164 + background-size: 100% 100%;
1.165 +}
1.166 +
1.167 +.tab-background-end[selected=true]:-moz-locale-dir(ltr):not(:-moz-lwtheme)::before,
1.168 +.tab-background-start[selected=true]:-moz-locale-dir(rtl):not(:-moz-lwtheme)::before {
1.169 + background-image: url(chrome://browser/skin/tabbrowser/tab-selected-end.svg);
1.170 + background-size: 100% 100%;
1.171 +}
1.172 +
1.173 +/* For lightweight themes, clip the header image on start, middle, and end. */
1.174 +.tab-background-start[selected=true]:-moz-locale-dir(ltr):-moz-lwtheme::before,
1.175 +.tab-background-end[selected=true]:-moz-locale-dir(rtl):-moz-lwtheme::before {
1.176 + clip-path: url(chrome://browser/content/browser.xul#tab-curve-clip-path-start);
1.177 +}
1.178 +
1.179 +.tab-background-end[selected=true]:-moz-locale-dir(ltr):-moz-lwtheme::before,
1.180 +.tab-background-start[selected=true]:-moz-locale-dir(rtl):-moz-lwtheme::before {
1.181 + clip-path: url(chrome://browser/content/browser.xul#tab-curve-clip-path-end);
1.182 +}
1.183 +
1.184 +.tab-background-start[selected=true]:-moz-locale-dir(ltr)::after,
1.185 +.tab-background-end[selected=true]:-moz-locale-dir(rtl)::after {
1.186 + background-image: url(chrome://browser/skin/tabbrowser/tab-stroke-start.png);
1.187 +}
1.188 +
1.189 +.tab-background-end[selected=true]:-moz-locale-dir(ltr)::after,
1.190 +.tab-background-start[selected=true]:-moz-locale-dir(rtl)::after {
1.191 + background-image: url(chrome://browser/skin/tabbrowser/tab-stroke-end.png);
1.192 +}
1.193 +
1.194 +.tab-background-middle[selected=true] {
1.195 + background-clip: padding-box, padding-box, content-box;
1.196 + background-color: @fgTabBackgroundColor@;
1.197 + background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle.png),
1.198 + @fgTabTexture@,
1.199 + none;
1.200 + background-repeat: repeat-x;
1.201 + background-size: auto 100%;
1.202 + /* The padding-top combined with background-clip: content-box (the bottom-most) ensure the
1.203 + background-color doesn't extend above the top border. */
1.204 + padding-top: 2px;
1.205 +}
1.206 +
1.207 +/* Selected tab lightweight theme styles.
1.208 + See browser-lightweightTheme.css for information about run-time changes to LWT styles. */
1.209 +.tab-background-middle[selected=true]:-moz-lwtheme {
1.210 + background-color: transparent;
1.211 + background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle.png),
1.212 + @fgTabTextureLWT@;/*,
1.213 + lwtHeader;*/
1.214 + /* Don't stretch the LWT header images */
1.215 + background-size: auto 100%, auto 100%, auto auto;
1.216 +}
1.217 +
1.218 +/* These LWT styles are normally overridden by browser-lightweightTheme.css */
1.219 +.tab-background-start[selected=true]:-moz-lwtheme::before,
1.220 +.tab-background-end[selected=true]:-moz-lwtheme::before {
1.221 + background-image: @fgTabTextureLWT@;
1.222 +}
1.223 +
1.224 +.tab-background-start[selected=true]:-moz-lwtheme::before,
1.225 +.tab-background-end[selected=true]:-moz-lwtheme::before,
1.226 +.tab-background-middle[selected=true]:-moz-lwtheme {
1.227 + background-color: transparent;
1.228 +}
1.229 +
1.230 +/* End selected tab */
1.231 +
1.232 +/* new tab button border and gradient on hover */
1.233 +.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]),
1.234 +.tabs-newtab-button:hover {
1.235 + background-image: url(chrome://browser/skin/tabbrowser/tab-background-start.png),
1.236 + url(chrome://browser/skin/tabbrowser/tab-background-middle.png),
1.237 + url(chrome://browser/skin/tabbrowser/tab-background-end.png);
1.238 + background-position: left bottom, @tabCurveWidth@ bottom, right bottom;
1.239 + background-repeat: no-repeat;
1.240 + background-size: @tabCurveWidth@ 100%, calc(100% - (2 * @tabCurveWidth@)) 100%, @tabCurveWidth@ 100%;
1.241 +}
1.242 +
1.243 +/* Tab pointer-events */
1.244 +.tabbrowser-tab {
1.245 + pointer-events: none;
1.246 +}
1.247 +
1.248 +.tab-background-middle,
1.249 +.tabs-newtab-button,
1.250 +.tab-close-button {
1.251 + pointer-events: auto;
1.252 +}
1.253 +
1.254 +/* Pinned tabs */
1.255 +
1.256 +/* Pinned tab separators need position: absolute when positioned (during overflow). */
1.257 +#tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned]::before {
1.258 + height: 100%;
1.259 + position: absolute;
1.260 +}
1.261 +
1.262 +.tabbrowser-tab[pinned][titlechanged]:not([selected="true"]) > .tab-stack > .tab-content {
1.263 + 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%);
1.264 + background-position: center bottom @tabToolbarNavbarOverlap@;
1.265 + background-repeat: no-repeat;
1.266 + background-size: 85% 100%;
1.267 +}
1.268 +
1.269 +/* Background tab separators (3px wide).
1.270 + Also show separators beside the selected tab when dragging it. */
1.271 +#tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
1.272 +.tabbrowser-tab:not([selected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
1.273 +#tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([selected]):not([beforehovered]):not(:hover)::after {
1.274 + -moz-margin-start: -1.5px;
1.275 + -moz-margin-end: -1.5px;
1.276 + background-image: url(chrome://browser/skin/tabbrowser/tab-separator.png);
1.277 + background-position: left bottom @tabToolbarNavbarOverlap@;
1.278 + background-repeat: no-repeat;
1.279 + background-size: 3px 100%;
1.280 + content: "";
1.281 + display: -moz-box;
1.282 + width: 3px;
1.283 +}
1.284 +
1.285 +/* New tab button */
1.286 +
1.287 +.tabs-newtab-button {
1.288 + width: 66px;
1.289 +}
