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