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