LCARStrek/global/button.css

   1 /* This Source Code Form is subject to the terms of the Mozilla Public
   2  * License, v. 2.0. If a copy of the MPL was not distributed with this
   3  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
   4
   5 /* ===== button.css =====================================================
   6   == Styles used by the XUL (and XHTML in netError.xhtml) button element.
   7   ======================================================================= */
   8
   9 /* :::::::::: button :::::::::: */
  10
  11 button {
  12   border-radius: 3px;
  13   margin: 1px 2px;
  14   min-width: 6.3em;
  15   border: none;
  16   background-color: #000000;
  17   color: #FFCF00;
  18   text-shadow: none;
  19 }
  20
  21 .button-box {
  22   border-radius: 3px;
  23   border: 1px solid transparent;
  24   padding-top: 1px;
  25   padding-bottom: 2px;
  26   -moz-padding-start: 3px;
  27   -moz-padding-end: 4px;
  28 }
  29
  30 .button-icon {
  31   -moz-margin-end: 2px;
  32 }
  33
  34 .button-text {
  35   border-radius: 3px;
  36   margin: 0px !important;
  37   text-align: center;
  38 }
  39
  40 /* .......... focused state .......... */
  41
  42 button:-moz-focusring > .button-box {
  43   border: 1px dotted #008484;
  44 }
  45
  46 /* .......... default state .......... */
  47
  48 button[default="true"] > .button-box {
  49   font-weight: bold;
  50   list-style-image: url("chrome://global/skin/icons/return.gif");
  51   -moz-box-direction: reverse;
  52 }
  53
  54 button[default="true"] > .button-box > .button-icon {
  55   -moz-margin-end: 0px;
  56   -moz-margin-start: 2px;
  57 }
  58
  59 button[default="true"]:hover > .button-box,
  60 button[default="true"]:hover:active > .button-box {
  61   list-style-image: url("chrome://global/skin/icons/return-hover.gif");
  62 }
  63
  64 button[default="true"][disabled="true"] > .button-box {
  65   font-weight: bold;
  66   list-style-image: url("chrome://global/skin/icons/return-disabled.gif") !important;
  67 }
  68
  69 /* .......... active/open/checked state .......... */
  70
  71 button:hover,
  72 button:hover:active {
  73   border: none;
  74   background-color: #FFCF00;
  75   color: #000000;
  76 }
  77
  78 button[open="true"] {
  79   border: none;
  80   background-color: #FF9F00;
  81   color: #000000;
  82 }
  83
  84 button[checked="true"]:not(:hover) {
  85   border: none;
  86   background-color: #008484;
  87   color: #000000;
  88 }
  89
  90 button:hover:active > .button-box,
  91 button[open="true"] > .button-box,
  92 button[checked="true"] > .button-box {
  93   padding-top: 2px;
  94   padding-bottom: 1px;
  95   -moz-padding-start: 4px;
  96   -moz-padding-end: 3px;
  97 }
  98
  99 /* .......... disabled state .......... */
 100
 101 button[disabled="true"],
 102 button[disabled="true"]:hover:active {
 103   border: none;
 104   background-color: #000000 !important;
 105   color: #8050B0 !important;
 106 }
 107
 108 button[disabled="true"] > .button-box {
 109   padding-top: 1px !important;
 110   padding-bottom: 2px !important;
 111   -moz-padding-start: 3px !important;
 112   -moz-padding-end: 4px !important;
 113 }
 114
 115 /* ::::: menu/menu-button buttons ::::: */
 116
 117 .button-menubutton-button,
 118 .button-menubutton-button:hover,
 119 .button-menubutton-button:hover:active,
 120 .button-menubutton-button[open="true"],
 121 .button-menubutton-button[disabled="true"] {
 122   margin: 0px;
 123   background-color: transparent;
 124 }
 125
 126 button[type="menu-button"]:hover:active > .button-menubutton-button > .button-box,
 127 button[type="menu-button"][open="true"] > .button-menubutton-button > .button-box {
 128   padding-top: 2px;
 129   padding-bottom: 1px;
 130   -moz-padding-start: 4px;
 131   -moz-padding-end: 3px;
 132 }
 133
 134 button[type="menu-button"]:hover > .button-menubutton-button,
 135 button[type="menu-button"]:hover:active > .button-menubutton-button,
 136 button[type="menu-button"][open="true"] > .button-menubutton-button {
 137   color: #000000;
 138 }
 139
 140 .button-menu-dropmarker,
 141 .button-menubutton-dropmarker {
 142   margin: 2px;
 143   width: 11px;
 144   height: 11px;
 145   background-color: transparent;
 146   border: none;
 147 }
 148
 149 button[type="menu-button"]:hover > .button-menubutton-dropmarker,
 150 button[type="menu-button"]:hover:active > .button-menubutton-dropmarker,
 151 button[type="menu-button"][open="true"] > .button-menubutton-dropmarker {
 152   list-style-image: url("chrome://global/skin/arrow/arrow-down-hover.gif");
 153 }
 154
 155 /* ::::: plain buttons ::::: */
 156
 157 button.plain {
 158   border: 0px !important;
 159   margin: 0px !important;
 160   padding: 0px !important;
 161 }
 162
 163 button[type="disclosure"] {
 164   border: 0px !important;
 165   margin: 0px !important;
 166   padding: 0px !important;
 167   list-style-image: url("chrome://global/skin/tree/twisty-closed.gif");
 168   min-width: 0px !important;
 169   background-color: transparent;
 170 }
 171
 172 button[type="disclosure"][open="true"] {
 173   list-style-image: url("chrome://global/skin/tree/twisty-open.gif");
 174 }
 175
 176 /* ::::: xhtml buttons ::::: */
 177
 178 button::-moz-focus-inner {
 179   padding: 0px;
 180   border: 0px none;
 181 }