second part of syncing LCARStrek with Firefox 45-48 devtools theme changes
[themes.git] / LCARStrek / browser / browser.css
... / ...
CommitLineData
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/. */
4
5@import url("chrome://global/skin/");
6@import url("downloads/indicator.css");
7
8@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
9@namespace html url("http://www.w3.org/1999/xhtml");
10@namespace svg url("http://www.w3.org/2000/svg");
11
12toolbar {
13 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar");
14}
15
16toolbar[customizable="true"] {
17 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-browsercustom");
18}
19
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. */
22 toolbar[customizable="true"]:not([nowindowdrag="true"]) {
23 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-drag-browsercustom");
24 }
25}
26
27toolbar[type="menubar"][autohide="true"] {
28 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-menubar-autohide");
29}
30
31#toolbar-menubar[autohide="true"] {
32 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-menubar-autohide-browsercustom");
33}
34
35menubar {
36 -moz-binding: url("chrome://global/skin/globalBindings.xml#menubar");
37}
38
39:root {
40 /*--backbutton-urlbar-overlap: 5px;*/
41
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
47 --identity-box-verified-background-color: #000000;
48
49 --panel-separator-color: #A09090;
50
51 --urlbar-separator-color: #9C9CFF;
52}
53
54#menubar-items {
55 -moz-box-orient: vertical; /* for flex hack */
56}
57
58#main-menubar {
59 -moz-box-flex: 1; /* make menu items expand to fill toolbar height */
60}
61
62/* ::::: primary toolbar ::::: */
63
64.toolbar-primary > .toolbar-box > .toolbar-holder {
65 background-color: #A09090;
66}
67
68.toolbar-primary > .toolbar-box > .toolbar-startcap,
69.toolbar-primary > .toolbar-box > .toolbar-endcap {
70 background-color: #9C9CFF;
71}
72
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
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. */
82#toolbar-menubar:not([moz-collapsed=true]):not([autohide=true]) ~ #TabsToolbar,
83#toolbar-menubar:not([moz-collapsed=true])[autohide=true]:not([inactive]) ~ #TabsToolbar {
84/* margin-top: 3px;*/
85}
86
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 {
89/* margin-top: var(--space-above-tabbar);*/
90}
91
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. */
94 #main-window[tabsintitlebar]:not([inFullscreen="true"]) #TabsToolbar {
95 padding-left: 60px;
96 }
97}
98
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;
102}
103
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
111#navigator-toolbox {
112}
113
114#navigator-toolbox::after {
115 content: "";
116 display: -moz-box;
117 -moz-box-ordinal-group: 101; /* tabs toolbar is 100 */
118 height: 1px;
119}
120
121#navigator-toolbox > toolbar {
122}
123
124#navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(:-moz-lwtheme) {
125}
126
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
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. */
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;
147 }
148
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;
153 }
154
155 #main-window[tabsintitlebar] #main-menubar > menu:not(:-moz-lwtheme) {
156 /*color: inherit;*/
157 }
158
159 #main-window[tabsintitlebar] #titlebar:-moz-lwtheme {
160 visibility: hidden;
161 }
162
163 #main-window[tabsintitlebar] #titlebar-content:-moz-lwtheme {
164 -moz-binding: url("chrome://global/content/bindings/general.xml#windowdragbox");
165 visibility: visible;
166 }
167}
168
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. */
171 #titlebar-buttonbox > .titlebar-button {
172 display: none;
173 }
174}
175
176#nav-bar {
177 /* Position the toolbar above the bottom of background tabs */
178 position: relative;
179 z-index: 1;
180}
181
182#personal-bookmarks {
183/* min-height: 24px; */
184}
185
186#PersonalToolbar > #home-button {
187 -moz-box-orient: horizontal;
188}
189
190#PersonalToolbar > #home-button > .toolbarbutton-text {
191 display: block;
192}
193
194#print-preview-toolbar:not(:-moz-lwtheme) {
195 /* -moz-appearance: toolbox; */
196}
197
198#browser-bottombox:not(:-moz-lwtheme) {
199}
200
201/* ::::: titlebar ::::: */
202
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
213#main-window[sizemode="normal"] > #titlebar {
214 margin-top: -3px;
215 margin-bottom: 3px;
216}
217
218#main-window[sizemode="maximized"] > #titlebar {
219 margin-top: 4px;
220}
221
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. */
224 #main-window[sizemode="normal"] > #titlebar,
225 #main-window[sizemode="maximized"] > #titlebar {
226 margin-top: 19px;
227 /* There is a margin-bottom set to -23 by code. */
228 }
229}
230
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 */
237#titlebar-buttonbox,
238#main-window[sizemode="maximized"] #titlebar-buttonbox {
239 -moz-appearance: none;
240 margin-top: 6px;
241 margin-top: 4px;
242 -moz-margin-end: 3px;
243 z-index: 1;
244}
245
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 */
255#titlebar-min {
256 list-style-image: url("chrome://browser/skin/caption-buttons.svg#minimize");
257}
258
259#titlebar-min:hover {
260 list-style-image: url("chrome://browser/skin/caption-buttons.svg#minimize-hover");
261}
262
263#titlebar-max {
264 list-style-image: url("chrome://browser/skin/caption-buttons.svg#maximize");
265}
266
267#titlebar-max:hover {
268 list-style-image: url("chrome://browser/skin/caption-buttons.svg#maximize-hover");
269}
270
271#main-window[sizemode="maximized"] #titlebar-max {
272 list-style-image: url("chrome://browser/skin/caption-buttons.svg#restore");
273}
274
275#main-window[sizemode="maximized"] #titlebar-max:hover {
276 list-style-image: url("chrome://browser/skin/caption-buttons.svg#restore-hover");
277}
278
279#titlebar-close {
280 list-style-image: url("chrome://browser/skin/caption-buttons.svg#close");
281}
282
283#titlebar-close:hover {
284 list-style-image: url("chrome://browser/skin/caption-buttons.svg#close-hover");
285}
286
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. */
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
312/* ::::: bookmark buttons ::::: */
313
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;
324 -moz-padding-start: 4px;
325 -moz-padding-end: 2px;*/
326}
327
328.bookmark-item > .toolbarbutton-icon,
329#personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
330 width: 16px;
331 height: 16px;
332 -moz-margin-start: 1px;
333 -moz-margin-end: 2px;
334 margin-top: 1px;
335 margin-bottom: 1px;
336}
337
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 {
341 display: -moz-box !important;
342}
343
344.bookmark-item > .toolbarbutton-menu-dropmarker {
345 display: none;
346}
347
348#bookmarks-toolbar-placeholder {
349 list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png") !important;
350 -moz-box-orient: horizontal;
351}
352
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
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
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 {
409 list-style-image: none !important;
410}
411
412#bookmarked-notification-dropmarker-anchor[notification="finish"] > #bookmarked-notification-dropmarker-icon {
413 visibility: visible;
414 animation: animation-bookmarkPulse 300ms;
415 animation-delay: 600ms;
416 animation-timing-function: ease-out;
417}
418
419/* ::::: bookmark menus ::::: */
420
421menu.bookmark-item,
422menuitem.bookmark-item {
423 min-width: 0;
424 max-width: 32em;
425}
426
427.bookmark-item:not(.subviewbutton) > .menu-iconic-left {
428 margin-top: 0;
429 margin-bottom: 0;
430}
431
432.bookmark-item > .menu-iconic-left > .menu-iconic-icon {
433 -moz-padding-start: 0px;
434}
435
436/* ::::: bookmark items ::::: */
437
438.bookmark-item {
439 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
440 -moz-image-region: auto;
441}
442
443.bookmark-item[container] {
444 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-closed.gif");
445 -moz-image-region: auto;
446}
447
448.bookmark-item[container][open] {
449 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-open.gif");
450 -moz-image-region: auto;
451}
452
453.bookmark-item[container][livemark] {
454 list-style-image: url("chrome://communicator/skin/bookmarks/livemark-folder.png");
455 -moz-image-region: auto;
456}
457
458.bookmark-item[container][livemark] .bookmark-item {
459 list-style-image: url("chrome://communicator/skin/bookmarks/livemark-item.png");
460 -moz-image-region: rect(0px, 16px, 16px, 0px);
461}
462
463.bookmark-item[container][livemark] .bookmark-item[visited] {
464 -moz-image-region: rect(0px, 32px, 16px, 16px);
465}
466
467.bookmark-item[container][query] {
468 list-style-image: url("chrome://communicator/skin/bookmarks/query.png");
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] {
478 list-style-image: url("chrome://communicator/skin/history/calendar.png");
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");
484 -moz-image-region: auto;
485}
486
487.bookmark-item[query][hostContainer][open] {
488 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-open.gif");
489 -moz-image-region: auto;
490}
491
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
502/* ::::: primary toolbar buttons ::::: */
503
504/* === BEGIN toolbarbuttons.inc.css === */
505
506/* Whole section of this included file: */
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,
509 #social-share-button, #open-file-button, #find-button, #developer-button,
510 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
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,
513 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button),
514#bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
515 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
516}
517
518#back-button {
519 -moz-image-region: rect(0, 36px, 18px, 18px);
520}
521
522#back-button:hover:not([disabled="true"]) {
523 -moz-image-region: rect(18px, 36px, 36px, 18px);
524}
525
526#back-button[disabled="true"] {
527 -moz-image-region: rect(36px, 36px, 54px, 18px);
528}
529
530#forward-button {
531 -moz-image-region: rect(0, 72px, 18px, 54px);
532}
533
534#forward-button:hover:not([disabled="true"]) {
535 -moz-image-region: rect(18px, 72px, 36px, 54px);
536}
537
538#forward-button[disabled="true"] {
539 -moz-image-region: rect(36px, 72px, 54px, 54px);
540}
541
542#back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
543#forward-button:-moz-locale-dir(rtl) {
544 transform: scaleX(-1);
545}
546
547#home-button[cui-areatype="toolbar"] {
548 -moz-image-region: rect(0, 126px, 18px, 108px);
549}
550
551#home-button[cui-areatype="toolbar"]:hover {
552 -moz-image-region: rect(18px, 126px, 36px, 108px);
553}
554
555#bookmarks-menu-button[cui-areatype="toolbar"] {
556 -moz-image-region: rect(0, 144px, 18px, 126px);
557}
558
559#bookmarks-menu-button[cui-areatype="toolbar"]:hover,
560#bookmarks-menu-button[cui-areatype="toolbar"][open="true"] {
561 -moz-image-region: rect(18px, 144px, 36px, 126px);
562}
563
564/* When "new tab" page shows up, the menubutton-button (star button) is disabled */
565#bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-button[disabled="true"] {
566 -moz-image-region: rect(36px, 144px, 54px, 126px) !important;
567 background-color: transparent !important;
568}
569
570#bookmarks-menu-button[cui-areatype="toolbar"][starred] {
571 -moz-image-region: rect(0, 162px, 18px, 144px);
572}
573
574#bookmarks-menu-button[cui-areatype="toolbar"][starred]:hover,
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. */
579 -moz-image-region: rect(18px, 162px, 36px, 144px);
580}
581
582#bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
583 -moz-image-region: rect(0, 630px, 18px, 612px);
584}
585
586#bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker {
587 padding: 1px;
588 -moz-box-align: center;
589}
590
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 {
593 -moz-image-region: rect(18px, 630px, 36px, 612px);
594}
595
596#bookmarks-menu-button[cui-areatype="toolbar"]:hover:active > .toolbarbutton-menubutton-dropmarker,
597#bookmarks-menu-button[cui-areatype="toolbar"][open="true"] > .toolbarbutton-menubutton-dropmarker {
598 padding-top: 2px;
599 padding-bottom: 0px;
600 -moz-padding-start: 2px;
601 -moz-padding-end: 0px;
602}
603
604#history-panelmenu[cui-areatype="toolbar"] {
605 -moz-image-region: rect(0, 180px, 18px, 162px);
606}
607
608#history-panelmenu[cui-areatype="toolbar"]:hover,
609#history-panelmenu[cui-areatype="toolbar"][open="true"] {
610 -moz-image-region: rect(18px, 180px, 36px, 162px);
611}
612
613#downloads-button[cui-areatype="toolbar"] {
614 -moz-image-region: rect(0, 198px, 18px, 180px);
615}
616
617#downloads-button[cui-areatype="toolbar"]:hover,
618#downloads-button[cui-areatype="toolbar"][open="true"] {
619 -moz-image-region: rect(18px, 198px, 36px, 180px);
620}
621
622#add-ons-button[cui-areatype="toolbar"] {
623 -moz-image-region: rect(0, 216px, 18px, 198px);
624}
625
626#add-ons-button[cui-areatype="toolbar"]:hover {
627 -moz-image-region: rect(18px, 216px, 36px, 198px);
628}
629
630#open-file-button[cui-areatype="toolbar"] {
631 -moz-image-region: rect(0, 234px, 18px, 216px);
632}
633
634#open-file-button[cui-areatype="toolbar"]:hover {
635 -moz-image-region: rect(18px, 234px, 36px, 216px);
636}
637
638#save-page-button[cui-areatype="toolbar"] {
639 -moz-image-region: rect(0, 252px, 18px, 234px);
640}
641
642#save-page-button[cui-areatype="toolbar"]:hover {
643 -moz-image-region: rect(18px, 252px, 36px, 234px);
644}
645
646#sync-button[cui-areatype="toolbar"] {
647 -moz-image-region: rect(0, 792px, 18px, 774px);
648}
649
650#sync-button[cui-areatype="toolbar"]:hover {
651 -moz-image-region: rect(18px, 792px, 36px, 774px);
652}
653
654#feed-button[cui-areatype="toolbar"] {
655 -moz-image-region: rect(0, 288px, 18px, 270px);
656}
657
658#feed-button[cui-areatype="menu-panel"][panel-multiview-anchor=true],
659#feed-button[cui-areatype="toolbar"]:hover:not([disabled="true"]) {
660 -moz-image-region: rect(18px, 288px, 36px, 270px);
661}
662
663#feed-button[cui-areatype="toolbar"][disabled="true"] {
664 -moz-image-region: rect(36px, 288px, 54px, 270px);
665}
666
667#social-share-button[cui-areatype="toolbar"] {
668 -moz-image-region: rect(0px, 306px, 18px, 288px);
669}
670
671#social-share-button[cui-areatype="toolbar"]:hover:not([disabled="true"]),
672#social-share-button[cui-areatype="toolbar"][open="true"] {
673 -moz-image-region: rect(18px, 306px, 36px, 288px);
674}
675
676#social-share-button[cui-areatype="toolbar"][disabled="true"] {
677 -moz-image-region: rect(36px, 306px, 54px, 288px);
678}
679
680#characterencoding-button[cui-areatype="toolbar"] {
681 -moz-image-region: rect(0, 324px, 18px, 306px);
682}
683
684#characterencoding-button[cui-areatype="toolbar"]:hover:not([disabled="true"]),
685#characterencoding-button[cui-areatype="toolbar"][open="true"] {
686 -moz-image-region: rect(18px, 324px, 36px, 306px);
687}
688
689#characterencoding-button[cui-areatype="toolbar"][disabled="true"] {
690 -moz-image-region: rect(36px, 324px, 54px, 306px);
691}
692
693#new-window-button[cui-areatype="toolbar"] {
694 -moz-image-region: rect(0, 342px, 18px, 324px);
695}
696
697#new-window-button[cui-areatype="toolbar"]:hover {
698 -moz-image-region: rect(18px, 342px, 36px, 324px);
699}
700
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
713#new-tab-button[cui-areatype="toolbar"] {
714 -moz-image-region: rect(0, 360px, 18px, 342px);
715}
716
717#new-tab-button[cui-areatype="toolbar"]:hover {
718 -moz-image-region: rect(18px, 360px, 36px, 342px);
719}
720
721#privatebrowsing-button[cui-areatype="toolbar"] {
722 -moz-image-region: rect(0, 378px, 18px, 360px);
723}
724
725#privatebrowsing-button[cui-areatype="toolbar"]:hover {
726 -moz-image-region: rect(18px, 378px, 36px, 360px);
727}
728
729#find-button[cui-areatype="toolbar"] {
730 -moz-image-region: rect(0, 396px, 18px, 378px);
731}
732
733#find-button[cui-areatype="toolbar"]:hover {
734 -moz-image-region: rect(18px, 396px, 36px, 378px);
735}
736
737#print-button[cui-areatype="toolbar"] {
738 -moz-image-region: rect(0, 414px, 18px, 396px);
739}
740
741#print-button[cui-areatype="toolbar"]:hover {
742 -moz-image-region: rect(18px, 414px, 36px, 396px);
743}
744
745#fullscreen-button[cui-areatype="toolbar"] {
746 -moz-image-region: rect(0, 432px, 18px, 414px);
747}
748
749#fullscreen-button[cui-areatype="toolbar"]:hover {
750 -moz-image-region: rect(18px, 432px, 36px, 414px);
751}
752
753#developer-button[cui-areatype="toolbar"] {
754 -moz-image-region: rect(0, 450px, 18px, 432px);
755}
756
757#developer-button[cui-areatype="toolbar"]:hover,
758#developer-button[cui-areatype="toolbar"][open="true"] {
759 -moz-image-region: rect(18px, 450px, 36px, 432px);
760}
761
762#preferences-button[cui-areatype="toolbar"] {
763 -moz-image-region: rect(0, 468px, 18px, 450px);
764}
765
766#preferences-button[cui-areatype="toolbar"]:hover {
767 -moz-image-region: rect(18px, 468px, 36px, 450px);
768}
769
770#PanelUI-menu-button {
771 -moz-image-region: rect(0, 486px, 18px, 468px);
772}
773
774#PanelUI-menu-button:hover,
775#PanelUI-menu-button[open="true"] {
776 -moz-image-region: rect(18px, 486px, 36px, 468px);
777}
778
779#edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button {
780 -moz-image-region: rect(0, 504px, 18px, 486px);
781}
782
783#edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button:hover:not([disabled="true"]) {
784 -moz-image-region: rect(18px, 504px, 36px, 486px);
785}
786
787#edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button[disabled="true"] {
788 -moz-image-region: rect(36px, 504px, 54px, 486px);
789}
790
791#edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button {
792 -moz-image-region: rect(0, 522px, 18px, 504px);
793}
794
795#edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button:hover:not([disabled="true"]) {
796 -moz-image-region: rect(18px, 522px, 36px, 504px);
797}
798
799#edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button[disabled="true"] {
800 -moz-image-region: rect(36px, 522px, 54px, 504px);
801}
802
803#edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button {
804 -moz-image-region: rect(0, 540px, 18px, 522px);
805}
806
807#edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button:hover:not([disabled="true"]) {
808 -moz-image-region: rect(18px, 540px, 36px, 522px);
809}
810
811#edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button[disabled="true"] {
812 -moz-image-region: rect(36px, 540px, 54px, 522px);
813}
814
815#zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button {
816 -moz-image-region: rect(0, 558px, 18px, 540px);
817}
818
819#zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button:hover:not([disabled="true"]) {
820 -moz-image-region: rect(18px, 558px, 36px, 540px);
821}
822
823#zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button[disabled="true"] {
824 -moz-image-region: rect(36px, 558px, 54px, 540px);
825}
826
827#zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button {
828 -moz-image-region: rect(0, 576px, 18px, 558px);
829}
830
831#zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button:hover:not([disabled="true"]) {
832 -moz-image-region: rect(18px, 576px, 36px, 558px);
833}
834
835#zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button[disabled="true"] {
836 -moz-image-region: rect(36px, 576px, 54px, 558px);
837}
838
839#nav-bar-overflow-button {
840 -moz-image-region: rect(0, 612px, 18px, 594px);
841}
842
843#nav-bar-overflow-button:hover,
844#nav-bar-overflow-button[open="true"] {
845 -moz-image-region: rect(18px, 612px, 36px, 594px);
846}
847
848#nav-bar-overflow-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
849 transform: scaleX(-1);
850}
851
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
864#email-button[cui-areatype="toolbar"]:hover:not([disabled="true"]) {
865 -moz-image-region: rect(18px, 666px, 36px, 648px);
866}
867
868#email-button[cui-areatype="toolbar"][disabled="true"] {
869 -moz-image-region: rect(36px, 666px, 54px, 648px);
870}
871
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
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
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
901/* === END toolbarbuttons.inc.css === */
902
903/* === BEGIN menupanel.inc.css === */
904
905/* Menu panel and palette styles */
906
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
913toolbaritem[sdkstylewidget="true"] > toolbarbutton,
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,
916 #social-share-button, #open-file-button, #find-button, #developer-button,
917 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
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,
920 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button)[cui-areatype="menu-panel"],
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,
923 #social-share-button, #open-file-button, #find-button, #developer-button,
924 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
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,
927 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button) {
928 list-style-image: var(--menupanel-list-style-image);
929}
930
931#home-button[cui-areatype="menu-panel"],
932toolbarpaletteitem[place="palette"] > #home-button {
933 -moz-image-region: rect(0px, 128px, 32px, 96px);
934}
935
936#home-button[cui-areatype="menu-panel"]:hover,
937toolbarpaletteitem[place="palette"] > #home-button:hover {
938 -moz-image-region: rect(32px, 128px, 64px, 96px);
939}
940
941#bookmarks-menu-button[cui-areatype="menu-panel"],
942toolbarpaletteitem[place="palette"] > #bookmarks-menu-button {
943 -moz-image-region: rect(0px, 192px, 32px, 160px);
944}
945
946#bookmarks-menu-button[cui-areatype="menu-panel"]:hover,
947toolbarpaletteitem[place="palette"] > #bookmarks-menu-button:hover {
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);
953}
954
955#history-panelmenu[cui-areatype="menu-panel"],
956toolbarpaletteitem[place="palette"] > #history-panelmenu {
957 -moz-image-region: rect(0px, 224px, 32px, 192px);
958}
959
960#history-panelmenu[cui-areatype="menu-panel"]:hover,
961toolbarpaletteitem[place="palette"] > #history-panelmenu:hover {
962 -moz-image-region: rect(32px, 224px, 64px, 192px);
963}
964
965#history-panelmenu[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
966 -moz-image-region: rect(32px, 224px, 64px, 192px);
967}
968
969#downloads-button[cui-areatype="menu-panel"],
970toolbarpaletteitem[place="palette"] > #downloads-button {
971 -moz-image-region: rect(0px, 256px, 32px, 224px);
972}
973
974#downloads-button[cui-areatype="menu-panel"]:hover,
975toolbarpaletteitem[place="palette"] > #downloads-button:hover {
976 -moz-image-region: rect(32px, 256px, 64px, 224px);
977}
978
979#add-ons-button[cui-areatype="menu-panel"],
980toolbarpaletteitem[place="palette"] > #add-ons-button {
981 -moz-image-region: rect(0px, 288px, 32px, 256px);
982}
983
984#add-ons-button[cui-areatype="menu-panel"]:hover,
985toolbarpaletteitem[place="palette"] > #add-ons-button:hover {
986 -moz-image-region: rect(32px, 288px, 64px, 256px);
987}
988
989#open-file-button[cui-areatype="menu-panel"],
990toolbarpaletteitem[place="palette"] > #open-file-button {
991 -moz-image-region: rect(0px, 320px, 32px, 288px);
992}
993
994#open-file-button[cui-areatype="menu-panel"]:hover,
995toolbarpaletteitem[place="palette"] > #open-file-button:hover {
996 -moz-image-region: rect(32px, 320px, 64px, 288px);
997}
998
999#save-page-button[cui-areatype="menu-panel"],
1000toolbarpaletteitem[place="palette"] > #save-page-button {
1001 -moz-image-region: rect(0px, 352px, 32px, 320px);
1002}
1003
1004#save-page-button[cui-areatype="menu-panel"]:hover,
1005toolbarpaletteitem[place="palette"] > #save-page-button:hover {
1006 -moz-image-region: rect(32px, 352px, 64px, 320px);
1007}
1008
1009#sync-button[cui-areatype="menu-panel"],
1010toolbarpaletteitem[place="palette"] > #sync-button {
1011 -moz-image-region: rect(0px, 1024px, 32px, 992px);
1012}
1013
1014#sync-button[cui-areatype="menu-panel"]:hover,
1015toolbarpaletteitem[place="palette"] > #sync-button:hover {
1016 -moz-image-region: rect(32px, 1024px, 64px, 992px);
1017}
1018
1019#feed-button[cui-areatype="menu-panel"],
1020toolbarpaletteitem[place="palette"] > #feed-button {
1021 -moz-image-region: rect(0px, 416px, 32px, 384px);
1022}
1023
1024#feed-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
1025toolbarpaletteitem[place="palette"] > #feed-button:hover:not([disabled="true"]) {
1026 -moz-image-region: rect(32px, 416px, 64px, 384px);
1027}
1028
1029#feed-button[cui-areatype="menu-panel"][disabled="true"],
1030toolbarpaletteitem[place="palette"] > #feed-button[disabled="true"] {
1031 -moz-image-region: rect(64px, 416px, 96px, 384px);
1032}
1033
1034#social-share-button[cui-areatype="menu-panel"],
1035toolbarpaletteitem[place="palette"] > #social-share-button {
1036 -moz-image-region: rect(0px, 448px, 32px, 416px);
1037}
1038
1039#social-share-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
1040toolbarpaletteitem[place="palette"] > #social-share-button:hover:not([disabled="true"]) {
1041 -moz-image-region: rect(32px, 448px, 64px, 416px);
1042}
1043
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
1049#characterencoding-button[cui-areatype="menu-panel"],
1050toolbarpaletteitem[place="palette"] > #characterencoding-button {
1051 -moz-image-region: rect(0px, 480px, 32px, 448px);
1052}
1053
1054#characterencoding-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
1055toolbarpaletteitem[place="palette"] > #characterencoding-button:hover:not([disabled="true"]) {
1056 -moz-image-region: rect(32px, 480px, 64px, 448px);
1057}
1058
1059#characterencoding-button[cui-areatype="menu-panel"][disabled="true"],
1060toolbarpaletteitem[place="palette"] > #characterencoding-button[disabled="true"] {
1061 -moz-image-region: rect(64px, 480px, 96px, 448px);
1062}
1063
1064#characterencoding-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1065 -moz-image-region: rect(32px, 480px, 64px, 448px);
1066}
1067
1068#new-window-button[cui-areatype="menu-panel"],
1069toolbarpaletteitem[place="palette"] > #new-window-button {
1070 -moz-image-region: rect(0px, 512px, 32px, 480px);
1071}
1072
1073#new-window-button[cui-areatype="menu-panel"]:hover,
1074toolbarpaletteitem[place="palette"] > #new-window-button:hover {
1075 -moz-image-region: rect(32px, 512px, 64px, 480px);
1076}
1077
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
1088#new-tab-button[cui-areatype="menu-panel"],
1089toolbarpaletteitem[place="palette"] > #new-tab-button {
1090 -moz-image-region: rect(0px, 544px, 32px, 512px);
1091}
1092
1093#new-tab-button[cui-areatype="menu-panel"]:hover,
1094toolbarpaletteitem[place="palette"] > #new-tab-button:hover {
1095 -moz-image-region: rect(32px, 544px, 64px, 512px);
1096}
1097
1098#privatebrowsing-button[cui-areatype="menu-panel"],
1099toolbarpaletteitem[place="palette"] > #privatebrowsing-button {
1100 -moz-image-region: rect(0px, 576px, 32px, 544px);
1101}
1102
1103#privatebrowsing-button[cui-areatype="menu-panel"]:hover,
1104toolbarpaletteitem[place="palette"] > #privatebrowsing-button:hover {
1105 -moz-image-region: rect(32px, 576px, 64px, 544px);
1106}
1107
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
1118#find-button[cui-areatype="menu-panel"],
1119toolbarpaletteitem[place="palette"] > #find-button {
1120 -moz-image-region: rect(0px, 640px, 32px, 608px);
1121}
1122
1123#find-button[cui-areatype="menu-panel"]:hover,
1124toolbarpaletteitem[place="palette"] > #find-button:hover {
1125 -moz-image-region: rect(32px, 640px, 64px, 608px);
1126}
1127
1128#print-button[cui-areatype="menu-panel"],
1129toolbarpaletteitem[place="palette"] > #print-button {
1130 -moz-image-region: rect(0px, 672px, 32px, 640px);
1131}
1132
1133#print-button[cui-areatype="menu-panel"]:hover,
1134toolbarpaletteitem[place="palette"] > #print-button:hover {
1135 -moz-image-region: rect(32px, 672px, 64px, 640px);
1136}
1137
1138#fullscreen-button[cui-areatype="menu-panel"],
1139toolbarpaletteitem[place="palette"] > #fullscreen-button {
1140 -moz-image-region: rect(0px, 704px, 32px, 672px);
1141}
1142
1143#fullscreen-button[cui-areatype="menu-panel"]:hover,
1144toolbarpaletteitem[place="palette"] > #fullscreen-button:hover {
1145 -moz-image-region: rect(32px, 704px, 64px, 672px);
1146}
1147
1148#developer-button[cui-areatype="menu-panel"],
1149toolbarpaletteitem[place="palette"] > #developer-button {
1150 -moz-image-region: rect(0px, 736px, 32px, 704px);
1151}
1152
1153#developer-button[cui-areatype="menu-panel"]:hover,
1154toolbarpaletteitem[place="palette"] > #developer-button:hover {
1155 -moz-image-region: rect(32px, 736px, 64px, 704px);
1156}
1157
1158#developer-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1159 -moz-image-region: rect(32px, 736px, 64px, 704px);
1160}
1161
1162#preferences-button[cui-areatype="menu-panel"],
1163toolbarpaletteitem[place="palette"] > #preferences-button {
1164 -moz-image-region: rect(0px, 768px, 32px, 736px);
1165}
1166
1167#preferences-button[cui-areatype="menu-panel"]:hover,
1168toolbarpaletteitem[place="palette"] > #preferences-button:hover {
1169 -moz-image-region: rect(32px, 768px, 64px, 736px);
1170}
1171
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
1177#email-link-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
1178toolbarpaletteitem[place="palette"] > #email-link-button:hover:not([disabled="true"]) {
1179 -moz-image-region: rect(32px, 800px, 64px, 768px);
1180}
1181
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
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,
1193toolbarpaletteitem[place="palette"] > #sidebar-button:hover,
1194#sidebar-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1195 -moz-image-region: rect(32px, 864px, 64px, 832px);
1196}
1197
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
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
1219toolbaritem[sdkstylewidget="true"] > toolbarbutton {
1220 -moz-image-region: rect(0, 832px, 32px, 800px);
1221}
1222
1223/* Wide panel control icons */
1224
1225#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton,
1226#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton,
1227toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton,
1228toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton {
1229 list-style-image: var(--menupanel-small-list-style-image);
1230}
1231
1232#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button,
1233toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button {
1234 -moz-image-region: rect(0px, 32px, 16px, 16px);
1235}
1236
1237#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:hover:not([disabled="true"]),
1238toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button:hover:not([disabled="true"]) {
1239 -moz-image-region: rect(16px, 32px, 32px, 16px);
1240}
1241
1242#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button[disabled="true"],
1243toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button[disabled="true"] {
1244 -moz-image-region: rect(32px, 32px, 48px, 16px);
1245}
1246
1247#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
1248toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button {
1249 -moz-image-region: rect(0px, 48px, 16px, 32px);
1250}
1251
1252#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button:hover:not([disabled="true"]),
1253toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button:hover:not([disabled="true"]) {
1254 -moz-image-region: rect(16px, 48px, 32px, 32px);
1255}
1256
1257#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button[disabled="true"],
1258toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button[disabled="true"] {
1259 -moz-image-region: rect(32px, 48px, 48px, 32px);
1260}
1261
1262#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button,
1263toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button {
1264 -moz-image-region: rect(0px, 64px, 16px, 48px);
1265}
1266
1267#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:hover:not([disabled="true"]),
1268toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button:hover:not([disabled="true"]) {
1269 -moz-image-region: rect(16px, 64px, 32px, 48px);
1270}
1271
1272#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button[disabled="true"],
1273toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button[disabled="true"] {
1274 -moz-image-region: rect(32px, 64px, 48px, 48px);
1275}
1276
1277#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button,
1278toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button {
1279 -moz-image-region: rect(0px, 80px, 16px, 64px);
1280}
1281
1282#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:hover:not([disabled="true"]),
1283toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button:hover:not([disabled="true"]) {
1284 -moz-image-region: rect(16px, 80px, 32px, 64px);
1285}
1286
1287#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button[disabled="true"],
1288toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button[disabled="true"] {
1289 -moz-image-region: rect(32px, 80px, 48px, 64px);
1290}
1291
1292#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button,
1293toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button {
1294 -moz-image-region: rect(0px, 96px, 16px, 80px);
1295}
1296
1297#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:hover:not([disabled="true"]),
1298toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button:hover:not([disabled="true"]) {
1299 -moz-image-region: rect(16px, 96px, 32px, 80px);
1300}
1301
1302#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button[disabled="true"],
1303toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button[disabled="true"] {
1304 -moz-image-region: rect(32px, 96px, 48px, 80px);
1305}
1306
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
1312/* === END menupanel.inc.css === */
1313
1314.toolbarbutton-1:not([type="menu-button"]) {
1315 -moz-box-orient: vertical;
1316}
1317
1318.toolbarbutton-1,
1319.toolbarbutton-1 > .toolbarbutton-menubutton-button {
1320/* min-width: 36px;
1321 min-height: 36px;*/
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;
1336 -moz-padding-start: 3px;
1337 -moz-padding-end: 1px;
1338}
1339
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 {
1345}
1346
1347.toolbarbutton-1 > .toolbarbutton-menu-dropmarker,
1348.toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1349}
1350
1351toolbar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker:-moz-lwtheme-brighttext,
1352toolbar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:-moz-lwtheme-brighttext {
1353}
1354
1355.toolbarbutton-1 > .toolbarbutton-icon,
1356.toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1357}
1358
1359.findbar-button,
1360#nav-bar .toolbarbutton-1,
1361#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1362}
1363
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 {
1367}
1368
1369#nav-bar #PanelUI-menu-button {
1370/* -moz-padding-start: 7px;
1371 -moz-padding-end: 5px;*/
1372}
1373
1374#nav-bar .toolbarbutton-1[type=panel],
1375#nav-bar .toolbarbutton-1[type=menu]:not(#back-button):not(#forward-button):not(#feed-button):not(#PanelUI-menu-button) {
1376/* padding-left: 5px;
1377 padding-right: 5px;*/
1378}
1379
1380#nav-bar .toolbarbutton-1 > menupopup {
1381/* margin-top: -3px;*/
1382}
1383
1384#nav-bar .toolbarbutton-1 > menupopup.cui-widget-panel {
1385 margin-top: -4px;
1386}
1387
1388#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1389/* -moz-padding-end: 0;*/
1390}
1391
1392#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1393/* -moz-padding-start: 0;
1394 -moz-box-align: center;*/
1395}
1396
1397.findbar-button > .toolbarbutton-text,
1398#nav-bar .toolbarbutton-1 > .toolbarbutton-icon,
1399#nav-bar .toolbarbutton-1 > .toolbarbutton-text,
1400#nav-bar .toolbarbutton-1 > .toolbarbutton-badge-stack,
1401#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1402#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1403window:not([chromehidden~="toolbar"]) #urlbar-wrapper > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon {
1404/* padding: 2px 6px;
1405 border: 1px solid;
1406 border-color: transparent;
1407 transition-property: background-color, border-color;
1408 transition-duration: 150ms;*/
1409}
1410/*
1411#nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-icon,
1412#nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-badge-stack,
1413#nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1414 padding: 3px 7px;
1415}
1416*/
1417
1418/* Help SDK icons fit: */
1419toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon,
1420toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-badge-stack > .toolbarbutton-icon {
1421 width: 16px;
1422}
1423
1424#nav-bar toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon {
1425 /* XXXgijs box models strike again: this is 16px + 2 * 7px padding + 2 * 1px border (from the rules above) */
1426 width: 32px;
1427}
1428
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,
1433#nav-bar .toolbarbutton-1[type=menu] > .toolbarbutton-text /* hack for add-ons that forcefully display the label */ {
1434/* -moz-padding-end: 17px;*/
1435}
1436
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
1443#nav-bar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
1444}
1445
1446#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1447}
1448
1449#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1450}
1451
1452#nav-bar .toolbaritem-combined-buttons {
1453/* margin-left: 2px;
1454 margin-right: 2px;*/
1455}
1456
1457#nav-bar .toolbaritem-combined-buttons > .toolbarbutton-1 {
1458/* padding-left: 0;
1459 padding-right: 0;*/
1460}
1461
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;
1469 -moz-margin-end: -1px;
1470*/
1471}
1472
1473window:not([chromehidden~="toolbar"]) #urlbar-wrapper > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon {
1474}
1475
1476.findbar-button:not(:-moz-any([checked="true"],[disabled="true"])):hover > .toolbarbutton-text,
1477#nav-bar .toolbarbutton-1:not([disabled=true]) > .toolbarbutton-menubutton-button[open] + .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
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,
1482#nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-badge-stack,
1483window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button:not([open]):not(:active):not([disabled=true]):hover > .toolbarbutton-icon,
1484#nav-bar .toolbarbutton-1:not([buttonover]):not([open]):not(:active):hover > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon {
1485}
1486
1487.findbar-button:not([disabled=true]):-moz-any([checked="true"],:hover:active) > .toolbarbutton-text,
1488#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):-moz-any(:hover:active, [open]) > .toolbarbutton-icon,
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,
1492#nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-stack {
1493}
1494
1495#TabsToolbar .toolbarbutton-1,
1496#TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1497.tabbrowser-arrowscrollbox > .scrollbutton-up,
1498.tabbrowser-arrowscrollbox > .scrollbutton-down {
1499}
1500
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 {
1506}
1507
1508/* unified back/forward button */
1509
1510#forward-button {
1511 -moz-box-align: stretch; /* let the button shape grow vertically with the location bar */
1512}
1513
1514#forward-button > menupopup {
1515 margin-top: 1px !important;
1516}
1517
1518#forward-button > .toolbarbutton-icon {
1519 background-clip: padding-box !important;
1520 /*mask: url(keyhole-forward-mask.svg#mask); XXX: this regresses twinopen */
1521 /*clip-path: url(chrome://browser/content/browser.xul#keyhole-forward-clip-path) !important;*/
1522}
1523
1524#forward-button {
1525 -moz-margin-start: -4px !important;
1526 padding-left: 5px;
1527 padding-right: 5px;
1528 margin-top: 3px;
1529 margin-bottom: 3px;
1530 border-radius: 0 10000px 10000px 0;
1531/* max-width: calc(var(--forwardbutton-width) + var(--backbutton-urlbar-overlap)) !important; */
1532}
1533
1534#forward-button:-moz-locale-dir(rtl) {
1535 border-radius: 10000px 0 0 10000px;
1536}
1537
1538window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not([switchingtabs]) > #forward-button {
1539 transition: margin-left 150ms ease-out;
1540}
1541
1542window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] {
1543 margin-left: calc(0px - var(--forwardbutton-width)/* - var(--backbutton-urlbar-overlap)*/);
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 */
1553 margin-left: calc(-0.01px - var(--forwardbutton-width)/* - var(--backbutton-urlbar-overlap)*/);
1554}
1555
1556#back-button {
1557/* padding-top: 3px !important;
1558 padding-bottom: 3px !important;
1559 -moz-padding-start: 5px !important;
1560 -moz-padding-end: 0 !important;*/
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;
1568}
1569
1570#back-button:-moz-locale-dir(rtl) {
1571}
1572
1573#back-button > menupopup {
1574 margin-top: -1px !important;
1575}
1576
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;
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;
1586 transition-duration: 250ms !important;
1587}
1588
1589#back-button:not([disabled="true"]):not([open="true"]):not(:active):hover > .toolbarbutton-icon {
1590/* background-color: hsla(210,4%,10%,.08) !important;*/
1591}
1592
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;
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;*/
1599}
1600
1601#back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
1602 transform: scaleX(-1);
1603}
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;
1608}
1609
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;
1613}
1614
1615#home-button.bookmark-item {
1616 list-style-image: url("chrome://browser/skin/Toolbar.png");
1617}
1618
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");
1629}
1630
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");
1634}
1635*/
1636
1637#downloads-button > .toolbarbutton-icon {
1638 margin: 0;
1639}
1640
1641/* tabview menu item */
1642
1643#menu_tabview {
1644 list-style-image: url("chrome://browser/skin/tabview/tabviewFx.png");
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
1664/* undo close tab menu item */
1665#alltabs_undoCloseTab {
1666 list-style-image: url(chrome://browser/skin/undoCloseTab.png);
1667}
1668
1669@media (min-resolution: 1.1dppx) {
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
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
1688/* ::::: fullscreen window controls ::::: */
1689
1690#window-controls {
1691 -moz-margin-start: 4px;
1692}
1693
1694#minimize-button,
1695#restore-button,
1696#close-button {
1697/* list-style-image: url("chrome://global/skin/icons/windowControls.png");
1698 padding: 0; */
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
1727#urlbar,
1728.searchbar-textbox {
1729 border-radius: 5px;
1730 margin: 2px 0;
1731 -moz-margin-start: 3px;
1732}
1733
1734#urlbar {
1735 /* make color as light as possible to deal with dark non-domain parts */
1736 color: #FFBFFF;
1737}
1738
1739#urlbar:-moz-lwtheme,
1740.searchbar-textbox:-moz-lwtheme {
1741 /* background-color: rgba(255,255,255,.8);
1742 @navbarTextboxCustomBorder@
1743 color: black; */
1744}
1745
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
1756window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar {
1757/* -moz-border-start: none;
1758 margin-left: 0;*/
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");*/
1773/* margin-inline-start: calc(-1 * var(--backbutton-urlbar-overlap)); */
1774}
1775
1776window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl),
1777window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
1778 /* let urlbar-back-button-clip-path clip the urlbar's right side for RTL */
1779 transform: scaleX(-1);
1780}
1781
1782window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl) {
1783 -moz-box-direction: reverse;
1784}
1785
1786html|*.urlbar-input:-moz-lwtheme::-moz-placeholder,
1787.searchbar-textbox:-moz-lwtheme > .autocomplete-textbox-container > .textbox-input-box > html|*.textbox-input::-moz-placeholder {
1788 color: #E7ADE7;
1789}
1790
1791#urlbar-container {
1792 -moz-box-orient: horizontal;
1793 -moz-box-align: stretch;
1794}
1795
1796.urlbar-textbox-container {
1797 -moz-box-align: stretch;
1798}
1799
1800.urlbar-input-box {
1801 -moz-margin-start: 0;
1802}
1803
1804#urlbar-icons {
1805 -moz-box-align: center;
1806}
1807
1808.urlbar-icon {
1809 padding: 0 2px;
1810 /* 16x16 icon with border-box sizing */
1811 width: 20px;
1812 height: 16px;
1813}
1814
1815.search-go-container {
1816 padding: 2px;
1817}
1818
1819.search-go-container > .search-go-button {
1820 padding: 0;
1821}
1822
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
1836#urlbar-search-splitter {
1837 min-width: 6px;
1838 -moz-margin-start: -3px;
1839 border: none;
1840 background: transparent;
1841}
1842
1843#urlbar-search-splitter + #urlbar-container > #urlbar,
1844#urlbar-search-splitter + #search-container > #searchbar > .searchbar-textbox {
1845 -moz-margin-start: 0;
1846}
1847
1848#urlbar-display-box {
1849}
1850
1851.urlbar-display {
1852 -moz-border-end: 1px solid #9C9CFF;
1853 -moz-margin-end: 3px;
1854 margin-top: 0;
1855 margin-bottom: 0;
1856 -moz-margin-start: 0;
1857 color: #8050B0;
1858}
1859
1860/* === BEGIN urlbarSearchSuggestionsNotification.inc.css === */
1861
1862#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] {
1863 border-bottom: 1px solid #A09090;
1864 background-color: #000000;
1865 padding: 6px 0;
1866 -moz-padding-start: 44px;
1867 -moz-padding-end: 6px;
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;
1873}
1874
1875#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"]:-moz-locale-dir(rtl) {
1876 background-position: right 20px center;
1877}
1878
1879#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description {
1880 margin: 0;
1881 padding: 0;
1882}
1883
1884#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description > label.text-link {
1885 -moz-margin-start: 0;
1886}
1887
1888#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button {
1889 -moz-appearance: none;
1890 min-width: 80px;
1891 border-radius: 3px;
1892 padding: 4px 16px;
1893 margin: 0;
1894 -moz-margin-start: 10px;
1895}
1896
1897#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"] {
1898}
1899
1900#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"]:hover {
1901}
1902
1903#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"] {
1904}
1905
1906#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"]:hover {
1907}
1908
1909/* === END urlbarSearchSuggestionsNotification.inc.css === */
1910
1911#search-container {
1912 min-width: calc(54px + 11ch);
1913}
1914
1915/* identity box */
1916
1917#identity-box.verifiedIdentity:not(:-moz-lwtheme):not(:hover):not([open=true]) {
1918 background-color: var(--identity-box-verified-background-color);
1919}
1920
1921#identity-box:-moz-focusring {
1922 outline: 1px dotted #008484;
1923 outline-offset: -1px;
1924}
1925
1926#identity-box.verifiedDomain:-moz-focusring,
1927#identity-box.verifiedIdentity:-moz-focusring {
1928 outline-color: #000000;
1929}
1930
1931/* Location bar dropmarker */
1932
1933.urlbar-history-dropmarker:not(:hover):not([open="true"]) {
1934 background-color: transparent;
1935}
1936
1937#urlbar-container[combined="true"] > #urlbar > .urlbar-history-dropmarker,
1938#urlbar-wrapper > #urlbar > .urlbar-history-dropmarker,
1939#urlbar-wrapper > #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker {
1940 border: none;
1941 border-radius: 0px;
1942 transition: opacity 0.15s ease;
1943}
1944
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 {
1950 opacity: 0;
1951}
1952
1953.urlbar-history-dropmarker:hover {
1954}
1955
1956.urlbar-history-dropmarker:hover:active,
1957.urlbar-history-dropmarker[open="true"] {
1958}
1959
1960/* page proxy icon */
1961
1962/* === BEGIN identity-block.inc.css === */
1963
1964#identity-box {
1965/* --identity-box-hover-background-color: #FFCF00;
1966 --identity-box-selected-background-color: #FF9F00; */
1967 --identity-box-verified-color: #008484;
1968 /* Default theme does different color per channel, we can't as they do it build-time. */
1969 --identity-box-chrome-color: #9C9CFF;
1970
1971 border-inline-end: 1px solid var(--urlbar-separator-color);
1972 font-size: .9em;
1973 border-radius: 2px;
1974 padding: 3px 5px;
1975 margin-inline-end: 4px;
1976 overflow: hidden;
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;
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;
1990}
1991
1992#urlbar[pageproxystate="valid"] > #identity-box.chromeUI {
1993 color: var(--identity-box-chrome-color);
1994 -moz-border-end: 1px solid var(--identity-box-chrome-color);
1995}
1996
1997#identity-box:hover > :not(#identity-icon),
1998#identity-box[open=true] > :not(#identity-icon) {
1999/* filter: grayscale(100%);*/
2000}
2001
2002#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
2003 color: var(--identity-box-verified-color);
2004 -moz-border-end: 1px solid var(--identity-box-verified-color);
2005}
2006
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
2015#notification-popup-box:not([hidden]) + #identity-box {
2016 padding-inline-start: 10px;
2017 border-radius: 0;
2018}
2019
2020window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box {
2021/* border-radius: 0;
2022 padding-inline-start: 2px; */
2023 padding-inline-end: 2px;
2024 margin-inline-end: 1px;
2025}
2026
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 {
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;
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;
2044}
2045
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
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
2144/* === END identity-block.inc.css === */
2145
2146#page-proxy-favicon {
2147 -moz-image-region: rect(0, 16px, 16px, 0);
2148}
2149
2150window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box > #page-proxy-favicon {
2151/* -moz-margin-end: 1px;*/
2152}
2153
2154#identity-box:hover > #page-proxy-favicon {
2155 -moz-image-region: rect(0, 32px, 16px, 16px);
2156}
2157
2158#identity-box:hover:active > #page-proxy-favicon,
2159#identity-box[open=true] > #page-proxy-favicon {
2160 -moz-image-region: rect(0, 48px, 16px, 32px);
2161}
2162
2163#identity-box:hover {
2164 background-color: #FFCF00;
2165 color: #000000;
2166}
2167
2168#identity-box:hover:active,
2169#identity-box[open=true] {
2170 background-color: #FF9F00;
2171 color: #000000;
2172}
2173
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
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] {
2184 background-color: #008484;
2185 color: #000000;
2186}
2187
2188/* autocomplete */
2189
2190#treecolAutoCompleteImage {
2191 max-width: 36px;
2192}
2193
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
2273.ac-result-type-bookmark,
2274.autocomplete-treebody::-moz-tree-image(bookmark, treecolAutoCompleteImage) {
2275 list-style-image: url("chrome://browser/skin/places/bookmark.png");
2276 -moz-image-region: rect(0px 16px 16px 0px);
2277 width: 16px;
2278 height: 16px;
2279}
2280
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
2286.ac-type-icon[type=keyword],
2287.ac-site-icon[type=searchengine],
2288.autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage) {
2289 list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon");
2290}
2291
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}
2297
2298.ac-result-type-tag,
2299.autocomplete-treebody::-moz-tree-image(tag, treecolAutoCompleteImage) {
2300 list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
2301 width: 16px;
2302 height: 16px;
2303}
2304
2305.ac-type-icon[type=switchtab],
2306.ac-type-icon[type=remotetab] {
2307 list-style-image: url("chrome://browser/skin/urlbar-tab.svg#tab");
2308}
2309
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");
2313}
2314
2315.autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment),
2316.autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment)
2317{
2318 color: #8050B0;
2319 font-size: smaller;
2320}
2321
2322.autocomplete-treebody::-moz-tree-cell(suggesthint) {
2323 border-top: 1px solid #9C9CFF;
2324}
2325
2326/* combined go/reload/stop button in location bar */
2327
2328#urlbar-go-button,
2329#urlbar-reload-button,
2330#urlbar-stop-button {
2331 border-style: none;
2332 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
2333/* padding: 0 9px;*/
2334 margin-inline-start: 0px;
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;
2341}
2342
2343#urlbar:-moz-locale-dir(ltr) > toolbarbutton {
2344 border-top-left-radius: 0px;
2345 border-bottom-left-radius: 0px;
2346}
2347
2348#urlbar:-moz-locale-dir(rtl) > toolbarbutton {
2349 border-top-right-radius: 0px;
2350 border-bottom-right-radius: 0px;
2351}
2352
2353#urlbar > toolbarbutton:not([disabled=true]):active:hover,
2354#urlbar-reload-button:not(:hover) {
2355 -moz-border-start-style: none;
2356 -moz-padding-start: 3px;
2357}
2358
2359#urlbar-reload-button {
2360 -moz-image-region: rect(0px, 14px, 14px, 0px);
2361}
2362
2363#urlbar-reload-button[disabled=true] {
2364 -moz-image-region: rect(28px, 14px, 42px, 0px);
2365}
2366
2367#urlbar-reload-button:not([disabled=true]):hover {
2368 -moz-image-region: rect(14px, 14px, 28px, 0px);
2369}
2370
2371#urlbar-reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2372 transform: scaleX(-1);
2373}
2374
2375#urlbar-go-button {
2376 -moz-image-region: rect(0, 42px, 14px, 28px);
2377}
2378
2379#urlbar-go-button:hover {
2380 -moz-image-region: rect(14px, 42px, 28px, 28px);
2381}
2382
2383#urlbar-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2384 transform: scaleX(-1);
2385}
2386
2387#urlbar-stop-button {
2388 -moz-image-region: rect(0px, 28px, 14px, 14px);
2389}
2390
2391#urlbar-stop-button:hover {
2392 -moz-image-region: rect(14px, 28px, 28px, 14px);
2393}
2394
2395@media (min-resolution: 1.1dppx) {
2396 #urlbar-go-button,
2397 #urlbar-reload-button,
2398 #urlbar-stop-button {
2399 list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png");
2400 }
2401
2402 #urlbar-go-button > .toolbarbutton-icon,
2403 #urlbar-reload-button > .toolbarbutton-icon,
2404 #urlbar-stop-button > .toolbarbutton-icon {
2405 width: 14px;
2406 }
2407
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 }
2443}
2444
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);
2450}
2451
2452#page-report-button:hover ,
2453#page-report-button:hover:active,
2454#page-report-button[open="true"] {
2455 -moz-image-region: rect(0, 32px, 16px, 16px);
2456}
2457
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
2475/* social share panel */
2476
2477.social-share-frame {
2478 min-width: 756px;
2479 height: 150px;
2480}
2481
2482#share-container {
2483 min-width: 756px;
2484 background-color: white;
2485 background-repeat: no-repeat;
2486 background-position: center center;
2487}
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;
2497}
2498
2499.social-share-toolbar {
2500 border-bottom: 1px solid #9C9CFF;
2501 padding: 2px;
2502}
2503
2504#social-share-provider-buttons {
2505 padding: 0;
2506 margin: 0;
2507}
2508
2509.share-provider-button {
2510 padding: 5px;
2511 margin: 2px;
2512}
2513
2514.share-provider-button > .toolbarbutton-text {
2515 display: none;
2516}
2517.share-provider-button > .toolbarbutton-icon {
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 {
2529 min-height: 100px;
2530 min-width: 766px;
2531}
2532
2533#share-container,
2534.social-share-frame {
2535 border-top-left-radius: 0;
2536 border-bottom-left-radius: inherit;
2537 border-top-right-radius: 0;
2538 border-bottom-right-radius: inherit;
2539}
2540
2541#social-share-panel > .social-share-toolbar {
2542 border-top-left-radius: inherit;
2543 border-top-right-radius: inherit;
2544}
2545
2546#social-share-provider-buttons {
2547 border-top-left-radius: inherit;
2548 border-top-right-radius: inherit;
2549}
2550
2551/* social recommending panel */
2552
2553#social-mark-button {
2554 -moz-image-region: rect(0, 16px, 16px, 0);
2555}
2556
2557/* bookmarks menu-button */
2558
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);
2562}
2563
2564#bookmarks-menu-button.bookmark-item[starred] {
2565 -moz-image-region: rect(0px 32px 16px 16px);
2566}
2567
2568#nav-bar #bookmarks-menu-button[cui-areatype="toolbar"]:not([overflowedItem=true]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
2569 padding-top: 2px;
2570 padding-bottom: 2px;
2571}
2572
2573#BMB_bookmarksPopup[side="top"],
2574#BMB_bookmarksPopup[side="bottom"] {
2575 margin-left: -20px;
2576 margin-right: -20px;
2577}
2578
2579#BMB_bookmarksPopup[side="left"],
2580#BMB_bookmarksPopup[side="right"] {
2581 margin-top: -20px;
2582 margin-bottom: -20px;
2583}
2584
2585/* bookmarking panel */
2586
2587#editBookmarkPanelStarIcon {
2588 list-style-image: url("chrome://browser/skin/places/starred48.png");
2589 width: 48px;
2590 height: 48px;
2591}
2592
2593#editBookmarkPanelStarIcon[unstarred] {
2594 list-style-image: url("chrome://browser/skin/places/unstarred48.png");
2595}
2596
2597#editBookmarkPanelTitle {
2598 font-size: 130%;
2599}
2600
2601#editBookmarkPanelHeader,
2602#editBookmarkPanelContent {
2603 margin-bottom: .5em;
2604}
2605
2606/* Implements editBookmarkPanel resizing on folderTree un-collapse. */
2607#editBMPanel_folderTree {
2608 min-width: 27em;
2609}
2610
2611.panel-promo-box {
2612 margin: 5px 0 -6px;
2613 padding: 5px 0;
2614 border-top: 1px solid #9C9CFF;
2615 border-bottom-left-radius: 5px;
2616 border-bottom-right-radius: 5px;
2617}
2618
2619.panel-promo-icon {
2620 list-style-image: url("chrome://browser/skin/sync-notification-24.png");
2621 -moz-margin-end: 10px;
2622 vertical-align: middle;
2623}
2624
2625.panel-promo-closebutton {
2626 list-style-image: url("chrome://global/skin/icons/close-button.gif");
2627 -moz-margin-end: -3px;
2628 margin-top: -3px;
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;
2641}
2642
2643/* ::::: content area ::::: */
2644
2645#sidebar-box {
2646 background-color: #9C9CFF;
2647 color: #000000;
2648}
2649
2650#sidebar {
2651 background-color: #000000;
2652}
2653
2654#sidebar-splitter {
2655 -moz-margin-start: 0;
2656}
2657
2658#sidebar-header {
2659 color: #000000;
2660 padding: 2px;
2661}
2662
2663#sidebar-title {
2664 -moz-padding-start: 0px;
2665}
2666
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
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
2689.browserContainer > findbar {
2690/*
2691 background-color: -moz-dialog;
2692 color: -moz-DialogText;
2693*/
2694}
2695
2696/* Tabstrip */
2697
2698#TabsToolbar {
2699 min-height: 0;
2700 padding: 0;
2701 -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar");
2702}
2703
2704#TabsToolbar .toolbar-holder {
2705 background-color: #000000; /* correct effect of being an actual toolbar */
2706}
2707
2708#main-window[disablechrome] #TabsToolbar,
2709#TabsToolbar[tabsontop="false"] {
2710 border-bottom: 1px solid #008484;
2711}
2712
2713/* === BEGIN tabs.inc.css === */
2714
2715:root {
2716 /* --tab-toolbar-navbar-overlap: 1px; */
2717 /* --navbar-tab-toolbar-highlight-overlap: 1px; */
2718 /* --tab-min-height: 31px; */
2719}
2720#TabsToolbar {
2721 /* --tab-stroke-background-size: auto 100%; */
2722}
2723
2724.tabbrowser-tab,
2725.tabs-newtab-button,
2726#TabsToolbar > #new-tab-button {
2727 margin-top: 0px;
2728}
2729
2730.tabbrowser-tab {
2731 padding: 1px 4px 2px;
2732}
2733
2734.tabbrowser-tab:first-of-type {
2735 -moz-margin-start: 2px;
2736}
2737
2738.tabs-newtab-button,
2739#TabsToolbar > #new-tab-button,
2740#TabsToolbar > toolbarpaletteitem > #new-tab-button,
2741#TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
2742 border-radius: 8px 8px 0px 0px;
2743 -moz-margin-start: 0;
2744}
2745
2746.tabs-newtab-button:not(:hover),
2747#TabsToolbar > #new-tab-button:not(:hover),
2748#TabsToolbar > toolbarpaletteitem > #new-tab-button,
2749#TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
2750 background-color: #C09070;
2751}
2752
2753/* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */
2754.tabbrowser-tab[visuallyselected=true] {
2755/* position: relative;
2756 z-index: 2;*/
2757}
2758
2759.tab-background-middle {
2760}
2761
2762.tab-content {
2763}
2764
2765.tab-content[pinned] {
2766}
2767
2768.tab-throbber,
2769.tab-icon-image,
2770.tab-icon-sound,
2771.tab-close-button {
2772}
2773
2774.tab-throbber,
2775.tab-icon-image {
2776 height: 16px;
2777 width: 16px;
2778 -moz-margin-end: 3px;
2779}
2780
2781.tab-icon-image {
2782 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
2783}
2784
2785.tab-icon-overlay {
2786 width: 16px;
2787 height: 16px;
2788 margin-top: -8px;
2789 -moz-margin-start: -15px;
2790 margin-inline-end: -1px;
2791 position: relative;
2792}
2793
2794.tab-icon-overlay[crashed] {
2795 list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg");
2796}
2797
2798.tab-icon-overlay[soundplaying],
2799.tab-icon-overlay[muted]:not([crashed]) {
2800 border-radius: 10px;
2801}
2802
2803.tab-icon-overlay[soundplaying]:hover,
2804.tab-icon-overlay[muted]:hover {
2805 background-color: #FFCF00;
2806}
2807
2808.tab-icon-overlay[soundplaying] {
2809 display: -moz-box;
2810 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio");
2811}
2812
2813.tab-icon-overlay[muted]:not([crashed]) {
2814 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted");
2815}
2816
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");
2819}
2820
2821
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");
2824}
2825
2826.tab-throbber[busy] {
2827 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim-connect.png");
2828}
2829
2830.tab-throbber[progress] {
2831 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim.png");
2832}
2833
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
2844.tab-throbber[pinned],
2845.tab-icon-image[pinned] {
2846 -moz-margin-start: 2px;
2847 -moz-margin-end: 2px;
2848}
2849
2850.tab-label {
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;
2855}
2856
2857.tab-icon-sound {
2858 -moz-margin-start: 4px;
2859 width: 16px;
2860 height: 16px;
2861 padding: 0;
2862}
2863
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] {
2877 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab");
2878}
2879
2880.tab-icon-sound[soundplaying]:hover {
2881 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-hover");
2882}
2883
2884.tab-icon-sound[soundplaying]:hover:active {
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 {
2909 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-pressed");
2910}
2911
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
2924#TabsToolbar[brighttext] .tab-icon-sound[soundplaying] {
2925 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white");
2926}
2927
2928#TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover {
2929 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white-hover");
2930}
2931
2932#TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover:active {
2933 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white-pressed");
2934}
2935
2936#TabsToolbar[brighttext] .tab-icon-sound[muted] {
2937 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white");
2938}
2939
2940#TabsToolbar[brighttext] .tab-icon-sound[muted]:hover {
2941 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white-hover");
2942}
2943
2944#TabsToolbar[brighttext] .tab-icon-sound[muted]:hover:active {
2945 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white-pressed");
2946}
2947
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
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
2984.tab-background-start[visuallyselected=true]::after,
2985.tab-background-start[visuallyselected=true]::before,
2986.tab-background-start,
2987.tab-background-end,
2988.tab-background-end[visuallyselected=true]::after,
2989.tab-background-end[visuallyselected=true]::before {
2990}
2991
2992.tabbrowser-tab:not([visuallyselected=true]),
2993.tabbrowser-tab:-moz-lwtheme {
2994}
2995
2996/* tabbrowser-tab focus ring */
2997.tabbrowser-tab:focus {
2998 outline: 1px dotted;
2999}
3000
3001/* Selected tab */
3002
3003.tabbrowser-tab[visuallyselected="true"] {
3004}
3005
3006/* End selected tab */
3007
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
3033/* Tab pointer-events */
3034/*
3035.tabbrowser-tab {
3036 pointer-events: none;
3037}
3038
3039.tab-background-middle,
3040.tabs-newtab-button,
3041.tab-icon-overlay[soundplaying],
3042.tab-icon-overlay[muted]:not([crashed]),
3043.tab-icon-sound,
3044.tab-close-button {
3045 pointer-events: auto;
3046}
3047*/
3048/* Pinned tabs */
3049
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"]) {
3055 background-color: #E7ADE7;
3056}
3057
3058.tab-label[attention]:not([visuallyselected="true"]) {
3059 font-weight: bold;
3060}
3061
3062.tabbrowser-tab[pinned][titlechanged]:not([visuallyselected="true"]):hover {
3063 background-color: #3333FF;
3064 color: #000000;
3065}
3066
3067/* Tab separators */
3068/*
3069.tabbrowser-tab::after,
3070.tabbrowser-tab::before {
3071 width: 1px;
3072 -moz-margin-start: -1px;
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*/
3094/* New tab button */
3095
3096.tabs-newtab-button {
3097 width: 28px;
3098 /* width: calc(36px + var(--tab-curve-width)); */
3099}
3100
3101/* === END tabs.inc.css === */
3102
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 */
3109#main-window[tabsintitlebar][sizemode=normal] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar .tab-background-middle:not([visuallyselected=true]) {
3110/* clip-path: url(chrome://browser/content/browser.xul#tab-hover-clip-path);*/
3111}
3112
3113/* Tab DnD indicator */
3114.tab-drop-indicator {
3115 list-style-image: url("chrome://browser/skin/tabbrowser/tabDragIndicator.png");
3116 margin-bottom: -11px;
3117}
3118
3119/* Tab close button */
3120.tab-close-button {
3121 list-style-image: url("chrome://global/skin/icons/close-button.gif");
3122}
3123
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");
3127}
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");
3132}
3133
3134/* Tab scrollbox arrow, tabstrip new tab and all-tabs buttons */
3135
3136.tabbrowser-arrowscrollbox > .scrollbutton-up,
3137.tabbrowser-arrowscrollbox > .scrollbutton-down {
3138 margin: 0;
3139 padding-top: 0;
3140 padding-bottom: 0;
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 }
3149
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;
3161}
3162
3163.tabbrowser-arrowscrollbox > .scrollbutton-down[notifybgtab] {
3164 background-color: #008484;
3165}
3166
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
3174.tabs-newtab-button > .toolbarbutton-icon {
3175 margin-top: -1px;
3176 margin-bottom: -1px;
3177}
3178
3179.tabs-newtab-button,
3180#TabsToolbar > #new-tab-button,
3181#TabsToolbar > toolbarpaletteitem > #new-tab-button,
3182#TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
3183 list-style-image: url("chrome://browser/skin/tabbrowser/newtab.svg");
3184 -moz-image-region: auto;
3185}
3186
3187.tabs-newtab-button,
3188.tabs-newtab-button:hover,
3189#TabsToolbar > #new-tab-button,
3190#TabsToolbar > #new-tab-button:hover {
3191}
3192
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 {
3199}
3200
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");
3207}
3208
3209#alltabs-button:hover,
3210#alltabs-button:hover:active,
3211#alltabs-button[open="true"] {
3212 list-style-image: url("chrome://global/skin/arrow/arrow-down-hover.gif");
3213}
3214
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
3227/* All tabs menupopup */
3228.alltabs-item > .menu-iconic-left > .menu-iconic-icon {
3229 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
3230 -moz-image-region: auto;
3231}
3232
3233.alltabs-item[selected="true"] {
3234 font-weight: bold;
3235}
3236
3237.alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
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 }
3245}
3246
3247.alltabs-item[tabIsVisible]:not([_moz-menuactive="true"]) {
3248 background-color: #402800;
3249}
3250
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
3259toolbarbutton.chevron {
3260 list-style-image: url("chrome://global/skin/toolbar/chevron.gif") !important;
3261}
3262
3263toolbarbutton.chevron:hover {
3264 list-style-image: url("chrome://global/skin/toolbar/chevron-hover.gif") !important;
3265}
3266/*
3267toolbar[brighttext] toolbarbutton.chevron {
3268 list-style-image: url("chrome://global/skin/toolbar/chevron-inverted.png") !important;
3269}
3270*/
3271toolbarbutton.chevron:-moz-locale-dir(rtl) > .toolbarbutton-icon,
3272toolbarbutton.chevron:-moz-locale-dir(rtl):hover > .toolbarbutton-icon {
3273 transform: scaleX(-1);
3274}
3275
3276toolbarbutton.chevron > .toolbarbutton-text,
3277toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
3278 display: none;
3279}
3280
3281toolbarbutton.chevron > .toolbarbutton-icon {
3282 margin: 0;
3283}
3284
3285#sidebar-throbber[loading="true"] {
3286 list-style-image: url("chrome://global/skin/icons/loading.png");
3287 -moz-margin-end: 4px;
3288}
3289
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
3297/* Bookmarks toolbar */
3298#PlacesToolbarDropIndicator {
3299 list-style-image: url("chrome://communicator/skin/bookmarks/toolbarDropMarker.png");
3300}
3301
3302toolbarbutton.bookmark-item[dragover="true"][open="true"] {
3303 background-color: #008484 !important;
3304 color: #FFCF00 !important;
3305}
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;
3313}
3314
3315.menupopup-drop-indicator {
3316 list-style-image: none;
3317 height: 2px;
3318 -moz-margin-end: -4em;
3319 background-color: #008484;
3320}
3321
3322/* === BEGIN notification-icons.inc.css === */
3323
3324.popup-notification-icon {
3325 width: 64px;
3326 height: 64px;
3327 -moz-margin-end: 10px;
3328}
3329
3330.popup-notification-icon[popupid="geolocation"] {
3331 list-style-image: url("chrome://browser/skin/Geolocation-64.png");
3332}
3333
3334.popup-notification-icon[popupid="xpinstall-disabled"],
3335.popup-notification-icon[popupid="addon-install-blocked"],
3336.popup-notification-icon[popupid="addon-install-origin-blocked"] {
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
3356.popup-notification-icon[popupid="addon-install-complete"] {
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);
3362}
3363
3364.popup-notification-icon[popupid="click-to-play-plugins"] {
3365 list-style-image: url("chrome://mozapps/skin/plugins/pluginBlocked-64.png");
3366}
3367
3368.popup-notification-icon[popupid="web-notifications"] {
3369 list-style-image: url("chrome://browser/skin/web-notifications-icon.svg");
3370}
3371
3372.popup-notification-icon[popupid="indexedDB-permissions-prompt"],
3373.popup-notification-icon[popupid*="offline-app-requested"],
3374.popup-notification-icon[popupid="offline-app-usage"] {
3375 list-style-image: url("chrome://global/skin/icons/alert-question.gif");
3376}
3377
3378.popup-notification-icon[popupid="password"] {
3379 list-style-image: url("chrome://mozapps/skin/passwordmgr/key-64.png");
3380}
3381
3382.popup-notification-icon[popupid="webRTC-sharingDevices"],
3383.popup-notification-icon[popupid="webRTC-shareDevices"] {
3384 list-style-image: url("chrome://browser/skin/webRTC-shareDevice-64.png");
3385}
3386
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
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
3397.popup-notification-icon[popupid="pointerLock"] {
3398 list-style-image: url("chrome://browser/skin/pointerLock-64.png");
3399}
3400
3401/* Notification icon box */
3402#notification-popup .panel-promo-box {
3403/* margin: 10px -10px -10px; */
3404}
3405
3406#notification-popup-box {
3407 position: relative;
3408 background-color: #000000;
3409 background-clip: padding-box;
3410 padding-left: 3px;
3411 padding-right: 8px;
3412 border-radius: 3px 0 0 3px;
3413 border-image: url("chrome://browser/skin/urlbar-arrow.png") 0 8 0 0 / 0 8px 0 0;
3414 -moz-margin-end: -8px;
3415 border-right-width: 8px;
3416}
3417
3418window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] + #urlbar > #notification-popup-box {
3419/* padding-left: 7px; */
3420}
3421
3422/* This changes the direction of the main notification box on the url bar. */
3423#notification-popup-box:-moz-locale-dir(rtl),
3424/* This adds a second flip for the notification anchors, as they don't switch direction
3425 for RTL mode. */
3426.notification-anchor-icon:-moz-locale-dir(rtl) {
3427 transform: scaleX(-1);
3428}
3429
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
3436.notification-anchor-icon {
3437 list-style-image: url("chrome://global/skin/icons/information-16.png");
3438
3439 width: 16px;
3440 height: 16px;
3441 margin: 0 2px;
3442}
3443
3444.notification-anchor-icon:-moz-focusring {
3445 outline: 1px dotted #008484;
3446}
3447
3448.geo-notification-icon,
3449#geo-notification-icon {
3450 list-style-image: url("chrome://browser/skin/Geolocation-16.png");
3451}
3452
3453#addons-notification-icon {
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);
3463}
3464
3465.indexedDB-notification-icon,
3466#indexedDB-notification-icon {
3467 list-style-image: url("chrome://global/skin/icons/question-16.png");
3468}
3469
3470#password-notification-icon {
3471 list-style-image: url("chrome://mozapps/skin/passwordmgr/key-16.png");
3472}
3473
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
3480#plugins-notification-icon {
3481 list-style-image: url("chrome://browser/skin/notification-pluginNormal.png");
3482}
3483
3484#plugins-notification-icon.plugin-hidden {
3485 list-style-image: url("chrome://browser/skin/notification-pluginAlert.png");
3486}
3487
3488#plugins-notification-icon.plugin-blocked {
3489 list-style-image: url("chrome://browser/skin/notification-pluginBlocked.png");
3490}
3491
3492#plugins-notification-icon {
3493/* -moz-image-region: rect(0, 16px, 16px, 0);*/
3494}
3495
3496#plugins-notification-icon:hover {
3497/* -moz-image-region: rect(0, 32px, 16px, 16px);*/
3498}
3499
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
3507#plugins-notification-icon.plugin-blocked[showing] {
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
3520.webRTC-shareDevices-notification-icon,
3521#webRTC-shareDevices-notification-icon {
3522 list-style-image: url("chrome://browser/skin/webRTC-shareDevice-16.png");
3523}
3524
3525.webRTC-sharingDevices-notification-icon,
3526#webRTC-sharingDevices-notification-icon {
3527 list-style-image: url("chrome://browser/skin/webRTC-sharingDevice-16.png");
3528}
3529
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
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
3550.web-notifications-notification-icon,
3551#web-notifications-notification-icon {
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);
3564}
3565
3566#pointerLock-notification-icon {
3567 list-style-image: url("chrome://browser/skin/pointerLock-16.png");
3568}
3569
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
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
3667/* === END notification-icons.inc.css === */
3668
3669.popup-notification-body[popupid="addon-progress"],
3670.popup-notification-body[popupid="addon-install-confirmation"] {
3671 width: 28em;
3672 max-width: 28em;
3673}
3674
3675/* Translation infobar */
3676
3677/* === BEGIN infobar.inc.css === */
3678
3679notification[value="translation"] .messageImage {
3680 list-style-image: url("chrome://browser/skin/translation-16.png");
3681 -moz-image-region: rect(0, 32px, 16px, 16px);
3682}
3683
3684@media (min-resolution: 1.25dppx) {
3685 notification[value="translation"] .messageImage {
3686 list-style-image: url("chrome://browser/skin/translation-16@2x.png");
3687 -moz-image-region: rect(0, 64px, 32px, 32px);
3688 }
3689}
3690
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
3702notification[value="translation"] hbox[anonid="details"] {
3703 overflow: hidden;
3704}
3705
3706notification[value="translation"] button,
3707notification[value="translation"] menulist {
3708 min-width: 0;
3709}
3710
3711notification[value="translation"] menulist > .menulist-dropmarker {
3712}
3713
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
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 {
3744 -moz-margin-start: 16px;
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
3757/* === END infobar.inc.css === */
3758
3759notification[value="translation"] {
3760 min-height: 40px;
3761}
3762
3763.translation-menupopup {
3764 -moz-appearance: none;
3765}
3766
3767/* Bookmarks roots menu-items */
3768#subscribeToPageMenuitem:not([disabled]),
3769#subscribeToPageMenupopup {
3770 list-style-image: url("chrome://browser/skin/feeds/feedIcon16.png");
3771}
3772
3773#bookmarksToolbarFolderMenu,
3774#BMB_bookmarksToolbar,
3775#panelMenu_bookmarksToolbar {
3776 list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png");
3777 -moz-image-region: auto;
3778}
3779
3780#BMB_unsortedBookmarks,
3781#panelMenu_unsortedBookmarks {
3782 list-style-image: url("chrome://communicator/skin/bookmarks/unsortedBookmarks.png");
3783 -moz-image-region: auto;
3784}
3785
3786/* ::::: Keyboard UI Panel ::::: */
3787
3788.KUI-panel {
3789 color: #FF9F00;
3790 border-style: none;
3791 border-radius: 20px;
3792}
3793
3794.KUI-panel[level="top"] {
3795 /*background-color: rgba(27%,27%,27%,.65);*/
3796}
3797
3798/* Ctrl-Tab */
3799
3800#ctrlTab-panel {
3801 padding: 20px 10px 10px;
3802 font-weight: bold;
3803}
3804
3805.ctrlTab-favicon[src] {
3806 background-color: #000000;
3807 width: 20px;
3808 height: 20px;
3809 padding: 2px;
3810}
3811
3812.ctrlTab-preview-inner > .tabPreview-canvas {
3813}
3814
3815.ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas {
3816 margin-bottom: 2px;
3817}
3818
3819.ctrlTab-preview-inner {
3820 padding-bottom: 10px;
3821}
3822
3823#ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner {
3824 padding: 10px;
3825 background-color: #000000;
3826 border-radius: .5em;
3827}
3828
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;
3836}
3837
3838.ctrlTab-preview:not(#ctrlTab-showAll):focus > * > .ctrlTab-preview-inner {
3839 margin: -10px -10px 0;
3840}
3841
3842#ctrlTab-showAll {
3843 margin-top: .5em;
3844}
3845
3846/* Sync Panel */
3847
3848.sync-panel-icon {
3849 height:32px;
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
3863#sync-start-panel-title {
3864 font-size: 120%;
3865 font-weight: bold;
3866 margin-bottom: 5px;
3867}
3868
3869#sync-start-panel-subtitle {
3870 margin-bottom: 0;
3871}
3872
3873/* Status panel */
3874
3875.statuspanel-label {
3876 margin: 0;
3877 padding: 2px 4px;
3878 background: #404000;
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}
3898
3899/* HACK to abolish devily color on main content */
3900
3901#content {
3902 background-color: transparent !important;
3903}
3904
3905/* === BEGIN fullscreen/warning.inc.css === */
3906
3907html|*#fullscreen-warning {
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);
3912 border-radius: 8px;
3913 padding: 24px 16px;
3914 font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
3915}
3916
3917html|*#fullscreen-warning::before {
3918 margin: 0;
3919 width: 24px; height: 24px;
3920}
3921
3922html|*#fullscreen-warning.verifiedIdentity::before,
3923html|*#fullscreen-warning.verifiedDomain::before {
3924 content: url("chrome://browser/skin/fullscreen/secure.svg");
3925}
3926
3927html|*#fullscreen-warning.unknownIdentity::before {
3928 content: url("chrome://browser/skin/fullscreen/insecure.svg");
3929}
3930
3931html|*#fullscreen-domain-text,
3932html|*#fullscreen-generic-text {
3933 font-size: 21px;
3934 font-weight: lighter;
3935 color: #A09090;
3936 margin: 0 16px;
3937}
3938
3939html|*#fullscreen-domain {
3940 font-weight: bold;
3941 margin: 0;
3942}
3943
3944html|*#fullscreen-exit-button {
3945 padding: 5px 30px;
3946 font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
3947 font-size: 14px;
3948 font-weight: lighter;
3949 margin: 0;
3950 box-sizing: content-box;
3951
3952 border-radius: 300px;
3953 border: none;
3954 background-color: #C09070;
3955 color: #000000;
3956}
3957
3958/* === END fullscreen/warning.inc.css === */
3959
3960/* === BEGIN commandline.inc.css === */
3961
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
3975/* Developer toolbar */
3976
3977#developer-toolbar {
3978 border-top: 3px solid var(--gcli-background-color);
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
4002#developer-toolbar > toolbarbutton {
4003/* margin: 0;
4004 padding: 0 10px;
4005 width: 32px; */
4006}
4007
4008.developer-toolbar-button > image {
4009/* margin: auto 10px; */
4010}
4011
4012#developer-toolbar-toolbox-button > label {
4013 display: none;
4014}
4015
4016.developer-toolbar-button > .toolbarbutton-icon,
4017#developer-toolbar-closebutton > .toolbarbutton-icon {
4018 width: 16px;
4019 height: 16px;
4020}
4021
4022#developer-toolbar-toolbox-button {
4023 list-style-image: url("chrome://devtools/skin/toggle-tools.png");
4024 -moz-image-region: rect(0px, 16px, 16px, 0px);
4025}
4026
4027#developer-toolbar-toolbox-button > label {
4028 display: none;
4029}
4030
4031#developer-toolbar-toolbox-button:hover,
4032#developer-toolbar-toolbox-button:hover:active,
4033#developer-toolbar-toolbox-button[checked=true] {
4034 -moz-image-region: rect(0px, 32px, 16px, 16px);
4035}
4036
4037@media (min-resolution: 2dppx) {
4038 #developer-toolbar-toolbox-button {
4039 list-style-image: url("chrome://devtools/skin/toggle-tools@2x.png");
4040 -moz-image-region: rect(0px, 32px, 32px, 0px);
4041 }
4042
4043 #developer-toolbar-toolbox-button:hover,
4044 #developer-toolbar-toolbox-button:hover:active,
4045 #developer-toolbar-toolbox-button[checked=true] {
4046 -moz-image-region: rect(0px, 64px, 32px, 32px);
4047 }
4048}
4049
4050#developer-toolbar-closebutton {
4051 list-style-image: url("chrome://devtools/skin/close.png");
4052 -moz-image-region: rect(0px, 16px, 16px, 0px);
4053 min-width: 16px;
4054 width: 16px;
4055}
4056
4057#developer-toolbar-closebutton > .toolbarbutton-icon {
4058}
4059
4060#developer-toolbar-closebutton > .toolbarbutton-text {
4061 display: none;
4062}
4063
4064#developer-toolbar-closebutton:hover,
4065#developer-toolbar-closebutton:hover:active {
4066 -moz-image-region: rect(0px, 32px, 16px, 16px);
4067}
4068
4069@media (min-resolution: 2dppx) {
4070 #developer-toolbar-closebutton {
4071 list-style-image: url("chrome://devtools/skin/close@2x.png");
4072 -moz-image-region: rect(0px, 32px, 32px, 0px);
4073 }
4074
4075 #developer-toolbar-closebutton:hover,
4076 #developer-toolbar-closebutton:hover:active {
4077 -moz-image-region: rect(0px, 64px, 32px, 32px);
4078 }
4079}
4080
4081/* GCLI */
4082
4083html|*#gcli-tooltip-frame,
4084html|*#gcli-output-frame {
4085 padding: 0;
4086 border-width: 0;
4087 background-color: transparent;
4088}
4089
4090#gcli-output,
4091#gcli-tooltip {
4092 border-width: 0;
4093 background-color: transparent;
4094}
4095
4096.gclitoolbar-input-node,
4097.gclitoolbar-complete-node {
4098 margin: 1px 3px;
4099 -moz-box-align: center;
4100 padding-top: 0;
4101 padding-bottom: 0;
4102 padding-right: 8px;
4103 background-color: transparent;
4104}
4105
4106.gclitoolbar-input-node {
4107/* line-height: 32px;
4108 outline-style: none; */
4109 background-repeat: no-repeat;
4110 background-color: var(--gcli-input-background);
4111}
4112
4113.gclitoolbar-input-node[focused="true"] {
4114 background-color: var(--gcli-input-focused-background);
4115}
4116
4117.gclitoolbar-input-node::before {
4118 content: "";
4119 display: inline-block;
4120 -moz-box-ordinal-group: 0;
4121 width: 16px;
4122 height: 16px;
4123 margin: 0 2px;
4124 background-image: url("chrome://devtools/skin/images/commandline-icon.png");
4125 background-position: 0 center;
4126 background-size: 32px 16px;
4127}
4128
4129.gclitoolbar-input-node[focused="true"]::before {
4130 background-position: -16px center;
4131}
4132
4133@media (min-resolution: 2dppx) {
4134 .gclitoolbar-input-node::before {
4135 background-image: url("chrome://devtools/skin/images/commandline-icon@2x.png");
4136 }
4137}
4138
4139.gclitoolbar-input-node:not([focused="true"]) {
4140 border-color: transparent;
4141}
4142
4143.gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection {
4144 background-color: var(--selection-background);
4145 color: var(--selection-color);
4146}
4147
4148.gclitoolbar-complete-node {
4149 padding-left: 21px;
4150 background-color: transparent;
4151 color: transparent;
4152 z-index: 100;
4153 pointer-events: none;
4154}
4155
4156.gcli-in-incomplete,
4157.gcli-in-error,
4158.gcli-in-ontab,
4159.gcli-in-todo,
4160.gcli-in-closebrace,
4161.gcli-in-param,
4162.gcli-in-valid {
4163 margin: 0;
4164 padding: 0;
4165}
4166
4167.gcli-in-incomplete {
4168 border-bottom: 2px dotted #8050B0;
4169}
4170
4171.gcli-in-error {
4172 border-bottom: 2px dotted #FF0000;
4173}
4174
4175.gcli-in-ontab {
4176 color: #9C9CFF;
4177}
4178
4179.gcli-in-todo {
4180 color: #795900;
4181}
4182
4183.gcli-in-closebrace {
4184 color: #8050B0;
4185}
4186
4187/* === END commandline.inc.css === */
4188
4189/* === BEGIN responsivedesign.inc.css === */
4190
4191/* Responsive Mode */
4192
4193.browserContainer[responsivemode] {
4194 background-color: #221500;
4195 padding: 0 20px 20px 20px;
4196}
4197
4198.browserStack[responsivemode] {
4199 box-shadow: 0 0 7px #9C9CFF;
4200}
4201
4202.devtools-responsiveui-toolbar {
4203 background: transparent;
4204 /* text color is textColor from dark theme, since no theme is applied to
4205 * the responsive toolbar.
4206 */
4207 color: #FF9F00;
4208 margin: 10px 0;
4209 padding: 0;
4210 box-shadow: none;
4211 border-bottom-width: 0;
4212}
4213
4214.devtools-responsiveui-menulist,
4215.devtools-responsiveui-toolbarbutton {
4216 -moz-box-align: center;
4217 min-width: 32px;
4218/* min-height: 22px;*/
4219/* margin: 0 3px; */
4220}
4221
4222.devtools-responsiveui-menulist .menulist-editable-box {
4223 background-color: transparent;
4224}
4225
4226.devtools-responsiveui-menulist html|*.menulist-editable-input {
4227 color: inherit;
4228 text-align: center;
4229}
4230
4231.devtools-responsiveui-menulist html|*.menulist-editable-input::-moz-selection {
4232/* background: hsla(212,7%,57%,.35);*/
4233}
4234
4235.devtools-responsiveui-toolbarbutton > .toolbarbutton-icon {
4236 width: 16px;
4237 height: 16px;
4238}
4239
4240.devtools-responsiveui-toolbarbutton > .toolbarbutton-menubutton-button {
4241 -moz-box-orient: horizontal;
4242}
4243
4244.devtools-responsiveui-menulist:-moz-focusring,
4245.devtools-responsiveui-toolbarbutton:-moz-focusring {
4246/* outline: 1px dotted hsla(210,30%,85%,0.7);
4247 outline-offset: -4px;*/
4248}
4249
4250.devtools-responsiveui-toolbarbutton:not([label]) > .toolbarbutton-text {
4251 display: none;
4252}
4253
4254.devtools-responsiveui-toolbarbutton:not([checked=true]):hover:active {
4255/* border-color: hsla(210,8%,5%,.6);
4256 background: linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
4257 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); */
4258}
4259
4260.devtools-responsiveui-menulist[open=true],
4261.devtools-responsiveui-toolbarbutton[open=true],
4262.devtools-responsiveui-toolbarbutton[checked=true] {
4263/* border-color: hsla(210,8%,5%,.6) !important;
4264 background: linear-gradient(hsla(220,6%,10%,.6), hsla(210,11%,18%,.45) 75%, hsla(210,11%,30%,.4));
4265 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); */
4266}
4267
4268.devtools-responsiveui-toolbarbutton[checked=true] {
4269/* color: hsl(208,100%,60%); */
4270}
4271
4272.devtools-responsiveui-toolbarbutton[checked=true]:hover {
4273/* background-color: transparent !important;*/
4274}
4275
4276.devtools-responsiveui-toolbarbutton[checked=true]:hover:active {
4277/* background-color: hsla(210,8%,5%,.2) !important;*/
4278}
4279
4280.devtools-responsiveui-menulist > .menulist-label-box {
4281 text-align: center;
4282}
4283
4284.devtools-responsiveui-menulist > .menulist-dropmarker {
4285/* display: -moz-box;
4286 background-color: transparent;
4287 list-style-image: url("chrome://devtools/skin/dropmarker.svg");
4288 -moz-box-align: center;
4289 border-width: 0;
4290 min-width: 16px;*/
4291}
4292
4293.devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
4294/* color: inherit;
4295 border-width: 0;
4296 -moz-border-end: 1px solid hsla(210,8%,5%,.45);
4297 box-shadow: -1px 0 0 hsla(210,16%,76%,.15) inset, 1px 0 0 hsla(210,16%,76%,.15);*/
4298}
4299
4300.devtools-responsiveui-toolbarbutton[type=menu-button]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button {
4301/* box-shadow: 1px 0 0 hsla(210,16%,76%,.15) inset, -1px 0 0 hsla(210,16%,76%,.15);*/
4302}
4303
4304.devtools-responsiveui-toolbarbutton[type=menu-button] {
4305/* padding: 0 1px;*/
4306 -moz-box-align: stretch;
4307}
4308
4309.devtools-responsiveui-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
4310.devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
4311/* list-style-image: url("chrome://devtools/skin/dropmarker.svg");
4312 -moz-box-align: center;
4313 padding: 0 3px;*/
4314}
4315
4316.devtools-responsiveui-toolbar:-moz-locale-dir(ltr) > *:first-child,
4317.devtools-responsiveui-toolbar:-moz-locale-dir(rtl) > *:last-child {
4318 margin-left: 3px;
4319}
4320
4321.devtools-responsiveui-close {
4322 list-style-image: url("chrome://devtools/skin/close.png");
4323 -moz-image-region: rect(0px,16px,16px,0px);
4324}
4325
4326.devtools-responsiveui-close:hover {
4327 -moz-image-region: rect(0px,32px,16px,16px);
4328}
4329
4330.devtools-responsiveui-rotate {
4331 list-style-image: url("chrome://devtools/skin/responsiveui-rotate.png");
4332 -moz-image-region: rect(0px,16px,16px,0px);
4333}
4334
4335.devtools-responsiveui-rotate:hover {
4336 -moz-image-region: rect(0px,32px,16px,16px);
4337}
4338
4339@media (min-resolution: 2dppx) {
4340 .devtools-responsiveui-close {
4341 list-style-image: url("chrome://devtools/skin/close@2x.png");
4342 }
4343
4344 .devtools-responsiveui-close:hover {
4345 -moz-image-region: rect(0px,64px,32px,32px);
4346 }
4347
4348 .devtools-responsiveui-rotate {
4349 list-style-image: url("chrome://devtools/skin/responsiveui-rotate@2x.png");
4350 }
4351
4352 .devtools-responsiveui-rotate:hover {
4353 -moz-image-region: rect(0px,64px,32px,32px);
4354 }
4355}
4356
4357.devtools-responsiveui-touch {
4358 list-style-image: url("chrome://devtools/skin/responsiveui-touch.png");
4359 -moz-image-region: rect(0px,16px,16px,0px);
4360}
4361
4362.devtools-responsiveui-touch:hover,
4363.devtools-responsiveui-touch[checked],
4364.devtools-responsiveui-touch[checked]:hover {
4365 -moz-image-region: rect(0px,32px,16px,16px);
4366}
4367
4368@media (min-resolution: 2dppx) {
4369 .devtools-responsiveui-touch {
4370 list-style-image: url("chrome://devtools/skin/responsiveui-touch@2x.png");
4371 -moz-image-region: rect(0px,32px,32px,0px);
4372 }
4373
4374 .devtools-responsiveui-touch:hover,
4375 .devtools-responsiveui-touch[checked],
4376 .devtools-responsiveui-touch[checked]:hover {
4377 -moz-image-region: rect(0px,64px,32px,32px);
4378 }
4379}
4380
4381.devtools-responsiveui-screenshot {
4382 list-style-image: url("chrome://devtools/skin/responsiveui-screenshot.png");
4383 -moz-image-region: rect(0px,16px,16px,0px);
4384}
4385
4386.devtools-responsiveui-screenshot:hover {
4387 -moz-image-region: rect(0px,32px,16px,16px);
4388}
4389
4390@media (min-resolution: 2dppx) {
4391 .devtools-responsiveui-screenshot {
4392 list-style-image: url("chrome://devtools/skin/responsiveui-screenshot@2x.png");
4393 }
4394
4395 .devtools-responsiveui-screenshot:hover {
4396 -moz-image-region: rect(0px,64px,32px,32px);
4397 }
4398}
4399
4400.devtools-responsiveui-resizebarV {
4401 width: 7px;
4402 height: 24px;
4403 cursor: ew-resize;
4404 transform: translate(12px, -12px);
4405 background-size: cover;
4406 background-image: url("chrome://devtools/skin/responsive-vertical-resizer.png");
4407}
4408
4409.devtools-responsiveui-resizebarH {
4410 width: 24px;
4411 height: 7px;
4412 cursor: ns-resize;
4413 transform: translate(-12px, 12px);
4414 background-size: cover;
4415 background-image: url("chrome://devtools/skin/responsive-horizontal-resizer.png");
4416}
4417
4418.devtools-responsiveui-resizehandle {
4419 width: 16px;
4420 height: 16px;
4421 cursor: se-resize;
4422 transform: translate(12px, 12px);
4423 background-size: cover;
4424 background-image: url("chrome://devtools/skin/responsive-se-resizer.png");
4425}
4426
4427/* FxOS custom mode with additional buttons and phone look'n feel */
4428
4429/* Hide devtools manual resizer */
4430.browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizehandle,
4431.browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarH,
4432.browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarV {
4433 display: none;
4434}
4435
4436/* Gives responsive mode a phone look'n feel */
4437.browserStack[responsivemode].fxos-mode {
4438 padding: 60px 15px 0;
4439
4440 border-radius: 25px / 20px;
4441 border-bottom-left-radius: 0;
4442 border-bottom-right-radius: 0;
4443 border: 1px solid #FFFFFF;
4444 border-bottom-width: 0;
4445
4446 background-color: #353535;
4447
4448 box-shadow: 0 3px 0.7px 1px #777777, 0 5px rgba(0, 0, 0, 0.4) inset;
4449
4450 background-image: linear-gradient(to right, #111 11%, #333 56%);
4451 min-width: 320px;
4452}
4453
4454.devtools-responsiveui-hardware-buttons {
4455 -moz-appearance: none;
4456 padding: 20px;
4457
4458 border: 1px solid #FFFFFF;
4459 border-bottom-left-radius: 25px;
4460 border-bottom-right-radius: 25px;
4461 border-top-width: 0;
4462
4463 box-shadow: 0 3px 0.7px 1px #777777, 0 -7px rgba(0, 0, 0, 0.4) inset;
4464
4465 background-image: linear-gradient(to right, #111 11%, #333 56%);
4466}
4467
4468.devtools-responsiveui-home-button {
4469 -moz-user-focus: ignore;
4470 width: 40px;
4471 height: 30px;
4472 list-style-image: url("chrome://devtools/skin/responsiveui-home.png");
4473}
4474
4475.devtools-responsiveui-sleep-button {
4476 -moz-user-focus: ignore;
4477 -moz-appearance: none;
4478 /* compensate browserStack top padding */
4479 margin-top: -67px;
4480 margin-right: 10px;
4481
4482 min-width: 10px;
4483 width: 50px;
4484 height: 5px;
4485
4486 border: 1px solid #444;
4487 border-top-right-radius: 12px;
4488 border-top-left-radius: 12px;
4489 border-bottom-color: transparent;
4490
4491 background-image: linear-gradient(to top, #111 11%, #333 56%);
4492}
4493
4494.devtools-responsiveui-sleep-button:hover:active {
4495 background-image: linear-gradient(to top, #aaa 11%, #ddd 56%);
4496}
4497
4498.devtools-responsiveui-volume-buttons {
4499 margin-left: -29px;
4500}
4501
4502.devtools-responsiveui-volume-up-button,
4503.devtools-responsiveui-volume-down-button {
4504 -moz-user-focus: ignore;
4505 -moz-appearance: none;
4506 border: 1px solid red;
4507 min-width: 8px;
4508 height: 40px;
4509
4510 border: 1px solid #444;
4511 border-right-color: transparent;
4512
4513 background-image: linear-gradient(to right, #111 11%, #333 56%);
4514}
4515
4516.devtools-responsiveui-volume-up-button:hover:active,
4517.devtools-responsiveui-volume-down-button:hover:active {
4518 background-image: linear-gradient(to right, #aaa 11%, #ddd 56%);
4519}
4520
4521.devtools-responsiveui-volume-up-button {
4522 border-top-left-radius: 12px;
4523}
4524
4525.devtools-responsiveui-volume-down-button {
4526 border-bottom-left-radius: 12px;
4527}
4528
4529@media (min-resolution: 2dppx) {
4530 .devtools-responsiveui-resizebarV {
4531 background-image: url("chrome://devtools/skin/responsive-vertical-resizer@2x.png");
4532 }
4533
4534 .devtools-responsiveui-resizebarH {
4535 background-image: url("chrome://devtools/skin/responsive-horizontal-resizer@2x.png");
4536 }
4537
4538 .devtools-responsiveui-resizehandle {
4539 background-image: url("chrome://devtools/skin/responsive-se-resizer@2x.png");
4540 }
4541}
4542
4543/* === END responsivedesign.inc.css === */
4544
4545/* === including indicator.css is done at the start of the file === */
4546
4547/* Error counter */
4548
4549#developer-toolbar-toolbox-button[error-count]:before {
4550 color: #000000;
4551 min-width: 16px;
4552 text-shadow: none;
4553 background-color: #FF0000;
4554 border-radius: 1px;
4555 -moz-margin-end: 5px;
4556}
4557
4558/* Social toolbar item */
4559
4560#social-notification-icon-mentions {
4561 background-color: #000000;
4562 border-radius: 3px;
4563 -moz-margin-start: 2px;
4564}
4565
4566#social-notification-icon-mentions:hover {
4567 background-color: #FFCF00;
4568}
4569
4570#social-notification-icon-mentions[open="true"] {
4571 background-color: #FF9F00;
4572}
4573
4574#social-sidebar-splitter {
4575 border: 0;
4576}
4577
4578#socialActivatedNotification .popup-notification-button-container {
4579 margin-left: 6px;
4580}
4581
4582.social-activation-icon {
4583 width: auto;
4584 height: auto;
4585 max-height: 64px;
4586 max-width: 64px;
4587}
4588
4589#social-activation-message {
4590 max-width: 250px;
4591}
4592
4593#social-activation-message > label {
4594 margin: 0;
4595}
4596
4597/* social toolbar provider menu */
4598.social-statusarea-popup {
4599 margin-top: 0;
4600 margin-left: -12px;
4601 margin-right: -12px;
4602}
4603
4604.social-statusarea-user {
4605 border-bottom: 1px solid #9C9CFF;
4606 background-color: #000000;
4607 color: #FF9F00;
4608 position: relative;
4609 cursor: pointer;
4610}
4611
4612.social-statusarea-user-portrait {
4613 width: 32px;
4614 height: 32px;
4615 border-radius: 2px;
4616 margin: 10px;
4617}
4618
4619.social-statusarea-loggedInStatus {
4620 background: transparent;
4621 border: none;
4622 color: #3333FF;
4623 min-width: 0;
4624 margin: 0 6px;
4625 list-style-image: none;
4626}
4627
4628#social-statusarea-user[_moz-menuactive] > vbox > .social-statusarea-loggedInStatus {
4629 text-decoration: underline;
4630}
4631
4632.social-panel > .panel-arrowcontainer > .panel-arrowcontent {
4633 padding: 0;
4634}
4635
4636.social-panel-frame {
4637 border-radius: inherit;
4638}
4639
4640/* === BEGIN chat.inc.css === */
4641
4642#social-sidebar-header {
4643 padding: 3px;
4644}
4645
4646#manage-share-providers,
4647#social-sidebar-button {
4648 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
4649 -moz-image-region: rect(0, 468px, 18px, 450px);
4650}
4651
4652#social-sidebar-button {
4653 -moz-appearance: none;
4654 border: none;
4655 padding: 0;
4656 margin: 2px;
4657}
4658#manage-share-providers > .toolbarbutton-icon,
4659#social-sidebar-button > .toolbarbutton-icon {
4660 min-height: 18px;
4661 min-width: 18px;
4662}
4663#manage-share-providers:hover,
4664#manage-share-providers:hover:active,
4665#social-sidebar-button:hover,
4666#social-sidebar-button:hover:active {
4667 -moz-image-region: rect(18px, 468px, 36px, 450px);
4668}
4669#social-sidebar-button > .toolbarbutton-menu-dropmarker {
4670 display: none;
4671}
4672
4673#social-sidebar-button[loading="true"] {
4674 list-style-image: url("chrome://global/skin/icons/loading.png");
4675}
4676
4677#social-sidebar-favico {
4678 max-height: 16px;
4679 max-width: 16px;
4680 padding: 0;
4681 margin: 2px;
4682}
4683
4684.chat-status-icon {
4685 max-height: 16px;
4686 max-width: 16px;
4687 padding: 0;
4688}
4689
4690.chat-toolbarbutton {
4691 -moz-appearance: none;
4692 border: none;
4693 padding: 0 3px;
4694 margin: 0;
4695 background: none;
4696}
4697
4698.chat-toolbarbutton > .toolbarbutton-text {
4699 display: none;
4700}
4701
4702.chat-toolbarbutton > .toolbarbutton-icon {
4703 width: 16px;
4704 height: 16px;
4705}
4706
4707.chat-close-button {
4708 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close");
4709}
4710
4711.chat-close-button:hover {
4712 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close-hover");
4713}
4714
4715.chat-close-button:hover:active {
4716 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close-active");
4717}
4718
4719.chat-minimize-button {
4720 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize");
4721}
4722
4723.chat-minimize-button:hover {
4724 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize-hover");
4725}
4726
4727.chat-minimize-button:hover:active {
4728 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize-active");
4729}
4730
4731.chat-swap-button {
4732 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand");
4733 transform: rotate(180deg);
4734}
4735
4736.chat-swap-button:hover {
4737 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand-hover");
4738}
4739
4740.chat-swap-button:hover:active {
4741 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand-active");
4742}
4743
4744chatbar > chatbox > .chat-titlebar > .chat-swap-button {
4745 transform: none;
4746}
4747
4748.chat-title {
4749 color: #000000;
4750 text-shadow: none;
4751 cursor: inherit;
4752}
4753
4754.chat-titlebar {
4755 background-color: #9C9CFF;
4756 color: #000000;
4757 height: 26px;
4758 min-height: 26px;
4759 width: 100%;
4760 margin: 0;
4761 padding: 5px 4px;
4762 border: 1px solid #008484;
4763 border-bottom: 0;
4764 border-top-left-radius: 4px;
4765 border-top-right-radius: 4px;
4766 cursor: pointer;
4767 background-color: #A09090;
4768}
4769
4770.chat-titlebar[selected] {
4771 background-color: #008484;
4772}
4773
4774.chat-titlebar > .notification-anchor-icon {
4775 margin-left: 2px;
4776 margin-right: 2px;
4777}
4778
4779.chat-titlebar[minimized="true"] {
4780 border-bottom: none;
4781}
4782
4783.chat-titlebar[selected] {
4784 background-color: #008484;
4785}
4786
4787.chat-titlebar[activity] {
4788 background-color: #E7ADE7;
4789}
4790
4791.chat-frame {
4792 padding: 0;
4793 margin: 0;
4794 overflow: hidden;
4795}
4796
4797.chatbar-button {
4798 list-style-image: url("chrome://browser/skin/social/services-16.png");
4799 background-color: #000000;
4800 border: none;
4801 margin: 0;
4802 padding: 2px;
4803 height: 21px;
4804 width: 21px;
4805 border-top: 1px solid #008484;
4806 -moz-border-end: 1px solid #008484;
4807}
4808
4809@media (min-resolution: 2dppx) {
4810 .chatbar-button {
4811 list-style-image: url("chrome://browser/skin/social/services-16@2x.png");
4812 }
4813}
4814
4815.chatbar-button:hover {
4816 background-color: #FFCF00;
4817}
4818.chatbar-button[open="true"] {
4819 background-color: #FF9F00;
4820}
4821
4822.chatbar-button[activity]:not([open]) {
4823 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%);
4824}
4825
4826.chatbar-button > .toolbarbutton-icon {
4827 width: 16px;
4828}
4829
4830.chatbar-button > menupopup > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
4831 width: auto;
4832 height: auto;
4833 max-height: 16px;
4834 max-width: 16px;
4835}
4836
4837.chatbar-button > .toolbarbutton-icon {
4838 opacity: .6;
4839 -moz-margin-end: 0;
4840}
4841.chatbar-button:hover > .toolbarbutton-icon,
4842.chatbar-button[open="true"] > .toolbarbutton-icon {
4843 opacity: 1;
4844}
4845
4846.chatbar-button:hover,
4847.chatbar-button[open="true"] {
4848}
4849
4850.chatbar-button > .toolbarbutton-text,
4851.chatbar-button > .toolbarbutton-menu-dropmarker {
4852 display: none;
4853}
4854
4855.chatbar-button[activity]:not([open="true"]) {
4856 background-color: #E7ADE7;
4857}
4858
4859.chatbar-button > menupopup > menuitem[activity] {
4860 font-weight: bold;
4861}
4862
4863.chatbar-innerbox {
4864 background: transparent;
4865 overflow: hidden;
4866}
4867
4868chatbar {
4869 -moz-margin-end: 20px;
4870}
4871
4872chatbox {
4873 -moz-margin-start: 4px;
4874 background-color: transparent;
4875}
4876
4877chatbar > chatbox {
4878 /* Apply the same border-radius as the .chat-titlebar to make the box-shadow
4879 go round nicely. */
4880/* border-top-left-radius: 4px;
4881 border-top-right-radius: 4px;*/
4882 /* Offset the chatbox the same amount as the box-shadows' spread, to make it
4883 visible. */
4884/* -moz-margin-end: 5px;*/
4885}
4886
4887chatbox[minimized="true"] {
4888 width: 160px;
4889 height: 20px;
4890}
4891
4892window > chatbox {
4893 -moz-margin-start: 0px;
4894 margin: 0px;
4895 border: none;
4896 padding: 0px;
4897}
4898
4899/* === END chat.inc.css === */
4900
4901/* === BEGIN plugin-doorhanger.inc.css === */
4902
4903/**
4904 * Plugin Doorhanger Styles
4905 */
4906
4907#notification-popup[popupid="click-to-play-plugins"] > .panel-arrowcontainer > .panel-arrowcontent {
4908 padding: 6px 1px 2px;
4909}
4910
4911.click-to-play-plugins-notification-center-box {
4912}
4913
4914.plugin-popupnotification-centeritem:nth-child(odd) {
4915/* background-color: rgba(0,0,0,0.1);*/
4916}
4917
4918.center-item-label {
4919 margin-bottom: 0;
4920 text-overflow: ellipsis;
4921}
4922
4923.center-item-warning-icon {
4924 background-image: url("chrome://mozapps/skin/extensions/alerticon-info-negative.png");
4925 background-repeat: no-repeat;
4926 width: 16px;
4927 height: 15px;
4928 -moz-margin-start: 6px;
4929}
4930
4931.click-to-play-plugins-notification-button-container {
4932}
4933
4934.click-to-play-popup-button {
4935 width: 50%;
4936}
4937
4938.click-to-play-plugins-notification-description-box {
4939 margin-left: 5px;
4940 margin-right: 5px;
4941 margin-top: 0;
4942 padding-bottom: 3px;
4943}
4944
4945.click-to-play-plugins-outer-description {
4946 margin-top: 1px;
4947}
4948
4949.click-to-play-plugins-notification-link,
4950.center-item-link {
4951 margin: 0;
4952}
4953
4954.messageImage[value="plugin-hidden"] {
4955 list-style-image: url("chrome://browser/skin/notification-pluginNormal.png");
4956}
4957
4958/* Keep any changes to this style in sync with pluginProblem.css */
4959notification.pluginVulnerable {
4960}
4961
4962notification.pluginVulnerable .messageImage {
4963 list-style-image: url("chrome://browser/skin/notification-pluginBlocked.png");
4964}
4965
4966/* === END plugin-doorhanger.inc.css === */
4967
4968/* === BEGIN login-doorhanger.inc.css === */
4969
4970#notification-popup[popupid="login-fill"] > .panel-arrowcontainer > .panel-arrowcontent {
4971 /* Since we display a sliding subview that extends to the border, we cannot
4972 * keep the default padding of arrow panels. We use the same padding in the
4973 * individual content views instead. Since we removed the padding, we also
4974 * have to ensure the contents are clipped to the border box. */
4975 padding: 0;
4976 overflow: hidden;
4977}
4978
4979#login-fill-mainview,
4980#login-fill-details {
4981 padding: var(--panel-arrowcontent-padding);
4982}
4983
4984#login-fill-doorhanger[inDetailView] > #login-fill-mainview {
4985 transform: translateX(-14px);
4986}
4987
4988#login-fill-mainview,
4989#login-fill-details {
4990 transition: transform 150ms;
4991}
4992
4993#login-fill-doorhanger:not([inDetailView]) > #login-fill-details {
4994 transform: translateX(105%);
4995}
4996
4997#login-fill-doorhanger:not([inDetailView]) > #login-fill-details:-moz-locale-dir(rtl) {
4998 transform: translateX(-105%);
4999}
5000
5001#login-fill-doorhanger[inDetailView] > #login-fill-clickcapturer {
5002 background-color: hsla(240,39%,100%,.1);
5003}
5004
5005#login-fill-testing {
5006 color: #FF0000;
5007 font-weight: bold;
5008}
5009
5010#login-fill-list {
5011 border: 1px solid #9C9CFF;
5012 max-height: 20em;
5013}
5014
5015.login-fill-item[disabled] {
5016 color: #8050B0;
5017 background-color: #000000;
5018}
5019
5020.login-fill-item[disabled][selected] {
5021 background-color: #008484;
5022}
5023
5024.login-hostname {
5025 margin: 4px;
5026 font-weight: bold;
5027}
5028
5029.login-fill-item.different-hostname > .login-hostname {
5030 color: #A09090;
5031 font-style: italic;
5032}
5033
5034.login-username {
5035 margin: 4px;
5036 color: #A09090;
5037}
5038
5039#login-fill-details {
5040 padding: 4px;
5041 background: var(--panel-arrowcontent-background);
5042 color: var(--panel-arrowcontent-color);
5043 background-clip: padding-box;
5044 border-left: 1px solid #9C9CFF;
5045 -moz-margin-start: 38px;
5046}
5047
5048/* === END login-doorhanger.inc.css === */
5049
5050/* === BEGIN customizeMode.inc.css === */
5051
5052/* Customization mode */
5053
5054#main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox {
5055 margin-bottom: 1em;
5056}
5057
5058#main-window:-moz-any([customize-entering],[customize-entered]) #content-deck,
5059#main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
5060#main-window:-moz-any([customize-entering],[customize-entered]) #navigator-toolbox {
5061 margin-left: 1em;
5062 margin-right: 1em;
5063}
5064
5065#main-window:-moz-any([customize-entering],[customize-exiting]) #tab-view-deck {
5066 pointer-events: none;
5067}
5068
5069#main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
5070#PanelUI-contents > .panel-customization-placeholder {
5071 -moz-outline-radius: 2.5px;
5072 outline: 1px dashed transparent;
5073}
5074
5075#main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before {
5076 /* Prevent jumping of tabs when switching a window between inactive and active (bug 853415). */
5077 -moz-box-ordinal-group: 0;
5078 content: "";
5079 display: -moz-box;
5080 height: 100%;
5081 left: 0;
5082 outline-offset: -2px;
5083 pointer-events: none;
5084 position: absolute;
5085 top: 0;
5086 width: 100%;
5087}
5088
5089/* Shift the TabsToolbar outline up 2px since the #nav-bar is shifted up by 1px and the
5090 #TabsToolbar::after is a pixel higher to draw the bottom border of the tabstrip so this makes the
5091 offset from the bottom effectively the same as other targets (-2px). */
5092#main-window[customize-entered] #TabsToolbar.customization-target::before {
5093/* top: -2px;*/
5094}
5095
5096/* The parents of the outline pseudo-elements need to be positioned so that the outline is positioned relative to it. */
5097#main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover,
5098#main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)),
5099#main-window[customize-entered] #nav-bar-customization-target.customization-target {
5100 position: relative;
5101}
5102
5103/* Most target outlines are shown on hover and drag over but the panel menu uses
5104 placeholders instead. */
5105#main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover::before,
5106#main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
5107/* nav-bar and panel outlines are always shown */
5108#nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
5109 outline-color: #A09090;
5110}
5111
5112#nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
5113 transition: outline-color 250ms linear;
5114}
5115
5116#PanelUI-contents[showoutline=true] > .panel-customization-placeholder {
5117 transition: outline-color 250ms linear;
5118 outline-color: #9C9CFF;
5119}
5120
5121#PanelUI-contents > .panel-customization-placeholder {
5122 cursor: auto;
5123 outline-offset: -5px;
5124}
5125
5126#main-window[customizing] .customization-target:not(#PanelUI-contents) {
5127 min-width: 100px;
5128/* padding-left: 10px;
5129 padding-right: 10px;*/
5130}
5131
5132#main-window:-moz-any([customize-entering],[customize-entered]) #tab-view-deck {
5133 padding: 0 2em 2em;
5134}
5135
5136#customization-container {
5137 background-color: #000000;
5138 color: #FF9F00;
5139}
5140
5141#customization-palette,
5142#customization-empty {
5143 padding: 0 15px 15px;
5144}
5145
5146#customization-header {
5147 font-size: 1.75em;
5148 line-height: 1.75em;
5149 color: #9C9CFF;
5150 font-weight: 200;
5151 margin: 25px 25px 12px;
5152 padding-bottom: 12px;
5153 border-bottom: 1px solid #A09090;
5154}
5155
5156#customization-panel-container {
5157 padding: 10px 10px 0px;
5158}
5159
5160#main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
5161#customization-footer {
5162 /*background-color: rgb(236,236,236);*/
5163}
5164
5165#customization-footer {
5166 border-top: 1px solid #9C9CFF;
5167 padding: 10px;
5168}
5169
5170.customizationmode-button {
5171 margin: 5px;
5172}
5173
5174.customizationmode-button:hover {
5175}
5176
5177#customization-titlebar-visibility-button[checked],
5178#customization-devedition-theme-button[checked] {
5179 background-color: #008484;
5180}
5181
5182#customization-titlebar-visibility-button[checked]:hover,
5183#customization-devedition-theme-button[checked]:hover {
5184 background-color: #FFCF00;
5185}
5186
5187#customization-titlebar-visibility-button[checked]:hover:active,
5188#customization-devedition-theme-button[checked]:hover:active {
5189 background-color: #FF9F00;
5190}
5191
5192.customizationmode-button[disabled="true"] {
5193}
5194
5195.customizationmode-button > .box-inherit > .box-inherit > .button-icon,
5196.customizationmode-button > .button-box > .button-icon {
5197/* height: 24px;*/
5198}
5199
5200#customization-titlebar-visibility-button {
5201 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle.png");
5202 -moz-image-region: rect(0, 16px, 16px, 0);
5203}
5204
5205#customization-titlebar-visibility-button:hover {
5206 -moz-image-region: rect(16px, 16px, 32px, 0);
5207}
5208
5209#customization-lwtheme-button,
5210#customization-titlebar-visibility-button {
5211 padding: 0px 5px;
5212}
5213
5214#customization-titlebar-visibility-button > .button-box {
5215 padding-top: 0;
5216 padding-bottom: 1px;
5217}
5218
5219#customization-titlebar-visibility-button:hover:active > .button-box {
5220 padding-top: 1px;
5221 padding-bottom: 0;
5222}
5223
5224#customization-lwtheme-button > .box-inherit > .box-inherit > .button-text,
5225#customization-titlebar-visibility-button > .button-box > .button-text {
5226 /* Sadly, button.css thinks its margins are perfect for everyone. */
5227 -moz-margin-start: 5px !important;
5228}
5229
5230#customization-lwtheme-button > .box-inherit > .box-inherit > .button-icon {
5231 width: 20px;
5232 height: 20px;
5233 border-radius: 2px;
5234 background-size: contain;
5235}
5236
5237#customization-titlebar-visibility-button > .button-box > .button-icon {
5238 vertical-align: middle;
5239}
5240
5241#customization-titlebar-visibility-button[checked] {
5242 -moz-image-region: rect(0, 32px, 16px, 16px);
5243 background-color: #008484;
5244}
5245
5246#customization-titlebar-visibility-button[checked]:hover {
5247 -moz-image-region: rect(16px, 32px, 32px, 16px);
5248 background-color: #FFCF00;
5249}
5250
5251#customization-titlebar-visibility-button[checked]:hover:active {
5252 background-color: #FF9F00;
5253}
5254
5255@media (min-resolution: 1.1dppx) {
5256 #customization-titlebar-visibility-button {
5257 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle@2x.png");
5258 -moz-image-region: rect(0, 48px, 48px, 0);
5259 }
5260
5261 #customization-titlebar-visibility-button:hover {
5262 -moz-image-region: rect(48px, 48px, 96px, 0);
5263 }
5264
5265 #customization-titlebar-visibility-button[checked] {
5266 -moz-image-region: rect(0, 96px, 48px, 48px);
5267 }
5268
5269 #customization-titlebar-visibility-button[checked]:hover {
5270 -moz-image-region: rect(48px, 96px, 96px, 48px);
5271 }
5272}
5273
5274#main-window[customize-entered] #customization-panel-container {
5275 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5276 background-position: left top;
5277 background-repeat: repeat;
5278 background-size: auto;
5279 background-attachment: fixed;
5280}
5281
5282toolbarpaletteitem[place="toolbar"] {
5283 transition: border-width 250ms ease-in-out;
5284}
5285
5286toolbarpaletteitem[mousedown] {
5287 outline: 1px solid #008484;
5288 cursor: -moz-grabbing;
5289 opacity: 0.8;
5290}
5291
5292.panel-customization-placeholder,
5293toolbarpaletteitem[place="palette"],
5294toolbarpaletteitem[place="panel"] {
5295 transition: transform .3s ease-in-out;
5296}
5297
5298#customization-palette {
5299 transition: opacity .3s ease-in-out;
5300 opacity: 0;
5301}
5302
5303#customization-palette[showing="true"] {
5304 opacity: 1;
5305}
5306
5307toolbarpaletteitem[notransition].panel-customization-placeholder,
5308toolbarpaletteitem[notransition][place="toolbar"],
5309toolbarpaletteitem[notransition][place="palette"],
5310toolbarpaletteitem[notransition][place="panel"] {
5311 transition: none;
5312}
5313
5314toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon,
5315toolbarpaletteitem > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon,
5316toolbarpaletteitem > toolbaritem.panel-wide-item,
5317toolbarpaletteitem > toolbarbutton[type="menu-button"] {
5318 transition: transform .3s cubic-bezier(.6, 2, .75, 1.5) !important;
5319}
5320
5321toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon,
5322toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon {
5323 transform: scale(1.3);
5324}
5325
5326toolbarpaletteitem[mousedown] > toolbaritem.panel-wide-item,
5327toolbarpaletteitem[mousedown] > toolbarbutton[type="menu-button"] {
5328 transform: scale(1.1);
5329}
5330
5331/* Override the toolkit styling for items being dragged over. */
5332toolbarpaletteitem[place="toolbar"] {
5333 border-left-width: 0;
5334 border-right-width: 0;
5335 margin-right: 0;
5336 margin-left: 0;
5337}
5338
5339#customization-palette:not([hidden]) {
5340 margin-bottom: 25px;
5341}
5342
5343toolbarpaletteitem[place="palette"]:-moz-focusring,
5344toolbarpaletteitem[place="panel"]:-moz-focusring,
5345toolbarpaletteitem[place="toolbar"]:-moz-focusring {
5346 outline: 1px dotted #A09090;
5347 outline-offset: -5px;
5348 -moz-outline-radius: 2.5px;
5349}
5350
5351#wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
5352#wrapper-edit-controls[place="palette"] > #edit-controls > separator,
5353#wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton,
5354#wrapper-zoom-controls[place="palette"] > #zoom-controls > separator {
5355 margin-top: 20px;
5356}
5357
5358#wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
5359#wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton {
5360 margin-left: 0;
5361 margin-right: 0;
5362 max-width: 24px;
5363 min-width: 24px;
5364 max-height: 24px;
5365 min-height: 24px;
5366 padding: 4px;
5367}
5368
5369#wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon,
5370#wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon {
5371 width: 16px;
5372}
5373
5374#wrapper-edit-controls > #edit-controls > toolbarbutton > .toolbarbutton-icon {
5375 opacity: 1; /* To ensure these buttons always look enabled in customize mode */
5376}
5377
5378#wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button,
5379#wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button + separator {
5380 display: none;
5381}
5382
5383#wrapper-personal-bookmarks:not([place="toolbar"]) > #personal-bookmarks {
5384 -moz-box-pack: center;
5385 min-height: 48px;
5386}
5387
5388#personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
5389 -moz-margin-end: 5px;
5390}
5391
5392#customization-palette > toolbarpaletteitem > label {
5393 text-align: center;
5394 margin-left: 0;
5395 margin-right: 0;
5396}
5397
5398#customization-lwtheme-menu > .panel-arrowcontainer > .panel-arrowcontent {
5399 -moz-box-orient: vertical;
5400 /* Make the panel padding uniform across all platforms due to the
5401 styling of the section headers and footer. */
5402 padding: 10px;
5403}
5404
5405.customization-lwtheme-menu-theme > .toolbarbutton-icon {
5406 width: 32px;
5407 height: 32px;
5408}
5409
5410.customization-lwtheme-menu-theme {
5411 -moz-appearance: none;
5412 margin: 0 -5px 5px;
5413 padding-top: 0;
5414 -moz-padding-end: 5px;
5415 padding-bottom: 0;
5416 -moz-padding-start: 0;
5417}
5418
5419.customization-lwtheme-menu-theme[defaulttheme] {
5420 list-style-image: url(chrome://browser/skin/Fxtheme-switcher-icon.png);
5421}
5422
5423.customization-lwtheme-menu-theme[active="true"] {
5424 background-color: #008484;
5425}
5426
5427.customization-lwtheme-menu-theme > .toolbarbutton-icon {
5428 margin: 5px;
5429}
5430
5431.customization-lwtheme-menu-theme > .toolbarbutton-text {
5432 text-align: start;
5433}
5434
5435#customization-lwtheme-menu-header,
5436#customization-lwtheme-menu-recommended {
5437 padding: 10px;
5438 margin-bottom: 5px;
5439}
5440
5441#customization-lwtheme-menu-header,
5442#customization-lwtheme-menu-recommended,
5443#customization-lwtheme-menu-footer {
5444 background-color: #A09090;
5445 color: #000000;
5446 margin-right: -10px;
5447 margin-left: -10px;
5448}
5449
5450#customization-lwtheme-menu-header {
5451 margin-top: -10px;
5452 border-top-right-radius: 3px;
5453 border-top-left-radius: 3px;
5454}
5455
5456#customization-lwtheme-menu-recommended {
5457}
5458
5459#customization-lwtheme-menu-footer {
5460 margin-bottom: -10px;
5461 border-bottom-right-radius: 3px;
5462 border-bottom-left-radius: 3px;
5463}
5464
5465.customization-lwtheme-menu-footeritem {
5466 -moz-appearance: none;
5467 -moz-box-flex: 1;
5468 background-color: #C09070;
5469 color: #000000;
5470 border: 1px solid transparent;
5471 padding: 10px;
5472 margin-left: 0;
5473 margin-right: 0;
5474}
5475
5476.customization-lwtheme-menu-footeritem:hover {
5477 background-color: #FFCF00;
5478}
5479
5480.customization-lwtheme-menu-footeritem:first-child {
5481}
5482
5483/* === END customizeMode.inc.css === */
5484
5485/* === BEGIN customizeTip.inc.css === */
5486
5487#customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent {
5488 padding: 0;
5489 margin: 0;
5490 min-width: 400px;
5491 max-width: 1000px;
5492 min-height: 200px;
5493 border-radius: 3px;
5494/* background-image: linear-gradient(90deg, #a0dfff 0%, #ceeeff 100%);*/
5495 border: 1px solid #9C9CFF;
5496 color: #FF9F00;
5497}
5498
5499#customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent:-moz-locale-dir(rtl) {
5500/* background-image: linear-gradient(90deg, #ceeeff 0%, #a0dfff 100%);*/
5501}
5502
5503.customization-tipPanel-infoBox {
5504 margin: 20px 25px 25px;
5505 width: 25px;
5506 background-image: url("chrome://browser/skin/customizableui/info-icon-customizeTip.png");
5507 background-repeat: no-repeat;
5508}
5509
5510.customization-tipPanel-content {
5511 margin: 25px 0;
5512 font-size: 12px;
5513 line-height: 18px;
5514}
5515
5516.customization-tipPanel-em {
5517 margin: 0;
5518 font-weight: bold;
5519}
5520
5521.customization-tipPanel-contentImage {
5522 margin-top: 25px;
5523 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration.png");
5524 min-width: 300px;
5525 max-width: 300px;
5526 min-height: 190px;
5527 max-height: 190px;
5528 display: -moz-box;
5529}
5530
5531.customization-tipPanel-contentImage:-moz-locale-dir(rtl) {
5532 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration-rtl.png");
5533}
5534
5535.customization-tipPanel-link {
5536 -moz-appearance: none;
5537 background: transparent;
5538 border: none;
5539 box-shadow: none;
5540 color: #3333FF;
5541 margin: 0;
5542 cursor: pointer;
5543}
5544
5545.customization-tipPanel-link > .button-box > .button-text {
5546 margin: 0 !important;
5547}
5548
5549.customization-tipPanel-closeBox > .close-icon {
5550 -moz-appearance: none;
5551 border: 0;
5552 -moz-margin-end: -25px;
5553}
5554
5555#customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"],
5556#customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
5557 list-style-image: url("chrome://browser/skin/customizableui/panelarrow-customizeTip.png");
5558}
5559
5560/* === END customizeTip.inc.css === */
5561
5562/**
5563 * This next rule is a hack to disable subpixel anti-aliasing on all
5564 * labels during the customize mode transition. Subpixel anti-aliasing
5565 * on Windows with Direct2D layers acceleration is particularly slow to
5566 * paint, so this hack is how we sidestep that performance bottleneck.
5567 */
5568#main-window:-moz-any([customize-entering],[customize-exiting]) label {
5569 transform: perspective(0.01px);
5570}
5571
5572#main-window[customize-entered] > #tab-view-deck {
5573 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5574 background-attachment: fixed;
5575}
5576
5577#main-window[customization-lwtheme] > #tab-view-deck:-moz-lwtheme {
5578 background-repeat: no-repeat;
5579 background-position: right top;
5580 background-attachment: fixed;
5581 /* The image will get set from CustomizeMode.jsm */
5582 background-image: none;
5583 background-color: transparent;
5584}
5585
5586#main-window[customization-lwtheme]:-moz-lwtheme {
5587 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5588 background-repeat: repeat;
5589 background-attachment: fixed;
5590 background-position: left top;
5591}
5592
5593#main-window[customize-entered] #browser-bottombox,
5594#main-window[customize-entered] #customization-container {
5595 border-left: 1px solid #9C9CFF;
5596 border-right: 1px solid #9C9CFF;
5597 background-clip: padding-box;
5598}
5599
5600#main-window[customize-entered] #browser-bottombox {
5601 border-bottom: 1px solid #9C9CFF;
5602}
5603
5604#customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"] {
5605 margin-right: -2px;
5606}
5607
5608#customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
5609 margin-left: -2px;
5610}
5611
5612/* End customization mode */
5613
5614/* Private browsing indicators */
5615
5616/**
5617 * Currently, we have two places where we put private browsing indicators on
5618 * Windows. When tabsintitlebar is enabled, we draw the indicator in the titlebar.
5619 * When tabsintitlebar is disabled, we draw the indicator at the end of the
5620 * tabstrip. The titlebar indicator is the fiddliest of the bunch, since we
5621 * want the bottom border of the image to line up with the bottom of the window
5622 * caption buttons. That's why there's so much special-casing going on in here.
5623 */
5624.private-browsing-indicator {
5625 display: none;
5626 pointer-events: none;
5627}
5628
5629#private-browsing-indicator-titlebar {
5630 display: block;
5631 position: absolute;
5632}
5633
5634#main-window[privatebrowsingmode=temporary][tabsintitlebar] #private-browsing-indicator-titlebar > .private-browsing-indicator {
5635 display: block;
5636}
5637
5638#main-window[privatebrowsingmode=temporary]:-moz-any([inFullscreen],:not([tabsintitlebar])) #TabsToolbar > .private-browsing-indicator {
5639 display: -moz-box;
5640}
5641
5642#TabsToolbar > .private-browsing-indicator {
5643 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") no-repeat center -3px;
5644 -moz-margin-start: 4px;
5645 width: 48px;
5646}
5647
5648/* Bug 1008183: We're intentionally using the titlebar asset here for fullscreen
5649 * mode, since the tabstrip "mimics" the titlebar in that case with its own
5650 * min/max/close window buttons.
5651 */
5652#private-browsing-indicator-titlebar > .private-browsing-indicator,
5653#main-window[inFullscreen] #TabsToolbar > .private-browsing-indicator {
5654 background: url("chrome://browser/skin/privatebrowsing-mask-titlebar.png") no-repeat center 0px;
5655 -moz-margin-end: 4px;
5656 width: 40px;
5657 height: 20px;
5658 position: relative;
5659}
5660
5661/* This one is for Linux */
5662#main-window[privatebrowsingmode=temporary] #private-browsing-indicator {
5663 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") center no-repeat;
5664 width: 48px;
5665}
5666
5667/* End private browsing indicators */
5668
5669/* === BEGIN UITour.inc.css === */
5670
5671/* UI Tour */
5672
5673#UITourHighlightContainer {
5674 -moz-appearance: none;
5675 border: none;
5676 background-color: transparent;
5677 /* This is a buffer to compensate for the movement in the "wobble" effect */
5678 padding: 4px;
5679}
5680
5681#UITourHighlight {
5682 background-image: radial-gradient(50% 100%, rgba(0,132,132,0.4) 50%, rgba(0,132,132,0.6) 100%);
5683 border-radius: 40px;
5684 border: 1px solid #9C9CFF;
5685 /* The box-shadow opacity needs to be < 0.5 so it doesn't appear at 100% opacity
5686 on Linux without an X compositor where opacity is either 0 or 1. */
5687 box-shadow: 0 0 3px 0 rgba(0,0,0,0.49);
5688 min-height: 32px;
5689 min-width: 32px;
5690}
5691
5692#UITourTooltipBody {
5693 -moz-margin-end: 14px;
5694 -moz-margin-start: 14px;
5695 margin-top: -16px;
5696 margin-bottom: 8px;
5697}
5698
5699#UITourTooltipIcon {
5700 width: 48px;
5701 height: 48px;
5702 -moz-margin-start: 14px;
5703 -moz-margin-end: 14px;
5704}
5705
5706#UITourTooltipTitle,
5707#UITourTooltipDescription {
5708 max-width: 20rem;
5709}
5710
5711#UITourTooltipTitle {
5712 font-size: 1.45rem;
5713 font-weight: bold;
5714 -moz-margin-start: 0;
5715 /* Avoid the title overlapping the close button */
5716 -moz-margin-end: 14px;
5717 margin-top: 0;
5718 margin-bottom: 9px;
5719}
5720
5721#UITourTooltipDescription {
5722 -moz-margin-start: 0;
5723 -moz-margin-end: 0;
5724 font-size: 1.15rem;
5725 line-height: 1.8rem;
5726 margin-bottom: 0; /* Override global.css */
5727}
5728
5729#UITourTooltipClose {
5730 position: relative;
5731 -moz-appearance: none;
5732 border: none;
5733 background-color: transparent;
5734 min-width: 0;
5735 -moz-margin-start: 4px;
5736 margin-top: -2px;
5737}
5738
5739#UITourTooltipClose > .toolbarbutton-text {
5740 display: none;
5741}
5742
5743#UITourTooltipButtons {
5744 -moz-box-pack: end;
5745 background-color: rgba(0,0,0,.2);
5746 border-top: 1px solid rgba(0,0,0,.4);
5747 margin: 10px -16px -16px;
5748 padding: 2em 15px;
5749}
5750
5751#UITourTooltipButtons > label,
5752#UITourTooltipButtons > button {
5753 margin: 0 15px;
5754}
5755
5756#UITourTooltipButtons > label:first-child,
5757#UITourTooltipButtons > button:first-child {
5758 -moz-margin-start: 0;
5759}
5760
5761#UITourTooltipButtons > button[image] > .button-box > .button-icon {
5762 width: 16px;
5763 height: 16px;
5764 -moz-margin-end: 5px;
5765}
5766
5767#UITourTooltipButtons > label,
5768#UITourTooltipButtons > button .button-text {
5769 font-size: 1.15rem;
5770}
5771
5772#UITourTooltipButtons > button:not(.button-link) {
5773 -moz-appearance: none;
5774 background-color: #C09070;
5775 border-radius: 3000px;
5776 border: none;
5777 color: #000000;
5778 padding: 4px 30px;
5779 transition-property: background-color, color;
5780 transition-duration: 150ms;
5781}
5782
5783#UITourTooltipButtons > button:not(.button-link):not(:active):hover {
5784 background-color: #FFCF00;
5785 color: #000000;
5786}
5787
5788#UITourTooltipButtons > label,
5789#UITourTooltipButtons > button.button-link {
5790 -moz-appearance: none;
5791 background: transparent;
5792 border: none;
5793 box-shadow: none;
5794 color: rgba(0,0,0,0.35);
5795 padding-left: 10px;
5796 padding-right: 10px;
5797}
5798
5799#UITourTooltipButtons > button.button-link:hover {
5800 color: black;
5801}
5802
5803/* The primary button gets the same color as the customize button. */
5804#UITourTooltipButtons > button.button-primary {
5805 background-color: #A06060; /* LCARS default button background color */
5806 color: #000000;
5807 padding-left: 30px;
5808 padding-right: 30px;
5809}
5810
5811#UITourTooltipButtons > button.button-primary:not(:active):hover {
5812 background-color: #FFCF00;
5813 color: #000000;
5814}
5815
5816/* Notification overrides for Heartbeat UI */
5817
5818notification.heartbeat {
5819 background-color: #A09090;
5820/* height: 40px;*/
5821}
5822
5823@keyframes pulse-onshow {
5824 0% {
5825 opacity: 0;
5826 transform: scale(1.0);
5827 }
5828 25% {
5829 opacity: 1;
5830 transform: scale(1.1);
5831 }
5832 50% {
5833 transform: scale(1.0);
5834 }
5835 75% {
5836 transform: scale(1.1);
5837 }
5838 100% {
5839 transform: scale(1.0);
5840 }
5841}
5842
5843@keyframes pulse-twice {
5844 0% {
5845 transform: scale(1.1);
5846 }
5847 50% {
5848 transform: scale(0.8);
5849 }
5850 100% {
5851 transform: scale(1);
5852 }
5853}
5854
5855.messageText.heartbeat {
5856 color: #000000;
5857/* text-shadow: none; */
5858 -moz-margin-start: 0px;
5859}
5860
5861.messageImage.heartbeat {
5862 width: 24px;
5863 height: 24px;
5864 -moz-margin-start: 8px;
5865 -moz-margin-end: 8px;
5866}
5867
5868.messageImage.heartbeat.pulse-onshow {
5869 animation-name: pulse-onshow;
5870 animation-duration: 1.5s;
5871 animation-iteration-count: 1;
5872 animation-timing-function: cubic-bezier(.7,1.8,.9,1.1);
5873}
5874
5875.messageImage.heartbeat.pulse-twice {
5876 animation-name: pulse-twice;
5877 animation-duration: 1s;
5878 animation-iteration-count: 2;
5879 animation-timing-function: linear;
5880}
5881
5882/* Learn More link styles */
5883.heartbeat > .text-link {
5884 color: #3333FF;
5885 -moz-margin-start: 0px;
5886}
5887
5888.heartbeat > .text-link:hover {
5889 color: #9C9CFF;
5890 text-decoration: none;
5891}
5892
5893.heartbeat > .text-link:hover:active {
5894 color: #FF9F00;
5895}
5896
5897/* Heartbeat UI Rating Star Classes */
5898.heartbeat > #star-rating-container {
5899 display: -moz-box;
5900/* margin-bottom: 4px;*/
5901}
5902
5903.heartbeat > #star-rating-container > #star5 {
5904 -moz-box-ordinal-group: 5;
5905}
5906
5907.heartbeat > #star-rating-container > #star4 {
5908 -moz-box-ordinal-group: 4;
5909}
5910
5911.heartbeat > #star-rating-container > #star3 {
5912 -moz-box-ordinal-group: 3;
5913}
5914
5915.heartbeat > #star-rating-container > #star2 {
5916 -moz-box-ordinal-group: 2;
5917}
5918
5919.heartbeat > #star-rating-container > .star-x {
5920 background: url("chrome://browser/skin/heartbeat-star-off.svg");
5921 cursor: pointer;
5922 /* Overrides the -moz-margin-end for all platforms defined in the .plain class */
5923 -moz-margin-end: 4px !important;
5924 width: 16px;
5925 height: 16px;
5926}
5927
5928.heartbeat > #star-rating-container > .star-x:hover,
5929.heartbeat > #star-rating-container > .star-x:hover ~ .star-x {
5930 background: url("chrome://browser/skin/heartbeat-star-lit.svg");
5931}
5932
5933/* === END UITour.inc.css === */
5934
5935#UITourTooltipButtons {
5936 /**
5937 * Override the --panel-arrowcontent-padding so the background extends
5938 * to the sides and bottom of the panel.
5939 */
5940 margin-left: -10px;
5941 margin-right: -10px;
5942 margin-bottom: -10px;
5943}
5944
5945/* === BEGIN contextmenu.inc.css === */
5946
5947menugroup > .menuitem-iconic[disabled="true"] > .menu-iconic-left {
5948}
5949
5950#context-navigation > .menuitem-iconic {
5951 -moz-box-flex: 1;
5952 -moz-box-pack: center;
5953 -moz-box-align: center;
5954}
5955
5956#context-navigation > .menuitem-iconic[disabled="true"] {
5957 background-color: transparent;
5958}
5959
5960#context-navigation > .menuitem-iconic > .menu-iconic-left {
5961 -moz-appearance: none;
5962}
5963
5964#context-back > .menu-iconic-left {
5965 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back"); */
5966 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
5967 -moz-image-region: rect(0, 54px, 18px, 36px);
5968}
5969
5970#context-back:not([disabled="true"]):hover > .menu-iconic-left {
5971 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back-active"); */
5972 -moz-image-region: rect(18px, 54px, 36px, 36px);
5973}
5974
5975#context-back[disabled="true"] > .menu-iconic-left {
5976 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back-disabled"); */
5977 -moz-image-region: rect(36px, 54px, 54px, 36px);
5978}
5979
5980#context-forward > .menu-iconic-left {
5981 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward"); */
5982 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
5983 -moz-image-region: rect(0, 72px, 18px, 54px);
5984}
5985
5986#context-forward:not([disabled="true"]):hover > .menu-iconic-left {
5987 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward-active"); */
5988 -moz-image-region: rect(18px, 72px, 36px, 54px);
5989}
5990
5991#context-forward[disabled="true"] > .menu-iconic-left {
5992 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward-disabled"); */
5993 -moz-image-region: rect(36px, 72px, 54px, 54px);
5994}
5995
5996#context-reload > .menu-iconic-left {
5997 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload"); */
5998 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
5999 -moz-image-region: rect(0, 14px, 14px, 0);
6000}
6001
6002#context-reload:not([disabled="true"]):hover > .menu-iconic-left {
6003 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload-active"); */
6004 -moz-image-region: rect(14px, 14px, 28px, 0);
6005}
6006
6007#context-reload[disabled="true"] > .menu-iconic-left {
6008 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload-disabled"); */
6009 -moz-image-region: rect(28px, 14px, 42px, 0);
6010}
6011
6012#context-stop > .menu-iconic-left {
6013 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop"); */
6014 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
6015 -moz-image-region: rect(0, 28px, 14px, 14px);
6016}
6017
6018#context-stop:not([disabled="true"]):hover > .menu-iconic-left {
6019 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop-active"); */
6020 -moz-image-region: rect(14px, 28px, 28px, 14px);
6021}
6022
6023#context-stop[disabled="true"] > .menu-iconic-left {
6024 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop-disabled"); */
6025 -moz-image-region: rect(28px, 28px, 42px, 14px);
6026}
6027
6028#context-bookmarkpage > .menu-iconic-left {
6029 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark"); */
6030 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
6031 -moz-image-region: rect(0, 144px, 18px, 126px);
6032}
6033
6034#context-bookmarkpage:not([disabled="true"]):hover > .menu-iconic-left {
6035 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark-active"); */
6036 -moz-image-region: rect(18px, 144px, 36px, 126px);
6037}
6038
6039#context-bookmarkpage[disabled="true"] > .menu-iconic-left {
6040 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark-disabled"); */
6041 -moz-image-region: rect(36px, 144px, 54px, 126px);
6042}
6043
6044#context-bookmarkpage[starred=true] {
6045 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked"); */
6046 -moz-image-region: rect(0px, 162px, 18px, 144px);
6047}
6048
6049#context-bookmarkpage[starred=true][_moz-menuactive=true] {
6050 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-active"); */
6051 -moz-image-region: rect(18px, 162px, 36px, 144px);
6052}
6053
6054#context-bookmarkpage[starred=true][disabled=true] {
6055 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-disabled"); */
6056 -moz-image-region: rect(36px, 162px, 54px, 144px);
6057}
6058
6059#context-back:-moz-locale-dir(rtl),
6060#context-forward:-moz-locale-dir(rtl),
6061#context-reload:-moz-locale-dir(rtl) {
6062 transform: scaleX(-1);
6063}
6064
6065#context-navigation > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
6066 width: 18px; /*16px;*/
6067 height: 18px; /*16px;*/
6068 margin: 7px;
6069}
6070
6071#context-navigation > #context-reload > .menu-iconic-left > .menu-iconic-icon,
6072#context-navigation > #context-stop > .menu-iconic-left > .menu-iconic-icon {
6073 width: 14px;
6074 height: 14px;
6075 margin: 9px;
6076}
6077
6078#context-media-eme-learnmore {
6079 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
6080}
6081
6082#context-media-eme-learnmore {
6083 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
6084}
6085
6086/* === END contextmenu.inc.css === */
6087
6088#context-navigation {
6089}
6090
6091#context-sep-navigation {
6092/* margin-top: -4px; */
6093}
6094
6095.browser-extension-panel > .panel-arrowcontainer > .panel-arrowcontent {
6096 padding: 0;
6097 overflow: hidden;
6098}
6099
6100/* === BEGIN usercontext.inc.css === */
6101
6102/* User Context UI browser styles */
6103
6104#menu_newUserContextTabPersonal {
6105 list-style-image: url("chrome://browser/skin/usercontext/personal.svg");
6106}
6107
6108#menu_newUserContextTabWork {
6109 list-style-image: url("chrome://browser/skin/usercontext/work.svg");
6110}
6111
6112#menu_newUserContextTabBanking {
6113 list-style-image: url("chrome://browser/skin/usercontext/banking.svg");
6114}
6115
6116#menu_newUserContextTabShopping {
6117 list-style-image: url("chrome://browser/skin/usercontext/shopping.svg");
6118}
6119
6120/* URL Bar Decoration */
6121
6122#userContext-indicator {
6123 height: 16px;
6124 width: 16px;
6125}
6126
6127#userContext-label {
6128 margin-inline-end: 3px;
6129 color: #A09090;
6130}
6131
6132#userContext-icons:not([usercontextid]) {
6133 display: none;
6134}
6135
6136#userContext-icons {
6137 -moz-box-align: center;
6138}
6139
6140/* Personal User Context */
6141#userContext-icons[usercontextid="1"] > #userContext-label {
6142 color: #9C9CFF;
6143}
6144#userContext-icons[usercontextid="1"] > #userContext-indicator {
6145 list-style-image: url("chrome://browser/skin/usercontext/personal.svg");
6146}
6147
6148/* Work User Context */
6149#userContext-icons[usercontextid="2"] > #userContext-label {
6150 color: #FF9F00;
6151}
6152#userContext-icons[usercontextid="2"] > #userContext-indicator {
6153 list-style-image: url("chrome://browser/skin/usercontext/work.svg");
6154}
6155
6156/* Banking User Context */
6157#userContext-icons[usercontextid="3"] > #userContext-label {
6158 color: #008484;
6159}
6160#userContext-icons[usercontextid="3"] > #userContext-indicator {
6161 list-style-image: url("chrome://browser/skin/usercontext/banking.svg");
6162}
6163
6164/* Shopping User Context */
6165#userContext-icons[usercontextid="4"] > #userContext-label {
6166 color: #E7ADE7;
6167}
6168#userContext-icons[usercontextid="4"] > #userContext-indicator {
6169 list-style-image: url("chrome://browser/skin/usercontext/shopping.svg");
6170}
6171
6172/* === END usercontext.inc.css === */