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