TabBar.css 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
  1. /* dojox.mobile.TabBar */
  2. .mblTabBar {
  3. position: relative;
  4. overflow: hidden;
  5. white-space: nowrap;
  6. margin: 0px;
  7. padding: 0px;
  8. height: 48px;
  9. border-top: 1px solid #000000;
  10. background-color: #212421;
  11. background-image: -webkit-gradient(linear, left top, left bottom, from(#181818), to(#100c10));
  12. color: white;
  13. text-align: center;
  14. }
  15. .mblTabBarNoIcons {
  16. height: 34px;
  17. }
  18. .mblTabBarNoText {
  19. height: 34px;
  20. }
  21. /* dojox.mobile.TabBarButton */
  22. .mblTabBarButton {
  23. cursor: pointer;
  24. -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  25. }
  26. .mblTabBar .mblTabBarButton {
  27. position: relative;
  28. list-style-type: none;
  29. float: left;
  30. }
  31. .mblTabBar .mblTabBarButton.mblTabButtonSelected {
  32. background-color: #404040;
  33. background-image: -webkit-gradient(linear, left top, left bottom, from(#484848), to(#242424), color-stop(0.5, #353535));
  34. -webkit-border-radius: 3px;
  35. }
  36. .mblTabBarButtonAnchor {
  37. display: block;
  38. text-decoration: none;
  39. }
  40. .mblTabBarButtonDiv {
  41. position: relative;
  42. margin-left: auto;
  43. margin-right: auto;
  44. height: 34px;
  45. width: 29px;
  46. }
  47. .mblTabBarButtonIcon {
  48. position: absolute;
  49. left: 0;
  50. top: 0;
  51. }
  52. .mblTabBarButtonSpriteIcon {
  53. position: absolute;
  54. }
  55. .mblTabBarButtonTextBox {
  56. color: #979797;
  57. font-family: "Helvetica Neue", Helvetica;
  58. font-size: 11px;
  59. }
  60. .mblTabBarNoIcons .mblTabBarButtonDiv {
  61. display: none;
  62. }
  63. .mblTabBarNoIcons .mblTabBarButtonTextBox {
  64. line-height: 34px;
  65. font-size: 20px;
  66. }
  67. .mblTabBarTop .mblTabButton .mblTabBarButtonDiv {
  68. height: 40px;
  69. }
  70. .mblTabButton {
  71. position: relative;
  72. float: left;
  73. list-style-type: none;
  74. cursor: pointer;
  75. -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  76. width: 78px;
  77. height: 61px;
  78. border-width: 1px 1px 0px 1px;
  79. border-style: solid;
  80. border-color: #7B7D84 #182018 black #393C39;
  81. background-color: #212421;
  82. background-image: -webkit-gradient(linear, left top, left bottom, from(#181818), to(#100c10), color-stop(0.1, #313031));
  83. font-family: Helvetica;
  84. font-size: 13px;
  85. color: #979797;
  86. text-align: center;
  87. }
  88. .mblTabButton img {
  89. position: absolute;
  90. left: 0px;
  91. margin-top: 8px;
  92. }
  93. .mblTabButtonSelected .mblTabBarButtonTextBox {
  94. color: white;
  95. }
  96. .mblTabButtonImgDiv {
  97. position: relative;
  98. margin-left: 24px;
  99. height: 40px;
  100. }
  101. .mblTabPanelHeader {
  102. position: relative;
  103. overflow: hidden;
  104. white-space: nowrap;
  105. text-overflow: ellipsis;
  106. margin: 0px;
  107. padding: 0px 0px 0px 0px;
  108. height: 64px;
  109. border-top: 1px solid #CDD5DF;
  110. border-bottom: 2px solid #949694;
  111. background-color: #000000;
  112. font-family: Helvetica;
  113. font-size: 20px;
  114. color: white;
  115. text-align: center;
  116. }
  117. .mblTabPanelHeader .mblTabButton {
  118. margin-top: 3px;
  119. -webkit-border-top-left-radius: 6px;
  120. -webkit-border-top-right-radius: 6px;
  121. }
  122. .mblTabPanelHeader .mblTabButton.mblTabButtonSelected {
  123. background-color: #404040;
  124. background-image: -webkit-gradient(linear, left top, left bottom, from(#484848), to(#242424), color-stop(0.5, #353535));
  125. color: white;
  126. }
  127. .mblTabPanelHeader .mblTabButtonDomButton {
  128. width: 43px;
  129. }
  130. .mblTabPanelHeader .mblTabButtonDomButtonClass {
  131. left: 8px;
  132. }
  133. .mblHeading .mblTabPanelHeader {
  134. height: 38px;
  135. }
  136. .mblHeading .mblTabPanelHeader .mblTabButton {
  137. margin: 5px 0;
  138. height: 28px;
  139. border-width: 0px 1px 0px 0px;
  140. border-style: solid;
  141. border-color: #39454A;
  142. -webkit-border-top-left-radius: 0;
  143. -webkit-border-top-right-radius: 0;
  144. background-color: #CED3CE;
  145. background-image: -webkit-gradient(linear, left top, left bottom, from(#f7fbf7), to(#cecfd6), color-stop(0.5, #ced3ce));
  146. font-size: 14px;
  147. font-weight: bold;
  148. line-height: 30px;
  149. color: black;
  150. }
  151. .mblHeading .mblTabPanelHeader .mblTabButton:first-child {
  152. -webkit-border-top-left-radius: 6px;
  153. -webkit-border-bottom-left-radius: 6px;
  154. }
  155. .mblHeading .mblTabPanelHeader .mblTabButton:last-child {
  156. -webkit-border-top-right-radius: 6px;
  157. -webkit-border-bottom-right-radius: 6px;
  158. border-right: none;
  159. }
  160. .mblHeading .mblTabPanelHeader .mblTabButtonSelected {
  161. background-color: #0869C6;
  162. background-image: -webkit-gradient(linear, left top, left bottom, from(#088eef), to(#0851ad), color-stop(0.5, #0869c6));
  163. color: white;
  164. }