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