iscroll.css 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
  1. @charset "utf-8";
  2. #wrapper {
  3. position: absolute;
  4. z-index: 1;
  5. top: 0px;
  6. bottom: 0px;
  7. left: 0;
  8. width: 100%;
  9. overflow: hidden;
  10. }
  11. #wrapper1,#wrapper2,#wrapper3,#wrapper4 {
  12. position: absolute;
  13. z-index: 1;
  14. top: 0px;
  15. bottom: 0px;
  16. left: 0;
  17. width: 100%;
  18. overflow: hidden;
  19. }
  20. #wrapper5,#wrapper6,#wrapper7,#wrapper8 {
  21. position: absolute;
  22. z-index: 1;
  23. top: 50px;
  24. bottom: 0px;
  25. left: 0;
  26. width: 100%;
  27. overflow: hidden;
  28. }
  29. #header {
  30. position:absolute;
  31. z-index:2;
  32. top: 82px;
  33. left:0;
  34. width:100%;
  35. height: 58px;
  36. line-height: 58px;
  37. background-color: #ffffff;
  38. background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fff), color-stop(0.05, #fff), color-stop(1, #fff));
  39. background-image:-moz-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
  40. background-image:-o-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
  41. padding:0;
  42. color:#eee;
  43. font-size:20px;
  44. text-align:center;
  45. }
  46. .iScroller {
  47. position: absolute;
  48. z-index: 1;
  49. -webkit-tap-highlight-color: rgba(0,0,0,0);
  50. width: 100%;
  51. -webkit-transform: translateZ(0);
  52. -moz-transform: translateZ(0);
  53. -ms-transform: translateZ(0);
  54. -o-transform: translateZ(0);
  55. transform: translateZ(0);
  56. -webkit-touch-callout: none;
  57. -webkit-user-select: none;
  58. -moz-user-select: none;
  59. -ms-user-select: none;
  60. user-select: none;
  61. -webkit-text-size-adjust: none;
  62. -moz-text-size-adjust: none;
  63. -ms-text-size-adjust: none;
  64. -o-text-size-adjust: none;
  65. text-size-adjust: none;
  66. }
  67. /**
  68. *
  69. * Pull down/up styles
  70. *
  71. */
  72. .pullDown, .pullUp {
  73. background: transparent;
  74. height:40px;
  75. line-height:40px;
  76. padding:5px 10px;
  77. /* border-bottom:1px solid #ccc; */
  78. font-weight:bold;
  79. color: #888;
  80. margin-top:0;
  81. white-space: nowrap;
  82. font-size:14px;
  83. display: none;
  84. }
  85. .pullDown.scrolledUp{
  86. margin-top:-51px; /* Should match the totalt height (i.e. height + paddings + borders) of #pullDown set above */
  87. }
  88. .pullDown .pullDownLabel, .pullUp .pullUpLabel {
  89. margin: 0 5px;
  90. }
  91. .pullDown .pullDownIcon, .pullUp .pullUpIcon {
  92. display: inline-block;
  93. width:40px; height:40px;
  94. background:url(../images/pull-icon@2x.png) 0 0 no-repeat;
  95. -webkit-background-size:40px 80px; background-size:40px 80px;
  96. -webkit-transition-property:-webkit-transform;
  97. -webkit-transition-duration:250ms;
  98. vertical-align: middle;
  99. margin: 0 5px;
  100. }
  101. .pullDown .pullDownIcon {
  102. -webkit-transform:rotate(0deg) translateZ(0);
  103. }
  104. .pullUp .pullUpIcon {
  105. -webkit-transform:rotate(-180deg) translateZ(0);
  106. }
  107. .pullDown.flip .pullDownIcon {
  108. -webkit-transform:rotate(-180deg) translateZ(0);
  109. }
  110. .pullUp.flip .pullUpIcon {
  111. -webkit-transform:rotate(0deg) translateZ(0);
  112. }
  113. .pullDown.loading .pullDownIcon, .pullUp.loading .pullUpIcon {
  114. background-position:0 100%;
  115. -webkit-transform:rotate(0deg) translateZ(0);
  116. -webkit-transition-duration:0ms;
  117. -webkit-animation-name:loading;
  118. -webkit-animation-duration:2s;
  119. -webkit-animation-iteration-count:infinite;
  120. -webkit-animation-timing-function:linear;
  121. }
  122. @-webkit-keyframes loading {
  123. from { -webkit-transform:rotate(0deg) translateZ(0); }
  124. to { -webkit-transform:rotate(360deg) translateZ(0); }
  125. }
  126. .iScrollVerticalScrollbar{width:5px;}