LCARStrek/global/skin/button.css

   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
   9     {
  10       -moz-border-radius  : 3px;
  11       border              : none;
  12       margin              : 1px 5px 2px 5px;
  13       background-color    : #000000;
  14       color               : #FFCF00;
  15     }
  16
  17   button:hover,
  18   button:hover:active
  19     {
  20       border              : none;
  21       background-color    : #FFCF00;
  22       color               : #000000;
  23     }
  24
  25   button[disabled="true"],
  26   button[disabled="true"]:hover,
  27   button[disabled="true"]:hover:active
  28     {
  29       border              : none;
  30       background-color    : #000000;
  31       color               : #8050B0;
  32     }
  33
  34 /* internal frame */
  35   button > .button-internal-box
  36     {
  37       -moz-border-radius  : 3px;
  38       vertical-align      : middle;
  39       text-align          : center;
  40       border              : none;
  41       padding             : 1px;
  42     }
  43
  44   button:hover:active > .button-internal-box
  45     {
  46       border              : none;
  47       padding             : 2px 0px 0px 2px;
  48     }
  49
  50   button[disabled="true"] > .button-internal-box,
  51   button[disabled="true"]:hover > .button-internal-box,
  52   button[disabled="true"]:hover:active > .button-internal-box
  53     {
  54       border              : none;
  55       padding             : 1px;
  56     }
  57
  58 /* text wrapping frame (hack because <text> does not support alignment) */
  59   .button-text-container
  60     {
  61       text-align          : center;
  62       vertical-align      : middle;
  63     }
  64
  65 /* text frame */
  66   .button-text
  67     {
  68       padding             : 1px 2px 1px 2px;
  69     }
  70
  71   button[orient="vertical"] > .button-internal-box > .button-text-container > .button-text
  72     {
  73       padding             : 2px 2px 1px 2px;
  74     }
  75
  76 /** Styles for "DEFAULT" buttons (usually 'OK' or equivalent in dialogs.
  77  *  To activate, set 'default' attribute on button.
  78  **/
  79
  80 /* outer frame */
  81   button[default]
  82     {
  83       list-style-image    : url("chrome://global/skin/return.gif");
  84     }
  85
  86   button[default]:hover
  87     {
  88     list-style-image    : url("chrome://global/skin/return-hover.gif");
  89     }
  90
  91   button[default][disabled="true"]
  92     {
  93       list-style-image    : url("chrome://global/skin/return-disabled.gif");
  94     }
  95
  96 /** Styles for 'dialog' buttons (usually any command button in a dialog)
  97  *  This class gives buttons 10px of padding on each side to increase the
  98  *  strike area and make buttons with small amounts of text (e.g. 'OK')
  99  *  look less silly.
 100  **/
 101
 102 /* internal frame */
 103   .button-dialog > .button-internal-box,
 104   .button-dialog:hover > .button-internal-box
 105     {
 106       padding             : 2px 10px 2px 10px;
 107     }
 108
 109   .button-dialog:hover:hover:active > .button-internal-box
 110     {
 111       padding             : 3px 9px 1px 11px;
 112     }
 113
 114 /** Styles for grey toolbar buttons. These buttons are used in places like
 115  *  editor's formatting toolbar or toolbars wanting a button similar to a command
 116  *  button but without an initial outset frame.
 117  **/
 118   .button-borderless
 119     {
 120       border              : none;
 121     }
 122
 123   .button-borderless:hover
 124     {
 125       border              : none;
 126     }
 127
 128   .button-borderless > .button-internal-box
 129     {
 130       border              : none;
 131     }
 132
 133   .button-borderless:hover > .button-internal-box
 134     {
 135       border              : none;
 136     }
 137
 138   .button-borderless:hover:active > .button-internal-box
 139     {
 140       border              : none;
 141     }
 142
 143 /** plain (raw) buttons, class="plain" **/
 144
 145   button.plain, button.plain:hover, button.plain:hover:active,
 146   button.plain > .button-internal-box,
 147   button.plain:hover:active > .button-internal-box,
 148   button.plain > .button-internal-box:hover:active,
 149   button.plain > .button-internal-box > .button-text-container,
 150   button.plain > .button-internal-box > .button-text-container:hover:active,
 151   button.plain > .button-internal-box > .button-text-container > .button-text,
 152   button.plain > .button-internal-box > .button-text-container > .button.text:hover:active,
 153   button-plain > .button-internal-box > .button-icon,
 154   button.plain > .button-internal-box > .button.icon:hover:active
 155     {
 156       border              : 0px;
 157       margin              : 0px;
 158       padding             : 0px;
 159     }
 160
 161
 162 /**
 163  * utility class for buttons with associated popup
 164  **/
 165 .button-popup
 166   {
 167           list-style-image      : url(chrome://global/skin/taskbar-popup-arrow.gif);
 168   }