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