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