projects / themes.git / blame_incremental
? search:
summary | shortlog | log | commit | commitdiff | tree
blob | blame (non-incremental) | history | HEAD
first part of syncing LCARStrek with Firefox 49/50 devtools theme changes
[themes.git] / LCARStrek / browser / browser.css
... / ...
CommitLineData
1/* This Source Code Form is subject to the terms of the Mozilla Public
2 * License, v. 2.0. If a copy of the MPL was not distributed with this
3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
4
5@import url("chrome://global/skin/");
6@import url("downloads/indicator.css");
7
8@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
9@namespace html url("http://www.w3.org/1999/xhtml");
10@namespace svg url("http://www.w3.org/2000/svg");
11
12toolbar {
13 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar");
14}
15
16toolbar[customizable="true"] {
17 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-browsercustom");
18}
19
20@media (-moz-mac-graphite-theme), (-moz-mac-lion-theme), (-moz-mac-yosemite-theme) {
21 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
22 toolbar[customizable="true"]:not([nowindowdrag="true"]) {
23 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-drag-browsercustom");
24 }
25}
26
27toolbar[type="menubar"][autohide="true"] {
28 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-menubar-autohide");
29}
30
31#toolbar-menubar[autohide="true"] {
32 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-menubar-autohide-browsercustom");
33}
34
35menubar {
36 -moz-binding: url("chrome://global/skin/globalBindings.xml#menubar");
37}
38
39:root {
40 /*--backbutton-urlbar-overlap: 5px;*/
41
42 /* icon width + border + horizontal padding (includes the overlap from backbutton-urlbar-overlap) */
43 --forwardbutton-width: 27px;
44 /* icon width + border + horizontal padding (without the overlap from backbutton-urlbar-overlap) /
45 --forwardbutton-width: 25px;*/
46
47 --identity-box-verified-background-color: #000000;
48
49 --panel-separator-color: #A09090;
50
51 --urlbar-separator-color: #9C9CFF;
52}
53
54#menubar-items {
55 -moz-box-orient: vertical; /* for flex hack */
56}
57
58#main-menubar {
59 -moz-box-flex: 1; /* make menu items expand to fill toolbar height */
60}
61
62/* ::::: primary toolbar ::::: */
63
64.toolbar-primary > .toolbar-box > .toolbar-holder {
65 background-color: #A09090;
66}
67
68.toolbar-primary > .toolbar-box > .toolbar-startcap,
69.toolbar-primary > .toolbar-box > .toolbar-endcap {
70 background-color: #9C9CFF;
71}
72
73/* Hides the titlebar-placeholder underneath the window caption buttons when we
74 are not autohiding the menubar. */
75#toolbar-menubar:not([autohide="true"]) + #TabsToolbar > .titlebar-placeholder[type="caption-buttons"] {
76 display: none;
77}
78
79/* We want a 4px gap between the TabsToolbar and the toolbar-menubar when the
80 toolbar-menu is displayed, and a 16px gap when it is not. 1px is taken care
81 of by the (light) outer shadow of the tab, the remaining 3/15 are these margins. */
82#toolbar-menubar:not([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 --command-line-image: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme); /* --theme-command-line-image */
3922 --command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme-focus); /* --theme-command-line-image-focus */
3923}
3924
3925/* Developer toolbar */
3926
3927#developer-toolbar {
3928 border-top: 3px solid var(--gcli-background-color);
3929 border-bottom: none;
3930}
3931
3932#developer-toolbar .toolbar-holder {
3933 background-color: #8050B0;
3934 color: #FFCF00;
3935}
3936
3937#developer-toolbar .toolbar-holder {
3938 background-color: #8050B0;
3939 color: #FFCF00;
3940}
3941
3942#developer-toolbar .toolbar-startcap,
3943#developer-toolbar .toolbar-endcap{
3944 background-color: #6000CF;
3945}
3946
3947#developer-toolbar {
3948/* padding: 0;
3949 min-height: 32px; */
3950}
3951
3952#developer-toolbar > toolbarbutton {
3953/* border: none;
3954 background-color: transparent;
3955 margin: 0;
3956 padding: 0 10px;
3957 width: 32px; */
3958}
3959
3960.developer-toolbar-button > image {
3961/* margin: auto 10px; */
3962}
3963
3964#developer-toolbar-toolbox-button > label {
3965 display: none;
3966}
3967
3968.developer-toolbar-button > .toolbarbutton-icon {
3969 width: 16px;
3970 height: 16px;
3971}
3972
3973#developer-toolbar-toolbox-button {
3974 list-style-image: url("chrome://devtools/skin/images/toggle-tools.png");
3975 -moz-image-region: rect(0px, 16px, 16px, 0px);
3976}
3977
3978#developer-toolbar-toolbox-button > label {
3979 display: none;
3980}
3981
3982#developer-toolbar-toolbox-button:hover,
3983#developer-toolbar-toolbox-button:hover:active,
3984#developer-toolbar-toolbox-button[checked=true] {
3985 -moz-image-region: rect(0px, 32px, 16px, 16px);
3986}
3987
3988@media (min-resolution: 2dppx) {
3989 #developer-toolbar-toolbox-button {
3990 list-style-image: url("chrome://devtools/skin/images/toggle-tools@2x.png");
3991 -moz-image-region: rect(0px, 32px, 32px, 0px);
3992 }
3993
3994 #developer-toolbar-toolbox-button:hover,
3995 #developer-toolbar-toolbox-button:hover:active,
3996 #developer-toolbar-toolbox-button[checked=true] {
3997 -moz-image-region: rect(0px, 64px, 32px, 32px);
3998 }
3999}
4000
4001/* GCLI */
4002
4003html|*#gcli-tooltip-frame,
4004html|*#gcli-output-frame {
4005 padding: 0;
4006 border-width: 0;
4007 background-color: transparent;
4008}
4009
4010#gcli-output,
4011#gcli-tooltip {
4012 border-width: 0;
4013 background-color: transparent;
4014}
4015
4016.gclitoolbar-input-node,
4017.gclitoolbar-complete-node {
4018 margin: 1px 3px;
4019 -moz-box-align: center;
4020 padding-top: 0;
4021 padding-bottom: 0;
4022 padding-right: 8px;
4023 background-color: transparent;
4024}
4025
4026.gclitoolbar-input-node {
4027/* line-height: 32px;
4028 outline-style: none; */
4029 background-repeat: no-repeat;
4030 background-color: var(--gcli-input-background);
4031}
4032
4033.gclitoolbar-input-node[focused="true"] {
4034 background-color: var(--gcli-input-focused-background);
4035}
4036
4037.gclitoolbar-input-node::before {
4038 content: "";
4039 display: inline-block;
4040 -moz-box-ordinal-group: 0;
4041 width: 16px;
4042 height: 16px;
4043 margin: 0 2px;
4044 background-image: var(--command-line-image);
4045}
4046
4047.gclitoolbar-input-node[focused="true"]::before {
4048 background-image: var(--command-line-image-focus);
4049}
4050
4051.gclitoolbar-input-node:not([focused="true"]) {
4052 border-color: transparent;
4053}
4054
4055.gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection {
4056 background-color: var(--selection-background);
4057 color: var(--selection-color);
4058}
4059
4060.gclitoolbar-complete-node {
4061 padding-left: 21px;
4062 background-color: transparent;
4063 color: transparent;
4064 z-index: 100;
4065 pointer-events: none;
4066}
4067
4068.gcli-in-incomplete,
4069.gcli-in-error,
4070.gcli-in-ontab,
4071.gcli-in-todo,
4072.gcli-in-closebrace,
4073.gcli-in-param,
4074.gcli-in-valid {
4075 margin: 0;
4076 padding: 0;
4077}
4078
4079.gcli-in-incomplete {
4080 border-bottom: 2px dotted #8050B0;
4081}
4082
4083.gcli-in-error {
4084 border-bottom: 2px dotted #FF0000;
4085}
4086
4087.gcli-in-ontab {
4088 color: #9C9CFF;
4089}
4090
4091.gcli-in-todo {
4092 color: #795900;
4093}
4094
4095.gcli-in-closebrace {
4096 color: #8050B0;
4097}
4098
4099/* === END commandline.inc.css === */
4100
4101/* === BEGIN responsivedesign.inc.css === */
4102
4103/* Responsive Mode */
4104
4105.browserContainer[responsivemode] {
4106 background-color: #221500;
4107 padding: 0 20px 20px 20px;
4108}
4109
4110.browserStack[responsivemode] {
4111 box-shadow: 0 0 7px #9C9CFF;
4112}
4113
4114.devtools-responsiveui-toolbar {
4115 background: transparent;
4116 /* text color is textColor from dark theme, since no theme is applied to
4117 * the responsive toolbar.
4118 */
4119 color: #FF9F00;
4120 margin: 10px 0;
4121 padding: 0;
4122 box-shadow: none;
4123 border-bottom-width: 0;
4124}
4125
4126.devtools-responsiveui-textinput {
4127/* -moz-appearance: none;
4128 background: #333;
4129 color: #fff;
4130 border: 1px solid #111;
4131 border-radius: 2px;
4132 padding: 0 5px;*/
4133 width: 200px;
4134 margin: 0;
4135}
4136
4137.devtools-responsiveui-textinput[attention] {
4138/* border-color: #38ace6;
4139 background: rgba(56,172,230,0.4);*/
4140}
4141
4142.devtools-responsiveui-menulist,
4143.devtools-responsiveui-toolbarbutton {
4144 -moz-box-align: center;
4145 min-width: 32px;
4146/* min-height: 22px;*/
4147/* margin: 0 3px; */
4148}
4149
4150.devtools-responsiveui-menulist .menulist-editable-box {
4151 background-color: transparent;
4152}
4153
4154.devtools-responsiveui-menulist html|*.menulist-editable-input {
4155 color: inherit;
4156 text-align: center;
4157}
4158
4159.devtools-responsiveui-menulist html|*.menulist-editable-input::-moz-selection {
4160/* background: hsla(212,7%,57%,.35);*/
4161}
4162
4163.devtools-responsiveui-toolbarbutton > .toolbarbutton-icon {
4164 width: 16px;
4165 height: 16px;
4166}
4167
4168.devtools-responsiveui-toolbarbutton > .toolbarbutton-menubutton-button {
4169 -moz-box-orient: horizontal;
4170}
4171
4172.devtools-responsiveui-menulist:-moz-focusring,
4173.devtools-responsiveui-toolbarbutton:-moz-focusring {
4174/* outline: 1px dotted hsla(210,30%,85%,0.7);
4175 outline-offset: -4px;*/
4176}
4177
4178.devtools-responsiveui-toolbarbutton:not([label]) > .toolbarbutton-text {
4179 display: none;
4180}
4181
4182.devtools-responsiveui-toolbarbutton:not([checked=true]):hover:active {
4183/* border-color: hsla(210,8%,5%,.6);
4184 background: linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
4185 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); */
4186}
4187
4188.devtools-responsiveui-menulist[open=true],
4189.devtools-responsiveui-toolbarbutton[open=true],
4190.devtools-responsiveui-toolbarbutton[checked=true] {
4191/* border-color: hsla(210,8%,5%,.6) !important;
4192 background: linear-gradient(hsla(220,6%,10%,.6), hsla(210,11%,18%,.45) 75%, hsla(210,11%,30%,.4));
4193 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); */
4194}
4195
4196.devtools-responsiveui-toolbarbutton[checked=true] {
4197/* color: hsl(208,100%,60%); */
4198}
4199
4200.devtools-responsiveui-toolbarbutton[checked=true]:hover {
4201/* background-color: transparent !important;*/
4202}
4203
4204.devtools-responsiveui-toolbarbutton[checked=true]:hover:active {
4205/* background-color: hsla(210,8%,5%,.2) !important;*/
4206}
4207
4208.devtools-responsiveui-menulist > .menulist-label-box {
4209 text-align: center;
4210}
4211
4212.devtools-responsiveui-menulist > .menulist-dropmarker {
4213/* display: -moz-box;
4214 background-color: transparent;
4215 list-style-image: url("chrome://devtools/skin/dropmarker.svg");
4216 -moz-box-align: center;
4217 border-width: 0;
4218 min-width: 16px;*/
4219}
4220
4221.devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
4222/* color: inherit;
4223 border-width: 0;
4224 border-inline-end: 1px solid hsla(210,8%,5%,.45);
4225 box-shadow: -1px 0 0 hsla(210,16%,76%,.15) inset, 1px 0 0 hsla(210,16%,76%,.15);*/
4226}
4227
4228.devtools-responsiveui-toolbarbutton[type=menu-button]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button {
4229/* box-shadow: 1px 0 0 hsla(210,16%,76%,.15) inset, -1px 0 0 hsla(210,16%,76%,.15);*/
4230}
4231
4232.devtools-responsiveui-toolbarbutton[type=menu-button] {
4233/* padding: 0 1px;*/
4234 -moz-box-align: stretch;
4235}
4236
4237.devtools-responsiveui-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
4238.devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
4239/* list-style-image: url("chrome://devtools/skin/dropmarker.svg");
4240 -moz-box-align: center;
4241 padding: 0 3px;*/
4242}
4243
4244.devtools-responsiveui-toolbar:-moz-locale-dir(ltr) > *:first-child,
4245.devtools-responsiveui-toolbar:-moz-locale-dir(rtl) > *:last-child {
4246 margin-left: 3px;
4247}
4248
4249.devtools-responsiveui-close {
4250 list-style-image: url("chrome://devtools/skin/close.svg");
4251}
4252
4253.devtools-responsiveui-close:hover {
4254 filter: url(images/filters.svg#checked-icon-state);
4255}
4256
4257.devtools-responsiveui-rotate {
4258 list-style-image: url("chrome://devtools/skin/images/responsiveui-rotate.png");
4259 -moz-image-region: rect(0px,16px,16px,0px);
4260}
4261
4262.devtools-responsiveui-rotate:hover {
4263 -moz-image-region: rect(0px,32px,16px,16px);
4264}
4265
4266@media (min-resolution: 2dppx) {
4267 .devtools-responsiveui-rotate {
4268 list-style-image: url("chrome://devtools/skin/images/responsiveui-rotate@2x.png");
4269 }
4270
4271 .devtools-responsiveui-rotate:hover {
4272 -moz-image-region: rect(0px,64px,32px,32px);
4273 }
4274}
4275
4276.devtools-responsiveui-touch {
4277 list-style-image: url("chrome://devtools/skin/images/responsiveui-touch.png");
4278 -moz-image-region: rect(0px,16px,16px,0px);
4279}
4280
4281.devtools-responsiveui-touch:hover,
4282.devtools-responsiveui-touch[checked],
4283.devtools-responsiveui-touch[checked]:hover {
4284 -moz-image-region: rect(0px,32px,16px,16px);
4285}
4286
4287@media (min-resolution: 2dppx) {
4288 .devtools-responsiveui-touch {
4289 list-style-image: url("chrome://devtools/skin/images/responsiveui-touch@2x.png");
4290 -moz-image-region: rect(0px,32px,32px,0px);
4291 }
4292
4293 .devtools-responsiveui-touch:hover,
4294 .devtools-responsiveui-touch[checked],
4295 .devtools-responsiveui-touch[checked]:hover {
4296 -moz-image-region: rect(0px,64px,32px,32px);
4297 }
4298}
4299
4300.devtools-responsiveui-screenshot {
4301 list-style-image: url("chrome://devtools/skin/images/responsiveui-screenshot.png");
4302 -moz-image-region: rect(0px,16px,16px,0px);
4303}
4304
4305.devtools-responsiveui-screenshot:hover {
4306 -moz-image-region: rect(0px,32px,16px,16px);
4307}
4308
4309@media (min-resolution: 2dppx) {
4310 .devtools-responsiveui-screenshot {
4311 list-style-image: url("chrome://devtools/skin/images/responsiveui-screenshot@2x.png");
4312 }
4313
4314 .devtools-responsiveui-screenshot:hover {
4315 -moz-image-region: rect(0px,64px,32px,32px);
4316 }
4317}
4318
4319.devtools-responsiveui-resizebarV {
4320 width: 7px;
4321 height: 24px;
4322 cursor: ew-resize;
4323 transform: translate(12px, -12px);
4324 background-size: cover;
4325 background-image: url("chrome://devtools/skin/images/responsive-vertical-resizer.png");
4326}
4327
4328.devtools-responsiveui-resizebarH {
4329 width: 24px;
4330 height: 7px;
4331 cursor: ns-resize;
4332 transform: translate(-12px, 12px);
4333 background-size: cover;
4334 background-image: url("chrome://devtools/skin/images/responsive-horizontal-resizer.png");
4335}
4336
4337.devtools-responsiveui-resizehandle {
4338 width: 16px;
4339 height: 16px;
4340 cursor: se-resize;
4341 transform: translate(12px, 12px);
4342 background-size: cover;
4343 background-image: url("chrome://devtools/skin/images/responsive-se-resizer.png");
4344}
4345
4346/* FxOS custom mode with additional buttons and phone look'n feel */
4347
4348/* Hide devtools manual resizer */
4349.browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizehandle,
4350.browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarH,
4351.browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarV {
4352 display: none;
4353}
4354
4355/* Gives responsive mode a phone look'n feel */
4356.browserStack[responsivemode].fxos-mode {
4357 padding: 60px 15px 0;
4358
4359 border-radius: 25px / 20px;
4360 border-bottom-left-radius: 0;
4361 border-bottom-right-radius: 0;
4362 border: 1px solid #FFFFFF;
4363 border-bottom-width: 0;
4364
4365 background-color: #353535;
4366
4367 box-shadow: 0 3px 0.7px 1px #777777, 0 5px rgba(0, 0, 0, 0.4) inset;
4368
4369 background-image: linear-gradient(to right, #111 11%, #333 56%);
4370 min-width: 320px;
4371}
4372
4373.devtools-responsiveui-hardware-buttons {
4374 -moz-appearance: none;
4375 padding: 20px;
4376
4377 border: 1px solid #FFFFFF;
4378 border-bottom-left-radius: 25px;
4379 border-bottom-right-radius: 25px;
4380 border-top-width: 0;
4381
4382 box-shadow: 0 3px 0.7px 1px #777777, 0 -7px rgba(0, 0, 0, 0.4) inset;
4383
4384 background-image: linear-gradient(to right, #111 11%, #333 56%);
4385}
4386
4387.devtools-responsiveui-home-button {
4388 -moz-user-focus: ignore;
4389 width: 40px;
4390 height: 30px;
4391 list-style-image: url("chrome://devtools/skin/images/responsiveui-home.png");
4392}
4393
4394.devtools-responsiveui-sleep-button {
4395 -moz-user-focus: ignore;
4396 -moz-appearance: none;
4397 /* compensate browserStack top padding */
4398 margin-top: -67px;
4399 margin-right: 10px;
4400
4401 min-width: 10px;
4402 width: 50px;
4403 height: 5px;
4404
4405 border: 1px solid #444;
4406 border-top-right-radius: 12px;
4407 border-top-left-radius: 12px;
4408 border-bottom-color: transparent;
4409
4410 background-image: linear-gradient(to top, #111 11%, #333 56%);
4411}
4412
4413.devtools-responsiveui-sleep-button:hover:active {
4414 background-image: linear-gradient(to top, #aaa 11%, #ddd 56%);
4415}
4416
4417.devtools-responsiveui-volume-buttons {
4418 margin-left: -29px;
4419}
4420
4421.devtools-responsiveui-volume-up-button,
4422.devtools-responsiveui-volume-down-button {
4423 -moz-user-focus: ignore;
4424 -moz-appearance: none;
4425 border: 1px solid red;
4426 min-width: 8px;
4427 height: 40px;
4428
4429 border: 1px solid #444;
4430 border-right-color: transparent;
4431
4432 background-image: linear-gradient(to right, #111 11%, #333 56%);
4433}
4434
4435.devtools-responsiveui-volume-up-button:hover:active,
4436.devtools-responsiveui-volume-down-button:hover:active {
4437 background-image: linear-gradient(to right, #aaa 11%, #ddd 56%);
4438}
4439
4440.devtools-responsiveui-volume-up-button {
4441 border-top-left-radius: 12px;
4442}
4443
4444.devtools-responsiveui-volume-down-button {
4445 border-bottom-left-radius: 12px;
4446}
4447
4448@media (min-resolution: 2dppx) {
4449 .devtools-responsiveui-resizebarV {
4450 background-image: url("chrome://devtools/skin/images/responsive-vertical-resizer@2x.png");
4451 }
4452
4453 .devtools-responsiveui-resizebarH {
4454 background-image: url("chrome://devtools/skin/images/responsive-horizontal-resizer@2x.png");
4455 }
4456
4457 .devtools-responsiveui-resizehandle {
4458 background-image: url("chrome://devtools/skin/images/responsive-se-resizer@2x.png");
4459 }
4460}
4461
4462/* === END responsivedesign.inc.css === */
4463
4464/* === including indicator.css is done at the start of the file === */
4465
4466/* Error counter */
4467
4468#developer-toolbar-toolbox-button[error-count]:before {
4469 color: #000000;
4470 min-width: 16px;
4471 text-shadow: none;
4472 background-color: #FF0000;
4473 border-radius: 1px;
4474 margin-inline-end: 5px;
4475}
4476
4477/* social toolbar provider menu */
4478.social-statusarea-popup {
4479 margin-top: 0;
4480 margin-left: -12px;
4481 margin-right: -12px;
4482}
4483
4484.social-statusarea-user {
4485 border-bottom: 1px solid #9C9CFF;
4486 background-color: #000000;
4487 color: #FF9F00;
4488 position: relative;
4489 cursor: pointer;
4490}
4491
4492.social-statusarea-user-portrait {
4493 width: 32px;
4494 height: 32px;
4495 border-radius: 2px;
4496 margin: 10px;
4497}
4498
4499.social-statusarea-loggedInStatus {
4500 background: transparent;
4501 border: none;
4502 color: #3333FF;
4503 min-width: 0;
4504 margin: 0 6px;
4505 list-style-image: none;
4506}
4507
4508#social-statusarea-user[_moz-menuactive] > vbox > .social-statusarea-loggedInStatus {
4509 text-decoration: underline;
4510}
4511
4512.social-panel > .panel-arrowcontainer > .panel-arrowcontent {
4513 padding: 0;
4514}
4515
4516.social-panel-frame {
4517 border-radius: inherit;
4518}
4519
4520/* === BEGIN chat.inc.css === */
4521
4522#social-sidebar-header {
4523 padding: 3px;
4524}
4525
4526#manage-share-providers,
4527#social-sidebar-button {
4528 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
4529 -moz-image-region: rect(0, 468px, 18px, 450px);
4530}
4531
4532#social-sidebar-button {
4533 -moz-appearance: none;
4534 border: none;
4535 padding: 0;
4536 margin: 2px;
4537}
4538#manage-share-providers > .toolbarbutton-icon,
4539#social-sidebar-button > .toolbarbutton-icon {
4540 min-height: 18px;
4541 min-width: 18px;
4542}
4543#manage-share-providers:hover,
4544#manage-share-providers:hover:active,
4545#social-sidebar-button:hover,
4546#social-sidebar-button:hover:active {
4547 -moz-image-region: rect(18px, 468px, 36px, 450px);
4548}
4549#social-sidebar-button > .toolbarbutton-menu-dropmarker {
4550 display: none;
4551}
4552
4553#social-sidebar-button[loading="true"] {
4554 list-style-image: url("chrome://global/skin/icons/loading.png");
4555}
4556
4557#social-sidebar-favico {
4558 max-height: 16px;
4559 max-width: 16px;
4560 padding: 0;
4561 margin: 2px;
4562}
4563
4564.chat-status-icon {
4565 max-height: 16px;
4566 max-width: 16px;
4567 padding: 0;
4568}
4569
4570.chat-toolbarbutton {
4571 -moz-appearance: none;
4572 border: none;
4573 padding: 0 3px;
4574 margin: 0;
4575 background: none;
4576}
4577
4578.chat-toolbarbutton > .toolbarbutton-text {
4579 display: none;
4580}
4581
4582.chat-toolbarbutton > .toolbarbutton-icon {
4583 width: 16px;
4584 height: 16px;
4585}
4586
4587.chat-close-button {
4588 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close");
4589}
4590
4591.chat-close-button:hover {
4592 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close-hover");
4593}
4594
4595.chat-close-button:hover:active {
4596 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close-active");
4597}
4598
4599.chat-minimize-button {
4600 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize");
4601}
4602
4603.chat-minimize-button:hover {
4604 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize-hover");
4605}
4606
4607.chat-minimize-button:hover:active {
4608 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize-active");
4609}
4610
4611.chat-swap-button {
4612 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand");
4613 transform: rotate(180deg);
4614}
4615
4616.chat-swap-button:hover {
4617 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand-hover");
4618}
4619
4620.chat-swap-button:hover:active {
4621 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand-active");
4622}
4623
4624chatbar > chatbox > .chat-titlebar > .chat-swap-button {
4625 transform: none;
4626}
4627
4628.chat-title {
4629 color: #000000;
4630 text-shadow: none;
4631 cursor: inherit;
4632}
4633
4634.chat-titlebar {
4635 background-color: #9C9CFF;
4636 color: #000000;
4637 height: 26px;
4638 min-height: 26px;
4639 width: 100%;
4640 margin: 0;
4641 padding: 5px 4px;
4642 border: 1px solid #008484;
4643 border-bottom: 0;
4644 border-top-left-radius: 4px;
4645 border-top-right-radius: 4px;
4646 cursor: pointer;
4647 background-color: #A09090;
4648}
4649
4650.chat-titlebar[selected] {
4651 background-color: #008484;
4652}
4653
4654.chat-titlebar > .notification-anchor-icon {
4655 margin-left: 2px;
4656 margin-right: 2px;
4657}
4658
4659.chat-titlebar[minimized="true"] {
4660 border-bottom: none;
4661}
4662
4663.chat-titlebar[selected] {
4664 background-color: #008484;
4665}
4666
4667.chat-titlebar[activity] {
4668 background-color: #E7ADE7;
4669}
4670
4671.chat-frame {
4672 padding: 0;
4673 margin: 0;
4674 overflow: hidden;
4675}
4676
4677.chatbar-button {
4678 list-style-image: url("chrome://browser/skin/social/services-16.png");
4679 background-color: #000000;
4680 border: none;
4681 margin: 0;
4682 padding: 2px;
4683 height: 21px;
4684 width: 21px;
4685 border-top: 1px solid #008484;
4686 border-inline-end: 1px solid #008484;
4687}
4688
4689@media (min-resolution: 2dppx) {
4690 .chatbar-button {
4691 list-style-image: url("chrome://browser/skin/social/services-16@2x.png");
4692 }
4693}
4694
4695.chatbar-button:hover {
4696 background-color: #FFCF00;
4697}
4698.chatbar-button[open="true"] {
4699 background-color: #FF9F00;
4700}
4701
4702.chatbar-button[activity]:not([open]) {
4703 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%);
4704}
4705
4706.chatbar-button > .toolbarbutton-icon {
4707 width: 16px;
4708}
4709
4710.chatbar-button > menupopup > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
4711 width: auto;
4712 height: auto;
4713 max-height: 16px;
4714 max-width: 16px;
4715}
4716
4717.chatbar-button > .toolbarbutton-icon {
4718 opacity: .6;
4719 margin-inline-end: 0;
4720}
4721.chatbar-button:hover > .toolbarbutton-icon,
4722.chatbar-button[open="true"] > .toolbarbutton-icon {
4723 opacity: 1;
4724}
4725
4726.chatbar-button:hover,
4727.chatbar-button[open="true"] {
4728}
4729
4730.chatbar-button > .toolbarbutton-text,
4731.chatbar-button > .toolbarbutton-menu-dropmarker {
4732 display: none;
4733}
4734
4735.chatbar-button[activity]:not([open="true"]) {
4736 background-color: #E7ADE7;
4737}
4738
4739.chatbar-button > menupopup > menuitem[activity] {
4740 font-weight: bold;
4741}
4742
4743.chatbar-innerbox {
4744 background: transparent;
4745 overflow: hidden;
4746}
4747
4748chatbar {
4749 margin-inline-end: 20px;
4750}
4751
4752chatbox {
4753 margin-inline-start: 4px;
4754 background-color: transparent;
4755}
4756
4757chatbar > chatbox {
4758 /* Apply the same border-radius as the .chat-titlebar to make the box-shadow
4759 go round nicely. */
4760/* border-top-left-radius: 4px;
4761 border-top-right-radius: 4px;*/
4762 /* Offset the chatbox the same amount as the box-shadows' spread, to make it
4763 visible. */
4764/* margin-inline-end: 5px;*/
4765}
4766
4767chatbox[minimized="true"] {
4768 width: 160px;
4769 height: 20px;
4770}
4771
4772window > chatbox {
4773 margin-inline-start: 0px;
4774 margin: 0px;
4775 border: none;
4776 padding: 0px;
4777}
4778
4779/* === END chat.inc.css === */
4780
4781/* === BEGIN plugin-doorhanger.inc.css === */
4782
4783/**
4784 * Plugin Doorhanger Styles
4785 */
4786
4787#notification-popup[popupid="click-to-play-plugins"] > .panel-arrowcontainer > .panel-arrowcontent {
4788 padding: 6px 1px 2px;
4789}
4790
4791.click-to-play-plugins-notification-center-box {
4792}
4793
4794.plugin-popupnotification-centeritem:nth-child(odd) {
4795/* background-color: rgba(0,0,0,0.1);*/
4796}
4797
4798.center-item-label {
4799 margin-bottom: 0;
4800 text-overflow: ellipsis;
4801}
4802
4803.center-item-warning-icon {
4804 background-image: url("chrome://mozapps/skin/extensions/alerticon-info-negative.png");
4805 background-repeat: no-repeat;
4806 width: 16px;
4807 height: 15px;
4808 margin-inline-start: 6px;
4809}
4810
4811.click-to-play-plugins-notification-button-container {
4812}
4813
4814.click-to-play-popup-button {
4815 width: 50%;
4816}
4817
4818.click-to-play-plugins-notification-description-box {
4819 margin-left: 5px;
4820 margin-right: 5px;
4821 margin-top: 0;
4822 padding-bottom: 3px;
4823}
4824
4825.click-to-play-plugins-outer-description {
4826 margin-top: 1px;
4827}
4828
4829.click-to-play-plugins-notification-link,
4830.center-item-link {
4831 margin: 0;
4832}
4833
4834.messageImage[value="plugin-hidden"] {
4835 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin);
4836 filter: url(chrome://browser/skin/filters.svg#fill);
4837 fill: #A09090;
4838}
4839
4840/* Keep any changes to this style in sync with pluginProblem.css */
4841notification.pluginVulnerable {
4842}
4843
4844notification.pluginVulnerable .messageImage {
4845 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked);
4846 filter: url(chrome://browser/skin/filters.svg#fill);
4847 fill: #FF0000;
4848}
4849
4850/* === END plugin-doorhanger.inc.css === */
4851
4852/* === BEGIN login-doorhanger.inc.css === */
4853
4854#notification-popup[popupid="login-fill"] > .panel-arrowcontainer > .panel-arrowcontent {
4855 /* Since we display a sliding subview that extends to the border, we cannot
4856 * keep the default padding of arrow panels. We use the same padding in the
4857 * individual content views instead. Since we removed the padding, we also
4858 * have to ensure the contents are clipped to the border box. */
4859 padding: 0;
4860 overflow: hidden;
4861}
4862
4863#login-fill-mainview,
4864#login-fill-details {
4865 padding: var(--panel-arrowcontent-padding);
4866}
4867
4868#login-fill-doorhanger[inDetailView] > #login-fill-mainview {
4869 transform: translateX(-14px);
4870}
4871
4872#login-fill-mainview,
4873#login-fill-details {
4874 transition: transform 150ms;
4875}
4876
4877#login-fill-doorhanger:not([inDetailView]) > #login-fill-details {
4878 transform: translateX(105%);
4879}
4880
4881#login-fill-doorhanger:not([inDetailView]) > #login-fill-details:-moz-locale-dir(rtl) {
4882 transform: translateX(-105%);
4883}
4884
4885#login-fill-doorhanger[inDetailView] > #login-fill-clickcapturer {
4886 background-color: hsla(240,39%,100%,.1);
4887}
4888
4889#login-fill-testing {
4890 color: #FF0000;
4891 font-weight: bold;
4892}
4893
4894#login-fill-list {
4895 border: 1px solid #9C9CFF;
4896 max-height: 20em;
4897}
4898
4899.login-fill-item[disabled] {
4900 color: #8050B0;
4901 background-color: #000000;
4902}
4903
4904.login-fill-item[disabled][selected] {
4905 background-color: #008484;
4906}
4907
4908.login-hostname {
4909 margin: 4px;
4910 font-weight: bold;
4911}
4912
4913.login-fill-item.different-hostname > .login-hostname {
4914 color: #A09090;
4915 font-style: italic;
4916}
4917
4918.login-username {
4919 margin: 4px;
4920 color: #A09090;
4921}
4922
4923#login-fill-details {
4924 padding: 4px;
4925 background: var(--panel-arrowcontent-background);
4926 color: var(--panel-arrowcontent-color);
4927 background-clip: padding-box;
4928 border-left: 1px solid #9C9CFF;
4929 margin-inline-start: 38px;
4930}
4931
4932/* === END login-doorhanger.inc.css === */
4933
4934/* === BEGIN customizeMode.inc.css === */
4935
4936/* Customization mode */
4937
4938:root {
4939 --drag-drop-transition-duration: .3s;
4940}
4941
4942#main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox {
4943 margin-bottom: 1em;
4944}
4945
4946#main-window:-moz-any([customize-entering],[customize-entered]) #content-deck,
4947#main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
4948#main-window:-moz-any([customize-entering],[customize-entered]) #navigator-toolbox {
4949 margin-left: 1em;
4950 margin-right: 1em;
4951}
4952
4953#main-window:-moz-any([customize-entering],[customize-exiting]) #tab-view-deck {
4954 pointer-events: none;
4955}
4956
4957#main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
4958#PanelUI-contents > .panel-customization-placeholder {
4959 -moz-outline-radius: 2.5px;
4960 outline: 1px dashed transparent;
4961}
4962
4963#main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before {
4964 /* Prevent jumping of tabs when switching a window between inactive and active (bug 853415). */
4965 -moz-box-ordinal-group: 0;
4966 content: "";
4967 display: -moz-box;
4968 height: 100%;
4969 left: 0;
4970 outline-offset: -2px;
4971 pointer-events: none;
4972 position: absolute;
4973 top: 0;
4974 width: 100%;
4975}
4976
4977/* Shift the TabsToolbar outline up 2px since the #nav-bar is shifted up by 1px and the
4978 #TabsToolbar::after is a pixel higher to draw the bottom border of the tabstrip so this makes the
4979 offset from the bottom effectively the same as other targets (-2px). */
4980#main-window[customize-entered] #TabsToolbar.customization-target::before {
4981/* top: -2px;*/
4982}
4983
4984/* The parents of the outline pseudo-elements need to be positioned so that the outline is positioned relative to it. */
4985#main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover,
4986#main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)),
4987#main-window[customize-entered] #nav-bar-customization-target.customization-target {
4988 position: relative;
4989}
4990
4991/* Most target outlines are shown on hover and drag over but the panel menu uses
4992 placeholders instead. */
4993#main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover::before,
4994#main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
4995/* nav-bar and panel outlines are always shown */
4996#nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
4997 outline-color: #A09090;
4998}
4999
5000#nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
5001 transition: outline-color 250ms linear;
5002}
5003
5004#PanelUI-contents[showoutline=true] > .panel-customization-placeholder {
5005 transition: outline-color 250ms linear;
5006 outline-color: #9C9CFF;
5007}
5008
5009#PanelUI-contents > .panel-customization-placeholder {
5010 cursor: auto;
5011 outline-offset: -5px;
5012}
5013
5014#main-window[customizing] .customization-target:not(#PanelUI-contents) {
5015 min-width: 100px;
5016/* padding-left: 10px;
5017 padding-right: 10px;*/
5018}
5019
5020#main-window:-moz-any([customize-entering],[customize-entered]) #tab-view-deck {
5021 padding: 0 2em 2em;
5022}
5023
5024#customization-container {
5025 background-color: #000000;
5026 color: #FF9F00;
5027}
5028
5029#customization-palette,
5030#customization-empty {
5031 padding: 0 15px 15px;
5032}
5033
5034#customization-header {
5035 font-size: 1.75em;
5036 line-height: 1.75em;
5037 color: #9C9CFF;
5038 font-weight: 200;
5039 margin: 25px 25px 12px;
5040 padding-bottom: 12px;
5041 border-bottom: 1px solid #A09090;
5042}
5043
5044#customization-panel-container {
5045 padding: 10px 10px 0px;
5046}
5047
5048#main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
5049#customization-footer {
5050 /*background-color: rgb(236,236,236);*/
5051}
5052
5053#customization-footer {
5054 border-top: 1px solid #9C9CFF;
5055 padding: 10px;
5056}
5057
5058.customizationmode-button {
5059 margin: 5px;
5060}
5061
5062.customizationmode-button:hover {
5063}
5064
5065#customization-titlebar-visibility-button[checked],
5066#customization-devedition-theme-button[checked] {
5067 background-color: #008484;
5068}
5069
5070#customization-titlebar-visibility-button[checked]:hover,
5071#customization-devedition-theme-button[checked]:hover {
5072 background-color: #FFCF00;
5073}
5074
5075#customization-titlebar-visibility-button[checked]:hover:active,
5076#customization-devedition-theme-button[checked]:hover:active {
5077 background-color: #FF9F00;
5078}
5079
5080.customizationmode-button[disabled="true"] {
5081}
5082
5083.customizationmode-button > .box-inherit > .box-inherit > .button-icon,
5084.customizationmode-button > .button-box > .button-icon {
5085/* height: 24px;*/
5086}
5087
5088#customization-titlebar-visibility-button {
5089 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle.png");
5090 -moz-image-region: rect(0, 16px, 16px, 0);
5091}
5092
5093#customization-titlebar-visibility-button:hover {
5094 -moz-image-region: rect(16px, 16px, 32px, 0);
5095}
5096
5097#customization-lwtheme-button,
5098#customization-titlebar-visibility-button {
5099 padding: 0px 5px;
5100}
5101
5102#customization-titlebar-visibility-button > .button-box {
5103 padding-top: 0;
5104 padding-bottom: 1px;
5105}
5106
5107#customization-titlebar-visibility-button:hover:active > .button-box {
5108 padding-top: 1px;
5109 padding-bottom: 0;
5110}
5111
5112#customization-lwtheme-button > .box-inherit > .box-inherit > .button-text,
5113#customization-titlebar-visibility-button > .button-box > .button-text {
5114 /* Sadly, button.css thinks its margins are perfect for everyone. */
5115 margin-inline-start: 5px !important;
5116}
5117
5118#customization-lwtheme-button > .box-inherit > .box-inherit > .button-icon {
5119 width: 20px;
5120 height: 20px;
5121 border-radius: 2px;
5122 background-size: contain;
5123}
5124
5125#customization-titlebar-visibility-button > .button-box > .button-icon {
5126 vertical-align: middle;
5127}
5128
5129#customization-titlebar-visibility-button[checked] {
5130 -moz-image-region: rect(0, 32px, 16px, 16px);
5131 background-color: #008484;
5132}
5133
5134#customization-titlebar-visibility-button[checked]:hover {
5135 -moz-image-region: rect(16px, 32px, 32px, 16px);
5136 background-color: #FFCF00;
5137}
5138
5139#customization-titlebar-visibility-button[checked]:hover:active {
5140 background-color: #FF9F00;
5141}
5142
5143@media (min-resolution: 1.1dppx) {
5144 #customization-titlebar-visibility-button {
5145 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle@2x.png");
5146 -moz-image-region: rect(0, 48px, 48px, 0);
5147 }
5148
5149 #customization-titlebar-visibility-button:hover {
5150 -moz-image-region: rect(48px, 48px, 96px, 0);
5151 }
5152
5153 #customization-titlebar-visibility-button[checked] {
5154 -moz-image-region: rect(0, 96px, 48px, 48px);
5155 }
5156
5157 #customization-titlebar-visibility-button[checked]:hover {
5158 -moz-image-region: rect(48px, 96px, 96px, 48px);
5159 }
5160}
5161
5162#main-window[customize-entered] #customization-panel-container {
5163 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5164 background-position: left top;
5165 background-repeat: repeat;
5166 background-size: auto;
5167 background-attachment: fixed;
5168}
5169
5170toolbarpaletteitem[place="toolbar"] {
5171 transition: border-width 250ms ease-in-out;
5172}
5173
5174toolbarpaletteitem[mousedown] {
5175 outline: 1px solid #008484;
5176 cursor: -moz-grabbing;
5177 opacity: 0.8;
5178}
5179
5180.panel-customization-placeholder,
5181toolbarpaletteitem[place="palette"],
5182toolbarpaletteitem[place="panel"] {
5183 transition: transform var(--drag-drop-transition-duration) ease-in-out;
5184}
5185
5186#customization-palette {
5187 transition: opacity .3s ease-in-out;
5188 opacity: 0;
5189}
5190
5191#customization-palette[showing="true"] {
5192 opacity: 1;
5193}
5194
5195toolbarpaletteitem toolbarbutton[disabled] {
5196/* color: inherit !important;*/
5197}
5198
5199toolbarpaletteitem[notransition].panel-customization-placeholder,
5200toolbarpaletteitem[notransition][place="toolbar"],
5201toolbarpaletteitem[notransition][place="palette"],
5202toolbarpaletteitem[notransition][place="panel"] {
5203 transition: none;
5204}
5205
5206toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon,
5207toolbarpaletteitem > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon,
5208toolbarpaletteitem > toolbaritem.panel-wide-item,
5209toolbarpaletteitem > toolbarbutton[type="menu-button"] {
5210 transition: transform var(--drag-drop-transition-duration) cubic-bezier(.6, 2, .75, 1.5) !important;
5211}
5212
5213toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon,
5214toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon {
5215 transform: scale(1.3);
5216}
5217
5218toolbarpaletteitem[mousedown] > toolbaritem.panel-wide-item,
5219toolbarpaletteitem[mousedown] > toolbarbutton[type="menu-button"] {
5220 transform: scale(1.1);
5221}
5222
5223/* Override the toolkit styling for items being dragged over. */
5224toolbarpaletteitem[place="toolbar"] {
5225 border-left-width: 0;
5226 border-right-width: 0;
5227 margin-right: 0;
5228 margin-left: 0;
5229}
5230
5231#customization-palette:not([hidden]) {
5232 margin-bottom: 25px;
5233}
5234
5235toolbarpaletteitem[place="palette"]:-moz-focusring,
5236toolbarpaletteitem[place="panel"]:-moz-focusring,
5237toolbarpaletteitem[place="toolbar"]:-moz-focusring {
5238 outline-width: 0;
5239}
5240
5241toolbarpaletteitem[place="palette"]:not([mousedown="true"]):-moz-focusring,
5242toolbarpaletteitem[place="panel"]:not([mousedown="true"]):-moz-focusring,
5243toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring {
5244 /* Delay adding the focusring back until after the transform transition completes. */
5245 transition: outline-width .01s linear var(--drag-drop-transition-duration);
5246 outline: 1px dotted #A09090;
5247 -moz-outline-radius: 2.5px;
5248}
5249
5250toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring {
5251 outline-offset: -5px;
5252}
5253
5254#wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
5255#wrapper-edit-controls[place="palette"] > #edit-controls > separator,
5256#wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton,
5257#wrapper-zoom-controls[place="palette"] > #zoom-controls > separator {
5258 margin-top: 20px;
5259}
5260
5261#wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
5262#wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton {
5263 margin-left: 0;
5264 margin-right: 0;
5265 max-width: 24px;
5266 min-width: 24px;
5267 max-height: 24px;
5268 min-height: 24px;
5269 padding: 4px;
5270}
5271
5272#wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon,
5273#wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon {
5274 width: 16px;
5275}
5276
5277#wrapper-edit-controls > #edit-controls > toolbarbutton > .toolbarbutton-icon {
5278 opacity: 1; /* To ensure these buttons always look enabled in customize mode */
5279}
5280
5281#wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button,
5282#wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button + separator {
5283 display: none;
5284}
5285
5286#wrapper-personal-bookmarks:not([place="toolbar"]) > #personal-bookmarks {
5287 -moz-box-pack: center;
5288 min-height: 48px;
5289}
5290
5291#personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
5292 margin-inline-end: 5px;
5293}
5294
5295#customization-palette > toolbarpaletteitem > label {
5296 text-align: center;
5297 margin-left: 0;
5298 margin-right: 0;
5299}
5300
5301#customization-lwtheme-menu > .panel-arrowcontainer > .panel-arrowcontent {
5302 -moz-box-orient: vertical;
5303 /* Make the panel padding uniform across all platforms due to the
5304 styling of the section headers and footer. */
5305 padding: 10px;
5306}
5307
5308.customization-lwtheme-menu-theme > .toolbarbutton-icon {
5309 width: 32px;
5310 height: 32px;
5311}
5312
5313.customization-lwtheme-menu-theme {
5314 -moz-appearance: none;
5315 margin: 0 -5px 5px;
5316 padding-top: 0;
5317 padding-inline-end: 5px;
5318 padding-bottom: 0;
5319 padding-inline-start: 0;
5320}
5321
5322.customization-lwtheme-menu-theme[defaulttheme] {
5323 list-style-image: url(chrome://browser/skin/Fxtheme-switcher-icon.png);
5324}
5325
5326.customization-lwtheme-menu-theme[active="true"] {
5327 background-color: #008484;
5328}
5329
5330.customization-lwtheme-menu-theme > .toolbarbutton-icon {
5331 margin: 5px;
5332}
5333
5334.customization-lwtheme-menu-theme > .toolbarbutton-text {
5335 text-align: start;
5336}
5337
5338#customization-lwtheme-menu-header,
5339#customization-lwtheme-menu-recommended {
5340 padding: 10px;
5341 margin-bottom: 5px;
5342}
5343
5344#customization-lwtheme-menu-header,
5345#customization-lwtheme-menu-recommended,
5346#customization-lwtheme-menu-footer {
5347 background-color: #A09090;
5348 color: #000000;
5349 margin-right: -10px;
5350 margin-left: -10px;
5351}
5352
5353#customization-lwtheme-menu-header {
5354 margin-top: -10px;
5355 border-top-right-radius: 3px;
5356 border-top-left-radius: 3px;
5357}
5358
5359#customization-lwtheme-menu-recommended {
5360}
5361
5362#customization-lwtheme-menu-footer {
5363 margin-bottom: -10px;
5364 border-bottom-right-radius: 3px;
5365 border-bottom-left-radius: 3px;
5366}
5367
5368.customization-lwtheme-menu-footeritem {
5369 -moz-appearance: none;
5370 -moz-box-flex: 1;
5371 background-color: #C09070;
5372 color: #000000;
5373 border: 1px solid transparent;
5374 padding: 10px;
5375 margin-left: 0;
5376 margin-right: 0;
5377}
5378
5379.customization-lwtheme-menu-footeritem:hover {
5380 background-color: #FFCF00;
5381}
5382
5383.customization-lwtheme-menu-footeritem:first-child {
5384}
5385
5386/* === END customizeMode.inc.css === */
5387
5388/* === BEGIN customizeTip.inc.css === */
5389
5390#customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent {
5391 padding: 0;
5392 margin: 0;
5393 min-width: 400px;
5394 max-width: 1000px;
5395 min-height: 200px;
5396 border-radius: 3px;
5397/* background-image: linear-gradient(90deg, #a0dfff 0%, #ceeeff 100%);*/
5398 border: 1px solid #9C9CFF;
5399 color: #FF9F00;
5400}
5401
5402#customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent:-moz-locale-dir(rtl) {
5403/* background-image: linear-gradient(90deg, #ceeeff 0%, #a0dfff 100%);*/
5404}
5405
5406.customization-tipPanel-infoBox {
5407 margin: 20px 25px 25px;
5408 width: 25px;
5409 background-image: url("chrome://browser/skin/customizableui/info-icon-customizeTip.png");
5410 background-repeat: no-repeat;
5411}
5412
5413.customization-tipPanel-content {
5414 margin: 25px 0;
5415 font-size: 12px;
5416 line-height: 18px;
5417}
5418
5419.customization-tipPanel-em {
5420 margin: 0;
5421 font-weight: bold;
5422}
5423
5424.customization-tipPanel-contentImage {
5425 margin-top: 25px;
5426 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration.png");
5427 min-width: 300px;
5428 max-width: 300px;
5429 min-height: 190px;
5430 max-height: 190px;
5431 display: -moz-box;
5432}
5433
5434.customization-tipPanel-contentImage:-moz-locale-dir(rtl) {
5435 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration-rtl.png");
5436}
5437
5438.customization-tipPanel-link {
5439 -moz-appearance: none;
5440 background: transparent;
5441 border: none;
5442 box-shadow: none;
5443 color: #3333FF;
5444 margin: 0;
5445 cursor: pointer;
5446}
5447
5448.customization-tipPanel-link > .button-box > .button-text {
5449 margin: 0 !important;
5450}
5451
5452.customization-tipPanel-closeBox > .close-icon {
5453 -moz-appearance: none;
5454 border: 0;
5455 margin-inline-end: -25px;
5456}
5457
5458#customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"],
5459#customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
5460 list-style-image: url("chrome://browser/skin/customizableui/panelarrow-customizeTip.png");
5461}
5462
5463/* === END customizeTip.inc.css === */
5464
5465/**
5466 * This next rule is a hack to disable subpixel anti-aliasing on all
5467 * labels during the customize mode transition. Subpixel anti-aliasing
5468 * on Windows with Direct2D layers acceleration is particularly slow to
5469 * paint, so this hack is how we sidestep that performance bottleneck.
5470 */
5471#main-window:-moz-any([customize-entering],[customize-exiting]) label {
5472 transform: perspective(0.01px);
5473}
5474
5475#main-window[customize-entered] > #tab-view-deck {
5476 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5477 background-attachment: fixed;
5478}
5479
5480#main-window[customization-lwtheme] > #tab-view-deck:-moz-lwtheme {
5481 background-repeat: no-repeat;
5482 background-position: right top;
5483 background-attachment: fixed;
5484 /* The image will get set from CustomizeMode.jsm */
5485 background-image: none;
5486 background-color: transparent;
5487}
5488
5489#main-window[customization-lwtheme]:-moz-lwtheme {
5490 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5491 background-repeat: repeat;
5492 background-attachment: fixed;
5493 background-position: left top;
5494}
5495
5496#main-window[customize-entered] #browser-bottombox,
5497#main-window[customize-entered] #customization-container {
5498 border-left: 1px solid #9C9CFF;
5499 border-right: 1px solid #9C9CFF;
5500 background-clip: padding-box;
5501}
5502
5503#main-window[customize-entered] #browser-bottombox {
5504 border-bottom: 1px solid #9C9CFF;
5505}
5506
5507#customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"] {
5508 margin-right: -2px;
5509}
5510
5511#customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
5512 margin-left: -2px;
5513}
5514
5515/* End customization mode */
5516
5517/* Private browsing indicators */
5518
5519/**
5520 * Currently, we have two places where we put private browsing indicators on
5521 * Windows. When tabsintitlebar is enabled, we draw the indicator in the titlebar.
5522 * When tabsintitlebar is disabled, we draw the indicator at the end of the
5523 * tabstrip. The titlebar indicator is the fiddliest of the bunch, since we
5524 * want the bottom border of the image to line up with the bottom of the window
5525 * caption buttons. That's why there's so much special-casing going on in here.
5526 */
5527.private-browsing-indicator {
5528 display: none;
5529 pointer-events: none;
5530}
5531
5532#private-browsing-indicator-titlebar {
5533 display: block;
5534 position: absolute;
5535}
5536
5537#main-window[privatebrowsingmode=temporary][tabsintitlebar] #private-browsing-indicator-titlebar > .private-browsing-indicator {
5538 display: block;
5539}
5540
5541#main-window[privatebrowsingmode=temporary]:-moz-any([inFullscreen],:not([tabsintitlebar])) #TabsToolbar > .private-browsing-indicator {
5542 display: -moz-box;
5543}
5544
5545#TabsToolbar > .private-browsing-indicator {
5546 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") no-repeat center -3px;
5547 margin-inline-start: 4px;
5548 width: 48px;
5549}
5550
5551/* Bug 1008183: We're intentionally using the titlebar asset here for fullscreen
5552 * mode, since the tabstrip "mimics" the titlebar in that case with its own
5553 * min/max/close window buttons.
5554 */
5555#private-browsing-indicator-titlebar > .private-browsing-indicator,
5556#main-window[inFullscreen] #TabsToolbar > .private-browsing-indicator {
5557 background: url("chrome://browser/skin/privatebrowsing-mask-titlebar.png") no-repeat center 0px;
5558 margin-inline-end: 4px;
5559 width: 40px;
5560 height: 20px;
5561 position: relative;
5562}
5563
5564/* This one is for Linux */
5565#main-window[privatebrowsingmode=temporary] #private-browsing-indicator {
5566 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") center no-repeat;
5567 width: 48px;
5568}
5569
5570/* End private browsing indicators */
5571
5572/* === BEGIN UITour.inc.css === */
5573
5574/* UI Tour */
5575
5576#UITourHighlightContainer {
5577 -moz-appearance: none;
5578 border: none;
5579 background-color: transparent;
5580 /* This is a buffer to compensate for the movement in the "wobble" effect */
5581 padding: 4px;
5582}
5583
5584#UITourHighlight {
5585 background-image: radial-gradient(50% 100%, rgba(0,132,132,0.4) 50%, rgba(0,132,132,0.6) 100%);
5586 border-radius: 40px;
5587 border: 1px solid #9C9CFF;
5588 /* The box-shadow opacity needs to be < 0.5 so it doesn't appear at 100% opacity
5589 on Linux without an X compositor where opacity is either 0 or 1. */
5590 box-shadow: 0 0 3px 0 rgba(0,0,0,0.49);
5591 min-height: 32px;
5592 min-width: 32px;
5593}
5594
5595#UITourTooltipBody {
5596 -moz-box-align: start;
5597}
5598
5599#UITourTooltipTitleContainer {
5600 -moz-box-align: start;
5601 margin-bottom: 10px;
5602}
5603
5604#UITourTooltipIcon {
5605 width: 48px;
5606 height: 48px;
5607 margin-inline-end: 10px;
5608}
5609
5610#UITourTooltipTitle,
5611#UITourTooltipDescription {
5612 max-width: 20rem;
5613}
5614
5615#UITourTooltipTitle {
5616 font-size: 1.45rem;
5617 font-weight: bold;
5618 margin: 0;
5619}
5620
5621#UITourTooltipDescription {
5622 margin-inline-start: 0;
5623 margin-inline-end: 0;
5624 font-size: 1.15rem;
5625 line-height: 1.8rem;
5626 margin-bottom: 0; /* Override global.css */
5627}
5628
5629#UITourTooltipClose {
5630 position: relative;
5631 -moz-appearance: none;
5632 border: none;
5633 background-color: transparent;
5634 min-width: 0;
5635 margin-inline-start: 4px;
5636 margin-top: -2px;
5637}
5638
5639#UITourTooltipClose > .toolbarbutton-text {
5640 display: none;
5641}
5642
5643#UITourTooltipButtons {
5644 -moz-box-pack: end;
5645 background-color: rgba(0,0,0,.2);
5646 border-top: 1px solid rgba(0,0,0,.4);
5647 margin: 10px -16px -16px;
5648 padding: 16px;
5649}
5650
5651#UITourTooltipButtons > label,
5652#UITourTooltipButtons > button {
5653 margin: 0 15px;
5654}
5655
5656#UITourTooltipButtons > label:first-child,
5657#UITourTooltipButtons > button:first-child {
5658 margin-inline-start: 0;
5659}
5660
5661#UITourTooltipButtons > label:last-child,
5662#UITourTooltipButtons > button:last-child {
5663 margin-inline-end: 0;
5664}
5665
5666#UITourTooltipButtons > button[image] > .button-box > .button-icon {
5667 width: 16px;
5668 height: 16px;
5669 margin-inline-end: 5px;
5670}
5671
5672#UITourTooltipButtons > label,
5673#UITourTooltipButtons > button .button-text {
5674 font-size: 1.15rem;
5675}
5676
5677#UITourTooltipButtons > button:not(.button-link) {
5678 -moz-appearance: none;
5679 background-color: #C09070;
5680 border-radius: 3000px;
5681 border: none;
5682 color: #000000;
5683 padding: 4px 30px;
5684 transition-property: background-color, color;
5685 transition-duration: 150ms;
5686}
5687
5688#UITourTooltipButtons > button:not(.button-link):not(:active):hover {
5689 background-color: #FFCF00;
5690 color: #000000;
5691}
5692
5693#UITourTooltipButtons > label,
5694#UITourTooltipButtons > button.button-link {
5695 -moz-appearance: none;
5696 background: transparent;
5697 border: none;
5698 box-shadow: none;
5699 color: rgba(0,0,0,0.35);
5700 padding-left: 10px;
5701 padding-right: 10px;
5702}
5703
5704#UITourTooltipButtons > button.button-link:hover {
5705 color: black;
5706}
5707
5708/* The primary button gets the same color as the customize button. */
5709#UITourTooltipButtons > button.button-primary {
5710 background-color: #A06060; /* LCARS default button background color */
5711 color: #000000;
5712 padding-left: 30px;
5713 padding-right: 30px;
5714}
5715
5716#UITourTooltipButtons > button.button-primary:not(:active):hover {
5717 background-color: #FFCF00;
5718 color: #000000;
5719}
5720
5721/* Notification overrides for Heartbeat UI */
5722
5723notification.heartbeat {
5724 background-color: #A09090;
5725/* height: 40px;*/
5726}
5727
5728@keyframes pulse-onshow {
5729 0% {
5730 opacity: 0;
5731 transform: scale(1.0);
5732 }
5733 25% {
5734 opacity: 1;
5735 transform: scale(1.1);
5736 }
5737 50% {
5738 transform: scale(1.0);
5739 }
5740 75% {
5741 transform: scale(1.1);
5742 }
5743 100% {
5744 transform: scale(1.0);
5745 }
5746}
5747
5748@keyframes pulse-twice {
5749 0% {
5750 transform: scale(1.1);
5751 }
5752 50% {
5753 transform: scale(0.8);
5754 }
5755 100% {
5756 transform: scale(1);
5757 }
5758}
5759
5760.messageText.heartbeat {
5761 color: #000000;
5762/* text-shadow: none; */
5763 margin-inline-start: 0px;
5764}
5765
5766.messageImage.heartbeat {
5767 width: 24px;
5768 height: 24px;
5769 margin-inline-start: 8px;
5770 margin-inline-end: 8px;
5771}
5772
5773.messageImage.heartbeat.pulse-onshow {
5774 animation-name: pulse-onshow;
5775 animation-duration: 1.5s;
5776 animation-iteration-count: 1;
5777 animation-timing-function: cubic-bezier(.7,1.8,.9,1.1);
5778}
5779
5780.messageImage.heartbeat.pulse-twice {
5781 animation-name: pulse-twice;
5782 animation-duration: 1s;
5783 animation-iteration-count: 2;
5784 animation-timing-function: linear;
5785}
5786
5787/* Learn More link styles */
5788.heartbeat > .text-link {
5789 color: #3333FF;
5790 margin-inline-start: 0px;
5791}
5792
5793.heartbeat > .text-link:hover {
5794 color: #9C9CFF;
5795 text-decoration: none;
5796}
5797
5798.heartbeat > .text-link:hover:active {
5799 color: #FF9F00;
5800}
5801
5802/* Heartbeat UI Rating Star Classes */
5803.heartbeat > #star-rating-container {
5804 display: -moz-box;
5805/* margin-bottom: 4px;*/
5806}
5807
5808.heartbeat > #star-rating-container > #star5 {
5809 -moz-box-ordinal-group: 5;
5810}
5811
5812.heartbeat > #star-rating-container > #star4 {
5813 -moz-box-ordinal-group: 4;
5814}
5815
5816.heartbeat > #star-rating-container > #star3 {
5817 -moz-box-ordinal-group: 3;
5818}
5819
5820.heartbeat > #star-rating-container > #star2 {
5821 -moz-box-ordinal-group: 2;
5822}
5823
5824.heartbeat > #star-rating-container > .star-x {
5825 background: url("chrome://browser/skin/heartbeat-star-off.svg");
5826 cursor: pointer;
5827 /* Overrides the margin-inline-end for all platforms defined in the .plain class */
5828 margin-inline-end: 4px !important;
5829 width: 16px;
5830 height: 16px;
5831}
5832
5833.heartbeat > #star-rating-container > .star-x:hover,
5834.heartbeat > #star-rating-container > .star-x:hover ~ .star-x {
5835 background: url("chrome://browser/skin/heartbeat-star-lit.svg");
5836}
5837
5838/* === END UITour.inc.css === */
5839
5840#UITourTooltipButtons {
5841 /**
5842 * Override the --panel-arrowcontent-padding so the background extends
5843 * to the sides and bottom of the panel.
5844 */
5845 margin-left: -10px;
5846 margin-right: -10px;
5847 margin-bottom: -10px;
5848}
5849
5850/* === BEGIN contextmenu.inc.css === */
5851
5852menugroup > .menuitem-iconic[disabled="true"] > .menu-iconic-left {
5853}
5854
5855#context-navigation > .menuitem-iconic {
5856 -moz-box-flex: 1;
5857 -moz-box-pack: center;
5858 -moz-box-align: center;
5859}
5860
5861#context-navigation > .menuitem-iconic[disabled="true"] {
5862 background-color: transparent;
5863}
5864
5865#context-navigation > .menuitem-iconic > .menu-iconic-left {
5866 -moz-appearance: none;
5867}
5868
5869#context-back > .menu-iconic-left {
5870 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back"); */
5871 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
5872 -moz-image-region: rect(0, 54px, 18px, 36px);
5873}
5874
5875#context-back:not([disabled="true"]):hover > .menu-iconic-left {
5876 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back-active"); */
5877 -moz-image-region: rect(18px, 54px, 36px, 36px);
5878}
5879
5880#context-back[disabled="true"] > .menu-iconic-left {
5881 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back-disabled"); */
5882 -moz-image-region: rect(36px, 54px, 54px, 36px);
5883}
5884
5885#context-forward > .menu-iconic-left {
5886 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward"); */
5887 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
5888 -moz-image-region: rect(0, 72px, 18px, 54px);
5889}
5890
5891#context-forward:not([disabled="true"]):hover > .menu-iconic-left {
5892 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward-active"); */
5893 -moz-image-region: rect(18px, 72px, 36px, 54px);
5894}
5895
5896#context-forward[disabled="true"] > .menu-iconic-left {
5897 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward-disabled"); */
5898 -moz-image-region: rect(36px, 72px, 54px, 54px);
5899}
5900
5901#context-reload > .menu-iconic-left {
5902 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload"); */
5903 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
5904 -moz-image-region: rect(0, 14px, 14px, 0);
5905}
5906
5907#context-reload:not([disabled="true"]):hover > .menu-iconic-left {
5908 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload-active"); */
5909 -moz-image-region: rect(14px, 14px, 28px, 0);
5910}
5911
5912#context-reload[disabled="true"] > .menu-iconic-left {
5913 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload-disabled"); */
5914 -moz-image-region: rect(28px, 14px, 42px, 0);
5915}
5916
5917#context-stop > .menu-iconic-left {
5918 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop"); */
5919 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
5920 -moz-image-region: rect(0, 28px, 14px, 14px);
5921}
5922
5923#context-stop:not([disabled="true"]):hover > .menu-iconic-left {
5924 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop-active"); */
5925 -moz-image-region: rect(14px, 28px, 28px, 14px);
5926}
5927
5928#context-stop[disabled="true"] > .menu-iconic-left {
5929 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop-disabled"); */
5930 -moz-image-region: rect(28px, 28px, 42px, 14px);
5931}
5932
5933#context-bookmarkpage > .menu-iconic-left {
5934 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark"); */
5935 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
5936 -moz-image-region: rect(0, 144px, 18px, 126px);
5937}
5938
5939#context-bookmarkpage:not([disabled="true"]):hover > .menu-iconic-left {
5940 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark-active"); */
5941 -moz-image-region: rect(18px, 144px, 36px, 126px);
5942}
5943
5944#context-bookmarkpage[disabled="true"] > .menu-iconic-left {
5945 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark-disabled"); */
5946 -moz-image-region: rect(36px, 144px, 54px, 126px);
5947}
5948
5949#context-bookmarkpage[starred=true] {
5950 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked"); */
5951 -moz-image-region: rect(0px, 162px, 18px, 144px);
5952}
5953
5954#context-bookmarkpage[starred=true][_moz-menuactive=true] {
5955 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-active"); */
5956 -moz-image-region: rect(18px, 162px, 36px, 144px);
5957}
5958
5959#context-bookmarkpage[starred=true][disabled=true] {
5960 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-disabled"); */
5961 -moz-image-region: rect(36px, 162px, 54px, 144px);
5962}
5963
5964#context-back:-moz-locale-dir(rtl),
5965#context-forward:-moz-locale-dir(rtl),
5966#context-reload:-moz-locale-dir(rtl) {
5967 transform: scaleX(-1);
5968}
5969
5970#context-navigation > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
5971 width: 18px; /*16px;*/
5972 height: 18px; /*16px;*/
5973 margin: 7px;
5974}
5975
5976#context-navigation > #context-reload > .menu-iconic-left > .menu-iconic-icon,
5977#context-navigation > #context-stop > .menu-iconic-left > .menu-iconic-icon {
5978 width: 14px;
5979 height: 14px;
5980 margin: 9px;
5981}
5982
5983#context-media-eme-learnmore {
5984 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
5985}
5986
5987#context-media-eme-learnmore {
5988 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
5989}
5990
5991/* === END contextmenu.inc.css === */
5992
5993#context-navigation {
5994}
5995
5996#context-sep-navigation {
5997/* margin-top: -4px; */
5998}
5999
6000.browser-extension-panel > .panel-arrowcontainer > .panel-arrowcontent {
6001 padding: 0;
6002 overflow: hidden;
6003}
KaiRo's SeaMonkey themes