home *** CD-ROM | disk | FTP | other *** search
/ Chip 2002 January / 01_02.iso / software / netscape62win / browser.xpi / bin / chrome / modern.jar / skin / modern / global / button.css < prev    next >
Encoding:
Cascading Style Sheet File  |  2001-08-20  |  13.4 KB  |  414 lines
  1. /*
  2.  * The contents of this file are subject to the Netscape Public
  3.  * License Version 1.1 (the "License"); you may not use this file
  4.  * except in compliance with the License. You may obtain a copy of
  5.  * the License at http://www.mozilla.org/NPL/
  6.  *
  7.  * Software distributed under the License is distributed on an "AS
  8.  * IS" basis, WITHOUT WARRANTY OF ANY KIND, either express or
  9.  * implied. See the License for the specific language governing
  10.  * rights and limitations under the License.
  11.  *
  12.  * The Original Code is Mozilla Communicator client code, released
  13.  * March 31, 1998.
  14.  *
  15.  * The Initial Developer of the Original Code is Netscape
  16.  * Communications Corporation. Portions created by Netscape are
  17.  * Copyright (C) 1998-1999 Netscape Communications Corporation. All
  18.  * Rights Reserved.
  19.  *
  20.  * Contributor(s):
  21.  *   Joe Hewitt (hewitt@netscape.com)
  22.  */
  23.  
  24. /* ===== button.css =====================================================
  25.   == Styles used by the XUL button element.
  26.   ======================================================================= */
  27.  
  28. @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
  29.  
  30. /* ::::: nine slice button :::::::::::::::::::::::::::::::::::::::::::::::::
  31.    :: This is the default style used for all buttons. This style is fully
  32.    :: scalable in 2 dimensions.  It supports normal and default buttons in
  33.    :: both active and disabled states, which includes 6 sets of sliced
  34.    :: images.
  35.    :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
  36.  
  37. button {
  38.   -moz-user-focus: normal;
  39.   margin: 3px;
  40.   border: 2px solid transparent;
  41.   min-width: 6em;
  42.   color: #000000;
  43.   font: menu;
  44. }
  45.  
  46. .button-text-box {
  47.   padding: 3px 2px 3px 2px;
  48. }
  49.  
  50. .button-text-mid {
  51.   margin: 0px 3px !important;
  52.   text-align: center;
  53. }
  54.  
  55.   /* .......... focused state .......... */
  56.  
  57. button:focus {
  58.   border-color: #98A5B2;
  59.   -moz-border-radius: 6px;
  60. }
  61.     
  62. button[default]:focus {
  63.   -moz-border-radius: 8px;
  64. }
  65.  
  66.   /* .......... normal state .......... */
  67.   
  68. .button-box-left {
  69.   width: 6px;
  70. }
  71.     
  72. .button-left-top {
  73.   background: url("chrome://global/skin/button/btn-lft-top.gif") no-repeat;
  74.   height: 9px;
  75. }
  76.  
  77. .button-left-mid {
  78.   background: url("chrome://global/skin/button/btn-lft-mid.gif") repeat-y;
  79. }
  80.  
  81. .button-left-btm {
  82.   background: url("chrome://global/skin/button/btn-lft-btm.gif") no-repeat;
  83.   height: 8px;
  84. }
  85.  
  86. .button-box-mid {
  87.   background-color: #A7B5C2;
  88. }
  89.   
  90. .button-mid-top {
  91.   background: url("chrome://global/skin/button/btn-mid-top.gif") repeat-x;
  92.   height: 9px;
  93. }
  94.  
  95. .button-mid-btm {
  96.   background: url("chrome://global/skin/button/btn-mid-btm.gif") repeat-x;
  97.   height: 8px;
  98. }
  99.  
  100. .button-box-right {
  101.   width: 6px;
  102. }
  103.   
  104. .button-right-top {
  105.   background: url("chrome://global/skin/button/btn-rit-top.gif") no-repeat;
  106.   height: 9px;
  107. }
  108.  
  109. .button-right-mid {
  110.   background: url("chrome://global/skin/button/btn-rit-mid.gif") repeat-y;
  111. }
  112.  
  113. .button-right-btm {
  114.   background: url("chrome://global/skin/button/btn-rit-btm.gif") no-repeat;
  115.   height: 8px;
  116. }
  117.   
  118. /* .......... active/open state .......... */
  119.  
  120. button:hover:active,
  121. button[open="true"] {
  122.   color: #FFFFFF;
  123. }
  124.   
  125. button:hover:active > .box-inherit > .button-box-left > .button-left-top,
  126. button[open="true"] > .button-box-left > .button-left-top {
  127.   background-image: url("chrome://global/skin/button/btn-act-lft-top.gif");
  128. }
  129.  
  130. button:hover:active > .box-inherit > .button-box-left > .button-left-mid,
  131. button[open="true"] > .box-inherit > .button-box-left > .button-left-mid {
  132.   background-image: url("chrome://global/skin/button/btn-act-lft-mid.gif");
  133. }
  134.  
  135. button:hover:active > .box-inherit > .button-box-left > .button-left-btm,
  136. button[open="true"] > .box-inherit > .button-box-left > .button-left-btm {
  137.   background-image: url("chrome://global/skin/button/btn-act-lft-btm.gif");
  138. }
  139.  
  140. button:hover:active > .box-inherit > .button-stack > .button-box-mid,
  141. button[open="true"] > .box-inherit > .button-stack > .button-box-mid {
  142.   background-color: #90A1B3;
  143. }
  144.   
  145. button:hover:active > .box-inherit > .button-stack > .button-box-mid > .button-mid-top,
  146. button[open="true"] > .box-inherit > .button-stack > .button-box-mid > .button-mid-top {
  147.   background-image: url("chrome://global/skin/button/btn-act-mid-top.gif");
  148. }
  149.  
  150. button:hover:active > .box-inherit > .button-stack > .button-box-mid > .button-mid-btm,
  151. button[open="true"] > .box-inherit > .button-stack > .button-box-mid > .button-mid-btm {
  152.   background-image: url("chrome://global/skin/button/btn-act-mid-btm.gif");
  153. }
  154.  
  155. button:hover:active > .box-inherit > .button-box-right > .button-right-top,
  156. button[open="true"] > .box-inherit > .button-box-right > .button-right-top {
  157.   background-image: url("chrome://global/skin/button/btn-act-rit-top.gif");
  158. }
  159.  
  160. button:hover:active > .box-inherit > .button-box-right > .button-right-mid,
  161. button[open="true"] > .box-inherit > .button-box-right > .button-right-mid {
  162.   background-image: url("chrome://global/skin/button/btn-act-rit-mid.gif");
  163. }
  164.  
  165. button:hover:active > .box-inherit > .button-box-right > .button-right-btm,
  166. button[open="true"] > .box-inherit > .button-box-right > .button-right-btm {
  167.   background-image: url("chrome://global/skin/button/btn-act-rit-btm.gif");
  168. }
  169.  
  170. /* .......... disabled state .......... */
  171.  
  172. button[disabled="true"],
  173. button[disabled="true"]:hover:active {
  174.   color: #8C99AB;
  175. }
  176.  
  177. button:hover:active > .box-inherit > .button-box-left > .button-left-top[disabled="true"],
  178. .button-left-top[disabled="true"] {
  179.   background-image: url("chrome://global/skin/button/btn-dis-lft-top.gif");
  180. }
  181.  
  182. button:hover:active > .box-inherit > .button-box-left > .button-left-mid[disabled="true"],
  183. .button-left-mid[disabled="true"] {
  184.   background-image: url("chrome://global/skin/button/btn-dis-lft-mid.gif");
  185. }
  186.  
  187. button:hover:active > .box-inherit > .button-box-left > .button-left-btm[disabled="true"],
  188. .button-left-btm[disabled="true"] {
  189.   background-image: url("chrome://global/skin/button/btn-dis-lft-btm.gif");
  190. }
  191.  
  192. button:hover:active > .box-inherit > .button-stack > .button-box-mid[disabled="true"],
  193. .button-box-mid[disabled="true"] {
  194.   background-color: #B7BFCB;
  195. }
  196.   
  197. button:hover:active > .box-inherit > .button-stack > .button-box-mid > .button-mid-top[disabled="true"],
  198. .button-mid-top[disabled="true"] {
  199.   background-image: url("chrome://global/skin/button/btn-dis-mid-top.gif");
  200. }
  201.  
  202. button:hover:active > .box-inherit > .button-stack > .button-box-mid > .button-mid-btm[disabled="true"],
  203. .button-mid-btm[disabled="true"] {
  204.   background-image: url("chrome://global/skin/button/btn-dis-mid-btm.gif");
  205. }
  206.  
  207. button:hover:active > .box-inherit > .button-box-right > .button-right-top[disabled="true"],
  208. .button-right-top[disabled="true"] {
  209.   background-image: url("chrome://global/skin/button/btn-dis-rit-top.gif");
  210. }
  211.  
  212. button:hover:active > .box-inherit > .button-box-right > .button-right-mid[disabled="true"],
  213. .button-right-mid[disabled="true"] {
  214.   background-image: url("chrome://global/skin/button/btn-dis-rit-mid.gif");
  215. }
  216.  
  217. button:hover:active > .box-inherit > .button-box-right > .button-right-btm[disabled="true"],
  218. .button-right-btm[disabled="true"] {
  219.   background-image: url("chrome://global/skin/button/btn-dis-rit-btm.gif");
  220. }
  221.   
  222.   /* .......... default normal state .......... */
  223.  
  224. button[default="true"] {
  225.   margin: 2px;
  226. }
  227.  
  228. .button-box-left[default="true"] {
  229.   width: 7px;
  230. }
  231.     
  232. .button-left-top[default="true"] {
  233.   background-image: url("chrome://global/skin/button/btn-def-lft-top.gif");
  234.   height: 9px;
  235. }
  236.  
  237. .button-left-mid[default="true"] {
  238.   background-image: url("chrome://global/skin/button/btn-def-lft-mid.gif");
  239. }
  240.  
  241. .button-left-btm[default="true"] {
  242.   background-image: url("chrome://global/skin/button/btn-def-lft-btm.gif");
  243.   height: 10px;
  244. }
  245.  
  246. .button-mid-top[default="true"] {
  247.   background-image: url("chrome://global/skin/button/btn-def-mid-top.gif");
  248.   height: 9px;
  249. }
  250.  
  251. .button-mid-btm[default="true"] {
  252.   background-image: url("chrome://global/skin/button/btn-def-mid-btm.gif");
  253.   height: 10px;
  254. }
  255.  
  256. .button-box-right[default="true"] {
  257.   width: 7px;
  258. }
  259.   
  260. .button-right-top[default="true"] {
  261.   background-image: url("chrome://global/skin/button/btn-def-rit-top.gif");
  262.   height: 9px;
  263. }
  264.  
  265. .button-right-mid[default="true"] {
  266.   background-image: url("chrome://global/skin/button/btn-def-rit-mid.gif");
  267. }
  268.  
  269. .button-right-btm[default="true"] {
  270.   background-image: url("chrome://global/skin/button/btn-def-rit-btm.gif");
  271.   height: 10px;
  272. }
  273.  
  274.   /* .......... default active state .......... */
  275.  
  276. :hover:active > .box-inherit > .button-box-left > .button-left-top[default="true"] {
  277.   background-image: url("chrome://global/skin/button/btn-def-act-lft-top.gif");
  278. }
  279.  
  280. :hover:active > .box-inherit > .button-box-left > .button-left-mid[default="true"] {
  281.   background-image: url("chrome://global/skin/button/btn-def-act-lft-mid.gif");
  282. }
  283.  
  284. :hover:active > .box-inherit > .button-box-left > .button-left-btm[default="true"] {
  285.   background-image: url("chrome://global/skin/button/btn-def-act-lft-btm.gif");
  286. }
  287.  
  288. :hover:active > .box-inherit > .button-stack > .button-box-mid > .button-mid-top[default="true"] {
  289.   background-image: url("chrome://global/skin/button/btn-def-act-mid-top.gif");
  290. }
  291.  
  292. :hover:active > .box-inherit > .button-stack > .button-box-mid > .button-mid-btm[default="true"] {
  293.   background-image: url("chrome://global/skin/button/btn-def-act-mid-btm.gif");
  294. }
  295.  
  296. :hover:active > .box-inherit > .button-box-right > .button-right-top[default="true"] {
  297.   background-image: url("chrome://global/skin/button/btn-def-act-rit-top.gif");
  298. }
  299.  
  300. :hover:active > .box-inherit > .button-box-right > .button-right-mid[default="true"] {
  301.   background-image: url("chrome://global/skin/button/btn-def-act-rit-mid.gif");
  302. }
  303.  
  304. :hover:active > .box-inherit > .button-box-right > .button-right-btm[default="true"] {
  305.   background-image: url("chrome://global/skin/button/btn-def-act-rit-btm.gif");
  306. }
  307.   
  308.   /* .......... default disabled state (the same as normal disabled) .......... */
  309.  
  310. button[default="true"][disabled="true"] {
  311.   margin-top: 3px;
  312.   margin-bottom: 3px;
  313. }
  314.  
  315. :hover:active > .box-inherit > .button-box-left > .button-left-top[disabled="true"][default="true"],
  316. .button-left-top[disabled="true"][default="true"] {
  317.   background-image: url("chrome://global/skin/button/btn-dis-lft-top.gif");
  318.   height: 9px;
  319. }
  320.  
  321. .button-box-left[disabled="true"][default="true"] {
  322.   width: 6px;
  323. }
  324.  
  325. :hover:active > .box-inherit > .button-box-left > .button-left-mid[disabled="true"][default="true"],
  326. .button-left-mid[disabled="true"][default="true"] {
  327.   background-image: url("chrome://global/skin/button/btn-dis-lft-mid.gif");
  328. }
  329.  
  330. :hover:active > .box-inherit > .button-box-left > .button-left-btm[disabled="true"][default="true"],
  331. .button-left-btm[disabled="true"][default="true"] {
  332.   background-image: url("chrome://global/skin/button/btn-dis-lft-btm.gif");
  333.   height: 8px;
  334. }
  335.  
  336. :hover:active > .box-inherit > .button-stack > .button-box-mid[disabled="true"][default="true"],
  337. .button-box-mid[disabled="true"][default="true"] {
  338.   background-color: #B7BFCB;
  339. }
  340.  
  341. :hover:active > .box-inherit > .button-stack > .button-box-mid > .button-mid-top[disabled="true"][default="true"],
  342. .button-mid-top[disabled="true"][default="true"] {
  343.   background-image: url("chrome://global/skin/button/btn-dis-mid-top.gif");
  344.   height: 9px;
  345. }
  346.  
  347. :hover:active > .box-inherit > .button-stack > .button-box-mid > .button-mid-btm[disabled="true"][default="true"],
  348. .button-mid-btm[disabled="true"][default="true"] {
  349.   background-image: url("chrome://global/skin/button/btn-dis-mid-btm.gif");
  350.   height: 8px;
  351. }
  352.  
  353. .button-box-right[disabled="true"][default="true"] {
  354.   width: 6px;
  355. }
  356.  
  357. :hover:active > .box-inherit > .button-box-right > .button-right-top[disabled="true"][default="true"],
  358. .button-right-top[disabled="true"][default="true"] {
  359.   background-image: url("chrome://global/skin/button/btn-dis-rit-top.gif");
  360.   height: 9px;
  361. }
  362.  
  363. :hover:active > .box-inherit > .button-box-right > .button-right-mid[disabled="true"][default="true"],
  364. .button-right-mid[disabled="true"][default="true"] {
  365.   background-image: url("chrome://global/skin/button/btn-dis-rit-mid.gif");
  366. }
  367.  
  368. :hover:active > .box-inherit > .button-box-right > .button-right-btm[disabled="true"][default="true"],
  369. .button-right-btm[disabled="true"][default="true"] {
  370.   background-image: url("chrome://global/skin/button/btn-dis-rit-btm.gif");
  371.   height: 8px;
  372. }
  373.  
  374. /* ::::: plain buttons ::::: */
  375.  
  376. button.plain,
  377. button.plain:hover,
  378. button.plain:hover:active,
  379. button.plain:hover:active > .button-internal-box,
  380. button.plain > .button-internal-box,
  381. button.plain > .button-internal-box:hover:active,
  382. button.plain > .button-internal-box > .button-text-container,
  383. button.plain > .button-internal-box > .button-text-container:hover:active,
  384. button.plain > .button-internal-box > .button-text-container
  385.     > .button-text,
  386. button.plain > .button-internal-box > .button-text-container
  387.     > .button.text:hover:active,
  388. button.plain > .button-internal-box > .button-icon,
  389. button.plain > .button-internal-box > .button.icon:hover:active
  390. {
  391.   margin: 0px;
  392.   border: none !important;
  393.   padding: 0px;
  394. }
  395.  
  396. /* ::::: reorder buttons ::::: */
  397.  
  398. .reorder-up {
  399.   min-width: 0px;
  400.   list-style-image: url("chrome://global/skin/arrow/arrow-up.gif");
  401. }
  402.  
  403. .reorder-down {
  404.   min-width: 0px;
  405.   list-style-image: url("chrome://global/skin/arrow/arrow-dn.gif");
  406. }
  407.  
  408. .reorder-up > .button-internal-box > .button-icon,
  409. .reorder-down > .button-internal-box > .button-icon
  410. {
  411.   margin: 0px;
  412.   padding: 0px;
  413. }
  414.