[Summary view] [Print] [Text view]

   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    cursor: text;
  14    padding: 0;
  15    margin: 0;
  16    display: inline-block;
  17  }
  18  
  19  .minicolors-swatch::after {
  20    content: "";
  21    position: absolute;
  22    top: 0;
  23    left: 0;
  24    width: 100%;
  25    height: 100%;
  26    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
  27    border-radius: 2px;
  28  }
  29  
  30  .minicolors-swatch-color {
  31    position: absolute;
  32    top: 0;
  33    left: 0;
  34    right: 0;
  35    bottom: 0;
  36  }
  37  
  38  .minicolors input[type=hidden] + .minicolors-swatch {
  39    width: 28px;
  40    position: static;
  41    cursor: pointer;
  42  }
  43  
  44  .minicolors input[type=hidden][disabled] + .minicolors-swatch {
  45    cursor: default;
  46  }
  47  
  48  /* Panel */
  49  .minicolors-panel {
  50    position: absolute;
  51    width: 173px;
  52    background: white;
  53    border-radius: 2px;
  54    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  55    z-index: 99999;
  56    box-sizing: content-box;
  57    display: none;
  58    touch-action: none;
  59  }
  60  
  61  .minicolors-panel.minicolors-visible {
  62    display: block;
  63  }
  64  
  65  /* Panel positioning */
  66  .minicolors-position-top .minicolors-panel {
  67    top: -154px;
  68  }
  69  
  70  .minicolors-position-right .minicolors-panel {
  71    right: 0;
  72  }
  73  
  74  .minicolors-position-bottom .minicolors-panel {
  75    top: auto;
  76  }
  77  
  78  .minicolors-position-left .minicolors-panel {
  79    left: 0;
  80  }
  81  
  82  .minicolors-with-opacity .minicolors-panel {
  83    width: 194px;
  84  }
  85  
  86  .minicolors .minicolors-grid {
  87    position: relative;
  88    top: 1px;
  89    left: 1px;
  90    /* LTR */
  91    width: 150px;
  92    height: 150px;
  93    margin-bottom: 2px;
  94    background-position: -120px 0;
  95    cursor: crosshair;
  96  }
  97  
  98  [dir=rtl] .minicolors .minicolors-grid {
  99    right: 1px;
 100  }
 101  
 102  .minicolors .minicolors-grid-inner {
 103    position: absolute;
 104    top: 0;
 105    left: 0;
 106    width: 150px;
 107    height: 150px;
 108  }
 109  
 110  .minicolors-slider-saturation .minicolors-grid {
 111    background-position: -420px 0;
 112  }
 113  
 114  .minicolors-slider-saturation .minicolors-grid-inner {
 115    background-position: -270px 0;
 116    background-image: inherit;
 117  }
 118  
 119  .minicolors-slider-brightness .minicolors-grid {
 120    background-position: -570px 0;
 121  }
 122  
 123  .minicolors-slider-brightness .minicolors-grid-inner {
 124    background-color: black;
 125  }
 126  
 127  .minicolors-slider-wheel .minicolors-grid {
 128    background-position: -720px 0;
 129  }
 130  
 131  .minicolors-slider,
 132  .minicolors-opacity-slider {
 133    position: absolute;
 134    top: 1px;
 135    left: 152px;
 136    /* LTR */
 137    width: 20px;
 138    height: 150px;
 139    background-color: white;
 140    background-position: 0 0;
 141    cursor: row-resize;
 142  }
 143  
 144  [dir=rtl] .minicolors-slider,
 145  [dir=rtl] .minicolors-opacity-slider {
 146    right: 152px;
 147  }
 148  
 149  .minicolors-slider-saturation .minicolors-slider {
 150    background-position: -60px 0;
 151  }
 152  
 153  .minicolors-slider-brightness .minicolors-slider {
 154    background-position: -20px 0;
 155  }
 156  
 157  .minicolors-slider-wheel .minicolors-slider {
 158    background-position: -20px 0;
 159  }
 160  
 161  .minicolors-opacity-slider {
 162    left: 173px;
 163    /* LTR */
 164    background-position: -40px 0;
 165    display: none;
 166  }
 167  
 168  [dir=rtl] .minicolors-opacity-slider {
 169    right: 173px;
 170  }
 171  
 172  .minicolors-with-opacity .minicolors-opacity-slider {
 173    display: block;
 174  }
 175  
 176  /* Pickers */
 177  .minicolors-grid .minicolors-picker {
 178    position: absolute;
 179    top: 70px;
 180    left: 70px;
 181    width: 12px;
 182    height: 12px;
 183    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
 184    border-radius: 10px;
 185    margin-top: -6px;
 186    margin-left: -6px;
 187    background: none;
 188  }
 189  
 190  .minicolors-grid .minicolors-picker > div {
 191    position: absolute;
 192    top: 0;
 193    left: 0;
 194    width: 8px;
 195    height: 8px;
 196    border-radius: 8px;
 197    border: solid 2px white;
 198    box-sizing: content-box;
 199  }
 200  
 201  .minicolors-picker {
 202    position: absolute;
 203    top: 0;
 204    left: 0;
 205    width: 18px;
 206    height: 3px;
 207    background: white;
 208    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
 209    border-radius: 2px;
 210    margin-top: -2px;
 211    margin-left: 1px;
 212    box-sizing: content-box;
 213  }
 214  
 215  /* Swatches */
 216  .minicolors-swatches,
 217  .minicolors-swatches li {
 218    margin: 5px 0 3px 5px;
 219    /* LTR */
 220    padding: 0;
 221    list-style: none;
 222    overflow: hidden;
 223  }
 224  
 225  [dir=rtl] .minicolors-swatches,
 226  [dir=rtl] .minicolors-swatches li {
 227    margin: 5px 5px 3px 0;
 228  }
 229  
 230  .minicolors-swatches .minicolors-swatch {
 231    position: relative;
 232    float: left;
 233    /* LTR */
 234    cursor: pointer;
 235    margin: 0 4px 0 0;
 236    /* LTR */
 237  }
 238  
 239  [dir=rtl] .minicolors-swatches .minicolors-swatch {
 240    float: right;
 241    margin: 0 0 0 4px;
 242  }
 243  
 244  .minicolors-with-opacity .minicolors-swatches .minicolors-swatch {
 245    margin-right: 7px;
 246    /* LTR */
 247  }
 248  
 249  [dir=rtl] .minicolors-with-opacity .minicolors-swatches .minicolors-swatch {
 250    margin-right: 0;
 251    margin-left: 7px;
 252  }
 253  
 254  .minicolors-swatch.selected {
 255    border-color: #000;
 256  }
 257  
 258  /* Inline controls */
 259  .minicolors-inline {
 260    display: inline-block;
 261  }
 262  
 263  .minicolors-inline .minicolors-input {
 264    display: none !important;
 265  }
 266  
 267  .minicolors-inline .minicolors-panel {
 268    position: relative;
 269    top: auto;
 270    left: auto;
 271    /* LTR */
 272    box-shadow: none;
 273    z-index: auto;
 274    display: inline-block;
 275  }
 276  
 277  [dir=rtl] .minicolors-inline .minicolors-panel {
 278    right: auto;
 279  }
 280  
 281  /* Default theme */
 282  .minicolors-theme-default .minicolors-swatch {
 283    top: 5px;
 284    left: 5px;
 285    /* LTR */
 286    width: 18px;
 287    height: 18px;
 288  }
 289  
 290  [dir=rtl] .minicolors-theme-default .minicolors-swatch {
 291    right: 5px;
 292  }
 293  
 294  .minicolors-theme-default .minicolors-swatches .minicolors-swatch {
 295    margin-bottom: 2px;
 296    top: 0;
 297    left: 0;
 298    /* LTR */
 299    width: 18px;
 300    height: 18px;
 301  }
 302  
 303  [dir=rtl] .minicolors-theme-default .minicolors-swatches .minicolors-swatch {
 304    right: 0;
 305  }
 306  
 307  .minicolors-theme-default.minicolors-position-right .minicolors-swatch {
 308    left: auto;
 309    /* LTR */
 310    right: 5px;
 311    /* LTR */
 312  }
 313  
 314  [dir=rtl] .minicolors-theme-default.minicolors-position-left .minicolors-swatch {
 315    right: auto;
 316    left: 5px;
 317  }
 318  
 319  .minicolors-theme-default.minicolors {
 320    width: auto;
 321    display: inline-block;
 322  }
 323  
 324  .minicolors-theme-default .minicolors-input {
 325    height: 20px;
 326    width: auto;
 327    display: inline-block;
 328    padding-left: 26px;
 329    /* LTR */
 330  }
 331  
 332  [dir=rtl] .minicolors-theme-default .minicolors-input {
 333    text-align: right;
 334    unicode-bidi: -moz-plaintext;
 335    unicode-bidi: plaintext;
 336    padding-left: 1px;
 337    padding-right: 26px;
 338  }
 339  
 340  .minicolors-theme-default.minicolors-position-right .minicolors-input {
 341    padding-right: 26px;
 342    /* LTR */
 343    padding-left: inherit;
 344    /* LTR */
 345  }
 346  
 347  [dir=rtl] .minicolors-theme-default.minicolors-position-left .minicolors-input {
 348    padding-right: inherit;
 349    padding-left: 26px;
 350  }
 351  
 352  /* Bootstrap theme */
 353  .minicolors-theme-bootstrap .minicolors-swatch {
 354    z-index: 2;
 355    top: 3px;
 356    left: 3px;
 357    /* LTR */
 358    width: 28px;
 359    height: 28px;
 360    border-radius: 2px;
 361  }
 362  
 363  [dir=rtl] .minicolors-theme-bootstrap .minicolors-swatch {
 364    right: 3px;
 365  }
 366  
 367  .minicolors-theme-bootstrap .minicolors-swatches .minicolors-swatch {
 368    margin-bottom: 2px;
 369    top: 0;
 370    left: 0;
 371    /* LTR */
 372    width: 20px;
 373    height: 20px;
 374  }
 375  
 376  [dir=rtl] .minicolors-theme-bootstrap .minicolors-swatches .minicolors-swatch {
 377    right: 0;
 378  }
 379  
 380  .minicolors-theme-bootstrap .minicolors-swatch-color {
 381    border-radius: inherit;
 382  }
 383  
 384  .minicolors-theme-bootstrap.minicolors-position-right > .minicolors-swatch {
 385    left: auto;
 386    /* LTR */
 387    right: 3px;
 388    /* LTR */
 389  }
 390  
 391  [dir=rtl] .minicolors-theme-bootstrap.minicolors-position-left > .minicolors-swatch {
 392    right: auto;
 393    left: 3px;
 394  }
 395  
 396  .minicolors-theme-bootstrap .minicolors-input {
 397    float: none;
 398    padding-left: 44px;
 399    /* LTR */
 400  }
 401  
 402  [dir=rtl] .minicolors-theme-bootstrap .minicolors-input {
 403    text-align: right;
 404    unicode-bidi: -moz-plaintext;
 405    unicode-bidi: plaintext;
 406    padding-left: 12px;
 407    padding-right: 44px;
 408  }
 409  
 410  .minicolors-theme-bootstrap.minicolors-position-right .minicolors-input {
 411    padding-right: 44px;
 412    /* LTR */
 413    padding-left: 12px;
 414    /* LTR */
 415  }
 416  
 417  [dir=rtl] .minicolors-theme-bootstrap.minicolors-position-left .minicolors-input {
 418    padding-right: 12px;
 419    padding-left: 44px;
 420  }
 421  
 422  .minicolors-theme-bootstrap .minicolors-input.input-lg + .minicolors-swatch {
 423    top: 4px;
 424    left: 4px;
 425    /* LTR */
 426    width: 37px;
 427    height: 37px;
 428    border-radius: 5px;
 429  }
 430  
 431  [dir=rtl] .minicolors-theme-bootstrap .minicolors-input.input-lg + .minicolors-swatch {
 432    right: 4px;
 433  }
 434  
 435  .minicolors-theme-bootstrap .minicolors-input.input-sm + .minicolors-swatch {
 436    width: 24px;
 437    height: 24px;
 438  }
 439  
 440  .minicolors-theme-bootstrap .minicolors-input.input-xs + .minicolors-swatch {
 441    width: 18px;
 442    height: 18px;
 443  }
 444  
 445  .input-group .minicolors-theme-bootstrap:not(:first-child) .minicolors-input {
 446    border-top-left-radius: 0;
 447    /* LTR */
 448    border-bottom-left-radius: 0;
 449    /* LTR */
 450  }
 451  
 452  [dir=rtl] .input-group .minicolors-theme-bootstrap .minicolors-input {
 453    border-radius: 4px;
 454  }
 455  
 456  [dir=rtl] .input-group .minicolors-theme-bootstrap:not(:first-child) .minicolors-input {
 457    border-top-right-radius: 0;
 458    border-bottom-right-radius: 0;
 459  }
 460  
 461  [dir=rtl] .input-group .minicolors-theme-bootstrap:not(:last-child) .minicolors-input {
 462    border-top-left-radius: 0;
 463    border-bottom-left-radius: 0;
 464  }
 465  
 466  /* bootstrap input-group rtl override */
 467  [dir=rtl] .input-group .form-control,
 468  [dir=rtl] .input-group-addon,
 469  [dir=rtl] .input-group-btn > .btn,
 470  [dir=rtl] .input-group-btn > .btn-group > .btn,
 471  [dir=rtl] .input-group-btn > .dropdown-toggle {
 472    border: 1px solid #ccc;
 473    border-radius: 4px;
 474  }
 475  
 476  [dir=rtl] .input-group .form-control:first-child,
 477  [dir=rtl] .input-group-addon:first-child,
 478  [dir=rtl] .input-group-btn:first-child > .btn,
 479  [dir=rtl] .input-group-btn:first-child > .btn-group > .btn,
 480  [dir=rtl] .input-group-btn:first-child > .dropdown-toggle,
 481  [dir=rtl] .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
 482  [dir=rtl] .input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
 483    border-top-left-radius: 0;
 484    border-bottom-left-radius: 0;
 485    border-left: 0;
 486  }
 487  
 488  [dir=rtl] .input-group .form-control:last-child,
 489  [dir=rtl] .input-group-addon:last-child,
 490  [dir=rtl] .input-group-btn:last-child > .btn,
 491  [dir=rtl] .input-group-btn:last-child > .btn-group > .btn,
 492  [dir=rtl] .input-group-btn:last-child > .dropdown-toggle,
 493  [dir=rtl] .input-group-btn:first-child > .btn:not(:first-child),
 494  [dir=rtl] .input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
 495    border-top-right-radius: 0;
 496    border-bottom-right-radius: 0;
 497  }
 498  
 499  /* Semantic Ui theme */
 500  .minicolors-theme-semanticui .minicolors-swatch {
 501    top: 0;
 502    left: 0;
 503    /* LTR */
 504    padding: 18px;
 505  }
 506  
 507  [dir=rtl] .minicolors-theme-semanticui .minicolors-swatch {
 508    right: 0;
 509  }
 510  
 511  .minicolors-theme-semanticui input {
 512    text-indent: 30px;
 513  }
 514  
 515  .minicolors-theme-bootstrap .minicolors-input {
 516    width: 140px;
 517  }
 518  .minicolors-theme-bootstrap .rgb {
 519    width: 175px;
 520  }
 521  .minicolors-theme-bootstrap .rgba {
 522    width: 220px;
 523  }