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