1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/browser/themes/shared/customizableui/panelUIOverlay.inc.css Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,1082 @@
1.4 +/* This Source Code Form is subject to the terms of the Mozilla Public
1.5 + * License, v. 2.0. If a copy of the MPL was not distributed with this
1.6 + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
1.7 +
1.8 +%filter substitution
1.9 +
1.10 +%define menuPanelWidth 22.35em
1.11 +%define standaloneSubviewWidth 30em
1.12 +% XXXgijs This is the ugliest bit of code I think I've ever written for Mozilla.
1.13 +% Basically, the 0.1px is there to avoid CSS rounding errors causing buttons to wrap.
1.14 +% For gory details, refer to https://bugzilla.mozilla.org/show_bug.cgi?id=963365#c11
1.15 +% There's no calc() here (and therefore lots of calc() where this is used) because
1.16 +% we don't support nested calc(): https://bugzilla.mozilla.org/show_bug.cgi?id=968761
1.17 +%define menuPanelButtonWidth (@menuPanelWidth@ / 3 - 0.1px)
1.18 +%define exitSubviewGutterWidth 38px
1.19 +%define buttonStateHover :not(:-moz-any([disabled],[open],:active)):hover
1.20 +%define menuStateHover :not(:-moz-any([disabled],:active))[_moz-menuactive]
1.21 +%define buttonStateActive :not([disabled]):-moz-any([open],:hover:active)
1.22 +%define menuStateActive :not([disabled])[_moz-menuactive]:active
1.23 +
1.24 +%include ../browser.inc
1.25 +
1.26 +#PanelUI-popup #PanelUI-contents:empty {
1.27 + height: 128px;
1.28 +}
1.29 +
1.30 +#PanelUI-popup #PanelUI-contents:empty::before {
1.31 + content: "";
1.32 + background-image: url(chrome://browser/skin/customizableui/whimsy-bw.png);
1.33 + display: block;
1.34 + width: 64px;
1.35 + height: 64px;
1.36 + position: absolute;
1.37 + animation: moveX 3.05s linear 0s infinite alternate,
1.38 + moveY 3.4s linear 0s infinite alternate;
1.39 +}
1.40 +
1.41 +#PanelUI-popup #PanelUI-contents:-moz-locale-dir(rtl):empty::before {
1.42 + animation: moveXRTL 3.05s linear 0s infinite alternate,
1.43 + moveY 3.4s linear 0s infinite alternate;
1.44 +}
1.45 +
1.46 +#PanelUI-popup #PanelUI-contents:empty:hover::before {
1.47 + background-image: url(chrome://browser/skin/customizableui/whimsy.png);
1.48 +}
1.49 +
1.50 +@media (min-resolution: 2dppx) {
1.51 + #PanelUI-popup #PanelUI-contents:empty::before {
1.52 + background-image: url(chrome://browser/skin/customizableui/whimsy-bw@2x.png);
1.53 + background-size: 64px 64px;
1.54 + }
1.55 + #PanelUI-popup #PanelUI-contents:empty:hover::before {
1.56 + background-image: url(chrome://browser/skin/customizableui/whimsy@2x.png);
1.57 + }
1.58 +}
1.59 +
1.60 +@keyframes moveX {
1.61 + /* These values are adjusted for the padding on the panel. */
1.62 + from { margin-left: -15px; } to { margin-left: calc(100% - 49px); }
1.63 +}
1.64 +
1.65 +@keyframes moveXRTL {
1.66 + /* These values are adjusted for the padding on the panel. */
1.67 + from { margin-right: -15px; } to { margin-right: calc(100% - 49px); }
1.68 +}
1.69 +
1.70 +@keyframes moveY {
1.71 + /* These values are adjusted for the padding and height of the panel. */
1.72 + from { margin-top: -.5em; } to { margin-top: calc(64px - .5em); }
1.73 +}
1.74 +
1.75 +#PanelUI-button {
1.76 + 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)),
1.77 + 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)),
1.78 + 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));
1.79 + background-size: 1px calc(100% - 1px), 1px calc(100% - 1px), 1px calc(100% - 1px) !important;
1.80 + background-position: 0px 0px, 1px 0px, 2px 0px;
1.81 + background-repeat: no-repeat;
1.82 +}
1.83 +
1.84 +#PanelUI-button:-moz-locale-dir(rtl) {
1.85 + background-position: 100% 0, calc(100% - 1px) 0, calc(100% - 2px) 0;
1.86 +}
1.87 +
1.88 +.panel-subviews {
1.89 + padding: 4px;
1.90 + background-color: hsla(0,0%,100%,.97);
1.91 + background-clip: padding-box;
1.92 + border-left: 1px solid hsla(210,4%,10%,.3);
1.93 + box-shadow: 0 3px 5px hsla(210,4%,10%,.1),
1.94 + 0 0 7px hsla(210,4%,10%,.1);
1.95 + color: hsl(0,0%,15%);
1.96 + -moz-margin-start: @exitSubviewGutterWidth@;
1.97 +}
1.98 +
1.99 +.panel-viewstack[viewtype="main"] > .panel-subviews {
1.100 + transform: translateX(@menuPanelWidth@);
1.101 +}
1.102 +
1.103 +.panel-viewstack[viewtype="main"] > .panel-subviews:-moz-locale-dir(rtl) {
1.104 + transform: translateX(-@menuPanelWidth@);
1.105 +}
1.106 +
1.107 +panelmultiview[nosubviews=true] > .panel-viewcontainer > .panel-viewstack > .panel-subviews {
1.108 + display: none;
1.109 +}
1.110 +
1.111 +.panel-viewstack:not([viewtype="main"]) > .panel-mainview > #PanelUI-mainView {
1.112 + -moz-box-flex: 1;
1.113 +}
1.114 +
1.115 +.panel-subview-body {
1.116 + overflow-y: auto;
1.117 + overflow-x: hidden;
1.118 + -moz-box-flex: 1;
1.119 +}
1.120 +
1.121 +#PanelUI-popup .panel-subview-body {
1.122 + margin: -4px;
1.123 + padding: 4px 4px;
1.124 +}
1.125 +
1.126 +.panel-subview-header,
1.127 +.subviewbutton.panel-subview-footer {
1.128 + padding: 12px;
1.129 +}
1.130 +
1.131 +.panel-subview-header {
1.132 + margin: -4px -4px 4px;
1.133 + background-color: hsla(210,4%,10%,.05);
1.134 + box-shadow: 0 -1px 0 hsla(210,4%,10%,.05) inset;
1.135 + color: hsl(0,0%,50%);
1.136 +}
1.137 +
1.138 +.cui-widget-panelview .panel-subview-header {
1.139 + display: none;
1.140 +}
1.141 +
1.142 +.cui-widget-panelview .subviewbutton.panel-subview-footer {
1.143 + margin: 4px 0 0;
1.144 + -moz-box-pack: center;
1.145 +}
1.146 +
1.147 +#PanelUI-mainView {
1.148 + display: flex;
1.149 + flex-direction: column;
1.150 +}
1.151 +
1.152 +#app-extension-point-end > #PanelUI-menu-button {
1.153 + padding: 2px 5px;
1.154 +}
1.155 +#app-extension-point-end > #PanelUI-menu-button .toolbarbutton-text {
1.156 + display: none;
1.157 +}
1.158 +#app-extension-point-end > #PanelUI-menu-button .toolbarbutton-icon {
1.159 + margin: 0;
1.160 +}
1.161 +
1.162 +#PanelUI-popup > arrowscrollbox > autorepeatbutton {
1.163 + display: none;
1.164 +}
1.165 +#PanelUI-popup > arrowscrollbox > scrollbox {
1.166 + overflow: visible;
1.167 +}
1.168 +
1.169 +#PanelUI-popup > .panel-arrowcontainer > .panel-arrowcontent {
1.170 + overflow: hidden;
1.171 +}
1.172 +
1.173 +#PanelUI-popup > .panel-arrowcontainer > .panel-arrowcontent,
1.174 +.cui-widget-panel > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box {
1.175 + padding: 0;
1.176 +}
1.177 +
1.178 +.panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
1.179 +.panelUI-grid .toolbarbutton-1 > .toolbarbutton-multiline-text {
1.180 + line-height: 1.1;
1.181 + max-height: 2.2em;
1.182 +}
1.183 +
1.184 +.panelUI-grid .toolbarbutton-1:not([auto-hyphens="off"]) > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
1.185 +.panelUI-grid .toolbarbutton-1:not([auto-hyphens="off"]) > .toolbarbutton-multiline-text {
1.186 + -moz-hyphens: auto;
1.187 +}
1.188 +
1.189 +.panelUI-grid:not([customize-transitioning]) .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
1.190 +.panelUI-grid:not([customize-transitioning]) .toolbarbutton-1 > .toolbarbutton-multiline-text {
1.191 + position: absolute;
1.192 + clip: rect(auto, auto, 2.3em, auto);
1.193 +}
1.194 +
1.195 +.panelUI-grid .toolbarbutton-1 > .toolbarbutton-text,
1.196 +.panelUI-grid .toolbarbutton-1 > .toolbarbutton-multiline-text {
1.197 + text-align: center;
1.198 + /* Need to override toolkit theming which sets margin: 0 !important; */
1.199 + margin: 2px 0 0 !important;
1.200 +}
1.201 +
1.202 +.panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text {
1.203 + text-align: center;
1.204 + margin: -1px 0 0;
1.205 +}
1.206 +
1.207 +#wrapper-edit-controls:-moz-any([place="palette"],[place="panel"]) > #edit-controls,
1.208 +#wrapper-zoom-controls:-moz-any([place="palette"],[place="panel"]) > #zoom-controls {
1.209 + -moz-margin-start: 0;
1.210 +}
1.211 +
1.212 +#PanelUI-contents {
1.213 + max-width: @menuPanelWidth@;
1.214 +}
1.215 +
1.216 +#BMB_bookmarksPopup,
1.217 +.panel-mainview:not([panelid="PanelUI-popup"]) {
1.218 + max-width: @standaloneSubviewWidth@;
1.219 +}
1.220 +
1.221 +panelview:not([mainview]) .toolbarbutton-text,
1.222 +.cui-widget-panel toolbarbutton > .toolbarbutton-text {
1.223 + text-align: start;
1.224 + display: -moz-box;
1.225 +}
1.226 +
1.227 +.cui-widget-panel > .panel-arrowcontainer > .panel-arrowcontent {
1.228 + padding: 4px 0;
1.229 +}
1.230 +
1.231 +.cui-widget-panel.cui-widget-panelWithFooter > .panel-arrowcontainer > .panel-arrowcontent {
1.232 + padding-bottom: 0;
1.233 +}
1.234 +
1.235 +#PanelUI-contents {
1.236 + display: block;
1.237 + flex: 1 0 auto;
1.238 + margin-left: auto;
1.239 + margin-right: auto;
1.240 + padding: .5em 0;
1.241 + max-width: @menuPanelWidth@;
1.242 +}
1.243 +
1.244 +#PanelUI-contents-scroller {
1.245 + overflow-y: auto;
1.246 + overflow-x: hidden;
1.247 + width: @menuPanelWidth@;
1.248 + padding-left: 5px;
1.249 + padding-right: 5px;
1.250 + flex: auto;
1.251 +}
1.252 +
1.253 +.toolbaritem-combined-buttons@inAnyPanel@ > toolbarbutton > .toolbarbutton-icon {
1.254 + min-width: 0;
1.255 + min-height: 0;
1.256 + margin: 0;
1.257 +}
1.258 +
1.259 +toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item),
1.260 +.panelUI-grid .toolbarbutton-1,
1.261 +.panel-customization-placeholder-child {
1.262 + -moz-appearance: none;
1.263 + -moz-box-orient: vertical;
1.264 + width: calc(@menuPanelButtonWidth@);
1.265 + height: calc(51px + 2.2em);
1.266 +}
1.267 +
1.268 +/* In order to have button labels constrained appropriately, items inside the toolbarpaletteitem
1.269 + * should have a min-width set so they abide by the width set above (which they do outside of
1.270 + * customize mode because they're in a flexed container) */
1.271 +toolbarpaletteitem[place="panel"]:not([haswideitem=true]) > .toolbarbutton-1 {
1.272 + min-width: 0.01px;
1.273 +}
1.274 +
1.275 +/* Help SDK buttons fit in. */
1.276 +toolbarpaletteitem[place="palette"] > toolbarbutton[sdk-button="true"] > .toolbarbutton-icon,
1.277 +toolbarbutton[sdk-button="true"][cui-areatype="menu-panel"] > .toolbarbutton-icon {
1.278 + height: 32px;
1.279 + width: 32px;
1.280 +}
1.281 +
1.282 +.customization-palette .toolbarbutton-1 {
1.283 + -moz-appearance: none;
1.284 + -moz-box-orient: vertical;
1.285 +}
1.286 +
1.287 +.panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1.288 + -moz-appearance: none;
1.289 + -moz-box-orient: vertical;
1.290 + width: calc(@menuPanelButtonWidth@ - 2px);
1.291 + height: calc(49px + 2.2em);
1.292 + border: 0;
1.293 +}
1.294 +
1.295 +.panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text,
1.296 +.panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text {
1.297 + margin-top: 2px; /* Hack needed to get the label of type=menu-button aligned with other buttons */
1.298 +}
1.299 +
1.300 +.panel-customization-placeholder-child {
1.301 + margin: 6px 0 0;
1.302 + padding: 2px 6px;
1.303 + border: 1px solid transparent;
1.304 +}
1.305 +
1.306 +.panelUI-grid .toolbarbutton-1[type="menu"] {
1.307 + background-image: url("chrome://browser/skin/toolbarbutton-dropdown-arrow.png");
1.308 + background-position: right 3px top 16px;
1.309 + background-repeat: no-repeat;
1.310 +}
1.311 +
1.312 +.panelUI-grid .toolbarbutton-1[type="menu"]:-moz-locale-dir(rtl) {
1.313 + background-position: left 3px top 16px;
1.314 +}
1.315 +
1.316 +.panelUI-grid .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
1.317 + display: none;
1.318 +}
1.319 +
1.320 +.panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1.321 + -moz-box-align: center;
1.322 + width: 16px;
1.323 + -moz-margin-start: -16px;
1.324 + height: 51px;
1.325 + margin-bottom: 2.2em;
1.326 + padding: 0;
1.327 +}
1.328 +
1.329 +.panelUI-grid .toolbarbutton-1:not([buttonover])@buttonStateHover@ > .toolbarbutton-menubutton-dropmarker {
1.330 + background-color: hsla(210,4%,10%,.1) !important;
1.331 + border-radius: 0 0 0 2px;
1.332 +}
1.333 +
1.334 +.panelUI-grid .toolbarbutton-1:not([buttonover])@buttonStateHover@ > .toolbarbutton-menubutton-dropmarker:-moz-locale-dir(rtl) {
1.335 + border-radius: 0 0 2px 0;
1.336 +}
1.337 +
1.338 +#main-window:not([customizing]) .panel-combined-button[disabled] > .toolbarbutton-icon {
1.339 + opacity: .5;
1.340 +}
1.341 +
1.342 +toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) {
1.343 + width: calc(@menuPanelButtonWidth@);
1.344 + margin: 0 !important;
1.345 +}
1.346 +
1.347 +toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) {
1.348 + -moz-box-align: center;
1.349 + -moz-box-pack: center;
1.350 +}
1.351 +
1.352 +toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"] > iframe {
1.353 + margin: 4px auto;
1.354 +}
1.355 +
1.356 +#PanelUI-multiView[viewtype="subview"] > .panel-viewcontainer > .panel-viewstack > .panel-mainview > #PanelUI-mainView {
1.357 + background-color: hsla(210,4%,10%,.1);
1.358 +}
1.359 +
1.360 +#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .panel-wide-item,
1.361 +#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .toolbarbutton-1:not([panel-multiview-anchor="true"]),
1.362 +#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-fxa-status,
1.363 +#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > toolbarseparator,
1.364 +#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-customize,
1.365 +#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-help:not([panel-multiview-anchor="true"]) {
1.366 + opacity: .5;
1.367 +}
1.368 +
1.369 +/*
1.370 + * XXXgijs: this is a workaround for a layout issue that was caused by these iframes,
1.371 + * which was affecting subview display. Because of this, we're hiding the iframe *only*
1.372 + * when displaying a subview. The discerning user might notice this, but it's not nearly
1.373 + * as bad as the brokenness.
1.374 + * This hack should be removed once https://bugzilla.mozilla.org/show_bug.cgi?id=975375
1.375 + * is addressed.
1.376 + */
1.377 +#PanelUI-multiView[viewtype="subview"] toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > iframe {
1.378 + visibility: hidden;
1.379 +}
1.380 +
1.381 +toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > .toolbarbutton-text {
1.382 + text-align: center;
1.383 +}
1.384 +
1.385 +.panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1.386 +.panelUI-grid .toolbarbutton-1 > .toolbarbutton-icon,
1.387 +.panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-container,
1.388 +.customization-palette .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1.389 +.customization-palette .toolbarbutton-1 > .toolbarbutton-icon,
1.390 +.panelUI-grid #bookmarks-toolbar-placeholder > .toolbarbutton-icon,
1.391 +.customization-palette #bookmarks-toolbar-placeholder > .toolbarbutton-icon,
1.392 +.panel-customization-placeholder-child > .toolbarbutton-icon {
1.393 + min-width: 32px;
1.394 + min-height: 32px;
1.395 + /* Explanation for the below formula (A / B - C)
1.396 + A
1.397 + Each button is @menuPanelButtonWidth@ wide
1.398 + B
1.399 + Each button has two margins.
1.400 + C (46px / 2 = 23px)
1.401 + The button icon is 32 pixels wide.
1.402 + The button has 12px of horizontal padding (6 on each side).
1.403 + The button has 2px of horizontal border (1 on each side).
1.404 + Total width of button's icon + button padding should therefore be 46px,
1.405 + which means each horizontal margin should be the half the button's width - (46/2) px.
1.406 + */
1.407 + margin: 4px calc(@menuPanelButtonWidth@ / 2 - 23px);
1.408 +}
1.409 +
1.410 +/* above we treat the container as the icon for the margins, that is so the
1.411 +/* badge itself is positioned correctly. Here we make sure that the icon itself
1.412 +/* has the minum size we want, but no padding/margin. */
1.413 +.panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-container > .toolbarbutton-icon {
1.414 + min-width: 32px;
1.415 + min-height: 32px;
1.416 + margin: 0;
1.417 + padding: 0;
1.418 +}
1.419 +
1.420 +toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
1.421 + -moz-box-flex: 1;
1.422 +}
1.423 +
1.424 +#personal-bookmarks[overflowedItem=true] > #bookmarks-toolbar-placeholder {
1.425 + -moz-box-flex: 1;
1.426 +}
1.427 +
1.428 +#personal-bookmarks[cui-areatype="toolbar"][overflowedItem=true] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
1.429 + -moz-margin-end: 2px;
1.430 +}
1.431 +
1.432 +#edit-controls@inAnyPanel@ > #copy-button,
1.433 +#zoom-controls@inAnyPanel@ > #zoom-reset-button {
1.434 + border-left: none;
1.435 + border-right: none;
1.436 + border-radius: 0;
1.437 +}
1.438 +
1.439 +#zoom-in-button > .toolbarbutton-text,
1.440 +#zoom-out-button > .toolbarbutton-text,
1.441 +#zoom-reset-button > .toolbarbutton-icon {
1.442 + display: none;
1.443 +}
1.444 +
1.445 +#PanelUI-footer {
1.446 + display: flex;
1.447 + flex-shrink: 0;
1.448 + flex-direction: column;
1.449 + background-color: hsla(210,4%,10%,.07);
1.450 + padding: 0;
1.451 + margin: 0;
1.452 +}
1.453 +
1.454 +#PanelUI-footer-inner {
1.455 + display: flex;
1.456 + border-top: 1px solid hsla(210,4%,10%,.14);
1.457 +}
1.458 +
1.459 +#PanelUI-multiView[viewtype="subview"] #PanelUI-footer-inner {
1.460 + position: relative;
1.461 +}
1.462 +
1.463 +#PanelUI-footer-inner > toolbarseparator {
1.464 + border: 0;
1.465 + border-left: 1px solid hsla(210,4%,10%,.14);
1.466 + margin: 7px 0 7px;
1.467 + -moz-appearance: none;
1.468 +}
1.469 +
1.470 +#PanelUI-footer-inner:hover > toolbarseparator {
1.471 + margin: 0;
1.472 +}
1.473 +
1.474 +#PanelUI-help,
1.475 +#PanelUI-fxa-status,
1.476 +#PanelUI-customize,
1.477 +#PanelUI-quit {
1.478 + margin: 0;
1.479 + padding: 10px 0;
1.480 + min-height: 2em;
1.481 + -moz-appearance: none;
1.482 + box-shadow: none;
1.483 + border: none;
1.484 + border-radius: 0;
1.485 + transition: background-color;
1.486 + -moz-box-orient: horizontal;
1.487 +}
1.488 +
1.489 +#PanelUI-fxa-status {
1.490 + border-top: 1px solid hsla(210,4%,10%,.14);
1.491 + border-bottom: 1px solid transparent;
1.492 + margin-bottom: -1px;
1.493 +}
1.494 +
1.495 +#PanelUI-fxa-status > .toolbarbutton-text {
1.496 + width: 0; /* Fancy cropping solution for flexbox. */
1.497 +}
1.498 +
1.499 +#PanelUI-help,
1.500 +#PanelUI-quit {
1.501 + min-width: 46px;
1.502 +}
1.503 +
1.504 +#PanelUI-fxa-status > .toolbarbutton-text,
1.505 +#PanelUI-customize > .toolbarbutton-text {
1.506 + margin: 0;
1.507 + padding: 0 6px;
1.508 + text-align: start;
1.509 +}
1.510 +
1.511 +#PanelUI-help > .toolbarbutton-text,
1.512 +#PanelUI-quit > .toolbarbutton-text {
1.513 + display: none;
1.514 +}
1.515 +
1.516 +#PanelUI-fxa-status > .toolbarbutton-icon,
1.517 +#PanelUI-customize > .toolbarbutton-icon,
1.518 +#PanelUI-help > .toolbarbutton-icon,
1.519 +#PanelUI-quit > .toolbarbutton-icon {
1.520 + -moz-margin-end: 0;
1.521 +}
1.522 +
1.523 +#PanelUI-fxa-status,
1.524 +#PanelUI-customize {
1.525 + flex: 1;
1.526 + -moz-padding-start: 15px;
1.527 + -moz-border-start-style: none;
1.528 +}
1.529 +
1.530 +#PanelUI-fxa-status {
1.531 + list-style-image: url(chrome://browser/skin/sync-horizontalbar.png);
1.532 +}
1.533 +
1.534 +#PanelUI-fxa-status[status="active"] {
1.535 + list-style-image: url(chrome://browser/skin/syncProgress-horizontalbar.png);
1.536 +}
1.537 +
1.538 +#PanelUI-customize {
1.539 + list-style-image: url(chrome://browser/skin/menuPanel-customize.png);
1.540 +}
1.541 +
1.542 +#customization-panelHolder #PanelUI-customize {
1.543 + list-style-image: url(chrome://browser/skin/customizableui/menuPanel-customizeFinish.png);
1.544 +}
1.545 +
1.546 +#PanelUI-help {
1.547 + list-style-image: url(chrome://browser/skin/menuPanel-help.png);
1.548 +}
1.549 +
1.550 +#PanelUI-quit {
1.551 + -moz-border-end-style: none;
1.552 + list-style-image: url(chrome://browser/skin/menuPanel-exit.png);
1.553 +}
1.554 +
1.555 +#PanelUI-fxa-status,
1.556 +#PanelUI-customize,
1.557 +#PanelUI-help,
1.558 +#PanelUI-quit {
1.559 + -moz-image-region: rect(0, 16px, 16px, 0);
1.560 +}
1.561 +
1.562 +#PanelUI-customize:hover,
1.563 +#PanelUI-help:not([disabled]):hover,
1.564 +#PanelUI-quit:not([disabled]):hover {
1.565 + -moz-image-region: rect(0, 32px, 16px, 16px);
1.566 +}
1.567 +
1.568 +#PanelUI-customize:hover:active,
1.569 +#PanelUI-help:not([disabled]):hover:active,
1.570 +#PanelUI-quit:not([disabled]):hover:active {
1.571 + -moz-image-region: rect(0, 48px, 16px, 32px);
1.572 +}
1.573 +
1.574 +#PanelUI-help[panel-multiview-anchor="true"] {
1.575 + -moz-image-region: rect(0, 64px, 16px, 48px);
1.576 +}
1.577 +
1.578 +#PanelUI-help[disabled],
1.579 +#PanelUI-quit[disabled] {
1.580 + opacity: 0.4;
1.581 +}
1.582 +
1.583 +#PanelUI-fxa-status:not([disabled]):hover,
1.584 +#PanelUI-help:not([disabled]):hover,
1.585 +#PanelUI-customize:hover,
1.586 +#PanelUI-quit:not([disabled]):hover {
1.587 + outline: 1px solid hsla(210,4%,10%,.07);
1.588 + background-color: hsla(210,4%,10%,.07);
1.589 +}
1.590 +
1.591 +#PanelUI-fxa-status:not([disabled]):hover:active,
1.592 +#PanelUI-help:not([disabled]):hover:active,
1.593 +#PanelUI-customize:hover:active,
1.594 +#PanelUI-quit:not([disabled]):hover:active {
1.595 + outline: 1px solid hsla(210,4%,10%,.12);
1.596 + background-color: hsla(210,4%,10%,.12);
1.597 + box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
1.598 +}
1.599 +
1.600 +#PanelUI-fxa-status:not([disabled]):hover,
1.601 +#PanelUI-fxa-status:not([disabled]):hover:active {
1.602 + outline: none;
1.603 +}
1.604 +
1.605 +#PanelUI-quit:not([disabled]):hover {
1.606 + background-color: #d94141;
1.607 + outline-color: #c23a3a;
1.608 +}
1.609 +
1.610 +#PanelUI-quit:not([disabled]):hover:active {
1.611 + background-color: #ad3434;
1.612 + outline-color: #992e2e;
1.613 +}
1.614 +
1.615 +#customization-panelHolder #PanelUI-customize {
1.616 + color: white;
1.617 + background-color: rgb(116,191,67);
1.618 + text-shadow: none;
1.619 + margin-top: -1px;
1.620 +}
1.621 +
1.622 +#customization-panelHolder #PanelUI-customize + toolbarseparator {
1.623 + display: none;
1.624 +}
1.625 +
1.626 +#customization-panelHolder #PanelUI-customize:hover,
1.627 +#customization-panelHolder #PanelUI-customize:hover:active {
1.628 + background-color: rgb(105,173,61);
1.629 +}
1.630 +
1.631 +#customization-palette .toolbarbutton-multiline-text,
1.632 +#customization-palette .toolbarbutton-text {
1.633 + display: none;
1.634 +}
1.635 +
1.636 +panelview .toolbarbutton-1,
1.637 +.subviewbutton,
1.638 +.widget-overflow-list .toolbarbutton-1,
1.639 +.panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1.640 +.toolbaritem-combined-buttons@inAnyPanel@ > toolbarbutton {
1.641 + -moz-appearance: none;
1.642 + padding: 0 6px;
1.643 + background-color: hsla(210,4%,10%,0);
1.644 + border-radius: 2px;
1.645 + border-style: solid;
1.646 + border-color: hsla(210,4%,10%,0);
1.647 +}
1.648 +
1.649 +panelview .toolbarbutton-1,
1.650 +.subviewbutton,
1.651 +.widget-overflow-list .toolbarbutton-1,
1.652 +.toolbaritem-combined-buttons@inAnyPanel@ > toolbarbutton {
1.653 + border-width: 1px;
1.654 +}
1.655 +
1.656 +.subviewbutton.panel-subview-footer {
1.657 + border-radius: 0;
1.658 + border: none;
1.659 +}
1.660 +
1.661 +.subviewbutton.panel-subview-footer > .menu-text {
1.662 + -moz-appearance: none;
1.663 + -moz-margin-start: 0px !important;
1.664 + -moz-padding-start: 6px;
1.665 + -moz-padding-end: 6px;
1.666 + -moz-box-flex: 0;
1.667 + text-align: center;
1.668 +}
1.669 +
1.670 +.subviewbutton.panel-subview-footer > .toolbarbutton-icon {
1.671 + margin: 0;
1.672 +}
1.673 +
1.674 +.subviewbutton.panel-subview-footer > .toolbarbutton-text {
1.675 + text-align: center;
1.676 + padding: 0;
1.677 +}
1.678 +
1.679 +.subviewbutton.panel-subview-footer > .menu-accel-container {
1.680 + -moz-padding-start: 6px;
1.681 +}
1.682 +
1.683 +.subviewbutton:not(.panel-subview-footer) {
1.684 + margin: 0;
1.685 +}
1.686 +
1.687 +.subviewbutton:not(.panel-subview-footer) > .toolbarbutton-text,
1.688 +/* Bookmark items need a more specific selector. */
1.689 +.PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-text,
1.690 +.PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-iconic-text {
1.691 + font: menu;
1.692 +}
1.693 +
1.694 +.PanelUI-subView .subviewbutton[shortcut]::after {
1.695 + content: attr(shortcut);
1.696 + float: right;
1.697 + color: hsl(0,0%,50%);
1.698 +}
1.699 +
1.700 +.PanelUI-subView.cui-widget-panelview .subviewbutton[shortcut]::after {
1.701 + -moz-margin-start: 10px;
1.702 +}
1.703 +
1.704 +/* This is a <label> but it should fit in with the menu font- and colorwise. */
1.705 +#PanelUI-characterEncodingView-autodetect-label {
1.706 + font: menu;
1.707 + color: inherit;
1.708 +}
1.709 +
1.710 +.cui-widget-panelview .subviewbutton:not(.panel-subview-footer) {
1.711 + margin-left: 4px;
1.712 + margin-right: 4px;
1.713 +}
1.714 +
1.715 +panelview .toolbarbutton-1,
1.716 +.widget-overflow-list .toolbarbutton-1 {
1.717 + margin-top: 6px;
1.718 +}
1.719 +
1.720 +panelview .toolbarbutton-1@buttonStateHover@,
1.721 +toolbarbutton.subviewbutton@buttonStateHover@,
1.722 +menu.subviewbutton@menuStateHover@,
1.723 +menuitem.subviewbutton@menuStateHover@,
1.724 +.widget-overflow-list .toolbarbutton-1@buttonStateHover@,
1.725 +.toolbaritem-combined-buttons@inAnyPanel@ > toolbarbutton@buttonStateHover@ {
1.726 + background-color: hsla(210,4%,10%,.08);
1.727 + border-color: hsla(210,4%,10%,.11);
1.728 +}
1.729 +
1.730 +.toolbaritem-combined-buttons@inAnyPanel@@buttonStateHover@ {
1.731 + border-color: hsla(210,4%,10%,.11);
1.732 +}
1.733 +
1.734 +panelview .toolbarbutton-1:-moz-any(@buttonStateActive@,[checked=true]),
1.735 +toolbarbutton.subviewbutton@buttonStateActive@,
1.736 +menu.subviewbutton@menuStateActive@,
1.737 +menuitem.subviewbutton@menuStateActive@,
1.738 +.widget-overflow-list .toolbarbutton-1@buttonStateActive@,
1.739 +.toolbaritem-combined-buttons@inAnyPanel@ > toolbarbutton@buttonStateActive@ {
1.740 + background-color: hsla(210,4%,10%,.12);
1.741 + border-color: hsla(210,4%,10%,.14);
1.742 + box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset;
1.743 +}
1.744 +
1.745 +.subviewbutton.panel-subview-footer {
1.746 + margin: 4px -4px -4px;
1.747 + background-color: hsla(210,4%,10%,.07);
1.748 + border-top: 1px solid hsla(210,4%,10%,.12);
1.749 + border-radius: 0;
1.750 + color: hsl(0,0%,25%)
1.751 +}
1.752 +
1.753 +menuitem.panel-subview-footer@menuStateHover@,
1.754 +.subviewbutton.panel-subview-footer@buttonStateHover@ {
1.755 + background-color: hsla(210,4%,10%,.15);
1.756 + border-top: 1px solid hsla(210,4%,10%,.14);
1.757 +}
1.758 +
1.759 +menuitem.panel-subview-footer@menuStateActive@,
1.760 +.subviewbutton.panel-subview-footer@buttonStateActive@ {
1.761 + background-color: hsla(210,4%,10%,.19);
1.762 + border-top: 1px solid hsla(210,4%,10%,.14);
1.763 + box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
1.764 +}
1.765 +
1.766 +#BMB_bookmarksPopup .subviewbutton {
1.767 + font: menu;
1.768 + font-weight: normal;
1.769 +}
1.770 +
1.771 +#BMB_bookmarksPopup .subviewbutton:not([disabled="true"]) {
1.772 + color: inherit;
1.773 +}
1.774 +
1.775 +#BMB_bookmarksPopup .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-up,
1.776 +#BMB_bookmarksPopup .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-down {
1.777 + -moz-appearance: none;
1.778 + margin-top: 0;
1.779 + margin-bottom: 0;
1.780 +}
1.781 +
1.782 +/* Remove padding on xul:arrowscrollbox to avoid extra padding on footer */
1.783 +#BMB_bookmarksPopup arrowscrollbox {
1.784 + padding-bottom: 0px;
1.785 +}
1.786 +
1.787 +#BMB_bookmarksPopup menupopup > .bookmarks-actions-menuseparator {
1.788 + /* Hide bottom separator as the styled footer includes a top border serving the same purpose */
1.789 + display: none;
1.790 +}
1.791 +
1.792 +/* Popups with only one item don't have a footer */
1.793 +#BMB_bookmarksPopup menupopup[placespopup=true][singleitempopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
1.794 +/* These popups never have a footer */
1.795 +#BMB_bookmarksToolbarPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
1.796 +#BMB_unsortedBookmarksPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
1.797 + /* And so they need some bottom padding: */
1.798 + padding-bottom: 4px;
1.799 +}
1.800 +
1.801 +/* Disabled (empty) item is always alone and never has an icon, so fix its left padding */
1.802 +#BMB_bookmarksPopup menupopup[emptyplacesresult] .bookmark-item.subviewbutton {
1.803 + padding-left: 6px;
1.804 +}
1.805 +
1.806 +.PanelUI-subView menuseparator,
1.807 +.PanelUI-subView toolbarseparator,
1.808 +.cui-widget-panelview menuseparator {
1.809 + -moz-appearance: none;
1.810 + min-height: 0;
1.811 + border-top: 1px solid hsla(210,4%,10%,.15);
1.812 + margin: 6px 0;
1.813 + padding: 0;
1.814 +}
1.815 +
1.816 +.PanelUI-subView menuseparator,
1.817 +.PanelUI-subView toolbarseparator {
1.818 + -moz-margin-start: -5px;
1.819 + -moz-margin-end: -4px;
1.820 +}
1.821 +
1.822 +.PanelUI-subView menuseparator.small-separator,
1.823 +.PanelUI-subView toolbarseparator.small-separator {
1.824 + margin-left: 5px;
1.825 + margin-right: 5px;
1.826 +}
1.827 +
1.828 +.cui-widget-panelview menuseparator.small-separator {
1.829 + margin-left: 10px;
1.830 + margin-right: 10px;
1.831 +}
1.832 +
1.833 +.subviewbutton > .menu-accel-container {
1.834 + -moz-box-pack: start;
1.835 + -moz-margin-start: 10px;
1.836 + -moz-margin-end: auto;
1.837 + color: hsl(0,0%,50%);
1.838 +}
1.839 +
1.840 +#PanelUI-historyItems > toolbarbutton {
1.841 + list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
1.842 +}
1.843 +
1.844 +#PanelUI-recentlyClosedWindows > toolbarbutton > .toolbarbutton-icon,
1.845 +#PanelUI-recentlyClosedTabs > toolbarbutton > .toolbarbutton-icon,
1.846 +#PanelUI-historyItems > toolbarbutton > .toolbarbutton-icon {
1.847 + width: 16px;
1.848 + height: 16px;
1.849 +}
1.850 +
1.851 +toolbarbutton[panel-multiview-anchor="true"],
1.852 +toolbarbutton[panel-multiview-anchor="true"] > .toolbarbutton-menubutton-button {
1.853 + color: HighlightText;
1.854 + background-color: Highlight;
1.855 +}
1.856 +
1.857 +#PanelUI-help[panel-multiview-anchor="true"] + toolbarseparator {
1.858 + display: none;
1.859 +}
1.860 +
1.861 +#PanelUI-help[panel-multiview-anchor="true"] {
1.862 + background-image: linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0));
1.863 + background-position: 0;
1.864 +}
1.865 +
1.866 +#PanelUI-help[panel-multiview-anchor="true"]::after {
1.867 + content: "";
1.868 + position: absolute;
1.869 + top: 0;
1.870 + height: 100%;
1.871 + width: @exitSubviewGutterWidth@;
1.872 + background-image: url(chrome://browser/skin/customizableui/subView-arrow-back-inverted.png),
1.873 + linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0));
1.874 + background-repeat: no-repeat;
1.875 + background-color: Highlight;
1.876 + background-position: left 10px center, 0; /* this doesn't need to be changed for RTL */
1.877 +}
1.878 +
1.879 +toolbarbutton[panel-multiview-anchor="true"] {
1.880 + background-image: url(chrome://browser/skin/customizableui/subView-arrow-back-inverted.png),
1.881 + linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0));
1.882 + background-position: right 5px center;
1.883 + background-repeat: no-repeat, repeat;
1.884 +}
1.885 +
1.886 +toolbarbutton[panel-multiview-anchor="true"]:-moz-locale-dir(rtl) {
1.887 + background-image: url(chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png),
1.888 + linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0));
1.889 + background-position: left 5px center;
1.890 +}
1.891 +
1.892 +toolbarpaletteitem[place="palette"] > .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker,
1.893 +#bookmarks-menu-button[cui-areatype="menu-panel"] > .toolbarbutton-menubutton-dropmarker {
1.894 + display: none;
1.895 +}
1.896 +
1.897 +#search-container[cui-areatype="menu-panel"],
1.898 +#wrapper-search-container[place="panel"] {
1.899 + width: @menuPanelWidth@;
1.900 +}
1.901 +
1.902 +#search-container[cui-areatype="menu-panel"] {
1.903 + margin-top: 6px;
1.904 + margin-bottom: 6px;
1.905 +}
1.906 +
1.907 +toolbarpaletteitem[place="palette"] > #search-container {
1.908 + min-width: 7em;
1.909 + width: 7em;
1.910 +}
1.911 +
1.912 +.toolbaritem-combined-buttons@inAnyPanel@ {
1.913 + background-color: hsla(210,4%,10%,0);
1.914 + border-radius: 2px;
1.915 + border: 1px solid;
1.916 + border-color: hsla(210,4%,10%,0);
1.917 + border-bottom-color: hsla(210,4%,10%,.1);
1.918 + padding: 0;
1.919 + transition-property: background-color, border-color;
1.920 + transition-duration: 150ms;
1.921 +}
1.922 +
1.923 +/* Make direct siblings overlap borders: */
1.924 +.toolbaritem-combined-buttons + .toolbaritem-combined-buttons@inAnyPanel@ {
1.925 + border-top-color: transparent !important;
1.926 +}
1.927 +
1.928 +.toolbaritem-combined-buttons + .toolbaritem-combined-buttons@inAnyPanel@,
1.929 +toolbarpaletteitem[haswideitem][place="panel"] + toolbarpaletteitem[haswideitem][place="panel"] {
1.930 + margin-top: -1px;
1.931 +}
1.932 +
1.933 +.toolbaritem-combined-buttons@inAnyPanel@ > toolbarbutton {
1.934 + border: 0;
1.935 + padding: .5em;
1.936 + margin: 0;
1.937 + -moz-box-flex: 1;
1.938 + min-width: calc(@menuPanelButtonWidth@);
1.939 + max-width: calc(@menuPanelButtonWidth@);
1.940 + /* We'd prefer to use height: auto here but it leads to layout bugs in the panel. Cope:
1.941 + 1.2em for line height + 2 * .5em padding + margin on the label (2 * 2px) */
1.942 + height: calc(2.2em + 4px);
1.943 + max-height: none;
1.944 + -moz-box-orient: horizontal;
1.945 +}
1.946 +
1.947 +#edit-controls@inAnyPanel@ > #copy-button,
1.948 +#zoom-controls@inAnyPanel@ > #zoom-reset-button {
1.949 + /* reduce the width with 2px for this button to compensate for two separators
1.950 + of 1px. */
1.951 + min-width: calc(@menuPanelButtonWidth@ - 2px);
1.952 + max-width: calc(@menuPanelButtonWidth@ - 2px);
1.953 +}
1.954 +
1.955 +#main-window:not([customizing]) .toolbaritem-combined-buttons@inAnyPanel@ > toolbarbutton[disabled] > .toolbarbutton-icon {
1.956 + opacity: .25;
1.957 +}
1.958 +
1.959 +#zoom-controls[cui-areatype="toolbar"] > #zoom-reset-button > .toolbarbutton-text {
1.960 +%ifdef XP_MACOSX
1.961 + min-width: 6ch;
1.962 +%else
1.963 + min-width: 7ch;
1.964 +%endif
1.965 +}
1.966 +
1.967 +#edit-controls@inAnyPanel@ > #cut-button:-moz-locale-dir(ltr),
1.968 +#edit-controls@inAnyPanel@ > #paste-button:-moz-locale-dir(rtl),
1.969 +#zoom-controls@inAnyPanel@ > #zoom-out-button:-moz-locale-dir(ltr),
1.970 +#zoom-controls@inAnyPanel@ > #zoom-in-button:-moz-locale-dir(rtl) {
1.971 + border-top-right-radius: 0;
1.972 + border-bottom-right-radius: 0;
1.973 +}
1.974 +
1.975 +#edit-controls@inAnyPanel@ > #cut-button:-moz-locale-dir(rtl),
1.976 +#edit-controls@inAnyPanel@ > #paste-button:-moz-locale-dir(ltr),
1.977 +#zoom-controls@inAnyPanel@ > #zoom-out-button:-moz-locale-dir(rtl),
1.978 +#zoom-controls@inAnyPanel@ > #zoom-in-button:-moz-locale-dir(ltr) {
1.979 + border-top-left-radius: 0;
1.980 + border-bottom-left-radius: 0;
1.981 +}
1.982 +
1.983 +.toolbaritem-combined-buttons > separator {
1.984 + -moz-appearance: none;
1.985 + width: 3px;
1.986 + -moz-box-align: stretch;
1.987 + 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)),
1.988 + 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)),
1.989 + 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));
1.990 + background-size: 1px, 1px, 1px;
1.991 + background-position: 0 0, 1px 0, 2px 0;
1.992 + background-repeat: no-repeat;
1.993 +}
1.994 +
1.995 +.toolbaritem-combined-buttons@inAnyPanel@ > separator {
1.996 + margin: .5em 0;
1.997 + width: 1px;
1.998 + height: auto;
1.999 + background: hsla(210,4%,10%,.15);
1.1000 + transition-property: margin;
1.1001 + transition-duration: 10ms;
1.1002 + transition-timing-function: ease;
1.1003 +}
1.1004 +
1.1005 +.toolbaritem-combined-buttons@inAnyPanel@:hover > separator {
1.1006 + margin: 0;
1.1007 +}
1.1008 +
1.1009 +#widget-overflow > .panel-arrowcontainer > .panel-arrowcontent {
1.1010 + padding: 0;
1.1011 +}
1.1012 +
1.1013 +.cui-widget-panelview,
1.1014 +#widget-overflow-scroller {
1.1015 + overflow-y: auto;
1.1016 + overflow-x: hidden;
1.1017 +}
1.1018 +
1.1019 +#widget-overflow-scroller {
1.1020 + max-height: 30em;
1.1021 + margin-top: 10px;
1.1022 + margin-bottom: 10px;
1.1023 +}
1.1024 +
1.1025 +#widget-overflow-list {
1.1026 + width: @menuPanelWidth@;
1.1027 + padding-left: 10px;
1.1028 + padding-right: 10px;
1.1029 +}
1.1030 +
1.1031 +toolbaritem[overflowedItem=true],
1.1032 +.widget-overflow-list .toolbarbutton-1 {
1.1033 + width: 100%;
1.1034 + max-width: @menuPanelWidth@;
1.1035 + min-height: 36px;
1.1036 + background-repeat: no-repeat;
1.1037 + background-position: 0 center;
1.1038 +}
1.1039 +
1.1040 +.widget-overflow-list .toolbarbutton-1,
1.1041 +.widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1.1042 + -moz-box-align: center;
1.1043 + -moz-box-orient: horizontal;
1.1044 +}
1.1045 +
1.1046 +.widget-overflow-list .toolbarbutton-1:not(.toolbarbutton-combined) > .toolbarbutton-text,
1.1047 +.widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text {
1.1048 + text-align: start;
1.1049 + -moz-padding-start: .5em;
1.1050 +}
1.1051 +
1.1052 +#widget-overflow-list > .toolbaritem-combined-buttons {
1.1053 + min-height: 28px;
1.1054 +}
1.1055 +
1.1056 +.widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button::after {
1.1057 + content: "";
1.1058 + display: -moz-box;
1.1059 + width: 1px;
1.1060 + height: 18px;
1.1061 + -moz-margin-end: -1px;
1.1062 + background-image: linear-gradient(hsla(210,54%,20%,.2) 0, hsla(210,54%,20%,.2) 18px);
1.1063 + background-clip: padding-box;
1.1064 + background-position: center;
1.1065 + background-repeat: no-repeat;
1.1066 + background-size: 1px 18px;
1.1067 + box-shadow: 0 0 0 1px hsla(0,0%,100%,.2);
1.1068 +}
1.1069 +
1.1070 +.subviewbutton[checked="true"] {
1.1071 + background: url("chrome://global/skin/menu/shared-menu-check.png") center left 7px / 11px 11px no-repeat transparent;
1.1072 +}
1.1073 +
1.1074 +.subviewbutton[checked="true"]:-moz-locale-dir(rtl) {
1.1075 + background-position: center right 7px;
1.1076 +}
1.1077 +
1.1078 +.subviewbutton > .menu-iconic-left {
1.1079 + -moz-appearance: none;
1.1080 + -moz-margin-end: 3px;
1.1081 +}
1.1082 +
1.1083 +menuitem[checked="true"].subviewbutton > .menu-iconic-left {
1.1084 + visibility: hidden;
1.1085 +}
