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