browser/themes/shared/tabs.inc.css@6474c204b198
browser/themes/shared/tabs.inc.css
Wed, 31 Dec 2014 06:09:35 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Wed, 31 Dec 2014 06:09:35 +0100
- changeset 0
- 6474c204b198
- permissions
- -rw-r--r--
Cloned upstream origin tor-browser at tor-browser-31.3.0esr-4.5-1-build1
revision ID fc1c9ff7c1b2defdbc039f12214767608f46423f for hacking purpose.
1 %if 0
2 /* This Source Code Form is subject to the terms of the Mozilla Public
3 * License, v. 2.0. If a copy of the MPL was not distributed with this
4 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
5 %endif
7 %define tabCurveWidth 30px
8 %define tabCurveHalfWidth 15px
10 /* image preloading hack */
11 #tabbrowser-tabs::before {
12 /* Because of bug 853415, we need to ordinal this to the first position: */
13 -moz-box-ordinal-group: 0;
14 content: '';
15 display: block;
16 background-image:
17 url(chrome://browser/skin/tabbrowser/tab-background-end.png),
18 url(chrome://browser/skin/tabbrowser/tab-background-middle.png),
19 url(chrome://browser/skin/tabbrowser/tab-background-start.png);
20 }
22 #tabbrowser-tabs {
23 min-height: @tabMinHeight@;
24 }
26 .tabbrowser-tab,
27 .tabs-newtab-button {
28 -moz-appearance: none;
29 background-color: transparent;
30 border-radius: 0;
31 border-width: 0;
32 margin: 0;
33 padding: 0;
34 }
36 .tabbrowser-tab {
37 -moz-box-align: stretch;
38 }
40 .tabbrowser-tab[remote] {
41 text-decoration: underline;
42 }
44 /* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */
45 .tabbrowser-tab[selected=true] {
46 position: relative;
47 z-index: 2;
48 }
50 .tab-background-middle {
51 -moz-box-flex: 1;
52 background-clip: padding-box;
53 border-left: @tabCurveHalfWidth@ solid transparent;
54 border-right: @tabCurveHalfWidth@ solid transparent;
55 margin: 0 -@tabCurveHalfWidth@;
56 }
58 .tab-content {
59 -moz-padding-end: 9px;
60 -moz-padding-start: 9px;
61 }
63 .tab-throbber,
64 .tab-icon-image,
65 .tab-close-button {
66 margin-top: 1px;
67 }
69 .tab-throbber,
70 .tab-icon-image {
71 height: 16px;
72 width: 16px;
73 }
75 .tab-icon-image {
76 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
77 }
79 .tab-throbber {
80 list-style-image: url("chrome://browser/skin/tabbrowser/connecting.png");
81 }
83 .tab-throbber[progress] {
84 list-style-image: url("chrome://browser/skin/tabbrowser/loading.png");
85 }
87 .tab-throbber:not([pinned]),
88 .tab-icon-image:not([pinned]) {
89 -moz-margin-end: 6px;
90 }
92 .tab-label {
93 -moz-margin-end: 0;
94 -moz-margin-start: 0;
95 }
97 .tab-close-button {
98 -moz-margin-start: 4px;
99 -moz-margin-end: -2px;
100 padding: 0;
101 }
103 .tab-background,
104 .tabs-newtab-button {
105 /* overlap the tab curves */
106 -moz-margin-end: -@tabCurveHalfWidth@;
107 -moz-margin-start: -@tabCurveHalfWidth@;
108 }
110 .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
111 -moz-padding-end: @tabCurveHalfWidth@;
112 -moz-padding-start: @tabCurveHalfWidth@;
113 }
115 .tab-background-start[selected=true]::after,
116 .tab-background-start[selected=true]::before,
117 .tab-background-start,
118 .tab-background-end,
119 .tab-background-end[selected=true]::after,
120 .tab-background-end[selected=true]::before {
121 min-height: @tabMinHeight@;
122 width: @tabCurveWidth@;
123 }
125 .tabbrowser-tab:not([selected=true]),
126 .tabbrowser-tab:-moz-lwtheme {
127 color: inherit;
128 }
130 /* Selected tab */
132 /*
133 Tab background pseudo-elements which are positioned above .tab-background-start/end:
134 - ::before - provides the fill of the tab curve and is clipped to the tab shape. This is where
135 pointer events go for the curve.
136 - ::after - provides the border/stroke of the tab curve and is overlayed above ::before. Pointer
137 events go through to ::before to get the proper shape.
138 */
141 .tab-background-start[selected=true]::after,
142 .tab-background-end[selected=true]::after {
143 /* position ::after on top of its parent */
144 -moz-margin-start: -@tabCurveWidth@;
145 background-size: 100% 100%;
146 content: "";
147 display: -moz-box;
148 position: relative;
149 }
151 .tab-background-start[selected=true]::before,
152 .tab-background-end[selected=true]::before {
153 /* all ::before pseudo elements */
154 content: "";
155 display: -moz-box;
156 }
158 .tab-background-start[selected=true]:-moz-locale-dir(ltr):not(:-moz-lwtheme)::before,
159 .tab-background-end[selected=true]:-moz-locale-dir(rtl):not(:-moz-lwtheme)::before {
160 background-image: url(chrome://browser/skin/tabbrowser/tab-selected-start.svg);
161 background-size: 100% 100%;
162 }
164 .tab-background-end[selected=true]:-moz-locale-dir(ltr):not(:-moz-lwtheme)::before,
165 .tab-background-start[selected=true]:-moz-locale-dir(rtl):not(:-moz-lwtheme)::before {
166 background-image: url(chrome://browser/skin/tabbrowser/tab-selected-end.svg);
167 background-size: 100% 100%;
168 }
170 /* For lightweight themes, clip the header image on start, middle, and end. */
171 .tab-background-start[selected=true]:-moz-locale-dir(ltr):-moz-lwtheme::before,
172 .tab-background-end[selected=true]:-moz-locale-dir(rtl):-moz-lwtheme::before {
173 clip-path: url(chrome://browser/content/browser.xul#tab-curve-clip-path-start);
174 }
176 .tab-background-end[selected=true]:-moz-locale-dir(ltr):-moz-lwtheme::before,
177 .tab-background-start[selected=true]:-moz-locale-dir(rtl):-moz-lwtheme::before {
178 clip-path: url(chrome://browser/content/browser.xul#tab-curve-clip-path-end);
179 }
181 .tab-background-start[selected=true]:-moz-locale-dir(ltr)::after,
182 .tab-background-end[selected=true]:-moz-locale-dir(rtl)::after {
183 background-image: url(chrome://browser/skin/tabbrowser/tab-stroke-start.png);
184 }
186 .tab-background-end[selected=true]:-moz-locale-dir(ltr)::after,
187 .tab-background-start[selected=true]:-moz-locale-dir(rtl)::after {
188 background-image: url(chrome://browser/skin/tabbrowser/tab-stroke-end.png);
189 }
191 .tab-background-middle[selected=true] {
192 background-clip: padding-box, padding-box, content-box;
193 background-color: @fgTabBackgroundColor@;
194 background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle.png),
195 @fgTabTexture@,
196 none;
197 background-repeat: repeat-x;
198 background-size: auto 100%;
199 /* The padding-top combined with background-clip: content-box (the bottom-most) ensure the
200 background-color doesn't extend above the top border. */
201 padding-top: 2px;
202 }
204 /* Selected tab lightweight theme styles.
205 See browser-lightweightTheme.css for information about run-time changes to LWT styles. */
206 .tab-background-middle[selected=true]:-moz-lwtheme {
207 background-color: transparent;
208 background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle.png),
209 @fgTabTextureLWT@;/*,
210 lwtHeader;*/
211 /* Don't stretch the LWT header images */
212 background-size: auto 100%, auto 100%, auto auto;
213 }
215 /* These LWT styles are normally overridden by browser-lightweightTheme.css */
216 .tab-background-start[selected=true]:-moz-lwtheme::before,
217 .tab-background-end[selected=true]:-moz-lwtheme::before {
218 background-image: @fgTabTextureLWT@;
219 }
221 .tab-background-start[selected=true]:-moz-lwtheme::before,
222 .tab-background-end[selected=true]:-moz-lwtheme::before,
223 .tab-background-middle[selected=true]:-moz-lwtheme {
224 background-color: transparent;
225 }
227 /* End selected tab */
229 /* new tab button border and gradient on hover */
230 .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]),
231 .tabs-newtab-button:hover {
232 background-image: url(chrome://browser/skin/tabbrowser/tab-background-start.png),
233 url(chrome://browser/skin/tabbrowser/tab-background-middle.png),
234 url(chrome://browser/skin/tabbrowser/tab-background-end.png);
235 background-position: left bottom, @tabCurveWidth@ bottom, right bottom;
236 background-repeat: no-repeat;
237 background-size: @tabCurveWidth@ 100%, calc(100% - (2 * @tabCurveWidth@)) 100%, @tabCurveWidth@ 100%;
238 }
240 /* Tab pointer-events */
241 .tabbrowser-tab {
242 pointer-events: none;
243 }
245 .tab-background-middle,
246 .tabs-newtab-button,
247 .tab-close-button {
248 pointer-events: auto;
249 }
251 /* Pinned tabs */
253 /* Pinned tab separators need position: absolute when positioned (during overflow). */
254 #tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned]::before {
255 height: 100%;
256 position: absolute;
257 }
259 .tabbrowser-tab[pinned][titlechanged]:not([selected="true"]) > .tab-stack > .tab-content {
260 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%);
261 background-position: center bottom @tabToolbarNavbarOverlap@;
262 background-repeat: no-repeat;
263 background-size: 85% 100%;
264 }
266 /* Background tab separators (3px wide).
267 Also show separators beside the selected tab when dragging it. */
268 #tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
269 .tabbrowser-tab:not([selected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
270 #tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([selected]):not([beforehovered]):not(:hover)::after {
271 -moz-margin-start: -1.5px;
272 -moz-margin-end: -1.5px;
273 background-image: url(chrome://browser/skin/tabbrowser/tab-separator.png);
274 background-position: left bottom @tabToolbarNavbarOverlap@;
275 background-repeat: no-repeat;
276 background-size: 3px 100%;
277 content: "";
278 display: -moz-box;
279 width: 3px;
280 }
282 /* New tab button */
284 .tabs-newtab-button {
285 width: 66px;
286 }
