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