Nelze vybrat více než 25 témat Téma musí začínat písmenem nebo číslem, může obsahovat pomlčky („-“) a může být dlouhé až 35 znaků.
 
 
 

182 řádky
4.0 KiB

  1. .multi-range-slider-black * {
  2. box-sizing: border-box;
  3. padding: 0px;
  4. margin: 0px;
  5. }
  6. .multi-range-slider-black {
  7. display: flex;
  8. position: relative;
  9. background-color: black;
  10. border: solid 1px gray;
  11. padding: 30px 10px 25px 10px;
  12. flex-direction: column;
  13. color: white;
  14. -webkit-touch-callout: none; /* iOS Safari*/
  15. -webkit-user-select: none; /* Safari */
  16. -khtml-user-select: none; /* Konqueror HTML */
  17. -moz-user-select: none; /* Old versions of Firefox */
  18. -ms-user-select: none; /* Internet Explorer/Edge */
  19. user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge,*/
  20. }
  21. .multi-range-slider-black .bar {
  22. display: flex;
  23. }
  24. .multi-range-slider-black .bar.active * {
  25. transition: none;
  26. }
  27. .multi-range-slider-black .bar-left {
  28. width: 25%;
  29. background-color: gray;
  30. border-radius: 10px 0px 0px 10px;
  31. box-shadow: inset 0px 0px 5px black;
  32. border: solid 1px black;
  33. padding: 5px 0px;
  34. }
  35. .multi-range-slider-black .bar-right {
  36. width: 25%;
  37. background-color: gray;
  38. border-radius: 0px 10px 10px 0px;
  39. box-shadow: inset 0px 0px 5px black;
  40. border: solid 1px black;
  41. }
  42. .multi-range-slider-black .bar-inner {
  43. background-color: lime;
  44. display: flex;
  45. flex-grow: 1;
  46. flex-shrink: 1;
  47. justify-content: space-between;
  48. position: relative;
  49. border: solid 1px black;
  50. justify-content: space-between;
  51. box-shadow: inset 0px 0px 5px black;
  52. }
  53. .multi-range-slider-black .bar-inner-left {
  54. width: 50%;
  55. }
  56. .multi-range-slider-black .bar-inner-right {
  57. width: 50%;
  58. }
  59. .multi-range-slider-black .thumb {
  60. background-color: red;
  61. position: relative;
  62. z-index: 1;
  63. cursor: pointer;
  64. }
  65. .multi-range-slider-black .thumb::before {
  66. content: '';
  67. background-color: white;
  68. position: absolute;
  69. width: 20px;
  70. height: 30px;
  71. border: solid 1px black;
  72. box-shadow: 0px 0px 5px black, inset 0px 0px 10px gray;
  73. border-radius: 7px;
  74. z-index: 1;
  75. margin: -10px;
  76. cursor: pointer;
  77. }
  78. .multi-range-slider-black .input-type-range:focus + .thumb::after {
  79. content: '';
  80. position: absolute;
  81. top: -6px;
  82. left: -6px;
  83. width: 12px;
  84. height: 22px;
  85. z-index: 2;
  86. border-radius: 7px;
  87. border: dotted 1px black;
  88. box-shadow: 0px 0px 5px white, inset 0px 0px 10px black;
  89. }
  90. .multi-range-slider-black .caption {
  91. position: absolute;
  92. bottom: 45px;
  93. width: 2px;
  94. height: 2px;
  95. left: 1px;
  96. display: flex;
  97. justify-content: center;
  98. align-items: center;
  99. overflow: visible;
  100. /* display: none; */
  101. }
  102. .multi-range-slider-black .thumb .caption * {
  103. position: absolute;
  104. min-width: 30px;
  105. height: 30px;
  106. font-size: 75%;
  107. text-align: center;
  108. line-height: 30px;
  109. background-color: blue;
  110. border-radius: 15px;
  111. color: white;
  112. box-shadow: 0px 0px 5px black;
  113. padding: 0px 5px;
  114. white-space: nowrap;
  115. }
  116. .multi-range-slider-black .thumb:active .caption {
  117. display: flex;
  118. }
  119. .multi-range-slider-black .input-type-range:focus + .thumb .caption {
  120. display: flex;
  121. }
  122. .multi-range-slider-black .input-type-range {
  123. position: absolute;
  124. top: 0px;
  125. left: 0px;
  126. width: 100%;
  127. opacity: 0;
  128. pointer-events: none;
  129. }
  130. .multi-range-slider-black .ruler {
  131. margin: 10px 0px -5px 0px;
  132. display: flex;
  133. overflow: hidden;
  134. }
  135. .multi-range-slider-black .ruler .ruler-rule {
  136. border-left: solid 1px;
  137. border-bottom: solid 1px;
  138. display: flex;
  139. flex-grow: 1;
  140. flex-shrink: 1;
  141. padding: 5px 0px;
  142. }
  143. .multi-range-slider-black .ruler .ruler-rule:last-child {
  144. border-right: solid 1px;
  145. }
  146. .multi-range-slider-black .sub-ruler {
  147. margin: -2px 0px -5px 0px;
  148. display: flex; /*
  149. display: none; */
  150. }
  151. .multi-range-slider-black .sub-ruler .ruler-sub-rule {
  152. border-left: solid 1px;
  153. border-bottom: solid 1px;
  154. display: flex;
  155. flex-grow: 1;
  156. flex-shrink: 1;
  157. padding: 3px 0px;
  158. }
  159. .multi-range-slider-black .sub-ruler .ruler-sub-rule:last-child {
  160. border-right: solid 1px;
  161. }
  162. .multi-range-slider-black .labels {
  163. display: flex;
  164. justify-content: space-between;
  165. padding: 0px;
  166. margin-top: 10px;
  167. margin-bottom: -20px;
  168. /* display:none; */
  169. }
  170. .multi-range-slider-black .label {
  171. font-size: 80%;
  172. }
  173. .multi-range-slider-black.zero-ranage-margin .thumb-left {
  174. right: 12px;
  175. }
  176. .multi-range-slider-black.zero-ranage-margin .thumb-right {
  177. left: 8px;
  178. }