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   -moz-margin-end: 5px;
 131   width: 11px;
 132   height: 11px;
 133   background-color: transparent;
 134   border: none;
 135   list-style-image: url("chrome://global/skin/arrow/arrow-down-hover.gif");
 136 }
 137
 138 .button-menu-dropmarker,
 139 button[type="menu-button"]:hover > .button-menubutton-dropmarker,
 140 button[type="menu-button"]:hover:active > .button-menubutton-dropmarker,
 141 button[type="menu-button"][open="true"] > .button-menubutton-dropmarker {
 142 }
 143
 144 /* ::::: plain buttons ::::: */
 145
 146 button.plain {
 147   border: 0px !important;
 148   margin: 0px !important;
 149   padding: 0px !important;
 150 }
 151
 152 button[type="disclosure"] {
 153   border: 0px !important;
 154   margin: 0px !important;
 155   padding: 0px !important;
 156   list-style-image: url("chrome://global/skin/tree/twisty-closed.gif");
 157   min-width: 0px !important;
 158   background-color: transparent;
 159 }
 160
 161 button[type="disclosure"][open="true"] {
 162   list-style-image: url("chrome://global/skin/tree/twisty-open.gif");
 163 }
 164
 165 /* ::::: xhtml buttons ::::: */
 166
 167 button::-moz-focus-inner {
 168   padding: 0px;
 169   border: 0px none;
 170 }
 171
 172 /* ::::: toolbar buttons (sync look with toolbarbutton) ::::: */
 173
 174 /* The #throbber-box rules are only needed for the SeaMonkey editor,
 175  * the toolbaritem ones for buttons in customizable toolbars. */
 176 toolbaritem > button,
 177 #throbber-box > button {
 178   border-radius: 3px;
 179   background-color: #000000;
 180   color: #FFCF00;
 181 }
 182
 183 toolbaritem > button > .button-box,
 184 #throbber-box > button > .button-box {
 185   border-radius: 3px;
 186   -moz-padding-start: 0;
 187   -moz-padding-end: 1px;
 188 }
 189
 190 toolbaritem > button > button:hover:active > .button-box,
 191 toolbaritem > button > button[open="true"] > .button-box,
 192 toolbaritem > button > button[checked="true"] > .button-box,
 193 #throbber-box > button:hover:active > .button-box,
 194 #throbber-box > button > button[open="true"] > .button-box,
 195 #throbber-box > button > button[checked="true"] > .button-box {
 196   -moz-padding-start: 1px;
 197   -moz-padding-end: 0;
 198 }
 199
 200 toolbaritem > button > button[disabled="true"] > .button-box,
 201 #throbber-box > button[disabled="true"] > .button-box {
 202   -moz-padding-start: 0 !important;
 203   -moz-padding-end: 1px !important;
 204 }