fix some parsing errors etc. and make new HTML-based buttons with ::before work in...
[themes.git] / LCARStrek / browser / browser.css
CommitLineData
9099c61d
RK
1/* This Source Code Form is subject to the terms of the Mozilla Public
2 * License, v. 2.0. If a copy of the MPL was not distributed with this
3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
acb0e9b8 4
5@import url("chrome://global/skin/");
fcaeefc2 6@import url("downloads/indicator.css");
acb0e9b8 7
8@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
319c6529 9@namespace html url("http://www.w3.org/1999/xhtml");
cae267ab 10@namespace svg url("http://www.w3.org/2000/svg");
319c6529
RK
11
12toolbar {
13 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar");
14}
acb0e9b8 15
7d3f7f14 16toolbar[customizable="true"] {
43cc2806
RK
17 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-browsercustom");
18}
19
ee49f520
RK
20@media (-moz-mac-graphite-theme), (-moz-mac-lion-theme), (-moz-mac-yosemite-theme) {
21 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
96b206fe
RK
22 toolbar[customizable="true"]:not([nowindowdrag="true"]) {
23 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-drag-browsercustom");
24 }
25}
26
41279e76
RK
27toolbar[type="menubar"][autohide="true"] {
28 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-menubar-autohide");
29}
30
7d3f7f14 31#toolbar-menubar[autohide="true"] {
43cc2806
RK
32 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-menubar-autohide-browsercustom");
33}
34
acb0e9b8 35menubar {
319c6529 36 -moz-binding: url("chrome://global/skin/globalBindings.xml#menubar");
acb0e9b8 37}
38
e548e22e 39:root {
b1dfcf32
RK
40 /*--backbutton-urlbar-overlap: 5px;*/
41
42 --identity-box-verified-background-color: #000000;
c9b0a396
RK
43
44 --panel-separator-color: #A09090;
45
c9b0a396 46 --urlbar-separator-color: #9C9CFF;
e548e22e
RK
47}
48
319c6529
RK
49#menubar-items {
50 -moz-box-orient: vertical; /* for flex hack */
acb0e9b8 51}
52
319c6529
RK
53#main-menubar {
54 -moz-box-flex: 1; /* make menu items expand to fill toolbar height */
55}
56
63ada306
RK
57/* ::::: primary toolbar ::::: */
58
59.toolbar-primary > .toolbar-box > .toolbar-holder {
270cbf0c 60 background-color: #A09090;
63ada306
RK
61}
62
63.toolbar-primary > .toolbar-box > .toolbar-startcap,
64.toolbar-primary > .toolbar-box > .toolbar-endcap {
65 background-color: #9C9CFF;
66}
67
e20c83c3
RK
68/* Hides the titlebar-placeholder underneath the window caption buttons when we
69 are not autohiding the menubar. */
70#toolbar-menubar:not([autohide="true"]) + #TabsToolbar > .titlebar-placeholder[type="caption-buttons"] {
71 display: none;
72}
73
43cc2806
RK
74/* We want a 4px gap between the TabsToolbar and the toolbar-menubar when the
75 toolbar-menu is displayed, and a 16px gap when it is not. 1px is taken care
76 of by the (light) outer shadow of the tab, the remaining 3/15 are these margins. */
c0f6797e
RK
77#toolbar-menubar:not([moz-collapsed=true]):not([autohide=true]) ~ #TabsToolbar,
78#toolbar-menubar:not([moz-collapsed=true])[autohide=true]:not([inactive]) ~ #TabsToolbar {
43cc2806
RK
79/* margin-top: 3px;*/
80}
81
43371c9b
RK
82#main-window[tabsintitlebar][sizemode="normal"]:not([inFullscreen])[chromehidden~="menubar"] #toolbar-menubar ~ #TabsToolbar,
83#main-window[tabsintitlebar][sizemode="normal"]:not([inFullscreen]) #toolbar-menubar[autohide="true"][inactive] ~ #TabsToolbar {
19988d2d 84/* margin-top: var(--space-above-tabbar);*/
43cc2806
RK
85}
86
ee49f520
RK
87@media (-moz-mac-graphite-theme: 0) and (-moz-mac-lion-theme: 0) {
88 /* This is a hackish workaround to exclude most of Mac OS until bug 1060941 gets fixed. */
8d154261
RK
89 #toolbar-menubar:not([autohide="true"]) {
90 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-drag-browsercustom");
91 }
58d9f24a
RK
92}
93
ee49f520
RK
94@media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
95 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
4711fba5 96 #main-window[tabsintitlebar]:not([inFullscreen="true"]) #TabsToolbar {
54d92f05
RK
97 padding-left: 60px;
98 }
43cc2806
RK
99}
100
018d70fb
RK
101#main-window[tabsintitlebar] #toolbar-menubar .toolbar-endcap {
102 /* the titlebar buttons are shown right over the endcap but we have no power over the buttonbox position just for this case, so hide the endcap */
103 display: none;
43cc2806 104}
63ada306 105
e20c83c3
RK
106#main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #toolbar-menubar[customizing-dragovertarget].customization-target::before,
107#main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #TabsToolbar[customizing-dragovertarget].customization-target::before,
108#main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #toolbar-menubar.customization-target:hover::before,
109#main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #TabsToolbar.customization-target:hover::before {
110 outline-color: #A09090;
111}
112
319c6529
RK
113#navigator-toolbox {
114}
115
9abeb12c
RK
116#navigator-toolbox::after {
117 content: "";
118 display: -moz-box;
119 -moz-box-ordinal-group: 101; /* tabs toolbar is 100 */
120 height: 1px;
121}
9abeb12c 122
6f5a7408 123#navigator-toolbox > toolbar {
319c6529
RK
124}
125
3d64e0ce
RK
126#navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(:-moz-lwtheme) {
127}
128
9168a62c
RK
129#navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar):not(#addon-bar) {
130 overflow: -moz-hidden-unscrollable;
131 max-height: 4em;
132 transition: min-height 170ms ease-out, max-height 170ms ease-out;
133}
134
135#navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar):not(#addon-bar)[collapsed=true] {
136 min-height: 0.1px;
137 max-height: 0;
138 transition: min-height 170ms ease-out, max-height 170ms ease-out, visibility 170ms linear;
139}
140
ee49f520
RK
141@media (-moz-mac-graphite-theme: 0) and (-moz-mac-lion-theme: 0) {
142 /* This is a hackish workaround to exclude most of Mac OS until bug 1060941 gets fixed. */
143 /* Indent also due to non-applicable aero rule in original Windows theme. */
c0f6797e
RK
144 #main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar:not(:-moz-lwtheme),
145 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:not(:-moz-lwtheme) {
146 /* like menubar */
147 background-color: #6000CF;
148 color: #FF9F00;
319c6529
RK
149 }
150
c0f6797e
RK
151 #main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar:not(:-moz-lwtheme):-moz-window-inactive,
152 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:not(:-moz-lwtheme):-moz-window-inactive {
153 background-color: #8050B0;
154 color: #FF9F00;
319c6529
RK
155 }
156
dccbbf95
RK
157 #main-window[tabsintitlebar] #main-menubar > menu:not(:-moz-lwtheme) {
158 /*color: inherit;*/
159 }
160
c0f6797e
RK
161 #main-window[tabsintitlebar] #titlebar:-moz-lwtheme {
162 visibility: hidden;
163 }
319c6529 164
c0f6797e
RK
165 #main-window[tabsintitlebar] #titlebar-content:-moz-lwtheme {
166 -moz-binding: url("chrome://global/content/bindings/general.xml#windowdragbox");
167 visibility: visible;
168 }
8d154261
RK
169}
170
ee49f520
RK
171@media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
172 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
8d154261
RK
173 #titlebar-buttonbox > .titlebar-button {
174 display: none;
175 }
8d154261 176}
319c6529 177
c0f6797e
RK
178#nav-bar {
179 /* Position the toolbar above the bottom of background tabs */
180 position: relative;
181 z-index: 1;
82b4252f
RK
182}
183
c0f6797e
RK
184#personal-bookmarks {
185/* min-height: 24px; */
319c6529
RK
186}
187
bc685759
RK
188#PersonalToolbar > #home-button {
189 -moz-box-orient: horizontal;
190}
191
192#PersonalToolbar > #home-button > .toolbarbutton-text {
193 display: block;
194}
195
c0f6797e
RK
196#print-preview-toolbar:not(:-moz-lwtheme) {
197 /* -moz-appearance: toolbox; */
82b4252f
RK
198}
199
c0f6797e 200#browser-bottombox:not(:-moz-lwtheme) {
319c6529
RK
201}
202
203/* ::::: titlebar ::::: */
204
5305ef8d
RK
205#titlebar {
206 /* like menubar */
207 background-color: #6000CF;
208 color: #FF9F00;
209}
210#titlebar:-moz-window-inactive {
211 background-color: #8050B0;
212 color: #FF9F00;
213}
214
319c6529 215#main-window[sizemode="normal"] > #titlebar {
5305ef8d
RK
216 margin-top: -3px;
217 margin-bottom: 3px;
319c6529
RK
218}
219
220#main-window[sizemode="maximized"] > #titlebar {
5305ef8d 221 margin-top: 4px;
319c6529
RK
222}
223
ee49f520
RK
224@media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
225 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
58d9f24a
RK
226 #main-window[sizemode="normal"] > #titlebar,
227 #main-window[sizemode="maximized"] > #titlebar {
4711fba5
RK
228 margin-top: 19px;
229 /* There is a margin-bottom set to -23 by code. */
54d92f05
RK
230 }
231}
232
43cc2806
RK
233/* The button box must appear on top of the navigator-toolbox in order for
234 * click and hover mouse events to work properly for the button in the restored
235 * window state. Otherwise, elements in the navigator-toolbox, like the menubar,
236 * can swallow those events. It will also place the buttons above the fog on
237 * themes with Aero Glass.
238 */
83ac1f44
RK
239#titlebar-buttonbox,
240#main-window[sizemode="maximized"] #titlebar-buttonbox {
b7f3670c
RK
241 -moz-appearance: none;
242 margin-top: 6px;
243 margin-top: 4px;
5305ef8d 244 -moz-margin-end: 3px;
43cc2806 245 z-index: 1;
319c6529
RK
246}
247
319c6529
RK
248.titlebar-placeholder[type="appmenu-button"] {
249 margin-left: 4px;
250}
251
252.titlebar-placeholder[type="caption-buttons"] {
253 margin-left: 10px;
254}
255
256/* titlebar command buttons */
319c6529 257#titlebar-min {
19988d2d 258 list-style-image: url("chrome://browser/skin/caption-buttons.svg#minimize");
5305ef8d
RK
259}
260
261#titlebar-min:hover {
19988d2d 262 list-style-image: url("chrome://browser/skin/caption-buttons.svg#minimize-hover");
319c6529
RK
263}
264
265#titlebar-max {
19988d2d 266 list-style-image: url("chrome://browser/skin/caption-buttons.svg#maximize");
5305ef8d
RK
267}
268
269#titlebar-max:hover {
19988d2d 270 list-style-image: url("chrome://browser/skin/caption-buttons.svg#maximize-hover");
319c6529
RK
271}
272
273#main-window[sizemode="maximized"] #titlebar-max {
19988d2d 274 list-style-image: url("chrome://browser/skin/caption-buttons.svg#restore");
5305ef8d
RK
275}
276
277#main-window[sizemode="maximized"] #titlebar-max:hover {
19988d2d 278 list-style-image: url("chrome://browser/skin/caption-buttons.svg#restore-hover");
319c6529
RK
279}
280
281#titlebar-close {
19988d2d 282 list-style-image: url("chrome://browser/skin/caption-buttons.svg#close");
5305ef8d
RK
283}
284
285#titlebar-close:hover {
19988d2d 286 list-style-image: url("chrome://browser/skin/caption-buttons.svg#close-hover");
acb0e9b8 287}
288
ee49f520
RK
289@media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
290 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
54d92f05
RK
291 #titlebar-fullscreen-button {
292 -moz-appearance: none;
293 list-style-image: url("chrome://browser/skin/icons/mac-fullscreen-icon.png");
294 -moz-image-region: rect(0px, 16px, 16px, 0px);
295 }
296
297 #titlebar-fullscreen-button:hover {
298 -moz-image-region: rect(0px, 32px, 16px, 16px);
299 }
300
301 @media (min-resolution: 2dppx) {
302 #titlebar-fullscreen-button {
303 list-style-image: url("chrome://browser/skin/icons/mac-fullscreen-icon@2x.png");
304 -moz-image-region: rect(0px, 32px, 32px, 0px);
305 }
306
307 #titlebar-fullscreen-button:hover {
308 -moz-image-region: rect(0px, 64px, 32px, 32px);
309 }
310 }
311}
312
313
acb0e9b8 314/* ::::: bookmark buttons ::::: */
315
c0f6797e
RK
316toolbarbutton.bookmark-item:not(.subviewbutton),
317#personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder {
318/* margin: 0;
319 padding: 2px 3px;*/
320}
321
322toolbarbutton.bookmark-item:not([disabled="true"]):not(.subviewbutton):hover:active,
323toolbarbutton.bookmark-item[open="true"] {
324/* padding-top: 3px;
325 padding-bottom: 1px;
326 -moz-padding-start: 4px;
327 -moz-padding-end: 2px;*/
328}
329
26125509
RK
330.bookmark-item > .toolbarbutton-icon,
331#personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
acb0e9b8 332 width: 16px;
333 height: 16px;
832af407
RK
334 -moz-margin-start: 1px;
335 -moz-margin-end: 2px;
bc685759
RK
336 margin-top: 1px;
337 margin-bottom: 1px;
acb0e9b8 338}
339
26125509
RK
340/* Force the display of the label for bookmarks */
341.bookmark-item > .toolbarbutton-text,
342#personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-text {
acb0e9b8 343 display: -moz-box !important;
344}
345
319c6529
RK
346.bookmark-item > .toolbarbutton-menu-dropmarker {
347 display: none;
348}
349
26125509 350#bookmarks-toolbar-placeholder {
8da9da4e 351 list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png") !important;
9e88a441 352 -moz-box-orient: horizontal;
319c6529
RK
353}
354
e20c83c3
RK
355toolbarpaletteitem[place="palette"] > #personal-bookmarks > #bookmarks-toolbar-placeholder,
356#personal-bookmarks[cui-areatype="menu-panel"] > #bookmarks-toolbar-placeholder {
357 list-style-image: url("chrome://browser/skin/places/bookmarksToolbar-menuPanel.png") !important;
358}
359
360/* ----- BOOKMARK STAR ANIMATION ----- */
361
362@keyframes animation-bookmarkAdded {
363 from { transform: rotate(0deg) translateX(-16px) rotate(0deg) scale(1); opacity: 0; }
364 60% { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(2.2); opacity: 1; }
365 80% { opacity: 1; }
366 to { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(1); opacity: 0; }
367}
368
369@keyframes animation-bookmarkPulse {
370 from { transform: scale(1); }
371 50% { transform: scale(1.3); }
372 to { transform: scale(1); }
373}
374
375#bookmarked-notification-container {
376 min-height: 1px;
377 min-width: 1px;
378 height: 1px;
379 margin-bottom: -1px;
380 z-index: 5;
381 position: relative;
382}
383
384#bookmarked-notification {
385 background-size: 16px;
386 background-position: center;
387 background-repeat: no-repeat;
388 width: 16px;
389 height: 16px;
390 opacity: 0;
391}
392
c0f6797e
RK
393#bookmarked-notification-dropmarker-anchor {
394 z-index: -1;
395 position: relative;
396}
397
398#bookmarked-notification-dropmarker-icon {
399 width: 18px;
400 height: 18px;
401 visibility: hidden;
402}
403
e20c83c3
RK
404#bookmarked-notification-anchor[notification="finish"] > #bookmarked-notification {
405 background-image: url("chrome://browser/skin/places/bookmarks-notification-finish.png");
406 animation: animation-bookmarkAdded 800ms;
407 animation-timing-function: ease, ease, ease;
408}
409
410#bookmarks-menu-button[notification="finish"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
c0f6797e
RK
411 list-style-image: none !important;
412}
413
414#bookmarked-notification-dropmarker-anchor[notification="finish"] > #bookmarked-notification-dropmarker-icon {
415 visibility: visible;
e20c83c3
RK
416 animation: animation-bookmarkPulse 300ms;
417 animation-delay: 600ms;
418 animation-timing-function: ease-out;
419}
420
319c6529
RK
421/* ::::: bookmark menus ::::: */
422
423menu.bookmark-item,
424menuitem.bookmark-item {
425 min-width: 0;
ab799a7a 426 max-width: 32em;
319c6529
RK
427}
428
e20c83c3 429.bookmark-item:not(.subviewbutton) > .menu-iconic-left {
319c6529
RK
430 margin-top: 0;
431 margin-bottom: 0;
432}
433
434.bookmark-item > .menu-iconic-left > .menu-iconic-icon {
435 -moz-padding-start: 0px;
436}
437
438/* ::::: bookmark items ::::: */
439
440.bookmark-item {
dce90fef 441 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
8da9da4e 442 -moz-image-region: auto;
319c6529
RK
443}
444
445.bookmark-item[container] {
446 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-closed.gif");
8da9da4e 447 -moz-image-region: auto;
319c6529
RK
448}
449
450.bookmark-item[container][open] {
451 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-open.gif");
8da9da4e 452 -moz-image-region: auto;
319c6529
RK
453}
454
8da9da4e
RK
455.bookmark-item[container][livemark] {
456 list-style-image: url("chrome://communicator/skin/bookmarks/livemark-folder.png");
319c6529
RK
457 -moz-image-region: auto;
458}
459
460.bookmark-item[container][livemark] .bookmark-item {
8da9da4e 461 list-style-image: url("chrome://communicator/skin/bookmarks/livemark-item.png");
719b06bc 462 -moz-image-region: rect(0px, 16px, 16px, 0px);
319c6529
RK
463}
464
eec397be 465.bookmark-item[container][livemark] .bookmark-item[visited] {
719b06bc 466 -moz-image-region: rect(0px, 32px, 16px, 16px);
eec397be
RK
467}
468
319c6529 469.bookmark-item[container][query] {
8da9da4e 470 list-style-image: url("chrome://communicator/skin/bookmarks/query.png");
319c6529
RK
471 -moz-image-region: auto;
472}
473
474.bookmark-item[query][tagContainer] {
475 list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
476 -moz-image-region: auto;
477}
478
479.bookmark-item[query][dayContainer] {
8da9da4e 480 list-style-image: url("chrome://communicator/skin/history/calendar.png");
319c6529
RK
481 -moz-image-region: auto;
482}
483
484.bookmark-item[query][hostContainer] {
485 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-closed.gif");
8da9da4e 486 -moz-image-region: auto;
319c6529
RK
487}
488
489.bookmark-item[query][hostContainer][open] {
490 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-open.gif");
8da9da4e 491 -moz-image-region: auto;
319c6529
RK
492}
493
b1234db8
RK
494.bookmark-item[cutting] > .toolbarbutton-icon,
495.bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-icon {
496 opacity: 0.5;
497}
498
499.bookmark-item[cutting] > .toolbarbutton-text,
500.bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-text {
501 opacity: 0.7;
502}
503
319c6529
RK
504/* ::::: primary toolbar buttons ::::: */
505
43cc2806
RK
506/* === BEGIN toolbarbuttons.inc.css === */
507
508/* Whole section of this included file: */
51994fad
RK
509:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
510 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
d4d77dc0 511 #social-share-button, #open-file-button, #find-button, #developer-button,
a5cb6e53 512 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
51994fad
RK
513 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
514 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
b4888bae 515 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #loop-button),
7d3f7f14 516#bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
43cc2806
RK
517 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
518}
519
7d3f7f14 520#back-button {
43cc2806
RK
521 -moz-image-region: rect(0, 36px, 18px, 18px);
522}
523
7d3f7f14 524#back-button:hover:not([disabled="true"]) {
43cc2806
RK
525 -moz-image-region: rect(18px, 36px, 36px, 18px);
526}
527
7d3f7f14 528#back-button[disabled="true"] {
43cc2806
RK
529 -moz-image-region: rect(36px, 36px, 54px, 18px);
530}
531
7d3f7f14 532#forward-button {
43cc2806
RK
533 -moz-image-region: rect(0, 72px, 18px, 54px);
534}
535
7d3f7f14 536#forward-button:hover:not([disabled="true"]) {
43cc2806
RK
537 -moz-image-region: rect(18px, 72px, 36px, 54px);
538}
539
7d3f7f14 540#forward-button[disabled="true"] {
43cc2806
RK
541 -moz-image-region: rect(36px, 72px, 54px, 54px);
542}
543
7d3f7f14
RK
544#back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
545#forward-button:-moz-locale-dir(rtl) {
43cc2806
RK
546 transform: scaleX(-1);
547}
548
7d3f7f14 549#home-button[cui-areatype="toolbar"] {
43cc2806
RK
550 -moz-image-region: rect(0, 126px, 18px, 108px);
551}
552
7d3f7f14 553#home-button[cui-areatype="toolbar"]:hover {
43cc2806
RK
554 -moz-image-region: rect(18px, 126px, 36px, 108px);
555}
556
7d3f7f14 557#bookmarks-menu-button[cui-areatype="toolbar"] {
43cc2806
RK
558 -moz-image-region: rect(0, 144px, 18px, 126px);
559}
560
7d3f7f14
RK
561#bookmarks-menu-button[cui-areatype="toolbar"]:hover,
562#bookmarks-menu-button[cui-areatype="toolbar"][open="true"] {
43cc2806
RK
563 -moz-image-region: rect(18px, 144px, 36px, 126px);
564}
565
43ee1307 566/* When "new tab" page shows up, the menubutton-button (star button) is disabled */
7d3f7f14 567#bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-button[disabled="true"] {
43ee1307
RK
568 -moz-image-region: rect(36px, 144px, 54px, 126px) !important;
569 background-color: transparent !important;
570}
571
7d3f7f14 572#bookmarks-menu-button[cui-areatype="toolbar"][starred] {
43cc2806
RK
573 -moz-image-region: rect(0, 162px, 18px, 144px);
574}
575
7d3f7f14 576#bookmarks-menu-button[cui-areatype="toolbar"][starred]:hover,
83e3b5cf
RK
577#bookmarks-menu-button[cui-areatype="toolbar"][starred][open="true"],
578#bookmarks-menu-button[cui-areatype="toolbar"][starred] > .toolbarbutton-menubutton-button[open="true"] {
579 /* When starred and clicked (for edit/delete dialog),
580 * then only the menubutton-button itself is open, but not the whole menubutton. */
43cc2806
RK
581 -moz-image-region: rect(18px, 162px, 36px, 144px);
582}
583
7d3f7f14 584#bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
43cc2806
RK
585 -moz-image-region: rect(0, 630px, 18px, 612px);
586}
587
7d3f7f14 588#bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker {
43cc2806
RK
589 padding: 1px;
590 -moz-box-align: center;
591}
592
7d3f7f14
RK
593#bookmarks-menu-button[cui-areatype="toolbar"]:hover > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
594#bookmarks-menu-button[cui-areatype="toolbar"][open="true"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
43cc2806
RK
595 -moz-image-region: rect(18px, 630px, 36px, 612px);
596}
597
7d3f7f14
RK
598#bookmarks-menu-button[cui-areatype="toolbar"]:hover:active > .toolbarbutton-menubutton-dropmarker,
599#bookmarks-menu-button[cui-areatype="toolbar"][open="true"] > .toolbarbutton-menubutton-dropmarker {
43cc2806
RK
600 padding-top: 2px;
601 padding-bottom: 0px;
602 -moz-padding-start: 2px;
603 -moz-padding-end: 0px;
604}
605
7d3f7f14 606#history-panelmenu[cui-areatype="toolbar"] {
43cc2806
RK
607 -moz-image-region: rect(0, 180px, 18px, 162px);
608}
609
7d3f7f14
RK
610#history-panelmenu[cui-areatype="toolbar"]:hover,
611#history-panelmenu[cui-areatype="toolbar"][open="true"] {
43cc2806
RK
612 -moz-image-region: rect(18px, 180px, 36px, 162px);
613}
614
7d3f7f14 615#downloads-button[cui-areatype="toolbar"] {
43cc2806
RK
616 -moz-image-region: rect(0, 198px, 18px, 180px);
617}
618
7d3f7f14
RK
619#downloads-button[cui-areatype="toolbar"]:hover,
620#downloads-button[cui-areatype="toolbar"][open="true"] {
43cc2806
RK
621 -moz-image-region: rect(18px, 198px, 36px, 180px);
622}
623
7d3f7f14 624#add-ons-button[cui-areatype="toolbar"] {
43cc2806
RK
625 -moz-image-region: rect(0, 216px, 18px, 198px);
626}
627
7d3f7f14 628#add-ons-button[cui-areatype="toolbar"]:hover {
43cc2806
RK
629 -moz-image-region: rect(18px, 216px, 36px, 198px);
630}
631
7d3f7f14 632#open-file-button[cui-areatype="toolbar"] {
43cc2806
RK
633 -moz-image-region: rect(0, 234px, 18px, 216px);
634}
635
7d3f7f14 636#open-file-button[cui-areatype="toolbar"]:hover {
43cc2806
RK
637 -moz-image-region: rect(18px, 234px, 36px, 216px);
638}
639
7d3f7f14 640#save-page-button[cui-areatype="toolbar"] {
43cc2806
RK
641 -moz-image-region: rect(0, 252px, 18px, 234px);
642}
643
7d3f7f14 644#save-page-button[cui-areatype="toolbar"]:hover {
43cc2806
RK
645 -moz-image-region: rect(18px, 252px, 36px, 234px);
646}
647
7d3f7f14 648#sync-button[cui-areatype="toolbar"] {
43cc2806
RK
649 -moz-image-region: rect(0, 270px, 18px, 252px);
650}
651
7d3f7f14 652#sync-button[cui-areatype="toolbar"]:hover {
43cc2806
RK
653 -moz-image-region: rect(18px, 270px, 36px, 252px);
654}
655
5401f433
RK
656#sync-button[cui-areatype="toolbar"][status="active"],
657#sync-button[cui-areatype="toolbar"][status="active"]:hover:active:not([disabled="true"]) {
658 list-style-image: url("chrome://browser/skin/syncProgress-toolbar.png");
659 -moz-image-region: rect(0, 18px, 18px, 0px);
660}
661
662/*
663#sync-button[cui-areatype="toolbar"][status="active"]:-moz-lwtheme-brighttext,
664#sync-button[cui-areatype="toolbar"][status="active"]:-moz-lwtheme-brighttext:hover:active:not([disabled="true"]) {
665 list-style-image: url("chrome://browser/skin/syncProgress-toolbar-inverted.png");
666}
667*/
668
7d3f7f14 669#feed-button[cui-areatype="toolbar"] {
43cc2806
RK
670 -moz-image-region: rect(0, 288px, 18px, 270px);
671}
672
05148fed 673#feed-button[cui-areatype="menu-panel"][panel-multiview-anchor=true],
7d3f7f14 674#feed-button[cui-areatype="toolbar"]:hover:not([disabled="true"]) {
43cc2806
RK
675 -moz-image-region: rect(18px, 288px, 36px, 270px);
676}
677
7d3f7f14 678#feed-button[cui-areatype="toolbar"][disabled="true"] {
cc4b0b0d
RK
679 -moz-image-region: rect(36px, 288px, 54px, 270px);
680}
681
7d3f7f14 682#social-share-button[cui-areatype="toolbar"] {
43cc2806
RK
683 -moz-image-region: rect(0px, 306px, 18px, 288px);
684}
685
22180555
RK
686#social-share-button[cui-areatype="toolbar"]:hover:not([disabled="true"]),
687#social-share-button[cui-areatype="toolbar"][open="true"] {
43cc2806
RK
688 -moz-image-region: rect(18px, 306px, 36px, 288px);
689}
690
22180555
RK
691#social-share-button[cui-areatype="toolbar"][disabled="true"] {
692 -moz-image-region: rect(36px, 306px, 54px, 288px);
693}
694
7d3f7f14 695#characterencoding-button[cui-areatype="toolbar"] {
43cc2806
RK
696 -moz-image-region: rect(0, 324px, 18px, 306px);
697}
698
7d3f7f14
RK
699#characterencoding-button[cui-areatype="toolbar"]:hover:not([disabled="true"]),
700#characterencoding-button[cui-areatype="toolbar"][open="true"] {
43cc2806
RK
701 -moz-image-region: rect(18px, 324px, 36px, 306px);
702}
703
7d3f7f14 704#characterencoding-button[cui-areatype="toolbar"][disabled="true"] {
cc4b0b0d
RK
705 -moz-image-region: rect(36px, 324px, 54px, 306px);
706}
707
7d3f7f14 708#new-window-button[cui-areatype="toolbar"] {
43cc2806
RK
709 -moz-image-region: rect(0, 342px, 18px, 324px);
710}
711
7d3f7f14 712#new-window-button[cui-areatype="toolbar"]:hover {
43cc2806
RK
713 -moz-image-region: rect(18px, 342px, 36px, 324px);
714}
715
46e71434
RK
716#e10s-button[cui-areatype="toolbar"] {
717 -moz-image-region: rect(0, 342px, 18px, 324px);
718}
719
720#e10s-button[cui-areatype="toolbar"]:hover {
721 -moz-image-region: rect(18px, 342px, 36px, 324px);
722}
723
724#e10s-button > .toolbarbutton-icon {
725 transform: scaleY(-1);
726}
727
7d3f7f14 728#new-tab-button[cui-areatype="toolbar"] {
43cc2806
RK
729 -moz-image-region: rect(0, 360px, 18px, 342px);
730}
731
7d3f7f14 732#new-tab-button[cui-areatype="toolbar"]:hover {
43cc2806
RK
733 -moz-image-region: rect(18px, 360px, 36px, 342px);
734}
735
7d3f7f14 736#privatebrowsing-button[cui-areatype="toolbar"] {
43cc2806
RK
737 -moz-image-region: rect(0, 378px, 18px, 360px);
738}
739
7d3f7f14 740#privatebrowsing-button[cui-areatype="toolbar"]:hover {
43cc2806
RK
741 -moz-image-region: rect(18px, 378px, 36px, 360px);
742}
743
7d3f7f14 744#find-button[cui-areatype="toolbar"] {
43cc2806
RK
745 -moz-image-region: rect(0, 396px, 18px, 378px);
746}
747
7d3f7f14 748#find-button[cui-areatype="toolbar"]:hover {
43cc2806
RK
749 -moz-image-region: rect(18px, 396px, 36px, 378px);
750}
751
7d3f7f14 752#print-button[cui-areatype="toolbar"] {
43cc2806
RK
753 -moz-image-region: rect(0, 414px, 18px, 396px);
754}
755
7d3f7f14 756#print-button[cui-areatype="toolbar"]:hover {
43cc2806
RK
757 -moz-image-region: rect(18px, 414px, 36px, 396px);
758}
759
7d3f7f14 760#fullscreen-button[cui-areatype="toolbar"] {
43cc2806
RK
761 -moz-image-region: rect(0, 432px, 18px, 414px);
762}
763
7d3f7f14 764#fullscreen-button[cui-areatype="toolbar"]:hover {
43cc2806
RK
765 -moz-image-region: rect(18px, 432px, 36px, 414px);
766}
767
7d3f7f14 768#developer-button[cui-areatype="toolbar"] {
43cc2806
RK
769 -moz-image-region: rect(0, 450px, 18px, 432px);
770}
771
7d3f7f14
RK
772#developer-button[cui-areatype="toolbar"]:hover,
773#developer-button[cui-areatype="toolbar"][open="true"] {
43cc2806
RK
774 -moz-image-region: rect(18px, 450px, 36px, 432px);
775}
776
7d3f7f14 777#preferences-button[cui-areatype="toolbar"] {
43cc2806
RK
778 -moz-image-region: rect(0, 468px, 18px, 450px);
779}
780
7d3f7f14 781#preferences-button[cui-areatype="toolbar"]:hover {
43cc2806
RK
782 -moz-image-region: rect(18px, 468px, 36px, 450px);
783}
784
7d3f7f14 785#PanelUI-menu-button {
43cc2806
RK
786 -moz-image-region: rect(0, 486px, 18px, 468px);
787}
788
7d3f7f14
RK
789#PanelUI-menu-button:hover,
790#PanelUI-menu-button[open="true"] {
43cc2806
RK
791 -moz-image-region: rect(18px, 486px, 36px, 468px);
792}
793
51994fad 794#edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button {
43cc2806
RK
795 -moz-image-region: rect(0, 504px, 18px, 486px);
796}
797
51994fad 798#edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button:hover:not([disabled="true"]) {
43cc2806
RK
799 -moz-image-region: rect(18px, 504px, 36px, 486px);
800}
801
51994fad 802#edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button[disabled="true"] {
cc4b0b0d
RK
803 -moz-image-region: rect(36px, 504px, 54px, 486px);
804}
805
51994fad 806#edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button {
43cc2806
RK
807 -moz-image-region: rect(0, 522px, 18px, 504px);
808}
809
51994fad 810#edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button:hover:not([disabled="true"]) {
43cc2806
RK
811 -moz-image-region: rect(18px, 522px, 36px, 504px);
812}
813
51994fad 814#edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button[disabled="true"] {
cc4b0b0d
RK
815 -moz-image-region: rect(36px, 522px, 54px, 504px);
816}
817
51994fad 818#edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button {
43cc2806
RK
819 -moz-image-region: rect(0, 540px, 18px, 522px);
820}
821
51994fad 822#edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button:hover:not([disabled="true"]) {
43cc2806
RK
823 -moz-image-region: rect(18px, 540px, 36px, 522px);
824}
825
51994fad 826#edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button[disabled="true"] {
cc4b0b0d
RK
827 -moz-image-region: rect(36px, 540px, 54px, 522px);
828}
829
51994fad 830#zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button {
43cc2806
RK
831 -moz-image-region: rect(0, 558px, 18px, 540px);
832}
833
51994fad 834#zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button:hover:not([disabled="true"]) {
43cc2806
RK
835 -moz-image-region: rect(18px, 558px, 36px, 540px);
836}
837
51994fad 838#zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button[disabled="true"] {
cc4b0b0d
RK
839 -moz-image-region: rect(36px, 558px, 54px, 540px);
840}
841
51994fad 842#zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button {
43cc2806
RK
843 -moz-image-region: rect(0, 576px, 18px, 558px);
844}
845
51994fad 846#zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button:hover:not([disabled="true"]) {
43cc2806
RK
847 -moz-image-region: rect(18px, 576px, 36px, 558px);
848}
849
51994fad 850#zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button[disabled="true"] {
cc4b0b0d
RK
851 -moz-image-region: rect(36px, 576px, 54px, 558px);
852}
853
7d3f7f14 854#nav-bar-overflow-button {
43cc2806
RK
855 -moz-image-region: rect(0, 612px, 18px, 594px);
856}
857
7d3f7f14
RK
858#nav-bar-overflow-button:hover,
859#nav-bar-overflow-button[open="true"] {
43cc2806
RK
860 -moz-image-region: rect(18px, 612px, 36px, 594px);
861}
862
46e71434
RK
863#nav-bar-overflow-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
864 transform: scaleX(-1);
865}
866
c0f6797e
RK
867#tabview-button {
868 -moz-image-region: rect(0, 648px, 18px, 630px);
869}
870
871#tabview-button:hover {
872 -moz-image-region: rect(18px, 648px, 36px, 630px);
873}
874
875#email-link-button[cui-areatype="toolbar"] {
876 -moz-image-region: rect(0, 666px, 18px, 648px);
877}
878
22180555 879#email-button[cui-areatype="toolbar"]:hover:not([disabled="true"]) {
c0f6797e
RK
880 -moz-image-region: rect(18px, 666px, 36px, 648px);
881}
882
22180555
RK
883#email-button[cui-areatype="toolbar"][disabled="true"] {
884 -moz-image-region: rect(36px, 666px, 54px, 648px);
885}
886
c0f6797e
RK
887#sidebar-button[cui-areatype="toolbar"] {
888 -moz-image-region: rect(0, 684px, 18px, 666px);
889}
890
891#sidebar-button[cui-areatype="toolbar"]:hover {
892 -moz-image-region: rect(18px, 684px, 36px, 666px);
893}
894
22180555
RK
895#panic-button[cui-areatype="toolbar"] {
896 -moz-image-region: rect(0, 702px, 18px, 684px);
897}
898
899#panic-button[cui-areatype="toolbar"]:hover,
900#panic-button[cui-areatype="toolbar"][open] {
901 -moz-image-region: rect(18px, 702px, 36px, 684px);
902}
903
904#panic-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
905 transform: scaleX(-1);
906}
907
58615cfe 908#loop-button,
19988d2d 909#loop-button > .toolbarbutton-badge-stack {
d0e580f1
RK
910 list-style-image: url("chrome://browser/skin/loop/toolbarfx.png");
911 -moz-image-region: rect(0, 18px, 18px, 0);
912}
913
58615cfe 914#loop-button:not([disabled="true"]):-moz-any(:hover,:hover:active,[open]),
19988d2d 915#loop-button:not([disabled="true"]):-moz-any(:hover,:hover:active,[open]) > .toolbarbutton-badge-stack {
d0e580f1
RK
916 -moz-image-region: rect(0, 90px, 18px, 72px);
917}
918
58615cfe
RK
919#loop-button[state="disabled"],
920#loop-button[disabled="true"],
19988d2d
RK
921#loop-button[state="disabled"] > .toolbarbutton-badge-stack,
922#loop-button[disabled="true"] > .toolbarbutton-badge-stack {
d0e580f1
RK
923 -moz-image-region: rect(0, 36px, 18px, 18px);
924}
925
58615cfe 926#loop-button[disabled="true"]:-moz-any(:hover,:hover:active,[open]),
19988d2d 927#loop-button[disabled="true"]:-moz-any(:hover,:hover:active,[open]) > .toolbarbutton-badge-stack {
d0e580f1
RK
928 -moz-image-region: rect(0, 126px, 18px, 108px);
929}
930
58615cfe 931#loop-button:not([disabled="true"])[state="error"],
19988d2d 932#loop-button:not([disabled="true"])[state="error"] > .toolbarbutton-badge-stack {
d0e580f1
RK
933 -moz-image-region: rect(0, 54px, 18px, 36px);
934}
935
58615cfe 936#loop-button:not([disabled="true"])[state="action"],
19988d2d 937#loop-button:not([disabled="true"])[state="action"] > .toolbarbutton-badge-stack {
d0e580f1
RK
938 -moz-image-region: rect(0, 72px, 18px, 54px);
939}
940
58615cfe 941#loop-button:not([disabled="true"])[state="active"],
19988d2d 942#loop-button:not([disabled="true"])[state="active"] > .toolbarbutton-badge-stack {
d0e580f1
RK
943 -moz-image-region: rect(0, 108px, 18px, 90px);
944}
945
e548e22e
RK
946#webide-button[cui-areatype="toolbar"] {
947 -moz-image-region: rect(0, 738px, 18px, 720px);
948}
949
950#webide-button[cui-areatype="toolbar"]:hover {
951 -moz-image-region: rect(18px, 738px, 36px, 720px);
952}
953
43cc2806
RK
954/* === END toolbarbuttons.inc.css === */
955
956/* === BEGIN menupanel.inc.css === */
957
958/* Menu panel and palette styles */
959
e548e22e
RK
960:root {
961 /* avoid aero overrides with changed filenames */
962 --menupanel-list-style-image: url(chrome://browser/skin/menuPanelFx.png);
963 --menupanel-small-list-style-image: url(chrome://browser/skin/menuPanelFx-small.png);
964}
965
51994fad 966toolbaritem[sdkstylewidget="true"] > toolbarbutton,
5401f433
RK
967:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
968 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
1988bb88 969 #social-share-button, #open-file-button, #find-button, #developer-button,
a5cb6e53 970 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
5401f433
RK
971 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
972 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
b4888bae 973 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #loop-button)[cui-areatype="menu-panel"],
5401f433
RK
974toolbarpaletteitem[place="palette"] > :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
975 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
1988bb88 976 #social-share-button, #open-file-button, #find-button, #developer-button,
a5cb6e53 977 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
5401f433
RK
978 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
979 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
b4888bae 980 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #loop-button) {
e548e22e 981 list-style-image: var(--menupanel-list-style-image);
43cc2806
RK
982}
983
984#home-button[cui-areatype="menu-panel"],
7d3f7f14 985toolbarpaletteitem[place="palette"] > #home-button {
43cc2806
RK
986 -moz-image-region: rect(0px, 128px, 32px, 96px);
987}
988
cc4b0b0d 989#home-button[cui-areatype="menu-panel"]:hover,
7d3f7f14 990toolbarpaletteitem[place="palette"] > #home-button:hover {
cc4b0b0d
RK
991 -moz-image-region: rect(32px, 128px, 64px, 96px);
992}
993
43cc2806 994#bookmarks-menu-button[cui-areatype="menu-panel"],
7d3f7f14 995toolbarpaletteitem[place="palette"] > #bookmarks-menu-button {
46e71434 996 -moz-image-region: rect(0px, 192px, 32px, 160px);
43cc2806
RK
997}
998
cc4b0b0d 999#bookmarks-menu-button[cui-areatype="menu-panel"]:hover,
7d3f7f14 1000toolbarpaletteitem[place="palette"] > #bookmarks-menu-button:hover {
46e71434
RK
1001 -moz-image-region: rect(32px, 192px, 64px, 160px);
1002}
1003
1004#bookmarks-menu-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1005 -moz-image-region: rect(32px, 192px, 64px, 160px);
cc4b0b0d
RK
1006}
1007
43cc2806 1008#history-panelmenu[cui-areatype="menu-panel"],
7d3f7f14 1009toolbarpaletteitem[place="palette"] > #history-panelmenu {
43cc2806
RK
1010 -moz-image-region: rect(0px, 224px, 32px, 192px);
1011}
1012
cc4b0b0d 1013#history-panelmenu[cui-areatype="menu-panel"]:hover,
7d3f7f14 1014toolbarpaletteitem[place="palette"] > #history-panelmenu:hover {
cc4b0b0d
RK
1015 -moz-image-region: rect(32px, 224px, 64px, 192px);
1016}
1017
46e71434
RK
1018#history-panelmenu[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1019 -moz-image-region: rect(32px, 224px, 64px, 192px);
1020}
1021
43cc2806 1022#downloads-button[cui-areatype="menu-panel"],
7d3f7f14 1023toolbarpaletteitem[place="palette"] > #downloads-button {
43cc2806
RK
1024 -moz-image-region: rect(0px, 256px, 32px, 224px);
1025}
1026
cc4b0b0d 1027#downloads-button[cui-areatype="menu-panel"]:hover,
7d3f7f14 1028toolbarpaletteitem[place="palette"] > #downloads-button:hover {
cc4b0b0d
RK
1029 -moz-image-region: rect(32px, 256px, 64px, 224px);
1030}
1031
43cc2806 1032#add-ons-button[cui-areatype="menu-panel"],
7d3f7f14 1033toolbarpaletteitem[place="palette"] > #add-ons-button {
43cc2806
RK
1034 -moz-image-region: rect(0px, 288px, 32px, 256px);
1035}
1036
cc4b0b0d 1037#add-ons-button[cui-areatype="menu-panel"]:hover,
7d3f7f14 1038toolbarpaletteitem[place="palette"] > #add-ons-button:hover {
cc4b0b0d
RK
1039 -moz-image-region: rect(32px, 288px, 64px, 256px);
1040}
1041
43cc2806 1042#open-file-button[cui-areatype="menu-panel"],
7d3f7f14 1043toolbarpaletteitem[place="palette"] > #open-file-button {
43cc2806
RK
1044 -moz-image-region: rect(0px, 320px, 32px, 288px);
1045}
1046
cc4b0b0d 1047#open-file-button[cui-areatype="menu-panel"]:hover,
7d3f7f14 1048toolbarpaletteitem[place="palette"] > #open-file-button:hover {
cc4b0b0d
RK
1049 -moz-image-region: rect(32px, 320px, 64px, 288px);
1050}
1051
43cc2806 1052#save-page-button[cui-areatype="menu-panel"],
7d3f7f14 1053toolbarpaletteitem[place="palette"] > #save-page-button {
43cc2806
RK
1054 -moz-image-region: rect(0px, 352px, 32px, 320px);
1055}
1056
cc4b0b0d 1057#save-page-button[cui-areatype="menu-panel"]:hover,
7d3f7f14 1058toolbarpaletteitem[place="palette"] > #save-page-button:hover {
cc4b0b0d
RK
1059 -moz-image-region: rect(32px, 352px, 64px, 320px);
1060}
1061
43cc2806 1062#sync-button[cui-areatype="menu-panel"],
7d3f7f14 1063toolbarpaletteitem[place="palette"] > #sync-button {
43cc2806
RK
1064 -moz-image-region: rect(0px, 384px, 32px, 352px);
1065}
1066
cc4b0b0d 1067#sync-button[cui-areatype="menu-panel"]:hover,
7d3f7f14 1068toolbarpaletteitem[place="palette"] > #sync-button:hover {
cc4b0b0d
RK
1069 -moz-image-region: rect(32px, 384px, 64px, 352px);
1070}
1071
5401f433
RK
1072#sync-button[cui-areatype="menu-panel"][status="active"] {
1073 list-style-image: url("chrome://browser/skin/syncProgress-menuPanel.png");
1074 -moz-image-region: rect(0px, 32px, 32px, 0px);
1075}
1076
43cc2806 1077#feed-button[cui-areatype="menu-panel"],
7d3f7f14 1078toolbarpaletteitem[place="palette"] > #feed-button {
43cc2806
RK
1079 -moz-image-region: rect(0px, 416px, 32px, 384px);
1080}
1081
cc4b0b0d 1082#feed-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
7d3f7f14 1083toolbarpaletteitem[place="palette"] > #feed-button:hover:not([disabled="true"]) {
cc4b0b0d
RK
1084 -moz-image-region: rect(32px, 416px, 64px, 384px);
1085}
1086
1087#feed-button[cui-areatype="menu-panel"][disabled="true"],
7d3f7f14 1088toolbarpaletteitem[place="palette"] > #feed-button[disabled="true"] {
cc4b0b0d
RK
1089 -moz-image-region: rect(64px, 416px, 96px, 384px);
1090}
1091
43cc2806 1092#social-share-button[cui-areatype="menu-panel"],
7d3f7f14 1093toolbarpaletteitem[place="palette"] > #social-share-button {
43cc2806
RK
1094 -moz-image-region: rect(0px, 448px, 32px, 416px);
1095}
1096
22180555
RK
1097#social-share-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
1098toolbarpaletteitem[place="palette"] > #social-share-button:hover:not([disabled="true"]) {
cc4b0b0d
RK
1099 -moz-image-region: rect(32px, 448px, 64px, 416px);
1100}
1101
22180555
RK
1102#social-share-button[cui-areatype="menu-panel"][disabled="true"],
1103toolbarpaletteitem[place="palette"] > #social-share-button[disabled="true"] {
1104 -moz-image-region: rect(64px, 448px, 96px, 416px);
1105}
1106
43cc2806 1107#characterencoding-button[cui-areatype="menu-panel"],
7d3f7f14 1108toolbarpaletteitem[place="palette"] > #characterencoding-button {
43cc2806
RK
1109 -moz-image-region: rect(0px, 480px, 32px, 448px);
1110}
1111
cc4b0b0d 1112#characterencoding-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
7d3f7f14 1113toolbarpaletteitem[place="palette"] > #characterencoding-button:hover:not([disabled="true"]) {
cc4b0b0d
RK
1114 -moz-image-region: rect(32px, 480px, 64px, 448px);
1115}
1116
1117#characterencoding-button[cui-areatype="menu-panel"][disabled="true"],
7d3f7f14 1118toolbarpaletteitem[place="palette"] > #characterencoding-button[disabled="true"] {
cc4b0b0d
RK
1119 -moz-image-region: rect(64px, 480px, 96px, 448px);
1120}
1121
46e71434
RK
1122#characterencoding-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1123 -moz-image-region: rect(32px, 480px, 64px, 448px);
1124}
1125
43cc2806 1126#new-window-button[cui-areatype="menu-panel"],
7d3f7f14 1127toolbarpaletteitem[place="palette"] > #new-window-button {
43cc2806
RK
1128 -moz-image-region: rect(0px, 512px, 32px, 480px);
1129}
1130
cc4b0b0d 1131#new-window-button[cui-areatype="menu-panel"]:hover,
7d3f7f14 1132toolbarpaletteitem[place="palette"] > #new-window-button:hover {
cc4b0b0d
RK
1133 -moz-image-region: rect(32px, 512px, 64px, 480px);
1134}
1135
5401f433
RK
1136#e10s-button[cui-areatype="menu-panel"],
1137toolbarpaletteitem[place="palette"] > #e10s-button {
1138 -moz-image-region: rect(0px, 512px, 32px, 480px);
1139}
1140
1141#e10s-button[cui-areatype="menu-panel"]:hover,
1142toolbarpaletteitem[place="palette"] > #e10s-button:hover {
1143 -moz-image-region: rect(32px, 512px, 64px, 480px);
1144}
1145
43cc2806 1146#new-tab-button[cui-areatype="menu-panel"],
7d3f7f14 1147toolbarpaletteitem[place="palette"] > #new-tab-button {
43cc2806
RK
1148 -moz-image-region: rect(0px, 544px, 32px, 512px);
1149}
1150
cc4b0b0d 1151#new-tab-button[cui-areatype="menu-panel"]:hover,
7d3f7f14 1152toolbarpaletteitem[place="palette"] > #new-tab-button:hover {
cc4b0b0d
RK
1153 -moz-image-region: rect(32px, 544px, 64px, 512px);
1154}
1155
43cc2806 1156#privatebrowsing-button[cui-areatype="menu-panel"],
7d3f7f14 1157toolbarpaletteitem[place="palette"] > #privatebrowsing-button {
43cc2806
RK
1158 -moz-image-region: rect(0px, 576px, 32px, 544px);
1159}
1160
cc4b0b0d 1161#privatebrowsing-button[cui-areatype="menu-panel"]:hover,
7d3f7f14 1162toolbarpaletteitem[place="palette"] > #privatebrowsing-button:hover {
cc4b0b0d
RK
1163 -moz-image-region: rect(32px, 576px, 64px, 544px);
1164}
1165
46e71434
RK
1166#tabview-button[cui-areatype="menu-panel"],
1167toolbarpaletteitem[place="palette"] > #tabview-button {
1168 -moz-image-region: rect(0px, 608px, 32px, 576px);
1169}
1170
1171#tabview-button[cui-areatype="menu-panel"]:hover,
1172toolbarpaletteitem[place="palette"] > #tabview-button:hover {
1173 -moz-image-region: rect(32px, 608px, 64px, 576px);
1174}
1175
43cc2806 1176#find-button[cui-areatype="menu-panel"],
7d3f7f14 1177toolbarpaletteitem[place="palette"] > #find-button {
43cc2806
RK
1178 -moz-image-region: rect(0px, 640px, 32px, 608px);
1179}
1180
cc4b0b0d 1181#find-button[cui-areatype="menu-panel"]:hover,
7d3f7f14 1182toolbarpaletteitem[place="palette"] > #find-button:hover {
cc4b0b0d
RK
1183 -moz-image-region: rect(32px, 640px, 64px, 608px);
1184}
1185
43cc2806 1186#print-button[cui-areatype="menu-panel"],
7d3f7f14 1187toolbarpaletteitem[place="palette"] > #print-button {
43cc2806
RK
1188 -moz-image-region: rect(0px, 672px, 32px, 640px);
1189}
1190
cc4b0b0d 1191#print-button[cui-areatype="menu-panel"]:hover,
7d3f7f14 1192toolbarpaletteitem[place="palette"] > #print-button:hover {
cc4b0b0d
RK
1193 -moz-image-region: rect(32px, 672px, 64px, 640px);
1194}
1195
43cc2806 1196#fullscreen-button[cui-areatype="menu-panel"],
7d3f7f14 1197toolbarpaletteitem[place="palette"] > #fullscreen-button {
43cc2806
RK
1198 -moz-image-region: rect(0px, 704px, 32px, 672px);
1199}
1200
cc4b0b0d 1201#fullscreen-button[cui-areatype="menu-panel"]:hover,
7d3f7f14 1202toolbarpaletteitem[place="palette"] > #fullscreen-button:hover {
cc4b0b0d
RK
1203 -moz-image-region: rect(32px, 704px, 64px, 672px);
1204}
1205
43cc2806 1206#developer-button[cui-areatype="menu-panel"],
7d3f7f14 1207toolbarpaletteitem[place="palette"] > #developer-button {
43cc2806
RK
1208 -moz-image-region: rect(0px, 736px, 32px, 704px);
1209}
1210
cc4b0b0d 1211#developer-button[cui-areatype="menu-panel"]:hover,
7d3f7f14 1212toolbarpaletteitem[place="palette"] > #developer-button:hover {
cc4b0b0d
RK
1213 -moz-image-region: rect(32px, 736px, 64px, 704px);
1214}
1215
46e71434
RK
1216#developer-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1217 -moz-image-region: rect(32px, 736px, 64px, 704px);
1218}
1219
43cc2806 1220#preferences-button[cui-areatype="menu-panel"],
7d3f7f14 1221toolbarpaletteitem[place="palette"] > #preferences-button {
43cc2806
RK
1222 -moz-image-region: rect(0px, 768px, 32px, 736px);
1223}
1224
cc4b0b0d 1225#preferences-button[cui-areatype="menu-panel"]:hover,
7d3f7f14 1226toolbarpaletteitem[place="palette"] > #preferences-button:hover {
cc4b0b0d
RK
1227 -moz-image-region: rect(32px, 768px, 64px, 736px);
1228}
1229
46e71434
RK
1230#email-link-button[cui-areatype="menu-panel"],
1231toolbarpaletteitem[place="palette"] > #email-link-button {
1232 -moz-image-region: rect(0, 800px, 32px, 768px);
1233}
1234
22180555
RK
1235#email-link-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
1236toolbarpaletteitem[place="palette"] > #email-link-button:hover:not([disabled="true"]) {
46e71434
RK
1237 -moz-image-region: rect(32px, 800px, 64px, 768px);
1238}
1239
22180555
RK
1240#email-link-button[cui-areatype="menu-panel"][disabled="true"],
1241toolbarpaletteitem[place="palette"] > #email-link-button[disabled="true"] {
1242 -moz-image-region: rect(64px, 800px, 96px, 768px);
1243}
1244
46e71434
RK
1245#sidebar-button[cui-areatype="menu-panel"],
1246toolbarpaletteitem[place="palette"] > #sidebar-button {
1247 -moz-image-region: rect(0, 864px, 32px, 832px);
1248}
1249
1250#sidebar-button[cui-areatype="menu-panel"]:hover,
22180555
RK
1251toolbarpaletteitem[place="palette"] > #sidebar-button:hover,
1252#sidebar-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
46e71434
RK
1253 -moz-image-region: rect(32px, 864px, 64px, 832px);
1254}
1255
22180555
RK
1256#panic-button[cui-areatype="menu-panel"],
1257toolbarpaletteitem[place="palette"] > #panic-button {
1258 -moz-image-region: rect(0, 896px, 32px, 864px);
1259}
1260
1261#panic-button[cui-areatype="menu-panel"]:hover,
1262toolbarpaletteitem[place="palette"] > #panic-button:hover,
1263#panic-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1264 -moz-image-region: rect(32px, 896px, 64px, 864px);
1265}
1266
e548e22e
RK
1267#webide-button[cui-areatype="menu-panel"],
1268toolbarpaletteitem[place="palette"] > #webide-button {
1269 -moz-image-region: rect(0px, 960px, 32px, 928px);
1270}
1271
1272#webide-button[cui-areatype="menu-panel"]:hover,
1273toolbarpaletteitem[place="palette"] > #webide-button:hover {
1274 -moz-image-region: rect(32px, 960px, 64px, 928px);
1275}
1276
46e71434
RK
1277toolbaritem[sdkstylewidget="true"] > toolbarbutton {
1278 -moz-image-region: rect(0, 832px, 32px, 800px);
1279}
1280
58615cfe 1281#loop-button[cui-areatype="menu-panel"],
19988d2d 1282toolbarpaletteitem[place="palette"] > #loop-button {
d0e580f1
RK
1283 list-style-image: url("chrome://browser/skin/loop/menuPanel.png");
1284 -moz-image-region: rect(0, 32px, 32px, 0);
1285}
1286
1287/* Make sure that the state icons are not shown in the customization palette. */
19988d2d 1288toolbarpaletteitem[place="palette"] > #loop-button {
d0e580f1
RK
1289 -moz-image-region: rect(0, 32px, 32px, 0) !important;
1290}
1291
19988d2d 1292#loop-button[cui-areatype="menu-panel"]:not([disabled="true"]):-moz-any(:hover,:hover:active,[open]) {
d0e580f1
RK
1293 -moz-image-region: rect(0, 160px, 32px, 128px);
1294}
1295
58615cfe 1296#loop-button[cui-areatype="menu-panel"][state="disabled"],
19988d2d 1297#loop-button[cui-areatype="menu-panel"][disabled="true"] {
d0e580f1
RK
1298 -moz-image-region: rect(0, 64px, 32px, 32px);
1299}
1300
19988d2d 1301#loop-button[cui-areatype="menu-panel"][disabled="true"]:-moz-any(:hover,:hover:active,[open]) {
d0e580f1
RK
1302 -moz-image-region: rect(0, 224px, 32px, 192px);
1303}
1304
19988d2d 1305#loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="error"] {
d0e580f1
RK
1306 -moz-image-region: rect(0, 96px, 32px, 64px);
1307}
1308
19988d2d 1309#loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"] {
d0e580f1
RK
1310 -moz-image-region: rect(0, 128px, 32px, 96px);
1311}
1312
19988d2d 1313#loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"] {
d0e580f1
RK
1314 -moz-image-region: rect(0, 192px, 32px, 160px);
1315}
1316
43cc2806
RK
1317/* Wide panel control icons */
1318
51994fad
RK
1319#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton,
1320#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton,
7d3f7f14
RK
1321toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton,
1322toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton {
e548e22e 1323 list-style-image: var(--menupanel-small-list-style-image);
43cc2806
RK
1324}
1325
51994fad 1326#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button,
7d3f7f14 1327toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button {
43cc2806
RK
1328 -moz-image-region: rect(0px, 32px, 16px, 16px);
1329}
1330
51994fad 1331#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:hover:not([disabled="true"]),
7d3f7f14 1332toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button:hover:not([disabled="true"]) {
cc4b0b0d
RK
1333 -moz-image-region: rect(16px, 32px, 32px, 16px);
1334}
1335
51994fad 1336#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button[disabled="true"],
7d3f7f14 1337toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button[disabled="true"] {
cc4b0b0d
RK
1338 -moz-image-region: rect(32px, 32px, 48px, 16px);
1339}
1340
51994fad 1341#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
7d3f7f14 1342toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button {
43cc2806
RK
1343 -moz-image-region: rect(0px, 48px, 16px, 32px);
1344}
1345
51994fad 1346#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button:hover:not([disabled="true"]),
7d3f7f14 1347toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button:hover:not([disabled="true"]) {
cc4b0b0d
RK
1348 -moz-image-region: rect(16px, 48px, 32px, 32px);
1349}
1350
51994fad 1351#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button[disabled="true"],
7d3f7f14 1352toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button[disabled="true"] {
cc4b0b0d
RK
1353 -moz-image-region: rect(32px, 48px, 48px, 32px);
1354}
1355
51994fad 1356#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button,
7d3f7f14 1357toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button {
43cc2806
RK
1358 -moz-image-region: rect(0px, 64px, 16px, 48px);
1359}
1360
51994fad 1361#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:hover:not([disabled="true"]),
7d3f7f14 1362toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button:hover:not([disabled="true"]) {
cc4b0b0d
RK
1363 -moz-image-region: rect(16px, 64px, 32px, 48px);
1364}
1365
51994fad 1366#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button[disabled="true"],
7d3f7f14 1367toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button[disabled="true"] {
cc4b0b0d
RK
1368 -moz-image-region: rect(32px, 64px, 48px, 48px);
1369}
1370
51994fad 1371#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button,
7d3f7f14 1372toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button {
43cc2806
RK
1373 -moz-image-region: rect(0px, 80px, 16px, 64px);
1374}
1375
51994fad 1376#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:hover:not([disabled="true"]),
7d3f7f14 1377toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button:hover:not([disabled="true"]) {
cc4b0b0d
RK
1378 -moz-image-region: rect(16px, 80px, 32px, 64px);
1379}
1380
51994fad 1381#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button[disabled="true"],
7d3f7f14 1382toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button[disabled="true"] {
cc4b0b0d
RK
1383 -moz-image-region: rect(32px, 80px, 48px, 64px);
1384}
1385
51994fad 1386#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button,
7d3f7f14 1387toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button {
43cc2806
RK
1388 -moz-image-region: rect(0px, 96px, 16px, 80px);
1389}
1390
51994fad 1391#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:hover:not([disabled="true"]),
7d3f7f14 1392toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button:hover:not([disabled="true"]) {
cc4b0b0d
RK
1393 -moz-image-region: rect(16px, 96px, 32px, 80px);
1394}
1395
51994fad 1396#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button[disabled="true"],
7d3f7f14 1397toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button[disabled="true"] {
cc4b0b0d
RK
1398 -moz-image-region: rect(32px, 96px, 48px, 80px);
1399}
1400
e548e22e
RK
1401#add-share-provider {
1402 list-style-image: var(--menupanel-small-list-style-image);
1403 -moz-image-region: rect(0px, 96px, 16px, 80px);
1404}
1405
43cc2806
RK
1406/* === END menupanel.inc.css === */
1407
63ada306
RK
1408.toolbarbutton-1:not([type="menu-button"]) {
1409 -moz-box-orient: vertical;
1410}
1411
319c6529
RK
1412.toolbarbutton-1,
1413.toolbarbutton-1 > .toolbarbutton-menubutton-button {
c0f6797e
RK
1414/* min-width: 36px;
1415 min-height: 36px;*/
319c6529
RK
1416}
1417
1418.toolbarbutton-1,
1419.toolbarbutton-1 > .toolbarbutton-menubutton-button,
1420.toolbarbutton-1[disabled="true"]:hover:active,
1421.toolbarbutton-1[disabled="true"]:hover:active > .toolbarbutton-menubutton-button {
1422 padding: 1px 2px;
1423}
1424
1425.toolbarbutton-1:hover:active,
1426.toolbarbutton-1[open="true"],
1427.toolbarbutton-1:hover:active > .toolbarbutton-menubutton-button {
1428 padding-top: 2px;
1429 padding-bottom: 0px;
1430 -moz-padding-start: 3px;
1431 -moz-padding-end: 1px;
1432}
1433
c0f6797e
RK
1434#main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-icon,
1435#main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menu-dropmarker,
1436#main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-dropmarker,
1437#main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1438#main-window:not([customizing]) .toolbarbutton-1 > .toolbarbutton-menubutton-button[disabled=true] > .toolbarbutton-icon {
e20c83c3
RK
1439}
1440
c0f6797e
RK
1441.toolbarbutton-1 > .toolbarbutton-menu-dropmarker,
1442.toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
e20c83c3
RK
1443}
1444
c0f6797e
RK
1445toolbar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker:-moz-lwtheme-brighttext,
1446toolbar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:-moz-lwtheme-brighttext {
319c6529
RK
1447}
1448
c0f6797e
RK
1449.toolbarbutton-1 > .toolbarbutton-icon,
1450.toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
319c6529
RK
1451}
1452
20752032 1453.findbar-button,
c0f6797e
RK
1454#nav-bar .toolbarbutton-1,
1455#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
319c6529
RK
1456}
1457
c0f6797e
RK
1458#nav-bar .toolbarbutton-1:not([type=menu-button]),
1459#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1460#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
319c6529
RK
1461}
1462
c0f6797e
RK
1463#nav-bar #PanelUI-menu-button {
1464/* -moz-padding-start: 7px;
1465 -moz-padding-end: 5px;*/
319c6529
RK
1466}
1467
b1dfcf32 1468#nav-bar .toolbarbutton-1[type=panel],
8c5bee4f 1469#nav-bar .toolbarbutton-1[type=menu]:not(#back-button):not(#forward-button):not(#feed-button):not(#PanelUI-menu-button) {
c0f6797e
RK
1470/* padding-left: 5px;
1471 padding-right: 5px;*/
319c6529
RK
1472}
1473
c0f6797e
RK
1474#nav-bar .toolbarbutton-1 > menupopup {
1475/* margin-top: -3px;*/
319c6529
RK
1476}
1477
c0f6797e 1478#nav-bar .toolbarbutton-1 > menupopup.cui-widget-panel {
c1d2ce3e 1479 margin-top: -4px;
319c6529
RK
1480}
1481
c0f6797e
RK
1482#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1483/* -moz-padding-end: 0;*/
319c6529
RK
1484}
1485
c0f6797e
RK
1486#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1487/* -moz-padding-start: 0;
1488 -moz-box-align: center;*/
319c6529
RK
1489}
1490
20752032 1491.findbar-button > .toolbarbutton-text,
c0f6797e
RK
1492#nav-bar .toolbarbutton-1 > .toolbarbutton-icon,
1493#nav-bar .toolbarbutton-1 > .toolbarbutton-text,
19988d2d 1494#nav-bar .toolbarbutton-1 > .toolbarbutton-badge-stack,
c0f6797e
RK
1495#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1496#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
2c62526c 1497window:not([chromehidden~="toolbar"]) #urlbar-wrapper > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon {
c0f6797e
RK
1498/* padding: 2px 6px;
1499 border: 1px solid;
1500 border-color: transparent;
1501 transition-property: background-color, border-color;
1502 transition-duration: 150ms;*/
d54f5b23 1503}
c0f6797e
RK
1504/*
1505#nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-icon,
19988d2d 1506#nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-badge-stack,
c0f6797e
RK
1507#nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1508 padding: 3px 7px;
d54f5b23 1509}
c0f6797e 1510*/
d54f5b23 1511
c0f6797e 1512/* Help SDK icons fit: */
a5cb6e53 1513toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon,
19988d2d 1514toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-badge-stack > .toolbarbutton-icon {
c0f6797e 1515 width: 16px;
26125509
RK
1516}
1517
a5cb6e53 1518#nav-bar toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon {
c0f6797e
RK
1519 /* XXXgijs box models strike again: this is 16px + 2 * 7px padding + 2 * 1px border (from the rules above) */
1520 width: 32px;
26125509 1521}
26125509 1522
b1dfcf32
RK
1523#nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-icon,
1524#nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-badge-stack,
1525#nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button) > .toolbarbutton-icon,
1526#nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button) > .toolbarbutton-badge-stack,
c0f6797e
RK
1527#nav-bar .toolbarbutton-1[type=menu] > .toolbarbutton-text /* hack for add-ons that forcefully display the label */ {
1528/* -moz-padding-end: 17px;*/
319c6529
RK
1529}
1530
fa703ff4
RK
1531#nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-icon,
1532#nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button) > .toolbarbutton-icon {
1533 /* horizontal padding + border + icon width */
1534/* max-width: 43px;*/
1535}
1536
c0f6797e 1537#nav-bar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
319c6529
RK
1538}
1539
c0f6797e 1540#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
319c6529
RK
1541}
1542
c0f6797e 1543#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
38cfeb47
RK
1544}
1545
c0f6797e
RK
1546#nav-bar .toolbaritem-combined-buttons {
1547/* margin-left: 2px;
1548 margin-right: 2px;*/
38cfeb47
RK
1549}
1550
c0f6797e
RK
1551#nav-bar .toolbaritem-combined-buttons > .toolbarbutton-1 {
1552/* padding-left: 0;
1553 padding-right: 0;*/
319c6529
RK
1554}
1555
c0f6797e
RK
1556#nav-bar .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before,
1557#nav-bar .toolbaritem-combined-buttons > .toolbarbutton-1:-moz-any(:not(:hover):not([open]),[disabled=true]) + .toolbarbutton-1:-moz-any(:not(:hover):not([open]),[disabled=true])::before {
1558/*
1559 content: "";
1560 display: -moz-box;
1561 width: 1px;
1562 height: 16px;
1563 -moz-margin-end: -1px;
1564*/
319c6529
RK
1565}
1566
2c62526c 1567window:not([chromehidden~="toolbar"]) #urlbar-wrapper > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon {
319c6529
RK
1568}
1569
20752032 1570.findbar-button:not(:-moz-any([checked="true"],[disabled="true"])):hover > .toolbarbutton-text,
43371c9b 1571#nav-bar .toolbarbutton-1:not([disabled=true]) > .toolbarbutton-menubutton-button[open] + .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
c0f6797e
RK
1572#nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1573#nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1574#nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-icon,
1575#nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-text,
19988d2d 1576#nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-badge-stack,
2c62526c 1577window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button:not([open]):not(:active):not([disabled=true]):hover > .toolbarbutton-icon,
46e71434 1578#nav-bar .toolbarbutton-1:not([buttonover]):not([open]):not(:active):hover > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon {
319c6529
RK
1579}
1580
20752032 1581.findbar-button:not([disabled=true]):-moz-any([checked="true"],:hover:active) > .toolbarbutton-text,
43371c9b 1582#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):-moz-any(:hover:active, [open]) > .toolbarbutton-icon,
c0f6797e
RK
1583#nav-bar .toolbarbutton-1[open] > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon,
1584#nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-icon,
1585#nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-text,
19988d2d 1586#nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-stack {
319c6529
RK
1587}
1588
c0f6797e
RK
1589#TabsToolbar .toolbarbutton-1,
1590#TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1591.tabbrowser-arrowscrollbox > .scrollbutton-up,
1592.tabbrowser-arrowscrollbox > .scrollbutton-down {
e8519ae0
RK
1593}
1594
c0f6797e
RK
1595#TabsToolbar .toolbarbutton-1:not([disabled=true]):hover,
1596#TabsToolbar .toolbarbutton-1[open],
1597#TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):hover,
1598.tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled=true]):hover,
1599.tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled=true]):hover {
e8519ae0
RK
1600}
1601
c0f6797e 1602/* unified back/forward button */
319c6529 1603
c0f6797e 1604#forward-button {
589b5528 1605 -moz-box-align: stretch; /* let the button shape grow vertically with the location bar */
71bac478
RK
1606}
1607
c0f6797e
RK
1608#forward-button > menupopup {
1609 margin-top: 1px !important;
319c6529
RK
1610}
1611
c0f6797e
RK
1612#forward-button > .toolbarbutton-icon {
1613 background-clip: padding-box !important;
1614 /*mask: url(keyhole-forward-mask.svg#mask); XXX: this regresses twinopen */
5401f433 1615 /*clip-path: url(chrome://browser/content/browser.xul#keyhole-forward-clip-path) !important;*/
71bac478
RK
1616}
1617
c0f6797e 1618#forward-button {
aec5dfad 1619 -moz-margin-start: -4px !important;
9d1e25fa
RK
1620 padding-left: 5px;
1621 padding-right: 5px;
c0f6797e
RK
1622 margin-top: 3px;
1623 margin-bottom: 3px;
1624 border-radius: 0 10000px 10000px 0;
319c6529
RK
1625}
1626
c0f6797e
RK
1627#forward-button:-moz-locale-dir(rtl) {
1628 border-radius: 10000px 0 0 10000px;
8ad8bf83
RK
1629}
1630
2c62526c 1631window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not([switchingtabs]) > #forward-button {
aec5dfad 1632 transition: margin-left 150ms ease-out;
2c62526c
RK
1633}
1634
1635window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] {
aec5dfad 1636 margin-left: -27px !important;
2c62526c
RK
1637}
1638
1639window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] {
1640 /* delay the hiding of the forward button when hovered to avoid accidental clicks on the url bar */
1641 transition-delay: 100s;
1642}
1643
1644window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] {
1645 /* when not hovered anymore, trigger a new transition to hide the forward button immediately */
aec5dfad 1646 margin-left: -27.01px !important;
2c62526c
RK
1647}
1648
c0f6797e
RK
1649#back-button {
1650/* padding-top: 3px !important;
1651 padding-bottom: 3px !important;
1652 -moz-padding-start: 5px !important;
1653 -moz-padding-end: 0 !important;*/
1654 position: relative;
1655 z-index: 1;
1656 border-radius: 10000px;
1657 width: 30px;
1658 height: 30px;
1659 margin-top: -2px;
1660 margin-bottom: -2px;
143c5409
RK
1661}
1662
c0f6797e 1663#back-button:-moz-locale-dir(rtl) {
319c6529
RK
1664}
1665
c0f6797e
RK
1666#back-button > menupopup {
1667 margin-top: -1px !important;
b36fc72e
RK
1668}
1669
c0f6797e
RK
1670#back-button > .toolbarbutton-icon {
1671 border-radius: 10000px !important;
1672 background-clip: padding-box !important;
1673/* background-color: hsla(210,25%,98%,.08) !important;
1674 padding: 6px !important;
589b5528
RK
1675 border-style: none !important;
1676 box-shadow: 0 1px 0 0 hsla(210,4%,10%,.25),
1677 0 0 0 1px hsla(210,4%,10%,.25);*/
1678 transition-property: background-color, box-shadow !important;
c0f6797e 1679 transition-duration: 250ms !important;
143c5409
RK
1680}
1681
c0f6797e 1682#back-button:not([disabled="true"]):not([open="true"]):not(:active):hover > .toolbarbutton-icon {
589b5528 1683/* background-color: hsla(210,4%,10%,.08) !important;*/
143c5409
RK
1684}
1685
c0f6797e
RK
1686#back-button:not([disabled="true"]):hover:active > .toolbarbutton-icon,
1687#back-button[open="true"] > .toolbarbutton-icon {
1688/* background-color: hsla(210,4%,10%,.12) !important;
589b5528
RK
1689 box-shadow: 0 1px 0 0 hsla(210,4%,10%,.25),
1690 0 0 0 1px hsla(210,4%,10%,.25),
1691 0 1px 0 0 hsla(210,80%,20%,.1) inset !important;*/
143c5409
RK
1692}
1693
2c62526c 1694#back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
c0f6797e 1695 transform: scaleX(-1);
143c5409 1696}
c0f6797e
RK
1697/*
1698.unified-nav-back[_moz-menuactive]:-moz-locale-dir(ltr),
1699.unified-nav-forward[_moz-menuactive]:-moz-locale-dir(rtl) {
1700 list-style-image: url("chrome://browser/skin/menu-back.png") !important;
6adbc9a6
RK
1701}
1702
c0f6797e
RK
1703.unified-nav-forward[_moz-menuactive]:-moz-locale-dir(ltr),
1704.unified-nav-back[_moz-menuactive]:-moz-locale-dir(rtl) {
1705 list-style-image: url("chrome://browser/skin/menu-forward.png") !important;
6adbc9a6
RK
1706}
1707
c0f6797e
RK
1708#home-button.bookmark-item {
1709 list-style-image: url("chrome://browser/skin/Toolbar.png");
6adbc9a6
RK
1710}
1711
c0f6797e
RK
1712#main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1713#main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1714#main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1715#main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1716#main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1717#main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1718#home-button.bookmark-item:-moz-lwtheme-brighttext {
1719 position: relative;
1720 z-index: 1;
1721 list-style-image: url("chrome://browser/skin/Toolbar-inverted.png");
6adbc9a6
RK
1722}
1723
c0f6797e
RK
1724#main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1725#main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme) {
1726 list-style-image: url("chrome://browser/skin/syncProgress-toolbar-inverted.png");
6adbc9a6 1727}
c0f6797e 1728*/
6adbc9a6 1729
c0f6797e
RK
1730#downloads-button > .toolbarbutton-icon {
1731 margin: 0;
6adbc9a6
RK
1732}
1733
9168a62c 1734/* tabview menu item */
c0f6797e 1735
6adbc9a6 1736#menu_tabview {
832af407 1737 list-style-image: url("chrome://browser/skin/tabview/tabviewFx.png");
6adbc9a6
RK
1738 -moz-image-region: rect(1px, 89px, 17px, 73px);
1739}
1740
1741#menu_tabview[groups="0"] {
1742 -moz-image-region: rect(1px, 17px, 17px, 1px);
1743}
1744
1745#menu_tabview[groups="1"] {
1746 -moz-image-region: rect(1px, 35px, 17px, 19px);
1747}
1748
1749#menu_tabview[groups="2"] {
1750 -moz-image-region: rect(1px, 53px, 17px, 37px);
1751}
1752
1753#menu_tabview[groups="3"] {
1754 -moz-image-region: rect(1px, 71px, 17px, 55px);
1755}
1756
9168a62c
RK
1757/* undo close tab menu item */
1758#alltabs_undoCloseTab {
1759 list-style-image: url(chrome://browser/skin/undoCloseTab.png);
1760}
1761
2e389898 1762@media (min-resolution: 1.1dppx) {
9168a62c
RK
1763 #alltabs_undoCloseTab {
1764 list-style-image: url(chrome://browser/skin/undoCloseTab@2x.png);
1765 }
1766 #alltabs_undoCloseTab > .toolbarbutton-icon {
1767 width: 16px;
1768 }
1769}
1770
5401f433
RK
1771/* zoom control text (reset) button special case: */
1772
1773#nav-bar #zoom-reset-button > .toolbarbutton-text {
1774 /* To make this line up with the icons, it needs the same height (18px) +
1775 * padding (2 * 2px) + border (2 * 1px), but as a minimum because otherwise
1776 * increase in text sizes would break things...
1777 */
1778 min-height: 20px;
1779}
1780
319c6529
RK
1781/* ::::: fullscreen window controls ::::: */
1782
8d7ef0d9 1783#window-controls {
ab799a7a
RK
1784 -moz-margin-start: 4px;
1785}
1786
319c6529
RK
1787#minimize-button,
1788#restore-button,
1789#close-button {
c0f6797e
RK
1790/* list-style-image: url("chrome://global/skin/icons/windowControls.png");
1791 padding: 0; */
319c6529
RK
1792}
1793
1794#minimize-button {
1795 list-style-image: url("chrome://navigator/skin/icons/win-minimize.gif");
1796}
1797
1798#minimize-button:hover {
1799 list-style-image: url("chrome://navigator/skin/icons/win-minimize-hover.gif");
1800}
1801
1802#restore-button {
1803 list-style-image: url("chrome://navigator/skin/icons/win-restore.gif");
1804}
1805
1806#restore-button:hover {
1807 list-style-image: url("chrome://navigator/skin/icons/win-restore-hover.gif");
1808}
1809
1810#close-button {
1811 list-style-image: url("chrome://navigator/skin/icons/win-close.gif");
1812}
1813
1814#close-button:hover {
1815 list-style-image: url("chrome://navigator/skin/icons/win-close-hover.gif");
1816}
1817
1818/* ::::: Location Bar ::::: */
1819
319c6529
RK
1820#urlbar,
1821.searchbar-textbox {
1822 border-radius: 5px;
aec5dfad 1823 margin: 2px 0;
319c6529
RK
1824 -moz-margin-start: 3px;
1825}
1826
ffce2402 1827#urlbar {
f0071a71
RK
1828 /* make color as light as possible to deal with dark non-domain parts */
1829 color: #FFBFFF;
ffce2402
RK
1830}
1831
c9b0a396
RK
1832/* overlap the urlbar's border */
1833#PopupAutoCompleteRichResult {
1834 margin-top: -1px;
1835}
1836
319c6529
RK
1837#urlbar:-moz-lwtheme,
1838.searchbar-textbox:-moz-lwtheme {
1839 /* background-color: rgba(255,255,255,.8);
1840 @navbarTextboxCustomBorder@
1841 color: black; */
1842}
1843
c0f6797e
RK
1844#urlbar:-moz-lwtheme:hover:not([focused]):not([readonly]),
1845.searchbar-textbox:-moz-lwtheme:hover:not([focused]) {
1846/* background-color: rgba(255,255,255,.9);*/
1847}
1848
1849#urlbar:-moz-lwtheme[focused]:not([readonly]),
1850.searchbar-textbox:-moz-lwtheme[focused] {
1851/* background-color: white;*/
1852}
1853
2c62526c 1854window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar {
2299146f
RK
1855/* -moz-border-start: none;
1856 margin-left: 0;*/
2c62526c
RK
1857}
1858
1859window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(ltr) {
1860/* border-top-left-radius: 0;
1861 border-bottom-left-radius: 0; */
1862}
1863
1864window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
1865/* border-top-right-radius: 0;
1866 border-bottom-right-radius: 0; */
1867}
1868
1869window:not([chromehidden~="toolbar"]) #urlbar-wrapper {
1870/* clip-path: url("chrome://browser/content/browser.xul#urlbar-back-button-clip-path");*/
b1dfcf32 1871/* margin-inline-start: calc(-1 * var(--backbutton-urlbar-overlap)); */
2c62526c
RK
1872}
1873
fff8097b
RK
1874window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl),
1875window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
2c62526c 1876 /* let urlbar-back-button-clip-path clip the urlbar's right side for RTL */
71a617ff 1877 transform: scaleX(-1);
8ad8bf83
RK
1878}
1879
2c62526c
RK
1880window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl) {
1881 -moz-box-direction: reverse;
1882}
1883
a7145e95
RK
1884html|*.urlbar-input:-moz-lwtheme::-moz-placeholder,
1885.searchbar-textbox:-moz-lwtheme > .autocomplete-textbox-container > .textbox-input-box > html|*.textbox-input::-moz-placeholder {
319c6529
RK
1886 color: #E7ADE7;
1887}
1888
319c6529
RK
1889#urlbar-container {
1890 -moz-box-orient: horizontal;
1891 -moz-box-align: stretch;
1892}
1893
9abeb12c
RK
1894.urlbar-textbox-container {
1895 -moz-box-align: stretch;
1896}
1897
a40f6a79
RK
1898.urlbar-input-box {
1899 -moz-margin-start: 0;
1900}
1901
319c6529 1902#urlbar-icons {
319c6529
RK
1903 -moz-box-align: center;
1904}
1905
1906.urlbar-icon {
b8384c33 1907 padding: 0 2px;
fa703ff4
RK
1908 /* 16x16 icon with border-box sizing */
1909 width: 20px;
1910 height: 16px;
ffce2402
RK
1911}
1912
ffce2402 1913.search-go-container {
4b686546
RK
1914 padding: 2px;
1915}
1916
1917.search-go-container > .search-go-button {
1918 padding: 0;
319c6529
RK
1919}
1920
1437a48c
RK
1921#urlbar-search-footer {
1922 border-top: 1px solid #A09090;
1923}
1924
1925#urlbar-search-settings {
1926}
1927
1928#urlbar-search-settings:hover {
1929}
1930
1931#urlbar-search-settings:hover:active {
1932}
1933
319c6529
RK
1934#urlbar-search-splitter {
1935 min-width: 6px;
1936 -moz-margin-start: -3px;
1937 border: none;
1938 background: transparent;
1939}
1940
f0071a71 1941#urlbar-search-splitter + #urlbar-container > #urlbar,
319c6529
RK
1942#urlbar-search-splitter + #search-container > #searchbar > .searchbar-textbox {
1943 -moz-margin-start: 0;
1944}
1945
e20c83c3
RK
1946#urlbar-display-box {
1947}
1948
8922acc9 1949.urlbar-display {
319c6529
RK
1950 -moz-border-end: 1px solid #9C9CFF;
1951 -moz-margin-end: 3px;
ab799a7a
RK
1952 margin-top: 0;
1953 margin-bottom: 0;
a40f6a79 1954 -moz-margin-start: 0;
ab799a7a
RK
1955 color: #8050B0;
1956}
1957
b1dfcf32 1958/* === BEGIN urlbarSearchSuggestionsNotification.inc.css === */
e20c83c3 1959
b1dfcf32
RK
1960#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] {
1961 border-bottom: 1px solid #A09090;
1962 background-color: #000000;
1963 padding: 6px 0;
1964 -moz-padding-start: 44px;
1965 -moz-padding-end: 6px;
1966 background-image: url("chrome://browser/skin/info.svg");
1967 background-clip: padding-box;
1968 background-position: 20px center;
1969 background-repeat: no-repeat;
1970 background-size: 16px 16px;
8ad8bf83
RK
1971}
1972
b1dfcf32
RK
1973#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"]:-moz-locale-dir(rtl) {
1974 background-position: right 20px center;
8ad8bf83
RK
1975}
1976
b1dfcf32
RK
1977#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description {
1978 margin: 0;
1979 padding: 0;
2c62526c
RK
1980}
1981
b1dfcf32
RK
1982#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description > label.text-link {
1983 -moz-margin-start: 0;
8ad8bf83
RK
1984}
1985
b1dfcf32
RK
1986#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button {
1987 -moz-appearance: none;
b1dfcf32
RK
1988 min-width: 80px;
1989 border-radius: 3px;
1990 padding: 4px 16px;
1991 margin: 0;
1992 -moz-margin-start: 10px;
8ad8bf83
RK
1993}
1994
b1dfcf32 1995#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"] {
8ad8bf83
RK
1996}
1997
b1dfcf32 1998#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"]:hover {
8ad8bf83
RK
1999}
2000
b1dfcf32 2001#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"] {
8ad8bf83
RK
2002}
2003
b1dfcf32 2004#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"]:hover {
319c6529
RK
2005}
2006
b1dfcf32 2007/* === END urlbarSearchSuggestionsNotification.inc.css === */
319c6529 2008
b1dfcf32
RK
2009#search-container {
2010 min-width: calc(54px + 11ch);
319c6529
RK
2011}
2012
b1dfcf32 2013/* identity box */
1437a48c 2014
19988d2d 2015#identity-box.verifiedIdentity:not(:-moz-lwtheme):not(:hover):not([open=true]) {
f36031bd 2016 background-color: var(--identity-box-verified-background-color);
319c6529
RK
2017}
2018
2019#identity-box:-moz-focusring {
2020 outline: 1px dotted #008484;
f993773d 2021 outline-offset: -1px;
319c6529
RK
2022}
2023
2024#identity-box.verifiedDomain:-moz-focusring,
2025#identity-box.verifiedIdentity:-moz-focusring {
2026 outline-color: #000000;
2027}
2028
319c6529
RK
2029/* Location bar dropmarker */
2030
38cfeb47 2031.urlbar-history-dropmarker:not(:hover):not([open="true"]) {
319c6529 2032 background-color: transparent;
319c6529
RK
2033}
2034
00f971bc 2035#urlbar-container[combined="true"] > #urlbar > .urlbar-history-dropmarker,
c9b0a396
RK
2036#urlbar-wrapper > #urlbar > .urlbar-history-dropmarker,
2037#urlbar-wrapper > #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker {
38cfeb47
RK
2038 border: none;
2039 border-radius: 0px;
d7b7f7e1
RK
2040 transition: opacity 0.15s ease;
2041}
2042
2043#navigator-toolbox:not(:hover) .urlbar-history-dropmarker {
2044 opacity: 0;
319c6529
RK
2045}
2046
ffce2402
RK
2047.urlbar-history-dropmarker:hover {
2048}
2049
2050.urlbar-history-dropmarker:hover:active,
2051.urlbar-history-dropmarker[open="true"] {
2052}
2053
319c6529
RK
2054/* page proxy icon */
2055
e7c8bab1
RK
2056/* === BEGIN identity-block.inc.css === */
2057
b1dfcf32 2058#identity-box {
e548e22e 2059 --identity-box-verified-color: #008484;
e7c8bab1 2060 /* Default theme does different color per channel, we can't as they do it build-time. */
e548e22e 2061 --identity-box-chrome-color: #9C9CFF;
b1dfcf32 2062
f36031bd 2063 border-inline-end: 1px solid var(--urlbar-separator-color);
b1dfcf32
RK
2064 font-size: .9em;
2065 border-radius: 2px;
024a65e9
RK
2066 padding: 3px 5px;
2067 margin-inline-end: 4px;
b1dfcf32 2068 overflow: hidden;
024a65e9
RK
2069 /* The latter two properties have a transition to handle the delayed hiding of
2070 the forward button when hovered. */
2071 transition: background-color 150ms ease, padding-left, padding-right;
b1dfcf32
RK
2072}
2073
2074#identity-box:-moz-locale-dir(ltr) {
2075 border-top-right-radius: 0;
2076 border-bottom-right-radius: 0;
2077}
2078
2079#identity-box:-moz-locale-dir(rtl) {
2080 border-top-left-radius: 0;
2081 border-bottom-left-radius: 0;
e548e22e
RK
2082}
2083
2084#urlbar[pageproxystate="valid"] > #identity-box.chromeUI {
2085 color: var(--identity-box-chrome-color);
2086 -moz-border-end: 1px solid var(--identity-box-chrome-color);
e7c8bab1
RK
2087}
2088
2089#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
e548e22e
RK
2090 color: var(--identity-box-verified-color);
2091 -moz-border-end: 1px solid var(--identity-box-verified-color);
e7c8bab1
RK
2092}
2093
b1dfcf32 2094#notification-popup-box:not([hidden]) + #identity-box {
f91d15f9 2095 padding-inline-start: 10px;
b1dfcf32
RK
2096 border-radius: 0;
2097}
2098
2099window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box {
dc9d5d64
RK
2100/* border-radius: 0;
2101 padding-inline-start: 2px; */
2102 padding-inline-end: 2px;
2103 margin-inline-end: 1px;
b1dfcf32
RK
2104}
2105
b1dfcf32
RK
2106window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] + #urlbar >
2107 #notification-popup-box[hidden] + #identity-box {
2108 padding-inline-start: 2px;
2109}
2110
2111window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] + #urlbar >
2112 #notification-popup-box[hidden] + #identity-box {
024a65e9
RK
2113 /* Forward button hiding is delayed when hovered, so we should use the same
2114 delay for the identity box. We handle both horizontal paddings (for LTR and
2115 RTL), the latter two delays here are for padding-left and padding-right. */
2116 transition-delay: 0s, 100s, 100s;
b1dfcf32
RK
2117}
2118
2119window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] + #urlbar >
2120 #notification-popup-box[hidden] + #identity-box {
2121 /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
2122 padding-inline-start: 2.01px;
e7c8bab1
RK
2123}
2124
c9b0a396
RK
2125/* MAIN IDENTITY ICON */
2126
2127#identity-icon {
2128 width: 16px;
2129 height: 16px;
2130 list-style-image: url(chrome://browser/skin/identity-icon.svg#normal);
2131}
2132
2133#identity-box:hover > #identity-icon,
2134#identity-box[open=true] > #identity-icon {
2135 list-style-image: url(chrome://browser/skin/identity-icon.svg#hover);
2136}
2137
2138#urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon {
2139 list-style-image: url(chrome://branding/content/identity-icons-brand.svg);
2140}
2141
2142#urlbar[pageproxystate="invalid"] > #identity-box > #identity-icon {
2143 opacity: 0.3;
2144}
2145
2146#urlbar[actiontype="searchengine"] > #identity-box > #identity-icon {
2147 -moz-image-region: inherit;
2148 list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon);
2149 width: 16px;
2150 height: 16px;
2151 opacity: 1;
2152}
2153
2154/* TRACKING PROTECTION ICON */
2155
2156#tracking-protection-icon {
2157 width: 16px;
2158 height: 16px;
2159 margin-inline-start: 2px;
2160 margin-inline-end: 0;
2161 list-style-image: url(chrome://browser/skin/tracking-protection-16.svg);
2162 opacity: 1;
2163}
2164
2165#tracking-protection-icon[state="loaded-tracking-content"] {
2166 list-style-image: url(chrome://browser/skin/tracking-protection-disabled-16.svg);
2167}
2168
2169#tracking-protection-icon[animate] {
2170 transition: margin-left 200ms ease-out, margin-right 200ms ease-out;
2171}
2172
2173#tracking-protection-icon:not([state]) {
2174 margin-inline-end: -18px;
2175 pointer-events: none;
2176 opacity: 0;
2177 /* Only animate the shield in, when it disappears hide it immediately. */
2178 transition: none;
2179}
2180
2181#urlbar[pageproxystate="invalid"] > #identity-box > #tracking-protection-icon {
2182 visibility: collapse;
2183}
2184
2185/* CONNECTION ICON */
2186
2187#connection-icon {
2188 width: 16px;
2189 height: 16px;
2190 margin-inline-start: 2px;
2191 visibility: collapse;
2192}
2193
2194#urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon,
2195#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon {
2196 list-style-image: url(chrome://browser/skin/identity-secure.svg);
2197 visibility: visible;
2198}
2199
2200#urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon,
2201#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon {
2202 list-style-image: url(chrome://browser/skin/identity-mixed-active-loaded.svg);
2203 visibility: visible;
2204}
2205
2206#urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon,
2207#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon,
2208#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon {
2209 list-style-image: url(chrome://browser/skin/identity-mixed-passive-loaded.svg);
2210 visibility: visible;
2211}
2212
2213#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon {
2214 list-style-image: url(chrome://browser/skin/identity-mixed-active-blocked.svg);
2215 visibility: visible;
2216}
2217
e7c8bab1
RK
2218/* === END identity-block.inc.css === */
2219
2220#page-proxy-favicon {
2221 -moz-image-region: rect(0, 16px, 16px, 0);
2222}
2223
3b1da406 2224window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box > #page-proxy-favicon {
c0f6797e
RK
2225/* -moz-margin-end: 1px;*/
2226}
2227
2a5b7882 2228#identity-box:hover > #page-proxy-favicon {
a40f6a79
RK
2229 -moz-image-region: rect(0, 32px, 16px, 16px);
2230}
2231
2a5b7882
RK
2232#identity-box:hover:active > #page-proxy-favicon,
2233#identity-box[open=true] > #page-proxy-favicon {
a40f6a79 2234 -moz-image-region: rect(0, 48px, 16px, 32px);
acb0e9b8 2235}
2236
2a5b7882
RK
2237#identity-box:hover {
2238 background-color: #FFCF00;
7092015d 2239 color: #000000;
2a5b7882
RK
2240}
2241
2242#identity-box:hover:active,
2243#identity-box[open=true] {
2244 background-color: #FF9F00;
7092015d 2245 color: #000000;
2a5b7882
RK
2246}
2247
56859d76
RK
2248#urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover,
2249#urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active,
2250#urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] {
2251 background-color: #9C9CFF;
2252 color: #000000;
2253}
2254
387e6560
RK
2255#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover,
2256#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active,
2257#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] {
2a5b7882
RK
2258 background-color: #008484;
2259 color: #000000;
2260}
2261
319c6529
RK
2262/* autocomplete */
2263
319c6529
RK
2264#treecolAutoCompleteImage {
2265 max-width: 36px;
2266}
acb0e9b8 2267
319c6529
RK
2268.ac-result-type-bookmark,
2269.autocomplete-treebody::-moz-tree-image(bookmark, treecolAutoCompleteImage) {
71bac478 2270 list-style-image: url("chrome://browser/skin/places/bookmark.png");
319c6529 2271 -moz-image-region: rect(0px 16px 16px 0px);
c1f7cc84 2272 width: 16px;
319c6529 2273 height: 16px;
acb0e9b8 2274}
2275
c0f6797e
RK
2276richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-bookmark,
2277.autocomplete-treebody::-moz-tree-image(selected, current, bookmark, treecolAutoCompleteImage) {
2278/* -moz-image-region: rect(0px 48px 16px 32px);*/
2279}
2280
319c6529 2281.ac-result-type-keyword,
8922acc9
RK
2282.autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage),
2283richlistitem[type~="action"][actiontype="searchengine"] > .ac-title-box > .ac-site-icon {
2284 list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon");
acb0e9b8 2285 width: 16px;
2286 height: 16px;
2287}
2288
8922acc9
RK
2289 .ac-result-type-keyword[selected="true"],
2290 .autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage, selected),
2291 richlistitem[type~="action"][actiontype="searchengine"][selected="true"] > .ac-title-box > .ac-site-icon {
2292 list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon-inverted");
2293 }
2294
319c6529
RK
2295.ac-result-type-tag,
2296.autocomplete-treebody::-moz-tree-image(tag, treecolAutoCompleteImage) {
8da9da4e 2297 list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
c1f7cc84 2298 width: 16px;
319c6529
RK
2299 height: 16px;
2300}
acb0e9b8 2301
b1dfcf32
RK
2302.ac-comment,
2303#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description,
2304#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button {
2305 font-size: 1.05em;
acb0e9b8 2306}
319c6529 2307
b1dfcf32
RK
2308.ac-extra > .ac-comment,
2309.ac-url-text,
2310.ac-action-text {
c0f6797e 2311 font-size: 1em;
acb0e9b8 2312}
319c6529
RK
2313
2314.ac-url-text,
2315.ac-action-text {
2316 color: #9C9CFF;
acb0e9b8 2317}
319c6529
RK
2318
2319richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-icon {
2320 list-style-image: url("chrome://browser/skin/actionicon-tab.png");
85cfb236
RK
2321 -moz-image-region: rect(0, 16px, 16px, 0);
2322 padding: 0 3px;
b1dfcf32
RK
2323 width: 22px;
2324 height: 16px;
2325}
2326
2327@media (min-resolution: 1.1dppx) {
2328 richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-icon {
2329 list-style-image: url("chrome://browser/skin/actionicon-tab@2x.png");
2330 -moz-image-region: rect(0, 32px, 32px, 0);
2331 }
85cfb236
RK
2332}
2333
2334richlistitem[type~="action"][actiontype="switchtab"][selected="true"] > .ac-url-box > .ac-action-icon {
2335 -moz-image-region: rect(16px, 16px, 32px, 0);
acb0e9b8 2336}
2337
319c6529
RK
2338.autocomplete-treebody::-moz-tree-cell-text(treecolAutoCompleteComment) {
2339 color: #8050B0;
2340}
acb0e9b8 2341
319c6529
RK
2342.ac-comment[selected="true"],
2343.ac-url-text[selected="true"],
2344.ac-action-text[selected="true"] {
2345 color: inherit !important;
acb0e9b8 2346}
2347
c1f7cc84
RK
2348.autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment),
2349.autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment)
319c6529
RK
2350{
2351 color: #8050B0;
2352 font-size: smaller;
acb0e9b8 2353}
319c6529
RK
2354
2355.autocomplete-treebody::-moz-tree-cell(suggesthint) {
2356 border-top: 1px solid #9C9CFF;
acb0e9b8 2357}
2358
319c6529
RK
2359/* combined go/reload/stop button in location bar */
2360
c9b0a396
RK
2361#urlbar-go-button,
2362#urlbar-reload-button,
2363#urlbar-stop-button {
2364 border-style: none;
52d7b436 2365 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
c9b0a396 2366/* padding: 0 9px;*/
024a65e9 2367 margin-inline-start: 0px;
c9b0a396
RK
2368 border-inline-start: 1px solid var(--urlbar-separator-color);
2369 border-image: linear-gradient(transparent 15%,
2370 var(--urlbar-separator-color) 15%,
2371 var(--urlbar-separator-color) 85%,
2372 transparent 85%);
2373 border-image-slice: 1;
9abeb12c
RK
2374}
2375
2376#urlbar:-moz-locale-dir(ltr) > toolbarbutton {
38cfeb47
RK
2377 border-top-left-radius: 0px;
2378 border-bottom-left-radius: 0px;
acb0e9b8 2379}
acb0e9b8 2380
9abeb12c 2381#urlbar:-moz-locale-dir(rtl) > toolbarbutton {
38cfeb47
RK
2382 border-top-right-radius: 0px;
2383 border-bottom-right-radius: 0px;
9abeb12c
RK
2384}
2385
46e71434 2386#urlbar > toolbarbutton:not([disabled=true]):active:hover,
dce90fef
RK
2387#urlbar-reload-button:not(:hover) {
2388 -moz-border-start-style: none;
714b11f6 2389 -moz-padding-start: 3px;
dce90fef
RK
2390}
2391
c0f6797e
RK
2392#urlbar-reload-button {
2393 -moz-image-region: rect(0px, 14px, 14px, 0px);
acb0e9b8 2394}
2395
46e71434 2396#urlbar-reload-button[disabled=true] {
c0f6797e 2397 -moz-image-region: rect(28px, 14px, 42px, 0px);
acb0e9b8 2398}
2399
46e71434 2400#urlbar-reload-button:not([disabled=true]):hover {
c0f6797e 2401 -moz-image-region: rect(14px, 14px, 28px, 0px);
ffce2402
RK
2402}
2403
c0f6797e
RK
2404#urlbar-reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2405 transform: scaleX(-1);
acb0e9b8 2406}
2407
c0f6797e
RK
2408#urlbar-go-button {
2409 -moz-image-region: rect(0, 42px, 14px, 28px);
38cfeb47
RK
2410}
2411
fff8097b 2412#urlbar-go-button:hover {
c0f6797e 2413 -moz-image-region: rect(14px, 42px, 28px, 28px);
acb0e9b8 2414}
2415
c0f6797e
RK
2416#urlbar-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2417 transform: scaleX(-1);
acb0e9b8 2418}
319c6529
RK
2419
2420#urlbar-stop-button {
ffce2402 2421 -moz-image-region: rect(0px, 28px, 14px, 14px);
acb0e9b8 2422}
319c6529
RK
2423
2424#urlbar-stop-button:hover {
ffce2402 2425 -moz-image-region: rect(14px, 28px, 28px, 14px);
acb0e9b8 2426}
2427
2e389898 2428@media (min-resolution: 1.1dppx) {
c9b0a396
RK
2429 #urlbar-go-button,
2430 #urlbar-reload-button,
2431 #urlbar-stop-button {
2e389898
RK
2432 list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png");
2433 }
2434
c9b0a396
RK
2435 #urlbar-go-button > .toolbarbutton-icon,
2436 #urlbar-reload-button > .toolbarbutton-icon,
2437 #urlbar-stop-button > .toolbarbutton-icon {
2438 width: 14px;
2439 }
2440
2e389898
RK
2441 #urlbar-go-button {
2442 -moz-image-region: rect(0, 84px, 28px, 56px);
2443 }
2444
2445 #urlbar-go-button:hover {
2446 -moz-image-region: rect(28px, 84px, 56px, 56px);
2447 }
2448
2449 #urlbar-go-button:hover:active {
2450 -moz-image-region: rect(56px, 84px, 84px, 56px);
2451 }
2452
2453 #urlbar-reload-button {
2454 -moz-image-region: rect(0, 28px, 28px, 0);
2455 }
2456
2457 #urlbar-reload-button:not([disabled]):hover {
2458 -moz-image-region: rect(28px, 28px, 56px, 0);
2459 }
2460
2461 #urlbar-reload-button:not([disabled]):hover:active {
2462 -moz-image-region: rect(56px, 28px, 84px, 0);
2463 }
2464
2465 #urlbar-stop-button {
2466 -moz-image-region: rect(0, 56px, 28px, 28px);
2467 }
2468
2469 #urlbar-stop-button:not([disabled]):hover {
2470 -moz-image-region: rect(28px, 56px, 56px, 28px);
2471 }
2472
2473 #urlbar-stop-button:hover:active {
2474 -moz-image-region: rect(56px, 56px, 84px, 28px);
2475 }
2e389898
RK
2476}
2477
319c6529
RK
2478/* popup blocker button */
2479
2480#page-report-button {
2481 list-style-image: url("chrome://browser/skin/urlbar-popup-blocked.png");
2482 -moz-image-region: rect(0, 16px, 16px, 0);
acb0e9b8 2483}
319c6529 2484
71bac478 2485#page-report-button:hover ,
319c6529
RK
2486#page-report-button:hover:active,
2487#page-report-button[open="true"] {
71bac478 2488 -moz-image-region: rect(0, 32px, 16px, 16px);
acb0e9b8 2489}
2490
bcb9d005
RK
2491/* Reader mode button */
2492
2493#reader-mode-button {
2494 list-style-image: url("chrome://browser/skin/readerMode.svg");
2495 -moz-image-region: rect(0, 16px, 16px, 0);
2496}
2497
2498#reader-mode-button:hover,
2499#reader-mode-button[readeractive]:hover {
2500 -moz-image-region: rect(0, 32px, 16px, 16px);
2501}
2502
2503#reader-mode-button:hover:active,
2504#reader-mode-button[readeractive] {
2505 -moz-image-region: rect(0, 48px, 16px, 32px);
2506}
2507
c4460289
RK
2508/* social share panel */
2509
20752032
RK
2510.social-share-frame {
2511 min-width: 756px;
c4460289
RK
2512 height: 150px;
2513}
2514
20752032
RK
2515#share-container {
2516 min-width: 756px;
2517 background-color: white;
2518 background-repeat: no-repeat;
2519 background-position: center center;
c4460289 2520}
20752032
RK
2521#share-container[loading] {
2522 background-image: url(chrome://browser/skin/tabbrowser/pendingpaint.png);
2523}
2524#share-container > browser {
2525 transition: opacity 150ms ease-in-out;
2526 opacity: 1;
2527}
2528#share-container[loading] > browser {
2529 opacity: 0;
c4460289
RK
2530}
2531
20752032
RK
2532.social-share-toolbar {
2533 border-bottom: 1px solid #9C9CFF;
2534 padding: 2px;
c4460289
RK
2535}
2536
20752032
RK
2537#social-share-provider-buttons {
2538 padding: 0;
2539 margin: 0;
c4460289
RK
2540}
2541
20752032
RK
2542.share-provider-button {
2543 padding: 5px;
2544 margin: 2px;
c4460289
RK
2545}
2546
20752032 2547.share-provider-button > .toolbarbutton-text {
c4460289
RK
2548 display: none;
2549}
20752032 2550.share-provider-button > .toolbarbutton-icon {
c4460289
RK
2551 width: 16px;
2552 min-height: 16px;
2553 max-height: 16px;
2554}
2555
2556/* fixup corners for share panel */
2557.social-panel > .social-panel-frame {
2558 border-radius: inherit;
2559}
2560
2561#social-share-panel {
c4460289 2562 min-height: 100px;
20752032 2563 min-width: 766px;
c4460289
RK
2564}
2565
20752032 2566#share-container,
c4460289 2567.social-share-frame {
e2734cc7 2568 border-top-left-radius: 0;
c4460289 2569 border-bottom-left-radius: inherit;
e2734cc7 2570 border-top-right-radius: 0;
20752032 2571 border-bottom-right-radius: inherit;
c4460289
RK
2572}
2573
20752032 2574#social-share-panel > .social-share-toolbar {
e2734cc7 2575 border-top-left-radius: inherit;
e2734cc7 2576 border-top-right-radius: inherit;
e2734cc7
RK
2577}
2578
20752032 2579#social-share-provider-buttons {
c4460289 2580 border-top-left-radius: inherit;
e2734cc7 2581 border-top-right-radius: inherit;
e2734cc7
RK
2582}
2583
889649fd
RK
2584/* social recommending panel */
2585
a6757852 2586#social-mark-button {
d7cfd768 2587 -moz-image-region: rect(0, 16px, 16px, 0);
889649fd
RK
2588}
2589
c0f6797e 2590/* bookmarks menu-button */
319c6529 2591
c0f6797e
RK
2592#bookmarks-menu-button.bookmark-item {
2593 list-style-image: url("chrome://browser/skin/places/bookmark.png");
2594 -moz-image-region: rect(0px 16px 16px 0px);
acb0e9b8 2595}
319c6529 2596
c0f6797e
RK
2597#bookmarks-menu-button.bookmark-item[starred] {
2598 -moz-image-region: rect(0px 32px 16px 16px);
acb0e9b8 2599}
319c6529 2600
e9fbfc3a 2601#nav-bar #bookmarks-menu-button[cui-areatype="toolbar"]:not([overflowedItem=true]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
c0f6797e
RK
2602 padding-top: 2px;
2603 padding-bottom: 2px;
71bac478
RK
2604}
2605
c0f6797e
RK
2606#BMB_bookmarksPopup[side="top"],
2607#BMB_bookmarksPopup[side="bottom"] {
2608 margin-left: -20px;
2609 margin-right: -20px;
71bac478
RK
2610}
2611
c0f6797e
RK
2612#BMB_bookmarksPopup[side="left"],
2613#BMB_bookmarksPopup[side="right"] {
2614 margin-top: -20px;
2615 margin-bottom: -20px;
acb0e9b8 2616}
319c6529
RK
2617
2618/* bookmarking panel */
c0f6797e 2619
319c6529
RK
2620#editBookmarkPanelStarIcon {
2621 list-style-image: url("chrome://browser/skin/places/starred48.png");
2622 width: 48px;
2623 height: 48px;
acb0e9b8 2624}
319c6529
RK
2625
2626#editBookmarkPanelStarIcon[unstarred] {
2627 list-style-image: url("chrome://browser/skin/places/unstarred48.png");
acb0e9b8 2628}
2629
319c6529
RK
2630#editBookmarkPanelTitle {
2631 font-size: 130%;
acb0e9b8 2632}
319c6529
RK
2633
2634#editBookmarkPanelHeader,
2635#editBookmarkPanelContent {
2636 margin-bottom: .5em;
acb0e9b8 2637}
319c6529
RK
2638
2639/* Implements editBookmarkPanel resizing on folderTree un-collapse. */
2640#editBMPanel_folderTree {
2641 min-width: 27em;
acb0e9b8 2642}
2643
f993773d 2644.panel-promo-box {
46e71434
RK
2645 margin: 5px 0 -6px;
2646 padding: 5px 0;
889649fd 2647 border-top: 1px solid #9C9CFF;
f0eab82c
RK
2648 border-bottom-left-radius: 5px;
2649 border-bottom-right-radius: 5px;
f993773d
RK
2650}
2651
2652.panel-promo-icon {
2653 list-style-image: url("chrome://browser/skin/sync-notification-24.png");
2654 -moz-margin-end: 10px;
2655 vertical-align: middle;
2656}
2657
2658.panel-promo-closebutton {
2659 list-style-image: url("chrome://global/skin/icons/close-button.gif");
f0eab82c
RK
2660 -moz-margin-end: -3px;
2661 margin-top: -3px;
f993773d
RK
2662}
2663
2664.panel-promo-closebutton:hover {
2665 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2666}
2667
2668.panel-promo-closebutton:hover:active {
2669 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2670}
2671
2672.panel-promo-closebutton > .toolbarbutton-text {
2673 padding: 0;
f993773d
RK
2674}
2675
319c6529
RK
2676/* ::::: content area ::::: */
2677
bcb9d005
RK
2678#sidebar-box {
2679 background-color: #9C9CFF;
2680 color: #000000;
2681}
2682
319c6529 2683#sidebar {
bcb9d005
RK
2684 background-color: #000000;
2685}
2686
2687#sidebar-splitter {
2688 -moz-margin-start: 0;
2689}
2690
2691#sidebar-header {
2692 color: #000000;
2693 padding: 2px;
acb0e9b8 2694}
319c6529
RK
2695
2696#sidebar-title {
2697 -moz-padding-start: 0px;
acb0e9b8 2698}
319c6529 2699
589b5528
RK
2700#sidebar-header > .close-icon {
2701/* padding: 4px 2px;
2702 margin: 0;
2703 border: none;*/
2704 list-style-image: url("chrome://global/skin/icons/close-button.gif");
2705}
2706
2707#sidebar-header > .close-icon:hover,
2708#sidebar-header > .close-icon:hover:active {
2709 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2710}
2711
bcb9d005
RK
2712#sidebar-splitter:-moz-locale-dir(ltr),
2713#sidebar:-moz-locale-dir(ltr) {
2714 border-radius: 0 5px 0 0;
2715}
2716
2717#sidebar-splitter:-moz-locale-dir(rtl),
2718#sidebar:-moz-locale-dir(rtl) {
2719 border-radius: 5px 0 0 0;
2720}
2721
fe524e0c
RK
2722.browserContainer > findbar {
2723/*
2724 background-color: -moz-dialog;
2725 color: -moz-DialogText;
2726*/
2727}
2728
319c6529 2729/* Tabstrip */
b36fc72e 2730
c0f6797e 2731#TabsToolbar {
e20c83c3
RK
2732 min-height: 0;
2733 padding: 0;
2734 -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar");
2735}
2736
b36fc72e 2737#TabsToolbar .toolbar-holder {
c1f7cc84 2738 background-color: #000000; /* correct effect of being an actual toolbar */
acb0e9b8 2739}
2740
b36fc72e 2741#main-window[disablechrome] #TabsToolbar,
319c6529 2742#TabsToolbar[tabsontop="false"] {
8b5fc82e 2743 border-bottom: 1px solid #008484;
acb0e9b8 2744}
319c6529 2745
6dc70335
RK
2746/* === BEGIN tabs.inc.css === */
2747
368d0b7f
RK
2748:root {
2749 /* --tab-toolbar-navbar-overlap: 1px; */
024a65e9 2750 /* --navbar-tab-toolbar-highlight-overlap: 1px; */
368d0b7f 2751 /* --tab-min-height: 31px; */
024a65e9
RK
2752}
2753#TabsToolbar {
2754 /* --tab-stroke-background-size: auto 100%; */
368d0b7f
RK
2755}
2756
319c6529 2757.tabbrowser-tab,
43ee1307
RK
2758.tabs-newtab-button,
2759#TabsToolbar > #new-tab-button {
319c6529 2760 margin-top: 0px;
acb0e9b8 2761}
319c6529 2762
43ee1307 2763.tabbrowser-tab {
57fc408c
RK
2764 padding: 1px 4px 2px;
2765}
2766
2767.tabbrowser-tab:first-of-type {
2768 -moz-margin-start: 2px;
2769}
2770
43ee1307
RK
2771.tabs-newtab-button,
2772#TabsToolbar > #new-tab-button {
57fc408c
RK
2773 border-radius: 8px 8px 0px 0px;
2774 -moz-margin-start: 0;
2775}
2776
43ee1307
RK
2777.tabs-newtab-button:not(:hover),
2778#TabsToolbar > #new-tab-button:not(:hover) {
57fc408c
RK
2779 background-color: #C09070;
2780}
2781
c0f6797e 2782/* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */
05148fed 2783.tabbrowser-tab[visuallyselected=true] {
c0f6797e
RK
2784/* position: relative;
2785 z-index: 2;*/
acb0e9b8 2786}
2787
c0f6797e 2788.tab-background-middle {
acb0e9b8 2789}
2790
c0f6797e 2791.tab-content {
acb0e9b8 2792}
319c6529 2793
d533ec21
RK
2794.tab-content[pinned] {
2795}
2796
2797.tab-throbber,
c0f6797e 2798.tab-icon-image,
b1dfcf32 2799.tab-icon-sound,
c0f6797e 2800.tab-close-button {
acb0e9b8 2801}
2802
319c6529
RK
2803.tab-throbber,
2804.tab-icon-image {
319c6529 2805 height: 16px;
c0f6797e 2806 width: 16px;
d533ec21 2807 -moz-margin-end: 3px;
c0f6797e
RK
2808}
2809
2810.tab-icon-image {
dce90fef 2811 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
613daf44 2812}
2813
d533ec21
RK
2814.tab-icon-overlay {
2815 width: 16px;
2816 height: 16px;
d7b7f7e1
RK
2817 margin-top: -8px;
2818 -moz-margin-start: -15px;
b1dfcf32 2819 position: relative;
d533ec21
RK
2820}
2821
2822.tab-icon-overlay[crashed] {
d533ec21
RK
2823 list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg");
2824}
2825
024a65e9
RK
2826.tab-icon-overlay[soundplaying],
2827.tab-icon-overlay[muted]:not([crashed]) {
d7b7f7e1 2828 border-radius: 10px;
b1dfcf32
RK
2829}
2830
024a65e9
RK
2831.tab-icon-overlay[soundplaying]:hover,
2832.tab-icon-overlay[muted]:hover {
b1dfcf32
RK
2833 background-color: #FFCF00;
2834}
2835
024a65e9 2836.tab-icon-overlay[soundplaying] {
b1dfcf32
RK
2837 display: -moz-box;
2838 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio");
2839}
2840
024a65e9 2841.tab-icon-overlay[muted]:not([crashed]) {
b1dfcf32
RK
2842 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted");
2843}
2844
024a65e9
RK
2845#TabsToolbar[brighttext] .tab-icon-overlay[soundplaying]:not(:hover) {
2846 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white");
b1dfcf32
RK
2847}
2848
b1dfcf32 2849
024a65e9
RK
2850#TabsToolbar[brighttext] .tab-icon-overlay[muted]:not([crashed]):not(:hover) {
2851 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-muted");
b1dfcf32
RK
2852}
2853
3d64e0ce 2854.tab-throbber[busy] {
95f333af 2855 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim-connect.png");
613daf44 2856}
319c6529
RK
2857
2858.tab-throbber[progress] {
95f333af 2859 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim.png");
613daf44 2860}
319c6529 2861
85b6b932
RK
2862@media (min-resolution: 1.1dppx) {
2863 .tab-throbber[busy] {
2864 list-style-image: url("chrome://communicator/skin/brand/throbber-anim-connect.png");
2865 }
2866
2867 .tab-throbber[progress] {
2868 list-style-image: url("chrome://communicator/skin/brand/throbber-anim.png");
2869 }
2870}
2871
319c6529
RK
2872.tab-throbber[pinned],
2873.tab-icon-image[pinned] {
2874 -moz-margin-start: 2px;
2875 -moz-margin-end: 2px;
613daf44 2876}
319c6529 2877
c0f6797e 2878.tab-label {
aec5dfad
RK
2879 /* this needs to add up to the 16px of the icon image */
2880 height: 12px;
2881 margin-top: 2px !important;
2882 margin-bottom: 2px !important;
c0f6797e
RK
2883}
2884
b1dfcf32
RK
2885.tab-icon-sound {
2886 -moz-margin-start: 4px;
2887 width: 16px;
2888 height: 16px;
2889 padding: 0;
2890}
2891
b1dfcf32
RK
2892.tab-icon-sound[muted] {
2893 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted");
2894}
2895
2896.tab-icon-sound[muted]:hover {
2897 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-hover");
2898}
2899
2900.tab-icon-sound[muted]:hover:active {
2901 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-pressed");
2902}
2903
2904.tab-icon-sound[soundplaying] {
024a65e9 2905 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab");
b1dfcf32
RK
2906}
2907
2908.tab-icon-sound[soundplaying]:hover {
024a65e9 2909 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-hover");
b1dfcf32
RK
2910}
2911
2912.tab-icon-sound[soundplaying]:hover:active {
024a65e9
RK
2913 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-pressed");
2914}
2915
2916.tab-icon-sound[muted] {
2917 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted");
2918}
2919
2920.tab-icon-sound[muted]:hover {
2921 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted-hover");
2922}
2923
2924.tab-icon-sound[muted]:hover:active {
2925 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted-pressed");
2926}
2927
2928.tab-icon-sound[visuallyselected=true][soundplaying] {
2929 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio");
2930}
2931
2932.tab-icon-sound[visuallyselected=true][soundplaying]:hover {
2933 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-hover");
2934}
2935
2936.tab-icon-sound[visuallyselected=true][soundplaying]:hover:active {
b1dfcf32
RK
2937 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-pressed");
2938}
2939
024a65e9
RK
2940.tab-icon-sound[visuallyselected=true][muted] {
2941 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted");
2942}
2943
2944.tab-icon-sound[visuallyselected=true][muted]:hover {
2945 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-hover");
2946}
2947
2948.tab-icon-sound[visuallyselected=true][muted]:hover:active {
2949 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-pressed");
2950}
2951
b1dfcf32 2952#TabsToolbar[brighttext] .tab-icon-sound[soundplaying] {
024a65e9 2953 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white");
b1dfcf32
RK
2954}
2955
2956#TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover {
024a65e9 2957 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white-hover");
b1dfcf32
RK
2958}
2959
2960#TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover:active {
024a65e9 2961 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white-pressed");
b1dfcf32
RK
2962}
2963
2964#TabsToolbar[brighttext] .tab-icon-sound[muted] {
024a65e9 2965 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white");
b1dfcf32
RK
2966}
2967
2968#TabsToolbar[brighttext] .tab-icon-sound[muted]:hover {
024a65e9 2969 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white-hover");
b1dfcf32
RK
2970}
2971
2972#TabsToolbar[brighttext] .tab-icon-sound[muted]:hover:active {
024a65e9 2973 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white-pressed");
b1dfcf32
RK
2974}
2975
c0f6797e
RK
2976.tab-close-button {
2977 margin-top: 1px;
2978 padding: 0;
2979}
2980
2981.tab-background,
2982.tabs-newtab-button {
2983 /* overlap the tab curves */
2984}
2985
2986.tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
2987}
2988
93c91f62
RK
2989/* Tab Overflow */
2990.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]),
2991.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
2992}
2993
2994.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:-moz-locale-dir(rtl),
2995.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:-moz-locale-dir(ltr) {
2996}
2997
2998.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]) {
2999}
3000
3001.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
3002}
3003
3004.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator[collapsed],
3005.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator[collapsed] {
3006}
3007
3008.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator,
3009.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator {
3010}
3011
05148fed
RK
3012.tab-background-start[visuallyselected=true]::after,
3013.tab-background-start[visuallyselected=true]::before,
c0f6797e
RK
3014.tab-background-start,
3015.tab-background-end,
05148fed
RK
3016.tab-background-end[visuallyselected=true]::after,
3017.tab-background-end[visuallyselected=true]::before {
c0f6797e
RK
3018}
3019
05148fed 3020.tabbrowser-tab:not([visuallyselected=true]),
c0f6797e
RK
3021.tabbrowser-tab:-moz-lwtheme {
3022}
3023
319c6529 3024/* tabbrowser-tab focus ring */
c0f6797e 3025.tabbrowser-tab:focus {
319c6529 3026 outline: 1px dotted;
613daf44 3027}
319c6529 3028
c0f6797e
RK
3029/* Selected tab */
3030
05148fed 3031.tabbrowser-tab[visuallyselected="true"] {
c0f6797e
RK
3032}
3033
3034/* End selected tab */
3035
d7b7f7e1
RK
3036/* User Context UI - change tab decoration depending on userContextId.
3037 Defaults to gray for unknown usercontextids. */
3038.tabbrowser-tab[usercontextid] {
3039 background-image: linear-gradient(to right, transparent 20%, #A09090 30%, #A09090 70%, transparent 80%);
3040 background-size: auto 2px;
3041 background-repeat: no-repeat;
3042}
3043
3044/* Personal User Context */
3045.tabbrowser-tab[usercontextid="1"] {
3046 background-image: linear-gradient(to right, transparent 20%, #9C9CFF 30%, #9C9CFF 70%, transparent 80%);
3047}
3048/* Work User Context */
3049.tabbrowser-tab[usercontextid="2"] {
3050 background-image: linear-gradient(to right, transparent 20%, #FF9F00 30%, #FF9F00 70%, transparent 80%);
3051}
3052/* Banking User Context */
3053.tabbrowser-tab[usercontextid="3"] {
3054 background-image: linear-gradient(to right, transparent 20%, #008484 30%, #008484 70%, transparent 80%);
3055}
3056/* Shopping User Context */
3057.tabbrowser-tab[usercontextid="4"] {
3058 background-image: linear-gradient(to right, transparent 20%, #E7ADE7 30%, #E7ADE7 70%, transparent 80%);
3059}
3060
c0f6797e
RK
3061/* Tab pointer-events */
3062/*
3063.tabbrowser-tab {
3064 pointer-events: none;
3065}
3066
3067.tab-background-middle,
3068.tabs-newtab-button,
b1dfcf32
RK
3069.tab-icon-overlay[soundplaying],
3070.tab-icon-overlay[muted]:not([crashed]),
3071.tab-icon-sound,
c0f6797e
RK
3072.tab-close-button {
3073 pointer-events: auto;
3074}
3075*/
3076/* Pinned tabs */
3077
fa703ff4
RK
3078/*
3079.tabbrowser-tab:-moz-any([image], [pinned]) > .tab-stack > .tab-content[attention]:not([visuallyselected="true"]),
3080.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([visuallyselected="true"]) {
3081*/
3082.tabbrowser-tab:-moz-any([image], [pinned]):-moz-any([attention], [titlechanged]):not([visuallyselected="true"]) {
c0f6797e
RK
3083 background-color: #E7ADE7;
3084}
3085
fa703ff4
RK
3086.tab-label[attention]:not([visuallyselected="true"]) {
3087 font-weight: bold;
3088}
3089
3090.tabbrowser-tab[pinned][titlechanged]:not([visuallyselected="true"]):hover {
c0f6797e
RK
3091 background-color: #3333FF;
3092 color: #000000;
3093}
3094
024a65e9
RK
3095/* Tab separators */
3096/*
3097.tabbrowser-tab::after,
3098.tabbrowser-tab::before {
3099 width: 1px;
3100 -moz-margin-start: -1px;
3101 background-image: linear-gradient(transparent 5px,
3102 currentColor 5px,
3103 currentColor calc(100% - 4px),
3104 transparent calc(100% - 4px));
3105 opacity: 0.2;
3106}
3107
3108#TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::before,
3109#TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::after {
3110 opacity: 0.4;
3111}
3112*/
3113/* Also show separators beside the selected tab when dragging it. */
3114/*
3115#tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
3116.tabbrowser-tab:not([visuallyselected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
3117#tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([visuallyselected]):not([beforehovered]):not(:hover)::after {
3118 content: "";
3119 display: -moz-box;
3120}
3121*/
c0f6797e
RK
3122/* New tab button */
3123
3124.tabs-newtab-button {
3125 width: 28px;
d533ec21 3126 /* width: calc(36px + var(--tab-curve-width)); */
c0f6797e
RK
3127}
3128
3129/* === END tabs.inc.css === */
3130
43371c9b
RK
3131/* Background tabs:
3132 *
3133 * Decrease the height of the hoverable region of background tabs whenever the tabs are at the top
3134 * of the window (e.g. no menubar, tabs in titlebar, etc.) to make it easier to drag the window by
3135 * the titlebar. We don't need this in fullscreen since window dragging is not an issue there.
3136 */
05148fed 3137#main-window[tabsintitlebar][sizemode=normal] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar .tab-background-middle:not([visuallyselected=true]) {
43371c9b
RK
3138/* clip-path: url(chrome://browser/content/browser.xul#tab-hover-clip-path);*/
3139}
3140
8ad8bf83 3141/* Tab DnD indicator */
319c6529
RK
3142.tab-drop-indicator {
3143 list-style-image: url("chrome://browser/skin/tabbrowser/tabDragIndicator.png");
9abeb12c 3144 margin-bottom: -11px;
613daf44 3145}
3146
319c6529
RK
3147/* Tab close button */
3148.tab-close-button {
319c6529
RK
3149 list-style-image: url("chrome://global/skin/icons/close-button.gif");
3150}
acb0e9b8 3151
319c6529
RK
3152.tab-close-button:hover,
3153.tab-close-button:hover[selected="true"] {
3154 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
acb0e9b8 3155}
319c6529
RK
3156
3157.tab-close-button:hover:active,
3158.tab-close-button:hover:active[selected="true"] {
3159 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
acb0e9b8 3160}
319c6529 3161
319c6529
RK
3162/* Tab scrollbox arrow, tabstrip new tab and all-tabs buttons */
3163
319c6529
RK
3164.tabbrowser-arrowscrollbox > .scrollbutton-up,
3165.tabbrowser-arrowscrollbox > .scrollbutton-down {
319c6529
RK
3166 margin: 0;
3167 padding-top: 0;
3168 padding-bottom: 0;
c0f6797e
RK
3169 background-origin: border-box;
3170}
3171
3172#main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3173#main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3174.tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-lwtheme-brighttext,
3175.tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-lwtheme-brighttext {
3176 }
b7f3670c 3177
c0f6797e
RK
3178.tabbrowser-arrowscrollbox > .scrollbutton-up[disabled],
3179.tabbrowser-arrowscrollbox > .scrollbutton-down[disabled] {
3180 }
3181
3182.tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(rtl),
3183.tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(ltr) {
3184/* transform: scaleX(-1);*/