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