Advertisement
dragon55

Untitled

Apr 15th, 2018
102
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.26 KB | None | 0 0
  1. .minicolors {
  2. position: relative;
  3. }
  4.  
  5. .minicolors-sprite {
  6. background-image: url(http://siniri.ga/cdn/images/jquery.minicolors.cur);
  7. }
  8.  
  9. .minicolors-swatch {
  10. position: absolute;
  11. vertical-align: middle;
  12. background-position: -80px 0;
  13. border: solid 1px #ccc;
  14. cursor: text;
  15. padding: 0;
  16. margin: 0;
  17. display: inline-block;
  18. }
  19.  
  20. .minicolors-swatch-color {
  21. position: absolute;
  22. top: 0;
  23. left: 0;
  24. right: 0;
  25. bottom: 0;
  26. }
  27.  
  28. .minicolors input[type=hidden] + .minicolors-swatch {
  29. width: 28px;
  30. position: static;
  31. cursor: pointer;
  32. }
  33.  
  34. .minicolors input[type=hidden][disabled] + .minicolors-swatch {
  35. cursor: default;
  36. }
  37.  
  38. /* Panel */
  39. .minicolors-panel {
  40. position: absolute;
  41. width: 173px;
  42. background: white;
  43. border: solid 1px #CCC;
  44. box-shadow: 0 0 20px rgba(0, 0, 0, .2);
  45. z-index: 99999;
  46. box-sizing: content-box;
  47. display: none;
  48. }
  49.  
  50. .minicolors-panel.minicolors-visible {
  51. display: block;
  52. }
  53.  
  54. /* Panel positioning */
  55. .minicolors-position-top .minicolors-panel {
  56. top: -154px;
  57. }
  58.  
  59. .minicolors-position-right .minicolors-panel {
  60. right: 0;
  61. }
  62.  
  63. .minicolors-position-bottom .minicolors-panel {
  64. top: auto;
  65. }
  66.  
  67. .minicolors-position-left .minicolors-panel {
  68. left: 0;
  69. }
  70.  
  71. .minicolors-with-opacity .minicolors-panel {
  72. width: 194px;
  73. }
  74.  
  75. .minicolors .minicolors-grid {
  76. position: relative;
  77. top: 1px;
  78. left: 1px;
  79. width: 150px;
  80. height: 150px;
  81. margin-bottom: 2px;
  82. background-position: -120px 0;
  83. cursor: crosshair;
  84. }
  85.  
  86. .minicolors .minicolors-grid-inner {
  87. position: absolute;
  88. top: 0;
  89. left: 0;
  90. width: 150px;
  91. height: 150px;
  92. }
  93.  
  94. .minicolors-slider-saturation .minicolors-grid {
  95. background-position: -420px 0;
  96. }
  97.  
  98. .minicolors-slider-saturation .minicolors-grid-inner {
  99. background-position: -270px 0;
  100. background-image: inherit;
  101. }
  102.  
  103. .minicolors-slider-brightness .minicolors-grid {
  104. background-position: -570px 0;
  105. }
  106.  
  107. .minicolors-slider-brightness .minicolors-grid-inner {
  108. background-color: black;
  109. }
  110.  
  111. .minicolors-slider-wheel .minicolors-grid {
  112. background-position: -720px 0;
  113. }
  114.  
  115. .minicolors-slider,
  116. .minicolors-opacity-slider {
  117. position: absolute;
  118. top: 1px;
  119. left: 152px;
  120. width: 20px;
  121. height: 150px;
  122. background-color: white;
  123. background-position: 0 0;
  124. cursor: row-resize;
  125. }
  126.  
  127. .minicolors-slider-saturation .minicolors-slider {
  128. background-position: -60px 0;
  129. }
  130.  
  131. .minicolors-slider-brightness .minicolors-slider {
  132. background-position: -20px 0;
  133. }
  134.  
  135. .minicolors-slider-wheel .minicolors-slider {
  136. background-position: -20px 0;
  137. }
  138.  
  139. .minicolors-opacity-slider {
  140. left: 173px;
  141. background-position: -40px 0;
  142. display: none;
  143. }
  144.  
  145. .minicolors-with-opacity .minicolors-opacity-slider {
  146. display: block;
  147. }
  148.  
  149. /* Pickers */
  150. .minicolors-grid .minicolors-picker {
  151. position: absolute;
  152. top: 70px;
  153. left: 70px;
  154. width: 12px;
  155. height: 12px;
  156. border: solid 1px black;
  157. border-radius: 10px;
  158. margin-top: -6px;
  159. margin-left: -6px;
  160. background: none;
  161. }
  162.  
  163. .minicolors-grid .minicolors-picker > div {
  164. position: absolute;
  165. top: 0;
  166. left: 0;
  167. width: 8px;
  168. height: 8px;
  169. border-radius: 8px;
  170. border: solid 2px white;
  171. box-sizing: content-box;
  172. }
  173.  
  174. .minicolors-picker {
  175. position: absolute;
  176. top: 0;
  177. left: 0;
  178. width: 18px;
  179. height: 2px;
  180. background: white;
  181. border: solid 1px black;
  182. margin-top: -2px;
  183. box-sizing: content-box;
  184. }
  185.  
  186. /* Swatches */
  187. .minicolors-swatches,
  188. .minicolors-swatches li {
  189. margin: 5px 0 3px 5px;
  190. padding: 0;
  191. list-style: none;
  192. overflow: hidden;
  193. }
  194.  
  195. .minicolors-swatches .minicolors-swatch {
  196. position: relative;
  197. float: left;
  198. cursor: pointer;
  199. margin:0 4px 0 0;
  200. }
  201.  
  202. .minicolors-with-opacity .minicolors-swatches .minicolors-swatch {
  203. margin-right: 7px;
  204. }
  205.  
  206. .minicolors-swatch.selected {
  207. border-color: #000;
  208. }
  209.  
  210. /* Inline controls */
  211. .minicolors-inline {
  212. display: inline-block;
  213. }
  214.  
  215. .minicolors-inline .minicolors-input {
  216. display: none !important;
  217. }
  218.  
  219. .minicolors-inline .minicolors-panel {
  220. position: relative;
  221. top: auto;
  222. left: auto;
  223. box-shadow: none;
  224. z-index: auto;
  225. display: inline-block;
  226. }
  227.  
  228. /* Default theme */
  229. .minicolors-theme-default .minicolors-swatch {
  230. top: 5px;
  231. left: 5px;
  232. width: 18px;
  233. height: 18px;
  234. }
  235. .minicolors-theme-default .minicolors-swatches .minicolors-swatch {
  236. margin-bottom: 2px;
  237. top: 0;
  238. left: 0;
  239. width: 18px;
  240. height: 18px;
  241. }
  242. .minicolors-theme-default.minicolors-position-right .minicolors-swatch {
  243. left: auto;
  244. right: 5px;
  245. }
  246. .minicolors-theme-default.minicolors {
  247. width: auto;
  248. display: inline-block;
  249. }
  250. .minicolors-theme-default .minicolors-input {
  251. height: 20px;
  252. width: auto;
  253. display: inline-block;
  254. padding-left: 26px;
  255. }
  256. .minicolors-theme-default.minicolors-position-right .minicolors-input {
  257. padding-right: 26px;
  258. padding-left: inherit;
  259. }
  260.  
  261. /* Bootstrap theme */
  262. .minicolors-theme-bootstrap .minicolors-swatch {
  263. z-index: 2;
  264. top: 3px;
  265. left: 3px;
  266. width: 28px;
  267. height: 28px;
  268. border-radius: 3px;
  269. }
  270. .minicolors-theme-bootstrap .minicolors-swatches .minicolors-swatch {
  271. margin-bottom: 2px;
  272. top: 0;
  273. left: 0;
  274. width: 20px;
  275. height: 20px;
  276. }
  277. .minicolors-theme-bootstrap .minicolors-swatch-color {
  278. border-radius: inherit;
  279. }
  280. .minicolors-theme-bootstrap.minicolors-position-right > .minicolors-swatch {
  281. left: auto;
  282. right: 3px;
  283. }
  284. .minicolors-theme-bootstrap .minicolors-input {
  285. float: none;
  286. padding-left: 44px;
  287. }
  288. .minicolors-theme-bootstrap.minicolors-position-right .minicolors-input {
  289. padding-right: 44px;
  290. padding-left: 12px;
  291. }
  292. .minicolors-theme-bootstrap .minicolors-input.input-lg + .minicolors-swatch {
  293. top: 4px;
  294. left: 4px;
  295. width: 37px;
  296. height: 37px;
  297. border-radius: 5px;
  298. }
  299. .minicolors-theme-bootstrap .minicolors-input.input-sm + .minicolors-swatch {
  300. width: 24px;
  301. height: 24px;
  302. }
  303. .minicolors-theme-bootstrap .minicolors-input.input-xs + .minicolors-swatch {
  304. width: 18px;
  305. height: 18px;
  306. }
  307. .input-group .minicolors-theme-bootstrap:not(:first-child) .minicolors-input {
  308. border-top-left-radius: 0;
  309. border-bottom-left-radius: 0;
  310. }
  311.  
  312. /* Semantic Ui theme */
  313. .minicolors-theme-semanticui .minicolors-swatch {
  314. top: 0;
  315. left: 0;
  316. padding: 18px;
  317. }
  318. .minicolors-theme-semanticui input {
  319. text-indent: 30px;
  320. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement