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