bug 77 css scoping - making skin work again

[themes.git] / EarlyBlue / communicator / skin / menubutton.css

/** Styles applying to items in a button-toolbar-3 style menu
 *  menuitem class="button-toolbar-3"
 **/
  .button-toolbar-3 > .menubutton-icon-internal-box
    {
      border                : 1px outset #9999CC;
    }

  .button-toolbar-3[open="true"] > .menubutton-icon-internal-box,
  .button-toolbar-3:hover:active > .menubutton-icon-internal-box
    {
      border                : 1px inset #9999CC;
    }
  
  menupopup.button-toolbar-3 
    {
      border                : none;
    }
  
  menuitem.button-toolbar-3 
    {
      font-weight           : normal;
    }
   
  .button-toolbar-3[menuactive="true"]
    {
      background-color      : #666699;
      color                 : #FFFFFF;
      font-weight           : normal;
    } 
    
/** menubuttons on generic grey toolbars
 *  class="button-toolbar"
 **/ 
  .button-toolbar > .menubutton-internal-box
    {
      border                : 1px solid transparent;
      padding               : 1px 2px 1px 2px;
    }


 .button-toolbar:hover > .menubutton-internal-box
    {
      border                : 1px outset #CCD0DD;
      padding               : 1px 2px 1px 2px;
    }

 .button-toolbar[open="true"] > .menubutton-internal-box,
 .button-toolbar[open="true"] > .button-internal-box,
 .button-toolbar:hover:active > .menubutton-internal-box
    {
      border                : 1px inset #CCD0DD;
      padding               : 2px 1px 0px 3px;
    }

/** 
 * Navigation bar style menubuttons 
 **/


/* This is really a hack to deal with buggy :hover - but it's now in toolkit (see below, taken from classic) */

/**
 * XXX - this is a hack. :hover does not work to spec and so we're using a binding
 *       with JS that lives in xpfe/global/resources/content/menulistBindings.xml
 *       to set attributes on various parts of the button when mouse down/over 
 *       events fire. When :hover works correctly, this can be removed (see
 *       revision 1.21 of this file for details.
 */


.menubutton-dual.top
  {
    -moz-binding          : url("chrome://global/content/bindings/menubutton.xml#menubutton-dual-ex");
/*    -moz-user-focus       : ignore !important; */
  }

.menubutton-dual.left
  {
    -moz-binding          : url("chrome://global/content/bindings/menubutton.xml#menubutton-dual-ex-left");
/*    -moz-user-focus       : none !important; */
  }  
  


.menubutton-dual
  {
    font-size               : smaller;
  }

.menubutton-dual-ex-button > .button-internal-box > .button-text-container 
  {
    padding-top             : 3px;
    text-align              : center;
  }



.menubutton-dual > .menubutton-dual-ex-button > .button-internal-box
  {
    border                  : 1px solid transparent;
    padding                 : 1px;
  }

.menubutton-dual-ex-button
  {
    margin                  : 0px;
  }

.menubutton-dual:hover > .menubutton-dual-ex-button > .button-internal-box,
.menubutton-dual[buttonover="true"] > .menubutton-dual-ex-button > .button-internal-box
  {
    border                  : 1px outset #CCD0DD;
    padding                 : 1px;
  }

.menubutton-dual:hover:active > .menubutton-dual-ex-button > .button-internal-box,
.menubutton-dual[open="true"] > .menubutton-dual-ex-button > .button-internal-box,
.menubutton-dual > .menubutton-dual-ex-button:hover:active > .button-internal-box
  {
    border                  : 1px inset #CCD0DD;
    padding                 : 2px 0px 0px 2px;
  }


.menubutton-dual[disabled="true"] > .menubutton-dual-ex-button > .button-internal-box,
.menubutton-dual[disabled="true"]:hover:active > .menubutton-dual-ex-button > .button-internal-box,
.menubutton-dual[disabled="true"][open="true"] > .menubutton-dual-ex-button > .button-internal-box,
.menubutton-dual[disabled="true"][buttonover="true"] > .menubutton-dual-ex-button > .button-internal-box,
.menubutton-dual[disabled="true"] > .menubutton-dual-ex-button:hover:active > .button-internal-box
  {
    border                  : 1px solid transparent;
    padding                 : 1px;
  }


  
.menubutton-dual > .menubutton-dual-dropmarker-box
  {
    border                  : 1px solid transparent;
    padding                 : 1px;
  }

.menubutton-dual-ex:hover > .menubutton-dual-dropmarker-box,
.menubutton-dual:hover > .menubutton-dual-dropmarker-box,
.menubutton-dual > .menubutton-dual-dropmarker-box:hover,
.menubutton-dual[buttonover="true"] > .menubutton-dual-dropmarker-box
  {
    border                  : 1px outset #CCD0DD;
    padding                 : 1px;
  }

.menubutton-dual:hover:active > .menubutton-dual-dropmarker-box,
.menubutton-dual[open="true"] > .menubutton-dual-dropmarker-box
  {
    border                  : 1px inset #CCD0DD;
    padding                 : 2px 0px 0px 2px;
  }


.menubutton-dual[disabled="true"] > .menubutton-dual-dropmarker-box,
.menubutton-dual[disabled="true"]:hover:active > .menubutton-dual-dropmarker-box,
.menubutton-dual[disabled="true"][open="true"] > .menubutton-dual-dropmarker-box,
.menubutton-dual[disabled="true"][buttonover="true"] > .menubutton-dual-dropmarker-box
  {
    border                  : 1px solid transparent;
    padding                 : 1px;
  }


menubutton > .menubutton-dual-dropmarker-box > .menubutton-dropmarker
  {
/*    padding-bottom           : 17px;  */
    padding-bottom           : 24px;  
  }