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