EarlyBlue/global/toolbarbutton.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 /* ===== toolbarbutton.css =====================================================
   6   == Styles used by the XUL button element.
   7   ======================================================================= */
   8
   9 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
  10
  11 /* ::::: toolbarbutton ::::: */
  12
  13 toolbarbutton {
  14   -moz-box-align: center;
  15   -moz-box-pack: center;
  16   margin: 0px;
  17   border: 1px solid transparent;
  18   padding: 1px;
  19   background-color: transparent;
  20   color: #000000;
  21 }
  22
  23 .toolbarbutton-icon[label]:not([label=""]),
  24 .toolbarbutton-icon[type="menu"] {
  25   -moz-margin-end: 2px;
  26 }
  27
  28 .toolbarbutton-text {
  29   margin: 0px !important; /* !important for overriding global.css */
  30   padding: 0px;
  31   text-align: center;
  32 }
  33
  34 toolbarbutton.tabbable {
  35   -moz-user-focus: normal !important;
  36 }
  37
  38 toolbarbutton:-moz-focusring {
  39   outline: 1px dotted #666699;
  40   outline-offset: -1px;
  41 }
  42
  43 /*
  44 toolbarbutton:hover,
  45 toolbarbutton.toolbarbutton-menubutton-button[open="true"] {
  46 }
  47 */
  48
  49 toolbarbutton:hover {
  50   border: 1px outset #CCD0DD;
  51 }
  52
  53 toolbarbutton:hover:active,
  54 toolbarbutton[open="true"] {
  55   padding-top: 2px;
  56   padding-bottom: 0px;
  57   -moz-padding-start: 2px;
  58   -moz-padding-end: 0px;
  59   border: 1px inset #CCD0DD;
  60 }
  61
  62 toolbarbutton[disabled="true"],
  63 toolbarbutton[disabled="true"]:hover,
  64 toolbarbutton[disabled="true"]:hover:active,
  65 toolbarbutton[disabled="true"][open="true"] {
  66   border: 1px solid transparent;
  67   padding: 1px;
  68   color: #999999;
  69 }
  70
  71 toolbarbutton:-moz-lwtheme {
  72   text-shadow: none;
  73 }
  74
  75 /* ..... checked state ..... */
  76
  77 toolbarbutton[checked="true"] {
  78   padding-top: 2px !important;
  79   padding-bottom: 0px !important;
  80   -moz-padding-start: 2px !important;
  81   -moz-padding-end: 0px !important;
  82   border: 1px inset #CCD0DD !important;
  83   background-color: #DDDDDD !important;
  84 }
  85
  86 /* ::::: toolbarbutton menu ::::: */
  87
  88 .toolbarbutton-menu-dropmarker {
  89   padding: 0px;
  90   border: none !important;
  91   background-color: transparent !important;
  92 }
  93
  94 /* ::::: toolbarbutton menu-button ::::: */
  95
  96 toolbarbutton[type="menu-button"] {
  97   -moz-box-align: stretch;
  98 }
  99
 100 toolbarbutton[type="menu-button"],
 101 toolbarbutton[type="menu-button"]:hover,
 102 toolbarbutton[type="menu-button"]:hover:active,
 103 toolbarbutton[type="menu-button"][open="true"],
 104 toolbarbutton[type="menu-button"][disabled="true"],
 105 toolbarbutton[type="menu-button"][disabled="true"]:hover,
 106 toolbarbutton[type="menu-button"][disabled="true"]:hover:active {
 107   border-style: none;
 108   padding: 0px !important;
 109 }
 110
 111 .toolbarbutton-menubutton-button {
 112   -moz-box-align: center;
 113   -moz-box-pack: center;
 114   -moz-box-orient: vertical;
 115 }
 116
 117 .toolbarbutton-menubutton-button,
 118 .toolbarbutton-menubutton-dropmarker {
 119   border: 1px solid transparent;
 120 }
 121
 122 .toolbarbutton-menubutton-button[disabled="true"],
 123 .toolbarbutton-menubutton-dropmarker[disabled="true"] {
 124   border: 1px solid transparent !important;
 125 }
 126
 127 toolbarbutton[type="menu-button"]:hover > .toolbarbutton-menubutton-button,
 128 toolbarbutton[type="menu-button"]:hover > .toolbarbutton-menubutton-dropmarker {
 129   border: 1px outset #CCD0DD;
 130 }
 131
 132 toolbarbutton[type="menu-button"]:hover:active > .toolbarbutton-menubutton-button,
 133 toolbarbutton[type="menu-button"]:hover:active > .toolbarbutton-menubutton-dropmarker,
 134 toolbarbutton[type="menu-button"][open="true"] > .toolbarbutton-menubutton-button,
 135 toolbarbutton[type="menu-button"][open="true"] > .toolbarbutton-menubutton-dropmarker {
 136   border: 1px inset #CCD0DD;
 137 }
 138
 139 toolbarbutton[type="menu-button"]:hover:active > toolbarbutton.toolbarbutton-menubutton-button,
 140 toolbarbutton[type="menu-button"][open="true"] > toolbarbutton.toolbarbutton-menubutton-button {
 141   padding-top: 2px !important;
 142   padding-bottom: 0px !important;
 143   -moz-padding-start: 2px !important;
 144   -moz-padding-end: 0px !important;
 145 }
 146
 147 toolbarbutton[disabled="true"] > toolbarbutton.toolbarbutton-menubutton-button,
 148 toolbarbutton[disabled="true"]:hover:active > toolbarbutton.toolbarbutton-menubutton-button {
 149   padding: 1px !important;
 150 }
 151
 152 /* ::::: toolbarbutton badged ::::: */
 153
 154 .toolbarbutton-badge-container > .toolbarbutton-icon[label]:not([label=""]) {
 155   -moz-margin-end: 0;
 156 }
 157
 158 .toolbarbutton-badge[badge=""] {
 159   display: none;
 160 }
 161
 162 .toolbarbutton-badge {
 163   background-color: #CCD0DD;
 164 }
 165
 166 .toolbarbutton-badge::after {
 167   /* The |content| property is set in the content stylesheet. */
 168   font-size: 10px;
 169   font-weight: bold;
 170   padding: 1px 2px 2px;
 171   color: #000000;
 172   background-color: inherit;
 173   border-radius: 2px;
 174   box-shadow: 0 1px 0 #9999CC inset,
 175               0 -1px 0 #9999CC inset,
 176               0 1px 0 #9999CC;
 177   position: absolute;
 178   top: -4px;
 179   right: -2px;
 180   min-width: 10px;
 181   line-height: 10px;
 182   text-align: center;
 183 }
 184
 185 .toolbarbutton-badge:-moz-locale-dir(rtl)::after {
 186   left: -2px;
 187   right: auto;
 188 }
 189
 190 .toolbarbutton-badge-container {
 191   position: relative;
 192 }
 193
 194 /* .......... dropmarker .......... */
 195
 196 .toolbarbutton-menubutton-dropmarker {
 197   -moz-box-align: start;
 198   padding: 3px 1px 1px;
 199   background-color: transparent;
 200 }
 201
 202 toolbarbutton[type="menu-button"]:hover:active > .toolbarbutton-menubutton-dropmarker,
 203 toolbarbutton[type="menu-button"][open="true"] > .toolbarbutton-menubutton-dropmarker {
 204   padding-top: 4px;
 205   padding-bottom: 0px;
 206   -moz-padding-start: 2px;
 207   -moz-padding-end: 0px;
 208 }
 209
 210 .toolbarbutton-menubutton-dropmarker[disabled="true"] {
 211   padding: 3px 1px 1px !important;
 212 }