You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

507 lines
15 KiB

7 years ago
  1. /***
  2. Spectrum Colorpicker v1.8.0
  3. https://github.com/bgrins/spectrum
  4. Author: Brian Grinstead
  5. License: MIT
  6. ***/
  7. .sp-container {
  8. position:absolute;
  9. top:0;
  10. left:0;
  11. display:inline-block;
  12. *display: inline;
  13. *zoom: 1;
  14. /* https://github.com/bgrins/spectrum/issues/40 */
  15. z-index: 9999994;
  16. overflow: hidden;
  17. }
  18. .sp-container.sp-flat {
  19. position: relative;
  20. }
  21. /* Fix for * { box-sizing: border-box; } */
  22. .sp-container,
  23. .sp-container * {
  24. -webkit-box-sizing: content-box;
  25. -moz-box-sizing: content-box;
  26. box-sizing: content-box;
  27. }
  28. /* http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio */
  29. .sp-top {
  30. position:relative;
  31. width: 100%;
  32. display:inline-block;
  33. }
  34. .sp-top-inner {
  35. position:absolute;
  36. top:0;
  37. left:0;
  38. bottom:0;
  39. right:0;
  40. }
  41. .sp-color {
  42. position: absolute;
  43. top:0;
  44. left:0;
  45. bottom:0;
  46. right:20%;
  47. }
  48. .sp-hue {
  49. position: absolute;
  50. top:0;
  51. right:0;
  52. bottom:0;
  53. left:84%;
  54. height: 100%;
  55. }
  56. .sp-clear-enabled .sp-hue {
  57. top:33px;
  58. height: 77.5%;
  59. }
  60. .sp-fill {
  61. padding-top: 80%;
  62. }
  63. .sp-sat, .sp-val {
  64. position: absolute;
  65. top:0;
  66. left:0;
  67. right:0;
  68. bottom:0;
  69. }
  70. .sp-alpha-enabled .sp-top {
  71. margin-bottom: 18px;
  72. }
  73. .sp-alpha-enabled .sp-alpha {
  74. display: block;
  75. }
  76. .sp-alpha-handle {
  77. position:absolute;
  78. top:-4px;
  79. bottom: -4px;
  80. width: 6px;
  81. left: 50%;
  82. cursor: pointer;
  83. border: 1px solid black;
  84. background: white;
  85. opacity: .8;
  86. }
  87. .sp-alpha {
  88. display: none;
  89. position: absolute;
  90. bottom: -14px;
  91. right: 0;
  92. left: 0;
  93. height: 8px;
  94. }
  95. .sp-alpha-inner {
  96. border: solid 1px #333;
  97. }
  98. .sp-clear {
  99. display: none;
  100. }
  101. .sp-clear.sp-clear-display {
  102. background-position: center;
  103. }
  104. .sp-clear-enabled .sp-clear {
  105. display: block;
  106. position:absolute;
  107. top:0px;
  108. right:0;
  109. bottom:0;
  110. left:84%;
  111. height: 28px;
  112. }
  113. /* Don't allow text selection */
  114. .sp-container, .sp-replacer, .sp-preview, .sp-dragger, .sp-slider, .sp-alpha, .sp-clear, .sp-alpha-handle, .sp-container.sp-dragging .sp-input, .sp-container button {
  115. -webkit-user-select:none;
  116. -moz-user-select: -moz-none;
  117. -o-user-select:none;
  118. user-select: none;
  119. }
  120. .sp-container.sp-input-disabled .sp-input-container {
  121. display: none;
  122. }
  123. .sp-container.sp-buttons-disabled .sp-button-container {
  124. display: none;
  125. }
  126. .sp-container.sp-palette-buttons-disabled .sp-palette-button-container {
  127. display: none;
  128. }
  129. .sp-palette-only .sp-picker-container {
  130. display: none;
  131. }
  132. .sp-palette-disabled .sp-palette-container {
  133. display: none;
  134. }
  135. .sp-initial-disabled .sp-initial {
  136. display: none;
  137. }
  138. /* Gradients for hue, saturation and value instead of images. Not pretty... but it works */
  139. .sp-sat {
  140. background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#FFF), to(rgba(204, 154, 129, 0)));
  141. background-image: -webkit-linear-gradient(left, #FFF, rgba(204, 154, 129, 0));
  142. background-image: -moz-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
  143. background-image: -o-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
  144. background-image: -ms-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
  145. background-image: linear-gradient(to right, #fff, rgba(204, 154, 129, 0));
  146. -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr=#FFFFFFFF, endColorstr=#00CC9A81)";
  147. filter : progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr='#FFFFFFFF', endColorstr='#00CC9A81');
  148. }
  149. .sp-val {
  150. background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#000000), to(rgba(204, 154, 129, 0)));
  151. background-image: -webkit-linear-gradient(bottom, #000000, rgba(204, 154, 129, 0));
  152. background-image: -moz-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
  153. background-image: -o-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
  154. background-image: -ms-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
  155. background-image: linear-gradient(to top, #000, rgba(204, 154, 129, 0));
  156. -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00CC9A81, endColorstr=#FF000000)";
  157. filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#00CC9A81', endColorstr='#FF000000');
  158. }
  159. .sp-hue {
  160. background: -moz-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
  161. background: -ms-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
  162. background: -o-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
  163. background: -webkit-gradient(linear, left top, left bottom, from(#ff0000), color-stop(0.17, #ffff00), color-stop(0.33, #00ff00), color-stop(0.5, #00ffff), color-stop(0.67, #0000ff), color-stop(0.83, #ff00ff), to(#ff0000));
  164. background: -webkit-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
  165. background: linear-gradient(to bottom, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
  166. }
  167. /* IE filters do not support multiple color stops.
  168. Generate 6 divs, line them up, and do two color gradients for each.
  169. Yes, really.
  170. */
  171. .sp-1 {
  172. height:17%;
  173. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#ffff00');
  174. }
  175. .sp-2 {
  176. height:16%;
  177. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff00', endColorstr='#00ff00');
  178. }
  179. .sp-3 {
  180. height:17%;
  181. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ff00', endColorstr='#00ffff');
  182. }
  183. .sp-4 {
  184. height:17%;
  185. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffff', endColorstr='#0000ff');
  186. }
  187. .sp-5 {
  188. height:16%;
  189. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0000ff', endColorstr='#ff00ff');
  190. }
  191. .sp-6 {
  192. height:17%;
  193. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff00ff', endColorstr='#ff0000');
  194. }
  195. .sp-hidden {
  196. display: none !important;
  197. }
  198. /* Clearfix hack */
  199. .sp-cf:before, .sp-cf:after { content: ""; display: table; }
  200. .sp-cf:after { clear: both; }
  201. .sp-cf { *zoom: 1; }
  202. /* Mobile devices, make hue slider bigger so it is easier to slide */
  203. @media (max-device-width: 480px) {
  204. .sp-color { right: 40%; }
  205. .sp-hue { left: 63%; }
  206. .sp-fill { padding-top: 60%; }
  207. }
  208. .sp-dragger {
  209. border-radius: 5px;
  210. height: 5px;
  211. width: 5px;
  212. border: 1px solid #fff;
  213. background: #000;
  214. cursor: pointer;
  215. position:absolute;
  216. top:0;
  217. left: 0;
  218. }
  219. .sp-slider {
  220. position: absolute;
  221. top:0;
  222. cursor:pointer;
  223. height: 3px;
  224. left: -1px;
  225. right: -1px;
  226. border: 1px solid #000;
  227. background: white;
  228. opacity: .8;
  229. }
  230. /*
  231. Theme authors:
  232. Here are the basic themeable display options (colors, fonts, global widths).
  233. See http://bgrins.github.io/spectrum/themes/ for instructions.
  234. */
  235. .sp-container {
  236. border-radius: 0;
  237. background-color: #ECECEC;
  238. border: solid 1px #f0c49B;
  239. padding: 0;
  240. }
  241. .sp-container, .sp-container button, .sp-container input, .sp-color, .sp-hue, .sp-clear {
  242. font: normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
  243. -webkit-box-sizing: border-box;
  244. -moz-box-sizing: border-box;
  245. -ms-box-sizing: border-box;
  246. box-sizing: border-box;
  247. }
  248. .sp-top {
  249. margin-bottom: 3px;
  250. }
  251. .sp-color, .sp-hue, .sp-clear {
  252. border: solid 1px #666;
  253. }
  254. /* Input */
  255. .sp-input-container {
  256. float:right;
  257. width: 100px;
  258. margin-bottom: 4px;
  259. }
  260. .sp-initial-disabled .sp-input-container {
  261. width: 100%;
  262. }
  263. .sp-input {
  264. font-size: 12px !important;
  265. border: 1px inset;
  266. padding: 4px 5px;
  267. margin: 0;
  268. width: 100%;
  269. background:transparent;
  270. border-radius: 3px;
  271. color: #222;
  272. }
  273. .sp-input:focus {
  274. border: 1px solid orange;
  275. }
  276. .sp-input.sp-validation-error {
  277. border: 1px solid red;
  278. background: #fdd;
  279. }
  280. .sp-picker-container , .sp-palette-container {
  281. float:left;
  282. position: relative;
  283. padding: 10px;
  284. padding-bottom: 300px;
  285. margin-bottom: -290px;
  286. }
  287. .sp-picker-container {
  288. width: 172px;
  289. border-left: solid 1px #fff;
  290. }
  291. /* Palettes */
  292. .sp-palette-container {
  293. border-right: solid 1px #ccc;
  294. }
  295. .sp-palette-only .sp-palette-container {
  296. border: 0;
  297. }
  298. .sp-palette .sp-thumb-el {
  299. display: block;
  300. position:relative;
  301. float:left;
  302. width: 24px;
  303. height: 15px;
  304. margin: 3px;
  305. cursor: pointer;
  306. border:solid 2px transparent;
  307. }
  308. .sp-palette .sp-thumb-el:hover, .sp-palette .sp-thumb-el.sp-thumb-active {
  309. border-color: orange;
  310. }
  311. .sp-thumb-el {
  312. position:relative;
  313. }
  314. /* Initial */
  315. .sp-initial {
  316. float: left;
  317. border: solid 1px #333;
  318. }
  319. .sp-initial span {
  320. width: 30px;
  321. height: 25px;
  322. border:none;
  323. display:block;
  324. float:left;
  325. margin:0;
  326. }
  327. .sp-initial .sp-clear-display {
  328. background-position: center;
  329. }
  330. /* Buttons */
  331. .sp-palette-button-container,
  332. .sp-button-container {
  333. float: right;
  334. }
  335. /* Replacer (the little preview div that shows up instead of the <input>) */
  336. .sp-replacer {
  337. margin:0;
  338. overflow:hidden;
  339. cursor:pointer;
  340. padding: 4px;
  341. display:inline-block;
  342. *zoom: 1;
  343. *display: inline;
  344. border: solid 1px #91765d;
  345. background: #eee;
  346. color: #333;
  347. vertical-align: middle;
  348. }
  349. .sp-replacer:hover, .sp-replacer.sp-active {
  350. border-color: #F0C49B;
  351. color: #111;
  352. }
  353. .sp-replacer.sp-disabled {
  354. cursor:default;
  355. border-color: silver;
  356. color: silver;
  357. }
  358. .sp-dd {
  359. padding: 2px 0;
  360. height: 16px;
  361. line-height: 16px;
  362. float:left;
  363. font-size:10px;
  364. }
  365. .sp-preview {
  366. position:relative;
  367. width:25px;
  368. height: 20px;
  369. border: solid 1px #222;
  370. margin-right: 5px;
  371. float:left;
  372. z-index: 0;
  373. }
  374. .sp-palette {
  375. *width: 220px;
  376. max-width: 220px;
  377. }
  378. .sp-palette .sp-thumb-el {
  379. width:16px;
  380. height: 16px;
  381. margin:2px 1px;
  382. border: solid 1px #d0d0d0;
  383. }
  384. .sp-container {
  385. padding-bottom:0;
  386. }
  387. /* Buttons: http://hellohappy.org/css3-buttons/ */
  388. .sp-container button {
  389. background-color: #eeeeee;
  390. background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
  391. background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  392. background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
  393. background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
  394. background-image: linear-gradient(to bottom, #eeeeee, #cccccc);
  395. border: 1px solid #ccc;
  396. border-bottom: 1px solid #bbb;
  397. border-radius: 3px;
  398. color: #333;
  399. font-size: 14px;
  400. line-height: 1;
  401. padding: 5px 4px;
  402. text-align: center;
  403. text-shadow: 0 1px 0 #eee;
  404. vertical-align: middle;
  405. }
  406. .sp-container button:hover {
  407. background-color: #dddddd;
  408. background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb);
  409. background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb);
  410. background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb);
  411. background-image: -o-linear-gradient(top, #dddddd, #bbbbbb);
  412. background-image: linear-gradient(to bottom, #dddddd, #bbbbbb);
  413. border: 1px solid #bbb;
  414. border-bottom: 1px solid #999;
  415. cursor: pointer;
  416. text-shadow: 0 1px 0 #ddd;
  417. }
  418. .sp-container button:active {
  419. border: 1px solid #aaa;
  420. border-bottom: 1px solid #888;
  421. -webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
  422. -moz-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
  423. -ms-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
  424. -o-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
  425. box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
  426. }
  427. .sp-cancel {
  428. font-size: 11px;
  429. color: #d93f3f !important;
  430. margin:0;
  431. padding:2px;
  432. margin-right: 5px;
  433. vertical-align: middle;
  434. text-decoration:none;
  435. }
  436. .sp-cancel:hover {
  437. color: #d93f3f !important;
  438. text-decoration: underline;
  439. }
  440. .sp-palette span:hover, .sp-palette span.sp-thumb-active {
  441. border-color: #000;
  442. }
  443. .sp-preview, .sp-alpha, .sp-thumb-el {
  444. position:relative;
  445. background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
  446. }
  447. .sp-preview-inner, .sp-alpha-inner, .sp-thumb-inner {
  448. display:block;
  449. position:absolute;
  450. top:0;left:0;bottom:0;right:0;
  451. }
  452. .sp-palette .sp-thumb-inner {
  453. background-position: 50% 50%;
  454. background-repeat: no-repeat;
  455. }
  456. .sp-palette .sp-thumb-light.sp-thumb-active .sp-thumb-inner {
  457. background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIVJREFUeNpiYBhsgJFMffxAXABlN5JruT4Q3wfi/0DsT64h8UD8HmpIPCWG/KemIfOJCUB+Aoacx6EGBZyHBqI+WsDCwuQ9mhxeg2A210Ntfo8klk9sOMijaURm7yc1UP2RNCMbKE9ODK1HM6iegYLkfx8pligC9lCD7KmRof0ZhjQACDAAceovrtpVBRkAAAAASUVORK5CYII=);
  458. }
  459. .sp-palette .sp-thumb-dark.sp-thumb-active .sp-thumb-inner {
  460. background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAMdJREFUOE+tkgsNwzAMRMugEAahEAahEAZhEAqlEAZhEAohEAYh81X2dIm8fKpEspLGvudPOsUYpxE2BIJCroJmEW9qJ+MKaBFhEMNabSy9oIcIPwrB+afvAUFoK4H0tMaQ3XtlrggDhOVVMuT4E5MMG0FBbCEYzjYT7OxLEvIHQLY2zWwQ3D+9luyOQTfKDiFD3iUIfPk8VqrKjgAiSfGFPecrg6HN6m/iBcwiDAo7WiBeawa+Kwh7tZoSCGLMqwlSAzVDhoK+6vH4G0P5wdkAAAAASUVORK5CYII=);
  461. }
  462. .sp-clear-display {
  463. background-repeat:no-repeat;
  464. background-position: center;
  465. background-image: url(data:image/gif;base64,R0lGODlhFAAUAPcAAAAAAJmZmZ2dnZ6enqKioqOjo6SkpKWlpaampqenp6ioqKmpqaqqqqurq/Hx8fLy8vT09PX19ff39/j4+Pn5+fr6+vv7+wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAP8ALAAAAAAUABQAAAihAP9FoPCvoMGDBy08+EdhQAIJCCMybCDAAYUEARBAlFiQQoMABQhKUJBxY0SPICEYHBnggEmDKAuoPMjS5cGYMxHW3IiT478JJA8M/CjTZ0GgLRekNGpwAsYABHIypcAgQMsITDtWJYBR6NSqMico9cqR6tKfY7GeBCuVwlipDNmefAtTrkSzB1RaIAoXodsABiZAEFB06gIBWC1mLVgBa0AAOw==);
  466. }