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