CSS   19
jquery minicolors
Guest on 27th August 2023 12:05:32 PM


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

Login or Register to edit or fork this paste. It's free.