The Tor Browser: browser/themes/shared/customizableui/panelUIOverlay.inc.css@fc2d59ddac77

     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/. */

     5 %filter substitution

     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

    21 %include ../browser.inc

    23 #PanelUI-popup #PanelUI-contents:empty {

    24   height: 128px;

    25 }

    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 }

    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 }

    43 #PanelUI-popup #PanelUI-contents:empty:hover::before {

    44   background-image: url(chrome://browser/skin/customizableui/whimsy.png);

    45 }

    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 }

    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 }

    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 }

    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 }

    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 }

    81 #PanelUI-button:-moz-locale-dir(rtl) {

    82   background-position: 100% 0, calc(100% - 1px) 0, calc(100% - 2px) 0;

    83 }

    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 }

    96 .panel-viewstack[viewtype="main"] > .panel-subviews {

    97   transform: translateX(@menuPanelWidth@);

    98 }

   100 .panel-viewstack[viewtype="main"] > .panel-subviews:-moz-locale-dir(rtl) {

   101   transform: translateX(-@menuPanelWidth@);

   102 }

   104 panelmultiview[nosubviews=true] > .panel-viewcontainer > .panel-viewstack > .panel-subviews {

   105   display: none;

   106 }

   108 .panel-viewstack:not([viewtype="main"]) > .panel-mainview > #PanelUI-mainView {

   109   -moz-box-flex: 1;

   110 }

   112 .panel-subview-body {

   113   overflow-y: auto;

   114   overflow-x: hidden;

   115   -moz-box-flex: 1;

   116 }

   118 #PanelUI-popup .panel-subview-body {

   119   margin: -4px;

   120   padding: 4px 4px;

   121 }

   123 .panel-subview-header,

   124 .subviewbutton.panel-subview-footer {

   125   padding: 12px;

   126 }

   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 }

   135 .cui-widget-panelview .panel-subview-header {

   136   display: none;

   137 }

   139 .cui-widget-panelview .subviewbutton.panel-subview-footer {

   140   margin: 4px 0 0;

   141   -moz-box-pack: center;

   142 }

   144 #PanelUI-mainView {

   145   display: flex;

   146   flex-direction: column;

   147 }

   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 }

   159 #PanelUI-popup > arrowscrollbox > autorepeatbutton {

   160   display: none;

   161 }

   162 #PanelUI-popup > arrowscrollbox > scrollbox {

   163   overflow: visible;

   164 }

   166 #PanelUI-popup > .panel-arrowcontainer > .panel-arrowcontent {

   167   overflow: hidden;

   168 }

   170 #PanelUI-popup > .panel-arrowcontainer > .panel-arrowcontent,

   171 .cui-widget-panel > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box {

   172   padding: 0;

   173 }

   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 }

   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 }

   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 }

   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 }

   199 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text {

   200   text-align: center;

   201   margin: -1px 0 0;

   202 }

   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 }

   209 #PanelUI-contents {

   210   max-width: @menuPanelWidth@;

   211 }

   213 #BMB_bookmarksPopup,

   214 .panel-mainview:not([panelid="PanelUI-popup"]) {

   215   max-width: @standaloneSubviewWidth@;

   216 }

   218 panelview:not([mainview]) .toolbarbutton-text,

   219 .cui-widget-panel toolbarbutton > .toolbarbutton-text {

   220   text-align: start;

   221   display: -moz-box;

   222 }

   224 .cui-widget-panel > .panel-arrowcontainer > .panel-arrowcontent {

   225   padding: 4px 0;

   226 }

   228 .cui-widget-panel.cui-widget-panelWithFooter > .panel-arrowcontainer > .panel-arrowcontent {

   229   padding-bottom: 0;

   230 }

   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 }

   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 }

   250 .toolbaritem-combined-buttons@inAnyPanel@ > toolbarbutton > .toolbarbutton-icon {

   251   min-width: 0;

   252   min-height: 0;

   253   margin: 0;

   254 }

   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 }

   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 }

   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 }

   279 .customization-palette .toolbarbutton-1 {

   280   -moz-appearance: none;

   281   -moz-box-orient: vertical;

   282 }

   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 }

   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 }

   297 .panel-customization-placeholder-child {

   298   margin: 6px 0 0;

   299   padding: 2px 6px;

   300   border: 1px solid transparent;

   301 }

   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 }

   309 .panelUI-grid .toolbarbutton-1[type="menu"]:-moz-locale-dir(rtl) {

   310   background-position: left 3px top 16px;

   311 }

   313 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {

   314   display: none;

   315 }

   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 }

   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 }

   331 .panelUI-grid .toolbarbutton-1:not([buttonover])@buttonStateHover@ > .toolbarbutton-menubutton-dropmarker:-moz-locale-dir(rtl) {

   332   border-radius: 0 0 2px 0;

   333 }

   335 #main-window:not([customizing]) .panel-combined-button[disabled] > .toolbarbutton-icon {

   336   opacity: .5;

   337 }

   339 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) {

   340   width: calc(@menuPanelButtonWidth@);

   341   margin: 0 !important;

   342 }

   344 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) {

   345   -moz-box-align: center;

   346   -moz-box-pack: center;

   347 }

   349 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"] > iframe {

   350   margin: 4px auto;

   351 }

   353 #PanelUI-multiView[viewtype="subview"] > .panel-viewcontainer > .panel-viewstack > .panel-mainview >  #PanelUI-mainView {

   354   background-color: hsla(210,4%,10%,.1);

   355 }

   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 }

   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 }

   378 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > .toolbarbutton-text {

   379   text-align: center;

   380 }

   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 }

   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 }

   417 toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {

   418   -moz-box-flex: 1;

   419 }

   421 #personal-bookmarks[overflowedItem=true] > #bookmarks-toolbar-placeholder {

   422   -moz-box-flex: 1;

   423 }

   425 #personal-bookmarks[cui-areatype="toolbar"][overflowedItem=true] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {

   426   -moz-margin-end: 2px;

   427 }

   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 }

   436 #zoom-in-button > .toolbarbutton-text,

   437 #zoom-out-button > .toolbarbutton-text,

   438 #zoom-reset-button > .toolbarbutton-icon {

   439   display: none;

   440 }

   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 }

   451 #PanelUI-footer-inner {

   452   display: flex;

   453   border-top: 1px solid hsla(210,4%,10%,.14);

   454 }

   456 #PanelUI-multiView[viewtype="subview"] #PanelUI-footer-inner {

   457   position: relative;

   458 }

   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 }

   467 #PanelUI-footer-inner:hover > toolbarseparator {

   468   margin: 0;

   469 }

   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 }

   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 }

   492 #PanelUI-fxa-status > .toolbarbutton-text {

   493   width: 0; /* Fancy cropping solution for flexbox. */

   494 }

   496 #PanelUI-help,

   497 #PanelUI-quit {

   498   min-width: 46px;

   499 }

   501 #PanelUI-fxa-status > .toolbarbutton-text,

   502 #PanelUI-customize > .toolbarbutton-text {

   503   margin: 0;

   504   padding: 0 6px;

   505   text-align: start;

   506 }

   508 #PanelUI-help > .toolbarbutton-text,

   509 #PanelUI-quit > .toolbarbutton-text {

   510   display: none;

   511 }

   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 }

   520 #PanelUI-fxa-status,

   521 #PanelUI-customize {

   522   flex: 1;

   523   -moz-padding-start: 15px;

   524   -moz-border-start-style: none;

   525 }

   527 #PanelUI-fxa-status {

   528   list-style-image: url(chrome://browser/skin/sync-horizontalbar.png);

   529 }

   531 #PanelUI-fxa-status[status="active"] {

   532   list-style-image: url(chrome://browser/skin/syncProgress-horizontalbar.png);

   533 }

   535 #PanelUI-customize {

   536   list-style-image: url(chrome://browser/skin/menuPanel-customize.png);

   537 }

   539 #customization-panelHolder #PanelUI-customize {

   540   list-style-image: url(chrome://browser/skin/customizableui/menuPanel-customizeFinish.png);

   541 }

   543 #PanelUI-help {

   544   list-style-image: url(chrome://browser/skin/menuPanel-help.png);

   545 }

   547 #PanelUI-quit {

   548   -moz-border-end-style: none;

   549   list-style-image: url(chrome://browser/skin/menuPanel-exit.png);

   550 }

   552 #PanelUI-fxa-status,

   553 #PanelUI-customize,

   554 #PanelUI-help,

   555 #PanelUI-quit {

   556   -moz-image-region: rect(0, 16px, 16px, 0);

   557 }

   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 }

   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 }

   571 #PanelUI-help[panel-multiview-anchor="true"] {

   572   -moz-image-region: rect(0, 64px, 16px, 48px);

   573 }

   575 #PanelUI-help[disabled],

   576 #PanelUI-quit[disabled] {

   577   opacity: 0.4;

   578 }

   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 }

   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 }

   597 #PanelUI-fxa-status:not([disabled]):hover,

   598 #PanelUI-fxa-status:not([disabled]):hover:active {

   599   outline: none;

   600 }

   602 #PanelUI-quit:not([disabled]):hover {

   603   background-color: #d94141;

   604   outline-color: #c23a3a;

   605 }

   607 #PanelUI-quit:not([disabled]):hover:active {

   608   background-color: #ad3434;

   609   outline-color: #992e2e;

   610 }

   612 #customization-panelHolder #PanelUI-customize {

   613   color: white;

   614   background-color: rgb(116,191,67);

   615   text-shadow: none;

   616   margin-top: -1px;

   617 }

   619 #customization-panelHolder #PanelUI-customize + toolbarseparator {

   620   display: none;

   621 }

   623 #customization-panelHolder #PanelUI-customize:hover,

   624 #customization-panelHolder #PanelUI-customize:hover:active {

   625   background-color: rgb(105,173,61);

   626 }

   628 #customization-palette .toolbarbutton-multiline-text,

   629 #customization-palette .toolbarbutton-text {

   630   display: none;

   631 }

   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 }

   646 panelview .toolbarbutton-1,

   647 .subviewbutton,

   648 .widget-overflow-list .toolbarbutton-1,

   649 .toolbaritem-combined-buttons@inAnyPanel@ > toolbarbutton {

   650   border-width: 1px;

   651 }

   653 .subviewbutton.panel-subview-footer {

   654   border-radius: 0;

   655   border: none;

   656 }

   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 }

   667 .subviewbutton.panel-subview-footer > .toolbarbutton-icon {

   668   margin: 0;

   669 }

   671 .subviewbutton.panel-subview-footer > .toolbarbutton-text {

   672   text-align: center;

   673   padding: 0;

   674 }

   676 .subviewbutton.panel-subview-footer > .menu-accel-container {

   677   -moz-padding-start: 6px;

   678 }

   680 .subviewbutton:not(.panel-subview-footer) {

   681   margin: 0;

   682 }

   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 }

   691 .PanelUI-subView .subviewbutton[shortcut]::after {

   692   content: attr(shortcut);

   693   float: right;

   694   color: hsl(0,0%,50%);

   695 }

   697 .PanelUI-subView.cui-widget-panelview .subviewbutton[shortcut]::after {

   698   -moz-margin-start: 10px;

   699 }

   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 }

   707 .cui-widget-panelview .subviewbutton:not(.panel-subview-footer) {

   708   margin-left: 4px;

   709   margin-right: 4px;

   710 }

   712 panelview .toolbarbutton-1,

   713 .widget-overflow-list .toolbarbutton-1 {

   714   margin-top: 6px;

   715 }

   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 }

   727 .toolbaritem-combined-buttons@inAnyPanel@@buttonStateHover@ {

   728   border-color: hsla(210,4%,10%,.11);

   729 }

   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 }

   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 }

   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 }

   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 }

   763 #BMB_bookmarksPopup .subviewbutton {

   764   font: menu;

   765   font-weight: normal;

   766 }

   768 #BMB_bookmarksPopup .subviewbutton:not([disabled="true"]) {

   769   color: inherit;

   770 }

   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 }

   779 /* Remove padding on xul:arrowscrollbox to avoid extra padding on footer */

   780 #BMB_bookmarksPopup arrowscrollbox {

   781   padding-bottom: 0px;

   782 }

   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 }

   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 }

   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 }

   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 }

   813 .PanelUI-subView menuseparator,

   814 .PanelUI-subView toolbarseparator {

   815   -moz-margin-start: -5px;

   816   -moz-margin-end: -4px;

   817 }

   819 .PanelUI-subView menuseparator.small-separator,

   820 .PanelUI-subView toolbarseparator.small-separator {

   821   margin-left: 5px;

   822   margin-right: 5px;

   823 }

   825 .cui-widget-panelview menuseparator.small-separator {

   826   margin-left: 10px;

   827   margin-right: 10px;

   828 }

   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 }

   837 #PanelUI-historyItems > toolbarbutton {

   838   list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");

   839 }

   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 }

   848 toolbarbutton[panel-multiview-anchor="true"],

   849 toolbarbutton[panel-multiview-anchor="true"] > .toolbarbutton-menubutton-button {

   850   color: HighlightText;

   851   background-color: Highlight;

   852 }

   854 #PanelUI-help[panel-multiview-anchor="true"] + toolbarseparator {

   855   display: none;

   856 }

   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 }

   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 }

   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 }

   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 }

   889 toolbarpaletteitem[place="palette"] > .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker,

   890 #bookmarks-menu-button[cui-areatype="menu-panel"] > .toolbarbutton-menubutton-dropmarker {

   891   display: none;

   892 }

   894 #search-container[cui-areatype="menu-panel"],

   895 #wrapper-search-container[place="panel"] {

   896   width: @menuPanelWidth@;

   897 }

   899 #search-container[cui-areatype="menu-panel"] {

   900   margin-top: 6px;

   901   margin-bottom: 6px;

   902 }

   904 toolbarpaletteitem[place="palette"] > #search-container {

   905   min-width: 7em;

   906   width: 7em;

   907 }

   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 }

   920 /* Make direct siblings overlap borders: */

   921 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons@inAnyPanel@ {

   922   border-top-color: transparent !important;

   923 }

   925 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons@inAnyPanel@,

   926 toolbarpaletteitem[haswideitem][place="panel"] + toolbarpaletteitem[haswideitem][place="panel"] {

   927   margin-top: -1px;

   928 }

   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 }

   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 }

   952 #main-window:not([customizing]) .toolbaritem-combined-buttons@inAnyPanel@ > toolbarbutton[disabled] > .toolbarbutton-icon {

   953   opacity: .25;

   954 }

   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 }

   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 }

   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 }

   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 }

   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 }

  1002 .toolbaritem-combined-buttons@inAnyPanel@:hover > separator {

  1003   margin: 0;

  1004 }

  1006 #widget-overflow > .panel-arrowcontainer > .panel-arrowcontent {

  1007   padding: 0;

  1008 }

  1010 .cui-widget-panelview,

  1011 #widget-overflow-scroller {

  1012   overflow-y: auto;

  1013   overflow-x: hidden;

  1014 }

  1016 #widget-overflow-scroller {

  1017   max-height: 30em;

  1018   margin-top: 10px;

  1019   margin-bottom: 10px;

  1020 }

  1022 #widget-overflow-list {

  1023   width: @menuPanelWidth@;

  1024   padding-left: 10px;

  1025   padding-right: 10px;

  1026 }

  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 }

  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 }

  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 }

  1049 #widget-overflow-list > .toolbaritem-combined-buttons {

  1050   min-height: 28px;

  1051 }

  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 }

  1067 .subviewbutton[checked="true"] {

  1068   background: url("chrome://global/skin/menu/shared-menu-check.png") center left 7px / 11px 11px no-repeat transparent;

  1069 }

  1071 .subviewbutton[checked="true"]:-moz-locale-dir(rtl) {

  1072   background-position: center right 7px;

  1073 }

  1075 .subviewbutton > .menu-iconic-left {

  1076   -moz-appearance: none;

  1077   -moz-margin-end: 3px;

  1078 }

  1080 menuitem[checked="true"].subviewbutton > .menu-iconic-left {

  1081   visibility: hidden;

  1082 }

The Tor Browser / file revision

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

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