jquery.range.css 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
  1. .slider-container {
  2. width: 300px;
  3. font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  4. }
  5. .slider-container .back-bar {
  6. height: 10px;
  7. position: relative;
  8. }
  9. .slider-container .back-bar .selected-bar {
  10. position: absolute;
  11. height: 100%;
  12. }
  13. .slider-container .back-bar .pointer {
  14. position: absolute;
  15. width: 10px;
  16. height: 10px;
  17. background-color: red;
  18. cursor: col-resize;
  19. opacity: 1;
  20. z-index: 2;
  21. }
  22. .slider-container .back-bar .pointer.last-active {
  23. z-index: 3;
  24. }
  25. .slider-container .back-bar .pointer-label {
  26. position: absolute;
  27. top: -45px;
  28. font-size: 16px;
  29. background: #FFBC26;
  30. white-space: nowrap;
  31. line-height: 25px;
  32. height:25px;
  33. width: 70px;
  34. text-align:center;
  35. border-radius:3px;
  36. }
  37. .slider-container .back-bar .focused {
  38. z-index: 10;
  39. }
  40. .slider-container .clickable-dummy {
  41. cursor: pointer;
  42. position: absolute;
  43. width: 100%;
  44. height: 100%;
  45. z-index: 1;
  46. }
  47. .slider-container .scale {
  48. top: 2px;
  49. position: relative;
  50. }
  51. .slider-container .scale span {
  52. position: absolute;
  53. height: 10px;
  54. border-left: 1px solid #999;
  55. font-size: 0;
  56. top: 3px;
  57. }
  58. .slider-container .scale ins {
  59. font-size: 0.9rem;
  60. text-decoration: none;
  61. position: absolute;
  62. left: 0;
  63. top: 12px;
  64. color: #999;
  65. line-height: 1;
  66. }
  67. .slider-container.slider-readonly .clickable-dummy,
  68. .slider-container.slider-readonly .pointer {
  69. cursor: auto;
  70. }
  71. .theme-green .back-bar {
  72. height: 15px;
  73. border-radius:10px;
  74. background-color: #eeeeee;
  75. background-color: #e7e7e7;
  76. background-image: -moz-linear-gradient(top, #eeeeee, #dddddd);
  77. background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eeeeee), to(#dddddd));
  78. background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd);
  79. background-image: -o-linear-gradient(top, #eeeeee, #dddddd);
  80. background-image: linear-gradient(to bottom, #eeeeee, #dddddd);
  81. background-repeat: repeat-x;
  82. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeeeeee', endColorstr='#ffdddddd', GradientType=0);
  83. }
  84. .theme-green .back-bar .selected-bar {
  85. border-radius: 10px;
  86. background-color: #FECF68;
  87. background-image: -moz-linear-gradient(top, #FECF68, #FECF68);
  88. background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#FECF68), to(#FECF68));
  89. background-image: -webkit-linear-gradient(top, #FECF68, #FECF68);
  90. background-image: -o-linear-gradient(top, #FECF68, #FECF68);
  91. background-image: linear-gradient(to bottom, #FECF68, #FECF68);
  92. background-repeat: repeat-x;
  93. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffbdfade', endColorstr='#ff76fabc', GradientType=0);
  94. }
  95. .theme-green .back-bar .pointer {
  96. width: 35px;
  97. height: 35px;
  98. top: -9px;
  99. -webkit-box-sizing: border-box;
  100. -moz-box-sizing: border-box;
  101. box-sizing: border-box;
  102. border-radius: 10px;
  103. /*border: 1px solid #AAA;*/
  104. background-color: #e7e7e7;
  105. background-image: -moz-linear-gradient(top, #eeeeee, #dddddd);
  106. background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eeeeee), to(#dddddd));
  107. background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd);
  108. background-image: -o-linear-gradient(top, #eeeeee, #dddddd);
  109. background-image: linear-gradient(to bottom, #eeeeee, #dddddd);
  110. background-repeat: repeat-x;
  111. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeeeeee', endColorstr='#ffdddddd', GradientType=0);
  112. background:url(/overseas/img/range.png) no-repeat 0 0/ 100% 100%;
  113. }
  114. .theme-green .back-bar .pointer-label {
  115. color: #FFF;
  116. }
  117. .theme-green .back-bar .focused {
  118. color: #FFF;
  119. }
  120. .theme-green .scale span {
  121. border-left: 1px solid #46506B;
  122. }
  123. .theme-green .scale ins {
  124. color: #46506B;
  125. }
  126. .theme-blue .back-bar {
  127. height: 5px;
  128. border-radius: 2px;
  129. background-color: #eeeeee;
  130. background-color: #e7e7e7;
  131. background-image: -moz-linear-gradient(top, #eeeeee, #dddddd);
  132. background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eeeeee), to(#dddddd));
  133. background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd);
  134. background-image: -o-linear-gradient(top, #eeeeee, #dddddd);
  135. background-image: linear-gradient(to bottom, #eeeeee, #dddddd);
  136. background-repeat: repeat-x;
  137. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeeeeee', endColorstr='#ffdddddd', GradientType=0);
  138. }
  139. .theme-blue .back-bar .selected-bar {
  140. border-radius: 2px;
  141. background-color: #92c1f9;
  142. background-image: -moz-linear-gradient(top, #b1d1f9, #64a8f9);
  143. background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b1d1f9), to(#64a8f9));
  144. background-image: -webkit-linear-gradient(top, #b1d1f9, #64a8f9);
  145. background-image: -o-linear-gradient(top, #b1d1f9, #64a8f9);
  146. background-image: linear-gradient(to bottom, #b1d1f9, #64a8f9);
  147. background-repeat: repeat-x;
  148. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffb1d1f9', endColorstr='#ff64a8f9', GradientType=0);
  149. }
  150. .theme-blue .back-bar .pointer {
  151. width: 14px;
  152. height: 14px;
  153. top: -5px;
  154. -webkit-box-sizing: border-box;
  155. -moz-box-sizing: border-box;
  156. box-sizing: border-box;
  157. border-radius: 10px;
  158. border: 1px solid #AAA;
  159. background-color: #e7e7e7;
  160. background-image: -moz-linear-gradient(top, #eeeeee, #dddddd);
  161. background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eeeeee), to(#dddddd));
  162. background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd);
  163. background-image: -o-linear-gradient(top, #eeeeee, #dddddd);
  164. background-image: linear-gradient(to bottom, #eeeeee, #dddddd);
  165. background-repeat: repeat-x;
  166. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeeeeee', endColorstr='#ffdddddd', GradientType=0);
  167. }
  168. .theme-blue .back-bar .pointer-label {
  169. color: #999;
  170. }
  171. .theme-blue .back-bar .focused {
  172. color: #333;
  173. }
  174. .theme-blue .scale span {
  175. border-left: 1px solid #e5e5e5;
  176. }
  177. .theme-blue .scale ins {
  178. color: #999;
  179. }