home *** CD-ROM | disk | FTP | other *** search
/ Chip 2002 January / 01_02.iso / software / netscape62win / skinclas.xpi / bin / chrome / classic.jar / skin / classic / global / tabbox.css < prev    next >
Cascading Style Sheet File  |  2001-05-14  |  8KB  |  277 lines
  1. @namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul); 
  2.  
  3. /*============ tabpanels widget =============*/
  4.  
  5. tabpanels {
  6.   padding: 5px;
  7. }
  8.  
  9. /* top tabs */
  10. tabbox[orient="vertical"] > tabs + tabpanels {
  11.   border-top: none !important;
  12.   border-bottom: 1px solid ThreeDShadow !important;
  13. }
  14.  
  15. /* bottom tabs */
  16. tabbox[orient="vertical"] > tabpanels {
  17.   border-top: 1px solid ThreeDHighlight;
  18.   border-bottom: none;
  19.   border-left: 1px solid ThreeDHighlight;
  20.   border-right: 1px solid ThreeDShadow;
  21. }
  22.  
  23. /* left tabs */
  24. tabbox[orient="horizontal"] > tabs + tabpanels {
  25.   border-left: none !important;
  26.   border-right: 1px solid ThreeDShadow !important;
  27. }
  28.  
  29. /* right tabs */
  30. tabbox[orient="horizontal"] > tabpanels {
  31.   border-top: 1px solid ThreeDHighlight;
  32.   border-bottom: 1px solid ThreeDShadow;
  33.   border-right: none;
  34.   border-left: 1px solid ThreeDHighlight;
  35. }
  36.  
  37. /* border on bottom only, no padding (used in search) */
  38. tabpanels.light {
  39.   border: none;
  40.   border-bottom: 1px outset #CCCCCC;
  41.   padding: 0px;
  42. }
  43.  
  44. .tabpanels-inner-box {
  45.   border-right: 1px solid ThreeDShadow;
  46.   border-bottom: 1px solid ThreeDShadow;
  47. }
  48.  
  49. /* tabs-spring ========================== */
  50.  
  51. /* top tabs */
  52. tabbox[orient="vertical"] > tabs > .tabs-spring {
  53.   border-bottom: 1px solid ThreeDHighlight;
  54. }
  55.  
  56. /* bottom tabs */
  57. tabbox[orient="vertical"] > tabpanels + tabs > .tabs-spring {
  58.   border-top: 1px solid ThreeDShadow !important;
  59.   border-bottom: none;
  60. }
  61.  
  62. /* left tabs */
  63. tabbox[orient="horizontal"] > tabs > .tabs-spring {
  64.   border-right: 1px solid ThreeDHighlight;
  65. }
  66.  
  67. /* right tabs */
  68. tabbox[orient="horizontal"] > tabpanels + tabs > .tabs-spring {
  69.   border-left: 1px solid ThreeDShadow !important;
  70.   border-right: none;
  71. }
  72.  
  73. /*============ tab widget ============*/
  74. /* NOTE: there should be code in here for indenting the first tab
  75.    by two pixels, however, this needs to be done with a spring to
  76.    fill in the border, but current attempts to use said spring 
  77.    result in said spring not rendering.  Will revisit.  - JRH */
  78.    
  79. tab {
  80.   border: none;
  81.   color: -moz-DialogText;
  82.   -moz-user-focus: normal;
  83. }
  84.  
  85. tab > .tab-box > .tab-text {
  86.   border: 1px solid transparent;
  87.   padding: 0px 1px 0px 1px;
  88. }
  89.  
  90. tab:focus > .tab-box > .tab-text {
  91.   border: 1px dotted -moz-DialogText;
  92. }
  93.  
  94. .tab-box {
  95.   margin: 0px;
  96.   padding: 1px 3px 1px 3px !important;
  97. }
  98.  
  99. /* top tabs */
  100. tabbox[orient="vertical"] > tabs[orient="horizontal"] tab[first-tab="true"]  { 
  101.   margin-left: 2px;
  102. }
  103.  
  104. tabbox[orient="vertical"] > tabs[orient="horizontal"] tab  { 
  105.   margin-top: 2px;
  106.   border-right: 1px solid ThreeDDarkShadow;
  107.   -moz-border-radius: 4px 4px 0px 0px;
  108. }
  109.  
  110. tabbox[orient="vertical"] > tabs[orient="horizontal"] tab > .tab-box { 
  111.   border-left: 1px solid ThreeDHighlight;
  112.   border-top: 1px solid ThreeDHighlight;
  113.   border-right: 1px solid ThreeDShadow;
  114.   border-bottom: 1px solid ThreeDHighlight;
  115.   -moz-border-radius: 4px 4px 0px 0px;
  116. }
  117.  
  118. /* bottom tabs */
  119. tabbox[orient="vertical"] > tabpanels + tabs[orient="horizontal"] > tab { 
  120.   margin-top: 0px;
  121.   margin-bottom: 2px;
  122.   border-right: 1px solid ThreeDDarkShadow;
  123.   border-bottom: 1px solid ThreeDDarkShadow;
  124.   -moz-border-radius: 0px 0px 4px 4px;
  125. }
  126.  
  127. tabbox[orient="vertical"] > tabpanels + tabs[orient="horizontal"] > tab > .tab-box { 
  128.   border-top: 1px solid ThreeDShadow;
  129.   border-right: 1px solid ThreeDShadow;
  130.   border-bottom: 1px solid ThreeDShadow;
  131.   -moz-border-radius: 0px 0px 4px 4px;
  132. }
  133.  
  134. /* left tabs */
  135. tabbox[orient="horizontal"] > tabs[orient="vertical"] tab[first-tab="true"]  { 
  136.   margin-top: 2px;
  137. }
  138.  
  139. tabbox[orient="horizontal"] > tabs[orient="vertical"] tab  { 
  140.   margin-left: 2px;
  141.   border-bottom: 1px solid ThreeDDarkShadow;
  142.   -moz-border-radius: 4px 0px 0px 4px;
  143. }
  144.  
  145. tabbox[orient="horizontal"] > tabs[orient="vertical"] tab > .tab-box  { 
  146.   border-left: 1px solid ThreeDHighlight;
  147.   border-top: 1px solid ThreeDHighlight;
  148.   border-right: 1px solid ThreeDHighlight;
  149.   border-bottom: 1px solid ThreeDShadow;
  150.   -moz-border-radius: 4px 0px 0px 4px;
  151. }
  152.  
  153. /* right tabs */
  154. tabbox[orient="horizontal"] > tabpanels + tabs[orient="vertical"] > tab { 
  155.   margin-right: 2px;
  156.   margin-left: 0px;
  157.   border-bottom: 1px solid ThreeDDarkShadow;
  158.   border-right: 1px solid ThreeDDarkShadow;
  159.   -moz-border-radius: 0px 4px 4px 0px !important;
  160. }
  161.  
  162. tabbox[orient="horizontal"] > tabpanels + tabs[orient="vertical"] > tab > .tab-box { 
  163.   border-left: 1px solid ThreeDShadow !important;
  164.   border-right: 1px solid ThreeDShadow;
  165.   border-bottom: 1px solid ThreeDShadow !important;
  166.   -moz-border-radius: 0px 4px 4px 0px !important;
  167. }
  168.  
  169. /* selected tabs ============================= */
  170. /* EXPLANATION (using top tabs as scenario):
  171.   When a tab is selected, it must appear to raise up and overlap the tabs to the left and right of it.
  172.   To do this, the adjacent borders of the before and after tabs are removed, and the selected tab
  173.   adds some padding to expand into the area once occupied by the adjacent borders.  It must do this
  174.   without shifting tabs or text around.  The leftmost tab grows into the margin to it's left since 
  175.   there is no tab there to overlap.
  176. */
  177.  
  178. /* top tabs */
  179. tabbox[orient="vertical"] > tabs[orient="horizontal"] > tab[selected="true"]  {
  180.   margin-left: 0px;
  181.   margin-top: 0px;
  182. }
  183.  
  184. tabbox[orient="vertical"] > tabs[orient="horizontal"] > tab[selected="true"] > .tab-box {
  185.   border-bottom: 1px solid ThreeDFace;
  186.   padding-left: 5px !important;
  187.   padding-right: 4px !important;
  188. }
  189.  
  190. tabbox[orient="vertical"] > tabs[orient="horizontal"] > tab[selected="true"][first-tab="true"] > .tab-box {
  191.   border-bottom: 1px solid ThreeDFace;
  192.   padding-left: 5px !important;
  193.   padding-right: 4px !important;
  194. }
  195.  
  196. /* bottom tabs */
  197. tabbox[orient="vertical"] > tabpanels + tabs[orient="horizontal"] > tab[selected="true"] {
  198.   margin-bottom: 0px;
  199.   border-bottom: 1px solid ThreeDDarkShadow !important;
  200. }
  201.  
  202. tabbox[orient="vertical"] > tabpanels + tabs[orient="horizontal"] > tab[selected="true"] > .tab-box {
  203.   border-top: 1px solid ThreeDFace;
  204.   border-bottom: 1px solid ThreeDShadow !important;
  205. }
  206.  
  207. /* left tabs */
  208. tabbox[orient="horizontal"] > tabs[orient="vertical"] > tab[selected="true"]  {
  209.   margin-left: 0px;
  210.   margin-top: 0px;
  211. }
  212.  
  213. tabbox[orient="horizontal"] > tabs[orient="vertical"] > tab[selected="true"] > .tab-box {
  214.   border-right: 1px solid ThreeDFace;
  215.   padding-top: 3px !important;
  216.   padding-bottom: 2px !important;
  217. }
  218.  
  219. tabbox[orient="horizontal"] > tabs[orient="vertical"] > tab[selected="true"][first-tab="true"] > .tab-box {
  220.   border-right: 1px solid ThreeDFace;
  221.   padding-top: 3px !important;
  222.   padding-bottom: 2px !important;
  223. }
  224.  
  225. /* right tabs */
  226. tabbox[orient="horizontal"] > tabpanels + tabs[orient="vertical"] > tab[selected="true"] {
  227.   margin-right: 0px;
  228. }
  229.  
  230. tabbox[orient="horizontal"] > tabpanels + tabs[orient="vertical"] > tab[selected="true"] > .tab-box {
  231.   border-left: 1px solid ThreeDFace !important;
  232.   border-right: 1px solid ThreeDShadow !important;
  233. }
  234.  
  235. /* before selected tabs ====================== */
  236.  
  237. /* top & bottom tabs */
  238. tabbox[orient="vertical"] > tabs[orient="horizontal"] > tab[beforeselected="true"] {
  239.   border-right: none !important;
  240. }
  241.  
  242. tabbox[orient="vertical"] > tabs[orient="horizontal"] > tab[beforeselected="true"] > .tab-box {
  243.   border-right: none !important;
  244. }
  245.  
  246. /* left & right tabs */
  247. tabbox[orient="horizontal"] > tabs[orient="vertical"] > tab[beforeselected="true"]  {
  248.   border-bottom: none !important;
  249. }
  250.  
  251. tabbox[orient="horizontal"] > tabs[orient="vertical"] > tab[beforeselected="true"] > .tab-box {
  252.   border-bottom: none !important;
  253. }
  254.  
  255. /* after selected tabs ====================== */
  256.  
  257. /* top & bottom tabs */
  258. tabbox[orient="vertical"] > tabs[orient="horizontal"] > tab[afterselected="true"]  {
  259.   border-left: none !important;
  260. }
  261.  
  262. tabbox[orient="vertical"] > tabs[orient="horizontal"] > tab[afterselected="true"] > .tab-box {
  263.   border-left: none !important;
  264. }
  265.  
  266. /* left & right tabs */
  267. tabbox[orient="horizontal"] > tabs[orient="vertical"] > tab[afterselected="true"]  {
  268.   border-top: none !important;
  269. }
  270.  
  271. tabbox[orient="horizontal"] > tabs[orient="vertical"] > tab[afterselected="true"] > .tab-box {
  272.   border-top: none !important;
  273. }
  274.  
  275.  
  276.  
  277.