home *** CD-ROM | disk | FTP | other *** search
/ Chip 2002 January / 01_02.iso / software / netscape62win / skinclas.xpi / bin / chrome / classic.jar / skin / classic / global / button.css < prev    next >
Cascading Style Sheet File  |  2001-08-20  |  6KB  |  174 lines

  1. /* NEW WIDGET ANDING: <button> */
  2.  
  3. /** Default Button Styles (apply to usage of <button> without 
  4.  *  any applied class).
  5.  **/
  6.  
  7. /* outer frame */
  8.   button, button.left
  9.     {
  10.       margin              : 1px 5px 2px 5px;
  11.       min-width           : 6.3em;
  12.       background-color    : ThreeDFace;
  13.       color               : ButtonText;
  14.       -moz-user-focus     : normal;
  15.     }
  16.   
  17.   .button-text {
  18.     margin: 0px !important;
  19.     text-align: center;
  20.   }
  21.  
  22.   button, 
  23.   button[disabled="true"][default],
  24.   button[disabled="true"]:hover:active
  25.     {
  26.       border-left         : 1px solid ThreeDHighlight;
  27.       border-top          : 1px solid ThreeDHighlight;
  28.       border-right        : 1px solid ThreeDDarkShadow;
  29.       border-bottom       : 1px solid ThreeDDarkShadow;
  30.     }
  31.  
  32.   .button-box-1,
  33.   button[disabled="true"][default] > .button-box-1,
  34.   button[disabled="true"]:hover:active > .button-box-1
  35.     {
  36.       border-left         : 1px solid ThreeDLightShadow;
  37.       border-top          : 1px solid ThreeDLightShadow;
  38.       border-right        : 1px solid ThreeDShadow;
  39.       border-bottom       : 1px solid ThreeDShadow;
  40.       -moz-user-focus     : none;
  41.     }
  42.  
  43.   .button-box-2,
  44.   button[disabled="true"][default] > .button-box-1 > .button-box-2,
  45.   button[disabled="true"]:hover:active > .button-box-1 > .button-box-2
  46.     {
  47.             border              : 1px solid ThreeDFace;    
  48.     }
  49.   
  50.   button:hover:active,
  51.   button[open="true"]
  52.     {
  53.       border              : 1px solid ThreeDDarkShadow;
  54.     }
  55.  
  56.   button:hover:active > .button-box-1,
  57.   button[open="true"] > .button-box-1
  58.     {
  59.       border              : 1px solid ThreeDShadow;
  60.     }
  61.  
  62.   button:hover:active > .button-box-1 > .button-box-2,
  63.   button[open="true"] > .button-box-1 > .button-box-2
  64.     {
  65.       border              : 1px solid ThreeDFace;
  66.     }
  67.  
  68.   button:hover:active > .button-box-1 > .button-box-2 > .button-box-text,
  69.   button[open="true"] > .button-box-1 > .button-box-2 > .button-box-text
  70.     {
  71.       padding             : 1px 2px 0px 3px; 
  72.     }
  73.   
  74.   button[disabled="true"],
  75.   button[disabled="true"]:hover:active 
  76.     {
  77.       color               : GrayText;
  78.     }
  79.         
  80.   button[disabled="true"] > .button-box-1 > .button-box-2 > .button-box-text,
  81.   button[disabled="true"]:hover:active > .button-box-1 > .button-box-2 > .button-box-text
  82.     {
  83.       padding             : 0px 3px 1px 2px;
  84.     }
  85.  
  86. /* text wrapping frame (hack because <text> does not support alignment) */
  87.   .button-box-text,
  88.   button[disabled]:focus > .button-box-1 > .button-box-2 > .button-box-text
  89.     {
  90.       padding             : 0px 3px 1px 2px;
  91.       border              : 1px solid ThreeDFace;
  92.       margin              : 1px;
  93.     }
  94.  
  95.   button:focus > .button-box-1 > .button-box-2 > .button-box-text
  96.     {
  97.       border              : 1px dotted ThreeDDarkShadow;
  98.     }    
  99.     
  100. /** Styles for "DEFAULT" buttons (usually 'OK' or equivalent in dialogs. 
  101.  *  To activate, set 'default' attribute on button.
  102.  **/
  103.  
  104. /* outer frame */  
  105.   button[default], button:focus
  106.     {
  107.       border              : 1px solid ThreeDDarkShadow;
  108.     }
  109.  
  110.   button[default] > .button-box-1,
  111.   button:focus > .button-box-1
  112.     {
  113.       border-left         : 1px solid ThreeDHighlight;
  114.       border-top          : 1px solid ThreeDHighlight;
  115.       border-right        : 1px solid ThreeDDarkShadow;
  116.       border-bottom       : 1px solid ThreeDDarkShadow;
  117.     }
  118.  
  119.   button[default] > .button-box-1 > .button-box-2,
  120.   button:focus > .button-box-1 > .button-box-2
  121.     {
  122.       border-left         : 1px solid ThreeDLightShadow;
  123.       border-top          : 1px solid ThreeDLightShadow;
  124.       border-right        : 1px solid ThreeDShadow;
  125.       border-bottom       : 1px solid ThreeDShadow;
  126.     }
  127.   
  128. /** plain (raw) buttons, class="plain" **/
  129.   button.plain, button.plain:hover, button.plain:hover:active,
  130.   button.plain:hover:active > .button-internal-box,
  131.   button.plain > .button-internal-box, 
  132.   button.plain > .button-internal-box:hover:active,
  133.   button.plain > .button-internal-box > .button-text-container, 
  134.   button.plain > .button-internal-box > .button-text-container:hover:active,
  135.   button.plain > .button-internal-box > .button-text-container > .button-text, 
  136.   button.plain > .button-internal-box > .button-text-container > .button.text:hover:active,
  137.   button-plain > .button-internal-box > .button-icon, 
  138.   button.plain > .button-internal-box > .button.icon:hover:active
  139.     {
  140.       border              : 0px ! important;
  141.       margin              : 0px;
  142.       padding             : 0px;
  143.     }
  144.  
  145. /*** class = "plain-extended" ***/
  146. /********************************/
  147. /* This is a dummy class that is specified in several XUL files for the sake of the
  148.  * Macintosh Classic Skin.  This class has essentially the same behavior and styles as
  149.  * the above <button> and accompanying styles, but is useful in the Mac Classic skin.  This is because <button>
  150.  * styles have been completely rewritten to produce Macintosh buttons with bevels, rounded corners,
  151.  * etc.  Plain-extended thereby functions to produce square buttons with all the same hover and active
  152.  * effects that modern <button>'s do.
  153.  ********************************/
  154.  
  155.   button.plain-extended {}
  156.  
  157.   .reorder-up
  158.     {
  159.       min-width           : 0px;
  160.     }    
  161.     
  162.   .reorder-down
  163.     {
  164.       min-width           : 0px;
  165.     }    
  166.     
  167.   .reorder-up > .button-internal-box > .button-icon,
  168.   .reorder-down > .button-internal-box > .button-icon
  169.     {
  170.       margin              : 0;
  171.       padding             : 0;
  172.     }
  173.     
  174.