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