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