www/assets/stylesheets/jquery.minicolors.css

   1 .minicolors {
   2   position: relative;
   3 }
   4
   5 .minicolors-sprite {
   6   background-image: url(jquery.minicolors.png);
   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   background-position: -120px 0;
  82   cursor: crosshair;
  83 }
  84
  85 .minicolors .minicolors-grid-inner {
  86   position: absolute;
  87   top: 0;
  88   left: 0;
  89   width: 150px;
  90   height: 150px;
  91 }
  92
  93 .minicolors-slider-saturation .minicolors-grid {
  94   background-position: -420px 0;
  95 }
  96
  97 .minicolors-slider-saturation .minicolors-grid-inner {
  98   background-position: -270px 0;
  99   background-image: inherit;
 100 }
 101
 102 .minicolors-slider-brightness .minicolors-grid {
 103   background-position: -570px 0;
 104 }
 105
 106 .minicolors-slider-brightness .minicolors-grid-inner {
 107   background-color: black;
 108 }
 109
 110 .minicolors-slider-wheel .minicolors-grid {
 111   background-position: -720px 0;
 112 }
 113
 114 .minicolors-slider,
 115 .minicolors-opacity-slider {
 116   position: absolute;
 117   top: 1px;
 118   left: 152px;
 119   width: 20px;
 120   height: 150px;
 121   background-color: white;
 122   background-position: 0 0;
 123   cursor: row-resize;
 124 }
 125
 126 .minicolors-slider-saturation .minicolors-slider {
 127   background-position: -60px 0;
 128 }
 129
 130 .minicolors-slider-brightness .minicolors-slider {
 131   background-position: -20px 0;
 132 }
 133
 134 .minicolors-slider-wheel .minicolors-slider {
 135   background-position: -20px 0;
 136 }
 137
 138 .minicolors-opacity-slider {
 139   left: 173px;
 140   background-position: -40px 0;
 141   display: none;
 142 }
 143
 144 .minicolors-with-opacity .minicolors-opacity-slider {
 145   display: block;
 146 }
 147
 148 /* Pickers */
 149 .minicolors-grid .minicolors-picker {
 150   position: absolute;
 151   top: 70px;
 152   left: 70px;
 153   width: 12px;
 154   height: 12px;
 155   border: solid 1px black;
 156   border-radius: 10px;
 157   margin-top: -6px;
 158   margin-left: -6px;
 159   background: none;
 160 }
 161
 162 .minicolors-grid .minicolors-picker > div {
 163   position: absolute;
 164   top: 0;
 165   left: 0;
 166   width: 8px;
 167   height: 8px;
 168   border-radius: 8px;
 169   border: solid 2px white;
 170   box-sizing: content-box;
 171 }
 172
 173 .minicolors-picker {
 174   position: absolute;
 175   top: 0;
 176   left: 0;
 177   width: 18px;
 178   height: 2px;
 179   background: white;
 180   border: solid 1px black;
 181   margin-top: -2px;
 182   box-sizing: content-box;
 183 }
 184
 185 /* Swatches */
 186 .minicolors-swatches,
 187 .minicolors-swatches li {
 188   margin: 5px 0 3px 5px;
 189   padding: 0;
 190   list-style: none;
 191   overflow: hidden;
 192 }
 193
 194 .minicolors-swatches .minicolors-swatch {
 195   position: relative;
 196   float: left;
 197   cursor: pointer;
 198   margin:0 4px 0 0;
 199 }
 200
 201 .minicolors-with-opacity .minicolors-swatches .minicolors-swatch {
 202   margin-right: 7px;
 203 }
 204
 205 .minicolors-swatch.selected {
 206   border-color: #000;
 207 }
 208
 209 /* Inline controls */
 210 .minicolors-inline {
 211   display: inline-block;
 212 }
 213
 214 .minicolors-inline .minicolors-input {
 215   display: none !important;
 216 }
 217
 218 .minicolors-inline .minicolors-panel {
 219   position: relative;
 220   top: auto;
 221   left: auto;
 222   box-shadow: none;
 223   z-index: auto;
 224   display: inline-block;
 225 }
 226
 227 /* Default theme */
 228 .minicolors-theme-default .minicolors-swatch {
 229   top: 5px;
 230   left: 5px;
 231   width: 18px;
 232   height: 18px;
 233 }
 234 .minicolors-theme-default .minicolors-swatches .minicolors-swatch {
 235   margin-bottom: 2px;
 236   top: 0;
 237   left: 0;
 238   width: 18px;
 239   height: 18px;
 240 }
 241 .minicolors-theme-default.minicolors-position-right .minicolors-swatch {
 242   left: auto;
 243   right: 5px;
 244 }
 245 .minicolors-theme-default.minicolors {
 246   width: auto;
 247   display: inline-block;
 248 }
 249 .minicolors-theme-default .minicolors-input {
 250   height: 20px;
 251   width: auto;
 252   display: inline-block;
 253   padding-left: 26px;
 254 }
 255 .minicolors-theme-default.minicolors-position-right .minicolors-input {
 256   padding-right: 26px;
 257   padding-left: inherit;
 258 }
 259
 260 /* Bootstrap theme */
 261 .minicolors-theme-bootstrap .minicolors-swatch {
 262   z-index: 2;
 263   top: 3px;
 264   left: 3px;
 265   width: 28px;
 266   height: 28px;
 267   border-radius: 3px;
 268 }
 269 .minicolors-theme-bootstrap .minicolors-swatches .minicolors-swatch {
 270   margin-bottom: 2px;
 271   top: 0;
 272   left: 0;
 273   width: 20px;
 274   height: 20px;
 275 }
 276 .minicolors-theme-bootstrap .minicolors-swatch-color {
 277   border-radius: inherit;
 278 }
 279 .minicolors-theme-bootstrap.minicolors-position-right > .minicolors-swatch {
 280   left: auto;
 281   right: 3px;
 282 }
 283 .minicolors-theme-bootstrap .minicolors-input {
 284   float: none;
 285   padding-left: 44px;
 286 }
 287 .minicolors-theme-bootstrap.minicolors-position-right .minicolors-input {
 288   padding-right: 44px;
 289   padding-left: 12px;
 290 }
 291 .minicolors-theme-bootstrap .minicolors-input.input-lg + .minicolors-swatch {
 292   top: 4px;
 293   left: 4px;
 294   width: 37px;
 295   height: 37px;
 296   border-radius: 5px;
 297 }
 298 .minicolors-theme-bootstrap .minicolors-input.input-sm + .minicolors-swatch {
 299   width: 24px;
 300   height: 24px;
 301 }
 302 .minicolors-theme-bootstrap .minicolors-input.input-xs + .minicolors-swatch {
 303   width: 18px;
 304   height: 18px;
 305 }
 306 .input-group .minicolors-theme-bootstrap:not(:first-child) .minicolors-input {
 307   border-top-left-radius: 0;
 308   border-bottom-left-radius: 0;
 309 }
 310
 311 /* Semantic Ui theme */
 312 .minicolors-theme-semanticui .minicolors-swatch {
 313   top: 0;
 314   left: 0;
 315   padding: 18px;
 316 }
 317 .minicolors-theme-semanticui input {
 318   text-indent: 30px;
 319 }