/toolkit/themes/gnomestripe/global/button.css

https://github.com/neonux/mozilla-all · CSS · 348 lines · 253 code · 78 blank · 17 comment · 0 complexity · b9511642243d85e010bfe39da40dd0be MD5 · raw file

  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. /* ===== button.css =====================================================
  5. == Styles used by the XUL button element.
  6. ======================================================================= */
  7. @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
  8. /* :::::::::: button :::::::::: */
  9. button {
  10. -moz-appearance: button;
  11. margin: 1px 5px 2px 5px;
  12. min-width: 6.3em;
  13. border: 3px solid;
  14. -moz-border-top-colors: transparent ThreeDHighlight ThreeDLightShadow;
  15. -moz-border-right-colors: transparent ThreeDDarkShadow ThreeDShadow;
  16. -moz-border-bottom-colors: transparent ThreeDDarkShadow ThreeDShadow;
  17. -moz-border-left-colors: transparent ThreeDHighlight ThreeDLightShadow;
  18. background-color: ThreeDFace;
  19. color: ButtonText;
  20. text-shadow: none;
  21. }
  22. .button-box {
  23. -moz-appearance: button-focus;
  24. border: 1px solid transparent;
  25. padding-top: 1px;
  26. padding-bottom: 2px;
  27. -moz-padding-start: 3px;
  28. -moz-padding-end: 4px;
  29. }
  30. .button-icon {
  31. -moz-margin-end: 2px;
  32. }
  33. .button-text {
  34. margin: 0 !important;
  35. text-align: center;
  36. }
  37. /* .......... focused state .......... */
  38. button:focus {
  39. -moz-border-top-colors: ThreeDDarkShadow ThreeDHighlight transparent;
  40. -moz-border-right-colors: ThreeDDarkShadow ThreeDDarkShadow ThreeDShadow;
  41. -moz-border-bottom-colors: ThreeDDarkShadow ThreeDDarkShadow ThreeDShadow;
  42. -moz-border-left-colors: ThreeDDarkShadow ThreeDHighlight transparent;
  43. }
  44. button:focus > .button-box {
  45. border: 1px dotted ThreeDDarkShadow;
  46. }
  47. /* .......... default state .......... */
  48. button[default="true"] {
  49. -moz-border-top-colors: ThreeDDarkShadow ThreeDHighlight ThreeDLightShadow;
  50. -moz-border-right-colors: ThreeDDarkShadow ThreeDDarkShadow ThreeDShadow;
  51. -moz-border-bottom-colors: ThreeDDarkShadow ThreeDDarkShadow ThreeDShadow;
  52. -moz-border-left-colors: ThreeDDarkShadow ThreeDHighlight ThreeDLightShadow;
  53. }
  54. /* .......... hover state .......... */
  55. button:hover {
  56. color: -moz-buttonhovertext;
  57. background-color: -moz-buttonhoverface;
  58. }
  59. /* .......... active/open/checked state .......... */
  60. button:hover:active,
  61. button[open="true"],
  62. button[checked="true"] {
  63. -moz-border-top-colors: ThreeDDarkShadow ThreeDShadow transparent;
  64. -moz-border-right-colors: ThreeDDarkShadow ThreeDShadow transparent;
  65. -moz-border-bottom-colors: ThreeDDarkShadow ThreeDShadow transparent;
  66. -moz-border-left-colors: ThreeDDarkShadow ThreeDShadow transparent;
  67. color: ButtonText;
  68. }
  69. button:hover:active > .button-box,
  70. button[open="true"] > .button-box,
  71. button[checked="true"] > .button-box {
  72. padding-top: 2px;
  73. padding-bottom: 1px;
  74. -moz-padding-start: 4px;
  75. -moz-padding-end: 3px;
  76. }
  77. /* .......... disabled state .......... */
  78. button[disabled="true"],
  79. button[disabled="true"]:hover:active {
  80. -moz-border-top-colors: transparent ThreeDHighlight ThreeDLightShadow !important;
  81. -moz-border-right-colors: transparent ThreeDDarkShadow ThreeDShadow !important;
  82. -moz-border-bottom-colors: transparent ThreeDDarkShadow ThreeDShadow !important;
  83. -moz-border-left-colors: transparent ThreeDHighlight ThreeDLightShadow !important;
  84. color: GrayText;
  85. }
  86. button[disabled="true"] > .button-box {
  87. padding-top: 1px !important;
  88. padding-bottom: 2px !important;
  89. -moz-padding-start: 3px !important;
  90. -moz-padding-end: 4px !important;
  91. }
  92. /* ::::: menu/menu-button buttons ::::: */
  93. button[type="menu-button"] {
  94. -moz-appearance: dualbutton;
  95. }
  96. .button-menubutton-button {
  97. margin: 0;
  98. }
  99. .button-menu-dropmarker,
  100. .button-menubutton-dropmarker {
  101. -moz-appearance: toolbarbutton-dropdown !important;
  102. }
  103. .button-menubutton-dropmarker {
  104. -moz-margin-end: 3px;
  105. }
  106. /* ::::: plain buttons ::::: */
  107. button.plain {
  108. border: 0px !important;
  109. margin: 0px !important;
  110. padding: 0px !important;
  111. }
  112. button[type="disclosure"] {
  113. border: 0px !important;
  114. margin: 0px !important;
  115. padding: 0px !important;
  116. -moz-appearance: none;
  117. list-style-image: url("chrome://global/skin/tree/twisty-clsd.png");
  118. min-width: 0px !important;
  119. background-color: transparent;
  120. }
  121. button[type="disclosure"][open="true"] {
  122. list-style-image: url("chrome://global/skin/tree/twisty-open.png");
  123. }
  124. /*
  125. * GNOME Stock Icon Styles
  126. */
  127. button[icon="accept"] .button-icon {
  128. list-style-image: url("moz-icon://stock/gtk-ok?size=button");
  129. }
  130. button[icon="accept"][disabled="true"] .button-icon {
  131. list-style-image: url("moz-icon://stock/gtk-ok?size=button&state=disabled");
  132. }
  133. button[icon="cancel"] .button-icon {
  134. list-style-image: url("moz-icon://stock/gtk-cancel?size=button");
  135. }
  136. button[icon="cancel"][disabled="true"] .button-icon {
  137. list-style-image: url("moz-icon://stock/gtk-cancel?size=button&state=disabled");
  138. }
  139. button[icon="help"] .button-icon {
  140. list-style-image: url("moz-icon://stock/gtk-help?size=button");
  141. }
  142. button[icon="help"][disabled="true"] .button-icon {
  143. list-style-image: url("moz-icon://stock/gtk-help?size=button&state=disabled");
  144. }
  145. button[icon="open"] .button-icon {
  146. list-style-image: url("moz-icon://stock/gtk-open?size=button");
  147. }
  148. button[icon="open"][disabled="true"] .button-icon {
  149. list-style-image: url("moz-icon://stock/gtk-open?size=button&state=disabled");
  150. }
  151. button[icon="save"] .button-icon {
  152. list-style-image: url("moz-icon://stock/gtk-save?size=button");
  153. }
  154. button[icon="save"][disabled="true"] .button-icon {
  155. list-style-image: url("moz-icon://stock/gtk-save?size=button&state=disabled");
  156. }
  157. button[icon="find"] .button-icon {
  158. list-style-image: url("moz-icon://stock/gtk-find?size=button");
  159. }
  160. button[icon="find"][disabled="true"] .button-icon {
  161. list-style-image: url("moz-icon://stock/gtk-find?size=button&state=disabled");
  162. }
  163. button[icon="clear"] .button-icon {
  164. list-style-image: url("moz-icon://stock/gtk-clear?size=button");
  165. }
  166. button[icon="clear"][disabled="true"] .button-icon {
  167. list-style-image: url("moz-icon://stock/gtk-clear?size=button&state=disabled");
  168. }
  169. button[icon="yes"] .button-icon {
  170. list-style-image: url("moz-icon://stock/gtk-yes?size=button");
  171. }
  172. button[icon="yes"][disabled="true"] .button-icon {
  173. list-style-image: url("moz-icon://stock/gtk-yes?size=button&state=disabled");
  174. }
  175. button[icon="no"] .button-icon {
  176. list-style-image: url("moz-icon://stock/gtk-no?size=button");
  177. }
  178. button[icon="no"][disabled="true"] .button-icon {
  179. list-style-image: url("moz-icon://stock/gtk-no?size=button&state=disabled");
  180. }
  181. button[icon="apply"] .button-icon {
  182. list-style-image: url("moz-icon://stock/gtk-apply?size=button");
  183. }
  184. button[icon="apply"][disabled="true"] .button-icon {
  185. list-style-image: url("moz-icon://stock/gtk-apply?size=button&state=disabled");
  186. }
  187. button[icon="close"] .button-icon {
  188. list-style-image: url("moz-icon://stock/gtk-close?size=button");
  189. }
  190. button[icon="close"][disabled="true"] .button-icon {
  191. list-style-image: url("moz-icon://stock/gtk-close?size=button&state=disabled");
  192. }
  193. button[icon="print"] .button-icon {
  194. list-style-image: url("moz-icon://stock/gtk-print?size=button");
  195. }
  196. button[icon="print"][disabled="true"] .button-icon {
  197. list-style-image: url("moz-icon://stock/gtk-print?size=button&state=disabled");
  198. }
  199. button[icon="add"] .button-icon {
  200. list-style-image: url("moz-icon://stock/gtk-add?size=button");
  201. }
  202. button[icon="add"][disabled="true"] .button-icon {
  203. list-style-image: url("moz-icon://stock/gtk-add?size=button&state=disabled");
  204. }
  205. button[icon="remove"] .button-icon {
  206. list-style-image: url("moz-icon://stock/gtk-remove?size=button");
  207. }
  208. button[icon="remove"][disabled="true"] .button-icon {
  209. list-style-image: url("moz-icon://stock/gtk-remove?size=button&state=disabled");
  210. }
  211. button[icon="refresh"] .button-icon {
  212. list-style-image: url("moz-icon://stock/gtk-refresh?size=button");
  213. }
  214. button[icon="refresh"][disabled="true"] .button-icon {
  215. list-style-image: url("moz-icon://stock/gtk-refresh?size=button&state=disabled");
  216. }
  217. button[icon="revert"] .button-icon {
  218. list-style-image: url("moz-icon://stock/gtk-revert-to-saved?size=button");
  219. }
  220. button[icon="revert"][disabled="true"] .button-icon {
  221. list-style-image: url("moz-icon://stock/gtk-revert-to-saved?size=button&state=disabled");
  222. }
  223. button[icon="go-forward"] .button-icon {
  224. list-style-image: url("moz-icon://stock/gtk-go-forward-ltr?size=button");
  225. }
  226. button[icon="go-forward"][disabled="true"] .button-icon {
  227. list-style-image: url("moz-icon://stock/gtk-go-forward-ltr?size=button&state=disabled");
  228. }
  229. button[icon="go-forward"]:-moz-locale-dir(rtl) .button-icon {
  230. list-style-image: url("moz-icon://stock/gtk-go-forward-rtl?size=button");
  231. }
  232. button[icon="go-forward"]:-moz-locale-dir(rtl)[disabled="true"] .button-icon {
  233. list-style-image: url("moz-icon://stock/gtk-go-forward-rtl?size=button&state=disabled");
  234. }
  235. button[icon="go-back"] .button-icon {
  236. list-style-image: url("moz-icon://stock/gtk-go-back-ltr?size=button");
  237. }
  238. button[icon="go-back"][disabled="true"] .button-icon {
  239. list-style-image: url("moz-icon://stock/gtk-go-back-ltr?size=button&state=disabled");
  240. }
  241. button[icon="go-back"]:-moz-locale-dir(rtl) .button-icon {
  242. list-style-image: url("moz-icon://stock/gtk-go-back-rtl?size=button");
  243. }
  244. button[icon="go-back"]:-moz-locale-dir(rtl)[disabled="true"] .button-icon {
  245. list-style-image: url("moz-icon://stock/gtk-go-back-rtl?size=button&state=disabled");
  246. }
  247. button[icon="properties"] .button-icon {
  248. list-style-image: url("moz-icon://stock/gtk-properties?size=button");
  249. }
  250. button[icon="properties"][disabled="true"] .button-icon {
  251. list-style-image: url("moz-icon://stock/gtk-properties?size=button&state=disabled");
  252. }
  253. button[icon="select-font"] .button-icon {
  254. list-style-image: url("moz-icon://stock/gtk-select-font?size=button");
  255. }
  256. button[icon="select-font"][disabled="true"] .button-icon {
  257. list-style-image: url("moz-icon://stock/gtk-select-font?size=button&state=disabled");
  258. }
  259. button[icon="select-color"] .button-icon {
  260. list-style-image: url("moz-icon://stock/gtk-color-picker?size=button");
  261. }
  262. button[icon="select-color"][disabled="true"] .button-icon {
  263. list-style-image: url("moz-icon://stock/gtk-color-picker?size=button&state=disabled");
  264. }
  265. button[icon="network"] .button-icon {
  266. list-style-image: url("moz-icon://stock/gtk-network?size=button");
  267. }
  268. button[icon="network"][disabled="true"] .button-icon {
  269. list-style-image: url("moz-icon://stock/gtk-network?size=button&state=disabled");
  270. }