LCARStrek/global/skin/button.css

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