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