jquery.minicolors.css 9.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445
  1. .minicolors {
  2. position: relative;
  3. }
  4. .minicolors-sprite {
  5. background-image: url(jquery.minicolors.png);
  6. }
  7. .minicolors-swatch {
  8. position: absolute;
  9. vertical-align: middle;
  10. background-position: -80px 0;
  11. cursor: text;
  12. padding: 0;
  13. margin: 0;
  14. display: inline-block;
  15. }
  16. .minicolors-swatch::after {
  17. content: '';
  18. position: absolute;
  19. top: 0;
  20. left: 0;
  21. width: 100%;
  22. height: 100%;
  23. box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
  24. border-radius: 2px;
  25. }
  26. .minicolors-swatch-color {
  27. position: absolute;
  28. top: 0;
  29. left: 0;
  30. right: 0;
  31. bottom: 0;
  32. }
  33. .minicolors input[type=hidden] + .minicolors-swatch {
  34. width: 28px;
  35. position: static;
  36. cursor: pointer;
  37. }
  38. .minicolors input[type=hidden][disabled] + .minicolors-swatch {
  39. cursor: default;
  40. }
  41. /* Panel */
  42. .minicolors-panel {
  43. position: absolute;
  44. width: 173px;
  45. background: white;
  46. border-radius: 2px;
  47. box-shadow: 0 0 20px rgba(0, 0, 0, .2);
  48. z-index: 99999;
  49. box-sizing: content-box;
  50. display: none;
  51. touch-action: none;
  52. }
  53. .minicolors-panel.minicolors-visible {
  54. display: block;
  55. }
  56. /* Panel positioning */
  57. .minicolors-position-top .minicolors-panel {
  58. top: -154px;
  59. }
  60. .minicolors-position-right .minicolors-panel {
  61. right: 0;
  62. }
  63. .minicolors-position-bottom .minicolors-panel {
  64. top: auto;
  65. }
  66. .minicolors-position-left .minicolors-panel {
  67. left: 0;
  68. }
  69. .minicolors-with-opacity .minicolors-panel {
  70. width: 194px;
  71. }
  72. .minicolors .minicolors-grid {
  73. position: relative;
  74. top: 1px;
  75. left: 1px; /* LTR */
  76. width: 150px;
  77. height: 150px;
  78. margin-bottom: 2px;
  79. background-position: -120px 0;
  80. cursor: crosshair;
  81. }
  82. [dir=rtl] .minicolors .minicolors-grid {
  83. right: 1px;
  84. }
  85. .minicolors .minicolors-grid-inner {
  86. position: absolute;
  87. top: 0;
  88. left: 0;
  89. width: 150px;
  90. height: 150px;
  91. }
  92. .minicolors-slider-saturation .minicolors-grid {
  93. background-position: -420px 0;
  94. }
  95. .minicolors-slider-saturation .minicolors-grid-inner {
  96. background-position: -270px 0;
  97. background-image: inherit;
  98. }
  99. .minicolors-slider-brightness .minicolors-grid {
  100. background-position: -570px 0;
  101. }
  102. .minicolors-slider-brightness .minicolors-grid-inner {
  103. background-color: black;
  104. }
  105. .minicolors-slider-wheel .minicolors-grid {
  106. background-position: -720px 0;
  107. }
  108. .minicolors-slider,
  109. .minicolors-opacity-slider {
  110. position: absolute;
  111. top: 1px;
  112. left: 152px; /* LTR */
  113. width: 20px;
  114. height: 150px;
  115. background-color: white;
  116. background-position: 0 0;
  117. cursor: row-resize;
  118. }
  119. [dir=rtl] .minicolors-slider,
  120. [dir=rtl] .minicolors-opacity-slider {
  121. right: 152px;
  122. }
  123. .minicolors-slider-saturation .minicolors-slider {
  124. background-position: -60px 0;
  125. }
  126. .minicolors-slider-brightness .minicolors-slider {
  127. background-position: -20px 0;
  128. }
  129. .minicolors-slider-wheel .minicolors-slider {
  130. background-position: -20px 0;
  131. }
  132. .minicolors-opacity-slider {
  133. left: 173px; /* LTR */
  134. background-position: -40px 0;
  135. display: none;
  136. }
  137. [dir=rtl] .minicolors-opacity-slider {
  138. right: 173px;
  139. }
  140. .minicolors-with-opacity .minicolors-opacity-slider {
  141. display: block;
  142. }
  143. /* Pickers */
  144. .minicolors-grid .minicolors-picker {
  145. position: absolute;
  146. top: 70px;
  147. left: 70px;
  148. width: 12px;
  149. height: 12px;
  150. box-shadow: 0 0 0 1px rgba(0, 0, 0, .25);
  151. border-radius: 10px;
  152. margin-top: -6px;
  153. margin-left: -6px;
  154. background: none;
  155. }
  156. .minicolors-grid .minicolors-picker > div {
  157. position: absolute;
  158. top: 0;
  159. left: 0;
  160. width: 8px;
  161. height: 8px;
  162. border-radius: 8px;
  163. border: solid 2px white;
  164. box-sizing: content-box;
  165. }
  166. .minicolors-picker {
  167. position: absolute;
  168. top: 0;
  169. left: 0;
  170. width: 18px;
  171. height: 3px;
  172. background: white;
  173. box-shadow: 0 0 0 1px rgba(0, 0, 0, .25);
  174. border-radius: 2px;
  175. margin-top: -2px;
  176. margin-left: 1px;
  177. box-sizing: content-box;
  178. }
  179. /* Swatches */
  180. .minicolors-swatches,
  181. .minicolors-swatches li {
  182. margin: 5px 0 3px 5px; /* LTR */
  183. padding: 0;
  184. list-style: none;
  185. overflow: hidden;
  186. }
  187. [dir=rtl] .minicolors-swatches,
  188. [dir=rtl] .minicolors-swatches li {
  189. margin: 5px 5px 3px 0;
  190. }
  191. .minicolors-swatches .minicolors-swatch {
  192. position: relative;
  193. float: left; /* LTR */
  194. cursor: pointer;
  195. margin: 0 4px 0 0; /* LTR */
  196. }
  197. [dir=rtl] .minicolors-swatches .minicolors-swatch {
  198. float: right;
  199. margin: 0 0 0 4px;
  200. }
  201. .minicolors-with-opacity .minicolors-swatches .minicolors-swatch {
  202. margin-right: 7px; /* LTR */
  203. }
  204. [dir=rtl] .minicolors-with-opacity .minicolors-swatches .minicolors-swatch {
  205. margin-right: 0;
  206. margin-left: 7px;
  207. }
  208. .minicolors-swatch.selected {
  209. border-color: #000;
  210. }
  211. /* Inline controls */
  212. .minicolors-inline {
  213. display: inline-block;
  214. }
  215. .minicolors-inline .minicolors-input {
  216. display: none !important;
  217. }
  218. .minicolors-inline .minicolors-panel {
  219. position: relative;
  220. top: auto;
  221. left: auto; /* LTR */
  222. box-shadow: none;
  223. z-index: auto;
  224. display: inline-block;
  225. }
  226. [dir=rtl] .minicolors-inline .minicolors-panel {
  227. right: auto;
  228. }
  229. /* Default theme */
  230. .minicolors-theme-default .minicolors-swatch {
  231. top: 5px;
  232. left: 5px; /* LTR */
  233. width: 18px;
  234. height: 18px;
  235. }
  236. [dir=rtl] .minicolors-theme-default .minicolors-swatch {
  237. right: 5px;
  238. }
  239. .minicolors-theme-default .minicolors-swatches .minicolors-swatch {
  240. margin-bottom: 2px;
  241. top: 0;
  242. left: 0; /* LTR */
  243. width: 18px;
  244. height: 18px;
  245. }
  246. [dir=rtl] .minicolors-theme-default .minicolors-swatches .minicolors-swatch {
  247. right: 0;
  248. }
  249. .minicolors-theme-default.minicolors-position-right .minicolors-swatch {
  250. left: auto; /* LTR */
  251. right: 5px; /* LTR */
  252. }
  253. [dir=rtl] .minicolors-theme-default.minicolors-position-left .minicolors-swatch {
  254. right: auto;
  255. left: 5px;
  256. }
  257. .minicolors-theme-default.minicolors {
  258. width: auto;
  259. display: inline-block;
  260. }
  261. .minicolors-theme-default .minicolors-input {
  262. height: 20px;
  263. width: auto;
  264. display: inline-block;
  265. padding-left: 26px; /* LTR */
  266. }
  267. [dir=rtl] .minicolors-theme-default .minicolors-input {
  268. text-align: right;
  269. unicode-bidi: plaintext;
  270. padding-left: 1px;
  271. padding-right: 26px;
  272. }
  273. .minicolors-theme-default.minicolors-position-right .minicolors-input {
  274. padding-right: 26px; /* LTR */
  275. padding-left: inherit; /* LTR */
  276. }
  277. [dir=rtl] .minicolors-theme-default.minicolors-position-left .minicolors-input {
  278. padding-right: inherit;
  279. padding-left: 26px;
  280. }
  281. /* Bootstrap theme */
  282. .minicolors-theme-bootstrap .minicolors-swatch {
  283. z-index: 2;
  284. top: 3px;
  285. left: 3px; /* LTR */
  286. width: 28px;
  287. height: 28px;
  288. border-radius: 2px;
  289. }
  290. [dir=rtl] .minicolors-theme-bootstrap .minicolors-swatch {
  291. right: 3px;
  292. }
  293. .minicolors-theme-bootstrap .minicolors-swatches .minicolors-swatch {
  294. margin-bottom: 2px;
  295. top: 0;
  296. left: 0; /* LTR */
  297. width: 20px;
  298. height: 20px;
  299. }
  300. [dir=rtl] .minicolors-theme-bootstrap .minicolors-swatches .minicolors-swatch {
  301. right: 0;
  302. }
  303. .minicolors-theme-bootstrap .minicolors-swatch-color {
  304. border-radius: inherit;
  305. }
  306. .minicolors-theme-bootstrap.minicolors-position-right > .minicolors-swatch {
  307. left: auto; /* LTR */
  308. right: 3px; /* LTR */
  309. }
  310. [dir=rtl] .minicolors-theme-bootstrap.minicolors-position-left > .minicolors-swatch {
  311. right: auto;
  312. left: 3px;
  313. }
  314. .minicolors-theme-bootstrap .minicolors-input {
  315. float: none;
  316. padding-left: 44px; /* LTR */
  317. }
  318. [dir=rtl] .minicolors-theme-bootstrap .minicolors-input {
  319. text-align: right;
  320. unicode-bidi: plaintext;
  321. padding-left: 12px;
  322. padding-right: 44px;
  323. }
  324. .minicolors-theme-bootstrap.minicolors-position-right .minicolors-input {
  325. padding-right: 44px; /* LTR */
  326. padding-left: 12px; /* LTR */
  327. }
  328. [dir=rtl] .minicolors-theme-bootstrap.minicolors-position-left .minicolors-input {
  329. padding-right: 12px;
  330. padding-left: 44px;
  331. }
  332. .minicolors-theme-bootstrap .minicolors-input.input-lg + .minicolors-swatch {
  333. top: 4px;
  334. left: 4px; /* LTR */
  335. width: 37px;
  336. height: 37px;
  337. border-radius: 5px;
  338. }
  339. [dir=rtl] .minicolors-theme-bootstrap .minicolors-input.input-lg + .minicolors-swatch {
  340. right: 4px;
  341. }
  342. .minicolors-theme-bootstrap .minicolors-input.input-sm + .minicolors-swatch {
  343. width: 24px;
  344. height: 24px;
  345. }
  346. .minicolors-theme-bootstrap .minicolors-input.input-xs + .minicolors-swatch {
  347. width: 18px;
  348. height: 18px;
  349. }
  350. .input-group .minicolors-theme-bootstrap:not(:first-child) .minicolors-input {
  351. border-top-left-radius: 0; /* LTR */
  352. border-bottom-left-radius: 0; /* LTR */
  353. }
  354. [dir=rtl] .input-group .minicolors-theme-bootstrap .minicolors-input {
  355. border-radius: 4px;
  356. }
  357. [dir=rtl] .input-group .minicolors-theme-bootstrap:not(:first-child) .minicolors-input {
  358. border-top-right-radius: 0;
  359. border-bottom-right-radius: 0;
  360. }
  361. [dir=rtl] .input-group .minicolors-theme-bootstrap:not(:last-child) .minicolors-input {
  362. border-top-left-radius: 0;
  363. border-bottom-left-radius: 0;
  364. }
  365. /* bootstrap input-group rtl override */
  366. [dir=rtl] .input-group .form-control,
  367. [dir=rtl] .input-group-addon,
  368. [dir=rtl] .input-group-btn > .btn,
  369. [dir=rtl] .input-group-btn > .btn-group > .btn,
  370. [dir=rtl] .input-group-btn > .dropdown-toggle {
  371. border: 1px solid #ccc;
  372. border-radius: 4px;
  373. }
  374. [dir=rtl] .input-group .form-control:first-child,
  375. [dir=rtl] .input-group-addon:first-child,
  376. [dir=rtl] .input-group-btn:first-child > .btn,
  377. [dir=rtl] .input-group-btn:first-child > .btn-group > .btn,
  378. [dir=rtl] .input-group-btn:first-child > .dropdown-toggle,
  379. [dir=rtl] .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
  380. [dir=rtl] .input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
  381. border-top-left-radius: 0;
  382. border-bottom-left-radius: 0;
  383. border-left: 0;
  384. }
  385. [dir=rtl] .input-group .form-control:last-child,
  386. [dir=rtl] .input-group-addon:last-child,
  387. [dir=rtl] .input-group-btn:last-child > .btn,
  388. [dir=rtl] .input-group-btn:last-child > .btn-group > .btn,
  389. [dir=rtl] .input-group-btn:last-child > .dropdown-toggle,
  390. [dir=rtl] .input-group-btn:first-child > .btn:not(:first-child),
  391. [dir=rtl] .input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
  392. border-top-right-radius: 0;
  393. border-bottom-right-radius: 0;
  394. }
  395. /* Semantic Ui theme */
  396. .minicolors-theme-semanticui .minicolors-swatch {
  397. top: 0;
  398. left: 0; /* LTR */
  399. padding: 18px;
  400. }
  401. [dir=rtl] .minicolors-theme-semanticui .minicolors-swatch {
  402. right: 0;
  403. }
  404. .minicolors-theme-semanticui input {
  405. text-indent: 30px;
  406. }