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: 300px;
  13   margin: 1px 2px;
  14   min-width: 6.3em;
  15   border: none;
  16   background-color: #C09070;
  17   color: #000000;
  18   text-shadow: none;
  19 }
  20
  21 .button-box {
  22   border-radius: 300px;
  23   border: 1px solid transparent;
  24   padding-top: 1px;
  25   padding-bottom: 2px;
  26   -moz-padding-start: .5em;
  27   -moz-padding-end: calc(.5em + 1px);
  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"] {
  49   background-color: #A06060;
  50 }
  51
  52 button[default="true"] > .button-box {
  53   font-weight: bold;
  54 }
  55
  56 /* .......... active/open/checked state .......... */
  57
  58 button:hover,
  59 button:hover:active {
  60   border: none;
  61   background-color: #FFCF00;
  62   color: #000000;
  63 }
  64
  65 button[open="true"] {
  66   border: none;
  67   background-color: #FF9F00;
  68   color: #000000;
  69 }
  70
  71 button[checked="true"]:not(:hover) {
  72   border: none;
  73   background-color: #008484;
  74   color: #000000;
  75 }
  76
  77 button:hover:active > .button-box,
  78 button[open="true"] > .button-box,
  79 button[checked="true"] > .button-box {
  80   padding-top: 2px;
  81   padding-bottom: 1px;
  82   -moz-padding-start: calc(.5em + 1px);
  83   -moz-padding-end: .5em;
  84 }
  85
  86 /* .......... disabled state .......... */
  87
  88 button[disabled="true"],
  89 button[disabled="true"]:hover:active {
  90   border: none;
  91   background-color: #402858 !important;
  92   color: #000000 !important;
  93 }
  94
  95 button[disabled="true"] > .button-box {
  96   padding-top: 1px !important;
  97   padding-bottom: 2px !important;
  98   -moz-padding-start: .5em !important;
  99   -moz-padding-end: calc(.5em + 1px) !important;
 100 }
 101
 102 /* ::::: menu/menu-button buttons ::::: */
 103
 104 .button-menubutton-button,
 105 .button-menubutton-button:hover,
 106 .button-menubutton-button:hover:active,
 107 .button-menubutton-button[open="true"],
 108 .button-menubutton-button[disabled="true"] {
 109   margin: 0px;
 110   background-color: transparent;
 111 }
 112
 113 button[type="menu-button"]:hover:active > .button-menubutton-button > .button-box,
 114 button[type="menu-button"][open="true"] > .button-menubutton-button > .button-box {
 115   padding-top: 2px;
 116   padding-bottom: 1px;
 117   -moz-padding-start: calc(.5em + 1px);
 118   -moz-padding-end: .5em;
 119 }
 120
 121 button[type="menu-button"]:hover > .button-menubutton-button,
 122 button[type="menu-button"]:hover:active > .button-menubutton-button,
 123 button[type="menu-button"][open="true"] > .button-menubutton-button {
 124   color: #000000;
 125 }
 126
 127 .button-menu-dropmarker,
 128 .button-menubutton-dropmarker {
 129   margin: 2px;
 130   width: 11px;
 131   height: 11px;
 132   background-color: transparent;
 133   border: none;
 134 }
 135
 136 button[type="menu-button"]:hover > .button-menubutton-dropmarker,
 137 button[type="menu-button"]:hover:active > .button-menubutton-dropmarker,
 138 button[type="menu-button"][open="true"] > .button-menubutton-dropmarker {
 139   list-style-image: url("chrome://global/skin/arrow/arrow-down-hover.gif");
 140 }
 141
 142 /* ::::: plain buttons ::::: */
 143
 144 button.plain {
 145   border: 0px !important;
 146   margin: 0px !important;
 147   padding: 0px !important;
 148 }
 149
 150 button[type="disclosure"] {
 151   border: 0px !important;
 152   margin: 0px !important;
 153   padding: 0px !important;
 154   list-style-image: url("chrome://global/skin/tree/twisty-closed.gif");
 155   min-width: 0px !important;
 156   background-color: transparent;
 157 }
 158
 159 button[type="disclosure"][open="true"] {
 160   list-style-image: url("chrome://global/skin/tree/twisty-open.gif");
 161 }
 162
 163 /* ::::: xhtml buttons ::::: */
 164
 165 button::-moz-focus-inner {
 166   padding: 0px;
 167   border: 0px none;
 168 }
 169
 170 /* ::::: toolbar buttons (sync look with toolbarbutton) ::::: */
 171
 172 /* The #throbber-box rules are only needed for the SeaMonkey editor,
 173  * the toolbaritem ones for buttons in customizable toolbars. */
 174 toolbaritem > button,
 175 #throbber-box > button {
 176   border-radius: 3px;
 177   background-color: #000000;
 178   color: #FFCF00;
 179 }
 180
 181 toolbaritem > button > .button-box,
 182 #throbber-box > button > .button-box {
 183   border-radius: 3px;
 184   -moz-padding-start: 0;
 185   -moz-padding-end: 1px;
 186 }
 187
 188 toolbaritem > button > button:hover:active > .button-box,
 189 toolbaritem > button > button[open="true"] > .button-box,
 190 toolbaritem > button > button[checked="true"] > .button-box,
 191 #throbber-box > button:hover:active > .button-box,
 192 #throbber-box > button > button[open="true"] > .button-box,
 193 #throbber-box > button > button[checked="true"] > .button-box {
 194   -moz-padding-start: 1px;
 195   -moz-padding-end: 0;
 196 }
 197
 198 toolbaritem > button > button[disabled="true"] > .button-box,
 199 #throbber-box > button[disabled="true"] > .button-box {
 200   -moz-padding-start: 0 !important;
 201   -moz-padding-end: 1px !important;
 202 }