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