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