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