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