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