fifth part of syncing LCARStrek with Firefox 42-44 windows theme changes
[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,
31bc2dc1
RK
515 #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button,
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
913#web-apps-button[cui-areatype="toolbar"] {
914 -moz-image-region: rect(0, 720px, 18px, 702px);
915}
916
917#web-apps-button[cui-areatype="toolbar"]:hover {
918 -moz-image-region: rect(18px, 720px, 36px, 702px);
919}
920
58615cfe 921#loop-button,
19988d2d 922#loop-button > .toolbarbutton-badge-stack {
d0e580f1
RK
923 list-style-image: url("chrome://browser/skin/loop/toolbarfx.png");
924 -moz-image-region: rect(0, 18px, 18px, 0);
925}
926
58615cfe 927#loop-button:not([disabled="true"]):-moz-any(:hover,:hover:active,[open]),
19988d2d 928#loop-button:not([disabled="true"]):-moz-any(:hover,:hover:active,[open]) > .toolbarbutton-badge-stack {
d0e580f1
RK
929 -moz-image-region: rect(0, 90px, 18px, 72px);
930}
931
58615cfe
RK
932#loop-button[state="disabled"],
933#loop-button[disabled="true"],
19988d2d
RK
934#loop-button[state="disabled"] > .toolbarbutton-badge-stack,
935#loop-button[disabled="true"] > .toolbarbutton-badge-stack {
d0e580f1
RK
936 -moz-image-region: rect(0, 36px, 18px, 18px);
937}
938
58615cfe 939#loop-button[disabled="true"]:-moz-any(:hover,:hover:active,[open]),
19988d2d 940#loop-button[disabled="true"]:-moz-any(:hover,:hover:active,[open]) > .toolbarbutton-badge-stack {
d0e580f1
RK
941 -moz-image-region: rect(0, 126px, 18px, 108px);
942}
943
58615cfe 944#loop-button:not([disabled="true"])[state="error"],
19988d2d 945#loop-button:not([disabled="true"])[state="error"] > .toolbarbutton-badge-stack {
d0e580f1
RK
946 -moz-image-region: rect(0, 54px, 18px, 36px);
947}
948
58615cfe 949#loop-button:not([disabled="true"])[state="action"],
19988d2d 950#loop-button:not([disabled="true"])[state="action"] > .toolbarbutton-badge-stack {
d0e580f1
RK
951 -moz-image-region: rect(0, 72px, 18px, 54px);
952}
953
58615cfe 954#loop-button:not([disabled="true"])[state="active"],
19988d2d 955#loop-button:not([disabled="true"])[state="active"] > .toolbarbutton-badge-stack {
d0e580f1
RK
956 -moz-image-region: rect(0, 108px, 18px, 90px);
957}
958
e548e22e
RK
959#webide-button[cui-areatype="toolbar"] {
960 -moz-image-region: rect(0, 738px, 18px, 720px);
961}
962
963#webide-button[cui-areatype="toolbar"]:hover {
964 -moz-image-region: rect(18px, 738px, 36px, 720px);
965}
966
31bc2dc1
RK
967#pocket-button[cui-areatype="toolbar"] {
968 -moz-image-region: rect(0, 774px, 18px, 756px);
969}
970
971#pocket-button[cui-areatype="toolbar"]:hover,
972#pocket-button[cui-areatype="toolbar"][open] {
973 -moz-image-region: rect(18px, 774px, 36px, 756px);
974}
975
43cc2806
RK
976/* === END toolbarbuttons.inc.css === */
977
978/* === BEGIN menupanel.inc.css === */
979
980/* Menu panel and palette styles */
981
e548e22e
RK
982:root {
983 /* avoid aero overrides with changed filenames */
984 --menupanel-list-style-image: url(chrome://browser/skin/menuPanelFx.png);
985 --menupanel-small-list-style-image: url(chrome://browser/skin/menuPanelFx-small.png);
986}
987
51994fad 988toolbaritem[sdkstylewidget="true"] > toolbarbutton,
5401f433
RK
989:-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,
31bc2dc1
RK
995 #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button,
996 #pocket-button)[cui-areatype="menu-panel"],
5401f433
RK
997toolbarpaletteitem[place="palette"] > :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
998 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
1988bb88 999 #social-share-button, #open-file-button, #find-button, #developer-button,
a5cb6e53 1000 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
5401f433
RK
1001 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
1002 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
31bc2dc1
RK
1003 #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button,
1004 #pocket-button) {
e548e22e 1005 list-style-image: var(--menupanel-list-style-image);
43cc2806
RK
1006}
1007
1008#home-button[cui-areatype="menu-panel"],
7d3f7f14 1009toolbarpaletteitem[place="palette"] > #home-button {
43cc2806
RK
1010 -moz-image-region: rect(0px, 128px, 32px, 96px);
1011}
1012
cc4b0b0d 1013#home-button[cui-areatype="menu-panel"]:hover,
7d3f7f14 1014toolbarpaletteitem[place="palette"] > #home-button:hover {
cc4b0b0d
RK
1015 -moz-image-region: rect(32px, 128px, 64px, 96px);
1016}
1017
43cc2806 1018#bookmarks-menu-button[cui-areatype="menu-panel"],
7d3f7f14 1019toolbarpaletteitem[place="palette"] > #bookmarks-menu-button {
46e71434 1020 -moz-image-region: rect(0px, 192px, 32px, 160px);
43cc2806
RK
1021}
1022
cc4b0b0d 1023#bookmarks-menu-button[cui-areatype="menu-panel"]:hover,
7d3f7f14 1024toolbarpaletteitem[place="palette"] > #bookmarks-menu-button:hover {
46e71434
RK
1025 -moz-image-region: rect(32px, 192px, 64px, 160px);
1026}
1027
1028#bookmarks-menu-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1029 -moz-image-region: rect(32px, 192px, 64px, 160px);
cc4b0b0d
RK
1030}
1031
43cc2806 1032#history-panelmenu[cui-areatype="menu-panel"],
7d3f7f14 1033toolbarpaletteitem[place="palette"] > #history-panelmenu {
43cc2806
RK
1034 -moz-image-region: rect(0px, 224px, 32px, 192px);
1035}
1036
cc4b0b0d 1037#history-panelmenu[cui-areatype="menu-panel"]:hover,
7d3f7f14 1038toolbarpaletteitem[place="palette"] > #history-panelmenu:hover {
cc4b0b0d
RK
1039 -moz-image-region: rect(32px, 224px, 64px, 192px);
1040}
1041
46e71434
RK
1042#history-panelmenu[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1043 -moz-image-region: rect(32px, 224px, 64px, 192px);
1044}
1045
43cc2806 1046#downloads-button[cui-areatype="menu-panel"],
7d3f7f14 1047toolbarpaletteitem[place="palette"] > #downloads-button {
43cc2806
RK
1048 -moz-image-region: rect(0px, 256px, 32px, 224px);
1049}
1050
cc4b0b0d 1051#downloads-button[cui-areatype="menu-panel"]:hover,
7d3f7f14 1052toolbarpaletteitem[place="palette"] > #downloads-button:hover {
cc4b0b0d
RK
1053 -moz-image-region: rect(32px, 256px, 64px, 224px);
1054}
1055
43cc2806 1056#add-ons-button[cui-areatype="menu-panel"],
7d3f7f14 1057toolbarpaletteitem[place="palette"] > #add-ons-button {
43cc2806
RK
1058 -moz-image-region: rect(0px, 288px, 32px, 256px);
1059}
1060
cc4b0b0d 1061#add-ons-button[cui-areatype="menu-panel"]:hover,
7d3f7f14 1062toolbarpaletteitem[place="palette"] > #add-ons-button:hover {
cc4b0b0d
RK
1063 -moz-image-region: rect(32px, 288px, 64px, 256px);
1064}
1065
43cc2806 1066#open-file-button[cui-areatype="menu-panel"],
7d3f7f14 1067toolbarpaletteitem[place="palette"] > #open-file-button {
43cc2806
RK
1068 -moz-image-region: rect(0px, 320px, 32px, 288px);
1069}
1070
cc4b0b0d 1071#open-file-button[cui-areatype="menu-panel"]:hover,
7d3f7f14 1072toolbarpaletteitem[place="palette"] > #open-file-button:hover {
cc4b0b0d
RK
1073 -moz-image-region: rect(32px, 320px, 64px, 288px);
1074}
1075
43cc2806 1076#save-page-button[cui-areatype="menu-panel"],
7d3f7f14 1077toolbarpaletteitem[place="palette"] > #save-page-button {
43cc2806
RK
1078 -moz-image-region: rect(0px, 352px, 32px, 320px);
1079}
1080
cc4b0b0d 1081#save-page-button[cui-areatype="menu-panel"]:hover,
7d3f7f14 1082toolbarpaletteitem[place="palette"] > #save-page-button:hover {
cc4b0b0d
RK
1083 -moz-image-region: rect(32px, 352px, 64px, 320px);
1084}
1085
43cc2806 1086#sync-button[cui-areatype="menu-panel"],
7d3f7f14 1087toolbarpaletteitem[place="palette"] > #sync-button {
43cc2806
RK
1088 -moz-image-region: rect(0px, 384px, 32px, 352px);
1089}
1090
cc4b0b0d 1091#sync-button[cui-areatype="menu-panel"]:hover,
7d3f7f14 1092toolbarpaletteitem[place="palette"] > #sync-button:hover {
cc4b0b0d
RK
1093 -moz-image-region: rect(32px, 384px, 64px, 352px);
1094}
1095
5401f433
RK
1096#sync-button[cui-areatype="menu-panel"][status="active"] {
1097 list-style-image: url("chrome://browser/skin/syncProgress-menuPanel.png");
1098 -moz-image-region: rect(0px, 32px, 32px, 0px);
1099}
1100
43cc2806 1101#feed-button[cui-areatype="menu-panel"],
7d3f7f14 1102toolbarpaletteitem[place="palette"] > #feed-button {
43cc2806
RK
1103 -moz-image-region: rect(0px, 416px, 32px, 384px);
1104}
1105
cc4b0b0d 1106#feed-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
7d3f7f14 1107toolbarpaletteitem[place="palette"] > #feed-button:hover:not([disabled="true"]) {
cc4b0b0d
RK
1108 -moz-image-region: rect(32px, 416px, 64px, 384px);
1109}
1110
1111#feed-button[cui-areatype="menu-panel"][disabled="true"],
7d3f7f14 1112toolbarpaletteitem[place="palette"] > #feed-button[disabled="true"] {
cc4b0b0d
RK
1113 -moz-image-region: rect(64px, 416px, 96px, 384px);
1114}
1115
43cc2806 1116#social-share-button[cui-areatype="menu-panel"],
7d3f7f14 1117toolbarpaletteitem[place="palette"] > #social-share-button {
43cc2806
RK
1118 -moz-image-region: rect(0px, 448px, 32px, 416px);
1119}
1120
22180555
RK
1121#social-share-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
1122toolbarpaletteitem[place="palette"] > #social-share-button:hover:not([disabled="true"]) {
cc4b0b0d
RK
1123 -moz-image-region: rect(32px, 448px, 64px, 416px);
1124}
1125
22180555
RK
1126#social-share-button[cui-areatype="menu-panel"][disabled="true"],
1127toolbarpaletteitem[place="palette"] > #social-share-button[disabled="true"] {
1128 -moz-image-region: rect(64px, 448px, 96px, 416px);
1129}
1130
43cc2806 1131#characterencoding-button[cui-areatype="menu-panel"],
7d3f7f14 1132toolbarpaletteitem[place="palette"] > #characterencoding-button {
43cc2806
RK
1133 -moz-image-region: rect(0px, 480px, 32px, 448px);
1134}
1135
cc4b0b0d 1136#characterencoding-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
7d3f7f14 1137toolbarpaletteitem[place="palette"] > #characterencoding-button:hover:not([disabled="true"]) {
cc4b0b0d
RK
1138 -moz-image-region: rect(32px, 480px, 64px, 448px);
1139}
1140
1141#characterencoding-button[cui-areatype="menu-panel"][disabled="true"],
7d3f7f14 1142toolbarpaletteitem[place="palette"] > #characterencoding-button[disabled="true"] {
cc4b0b0d
RK
1143 -moz-image-region: rect(64px, 480px, 96px, 448px);
1144}
1145
46e71434
RK
1146#characterencoding-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1147 -moz-image-region: rect(32px, 480px, 64px, 448px);
1148}
1149
43cc2806 1150#new-window-button[cui-areatype="menu-panel"],
7d3f7f14 1151toolbarpaletteitem[place="palette"] > #new-window-button {
43cc2806
RK
1152 -moz-image-region: rect(0px, 512px, 32px, 480px);
1153}
1154
cc4b0b0d 1155#new-window-button[cui-areatype="menu-panel"]:hover,
7d3f7f14 1156toolbarpaletteitem[place="palette"] > #new-window-button:hover {
cc4b0b0d
RK
1157 -moz-image-region: rect(32px, 512px, 64px, 480px);
1158}
1159
5401f433
RK
1160#e10s-button[cui-areatype="menu-panel"],
1161toolbarpaletteitem[place="palette"] > #e10s-button {
1162 -moz-image-region: rect(0px, 512px, 32px, 480px);
1163}
1164
1165#e10s-button[cui-areatype="menu-panel"]:hover,
1166toolbarpaletteitem[place="palette"] > #e10s-button:hover {
1167 -moz-image-region: rect(32px, 512px, 64px, 480px);
1168}
1169
43cc2806 1170#new-tab-button[cui-areatype="menu-panel"],
7d3f7f14 1171toolbarpaletteitem[place="palette"] > #new-tab-button {
43cc2806
RK
1172 -moz-image-region: rect(0px, 544px, 32px, 512px);
1173}
1174
cc4b0b0d 1175#new-tab-button[cui-areatype="menu-panel"]:hover,
7d3f7f14 1176toolbarpaletteitem[place="palette"] > #new-tab-button:hover {
cc4b0b0d
RK
1177 -moz-image-region: rect(32px, 544px, 64px, 512px);
1178}
1179
43cc2806 1180#privatebrowsing-button[cui-areatype="menu-panel"],
7d3f7f14 1181toolbarpaletteitem[place="palette"] > #privatebrowsing-button {
43cc2806
RK
1182 -moz-image-region: rect(0px, 576px, 32px, 544px);
1183}
1184
cc4b0b0d 1185#privatebrowsing-button[cui-areatype="menu-panel"]:hover,
7d3f7f14 1186toolbarpaletteitem[place="palette"] > #privatebrowsing-button:hover {
cc4b0b0d
RK
1187 -moz-image-region: rect(32px, 576px, 64px, 544px);
1188}
1189
46e71434
RK
1190#tabview-button[cui-areatype="menu-panel"],
1191toolbarpaletteitem[place="palette"] > #tabview-button {
1192 -moz-image-region: rect(0px, 608px, 32px, 576px);
1193}
1194
1195#tabview-button[cui-areatype="menu-panel"]:hover,
1196toolbarpaletteitem[place="palette"] > #tabview-button:hover {
1197 -moz-image-region: rect(32px, 608px, 64px, 576px);
1198}
1199
43cc2806 1200#find-button[cui-areatype="menu-panel"],
7d3f7f14 1201toolbarpaletteitem[place="palette"] > #find-button {
43cc2806
RK
1202 -moz-image-region: rect(0px, 640px, 32px, 608px);
1203}
1204
cc4b0b0d 1205#find-button[cui-areatype="menu-panel"]:hover,
7d3f7f14 1206toolbarpaletteitem[place="palette"] > #find-button:hover {
cc4b0b0d
RK
1207 -moz-image-region: rect(32px, 640px, 64px, 608px);
1208}
1209
43cc2806 1210#print-button[cui-areatype="menu-panel"],
7d3f7f14 1211toolbarpaletteitem[place="palette"] > #print-button {
43cc2806
RK
1212 -moz-image-region: rect(0px, 672px, 32px, 640px);
1213}
1214
cc4b0b0d 1215#print-button[cui-areatype="menu-panel"]:hover,
7d3f7f14 1216toolbarpaletteitem[place="palette"] > #print-button:hover {
cc4b0b0d
RK
1217 -moz-image-region: rect(32px, 672px, 64px, 640px);
1218}
1219
43cc2806 1220#fullscreen-button[cui-areatype="menu-panel"],
7d3f7f14 1221toolbarpaletteitem[place="palette"] > #fullscreen-button {
43cc2806
RK
1222 -moz-image-region: rect(0px, 704px, 32px, 672px);
1223}
1224
cc4b0b0d 1225#fullscreen-button[cui-areatype="menu-panel"]:hover,
7d3f7f14 1226toolbarpaletteitem[place="palette"] > #fullscreen-button:hover {
cc4b0b0d
RK
1227 -moz-image-region: rect(32px, 704px, 64px, 672px);
1228}
1229
43cc2806 1230#developer-button[cui-areatype="menu-panel"],
7d3f7f14 1231toolbarpaletteitem[place="palette"] > #developer-button {
43cc2806
RK
1232 -moz-image-region: rect(0px, 736px, 32px, 704px);
1233}
1234
cc4b0b0d 1235#developer-button[cui-areatype="menu-panel"]:hover,
7d3f7f14 1236toolbarpaletteitem[place="palette"] > #developer-button:hover {
cc4b0b0d
RK
1237 -moz-image-region: rect(32px, 736px, 64px, 704px);
1238}
1239
46e71434
RK
1240#developer-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1241 -moz-image-region: rect(32px, 736px, 64px, 704px);
1242}
1243
43cc2806 1244#preferences-button[cui-areatype="menu-panel"],
7d3f7f14 1245toolbarpaletteitem[place="palette"] > #preferences-button {
43cc2806
RK
1246 -moz-image-region: rect(0px, 768px, 32px, 736px);
1247}
1248
cc4b0b0d 1249#preferences-button[cui-areatype="menu-panel"]:hover,
7d3f7f14 1250toolbarpaletteitem[place="palette"] > #preferences-button:hover {
cc4b0b0d
RK
1251 -moz-image-region: rect(32px, 768px, 64px, 736px);
1252}
1253
46e71434
RK
1254#email-link-button[cui-areatype="menu-panel"],
1255toolbarpaletteitem[place="palette"] > #email-link-button {
1256 -moz-image-region: rect(0, 800px, 32px, 768px);
1257}
1258
22180555
RK
1259#email-link-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
1260toolbarpaletteitem[place="palette"] > #email-link-button:hover:not([disabled="true"]) {
46e71434
RK
1261 -moz-image-region: rect(32px, 800px, 64px, 768px);
1262}
1263
22180555
RK
1264#email-link-button[cui-areatype="menu-panel"][disabled="true"],
1265toolbarpaletteitem[place="palette"] > #email-link-button[disabled="true"] {
1266 -moz-image-region: rect(64px, 800px, 96px, 768px);
1267}
1268
46e71434
RK
1269#sidebar-button[cui-areatype="menu-panel"],
1270toolbarpaletteitem[place="palette"] > #sidebar-button {
1271 -moz-image-region: rect(0, 864px, 32px, 832px);
1272}
1273
1274#sidebar-button[cui-areatype="menu-panel"]:hover,
22180555
RK
1275toolbarpaletteitem[place="palette"] > #sidebar-button:hover,
1276#sidebar-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
46e71434
RK
1277 -moz-image-region: rect(32px, 864px, 64px, 832px);
1278}
1279
22180555
RK
1280#panic-button[cui-areatype="menu-panel"],
1281toolbarpaletteitem[place="palette"] > #panic-button {
1282 -moz-image-region: rect(0, 896px, 32px, 864px);
1283}
1284
1285#panic-button[cui-areatype="menu-panel"]:hover,
1286toolbarpaletteitem[place="palette"] > #panic-button:hover,
1287#panic-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1288 -moz-image-region: rect(32px, 896px, 64px, 864px);
1289}
1290
1291#web-apps-button[cui-areatype="menu-panel"],
1292toolbarpaletteitem[place="palette"] > #web-apps-button {
1293 -moz-image-region: rect(0, 928px, 32px, 896px);
1294}
1295
1296#web-apps-button[cui-areatype="menu-panel"]:hover,
1297toolbarpaletteitem[place="palette"] > #web-apps-button:hover {
1298 -moz-image-region: rect(32px, 928px, 64px, 896px);
46e71434
RK
1299}
1300
e548e22e
RK
1301#webide-button[cui-areatype="menu-panel"],
1302toolbarpaletteitem[place="palette"] > #webide-button {
1303 -moz-image-region: rect(0px, 960px, 32px, 928px);
1304}
1305
1306#webide-button[cui-areatype="menu-panel"]:hover,
1307toolbarpaletteitem[place="palette"] > #webide-button:hover {
1308 -moz-image-region: rect(32px, 960px, 64px, 928px);
1309}
1310
31bc2dc1
RK
1311#pocket-button[cui-areatype="menu-panel"],
1312toolbarpaletteitem[place="palette"] > #pocket-button {
1313 -moz-image-region: rect(0px, 992px, 32px, 960px);
1314}
1315
1316#pocket-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1317 -moz-image-region: rect(32px, 992px, 64px, 960px);
1318}
1319
46e71434
RK
1320toolbaritem[sdkstylewidget="true"] > toolbarbutton {
1321 -moz-image-region: rect(0, 832px, 32px, 800px);
1322}
1323
58615cfe 1324#loop-button[cui-areatype="menu-panel"],
19988d2d 1325toolbarpaletteitem[place="palette"] > #loop-button {
d0e580f1
RK
1326 list-style-image: url("chrome://browser/skin/loop/menuPanel.png");
1327 -moz-image-region: rect(0, 32px, 32px, 0);
1328}
1329
1330/* Make sure that the state icons are not shown in the customization palette. */
19988d2d 1331toolbarpaletteitem[place="palette"] > #loop-button {
d0e580f1
RK
1332 -moz-image-region: rect(0, 32px, 32px, 0) !important;
1333}
1334
19988d2d 1335#loop-button[cui-areatype="menu-panel"]:not([disabled="true"]):-moz-any(:hover,:hover:active,[open]) {
d0e580f1
RK
1336 -moz-image-region: rect(0, 160px, 32px, 128px);
1337}
1338
58615cfe 1339#loop-button[cui-areatype="menu-panel"][state="disabled"],
19988d2d 1340#loop-button[cui-areatype="menu-panel"][disabled="true"] {
d0e580f1
RK
1341 -moz-image-region: rect(0, 64px, 32px, 32px);
1342}
1343
19988d2d 1344#loop-button[cui-areatype="menu-panel"][disabled="true"]:-moz-any(:hover,:hover:active,[open]) {
d0e580f1
RK
1345 -moz-image-region: rect(0, 224px, 32px, 192px);
1346}
1347
19988d2d 1348#loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="error"] {
d0e580f1
RK
1349 -moz-image-region: rect(0, 96px, 32px, 64px);
1350}
1351
19988d2d 1352#loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"] {
d0e580f1
RK
1353 -moz-image-region: rect(0, 128px, 32px, 96px);
1354}
1355
19988d2d 1356#loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"] {
d0e580f1
RK
1357 -moz-image-region: rect(0, 192px, 32px, 160px);
1358}
1359
43cc2806
RK
1360/* Wide panel control icons */
1361
51994fad
RK
1362#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton,
1363#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton,
7d3f7f14
RK
1364toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton,
1365toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton {
e548e22e 1366 list-style-image: var(--menupanel-small-list-style-image);
43cc2806
RK
1367}
1368
51994fad 1369#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button,
7d3f7f14 1370toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button {
43cc2806
RK
1371 -moz-image-region: rect(0px, 32px, 16px, 16px);
1372}
1373
51994fad 1374#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:hover:not([disabled="true"]),
7d3f7f14 1375toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button:hover:not([disabled="true"]) {
cc4b0b0d
RK
1376 -moz-image-region: rect(16px, 32px, 32px, 16px);
1377}
1378
51994fad 1379#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button[disabled="true"],
7d3f7f14 1380toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button[disabled="true"] {
cc4b0b0d
RK
1381 -moz-image-region: rect(32px, 32px, 48px, 16px);
1382}
1383
51994fad 1384#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
7d3f7f14 1385toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button {
43cc2806
RK
1386 -moz-image-region: rect(0px, 48px, 16px, 32px);
1387}
1388
51994fad 1389#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button:hover:not([disabled="true"]),
7d3f7f14 1390toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button:hover:not([disabled="true"]) {
cc4b0b0d
RK
1391 -moz-image-region: rect(16px, 48px, 32px, 32px);
1392}
1393
51994fad 1394#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button[disabled="true"],
7d3f7f14 1395toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button[disabled="true"] {
cc4b0b0d
RK
1396 -moz-image-region: rect(32px, 48px, 48px, 32px);
1397}
1398
51994fad 1399#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button,
7d3f7f14 1400toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button {
43cc2806
RK
1401 -moz-image-region: rect(0px, 64px, 16px, 48px);
1402}
1403
51994fad 1404#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:hover:not([disabled="true"]),
7d3f7f14 1405toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button:hover:not([disabled="true"]) {
cc4b0b0d
RK
1406 -moz-image-region: rect(16px, 64px, 32px, 48px);
1407}
1408
51994fad 1409#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button[disabled="true"],
7d3f7f14 1410toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button[disabled="true"] {
cc4b0b0d
RK
1411 -moz-image-region: rect(32px, 64px, 48px, 48px);
1412}
1413
51994fad 1414#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button,
7d3f7f14 1415toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button {
43cc2806
RK
1416 -moz-image-region: rect(0px, 80px, 16px, 64px);
1417}
1418
51994fad 1419#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:hover:not([disabled="true"]),
7d3f7f14 1420toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button:hover:not([disabled="true"]) {
cc4b0b0d
RK
1421 -moz-image-region: rect(16px, 80px, 32px, 64px);
1422}
1423
51994fad 1424#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button[disabled="true"],
7d3f7f14 1425toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button[disabled="true"] {
cc4b0b0d
RK
1426 -moz-image-region: rect(32px, 80px, 48px, 64px);
1427}
1428
51994fad 1429#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button,
7d3f7f14 1430toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button {
43cc2806
RK
1431 -moz-image-region: rect(0px, 96px, 16px, 80px);
1432}
1433
51994fad 1434#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:hover:not([disabled="true"]),
7d3f7f14 1435toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button:hover:not([disabled="true"]) {
cc4b0b0d
RK
1436 -moz-image-region: rect(16px, 96px, 32px, 80px);
1437}
1438
51994fad 1439#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button[disabled="true"],
7d3f7f14 1440toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button[disabled="true"] {
cc4b0b0d
RK
1441 -moz-image-region: rect(32px, 96px, 48px, 80px);
1442}
1443
e548e22e
RK
1444#add-share-provider {
1445 list-style-image: var(--menupanel-small-list-style-image);
1446 -moz-image-region: rect(0px, 96px, 16px, 80px);
1447}
1448
43cc2806
RK
1449/* === END menupanel.inc.css === */
1450
63ada306
RK
1451.toolbarbutton-1:not([type="menu-button"]) {
1452 -moz-box-orient: vertical;
1453}
1454
319c6529
RK
1455.toolbarbutton-1,
1456.toolbarbutton-1 > .toolbarbutton-menubutton-button {
c0f6797e
RK
1457/* min-width: 36px;
1458 min-height: 36px;*/
319c6529
RK
1459}
1460
1461.toolbarbutton-1,
1462.toolbarbutton-1 > .toolbarbutton-menubutton-button,
1463.toolbarbutton-1[disabled="true"]:hover:active,
1464.toolbarbutton-1[disabled="true"]:hover:active > .toolbarbutton-menubutton-button {
1465 padding: 1px 2px;
1466}
1467
1468.toolbarbutton-1:hover:active,
1469.toolbarbutton-1[open="true"],
1470.toolbarbutton-1:hover:active > .toolbarbutton-menubutton-button {
1471 padding-top: 2px;
1472 padding-bottom: 0px;
1473 -moz-padding-start: 3px;
1474 -moz-padding-end: 1px;
1475}
1476
c0f6797e
RK
1477#main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-icon,
1478#main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menu-dropmarker,
1479#main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-dropmarker,
1480#main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1481#main-window:not([customizing]) .toolbarbutton-1 > .toolbarbutton-menubutton-button[disabled=true] > .toolbarbutton-icon {
e20c83c3
RK
1482}
1483
c0f6797e
RK
1484.toolbarbutton-1 > .toolbarbutton-menu-dropmarker,
1485.toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
e20c83c3
RK
1486}
1487
c0f6797e
RK
1488toolbar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker:-moz-lwtheme-brighttext,
1489toolbar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:-moz-lwtheme-brighttext {
319c6529
RK
1490}
1491
c0f6797e
RK
1492.toolbarbutton-1 > .toolbarbutton-icon,
1493.toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
319c6529
RK
1494}
1495
20752032 1496.findbar-button,
c0f6797e
RK
1497#nav-bar .toolbarbutton-1,
1498#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
319c6529
RK
1499}
1500
c0f6797e
RK
1501#nav-bar .toolbarbutton-1:not([type=menu-button]),
1502#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1503#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
319c6529
RK
1504}
1505
c0f6797e
RK
1506#nav-bar #PanelUI-menu-button {
1507/* -moz-padding-start: 7px;
1508 -moz-padding-end: 5px;*/
319c6529
RK
1509}
1510
b1dfcf32 1511#nav-bar .toolbarbutton-1[type=panel],
8c5bee4f 1512#nav-bar .toolbarbutton-1[type=menu]:not(#back-button):not(#forward-button):not(#feed-button):not(#PanelUI-menu-button) {
c0f6797e
RK
1513/* padding-left: 5px;
1514 padding-right: 5px;*/
319c6529
RK
1515}
1516
c0f6797e
RK
1517#nav-bar .toolbarbutton-1 > menupopup {
1518/* margin-top: -3px;*/
319c6529
RK
1519}
1520
c0f6797e 1521#nav-bar .toolbarbutton-1 > menupopup.cui-widget-panel {
c1d2ce3e 1522 margin-top: -4px;
319c6529
RK
1523}
1524
c0f6797e
RK
1525#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1526/* -moz-padding-end: 0;*/
319c6529
RK
1527}
1528
c0f6797e
RK
1529#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1530/* -moz-padding-start: 0;
1531 -moz-box-align: center;*/
319c6529
RK
1532}
1533
20752032 1534.findbar-button > .toolbarbutton-text,
c0f6797e
RK
1535#nav-bar .toolbarbutton-1 > .toolbarbutton-icon,
1536#nav-bar .toolbarbutton-1 > .toolbarbutton-text,
19988d2d 1537#nav-bar .toolbarbutton-1 > .toolbarbutton-badge-stack,
c0f6797e
RK
1538#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1539#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
2c62526c 1540window:not([chromehidden~="toolbar"]) #urlbar-wrapper > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon {
c0f6797e
RK
1541/* padding: 2px 6px;
1542 border: 1px solid;
1543 border-color: transparent;
1544 transition-property: background-color, border-color;
1545 transition-duration: 150ms;*/
d54f5b23 1546}
c0f6797e
RK
1547/*
1548#nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-icon,
19988d2d 1549#nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-badge-stack,
c0f6797e
RK
1550#nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1551 padding: 3px 7px;
d54f5b23 1552}
c0f6797e 1553*/
d54f5b23 1554
c0f6797e 1555/* Help SDK icons fit: */
a5cb6e53 1556toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon,
19988d2d 1557toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-badge-stack > .toolbarbutton-icon {
c0f6797e 1558 width: 16px;
26125509
RK
1559}
1560
a5cb6e53 1561#nav-bar toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon {
c0f6797e
RK
1562 /* XXXgijs box models strike again: this is 16px + 2 * 7px padding + 2 * 1px border (from the rules above) */
1563 width: 32px;
26125509 1564}
26125509 1565
b1dfcf32
RK
1566#nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-icon,
1567#nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-badge-stack,
1568#nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button) > .toolbarbutton-icon,
1569#nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button) > .toolbarbutton-badge-stack,
c0f6797e
RK
1570#nav-bar .toolbarbutton-1[type=menu] > .toolbarbutton-text /* hack for add-ons that forcefully display the label */ {
1571/* -moz-padding-end: 17px;*/
319c6529
RK
1572}
1573
c0f6797e 1574#nav-bar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
319c6529
RK
1575}
1576
c0f6797e 1577#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
319c6529
RK
1578}
1579
c0f6797e 1580#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
38cfeb47
RK
1581}
1582
c0f6797e
RK
1583#nav-bar .toolbaritem-combined-buttons {
1584/* margin-left: 2px;
1585 margin-right: 2px;*/
38cfeb47
RK
1586}
1587
c0f6797e
RK
1588#nav-bar .toolbaritem-combined-buttons > .toolbarbutton-1 {
1589/* padding-left: 0;
1590 padding-right: 0;*/
319c6529
RK
1591}
1592
c0f6797e
RK
1593#nav-bar .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before,
1594#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 {
1595/*
1596 content: "";
1597 display: -moz-box;
1598 width: 1px;
1599 height: 16px;
1600 -moz-margin-end: -1px;
1601*/
319c6529
RK
1602}
1603
2c62526c 1604window:not([chromehidden~="toolbar"]) #urlbar-wrapper > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon {
319c6529
RK
1605}
1606
20752032 1607.findbar-button:not(:-moz-any([checked="true"],[disabled="true"])):hover > .toolbarbutton-text,
43371c9b 1608#nav-bar .toolbarbutton-1:not([disabled=true]) > .toolbarbutton-menubutton-button[open] + .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
c0f6797e
RK
1609#nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1610#nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1611#nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-icon,
1612#nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-text,
19988d2d 1613#nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-badge-stack,
2c62526c 1614window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button:not([open]):not(:active):not([disabled=true]):hover > .toolbarbutton-icon,
46e71434 1615#nav-bar .toolbarbutton-1:not([buttonover]):not([open]):not(:active):hover > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon {
319c6529
RK
1616}
1617
20752032 1618.findbar-button:not([disabled=true]):-moz-any([checked="true"],:hover:active) > .toolbarbutton-text,
43371c9b 1619#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):-moz-any(:hover:active, [open]) > .toolbarbutton-icon,
c0f6797e
RK
1620#nav-bar .toolbarbutton-1[open] > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon,
1621#nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-icon,
1622#nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-text,
19988d2d 1623#nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-stack {
319c6529
RK
1624}
1625
c0f6797e
RK
1626#TabsToolbar .toolbarbutton-1,
1627#TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1628.tabbrowser-arrowscrollbox > .scrollbutton-up,
1629.tabbrowser-arrowscrollbox > .scrollbutton-down {
e8519ae0
RK
1630}
1631
c0f6797e
RK
1632#TabsToolbar .toolbarbutton-1:not([disabled=true]):hover,
1633#TabsToolbar .toolbarbutton-1[open],
1634#TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):hover,
1635.tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled=true]):hover,
1636.tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled=true]):hover {
e8519ae0
RK
1637}
1638
c0f6797e 1639/* unified back/forward button */
319c6529 1640
c0f6797e 1641#forward-button {
589b5528 1642 -moz-box-align: stretch; /* let the button shape grow vertically with the location bar */
71bac478
RK
1643}
1644
c0f6797e
RK
1645#forward-button > menupopup {
1646 margin-top: 1px !important;
319c6529
RK
1647}
1648
c0f6797e
RK
1649#forward-button > .toolbarbutton-icon {
1650 background-clip: padding-box !important;
1651 /*mask: url(keyhole-forward-mask.svg#mask); XXX: this regresses twinopen */
5401f433 1652 /*clip-path: url(chrome://browser/content/browser.xul#keyhole-forward-clip-path) !important;*/
71bac478
RK
1653}
1654
c0f6797e 1655#forward-button {
aec5dfad 1656 -moz-margin-start: -4px !important;
9d1e25fa
RK
1657 padding-left: 5px;
1658 padding-right: 5px;
c0f6797e
RK
1659 margin-top: 3px;
1660 margin-bottom: 3px;
1661 border-radius: 0 10000px 10000px 0;
319c6529
RK
1662}
1663
c0f6797e
RK
1664#forward-button:-moz-locale-dir(rtl) {
1665 border-radius: 10000px 0 0 10000px;
8ad8bf83
RK
1666}
1667
2c62526c 1668window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not([switchingtabs]) > #forward-button {
aec5dfad 1669 transition: margin-left 150ms ease-out;
2c62526c
RK
1670}
1671
1672window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] {
aec5dfad 1673 margin-left: -27px !important;
2c62526c
RK
1674}
1675
1676window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] {
1677 /* delay the hiding of the forward button when hovered to avoid accidental clicks on the url bar */
1678 transition-delay: 100s;
1679}
1680
1681window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] {
1682 /* when not hovered anymore, trigger a new transition to hide the forward button immediately */
aec5dfad 1683 margin-left: -27.01px !important;
2c62526c
RK
1684}
1685
c0f6797e
RK
1686#back-button {
1687/* padding-top: 3px !important;
1688 padding-bottom: 3px !important;
1689 -moz-padding-start: 5px !important;
1690 -moz-padding-end: 0 !important;*/
1691 position: relative;
1692 z-index: 1;
1693 border-radius: 10000px;
1694 width: 30px;
1695 height: 30px;
1696 margin-top: -2px;
1697 margin-bottom: -2px;
143c5409
RK
1698}
1699
c0f6797e 1700#back-button:-moz-locale-dir(rtl) {
319c6529
RK
1701}
1702
c0f6797e
RK
1703#back-button > menupopup {
1704 margin-top: -1px !important;
b36fc72e
RK
1705}
1706
c0f6797e
RK
1707#back-button > .toolbarbutton-icon {
1708 border-radius: 10000px !important;
1709 background-clip: padding-box !important;
1710/* background-color: hsla(210,25%,98%,.08) !important;
1711 padding: 6px !important;
589b5528
RK
1712 border-style: none !important;
1713 box-shadow: 0 1px 0 0 hsla(210,4%,10%,.25),
1714 0 0 0 1px hsla(210,4%,10%,.25);*/
1715 transition-property: background-color, box-shadow !important;
c0f6797e 1716 transition-duration: 250ms !important;
143c5409
RK
1717}
1718
c0f6797e 1719#back-button:not([disabled="true"]):not([open="true"]):not(:active):hover > .toolbarbutton-icon {
589b5528 1720/* background-color: hsla(210,4%,10%,.08) !important;*/
143c5409
RK
1721}
1722
c0f6797e
RK
1723#back-button:not([disabled="true"]):hover:active > .toolbarbutton-icon,
1724#back-button[open="true"] > .toolbarbutton-icon {
1725/* background-color: hsla(210,4%,10%,.12) !important;
589b5528
RK
1726 box-shadow: 0 1px 0 0 hsla(210,4%,10%,.25),
1727 0 0 0 1px hsla(210,4%,10%,.25),
1728 0 1px 0 0 hsla(210,80%,20%,.1) inset !important;*/
143c5409
RK
1729}
1730
2c62526c 1731#back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
c0f6797e 1732 transform: scaleX(-1);
143c5409 1733}
c0f6797e
RK
1734/*
1735.unified-nav-back[_moz-menuactive]:-moz-locale-dir(ltr),
1736.unified-nav-forward[_moz-menuactive]:-moz-locale-dir(rtl) {
1737 list-style-image: url("chrome://browser/skin/menu-back.png") !important;
6adbc9a6
RK
1738}
1739
c0f6797e
RK
1740.unified-nav-forward[_moz-menuactive]:-moz-locale-dir(ltr),
1741.unified-nav-back[_moz-menuactive]:-moz-locale-dir(rtl) {
1742 list-style-image: url("chrome://browser/skin/menu-forward.png") !important;
6adbc9a6
RK
1743}
1744
c0f6797e
RK
1745#home-button.bookmark-item {
1746 list-style-image: url("chrome://browser/skin/Toolbar.png");
6adbc9a6
RK
1747}
1748
c0f6797e
RK
1749#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),
1750#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),
1751#main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1752#main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1753#main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1754#main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1755#home-button.bookmark-item:-moz-lwtheme-brighttext {
1756 position: relative;
1757 z-index: 1;
1758 list-style-image: url("chrome://browser/skin/Toolbar-inverted.png");
6adbc9a6
RK
1759}
1760
c0f6797e
RK
1761#main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1762#main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme) {
1763 list-style-image: url("chrome://browser/skin/syncProgress-toolbar-inverted.png");
6adbc9a6 1764}
c0f6797e 1765*/
6adbc9a6 1766
c0f6797e
RK
1767#downloads-button > .toolbarbutton-icon {
1768 margin: 0;
6adbc9a6
RK
1769}
1770
9168a62c 1771/* tabview menu item */
c0f6797e 1772
6adbc9a6 1773#menu_tabview {
832af407 1774 list-style-image: url("chrome://browser/skin/tabview/tabviewFx.png");
6adbc9a6
RK
1775 -moz-image-region: rect(1px, 89px, 17px, 73px);
1776}
1777
1778#menu_tabview[groups="0"] {
1779 -moz-image-region: rect(1px, 17px, 17px, 1px);
1780}
1781
1782#menu_tabview[groups="1"] {
1783 -moz-image-region: rect(1px, 35px, 17px, 19px);
1784}
1785
1786#menu_tabview[groups="2"] {
1787 -moz-image-region: rect(1px, 53px, 17px, 37px);
1788}
1789
1790#menu_tabview[groups="3"] {
1791 -moz-image-region: rect(1px, 71px, 17px, 55px);
1792}
1793
9168a62c
RK
1794/* undo close tab menu item */
1795#alltabs_undoCloseTab {
1796 list-style-image: url(chrome://browser/skin/undoCloseTab.png);
1797}
1798
2e389898 1799@media (min-resolution: 1.1dppx) {
9168a62c
RK
1800 #alltabs_undoCloseTab {
1801 list-style-image: url(chrome://browser/skin/undoCloseTab@2x.png);
1802 }
1803 #alltabs_undoCloseTab > .toolbarbutton-icon {
1804 width: 16px;
1805 }
1806}
1807
5401f433
RK
1808/* zoom control text (reset) button special case: */
1809
1810#nav-bar #zoom-reset-button > .toolbarbutton-text {
1811 /* To make this line up with the icons, it needs the same height (18px) +
1812 * padding (2 * 2px) + border (2 * 1px), but as a minimum because otherwise
1813 * increase in text sizes would break things...
1814 */
1815 min-height: 20px;
1816}
1817
319c6529
RK
1818/* ::::: fullscreen window controls ::::: */
1819
8d7ef0d9 1820#window-controls {
ab799a7a
RK
1821 -moz-margin-start: 4px;
1822}
1823
319c6529
RK
1824#minimize-button,
1825#restore-button,
1826#close-button {
c0f6797e
RK
1827/* list-style-image: url("chrome://global/skin/icons/windowControls.png");
1828 padding: 0; */
319c6529
RK
1829}
1830
1831#minimize-button {
1832 list-style-image: url("chrome://navigator/skin/icons/win-minimize.gif");
1833}
1834
1835#minimize-button:hover {
1836 list-style-image: url("chrome://navigator/skin/icons/win-minimize-hover.gif");
1837}
1838
1839#restore-button {
1840 list-style-image: url("chrome://navigator/skin/icons/win-restore.gif");
1841}
1842
1843#restore-button:hover {
1844 list-style-image: url("chrome://navigator/skin/icons/win-restore-hover.gif");
1845}
1846
1847#close-button {
1848 list-style-image: url("chrome://navigator/skin/icons/win-close.gif");
1849}
1850
1851#close-button:hover {
1852 list-style-image: url("chrome://navigator/skin/icons/win-close-hover.gif");
1853}
1854
1855/* ::::: Location Bar ::::: */
1856
319c6529
RK
1857#urlbar,
1858.searchbar-textbox {
1859 border-radius: 5px;
aec5dfad 1860 margin: 2px 0;
319c6529
RK
1861 -moz-margin-start: 3px;
1862}
1863
ffce2402 1864#urlbar {
f0071a71
RK
1865 /* make color as light as possible to deal with dark non-domain parts */
1866 color: #FFBFFF;
ffce2402
RK
1867}
1868
c9b0a396
RK
1869/* overlap the urlbar's border */
1870#PopupAutoCompleteRichResult {
1871 margin-top: -1px;
1872}
1873
319c6529
RK
1874#urlbar:-moz-lwtheme,
1875.searchbar-textbox:-moz-lwtheme {
1876 /* background-color: rgba(255,255,255,.8);
1877 @navbarTextboxCustomBorder@
1878 color: black; */
1879}
1880
c0f6797e
RK
1881#urlbar:-moz-lwtheme:hover:not([focused]):not([readonly]),
1882.searchbar-textbox:-moz-lwtheme:hover:not([focused]) {
1883/* background-color: rgba(255,255,255,.9);*/
1884}
1885
1886#urlbar:-moz-lwtheme[focused]:not([readonly]),
1887.searchbar-textbox:-moz-lwtheme[focused] {
1888/* background-color: white;*/
1889}
1890
2c62526c 1891window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar {
2299146f
RK
1892/* -moz-border-start: none;
1893 margin-left: 0;*/
2c62526c
RK
1894}
1895
1896window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(ltr) {
1897/* border-top-left-radius: 0;
1898 border-bottom-left-radius: 0; */
1899}
1900
1901window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
1902/* border-top-right-radius: 0;
1903 border-bottom-right-radius: 0; */
1904}
1905
1906window:not([chromehidden~="toolbar"]) #urlbar-wrapper {
1907/* clip-path: url("chrome://browser/content/browser.xul#urlbar-back-button-clip-path");*/
b1dfcf32 1908/* margin-inline-start: calc(-1 * var(--backbutton-urlbar-overlap)); */
2c62526c
RK
1909}
1910
fff8097b
RK
1911window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl),
1912window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
2c62526c 1913 /* let urlbar-back-button-clip-path clip the urlbar's right side for RTL */
71a617ff 1914 transform: scaleX(-1);
8ad8bf83
RK
1915}
1916
2c62526c
RK
1917window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl) {
1918 -moz-box-direction: reverse;
1919}
1920
a7145e95
RK
1921html|*.urlbar-input:-moz-lwtheme::-moz-placeholder,
1922.searchbar-textbox:-moz-lwtheme > .autocomplete-textbox-container > .textbox-input-box > html|*.textbox-input::-moz-placeholder {
319c6529
RK
1923 color: #E7ADE7;
1924}
1925
319c6529
RK
1926#urlbar-container {
1927 -moz-box-orient: horizontal;
1928 -moz-box-align: stretch;
1929}
1930
9abeb12c
RK
1931.urlbar-textbox-container {
1932 -moz-box-align: stretch;
1933}
1934
a40f6a79
RK
1935.urlbar-input-box {
1936 -moz-margin-start: 0;
1937}
1938
319c6529 1939#urlbar-icons {
319c6529
RK
1940 -moz-box-align: center;
1941}
1942
1943.urlbar-icon {
b8384c33 1944 padding: 0 2px;
ffce2402
RK
1945}
1946
ffce2402 1947.search-go-container {
4b686546
RK
1948 padding: 2px;
1949}
1950
1951.search-go-container > .search-go-button {
1952 padding: 0;
319c6529
RK
1953}
1954
1437a48c
RK
1955#urlbar-search-footer {
1956 border-top: 1px solid #A09090;
1957}
1958
1959#urlbar-search-settings {
1960}
1961
1962#urlbar-search-settings:hover {
1963}
1964
1965#urlbar-search-settings:hover:active {
1966}
1967
319c6529
RK
1968#urlbar-search-splitter {
1969 min-width: 6px;
1970 -moz-margin-start: -3px;
1971 border: none;
1972 background: transparent;
1973}
1974
f0071a71 1975#urlbar-search-splitter + #urlbar-container > #urlbar,
319c6529
RK
1976#urlbar-search-splitter + #search-container > #searchbar > .searchbar-textbox {
1977 -moz-margin-start: 0;
1978}
1979
e20c83c3
RK
1980#urlbar-display-box {
1981}
1982
8922acc9 1983.urlbar-display {
319c6529
RK
1984 -moz-border-end: 1px solid #9C9CFF;
1985 -moz-margin-end: 3px;
ab799a7a
RK
1986 margin-top: 0;
1987 margin-bottom: 0;
a40f6a79 1988 -moz-margin-start: 0;
ab799a7a
RK
1989 color: #8050B0;
1990}
1991
b1dfcf32 1992/* === BEGIN urlbarSearchSuggestionsNotification.inc.css === */
e20c83c3 1993
b1dfcf32
RK
1994#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] {
1995 border-bottom: 1px solid #A09090;
1996 background-color: #000000;
1997 padding: 6px 0;
1998 -moz-padding-start: 44px;
1999 -moz-padding-end: 6px;
2000 background-image: url("chrome://browser/skin/info.svg");
2001 background-clip: padding-box;
2002 background-position: 20px center;
2003 background-repeat: no-repeat;
2004 background-size: 16px 16px;
8ad8bf83
RK
2005}
2006
b1dfcf32
RK
2007#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"]:-moz-locale-dir(rtl) {
2008 background-position: right 20px center;
8ad8bf83
RK
2009}
2010
b1dfcf32
RK
2011#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description {
2012 margin: 0;
2013 padding: 0;
2c62526c
RK
2014}
2015
b1dfcf32
RK
2016#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description > label.text-link {
2017 -moz-margin-start: 0;
8ad8bf83
RK
2018}
2019
b1dfcf32
RK
2020#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button {
2021 -moz-appearance: none;
b1dfcf32
RK
2022 min-width: 80px;
2023 border-radius: 3px;
2024 padding: 4px 16px;
2025 margin: 0;
2026 -moz-margin-start: 10px;
8ad8bf83
RK
2027}
2028
b1dfcf32 2029#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"] {
8ad8bf83
RK
2030}
2031
b1dfcf32 2032#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"]:hover {
8ad8bf83
RK
2033}
2034
b1dfcf32 2035#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"] {
8ad8bf83
RK
2036}
2037
b1dfcf32 2038#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"]:hover {
319c6529
RK
2039}
2040
b1dfcf32 2041/* === END urlbarSearchSuggestionsNotification.inc.css === */
319c6529 2042
b1dfcf32
RK
2043#search-container {
2044 min-width: calc(54px + 11ch);
319c6529
RK
2045}
2046
b1dfcf32 2047/* identity box */
1437a48c 2048
19988d2d 2049#identity-box.verifiedIdentity:not(:-moz-lwtheme):not(:hover):not([open=true]) {
b1dfcf32 2050 var(--identity-box-verified-background-color);
319c6529
RK
2051}
2052
2053#identity-box:-moz-focusring {
2054 outline: 1px dotted #008484;
f993773d 2055 outline-offset: -1px;
319c6529
RK
2056}
2057
2058#identity-box.verifiedDomain:-moz-focusring,
2059#identity-box.verifiedIdentity:-moz-focusring {
2060 outline-color: #000000;
2061}
2062
319c6529
RK
2063/* Location bar dropmarker */
2064
38cfeb47 2065.urlbar-history-dropmarker:not(:hover):not([open="true"]) {
319c6529 2066 background-color: transparent;
319c6529
RK
2067}
2068
00f971bc 2069#urlbar-container[combined="true"] > #urlbar > .urlbar-history-dropmarker,
c9b0a396
RK
2070#urlbar-wrapper > #urlbar > .urlbar-history-dropmarker,
2071#urlbar-wrapper > #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker {
38cfeb47
RK
2072 border: none;
2073 border-radius: 0px;
319c6529
RK
2074}
2075
ffce2402
RK
2076.urlbar-history-dropmarker:hover {
2077}
2078
2079.urlbar-history-dropmarker:hover:active,
2080.urlbar-history-dropmarker[open="true"] {
2081}
2082
319c6529
RK
2083/* page proxy icon */
2084
e7c8bab1
RK
2085/* === BEGIN identity-block.inc.css === */
2086
b1dfcf32 2087#identity-box {
e548e22e 2088 --identity-box-verified-color: #008484;
e7c8bab1 2089 /* Default theme does different color per channel, we can't as they do it build-time. */
e548e22e 2090 --identity-box-chrome-color: #9C9CFF;
b1dfcf32 2091
024a65e9 2092 border-inline-end: 1px solid --urlbar-separator-color);
b1dfcf32
RK
2093 font-size: .9em;
2094 border-radius: 2px;
024a65e9
RK
2095 padding: 3px 5px;
2096 margin-inline-end: 4px;
b1dfcf32 2097 overflow: hidden;
024a65e9
RK
2098 /* The latter two properties have a transition to handle the delayed hiding of
2099 the forward button when hovered. */
2100 transition: background-color 150ms ease, padding-left, padding-right;
b1dfcf32
RK
2101}
2102
2103#identity-box:-moz-locale-dir(ltr) {
2104 border-top-right-radius: 0;
2105 border-bottom-right-radius: 0;
2106}
2107
2108#identity-box:-moz-locale-dir(rtl) {
2109 border-top-left-radius: 0;
2110 border-bottom-left-radius: 0;
e548e22e
RK
2111}
2112
2113#urlbar[pageproxystate="valid"] > #identity-box.chromeUI {
2114 color: var(--identity-box-chrome-color);
2115 -moz-border-end: 1px solid var(--identity-box-chrome-color);
e7c8bab1
RK
2116}
2117
2118#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
e548e22e
RK
2119 color: var(--identity-box-verified-color);
2120 -moz-border-end: 1px solid var(--identity-box-verified-color);
e7c8bab1
RK
2121}
2122
b1dfcf32
RK
2123#notification-popup-box:not([hidden]) + #identity-box {
2124 padding-inline-start: 10px !important;
2125 border-radius: 0;
2126}
2127
2128window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box {
2129/* border-radius: 0; */
2130 -moz-padding-start: 2px;
2131 -moz-padding-end: 2px;
2132 -moz-margin-end: 1px;
2133}
2134
b1dfcf32
RK
2135window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] + #urlbar >
2136 #notification-popup-box[hidden] + #identity-box {
2137 padding-inline-start: 2px;
2138}
2139
2140window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] + #urlbar >
2141 #notification-popup-box[hidden] + #identity-box {
024a65e9
RK
2142 /* Forward button hiding is delayed when hovered, so we should use the same
2143 delay for the identity box. We handle both horizontal paddings (for LTR and
2144 RTL), the latter two delays here are for padding-left and padding-right. */
2145 transition-delay: 0s, 100s, 100s;
b1dfcf32
RK
2146}
2147
2148window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] + #urlbar >
2149 #notification-popup-box[hidden] + #identity-box {
2150 /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
2151 padding-inline-start: 2.01px;
e7c8bab1
RK
2152}
2153
19988d2d
RK
2154/* TRACKING PROTECTION ICON */
2155
2156#tracking-protection-icon {
2157 width: 16px;
2158 height: 16px;
024a65e9 2159 margin-inline-start: 0;
19988d2d 2160 list-style-image: url("chrome://browser/skin/tracking-protection-16.svg");
b1dfcf32 2161 opacity: 1;
19988d2d
RK
2162}
2163
2164#tracking-protection-icon[state="loaded-tracking-content"] {
2165 list-style-image: url("chrome://browser/skin/tracking-protection-disabled-16.svg");
2166}
2167
b1dfcf32 2168#tracking-protection-icon[animate] {
024a65e9 2169 transition: margin-left 200ms ease-out, margin-right 200ms ease-out;
b1dfcf32
RK
2170}
2171
19988d2d 2172#tracking-protection-icon:not([state]) {
024a65e9 2173 margin-inline-start: -18px;
b1dfcf32
RK
2174 pointer-events: none;
2175 opacity: 0;
2176 /* Only animate the shield in, when it disappears hide it immediately. */
2177 transition: none;
2178}
2179
2180#urlbar[pageproxystate="invalid"] > #identity-box > #identity-icons > #tracking-protection-icon {
2181 visibility: collapse;
19988d2d
RK
2182}
2183
2184/* MAIN IDENTITY ICON */
e7c8bab1 2185
4d58ff64 2186#page-proxy-favicon {
319c6529
RK
2187 width: 16px;
2188 height: 16px;
1437a48c 2189 list-style-image: url("chrome://browser/skin/identity-not-secure.svg");
00f971bc 2190 margin: 2px;
e7c8bab1
RK
2191}
2192
b1dfcf32 2193.chromeUI > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] {
1437a48c 2194 list-style-image: url("chrome://branding/content/identity-icons-brand.svg");
a40f6a79
RK
2195}
2196
b1dfcf32
RK
2197.verifiedDomain > #identity-icons > #page-proxy-favicon[pageproxystate="valid"],
2198.verifiedIdentity > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] {
1437a48c 2199 list-style-image: url("chrome://browser/skin/identity-secure.svg");
a40f6a79
RK
2200}
2201
b1dfcf32 2202.mixedActiveContent > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] {
1437a48c 2203 list-style-image: url("chrome://browser/skin/identity-mixed-active-loaded.svg");
56ab361a
RK
2204}
2205
b1dfcf32
RK
2206.weakCipher > #identity-icons > #page-proxy-favicon[pageproxystate="valid"],
2207.mixedDisplayContent > #identity-icons > #page-proxy-favicon[pageproxystate="valid"],
2208.mixedDisplayContentLoadedActiveBlocked > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] {
1437a48c 2209 list-style-image: url("chrome://browser/skin/identity-mixed-passive-loaded.svg");
e7c8bab1
RK
2210}
2211
b1dfcf32 2212.mixedActiveBlocked > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] {
1437a48c 2213 list-style-image: url("chrome://browser/skin/identity-mixed-active-blocked.svg");
e7c8bab1
RK
2214}
2215
2216#page-proxy-favicon[pageproxystate="invalid"] {
2217 opacity: 0.3;
2218}
2219
2220#identity-popup.chromeUI > #identity-popup-container > #identity-popup-icon {
2221 list-style-image: url("chrome://branding/content/icon64.png");
2222}
2223
2224#identity-popup-brandName {
2225 font-weight: bold;
2226 font-size: 1.25em;
2227 margin-top: .5em;
2228 margin-bottom: .5em;
2229}
2230
2231#identity-popup-content-box {
2232 max-width: 50ch;
2233}
2234
b1dfcf32 2235#urlbar[actiontype="searchengine"] > #identity-box > #identity-icons > #page-proxy-favicon {
b336389b
RK
2236 -moz-image-region: inherit;
2237 list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon);
2238 width: 16px;
2239 height: 16px;
2240 opacity: 1;
2241}
2242
c9b0a396
RK
2243/* MAIN IDENTITY ICON */
2244
2245#identity-icon {
2246 width: 16px;
2247 height: 16px;
2248 list-style-image: url(chrome://browser/skin/identity-icon.svg#normal);
2249}
2250
2251#identity-box:hover > #identity-icon,
2252#identity-box[open=true] > #identity-icon {
2253 list-style-image: url(chrome://browser/skin/identity-icon.svg#hover);
2254}
2255
2256#urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon {
2257 list-style-image: url(chrome://branding/content/identity-icons-brand.svg);
2258}
2259
2260#urlbar[pageproxystate="invalid"] > #identity-box > #identity-icon {
2261 opacity: 0.3;
2262}
2263
2264#urlbar[actiontype="searchengine"] > #identity-box > #identity-icon {
2265 -moz-image-region: inherit;
2266 list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon);
2267 width: 16px;
2268 height: 16px;
2269 opacity: 1;
2270}
2271
2272/* TRACKING PROTECTION ICON */
2273
2274#tracking-protection-icon {
2275 width: 16px;
2276 height: 16px;
2277 margin-inline-start: 2px;
2278 margin-inline-end: 0;
2279 list-style-image: url(chrome://browser/skin/tracking-protection-16.svg);
2280 opacity: 1;
2281}
2282
2283#tracking-protection-icon[state="loaded-tracking-content"] {
2284 list-style-image: url(chrome://browser/skin/tracking-protection-disabled-16.svg);
2285}
2286
2287#tracking-protection-icon[animate] {
2288 transition: margin-left 200ms ease-out, margin-right 200ms ease-out;
2289}
2290
2291#tracking-protection-icon:not([state]) {
2292 margin-inline-end: -18px;
2293 pointer-events: none;
2294 opacity: 0;
2295 /* Only animate the shield in, when it disappears hide it immediately. */
2296 transition: none;
2297}
2298
2299#urlbar[pageproxystate="invalid"] > #identity-box > #tracking-protection-icon {
2300 visibility: collapse;
2301}
2302
2303/* CONNECTION ICON */
2304
2305#connection-icon {
2306 width: 16px;
2307 height: 16px;
2308 margin-inline-start: 2px;
2309 visibility: collapse;
2310}
2311
2312#urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon,
2313#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon {
2314 list-style-image: url(chrome://browser/skin/identity-secure.svg);
2315 visibility: visible;
2316}
2317
2318#urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon,
2319#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon {
2320 list-style-image: url(chrome://browser/skin/identity-mixed-active-loaded.svg);
2321 visibility: visible;
2322}
2323
2324#urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon,
2325#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon,
2326#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon {
2327 list-style-image: url(chrome://browser/skin/identity-mixed-passive-loaded.svg);
2328 visibility: visible;
2329}
2330
2331#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon {
2332 list-style-image: url(chrome://browser/skin/identity-mixed-active-blocked.svg);
2333 visibility: visible;
2334}
2335
e7c8bab1
RK
2336/* === END identity-block.inc.css === */
2337
2338#page-proxy-favicon {
2339 -moz-image-region: rect(0, 16px, 16px, 0);
2340}
2341
3b1da406 2342window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box > #page-proxy-favicon {
c0f6797e
RK
2343/* -moz-margin-end: 1px;*/
2344}
2345
2a5b7882 2346#identity-box:hover > #page-proxy-favicon {
a40f6a79
RK
2347 -moz-image-region: rect(0, 32px, 16px, 16px);
2348}
2349
2a5b7882
RK
2350#identity-box:hover:active > #page-proxy-favicon,
2351#identity-box[open=true] > #page-proxy-favicon {
a40f6a79 2352 -moz-image-region: rect(0, 48px, 16px, 32px);
acb0e9b8 2353}
2354
2a5b7882
RK
2355#identity-box:hover {
2356 background-color: #FFCF00;
7092015d 2357 color: #000000;
2a5b7882
RK
2358}
2359
2360#identity-box:hover:active,
2361#identity-box[open=true] {
2362 background-color: #FF9F00;
7092015d 2363 color: #000000;
2a5b7882
RK
2364}
2365
56859d76
RK
2366#urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover,
2367#urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active,
2368#urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] {
2369 background-color: #9C9CFF;
2370 color: #000000;
2371}
2372
387e6560
RK
2373#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover,
2374#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active,
2375#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] {
2a5b7882
RK
2376 background-color: #008484;
2377 color: #000000;
2378}
2379
319c6529
RK
2380/* autocomplete */
2381
319c6529
RK
2382#treecolAutoCompleteImage {
2383 max-width: 36px;
2384}
acb0e9b8 2385
319c6529
RK
2386.ac-result-type-bookmark,
2387.autocomplete-treebody::-moz-tree-image(bookmark, treecolAutoCompleteImage) {
71bac478 2388 list-style-image: url("chrome://browser/skin/places/bookmark.png");
319c6529 2389 -moz-image-region: rect(0px 16px 16px 0px);
c1f7cc84 2390 width: 16px;
319c6529 2391 height: 16px;
acb0e9b8 2392}
2393
c0f6797e
RK
2394richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-bookmark,
2395.autocomplete-treebody::-moz-tree-image(selected, current, bookmark, treecolAutoCompleteImage) {
2396/* -moz-image-region: rect(0px 48px 16px 32px);*/
2397}
2398
319c6529 2399.ac-result-type-keyword,
8922acc9
RK
2400.autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage),
2401richlistitem[type~="action"][actiontype="searchengine"] > .ac-title-box > .ac-site-icon {
2402 list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon");
acb0e9b8 2403 width: 16px;
2404 height: 16px;
2405}
2406
8922acc9
RK
2407 .ac-result-type-keyword[selected="true"],
2408 .autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage, selected),
2409 richlistitem[type~="action"][actiontype="searchengine"][selected="true"] > .ac-title-box > .ac-site-icon {
2410 list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon-inverted");
2411 }
2412
319c6529
RK
2413.ac-result-type-tag,
2414.autocomplete-treebody::-moz-tree-image(tag, treecolAutoCompleteImage) {
8da9da4e 2415 list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
c1f7cc84 2416 width: 16px;
319c6529
RK
2417 height: 16px;
2418}
acb0e9b8 2419
b1dfcf32
RK
2420.ac-comment,
2421#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description,
2422#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button {
2423 font-size: 1.05em;
acb0e9b8 2424}
319c6529 2425
b1dfcf32
RK
2426.ac-extra > .ac-comment,
2427.ac-url-text,
2428.ac-action-text {
c0f6797e 2429 font-size: 1em;
acb0e9b8 2430}
319c6529
RK
2431
2432.ac-url-text,
2433.ac-action-text {
2434 color: #9C9CFF;
acb0e9b8 2435}
319c6529
RK
2436
2437richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-icon {
2438 list-style-image: url("chrome://browser/skin/actionicon-tab.png");
85cfb236
RK
2439 -moz-image-region: rect(0, 16px, 16px, 0);
2440 padding: 0 3px;
b1dfcf32
RK
2441 width: 22px;
2442 height: 16px;
2443}
2444
2445@media (min-resolution: 1.1dppx) {
2446 richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-icon {
2447 list-style-image: url("chrome://browser/skin/actionicon-tab@2x.png");
2448 -moz-image-region: rect(0, 32px, 32px, 0);
2449 }
85cfb236
RK
2450}
2451
2452richlistitem[type~="action"][actiontype="switchtab"][selected="true"] > .ac-url-box > .ac-action-icon {
2453 -moz-image-region: rect(16px, 16px, 32px, 0);
acb0e9b8 2454}
2455
319c6529
RK
2456.autocomplete-treebody::-moz-tree-cell-text(treecolAutoCompleteComment) {
2457 color: #8050B0;
2458}
acb0e9b8 2459
319c6529
RK
2460.ac-comment[selected="true"],
2461.ac-url-text[selected="true"],
2462.ac-action-text[selected="true"] {
2463 color: inherit !important;
acb0e9b8 2464}
2465
c1f7cc84
RK
2466.autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment),
2467.autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment)
319c6529
RK
2468{
2469 color: #8050B0;
2470 font-size: smaller;
acb0e9b8 2471}
319c6529
RK
2472
2473.autocomplete-treebody::-moz-tree-cell(suggesthint) {
2474 border-top: 1px solid #9C9CFF;
acb0e9b8 2475}
2476
319c6529
RK
2477/* combined go/reload/stop button in location bar */
2478
c9b0a396
RK
2479#urlbar-go-button,
2480#urlbar-reload-button,
2481#urlbar-stop-button {
2482 border-style: none;
52d7b436 2483 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
c9b0a396 2484/* padding: 0 9px;*/
024a65e9 2485 margin-inline-start: 0px;
c9b0a396
RK
2486 border-inline-start: 1px solid var(--urlbar-separator-color);
2487 border-image: linear-gradient(transparent 15%,
2488 var(--urlbar-separator-color) 15%,
2489 var(--urlbar-separator-color) 85%,
2490 transparent 85%);
2491 border-image-slice: 1;
9abeb12c
RK
2492}
2493
2494#urlbar:-moz-locale-dir(ltr) > toolbarbutton {
38cfeb47
RK
2495 border-top-left-radius: 0px;
2496 border-bottom-left-radius: 0px;
acb0e9b8 2497}
acb0e9b8 2498
9abeb12c 2499#urlbar:-moz-locale-dir(rtl) > toolbarbutton {
38cfeb47
RK
2500 border-top-right-radius: 0px;
2501 border-bottom-right-radius: 0px;
9abeb12c
RK
2502}
2503
46e71434 2504#urlbar > toolbarbutton:not([disabled=true]):active:hover,
dce90fef
RK
2505#urlbar-reload-button:not(:hover) {
2506 -moz-border-start-style: none;
714b11f6 2507 -moz-padding-start: 3px;
dce90fef
RK
2508}
2509
c0f6797e
RK
2510#urlbar-reload-button {
2511 -moz-image-region: rect(0px, 14px, 14px, 0px);
acb0e9b8 2512}
2513
46e71434 2514#urlbar-reload-button[disabled=true] {
c0f6797e 2515 -moz-image-region: rect(28px, 14px, 42px, 0px);
acb0e9b8 2516}
2517
46e71434 2518#urlbar-reload-button:not([disabled=true]):hover {
c0f6797e 2519 -moz-image-region: rect(14px, 14px, 28px, 0px);
ffce2402
RK
2520}
2521
c0f6797e
RK
2522#urlbar-reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2523 transform: scaleX(-1);
acb0e9b8 2524}
2525
c0f6797e
RK
2526#urlbar-go-button {
2527 -moz-image-region: rect(0, 42px, 14px, 28px);
38cfeb47
RK
2528}
2529
fff8097b 2530#urlbar-go-button:hover {
c0f6797e 2531 -moz-image-region: rect(14px, 42px, 28px, 28px);
acb0e9b8 2532}
2533
c0f6797e
RK
2534#urlbar-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2535 transform: scaleX(-1);
acb0e9b8 2536}
319c6529
RK
2537
2538#urlbar-stop-button {
ffce2402 2539 -moz-image-region: rect(0px, 28px, 14px, 14px);
acb0e9b8 2540}
319c6529
RK
2541
2542#urlbar-stop-button:hover {
ffce2402 2543 -moz-image-region: rect(14px, 28px, 28px, 14px);
acb0e9b8 2544}
2545
2e389898 2546@media (min-resolution: 1.1dppx) {
c9b0a396
RK
2547 #urlbar-go-button,
2548 #urlbar-reload-button,
2549 #urlbar-stop-button {
2e389898
RK
2550 list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png");
2551 }
2552
c9b0a396
RK
2553 #urlbar-go-button > .toolbarbutton-icon,
2554 #urlbar-reload-button > .toolbarbutton-icon,
2555 #urlbar-stop-button > .toolbarbutton-icon {
2556 width: 14px;
2557 }
2558
2e389898
RK
2559 #urlbar-go-button {
2560 -moz-image-region: rect(0, 84px, 28px, 56px);
2561 }
2562
2563 #urlbar-go-button:hover {
2564 -moz-image-region: rect(28px, 84px, 56px, 56px);
2565 }
2566
2567 #urlbar-go-button:hover:active {
2568 -moz-image-region: rect(56px, 84px, 84px, 56px);
2569 }
2570
2571 #urlbar-reload-button {
2572 -moz-image-region: rect(0, 28px, 28px, 0);
2573 }
2574
2575 #urlbar-reload-button:not([disabled]):hover {
2576 -moz-image-region: rect(28px, 28px, 56px, 0);
2577 }
2578
2579 #urlbar-reload-button:not([disabled]):hover:active {
2580 -moz-image-region: rect(56px, 28px, 84px, 0);
2581 }
2582
2583 #urlbar-stop-button {
2584 -moz-image-region: rect(0, 56px, 28px, 28px);
2585 }
2586
2587 #urlbar-stop-button:not([disabled]):hover {
2588 -moz-image-region: rect(28px, 56px, 56px, 28px);
2589 }
2590
2591 #urlbar-stop-button:hover:active {
2592 -moz-image-region: rect(56px, 56px, 84px, 28px);
2593 }
2e389898
RK
2594}
2595
319c6529
RK
2596/* popup blocker button */
2597
2598#page-report-button {
2599 list-style-image: url("chrome://browser/skin/urlbar-popup-blocked.png");
2600 -moz-image-region: rect(0, 16px, 16px, 0);
acb0e9b8 2601}
319c6529 2602
71bac478 2603#page-report-button:hover ,
319c6529
RK
2604#page-report-button:hover:active,
2605#page-report-button[open="true"] {
71bac478 2606 -moz-image-region: rect(0, 32px, 16px, 16px);
acb0e9b8 2607}
2608
bcb9d005
RK
2609/* Reader mode button */
2610
2611#reader-mode-button {
2612 list-style-image: url("chrome://browser/skin/readerMode.svg");
2613 -moz-image-region: rect(0, 16px, 16px, 0);
2614}
2615
2616#reader-mode-button:hover,
2617#reader-mode-button[readeractive]:hover {
2618 -moz-image-region: rect(0, 32px, 16px, 16px);
2619}
2620
2621#reader-mode-button:hover:active,
2622#reader-mode-button[readeractive] {
2623 -moz-image-region: rect(0, 48px, 16px, 32px);
2624}
2625
c4460289
RK
2626/* social share panel */
2627
20752032
RK
2628.social-share-frame {
2629 min-width: 756px;
c4460289
RK
2630 height: 150px;
2631}
2632
20752032
RK
2633#share-container {
2634 min-width: 756px;
2635 background-color: white;
2636 background-repeat: no-repeat;
2637 background-position: center center;
c4460289 2638}
20752032
RK
2639#share-container[loading] {
2640 background-image: url(chrome://browser/skin/tabbrowser/pendingpaint.png);
2641}
2642#share-container > browser {
2643 transition: opacity 150ms ease-in-out;
2644 opacity: 1;
2645}
2646#share-container[loading] > browser {
2647 opacity: 0;
c4460289
RK
2648}
2649
20752032
RK
2650.social-share-toolbar {
2651 border-bottom: 1px solid #9C9CFF;
2652 padding: 2px;
c4460289
RK
2653}
2654
20752032
RK
2655#social-share-provider-buttons {
2656 padding: 0;
2657 margin: 0;
c4460289
RK
2658}
2659
20752032
RK
2660.share-provider-button {
2661 padding: 5px;
2662 margin: 2px;
c4460289
RK
2663}
2664
20752032 2665.share-provider-button > .toolbarbutton-text {
c4460289
RK
2666 display: none;
2667}
20752032 2668.share-provider-button > .toolbarbutton-icon {
c4460289
RK
2669 width: 16px;
2670 min-height: 16px;
2671 max-height: 16px;
2672}
2673
2674/* fixup corners for share panel */
2675.social-panel > .social-panel-frame {
2676 border-radius: inherit;
2677}
2678
2679#social-share-panel {
c4460289 2680 min-height: 100px;
20752032 2681 min-width: 766px;
c4460289
RK
2682}
2683
20752032 2684#share-container,
c4460289 2685.social-share-frame {
e2734cc7 2686 border-top-left-radius: 0;
c4460289 2687 border-bottom-left-radius: inherit;
e2734cc7 2688 border-top-right-radius: 0;
20752032 2689 border-bottom-right-radius: inherit;
c4460289
RK
2690}
2691
20752032 2692#social-share-panel > .social-share-toolbar {
e2734cc7 2693 border-top-left-radius: inherit;
e2734cc7 2694 border-top-right-radius: inherit;
e2734cc7
RK
2695}
2696
20752032 2697#social-share-provider-buttons {
c4460289 2698 border-top-left-radius: inherit;
e2734cc7 2699 border-top-right-radius: inherit;
e2734cc7
RK
2700}
2701
889649fd
RK
2702/* social recommending panel */
2703
a6757852 2704#social-mark-button {
d7cfd768 2705 -moz-image-region: rect(0, 16px, 16px, 0);
889649fd
RK
2706}
2707
c0f6797e 2708/* bookmarks menu-button */
319c6529 2709
c0f6797e
RK
2710#bookmarks-menu-button.bookmark-item {
2711 list-style-image: url("chrome://browser/skin/places/bookmark.png");
2712 -moz-image-region: rect(0px 16px 16px 0px);
acb0e9b8 2713}
319c6529 2714
c0f6797e
RK
2715#bookmarks-menu-button.bookmark-item[starred] {
2716 -moz-image-region: rect(0px 32px 16px 16px);
acb0e9b8 2717}
319c6529 2718
e9fbfc3a 2719#nav-bar #bookmarks-menu-button[cui-areatype="toolbar"]:not([overflowedItem=true]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
c0f6797e
RK
2720 padding-top: 2px;
2721 padding-bottom: 2px;
71bac478
RK
2722}
2723
c0f6797e
RK
2724#BMB_bookmarksPopup[side="top"],
2725#BMB_bookmarksPopup[side="bottom"] {
2726 margin-left: -20px;
2727 margin-right: -20px;
71bac478
RK
2728}
2729
c0f6797e
RK
2730#BMB_bookmarksPopup[side="left"],
2731#BMB_bookmarksPopup[side="right"] {
2732 margin-top: -20px;
2733 margin-bottom: -20px;
acb0e9b8 2734}
319c6529
RK
2735
2736/* bookmarking panel */
c0f6797e 2737
319c6529
RK
2738#editBookmarkPanelStarIcon {
2739 list-style-image: url("chrome://browser/skin/places/starred48.png");
2740 width: 48px;
2741 height: 48px;
acb0e9b8 2742}
319c6529
RK
2743
2744#editBookmarkPanelStarIcon[unstarred] {
2745 list-style-image: url("chrome://browser/skin/places/unstarred48.png");
acb0e9b8 2746}
2747
319c6529
RK
2748#editBookmarkPanelTitle {
2749 font-size: 130%;
acb0e9b8 2750}
319c6529
RK
2751
2752#editBookmarkPanelHeader,
2753#editBookmarkPanelContent {
2754 margin-bottom: .5em;
acb0e9b8 2755}
319c6529
RK
2756
2757/* Implements editBookmarkPanel resizing on folderTree un-collapse. */
2758#editBMPanel_folderTree {
2759 min-width: 27em;
acb0e9b8 2760}
2761
f993773d 2762.panel-promo-box {
46e71434
RK
2763 margin: 5px 0 -6px;
2764 padding: 5px 0;
889649fd 2765 border-top: 1px solid #9C9CFF;
f0eab82c
RK
2766 border-bottom-left-radius: 5px;
2767 border-bottom-right-radius: 5px;
f993773d
RK
2768}
2769
2770.panel-promo-icon {
2771 list-style-image: url("chrome://browser/skin/sync-notification-24.png");
2772 -moz-margin-end: 10px;
2773 vertical-align: middle;
2774}
2775
2776.panel-promo-closebutton {
2777 list-style-image: url("chrome://global/skin/icons/close-button.gif");
f0eab82c
RK
2778 -moz-margin-end: -3px;
2779 margin-top: -3px;
f993773d
RK
2780}
2781
2782.panel-promo-closebutton:hover {
2783 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2784}
2785
2786.panel-promo-closebutton:hover:active {
2787 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2788}
2789
2790.panel-promo-closebutton > .toolbarbutton-text {
2791 padding: 0;
f993773d
RK
2792}
2793
319c6529
RK
2794/* ::::: content area ::::: */
2795
bcb9d005
RK
2796#sidebar-box {
2797 background-color: #9C9CFF;
2798 color: #000000;
2799}
2800
319c6529 2801#sidebar {
bcb9d005
RK
2802 background-color: #000000;
2803}
2804
2805#sidebar-splitter {
2806 -moz-margin-start: 0;
2807}
2808
2809#sidebar-header {
2810 color: #000000;
2811 padding: 2px;
acb0e9b8 2812}
319c6529
RK
2813
2814#sidebar-title {
2815 -moz-padding-start: 0px;
acb0e9b8 2816}
319c6529 2817
589b5528
RK
2818#sidebar-header > .close-icon {
2819/* padding: 4px 2px;
2820 margin: 0;
2821 border: none;*/
2822 list-style-image: url("chrome://global/skin/icons/close-button.gif");
2823}
2824
2825#sidebar-header > .close-icon:hover,
2826#sidebar-header > .close-icon:hover:active {
2827 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2828}
2829
bcb9d005
RK
2830#sidebar-splitter:-moz-locale-dir(ltr),
2831#sidebar:-moz-locale-dir(ltr) {
2832 border-radius: 0 5px 0 0;
2833}
2834
2835#sidebar-splitter:-moz-locale-dir(rtl),
2836#sidebar:-moz-locale-dir(rtl) {
2837 border-radius: 5px 0 0 0;
2838}
2839
fe524e0c
RK
2840.browserContainer > findbar {
2841/*
2842 background-color: -moz-dialog;
2843 color: -moz-DialogText;
2844*/
2845}
2846
319c6529 2847/* Tabstrip */
b36fc72e 2848
c0f6797e 2849#TabsToolbar {
e20c83c3
RK
2850 min-height: 0;
2851 padding: 0;
2852 -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar");
2853}
2854
b36fc72e 2855#TabsToolbar .toolbar-holder {
c1f7cc84 2856 background-color: #000000; /* correct effect of being an actual toolbar */
acb0e9b8 2857}
2858
b36fc72e 2859#main-window[disablechrome] #TabsToolbar,
319c6529 2860#TabsToolbar[tabsontop="false"] {
8b5fc82e 2861 border-bottom: 1px solid #008484;
acb0e9b8 2862}
319c6529 2863
6dc70335
RK
2864/* === BEGIN tabs.inc.css === */
2865
368d0b7f
RK
2866:root {
2867 /* --tab-toolbar-navbar-overlap: 1px; */
024a65e9 2868 /* --navbar-tab-toolbar-highlight-overlap: 1px; */
368d0b7f 2869 /* --tab-min-height: 31px; */
024a65e9
RK
2870}
2871#TabsToolbar {
2872 /* --tab-stroke-background-size: auto 100%; */
368d0b7f
RK
2873}
2874
319c6529 2875.tabbrowser-tab,
43ee1307
RK
2876.tabs-newtab-button,
2877#TabsToolbar > #new-tab-button {
319c6529 2878 margin-top: 0px;
acb0e9b8 2879}
319c6529 2880
43ee1307 2881.tabbrowser-tab {
57fc408c
RK
2882 padding: 1px 4px 2px;
2883}
2884
2885.tabbrowser-tab:first-of-type {
2886 -moz-margin-start: 2px;
2887}
2888
43ee1307
RK
2889.tabs-newtab-button,
2890#TabsToolbar > #new-tab-button {
57fc408c
RK
2891 border-radius: 8px 8px 0px 0px;
2892 -moz-margin-start: 0;
2893}
2894
43ee1307
RK
2895.tabs-newtab-button:not(:hover),
2896#TabsToolbar > #new-tab-button:not(:hover) {
57fc408c
RK
2897 background-color: #C09070;
2898}
2899
c0f6797e 2900/* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */
05148fed 2901.tabbrowser-tab[visuallyselected=true] {
c0f6797e
RK
2902/* position: relative;
2903 z-index: 2;*/
acb0e9b8 2904}
2905
c0f6797e 2906.tab-background-middle {
acb0e9b8 2907}
2908
c0f6797e 2909.tab-content {
acb0e9b8 2910}
319c6529 2911
d533ec21
RK
2912.tab-content[pinned] {
2913}
2914
2915.tab-throbber,
c0f6797e 2916.tab-icon-image,
b1dfcf32 2917.tab-icon-sound,
c0f6797e 2918.tab-close-button {
acb0e9b8 2919}
2920
319c6529
RK
2921.tab-throbber,
2922.tab-icon-image {
319c6529 2923 height: 16px;
c0f6797e 2924 width: 16px;
d533ec21 2925 -moz-margin-end: 3px;
c0f6797e
RK
2926}
2927
2928.tab-icon-image {
dce90fef 2929 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
613daf44 2930}
2931
d533ec21
RK
2932.tab-icon-overlay {
2933 width: 16px;
2934 height: 16px;
b1dfcf32 2935 /* margin-top: -12px; */
d533ec21 2936 -moz-margin-start: -16px;
b1dfcf32 2937 position: relative;
d533ec21
RK
2938}
2939
2940.tab-icon-overlay[crashed] {
d533ec21
RK
2941 list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg");
2942}
2943
024a65e9
RK
2944.tab-icon-overlay[soundplaying],
2945.tab-icon-overlay[muted]:not([crashed]) {
b1dfcf32
RK
2946 border-radius: 8px;
2947}
2948
024a65e9
RK
2949.tab-icon-overlay[soundplaying]:hover,
2950.tab-icon-overlay[muted]:hover {
b1dfcf32
RK
2951 background-color: #FFCF00;
2952}
2953
024a65e9 2954.tab-icon-overlay[soundplaying] {
b1dfcf32
RK
2955 display: -moz-box;
2956 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio");
2957}
2958
024a65e9 2959.tab-icon-overlay[muted]:not([crashed]) {
b1dfcf32
RK
2960 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted");
2961}
2962
024a65e9
RK
2963#TabsToolbar[brighttext] .tab-icon-overlay[soundplaying]:not(:hover) {
2964 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white");
b1dfcf32
RK
2965}
2966
b1dfcf32 2967
024a65e9
RK
2968#TabsToolbar[brighttext] .tab-icon-overlay[muted]:not([crashed]):not(:hover) {
2969 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-muted");
b1dfcf32
RK
2970}
2971
3d64e0ce 2972.tab-throbber[busy] {
95f333af 2973 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim-connect.png");
613daf44 2974}
319c6529
RK
2975
2976.tab-throbber[progress] {
95f333af 2977 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim.png");
613daf44 2978}
319c6529 2979
319c6529
RK
2980.tab-throbber[pinned],
2981.tab-icon-image[pinned] {
2982 -moz-margin-start: 2px;
2983 -moz-margin-end: 2px;
613daf44 2984}
319c6529 2985
c0f6797e 2986.tab-label {
aec5dfad
RK
2987 /* this needs to add up to the 16px of the icon image */
2988 height: 12px;
2989 margin-top: 2px !important;
2990 margin-bottom: 2px !important;
c0f6797e
RK
2991}
2992
b1dfcf32
RK
2993.tab-icon-sound {
2994 -moz-margin-start: 4px;
2995 width: 16px;
2996 height: 16px;
2997 padding: 0;
2998}
2999
b1dfcf32
RK
3000.tab-icon-sound[muted] {
3001 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted");
3002}
3003
3004.tab-icon-sound[muted]:hover {
3005 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-hover");
3006}
3007
3008.tab-icon-sound[muted]:hover:active {
3009 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-pressed");
3010}
3011
3012.tab-icon-sound[soundplaying] {
024a65e9 3013 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab");
b1dfcf32
RK
3014}
3015
3016.tab-icon-sound[soundplaying]:hover {
024a65e9 3017 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-hover");
b1dfcf32
RK
3018}
3019
3020.tab-icon-sound[soundplaying]:hover:active {
024a65e9
RK
3021 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-pressed");
3022}
3023
3024.tab-icon-sound[muted] {
3025 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted");
3026}
3027
3028.tab-icon-sound[muted]:hover {
3029 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted-hover");
3030}
3031
3032.tab-icon-sound[muted]:hover:active {
3033 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted-pressed");
3034}
3035
3036.tab-icon-sound[visuallyselected=true][soundplaying] {
3037 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio");
3038}
3039
3040.tab-icon-sound[visuallyselected=true][soundplaying]:hover {
3041 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-hover");
3042}
3043
3044.tab-icon-sound[visuallyselected=true][soundplaying]:hover:active {
b1dfcf32
RK
3045 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-pressed");
3046}
3047
024a65e9
RK
3048.tab-icon-sound[visuallyselected=true][muted] {
3049 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted");
3050}
3051
3052.tab-icon-sound[visuallyselected=true][muted]:hover {
3053 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-hover");
3054}
3055
3056.tab-icon-sound[visuallyselected=true][muted]:hover:active {
3057 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-pressed");
3058}
3059
b1dfcf32 3060#TabsToolbar[brighttext] .tab-icon-sound[soundplaying] {
024a65e9 3061 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white");
b1dfcf32
RK
3062}
3063
3064#TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover {
024a65e9 3065 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white-hover");
b1dfcf32
RK
3066}
3067
3068#TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover:active {
024a65e9 3069 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white-pressed");
b1dfcf32
RK
3070}
3071
3072#TabsToolbar[brighttext] .tab-icon-sound[muted] {
024a65e9 3073 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white");
b1dfcf32
RK
3074}
3075
3076#TabsToolbar[brighttext] .tab-icon-sound[muted]:hover {
024a65e9 3077 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white-hover");
b1dfcf32
RK
3078}
3079
3080#TabsToolbar[brighttext] .tab-icon-sound[muted]:hover:active {
024a65e9 3081 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white-pressed");
b1dfcf32
RK
3082}
3083
c0f6797e
RK
3084.tab-close-button {
3085 margin-top: 1px;
3086 padding: 0;
3087}
3088
3089.tab-background,
3090.tabs-newtab-button {
3091 /* overlap the tab curves */
3092}
3093
3094.tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
3095}
3096
93c91f62
RK
3097/* Tab Overflow */
3098.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]),
3099.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
3100}
3101
3102.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:-moz-locale-dir(rtl),
3103.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:-moz-locale-dir(ltr) {
3104}
3105
3106.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]) {
3107}
3108
3109.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
3110}
3111
3112.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator[collapsed],
3113.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator[collapsed] {
3114}
3115
3116.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator,
3117.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator {
3118}
3119
05148fed
RK
3120.tab-background-start[visuallyselected=true]::after,
3121.tab-background-start[visuallyselected=true]::before,
c0f6797e
RK
3122.tab-background-start,
3123.tab-background-end,
05148fed
RK
3124.tab-background-end[visuallyselected=true]::after,
3125.tab-background-end[visuallyselected=true]::before {
c0f6797e
RK
3126}
3127
05148fed 3128.tabbrowser-tab:not([visuallyselected=true]),
c0f6797e
RK
3129.tabbrowser-tab:-moz-lwtheme {
3130}
3131
319c6529 3132/* tabbrowser-tab focus ring */
c0f6797e 3133.tabbrowser-tab:focus {
319c6529 3134 outline: 1px dotted;
613daf44 3135}
319c6529 3136
c0f6797e
RK
3137/* Selected tab */
3138
05148fed 3139.tabbrowser-tab[visuallyselected="true"] {
c0f6797e
RK
3140}
3141
3142/* End selected tab */
3143
c0f6797e
RK
3144/* Tab pointer-events */
3145/*
3146.tabbrowser-tab {
3147 pointer-events: none;
3148}
3149
3150.tab-background-middle,
3151.tabs-newtab-button,
b1dfcf32
RK
3152.tab-icon-overlay[soundplaying],
3153.tab-icon-overlay[muted]:not([crashed]),
3154.tab-icon-sound,
c0f6797e
RK
3155.tab-close-button {
3156 pointer-events: auto;
3157}
3158*/
3159/* Pinned tabs */
3160
3161.tabbrowser-tab[pinned][titlechanged]:not([selected="true"]) {
3162 background-color: #E7ADE7;
3163}
3164
3165.tabbrowser-tab[pinned][titlechanged]:not([selected="true"]):hover {
3166 background-color: #3333FF;
3167 color: #000000;
3168}
3169
024a65e9
RK
3170/* Tab separators */
3171/*
3172.tabbrowser-tab::after,
3173.tabbrowser-tab::before {
3174 width: 1px;
3175 -moz-margin-start: -1px;
3176 background-image: linear-gradient(transparent 5px,
3177 currentColor 5px,
3178 currentColor calc(100% - 4px),
3179 transparent calc(100% - 4px));
3180 opacity: 0.2;
3181}
3182
3183#TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::before,
3184#TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::after {
3185 opacity: 0.4;
3186}
3187*/
3188/* Also show separators beside the selected tab when dragging it. */
3189/*
3190#tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
3191.tabbrowser-tab:not([visuallyselected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
3192#tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([visuallyselected]):not([beforehovered]):not(:hover)::after {
3193 content: "";
3194 display: -moz-box;
3195}
3196*/
c0f6797e
RK
3197/* New tab button */
3198
3199.tabs-newtab-button {
3200 width: 28px;
d533ec21 3201 /* width: calc(36px + var(--tab-curve-width)); */
c0f6797e
RK
3202}
3203
3204/* === END tabs.inc.css === */
3205
43371c9b
RK
3206/* Background tabs:
3207 *
3208 * Decrease the height of the hoverable region of background tabs whenever the tabs are at the top
3209 * of the window (e.g. no menubar, tabs in titlebar, etc.) to make it easier to drag the window by
3210 * the titlebar. We don't need this in fullscreen since window dragging is not an issue there.
3211 */
05148fed 3212#main-window[tabsintitlebar][sizemode=normal] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar .tab-background-middle:not([visuallyselected=true]) {
43371c9b
RK
3213/* clip-path: url(chrome://browser/content/browser.xul#tab-hover-clip-path);*/
3214}
3215
8ad8bf83 3216/* Tab DnD indicator */
319c6529
RK
3217.tab-drop-indicator {
3218 list-style-image: url("chrome://browser/skin/tabbrowser/tabDragIndicator.png");
9abeb12c 3219 margin-bottom: -11px;
613daf44 3220}
3221
319c6529
RK
3222/* Tab close button */
3223.tab-close-button {
319c6529
RK
3224 list-style-image: url("chrome://global/skin/icons/close-button.gif");
3225}
acb0e9b8 3226
319c6529
RK
3227.tab-close-button:hover,
3228.tab-close-button:hover[selected="true"] {
3229 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
acb0e9b8 3230}
319c6529
RK
3231
3232.tab-close-button:hover:active,
3233.tab-close-button:hover:active[selected="true"] {
3234 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
acb0e9b8 3235}
319c6529 3236
319c6529
RK
3237/* Tab scrollbox arrow, tabstrip new tab and all-tabs buttons */
3238
319c6529
RK
3239.tabbrowser-arrowscrollbox > .scrollbutton-up,
3240.tabbrowser-arrowscrollbox > .scrollbutton-down {
319c6529
RK
3241 margin: 0;
3242 padding-top: 0;
3243 padding-bottom: 0;
c0f6797e
RK
3244 background-origin: border-box;
3245}
3246
3247#main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3248#main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3249.tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-lwtheme-brighttext,
3250.tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-lwtheme-brighttext {
3251 }
b7f3670c 3252
c0f6797e
RK
3253.tabbrowser-arrowscrollbox > .scrollbutton-up[disabled],
3254.tabbrowser-arrowscrollbox > .scrollbutton-down[disabled] {
3255 }
3256
3257.tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(rtl),
3258.tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(ltr) {
3259/* transform: scaleX(-1);*/
3260}
3261
3262.tabbrowser-arrowscrollbox > .scrollbutton-down {
3263 transition: 1s background-color ease-out;
acb0e9b8 3264}
319c6529 3265
319c6529
RK
3266.tabbrowser-arrowscrollbox > .scrollbutton-down[notifybgtab] {
3267 background-color: #008484;
acb0e9b8 3268}
319c6529 3269
c0f6797e
RK
3270.tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]),
3271.tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]) {
3272/* border-width: 0 2px 0 0;
3273 border-style: solid;
3274 border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 fill;*/
3275}
3276
319c6529
RK
3277.tabs-newtab-button > .toolbarbutton-icon {
3278 margin-top: -1px;
3279 margin-bottom: -1px;
acb0e9b8 3280}
319c6529
RK
3281
3282.tabs-newtab-button,
3283#TabsToolbar > #new-tab-button,
e20c83c3
RK
3284#TabsToolbar > toolbarpaletteitem > #new-tab-button,
3285#TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
832af407 3286 list-style-image: url("chrome://browser/skin/tabbrowser/newtabFx.png");
319c6529 3287 -moz-image-region: rect(0, 16px, 18px, 0);
acb0e9b8 3288}
3289
8b5fc82e 3290.tabs-newtab-button,
38cfeb47 3291.tabs-newtab-button:hover,
c0f6797e 3292#TabsToolbar > #new-tab-button,
38cfeb47 3293#TabsToolbar > #new-tab-button:hover {
319c6529 3294 -moz-image-region: rect(0, 32px, 18px, 16px);
acb0e9b8 3295}
319c6529 3296
c0f6797e
RK
3297#main-window[tabsintitlebar]:not([inFullscreen]) .tabs-newtab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3298#main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3299#main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3300.tabs-newtab-button:-moz-lwtheme-brighttext,
3301#TabsToolbar > #new-tab-button:-moz-lwtheme-brighttext,
3302#TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-lwtheme-brighttext {
acb0e9b8 3303}
3304
c0f6797e
RK
3305#TabsToolbar > #new-tab-button {
3306 width: 26px;
3307}
3308
3309#alltabs-button {
3310 list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
acb0e9b8 3311}
319c6529 3312
f9fc08c7
RK
3313#alltabs-button:hover,
3314#alltabs-button:hover:active,
3315#alltabs-button[open="true"] {
8da9da4e 3316 list-style-image: url("chrome://global/skin/arrow/arrow-down-hover.gif");
acb0e9b8 3317}
319c6529 3318
c0f6797e
RK
3319#main-window[tabsintitlebar]:not([inFullscreen]) #alltabs-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3320#alltabs-button:-moz-lwtheme-brighttext {
3321}
3322
3323#alltabs-button > .toolbarbutton-icon {
3324/* margin: 0 2px;*/
3325}
3326
3327#alltabs-button > .toolbarbutton-menu-dropmarker {
3328 display: none;
3329}
3330
319c6529
RK
3331/* All tabs menupopup */
3332.alltabs-item > .menu-iconic-left > .menu-iconic-icon {
dce90fef 3333 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
8da9da4e 3334 -moz-image-region: auto;
acb0e9b8 3335}
3336
319c6529
RK
3337.alltabs-item[selected="true"] {
3338 font-weight: bold;
acb0e9b8 3339}
319c6529
RK
3340
3341.alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
3342 list-style-image: url("chrome://global/skin/icons/loading.gif");
acb0e9b8 3343}
319c6529 3344
85cfb236 3345.alltabs-item[tabIsVisible]:not([_moz-menuactive="true"]) {
b1234db8
RK
3346 background-color: #402800;
3347}
3348
319c6529
RK
3349toolbarbutton.chevron {
3350 list-style-image: url("chrome://global/skin/toolbar/chevron.gif") !important;
acb0e9b8 3351}
319c6529
RK
3352
3353toolbarbutton.chevron:hover {
3354 list-style-image: url("chrome://global/skin/toolbar/chevron-hover.gif") !important;
acb0e9b8 3355}
e548e22e
RK
3356/*
3357toolbar[brighttext] toolbarbutton.chevron {
3358 list-style-image: url("chrome://global/skin/toolbar/chevron-inverted.png") !important;
3359}
3360*/
319c6529
RK
3361toolbarbutton.chevron:-moz-locale-dir(rtl) > .toolbarbutton-icon,
3362toolbarbutton.chevron:-moz-locale-dir(rtl):hover > .toolbarbutton-icon {
71a617ff 3363 transform: scaleX(-1);
acb0e9b8 3364}
319c6529
RK
3365
3366toolbarbutton.chevron > .toolbarbutton-text,
3367toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
3368 display: none;
acb0e9b8 3369}
319c6529
RK
3370
3371toolbarbutton.chevron > .toolbarbutton-icon {
3372 margin: 0;
acb0e9b8 3373}
3374
319c6529
RK
3375#sidebar-throbber[loading="true"] {
3376 list-style-image: url("chrome://global/skin/icons/loading.gif");
3377 -moz-margin-end: 4px;
acb0e9b8 3378}
319c6529
RK
3379
3380/* Bookmarks toolbar */
3381#PlacesToolbarDropIndicator {
8da9da4e 3382 list-style-image: url("chrome://communicator/skin/bookmarks/toolbarDropMarker.png");
acb0e9b8 3383}
3384
319c6529
RK
3385toolbarbutton.bookmark-item[dragover="true"][open="true"] {
3386 background-color: #008484 !important;
3387 color: #FFCF00 !important;
613daf44 3388}
319c6529
RK
3389
3390/* rules for menupopup drop indicators */
3391.menupopup-drop-indicator-bar {
3392 position: relative;
3393 /* these two margins must together compensate the indicator's height */
3394 margin-top: -1px;
3395 margin-bottom: -1px;
613daf44 3396}
319c6529
RK
3397
3398.menupopup-drop-indicator {
3399 list-style-image: none;
3400 height: 2px;
3401 -moz-margin-end: -4em;
3402 background-color: #008484;
613daf44 3403}
3404
a5cb6e53
RK
3405/* === BEGIN notification-icons.inc.css === */
3406
319c6529
RK
3407.popup-notification-icon {
3408 width: 64px;
3409 height: 64px;
3410 -moz-margin-end: 10px;
3411}
acb0e9b8 3412
319c6529
RK
3413.popup-notification-icon[popupid="geolocation"] {
3414 list-style-image: url("chrome://browser/skin/Geolocation-64.png");
acb0e9b8 3415}
3416
a5cb6e53
RK
3417.popup-notification-icon[popupid="push"] {
3418 list-style-image: url(chrome://browser/skin/Push-64.png);
3419}
3420
319c6529 3421.popup-notification-icon[popupid="xpinstall-disabled"],
c9b0a396
RK
3422.popup-notification-icon[popupid="addon-install-blocked"],
3423.popup-notification-icon[popupid="addon-install-origin-blocked"] {
7c0a01f2
RK
3424 list-style-image: url(chrome://browser/skin/addons/addon-install-blocked.svg);
3425}
3426
3427.popup-notification-icon[popupid="addon-progress"] {
3428 list-style-image: url(chrome://browser/skin/addons/addon-install-downloading.svg);
3429}
3430
3431.popup-notification-icon[popupid="addon-install-failed"] {
3432 list-style-image: url(chrome://browser/skin/addons/addon-install-error.svg);
3433}
3434
3435.popup-notification-icon[popupid="addon-install-confirmation"] {
3436 list-style-image: url(chrome://browser/skin/addons/addon-install-confirm.svg);
3437}
3438
3439#addon-install-confirmation-notification[warning] .popup-notification-icon[popupid="addon-install-confirmation"] {
3440 list-style-image: url(chrome://browser/skin/addons/addon-install-warning.svg);
3441}
3442
a40f6a79 3443.popup-notification-icon[popupid="addon-install-complete"] {
7c0a01f2
RK
3444 list-style-image: url(chrome://browser/skin/addons/addon-install-installed.svg);
3445}
3446
3447.popup-notification-icon[popupid="addon-install-restart"] {
3448 list-style-image: url(chrome://browser/skin/addons/addon-install-restart.svg);
acb0e9b8 3449}
319c6529 3450
a40f6a79 3451.popup-notification-icon[popupid="click-to-play-plugins"] {
fcfb76ce 3452 list-style-image: url("chrome://mozapps/skin/plugins/pluginBlocked-64.png");
a40f6a79
RK
3453}
3454
82b4252f
RK
3455.popup-notification-icon[popupid="web-notifications"] {
3456 list-style-image: url("chrome://browser/skin/notification-64.png");
3457}
3458
319c6529 3459.popup-notification-icon[popupid="indexedDB-permissions-prompt"],
e2734cc7
RK
3460.popup-notification-icon[popupid*="offline-app-requested"],
3461.popup-notification-icon[popupid="offline-app-usage"] {
319c6529 3462 list-style-image: url("chrome://global/skin/icons/alert-question.gif");
acb0e9b8 3463}
3464
05148fed 3465.popup-notification-icon[popupid="password"] {
319c6529 3466 list-style-image: url("chrome://mozapps/skin/passwordmgr/key-64.png");
acb0e9b8 3467}
3468
1b13529a 3469.popup-notification-icon[popupid="webapps-install-progress"],
8d7ef0d9 3470.popup-notification-icon[popupid="webapps-install"] {
87a1144f 3471 list-style-image: url("chrome://global/skin/icons/webapps-64.png");
8d7ef0d9
RK
3472}
3473
0142a07b 3474.popup-notification-icon[popupid="webRTC-sharingDevices"],
7bc075b6
RK
3475.popup-notification-icon[popupid="webRTC-shareDevices"] {
3476 list-style-image: url("chrome://browser/skin/webRTC-shareDevice-64.png");
3477}
3478
c1d2ce3e
RK
3479.popup-notification-icon[popupid="webRTC-sharingMicrophone"],
3480.popup-notification-icon[popupid="webRTC-shareMicrophone"] {
3481 list-style-image: url("chrome://browser/skin/webRTC-shareMicrophone-64.png");
3482}
3483
9168a62c
RK
3484.popup-notification-icon[popupid="webRTC-sharingScreen"],
3485.popup-notification-icon[popupid="webRTC-shareScreen"] {
3486 list-style-image: url(chrome://browser/skin/webRTC-shareScreen-64.png);
3487}
3488
82b4252f
RK
3489.popup-notification-icon[popupid="pointerLock"] {
3490 list-style-image: url("chrome://browser/skin/pointerLock-64.png");
3491}
3492
319c6529 3493/* Notification icon box */
cae267ab
RK
3494#notification-popup .panel-promo-box {
3495/* margin: 10px -10px -10px; */
3496}
3497
319c6529 3498#notification-popup-box {
f993773d
RK
3499 position: relative;
3500 background-color: #000000;
3501 background-clip: padding-box;
3502 padding-left: 3px;
5517da5a 3503 padding-right: 8px;
f0eab82c 3504 border-radius: 3px 0 0 3px;
82b4252f 3505 border-image: url("chrome://browser/skin/urlbar-arrow.png") 0 8 0 0 / 0 8px 0 0;
f993773d 3506 -moz-margin-end: -8px;
5517da5a 3507 border-right-width: 8px;
f993773d
RK
3508}
3509
589b5528
RK
3510window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] + #urlbar > #notification-popup-box {
3511/* padding-left: 7px; */
f993773d
RK
3512}
3513
e9fbfc3a 3514/* This changes the direction of the main notification box on the url bar. */
f993773d 3515#notification-popup-box:-moz-locale-dir(rtl),
e9fbfc3a
RK
3516/* This adds a second flip for the notification anchors, as they don't switch direction
3517 for RTL mode. */
f993773d 3518.notification-anchor-icon:-moz-locale-dir(rtl) {
71a617ff 3519 transform: scaleX(-1);
319c6529 3520}
acb0e9b8 3521
e9fbfc3a
RK
3522/* For the anchor icons in the chat window, we don't have the notification popup box,
3523 so we need to cancel the RTL transform. */
3524.notification-anchor-icon.chat-toolbarbutton:-moz-locale-dir(rtl) {
3525 transform: none;
3526}
3527
319c6529 3528.notification-anchor-icon {
c9b0a396
RK
3529 list-style-image: url("chrome://global/skin/icons/information-16.png");
3530
acb0e9b8 3531 width: 16px;
3532 height: 16px;
85cfb236 3533 margin: 0 2px;
acb0e9b8 3534}
3535
319c6529 3536.notification-anchor-icon:-moz-focusring {
f0eab82c 3537 outline: 1px dotted #008484;
acb0e9b8 3538}
3539
e2734cc7 3540.identity-notification-icon,
9585a561
RK
3541#identity-notification-icon {
3542 list-style-image: url("chrome://mozapps/skin/profile/profileicon.png");
3543}
3544
e2734cc7 3545.geo-notification-icon,
319c6529
RK
3546#geo-notification-icon {
3547 list-style-image: url("chrome://browser/skin/Geolocation-16.png");
acb0e9b8 3548}
3549
a5cb6e53
RK
3550#push-notification-icon {
3551 list-style-image: url(chrome://browser/skin/Push-16.png);
3552}
3553
319c6529 3554#addons-notification-icon {
7c0a01f2
RK
3555 list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#default);
3556}
3557
3558#addons-notification-icon:hover {
3559 list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#hover);
3560}
3561
3562#addons-notification-icon:hover:active {
3563 list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#active);
acb0e9b8 3564}
3565
e2734cc7 3566.indexedDB-notification-icon,
319c6529
RK
3567#indexedDB-notification-icon {
3568 list-style-image: url("chrome://global/skin/icons/question-16.png");
acb0e9b8 3569}
3570
319c6529
RK
3571#password-notification-icon {
3572 list-style-image: url("chrome://mozapps/skin/passwordmgr/key-16.png");
acb0e9b8 3573}
3574
7c0a01f2
RK
3575#login-fill-notification-icon {
3576 /* Temporary icon until the capture and fill doorhangers are unified. */
3577 list-style-image: url(chrome://mozapps/skin/passwordmgr/key-16.png);
3578 transform: scaleX(-1);
3579}
3580
8d7ef0d9 3581#webapps-notification-icon {
87a1144f 3582 list-style-image: url("chrome://gobal/skin/icons/webapps-16.png");
8d7ef0d9
RK
3583}
3584
a40f6a79 3585#plugins-notification-icon {
b27cc46e
RK
3586 list-style-image: url("chrome://browser/skin/notification-pluginNormal.png");
3587}
3588
f76c6aee 3589#plugins-notification-icon.plugin-hidden {
b27cc46e 3590 list-style-image: url("chrome://browser/skin/notification-pluginAlert.png");
a40f6a79
RK
3591}
3592
f76c6aee 3593#plugins-notification-icon.plugin-blocked {
b27cc46e 3594 list-style-image: url("chrome://browser/skin/notification-pluginBlocked.png");
990cba4b
RK
3595}
3596
f76c6aee 3597#plugins-notification-icon {
fe524e0c
RK
3598/* -moz-image-region: rect(0, 16px, 16px, 0);*/
3599}
3600
f76c6aee 3601#plugins-notification-icon:hover {
fe524e0c
RK
3602/* -moz-image-region: rect(0, 32px, 16px, 16px);*/
3603}
3604
6adbc9a6
RK
3605#notification-popup-box[hidden] {
3606 /* Override display:none to make the pluginBlockedNotification animation work
3607 when showing the notification repeatedly. */
3608 display: -moz-box;
3609 visibility: collapse;
3610}
3611
f76c6aee 3612#plugins-notification-icon.plugin-blocked[showing] {
990cba4b
RK
3613 animation: pluginBlockedNotification 500ms ease 0s 5 alternate both;
3614}
3615
3616@keyframes pluginBlockedNotification {
3617 from {
3618 opacity: 0;
3619 }
3620 to {
3621 opacity: 1;
3622 }
3623}
3624
e2734cc7 3625.webRTC-shareDevices-notification-icon,
0142a07b 3626#webRTC-shareDevices-notification-icon {
7bc075b6
RK
3627 list-style-image: url("chrome://browser/skin/webRTC-shareDevice-16.png");
3628}
3629
e2734cc7 3630.webRTC-sharingDevices-notification-icon,
6adbc9a6
RK
3631#webRTC-sharingDevices-notification-icon {
3632 list-style-image: url("chrome://browser/skin/webRTC-sharingDevice-16.png");
3633}
3634
c1d2ce3e
RK
3635.webRTC-shareMicrophone-notification-icon,
3636#webRTC-shareMicrophone-notification-icon {
3637 list-style-image: url("chrome://browser/skin/webRTC-shareMicrophone-16.png");
3638}
3639
3640.webRTC-sharingMicrophone-notification-icon,
3641#webRTC-sharingMicrophone-notification-icon {
3642 list-style-image: url("chrome://browser/skin/webRTC-sharingMicrophone-16.png");
3643}
3644
9168a62c
RK
3645.webRTC-shareScreen-notification-icon,
3646#webRTC-shareScreen-notification-icon {
3647 list-style-image: url(chrome://browser/skin/webRTC-shareScreen-16.png);
3648}
3649
3650.webRTC-sharingScreen-notification-icon,
3651#webRTC-sharingScreen-notification-icon {
3652 list-style-image: url(chrome://browser/skin/webRTC-sharingScreen-16.png);
3653}
3654
e2734cc7 3655.web-notifications-notification-icon,
82b4252f
RK
3656#web-notifications-notification-icon {
3657 list-style-image: url("chrome://browser/skin/notification-16.png");
3658}
3659
3660#pointerLock-notification-icon {
3661 list-style-image: url("chrome://browser/skin/pointerLock-16.png");
3662}
82b4252f 3663
a5cb6e53
RK
3664.translate-notification-icon,
3665#translate-notification-icon {
3666 list-style-image: url("chrome://browser/skin/translation-16.png");
3667 -moz-image-region: rect(0px, 16px, 16px, 0px);
3668}
3669
3670.translated-notification-icon,
3671#translated-notification-icon {
3672 list-style-image: url("chrome://browser/skin/translation-16.png");
3673 -moz-image-region: rect(0px, 32px, 16px, 16px);
3674}
3675
3676.popup-notification-icon[popupid="servicesInstall"] {
3677 list-style-image: url("chrome://browser/skin/social/services-64.png");
3678}
3679#servicesInstall-notification-icon {
3680 list-style-image: url("chrome://browser/skin/social/services-16.png");
3681}
3682
3683/* EME notifications */
3684
3685.popup-notification-icon[popupid="drmContentPlaying"],
3686#eme-notification-icon {
3687 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
3688}
3689
3690#eme-notification-icon:hover:active {
3691 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains-pressed");
3692}
3693
3694#eme-notification-icon[firstplay=true] {
3695 animation: emeTeachingMoment 0.2s linear 0s 5 normal;
3696}
3697
3698@keyframes emeTeachingMoment {
3699 0% {transform: translateX(0); }
3700 25% {transform: translateX(3px) }
3701 75% {transform: translateX(-3px) }
3702 100% { transform: translateX(0); }
3703}
3704
2e389898
RK
3705/* HiDPI notification icons */
3706@media (min-resolution: 1.1dppx) {
3707/* #notification-popup-box {
3708 border-image: url("chrome://browser/skin/urlbar-arrow@2x.png") 0 16 0 0 fill;
3709 }
3710*/
3711 .notification-anchor-icon {
3712 list-style-image: url(chrome://global/skin/icons/information-32.png);
3713 }
3714
3715 .webRTC-shareDevices-notification-icon,
3716 #webRTC-shareDevices-notification-icon {
3717 list-style-image: url(chrome://browser/skin/webRTC-shareDevice-16@2x.png);
3718 }
3719
3720 .webRTC-sharingDevices-notification-icon,
3721 #webRTC-sharingDevices-notification-icon {
3722 list-style-image: url(chrome://browser/skin/webRTC-sharingDevice-16@2x.png);
3723 }
3724
3725 .webRTC-shareMicrophone-notification-icon,
3726 #webRTC-shareMicrophone-notification-icon {
3727 list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-16@2x.png);
3728 }
3729
3730 .webRTC-sharingMicrophone-notification-icon,
3731 #webRTC-sharingMicrophone-notification-icon {
3732 list-style-image: url(chrome://browser/skin/webRTC-sharingMicrophone-16@2x.png);
3733 }
3734
3735 .webRTC-shareScreen-notification-icon,
3736 #webRTC-shareScreen-notification-icon {
3737 list-style-image: url(chrome://browser/skin/webRTC-shareScreen-16@2x.png);
3738 }
3739
3740 .webRTC-sharingScreen-notification-icon,
3741 #webRTC-sharingScreen-notification-icon {
3742 list-style-image: url(chrome://browser/skin/webRTC-sharingScreen-16@2x.png);
3743 }
3744
3745 .popup-notification-icon[popupid="webRTC-sharingDevices"],
3746 .popup-notification-icon[popupid="webRTC-shareDevices"] {
3747 list-style-image: url(chrome://browser/skin/webRTC-shareDevice-64@2x.png);
3748 }
3749
3750 .popup-notification-icon[popupid="webRTC-sharingMicrophone"],
3751 .popup-notification-icon[popupid="webRTC-shareMicrophone"] {
3752 list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-64@2x.png);
3753 }
3754
3755 .popup-notification-icon[popupid="webRTC-sharingScreen"],
3756 .popup-notification-icon[popupid="webRTC-shareScreen"] {
3757 list-style-image: url(chrome://browser/skin/webRTC-shareScreen-64@2x.png);
3758 }
3759}
3760
a5cb6e53
RK
3761/* === END notification-icons.inc.css === */
3762
936e60fe
RK
3763.popup-notification-body[popupid="addon-progress"],
3764.popup-notification-body[popupid="addon-install-confirmation"] {
3765 width: 28em;
3766 max-width: 28em;
3767}
3768
ed88669c
RK
3769/* Translation infobar */
3770
3771/* === BEGIN infobar.inc.css === */
3772
3773notification[value="translation"] .messageImage {
93c91f62 3774 list-style-image: url("chrome://browser/skin/translation-16.png");
ed88669c
RK
3775 -moz-image-region: rect(0, 32px, 16px, 16px);
3776}
3777
3778@media (min-resolution: 1.25dppx) {
3779 notification[value="translation"] .messageImage {
93c91f62 3780 list-style-image: url("chrome://browser/skin/translation-16@2x.png");
ed88669c
RK
3781 -moz-image-region: rect(0, 64px, 32px, 32px);
3782 }
3783}
3784
93c91f62
RK
3785notification[value="translation"][state="translating"] .messageImage {
3786 list-style-image: url("chrome://browser/skin/translating-16.png");
3787 -moz-image-region: auto;
3788}
3789
3790@media (min-resolution: 1.25dppx) {
3791 notification[value="translation"][state="translating"] .messageImage {
3792 list-style-image: url("chrome://browser/skin/translating-16@2x.png");
3793 }
3794}
3795
a5cb6e53
RK
3796notification[value="translation"] hbox[anonid="details"] {
3797 overflow: hidden;
3798}
3799
ed88669c
RK
3800notification[value="translation"] button,
3801notification[value="translation"] menulist {
3802 min-width: 0;
ed88669c
RK
3803}
3804
3805notification[value="translation"] menulist > .menulist-dropmarker {
3806}
3807
93c91f62
RK
3808.translation-menupopup arrowscrollbox {
3809 padding-bottom: 0;
3810}
3811
3812.translation-attribution {
3813 cursor: pointer;
3814 -moz-box-align: end;
3815 font-size: small;
3816}
3817
3818.translation-attribution > label {
3819 margin-bottom: 0;
3820}
3821
3822.translation-attribution > image {
3823 width: 70px;
3824}
3825
8837ac2c
RK
3826.translation-welcome-panel {
3827 width: 305px;
3828}
3829
3830.translation-welcome-logo {
3831 height: 32px;
3832 width: 32px;
3833 list-style-image: url(chrome://browser/skin/translation-16@2x.png);
3834 -moz-image-region: rect(0, 64px, 32px, 32px);
3835}
3836
3837.translation-welcome-content {
3838 -moz-margin-start: 16px;
3839}
3840
3841.translation-welcome-headline {
3842 font-size: larger;
3843 font-weight: bold;
3844}
3845
3846.translation-welcome-body {
3847 padding: 1em 0;
3848 margin: 0 0;
3849}
3850
ed88669c
RK
3851/* === END infobar.inc.css === */
3852
0bcd5587
RK
3853notification[value="translation"] {
3854 min-height: 40px;
3855}
3856
ed88669c
RK
3857.translation-menupopup {
3858 -moz-appearance: none;
3859}
3860
e184b661
RK
3861/* Loop/ Hello browser styles */
3862
3863notification[value="loop-sharing-notification"] .button-menubutton-button {
3864 min-width: 0;
3865 border: 0;
3866 margin: 0;
3867}
3868
3869notification[value="loop-sharing-notification"] .messageImage {
3870 list-style-image: url(chrome://browser/skin/webRTC-shareScreen-16.png);
3871}
3872
319c6529 3873/* Bookmarks roots menu-items */
319c6529
RK
3874#subscribeToPageMenuitem:not([disabled]),
3875#subscribeToPageMenupopup,
3876#BMB_subscribeToPageMenuitem:not([disabled]),
3877#BMB_subscribeToPageMenupopup {
3878 list-style-image: url("chrome://browser/skin/feeds/feedIcon16.png");
613daf44 3879}
3880
319c6529 3881#bookmarksToolbarFolderMenu,
c0f6797e
RK
3882#BMB_bookmarksToolbar,
3883#panelMenu_bookmarksToolbar {
8da9da4e 3884 list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png");
319c6529
RK
3885 -moz-image-region: auto;
3886}
acb0e9b8 3887
c0f6797e
RK
3888#BMB_unsortedBookmarks,
3889#panelMenu_unsortedBookmarks {
8da9da4e 3890 list-style-image: url("chrome://communicator/skin/bookmarks/unsortedBookmarks.png");
319c6529 3891 -moz-image-region: auto;
acb0e9b8 3892}
3893
31bc2dc1
RK
3894#panelMenu_pocket,
3895#menu_pocket,
3896#BMB_pocket {
3897 list-style-image: url("chrome://browser/content/pocket/panels/img/pocketmenuitem16.png");
3898}
3899
319c6529 3900/* ::::: Keyboard UI Panel ::::: */
acb0e9b8 3901
319c6529
RK
3902.KUI-panel {
3903 color: #FF9F00;
3904 border-style: none;
3905 border-radius: 20px;
acb0e9b8 3906}
3907
319c6529
RK
3908.KUI-panel[level="top"] {
3909 /*background-color: rgba(27%,27%,27%,.65);*/
acb0e9b8 3910}
3911
319c6529
RK
3912/* Ctrl-Tab */
3913
3914#ctrlTab-panel {
3915 padding: 20px 10px 10px;
3916 font-weight: bold;
acb0e9b8 3917}
3918
319c6529
RK
3919.ctrlTab-favicon[src] {
3920 background-color: #000000;
3921 width: 20px;
3922 height: 20px;
3923 padding: 2px;
3924}
acb0e9b8 3925
319c6529 3926.ctrlTab-preview-inner > .tabPreview-canvas {
acb0e9b8 3927}
3928
319c6529
RK
3929.ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas {
3930 margin-bottom: 2px;
acb0e9b8 3931}
3932
319c6529
RK
3933.ctrlTab-preview-inner {
3934 padding-bottom: 10px;
acb0e9b8 3935}
3936
319c6529
RK
3937#ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner {
3938 padding: 10px;
3939 background-color: #000000;
3940 border-radius: .5em;
acb0e9b8 3941}
3942
319c6529
RK
3943.ctrlTab-preview:focus > * > .ctrlTab-preview-inner {
3944 color: white;
3945 background-color: #000000;
3946 text-shadow: none;
3947 padding: 8px;
3948 border: 2px solid #9C9CFF;
3949 border-radius: .5em;
acb0e9b8 3950}
3951
319c6529
RK
3952.ctrlTab-preview:not(#ctrlTab-showAll):focus > * > .ctrlTab-preview-inner {
3953 margin: -10px -10px 0;
acb0e9b8 3954}
3955
319c6529
RK
3956#ctrlTab-showAll {
3957 margin-top: .5em;
acb0e9b8 3958}
3959
45dc7657
RK
3960/* Sync Panel */
3961
3962.sync-panel-icon {
cae267ab 3963 height:32px;
45dc7657
RK
3964 width: 32px;
3965 background: url("chrome://browser/content/abouthome/sync.png") top left no-repeat;
3966}
3967
3968.sync-panel-inner {
3969 width: 0;
3970 padding-left: 10px;
3971}
3972
3973.sync-panel-button-box {
3974 margin-top: 1em;
3975}
3976
3977#sync-error-panel-title,
3978#sync-start-panel-title {
cae267ab 3979 font-size: 120%;
45dc7657 3980 font-weight: bold;
cae267ab 3981 margin-bottom: 5px;
45dc7657
RK
3982}
3983
3984#sync-start-panel-subtitle,
3985#sync-error-panel-subtitle {
3986 margin: 0;
3987}
3988
9abeb12c
RK
3989/* Status panel */
3990
3991.statuspanel-label {
3992 margin: 0;
3993 padding: 2px 4px;
38cfeb47 3994 background: #404000;
9abeb12c
RK
3995 border: 1px none #9C9CFF;
3996 border-top-style: solid;
3997 color: #FF9F00;
3998 text-shadow: none;
3999}
4000
4001.statuspanel-label:-moz-locale-dir(ltr):not([mirror]),
4002.statuspanel-label:-moz-locale-dir(rtl)[mirror] {
4003 border-right-style: solid;
4004 border-top-right-radius: .3em;
4005 margin-right: 1em;
4006}
4007
4008.statuspanel-label:-moz-locale-dir(rtl):not([mirror]),
4009.statuspanel-label:-moz-locale-dir(ltr)[mirror] {
4010 border-left-style: solid;
4011 border-top-left-radius: .3em;
4012 margin-left: 1em;
4013}
3e6e0e5c
RK
4014
4015/* HACK to abolish devily color on main content */
4016
4017#content {
4018 background-color: transparent !important;
4019}
dce90fef 4020
024a65e9
RK
4021/* === BEGIN fullscreen/warning.inc.css === */
4022
4023#fullscreen-warning {
4024 align-items: center;
4025 background: rgba(0, 0, 0, 0.9);
4026 border: 2px solid #A09090;
4027 box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
8ad8bf83 4028 border-radius: 8px;
024a65e9
RK
4029 padding: 24px 16px;
4030 font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
4031}
4032
4033#fullscreen-warning::before {
4034 margin: 0;
4035 width: 24px; height: 24px;
4036}
4037
4038#fullscreen-warning.verifiedIdentity::before,
4039#fullscreen-warning.verifiedDomain::before {
4040 content: url("chrome://browser/skin/fullscreen/secure.svg");
4041}
4042
4043#fullscreen-warning.unknownIdentity::before {
4044 content: url("chrome://browser/skin/fullscreen/insecure.svg");
4045}
4046
4047#fullscreen-domain-text,
4048#fullscreen-generic-text {
4049 font-size: 21px;
4050 font-weight: lighter;
4051 color: #A09090;
4052 margin: 0 16px;
8ad8bf83
RK
4053}
4054
024a65e9
RK
4055#fullscreen-domain {
4056 font-weight: bold;
4057 margin: 0;
85cfb236
RK
4058}
4059
024a65e9
RK
4060#fullscreen-exit-button {
4061 padding: 0 30px;
4062 font: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
4063 font-size: 14px;
4064 font-weight: lighter;
4065 margin: 0;
4066 height: 28px;
4067 box-sizing: content-box;
4068
4069 border-radius: 300px;
4070 border: none;
4071 background-color: #C09070;
4072 color: #000000;
8ad8bf83
RK
4073}
4074
024a65e9
RK
4075/* === END fullscreen/warning.inc.css === */
4076
b27cc46e
RK
4077/* === BEGIN commandline.inc.css === */
4078
a5cb6e53
RK
4079/* NOTE: THESE NEED TO STAY IN SYNC WITH LIGHT-THEME.CSS AND DARK-THEME.CSS.
4080 We are copy/pasting variables from light-theme and dark-theme,
4081 since they aren't loaded in this context (within browser.css). */
4082:root #developer-toolbar {
4083 --gcli-background-color: #000000; /* --theme-toolbar-background */
4084 --gcli-input-background: rgba(0, 0, 0, .75); /* --theme-tab-toolbar-background */
4085 --gcli-input-focused-background: #000000; /* --theme-sidebar-background */
4086 --gcli-input-color: #FF9F00; /* --theme-body-color-alt */
4087 --gcli-border-color: #9C9CFF; /* --theme-splitter-color */
4088 --selection-background: #008484; /* --theme-selection-background */
4089 --selection-color: #000000; /* --theme-selection-color */
4090}
4091
b27cc46e
RK
4092/* Developer toolbar */
4093
4094#developer-toolbar {
a5cb6e53 4095 border-top: 3px solid var(--gcli-background-color);
b27cc46e
RK
4096 border-bottom: none;
4097}
4098
4099#developer-toolbar .toolbar-holder {
4100 background-color: #8050B0;
4101 color: #FFCF00;
4102}
4103
4104#developer-toolbar .toolbar-holder {
4105 background-color: #8050B0;
4106 color: #FFCF00;
4107}
4108
4109#developer-toolbar .toolbar-startcap,
4110#developer-toolbar .toolbar-endcap{
4111 background-color: #6000CF;
4112}
4113
4114#developer-toolbar {
4115/* padding: 0;
4116 min-height: 32px; */
4117}
4118
de57e474 4119#developer-toolbar > toolbarbutton {
b27cc46e
RK
4120/* margin: 0;
4121 padding: 0 10px;
4122 width: 32px; */
4123}
4124
4125.developer-toolbar-button > image {
4126/* margin: auto 10px; */
4127}
4128
fe524e0c
RK
4129#developer-toolbar-toolbox-button > label {
4130 display: none;
4131}
4132
0bcd5587
RK
4133.developer-toolbar-button > .toolbarbutton-icon,
4134#developer-toolbar-closebutton > .toolbarbutton-icon {
4135 width: 16px;
4136 height: 16px;
4137}
4138
b27cc46e
RK
4139#developer-toolbar-toolbox-button {
4140 list-style-image: url("chrome://browser/skin/devtools/toggle-tools.png");
4141 -moz-image-region: rect(0px, 16px, 16px, 0px);
4142}
4143
4144#developer-toolbar-toolbox-button > label {
4145 display: none;
4146}
4147
4148#developer-toolbar-toolbox-button:hover,
4149#developer-toolbar-toolbox-button:hover:active,
4150#developer-toolbar-toolbox-button[checked=true] {
4151 -moz-image-region: rect(0px, 32px, 16px, 16px);
4152}
4153
0bcd5587
RK
4154@media (min-resolution: 2dppx) {
4155 #developer-toolbar-toolbox-button {
4156 list-style-image: url("chrome://browser/skin/devtools/toggle-tools@2x.png");
4157 -moz-image-region: rect(0px, 32px, 32px, 0px);
4158 }
4159
4160 #developer-toolbar-toolbox-button:hover,
4161 #developer-toolbar-toolbox-button:hover:active,
4162 #developer-toolbar-toolbox-button[checked=true] {
4163 -moz-image-region: rect(0px, 64px, 32px, 32px);
4164 }
4165}
4166
de57e474
RK
4167#developer-toolbar-closebutton {
4168 list-style-image: url("chrome://browser/skin/devtools/close.png");
4169 -moz-image-region: rect(0px, 16px, 16px, 0px);
4170 min-width: 16px;
4171 width: 16px;
4172}
4173
4174#developer-toolbar-closebutton > .toolbarbutton-icon {
4175}
4176
4177#developer-toolbar-closebutton > .toolbarbutton-text {
4178 display: none;
4179}
4180
4181#developer-toolbar-closebutton:hover,
4182#developer-toolbar-closebutton:hover:active {
4183 -moz-image-region: rect(0px, 32px, 16px, 16px);
4184}
4185
0bcd5587
RK
4186@media (min-resolution: 2dppx) {
4187 #developer-toolbar-closebutton {
4188 list-style-image: url("chrome://browser/skin/devtools/close@2x.png");
4189 -moz-image-region: rect(0px, 32px, 32px, 0px);
4190 }
4191
4192 #developer-toolbar-closebutton:hover,
4193 #developer-toolbar-closebutton:hover:active {
4194 -moz-image-region: rect(0px, 64px, 32px, 32px);
4195 }
4196}
4197
b27cc46e
RK
4198/* GCLI */
4199
37953ab4
RK
4200html|*#gcli-tooltip-frame,
4201html|*#gcli-output-frame {
85cfb236 4202 padding: 0;
37953ab4
RK
4203 border-width: 0;
4204 background-color: transparent;
4205}
4206
4207#gcli-output,
4208#gcli-tooltip {
4209 border-width: 0;
4210 background-color: transparent;
85cfb236
RK
4211}
4212
4213.gclitoolbar-input-node,
b27cc46e 4214.gclitoolbar-complete-node {
37953ab4
RK
4215 margin: 1px 3px;
4216 -moz-box-align: center;
4217 padding-top: 0;
4218 padding-bottom: 0;
b27cc46e 4219 padding-right: 8px;
37953ab4 4220 background-color: transparent;
85cfb236
RK
4221}
4222
4223.gclitoolbar-input-node {
b27cc46e
RK
4224/* line-height: 32px;
4225 outline-style: none; */
de57e474 4226 background-repeat: no-repeat;
a5cb6e53 4227 background-color: var(--gcli-input-background);
b27cc46e
RK
4228}
4229
4230.gclitoolbar-input-node[focused="true"] {
a5cb6e53 4231 background-color: var(--gcli-input-focused-background);
37953ab4
RK
4232}
4233
0bcd5587
RK
4234.gclitoolbar-input-node::before {
4235 content: "";
4236 display: inline-block;
4237 -moz-box-ordinal-group: 0;
4238 width: 16px;
4239 height: 16px;
4240 margin: 0 2px;
4241 background-image: url("chrome://browser/skin/devtools/commandline-icon.png");
4242 background-position: 0 center;
4243 background-size: 32px 16px;
4244}
4245
4246.gclitoolbar-input-node[focused="true"]::before {
4247 background-position: -16px center;
4248}
4249
4250@media (min-resolution: 2dppx) {
4251 .gclitoolbar-input-node::before {
4252 background-image: url("chrome://browser/skin/devtools/commandline-icon@2x.png");
4253 }
4254}
4255
37953ab4
RK
4256.gclitoolbar-input-node:not([focused="true"]) {
4257 border-color: transparent;
85cfb236
RK
4258}
4259
7bc075b6 4260.gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection {
a5cb6e53
RK
4261 background-color: var(--selection-background);
4262 color: var(--selection-color);
7bc075b6
RK
4263}
4264
85cfb236 4265.gclitoolbar-complete-node {
37953ab4 4266 padding-left: 21px;
85cfb236
RK
4267 background-color: transparent;
4268 color: transparent;
b27cc46e
RK
4269 z-index: 100;
4270 pointer-events: none;
85cfb236
RK
4271}
4272
85cfb236
RK
4273.gcli-in-incomplete,
4274.gcli-in-error,
4275.gcli-in-ontab,
4276.gcli-in-todo,
4277.gcli-in-closebrace,
4278.gcli-in-param,
4279.gcli-in-valid {
4280 margin: 0;
4281 padding: 0;
4282}
4283
4284.gcli-in-incomplete {
4285 border-bottom: 2px dotted #8050B0;
4286}
4287
4288.gcli-in-error {
4289 border-bottom: 2px dotted #FF0000;
4290}
4291
4292.gcli-in-ontab {
4293 color: #9C9CFF;
4294}
4295
4296.gcli-in-todo {
4297 color: #795900;
4298}
4299
4300.gcli-in-closebrace {
4301 color: #8050B0;
4302}
4303
b27cc46e
RK
4304/* === END commandline.inc.css === */
4305
fe524e0c
RK
4306/* === BEGIN responsivedesign.inc.css === */
4307
37953ab4 4308/* Responsive Mode */
85cfb236 4309
7bc075b6 4310.browserContainer[responsivemode] {
0bcd5587 4311 background-color: #221500;
37953ab4
RK
4312 padding: 0 20px 20px 20px;
4313}
4314
7bc075b6 4315.browserStack[responsivemode] {
37953ab4
RK
4316 box-shadow: 0 0 7px #9C9CFF;
4317}
4318
4319.devtools-responsiveui-toolbar {
4320 background: transparent;
d2ce251d
RK
4321 /* text color is textColor from dark theme, since no theme is applied to
4322 * the responsive toolbar.
4323 */
4324 color: #FF9F00;
37953ab4
RK
4325 margin: 10px 0;
4326 padding: 0;
4327 box-shadow: none;
4328 border-bottom-width: 0;
4329}
4330
de57e474
RK
4331.devtools-responsiveui-menulist,
4332.devtools-responsiveui-toolbarbutton {
4333 -moz-box-align: center;
4334 min-width: 32px;
4335/* min-height: 22px;*/
4336/* margin: 0 3px; */
4337}
4338
1988bb88
RK
4339.devtools-responsiveui-menulist .menulist-editable-box {
4340 background-color: transparent;
4341}
4342
4343.devtools-responsiveui-menulist html|*.menulist-editable-input {
4344 color: inherit;
4345 text-align: center;
4346}
4347
4348.devtools-responsiveui-menulist html|*.menulist-editable-input::-moz-selection {
4349/* background: hsla(212,7%,57%,.35);*/
4350}
4351
0bcd5587
RK
4352.devtools-responsiveui-toolbarbutton > .toolbarbutton-icon {
4353 width: 16px;
4354 height: 16px;
4355}
4356
de57e474
RK
4357.devtools-responsiveui-toolbarbutton > .toolbarbutton-menubutton-button {
4358 -moz-box-orient: horizontal;
4359}
4360
4361.devtools-responsiveui-menulist:-moz-focusring,
4362.devtools-responsiveui-toolbarbutton:-moz-focusring {
4363/* outline: 1px dotted hsla(210,30%,85%,0.7);
4364 outline-offset: -4px;*/
4365}
4366
4367.devtools-responsiveui-toolbarbutton:not([label]) > .toolbarbutton-text {
4368 display: none;
4369}
4370
4371.devtools-responsiveui-toolbarbutton:not([checked=true]):hover:active {
4372/* border-color: hsla(210,8%,5%,.6);
4373 background: linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
4374 box-shadow: 0 0 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15); */
4375}
4376
4377.devtools-responsiveui-menulist[open=true],
4378.devtools-responsiveui-toolbarbutton[open=true],
4379.devtools-responsiveui-toolbarbutton[checked=true] {
4380/* border-color: hsla(210,8%,5%,.6) !important;
4381 background: linear-gradient(hsla(220,6%,10%,.6), hsla(210,11%,18%,.45) 75%, hsla(210,11%,30%,.4));
4382 box-shadow: 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15); */
4383}
4384
4385.devtools-responsiveui-toolbarbutton[checked=true] {
4386/* color: hsl(208,100%,60%); */
4387}
4388
4389.devtools-responsiveui-toolbarbutton[checked=true]:hover {
4390/* background-color: transparent !important;*/
4391}
4392
4393.devtools-responsiveui-toolbarbutton[checked=true]:hover:active {
4394/* background-color: hsla(210,8%,5%,.2) !important;*/
4395}
4396
4397.devtools-responsiveui-menulist > .menulist-label-box {
4398 text-align: center;
4399}
4400
4401.devtools-responsiveui-menulist > .menulist-dropmarker {
4402/* display: -moz-box;
4403 background-color: transparent;
0bcd5587 4404 list-style-image: url("chrome://browser/skin/devtools/dropmarker.svg");
de57e474
RK
4405 -moz-box-align: center;
4406 border-width: 0;
4407 min-width: 16px;*/
4408}
4409
4410.devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
4411/* color: inherit;
4412 border-width: 0;
4413 -moz-border-end: 1px solid hsla(210,8%,5%,.45);
4414 box-shadow: -1px 0 0 hsla(210,16%,76%,.15) inset, 1px 0 0 hsla(210,16%,76%,.15);*/
4415}
4416
4417.devtools-responsiveui-toolbarbutton[type=menu-button]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button {
4418/* box-shadow: 1px 0 0 hsla(210,16%,76%,.15) inset, -1px 0 0 hsla(210,16%,76%,.15);*/
4419}
4420
4421.devtools-responsiveui-toolbarbutton[type=menu-button] {
4422/* padding: 0 1px;*/
4423 -moz-box-align: stretch;
4424}
4425
4426.devtools-responsiveui-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
4427.devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
0bcd5587 4428/* list-style-image: url("chrome://browser/skin/devtools/dropmarker.svg");
de57e474
RK
4429 -moz-box-align: center;
4430 padding: 0 3px;*/
37953ab4
RK
4431}
4432
4433.devtools-responsiveui-toolbar:-moz-locale-dir(ltr) > *:first-child,
4434.devtools-responsiveui-toolbar:-moz-locale-dir(rtl) > *:last-child {
fe524e0c
RK
4435 margin-left: 3px;
4436}
4437
4438.devtools-responsiveui-close {
4439 list-style-image: url("chrome://browser/skin/devtools/close.png");
4440 -moz-image-region: rect(0px,16px,16px,0px);
4441}
4442
4443.devtools-responsiveui-close:hover {
4444 -moz-image-region: rect(0px,32px,16px,16px);
4445}
4446
4447.devtools-responsiveui-rotate {
4448 list-style-image: url("chrome://browser/skin/devtools/responsiveui-rotate.png");
4449 -moz-image-region: rect(0px,16px,16px,0px);
4450}
4451
4452.devtools-responsiveui-rotate:hover {
4453 -moz-image-region: rect(0px,32px,16px,16px);
4454}
4455
0bcd5587
RK
4456@media (min-resolution: 2dppx) {
4457 .devtools-responsiveui-close {
4458 list-style-image: url("chrome://browser/skin/devtools/close@2x.png");
4459 }
4460
4461 .devtools-responsiveui-close:hover {
4462 -moz-image-region: rect(0px,64px,32px,32px);
4463 }
4464
4465 .devtools-responsiveui-rotate {
4466 list-style-image: url("chrome://browser/skin/devtools/responsiveui-rotate@2x.png");
4467 }
4468
4469 .devtools-responsiveui-rotate:hover {
4470 -moz-image-region: rect(0px,64px,32px,32px);
4471 }
4472}
4473
fe524e0c
RK
4474.devtools-responsiveui-touch {
4475 list-style-image: url("chrome://browser/skin/devtools/responsiveui-touch.png");
4476 -moz-image-region: rect(0px,16px,16px,0px);
4477}
4478
4479.devtools-responsiveui-touch:hover,
4480.devtools-responsiveui-touch[checked],
4481.devtools-responsiveui-touch[checked]:hover {
4482 -moz-image-region: rect(0px,32px,16px,16px);
4483}
4484
0bcd5587
RK
4485@media (min-resolution: 2dppx) {
4486 .devtools-responsiveui-touch {
4487 list-style-image: url("chrome://browser/skin/devtools/responsiveui-touch@2x.png");
4488 -moz-image-region: rect(0px,32px,32px,0px);
4489 }
4490
4491 .devtools-responsiveui-touch:hover,
4492 .devtools-responsiveui-touch[checked],
4493 .devtools-responsiveui-touch[checked]:hover {
4494 -moz-image-region: rect(0px,64px,32px,32px);
4495 }
4496}
4497
fe524e0c
RK
4498.devtools-responsiveui-screenshot {
4499 list-style-image: url("chrome://browser/skin/devtools/responsiveui-screenshot.png");
4500 -moz-image-region: rect(0px,16px,16px,0px);
4501}
4502
4503.devtools-responsiveui-screenshot:hover {
4504 -moz-image-region: rect(0px,32px,16px,16px);
37953ab4
RK
4505}
4506
0bcd5587
RK
4507@media (min-resolution: 2dppx) {
4508 .devtools-responsiveui-screenshot {
4509 list-style-image: url("chrome://browser/skin/devtools/responsiveui-screenshot@2x.png");
4510 }
4511
4512 .devtools-responsiveui-screenshot:hover {
4513 -moz-image-region: rect(0px,64px,32px,32px);
4514 }
4515}
4516
fe524e0c 4517.devtools-responsiveui-resizebarV {
37953ab4
RK
4518 width: 7px;
4519 height: 24px;
4520 cursor: ew-resize;
71a617ff 4521 transform: translate(12px, -12px);
0bcd5587 4522 background-size: cover;
37953ab4
RK
4523 background-image: url("chrome://browser/skin/devtools/responsive-vertical-resizer.png");
4524}
4525
fe524e0c
RK
4526.devtools-responsiveui-resizebarH {
4527 width: 24px;
4528 height: 7px;
4529 cursor: ns-resize;
4530 transform: translate(-12px, 12px);
0bcd5587 4531 background-size: cover;
fe524e0c
RK
4532 background-image: url("chrome://browser/skin/devtools/responsive-horizontal-resizer.png");
4533}
4534
37953ab4
RK
4535.devtools-responsiveui-resizehandle {
4536 width: 16px;
4537 height: 16px;
4538 cursor: se-resize;
71a617ff 4539 transform: translate(12px, 12px);
0bcd5587 4540 background-size: cover;
37953ab4 4541 background-image: url("chrome://browser/skin/devtools/responsive-se-resizer.png");
8d7ef0d9 4542}
889649fd 4543
a21f2959
RK
4544/* FxOS custom mode with additional buttons and phone look'n feel */
4545
4546/* Hide devtools manual resizer */
4547.browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizehandle,
4548.browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarH,
4549.browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarV {
4550 display: none;
4551}
4552
4553/* Gives responsive mode a phone look'n feel */
4554.browserStack[responsivemode].fxos-mode {
4555 padding: 60px 15px 0;
4556
4557 border-radius: 25px / 20px;
4558 border-bottom-left-radius: 0;
4559 border-bottom-right-radius: 0;
4560 border: 1px solid #FFFFFF;
4561 border-bottom-width: 0;
4562
4563 background-color: #353535;
4564
4565 box-shadow: 0 3px 0.7px 1px #777777, 0 5px rgba(0, 0, 0, 0.4) inset;
4566
4567 background-image: linear-gradient(to right, #111 11%, #333 56%);
4568 min-width: 320px;
4569}
4570
4571.devtools-responsiveui-hardware-buttons {
4572 -moz-appearance: none;
4573 padding: 20px;
4574
4575 border: 1px solid #FFFFFF;
4576 border-bottom-left-radius: 25px;
4577 border-bottom-right-radius: 25px;
4578 border-top-width: 0;
4579
4580 box-shadow: 0 3px 0.7px 1px #777777, 0 -7px rgba(0, 0, 0, 0.4) inset;
4581
4582 background-image: linear-gradient(to right, #111 11%, #333 56%);
4583}
4584
4585.devtools-responsiveui-home-button {
024a65e9 4586 -moz-user-focus: ignore;
a21f2959
RK
4587 width: 40px;
4588 height: 30px;
4589 list-style-image: url("chrome://browser/skin/devtools/responsiveui-home.png");
4590}
4591
4592.devtools-responsiveui-sleep-button {
024a65e9 4593 -moz-user-focus: ignore;
a21f2959
RK
4594 -moz-appearance: none;
4595 /* compensate browserStack top padding */
4596 margin-top: -67px;
4597 margin-right: 10px;
4598
4599 min-width: 10px;
4600 width: 50px;
4601 height: 5px;
4602
4603 border: 1px solid #444;
4604 border-top-right-radius: 12px;
4605 border-top-left-radius: 12px;
4606 border-bottom-color: transparent;
4607
4608 background-image: linear-gradient(to top, #111 11%, #333 56%);
4609}
4610
4611.devtools-responsiveui-sleep-button:hover:active {
4612 background-image: linear-gradient(to top, #aaa 11%, #ddd 56%);
4613}
4614
4615.devtools-responsiveui-volume-buttons {
4616 margin-left: -29px;
4617}
4618
4619.devtools-responsiveui-volume-up-button,
4620.devtools-responsiveui-volume-down-button {
024a65e9 4621 -moz-user-focus: ignore;
a21f2959
RK
4622 -moz-appearance: none;
4623 border: 1px solid red;
4624 min-width: 8px;
4625 height: 40px;
4626
4627 border: 1px solid #444;
4628 border-right-color: transparent;
4629
4630 background-image: linear-gradient(to right, #111 11%, #333 56%);
4631}
4632
4633.devtools-responsiveui-volume-up-button:hover:active,
4634.devtools-responsiveui-volume-down-button:hover:active {
4635 background-image: linear-gradient(to right, #aaa 11%, #ddd 56%);
4636}
4637
4638.devtools-responsiveui-volume-up-button {
4639 border-top-left-radius: 12px;
4640}
4641
4642.devtools-responsiveui-volume-down-button {
4643 border-bottom-left-radius: 12px;
4644}
4645
0bcd5587
RK
4646@media (min-resolution: 2dppx) {
4647 .devtools-responsiveui-resizebarV {
4648 background-image: url("chrome://browser/skin/devtools/responsive-vertical-resizer@2x.png");
4649 }
4650
4651 .devtools-responsiveui-resizebarH {
4652 background-image: url("chrome://browser/skin/devtools/responsive-horizontal-resizer@2x.png");
4653 }
4654
4655 .devtools-responsiveui-resizehandle {
4656 background-image: url("chrome://browser/skin/devtools/responsive-se-resizer@2x.png");
4657 }
4658}
4659
fe524e0c 4660/* === END responsivedesign.inc.css === */
fcaeefc2
RK
4661
4662/* === including indicator.css is done at the start of the file === */
fe524e0c 4663
889649fd
RK
4664/* Error counter */
4665
0142a07b 4666#developer-toolbar-toolbox-button[error-count]:before {
889649fd
RK
4667 color: #000000;
4668 min-width: 16px;
4669 text-shadow: none;
4670 background-color: #FF0000;
4671 border-radius: 1px;
c29b709d 4672 -moz-margin-end: 5px;
c54ac991 4673}
e9c73590 4674
348c0499 4675/* Social toolbar item */
e9c73590 4676
348c0499 4677#social-notification-icon-mentions {
e9c73590 4678 background-color: #000000;
348c0499
RK
4679 border-radius: 3px;
4680 -moz-margin-start: 2px;
e9c73590
RK
4681}
4682
348c0499
RK
4683#social-notification-icon-mentions:hover {
4684 background-color: #FFCF00;
4685}
4686
4687#social-notification-icon-mentions[open="true"] {
4688 background-color: #FF9F00;
e9c73590
RK
4689}
4690
4691#social-sidebar-splitter {
4692 border: 0;
4693}
4694
ed1a91c6
RK
4695#socialActivatedNotification .popup-notification-button-container {
4696 margin-left: 6px;
4697}
4698
4699.social-activation-icon {
4700 width: auto;
4701 height: auto;
4702 max-height: 64px;
4703 max-width: 64px;
4704}
4705
4706#social-activation-message {
4707 max-width: 250px;
4708}
4709
4710#social-activation-message > label {
4711 margin: 0;
4712}
4713
e9c73590 4714/* social toolbar provider menu */
990cba4b 4715.social-statusarea-popup {
e9c73590
RK
4716 margin-top: 0;
4717 margin-left: -12px;
4718 margin-right: -12px;
4719}
4720
990cba4b 4721.social-statusarea-user {
e9c73590
RK
4722 border-bottom: 1px solid #9C9CFF;
4723 background-color: #000000;
4724 color: #FF9F00;
4725 position: relative;
348c0499 4726 cursor: pointer;
e9c73590
RK
4727}
4728
990cba4b 4729.social-statusarea-user-portrait {
e9c73590
RK
4730 width: 32px;
4731 height: 32px;
4732 border-radius: 2px;
4733 margin: 10px;
e9c73590
RK
4734}
4735
990cba4b 4736.social-statusarea-loggedInStatus {
e9c73590
RK
4737 background: transparent;
4738 border: none;
b8384c33 4739 color: #3333FF;
e9c73590
RK
4740 min-width: 0;
4741 margin: 0 6px;
348c0499 4742 list-style-image: none;
e9c73590 4743}
90a244b7 4744
990cba4b 4745#social-statusarea-user[_moz-menuactive] > vbox > .social-statusarea-loggedInStatus {
e9c73590
RK
4746 text-decoration: underline;
4747}
4748
348c0499
RK
4749.social-panel > .panel-arrowcontainer > .panel-arrowcontent {
4750 padding: 0;
4751}
4752
348c0499
RK
4753.social-panel-frame {
4754 border-radius: inherit;
4755}
e9c73590 4756
e7c8bab1
RK
4757/* === BEGIN chat.inc.css === */
4758
dfa34f73
RK
4759#social-sidebar-header {
4760 padding: 3px;
4761}
4762
20752032
RK
4763#manage-share-providers,
4764#social-sidebar-button {
4765 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
4766 -moz-image-region: rect(0, 468px, 18px, 450px);
4767}
4768
dfa34f73
RK
4769#social-sidebar-button {
4770 -moz-appearance: none;
45dc7657 4771 border: none;
dfa34f73
RK
4772 padding: 0;
4773 margin: 2px;
4774}
20752032 4775#manage-share-providers > .toolbarbutton-icon,
45dc7657 4776#social-sidebar-button > .toolbarbutton-icon {
20752032
RK
4777 min-height: 18px;
4778 min-width: 18px;
45dc7657 4779}
20752032
RK
4780#manage-share-providers:hover,
4781#manage-share-providers:hover:active,
dfa34f73
RK
4782#social-sidebar-button:hover,
4783#social-sidebar-button:hover:active {
20752032 4784 -moz-image-region: rect(18px, 468px, 36px, 450px);
dfa34f73
RK
4785}
4786#social-sidebar-button > .toolbarbutton-menu-dropmarker {
4787 display: none;
4788}
4789
4790#social-sidebar-button[loading="true"] {
4791 list-style-image: url("chrome://global/skin/icons/loading.gif");
4792}
4793
4794#social-sidebar-favico {
4795 max-height: 16px;
4796 max-width: 16px;
4797 padding: 0;
4798 margin: 2px;
4799}
4800
e9c73590
RK
4801.chat-status-icon {
4802 max-height: 16px;
4803 max-width: 16px;
4804 padding: 0;
4805}
4806
4807.chat-toolbarbutton {
4808 -moz-appearance: none;
4809 border: none;
8837ac2c 4810 padding: 0 3px;
e9c73590
RK
4811 margin: 0;
4812 background: none;
8837ac2c
RK
4813}
4814
4815.chat-toolbarbutton:hover {
4816/* background-color: rgba(255,255,255,.35);*/
4817}
4818
4819.chat-toolbarbutton:hover:active {
4820/* background-color: rgba(255,255,255,.5);*/
e9c73590
RK
4821}
4822
4823.chat-toolbarbutton > .toolbarbutton-text {
4824 display: none;
4825}
4826
b27cc46e 4827.chat-toolbarbutton > .toolbarbutton-icon {
8837ac2c
RK
4828 width: 16px;
4829 height: 16px;
e7c8bab1
RK
4830}
4831
e9c73590 4832.chat-close-button {
8837ac2c 4833 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close");
e9c73590
RK
4834}
4835
8837ac2c
RK
4836.chat-close-button:-moz-any(:hover,:hover:active) {
4837 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close-active");
e9c73590
RK
4838}
4839
e2734cc7 4840.chat-minimize-button {
8837ac2c 4841 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize");
e2734cc7
RK
4842}
4843
8837ac2c
RK
4844.chat-minimize-button:-moz-any(:hover,:hover:active) {
4845 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize-active");
e2734cc7
RK
4846}
4847
4848.chat-swap-button {
8837ac2c
RK
4849 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand");
4850 transform: rotate(180deg);
e2734cc7
RK
4851}
4852
8837ac2c
RK
4853.chat-swap-button:-moz-any(:hover,:hover:active) {
4854 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand-active");
e2734cc7
RK
4855}
4856
4857chatbar > chatbox > .chat-titlebar > .chat-swap-button {
8837ac2c 4858 transform: none;
e2734cc7
RK
4859}
4860
e9c73590
RK
4861.chat-title {
4862 font-weight: bold;
4863 font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
90a244b7 4864 text-shadow: none;
348c0499 4865 cursor: inherit;
e9c73590
RK
4866}
4867
4868.chat-titlebar {
4869 background-color: #9C9CFF;
4870 color: #000000;
8837ac2c
RK
4871 height: 30px;
4872 min-height: 30px;
e9c73590
RK
4873 width: 100%;
4874 margin: 0;
8837ac2c 4875 padding: 7px 6px;
e9c73590
RK
4876 border: none;
4877 border-bottom: 1px solid #008484;
348c0499 4878 cursor: pointer;
e9c73590
RK
4879}
4880
e2734cc7
RK
4881.chat-titlebar > .notification-anchor-icon {
4882 margin-left: 2px;
4883 margin-right: 2px;
4884}
4885
e9c73590
RK
4886.chat-titlebar[minimized="true"] {
4887 border-bottom: none;
4888}
4889
348c0499
RK
4890.chat-titlebar[selected] {
4891 background-color: #008484;
4892}
4893
4894.chat-titlebar[activity] {
4895 background-color: #E7ADE7;
4896}
4897
8837ac2c
RK
4898chatbox[dark=true] > .chat-titlebar,
4899chatbox[dark=true] > .chat-titlebar[selected] {
4900/* border-bottom: none;
4901 background-color: #000;
4902 background-image: none;*/
4903}
4904
4905chatbox[dark=true] > .chat-titlebar > hbox > .chat-title {
4906/* font-weight: normal;
4907 color: #c1c1c1;*/
4908}
4909
e9c73590
RK
4910.chat-frame {
4911 padding: 0;
4912 margin: 0;
4913 overflow: hidden;
4914}
4915
4916.chatbar-button {
ed1a91c6 4917 list-style-image: url("chrome://browser/skin/social/services-16.png");
e9c73590
RK
4918 background-color: #000000;
4919 border: none;
4920 margin: 0;
4921 padding: 2px;
4922 height: 21px;
4923 width: 21px;
4924 border-top: 1px solid #008484;
4925 -moz-border-end: 1px solid #008484;
4926}
4927
ed1a91c6
RK
4928@media (min-resolution: 2dppx) {
4929 .chatbar-button {
4930 list-style-image: url("chrome://browser/skin/social/services-16@2x.png");
4931 }
4932}
4933
fe524e0c
RK
4934.chatbar-button > .toolbarbutton-icon {
4935 width: 16px;
4936}
4937
d7cfd768
RK
4938.chatbar-button > menupopup > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
4939 width: auto;
4940 height: auto;
e9c73590
RK
4941 max-height: 16px;
4942 max-width: 16px;
e9c73590
RK
4943}
4944
90a244b7
RK
4945.chatbar-button > .toolbarbutton-icon {
4946 opacity: .6;
4947 -moz-margin-end: 0;
4948}
4949.chatbar-button:hover > .toolbarbutton-icon,
4950.chatbar-button[open="true"] > .toolbarbutton-icon {
4951 opacity: 1;
4952}
4953
a6757852 4954.chatbar-button:hover,
90a244b7 4955.chatbar-button[open="true"] {
e9c73590
RK
4956}
4957
e9c73590
RK
4958.chatbar-button > .toolbarbutton-text,
4959.chatbar-button > .toolbarbutton-menu-dropmarker {
4960 display: none;
4961}
4962
90a244b7 4963.chatbar-button[activity]:not([open="true"]) {
348c0499
RK
4964 background-color: #E7ADE7;
4965}
4966
4967.chatbar-button > menupopup > menuitem[activity] {
4968 font-weight: bold;
4969}
4970
e9c73590
RK
4971.chatbar-innerbox {
4972 background: transparent;
e9c73590
RK
4973 overflow: hidden;
4974}
4975
fcfb76ce
RK
4976chatbar {
4977 -moz-margin-end: 20px;
4978}
4979
e9c73590 4980chatbar > chatbox {
fcfb76ce
RK
4981 height: 285px;
4982 width: 260px;
4983 -moz-margin-start: 4px;
e9c73590
RK
4984 background-color: #000000;
4985 border: 1px solid #9C9CFF;
4986 border-bottom: none;
90a244b7
RK
4987 border-top-left-radius: 2.5px;
4988 border-top-right-radius: 2.5px;
e9c73590
RK
4989}
4990
fcfb76ce
RK
4991chatbox[minimized="true"] {
4992 width: 160px;
e9c73590 4993 height: 20px;
e9c73590 4994}
348c0499 4995
e2734cc7
RK
4996window > chatbox {
4997 -moz-margin-start: 0px;
4998 margin: 0px;
4999 border: none;
5000 padding: 0px;
5001}
5002
e7c8bab1
RK
5003/* === END chat.inc.css === */
5004
c0f6797e
RK
5005.chat-titlebar {
5006/* background-color: #c4cfde; */
5007}
5008
5009.chat-titlebar[selected] {
5010/* background-color: #dae3f0; */
5011}
5012
5013.chatbar-button {
5014 -moz-appearance: none;
5015/* background-color: #c4cfde; */
5016}
5017
5018.chatbar-button > .toolbarbutton-icon {
5019/* -moz-margin-end: 0; */
5020}
5021
5022.chatbar-button:hover,
5023.chatbar-button[open="true"] {
5024/* background-color: #dae3f0; */
5025}
5026
5027.chatbar-button[activity]:not([open="true"]) {
5028}
5029
5030chatbox {
5031/* border-top-left-radius: 2.5px;
5032 border-top-right-radius: 2.5px; */
5033}
5034
b27cc46e 5035/* === BEGIN plugin-doorhanger.inc.css === */
348c0499 5036
b27cc46e
RK
5037/**
5038 * Plugin Doorhanger Styles
5039 */
348c0499 5040
b27cc46e 5041#notification-popup[popupid="click-to-play-plugins"] > .panel-arrowcontainer > .panel-arrowcontent {
1e32332f 5042 padding: 6px 1px 2px;
348c0499
RK
5043}
5044
348c0499 5045.click-to-play-plugins-notification-center-box {
348c0499
RK
5046}
5047
fe524e0c
RK
5048.plugin-popupnotification-centeritem:nth-child(odd) {
5049/* background-color: rgba(0,0,0,0.1);*/
348c0499
RK
5050}
5051
b27cc46e
RK
5052.center-item-label {
5053 margin-bottom: 0;
5054 text-overflow: ellipsis;
348c0499
RK
5055}
5056
b27cc46e
RK
5057.center-item-warning-icon {
5058 background-image: url("chrome://mozapps/skin/extensions/alerticon-info-negative.png");
348c0499 5059 background-repeat: no-repeat;
348c0499 5060 width: 16px;
b27cc46e
RK
5061 height: 15px;
5062 -moz-margin-start: 6px;
348c0499
RK
5063}
5064
b27cc46e 5065.click-to-play-plugins-notification-button-container {
348c0499
RK
5066}
5067
b27cc46e
RK
5068.click-to-play-popup-button {
5069 width: 50%;
348c0499
RK
5070}
5071
b27cc46e 5072.click-to-play-plugins-notification-description-box {
1e32332f
RK
5073 margin-left: 5px;
5074 margin-right: 5px;
5075 margin-top: 0;
5076 padding-bottom: 3px;
348c0499
RK
5077}
5078
b27cc46e 5079.click-to-play-plugins-outer-description {
1e32332f 5080 margin-top: 1px;
348c0499
RK
5081}
5082
b27cc46e
RK
5083.click-to-play-plugins-notification-link,
5084.center-item-link {
5085 margin: 0;
348c0499
RK
5086}
5087
2c225fcb
RK
5088.messageImage[value="plugin-hidden"] {
5089 list-style-image: url("chrome://browser/skin/notification-pluginNormal.png");
5090}
5091
5092/* Keep any changes to this style in sync with pluginProblem.css */
5093notification.pluginVulnerable {
5094}
5095
5096notification.pluginVulnerable .messageImage {
5097 list-style-image: url("chrome://browser/skin/notification-pluginBlocked.png");
5098}
5099
b27cc46e 5100/* === END plugin-doorhanger.inc.css === */
0142a07b 5101
d74db938
RK
5102/* === BEGIN login-doorhanger.inc.css === */
5103
2e389898
RK
5104#notification-popup[popupid="login-fill"] > .panel-arrowcontainer > .panel-arrowcontent {
5105 /* Since we display a sliding subview that extends to the border, we cannot
5106 * keep the default padding of arrow panels. We use the same padding in the
5107 * individual content views instead. Since we removed the padding, we also
5108 * have to ensure the contents are clipped to the border box. */
5109 padding: 0;
5110 overflow: hidden;
5111}
5112
5113#login-fill-mainview,
5114#login-fill-details {
5115 padding: var(--panel-arrowcontent-padding);
5116}
5117
5118#login-fill-doorhanger[inDetailView] > #login-fill-mainview {
5119 transform: translateX(-14px);
5120}
5121
5122#login-fill-mainview,
5123#login-fill-details {
5124 transition: transform 150ms;
5125}
5126
5127#login-fill-doorhanger:not([inDetailView]) > #login-fill-details {
5128 transform: translateX(105%);
5129}
5130
5131#login-fill-doorhanger:not([inDetailView]) > #login-fill-details:-moz-locale-dir(rtl) {
5132 transform: translateX(-105%);
5133}
5134
5135#login-fill-doorhanger[inDetailView] > #login-fill-clickcapturer {
5136 background-color: hsla(240,39%,100%,.1);
5137}
5138
d74db938
RK
5139#login-fill-testing {
5140 color: #FF0000;
5141 font-weight: bold;
5142}
5143
5144#login-fill-list {
5145 border: 1px solid #9C9CFF;
5146 max-height: 20em;
5147}
5148
7c0a01f2
RK
5149.login-fill-item[disabled] {
5150 color: #8050B0;
5151 background-color: #000000;
5152}
5153
5154.login-fill-item[disabled][selected] {
5155 background-color: #008484;
5156}
5157
d74db938
RK
5158.login-hostname {
5159 margin: 4px;
5160 font-weight: bold;
5161}
5162
7c0a01f2
RK
5163.login-fill-item.different-hostname > .login-hostname {
5164 color: #A09090;
5165 font-style: italic;
5166}
5167
d74db938
RK
5168.login-username {
5169 margin: 4px;
5170 color: #A09090;
5171}
5172
2e389898
RK
5173#login-fill-details {
5174 padding: 4px;
5175 background: var(--panel-arrowcontent-background);
5176 color: var(--panel-arrowcontent-color);
5177 background-clip: padding-box;
5178 border-left: 1px solid #9C9CFF;
5179 -moz-margin-start: 38px;
5180}
5181
d74db938
RK
5182/* === END login-doorhanger.inc.css === */
5183
43cc2806
RK
5184/* === BEGIN customizeMode.inc.css === */
5185
5186/* Customization mode */
e28f3f71 5187
5401f433
RK
5188#main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox {
5189 margin-bottom: 1em;
e28f3f71
RK
5190}
5191
5401f433
RK
5192#main-window:-moz-any([customize-entering],[customize-entered]) #content-deck,
5193#main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
e28f3f71
RK
5194#main-window:-moz-any([customize-entering],[customize-entered]) #navigator-toolbox {
5195 margin-left: 1em;
5196 margin-right: 1em;
43cc2806
RK
5197}
5198
e28f3f71
RK
5199#main-window:-moz-any([customize-entering],[customize-exiting]) #tab-view-deck {
5200 pointer-events: none;
5201}
5202
5203#main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
43cc2806 5204#PanelUI-contents > .panel-customization-placeholder {
e28f3f71 5205 -moz-outline-radius: 2.5px;
43cc2806
RK
5206 outline: 1px dashed transparent;
5207}
5208
e28f3f71
RK
5209#main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before {
5210 /* Prevent jumping of tabs when switching a window between inactive and active (bug 853415). */
5211 -moz-box-ordinal-group: 0;
5212 content: "";
5213 display: -moz-box;
5214 height: 100%;
5215 left: 0;
5216 outline-offset: -2px;
5217 pointer-events: none;
5218 position: absolute;
5219 top: 0;
5220 width: 100%;
5221}
5222
5223/* Shift the TabsToolbar outline up 2px since the #nav-bar is shifted up by 1px and the
5224 #TabsToolbar::after is a pixel higher to draw the bottom border of the tabstrip so this makes the
5225 offset from the bottom effectively the same as other targets (-2px). */
5226#main-window[customize-entered] #TabsToolbar.customization-target::before {
e20c83c3 5227/* top: -2px;*/
e28f3f71
RK
5228}
5229
5230/* The parents of the outline pseudo-elements need to be positioned so that the outline is positioned relative to it. */
5231#main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover,
5232#main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)),
5233#main-window[customize-entered] #nav-bar-customization-target.customization-target {
5234 position: relative;
5235}
5236
5237/* Most target outlines are shown on hover and drag over but the panel menu uses
5238 placeholders instead. */
5239#main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover::before,
5240#main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
5241/* nav-bar and panel outlines are always shown */
5242#nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
5243 outline-color: #A09090;
5244}
5245
5246#nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
5247 transition: outline-color 250ms linear;
5248}
5249
5250#PanelUI-contents[showoutline=true] > .panel-customization-placeholder {
5251 transition: outline-color 250ms linear;
43cc2806
RK
5252 outline-color: #9C9CFF;
5253}
5254
5255#PanelUI-contents > .panel-customization-placeholder {
5256 cursor: auto;
5257 outline-offset: -5px;
5258}
5259
e28f3f71 5260#main-window[customizing] .customization-target:not(#PanelUI-contents) {
43cc2806 5261 min-width: 100px;
e20c83c3
RK
5262/* padding-left: 10px;
5263 padding-right: 10px;*/
5264}
5265
5266#main-window:-moz-any([customize-entering],[customize-entered]) #tab-view-deck {
5267 padding: 0 2em 2em;
43cc2806
RK
5268}
5269
5270#customization-container {
5271 background-color: #000000;
93c91f62 5272 color: #FF9F00;
43cc2806
RK
5273}
5274
e28f3f71
RK
5275#customization-palette,
5276#customization-empty {
5277 padding: 0 15px 15px;
43cc2806
RK
5278}
5279
5280#customization-header {
cac2a998
RK
5281 font-size: 1.75em;
5282 line-height: 1.75em;
43cc2806 5283 color: #9C9CFF;
cac2a998
RK
5284 font-weight: 200;
5285 margin: 25px 25px 12px;
5286 padding-bottom: 12px;
5287 border-bottom: 1px solid #A09090;
43cc2806
RK
5288}
5289
5290#customization-panel-container {
e28f3f71
RK
5291 padding: 10px 10px 0px;
5292}
5293
5401f433 5294#main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
e28f3f71
RK
5295#customization-footer {
5296 /*background-color: rgb(236,236,236);*/
5401f433
RK
5297}
5298
5299#customization-footer {
e28f3f71 5300 border-top: 1px solid #9C9CFF;
93c91f62 5301 padding: 10px;
e28f3f71
RK
5302}
5303
5304.customizationmode-button {
93c91f62 5305 margin: 5px;
e28f3f71
RK
5306}
5307
5308.customizationmode-button:hover {
5309}
5310
e548e22e
RK
5311#customization-titlebar-visibility-button[checked],
5312#customization-devedition-theme-button[checked] {
5313 background-color: #008484;
5314}
5315
5316#customization-titlebar-visibility-button[checked]:hover,
5317#customization-devedition-theme-button[checked]:hover {
5318 background-color: #FFCF00;
5319}
5320
5321#customization-titlebar-visibility-button[checked]:hover:active,
5322#customization-devedition-theme-button[checked]:hover:active {
5323 background-color: #FF9F00;
5324}
5325
e28f3f71
RK
5326.customizationmode-button[disabled="true"] {
5327}
5328
93c91f62
RK
5329.customizationmode-button > .box-inherit > .box-inherit > .button-icon,
5330.customizationmode-button > .button-box > .button-icon {
5331/* height: 24px;*/
5332}
5333
e28f3f71
RK
5334#customization-titlebar-visibility-button {
5335 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle.png");
b7f3670c 5336 -moz-image-region: rect(0, 16px, 16px, 0);
e28f3f71
RK
5337}
5338
b7f3670c
RK
5339#customization-titlebar-visibility-button:hover {
5340 -moz-image-region: rect(16px, 16px, 32px, 0);
5341}
5342
ae90b726
RK
5343#customization-lwtheme-button,
5344#customization-titlebar-visibility-button {
5345 padding: 0px 5px;
5346}
5347
b7f3670c
RK
5348#customization-titlebar-visibility-button > .button-box {
5349 padding-top: 0;
5350 padding-bottom: 1px;
5351}
5352
5353#customization-titlebar-visibility-button:hover:active > .button-box {
5354 padding-top: 1px;
5355 padding-bottom: 0;
5356}
5357
ae90b726 5358#customization-lwtheme-button > .box-inherit > .box-inherit > .button-text,
e28f3f71
RK
5359#customization-titlebar-visibility-button > .button-box > .button-text {
5360 /* Sadly, button.css thinks its margins are perfect for everyone. */
b7f3670c 5361 -moz-margin-start: 5px !important;
e28f3f71
RK
5362}
5363
05148fed
RK
5364#customization-lwtheme-button > .box-inherit > .box-inherit > .button-icon {
5365 width: 20px;
5366 height: 20px;
5367 border-radius: 2px;
5368 background-size: contain;
5369}
5370
93c91f62
RK
5371#customization-titlebar-visibility-button > .button-box > .button-icon {
5372 vertical-align: middle;
5373}
5374
e28f3f71 5375#customization-titlebar-visibility-button[checked] {
b7f3670c 5376 -moz-image-region: rect(0, 32px, 16px, 16px);
e28f3f71
RK
5377 background-color: #008484;
5378}
5379
b7f3670c
RK
5380#customization-titlebar-visibility-button[checked]:hover {
5381 -moz-image-region: rect(16px, 32px, 32px, 16px);
5382 background-color: #FFCF00;
5383}
5384
5385#customization-titlebar-visibility-button[checked]:hover:active {
5386 background-color: #FF9F00;
5387}
5388
2e389898
RK
5389@media (min-resolution: 1.1dppx) {
5390 #customization-titlebar-visibility-button {
5391 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle@2x.png");
5392 -moz-image-region: rect(0, 48px, 48px, 0);
5393 }
5394
5395 #customization-titlebar-visibility-button:hover {
5396 -moz-image-region: rect(48px, 48px, 96px, 0);
5397 }
5398
5399 #customization-titlebar-visibility-button[checked] {
5400 -moz-image-region: rect(0, 96px, 48px, 48px);
5401 }
5402
5403 #customization-titlebar-visibility-button[checked]:hover {
5404 -moz-image-region: rect(48px, 96px, 96px, 48px);
5405 }
5406}
5407
e28f3f71 5408#main-window[customize-entered] #customization-panel-container {
43cc2806
RK
5409 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5410 background-position: left top;
5411 background-repeat: repeat;
5412 background-size: auto;
5413 background-attachment: fixed;
5414}
5415
e28f3f71
RK
5416toolbarpaletteitem[place="toolbar"] {
5417 transition: border-width 250ms ease-in-out;
43cc2806
RK
5418}
5419
5420toolbarpaletteitem[mousedown] {
5421 outline: 1px solid #008484;
5422 cursor: -moz-grabbing;
5423 opacity: 0.8;
5424}
5425
5426.panel-customization-placeholder,
5427toolbarpaletteitem[place="palette"],
5428toolbarpaletteitem[place="panel"] {
e28f3f71
RK
5429 transition: transform .3s ease-in-out;
5430}
5431
5432#customization-palette {
5433 transition: opacity .3s ease-in-out;
5434 opacity: 0;
43cc2806
RK
5435}
5436
e28f3f71
RK
5437#customization-palette[showing="true"] {
5438 opacity: 1;
5439}
5440
5441toolbarpaletteitem[notransition].panel-customization-placeholder,
5442toolbarpaletteitem[notransition][place="toolbar"],
43cc2806
RK
5443toolbarpaletteitem[notransition][place="palette"],
5444toolbarpaletteitem[notransition][place="panel"] {
e28f3f71 5445 transition: none;
43cc2806
RK
5446}
5447
e28f3f71 5448toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon,
19988d2d 5449toolbarpaletteitem > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon,
e28f3f71
RK
5450toolbarpaletteitem > toolbaritem.panel-wide-item,
5451toolbarpaletteitem > toolbarbutton[type="menu-button"] {
5452 transition: transform .3s cubic-bezier(.6, 2, .75, 1.5) !important;
43cc2806
RK
5453}
5454
d0e580f1 5455toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon,
19988d2d 5456toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon {
e28f3f71
RK
5457 transform: scale(1.3);
5458}
5459
5460toolbarpaletteitem[mousedown] > toolbaritem.panel-wide-item,
5461toolbarpaletteitem[mousedown] > toolbarbutton[type="menu-button"] {
43cc2806
RK
5462 transform: scale(1.1);
5463}
5464
5465/* Override the toolkit styling for items being dragged over. */
5466toolbarpaletteitem[place="toolbar"] {
5467 border-left-width: 0;
5468 border-right-width: 0;
5469 margin-right: 0;
5470 margin-left: 0;
5471}
5472
5473#customization-palette:not([hidden]) {
5474 margin-bottom: 25px;
5475}
5476
43cc2806
RK
5477#wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
5478#wrapper-edit-controls[place="palette"] > #edit-controls > separator,
e28f3f71
RK
5479#wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton,
5480#wrapper-zoom-controls[place="palette"] > #zoom-controls > separator {
5481 margin-top: 20px;
43cc2806
RK
5482}
5483
5484#wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
c0f6797e 5485#wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton {
43cc2806
RK
5486 margin-left: 0;
5487 margin-right: 0;
e28f3f71
RK
5488 max-width: 24px;
5489 min-width: 24px;
43cc2806 5490 max-height: 24px;
5401f433 5491 min-height: 24px;
e28f3f71 5492 padding: 4px;
43cc2806
RK
5493}
5494
e28f3f71
RK
5495#wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon,
5496#wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon {
5497 width: 16px;
43cc2806
RK
5498}
5499
e28f3f71
RK
5500#wrapper-edit-controls > #edit-controls > toolbarbutton > .toolbarbutton-icon {
5501 opacity: 1; /* To ensure these buttons always look enabled in customize mode */
5502}
5503
c0f6797e
RK
5504#wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button,
5505#wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button + separator {
e28f3f71
RK
5506 display: none;
5507}
5508
5509#wrapper-personal-bookmarks:not([place="toolbar"]) > #personal-bookmarks {
5510 -moz-box-pack: center;
5511 min-height: 48px;
43cc2806
RK
5512}
5513
20752032
RK
5514#personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
5515 -moz-margin-end: 5px;
5516}
5517
43cc2806
RK
5518#customization-palette > toolbarpaletteitem > label {
5519 text-align: center;
5520 margin-left: 0;
5521 margin-right: 0;
5522}
5523
cac2a998
RK
5524#customization-lwtheme-menu > .panel-arrowcontainer > .panel-arrowcontent {
5525 -moz-box-orient: vertical;
5526 /* Make the panel padding uniform across all platforms due to the
5527 styling of the section headers and footer. */
5528 padding: 10px;
5529}
5530
5531.customization-lwtheme-menu-theme > .toolbarbutton-icon {
5532 width: 32px;
5533 height: 32px;
5534}
5535
5536.customization-lwtheme-menu-theme {
5537 -moz-appearance: none;
5538 margin: 0 -5px 5px;
5539 padding-top: 0;
5540 -moz-padding-end: 5px;
5541 padding-bottom: 0;
5542 -moz-padding-start: 0;
5543}
5544
8837ac2c
RK
5545.customization-lwtheme-menu-theme[defaulttheme] {
5546 list-style-image: url(chrome://browser/skin/Fxtheme-switcher-icon.png);
5547}
5548
cac2a998
RK
5549.customization-lwtheme-menu-theme[active="true"] {
5550 background-color: #008484;
5551}
5552
5553.customization-lwtheme-menu-theme > .toolbarbutton-icon {
5554 margin: 5px;
5555}
5556
5557.customization-lwtheme-menu-theme > .toolbarbutton-text {
5558 text-align: start;
5559}
5560
5561#customization-lwtheme-menu-header,
5562#customization-lwtheme-menu-recommended {
5563 padding: 10px;
5564 margin-bottom: 5px;
5565}
5566
5567#customization-lwtheme-menu-header,
5568#customization-lwtheme-menu-recommended,
5569#customization-lwtheme-menu-footer {
5570 background-color: #A09090;
5571 color: #000000;
5572 margin-right: -10px;
5573 margin-left: -10px;
5574}
5575
5576#customization-lwtheme-menu-header {
5577 margin-top: -10px;
5578 border-top-right-radius: 3px;
5579 border-top-left-radius: 3px;
5580}
5581
5582#customization-lwtheme-menu-recommended {
5583}
5584
5585#customization-lwtheme-menu-footer {
5586 margin-bottom: -10px;
5587 border-bottom-right-radius: 3px;
5588 border-bottom-left-radius: 3px;
5589}
5590
5591.customization-lwtheme-menu-footeritem {
5592 -moz-appearance: none;
5593 -moz-box-flex: 1;
5594 background-color: #C09070;
5595 color: #000000;
5596 border: 1px solid transparent;
5597 padding: 10px;
5598 margin-left: 0;
5599 margin-right: 0;
5600}
5601
5602.customization-lwtheme-menu-footeritem:hover {
5603 background-color: #FFCF00;
5604}
5605
8837ac2c 5606.customization-lwtheme-menu-footeritem:first-child {
cac2a998
RK
5607}
5608
43cc2806
RK
5609/* === END customizeMode.inc.css === */
5610
e28f3f71
RK
5611/* === BEGIN customizeTip.inc.css === */
5612
5613#customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent {
5614 padding: 0;
5615 margin: 0;
5616 min-width: 400px;
5617 max-width: 1000px;
5618 min-height: 200px;
5619 border-radius: 3px;
5620/* background-image: linear-gradient(90deg, #a0dfff 0%, #ceeeff 100%);*/
5621 border: 1px solid #9C9CFF;
d1e87ec1 5622 color: #FF9F00;
e28f3f71
RK
5623}
5624
5625#customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent:-moz-locale-dir(rtl) {
5626/* background-image: linear-gradient(90deg, #ceeeff 0%, #a0dfff 100%);*/
5627}
5628
5629.customization-tipPanel-infoBox {
5630 margin: 20px 25px 25px;
5631 width: 25px;
5632 background-image: url("chrome://browser/skin/customizableui/info-icon-customizeTip.png");
5633 background-repeat: no-repeat;
5634}
5635
5636.customization-tipPanel-content {
5637 margin: 25px 0;
5638 font-size: 12px;
5639 line-height: 18px;
5640}
5641
5642.customization-tipPanel-em {
5643 margin: 0;
5644 font-weight: bold;
5645}
5646
5647.customization-tipPanel-contentImage {
5648 margin-top: 25px;
5649 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration.png");
5650 min-width: 300px;
5651 max-width: 300px;
5652 min-height: 190px;
5653 max-height: 190px;
5654 display: -moz-box;
5655}
5656
5657.customization-tipPanel-contentImage:-moz-locale-dir(rtl) {
5658 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration-rtl.png");
5659}
5660
5661.customization-tipPanel-link {
5662 -moz-appearance: none;
5663 background: transparent;
5664 border: none;
5665 box-shadow: none;
5666 color: #3333FF;
5667 margin: 0;
5668 cursor: pointer;
5669}
5670
5671.customization-tipPanel-link > .button-box > .button-text {
5672 margin: 0 !important;
5673}
5674
5675.customization-tipPanel-closeBox > .close-icon {
5676 -moz-appearance: none;
5677 border: 0;
5678 -moz-margin-end: -25px;
5679}
5680
5681#customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"],
5682#customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
5683 list-style-image: url("chrome://browser/skin/customizableui/panelarrow-customizeTip.png");
5684}
5685
5686/* === END customizeTip.inc.css === */
5687
c0f6797e
RK
5688/**
5689 * This next rule is a hack to disable subpixel anti-aliasing on all
5690 * labels during the customize mode transition. Subpixel anti-aliasing
5691 * on Windows with Direct2D layers acceleration is particularly slow to
5692 * paint, so this hack is how we sidestep that performance bottleneck.
5693 */
5694#main-window:-moz-any([customize-entering],[customize-exiting]) label {
5695 transform: perspective(0.01px);
5696}
5697
93c91f62 5698#main-window[customize-entered] > #tab-view-deck {
43cc2806
RK
5699 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5700 background-attachment: fixed;
5701}
5702
93c91f62
RK
5703#main-window[customization-lwtheme] > #tab-view-deck:-moz-lwtheme {
5704 background-repeat: no-repeat;
5705 background-position: right top;
5706 background-attachment: fixed;
5707 /* The image will get set from CustomizeMode.jsm */
5708 background-image: none;
5709 background-color: transparent;
5710}
5711
5712#main-window[customization-lwtheme]:-moz-lwtheme {
5713 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5714 background-repeat: repeat;
5715 background-attachment: fixed;
5716 background-position: left top;
5717}
5718
5401f433
RK
5719#main-window[customize-entered] #browser-bottombox,
5720#main-window[customize-entered] #customization-container {
43cc2806
RK
5721 border-left: 1px solid #9C9CFF;
5722 border-right: 1px solid #9C9CFF;
5723 background-clip: padding-box;
5724}
5725
5401f433
RK
5726#main-window[customize-entered] #browser-bottombox {
5727 border-bottom: 1px solid #9C9CFF;
5728}
5729
e20c83c3
RK
5730#customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"] {
5731 margin-right: -2px;
5732}
5733
5734#customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
5735 margin-left: -2px;
5736}
5737
5738/* End customization mode */
5739
51994fad
RK
5740/* Private browsing indicators */
5741
5742/**
5743 * Currently, we have two places where we put private browsing indicators on
5744 * Windows. When tabsintitlebar is enabled, we draw the indicator in the titlebar.
5745 * When tabsintitlebar is disabled, we draw the indicator at the end of the
5746 * tabstrip. The titlebar indicator is the fiddliest of the bunch, since we
5747 * want the bottom border of the image to line up with the bottom of the window
5748 * caption buttons. That's why there's so much special-casing going on in here.
5749 */
5750.private-browsing-indicator {
5751 display: none;
5752 pointer-events: none;
e20c83c3
RK
5753}
5754
51994fad
RK
5755#private-browsing-indicator-titlebar {
5756 display: block;
5757 position: absolute;
e20c83c3
RK
5758}
5759
51994fad
RK
5760#main-window[privatebrowsingmode=temporary][tabsintitlebar] #private-browsing-indicator-titlebar > .private-browsing-indicator {
5761 display: block;
e20c83c3
RK
5762}
5763
51994fad
RK
5764#main-window[privatebrowsingmode=temporary]:-moz-any([inFullscreen],:not([tabsintitlebar])) #TabsToolbar > .private-browsing-indicator {
5765 display: -moz-box;
5766}
5767
5768#TabsToolbar > .private-browsing-indicator {
5769 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") no-repeat center -3px;
5770 -moz-margin-start: 4px;
5771 width: 48px;
5772}
5773
5774/* Bug 1008183: We're intentionally using the titlebar asset here for fullscreen
5775 * mode, since the tabstrip "mimics" the titlebar in that case with its own
5776 * min/max/close window buttons.
5777 */
5778#private-browsing-indicator-titlebar > .private-browsing-indicator,
5779#main-window[inFullscreen] #TabsToolbar > .private-browsing-indicator {
5780 background: url("chrome://browser/skin/privatebrowsing-mask-titlebar.png") no-repeat center 0px;
5781 -moz-margin-end: 4px;
43cc2806 5782 width: 40px;
51994fad
RK
5783 height: 20px;
5784 position: relative;
43cc2806
RK
5785}
5786
51994fad
RK
5787/* This one is for Linux */
5788#main-window[privatebrowsingmode=temporary] #private-browsing-indicator {
5789 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") center no-repeat;
5790 width: 48px;
5791}
5792
5793/* End private browsing indicators */
5794
43cc2806
RK
5795/* === BEGIN UITour.inc.css === */
5796
5797/* UI Tour */
5798
2a8b2b48
RK
5799#UITourHighlightContainer {
5800 -moz-appearance: none;
5801 border: none;
5802 background-color: transparent;
5803 /* This is a buffer to compensate for the movement in the "wobble" effect */
5804 padding: 4px;
5805}
5806
5807#UITourHighlight {
5808 background-image: radial-gradient(50% 100%, rgba(0,132,132,0.4) 50%, rgba(0,132,132,0.6) 100%);
5809 border-radius: 40px;
5810 border: 1px solid #9C9CFF;
5811 /* The box-shadow opacity needs to be < 0.5 so it doesn't appear at 100% opacity
5812 on Linux without an X compositor where opacity is either 0 or 1. */
5813 box-shadow: 0 0 3px 0 rgba(0,0,0,0.49);
43cc2806
RK
5814 min-height: 32px;
5815 min-width: 32px;
1bf116f8
RK
5816}
5817
2a8b2b48
RK
5818#UITourTooltipBody {
5819 -moz-margin-end: 14px;
5820}
5821
5822#UITourTooltipBody > vbox {
5823 padding-top: 4px;
43cc2806
RK
5824}
5825
2a8b2b48
RK
5826#UITourTooltipIconContainer {
5827 -moz-margin-start: -16px;
5828}
5829
5830#UITourTooltipIcon {
5831 width: 48px;
5832 height: 48px;
5833 -moz-margin-start: 28px;
5834 -moz-margin-end: 28px;
5835}
5836
5837#UITourTooltipTitle,
5838#UITourTooltipDescription {
5839 max-width: 20rem;
43cc2806
RK
5840}
5841
5842#UITourTooltipTitle {
2a8b2b48 5843 font-size: 1.45rem;
43cc2806 5844 font-weight: bold;
2a8b2b48
RK
5845 -moz-margin-start: 0;
5846 -moz-margin-end: 0;
5847 margin: 0 0 9px 0;
43cc2806
RK
5848}
5849
5850#UITourTooltipDescription {
2a8b2b48
RK
5851 -moz-margin-start: 0;
5852 -moz-margin-end: 0;
5853 font-size: 1.15rem;
5854 line-height: 1.8rem;
5855 margin-bottom: 0; /* Override global.css */
5856}
5857
5858#UITourTooltipClose {
5859 -moz-appearance: none;
5860 border: none;
5861 background-color: transparent;
5862 min-width: 0;
5863 -moz-margin-start: 4px;
5864 margin-top: -2px;
5865}
5866
5867#UITourTooltipClose > .toolbarbutton-text {
5868 display: none;
5869}
5870
5871#UITourTooltipButtons {
5872 -moz-box-pack: end;
5873 background-color: rgba(0,0,0,.2);
5874 border-top: 1px solid rgba(0,0,0,.4);
5875 margin: 24px -16px -16px;
5876 padding: 2em 15px;
5877}
5878
19988d2d 5879#UITourTooltipButtons > label,
2a8b2b48
RK
5880#UITourTooltipButtons > button {
5881 margin: 0 15px;
5882}
5883
19988d2d 5884#UITourTooltipButtons > label:first-child,
2a8b2b48
RK
5885#UITourTooltipButtons > button:first-child {
5886 -moz-margin-start: 0;
5887}
5888
5889#UITourTooltipButtons > button[image] > .button-box > .button-icon {
5890 width: 16px;
5891 height: 16px;
5892 -moz-margin-end: 5px;
5893}
5894
19988d2d 5895#UITourTooltipButtons > label,
2a8b2b48
RK
5896#UITourTooltipButtons > button .button-text {
5897 font-size: 1.15rem;
5898}
5899
5900#UITourTooltipButtons > button:not(.button-link) {
5901 -moz-appearance: none;
5902 background-color: #C09070;
5903 border-radius: 3000px;
5904 border: none;
5905 color: #000000;
5906 padding: 4px 30px;
5907 transition-property: background-color, color;
5908 transition-duration: 150ms;
5909}
5910
5911#UITourTooltipButtons > button:not(.button-link):not(:active):hover {
5912 background-color: #FFCF00;
5913 color: #000000;
5914}
5915
19988d2d 5916#UITourTooltipButtons > label,
2a8b2b48
RK
5917#UITourTooltipButtons > button.button-link {
5918 -moz-appearance: none;
5919 background: transparent;
5920 border: none;
5921 box-shadow: none;
5922 color: rgba(0,0,0,0.35);
5923 padding-left: 10px;
5924 padding-right: 10px;
5925}
5926
5927#UITourTooltipButtons > button.button-link:hover {
5928 color: black;
5929}
5930
5931/* The primary button gets the same color as the customize button. */
5932#UITourTooltipButtons > button.button-primary {
5933 background-color: #A06060; /* LCARS default button background color */
5934 color: #000000;
5935 padding-left: 30px;
5936 padding-right: 30px;
5937}
5938
5939#UITourTooltipButtons > button.button-primary:not(:active):hover {
5940 background-color: #FFCF00;
5941 color: #000000;
43cc2806
RK
5942}
5943
20752032
RK
5944/* Notification overrides for Heartbeat UI */
5945
5946notification.heartbeat {
5947 background-color: #A09090;
0ef54c72 5948/* height: 40px;*/
20752032
RK
5949}
5950
5951@keyframes pulse-onshow {
5952 0% {
5953 opacity: 0;
5954 transform: scale(1.0);
5955 }
5956 25% {
5957 opacity: 1;
5958 transform: scale(1.1);
5959 }
5960 50% {
5961 transform: scale(1.0);
5962 }
5963 75% {
5964 transform: scale(1.1);
5965 }
5966 100% {
5967 transform: scale(1.0);
5968 }
5969}
5970
5971@keyframes pulse-twice {
5972 0% {
5973 transform: scale(1.1);
5974 }
5975 50% {
5976 transform: scale(0.8);
5977 }
5978 100% {
5979 transform: scale(1);
5980 }
5981}
5982
5983.messageText.heartbeat {
5984 color: #000000;
0ef54c72
RK
5985/* text-shadow: none; */
5986 -moz-margin-start: 0px;
20752032
RK
5987}
5988
5989.messageImage.heartbeat {
0ef54c72
RK
5990 width: 24px;
5991 height: 24px;
5992 -moz-margin-start: 8px;
5993 -moz-margin-end: 8px;
20752032
RK
5994}
5995
5996.messageImage.heartbeat.pulse-onshow {
5997 animation-name: pulse-onshow;
5998 animation-duration: 1.5s;
5999 animation-iteration-count: 1;
6000 animation-timing-function: cubic-bezier(.7,1.8,.9,1.1);
6001}
6002
6003.messageImage.heartbeat.pulse-twice {
6004 animation-name: pulse-twice;
6005 animation-duration: 1s;
6006 animation-iteration-count: 2;
6007 animation-timing-function: linear;
6008}
6009
0ef54c72
RK
6010/* Learn More link styles */
6011.heartbeat > .text-link {
6012 color: #3333FF;
6013 -moz-margin-start: 0px;
6014}
6015
6016.heartbeat > .text-link:hover {
6017 color: #9C9CFF;
6018 text-decoration: none;
6019}
6020
6021.heartbeat > .text-link:hover:active {
6022 color: #FF9F00;
6023}
6024
20752032
RK
6025/* Heartbeat UI Rating Star Classes */
6026.heartbeat > #star-rating-container {
6027 display: -moz-box;
0ef54c72 6028/* margin-bottom: 4px;*/
20752032
RK
6029}
6030
6031.heartbeat > #star-rating-container > #star5 {
6032 -moz-box-ordinal-group: 5;
6033}
6034
6035.heartbeat > #star-rating-container > #star4 {
6036 -moz-box-ordinal-group: 4;
6037}
6038
6039.heartbeat > #star-rating-container > #star3 {
6040 -moz-box-ordinal-group: 3;
6041}
6042
6043.heartbeat > #star-rating-container > #star2 {
6044 -moz-box-ordinal-group: 2;
6045}
6046
6047.heartbeat > #star-rating-container > .star-x {
6048 background: url("chrome://browser/skin/heartbeat-star-off.svg");
6049 cursor: pointer;
0ef54c72
RK
6050 /* Overrides the -moz-margin-end for all platforms defined in the .plain class */
6051 -moz-margin-end: 4px !important;
6052 width: 16px;
6053 height: 16px;
20752032
RK
6054}
6055
6056.heartbeat > #star-rating-container > .star-x:hover,
6057.heartbeat > #star-rating-container > .star-x:hover ~ .star-x {
6058 background: url("chrome://browser/skin/heartbeat-star-lit.svg");
20752032
RK
6059}
6060
43cc2806 6061/* === END UITour.inc.css === */
c0f6797e
RK
6062
6063#UITourTooltipButtons {
19988d2d
RK
6064 /**
6065 * Override the --panel-arrowcontent-padding so the background extends
6066 * to the sides and bottom of the panel.
6067 */
6068 margin-left: -10px;
6069 margin-right: -10px;
6070 margin-bottom: -10px;
c0f6797e 6071}
fff8097b
RK
6072
6073/* === BEGIN contextmenu.inc.css === */
6074
6075menugroup > .menuitem-iconic[disabled="true"] > .menu-iconic-left {
6076}
6077
6078#context-navigation > .menuitem-iconic {
6079 -moz-box-flex: 1;
6080 -moz-box-pack: center;
6081 -moz-box-align: center;
6082}
6083
6084#context-navigation > .menuitem-iconic[disabled="true"] {
6085 background-color: transparent;
6086}
6087
6088#context-navigation > .menuitem-iconic > .menu-iconic-left {
6089 -moz-appearance: none;
6090}
6091
93c91f62
RK
6092#context-back > .menu-iconic-left {
6093 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back"); */
fff8097b
RK
6094 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
6095 -moz-image-region: rect(0, 54px, 18px, 36px);
6096}
6097
93c91f62
RK
6098#context-back:not([disabled="true"]):hover > .menu-iconic-left {
6099 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back-active"); */
fff8097b
RK
6100 -moz-image-region: rect(18px, 54px, 36px, 36px);
6101}
6102
93c91f62
RK
6103#context-back[disabled="true"] > .menu-iconic-left {
6104 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back-disabled"); */
fff8097b
RK
6105 -moz-image-region: rect(36px, 54px, 54px, 36px);
6106}
6107
93c91f62
RK
6108#context-forward > .menu-iconic-left {
6109 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward"); */
fff8097b
RK
6110 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
6111 -moz-image-region: rect(0, 72px, 18px, 54px);
6112}
6113
93c91f62
RK
6114#context-forward:not([disabled="true"]):hover > .menu-iconic-left {
6115 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward-active"); */
fff8097b
RK
6116 -moz-image-region: rect(18px, 72px, 36px, 54px);
6117}
6118
93c91f62
RK
6119#context-forward[disabled="true"] > .menu-iconic-left {
6120 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward-disabled"); */
fff8097b
RK
6121 -moz-image-region: rect(36px, 72px, 54px, 54px);
6122}
6123
93c91f62
RK
6124#context-reload > .menu-iconic-left {
6125 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload"); */
52d7b436 6126 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
fff8097b
RK
6127 -moz-image-region: rect(0, 14px, 14px, 0);
6128}
6129
93c91f62
RK
6130#context-reload:not([disabled="true"]):hover > .menu-iconic-left {
6131 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload-active"); */
fff8097b
RK
6132 -moz-image-region: rect(14px, 14px, 28px, 0);
6133}
6134
93c91f62
RK
6135#context-reload[disabled="true"] > .menu-iconic-left {
6136 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload-disabled"); */
fff8097b
RK
6137 -moz-image-region: rect(28px, 14px, 42px, 0);
6138}
6139
93c91f62
RK
6140#context-stop > .menu-iconic-left {
6141 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop"); */
52d7b436 6142 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
fff8097b
RK
6143 -moz-image-region: rect(0, 28px, 14px, 14px);
6144}
6145
93c91f62
RK
6146#context-stop:not([disabled="true"]):hover > .menu-iconic-left {
6147 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop-active"); */
fff8097b
RK
6148 -moz-image-region: rect(14px, 28px, 28px, 14px);
6149}
6150
93c91f62
RK
6151#context-stop[disabled="true"] > .menu-iconic-left {
6152 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop-disabled"); */
fff8097b
RK
6153 -moz-image-region: rect(28px, 28px, 42px, 14px);
6154}
6155
93c91f62
RK
6156#context-bookmarkpage > .menu-iconic-left {
6157 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark"); */
fff8097b
RK
6158 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
6159 -moz-image-region: rect(0, 144px, 18px, 126px);
6160}
6161
93c91f62
RK
6162#context-bookmarkpage:not([disabled="true"]):hover > .menu-iconic-left {
6163 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark-active"); */
fff8097b
RK
6164 -moz-image-region: rect(18px, 144px, 36px, 126px);
6165}
6166
93c91f62
RK
6167#context-bookmarkpage[disabled="true"] > .menu-iconic-left {
6168 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark-disabled"); */
fff8097b
RK
6169 -moz-image-region: rect(36px, 144px, 54px, 126px);
6170}
6171
2e389898
RK
6172#context-bookmarkpage[starred=true] {
6173 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked"); */
6174 -moz-image-region: rect(0px, 162px, 18px, 144px);
6175}
6176
6177#context-bookmarkpage[starred=true][_moz-menuactive=true] {
6178 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-active"); */
6179 -moz-image-region: rect(18px, 162px, 36px, 144px);
6180}
6181
6182#context-bookmarkpage[starred=true][disabled=true] {
6183 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-disabled"); */
6184 -moz-image-region: rect(36px, 162px, 54px, 144px);
6185}
6186
fff8097b
RK
6187#context-back:-moz-locale-dir(rtl),
6188#context-forward:-moz-locale-dir(rtl),
6189#context-reload:-moz-locale-dir(rtl) {
6190 transform: scaleX(-1);
6191}
6192
6193#context-navigation > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
93c91f62
RK
6194 width: 18px; /*16px;*/
6195 height: 18px; /*16px;*/
fff8097b
RK
6196 margin: 7px;
6197}
6198
6199#context-navigation > #context-reload > .menu-iconic-left > .menu-iconic-icon,
6200#context-navigation > #context-stop > .menu-iconic-left > .menu-iconic-icon {
6201 width: 14px;
6202 height: 14px;
6203 margin: 9px;
6204}
6205
20752032
RK
6206#context-media-eme-learnmore {
6207 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
6208}
6209
e184b661
RK
6210#context-media-eme-learnmore {
6211 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
6212}
6213
fff8097b 6214/* === END contextmenu.inc.css === */
3d64e0ce
RK
6215
6216#context-navigation {
6217}
6218
6219#context-sep-navigation {
6220/* margin-top: -4px; */
6221}
b1dfcf32
RK
6222
6223.browser-action-panel > .panel-arrowcontainer > .panel-arrowcontent {
6224 padding: 0;
6225}