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