make Australis work with more button states
[themes.git] / LCARStrek / browser / customizableui / panelUIOverlay.css
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 /* === BEGIN panelUIOverlay.inc.css === */
6
7 #customization-panelHolder {
8   border-radius: 4px;
9 }
10
11 .panel-subviews {
12   background-color: #000000;
13   -moz-margin-start: 38px;
14 }
15
16 .panel-subviews:-moz-locale-dir(rtl) {
17 }
18
19 .panel-viewstack[viewtype="main"] > .panel-subviews {
20   transform: translateX(21em);
21 }
22
23 .panel-viewstack[viewtype="main"] > .panel-subviews:-moz-locale-dir(rtl) {
24   transform: translateX(-21em);
25 }
26
27 .panel-viewstack:not([viewtype="main"]) > .panel-mainview > #PanelUI-mainView {
28   -moz-box-flex: 1;
29 }
30
31 #PanelUI-mainView {
32   display: flex;
33   flex-direction: column;
34   border-radius: 4px;
35 }
36
37 #app-extension-point-end > #PanelUI-menu-button {
38   padding: 2px 5px;
39 }
40 #app-extension-point-end > #PanelUI-menu-button .toolbarbutton-text {
41   display: none;
42 }
43 #app-extension-point-end > #PanelUI-menu-button .toolbarbutton-icon {
44   margin: 0;
45 }
46
47 #PanelUI-popup > arrowscrollbox > autorepeatbutton {
48   display: none;
49 }
50 #PanelUI-popup > arrowscrollbox > scrollbox {
51   overflow: visible;
52 }
53
54 #PanelUI-popup > .panel-arrowcontainer > .panel-arrowcontent {
55   overflow: hidden;
56   padding: 0;
57 }
58
59 #PanelUI-contents {
60   padding: .5em 0;
61 }
62
63 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > .toolbarbutton-text,
64 #bookmarks-menu-button > toolbarbutton > .toolbarbutton-text,
65 :-moz-any(#PanelUI-contents,#widget-overflow-list) > toolbarpaletteitem > toolbaritem > toolbarbutton > .toolbarbutton-text,
66 :-moz-any(#PanelUI-contents,#widget-overflow-list) > toolbaritem > toolbarbutton > .toolbarbutton-text,
67 :-moz-any(#PanelUI-contents,#widget-overflow-list) > toolbarpaletteitem > toolbarbutton > .toolbarbutton-text,
68 :-moz-any(#PanelUI-contents,#widget-overflow-list) > toolbarbutton > .toolbarbutton-text {
69   font-size: 10px;
70 }
71
72 #wrapper-edit-controls:-moz-any([place="palette"],[place="panel"]) > #edit-controls,
73 #wrapper-zoom-controls:-moz-any([place="palette"],[place="panel"]) > #zoom-controls {
74   -moz-margin-start: 0;
75 }
76
77 #PanelUI-contents,
78 .panel-mainview:not([panelid="PanelUI-popup"]) {
79   max-width: 21em;
80 }
81
82 panelview:not([mainview]) .toolbarbutton-text,
83 #customizationui-widget-panel toolbarbutton > .toolbarbutton-text {
84   text-align: start;
85   -moz-padding-start: 8px;
86   display: -moz-box;
87 }
88
89 #PanelUI-contents {
90   display: block;
91   flex: auto;
92   margin-left: auto;
93   margin-right: auto;
94   max-width: 21em;
95 }
96
97 #PanelUI-contents-scroller {
98   overflow-y: auto;
99   overflow-x: hidden;
100   width: 21em;
101   padding-left: 5px;
102   padding-right: 5px;
103   flex: auto;
104 }
105
106 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > toolbarbutton > .toolbarbutton-icon,
107 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > toolbarbutton > .toolbarbutton-icon {
108   min-width: 0;
109   min-height: 0;
110   margin: 0;
111 }
112
113 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item),
114 #PanelUI-contents toolbarbutton,
115 toolbarpaletteitem[place="panel"] > toolbarbutton,
116 toolbarpaletteitem[place="palette"] > toolbarbutton,
117 toolbarpaletteitem[place="panel"] > toolbaritem > toolbarbutton,
118 toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton,
119 .panel-customization-placeholder {
120   -moz-appearance: none;
121   -moz-box-orient: vertical;
122   min-width: 7em;
123   max-width: 7em;
124   height: 6em;
125   max-height: 6em;
126   padding: 0;
127   margin: 0;
128 }
129
130 .panel-customization-placeholder[expand],
131 .panel-customization-placeholder[contract] {
132   transition-property: width;
133   transition-duration: 170ms;
134   transition-delay: 20ms;
135   transition-timing-function: ease-in-out;
136   min-width: 0;
137   max-width: none;
138 }
139
140 .panel-combined-button[disabled] > .toolbarbutton-icon {
141 /*  opacity: .5; */
142 }
143
144 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"] {
145   width: 7em;
146   margin: 0 !important;
147 }
148
149 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-widget) {
150   -moz-box-align: center;
151   -moz-box-pack: center;
152 }
153
154 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"] > iframe {
155   margin: calc(5em / 12) auto;
156 }
157
158 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > .toolbarbutton-text {
159   text-align: center;
160 }
161
162 .panel-customization-placeholder-child > .toolbarbutton-icon,
163 #bookmarks-menu-button[cui-areatype="menu-panel"] > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
164 toolbarbutton[cui-areatype="menu-panel"] > .toolbarbutton-icon,
165 toolbaritem[cui-areatype="menu-panel"] > toolbarbutton > .toolbarbutton-icon,
166 toolbarpaletteitem[place="palette"] > #bookmarks-menu-button > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
167 toolbarpaletteitem[place="palette"] > toolbarbutton > .toolbarbutton-icon,
168 toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton > .toolbarbutton-icon {
169   min-width: calc(8em / 3);
170   min-height: calc(8em / 3);
171   margin: calc(5em / 12);
172 }
173
174 toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
175   -moz-box-flex: 1;
176 }
177
178 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #copy-button,
179 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #zoom-reset-button {
180   border-left: none;
181   border-right: none;
182   border-radius: 0;
183 }
184
185 #zoom-in-button > .toolbarbutton-text,
186 #zoom-out-button > .toolbarbutton-text,
187 #zoom-reset-button > .toolbarbutton-icon {
188   display: none;
189 }
190
191 #PanelUI-footer {
192   display: flex;
193   background-color: #000000;
194   border-top: 1px solid #9C9CFF;
195   padding: 0;
196   margin: 0;
197   min-height: 4em;
198   border-bottom-right-radius: 4px;
199   border-bottom-left-radius: 4px;
200 }
201
202 #PanelUI-help,
203 #PanelUI-customize,
204 #PanelUI-quit {
205   margin: 0;
206   padding: 10px 0;
207   -moz-appearance: none;
208   box-shadow: none;
209   background-image: none;
210   border: 1px solid transparent;
211   border-bottom-style: none;
212   border-radius: 0;
213   transition: background-color;
214   -moz-box-orient: horizontal;
215 }
216
217 #PanelUI-help,
218 #PanelUI-quit {
219   min-width: 46px;
220 }
221
222 #PanelUI-customize > .toolbarbutton-text {
223   text-align: start;
224 }
225
226 #PanelUI-help > .toolbarbutton-text,
227 #PanelUI-quit > .toolbarbutton-text {
228   display: none;
229 }
230
231 #PanelUI-help > .toolbarbutton-icon,
232 #PanelUI-quit > .toolbarbutton-icon {
233   -moz-margin-end: 0;
234 }
235
236 #PanelUI-customize {
237   flex: 1;
238   -moz-padding-start: 15px;
239   -moz-border-start-style: none;
240   list-style-image: url("chrome://browser/skin/menuPanel-customize.png");
241 }
242
243 #PanelUI-help {
244   list-style-image: url("chrome://browser/skin/menuPanel-help.png");
245 }
246
247 #PanelUI-quit {
248   -moz-border-end-style: none;
249   list-style-image: url("chrome://browser/skin/menuPanel-exit.png");
250 }
251
252 #PanelUI-customize,
253 #PanelUI-help,
254 #PanelUI-quit {
255   -moz-image-region: rect(0, 16px, 16px, 0);
256 }
257
258 #PanelUI-customize:hover,
259 #PanelUI-help:not([disabled]):hover,
260 #PanelUI-quit:not([disabled]):hover,
261 #PanelUI-customize:hover:active,
262 #PanelUI-help:not([disabled]):hover:active,
263 #PanelUI-quit:not([disabled]):hover:active {
264   -moz-image-region: rect(0, 32px, 16px, 16px);
265 }
266
267 #PanelUI-help[disabled],
268 #PanelUI-quit[disabled] {
269   -moz-image-region: rect(0, 48px, 16px, 32px);
270 }
271
272 #PanelUI-help:not([disabled]):hover,
273 #PanelUI-customize:hover,
274 #PanelUI-quit:not([disabled]):hover {
275 /*  border-color: rgba(8,25,42,0.2);
276   border-top-color: rgba(8,25,42,0.1);
277   background-color: rgba(0,0,0,0.1);
278   box-shadow: none;*/
279 }
280
281 #main-window[customize-entered] #PanelUI-customize {
282   color: #FFCF00;
283   background-color: #008484;
284 }
285
286 #main-window[customize-entered] #PanelUI-customize:hover,
287 #main-window[customize-entered] #PanelUI-customize:hover:active {
288   color: #000000;
289   background-color: #FFCF00;
290 }
291
292 #customization-palette .toolbarbutton-text {
293   display: none;
294 }
295
296 panelview toolbarbutton,
297 #widget-overflow-list > toolbarbutton,
298 .customizationmode-button,
299 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > toolbarbutton,
300 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > toolbarbutton,
301 #BMB_bookmarksPopup > menu,
302 #BMB_bookmarksPopup > menuitem {
303   -moz-appearance: none;
304   padding: 2px 6px;
305 /*  background-color: hsla(210,4%,10%,0);
306   border-radius: 2px;
307   border: 1px solid;
308   border-color: hsla(210,4%,10%,0);*/
309   transition-property: background-color, border-color;
310   transition-duration: 150ms;
311 }
312
313 panelview .toolbarbutton-1,
314 #widget-overflow-list > toolbarbutton {
315   margin-top: 6px;
316 }
317 /*
318 panelview toolbarbutton:not(:-moz-any([disabled],[checked="true"],[open],:active)):hover,
319 #widget-overflow-list > toolbarbutton:not(:-moz-any([disabled],[checked="true"],[open],:active)):hover,
320 .customizationmode-button,
321 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > toolbarbutton:not(:-moz-any([disabled],[checked="true"],[open],:active)):hover,
322 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > toolbarbutton:not(:-moz-any([disabled],[checked="true"],[open],:active)):hover,
323 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem):not(:-moz-any([disabled],[checked="true"],[open],:active)):hover,
324 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem):not(:-moz-any([disabled],[checked="true"],[open],:active)):hover,
325 #BMB_bookmarksPopup > menu:not(:-moz-any([disabled],[checked="true"],[open],:active)):hover,
326 #BMB_bookmarksPopup > menuitem:not(:-moz-any([disabled],[checked="true"],[open],:active)):hover {
327   background-color: hsla(210,4%,10%,.08);
328   border-color: hsla(210,4%,10%,.1);
329 }
330
331 panelview toolbarbutton:not([disabled]):-moz-any([open],[checked="true"],:hover:active),
332 .customizationmode-button:not([disabled]):-moz-any([open],[checked="true"],:hover:active),
333 #widget-overflow-list > toolbarbutton:not([disabled]):-moz-any([open],[checked="true"],:hover:active),
334 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > toolbarbutton:not([disabled]):-moz-any([open],[checked="true"],:hover:active),
335 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > toolbarbutton:not([disabled]):-moz-any([open],[checked="true"],:hover:active),
336 #BMB_bookmarksPopup > menu:not([disabled]):-moz-any([open],[checked="true"],:hover:active),
337 #BMB_bookmarksPopup > menuitem:not([disabled]):-moz-any([open],[checked="true"],:hover:active) {
338   background-color: hsla(210,4%,10%,.15);
339   border-color: hsla(210,4%,10%,.15);
340   box-shadow: 0 1px 0 0 hsla(210,4%,10%,.05) inset;
341 }
342 */
343 #BMB_bookmarksPopup > menu,
344 #BMB_bookmarksPopup > menuitem {
345   font: inherit;
346 }
347
348 #BMB_bookmarksPopup > menu:not([disabled="true"]),
349 #BMB_bookmarksPopup > menuitem:not([disabled="true"]) {
350   color: inherit;
351 }
352
353 #BMB_bookmarksPopup > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-up,
354 #BMB_bookmarksPopup > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-down {
355   -moz-appearance: none;
356   margin-top: 0;
357   margin-bottom: 0;
358 }
359
360 panelview toolbarseparator,
361 #BMB_bookmarksPopup > menuseparator {
362   -moz-appearance: none;
363   min-height: 0;
364   border-top: 1px solid ThreeDShadow;
365   margin: 5px 0;
366 }
367
368 #PanelUI-historyItems > toolbarbutton {
369   list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
370 }
371
372 #PanelUI-recentlyClosedWindows > toolbarbutton > .toolbarbutton-icon,
373 #PanelUI-recentlyClosedTabs > toolbarbutton > .toolbarbutton-icon,
374 #PanelUI-historyItems > toolbarbutton > .toolbarbutton-icon {
375   width: 16px;
376   height: 16px;
377 }
378
379 #PanelUI-footer.panel-multiview-anchor,
380 #PanelUI-footer.panel-multiview-anchor > #PanelUI-help,
381 toolbarbutton.panel-multiview-anchor {
382 /*  background-color: Highlight;
383   background-image: linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0));
384   background-repeat: repeat-x;
385   color: HighlightText;*/
386 }
387
388 toolbarpaletteitem[place="palette"] > #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker,
389 #bookmarks-menu-button[cui-areatype="menu-panel"] > .toolbarbutton-menubutton-dropmarker {
390   display: none;
391 }
392
393 #search-container[cui-areatype="menu-panel"] {
394   width: 21em;
395 }
396
397 toolbarpaletteitem[place="palette"] > #search-container {
398   min-width: 7em;
399   width: 7em;
400 }
401
402 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem),
403 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) {
404 /*  background-color: hsla(210,4%,10%,0);
405   border-radius: 2px;
406   border: 1px solid;
407   border-color: hsla(210,4%,10%,0);
408   border-bottom-color: hsla(210,4%,10%,.1);*/
409   padding: 0;
410   margin-bottom: -1px;
411   transition-property: background-color, border-color;
412   transition-duration: 150ms;
413 }
414
415 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > toolbarbutton,
416 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > toolbarbutton {
417   border: 0;
418   padding: .5em;
419   margin: 0;
420   -moz-box-flex: 1;
421   /* reduce the width with 2px for each button to compensate for two separators
422      of 3px. */
423   min-width: calc(7em - 2px);
424   max-width: calc(7em - 2px);
425   height: auto;
426   max-height: none;
427   -moz-box-orient: horizontal;
428 }
429
430 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > toolbarbutton[disabled] > .toolbarbutton-icon,
431 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > toolbarbutton[disabled] > .toolbarbutton-icon {
432 /*  opacity: .25; */
433 }
434
435 #zoom-controls[cui-areatype="toolbar"] > #zoom-reset-button > .toolbarbutton-text {
436   min-width: 7ch;
437 }
438
439 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #cut-button:-moz-locale-dir(ltr),
440 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #paste-button:-moz-locale-dir(rtl),
441 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #zoom-out-button:-moz-locale-dir(ltr),
442 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #zoom-in-button:-moz-locale-dir(rtl) {
443   border-top-right-radius: 0;
444   border-bottom-right-radius: 0;
445 }
446
447 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #cut-button:-moz-locale-dir(rtl),
448 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #paste-button:-moz-locale-dir(ltr),
449 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #zoom-out-button:-moz-locale-dir(rtl),
450 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #zoom-in-button:-moz-locale-dir(ltr) {
451   border-top-left-radius: 0;
452   border-bottom-left-radius: 0;
453 }
454
455 #edit-controls > separator,
456 #zoom-controls > separator {
457   width: 3px;
458   -moz-box-align: stretch;
459 /*  background-image: linear-gradient(to bottom, hsla(0,0%,100%,0), hsla(0,0%,100%,.3) 40%, hsla(0,0%,100%,.3) 60%, hsla(0,0%,100%,0)),
460                     linear-gradient(to bottom, hsla(210,54%,20%,0), hsla(210,54%,20%,.15) 40%, hsla(210,54%,20%,.15) 60%, hsla(210,54%,20%,0)),
461                     linear-gradient(to bottom, hsla(0,0%,100%,0), hsla(0,0%,100%,.3) 40%, hsla(0,0%,100%,.3) 60%, hsla(0,0%,100%,0));
462   background-size: 1px, 1px, 1px;
463   background-position: 0 0, 1px 0, 2px 0;
464   background-repeat: no-repeat;*/
465 }
466
467 #widget-overflow > .panel-arrowcontainer > .panel-arrowcontent {
468   padding: 0;
469 }
470
471 #widget-overflow-scroller {
472   max-height: 30em;
473   overflow-y: auto;
474   overflow-x: hidden;
475   margin-top: 10px;
476   margin-bottom: 10px;
477 }
478
479 #widget-overflow-list {
480   width: 21em;
481   padding-left: 10px;
482   padding-right: 10px;
483 }
484
485 #widget-overflow-list > .overflowedItem {
486   width: 100%;
487   max-width: 21em;
488   min-height: 36px;
489   background-repeat: no-repeat;
490   background-position: 0 center;
491 }
492
493 #widget-overflow-list > toolbarbutton,
494 #widget-overflow-list > toolbarbutton > toolbarbutton {
495   -moz-box-align: center;
496   -moz-box-orient: horizontal;
497 }
498
499 #widget-overflow-list > toolbarbutton > .toolbarbutton-text,
500 #widget-overflow-list > #bookmarks-menu-button > toolbarbutton > .toolbarbutton-text {
501   text-align: start;
502   -moz-padding-start: .5em;
503 }
504
505 #widget-overflow-list > #edit-controls,
506 #widget-overflow-list > #zoom-controls {
507   min-height: 28px;
508 }
509
510 #PanelUI-developerItems > toolbarbutton[checked="true"],
511 #PanelUI-bookmarks > toolbarbutton[checked="true"],
512 .PanelUI-characterEncodingView-list > toolbarbutton[current] {
513   -moz-padding-start: 4px;
514 }
515
516 #PanelUI-developerItems > toolbarbutton[checked="true"] > .toolbarbutton-text,
517 #PanelUI-bookmarks > toolbarbutton[checked="true"] > .toolbarbutton-text,
518 .PanelUI-characterEncodingView-list > toolbarbutton[current] > .toolbarbutton-text,
519 #customizationui-widget-panel .PanelUI-characterEncodingView-list > toolbarbutton[current] > .toolbarbutton-text {
520   -moz-padding-start: 0px;
521 }
522
523 #BMB_bookmarksPopup > menuitem[checked="true"]::before,
524 #PanelUI-bookmarks > toolbarbutton[checked="true"]::before,
525 #PanelUI-developerItems > toolbarbutton[checked="true"]::before,
526 .PanelUI-characterEncodingView-list > toolbarbutton[current]::before {
527   content: "✓";
528   display: -moz-box;
529   width: 12px;
530 }
531
532 #PanelUI-bookmarks > toolbarbutton[checked="true"]::before,
533 #PanelUI-developerItems > toolbarbutton[checked="true"]::before,
534 .PanelUI-characterEncodingView-list > toolbarbutton[current]::before {
535   -moz-margin-end: -2px;
536 }
537
538 #BMB_bookmarksPopup > menuitem[checked="true"] > .menu-iconic-left {
539   display: none;
540 }
541
542 /* === END panelUIOverlay.inc.css === */
543
544 #PanelUI-contents #zoom-out-btn {
545   padding-left: 12px;
546   padding-right: 12px;
547 }
548
549 #PanelUI-contents #zoom-in-btn {
550   padding-left: 12px;
551   padding-right: 12px;
552 }
553
554 #BMB_bookmarksPopup > menu,
555 #BMB_bookmarksPopup > menuitem {
556   padding-top: 1px;
557   padding-bottom: 1px;
558 }
559
560 #BMB_bookmarksPopup > menu > .menu-text,
561 #BMB_bookmarksPopup > menuitem > .menu-text,
562 #BMB_bookmarksPopup > menu > .menu-iconic-text,
563 #BMB_bookmarksPopup > menuitem > .menu-iconic-text,
564 #BMB_bookmarksPopup > menuseparator {
565   padding-top: 0;
566   padding-bottom: 0;
567 }