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