home *** CD-ROM | disk | FTP | other *** search
/ Chip 2002 January / 01_02.iso / software / netscape62win / browser.xpi / bin / chrome / modern.jar / skin / modern / global / tabbox.css < prev    next >
Encoding:
Cascading Style Sheet File  |  2001-08-04  |  9.7 KB  |  353 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-2001 Netscape Communications Corporation. All
  18.  * Rights Reserved.
  19.  *
  20.  * Contributor(s):
  21.  *   Joe Hewitt (hewitt@netscape.com)
  22.  */
  23.  
  24. /* ===== tabbox.css =================================================
  25.   == Styles used by XUL tab-related elements.
  26.   ======================================================================= */
  27.  
  28. @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
  29.  
  30. /* ::::: tabs ::::: */
  31.  
  32. tabs {
  33.   padding: 0px;
  34. }
  35.  
  36. .tabs-left,
  37. .tabs-right {
  38.   background: url("chrome://global/skin/tabcontrol/tabs-mid.gif") repeat-x bottom;
  39. }
  40.  
  41. .tabs-left-cap {
  42.   background: url("chrome://global/skin/tabcontrol/tabs-lft.gif") no-repeat bottom;
  43.   width: 2px;
  44. }
  45.  
  46. .tabs-right-cap {
  47.   background: url("chrome://global/skin/tabcontrol/tabs-rit.gif") no-repeat bottom;
  48.   width: 2px;
  49. }
  50.  
  51. /* ::::: tabpanels ::::: */
  52.  
  53. tabpanels {
  54.   border-left: 1px solid #313948;
  55.   border-right: 1px solid #313948;
  56.   border-bottom: 1px solid #313948;
  57.   border-top: none;
  58.   padding: 5px;
  59.   background-color: #C7D0D9;
  60. }
  61.  
  62. /* ::::: tab ::::: */
  63.  
  64. tab { 
  65.   margin: 0px;
  66.   padding: 0px;
  67.   color: #000000;
  68.   font: menu;
  69. }
  70.  
  71. .tab-left {
  72.   width: 5px;
  73. }
  74.  
  75. .tab-left-top {
  76.   background: url("chrome://global/skin/tabcontrol/tab-usel-lft-top.gif") no-repeat;
  77.   height: 15px;
  78. }
  79.  
  80. .tab-left-mid {
  81.   background: url("chrome://global/skin/tabcontrol/tab-usel-lft-mid.gif") repeat-y;
  82. }
  83.  
  84. .tab-left-btm {
  85.   background: url("chrome://global/skin/tabcontrol/tab-usel-lft-btm.gif") no-repeat;
  86.   height: 2px;
  87. }
  88.  
  89. .tab-mid {
  90.   background: url("chrome://global/skin/tabcontrol/tab-usel-mid-top.gif") repeat-x top;
  91.   background-color: #8B9AAD;
  92. }
  93.  
  94. .tab-mid-mid {
  95.   padding: 1px 0px 1px 0px;
  96. }
  97.  
  98. .tab-mid-btm {
  99.   background: url("chrome://global/skin/tabcontrol/tab-usel-mid-btm.gif") repeat-x;
  100.   height: 2px;
  101. }
  102.  
  103. .tab-right {
  104.   width: 5px;
  105. }
  106.  
  107. .tab-right-top {
  108.   background: url("chrome://global/skin/tabcontrol/tab-usel-rit-top.gif") no-repeat;
  109.   height: 14px;
  110. }
  111.  
  112. .tab-right-mid {
  113.   background: url("chrome://global/skin/tabcontrol/tab-usel-rit-mid.gif") repeat-y;
  114. }
  115.  
  116. .tab-right-btm {
  117.   background: url("chrome://global/skin/tabcontrol/tab-usel-rit-btm.gif") no-repeat;
  118.   height: 2px;
  119. }
  120.  
  121. .tab-text {
  122.   padding: 3px 0px 3px 0px;
  123. }
  124.  
  125. /* ..... active state ..... */
  126.  
  127. tab:hover:active {
  128.   color: #FFFFFF;
  129. }
  130.  
  131. tab:hover:active > .tab-left > .tab-left-top { 
  132.   background-image: url("chrome://global/skin/tabcontrol/tab-act-lft-top.gif");
  133. }
  134.  
  135. tab:hover:active > .tab-left > .tab-left-mid { 
  136.   background-image: url("chrome://global/skin/tabcontrol/tab-act-lft-mid.gif");
  137. }
  138.  
  139. tab:hover:active > .tab-mid { 
  140.   margin-top: 1px;
  141.   background-image: url("chrome://global/skin/tabcontrol/tab-act-mid-top.gif");
  142.   background-color: #8B9AAD;
  143. }
  144.  
  145. tab:hover:active > .tab-mid > .tab-mid-mid { 
  146.   padding: 1px 0px 0px 0px;
  147. }
  148.  
  149. tab:hover:active > .tab-right > .tab-right-top { 
  150.   background-image: url("chrome://global/skin/tabcontrol/tab-act-rit-top.gif");
  151. }
  152.  
  153. tab:hover:active > .tab-right > .tab-right-mid { 
  154.   background-image: url("chrome://global/skin/tabcontrol/tab-act-rit-mid.gif");
  155. }
  156.  
  157. /* ..... selected state ..... */
  158.  
  159. tab[selected="true"], tab:hover:active[selected="true"],
  160. tab[selected="1"], tab:hover:active[selected="1"] {
  161.   color: #000000;
  162. }
  163.  
  164. .tab-left-top[selected="true"],
  165. tab:hover:active[selected="true"] > .tab-left > .tab-left-top { 
  166.   background-image: url("chrome://global/skin/tabcontrol/tab-sel-lft-top.gif");
  167. }
  168.  
  169. .tab-left-mid[selected="true"],
  170. tab:hover:active[selected="true"] > .tab-left > .tab-left-mid { 
  171.   background-image: url("chrome://global/skin/tabcontrol/tab-sel-lft-mid.gif");
  172. }
  173.  
  174. .tab-left-btm[selected="true"],
  175. tab:hover:active[selected="true"] > .tab-left > .tab-left-btm { 
  176.   background-image: url("chrome://global/skin/tabcontrol/tab-sel-lft-btm.gif");
  177. }
  178.  
  179. .tab-mid[selected="true"],
  180. tab:hover:active[selected="true"] > .tab-mid { 
  181.   margin-top: 0px;
  182.   background-image: url("chrome://global/skin/tabcontrol/tab-sel-mid-top.gif");
  183.   background-color: #C7D0D9;
  184. }
  185.  
  186. .tab-mid-mid[selected="true"],
  187. tab:hover:active[selected="true"] > .tab-mid > .tab-mid-mid { 
  188.   padding: 1px 0px 1px 0px;
  189. }
  190.  
  191.  
  192. .tab-mid-btm[selected="true"],
  193. tab:hover:active[selected="true"] > .tab-mid > .tab-mid-btm { 
  194.   background-image: none;
  195.   background-color: #C7D0D9;
  196. }
  197.  
  198. .tab-right-top[selected="true"],
  199. tab:hover:active[selected="true"] > .tab-right > .tab-right-top { 
  200.   background-image: url("chrome://global/skin/tabcontrol/tab-sel-rit-top.gif");
  201. }
  202.  
  203. .tab-right-mid[selected="true"],
  204. tab:hover:active[selected="true"] > .tab-right > .tab-right-mid { 
  205.   background-image: url("chrome://global/skin/tabcontrol/tab-sel-rit-mid.gif");
  206. }
  207.  
  208. .tab-right-btm[selected="true"],
  209. tab:hover:active[selected="true"] > .tab-right >  .tab-right-btm { 
  210.   background-image: url("chrome://global/skin/tabcontrol/tab-sel-rit-btm.gif");
  211. }
  212.  
  213. /* ::::: tab-bottom ::::::::::
  214.    :: Tabs that are attached to the bottom of a panel, but not necessarily
  215.    :: a tabpanels.
  216.    ::::: */
  217.  
  218. .tab-bottom {
  219.   min-height: 21px;
  220. }
  221.  
  222. .tab-bottom > .tab-left > .tab-left {
  223.   width: 5px;
  224. }
  225.  
  226. .tab-bottom > .tab-left > .tab-left-top {
  227.   background-image: url("chrome://global/skin/tabcontrol/tab-bot-usel-lft-btm.gif");
  228.   height: 2px;
  229. }
  230.  
  231. .tab-bottom > .tab-left > .tab-left-btm {
  232.   background-image: url("chrome://global/skin/tabcontrol/tab-bot-usel-lft-top.gif");
  233.   height: 15px;
  234. }
  235.  
  236. .tab-bottom > .tab-mid {
  237.   background: url("chrome://global/skin/tabcontrol/tab-bot-usel-mid-top.gif") repeat-x bottom;
  238.   background-color: #8B9AAD;
  239. }
  240.  
  241. .tab-bottom > .tab-mid > .tab-mid-top {
  242.   background: url("chrome://global/skin/tabcontrol/tab-bot-usel-mid-btm.gif") repeat-x;
  243.   height: 2px;
  244. }
  245.  
  246. .tab-bottom > .tab-mid > .tab-mid-mid {
  247.   padding: 1px 0px 1px 0px;
  248. }
  249.  
  250. .tab-bottom > .tab-mid > .tab-mid-btm {
  251.   background: none;
  252.   height: none;
  253. }
  254.  
  255. .tab-bottom > .tab-right {
  256.   width: 5px;
  257. }
  258.  
  259. .tab-bottom > .tab-right > .tab-right-top {
  260.   background: url("chrome://global/skin/tabcontrol/tab-bot-usel-rit-btm.gif") no-repeat;
  261.   height: 2px;
  262. }
  263.  
  264. .tab-bottom > .tab-right > .tab-right-btm {
  265.   background: url("chrome://global/skin/tabcontrol/tab-bot-usel-rit-top.gif") no-repeat;
  266.   height: 14px;
  267. }
  268.  
  269. /* ..... active state ..... */
  270.  
  271. .tab-bottom:hover:active > .tab-left > .tab-left-top { 
  272.   background-image: url("chrome://global/skin/tabcontrol/tab-bot-usel-lft-btm.gif");
  273. }
  274.  
  275. .tab-bottom:hover:active > .tab-left > .tab-left-btm { 
  276.   background-image: url("chrome://global/skin/tabcontrol/tab-bot-act-lft-top.gif");
  277. }
  278.  
  279. .tab-bottom:hover:active > .tab-mid { 
  280.   margin: 0px 0px 1px 0px;
  281.   background-image: url("chrome://global/skin/tabcontrol/tab-bot-act-mid-top.gif");
  282. }
  283.  
  284. .tab-bottom:hover:active > .tab-mid > .tab-mid-mid { 
  285.   padding: 0px 0px 1px 0px;
  286. }
  287.  
  288. .tab-bottom:hover:active > .tab-right > .tab-right-top { 
  289.   background-image: url("chrome://global/skin/tabcontrol/tab-bot-usel-rit-btm.gif");
  290. }
  291.  
  292. .tab-bottom:hover:active > .tab-right > .tab-right-btm { 
  293.   background-image: url("chrome://global/skin/tabcontrol/tab-bot-act-rit-top.gif");
  294. }
  295.  
  296. /* ..... selected state ..... */
  297.  
  298. .tab-bottom[selected="true"] > .tab-left > .tab-left-top,
  299. .tab-bottom:hover:active[selected="true"] > .tab-left > .tab-left-top { 
  300.   background-image: url("chrome://global/skin/tabcontrol/tab-bot-sel-lft-btm.gif");
  301. }
  302.  
  303. .tab-bottom[selected="true"] > .tab-left > .tab-left-btm,
  304. .tab-bottom:hover:active[selected="true"] > .tab-left > .tab-left-btm { 
  305.   background-image: url("chrome://global/skin/tabcontrol/tab-bot-sel-lft-top.gif");
  306. }
  307.  
  308. .tab-bottom[selected="true"] > .tab-mid,
  309. .tab-bottom:hover:active[selected="true"] > .tab-mid { 
  310.   margin: 0px;
  311.   background-image: url("chrome://global/skin/tabcontrol/tab-bot-sel-mid-top.gif");
  312.   background-color: #C7D0D9;
  313. }
  314.  
  315. .tab-bottom[selected="true"] > .tab-mid > .tab-mid-top,
  316. .tab-bottom:hover:active[selected="true"] > .tab-mid > .tab-mid-top { 
  317.   background-image: none;
  318.   background-color: #C7D0D9;
  319. }
  320.  
  321. .tab-bottom[selected="true"] > .tab-mid > .tab-mid-mid,
  322. .tab-bottom:hover:active[selected="true"] > .tab-mid > .tab-mid-mid { 
  323.   padding: 1px 0px 1px 0px;
  324. }
  325.  
  326. .tab-bottom[selected="true"] > .tab-mid > .tab-mid-btm,
  327. .tab-bottom:hover:active[selected="true"] > .tab-mid > .tab-mid-btm { 
  328.   background: none;
  329. }
  330.  
  331. .tab-bottom[selected="true"] > .tab-right > .tab-right-top,
  332. .tab-bottom:hover:active[selected="true"] > .tab-right > .tab-right-top { 
  333.   background-image: url("chrome://global/skin/tabcontrol/tab-bot-sel-rit-btm.gif");
  334. }
  335.  
  336. .tab-bottom[selected="true"] > .tab-right > .tab-right-btm,
  337. .tab-bottom:hover:active[selected="true"] > .tab-right > .tab-right-btm { 
  338.   background-image: url("chrome://global/skin/tabcontrol/tab-bot-sel-rit-top.gif");
  339. }
  340.  
  341. /* ::::: tabs-bottom ::::: */
  342.  
  343. .tabs-bottom > .tabs-left,
  344. .tabs-bottom > .tabs-right {
  345.   background: url("chrome://global/skin/tabcontrol/tabs-bot-mid.gif") repeat-x top;
  346. }
  347.  
  348. .tabs-bottom > .tabs-right-cap,
  349. .tabs-bottom > .tabs-left-cap {
  350.   background: none;
  351. }
  352.  
  353.