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