The Tor Browser / file comparison

comparison: browser/themes/shared/customizableui/panelUIOverlay.inc.css

browser/themes/shared/customizableui/panelUIOverlay.inc.css

branch
TOR_BUG_3246
changeset 6
8bccb770b82d
equal deleted inserted replaced
-1:000000000000 0:26e25c47fc74
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 %filter substitution
6
7 %define menuPanelWidth 22.35em
8 %define standaloneSubviewWidth 30em
9 % XXXgijs This is the ugliest bit of code I think I've ever written for Mozilla.
10 % Basically, the 0.1px is there to avoid CSS rounding errors causing buttons to wrap.
11 % For gory details, refer to https://bugzilla.mozilla.org/show_bug.cgi?id=963365#c11
12 % There's no calc() here (and therefore lots of calc() where this is used) because
13 % we don't support nested calc(): https://bugzilla.mozilla.org/show_bug.cgi?id=968761
14 %define menuPanelButtonWidth (@menuPanelWidth@ / 3 - 0.1px)
15 %define exitSubviewGutterWidth 38px
16 %define buttonStateHover :not(:-moz-any([disabled],[open],:active)):hover
17 %define menuStateHover :not(:-moz-any([disabled],:active))[_moz-menuactive]
18 %define buttonStateActive :not([disabled]):-moz-any([open],:hover:active)
19 %define menuStateActive :not([disabled])[_moz-menuactive]:active
20
21 %include ../browser.inc
22
23 #PanelUI-popup #PanelUI-contents:empty {
24 height: 128px;
25 }
26
27 #PanelUI-popup #PanelUI-contents:empty::before {
28 content: "";
29 background-image: url(chrome://browser/skin/customizableui/whimsy-bw.png);
30 display: block;
31 width: 64px;
32 height: 64px;
33 position: absolute;
34 animation: moveX 3.05s linear 0s infinite alternate,
35 moveY 3.4s linear 0s infinite alternate;
36 }
37
38 #PanelUI-popup #PanelUI-contents:-moz-locale-dir(rtl):empty::before {
39 animation: moveXRTL 3.05s linear 0s infinite alternate,
40 moveY 3.4s linear 0s infinite alternate;
41 }
42
43 #PanelUI-popup #PanelUI-contents:empty:hover::before {
44 background-image: url(chrome://browser/skin/customizableui/whimsy.png);
45 }
46
47 @media (min-resolution: 2dppx) {
48 #PanelUI-popup #PanelUI-contents:empty::before {
49 background-image: url(chrome://browser/skin/customizableui/whimsy-bw@2x.png);
50 background-size: 64px 64px;
51 }
52 #PanelUI-popup #PanelUI-contents:empty:hover::before {
53 background-image: url(chrome://browser/skin/customizableui/whimsy@2x.png);
54 }
55 }
56
57 @keyframes moveX {
58 /* These values are adjusted for the padding on the panel. */
59 from { margin-left: -15px; } to { margin-left: calc(100% - 49px); }
60 }
61
62 @keyframes moveXRTL {
63 /* These values are adjusted for the padding on the panel. */
64 from { margin-right: -15px; } to { margin-right: calc(100% - 49px); }
65 }
66
67 @keyframes moveY {
68 /* These values are adjusted for the padding and height of the panel. */
69 from { margin-top: -.5em; } to { margin-top: calc(64px - .5em); }
70 }
71
72 #PanelUI-button {
73 background-image: linear-gradient(to bottom, hsla(0,0%,100%,0), hsla(0,0%,100%,.3) 30%, hsla(0,0%,100%,.3) 70%, hsla(0,0%,100%,0)),
74 linear-gradient(to bottom, hsla(210,54%,20%,0), hsla(210,54%,20%,.3) 30%, hsla(210,54%,20%,.3) 70%, hsla(210,54%,20%,0)),
75 linear-gradient(to bottom, hsla(0,0%,100%,0), hsla(0,0%,100%,.3) 30%, hsla(0,0%,100%,.3) 70%, hsla(0,0%,100%,0));
76 background-size: 1px calc(100% - 1px), 1px calc(100% - 1px), 1px calc(100% - 1px) !important;
77 background-position: 0px 0px, 1px 0px, 2px 0px;
78 background-repeat: no-repeat;
79 }
80
81 #PanelUI-button:-moz-locale-dir(rtl) {
82 background-position: 100% 0, calc(100% - 1px) 0, calc(100% - 2px) 0;
83 }
84
85 .panel-subviews {
86 padding: 4px;
87 background-color: hsla(0,0%,100%,.97);
88 background-clip: padding-box;
89 border-left: 1px solid hsla(210,4%,10%,.3);
90 box-shadow: 0 3px 5px hsla(210,4%,10%,.1),
91 0 0 7px hsla(210,4%,10%,.1);
92 color: hsl(0,0%,15%);
93 -moz-margin-start: @exitSubviewGutterWidth@;
94 }
95
96 .panel-viewstack[viewtype="main"] > .panel-subviews {
97 transform: translateX(@menuPanelWidth@);
98 }
99
100 .panel-viewstack[viewtype="main"] > .panel-subviews:-moz-locale-dir(rtl) {
101 transform: translateX(-@menuPanelWidth@);
102 }
103
104 panelmultiview[nosubviews=true] > .panel-viewcontainer > .panel-viewstack > .panel-subviews {
105 display: none;
106 }
107
108 .panel-viewstack:not([viewtype="main"]) > .panel-mainview > #PanelUI-mainView {
109 -moz-box-flex: 1;
110 }
111
112 .panel-subview-body {
113 overflow-y: auto;
114 overflow-x: hidden;
115 -moz-box-flex: 1;
116 }
117
118 #PanelUI-popup .panel-subview-body {
119 margin: -4px;
120 padding: 4px 4px;
121 }
122
123 .panel-subview-header,
124 .subviewbutton.panel-subview-footer {
125 padding: 12px;
126 }
127
128 .panel-subview-header {
129 margin: -4px -4px 4px;
130 background-color: hsla(210,4%,10%,.05);
131 box-shadow: 0 -1px 0 hsla(210,4%,10%,.05) inset;
132 color: hsl(0,0%,50%);
133 }
134
135 .cui-widget-panelview .panel-subview-header {
136 display: none;
137 }
138
139 .cui-widget-panelview .subviewbutton.panel-subview-footer {
140 margin: 4px 0 0;
141 -moz-box-pack: center;
142 }
143
144 #PanelUI-mainView {
145 display: flex;
146 flex-direction: column;
147 }
148
149 #app-extension-point-end > #PanelUI-menu-button {
150 padding: 2px 5px;
151 }
152 #app-extension-point-end > #PanelUI-menu-button .toolbarbutton-text {
153 display: none;
154 }
155 #app-extension-point-end > #PanelUI-menu-button .toolbarbutton-icon {
156 margin: 0;
157 }
158
159 #PanelUI-popup > arrowscrollbox > autorepeatbutton {
160 display: none;
161 }
162 #PanelUI-popup > arrowscrollbox > scrollbox {
163 overflow: visible;
164 }
165
166 #PanelUI-popup > .panel-arrowcontainer > .panel-arrowcontent {
167 overflow: hidden;
168 }
169
170 #PanelUI-popup > .panel-arrowcontainer > .panel-arrowcontent,
171 .cui-widget-panel > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box {
172 padding: 0;
173 }
174
175 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
176 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-multiline-text {
177 line-height: 1.1;
178 max-height: 2.2em;
179 }
180
181 .panelUI-grid .toolbarbutton-1:not([auto-hyphens="off"]) > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
182 .panelUI-grid .toolbarbutton-1:not([auto-hyphens="off"]) > .toolbarbutton-multiline-text {
183 -moz-hyphens: auto;
184 }
185
186 .panelUI-grid:not([customize-transitioning]) .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
187 .panelUI-grid:not([customize-transitioning]) .toolbarbutton-1 > .toolbarbutton-multiline-text {
188 position: absolute;
189 clip: rect(auto, auto, 2.3em, auto);
190 }
191
192 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-text,
193 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-multiline-text {
194 text-align: center;
195 /* Need to override toolkit theming which sets margin: 0 !important; */
196 margin: 2px 0 0 !important;
197 }
198
199 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text {
200 text-align: center;
201 margin: -1px 0 0;
202 }
203
204 #wrapper-edit-controls:-moz-any([place="palette"],[place="panel"]) > #edit-controls,
205 #wrapper-zoom-controls:-moz-any([place="palette"],[place="panel"]) > #zoom-controls {
206 -moz-margin-start: 0;
207 }
208
209 #PanelUI-contents {
210 max-width: @menuPanelWidth@;
211 }
212
213 #BMB_bookmarksPopup,
214 .panel-mainview:not([panelid="PanelUI-popup"]) {
215 max-width: @standaloneSubviewWidth@;
216 }
217
218 panelview:not([mainview]) .toolbarbutton-text,
219 .cui-widget-panel toolbarbutton > .toolbarbutton-text {
220 text-align: start;
221 display: -moz-box;
222 }
223
224 .cui-widget-panel > .panel-arrowcontainer > .panel-arrowcontent {
225 padding: 4px 0;
226 }
227
228 .cui-widget-panel.cui-widget-panelWithFooter > .panel-arrowcontainer > .panel-arrowcontent {
229 padding-bottom: 0;
230 }
231
232 #PanelUI-contents {
233 display: block;
234 flex: 1 0 auto;
235 margin-left: auto;
236 margin-right: auto;
237 padding: .5em 0;
238 max-width: @menuPanelWidth@;
239 }
240
241 #PanelUI-contents-scroller {
242 overflow-y: auto;
243 overflow-x: hidden;
244 width: @menuPanelWidth@;
245 padding-left: 5px;
246 padding-right: 5px;
247 flex: auto;
248 }
249
250 .toolbaritem-combined-buttons@inAnyPanel@ > toolbarbutton > .toolbarbutton-icon {
251 min-width: 0;
252 min-height: 0;
253 margin: 0;
254 }
255
256 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item),
257 .panelUI-grid .toolbarbutton-1,
258 .panel-customization-placeholder-child {
259 -moz-appearance: none;
260 -moz-box-orient: vertical;
261 width: calc(@menuPanelButtonWidth@);
262 height: calc(51px + 2.2em);
263 }
264
265 /* In order to have button labels constrained appropriately, items inside the toolbarpaletteitem
266 * should have a min-width set so they abide by the width set above (which they do outside of
267 * customize mode because they're in a flexed container) */
268 toolbarpaletteitem[place="panel"]:not([haswideitem=true]) > .toolbarbutton-1 {
269 min-width: 0.01px;
270 }
271
272 /* Help SDK buttons fit in. */
273 toolbarpaletteitem[place="palette"] > toolbarbutton[sdk-button="true"] > .toolbarbutton-icon,
274 toolbarbutton[sdk-button="true"][cui-areatype="menu-panel"] > .toolbarbutton-icon {
275 height: 32px;
276 width: 32px;
277 }
278
279 .customization-palette .toolbarbutton-1 {
280 -moz-appearance: none;
281 -moz-box-orient: vertical;
282 }
283
284 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button {
285 -moz-appearance: none;
286 -moz-box-orient: vertical;
287 width: calc(@menuPanelButtonWidth@ - 2px);
288 height: calc(49px + 2.2em);
289 border: 0;
290 }
291
292 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text,
293 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text {
294 margin-top: 2px; /* Hack needed to get the label of type=menu-button aligned with other buttons */
295 }
296
297 .panel-customization-placeholder-child {
298 margin: 6px 0 0;
299 padding: 2px 6px;
300 border: 1px solid transparent;
301 }
302
303 .panelUI-grid .toolbarbutton-1[type="menu"] {
304 background-image: url("chrome://browser/skin/toolbarbutton-dropdown-arrow.png");
305 background-position: right 3px top 16px;
306 background-repeat: no-repeat;
307 }
308
309 .panelUI-grid .toolbarbutton-1[type="menu"]:-moz-locale-dir(rtl) {
310 background-position: left 3px top 16px;
311 }
312
313 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
314 display: none;
315 }
316
317 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
318 -moz-box-align: center;
319 width: 16px;
320 -moz-margin-start: -16px;
321 height: 51px;
322 margin-bottom: 2.2em;
323 padding: 0;
324 }
325
326 .panelUI-grid .toolbarbutton-1:not([buttonover])@buttonStateHover@ > .toolbarbutton-menubutton-dropmarker {
327 background-color: hsla(210,4%,10%,.1) !important;
328 border-radius: 0 0 0 2px;
329 }
330
331 .panelUI-grid .toolbarbutton-1:not([buttonover])@buttonStateHover@ > .toolbarbutton-menubutton-dropmarker:-moz-locale-dir(rtl) {
332 border-radius: 0 0 2px 0;
333 }
334
335 #main-window:not([customizing]) .panel-combined-button[disabled] > .toolbarbutton-icon {
336 opacity: .5;
337 }
338
339 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) {
340 width: calc(@menuPanelButtonWidth@);
341 margin: 0 !important;
342 }
343
344 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) {
345 -moz-box-align: center;
346 -moz-box-pack: center;
347 }
348
349 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"] > iframe {
350 margin: 4px auto;
351 }
352
353 #PanelUI-multiView[viewtype="subview"] > .panel-viewcontainer > .panel-viewstack > .panel-mainview > #PanelUI-mainView {
354 background-color: hsla(210,4%,10%,.1);
355 }
356
357 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .panel-wide-item,
358 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .toolbarbutton-1:not([panel-multiview-anchor="true"]),
359 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-fxa-status,
360 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > toolbarseparator,
361 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-customize,
362 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-help:not([panel-multiview-anchor="true"]) {
363 opacity: .5;
364 }
365
366 /*
367 * XXXgijs: this is a workaround for a layout issue that was caused by these iframes,
368 * which was affecting subview display. Because of this, we're hiding the iframe *only*
369 * when displaying a subview. The discerning user might notice this, but it's not nearly
370 * as bad as the brokenness.
371 * This hack should be removed once https://bugzilla.mozilla.org/show_bug.cgi?id=975375
372 * is addressed.
373 */
374 #PanelUI-multiView[viewtype="subview"] toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > iframe {
375 visibility: hidden;
376 }
377
378 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > .toolbarbutton-text {
379 text-align: center;
380 }
381
382 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
383 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-icon,
384 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-container,
385 .customization-palette .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
386 .customization-palette .toolbarbutton-1 > .toolbarbutton-icon,
387 .panelUI-grid #bookmarks-toolbar-placeholder > .toolbarbutton-icon,
388 .customization-palette #bookmarks-toolbar-placeholder > .toolbarbutton-icon,
389 .panel-customization-placeholder-child > .toolbarbutton-icon {
390 min-width: 32px;
391 min-height: 32px;
392 /* Explanation for the below formula (A / B - C)
393 A
394 Each button is @menuPanelButtonWidth@ wide
395 B
396 Each button has two margins.
397 C (46px / 2 = 23px)
398 The button icon is 32 pixels wide.
399 The button has 12px of horizontal padding (6 on each side).
400 The button has 2px of horizontal border (1 on each side).
401 Total width of button's icon + button padding should therefore be 46px,
402 which means each horizontal margin should be the half the button's width - (46/2) px.
403 */
404 margin: 4px calc(@menuPanelButtonWidth@ / 2 - 23px);
405 }
406
407 /* above we treat the container as the icon for the margins, that is so the
408 /* badge itself is positioned correctly. Here we make sure that the icon itself
409 /* has the minum size we want, but no padding/margin. */
410 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-container > .toolbarbutton-icon {
411 min-width: 32px;
412 min-height: 32px;
413 margin: 0;
414 padding: 0;
415 }
416
417 toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
418 -moz-box-flex: 1;
419 }
420
421 #personal-bookmarks[overflowedItem=true] > #bookmarks-toolbar-placeholder {
422 -moz-box-flex: 1;
423 }
424
425 #personal-bookmarks[cui-areatype="toolbar"][overflowedItem=true] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
426 -moz-margin-end: 2px;
427 }
428
429 #edit-controls@inAnyPanel@ > #copy-button,
430 #zoom-controls@inAnyPanel@ > #zoom-reset-button {
431 border-left: none;
432 border-right: none;
433 border-radius: 0;
434 }
435
436 #zoom-in-button > .toolbarbutton-text,
437 #zoom-out-button > .toolbarbutton-text,
438 #zoom-reset-button > .toolbarbutton-icon {
439 display: none;
440 }
441
442 #PanelUI-footer {
443 display: flex;
444 flex-shrink: 0;
445 flex-direction: column;
446 background-color: hsla(210,4%,10%,.07);
447 padding: 0;
448 margin: 0;
449 }
450
451 #PanelUI-footer-inner {
452 display: flex;
453 border-top: 1px solid hsla(210,4%,10%,.14);
454 }
455
456 #PanelUI-multiView[viewtype="subview"] #PanelUI-footer-inner {
457 position: relative;
458 }
459
460 #PanelUI-footer-inner > toolbarseparator {
461 border: 0;
462 border-left: 1px solid hsla(210,4%,10%,.14);
463 margin: 7px 0 7px;
464 -moz-appearance: none;
465 }
466
467 #PanelUI-footer-inner:hover > toolbarseparator {
468 margin: 0;
469 }
470
471 #PanelUI-help,
472 #PanelUI-fxa-status,
473 #PanelUI-customize,
474 #PanelUI-quit {
475 margin: 0;
476 padding: 10px 0;
477 min-height: 2em;
478 -moz-appearance: none;
479 box-shadow: none;
480 border: none;
481 border-radius: 0;
482 transition: background-color;
483 -moz-box-orient: horizontal;
484 }
485
486 #PanelUI-fxa-status {
487 border-top: 1px solid hsla(210,4%,10%,.14);
488 border-bottom: 1px solid transparent;
489 margin-bottom: -1px;
490 }
491
492 #PanelUI-fxa-status > .toolbarbutton-text {
493 width: 0; /* Fancy cropping solution for flexbox. */
494 }
495
496 #PanelUI-help,
497 #PanelUI-quit {
498 min-width: 46px;
499 }
500
501 #PanelUI-fxa-status > .toolbarbutton-text,
502 #PanelUI-customize > .toolbarbutton-text {
503 margin: 0;
504 padding: 0 6px;
505 text-align: start;
506 }
507
508 #PanelUI-help > .toolbarbutton-text,
509 #PanelUI-quit > .toolbarbutton-text {
510 display: none;
511 }
512
513 #PanelUI-fxa-status > .toolbarbutton-icon,
514 #PanelUI-customize > .toolbarbutton-icon,
515 #PanelUI-help > .toolbarbutton-icon,
516 #PanelUI-quit > .toolbarbutton-icon {
517 -moz-margin-end: 0;
518 }
519
520 #PanelUI-fxa-status,
521 #PanelUI-customize {
522 flex: 1;
523 -moz-padding-start: 15px;
524 -moz-border-start-style: none;
525 }
526
527 #PanelUI-fxa-status {
528 list-style-image: url(chrome://browser/skin/sync-horizontalbar.png);
529 }
530
531 #PanelUI-fxa-status[status="active"] {
532 list-style-image: url(chrome://browser/skin/syncProgress-horizontalbar.png);
533 }
534
535 #PanelUI-customize {
536 list-style-image: url(chrome://browser/skin/menuPanel-customize.png);
537 }
538
539 #customization-panelHolder #PanelUI-customize {
540 list-style-image: url(chrome://browser/skin/customizableui/menuPanel-customizeFinish.png);
541 }
542
543 #PanelUI-help {
544 list-style-image: url(chrome://browser/skin/menuPanel-help.png);
545 }
546
547 #PanelUI-quit {
548 -moz-border-end-style: none;
549 list-style-image: url(chrome://browser/skin/menuPanel-exit.png);
550 }
551
552 #PanelUI-fxa-status,
553 #PanelUI-customize,
554 #PanelUI-help,
555 #PanelUI-quit {
556 -moz-image-region: rect(0, 16px, 16px, 0);
557 }
558
559 #PanelUI-customize:hover,
560 #PanelUI-help:not([disabled]):hover,
561 #PanelUI-quit:not([disabled]):hover {
562 -moz-image-region: rect(0, 32px, 16px, 16px);
563 }
564
565 #PanelUI-customize:hover:active,
566 #PanelUI-help:not([disabled]):hover:active,
567 #PanelUI-quit:not([disabled]):hover:active {
568 -moz-image-region: rect(0, 48px, 16px, 32px);
569 }
570
571 #PanelUI-help[panel-multiview-anchor="true"] {
572 -moz-image-region: rect(0, 64px, 16px, 48px);
573 }
574
575 #PanelUI-help[disabled],
576 #PanelUI-quit[disabled] {
577 opacity: 0.4;
578 }
579
580 #PanelUI-fxa-status:not([disabled]):hover,
581 #PanelUI-help:not([disabled]):hover,
582 #PanelUI-customize:hover,
583 #PanelUI-quit:not([disabled]):hover {
584 outline: 1px solid hsla(210,4%,10%,.07);
585 background-color: hsla(210,4%,10%,.07);
586 }
587
588 #PanelUI-fxa-status:not([disabled]):hover:active,
589 #PanelUI-help:not([disabled]):hover:active,
590 #PanelUI-customize:hover:active,
591 #PanelUI-quit:not([disabled]):hover:active {
592 outline: 1px solid hsla(210,4%,10%,.12);
593 background-color: hsla(210,4%,10%,.12);
594 box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
595 }
596
597 #PanelUI-fxa-status:not([disabled]):hover,
598 #PanelUI-fxa-status:not([disabled]):hover:active {
599 outline: none;
600 }
601
602 #PanelUI-quit:not([disabled]):hover {
603 background-color: #d94141;
604 outline-color: #c23a3a;
605 }
606
607 #PanelUI-quit:not([disabled]):hover:active {
608 background-color: #ad3434;
609 outline-color: #992e2e;
610 }
611
612 #customization-panelHolder #PanelUI-customize {
613 color: white;
614 background-color: rgb(116,191,67);
615 text-shadow: none;
616 margin-top: -1px;
617 }
618
619 #customization-panelHolder #PanelUI-customize + toolbarseparator {
620 display: none;
621 }
622
623 #customization-panelHolder #PanelUI-customize:hover,
624 #customization-panelHolder #PanelUI-customize:hover:active {
625 background-color: rgb(105,173,61);
626 }
627
628 #customization-palette .toolbarbutton-multiline-text,
629 #customization-palette .toolbarbutton-text {
630 display: none;
631 }
632
633 panelview .toolbarbutton-1,
634 .subviewbutton,
635 .widget-overflow-list .toolbarbutton-1,
636 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button,
637 .toolbaritem-combined-buttons@inAnyPanel@ > toolbarbutton {
638 -moz-appearance: none;
639 padding: 0 6px;
640 background-color: hsla(210,4%,10%,0);
641 border-radius: 2px;
642 border-style: solid;
643 border-color: hsla(210,4%,10%,0);
644 }
645
646 panelview .toolbarbutton-1,
647 .subviewbutton,
648 .widget-overflow-list .toolbarbutton-1,
649 .toolbaritem-combined-buttons@inAnyPanel@ > toolbarbutton {
650 border-width: 1px;
651 }
652
653 .subviewbutton.panel-subview-footer {
654 border-radius: 0;
655 border: none;
656 }
657
658 .subviewbutton.panel-subview-footer > .menu-text {
659 -moz-appearance: none;
660 -moz-margin-start: 0px !important;
661 -moz-padding-start: 6px;
662 -moz-padding-end: 6px;
663 -moz-box-flex: 0;
664 text-align: center;
665 }
666
667 .subviewbutton.panel-subview-footer > .toolbarbutton-icon {
668 margin: 0;
669 }
670
671 .subviewbutton.panel-subview-footer > .toolbarbutton-text {
672 text-align: center;
673 padding: 0;
674 }
675
676 .subviewbutton.panel-subview-footer > .menu-accel-container {
677 -moz-padding-start: 6px;
678 }
679
680 .subviewbutton:not(.panel-subview-footer) {
681 margin: 0;
682 }
683
684 .subviewbutton:not(.panel-subview-footer) > .toolbarbutton-text,
685 /* Bookmark items need a more specific selector. */
686 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-text,
687 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-iconic-text {
688 font: menu;
689 }
690
691 .PanelUI-subView .subviewbutton[shortcut]::after {
692 content: attr(shortcut);
693 float: right;
694 color: hsl(0,0%,50%);
695 }
696
697 .PanelUI-subView.cui-widget-panelview .subviewbutton[shortcut]::after {
698 -moz-margin-start: 10px;
699 }
700
701 /* This is a <label> but it should fit in with the menu font- and colorwise. */
702 #PanelUI-characterEncodingView-autodetect-label {
703 font: menu;
704 color: inherit;
705 }
706
707 .cui-widget-panelview .subviewbutton:not(.panel-subview-footer) {
708 margin-left: 4px;
709 margin-right: 4px;
710 }
711
712 panelview .toolbarbutton-1,
713 .widget-overflow-list .toolbarbutton-1 {
714 margin-top: 6px;
715 }
716
717 panelview .toolbarbutton-1@buttonStateHover@,
718 toolbarbutton.subviewbutton@buttonStateHover@,
719 menu.subviewbutton@menuStateHover@,
720 menuitem.subviewbutton@menuStateHover@,
721 .widget-overflow-list .toolbarbutton-1@buttonStateHover@,
722 .toolbaritem-combined-buttons@inAnyPanel@ > toolbarbutton@buttonStateHover@ {
723 background-color: hsla(210,4%,10%,.08);
724 border-color: hsla(210,4%,10%,.11);
725 }
726
727 .toolbaritem-combined-buttons@inAnyPanel@@buttonStateHover@ {
728 border-color: hsla(210,4%,10%,.11);
729 }
730
731 panelview .toolbarbutton-1:-moz-any(@buttonStateActive@,[checked=true]),
732 toolbarbutton.subviewbutton@buttonStateActive@,
733 menu.subviewbutton@menuStateActive@,
734 menuitem.subviewbutton@menuStateActive@,
735 .widget-overflow-list .toolbarbutton-1@buttonStateActive@,
736 .toolbaritem-combined-buttons@inAnyPanel@ > toolbarbutton@buttonStateActive@ {
737 background-color: hsla(210,4%,10%,.12);
738 border-color: hsla(210,4%,10%,.14);
739 box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset;
740 }
741
742 .subviewbutton.panel-subview-footer {
743 margin: 4px -4px -4px;
744 background-color: hsla(210,4%,10%,.07);
745 border-top: 1px solid hsla(210,4%,10%,.12);
746 border-radius: 0;
747 color: hsl(0,0%,25%)
748 }
749
750 menuitem.panel-subview-footer@menuStateHover@,
751 .subviewbutton.panel-subview-footer@buttonStateHover@ {
752 background-color: hsla(210,4%,10%,.15);
753 border-top: 1px solid hsla(210,4%,10%,.14);
754 }
755
756 menuitem.panel-subview-footer@menuStateActive@,
757 .subviewbutton.panel-subview-footer@buttonStateActive@ {
758 background-color: hsla(210,4%,10%,.19);
759 border-top: 1px solid hsla(210,4%,10%,.14);
760 box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
761 }
762
763 #BMB_bookmarksPopup .subviewbutton {
764 font: menu;
765 font-weight: normal;
766 }
767
768 #BMB_bookmarksPopup .subviewbutton:not([disabled="true"]) {
769 color: inherit;
770 }
771
772 #BMB_bookmarksPopup .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-up,
773 #BMB_bookmarksPopup .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-down {
774 -moz-appearance: none;
775 margin-top: 0;
776 margin-bottom: 0;
777 }
778
779 /* Remove padding on xul:arrowscrollbox to avoid extra padding on footer */
780 #BMB_bookmarksPopup arrowscrollbox {
781 padding-bottom: 0px;
782 }
783
784 #BMB_bookmarksPopup menupopup > .bookmarks-actions-menuseparator {
785 /* Hide bottom separator as the styled footer includes a top border serving the same purpose */
786 display: none;
787 }
788
789 /* Popups with only one item don't have a footer */
790 #BMB_bookmarksPopup menupopup[placespopup=true][singleitempopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
791 /* These popups never have a footer */
792 #BMB_bookmarksToolbarPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
793 #BMB_unsortedBookmarksPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
794 /* And so they need some bottom padding: */
795 padding-bottom: 4px;
796 }
797
798 /* Disabled (empty) item is always alone and never has an icon, so fix its left padding */
799 #BMB_bookmarksPopup menupopup[emptyplacesresult] .bookmark-item.subviewbutton {
800 padding-left: 6px;
801 }
802
803 .PanelUI-subView menuseparator,
804 .PanelUI-subView toolbarseparator,
805 .cui-widget-panelview menuseparator {
806 -moz-appearance: none;
807 min-height: 0;
808 border-top: 1px solid hsla(210,4%,10%,.15);
809 margin: 6px 0;
810 padding: 0;
811 }
812
813 .PanelUI-subView menuseparator,
814 .PanelUI-subView toolbarseparator {
815 -moz-margin-start: -5px;
816 -moz-margin-end: -4px;
817 }
818
819 .PanelUI-subView menuseparator.small-separator,
820 .PanelUI-subView toolbarseparator.small-separator {
821 margin-left: 5px;
822 margin-right: 5px;
823 }
824
825 .cui-widget-panelview menuseparator.small-separator {
826 margin-left: 10px;
827 margin-right: 10px;
828 }
829
830 .subviewbutton > .menu-accel-container {
831 -moz-box-pack: start;
832 -moz-margin-start: 10px;
833 -moz-margin-end: auto;
834 color: hsl(0,0%,50%);
835 }
836
837 #PanelUI-historyItems > toolbarbutton {
838 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
839 }
840
841 #PanelUI-recentlyClosedWindows > toolbarbutton > .toolbarbutton-icon,
842 #PanelUI-recentlyClosedTabs > toolbarbutton > .toolbarbutton-icon,
843 #PanelUI-historyItems > toolbarbutton > .toolbarbutton-icon {
844 width: 16px;
845 height: 16px;
846 }
847
848 toolbarbutton[panel-multiview-anchor="true"],
849 toolbarbutton[panel-multiview-anchor="true"] > .toolbarbutton-menubutton-button {
850 color: HighlightText;
851 background-color: Highlight;
852 }
853
854 #PanelUI-help[panel-multiview-anchor="true"] + toolbarseparator {
855 display: none;
856 }
857
858 #PanelUI-help[panel-multiview-anchor="true"] {
859 background-image: linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0));
860 background-position: 0;
861 }
862
863 #PanelUI-help[panel-multiview-anchor="true"]::after {
864 content: "";
865 position: absolute;
866 top: 0;
867 height: 100%;
868 width: @exitSubviewGutterWidth@;
869 background-image: url(chrome://browser/skin/customizableui/subView-arrow-back-inverted.png),
870 linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0));
871 background-repeat: no-repeat;
872 background-color: Highlight;
873 background-position: left 10px center, 0; /* this doesn't need to be changed for RTL */
874 }
875
876 toolbarbutton[panel-multiview-anchor="true"] {
877 background-image: url(chrome://browser/skin/customizableui/subView-arrow-back-inverted.png),
878 linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0));
879 background-position: right 5px center;
880 background-repeat: no-repeat, repeat;
881 }
882
883 toolbarbutton[panel-multiview-anchor="true"]:-moz-locale-dir(rtl) {
884 background-image: url(chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png),
885 linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0));
886 background-position: left 5px center;
887 }
888
889 toolbarpaletteitem[place="palette"] > .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker,
890 #bookmarks-menu-button[cui-areatype="menu-panel"] > .toolbarbutton-menubutton-dropmarker {
891 display: none;
892 }
893
894 #search-container[cui-areatype="menu-panel"],
895 #wrapper-search-container[place="panel"] {
896 width: @menuPanelWidth@;
897 }
898
899 #search-container[cui-areatype="menu-panel"] {
900 margin-top: 6px;
901 margin-bottom: 6px;
902 }
903
904 toolbarpaletteitem[place="palette"] > #search-container {
905 min-width: 7em;
906 width: 7em;
907 }
908
909 .toolbaritem-combined-buttons@inAnyPanel@ {
910 background-color: hsla(210,4%,10%,0);
911 border-radius: 2px;
912 border: 1px solid;
913 border-color: hsla(210,4%,10%,0);
914 border-bottom-color: hsla(210,4%,10%,.1);
915 padding: 0;
916 transition-property: background-color, border-color;
917 transition-duration: 150ms;
918 }
919
920 /* Make direct siblings overlap borders: */
921 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons@inAnyPanel@ {
922 border-top-color: transparent !important;
923 }
924
925 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons@inAnyPanel@,
926 toolbarpaletteitem[haswideitem][place="panel"] + toolbarpaletteitem[haswideitem][place="panel"] {
927 margin-top: -1px;
928 }
929
930 .toolbaritem-combined-buttons@inAnyPanel@ > toolbarbutton {
931 border: 0;
932 padding: .5em;
933 margin: 0;
934 -moz-box-flex: 1;
935 min-width: calc(@menuPanelButtonWidth@);
936 max-width: calc(@menuPanelButtonWidth@);
937 /* We'd prefer to use height: auto here but it leads to layout bugs in the panel. Cope:
938 1.2em for line height + 2 * .5em padding + margin on the label (2 * 2px) */
939 height: calc(2.2em + 4px);
940 max-height: none;
941 -moz-box-orient: horizontal;
942 }
943
944 #edit-controls@inAnyPanel@ > #copy-button,
945 #zoom-controls@inAnyPanel@ > #zoom-reset-button {
946 /* reduce the width with 2px for this button to compensate for two separators
947 of 1px. */
948 min-width: calc(@menuPanelButtonWidth@ - 2px);
949 max-width: calc(@menuPanelButtonWidth@ - 2px);
950 }
951
952 #main-window:not([customizing]) .toolbaritem-combined-buttons@inAnyPanel@ > toolbarbutton[disabled] > .toolbarbutton-icon {
953 opacity: .25;
954 }
955
956 #zoom-controls[cui-areatype="toolbar"] > #zoom-reset-button > .toolbarbutton-text {
957 %ifdef XP_MACOSX
958 min-width: 6ch;
959 %else
960 min-width: 7ch;
961 %endif
962 }
963
964 #edit-controls@inAnyPanel@ > #cut-button:-moz-locale-dir(ltr),
965 #edit-controls@inAnyPanel@ > #paste-button:-moz-locale-dir(rtl),
966 #zoom-controls@inAnyPanel@ > #zoom-out-button:-moz-locale-dir(ltr),
967 #zoom-controls@inAnyPanel@ > #zoom-in-button:-moz-locale-dir(rtl) {
968 border-top-right-radius: 0;
969 border-bottom-right-radius: 0;
970 }
971
972 #edit-controls@inAnyPanel@ > #cut-button:-moz-locale-dir(rtl),
973 #edit-controls@inAnyPanel@ > #paste-button:-moz-locale-dir(ltr),
974 #zoom-controls@inAnyPanel@ > #zoom-out-button:-moz-locale-dir(rtl),
975 #zoom-controls@inAnyPanel@ > #zoom-in-button:-moz-locale-dir(ltr) {
976 border-top-left-radius: 0;
977 border-bottom-left-radius: 0;
978 }
979
980 .toolbaritem-combined-buttons > separator {
981 -moz-appearance: none;
982 width: 3px;
983 -moz-box-align: stretch;
984 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)),
985 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)),
986 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));
987 background-size: 1px, 1px, 1px;
988 background-position: 0 0, 1px 0, 2px 0;
989 background-repeat: no-repeat;
990 }
991
992 .toolbaritem-combined-buttons@inAnyPanel@ > separator {
993 margin: .5em 0;
994 width: 1px;
995 height: auto;
996 background: hsla(210,4%,10%,.15);
997 transition-property: margin;
998 transition-duration: 10ms;
999 transition-timing-function: ease;
1000 }
1001
1002 .toolbaritem-combined-buttons@inAnyPanel@:hover > separator {
1003 margin: 0;
1004 }
1005
1006 #widget-overflow > .panel-arrowcontainer > .panel-arrowcontent {
1007 padding: 0;
1008 }
1009
1010 .cui-widget-panelview,
1011 #widget-overflow-scroller {
1012 overflow-y: auto;
1013 overflow-x: hidden;
1014 }
1015
1016 #widget-overflow-scroller {
1017 max-height: 30em;
1018 margin-top: 10px;
1019 margin-bottom: 10px;
1020 }
1021
1022 #widget-overflow-list {
1023 width: @menuPanelWidth@;
1024 padding-left: 10px;
1025 padding-right: 10px;
1026 }
1027
1028 toolbaritem[overflowedItem=true],
1029 .widget-overflow-list .toolbarbutton-1 {
1030 width: 100%;
1031 max-width: @menuPanelWidth@;
1032 min-height: 36px;
1033 background-repeat: no-repeat;
1034 background-position: 0 center;
1035 }
1036
1037 .widget-overflow-list .toolbarbutton-1,
1038 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1039 -moz-box-align: center;
1040 -moz-box-orient: horizontal;
1041 }
1042
1043 .widget-overflow-list .toolbarbutton-1:not(.toolbarbutton-combined) > .toolbarbutton-text,
1044 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text {
1045 text-align: start;
1046 -moz-padding-start: .5em;
1047 }
1048
1049 #widget-overflow-list > .toolbaritem-combined-buttons {
1050 min-height: 28px;
1051 }
1052
1053 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button::after {
1054 content: "";
1055 display: -moz-box;
1056 width: 1px;
1057 height: 18px;
1058 -moz-margin-end: -1px;
1059 background-image: linear-gradient(hsla(210,54%,20%,.2) 0, hsla(210,54%,20%,.2) 18px);
1060 background-clip: padding-box;
1061 background-position: center;
1062 background-repeat: no-repeat;
1063 background-size: 1px 18px;
1064 box-shadow: 0 0 0 1px hsla(0,0%,100%,.2);
1065 }
1066
1067 .subviewbutton[checked="true"] {
1068 background: url("chrome://global/skin/menu/shared-menu-check.png") center left 7px / 11px 11px no-repeat transparent;
1069 }
1070
1071 .subviewbutton[checked="true"]:-moz-locale-dir(rtl) {
1072 background-position: center right 7px;
1073 }
1074
1075 .subviewbutton > .menu-iconic-left {
1076 -moz-appearance: none;
1077 -moz-margin-end: 3px;
1078 }
1079
1080 menuitem[checked="true"].subviewbutton > .menu-iconic-left {
1081 visibility: hidden;
1082 }

Mercurial Repository: The Tor Browser

Europalab SCM Repository Server

mercurial