Heading.css 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. /* dojox.mobile.Heading */
  2. .mblHeading {
  3. position: relative;
  4. margin: 0px;
  5. width: 100%;
  6. overflow: hidden;
  7. white-space: nowrap;
  8. text-overflow: ellipsis;
  9. z-index: 1;
  10. padding: 0px;
  11. height: 42px;
  12. background-color: #889BB3;
  13. background-image: -webkit-gradient(linear, left top, left bottom, from(#b0bccd), to(#6d84a2), color-stop(0.5, #889bb3), color-stop(0.5, #8195af));
  14. border-top: 1px solid #CDD5DF;
  15. border-bottom: 1px solid #2D3642;
  16. color: white;
  17. font-family: Helvetica;
  18. font-size: 20px;
  19. font-weight: bold;
  20. text-align: center;
  21. line-height: 44px;
  22. text-shadow: rgba(0, 0, 0, 0.6) 0px -1px 0px;
  23. }
  24. .mblHeading * {
  25. z-index: 2;
  26. }
  27. .mblHeadingDivTitle {
  28. position: absolute;
  29. width: 100%;
  30. display: none;
  31. left: 0px;
  32. z-index: 1;
  33. }
  34. .mblHeadingCenterTitle .mblHeadingDivTitle {
  35. display: block;
  36. }
  37. .mblHeadingCenterTitle .mblHeadingSpanTitle {
  38. display: none;
  39. }
  40. /* Heading Arrow Button */
  41. .mblArrowButton {
  42. position: relative;
  43. float: left;
  44. height: 42px;
  45. }
  46. .mblArrowButtonHead {
  47. position: absolute;
  48. top: 11px;
  49. left: 5px;
  50. width: 20px;
  51. height: 19px;
  52. border: 1px solid #3A4655;
  53. -webkit-transform: scale(0.7, 1) rotate(45deg);
  54. background-image: -webkit-gradient(linear, left top, right bottom, from(#8ea4c1), to(#4a6c9b), color-stop(0.5, #5877a2), color-stop(0.5, #476999));
  55. }
  56. .dj_chrome .mblArrowButtonHead {
  57. border: 1px inset #3A4655;
  58. }
  59. .mblArrowButtonBody {
  60. position: absolute;
  61. cursor: pointer;
  62. -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  63. top: 6px;
  64. left: 16px;
  65. padding: 0px 10px 0px 4px;
  66. height: 29px;
  67. border-width: 1px 1px 1px 0px;
  68. border-style: inset;
  69. border-color: #9CACC0;
  70. font-family: Helvetica;
  71. font-size: 13px;
  72. color: white;
  73. line-height: 29px;
  74. -webkit-border-top-right-radius: 5px;
  75. -webkit-border-bottom-right-radius: 5px;
  76. background-color: #5877A2;
  77. background-image: -webkit-gradient(linear, left top, left bottom, from(#8ea4c1), to(#4a6c9b), color-stop(0.5, #5877a2), color-stop(0.5, #476999));
  78. }
  79. .mblArrowButtonSelected .mblArrowButtonHead {
  80. background-image: -webkit-gradient(linear, left top, right bottom, from(#7c87a4), to(#263e6c), color-stop(0.5, #394d77), color-stop(0.5, #243b69));
  81. }
  82. .mblArrowButtonSelected .mblArrowButtonBody {
  83. background-image: -webkit-gradient(linear, left top, left bottom, from(#7c87a4), to(#263e6c), color-stop(0.5, #394d77), color-stop(0.5, #243b69));
  84. }