vis-util/standalone/styles/color-picker.css

utilitie collection for visjs

div.vis-color-picker {
  position: absolute;
  top: 0px;
  left: 30px;
  margin-top: -140px;
  margin-left: 30px;
  width: 310px;
  height: 444px;
  z-index: 1;
  padding: 10px;
  border-radius: 15px;
  background-color: #ffffff;
  display: none;
  box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px 0px;
}

div.vis-color-picker div.vis-arrow {
  position: absolute;
  top: 147px;
  left: 5px;
}

div.vis-color-picker div.vis-arrow::after,
div.vis-color-picker div.vis-arrow::before {
  right: 100%;
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

div.vis-color-picker div.vis-arrow:after {
  border-color: rgba(255, 255, 255, 0);
  border-right-color: #ffffff;
  border-width: 30px;
  margin-top: -30px;
}

div.vis-color-picker div.vis-color {
  position: absolute;
  width: 289px;
  height: 289px;
  cursor: pointer;
}

div.vis-color-picker div.vis-brightness {
  position: absolute;
  top: 313px;
}

div.vis-color-picker div.vis-opacity {
  position: absolute;
  top: 350px;
}

div.vis-color-picker div.vis-selector {
  position: absolute;
  top: 137px;
  left: 137px;
  width: 15px;
  height: 15px;
  border-radius: 15px;
  border: 1px solid #ffffff;
  background: #4c4c4c; /* Old browsers */
  background: -moz-linear-gradient(
    top,
    #4c4c4c 0%,
    #595959 12%,
    #666666 25%,
    #474747 39%,
    #2c2c2c 50%,
    #000000 51%,
    #111111 60%,
    #2b2b2b 76%,
    #1c1c1c 91%,
    #131313 100%
  ); /* FF3.6+ */
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0%, #4c4c4c),
    color-stop(12%, #595959),
    color-stop(25%, #666666),
    color-stop(39%, #474747),
    color-stop(50%, #2c2c2c),
    color-stop(51%, #000000),
    color-stop(60%, #111111),
    color-stop(76%, #2b2b2b),
    color-stop(91%, #1c1c1c),
    color-stop(100%, #131313)
  ); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(
    top,
    #4c4c4c 0%,
    #595959 12%,
    #666666 25%,
    #474747 39%,
    #2c2c2c 50%,
    #000000 51%,
    #111111 60%,
    #2b2b2b 76%,
    #1c1c1c 91%,
    #131313 100%
  ); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(
    top,
    #4c4c4c 0%,
    #595959 12%,
    #666666 25%,
    #474747 39%,
    #2c2c2c 50%,
    #000000 51%,
    #111111 60%,
    #2b2b2b 76%,
    #1c1c1c 91%,
    #131313 100%
  ); /* Opera 11.10+ */
  background: -ms-linear-gradient(
    top,
    #4c4c4c 0%,
    #595959 12%,
    #666666 25%,
    #474747 39%,
    #2c2c2c 50%,
    #000000 51%,
    #111111 60%,
    #2b2b2b 76%,
    #1c1c1c 91%,
    #131313 100%
  ); /* IE10+ */
  background: linear-gradient(
    to bottom,
    #4c4c4c 0%,
    #595959 12%,
    #666666 25%,
    #474747 39%,
    #2c2c2c 50%,
    #000000 51%,
    #111111 60%,
    #2b2b2b 76%,
    #1c1c1c 91%,
    #131313 100%
  ); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */
}

div.vis-color-picker div.vis-new-color {
  position: absolute;
  width: 140px;
  height: 20px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  top: 380px;
  left: 159px;
  text-align: right;
  padding-right: 2px;
  font-size: 10px;
  color: rgba(0, 0, 0, 0.4);
  vertical-align: middle;
  line-height: 20px;
}

div.vis-color-picker div.vis-initial-color {
  position: absolute;
  width: 140px;
  height: 20px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  top: 380px;
  left: 10px;
  text-align: left;
  padding-left: 2px;
  font-size: 10px;
  color: rgba(0, 0, 0, 0.4);
  vertical-align: middle;
  line-height: 20px;
}

div.vis-color-picker div.vis-label {
  position: absolute;
  width: 300px;
  left: 10px;
}

div.vis-color-picker div.vis-label.vis-brightness {
  top: 300px;
}

div.vis-color-picker div.vis-label.vis-opacity {
  top: 338px;
}

div.vis-color-picker div.vis-button {
  position: absolute;
  width: 68px;
  height: 25px;
  border-radius: 10px;
  vertical-align: middle;
  text-align: center;
  line-height: 25px;
  top: 410px;
  border: 2px solid #d9d9d9;
  background-color: #f7f7f7;
  cursor: pointer;
}

div.vis-color-picker div.vis-button.vis-cancel {
  /*border:2px solid #ff4e33;*/
  /*background-color: #ff7761;*/
  left: 5px;
}
div.vis-color-picker div.vis-button.vis-load {
  /*border:2px solid #a153e6;*/
  /*background-color: #cb8dff;*/
  left: 82px;
}
div.vis-color-picker div.vis-button.vis-apply {
  /*border:2px solid #4588e6;*/
  /*background-color: #82b6ff;*/
  left: 159px;
}
div.vis-color-picker div.vis-button.vis-save {
  /*border:2px solid #45e655;*/
  /*background-color: #6dff7c;*/
  left: 236px;
}

div.vis-color-picker input.vis-range {
  width: 290px;
  height: 20px;
}

/* TODO: is this redundant?
div.vis-color-picker input.vis-range-brightness {
  width: 289px !important;
}


div.vis-color-picker input.vis-saturation-range {
  width: 289px !important;
}*/