projects / themes.git / blame_incremental
? search:
summary | shortlog | log | commit | commitdiff | tree
blob | blame (non-incremental) | history | HEAD
third and last part of syncing LCARStrek with Firefox 51 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: hsla(0,0%,80%,.45);
54 --arrowpanel-dimmed-even-further: hsla(0,0%,80%,.8); */
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://browser/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://browser/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) > .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) > .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/* SHARING ICON */
2024
2025#sharing-icon {
2026 width: 16px;
2027 height: 16px;
2028 margin-inline-start: -16px;
2029 position: relative;
2030 display: none;
2031}
2032
2033#identity-box[sharing="camera"] > #sharing-icon {
2034 list-style-image: url("chrome://browser/skin/notification-icons.svg#camera");
2035}
2036
2037#identity-box[sharing="microphone"] > #sharing-icon {
2038 list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone");
2039}
2040
2041#identity-box[sharing="screen"] > #sharing-icon {
2042 list-style-image: url("chrome://browser/skin/notification-icons.svg#screen");
2043
2044}
2045
2046#identity-box[sharing] > #sharing-icon {
2047 display: -moz-box;
2048 filter: url("chrome://browser/skin/filters.svg#fill");
2049 fill: #FF0000;
2050 animation-delay: -1.5s;
2051}
2052
2053#identity-box[sharing] > #identity-icon,
2054#sharing-icon {
2055 animation: 3s linear pulse infinite;
2056}
2057
2058@keyframes pulse {
2059 0%, 16.66%, 83.33%, 100% {
2060 opacity: 0;
2061 }
2062 33.33%, 66.66% {
2063 opacity: 1;
2064 }
2065}
2066
2067/* TRACKING PROTECTION ICON */
2068
2069#tracking-protection-icon {
2070 width: 16px;
2071 height: 16px;
2072 margin-inline-start: 2px;
2073 margin-inline-end: 0;
2074}
2075
2076#tracking-protection-icon[animate] {
2077 transition: margin-left 200ms ease-out, margin-right 200ms ease-out;
2078}
2079
2080#tracking-protection-icon:not([state]) {
2081 margin-inline-end: -18px;
2082 pointer-events: none;
2083 opacity: 0;
2084 /* Only animate the shield in, when it disappears hide it immediately. */
2085 transition: none;
2086}
2087
2088#urlbar[pageproxystate="invalid"] > #identity-box > #tracking-protection-icon {
2089 visibility: collapse;
2090}
2091
2092/* CONNECTION ICON */
2093
2094#connection-icon {
2095 width: 16px;
2096 height: 16px;
2097 margin-inline-start: 2px;
2098 visibility: collapse;
2099}
2100
2101/* === END identity-block.inc.css === */
2102
2103#page-proxy-favicon {
2104 -moz-image-region: rect(0, 16px, 16px, 0);
2105}
2106
2107window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box > #page-proxy-favicon {
2108/* margin-inline-end: 1px;*/
2109}
2110
2111#identity-box:hover > #page-proxy-favicon {
2112 -moz-image-region: rect(0, 32px, 16px, 16px);
2113}
2114
2115#identity-box:hover:active > #page-proxy-favicon,
2116#identity-box[open=true] > #page-proxy-favicon {
2117 -moz-image-region: rect(0, 48px, 16px, 32px);
2118}
2119
2120#identity-box:hover {
2121 background-color: #FFCF00;
2122 color: #000000;
2123}
2124
2125#identity-box:hover:active,
2126#identity-box[open=true] {
2127 background-color: #FF9F00;
2128 color: #000000;
2129}
2130
2131#urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover,
2132#urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active,
2133#urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] {
2134 background-color: #A09090;
2135 color: #000000;
2136}
2137
2138#urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover > #identity-icon-labels,
2139#urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active > #identity-icon-labels,
2140#urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] > #identity-icon-labels {
2141 color: #000000;
2142}
2143
2144#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover,
2145#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active,
2146#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] {
2147 background-color: #008484;
2148 color: #000000;
2149}
2150
2151#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover > #identity-icon-labels,
2152#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active > #identity-icon-labels,
2153#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] > #identity-icon-labels {
2154 color: #000000;
2155}
2156
2157#identity-box:hover > image,
2158#identity-box:hover:active > image,
2159#identity-box[open=true] > image {
2160 filter: url(chrome://global/skin/filters.svg#active-icon-state);
2161}
2162
2163/* autocomplete */
2164
2165#treecolAutoCompleteImage {
2166 max-width: 36px;
2167}
2168
2169/*
2170.autocomplete-richlistbox {
2171 padding: 4px;
2172}
2173
2174.autocomplete-richlistitem {
2175 height: 30px;
2176 min-height: 30px;
2177 font: message-box;
2178 border-radius: 2px;
2179 border: 1px solid transparent;
2180}
2181
2182.autocomplete-richlistitem[selected=true] {
2183 background-color: hsl(210, 80%, 52%);
2184}
2185*/
2186.ac-title {
2187 font-size: 14px;
2188/* color: hsl(0, 0%, 0%);*/
2189}
2190
2191.ac-tags {
2192 font-size: 12px;
2193}
2194/*
2195html|span.ac-tag {
2196 background-color: hsl(216, 0%, 88%);
2197 color: hsl(0, 0%, 0%);
2198 border-radius: 2px;
2199 border: 1px solid transparent;
2200 padding: 0 1px;
2201}
2202*/
2203
2204.ac-separator,
2205.ac-url,
2206.ac-action {
2207 font-size: 12px;
2208}
2209
2210.ac-separator {
2211/* color: hsl(0, 0%, 50%);*/
2212}
2213
2214.ac-url {
2215 color: #9C9CFF;
2216}
2217
2218.ac-action {
2219 color: #9C9CFF;
2220}
2221
2222.ac-title[selected=true],
2223.ac-separator[selected],
2224.ac-url[selected=true],
2225.ac-action[selected=true] {
2226 color: #000000;
2227}
2228
2229.ac-tags-text[selected] > html|span.ac-tag {
2230 background-color: #A09090;
2231 color: #000000;
2232}
2233
2234html|span.ac-emphasize-text-title,
2235html|span.ac-emphasize-text-tag,
2236html|span.ac-emphasize-text-url {
2237 font-weight: 600;
2238}
2239
2240.ac-type-icon[type=bookmark] {
2241 list-style-image: url("chrome://browser/skin/urlbar-star.svg#star");
2242}
2243
2244.ac-type-icon[type=bookmark][selected][current] {
2245/* list-style-image: url("chrome://browser/skin/urlbar-star.svg#star-inverted");*/
2246}
2247
2248.ac-result-type-bookmark,
2249.autocomplete-treebody::-moz-tree-image(bookmark, treecolAutoCompleteImage) {
2250 list-style-image: url("chrome://browser/skin/places/bookmark.png");
2251 -moz-image-region: rect(0px 16px 16px 0px);
2252 width: 16px;
2253 height: 16px;
2254}
2255
2256richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-bookmark,
2257.autocomplete-treebody::-moz-tree-image(selected, current, bookmark, treecolAutoCompleteImage) {
2258/* -moz-image-region: rect(0px 48px 16px 32px);*/
2259}
2260
2261.ac-type-icon[type=keyword],
2262.ac-site-icon[type=searchengine],
2263.autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage) {
2264 list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon");
2265}
2266
2267.ac-type-icon[type=keyword][selected],
2268.ac-site-icon[type=searchengine][selected],
2269.autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage, selected) {
2270 list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon-inverted");
2271}
2272
2273.ac-result-type-tag,
2274.autocomplete-treebody::-moz-tree-image(tag, treecolAutoCompleteImage) {
2275 list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
2276 width: 16px;
2277 height: 16px;
2278}
2279
2280.ac-type-icon[type=switchtab],
2281.ac-type-icon[type=remotetab] {
2282 list-style-image: url("chrome://browser/skin/urlbar-tab.svg#tab");
2283}
2284
2285.ac-type-icon[type=switchtab][selected],
2286.ac-type-icon[type=remotetab][selected] {
2287 list-style-image: url("chrome://browser/skin/urlbar-tab.svg#tab-inverted");
2288}
2289
2290.autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment),
2291.autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment)
2292{
2293 color: #8050B0;
2294 font-size: smaller;
2295}
2296
2297.autocomplete-treebody::-moz-tree-cell(suggesthint) {
2298 border-top: 1px solid #9C9CFF;
2299}
2300
2301/* combined go/reload/stop button in location bar */
2302
2303#urlbar-go-button,
2304#urlbar-reload-button,
2305#urlbar-stop-button {
2306 border-style: none;
2307 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
2308/* margin: 0 9px; */
2309 margin-inline-start: 0px;
2310 border-inline-start: 1px solid var(--urlbar-separator-color);
2311 border-image: linear-gradient(transparent 15%,
2312 var(--urlbar-separator-color) 15%,
2313 var(--urlbar-separator-color) 85%,
2314 transparent 85%);
2315 border-image-slice: 1;
2316}
2317
2318#urlbar:-moz-locale-dir(ltr) > toolbarbutton {
2319 border-top-left-radius: 0px;
2320 border-bottom-left-radius: 0px;
2321}
2322
2323#urlbar:-moz-locale-dir(rtl) > toolbarbutton {
2324 border-top-right-radius: 0px;
2325 border-bottom-right-radius: 0px;
2326}
2327
2328#urlbar > toolbarbutton:not([disabled=true]):active:hover,
2329#urlbar-reload-button:not(:hover) {
2330 border-inline-start-style: none;
2331 padding-inline-start: 3px;
2332}
2333
2334#urlbar-reload-button {
2335 -moz-image-region: rect(0px, 14px, 14px, 0px);
2336}
2337
2338#urlbar-reload-button[disabled=true] {
2339 -moz-image-region: rect(28px, 14px, 42px, 0px);
2340}
2341
2342#urlbar-reload-button:not([disabled=true]):hover {
2343 -moz-image-region: rect(14px, 14px, 28px, 0px);
2344}
2345
2346#urlbar-reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2347 transform: scaleX(-1);
2348}
2349
2350#urlbar-go-button {
2351 -moz-image-region: rect(0, 42px, 14px, 28px);
2352}
2353
2354#urlbar-go-button:hover {
2355 -moz-image-region: rect(14px, 42px, 28px, 28px);
2356}
2357
2358#urlbar-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2359 transform: scaleX(-1);
2360}
2361
2362#urlbar-stop-button {
2363 -moz-image-region: rect(0px, 28px, 14px, 14px);
2364}
2365
2366#urlbar-stop-button:hover {
2367 -moz-image-region: rect(14px, 28px, 28px, 14px);
2368}
2369
2370@media (min-resolution: 1.1dppx) {
2371 #urlbar-go-button,
2372 #urlbar-reload-button,
2373 #urlbar-stop-button {
2374 list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png");
2375 }
2376
2377 #urlbar-go-button > .toolbarbutton-icon,
2378 #urlbar-reload-button > .toolbarbutton-icon,
2379 #urlbar-stop-button > .toolbarbutton-icon {
2380 width: 14px;
2381 }
2382
2383 #urlbar-go-button {
2384 -moz-image-region: rect(0, 84px, 28px, 56px);
2385 }
2386
2387 #urlbar-go-button:hover {
2388 -moz-image-region: rect(28px, 84px, 56px, 56px);
2389 }
2390
2391 #urlbar-go-button:hover:active {
2392 -moz-image-region: rect(56px, 84px, 84px, 56px);
2393 }
2394
2395 #urlbar-reload-button {
2396 -moz-image-region: rect(0, 28px, 28px, 0);
2397 }
2398
2399 #urlbar-reload-button:not([disabled]):hover {
2400 -moz-image-region: rect(28px, 28px, 56px, 0);
2401 }
2402
2403 #urlbar-reload-button:not([disabled]):hover:active {
2404 -moz-image-region: rect(56px, 28px, 84px, 0);
2405 }
2406
2407 #urlbar-stop-button {
2408 -moz-image-region: rect(0, 56px, 28px, 28px);
2409 }
2410
2411 #urlbar-stop-button:not([disabled]):hover {
2412 -moz-image-region: rect(28px, 56px, 56px, 28px);
2413 }
2414
2415 #urlbar-stop-button:hover:active {
2416 -moz-image-region: rect(56px, 56px, 84px, 28px);
2417 }
2418}
2419
2420/* popup blocker button */
2421
2422#page-report-button {
2423 list-style-image: url("chrome://browser/skin/urlbar-popup-blocked.png");
2424 -moz-image-region: rect(0, 16px, 16px, 0);
2425}
2426
2427#page-report-button:hover ,
2428#page-report-button:hover:active,
2429#page-report-button[open="true"] {
2430 -moz-image-region: rect(0, 32px, 16px, 16px);
2431}
2432
2433/* Reader mode button */
2434
2435#reader-mode-button {
2436 list-style-image: url("chrome://browser/skin/readerMode.svg");
2437 -moz-image-region: rect(0, 16px, 16px, 0);
2438}
2439
2440#reader-mode-button:hover,
2441#reader-mode-button[readeractive]:hover {
2442 -moz-image-region: rect(0, 32px, 16px, 16px);
2443}
2444
2445#reader-mode-button:hover:active,
2446#reader-mode-button[readeractive] {
2447 -moz-image-region: rect(0, 48px, 16px, 32px);
2448}
2449
2450/* social share panel */
2451
2452/* === BEGIN social.inc.css === */
2453
2454#manage-share-providers {
2455 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
2456 -moz-image-region: rect(0, 468px, 18px, 450px);
2457}
2458
2459#manage-share-providers > .toolbarbutton-icon {
2460 min-height: 18px;
2461 min-width: 18px;
2462}
2463
2464.social-panel > .panel-arrowcontainer > .panel-arrowcontent {
2465 padding: 0;
2466}
2467/* fixup corners for share panel */
2468.social-panel > .social-panel-frame {
2469 border-radius: inherit;
2470}
2471
2472/* === END social.inc.css === */
2473
2474.social-panel-frame {
2475 border-radius: inherit;
2476}
2477
2478.social-share-frame {
2479 min-width: 756px;
2480 height: 150px;
2481}
2482
2483#share-container {
2484 min-width: 756px;
2485 background-color: white;
2486 background-repeat: no-repeat;
2487 background-position: center center;
2488}
2489#share-container[loading] {
2490 background-image: url(chrome://browser/skin/tabbrowser/pendingpaint.png);
2491}
2492#share-container > browser {
2493 transition: opacity 150ms ease-in-out;
2494 opacity: 1;
2495}
2496#share-container[loading] > browser {
2497 opacity: 0;
2498}
2499
2500.social-share-toolbar {
2501 border-bottom: 1px solid #9C9CFF;
2502 padding: 2px;
2503}
2504
2505#social-share-provider-buttons {
2506 padding: 0;
2507 margin: 0;
2508}
2509
2510.share-provider-button {
2511 padding: 5px;
2512 margin: 2px;
2513}
2514
2515.share-provider-button > .toolbarbutton-text {
2516 display: none;
2517}
2518.share-provider-button > .toolbarbutton-icon {
2519 width: 16px;
2520 min-height: 16px;
2521 max-height: 16px;
2522}
2523
2524#social-share-panel {
2525 min-height: 100px;
2526 min-width: 766px;
2527}
2528
2529#share-container,
2530.social-share-frame {
2531 border-top-left-radius: 0;
2532 border-bottom-left-radius: inherit;
2533 border-top-right-radius: 0;
2534 border-bottom-right-radius: inherit;
2535}
2536
2537#social-share-panel > .social-share-toolbar {
2538 border-top-left-radius: inherit;
2539 border-top-right-radius: inherit;
2540}
2541
2542#social-share-provider-buttons {
2543 border-top-left-radius: inherit;
2544 border-top-right-radius: inherit;
2545}
2546
2547/* bookmarks menu-button */
2548
2549#bookmarks-menu-button.bookmark-item {
2550 list-style-image: url("chrome://browser/skin/places/bookmark.png");
2551 -moz-image-region: rect(0px 16px 16px 0px);
2552}
2553
2554#bookmarks-menu-button.bookmark-item[starred] {
2555 -moz-image-region: rect(0px 32px 16px 16px);
2556}
2557
2558#nav-bar #bookmarks-menu-button[cui-areatype="toolbar"]:not([overflowedItem=true]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
2559 padding-top: 2px;
2560 padding-bottom: 2px;
2561}
2562
2563#BMB_bookmarksPopup[side="top"],
2564#BMB_bookmarksPopup[side="bottom"] {
2565 margin-left: -20px;
2566 margin-right: -20px;
2567}
2568
2569#BMB_bookmarksPopup[side="left"],
2570#BMB_bookmarksPopup[side="right"] {
2571 margin-top: -20px;
2572 margin-bottom: -20px;
2573}
2574
2575/* bookmarking panel */
2576
2577#editBookmarkPanelStarIcon {
2578 list-style-image: url("chrome://browser/skin/places/starred48.png");
2579 width: 48px;
2580 height: 48px;
2581}
2582
2583#editBookmarkPanelStarIcon[unstarred] {
2584 list-style-image: url("chrome://browser/skin/places/unstarred48.png");
2585}
2586
2587#editBookmarkPanelTitle {
2588 font-size: 130%;
2589}
2590
2591#editBookmarkPanelHeader,
2592#editBookmarkPanelContent {
2593 margin-bottom: .5em;
2594}
2595
2596/* Implements editBookmarkPanel resizing on folderTree un-collapse. */
2597#editBMPanel_folderTree {
2598 min-width: 27em;
2599}
2600
2601/* ::::: content area ::::: */
2602
2603#sidebar-box {
2604 background-color: #9C9CFF;
2605 color: #000000;
2606}
2607
2608#sidebar {
2609 background-color: #000000;
2610}
2611
2612#sidebar-splitter {
2613 margin-inline-start: 0;
2614}
2615
2616#sidebar-header {
2617 color: #000000;
2618 padding: 2px;
2619}
2620
2621#sidebar-title {
2622 padding-inline-start: 0px;
2623}
2624
2625#sidebar-header > .close-icon {
2626/* padding: 4px 2px;
2627 margin: 0;
2628 border: none;*/
2629 list-style-image: url("chrome://global/skin/icons/close-button.gif");
2630}
2631
2632#sidebar-header > .close-icon:hover,
2633#sidebar-header > .close-icon:hover:active {
2634 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2635}
2636
2637#sidebar-splitter:-moz-locale-dir(ltr),
2638#sidebar:-moz-locale-dir(ltr) {
2639 border-radius: 0 5px 0 0;
2640}
2641
2642#sidebar-splitter:-moz-locale-dir(rtl),
2643#sidebar:-moz-locale-dir(rtl) {
2644 border-radius: 5px 0 0 0;
2645}
2646
2647.browserContainer > findbar {
2648/*
2649 background-color: -moz-dialog;
2650 color: -moz-DialogText;
2651*/
2652}
2653
2654/* Tabstrip */
2655
2656#TabsToolbar {
2657 min-height: 0;
2658 padding: 0;
2659 -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar");
2660}
2661
2662#TabsToolbar .toolbar-holder {
2663 background-color: #000000; /* correct effect of being an actual toolbar */
2664}
2665
2666#main-window[disablechrome] #TabsToolbar,
2667#TabsToolbar[tabsontop="false"] {
2668 border-bottom: 1px solid #008484;
2669}
2670
2671/* === BEGIN tabs.inc.css === */
2672
2673:root {
2674 /* --tab-toolbar-navbar-overlap: 1px; */
2675 /* --navbar-tab-toolbar-highlight-overlap: 1px; */
2676 /* --tab-min-height: 31px; */
2677}
2678#TabsToolbar {
2679 /* --tab-stroke-background-size: auto 100%; */
2680}
2681
2682.tabbrowser-tab,
2683.tabs-newtab-button,
2684#TabsToolbar > #new-tab-button {
2685 margin-top: 0px;
2686}
2687
2688.tabbrowser-tab {
2689 padding: 1px 4px 2px;
2690}
2691
2692.tabbrowser-tab:first-of-type {
2693 margin-inline-start: 2px;
2694}
2695
2696.tabs-newtab-button,
2697#TabsToolbar > #new-tab-button,
2698#TabsToolbar > toolbarpaletteitem > #new-tab-button,
2699#TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
2700 border-radius: 8px 8px 0px 0px;
2701 margin-inline-start: 0;
2702}
2703
2704.tabs-newtab-button:not(:hover),
2705#TabsToolbar > #new-tab-button:not(:hover),
2706#TabsToolbar > toolbarpaletteitem > #new-tab-button,
2707#TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
2708 background-color: #C09070;
2709}
2710
2711/* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */
2712.tabbrowser-tab[visuallyselected=true] {
2713/* position: relative;
2714 z-index: 2;*/
2715}
2716
2717.tab-background-middle {
2718}
2719
2720.tab-content {
2721}
2722
2723.tab-content[pinned] {
2724}
2725
2726.tab-throbber,
2727.tab-icon-image,
2728.tab-sharing-icon-overlay,
2729.tab-icon-sound,
2730.tab-close-button {
2731}
2732
2733.tab-throbber,
2734.tab-sharing-icon-overlay,
2735.tab-icon-image {
2736 height: 16px;
2737 width: 16px;
2738 margin-inline-end: 3px;
2739}
2740
2741.tab-icon-image {
2742 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
2743}
2744
2745.tab-icon-image[sharing]:not([selected]),
2746.tab-sharing-icon-overlay {
2747 animation: 3s linear pulse infinite;
2748}
2749
2750@keyframes pulse {
2751 0%, 16.66%, 83.33%, 100% {
2752 opacity: 0;
2753 }
2754 33.33%, 66.66% {
2755 opacity: 1;
2756 }
2757}
2758
2759.tab-icon-image[sharing]:not([selected]) {
2760 animation-delay: -1.5s;
2761}
2762
2763.tab-sharing-icon-overlay {
2764 /* 16px of the icon + 6px of margin-inline-end of .tab-icon-image */
2765 margin-inline-start: -22px;
2766 position: relative;
2767}
2768
2769.tab-sharing-icon-overlay[sharing="camera"] {
2770 list-style-image: url("chrome://browser/skin/notification-icons.svg#camera-sharing");
2771}
2772
2773.tab-sharing-icon-overlay[sharing="microphone"] {
2774 list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone-sharing");
2775}
2776
2777.tab-sharing-icon-overlay[sharing="screen"] {
2778 list-style-image: url("chrome://browser/skin/notification-icons.svg#screen-sharing");
2779}
2780
2781.tab-icon-overlay {
2782 width: 16px;
2783 height: 16px;
2784 margin-top: -8px;
2785 margin-inline-start: -15px;
2786 margin-inline-end: -1px;
2787 position: relative;
2788}
2789
2790.tab-icon-overlay[crashed] {
2791 list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg");
2792}
2793
2794.tab-icon-overlay[soundplaying],
2795.tab-icon-overlay[muted]:not([crashed]) {
2796 border-radius: 10px;
2797}
2798
2799.tab-icon-overlay[soundplaying]:hover,
2800.tab-icon-overlay[muted]:hover {
2801 background-color: #FFCF00;
2802}
2803
2804.tab-icon-overlay[soundplaying] {
2805 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio");
2806}
2807
2808.tab-icon-overlay[muted]:not([crashed]) {
2809 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted");
2810}
2811
2812#TabsToolbar[brighttext] .tab-icon-overlay[soundplaying]:not(:hover) {
2813 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white");
2814}
2815
2816
2817#TabsToolbar[brighttext] .tab-icon-overlay[muted]:not([crashed]):not(:hover) {
2818 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-muted");
2819}
2820
2821.tab-throbber[busy] {
2822 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim-connect.png");
2823}
2824
2825.tab-throbber[progress] {
2826 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim.png");
2827}
2828
2829@media (min-resolution: 1.1dppx) {
2830 .tab-throbber[busy] {
2831 list-style-image: url("chrome://communicator/skin/brand/throbber-anim-connect.png");
2832 }
2833
2834 .tab-throbber[progress] {
2835 list-style-image: url("chrome://communicator/skin/brand/throbber-anim.png");
2836 }
2837}
2838
2839.tab-throbber[pinned],
2840.tab-icon-image[pinned] {
2841 margin-inline-start: 2px;
2842 margin-inline-end: 2px;
2843}
2844
2845.tab-label {
2846 /* this needs to add up to the 16px of the icon image */
2847 height: 12px;
2848 margin-top: 2px !important;
2849 margin-bottom: 2px !important;
2850}
2851
2852.tab-icon-sound {
2853 margin-inline-start: 4px;
2854 width: 16px;
2855 height: 16px;
2856 padding: 0;
2857}
2858
2859.tab-icon-sound[soundplaying],
2860.tab-icon-sound[muted] {
2861 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio);
2862 filter: url(chrome://browser/skin/filters.svg#fill);
2863 fill: currentColor;
2864}
2865
2866.tab-icon-sound[muted] {
2867 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted);
2868}
2869
2870.tab-close-button {
2871 margin-top: 1px;
2872 padding: 0;
2873}
2874
2875.tab-background,
2876.tabs-newtab-button {
2877 /* overlap the tab curves */
2878}
2879
2880.tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
2881}
2882
2883/* Tab Overflow */
2884.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]),
2885.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
2886}
2887
2888.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:-moz-locale-dir(rtl),
2889.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:-moz-locale-dir(ltr) {
2890}
2891
2892.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]) {
2893}
2894
2895.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
2896}
2897
2898.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator[collapsed],
2899.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator[collapsed] {
2900}
2901
2902.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator,
2903.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator {
2904}
2905
2906.tab-background-start[selected=true]::after,
2907.tab-background-start[selected=true]::before,
2908.tab-background-start,
2909.tab-background-end,
2910.tab-background-end[selected=true]::after,
2911.tab-background-end[selected=true]::before {
2912}
2913
2914.tabbrowser-tab:not([visuallyselected=true]),
2915.tabbrowser-tab:-moz-lwtheme {
2916}
2917
2918/* tabbrowser-tab focus ring */
2919.tabbrowser-tab:focus {
2920 outline: 1px dotted;
2921}
2922
2923/* Selected tab */
2924
2925.tabbrowser-tab[visuallyselected="true"] {
2926}
2927
2928/* End selected tab */
2929
2930/* Tab pointer-events */
2931/*
2932.tabbrowser-tab {
2933 pointer-events: none;
2934}
2935
2936.tab-background-middle,
2937.tabs-newtab-button,
2938.tab-icon-overlay[soundplaying],
2939.tab-icon-overlay[muted]:not([crashed]),
2940.tab-icon-sound,
2941.tab-close-button {
2942 pointer-events: auto;
2943}
2944*/
2945/* Pinned tabs */
2946
2947/*
2948.tabbrowser-tab:-moz-any([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]),
2949.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
2950*/
2951.tabbrowser-tab:-moz-any([image], [pinned]):-moz-any([attention], [titlechanged]):not([visuallyselected="true"]) {
2952 background-color: #E7ADE7;
2953}
2954
2955.tab-label[attention]:not([selected="true"]) {
2956 font-weight: bold;
2957}
2958
2959.tabbrowser-tab[pinned][titlechanged]:not([visuallyselected="true"]):hover {
2960 background-color: #3333FF;
2961 color: #000000;
2962}
2963
2964/* Tab separators */
2965/*
2966.tabbrowser-tab::after,
2967.tabbrowser-tab::before {
2968 width: 1px;
2969 margin-inline-start: -1px;
2970 background-image: linear-gradient(transparent 5px,
2971 currentColor 5px,
2972 currentColor calc(100% - 4px),
2973 transparent calc(100% - 4px));
2974 opacity: 0.2;
2975}
2976
2977#TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::before,
2978#TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::after {
2979 opacity: 0.4;
2980}
2981*/
2982/* Also show separators beside the selected tab when dragging it. */
2983/*
2984#tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
2985.tabbrowser-tab:not([selected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
2986#tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([selected]):not([beforehovered]):not(:hover)::after {
2987 content: "";
2988 display: -moz-box;
2989}
2990*/
2991/* New tab button */
2992
2993.tabs-newtab-button {
2994 width: 28px;
2995 /* width: calc(36px + var(--tab-curve-width)); */
2996}
2997@media (min-resolution: 1.1dppx) {
2998 /* image preloading hack from like lowdpi styles */
2999 #tabbrowser-tabs::before {
3000 }
3001
3002 .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]),
3003 .tabs-newtab-button:hover {
3004 }
3005
3006 .tab-background-middle[selected=true] {
3007 }
3008
3009 .tab-background-start[selected=true]:-moz-locale-dir(ltr)::after,
3010 .tab-background-end[selected=true]:-moz-locale-dir(rtl)::after {
3011 }
3012
3013 .tab-background-end[selected=true]:-moz-locale-dir(ltr)::after,
3014 .tab-background-start[selected=true]:-moz-locale-dir(rtl)::after {
3015 }
3016
3017 .tab-icon-image {
3018 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon@2x.png");
3019 }
3020}
3021
3022/* All tabs menupopup */
3023
3024.alltabs-item[tabIsVisible]:not([_moz-menuactive="true"]) {
3025 background-color: #402800;
3026}
3027
3028.alltabs-endimage[soundplaying],
3029.alltabs-endimage[muted] {
3030 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio);
3031 filter: url(chrome://browser/skin/filters.svg#fill);
3032 fill: currentColor;
3033}
3034
3035.alltabs-endimage[muted] {
3036 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted);
3037}
3038
3039/* === END tabs.inc.css === */
3040
3041/* Tab DnD indicator */
3042.tab-drop-indicator {
3043 list-style-image: url("chrome://browser/skin/tabbrowser/tabDragIndicator.png");
3044 margin-bottom: -11px;
3045}
3046
3047/* Tab close button */
3048.tab-close-button {
3049 list-style-image: url("chrome://global/skin/icons/close-button.gif");
3050}
3051
3052.tab-close-button:hover,
3053.tab-close-button:hover[selected="true"] {
3054 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
3055}
3056
3057.tab-close-button:hover:active,
3058.tab-close-button:hover:active[selected="true"] {
3059 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
3060}
3061
3062/* Tab scrollbox arrow, tabstrip new tab and all-tabs buttons */
3063
3064.tabbrowser-arrowscrollbox > .scrollbutton-up,
3065.tabbrowser-arrowscrollbox > .scrollbutton-down {
3066 margin: 0;
3067 padding-top: 0;
3068 padding-bottom: 0;
3069 background-origin: border-box;
3070}
3071
3072#main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3073#main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3074.tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-lwtheme-brighttext,
3075.tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-lwtheme-brighttext {
3076 }
3077
3078.tabbrowser-arrowscrollbox > .scrollbutton-up[disabled],
3079.tabbrowser-arrowscrollbox > .scrollbutton-down[disabled] {
3080 }
3081
3082.tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(rtl),
3083.tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(ltr) {
3084/* transform: scaleX(-1);*/
3085}
3086
3087.tabbrowser-arrowscrollbox > .scrollbutton-down {
3088 transition: 1s background-color ease-out;
3089}
3090
3091.tabbrowser-arrowscrollbox > .scrollbutton-down[notifybgtab] {
3092 background-color: #008484;
3093}
3094
3095.tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]),
3096.tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]) {
3097/* border-width: 0 2px 0 0;
3098 border-style: solid;
3099 border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 fill;*/
3100}
3101
3102.tabs-newtab-button > .toolbarbutton-icon {
3103 margin-top: -1px;
3104 margin-bottom: -1px;
3105}
3106
3107.tabs-newtab-button,
3108#TabsToolbar > #new-tab-button,
3109#TabsToolbar > toolbarpaletteitem > #new-tab-button,
3110#TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
3111 list-style-image: url("chrome://browser/skin/tabbrowser/newtab.svg");
3112 -moz-image-region: auto;
3113}
3114
3115.tabs-newtab-button,
3116.tabs-newtab-button:hover,
3117#TabsToolbar > #new-tab-button,
3118#TabsToolbar > #new-tab-button:hover {
3119}
3120
3121#main-window[tabsintitlebar]:not([inFullscreen]) .tabs-newtab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3122#main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3123#main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3124.tabs-newtab-button:-moz-lwtheme-brighttext,
3125#TabsToolbar > #new-tab-button:-moz-lwtheme-brighttext,
3126#TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-lwtheme-brighttext {
3127}
3128
3129#TabsToolbar > #new-tab-button {
3130 width: 26px;
3131}
3132
3133#alltabs-button {
3134 list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
3135}
3136
3137#alltabs-button:hover,
3138#alltabs-button:hover:active,
3139#alltabs-button[open="true"] {
3140 list-style-image: url("chrome://global/skin/arrow/arrow-down-hover.gif");
3141}
3142
3143#main-window[tabsintitlebar]:not([inFullscreen]) #alltabs-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3144#alltabs-button:-moz-lwtheme-brighttext {
3145}
3146
3147#alltabs-button > .toolbarbutton-icon {
3148/* margin: 0 2px;*/
3149}
3150
3151#alltabs-button > .toolbarbutton-menu-dropmarker {
3152 display: none;
3153}
3154
3155/* All tabs menupopup */
3156.alltabs-item > .menu-iconic-left > .menu-iconic-icon {
3157 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
3158 -moz-image-region: auto;
3159}
3160
3161.alltabs-item[selected="true"] {
3162 font-weight: bold;
3163}
3164
3165.alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
3166 list-style-image: url("chrome://global/skin/icons/loading.png");
3167}
3168
3169@media (min-resolution: 1.1dppx) {
3170 .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
3171 list-style-image: url("chrome://global/skin/icons/loading@2x.png");
3172 }
3173}
3174
3175toolbarbutton.chevron {
3176 list-style-image: url("chrome://global/skin/toolbar/chevron.gif") !important;
3177}
3178
3179toolbarbutton.chevron:hover {
3180 list-style-image: url("chrome://global/skin/toolbar/chevron-hover.gif") !important;
3181}
3182/*
3183toolbar[brighttext] toolbarbutton.chevron {
3184 list-style-image: url("chrome://global/skin/toolbar/chevron-inverted.png") !important;
3185}
3186*/
3187toolbarbutton.chevron:-moz-locale-dir(rtl) > .toolbarbutton-icon,
3188toolbarbutton.chevron:-moz-locale-dir(rtl):hover > .toolbarbutton-icon {
3189 transform: scaleX(-1);
3190}
3191
3192toolbarbutton.chevron > .toolbarbutton-text,
3193toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
3194 display: none;
3195}
3196
3197toolbarbutton.chevron > .toolbarbutton-icon {
3198 margin: 0;
3199}
3200
3201#sidebar-throbber[loading="true"] {
3202 list-style-image: url("chrome://global/skin/icons/loading.png");
3203 margin-inline-end: 4px;
3204}
3205
3206@media (min-resolution: 1.1dppx) {
3207 #sidebar-throbber[loading="true"] {
3208 list-style-image: url("chrome://global/skin/icons/loading@2x.png");
3209 width: 16px;
3210 }
3211}
3212
3213/* Bookmarks toolbar */
3214#PlacesToolbarDropIndicator {
3215 list-style-image: url("chrome://communicator/skin/bookmarks/toolbarDropMarker.png");
3216}
3217
3218toolbarbutton.bookmark-item[dragover="true"][open="true"] {
3219 background-color: #008484 !important;
3220 color: #FFCF00 !important;
3221}
3222
3223/* rules for menupopup drop indicators */
3224.menupopup-drop-indicator-bar {
3225 position: relative;
3226 /* these two margins must together compensate the indicator's height */
3227 margin-top: -1px;
3228 margin-bottom: -1px;
3229}
3230
3231.menupopup-drop-indicator {
3232 list-style-image: none;
3233 height: 2px;
3234 margin-inline-end: -4em;
3235 background-color: #008484;
3236}
3237
3238/* === BEGIN notification-icons.inc.css === */
3239
3240#notification-popup-box {
3241 border-radius: 3px 0 0 3px;
3242 padding: 5px 0px;
3243 margin: -5px 0px;
3244 margin-inline-end: -5px;
3245 padding-inline-end: 5px;
3246}
3247
3248.notification-anchor-icon,
3249#blocked-permissions-container > .blocked-permission-icon {
3250 width: 16px;
3251 height: 16px;
3252 margin-inline-start: 2px;
3253}
3254
3255/* This class can be used alone or in combination with the class defining the
3256 type of icon displayed. This rule must be defined before the others in order
3257 for its list-style-image to be overridden. */
3258.notification-anchor-icon {
3259 list-style-image: url("chrome://global/skin/icons/information-16.png");
3260}
3261
3262.notification-anchor-icon:-moz-focusring {
3263 outline: 1px dotted #008484;
3264}
3265
3266@media (min-resolution: 1.1dppx) {
3267 .notification-anchor-icon {
3268 list-style-image: url(chrome://global/skin/icons/information-32.png);
3269 }
3270}
3271
3272.popup-notification-icon {
3273 width: 64px;
3274 height: 64px;
3275 margin-inline-end: 10px;
3276}
3277
3278.notification-anchor-icon:not(.plugin-blocked),
3279#blocked-permissions-container > .blocked-permission-icon {
3280 filter: url(chrome://global/skin/filters.svg#fill);
3281 fill: currentColor;
3282}
3283
3284.notification-anchor-icon:not(.plugin-blocked):not(:hover) {
3285}
3286
3287/* INDIVIDUAL NOTIFICATIONS */
3288
3289.popup-notification-icon[popupid="web-notifications"],
3290.desktop-notification-icon {
3291 list-style-image: url(chrome://browser/skin/notification-icons.svg#desktop-notification);
3292}
3293
3294.desktop-notification-icon.blocked-permission-icon {
3295 list-style-image: url(chrome://browser/skin/notification-icons.svg#desktop-notification-blocked);
3296}
3297
3298.geo-icon {
3299 list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows);
3300}
3301
3302.geo-icon.blocked-permission-icon {
3303 list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows-blocked);
3304}
3305
3306.popup-notification-icon[popupid="geolocation"] {
3307 list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows-detailed);
3308}
3309
3310.popup-notification-icon[popupid="indexedDB-permissions-prompt"],
3311.indexedDB-icon {
3312 list-style-image: url(chrome://browser/skin/notification-icons.svg#indexedDB);
3313}
3314
3315.indexedDB-icon.blocked-permission-icon {
3316 list-style-image: url(chrome://browser/skin/notification-icons.svg#indexedDB-blocked);
3317}
3318
3319.login-icon {
3320 list-style-image: url(chrome://browser/skin/notification-icons.svg#login);
3321}
3322
3323.popup-notification-icon[popupid="password"] {
3324 list-style-image: url(chrome://browser/skin/notification-icons.svg#login-detailed);
3325}
3326
3327.camera-icon,
3328.popup-notification-icon[popupid="webRTC-shareDevices"] {
3329 list-style-image: url(chrome://browser/skin/notification-icons.svg#camera);
3330}
3331
3332.camera-icon.in-use {
3333 list-style-image: url(chrome://browser/skin/notification-icons.svg#camera-sharing);
3334}
3335
3336.camera-icon.blocked-permission-icon {
3337 list-style-image: url(chrome://browser/skin/notification-icons.svg#camera-blocked);
3338}
3339
3340.microphone-icon {
3341 list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone);
3342}
3343
3344.microphone-icon.in-use {
3345 list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-sharing);
3346}
3347
3348.microphone-icon.blocked-permission-icon {
3349 list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-blocked);
3350}
3351
3352.popup-notification-icon[popupid="webRTC-shareMicrophone"] {
3353 list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-detailed);
3354}
3355
3356.popup-notification-icon[popupid="webRTC-shareScreen"],
3357.screen-icon {
3358 list-style-image: url(chrome://browser/skin/notification-icons.svg#screen);
3359}
3360
3361.screen-icon.in-use {
3362 list-style-image: url(chrome://browser/skin/notification-icons.svg#screen-sharing);
3363}
3364
3365.screen-icon.blocked-permission-icon {
3366 list-style-image: url(chrome://browser/skin/notification-icons.svg#screen-blocked);
3367}
3368
3369/* This icon has a block sign in it, so we don't need a blocked version. */
3370.popup-icon {
3371 list-style-image: url("chrome://browser/skin/notification-icons.svg#popup");
3372}
3373
3374/* EME */
3375
3376.popup-notification-icon[popupid="drmContentPlaying"],
3377.drm-icon {
3378 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
3379}
3380
3381.drm-icon:hover:active {
3382 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains-pressed");
3383}
3384
3385#eme-notification-icon[firstplay=true] {
3386 animation: emeTeachingMoment 0.2s linear 0s 5 normal;
3387}
3388
3389@keyframes emeTeachingMoment {
3390 0% {transform: translateX(0); }
3391 25% {transform: translateX(3px) }
3392 75% {transform: translateX(-3px) }
3393 100% { transform: translateX(0); }
3394}
3395
3396/* INSTALL ADDONS */
3397
3398.install-icon {
3399 list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#default);
3400}
3401
3402.popup-notification-icon[popupid="xpinstall-disabled"],
3403.popup-notification-icon[popupid="addon-install-blocked"],
3404.popup-notification-icon[popupid="addon-install-origin-blocked"] {
3405 list-style-image: url(chrome://browser/skin/addons/addon-install-blocked.svg);
3406}
3407
3408.popup-notification-icon[popupid="addon-progress"] {
3409 list-style-image: url(chrome://browser/skin/addons/addon-install-downloading.svg);
3410}
3411
3412.popup-notification-icon[popupid="addon-install-failed"] {
3413 list-style-image: url(chrome://browser/skin/addons/addon-install-error.svg);
3414}
3415
3416.popup-notification-icon[popupid="addon-install-confirmation"] {
3417 list-style-image: url(chrome://browser/skin/addons/addon-install-confirm.svg);
3418}
3419
3420#addon-install-confirmation-notification[warning] .popup-notification-icon[popupid="addon-install-confirmation"] {
3421 list-style-image: url(chrome://browser/skin/addons/addon-install-warning.svg);
3422}
3423
3424.popup-notification-icon[popupid="addon-install-complete"] {
3425 list-style-image: url(chrome://browser/skin/addons/addon-install-installed.svg);
3426}
3427
3428.popup-notification-icon[popupid="addon-install-restart"] {
3429 list-style-image: url(chrome://browser/skin/addons/addon-install-restart.svg);
3430}
3431
3432.popup-notification-icon[popupid="click-to-play-plugins"] {
3433 list-style-image: url(chrome://mozapps/skin/plugins/pluginBlocked-64.png);
3434}
3435
3436/* OFFLINE APPS */
3437
3438.popup-notification-icon[popupid*="offline-app-requested"],
3439.popup-notification-icon[popupid="offline-app-usage"] {
3440 list-style-image: url(chrome://global/skin/icons/question-64.png);
3441}
3442
3443/* PLUGINS */
3444
3445.plugin-icon {
3446 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin);
3447}
3448
3449.plugin-icon.plugin-blocked {
3450 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked);
3451}
3452
3453#notification-popup-box[hidden] {
3454 /* Override display:none to make the pluginBlockedNotification animation work
3455 when showing the notification repeatedly. */
3456 display: -moz-box;
3457 visibility: collapse;
3458}
3459
3460#plugins-notification-icon.plugin-blocked[showing] {
3461 animation: pluginBlockedNotification 500ms ease 0s 5 alternate both;
3462}
3463
3464@keyframes pluginBlockedNotification {
3465 from {
3466 opacity: 0;
3467 }
3468 to {
3469 opacity: 1;
3470 }
3471}
3472
3473/* SOCIAL API */
3474
3475.popup-notification-icon[popupid="servicesInstall"] {
3476 list-style-image: url(chrome://browser/skin/social/services-64.png);
3477}
3478
3479.service-icon {
3480 list-style-image: url(chrome://browser/skin/social/services-16.png);
3481}
3482
3483/* TRANSLATION */
3484
3485.translation-icon {
3486 list-style-image: url(chrome://browser/skin/translation-16.png);
3487 -moz-image-region: rect(0px, 16px, 16px, 0px);
3488}
3489
3490.translation-icon.in-use {
3491 -moz-image-region: rect(0px, 32px, 16px, 16px);
3492}
3493
3494/* === END notification-icons.inc.css === */
3495
3496.popup-notification-body[popupid="addon-progress"],
3497.popup-notification-body[popupid="addon-install-confirmation"] {
3498 width: 28em;
3499 max-width: 28em;
3500}
3501
3502/* Translation infobar */
3503
3504/* === BEGIN infobar.inc.css === */
3505
3506notification[value="translation"] .messageImage {
3507 list-style-image: url("chrome://browser/skin/translation-16.png");
3508 -moz-image-region: rect(0, 32px, 16px, 16px);
3509}
3510
3511@media (min-resolution: 1.25dppx) {
3512 notification[value="translation"] .messageImage {
3513 list-style-image: url("chrome://browser/skin/translation-16@2x.png");
3514 -moz-image-region: rect(0, 64px, 32px, 32px);
3515 }
3516}
3517
3518notification[value="translation"][state="translating"] .messageImage {
3519 list-style-image: url("chrome://browser/skin/translating-16.png");
3520 -moz-image-region: auto;
3521}
3522
3523@media (min-resolution: 1.25dppx) {
3524 notification[value="translation"][state="translating"] .messageImage {
3525 list-style-image: url("chrome://browser/skin/translating-16@2x.png");
3526 }
3527}
3528
3529notification[value="translation"] hbox[anonid="details"] {
3530 overflow: hidden;
3531}
3532
3533notification[value="translation"] button,
3534notification[value="translation"] menulist {
3535 min-width: 0;
3536}
3537
3538notification[value="translation"] menulist > .menulist-dropmarker {
3539}
3540
3541.translation-menupopup arrowscrollbox {
3542 padding-bottom: 0;
3543}
3544
3545.translation-attribution {
3546 cursor: pointer;
3547 -moz-box-align: end;
3548 font-size: small;
3549}
3550
3551.translation-attribution > label {
3552 margin-bottom: 0;
3553}
3554
3555.translation-attribution > image {
3556 width: 70px;
3557}
3558
3559.translation-welcome-panel {
3560 width: 305px;
3561}
3562
3563.translation-welcome-logo {
3564 height: 32px;
3565 width: 32px;
3566 list-style-image: url(chrome://browser/skin/translation-16@2x.png);
3567 -moz-image-region: rect(0, 64px, 32px, 32px);
3568}
3569
3570.translation-welcome-content {
3571 margin-inline-start: 16px;
3572}
3573
3574.translation-welcome-headline {
3575 font-size: larger;
3576 font-weight: bold;
3577}
3578
3579.translation-welcome-body {
3580 padding: 1em 0;
3581 margin: 0 0;
3582}
3583
3584/* === END infobar.inc.css === */
3585
3586notification[value="translation"] {
3587 min-height: 40px;
3588}
3589
3590.translation-menupopup {
3591 -moz-appearance: none;
3592}
3593
3594/* Bookmarks roots menu-items */
3595#subscribeToPageMenuitem:not([disabled]),
3596#subscribeToPageMenupopup {
3597 list-style-image: url("chrome://browser/skin/feeds/feedIcon16.png");
3598}
3599
3600#bookmarksToolbarFolderMenu,
3601#BMB_bookmarksToolbar,
3602#panelMenu_bookmarksToolbar {
3603 list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png");
3604 -moz-image-region: auto;
3605}
3606
3607#BMB_unsortedBookmarks,
3608#panelMenu_unsortedBookmarks {
3609 list-style-image: url("chrome://communicator/skin/bookmarks/unsortedBookmarks.png");
3610 -moz-image-region: auto;
3611}
3612
3613/* Status panel */
3614
3615.statuspanel-label {
3616 margin: 0;
3617 padding: 2px 4px;
3618 background: #404000;
3619 border: 1px none #9C9CFF;
3620 border-top-style: solid;
3621 color: #FF9F00;
3622 text-shadow: none;
3623}
3624
3625.statuspanel-label:-moz-locale-dir(ltr):not([mirror]),
3626.statuspanel-label:-moz-locale-dir(rtl)[mirror] {
3627 border-right-style: solid;
3628 border-top-right-radius: .3em;
3629 margin-right: 1em;
3630}
3631
3632.statuspanel-label:-moz-locale-dir(rtl):not([mirror]),
3633.statuspanel-label:-moz-locale-dir(ltr)[mirror] {
3634 border-left-style: solid;
3635 border-top-left-radius: .3em;
3636 margin-left: 1em;
3637}
3638
3639/* HACK to abolish devily color on main content */
3640
3641#content {
3642 background-color: transparent !important;
3643}
3644
3645/* === BEGIN fullscreen/warning.inc.css === */
3646
3647html|*.pointerlockfswarning {
3648 align-items: center;
3649 background: rgba(0, 0, 0, 0.9);
3650 border: 2px solid #A09090;
3651 box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
3652 border-radius: 8px;
3653 padding: 24px 16px;
3654 font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
3655}
3656
3657html|*.pointerlockfswarning::before {
3658 margin: 0;
3659 width: 24px; height: 24px;
3660}
3661
3662html|*.pointerlockfswarning[data-identity="verifiedIdentity"]::before,
3663html|*.pointerlockfswarning[data-identity="verifiedDomain"]::before {
3664 content: url("chrome://browser/skin/fullscreen/secure.svg");
3665}
3666
3667html|*.pointerlockfswarning[data-identity="unknownIdentity"]::before {
3668 content: url("chrome://browser/skin/fullscreen/insecure.svg");
3669}
3670
3671html|*.pointerlockfswarning-domain-text,
3672html|*.pointerlockfswarning-generic-text {
3673 font-size: 21px;
3674 font-weight: lighter;
3675 color: #A09090;
3676 margin: 0 16px;
3677}
3678
3679html|*.pointerlockfswarning-domain {
3680 font-weight: bold;
3681 margin: 0;
3682}
3683
3684html|*.pointerlockfswarning-exit-button {
3685 padding: 5px 30px;
3686 font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
3687 font-size: 14px;
3688 font-weight: lighter;
3689 margin: 0;
3690 box-sizing: content-box;
3691
3692 border-radius: 300px;
3693 border: none;
3694 background-color: #C09070;
3695 color: #000000;
3696}
3697
3698/* === END fullscreen/warning.inc.css === */
3699
3700/* === BEGIN ctrlTab.inc.css === */
3701
3702/* Ctrl-Tab */
3703
3704#ctrlTab-panel {
3705 -moz-appearance: none;
3706 background: rgba(0%,0%,0%,.7);
3707 color: #FF9F00;
3708 border-style: none;
3709 padding: 20px 10px 10px;
3710 font-weight: bold;
3711}
3712
3713.ctrlTab-favicon[src] {
3714 background-color: #000000;
3715 width: 20px;
3716 height: 20px;
3717 padding: 2px;
3718}
3719
3720.ctrlTab-preview-inner > .tabPreview-canvas {
3721/* box-shadow: 1px 1px 2px hsl(0,0%,12%);*/
3722}
3723
3724.ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas {
3725 margin-bottom: 2px;
3726}
3727
3728.ctrlTab-preview-inner {
3729 padding: 8px;
3730 border: 2px solid transparent;
3731 border-radius: .5em;
3732}
3733
3734.ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner {
3735 margin: -10px -10px 0;
3736}
3737
3738#ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner {
3739 background-color: #000000;
3740}
3741
3742.ctrlTab-preview:focus > * > .ctrlTab-preview-inner {
3743 color: #A09090;
3744 background-color: #000000;
3745 text-shadow: none;
3746 border-color: #9C9CFF;
3747}
3748
3749#ctrlTab-showAll {
3750 margin-top: .5em;
3751}
3752
3753/* === END ctrlTab.inc.css === */
3754
3755/* === BEGIN commandline.inc.css === */
3756
3757/* NOTE: THESE NEED TO STAY IN SYNC WITH LIGHT-THEME.CSS AND DARK-THEME.CSS.
3758 We are copy/pasting variables from light-theme and dark-theme,
3759 since they aren't loaded in this context (within browser.css). */
3760:root #developer-toolbar {
3761 --gcli-background-color: #000000; /* --theme-toolbar-background */
3762 --gcli-input-background: rgba(0, 0, 0, .75); /* --theme-tab-toolbar-background */
3763 --gcli-input-focused-background: #000000; /* --theme-sidebar-background */
3764 --gcli-input-color: #FF9F00; /* --theme-body-color-alt */
3765 --gcli-border-color: #9C9CFF; /* --theme-splitter-color */
3766 --selection-background: #008484; /* --theme-selection-background */
3767 --selection-color: #000000; /* --theme-selection-color */
3768 --command-line-image: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme); /* --theme-command-line-image */
3769 --command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme-focus); /* --theme-command-line-image-focus */
3770}
3771
3772/* Developer toolbar */
3773
3774#developer-toolbar {
3775 border-top: 3px solid var(--gcli-background-color);
3776 border-bottom: none;
3777}
3778
3779#developer-toolbar .toolbar-holder {
3780 background-color: #8050B0;
3781 color: #FFCF00;
3782}
3783
3784#developer-toolbar .toolbar-holder {
3785 background-color: #8050B0;
3786 color: #FFCF00;
3787}
3788
3789#developer-toolbar .toolbar-startcap,
3790#developer-toolbar .toolbar-endcap{
3791 background-color: #6000CF;
3792}
3793
3794#developer-toolbar {
3795/* padding: 0;
3796 min-height: 32px; */
3797}
3798
3799#developer-toolbar > toolbarbutton {
3800/* border: none;
3801 background-color: transparent;
3802 margin: 0;
3803 padding: 0 10px;
3804 width: 32px; */
3805}
3806
3807.developer-toolbar-button > image {
3808/* margin: auto 10px; */
3809}
3810
3811#developer-toolbar-toolbox-button > label {
3812 display: none;
3813}
3814
3815.developer-toolbar-button > .toolbarbutton-icon {
3816 width: 16px;
3817 height: 16px;
3818}
3819
3820#developer-toolbar-toolbox-button {
3821 list-style-image: url("chrome://devtools/skin/images/toggle-tools.png");
3822 -moz-image-region: rect(0px, 16px, 16px, 0px);
3823}
3824
3825#developer-toolbar-toolbox-button > label {
3826 display: none;
3827}
3828
3829#developer-toolbar-toolbox-button:hover,
3830#developer-toolbar-toolbox-button:hover:active,
3831#developer-toolbar-toolbox-button[checked=true] {
3832 -moz-image-region: rect(0px, 32px, 16px, 16px);
3833}
3834
3835@media (min-resolution: 2dppx) {
3836 #developer-toolbar-toolbox-button {
3837 list-style-image: url("chrome://devtools/skin/images/toggle-tools@2x.png");
3838 -moz-image-region: rect(0px, 32px, 32px, 0px);
3839 }
3840
3841 #developer-toolbar-toolbox-button:hover,
3842 #developer-toolbar-toolbox-button:hover:active,
3843 #developer-toolbar-toolbox-button[checked=true] {
3844 -moz-image-region: rect(0px, 64px, 32px, 32px);
3845 }
3846}
3847
3848/* GCLI */
3849
3850html|*#gcli-tooltip-frame,
3851html|*#gcli-output-frame {
3852 padding: 0;
3853 border-width: 0;
3854 background-color: transparent;
3855}
3856
3857#gcli-output,
3858#gcli-tooltip {
3859 border-width: 0;
3860 background-color: transparent;
3861}
3862
3863.gclitoolbar-input-node,
3864.gclitoolbar-complete-node {
3865 margin: 1px 3px;
3866 -moz-box-align: center;
3867 padding-top: 0;
3868 padding-bottom: 0;
3869 padding-right: 8px;
3870 background-color: transparent;
3871}
3872
3873.gclitoolbar-input-node {
3874/* line-height: 32px;
3875 outline-style: none; */
3876 background-repeat: no-repeat;
3877 background-color: var(--gcli-input-background);
3878}
3879
3880.gclitoolbar-input-node[focused="true"] {
3881 background-color: var(--gcli-input-focused-background);
3882}
3883
3884.gclitoolbar-input-node::before {
3885 content: "";
3886 display: inline-block;
3887 -moz-box-ordinal-group: 0;
3888 width: 16px;
3889 height: 16px;
3890 margin: 0 2px;
3891 background-image: var(--command-line-image);
3892}
3893
3894.gclitoolbar-input-node[focused="true"]::before {
3895 background-image: var(--command-line-image-focus);
3896}
3897
3898.gclitoolbar-input-node:not([focused="true"]) {
3899 border-color: transparent;
3900}
3901
3902.gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection {
3903 background-color: var(--selection-background);
3904 color: var(--selection-color);
3905}
3906
3907.gclitoolbar-complete-node {
3908 padding-left: 21px;
3909 background-color: transparent;
3910 color: transparent;
3911 z-index: 100;
3912 pointer-events: none;
3913}
3914
3915.gcli-in-incomplete,
3916.gcli-in-error,
3917.gcli-in-ontab,
3918.gcli-in-todo,
3919.gcli-in-closebrace,
3920.gcli-in-param,
3921.gcli-in-valid {
3922 margin: 0;
3923 padding: 0;
3924}
3925
3926.gcli-in-incomplete {
3927 border-bottom: 2px dotted #8050B0;
3928}
3929
3930.gcli-in-error {
3931 border-bottom: 2px dotted #FF0000;
3932}
3933
3934.gcli-in-ontab {
3935 color: #9C9CFF;
3936}
3937
3938.gcli-in-todo {
3939 color: #795900;
3940}
3941
3942.gcli-in-closebrace {
3943 color: #8050B0;
3944}
3945
3946/* === END commandline.inc.css === */
3947
3948/* === BEGIN responsivedesign.inc.css === */
3949
3950/* Responsive Mode */
3951
3952.browserContainer[responsivemode] {
3953 background-color: #221500;
3954 padding: 0 20px 20px 20px;
3955}
3956
3957.browserStack[responsivemode] {
3958 box-shadow: 0 0 7px #9C9CFF;
3959}
3960
3961.devtools-responsiveui-toolbar {
3962 background: transparent;
3963 /* text color is textColor from dark theme, since no theme is applied to
3964 * the responsive toolbar.
3965 */
3966 color: #FF9F00;
3967 margin: 10px 0;
3968 padding: 0;
3969 box-shadow: none;
3970 border-bottom-width: 0;
3971}
3972
3973.devtools-responsiveui-textinput {
3974/* -moz-appearance: none;
3975 background: #333;
3976 color: #fff;
3977 border: 1px solid #111;
3978 border-radius: 2px;
3979 padding: 0 5px;*/
3980 width: 200px;
3981 margin: 0;
3982}
3983
3984.devtools-responsiveui-textinput[attention] {
3985/* border-color: #38ace6;
3986 background: rgba(56,172,230,0.4);*/
3987}
3988
3989.devtools-responsiveui-menulist,
3990.devtools-responsiveui-toolbarbutton {
3991 -moz-box-align: center;
3992 min-width: 32px;
3993/* min-height: 22px;*/
3994/* margin: 0 3px; */
3995}
3996
3997.devtools-responsiveui-menulist .menulist-editable-box {
3998 background-color: transparent;
3999}
4000
4001.devtools-responsiveui-menulist html|*.menulist-editable-input {
4002 color: inherit;
4003 text-align: center;
4004}
4005
4006.devtools-responsiveui-menulist html|*.menulist-editable-input::-moz-selection {
4007/* background: hsla(212,7%,57%,.35);*/
4008}
4009
4010.devtools-responsiveui-toolbarbutton > .toolbarbutton-icon {
4011 width: 16px;
4012 height: 16px;
4013}
4014
4015.devtools-responsiveui-toolbarbutton > .toolbarbutton-menubutton-button {
4016 -moz-box-orient: horizontal;
4017}
4018
4019.devtools-responsiveui-menulist:-moz-focusring,
4020.devtools-responsiveui-toolbarbutton:-moz-focusring {
4021/* outline: 1px dotted hsla(210,30%,85%,0.7);
4022 outline-offset: -4px;*/
4023}
4024
4025.devtools-responsiveui-toolbarbutton:not([label]) > .toolbarbutton-text {
4026 display: none;
4027}
4028
4029.devtools-responsiveui-toolbarbutton:not([checked=true]):hover:active {
4030/* border-color: hsla(210,8%,5%,.6);
4031 background: linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
4032 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); */
4033}
4034
4035.devtools-responsiveui-menulist[open=true],
4036.devtools-responsiveui-toolbarbutton[open=true],
4037.devtools-responsiveui-toolbarbutton[checked=true] {
4038/* border-color: hsla(210,8%,5%,.6) !important;
4039 background: linear-gradient(hsla(220,6%,10%,.6), hsla(210,11%,18%,.45) 75%, hsla(210,11%,30%,.4));
4040 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); */
4041}
4042
4043.devtools-responsiveui-toolbarbutton[checked=true] {
4044/* color: hsl(208,100%,60%); */
4045}
4046
4047.devtools-responsiveui-toolbarbutton[checked=true]:hover {
4048/* background-color: transparent !important;*/
4049}
4050
4051.devtools-responsiveui-toolbarbutton[checked=true]:hover:active {
4052/* background-color: hsla(210,8%,5%,.2) !important;*/
4053}
4054
4055.devtools-responsiveui-menulist > .menulist-label-box {
4056 text-align: center;
4057}
4058
4059.devtools-responsiveui-menulist > .menulist-dropmarker {
4060/* display: -moz-box;
4061 background-color: transparent;
4062 list-style-image: url("chrome://devtools/skin/dropmarker.svg");
4063 -moz-box-align: center;
4064 border-width: 0;
4065 min-width: 16px;*/
4066}
4067
4068.devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
4069/* color: inherit;
4070 border-width: 0;
4071 border-inline-end: 1px solid hsla(210,8%,5%,.45);
4072 box-shadow: -1px 0 0 hsla(210,16%,76%,.15) inset, 1px 0 0 hsla(210,16%,76%,.15);*/
4073}
4074
4075.devtools-responsiveui-toolbarbutton[type=menu-button]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button {
4076/* box-shadow: 1px 0 0 hsla(210,16%,76%,.15) inset, -1px 0 0 hsla(210,16%,76%,.15);*/
4077}
4078
4079.devtools-responsiveui-toolbarbutton[type=menu-button] {
4080/* padding: 0 1px;*/
4081 -moz-box-align: stretch;
4082}
4083
4084.devtools-responsiveui-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
4085.devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
4086/* list-style-image: url("chrome://devtools/skin/dropmarker.svg");
4087 -moz-box-align: center;
4088 padding: 0 3px;*/
4089}
4090
4091.devtools-responsiveui-toolbar:-moz-locale-dir(ltr) > *:first-child,
4092.devtools-responsiveui-toolbar:-moz-locale-dir(rtl) > *:last-child {
4093 margin-left: 3px;
4094}
4095
4096.devtools-responsiveui-close {
4097 list-style-image: url("chrome://devtools/skin/close.svg");
4098}
4099
4100.devtools-responsiveui-close:hover {
4101 filter: url(chrome://devtools/skin/images/filters.svg#checked-icon-state);
4102}
4103
4104.devtools-responsiveui-rotate {
4105 list-style-image: url("chrome://devtools/skin/images/responsiveui-rotate.png");
4106 -moz-image-region: rect(0px,16px,16px,0px);
4107}
4108
4109.devtools-responsiveui-rotate:hover {
4110 -moz-image-region: rect(0px,32px,16px,16px);
4111}
4112
4113@media (min-resolution: 2dppx) {
4114 .devtools-responsiveui-rotate {
4115 list-style-image: url("chrome://devtools/skin/images/responsiveui-rotate@2x.png");
4116 }
4117
4118 .devtools-responsiveui-rotate:hover {
4119 -moz-image-region: rect(0px,64px,32px,32px);
4120 }
4121}
4122
4123.devtools-responsiveui-touch {
4124 list-style-image: url("chrome://devtools/skin/images/responsiveui-touch.png");
4125 -moz-image-region: rect(0px,16px,16px,0px);
4126}
4127
4128.devtools-responsiveui-touch:hover,
4129.devtools-responsiveui-touch[checked],
4130.devtools-responsiveui-touch[checked]:hover {
4131 -moz-image-region: rect(0px,32px,16px,16px);
4132}
4133
4134@media (min-resolution: 2dppx) {
4135 .devtools-responsiveui-touch {
4136 list-style-image: url("chrome://devtools/skin/images/responsiveui-touch@2x.png");
4137 -moz-image-region: rect(0px,32px,32px,0px);
4138 }
4139
4140 .devtools-responsiveui-touch:hover,
4141 .devtools-responsiveui-touch[checked],
4142 .devtools-responsiveui-touch[checked]:hover {
4143 -moz-image-region: rect(0px,64px,32px,32px);
4144 }
4145}
4146
4147.devtools-responsiveui-screenshot {
4148 list-style-image: url("chrome://devtools/skin/images/responsiveui-screenshot.png");
4149 -moz-image-region: rect(0px,16px,16px,0px);
4150}
4151
4152.devtools-responsiveui-screenshot:hover {
4153 -moz-image-region: rect(0px,32px,16px,16px);
4154}
4155
4156@media (min-resolution: 2dppx) {
4157 .devtools-responsiveui-screenshot {
4158 list-style-image: url("chrome://devtools/skin/images/responsiveui-screenshot@2x.png");
4159 }
4160
4161 .devtools-responsiveui-screenshot:hover {
4162 -moz-image-region: rect(0px,64px,32px,32px);
4163 }
4164}
4165
4166.devtools-responsiveui-resizebarV {
4167 width: 7px;
4168 height: 24px;
4169 cursor: ew-resize;
4170 transform: translate(12px, -12px);
4171 background-size: cover;
4172 background-image: url("chrome://devtools/skin/images/responsive-vertical-resizer.png");
4173}
4174
4175.devtools-responsiveui-resizebarH {
4176 width: 24px;
4177 height: 7px;
4178 cursor: ns-resize;
4179 transform: translate(-12px, 12px);
4180 background-size: cover;
4181 background-image: url("chrome://devtools/skin/images/responsive-horizontal-resizer.png");
4182}
4183
4184.devtools-responsiveui-resizehandle {
4185 width: 16px;
4186 height: 16px;
4187 cursor: se-resize;
4188 transform: translate(12px, 12px);
4189 background-size: cover;
4190 background-image: url("chrome://devtools/skin/images/responsive-se-resizer.png");
4191}
4192
4193/* FxOS custom mode with additional buttons and phone look'n feel */
4194
4195/* Hide devtools manual resizer */
4196.browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizehandle,
4197.browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarH,
4198.browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarV {
4199 display: none;
4200}
4201
4202/* Gives responsive mode a phone look'n feel */
4203.browserStack[responsivemode].fxos-mode {
4204 padding: 60px 15px 0;
4205
4206 border-radius: 25px / 20px;
4207 border-bottom-left-radius: 0;
4208 border-bottom-right-radius: 0;
4209 border: 1px solid #FFFFFF;
4210 border-bottom-width: 0;
4211
4212 background-color: #353535;
4213
4214 box-shadow: 0 3px 0.7px 1px #777777, 0 5px rgba(0, 0, 0, 0.4) inset;
4215
4216 background-image: linear-gradient(to right, #111 11%, #333 56%);
4217 min-width: 320px;
4218}
4219
4220.devtools-responsiveui-hardware-buttons {
4221 -moz-appearance: none;
4222 padding: 20px;
4223
4224 border: 1px solid #FFFFFF;
4225 border-bottom-left-radius: 25px;
4226 border-bottom-right-radius: 25px;
4227 border-top-width: 0;
4228
4229 box-shadow: 0 3px 0.7px 1px #777777, 0 -7px rgba(0, 0, 0, 0.4) inset;
4230
4231 background-image: linear-gradient(to right, #111 11%, #333 56%);
4232}
4233
4234.devtools-responsiveui-home-button {
4235 -moz-user-focus: ignore;
4236 width: 40px;
4237 height: 30px;
4238 list-style-image: url("chrome://devtools/skin/images/responsiveui-home.png");
4239}
4240
4241.devtools-responsiveui-sleep-button {
4242 -moz-user-focus: ignore;
4243 -moz-appearance: none;
4244 /* compensate browserStack top padding */
4245 margin-top: -67px;
4246 margin-right: 10px;
4247
4248 min-width: 10px;
4249 width: 50px;
4250 height: 5px;
4251
4252 border: 1px solid #444;
4253 border-top-right-radius: 12px;
4254 border-top-left-radius: 12px;
4255 border-bottom-color: transparent;
4256
4257 background-image: linear-gradient(to top, #111 11%, #333 56%);
4258}
4259
4260.devtools-responsiveui-sleep-button:hover:active {
4261 background-image: linear-gradient(to top, #aaa 11%, #ddd 56%);
4262}
4263
4264.devtools-responsiveui-volume-buttons {
4265 margin-left: -29px;
4266}
4267
4268.devtools-responsiveui-volume-up-button,
4269.devtools-responsiveui-volume-down-button {
4270 -moz-user-focus: ignore;
4271 -moz-appearance: none;
4272 border: 1px solid red;
4273 min-width: 8px;
4274 height: 40px;
4275
4276 border: 1px solid #444;
4277 border-right-color: transparent;
4278
4279 background-image: linear-gradient(to right, #111 11%, #333 56%);
4280}
4281
4282.devtools-responsiveui-volume-up-button:hover:active,
4283.devtools-responsiveui-volume-down-button:hover:active {
4284 background-image: linear-gradient(to right, #aaa 11%, #ddd 56%);
4285}
4286
4287.devtools-responsiveui-volume-up-button {
4288 border-top-left-radius: 12px;
4289}
4290
4291.devtools-responsiveui-volume-down-button {
4292 border-bottom-left-radius: 12px;
4293}
4294
4295@media (min-resolution: 2dppx) {
4296 .devtools-responsiveui-resizebarV {
4297 background-image: url("chrome://devtools/skin/images/responsive-vertical-resizer@2x.png");
4298 }
4299
4300 .devtools-responsiveui-resizebarH {
4301 background-image: url("chrome://devtools/skin/images/responsive-horizontal-resizer@2x.png");
4302 }
4303
4304 .devtools-responsiveui-resizehandle {
4305 background-image: url("chrome://devtools/skin/images/responsive-se-resizer@2x.png");
4306 }
4307}
4308
4309/* === END responsivedesign.inc.css === */
4310
4311/* === including indicator.css is done at the start of the file === */
4312
4313/* Error counter */
4314
4315#developer-toolbar-toolbox-button[error-count]:before {
4316 color: #000000;
4317 min-width: 16px;
4318 text-shadow: none;
4319 background-color: #FF0000;
4320 border-radius: 1px;
4321 margin-inline-end: 5px;
4322}
4323
4324/* === BEGIN plugin-doorhanger.inc.css === */
4325
4326/**
4327 * Plugin Doorhanger Styles
4328 */
4329
4330#notification-popup[popupid="click-to-play-plugins"] > .panel-arrowcontainer > .panel-arrowcontent {
4331 padding: 6px 1px 2px;
4332}
4333
4334.click-to-play-plugins-notification-center-box {
4335}
4336
4337.plugin-popupnotification-centeritem:nth-child(odd) {
4338/* background-color: rgba(0,0,0,0.1);*/
4339}
4340
4341.center-item-label {
4342 margin-bottom: 0;
4343 text-overflow: ellipsis;
4344}
4345
4346.center-item-warning-icon {
4347 background-image: url("chrome://mozapps/skin/extensions/alerticon-info-negative.svg");
4348 background-repeat: no-repeat;
4349 width: 16px;
4350 height: 15px;
4351 margin-inline-start: 6px;
4352}
4353
4354.click-to-play-plugins-notification-button-container {
4355}
4356
4357.click-to-play-popup-button {
4358 width: 50%;
4359}
4360
4361.click-to-play-plugins-notification-description-box {
4362 margin-left: 5px;
4363 margin-right: 5px;
4364 margin-top: 0;
4365 padding-bottom: 3px;
4366}
4367
4368.click-to-play-plugins-outer-description {
4369 margin-top: 1px;
4370}
4371
4372.click-to-play-plugins-notification-link,
4373.center-item-link {
4374 margin: 0;
4375}
4376
4377.messageImage[value="plugin-hidden"] {
4378 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin);
4379}
4380
4381/* Keep any changes to this style in sync with pluginProblem.css */
4382notification.pluginVulnerable {
4383}
4384
4385notification.pluginVulnerable .messageImage {
4386 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked);
4387}
4388
4389/* === END plugin-doorhanger.inc.css === */
4390
4391/* === BEGIN customizeMode.inc.css === */
4392
4393/* Customization mode */
4394
4395:root {
4396 --drag-drop-transition-duration: .3s;
4397}
4398
4399#main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox {
4400 margin-bottom: 1em;
4401}
4402
4403#main-window:-moz-any([customize-entering],[customize-entered]) #content-deck,
4404#main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
4405#main-window:-moz-any([customize-entering],[customize-entered]) #navigator-toolbox {
4406 margin-left: 1em;
4407 margin-right: 1em;
4408}
4409
4410#main-window:-moz-any([customize-entering],[customize-exiting]) #tab-view-deck {
4411 pointer-events: none;
4412}
4413
4414#main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
4415#PanelUI-contents > .panel-customization-placeholder {
4416 -moz-outline-radius: 2.5px;
4417 outline: 1px dashed transparent;
4418}
4419
4420#main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before {
4421 /* Prevent jumping of tabs when switching a window between inactive and active (bug 853415). */
4422 -moz-box-ordinal-group: 0;
4423 content: "";
4424 display: -moz-box;
4425 height: 100%;
4426 left: 0;
4427 outline-offset: -2px;
4428 pointer-events: none;
4429 position: absolute;
4430 top: 0;
4431 width: 100%;
4432}
4433
4434/* Shift the TabsToolbar outline up 2px since the #nav-bar is shifted up by 1px and the
4435 #TabsToolbar::after is a pixel higher to draw the bottom border of the tabstrip so this makes the
4436 offset from the bottom effectively the same as other targets (-2px). */
4437#main-window[customize-entered] #TabsToolbar.customization-target::before {
4438/* top: -2px;*/
4439}
4440
4441/* The parents of the outline pseudo-elements need to be positioned so that the outline is positioned relative to it. */
4442#main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover,
4443#main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)),
4444#main-window[customize-entered] #nav-bar-customization-target.customization-target {
4445 position: relative;
4446}
4447
4448/* Most target outlines are shown on hover and drag over but the panel menu uses
4449 placeholders instead. */
4450#main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover::before,
4451#main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
4452/* nav-bar and panel outlines are always shown */
4453#nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
4454 outline-color: currentColor;
4455}
4456
4457#nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
4458 transition: outline-color 250ms linear;
4459}
4460
4461#PanelUI-contents[showoutline=true] > .panel-customization-placeholder {
4462 transition: outline-color 250ms linear;
4463 outline-color: var(--panel-separator-color);
4464}
4465
4466#PanelUI-contents > .panel-customization-placeholder {
4467 cursor: auto;
4468 outline-offset: -5px;
4469}
4470
4471#main-window[customizing] .customization-target:not(#PanelUI-contents) {
4472 min-width: 100px;
4473/* padding-left: 10px;
4474 padding-right: 10px;*/
4475}
4476
4477#main-window:-moz-any([customize-entering],[customize-entered]) #tab-view-deck {
4478 padding: 0 2em 2em;
4479}
4480
4481#customization-container {
4482 background-color: #000000;
4483 color: #FF9F00;
4484}
4485
4486#customization-palette,
4487#customization-empty {
4488 padding: 0 15px 15px;
4489}
4490
4491#customization-header {
4492 font-size: 1.75em;
4493 line-height: 1.75em;
4494 color: #9C9CFF;
4495 font-weight: 200;
4496 margin: 25px 25px 12px;
4497 padding-bottom: 12px;
4498 border-bottom: 1px solid #A09090;
4499}
4500
4501#customization-panel-container {
4502 padding: 10px 10px 0px;
4503}
4504
4505#main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
4506#customization-footer {
4507 /*background-color: rgb(236,236,236);*/
4508}
4509
4510#customization-footer {
4511 border-top: 1px solid #9C9CFF;
4512 padding: 10px;
4513}
4514
4515.customizationmode-button {
4516 margin: 5px;
4517}
4518
4519.customizationmode-button:hover {
4520}
4521
4522.customizationmode-button > .box-inherit {
4523}
4524
4525.customizationmode-button > .button-icon {
4526}
4527
4528.customizationmode-button:not([type=menu]) > .button-text {
4529}
4530
4531.customizationmode-button > .button-menu-dropmarker {
4532}
4533
4534
4535
4536.customizationmode-button[checked] {
4537 background-color: #008484;
4538}
4539
4540.customizationmode-button[checked]:hover:not([disabled]),
4541.customizationmode-button:hover:not([disabled]) {
4542 background-color: #FFCF00;
4543}
4544
4545.customizationmode-button[checked]:hover:active:not([disabled]),
4546.customizationmode-button:hover:active:not([disabled]),
4547.customizationmode-button[open] {
4548 background-color: #FF9F00;
4549}
4550
4551.customizationmode-button[disabled="true"] {
4552}
4553
4554.customizationmode-button > .box-inherit > .box-inherit > .button-icon,
4555.customizationmode-button > .button-box > .button-icon {
4556/* height: 24px;*/
4557}
4558
4559#customization-titlebar-visibility-button {
4560 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle.png");
4561 -moz-image-region: rect(0, 16px, 16px, 0);
4562}
4563
4564#customization-titlebar-visibility-button:hover {
4565 -moz-image-region: rect(16px, 16px, 32px, 0);
4566}
4567
4568#customization-titlebar-visibility-button > .button-box {
4569 padding-top: 0;
4570 padding-bottom: 1px;
4571}
4572
4573#customization-titlebar-visibility-button:hover:active > .button-box {
4574 padding-top: 1px;
4575 padding-bottom: 0;
4576}
4577
4578#customization-lwtheme-button > .box-inherit > .box-inherit > .button-text,
4579#customization-titlebar-visibility-button > .button-box > .button-text {
4580 /* Sadly, button.css thinks its margins are perfect for everyone. */
4581 margin-inline-start: 5px !important;
4582}
4583
4584#customization-lwtheme-button > .box-inherit > .box-inherit > .button-icon {
4585 width: 20px;
4586 height: 20px;
4587 border-radius: 2px;
4588 background-size: contain;
4589}
4590
4591#customization-titlebar-visibility-button > .button-box > .button-icon {
4592 vertical-align: middle;
4593}
4594
4595#customization-titlebar-visibility-button[checked] {
4596 -moz-image-region: rect(0, 32px, 16px, 16px);
4597 background-color: #008484;
4598}
4599
4600#customization-titlebar-visibility-button[checked]:hover {
4601 -moz-image-region: rect(16px, 32px, 32px, 16px);
4602 background-color: #FFCF00;
4603}
4604
4605#customization-titlebar-visibility-button[checked]:hover:active {
4606 background-color: #FF9F00;
4607}
4608
4609@media (min-resolution: 1.1dppx) {
4610 #customization-titlebar-visibility-button {
4611 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle@2x.png");
4612 -moz-image-region: rect(0, 48px, 48px, 0);
4613 }
4614
4615 #customization-titlebar-visibility-button:hover {
4616 -moz-image-region: rect(48px, 48px, 96px, 0);
4617 }
4618
4619 #customization-titlebar-visibility-button[checked] {
4620 -moz-image-region: rect(0, 96px, 48px, 48px);
4621 }
4622
4623 #customization-titlebar-visibility-button[checked]:hover {
4624 -moz-image-region: rect(48px, 96px, 96px, 48px);
4625 }
4626}
4627
4628#main-window[customize-entered] #customization-panel-container {
4629 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
4630 background-position: left top;
4631 background-repeat: repeat;
4632 background-size: auto;
4633 background-attachment: fixed;
4634}
4635
4636toolbarpaletteitem[place="toolbar"] {
4637 transition: border-width 250ms ease-in-out;
4638}
4639
4640toolbarpaletteitem[mousedown] {
4641 outline: 1px solid #008484;
4642 cursor: -moz-grabbing;
4643 opacity: 0.8;
4644}
4645
4646.panel-customization-placeholder,
4647toolbarpaletteitem[place="palette"],
4648toolbarpaletteitem[place="panel"] {
4649 transition: transform var(--drag-drop-transition-duration) ease-in-out;
4650}
4651
4652#customization-palette {
4653 transition: opacity .3s ease-in-out;
4654 opacity: 0;
4655}
4656
4657#customization-palette[showing="true"] {
4658 opacity: 1;
4659}
4660
4661toolbarpaletteitem toolbarbutton[disabled] {
4662/* color: inherit !important;*/
4663}
4664
4665toolbarpaletteitem[notransition].panel-customization-placeholder,
4666toolbarpaletteitem[notransition][place="toolbar"],
4667toolbarpaletteitem[notransition][place="palette"],
4668toolbarpaletteitem[notransition][place="panel"] {
4669 transition: none;
4670}
4671
4672toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon,
4673toolbarpaletteitem > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon,
4674toolbarpaletteitem > toolbaritem.panel-wide-item,
4675toolbarpaletteitem > toolbarbutton[type="menu-button"] {
4676 transition: transform var(--drag-drop-transition-duration) cubic-bezier(.6, 2, .75, 1.5) !important;
4677}
4678
4679toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon,
4680toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon {
4681 transform: scale(1.3);
4682}
4683
4684toolbarpaletteitem[mousedown] > toolbaritem.panel-wide-item,
4685toolbarpaletteitem[mousedown] > toolbarbutton[type="menu-button"] {
4686 transform: scale(1.1);
4687}
4688
4689/* Override the toolkit styling for items being dragged over. */
4690toolbarpaletteitem[place="toolbar"] {
4691 border-left-width: 0;
4692 border-right-width: 0;
4693 margin-right: 0;
4694 margin-left: 0;
4695}
4696
4697#customization-palette:not([hidden]) {
4698 margin-bottom: 25px;
4699}
4700
4701toolbarpaletteitem[place="palette"]:-moz-focusring,
4702toolbarpaletteitem[place="panel"]:-moz-focusring,
4703toolbarpaletteitem[place="toolbar"]:-moz-focusring {
4704 outline-width: 0;
4705}
4706
4707toolbarpaletteitem[place="palette"]:not([mousedown="true"]):-moz-focusring,
4708toolbarpaletteitem[place="panel"]:not([mousedown="true"]):-moz-focusring,
4709toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring {
4710 /* Delay adding the focusring back until after the transform transition completes. */
4711 transition: outline-width .01s linear var(--drag-drop-transition-duration);
4712 outline: 1px dotted;
4713 -moz-outline-radius: 2.5px;
4714}
4715
4716toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring {
4717 outline-offset: -5px;
4718}
4719
4720#wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
4721#wrapper-edit-controls[place="palette"] > #edit-controls > separator,
4722#wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton,
4723#wrapper-zoom-controls[place="palette"] > #zoom-controls > separator {
4724 margin-top: 20px;
4725}
4726
4727#wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
4728#wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton {
4729 margin-left: 0;
4730 margin-right: 0;
4731 max-width: 24px;
4732 min-width: 24px;
4733 max-height: 24px;
4734 min-height: 24px;
4735 padding: 4px;
4736}
4737
4738#wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon,
4739#wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon {
4740 width: 16px;
4741}
4742
4743#wrapper-edit-controls > #edit-controls > toolbarbutton > .toolbarbutton-icon {
4744 opacity: 1; /* To ensure these buttons always look enabled in customize mode */
4745}
4746
4747#wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button,
4748#wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button + separator {
4749 display: none;
4750}
4751
4752#wrapper-personal-bookmarks:not([place="toolbar"]) > #personal-bookmarks {
4753 -moz-box-pack: center;
4754 min-height: 48px;
4755}
4756
4757#personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
4758 margin-inline-end: 5px;
4759}
4760
4761#customization-palette > toolbarpaletteitem > label {
4762 text-align: center;
4763 margin-left: 0;
4764 margin-right: 0;
4765}
4766
4767#customization-lwtheme-menu > .panel-arrowcontainer > .panel-arrowcontent {
4768 -moz-box-orient: vertical;
4769 /* Make the panel padding uniform across all platforms due to the
4770 styling of the section headers and footer. */
4771 padding: 10px;
4772}
4773
4774.customization-lwtheme-menu-theme > .toolbarbutton-icon {
4775 width: 32px;
4776 height: 32px;
4777}
4778
4779.customization-lwtheme-menu-theme {
4780 -moz-appearance: none;
4781 margin: 0 -5px 5px;
4782 padding-top: 0;
4783 padding-inline-end: 5px;
4784 padding-bottom: 0;
4785 padding-inline-start: 0;
4786}
4787
4788.customization-lwtheme-menu-theme[defaulttheme] {
4789 list-style-image: url(chrome://browser/skin/Fxtheme-switcher-icon.png);
4790}
4791
4792.customization-lwtheme-menu-theme[active="true"] {
4793 background-color: #008484;
4794}
4795
4796.customization-lwtheme-menu-theme > .toolbarbutton-icon {
4797 margin: 5px;
4798}
4799
4800.customization-lwtheme-menu-theme > .toolbarbutton-text {
4801 text-align: start;
4802}
4803
4804#customization-lwtheme-menu-header,
4805#customization-lwtheme-menu-recommended {
4806 padding: 10px;
4807 margin-bottom: 5px;
4808}
4809
4810#customization-lwtheme-menu-header,
4811#customization-lwtheme-menu-recommended,
4812#customization-lwtheme-menu-footer {
4813 background-color: #A09090;
4814 color: #000000;
4815 margin-right: -10px;
4816 margin-left: -10px;
4817}
4818
4819#customization-lwtheme-menu-header {
4820 margin-top: -10px;
4821 border-top-right-radius: 3px;
4822 border-top-left-radius: 3px;
4823}
4824
4825#customization-lwtheme-menu-recommended {
4826}
4827
4828#customization-lwtheme-menu-footer {
4829 margin-bottom: -10px;
4830 border-bottom-right-radius: 3px;
4831 border-bottom-left-radius: 3px;
4832}
4833
4834.customization-lwtheme-menu-footeritem {
4835 -moz-appearance: none;
4836 -moz-box-flex: 1;
4837 background-color: #C09070;
4838 color: #000000;
4839 border: 1px solid transparent;
4840 padding: 10px;
4841 margin-left: 0;
4842 margin-right: 0;
4843}
4844
4845.customization-lwtheme-menu-footeritem:hover {
4846 background-color: #FFCF00;
4847}
4848
4849.customization-lwtheme-menu-footeritem:first-child {
4850}
4851
4852/* === END customizeMode.inc.css === */
4853
4854/* === BEGIN customizeTip.inc.css === */
4855
4856#customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent {
4857 padding: 0;
4858 margin: 0;
4859 min-width: 400px;
4860 max-width: 1000px;
4861 min-height: 200px;
4862 border-radius: 3px;
4863/* background-image: linear-gradient(90deg, #a0dfff 0%, #ceeeff 100%);*/
4864 border: 1px solid #9C9CFF;
4865 color: #FF9F00;
4866}
4867
4868#customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent:-moz-locale-dir(rtl) {
4869/* background-image: linear-gradient(90deg, #ceeeff 0%, #a0dfff 100%);*/
4870}
4871
4872.customization-tipPanel-infoBox {
4873 margin: 20px 25px 25px;
4874 width: 25px;
4875 background-image: url("chrome://browser/skin/customizableui/info-icon-customizeTip.png");
4876 background-repeat: no-repeat;
4877}
4878
4879.customization-tipPanel-content {
4880 margin: 25px 0;
4881 font-size: 12px;
4882 line-height: 18px;
4883}
4884
4885.customization-tipPanel-em {
4886 margin: 0;
4887 font-weight: bold;
4888}
4889
4890.customization-tipPanel-contentImage {
4891 margin-top: 25px;
4892 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration.png");
4893 min-width: 300px;
4894 max-width: 300px;
4895 min-height: 190px;
4896 max-height: 190px;
4897 display: -moz-box;
4898}
4899
4900.customization-tipPanel-contentImage:-moz-locale-dir(rtl) {
4901 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration-rtl.png");
4902}
4903
4904.customization-tipPanel-link {
4905 -moz-appearance: none;
4906 background: transparent;
4907 border: none;
4908 box-shadow: none;
4909 color: #3333FF;
4910 margin: 0;
4911 cursor: pointer;
4912}
4913
4914.customization-tipPanel-link > .button-box > .button-text {
4915 margin: 0 !important;
4916}
4917
4918.customization-tipPanel-closeBox > .close-icon {
4919 -moz-appearance: none;
4920 border: 0;
4921 margin-inline-end: -25px;
4922}
4923
4924#customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"],
4925#customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
4926 list-style-image: url("chrome://browser/skin/customizableui/panelarrow-customizeTip.png");
4927}
4928
4929/* === END customizeTip.inc.css === */
4930
4931/**
4932 * This next rule is a hack to disable subpixel anti-aliasing on all
4933 * labels during the customize mode transition. Subpixel anti-aliasing
4934 * on Windows with Direct2D layers acceleration is particularly slow to
4935 * paint, so this hack is how we sidestep that performance bottleneck.
4936 */
4937#main-window:-moz-any([customize-entering],[customize-exiting]) label {
4938 transform: perspective(0.01px);
4939}
4940
4941#main-window[customize-entered] > #tab-view-deck {
4942 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
4943 background-attachment: fixed;
4944}
4945
4946#main-window[customization-lwtheme] > #tab-view-deck:-moz-lwtheme {
4947 background-repeat: no-repeat;
4948 background-position: right top;
4949 background-attachment: fixed;
4950 /* The image will get set from CustomizeMode.jsm */
4951 background-image: none;
4952 background-color: transparent;
4953}
4954
4955#main-window[customization-lwtheme]:-moz-lwtheme {
4956 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
4957 background-repeat: repeat;
4958 background-attachment: fixed;
4959 background-position: left top;
4960}
4961
4962#main-window[customize-entered] #browser-bottombox,
4963#main-window[customize-entered] #customization-container {
4964 border-left: 1px solid #9C9CFF;
4965 border-right: 1px solid #9C9CFF;
4966 background-clip: padding-box;
4967}
4968
4969#main-window[customize-entered] #browser-bottombox {
4970 border-bottom: 1px solid #9C9CFF;
4971}
4972
4973#customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"] {
4974 margin-right: -2px;
4975}
4976
4977#customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
4978 margin-left: -2px;
4979}
4980
4981/* End customization mode */
4982
4983/* Private browsing indicators */
4984
4985/**
4986 * Currently, we have two places where we put private browsing indicators on
4987 * Windows. When tabsintitlebar is enabled, we draw the indicator in the titlebar.
4988 * When tabsintitlebar is disabled, we draw the indicator at the end of the
4989 * tabstrip. The titlebar indicator is the fiddliest of the bunch, since we
4990 * want the bottom border of the image to line up with the bottom of the window
4991 * caption buttons. That's why there's so much special-casing going on in here.
4992 */
4993.private-browsing-indicator {
4994 display: none;
4995 pointer-events: none;
4996}
4997
4998#private-browsing-indicator-titlebar {
4999 display: block;
5000 position: absolute;
5001}
5002
5003#main-window[privatebrowsingmode=temporary][tabsintitlebar] #private-browsing-indicator-titlebar > .private-browsing-indicator {
5004 display: block;
5005}
5006
5007#main-window[privatebrowsingmode=temporary]:-moz-any([inFullscreen],:not([tabsintitlebar])) #TabsToolbar > .private-browsing-indicator {
5008 display: -moz-box;
5009}
5010
5011#TabsToolbar > .private-browsing-indicator {
5012 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") no-repeat center -3px;
5013 margin-inline-start: 4px;
5014 width: 48px;
5015}
5016
5017/* Bug 1008183: We're intentionally using the titlebar asset here for fullscreen
5018 * mode, since the tabstrip "mimics" the titlebar in that case with its own
5019 * min/max/close window buttons.
5020 */
5021#private-browsing-indicator-titlebar > .private-browsing-indicator,
5022#main-window[inFullscreen] #TabsToolbar > .private-browsing-indicator {
5023 background: url("chrome://browser/skin/privatebrowsing-mask-titlebar.png") no-repeat center 0px;
5024 margin-inline-end: 4px;
5025 width: 40px;
5026 height: 20px;
5027 position: relative;
5028}
5029
5030/* This one is for Linux */
5031#main-window[privatebrowsingmode=temporary] #private-browsing-indicator {
5032 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") center no-repeat;
5033 width: 48px;
5034}
5035
5036/* End private browsing indicators */
5037
5038/* === BEGIN UITour.inc.css === */
5039
5040/* UI Tour */
5041
5042#UITourHighlightContainer {
5043 -moz-appearance: none;
5044 border: none;
5045 background-color: transparent;
5046 /* This is a buffer to compensate for the movement in the "wobble" effect,
5047 and for the box-shadow of #UITourHighlight. */
5048 padding: 4px;
5049}
5050
5051#UITourHighlight {
5052 background-image: radial-gradient(50% 100%, rgba(0,132,132,0.4) 50%, rgba(0,132,132,0.6) 100%);
5053 border-radius: 40px;
5054 border: 1px solid #9C9CFF;
5055 /* The box-shadow opacity needs to be < 0.5 so it doesn't appear at 100% opacity
5056 on Linux without an X compositor where opacity is either 0 or 1. */
5057 box-shadow: 0 0 3px 0 rgba(0,0,0,0.49);
5058 min-height: 32px;
5059 min-width: 32px;
5060}
5061
5062#UITourTooltipBody {
5063 -moz-box-align: start;
5064}
5065
5066#UITourTooltipTitleContainer {
5067 -moz-box-align: start;
5068 margin-bottom: 10px;
5069}
5070
5071#UITourTooltipIcon {
5072 width: 48px;
5073 height: 48px;
5074 margin-inline-end: 10px;
5075}
5076
5077#UITourTooltipTitle,
5078#UITourTooltipDescription {
5079 max-width: 20rem;
5080}
5081
5082#UITourTooltipTitle {
5083 font-size: 1.45rem;
5084 font-weight: bold;
5085 margin: 0;
5086}
5087
5088#UITourTooltipDescription {
5089 margin-inline-start: 0;
5090 margin-inline-end: 0;
5091 font-size: 1.15rem;
5092 line-height: 1.8rem;
5093 margin-bottom: 0; /* Override global.css */
5094}
5095
5096#UITourTooltipClose {
5097 position: relative;
5098 -moz-appearance: none;
5099 border: none;
5100 background-color: transparent;
5101 min-width: 0;
5102 margin-inline-start: 4px;
5103 margin-top: -2px;
5104}
5105
5106#UITourTooltipClose > .toolbarbutton-text {
5107 display: none;
5108}
5109
5110#UITourTooltipButtons {
5111 -moz-box-pack: end;
5112 background-color: rgba(0,0,0,.2);
5113 border-top: 1px solid rgba(0,0,0,.4);
5114 margin: 10px -16px -16px;
5115 padding: 16px;
5116}
5117
5118#UITourTooltipButtons > label,
5119#UITourTooltipButtons > button {
5120 margin: 0 15px;
5121}
5122
5123#UITourTooltipButtons > label:first-child,
5124#UITourTooltipButtons > button:first-child {
5125 margin-inline-start: 0;
5126}
5127
5128#UITourTooltipButtons > label:last-child,
5129#UITourTooltipButtons > button:last-child {
5130 margin-inline-end: 0;
5131}
5132
5133#UITourTooltipButtons > button[image] > .button-box > .button-icon {
5134 width: 16px;
5135 height: 16px;
5136 margin-inline-end: 5px;
5137}
5138
5139#UITourTooltipButtons > label,
5140#UITourTooltipButtons > button .button-text {
5141 font-size: 1.15rem;
5142}
5143
5144#UITourTooltipButtons > button:not(.button-link) {
5145 -moz-appearance: none;
5146 background-color: #C09070;
5147 border-radius: 3000px;
5148 border: none;
5149 color: #000000;
5150 padding: 4px 30px;
5151 transition-property: background-color, color;
5152 transition-duration: 150ms;
5153}
5154
5155#UITourTooltipButtons > button:not(.button-link):not(:active):hover {
5156 background-color: #FFCF00;
5157 color: #000000;
5158}
5159
5160#UITourTooltipButtons > label,
5161#UITourTooltipButtons > button.button-link {
5162 -moz-appearance: none;
5163 background: transparent;
5164 border: none;
5165 box-shadow: none;
5166 color: rgba(0,0,0,0.35);
5167 padding-left: 10px;
5168 padding-right: 10px;
5169}
5170
5171#UITourTooltipButtons > button.button-link:hover {
5172 color: black;
5173}
5174
5175/* The primary button gets the same color as the customize button. */
5176#UITourTooltipButtons > button.button-primary {
5177 background-color: #A06060; /* LCARS default button background color */
5178 color: #000000;
5179 padding-left: 30px;
5180 padding-right: 30px;
5181}
5182
5183#UITourTooltipButtons > button.button-primary:not(:active):hover {
5184 background-color: #FFCF00;
5185 color: #000000;
5186}
5187
5188/* Notification overrides for Heartbeat UI */
5189
5190notification.heartbeat {
5191 background-color: #A09090;
5192/* height: 40px;*/
5193}
5194
5195@keyframes pulse-onshow {
5196 0% {
5197 opacity: 0;
5198 transform: scale(1.0);
5199 }
5200 25% {
5201 opacity: 1;
5202 transform: scale(1.1);
5203 }
5204 50% {
5205 transform: scale(1.0);
5206 }
5207 75% {
5208 transform: scale(1.1);
5209 }
5210 100% {
5211 transform: scale(1.0);
5212 }
5213}
5214
5215@keyframes pulse-twice {
5216 0% {
5217 transform: scale(1.1);
5218 }
5219 50% {
5220 transform: scale(0.8);
5221 }
5222 100% {
5223 transform: scale(1);
5224 }
5225}
5226
5227.messageText.heartbeat {
5228 color: #000000;
5229/* text-shadow: none; */
5230 margin-inline-start: 0px;
5231}
5232
5233.messageImage.heartbeat {
5234 width: 24px;
5235 height: 24px;
5236 margin-inline-start: 8px;
5237 margin-inline-end: 8px;
5238}
5239
5240.messageImage.heartbeat.pulse-onshow {
5241 animation-name: pulse-onshow;
5242 animation-duration: 1.5s;
5243 animation-iteration-count: 1;
5244 animation-timing-function: cubic-bezier(.7,1.8,.9,1.1);
5245}
5246
5247.messageImage.heartbeat.pulse-twice {
5248 animation-name: pulse-twice;
5249 animation-duration: 1s;
5250 animation-iteration-count: 2;
5251 animation-timing-function: linear;
5252}
5253
5254/* Learn More link styles */
5255.heartbeat > .text-link {
5256 color: #3333FF;
5257 margin-inline-start: 0px;
5258}
5259
5260.heartbeat > .text-link:hover {
5261 color: #9C9CFF;
5262 text-decoration: none;
5263}
5264
5265.heartbeat > .text-link:hover:active {
5266 color: #FF9F00;
5267}
5268
5269/* Heartbeat UI Rating Star Classes */
5270.heartbeat > #star-rating-container {
5271 display: -moz-box;
5272/* margin-bottom: 4px;*/
5273}
5274
5275.heartbeat > #star-rating-container > #star5 {
5276 -moz-box-ordinal-group: 5;
5277}
5278
5279.heartbeat > #star-rating-container > #star4 {
5280 -moz-box-ordinal-group: 4;
5281}
5282
5283.heartbeat > #star-rating-container > #star3 {
5284 -moz-box-ordinal-group: 3;
5285}
5286
5287.heartbeat > #star-rating-container > #star2 {
5288 -moz-box-ordinal-group: 2;
5289}
5290
5291.heartbeat > #star-rating-container > .star-x {
5292 background: url("chrome://browser/skin/heartbeat-star-off.svg");
5293 cursor: pointer;
5294 /* Overrides the margin-inline-end for all platforms defined in the .plain class */
5295 margin-inline-end: 4px !important;
5296 width: 16px;
5297 height: 16px;
5298}
5299
5300.heartbeat > #star-rating-container > .star-x:hover,
5301.heartbeat > #star-rating-container > .star-x:hover ~ .star-x {
5302 background: url("chrome://browser/skin/heartbeat-star-lit.svg");
5303}
5304
5305/* === END UITour.inc.css === */
5306
5307#UITourTooltipButtons {
5308 /**
5309 * Override the --panel-arrowcontent-padding so the background extends
5310 * to the sides and bottom of the panel.
5311 */
5312 margin-left: -10px;
5313 margin-right: -10px;
5314 margin-bottom: -10px;
5315}
5316
5317/* === BEGIN contextmenu.inc.css === */
5318
5319menugroup > .menuitem-iconic[disabled="true"] > .menu-iconic-left {
5320}
5321
5322#context-navigation > .menuitem-iconic {
5323 -moz-box-flex: 1;
5324 -moz-box-pack: center;
5325 -moz-box-align: center;
5326}
5327
5328#context-navigation > .menuitem-iconic[disabled="true"] {
5329 background-color: transparent;
5330}
5331
5332#context-navigation > .menuitem-iconic > .menu-iconic-left {
5333 -moz-appearance: none;
5334}
5335
5336#context-navigation > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
5337 width: 16px;
5338 height: 16px;
5339 margin: 7px;
5340 filter: url(chrome://browser/skin/filters.svg#fill);
5341 fill: currentColor;
5342}
5343
5344#context-back {
5345 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back");
5346}
5347
5348#context-forward {
5349 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward");
5350}
5351
5352#context-reload {
5353 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload");
5354}
5355
5356#context-stop {
5357 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop");
5358}
5359
5360#context-bookmarkpage {
5361 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark");
5362}
5363
5364#context-bookmarkpage[starred=true] {
5365 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked");
5366}
5367
5368#context-back:-moz-locale-dir(rtl),
5369#context-forward:-moz-locale-dir(rtl),
5370#context-reload:-moz-locale-dir(rtl) {
5371 transform: scaleX(-1);
5372}
5373
5374#context-navigation > #context-reload > .menu-iconic-left > .menu-iconic-icon,
5375#context-navigation > #context-stop > .menu-iconic-left > .menu-iconic-icon {
5376 width: 14px;
5377 height: 14px;
5378 margin: 9px;
5379}
5380
5381#context-media-eme-learnmore {
5382 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
5383}
5384
5385#context-media-eme-learnmore {
5386 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
5387}
5388
5389/* === END contextmenu.inc.css === */
5390
5391#context-navigation {
5392}
5393
5394#context-sep-navigation {
5395/* margin-top: -4px; */
5396}
5397
5398.browser-extension-panel > .panel-arrowcontainer > .panel-arrowcontent {
5399 padding: 0;
5400 overflow: hidden;
5401}
5402
5403.webextension-popup-browser {
5404 border-radius: inherit;
5405}
KaiRo's SeaMonkey themes