EarlyBlue/communicator/skin/button.css

   1 \r
   2 /** Standard toolbar buttons\r
   3  *  class="button-toolbar"\r
   4  **/\r
   5   .button-toolbar\r
   6     {\r
   7       border                : none;\r
   8       margin                : 0px;\r
   9       -moz-border-radius    : 0px;\r
  10       color                 : black;\r
  11       padding               : 0px;\r
  12       font                  : 3mm arial;\r
  13       max-width             : 10em;\r
  14     }\r
  15 \r
  16   .button-toolbar[toggled="true"]\r
  17     {\r
  18 /*      background-color      : #EEEEEE; */\r
  19     }    \r
  20     \r
  21   .button-toolbar[disabled="true"],\r
  22   .button-toolbar[disabled="true"]:hover,\r
  23   .button-toolbar[disabled="true"]:hover:active\r
  24     {\r
  25       color                 : #9999CC;\r
  26     }\r
  27 \r
  28   .button-toolbar > .button-internal-box\r
  29     {\r
  30       border                : 1px solid transparent;\r
  31       padding               : 1px 2px 1px 2px;\r
  32     }\r
  33     \r
  34   .button-toolbar:hover > .button-internal-box\r
  35     {\r
  36       border                : 1px outset #CCD0DD;\r
  37       padding               : 1px 2px 1px 2px;\r
  38     }\r
  39     \r
  40   .button-toolbar:hover:active > .button-internal-box\r
  41     {\r
  42       border                : 1px inset #CCD0DD;\r
  43       padding               : 2px 1px 0px 3px;\r
  44     }\r
  45 \r
  46   .button-toolbar[disabled="true"]:hover:active > .button-internal-box\r
  47     {\r
  48       border                : 1px solid transparent;\r
  49       padding               : 1px 2px 1px 2px;\r
  50     }\r
  51 \r
  52   .button-toolbar:hover:active[home-dragover="true"] > .button-internal-box\r
  53     {\r
  54       border                : 1px outset #CCD0DD;\r
  55       padding               : 1px 2px 1px 2px;\r
  56     }\r
  57     \r
  58   .button-toolbar > .button-internal-box > .button-text-container\r
  59     {\r
  60       padding               : 0px;\r
  61       margin                : 0px;\r
  62     }\r
  63     \r
  64   .button-toolbar > .button-internal-box > .button-text-container > .button-text\r
  65     {\r
  66       padding               : 0px;\r
  67       padding-left          : 1px;\r
  68       margin                : 0px;\r
  69     }\r
  70 \r
  71 /** The largest type of toolbar buttons. In the Seamonkey implementation, \r
  72  *  these are only used in the navigation toolbar in the navigator package.\r
  73  **/\r
  74  \r
  75   /* outer frame */\r
  76   .button-toolbar-1\r
  77     {\r
  78       background-color    : transparent;\r
  79       color               : #000000;\r
  80       min-width           : 36px;\r
  81       min-height          : 36px;\r
  82       margin              : 0px;\r
  83       padding             : 0px;\r
  84       font-size           : smaller;\r
  85       border              : none; \r
  86     }\r
  87 \r
  88 /* internal frame */\r
  89   .button-toolbar-1[disabled="true"] > .button-internal-box,\r
  90   .button-toolbar-1[disabled="true"]:hover > .button-internal-box,\r
  91   .button-toolbar-1[disabled="true"]:hover:active > .button-internal-box\r
  92     {\r
  93       border              : 1px solid transparent;\r
  94       padding             : 1px;\r
  95     }\r
  96       \r
  97   .button-toolbar-1 > .button-internal-box\r
  98     {\r
  99       border              : 1px solid transparent;\r
 100       vertical-align      : middle;\r
 101     }\r
 102     \r
 103   .button-toolbar-1:hover > .button-internal-box\r
 104     {\r
 105       border              : 1px outset #CCD0DD;\r
 106       vertical-align      : middle;\r
 107     }\r
 108     \r
 109   .button-toolbar-1:hover:active > .button-internal-box\r
 110     {\r
 111       border              : 1px inset #CCD0DD;\r
 112       vertical-align      : middle;\r
 113       padding             : 2px 0px 0px 2px;\r
 114     }\r
 115     \r
 116   .button-toolbar-1 > .button-internal-box > .button-text-container \r
 117     {\r
 118       display             : none;\r
 119       text-align          : center;\r
 120     }\r
 121     \r
 122 /** Styles for the standard 'large' toolbar button, these buttons are used for\r
 123  *  toolbar buttons that are the most commonly used elements on a toolbar, e.g.\r
 124  *  'GetMsg' in Mailnews or 'Send' in Mail/Compose.\r
 125  **/\r
 126   .button-toolbar-2\r
 127     {\r
 128       background-color    : transparent;\r
 129       color               : #000000;\r
 130       min-width           : 32px;\r
 131       min-height          : 32px;\r
 132       margin              : 0px;\r
 133       padding             : 0px;\r
 134       font-size           : smaller;\r
 135       border              : none;\r
 136     }\r
 137         \r
 138 /* internal frame */\r
 139   .button-toolbar-2 > .button-internal-box\r
 140     {\r
 141       border              : 1px solid transparent;\r
 142       padding             : 1px; \r
 143       vertical-align      : middle;\r
 144     }\r
 145 \r
 146   .button-toolbar-2:hover > .button-internal-box\r
 147     {\r
 148       padding             : 1px;\r
 149       border              : 1px outset #CCD0DD;\r
 150     }\r
 151 \r
 152   .button-toolbar-2:hover:active > .button-internal-box\r
 153     {\r
 154       padding             : 2px 0px 0px 2px;\r
 155       border              : 1px inset #CCD0DD;\r
 156     }\r
 157   \r
 158   .button-toolbar-2[disabled="true"] > .button-internal-box,\r
 159   .button-toolbar-2[disabled="true"]:hover > .button-internal-box,\r
 160   .button-toolbar-2[disabled="true"]:hover:active > .button-internal-box\r
 161     {\r
 162       padding             : 1px;\r
 163       border              : 1px solid transparent;\r
 164     }\r
 165       \r
 166 /* text wrapper frame */\r
 167   .button-toolbar-2 > .button-internal-box > .button-text-container \r
 168     {\r
 169       padding-top         : 3px;\r
 170       text-align          : center;\r
 171     }\r
 172 \r
 173 \r
 174 /** "Green" buttons, e.g. "Search"\r
 175  *  class="button-toolbar-3"\r
 176  **/  \r
 177 \r
 178   .button-toolbar-3 \r
 179     {\r
 180       margin                : 0px 0px 0px 0px;\r
 181       font-weight           : bold;\r
 182       background-color      : #9999CC;\r
 183       border                : none\r
 184     }  \r
 185 \r
 186   .button-toolbar-3[disabled="true"],\r
 187   .button-toolbar-3[disabled="true"]:hover,\r
 188   .button-toolbar-3[disabled="true"]:hover:active \r
 189     {\r
 190       border              : none;\r
 191       color               : #CCCCCC;\r
 192     }\r
 193            \r
 194   .button-toolbar-3 > .button-internal-box,\r
 195     {\r
 196       border                : 1px outset #9999CC;\r
 197       padding               : 1px;\r
 198     }\r
 199     \r
 200   .button-toolbar-3:hover:active > .button-internal-box,\r
 201     {\r
 202       border                : 1px inset #9999CC;\r
 203       padding               : 2px 0px 0px 2px;\r
 204     } \r
 205 \r
 206 /** Expanding Region Button **/\r
 207 \r
 208 /* outer frame */\r
 209   button.expander\r
 210     {\r
 211       border              : none;\r
 212       padding             : none;\r
 213 /*      margin              : 1px 5px 3px 1px; */\r
 214       background-color    : inherit;\r
 215       list-style-image    : url("chrome://global/skin/closedtwisty.gif");\r
 216     }\r
 217     \r
 218   button[open="true"].expander \r
 219     {\r
 220       list-style-image    : url("chrome://global/skin/opentwisty.gif");\r
 221     }\r
 222     \r
 223 /* internal frame */\r
 224   button.expander > .button-internal-box\r
 225     {\r
 226       border              : none;\r
 227       background-color    : inherit;\r
 228       padding             : none;\r
 229       margin              : none;\r
 230     }\r
 231 \r
 232 /* text frame */\r
 233   button.expander > .button-internal-box > .button-text-container > .button-text\r
 234     {\r
 235       color               : #0000FF;\r
 236       text-decoration     : underline;\r
 237     }\r
 238     \r
 239   button.expander:hover > .button-internal-box > .button-text-container > .button-text\r
 240     {\r
 241       color               : #FF0000;\r
 242     }\r
 243 \r
 244 /** \r
 245  * button styles for taskbar, sidebar headers, etc.\r
 246  **/\r
 247 .button-toolbar-4\r
 248   {\r
 249     color                 : #CCCCFF;\r
 250     background            : inherit;\r
 251     font                  : inherit;\r
 252     border                : none;\r
 253     padding               : 1px;\r
 254     margin                : 0px;\r
 255   }\r
 256 \r
 257 .button-toolbar-4:hover \r
 258   {\r
 259     text-decoration       : none;\r
 260     background-color      : #9999CC;\r
 261   }\r
 262 \r
 263 .button-toolbar-4:hover:active \r
 264   {\r
 265     text-decoration       : none;\r
 266     color                 : #000000;\r
 267     background-color      : #CCCCFF;\r
 268   }\r
 269   \r
 270 menubutton.button-toolbar-4\r
 271   {\r
 272     -moz-binding          : url("chrome://global/content/menulistBindings.xml#menubutton-single-right");\r
 273   }\r
 274 \r
 275 .button-toolbar-4 > .menubutton-internal-box > .menubutton-single-icon\r
 276   {\r
 277       list-style-image    : url(chrome://global/skin/mb-single-arrow.gif);\r
 278       margin-left         : 4px;\r
 279   }\r
 280 \r
 281 .button-toolbar-4 > .button-internal-box,\r
 282 .button-toolbar-4 > .menubutton-internal-box,\r
 283 .button-toolbar-4:hover:active > .button-internal-box,\r
 284 .button-toolbar-4 > .button-internal-box:hover:active\r
 285   {\r
 286     border                : none;\r
 287     padding               : 0px;\r
 288     padding-left          : 2px;\r
 289   }