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