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