color-picker.css 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517
  1. /* Iris Base
  2. ---------------------------------------------------- */
  3. .vamtam-color-picker-ui {
  4. width: 200px;
  5. }
  6. .vamtam-color-picker-ui .iris-picker {
  7. float: left;
  8. width: 200px;
  9. height: 215px;
  10. display: block;
  11. position: relative;
  12. border-top: 1px solid rgba(0,0,0,0.1);
  13. }
  14. .vamtam-color-picker-ui .iris-picker, .iris-picker * {
  15. box-sizing: content-box;
  16. }
  17. .vamtam-color-picker-ui .iris-error {
  18. background-color: #ffafaf;
  19. }
  20. .vamtam-color-picker-ui .iris-picker-inner {
  21. position: absolute;
  22. top: 0;
  23. right: 0;
  24. left: 0;
  25. bottom: 0;
  26. }
  27. .vamtam-color-picker-ui .iris-picker .iris-square-inner {
  28. position: absolute;
  29. left: 0;
  30. right: 0;
  31. top: 0;
  32. bottom: 0;
  33. }
  34. .vamtam-color-picker-ui .iris-picker .iris-square {
  35. /* float: left; */
  36. width: 200px;
  37. height: 200px;
  38. }
  39. .vamtam-color-picker-ui .iris-picker .iris-slider,
  40. .vamtam-color-picker-ui .iris-picker .iris-square-inner,
  41. .vamtam-color-picker-ui .iris-picker .iris-palette {
  42. box-shadow: 0 0 3px rgba(0, 0, 0, 0.1) inset;
  43. height: 100%;
  44. width: 12.5%;
  45. }
  46. .vamtam-color-picker-ui .iris-picker .iris-placeholder,
  47. .vamtam-color-picker-ui .iris-picker .iris-square {
  48. position: relative;
  49. }
  50. .vamtam-color-picker-ui .iris-picker .iris-square-inner {
  51. width: auto;
  52. margin: 0;
  53. }
  54. .vamtam-color-picker-ui .iris-picker .iris-strip {
  55. width: 200px;
  56. margin-top: 5px;
  57. position: relative;
  58. height: 14px;
  59. transform: rotate(180deg);
  60. }
  61. .vamtam-color-picker-ui .iris-picker .iris-strip .ui-slider-handle {
  62. width: 6px;
  63. position: absolute;
  64. right: 0;
  65. top: -2px;
  66. bottom: -2px;
  67. margin: 0;
  68. border-radius: 3px;
  69. background: #fff;
  70. box-shadow: 0 0px 2px rgba(0,0,0,.5);
  71. z-index: 5;
  72. cursor: ew-resize;
  73. }
  74. .vamtam-color-picker-ui .iris-picker .iris-slider-offset {
  75. position: absolute;
  76. top: 0;
  77. left: 6px;
  78. right: 0;
  79. bottom: 0;
  80. width: auto;
  81. height: auto;
  82. background: transparent;
  83. border: none;
  84. border-radius: 0;
  85. transform: rotate(180deg);
  86. }
  87. .vamtam-color-picker-ui .iris-picker .iris-square-handle {
  88. background: transparent;
  89. border: 5px solid #999;
  90. border-radius: 50%;
  91. border-color: rgba(128,128,128,.5);
  92. box-shadow:none;
  93. width: 12px;
  94. height: 12px;
  95. position: absolute;
  96. left: -10px;
  97. top: -10px;
  98. cursor: move;
  99. opacity: 1;
  100. z-index: 10;
  101. }
  102. .vamtam-color-picker-ui .iris-picker .ui-state-focus .iris-square-handle {
  103. opacity: .8;
  104. }
  105. .vamtam-color-picker-ui .iris-picker .iris-square-handle:hover {
  106. border-color: #999;
  107. }
  108. .vamtam-color-picker-ui .iris-picker .iris-square-value:focus .iris-square-handle {
  109. box-shadow: 0 0 2px rgba(0,0,0,.75);
  110. opacity: .8;
  111. }
  112. .vamtam-color-picker-ui .iris-picker .iris-square-handle:hover::after {
  113. border-color: #fff;
  114. }
  115. .vamtam-color-picker-ui .iris-picker .iris-square-handle::after {
  116. position: absolute;
  117. bottom: -4px;
  118. right: -4px;
  119. left: -4px;
  120. top: -4px;
  121. border: 3px solid #f9f9f9;
  122. border-color: rgba(255,255,255,.8);
  123. border-radius: 50%;
  124. content: " ";
  125. }
  126. .vamtam-color-picker-ui .iris-picker .iris-square-value {
  127. width: 8px;
  128. height: 8px;
  129. position: absolute;
  130. }
  131. .iris-ie-lt9 .iris-square-value, .iris-mozilla .iris-square-value {
  132. width: 1px;
  133. height: 1px;
  134. }
  135. /* Beaver Picker
  136. ---------------------------------------------------- */
  137. .vamtam-color-picker-wrapper {
  138. position: relative;
  139. width: 48px;
  140. height: 32px;
  141. }
  142. .vamtam-color-picker-color {
  143. position: relative;
  144. float: left;
  145. width: 30px;
  146. height: 30px;
  147. border: 1px solid rgba(0,0,0,0.1);
  148. background-color: transparent;
  149. cursor: pointer;
  150. }
  151. .vamtam-color-picker-color.vamtam-color-picker-empty {
  152. background: url(data:image/png;base64,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) center center no-repeat;
  153. }
  154. .vamtam-color-picker-clear {
  155. position: relative;
  156. display: block;
  157. float: left;
  158. width: 17px;
  159. height: 30px;
  160. border: 1px solid rgba(0,0,0,0.1);
  161. border-left: none;
  162. background-color: #FAFAFA;
  163. cursor: pointer;
  164. }
  165. .vamtam-color-picker-color.vamtam-color-picker-empty + .vamtam-color-picker-clear {
  166. display: none;
  167. }
  168. .vamtam-color-picker-ui {
  169. display: inline-block;
  170. font-family: Helvetica, Verdana, sans-serif;
  171. z-index: 999999;
  172. position: fixed;
  173. overflow: hidden;
  174. padding-bottom: 45px;
  175. border: 1px solid rgba(0,0,0,0.1);
  176. color: #999;
  177. background-color: #FAFAFA;
  178. border-radius: 3px;
  179. box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  180. transition: opacity .2s, visibility .2s;
  181. visibility: hidden;
  182. opacity: 0;
  183. -webkit-transform: translate3d(0,0,0);
  184. }
  185. .vamtam-color-picker-ui.vamtam-color-picker-active {
  186. visibility: visible;
  187. opacity: 1;
  188. }
  189. .vamtam-color-picker-ui .vamtam-color-picker-input,
  190. .vamtam-color-picker-ui .vamtam-color-picker-input:focus {
  191. width: 100%;
  192. height: 30px;
  193. border: none !important;
  194. font-size: 14px !important;
  195. padding: 0 8px;
  196. vertical-align: middle;
  197. color: #999;
  198. background-color: #fff;
  199. border-radius: 0;
  200. box-shadow: none;
  201. }
  202. .vamtam-color-picker-ui .iris-square-value {
  203. transition: none;
  204. }
  205. .vamtam-color-picker-preset-add {
  206. position: absolute;
  207. top: 8px;
  208. right: 8px;
  209. width: 14px;
  210. height: 14px;
  211. background-color: #999;
  212. border-radius: 50%;
  213. cursor: pointer;
  214. transition: all .2s;
  215. }
  216. .vamtam-color-picker-preset-add:hover {
  217. background-color: #333;
  218. }
  219. .vamtam-color-picker-preset-add:before,
  220. .vamtam-color-picker-preset-add:after {
  221. content: '';
  222. display: block;
  223. position: relative;
  224. background-color: #fff;
  225. }
  226. .vamtam-color-picker-preset-add:before {
  227. top: 6px;
  228. left: 3px;
  229. width: 8px;
  230. height: 2px;
  231. }
  232. .vamtam-color-picker-preset-add:after {
  233. left: 6px;
  234. top: 1px;
  235. width: 2px;
  236. height: 8px;
  237. }
  238. .vamtam-color-picker-presets {
  239. position: absolute;
  240. left: 0;
  241. bottom: 0;
  242. width: 100%;
  243. z-index: 15;
  244. overflow: auto;
  245. border-top: 1px solid rgba(0,0,0,0.1);
  246. background-color: #FAFAFA;
  247. }
  248. .vamtam-color-picker-presets-toggle {
  249. position: relative;
  250. overflow: hidden;
  251. width: 100%;
  252. height: 35px;
  253. text-align: center;
  254. line-height: 35px;
  255. font-size: 12px;
  256. font-weight: bold;
  257. cursor: pointer;
  258. transition: all .1s;
  259. }
  260. .vamtam-color-picker-presets-toggle:hover {
  261. background-color: #EDEDED;
  262. }
  263. .vamtam-color-picker-presets-open-label,
  264. .vamtam-color-picker-presets-close-label {
  265. position: absolute;
  266. top: 50%;
  267. left: 50%;
  268. visibility: hidden;
  269. color: #999;
  270. transition: all .5s;
  271. transform: translate(-50%,-50%);
  272. opacity: 0;
  273. width: 100%;
  274. }
  275. .vamtam-color-picker-presets-open-label.vamtam-color-picker-active,
  276. .vamtam-color-picker-presets-close-label.vamtam-color-picker-active {
  277. color: #999;
  278. visibility: visible;
  279. opacity: 1;
  280. }
  281. .vamtam-color-picker-presets-list {
  282. width: 100%;
  283. list-style: none;
  284. margin: 0;
  285. padding: 0;
  286. overflow: auto;
  287. }
  288. .vamtam-color-picker-presets-list .vamtam-color-picker-preset,
  289. .vamtam-color-picker-presets-list .vamtam-color-picker-no-preset {
  290. position: relative;
  291. padding: 5px;
  292. font-size: 12px;
  293. border-top: 1px solid rgba(0,0,0,0.1);
  294. transition: all .1s;
  295. }
  296. .vamtam-color-picker-presets-list .vamtam-color-picker-preset:hover {
  297. background-color: #EDEDED;
  298. }
  299. .vamtam-color-picker-presets-list .vamtam-color-picker-preset-color {
  300. display: inline-block;
  301. width: 20px;
  302. height: 20px;
  303. margin-right: 3px;
  304. vertical-align: middle;
  305. border: 1px solid rgba(0,0,0,0.1);
  306. border-radius: 2px;
  307. cursor: pointer;
  308. }
  309. .vamtam-color-picker-presets-list .vamtam-color-picker-preset-label {
  310. vertical-align: middle;
  311. color: #999;
  312. }
  313. .vamtam-color-picker-clear .vamtam-color-picker-icon-remove,
  314. .vamtam-color-picker-presets-list .vamtam-color-picker-preset-remove {
  315. position: absolute;
  316. top: 50%;
  317. cursor: pointer;
  318. transform: translateY(-50%);
  319. }
  320. .vamtam-color-picker-clear .vamtam-color-picker-icon-remove {
  321. right: 0;
  322. }
  323. .vamtam-color-picker-presets-list .vamtam-color-picker-preset-remove {
  324. right: 5px;
  325. }
  326. .vamtam-color-picker-presets-list .vamtam-color-picker-preset-remove:hover:before,
  327. .vamtam-color-picker-presets-list .vamtam-color-picker-preset-remove:hover:after {
  328. background-color: #333;
  329. }
  330. .vamtam-color-picker-added {
  331. position: absolute;
  332. width: 100%;
  333. top: 0;
  334. left: 0;
  335. right: 0;
  336. bottom: 35px;
  337. z-index: 10;
  338. color: #fff;
  339. text-align: center;
  340. background-color: rgba(0,0,0,.6);
  341. }
  342. .vamtam-color-picker-added-text {
  343. position: absolute;
  344. top: 50%;
  345. left: 50%;
  346. width: 80%;
  347. font-size: 14px;
  348. color: #fff !important;
  349. transform: translate(-50%,-50%);
  350. }
  351. /* Color Picker Icons
  352. ---------------------------------------------------- */
  353. .vamtam-color-picker-icon-check {
  354. position: relative;
  355. width: 50px;
  356. height: 50px;
  357. margin: 5px auto;
  358. }
  359. .vamtam-color-picker-icon-check:before {
  360. content: '';
  361. display: block;
  362. position: relative;
  363. width: 15px;
  364. height: 30px;
  365. margin-left: 14px;
  366. border: 7px solid #fff;
  367. border-left: none;
  368. border-top: none;
  369. transform: rotate(45deg);
  370. }
  371. .vamtam-color-picker-icon-arrow-up,
  372. .vamtam-color-picker-icon-arrow-down {
  373. display: inline-block;
  374. position: relative;
  375. width: 10px;
  376. height: 10px;
  377. margin-left: 5px;
  378. }
  379. .vamtam-color-picker-icon-arrow-up:before,
  380. .vamtam-color-picker-icon-arrow-down:before {
  381. content: '';
  382. display: block;
  383. position: relative;
  384. width: 6px;
  385. height: 6px;
  386. border: 2px solid #999;
  387. border-left: none;
  388. border-top: none;
  389. transform: rotate(45deg);
  390. }
  391. .vamtam-color-picker-icon-arrow-up {
  392. top: 2px;
  393. transform: rotate(180deg);
  394. }
  395. .vamtam-color-picker-icon-remove {
  396. width: 15px;
  397. height: 15px;
  398. }
  399. .vamtam-color-picker-icon-remove:before,
  400. .vamtam-color-picker-icon-remove:after {
  401. content: '';
  402. display: block;
  403. position: relative;
  404. background-color: #999;
  405. }
  406. .vamtam-color-picker-icon-remove:before {
  407. left: 6px;
  408. width: 2px;
  409. height: 10px;
  410. margin-top: 3px;
  411. background: #999;
  412. transform: rotate(-45deg);
  413. }
  414. .vamtam-color-picker-icon-remove:after {
  415. left: 6px;
  416. width: 2px;
  417. height: 10px;
  418. margin-top: -10px;
  419. background: #999;
  420. transform: rotate(45deg);
  421. }
  422. /* Color Picker Alpha / Opacity
  423. ---------------------------------------------------- */
  424. .vamtam-alpha-wrap {
  425. float: left;
  426. position: relative;
  427. width: 100%;
  428. height: 40px;
  429. border-top: none;
  430. box-sizing: border-box;
  431. }
  432. .vamtam-alpha-slider {
  433. width: 185px;
  434. height: 28px;
  435. position: absolute;
  436. top: 5px;
  437. }
  438. .vamtam-alpha-slider .ui-slider-handle {
  439. background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  440. border-color: #aaa;
  441. border-radius: 4px;
  442. border-style: solid;
  443. border-width: 4px;
  444. box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  445. cursor: ew-resize;
  446. height: 34px;
  447. left: -2px;
  448. opacity: 0.9;
  449. position: absolute;
  450. right: -2px;
  451. width: 16px;
  452. z-index: 14;
  453. }
  454. .vamtam-alpha-slider .ui-slider-handle:before {
  455. content: " ";
  456. position: absolute;
  457. left: -2px;
  458. right: -2px;
  459. top: -3px;
  460. bottom: -3px;
  461. border: 2px solid #fff;
  462. border-radius: 3px;
  463. }
  464. .vamtam-alpha-slider-offset {
  465. background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAAASCAYAAAAe/ZHXAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NkNEQUQ0ODM4RUE0MTFFNEExOEJFN0E5M0VFOTg0QUQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NkNEQUQ0ODQ4RUE0MTFFNEExOEJFN0E5M0VFOTg0QUQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2Q0RBRDQ4MThFQTQxMUU0QTE4QkU3QTkzRUU5ODRBRCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo2Q0RBRDQ4MjhFQTQxMUU0QTE4QkU3QTkzRUU5ODRBRCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pv/r/N8AAAWYSURBVHjarFvvR3VBEN45JZGIPkREHyIiIhJJf3qUSERE9CGiDxERkcg9z9u92uucvTszz5z7xnHPj93Z2d359cxscn5+jpTS+EoiMr3/+51cZ2dn4+e29i2/u7y8RKf/pO3vc+o+n5ycoNK31+f6+jrfZ37yuG2mf3R01H3fa5N/b29vU6dP5qft0G4PDg5MGuPr/v4+jz1t27mfvN/b21P75+fHx8eZfiV/Ozs7rUJnSu/5+RlFv+m6ZJpbW1s1PnrvXl9fZ/qX89zY2LB4mfy+v7/nsdV1XltbK/dr5vnz87OcV5bJabuVlRVLBifjfX9/l/xkGtM+S0tLNXnu0szfU/P3IMn/k0678h6ddqjQFGccVL6hoCsVfsq+NZ5QtCv5rfFS41sq37W+UPhMyhxEWTetvce3NR8oewqD39qalXuGAK/WPltjajIC4x2c9Ye1f43SGcqGwRBeTZjhMNntL4pCWZMQYhE05RVl02EovRgC4RkCbUNSQAGhGB/GsKG4h6FQoigDa2i8fRBy3uLMXYIG3Vr3aZvRaCRdBYlYIMZywhBGCVhgzzOlgRuUSOvC0GMEWxOM/+EtQFh1OIIXtfwg1tRaayGjg5px0jyZKEaTle3e+AsLCygVRAh3FlEgKbReE3oYGj9EgIR00QiEgKw3ZBQbRGjBeAMtDETQmHiKDsezJNLgCTFGItZXlAgCSiQggblP+9c8SDI0lXWlFv5g3K63KZ51FOcZzthQ3LomoNHwJmKIQISI3vqzSpwIQ8liSjGMFQjDpoVgaQ6cWgvLhOC7qiAwiHrWbEg4JMSmeUrBuHoYwioOQNXmhmAcrs096s1gJCGi3hSEVU8DQxYElYHhKwUUGAa+NqOBMsSSAQJuhQhCAH4vxozExsxiihPuaIrjCVYKWlYEsjSM52G8Kxxryngl5j0j+EyGTIiED4s1Itm0ZGWxMFCLJaBAcEI6OBkmFgNBoc8Cait2ZnENE/6wQN8LJSJeSMNAjKVm+LUMAIt3PR5AQgIGp1Z5zxhE8PtXUYReYeXi4mKmOPNXBMzt2tPT07LIUtJqr66uusXEbkFnWiQ6Pj72ikrtzc1NKopuvbbj58PDwxqNHp27u7tuYWumUDV+v7+/Xyu6pc59+/DwUCsC9ujt7u6qRbt8//T01C3elbyN70fb29uZ/1FSincvLy/lPGb42tzc9IqJeHt7q61Pr2C6vr7u7tfHx8fMPhV0sLq6WhZtU0n36+uru8elPE7aLi8v1wqJPXn++fmZKYgX8ozFxcXJb0NaQTHClZT8+gBjsYdaFc+zWcUkGTCWENY66ta92oSVzo3WI6IZKGtukeyfBLFKBNAj6bUOBgaoe9wE4n04IBNkLMoC7+Skj630ZlTJMYdyMsU2T8AwpzALkVFilZgJcT2l9PCWDDSAMBSjVlJgZNk0lE1AIby0qCiCnBQNj6aBGQslZIZJ5hB6D/AzQHto5Z9Nk8tARdN4q2ExBnsyIJ311EymShyjan2rKk0zh1Ay1oQVWAZQRnkUA8RFw7TahjBnmNgMVMQrsCGZJezRtGlU0cUZ1zuaxGZPpbhApM+ZpFQqQ6xadoMtBrEKpBVo4GRXvNSxpaRixKiR+TChCYhsDwZkfFj8IkErjAHejcUI0XQrgwehhNSMHAz21E0wZ23FcCAmj8Sd/PXy2xLYLAuwRw4IMsqjFaWYOpMEhDySAPFCWyFkgAHrEcA+BNeJ4UE8HCzJPpCrerUmQIx1pWJkjqxJD8EikUo2c5aI8ZYgsAkM4WQtnHd0ns0ORgVTBghy5ISy928SGsbTMqYg523RUY8oNYG4FIYiyRyZCnFCJC87IoRAIMVOqQ7BKexxCS2hYVl9JhvlpYjnAe4MhmRPMWhhvLfXINaI9WKM0Zu0+SfAAFLE1EgfVSv7AAAAAElFTkSuQmCC);
  466. border-radius: 2px;
  467. box-shadow: 0 0 5px rgba(0, 0, 0, 0.4) inset;
  468. width: 100%;
  469. height: 28px;
  470. bottom: 0;
  471. position: absolute;
  472. }
  473. .vamtam-color-picker-accents-heading,
  474. .vamtam-color-picker-presets-heading {
  475. text-align: center;
  476. }
  477. .vamtam-color-picker-accents-list {
  478. display: flex;
  479. }
  480. .vamtam-color-picker-accents-list span {
  481. display: inline-block;
  482. width: 25px;
  483. height: 100%;
  484. text-align: center;
  485. line-height: 25px;
  486. font-size: 15px;
  487. cursor: pointer;
  488. }