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