colorpicker.css 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219
  1. .minicolors {
  2. position: relative;
  3. }
  4. .minicolors-swatch {
  5. position: absolute;
  6. display: inline-block;
  7. margin: 0;
  8. padding: 0;
  9. cursor: text;
  10. vertical-align: middle;
  11. border: solid 1px #ccc;
  12. background: url(../../images/colorpicker.png) -80px 0;
  13. }
  14. .minicolors-swatch-color {
  15. position: absolute;
  16. top: 0;
  17. right: 0;
  18. bottom: 0;
  19. left: 0;
  20. }
  21. .minicolors input[type=hidden] + .minicolors-swatch {
  22. position: static;
  23. width: 28px;
  24. cursor: pointer;
  25. }
  26. /* Panel */
  27. .minicolors-panel {
  28. position: absolute;
  29. z-index: 99999;
  30. display: none;
  31. -webkit-box-sizing: content-box;
  32. -moz-box-sizing: content-box;
  33. box-sizing: content-box;
  34. width: 173px;
  35. height: 152px;
  36. border: solid 1px #ccc;
  37. background: white;
  38. box-shadow: 0 0 20px rgba(0, 0, 0, .2);
  39. }
  40. .minicolors-panel.minicolors-visible {
  41. display: block;
  42. }
  43. /* Panel positioning */
  44. .minicolors-position-top .minicolors-panel {
  45. top: -180px;
  46. }
  47. .minicolors-position-right .minicolors-panel {
  48. right: 0;
  49. left: auto;
  50. }
  51. .minicolors-position-bottom .minicolors-panel {
  52. top: 36px;
  53. bottom: auto;
  54. }
  55. .minicolors-position-left .minicolors-panel {
  56. right: auto;
  57. left: 0;
  58. }
  59. .minicolors-with-opacity .minicolors-panel {
  60. width: 200px;
  61. }
  62. .minicolors .minicolors-grid {
  63. position: absolute;
  64. top: 6px;
  65. left: 6px;
  66. width: 150px;
  67. height: 150px;
  68. cursor: crosshair;
  69. background: url(../../images/colorpicker.png) -120px 0;
  70. }
  71. .minicolors .minicolors-grid-inner {
  72. position: absolute;
  73. top: 0;
  74. left: 0;
  75. width: 150px;
  76. height: 150px;
  77. background: none;
  78. }
  79. .minicolors-slider-saturation .minicolors-grid {
  80. background-position: -420px 0;
  81. }
  82. .minicolors-slider-saturation .minicolors-grid-inner {
  83. background: url(../../images/colorpicker.png) -270px 0;
  84. }
  85. .minicolors-slider-brightness .minicolors-grid {
  86. background-position: -570px 0;
  87. }
  88. .minicolors-slider-brightness .minicolors-grid-inner {
  89. background: black;
  90. }
  91. .minicolors-slider-wheel .minicolors-grid {
  92. background-position: -720px 0;
  93. }
  94. .minicolors-slider,
  95. .minicolors-opacity-slider {
  96. position: absolute;
  97. top: 6px;
  98. left: 160px;
  99. width: 20px;
  100. height: 150px;
  101. cursor: row-resize;
  102. background: white url(../../images/colorpicker.png) 0 0;
  103. }
  104. .minicolors-slider-saturation .minicolors-slider {
  105. background-position: -60px 0;
  106. }
  107. .minicolors-slider-brightness .minicolors-slider {
  108. background-position: -20px 0;
  109. }
  110. .minicolors-slider-wheel .minicolors-slider {
  111. background-position: -20px 0;
  112. }
  113. .minicolors-opacity-slider {
  114. left: 184px;
  115. display: none;
  116. background-position: -40px 0;
  117. }
  118. .minicolors-with-opacity .minicolors-opacity-slider {
  119. display: block;
  120. }
  121. /* Pickers */
  122. .minicolors-grid .minicolors-picker {
  123. position: absolute;
  124. top: 70px;
  125. left: 70px;
  126. width: 12px;
  127. height: 12px;
  128. margin-top: -6px;
  129. margin-left: -6px;
  130. border: solid 1px black;
  131. border-radius: 10px;
  132. background: none;
  133. }
  134. .minicolors-grid .minicolors-picker > div {
  135. position: absolute;
  136. top: 0;
  137. left: 0;
  138. -webkit-box-sizing: content-box;
  139. -moz-box-sizing: content-box;
  140. box-sizing: content-box;
  141. width: 8px;
  142. height: 8px;
  143. border: solid 2px white;
  144. border-radius: 8px;
  145. }
  146. .minicolors-picker {
  147. position: absolute;
  148. top: 0;
  149. left: 0;
  150. -webkit-box-sizing: content-box;
  151. -moz-box-sizing: content-box;
  152. box-sizing: content-box;
  153. width: 18px;
  154. height: 2px;
  155. margin-top: -2px;
  156. border: solid 1px black;
  157. background: white;
  158. }
  159. /* Inline controls */
  160. .minicolors-inline {
  161. display: inline-block;
  162. }
  163. .minicolors-inline .minicolors-input {
  164. display: none !important;
  165. }
  166. .minicolors-inline .minicolors-panel {
  167. position: relative;
  168. z-index: auto;
  169. top: auto;
  170. left: auto;
  171. display: inline-block;
  172. box-shadow: none;
  173. }
  174. /* Default theme */
  175. .minicolors-theme-default .minicolors-swatch {
  176. top: 5px;
  177. left: 5px;
  178. width: 24px;
  179. height: 24px;
  180. }
  181. .minicolors-theme-default.minicolors-position-right .minicolors-swatch {
  182. right: 5px;
  183. left: auto;
  184. }
  185. .minicolors-theme-default.minicolors {
  186. display: inline-block;
  187. width: 100%;
  188. }
  189. .minicolors-theme-default.minicolors-position-right .minicolors-input {
  190. padding-right: 34px;
  191. }
  192. .minicolors-theme-default.minicolors-position-left .minicolors-input {
  193. padding-left: 34px;
  194. }
  195. /* Bootstrap theme */
  196. .minicolors-theme-bootstrap .minicolors-swatch {
  197. top: 3px;
  198. left: 3px;
  199. width: 28px;
  200. height: 28px;
  201. border-radius: 3px;
  202. }
  203. .minicolors-theme-bootstrap.minicolors-position-right .minicolors-swatch {
  204. right: 3px;
  205. left: auto;
  206. }
  207. .minicolors-theme-bootstrap .minicolors-input {
  208. padding-left: 44px;
  209. }
  210. .minicolors-theme-bootstrap.minicolors-position-right .minicolors-input {
  211. padding-right: 44px;
  212. padding-left: 12px;
  213. }