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