projects / themes.git / blame_incremental
? search:
summary | shortlog | log | commit | commitdiff | tree
blob | blame (non-incremental) | history | HEAD
also add width for close-icon and override all those definitions for tab close buttons
[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") !important;
3050 -moz-image-region: auto !important;
3051}
3052
3053.tab-close-button:hover,
3054.tab-close-button:hover[selected="true"] {
3055 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif") !important;
3056 -moz-image-region: auto !important;
3057}
3058
3059.tab-close-button:hover:active,
3060.tab-close-button:hover:active[selected="true"] {
3061 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif") !important;
3062 -moz-image-region: auto !important;
3063}
3064
3065.tab-close-button > .button-icon,
3066.tab-close-button > .button-box > .button-icon,
3067.tab-close-button > .toolbarbutton-icon {
3068 width: auto !important;
3069}
3070
3071
3072/* Tab scrollbox arrow, tabstrip new tab and all-tabs buttons */
3073
3074.tabbrowser-arrowscrollbox > .scrollbutton-up,
3075.tabbrowser-arrowscrollbox > .scrollbutton-down {
3076 margin: 0;
3077 padding-top: 0;
3078 padding-bottom: 0;
3079 background-origin: border-box;
3080}
3081
3082#main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3083#main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3084.tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-lwtheme-brighttext,
3085.tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-lwtheme-brighttext {
3086 }
3087
3088.tabbrowser-arrowscrollbox > .scrollbutton-up[disabled],
3089.tabbrowser-arrowscrollbox > .scrollbutton-down[disabled] {
3090 }
3091
3092.tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(rtl),
3093.tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(ltr) {
3094/* transform: scaleX(-1);*/
3095}
3096
3097.tabbrowser-arrowscrollbox > .scrollbutton-down {
3098 transition: 1s background-color ease-out;
3099}
3100
3101.tabbrowser-arrowscrollbox > .scrollbutton-down[notifybgtab] {
3102 background-color: #008484;
3103}
3104
3105.tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]),
3106.tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]) {
3107/* border-width: 0 2px 0 0;
3108 border-style: solid;
3109 border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 fill;*/
3110}
3111
3112.tabs-newtab-button > .toolbarbutton-icon {
3113 margin-top: -1px;
3114 margin-bottom: -1px;
3115}
3116
3117.tabs-newtab-button,
3118#TabsToolbar > #new-tab-button,
3119#TabsToolbar > toolbarpaletteitem > #new-tab-button,
3120#TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
3121 list-style-image: url("chrome://browser/skin/tabbrowser/newtab.svg");
3122 -moz-image-region: auto;
3123}
3124
3125.tabs-newtab-button,
3126.tabs-newtab-button:hover,
3127#TabsToolbar > #new-tab-button,
3128#TabsToolbar > #new-tab-button:hover {
3129}
3130
3131#main-window[tabsintitlebar]:not([inFullscreen]) .tabs-newtab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3132#main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3133#main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3134.tabs-newtab-button:-moz-lwtheme-brighttext,
3135#TabsToolbar > #new-tab-button:-moz-lwtheme-brighttext,
3136#TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-lwtheme-brighttext {
3137}
3138
3139#TabsToolbar > #new-tab-button {
3140 width: 26px;
3141}
3142
3143#alltabs-button {
3144 list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
3145}
3146
3147#alltabs-button:hover,
3148#alltabs-button:hover:active,
3149#alltabs-button[open="true"] {
3150 list-style-image: url("chrome://global/skin/arrow/arrow-down-hover.gif");
3151}
3152
3153#main-window[tabsintitlebar]:not([inFullscreen]) #alltabs-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3154#alltabs-button:-moz-lwtheme-brighttext {
3155}
3156
3157#alltabs-button > .toolbarbutton-icon {
3158/* margin: 0 2px;*/
3159}
3160
3161#alltabs-button > .toolbarbutton-menu-dropmarker {
3162 display: none;
3163}
3164
3165/* All tabs menupopup */
3166.alltabs-item > .menu-iconic-left > .menu-iconic-icon {
3167 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
3168 -moz-image-region: auto;
3169}
3170
3171.alltabs-item[selected="true"] {
3172 font-weight: bold;
3173}
3174
3175.alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
3176 list-style-image: url("chrome://global/skin/icons/loading.png");
3177}
3178
3179@media (min-resolution: 1.1dppx) {
3180 .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
3181 list-style-image: url("chrome://global/skin/icons/loading@2x.png");
3182 }
3183}
3184
3185toolbarbutton.chevron {
3186 list-style-image: url("chrome://global/skin/toolbar/chevron.gif") !important;
3187}
3188
3189toolbarbutton.chevron:hover {
3190 list-style-image: url("chrome://global/skin/toolbar/chevron-hover.gif") !important;
3191}
3192/*
3193toolbar[brighttext] toolbarbutton.chevron {
3194 list-style-image: url("chrome://global/skin/toolbar/chevron-inverted.png") !important;
3195}
3196*/
3197toolbarbutton.chevron:-moz-locale-dir(rtl) > .toolbarbutton-icon,
3198toolbarbutton.chevron:-moz-locale-dir(rtl):hover > .toolbarbutton-icon {
3199 transform: scaleX(-1);
3200}
3201
3202toolbarbutton.chevron > .toolbarbutton-text,
3203toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
3204 display: none;
3205}
3206
3207toolbarbutton.chevron > .toolbarbutton-icon {
3208 margin: 0;
3209}
3210
3211#sidebar-throbber[loading="true"] {
3212 list-style-image: url("chrome://global/skin/icons/loading.png");
3213 margin-inline-end: 4px;
3214}
3215
3216@media (min-resolution: 1.1dppx) {
3217 #sidebar-throbber[loading="true"] {
3218 list-style-image: url("chrome://global/skin/icons/loading@2x.png");
3219 width: 16px;
3220 }
3221}
3222
3223/* Bookmarks toolbar */
3224#PlacesToolbarDropIndicator {
3225 list-style-image: url("chrome://communicator/skin/bookmarks/toolbarDropMarker.png");
3226}
3227
3228toolbarbutton.bookmark-item[dragover="true"][open="true"] {
3229 background-color: #008484 !important;
3230 color: #FFCF00 !important;
3231}
3232
3233/* rules for menupopup drop indicators */
3234.menupopup-drop-indicator-bar {
3235 position: relative;
3236 /* these two margins must together compensate the indicator's height */
3237 margin-top: -1px;
3238 margin-bottom: -1px;
3239}
3240
3241.menupopup-drop-indicator {
3242 list-style-image: none;
3243 height: 2px;
3244 margin-inline-end: -4em;
3245 background-color: #008484;
3246}
3247
3248/* === BEGIN notification-icons.inc.css === */
3249
3250#notification-popup-box {
3251 border-radius: 3px 0 0 3px;
3252 padding: 5px 0px;
3253 margin: -5px 0px;
3254 margin-inline-end: -5px;
3255 padding-inline-end: 5px;
3256}
3257
3258.notification-anchor-icon,
3259#blocked-permissions-container > .blocked-permission-icon {
3260 width: 16px;
3261 height: 16px;
3262 margin-inline-start: 2px;
3263}
3264
3265/* This class can be used alone or in combination with the class defining the
3266 type of icon displayed. This rule must be defined before the others in order
3267 for its list-style-image to be overridden. */
3268.notification-anchor-icon {
3269 list-style-image: url("chrome://global/skin/icons/information-16.png");
3270}
3271
3272.notification-anchor-icon:-moz-focusring {
3273 outline: 1px dotted #008484;
3274}
3275
3276@media (min-resolution: 1.1dppx) {
3277 .notification-anchor-icon {
3278 list-style-image: url(chrome://global/skin/icons/information-32.png);
3279 }
3280}
3281
3282.popup-notification-icon {
3283 width: 64px;
3284 height: 64px;
3285 margin-inline-end: 10px;
3286}
3287
3288.notification-anchor-icon:not(.plugin-blocked),
3289#blocked-permissions-container > .blocked-permission-icon {
3290 filter: url(chrome://global/skin/filters.svg#fill);
3291 fill: currentColor;
3292}
3293
3294.notification-anchor-icon:not(.plugin-blocked):not(:hover) {
3295}
3296
3297/* INDIVIDUAL NOTIFICATIONS */
3298
3299.popup-notification-icon[popupid="web-notifications"],
3300.desktop-notification-icon {
3301 list-style-image: url(chrome://browser/skin/notification-icons.svg#desktop-notification);
3302}
3303
3304.desktop-notification-icon.blocked-permission-icon {
3305 list-style-image: url(chrome://browser/skin/notification-icons.svg#desktop-notification-blocked);
3306}
3307
3308.geo-icon {
3309 list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows);
3310}
3311
3312.geo-icon.blocked-permission-icon {
3313 list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows-blocked);
3314}
3315
3316.popup-notification-icon[popupid="geolocation"] {
3317 list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows-detailed);
3318}
3319
3320.popup-notification-icon[popupid="indexedDB-permissions-prompt"],
3321.indexedDB-icon {
3322 list-style-image: url(chrome://browser/skin/notification-icons.svg#indexedDB);
3323}
3324
3325.indexedDB-icon.blocked-permission-icon {
3326 list-style-image: url(chrome://browser/skin/notification-icons.svg#indexedDB-blocked);
3327}
3328
3329.login-icon {
3330 list-style-image: url(chrome://browser/skin/notification-icons.svg#login);
3331}
3332
3333.popup-notification-icon[popupid="password"] {
3334 list-style-image: url(chrome://browser/skin/notification-icons.svg#login-detailed);
3335}
3336
3337.camera-icon,
3338.popup-notification-icon[popupid="webRTC-shareDevices"] {
3339 list-style-image: url(chrome://browser/skin/notification-icons.svg#camera);
3340}
3341
3342.camera-icon.in-use {
3343 list-style-image: url(chrome://browser/skin/notification-icons.svg#camera-sharing);
3344}
3345
3346.camera-icon.blocked-permission-icon {
3347 list-style-image: url(chrome://browser/skin/notification-icons.svg#camera-blocked);
3348}
3349
3350.microphone-icon {
3351 list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone);
3352}
3353
3354.microphone-icon.in-use {
3355 list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-sharing);
3356}
3357
3358.microphone-icon.blocked-permission-icon {
3359 list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-blocked);
3360}
3361
3362.popup-notification-icon[popupid="webRTC-shareMicrophone"] {
3363 list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-detailed);
3364}
3365
3366.popup-notification-icon[popupid="webRTC-shareScreen"],
3367.screen-icon {
3368 list-style-image: url(chrome://browser/skin/notification-icons.svg#screen);
3369}
3370
3371.screen-icon.in-use {
3372 list-style-image: url(chrome://browser/skin/notification-icons.svg#screen-sharing);
3373}
3374
3375.screen-icon.blocked-permission-icon {
3376 list-style-image: url(chrome://browser/skin/notification-icons.svg#screen-blocked);
3377}
3378
3379/* This icon has a block sign in it, so we don't need a blocked version. */
3380.popup-icon {
3381 list-style-image: url("chrome://browser/skin/notification-icons.svg#popup");
3382}
3383
3384/* EME */
3385
3386.popup-notification-icon[popupid="drmContentPlaying"],
3387.drm-icon {
3388 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
3389}
3390
3391.drm-icon:hover:active {
3392 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains-pressed");
3393}
3394
3395#eme-notification-icon[firstplay=true] {
3396 animation: emeTeachingMoment 0.2s linear 0s 5 normal;
3397}
3398
3399@keyframes emeTeachingMoment {
3400 0% {transform: translateX(0); }
3401 25% {transform: translateX(3px) }
3402 75% {transform: translateX(-3px) }
3403 100% { transform: translateX(0); }
3404}
3405
3406/* INSTALL ADDONS */
3407
3408.install-icon {
3409 list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#default);
3410}
3411
3412.popup-notification-icon[popupid="xpinstall-disabled"],
3413.popup-notification-icon[popupid="addon-install-blocked"],
3414.popup-notification-icon[popupid="addon-install-origin-blocked"] {
3415 list-style-image: url(chrome://browser/skin/addons/addon-install-blocked.svg);
3416}
3417
3418.popup-notification-icon[popupid="addon-progress"] {
3419 list-style-image: url(chrome://browser/skin/addons/addon-install-downloading.svg);
3420}
3421
3422.popup-notification-icon[popupid="addon-install-failed"] {
3423 list-style-image: url(chrome://browser/skin/addons/addon-install-error.svg);
3424}
3425
3426.popup-notification-icon[popupid="addon-install-confirmation"] {
3427 list-style-image: url(chrome://browser/skin/addons/addon-install-confirm.svg);
3428}
3429
3430#addon-install-confirmation-notification[warning] .popup-notification-icon[popupid="addon-install-confirmation"] {
3431 list-style-image: url(chrome://browser/skin/addons/addon-install-warning.svg);
3432}
3433
3434.popup-notification-icon[popupid="addon-install-complete"] {
3435 list-style-image: url(chrome://browser/skin/addons/addon-install-installed.svg);
3436}
3437
3438.popup-notification-icon[popupid="addon-install-restart"] {
3439 list-style-image: url(chrome://browser/skin/addons/addon-install-restart.svg);
3440}
3441
3442.popup-notification-icon[popupid="click-to-play-plugins"] {
3443 list-style-image: url(chrome://mozapps/skin/plugins/pluginBlocked-64.png);
3444}
3445
3446/* OFFLINE APPS */
3447
3448.popup-notification-icon[popupid*="offline-app-requested"],
3449.popup-notification-icon[popupid="offline-app-usage"] {
3450 list-style-image: url(chrome://global/skin/icons/question-64.png);
3451}
3452
3453/* PLUGINS */
3454
3455.plugin-icon {
3456 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin);
3457}
3458
3459.plugin-icon.plugin-blocked {
3460 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked);
3461}
3462
3463#notification-popup-box[hidden] {
3464 /* Override display:none to make the pluginBlockedNotification animation work
3465 when showing the notification repeatedly. */
3466 display: -moz-box;
3467 visibility: collapse;
3468}
3469
3470#plugins-notification-icon.plugin-blocked[showing] {
3471 animation: pluginBlockedNotification 500ms ease 0s 5 alternate both;
3472}
3473
3474@keyframes pluginBlockedNotification {
3475 from {
3476 opacity: 0;
3477 }
3478 to {
3479 opacity: 1;
3480 }
3481}
3482
3483/* SOCIAL API */
3484
3485.popup-notification-icon[popupid="servicesInstall"] {
3486 list-style-image: url(chrome://browser/skin/social/services-64.png);
3487}
3488
3489.service-icon {
3490 list-style-image: url(chrome://browser/skin/social/services-16.png);
3491}
3492
3493/* TRANSLATION */
3494
3495.translation-icon {
3496 list-style-image: url(chrome://browser/skin/translation-16.png);
3497 -moz-image-region: rect(0px, 16px, 16px, 0px);
3498}
3499
3500.translation-icon.in-use {
3501 -moz-image-region: rect(0px, 32px, 16px, 16px);
3502}
3503
3504/* === END notification-icons.inc.css === */
3505
3506.popup-notification-body[popupid="addon-progress"],
3507.popup-notification-body[popupid="addon-install-confirmation"] {
3508 width: 28em;
3509 max-width: 28em;
3510}
3511
3512/* Translation infobar */
3513
3514/* === BEGIN infobar.inc.css === */
3515
3516notification[value="translation"] .messageImage {
3517 list-style-image: url("chrome://browser/skin/translation-16.png");
3518 -moz-image-region: rect(0, 32px, 16px, 16px);
3519}
3520
3521@media (min-resolution: 1.25dppx) {
3522 notification[value="translation"] .messageImage {
3523 list-style-image: url("chrome://browser/skin/translation-16@2x.png");
3524 -moz-image-region: rect(0, 64px, 32px, 32px);
3525 }
3526}
3527
3528notification[value="translation"][state="translating"] .messageImage {
3529 list-style-image: url("chrome://browser/skin/translating-16.png");
3530 -moz-image-region: auto;
3531}
3532
3533@media (min-resolution: 1.25dppx) {
3534 notification[value="translation"][state="translating"] .messageImage {
3535 list-style-image: url("chrome://browser/skin/translating-16@2x.png");
3536 }
3537}
3538
3539notification[value="translation"] hbox[anonid="details"] {
3540 overflow: hidden;
3541}
3542
3543notification[value="translation"] button,
3544notification[value="translation"] menulist {
3545 min-width: 0;
3546}
3547
3548notification[value="translation"] menulist > .menulist-dropmarker {
3549}
3550
3551.translation-menupopup arrowscrollbox {
3552 padding-bottom: 0;
3553}
3554
3555.translation-attribution {
3556 cursor: pointer;
3557 -moz-box-align: end;
3558 font-size: small;
3559}
3560
3561.translation-attribution > label {
3562 margin-bottom: 0;
3563}
3564
3565.translation-attribution > image {
3566 width: 70px;
3567}
3568
3569.translation-welcome-panel {
3570 width: 305px;
3571}
3572
3573.translation-welcome-logo {
3574 height: 32px;
3575 width: 32px;
3576 list-style-image: url(chrome://browser/skin/translation-16@2x.png);
3577 -moz-image-region: rect(0, 64px, 32px, 32px);
3578}
3579
3580.translation-welcome-content {
3581 margin-inline-start: 16px;
3582}
3583
3584.translation-welcome-headline {
3585 font-size: larger;
3586 font-weight: bold;
3587}
3588
3589.translation-welcome-body {
3590 padding: 1em 0;
3591 margin: 0 0;
3592}
3593
3594/* === END infobar.inc.css === */
3595
3596notification[value="translation"] {
3597 min-height: 40px;
3598}
3599
3600.translation-menupopup {
3601 -moz-appearance: none;
3602}
3603
3604/* Bookmarks roots menu-items */
3605#subscribeToPageMenuitem:not([disabled]),
3606#subscribeToPageMenupopup {
3607 list-style-image: url("chrome://browser/skin/feeds/feedIcon16.png");
3608}
3609
3610#bookmarksToolbarFolderMenu,
3611#BMB_bookmarksToolbar,
3612#panelMenu_bookmarksToolbar {
3613 list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png");
3614 -moz-image-region: auto;
3615}
3616
3617#BMB_unsortedBookmarks,
3618#panelMenu_unsortedBookmarks {
3619 list-style-image: url("chrome://communicator/skin/bookmarks/unsortedBookmarks.png");
3620 -moz-image-region: auto;
3621}
3622
3623/* Status panel */
3624
3625.statuspanel-label {
3626 margin: 0;
3627 padding: 2px 4px;
3628 background: #404000;
3629 border: 1px none #9C9CFF;
3630 border-top-style: solid;
3631 color: #FF9F00;
3632 text-shadow: none;
3633}
3634
3635.statuspanel-label:-moz-locale-dir(ltr):not([mirror]),
3636.statuspanel-label:-moz-locale-dir(rtl)[mirror] {
3637 border-right-style: solid;
3638 border-top-right-radius: .3em;
3639 margin-right: 1em;
3640}
3641
3642.statuspanel-label:-moz-locale-dir(rtl):not([mirror]),
3643.statuspanel-label:-moz-locale-dir(ltr)[mirror] {
3644 border-left-style: solid;
3645 border-top-left-radius: .3em;
3646 margin-left: 1em;
3647}
3648
3649/* HACK to abolish devily color on main content */
3650
3651#content {
3652 background-color: transparent !important;
3653}
3654
3655/* === BEGIN fullscreen/warning.inc.css === */
3656
3657html|*.pointerlockfswarning {
3658 align-items: center;
3659 background: rgba(0, 0, 0, 0.9);
3660 border: 2px solid #A09090;
3661 box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
3662 border-radius: 8px;
3663 padding: 24px 16px;
3664 font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
3665}
3666
3667html|*.pointerlockfswarning::before {
3668 margin: 0;
3669 width: 24px; height: 24px;
3670}
3671
3672html|*.pointerlockfswarning[data-identity="verifiedIdentity"]::before,
3673html|*.pointerlockfswarning[data-identity="verifiedDomain"]::before {
3674 content: url("chrome://browser/skin/fullscreen/secure.svg");
3675}
3676
3677html|*.pointerlockfswarning[data-identity="unknownIdentity"]::before {
3678 content: url("chrome://browser/skin/fullscreen/insecure.svg");
3679}
3680
3681html|*.pointerlockfswarning-domain-text,
3682html|*.pointerlockfswarning-generic-text {
3683 font-size: 21px;
3684 font-weight: lighter;
3685 color: #A09090;
3686 margin: 0 16px;
3687}
3688
3689html|*.pointerlockfswarning-domain {
3690 font-weight: bold;
3691 margin: 0;
3692}
3693
3694html|*.pointerlockfswarning-exit-button {
3695 padding: 5px 30px;
3696 font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
3697 font-size: 14px;
3698 font-weight: lighter;
3699 margin: 0;
3700 box-sizing: content-box;
3701
3702 border-radius: 300px;
3703 border: none;
3704 background-color: #C09070;
3705 color: #000000;
3706}
3707
3708/* === END fullscreen/warning.inc.css === */
3709
3710/* === BEGIN ctrlTab.inc.css === */
3711
3712/* Ctrl-Tab */
3713
3714#ctrlTab-panel {
3715 -moz-appearance: none;
3716 background: rgba(0%,0%,0%,.7);
3717 color: #FF9F00;
3718 border-style: none;
3719 padding: 20px 10px 10px;
3720 font-weight: bold;
3721}
3722
3723.ctrlTab-favicon[src] {
3724 background-color: #000000;
3725 width: 20px;
3726 height: 20px;
3727 padding: 2px;
3728}
3729
3730.ctrlTab-preview-inner > .tabPreview-canvas {
3731/* box-shadow: 1px 1px 2px hsl(0,0%,12%);*/
3732}
3733
3734.ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas {
3735 margin-bottom: 2px;
3736}
3737
3738.ctrlTab-preview-inner {
3739 padding: 8px;
3740 border: 2px solid transparent;
3741 border-radius: .5em;
3742}
3743
3744.ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner {
3745 margin: -10px -10px 0;
3746}
3747
3748#ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner {
3749 background-color: #000000;
3750}
3751
3752.ctrlTab-preview:focus > * > .ctrlTab-preview-inner {
3753 color: #A09090;
3754 background-color: #000000;
3755 text-shadow: none;
3756 border-color: #9C9CFF;
3757}
3758
3759#ctrlTab-showAll {
3760 margin-top: .5em;
3761}
3762
3763/* === END ctrlTab.inc.css === */
3764
3765/* === BEGIN commandline.inc.css === */
3766
3767/* NOTE: THESE NEED TO STAY IN SYNC WITH LIGHT-THEME.CSS AND DARK-THEME.CSS.
3768 We are copy/pasting variables from light-theme and dark-theme,
3769 since they aren't loaded in this context (within browser.css). */
3770:root #developer-toolbar {
3771 --gcli-background-color: #000000; /* --theme-toolbar-background */
3772 --gcli-input-background: rgba(0, 0, 0, .75); /* --theme-tab-toolbar-background */
3773 --gcli-input-focused-background: #000000; /* --theme-sidebar-background */
3774 --gcli-input-color: #FF9F00; /* --theme-body-color-alt */
3775 --gcli-border-color: #9C9CFF; /* --theme-splitter-color */
3776 --selection-background: #008484; /* --theme-selection-background */
3777 --selection-color: #000000; /* --theme-selection-color */
3778 --command-line-image: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme); /* --theme-command-line-image */
3779 --command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme-focus); /* --theme-command-line-image-focus */
3780}
3781
3782/* Developer toolbar */
3783
3784#developer-toolbar {
3785 border-top: 3px solid var(--gcli-background-color);
3786 border-bottom: none;
3787}
3788
3789#developer-toolbar .toolbar-holder {
3790 background-color: #8050B0;
3791 color: #FFCF00;
3792}
3793
3794#developer-toolbar .toolbar-holder {
3795 background-color: #8050B0;
3796 color: #FFCF00;
3797}
3798
3799#developer-toolbar .toolbar-startcap,
3800#developer-toolbar .toolbar-endcap{
3801 background-color: #6000CF;
3802}
3803
3804#developer-toolbar {
3805/* padding: 0;
3806 min-height: 32px; */
3807}
3808
3809#developer-toolbar > toolbarbutton {
3810/* border: none;
3811 background-color: transparent;
3812 margin: 0;
3813 padding: 0 10px;
3814 width: 32px; */
3815}
3816
3817.developer-toolbar-button > image {
3818/* margin: auto 10px; */
3819}
3820
3821#developer-toolbar-toolbox-button > label {
3822 display: none;
3823}
3824
3825.developer-toolbar-button > .toolbarbutton-icon {
3826 width: 16px;
3827 height: 16px;
3828}
3829
3830#developer-toolbar-toolbox-button {
3831 list-style-image: url("chrome://devtools/skin/images/toggle-tools.png");
3832 -moz-image-region: rect(0px, 16px, 16px, 0px);
3833}
3834
3835#developer-toolbar-toolbox-button > label {
3836 display: none;
3837}
3838
3839#developer-toolbar-toolbox-button:hover,
3840#developer-toolbar-toolbox-button:hover:active,
3841#developer-toolbar-toolbox-button[checked=true] {
3842 -moz-image-region: rect(0px, 32px, 16px, 16px);
3843}
3844
3845@media (min-resolution: 2dppx) {
3846 #developer-toolbar-toolbox-button {
3847 list-style-image: url("chrome://devtools/skin/images/toggle-tools@2x.png");
3848 -moz-image-region: rect(0px, 32px, 32px, 0px);
3849 }
3850
3851 #developer-toolbar-toolbox-button:hover,
3852 #developer-toolbar-toolbox-button:hover:active,
3853 #developer-toolbar-toolbox-button[checked=true] {
3854 -moz-image-region: rect(0px, 64px, 32px, 32px);
3855 }
3856}
3857
3858/* GCLI */
3859
3860html|*#gcli-tooltip-frame,
3861html|*#gcli-output-frame {
3862 padding: 0;
3863 border-width: 0;
3864 background-color: transparent;
3865}
3866
3867#gcli-output,
3868#gcli-tooltip {
3869 border-width: 0;
3870 background-color: transparent;
3871}
3872
3873.gclitoolbar-input-node,
3874.gclitoolbar-complete-node {
3875 margin: 1px 3px;
3876 -moz-box-align: center;
3877 padding-top: 0;
3878 padding-bottom: 0;
3879 padding-right: 8px;
3880 background-color: transparent;
3881}
3882
3883.gclitoolbar-input-node {
3884/* line-height: 32px;
3885 outline-style: none; */
3886 background-repeat: no-repeat;
3887 background-color: var(--gcli-input-background);
3888}
3889
3890.gclitoolbar-input-node[focused="true"] {
3891 background-color: var(--gcli-input-focused-background);
3892}
3893
3894.gclitoolbar-input-node::before {
3895 content: "";
3896 display: inline-block;
3897 -moz-box-ordinal-group: 0;
3898 width: 16px;
3899 height: 16px;
3900 margin: 0 2px;
3901 background-image: var(--command-line-image);
3902}
3903
3904.gclitoolbar-input-node[focused="true"]::before {
3905 background-image: var(--command-line-image-focus);
3906}
3907
3908.gclitoolbar-input-node:not([focused="true"]) {
3909 border-color: transparent;
3910}
3911
3912.gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection {
3913 background-color: var(--selection-background);
3914 color: var(--selection-color);
3915}
3916
3917.gclitoolbar-complete-node {
3918 padding-left: 21px;
3919 background-color: transparent;
3920 color: transparent;
3921 z-index: 100;
3922 pointer-events: none;
3923}
3924
3925.gcli-in-incomplete,
3926.gcli-in-error,
3927.gcli-in-ontab,
3928.gcli-in-todo,
3929.gcli-in-closebrace,
3930.gcli-in-param,
3931.gcli-in-valid {
3932 margin: 0;
3933 padding: 0;
3934}
3935
3936.gcli-in-incomplete {
3937 border-bottom: 2px dotted #8050B0;
3938}
3939
3940.gcli-in-error {
3941 border-bottom: 2px dotted #FF0000;
3942}
3943
3944.gcli-in-ontab {
3945 color: #9C9CFF;
3946}
3947
3948.gcli-in-todo {
3949 color: #795900;
3950}
3951
3952.gcli-in-closebrace {
3953 color: #8050B0;
3954}
3955
3956/* === END commandline.inc.css === */
3957
3958/* === BEGIN responsivedesign.inc.css === */
3959
3960/* Responsive Mode */
3961
3962.browserContainer[responsivemode] {
3963 background-color: #221500;
3964 padding: 0 20px 20px 20px;
3965}
3966
3967.browserStack[responsivemode] {
3968 box-shadow: 0 0 7px #9C9CFF;
3969}
3970
3971.devtools-responsiveui-toolbar {
3972 background: transparent;
3973 /* text color is textColor from dark theme, since no theme is applied to
3974 * the responsive toolbar.
3975 */
3976 color: #FF9F00;
3977 margin: 10px 0;
3978 padding: 0;
3979 box-shadow: none;
3980 border-bottom-width: 0;
3981}
3982
3983.devtools-responsiveui-textinput {
3984/* -moz-appearance: none;
3985 background: #333;
3986 color: #fff;
3987 border: 1px solid #111;
3988 border-radius: 2px;
3989 padding: 0 5px;*/
3990 width: 200px;
3991 margin: 0;
3992}
3993
3994.devtools-responsiveui-textinput[attention] {
3995/* border-color: #38ace6;
3996 background: rgba(56,172,230,0.4);*/
3997}
3998
3999.devtools-responsiveui-menulist,
4000.devtools-responsiveui-toolbarbutton {
4001 -moz-box-align: center;
4002 min-width: 32px;
4003/* min-height: 22px;*/
4004/* margin: 0 3px; */
4005}
4006
4007.devtools-responsiveui-menulist .menulist-editable-box {
4008 background-color: transparent;
4009}
4010
4011.devtools-responsiveui-menulist html|*.menulist-editable-input {
4012 color: inherit;
4013 text-align: center;
4014}
4015
4016.devtools-responsiveui-menulist html|*.menulist-editable-input::-moz-selection {
4017/* background: hsla(212,7%,57%,.35);*/
4018}
4019
4020.devtools-responsiveui-toolbarbutton > .toolbarbutton-icon {
4021 width: 16px;
4022 height: 16px;
4023}
4024
4025.devtools-responsiveui-toolbarbutton > .toolbarbutton-menubutton-button {
4026 -moz-box-orient: horizontal;
4027}
4028
4029.devtools-responsiveui-menulist:-moz-focusring,
4030.devtools-responsiveui-toolbarbutton:-moz-focusring {
4031/* outline: 1px dotted hsla(210,30%,85%,0.7);
4032 outline-offset: -4px;*/
4033}
4034
4035.devtools-responsiveui-toolbarbutton:not([label]) > .toolbarbutton-text {
4036 display: none;
4037}
4038
4039.devtools-responsiveui-toolbarbutton:not([checked=true]):hover:active {
4040/* border-color: hsla(210,8%,5%,.6);
4041 background: linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
4042 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); */
4043}
4044
4045.devtools-responsiveui-menulist[open=true],
4046.devtools-responsiveui-toolbarbutton[open=true],
4047.devtools-responsiveui-toolbarbutton[checked=true] {
4048/* border-color: hsla(210,8%,5%,.6) !important;
4049 background: linear-gradient(hsla(220,6%,10%,.6), hsla(210,11%,18%,.45) 75%, hsla(210,11%,30%,.4));
4050 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); */
4051}
4052
4053.devtools-responsiveui-toolbarbutton[checked=true] {
4054/* color: hsl(208,100%,60%); */
4055}
4056
4057.devtools-responsiveui-toolbarbutton[checked=true]:hover {
4058/* background-color: transparent !important;*/
4059}
4060
4061.devtools-responsiveui-toolbarbutton[checked=true]:hover:active {
4062/* background-color: hsla(210,8%,5%,.2) !important;*/
4063}
4064
4065.devtools-responsiveui-menulist > .menulist-label-box {
4066 text-align: center;
4067}
4068
4069.devtools-responsiveui-menulist > .menulist-dropmarker {
4070/* display: -moz-box;
4071 background-color: transparent;
4072 list-style-image: url("chrome://devtools/skin/dropmarker.svg");
4073 -moz-box-align: center;
4074 border-width: 0;
4075 min-width: 16px;*/
4076}
4077
4078.devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
4079/* color: inherit;
4080 border-width: 0;
4081 border-inline-end: 1px solid hsla(210,8%,5%,.45);
4082 box-shadow: -1px 0 0 hsla(210,16%,76%,.15) inset, 1px 0 0 hsla(210,16%,76%,.15);*/
4083}
4084
4085.devtools-responsiveui-toolbarbutton[type=menu-button]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button {
4086/* box-shadow: 1px 0 0 hsla(210,16%,76%,.15) inset, -1px 0 0 hsla(210,16%,76%,.15);*/
4087}
4088
4089.devtools-responsiveui-toolbarbutton[type=menu-button] {
4090/* padding: 0 1px;*/
4091 -moz-box-align: stretch;
4092}
4093
4094.devtools-responsiveui-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
4095.devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
4096/* list-style-image: url("chrome://devtools/skin/dropmarker.svg");
4097 -moz-box-align: center;
4098 padding: 0 3px;*/
4099}
4100
4101.devtools-responsiveui-toolbar:-moz-locale-dir(ltr) > *:first-child,
4102.devtools-responsiveui-toolbar:-moz-locale-dir(rtl) > *:last-child {
4103 margin-left: 3px;
4104}
4105
4106.devtools-responsiveui-close {
4107 list-style-image: url("chrome://devtools/skin/close.svg");
4108}
4109
4110.devtools-responsiveui-close:hover {
4111 filter: url(chrome://devtools/skin/images/filters.svg#checked-icon-state);
4112}
4113
4114.devtools-responsiveui-close > image {
4115 filter: invert(1);
4116}
4117
4118.devtools-responsiveui-rotate {
4119 list-style-image: url("chrome://devtools/skin/images/responsiveui-rotate.png");
4120 -moz-image-region: rect(0px,16px,16px,0px);
4121}
4122
4123.devtools-responsiveui-rotate:hover {
4124 -moz-image-region: rect(0px,32px,16px,16px);
4125}
4126
4127@media (min-resolution: 2dppx) {
4128 .devtools-responsiveui-rotate {
4129 list-style-image: url("chrome://devtools/skin/images/responsiveui-rotate@2x.png");
4130 }
4131
4132 .devtools-responsiveui-rotate:hover {
4133 -moz-image-region: rect(0px,64px,32px,32px);
4134 }
4135}
4136
4137.devtools-responsiveui-touch {
4138 list-style-image: url("chrome://devtools/skin/images/responsiveui-touch.png");
4139 -moz-image-region: rect(0px,16px,16px,0px);
4140}
4141
4142.devtools-responsiveui-touch:hover,
4143.devtools-responsiveui-touch[checked],
4144.devtools-responsiveui-touch[checked]:hover {
4145 -moz-image-region: rect(0px,32px,16px,16px);
4146}
4147
4148@media (min-resolution: 2dppx) {
4149 .devtools-responsiveui-touch {
4150 list-style-image: url("chrome://devtools/skin/images/responsiveui-touch@2x.png");
4151 -moz-image-region: rect(0px,32px,32px,0px);
4152 }
4153
4154 .devtools-responsiveui-touch:hover,
4155 .devtools-responsiveui-touch[checked],
4156 .devtools-responsiveui-touch[checked]:hover {
4157 -moz-image-region: rect(0px,64px,32px,32px);
4158 }
4159}
4160
4161.devtools-responsiveui-screenshot {
4162 list-style-image: url("chrome://devtools/skin/images/responsiveui-screenshot.png");
4163 -moz-image-region: rect(0px,16px,16px,0px);
4164}
4165
4166.devtools-responsiveui-screenshot:hover {
4167 -moz-image-region: rect(0px,32px,16px,16px);
4168}
4169
4170@media (min-resolution: 2dppx) {
4171 .devtools-responsiveui-screenshot {
4172 list-style-image: url("chrome://devtools/skin/images/responsiveui-screenshot@2x.png");
4173 }
4174
4175 .devtools-responsiveui-screenshot:hover {
4176 -moz-image-region: rect(0px,64px,32px,32px);
4177 }
4178}
4179
4180.devtools-responsiveui-resizebarV {
4181 width: 7px;
4182 height: 24px;
4183 cursor: ew-resize;
4184 transform: translate(12px, -12px);
4185 background-size: cover;
4186 background-image: url("chrome://devtools/skin/images/responsive-vertical-resizer.png");
4187}
4188
4189.devtools-responsiveui-resizebarH {
4190 width: 24px;
4191 height: 7px;
4192 cursor: ns-resize;
4193 transform: translate(-12px, 12px);
4194 background-size: cover;
4195 background-image: url("chrome://devtools/skin/images/responsive-horizontal-resizer.png");
4196}
4197
4198.devtools-responsiveui-resizehandle {
4199 width: 16px;
4200 height: 16px;
4201 cursor: se-resize;
4202 transform: translate(12px, 12px);
4203 background-size: cover;
4204 background-image: url("chrome://devtools/skin/images/responsive-se-resizer.png");
4205}
4206
4207/* FxOS custom mode with additional buttons and phone look'n feel */
4208
4209/* Hide devtools manual resizer */
4210.browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizehandle,
4211.browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarH,
4212.browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarV {
4213 display: none;
4214}
4215
4216/* Gives responsive mode a phone look'n feel */
4217.browserStack[responsivemode].fxos-mode {
4218 padding: 60px 15px 0;
4219
4220 border-radius: 25px / 20px;
4221 border-bottom-left-radius: 0;
4222 border-bottom-right-radius: 0;
4223 border: 1px solid #FFFFFF;
4224 border-bottom-width: 0;
4225
4226 background-color: #353535;
4227
4228 box-shadow: 0 3px 0.7px 1px #777777, 0 5px rgba(0, 0, 0, 0.4) inset;
4229
4230 background-image: linear-gradient(to right, #111 11%, #333 56%);
4231 min-width: 320px;
4232}
4233
4234.devtools-responsiveui-hardware-buttons {
4235 -moz-appearance: none;
4236 padding: 20px;
4237
4238 border: 1px solid #FFFFFF;
4239 border-bottom-left-radius: 25px;
4240 border-bottom-right-radius: 25px;
4241 border-top-width: 0;
4242
4243 box-shadow: 0 3px 0.7px 1px #777777, 0 -7px rgba(0, 0, 0, 0.4) inset;
4244
4245 background-image: linear-gradient(to right, #111 11%, #333 56%);
4246}
4247
4248.devtools-responsiveui-home-button {
4249 -moz-user-focus: ignore;
4250 width: 40px;
4251 height: 30px;
4252 list-style-image: url("chrome://devtools/skin/images/responsiveui-home.png");
4253}
4254
4255.devtools-responsiveui-sleep-button {
4256 -moz-user-focus: ignore;
4257 -moz-appearance: none;
4258 /* compensate browserStack top padding */
4259 margin-top: -67px;
4260 margin-right: 10px;
4261
4262 min-width: 10px;
4263 width: 50px;
4264 height: 5px;
4265
4266 border: 1px solid #444;
4267 border-top-right-radius: 12px;
4268 border-top-left-radius: 12px;
4269 border-bottom-color: transparent;
4270
4271 background-image: linear-gradient(to top, #111 11%, #333 56%);
4272}
4273
4274.devtools-responsiveui-sleep-button:hover:active {
4275 background-image: linear-gradient(to top, #aaa 11%, #ddd 56%);
4276}
4277
4278.devtools-responsiveui-volume-buttons {
4279 margin-left: -29px;
4280}
4281
4282.devtools-responsiveui-volume-up-button,
4283.devtools-responsiveui-volume-down-button {
4284 -moz-user-focus: ignore;
4285 -moz-appearance: none;
4286 border: 1px solid red;
4287 min-width: 8px;
4288 height: 40px;
4289
4290 border: 1px solid #444;
4291 border-right-color: transparent;
4292
4293 background-image: linear-gradient(to right, #111 11%, #333 56%);
4294}
4295
4296.devtools-responsiveui-volume-up-button:hover:active,
4297.devtools-responsiveui-volume-down-button:hover:active {
4298 background-image: linear-gradient(to right, #aaa 11%, #ddd 56%);
4299}
4300
4301.devtools-responsiveui-volume-up-button {
4302 border-top-left-radius: 12px;
4303}
4304
4305.devtools-responsiveui-volume-down-button {
4306 border-bottom-left-radius: 12px;
4307}
4308
4309@media (min-resolution: 2dppx) {
4310 .devtools-responsiveui-resizebarV {
4311 background-image: url("chrome://devtools/skin/images/responsive-vertical-resizer@2x.png");
4312 }
4313
4314 .devtools-responsiveui-resizebarH {
4315 background-image: url("chrome://devtools/skin/images/responsive-horizontal-resizer@2x.png");
4316 }
4317
4318 .devtools-responsiveui-resizehandle {
4319 background-image: url("chrome://devtools/skin/images/responsive-se-resizer@2x.png");
4320 }
4321}
4322
4323/* === END responsivedesign.inc.css === */
4324
4325/* === including indicator.css is done at the start of the file === */
4326
4327/* Error counter */
4328
4329#developer-toolbar-toolbox-button[error-count]:before {
4330 color: #000000;
4331 min-width: 16px;
4332 text-shadow: none;
4333 background-color: #FF0000;
4334 border-radius: 1px;
4335 margin-inline-end: 5px;
4336}
4337
4338/* === BEGIN plugin-doorhanger.inc.css === */
4339
4340/**
4341 * Plugin Doorhanger Styles
4342 */
4343
4344#notification-popup[popupid="click-to-play-plugins"] > .panel-arrowcontainer > .panel-arrowcontent {
4345 padding: 6px 1px 2px;
4346}
4347
4348.click-to-play-plugins-notification-center-box {
4349}
4350
4351.plugin-popupnotification-centeritem:nth-child(odd) {
4352/* background-color: rgba(0,0,0,0.1);*/
4353}
4354
4355.center-item-label {
4356 margin-bottom: 0;
4357 text-overflow: ellipsis;
4358}
4359
4360.center-item-warning-icon {
4361 background-image: url("chrome://mozapps/skin/extensions/alerticon-info-negative.svg");
4362 background-repeat: no-repeat;
4363 width: 16px;
4364 height: 15px;
4365 margin-inline-start: 6px;
4366}
4367
4368.click-to-play-plugins-notification-button-container {
4369}
4370
4371.click-to-play-popup-button {
4372 width: 50%;
4373}
4374
4375.click-to-play-plugins-notification-description-box {
4376 margin-left: 5px;
4377 margin-right: 5px;
4378 margin-top: 0;
4379 padding-bottom: 3px;
4380}
4381
4382.click-to-play-plugins-outer-description {
4383 margin-top: 1px;
4384}
4385
4386.click-to-play-plugins-notification-link,
4387.center-item-link {
4388 margin: 0;
4389}
4390
4391.messageImage[value="plugin-hidden"] {
4392 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin);
4393}
4394
4395/* Keep any changes to this style in sync with pluginProblem.css */
4396notification.pluginVulnerable {
4397}
4398
4399notification.pluginVulnerable .messageImage {
4400 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked);
4401}
4402
4403/* === END plugin-doorhanger.inc.css === */
4404
4405/* === BEGIN customizeMode.inc.css === */
4406
4407/* Customization mode */
4408
4409:root {
4410 --drag-drop-transition-duration: .3s;
4411}
4412
4413#main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox {
4414 margin-bottom: 1em;
4415}
4416
4417#main-window:-moz-any([customize-entering],[customize-entered]) #content-deck,
4418#main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
4419#main-window:-moz-any([customize-entering],[customize-entered]) #navigator-toolbox {
4420 margin-left: 1em;
4421 margin-right: 1em;
4422}
4423
4424#main-window:-moz-any([customize-entering],[customize-exiting]) #tab-view-deck {
4425 pointer-events: none;
4426}
4427
4428#main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
4429#PanelUI-contents > .panel-customization-placeholder {
4430 -moz-outline-radius: 2.5px;
4431 outline: 1px dashed transparent;
4432}
4433
4434#main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before {
4435 /* Prevent jumping of tabs when switching a window between inactive and active (bug 853415). */
4436 -moz-box-ordinal-group: 0;
4437 content: "";
4438 display: -moz-box;
4439 height: 100%;
4440 left: 0;
4441 outline-offset: -2px;
4442 pointer-events: none;
4443 position: absolute;
4444 top: 0;
4445 width: 100%;
4446}
4447
4448/* Shift the TabsToolbar outline up 2px since the #nav-bar is shifted up by 1px and the
4449 #TabsToolbar::after is a pixel higher to draw the bottom border of the tabstrip so this makes the
4450 offset from the bottom effectively the same as other targets (-2px). */
4451#main-window[customize-entered] #TabsToolbar.customization-target::before {
4452/* top: -2px;*/
4453}
4454
4455/* The parents of the outline pseudo-elements need to be positioned so that the outline is positioned relative to it. */
4456#main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover,
4457#main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)),
4458#main-window[customize-entered] #nav-bar-customization-target.customization-target {
4459 position: relative;
4460}
4461
4462/* Most target outlines are shown on hover and drag over but the panel menu uses
4463 placeholders instead. */
4464#main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover::before,
4465#main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
4466/* nav-bar and panel outlines are always shown */
4467#nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
4468 outline-color: currentColor;
4469}
4470
4471#nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
4472 transition: outline-color 250ms linear;
4473}
4474
4475#PanelUI-contents[showoutline=true] > .panel-customization-placeholder {
4476 transition: outline-color 250ms linear;
4477 outline-color: var(--panel-separator-color);
4478}
4479
4480#PanelUI-contents > .panel-customization-placeholder {
4481 cursor: auto;
4482 outline-offset: -5px;
4483}
4484
4485#main-window[customizing] .customization-target:not(#PanelUI-contents) {
4486 min-width: 100px;
4487/* padding-left: 10px;
4488 padding-right: 10px;*/
4489}
4490
4491#main-window:-moz-any([customize-entering],[customize-entered]) #tab-view-deck {
4492 padding: 0 2em 2em;
4493}
4494
4495#customization-container {
4496 background-color: #000000;
4497 color: #FF9F00;
4498}
4499
4500#customization-palette,
4501#customization-empty {
4502 padding: 0 15px 15px;
4503}
4504
4505#customization-header {
4506 font-size: 1.75em;
4507 line-height: 1.75em;
4508 color: #9C9CFF;
4509 font-weight: 200;
4510 margin: 25px 25px 12px;
4511 padding-bottom: 12px;
4512 border-bottom: 1px solid #A09090;
4513}
4514
4515#customization-panel-container {
4516 padding: 10px 10px 0px;
4517}
4518
4519#main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
4520#customization-footer {
4521 /*background-color: rgb(236,236,236);*/
4522}
4523
4524#customization-footer {
4525 border-top: 1px solid #9C9CFF;
4526 padding: 10px;
4527}
4528
4529.customizationmode-button {
4530 margin: 5px;
4531}
4532
4533.customizationmode-button:hover {
4534}
4535
4536.customizationmode-button > .box-inherit {
4537}
4538
4539.customizationmode-button > .button-icon {
4540}
4541
4542.customizationmode-button:not([type=menu]) > .button-text {
4543}
4544
4545.customizationmode-button > .button-menu-dropmarker {
4546}
4547
4548
4549
4550.customizationmode-button[checked] {
4551 background-color: #008484;
4552}
4553
4554.customizationmode-button[checked]:hover:not([disabled]),
4555.customizationmode-button:hover:not([disabled]) {
4556 background-color: #FFCF00;
4557}
4558
4559.customizationmode-button[checked]:hover:active:not([disabled]),
4560.customizationmode-button:hover:active:not([disabled]),
4561.customizationmode-button[open] {
4562 background-color: #FF9F00;
4563}
4564
4565.customizationmode-button[disabled="true"] {
4566}
4567
4568.customizationmode-button > .box-inherit > .box-inherit > .button-icon,
4569.customizationmode-button > .button-box > .button-icon {
4570/* height: 24px;*/
4571}
4572
4573#customization-titlebar-visibility-button {
4574 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle.png");
4575 -moz-image-region: rect(0, 16px, 16px, 0);
4576}
4577
4578#customization-titlebar-visibility-button:hover {
4579 -moz-image-region: rect(16px, 16px, 32px, 0);
4580}
4581
4582#customization-titlebar-visibility-button > .button-box {
4583 padding-top: 0;
4584 padding-bottom: 1px;
4585}
4586
4587#customization-titlebar-visibility-button:hover:active > .button-box {
4588 padding-top: 1px;
4589 padding-bottom: 0;
4590}
4591
4592#customization-lwtheme-button > .box-inherit > .box-inherit > .button-text,
4593#customization-titlebar-visibility-button > .button-box > .button-text {
4594 /* Sadly, button.css thinks its margins are perfect for everyone. */
4595 margin-inline-start: 5px !important;
4596}
4597
4598#customization-lwtheme-button > .box-inherit > .box-inherit > .button-icon {
4599 width: 20px;
4600 height: 20px;
4601 border-radius: 2px;
4602 background-size: contain;
4603}
4604
4605#customization-titlebar-visibility-button > .button-box > .button-icon {
4606 vertical-align: middle;
4607}
4608
4609#customization-titlebar-visibility-button[checked] {
4610 -moz-image-region: rect(0, 32px, 16px, 16px);
4611 background-color: #008484;
4612}
4613
4614#customization-titlebar-visibility-button[checked]:hover {
4615 -moz-image-region: rect(16px, 32px, 32px, 16px);
4616 background-color: #FFCF00;
4617}
4618
4619#customization-titlebar-visibility-button[checked]:hover:active {
4620 background-color: #FF9F00;
4621}
4622
4623@media (min-resolution: 1.1dppx) {
4624 #customization-titlebar-visibility-button {
4625 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle@2x.png");
4626 -moz-image-region: rect(0, 48px, 48px, 0);
4627 }
4628
4629 #customization-titlebar-visibility-button:hover {
4630 -moz-image-region: rect(48px, 48px, 96px, 0);
4631 }
4632
4633 #customization-titlebar-visibility-button[checked] {
4634 -moz-image-region: rect(0, 96px, 48px, 48px);
4635 }
4636
4637 #customization-titlebar-visibility-button[checked]:hover {
4638 -moz-image-region: rect(48px, 96px, 96px, 48px);
4639 }
4640}
4641
4642#main-window[customize-entered] #customization-panel-container {
4643 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
4644 background-position: left top;
4645 background-repeat: repeat;
4646 background-size: auto;
4647 background-attachment: fixed;
4648}
4649
4650toolbarpaletteitem[place="toolbar"] {
4651 transition: border-width 250ms ease-in-out;
4652}
4653
4654toolbarpaletteitem[mousedown] {
4655 outline: 1px solid #008484;
4656 cursor: -moz-grabbing;
4657 opacity: 0.8;
4658}
4659
4660.panel-customization-placeholder,
4661toolbarpaletteitem[place="palette"],
4662toolbarpaletteitem[place="panel"] {
4663 transition: transform var(--drag-drop-transition-duration) ease-in-out;
4664}
4665
4666#customization-palette {
4667 transition: opacity .3s ease-in-out;
4668 opacity: 0;
4669}
4670
4671#customization-palette[showing="true"] {
4672 opacity: 1;
4673}
4674
4675toolbarpaletteitem toolbarbutton[disabled] {
4676/* color: inherit !important;*/
4677}
4678
4679toolbarpaletteitem[notransition].panel-customization-placeholder,
4680toolbarpaletteitem[notransition][place="toolbar"],
4681toolbarpaletteitem[notransition][place="palette"],
4682toolbarpaletteitem[notransition][place="panel"] {
4683 transition: none;
4684}
4685
4686toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon,
4687toolbarpaletteitem > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon,
4688toolbarpaletteitem > toolbaritem.panel-wide-item,
4689toolbarpaletteitem > toolbarbutton[type="menu-button"] {
4690 transition: transform var(--drag-drop-transition-duration) cubic-bezier(.6, 2, .75, 1.5) !important;
4691}
4692
4693toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon,
4694toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon {
4695 transform: scale(1.3);
4696}
4697
4698toolbarpaletteitem[mousedown] > toolbaritem.panel-wide-item,
4699toolbarpaletteitem[mousedown] > toolbarbutton[type="menu-button"] {
4700 transform: scale(1.1);
4701}
4702
4703/* Override the toolkit styling for items being dragged over. */
4704toolbarpaletteitem[place="toolbar"] {
4705 border-left-width: 0;
4706 border-right-width: 0;
4707 margin-right: 0;
4708 margin-left: 0;
4709}
4710
4711#customization-palette:not([hidden]) {
4712 margin-bottom: 25px;
4713}
4714
4715toolbarpaletteitem[place="palette"]:-moz-focusring,
4716toolbarpaletteitem[place="panel"]:-moz-focusring,
4717toolbarpaletteitem[place="toolbar"]:-moz-focusring {
4718 outline-width: 0;
4719}
4720
4721toolbarpaletteitem[place="palette"]:not([mousedown="true"]):-moz-focusring,
4722toolbarpaletteitem[place="panel"]:not([mousedown="true"]):-moz-focusring,
4723toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring {
4724 /* Delay adding the focusring back until after the transform transition completes. */
4725 transition: outline-width .01s linear var(--drag-drop-transition-duration);
4726 outline: 1px dotted;
4727 -moz-outline-radius: 2.5px;
4728}
4729
4730toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring {
4731 outline-offset: -5px;
4732}
4733
4734#wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
4735#wrapper-edit-controls[place="palette"] > #edit-controls > separator,
4736#wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton,
4737#wrapper-zoom-controls[place="palette"] > #zoom-controls > separator {
4738 margin-top: 20px;
4739}
4740
4741#wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
4742#wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton {
4743 margin-left: 0;
4744 margin-right: 0;
4745 max-width: 24px;
4746 min-width: 24px;
4747 max-height: 24px;
4748 min-height: 24px;
4749 padding: 4px;
4750}
4751
4752#wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon,
4753#wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon {
4754 width: 16px;
4755}
4756
4757#wrapper-edit-controls > #edit-controls > toolbarbutton > .toolbarbutton-icon {
4758 opacity: 1; /* To ensure these buttons always look enabled in customize mode */
4759}
4760
4761#wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button,
4762#wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button + separator {
4763 display: none;
4764}
4765
4766#wrapper-personal-bookmarks:not([place="toolbar"]) > #personal-bookmarks {
4767 -moz-box-pack: center;
4768 min-height: 48px;
4769}
4770
4771#personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
4772 margin-inline-end: 5px;
4773}
4774
4775#customization-palette > toolbarpaletteitem > label {
4776 text-align: center;
4777 margin-left: 0;
4778 margin-right: 0;
4779}
4780
4781#customization-lwtheme-menu > .panel-arrowcontainer > .panel-arrowcontent {
4782 -moz-box-orient: vertical;
4783 /* Make the panel padding uniform across all platforms due to the
4784 styling of the section headers and footer. */
4785 padding: 10px;
4786}
4787
4788.customization-lwtheme-menu-theme > .toolbarbutton-icon {
4789 width: 32px;
4790 height: 32px;
4791}
4792
4793.customization-lwtheme-menu-theme {
4794 -moz-appearance: none;
4795 margin: 0 -5px 5px;
4796 padding-top: 0;
4797 padding-inline-end: 5px;
4798 padding-bottom: 0;
4799 padding-inline-start: 0;
4800}
4801
4802.customization-lwtheme-menu-theme[defaulttheme] {
4803 list-style-image: url(chrome://browser/skin/Fxtheme-switcher-icon.png);
4804}
4805
4806.customization-lwtheme-menu-theme[active="true"] {
4807 background-color: #008484;
4808}
4809
4810.customization-lwtheme-menu-theme > .toolbarbutton-icon {
4811 margin: 5px;
4812}
4813
4814.customization-lwtheme-menu-theme > .toolbarbutton-text {
4815 text-align: start;
4816}
4817
4818#customization-lwtheme-menu-header,
4819#customization-lwtheme-menu-recommended {
4820 padding: 10px;
4821 margin-bottom: 5px;
4822}
4823
4824#customization-lwtheme-menu-header,
4825#customization-lwtheme-menu-recommended,
4826#customization-lwtheme-menu-footer {
4827 background-color: #A09090;
4828 color: #000000;
4829 margin-right: -10px;
4830 margin-left: -10px;
4831}
4832
4833#customization-lwtheme-menu-header {
4834 margin-top: -10px;
4835 border-top-right-radius: 3px;
4836 border-top-left-radius: 3px;
4837}
4838
4839#customization-lwtheme-menu-recommended {
4840}
4841
4842#customization-lwtheme-menu-footer {
4843 margin-bottom: -10px;
4844 border-bottom-right-radius: 3px;
4845 border-bottom-left-radius: 3px;
4846}
4847
4848.customization-lwtheme-menu-footeritem {
4849 -moz-appearance: none;
4850 -moz-box-flex: 1;
4851 background-color: #C09070;
4852 color: #000000;
4853 border: 1px solid transparent;
4854 padding: 10px;
4855 margin-left: 0;
4856 margin-right: 0;
4857}
4858
4859.customization-lwtheme-menu-footeritem:hover {
4860 background-color: #FFCF00;
4861}
4862
4863.customization-lwtheme-menu-footeritem:first-child {
4864}
4865
4866/* === END customizeMode.inc.css === */
4867
4868/* === BEGIN customizeTip.inc.css === */
4869
4870#customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent {
4871 padding: 0;
4872 margin: 0;
4873 min-width: 400px;
4874 max-width: 1000px;
4875 min-height: 200px;
4876 border-radius: 3px;
4877/* background-image: linear-gradient(90deg, #a0dfff 0%, #ceeeff 100%);*/
4878 border: 1px solid #9C9CFF;
4879 color: #FF9F00;
4880}
4881
4882#customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent:-moz-locale-dir(rtl) {
4883/* background-image: linear-gradient(90deg, #ceeeff 0%, #a0dfff 100%);*/
4884}
4885
4886.customization-tipPanel-infoBox {
4887 margin: 20px 25px 25px;
4888 width: 25px;
4889 background-image: url("chrome://browser/skin/customizableui/info-icon-customizeTip.png");
4890 background-repeat: no-repeat;
4891}
4892
4893.customization-tipPanel-content {
4894 margin: 25px 0;
4895 font-size: 12px;
4896 line-height: 18px;
4897}
4898
4899.customization-tipPanel-em {
4900 margin: 0;
4901 font-weight: bold;
4902}
4903
4904.customization-tipPanel-contentImage {
4905 margin-top: 25px;
4906 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration.png");
4907 min-width: 300px;
4908 max-width: 300px;
4909 min-height: 190px;
4910 max-height: 190px;
4911 display: -moz-box;
4912}
4913
4914.customization-tipPanel-contentImage:-moz-locale-dir(rtl) {
4915 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration-rtl.png");
4916}
4917
4918.customization-tipPanel-link {
4919 -moz-appearance: none;
4920 background: transparent;
4921 border: none;
4922 box-shadow: none;
4923 color: #3333FF;
4924 margin: 0;
4925 cursor: pointer;
4926}
4927
4928.customization-tipPanel-link > .button-box > .button-text {
4929 margin: 0 !important;
4930}
4931
4932.customization-tipPanel-closeBox > .close-icon {
4933 -moz-appearance: none;
4934 border: 0;
4935 margin-inline-end: -25px;
4936}
4937
4938#customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"],
4939#customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
4940 list-style-image: url("chrome://browser/skin/customizableui/panelarrow-customizeTip.png");
4941}
4942
4943/* === END customizeTip.inc.css === */
4944
4945/**
4946 * This next rule is a hack to disable subpixel anti-aliasing on all
4947 * labels during the customize mode transition. Subpixel anti-aliasing
4948 * on Windows with Direct2D layers acceleration is particularly slow to
4949 * paint, so this hack is how we sidestep that performance bottleneck.
4950 */
4951#main-window:-moz-any([customize-entering],[customize-exiting]) label {
4952 transform: perspective(0.01px);
4953}
4954
4955#main-window[customize-entered] > #tab-view-deck {
4956 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
4957 background-attachment: fixed;
4958}
4959
4960#main-window[customization-lwtheme] > #tab-view-deck:-moz-lwtheme {
4961 background-repeat: no-repeat;
4962 background-position: right top;
4963 background-attachment: fixed;
4964 /* The image will get set from CustomizeMode.jsm */
4965 background-image: none;
4966 background-color: transparent;
4967}
4968
4969#main-window[customization-lwtheme]:-moz-lwtheme {
4970 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
4971 background-repeat: repeat;
4972 background-attachment: fixed;
4973 background-position: left top;
4974}
4975
4976#main-window[customize-entered] #browser-bottombox,
4977#main-window[customize-entered] #customization-container {
4978 border-left: 1px solid #9C9CFF;
4979 border-right: 1px solid #9C9CFF;
4980 background-clip: padding-box;
4981}
4982
4983#main-window[customize-entered] #browser-bottombox {
4984 border-bottom: 1px solid #9C9CFF;
4985}
4986
4987#customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"] {
4988 margin-right: -2px;
4989}
4990
4991#customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
4992 margin-left: -2px;
4993}
4994
4995/* End customization mode */
4996
4997/* Private browsing indicators */
4998
4999/**
5000 * Currently, we have two places where we put private browsing indicators on
5001 * Windows. When tabsintitlebar is enabled, we draw the indicator in the titlebar.
5002 * When tabsintitlebar is disabled, we draw the indicator at the end of the
5003 * tabstrip. The titlebar indicator is the fiddliest of the bunch, since we
5004 * want the bottom border of the image to line up with the bottom of the window
5005 * caption buttons. That's why there's so much special-casing going on in here.
5006 */
5007.private-browsing-indicator {
5008 display: none;
5009 pointer-events: none;
5010}
5011
5012#private-browsing-indicator-titlebar {
5013 display: block;
5014 position: absolute;
5015}
5016
5017#main-window[privatebrowsingmode=temporary][tabsintitlebar] #private-browsing-indicator-titlebar > .private-browsing-indicator {
5018 display: block;
5019}
5020
5021#main-window[privatebrowsingmode=temporary]:-moz-any([inFullscreen],:not([tabsintitlebar])) #TabsToolbar > .private-browsing-indicator {
5022 display: -moz-box;
5023}
5024
5025#TabsToolbar > .private-browsing-indicator {
5026 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") no-repeat center -3px;
5027 margin-inline-start: 4px;
5028 width: 48px;
5029}
5030
5031/* Bug 1008183: We're intentionally using the titlebar asset here for fullscreen
5032 * mode, since the tabstrip "mimics" the titlebar in that case with its own
5033 * min/max/close window buttons.
5034 */
5035#private-browsing-indicator-titlebar > .private-browsing-indicator,
5036#main-window[inFullscreen] #TabsToolbar > .private-browsing-indicator {
5037 background: url("chrome://browser/skin/privatebrowsing-mask-titlebar.png") no-repeat center 0px;
5038 margin-inline-end: 4px;
5039 width: 40px;
5040 height: 20px;
5041 position: relative;
5042}
5043
5044/* This one is for Linux */
5045#main-window[privatebrowsingmode=temporary] #private-browsing-indicator {
5046 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") center no-repeat;
5047 width: 48px;
5048}
5049
5050/* End private browsing indicators */
5051
5052/* === BEGIN UITour.inc.css === */
5053
5054/* UI Tour */
5055
5056#UITourHighlightContainer {
5057 -moz-appearance: none;
5058 border: none;
5059 background-color: transparent;
5060 /* This is a buffer to compensate for the movement in the "wobble" effect,
5061 and for the box-shadow of #UITourHighlight. */
5062 padding: 4px;
5063}
5064
5065#UITourHighlight {
5066 background-image: radial-gradient(50% 100%, rgba(0,132,132,0.4) 50%, rgba(0,132,132,0.6) 100%);
5067 border-radius: 40px;
5068 border: 1px solid #9C9CFF;
5069 /* The box-shadow opacity needs to be < 0.5 so it doesn't appear at 100% opacity
5070 on Linux without an X compositor where opacity is either 0 or 1. */
5071 box-shadow: 0 0 3px 0 rgba(0,0,0,0.49);
5072 min-height: 32px;
5073 min-width: 32px;
5074}
5075
5076#UITourTooltipBody {
5077 -moz-box-align: start;
5078}
5079
5080#UITourTooltipTitleContainer {
5081 -moz-box-align: start;
5082 margin-bottom: 10px;
5083}
5084
5085#UITourTooltipIcon {
5086 width: 48px;
5087 height: 48px;
5088 margin-inline-end: 10px;
5089}
5090
5091#UITourTooltipTitle,
5092#UITourTooltipDescription {
5093 max-width: 20rem;
5094}
5095
5096#UITourTooltipTitle {
5097 font-size: 1.45rem;
5098 font-weight: bold;
5099 margin: 0;
5100}
5101
5102#UITourTooltipDescription {
5103 margin-inline-start: 0;
5104 margin-inline-end: 0;
5105 font-size: 1.15rem;
5106 line-height: 1.8rem;
5107 margin-bottom: 0; /* Override global.css */
5108}
5109
5110#UITourTooltipClose {
5111 position: relative;
5112 -moz-appearance: none;
5113 border: none;
5114 background-color: transparent;
5115 min-width: 0;
5116 margin-inline-start: 4px;
5117 margin-top: -2px;
5118}
5119
5120#UITourTooltipClose > .toolbarbutton-text {
5121 display: none;
5122}
5123
5124#UITourTooltipButtons {
5125 -moz-box-pack: end;
5126 background-color: rgba(0,0,0,.2);
5127 border-top: 1px solid rgba(0,0,0,.4);
5128 margin: 10px -16px -16px;
5129 padding: 16px;
5130}
5131
5132#UITourTooltipButtons > label,
5133#UITourTooltipButtons > button {
5134 margin: 0 15px;
5135}
5136
5137#UITourTooltipButtons > label:first-child,
5138#UITourTooltipButtons > button:first-child {
5139 margin-inline-start: 0;
5140}
5141
5142#UITourTooltipButtons > label:last-child,
5143#UITourTooltipButtons > button:last-child {
5144 margin-inline-end: 0;
5145}
5146
5147#UITourTooltipButtons > button[image] > .button-box > .button-icon {
5148 width: 16px;
5149 height: 16px;
5150 margin-inline-end: 5px;
5151}
5152
5153#UITourTooltipButtons > label,
5154#UITourTooltipButtons > button .button-text {
5155 font-size: 1.15rem;
5156}
5157
5158#UITourTooltipButtons > button:not(.button-link) {
5159 -moz-appearance: none;
5160 background-color: #C09070;
5161 border-radius: 3000px;
5162 border: none;
5163 color: #000000;
5164 padding: 4px 30px;
5165 transition-property: background-color, color;
5166 transition-duration: 150ms;
5167}
5168
5169#UITourTooltipButtons > button:not(.button-link):not(:active):hover {
5170 background-color: #FFCF00;
5171 color: #000000;
5172}
5173
5174#UITourTooltipButtons > label,
5175#UITourTooltipButtons > button.button-link {
5176 -moz-appearance: none;
5177 background: transparent;
5178 border: none;
5179 box-shadow: none;
5180 color: rgba(0,0,0,0.35);
5181 padding-left: 10px;
5182 padding-right: 10px;
5183}
5184
5185#UITourTooltipButtons > button.button-link:hover {
5186 color: black;
5187}
5188
5189/* The primary button gets the same color as the customize button. */
5190#UITourTooltipButtons > button.button-primary {
5191 background-color: #A06060; /* LCARS default button background color */
5192 color: #000000;
5193 padding-left: 30px;
5194 padding-right: 30px;
5195}
5196
5197#UITourTooltipButtons > button.button-primary:not(:active):hover {
5198 background-color: #FFCF00;
5199 color: #000000;
5200}
5201
5202/* Notification overrides for Heartbeat UI */
5203
5204notification.heartbeat {
5205 background-color: #A09090;
5206/* height: 40px;*/
5207}
5208
5209@keyframes pulse-onshow {
5210 0% {
5211 opacity: 0;
5212 transform: scale(1.0);
5213 }
5214 25% {
5215 opacity: 1;
5216 transform: scale(1.1);
5217 }
5218 50% {
5219 transform: scale(1.0);
5220 }
5221 75% {
5222 transform: scale(1.1);
5223 }
5224 100% {
5225 transform: scale(1.0);
5226 }
5227}
5228
5229@keyframes pulse-twice {
5230 0% {
5231 transform: scale(1.1);
5232 }
5233 50% {
5234 transform: scale(0.8);
5235 }
5236 100% {
5237 transform: scale(1);
5238 }
5239}
5240
5241.messageText.heartbeat {
5242 color: #000000;
5243/* text-shadow: none; */
5244 margin-inline-start: 0px;
5245}
5246
5247.messageImage.heartbeat {
5248 width: 24px;
5249 height: 24px;
5250 margin-inline-start: 8px;
5251 margin-inline-end: 8px;
5252}
5253
5254.messageImage.heartbeat.pulse-onshow {
5255 animation-name: pulse-onshow;
5256 animation-duration: 1.5s;
5257 animation-iteration-count: 1;
5258 animation-timing-function: cubic-bezier(.7,1.8,.9,1.1);
5259}
5260
5261.messageImage.heartbeat.pulse-twice {
5262 animation-name: pulse-twice;
5263 animation-duration: 1s;
5264 animation-iteration-count: 2;
5265 animation-timing-function: linear;
5266}
5267
5268/* Learn More link styles */
5269.heartbeat > .text-link {
5270 color: #3333FF;
5271 margin-inline-start: 0px;
5272}
5273
5274.heartbeat > .text-link:hover {
5275 color: #9C9CFF;
5276 text-decoration: none;
5277}
5278
5279.heartbeat > .text-link:hover:active {
5280 color: #FF9F00;
5281}
5282
5283/* Heartbeat UI Rating Star Classes */
5284.heartbeat > #star-rating-container {
5285 display: -moz-box;
5286/* margin-bottom: 4px;*/
5287}
5288
5289.heartbeat > #star-rating-container > #star5 {
5290 -moz-box-ordinal-group: 5;
5291}
5292
5293.heartbeat > #star-rating-container > #star4 {
5294 -moz-box-ordinal-group: 4;
5295}
5296
5297.heartbeat > #star-rating-container > #star3 {
5298 -moz-box-ordinal-group: 3;
5299}
5300
5301.heartbeat > #star-rating-container > #star2 {
5302 -moz-box-ordinal-group: 2;
5303}
5304
5305.heartbeat > #star-rating-container > .star-x {
5306 background: url("chrome://browser/skin/heartbeat-star-off.svg");
5307 cursor: pointer;
5308 /* Overrides the margin-inline-end for all platforms defined in the .plain class */
5309 margin-inline-end: 4px !important;
5310 width: 16px;
5311 height: 16px;
5312}
5313
5314.heartbeat > #star-rating-container > .star-x:hover,
5315.heartbeat > #star-rating-container > .star-x:hover ~ .star-x {
5316 background: url("chrome://browser/skin/heartbeat-star-lit.svg");
5317}
5318
5319/* === END UITour.inc.css === */
5320
5321#UITourTooltipButtons {
5322 /**
5323 * Override the --panel-arrowcontent-padding so the background extends
5324 * to the sides and bottom of the panel.
5325 */
5326 margin-left: -10px;
5327 margin-right: -10px;
5328 margin-bottom: -10px;
5329}
5330
5331/* === BEGIN contextmenu.inc.css === */
5332
5333menugroup > .menuitem-iconic[disabled="true"] > .menu-iconic-left {
5334}
5335
5336#context-navigation > .menuitem-iconic {
5337 -moz-box-flex: 1;
5338 -moz-box-pack: center;
5339 -moz-box-align: center;
5340}
5341
5342#context-navigation > .menuitem-iconic[disabled="true"] {
5343 background-color: transparent;
5344}
5345
5346#context-navigation > .menuitem-iconic > .menu-iconic-left {
5347 -moz-appearance: none;
5348}
5349
5350#context-navigation > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
5351 width: 16px;
5352 height: 16px;
5353 margin: 7px;
5354 filter: url(chrome://browser/skin/filters.svg#fill);
5355 fill: currentColor;
5356}
5357
5358#context-back {
5359 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back");
5360}
5361
5362#context-forward {
5363 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward");
5364}
5365
5366#context-reload {
5367 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload");
5368}
5369
5370#context-stop {
5371 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop");
5372}
5373
5374#context-bookmarkpage {
5375 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark");
5376}
5377
5378#context-bookmarkpage[starred=true] {
5379 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked");
5380}
5381
5382#context-back:-moz-locale-dir(rtl),
5383#context-forward:-moz-locale-dir(rtl),
5384#context-reload:-moz-locale-dir(rtl) {
5385 transform: scaleX(-1);
5386}
5387
5388#context-navigation > #context-reload > .menu-iconic-left > .menu-iconic-icon,
5389#context-navigation > #context-stop > .menu-iconic-left > .menu-iconic-icon {
5390 width: 14px;
5391 height: 14px;
5392 margin: 9px;
5393}
5394
5395#context-media-eme-learnmore {
5396 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
5397}
5398
5399#context-media-eme-learnmore {
5400 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
5401}
5402
5403/* === END contextmenu.inc.css === */
5404
5405#context-navigation {
5406}
5407
5408#context-sep-navigation {
5409/* margin-top: -4px; */
5410}
5411
5412.browser-extension-panel > .panel-arrowcontainer > .panel-arrowcontent {
5413 padding: 0;
5414 overflow: hidden;
5415}
5416
5417.webextension-popup-browser {
5418 border-radius: inherit;
5419}
KaiRo's SeaMonkey themes