Просмотр архива jColor

.colorpicker {
  -webkit-touch-callout: none;
  -webkit-user-select: none;

 -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
 
display: inline-block;
  font-size: 15px;
  width: 2.8em;
  height: 2.8em;

 -webkit-perspective: 25em;
  perspective: 25em;
  position: relative;
 
transition: transform 0.5s;
  font-family: monospace;
}

.colorpicker
.maximize-wrapper {
  position: absolute;
  border-radius: 0.3em;
 
background: white;
  padding: 0.4em;
  box-shadow: 0 0.1em 0.2em
rgba(0,0,0,0.2);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;

 cursor: pointer;
}

.colorpicker.expanded .maximize-wrapper {
  cursor:
default;
}

.colorpicker .inner-maximize-wrapper {
  position: relative;
 
width: 2em;
  height: 2em;
  overflow: hidden;
  transition: height 0.5s,
width 0.5s;
}

.colorpicker .ui-wrapper {
  white-space: nowrap;
  display:
inline-block;
}

.colorpicker .ui-wrapper > * {
  display:
inline-block;
  vertical-align: top;
}

.colorpicker .display-wrapper {
 
margin-right: 0.4em;
  background-size: 41%;
  -webkit-transform-origin:
top left;
  transform-origin: top left;
  transition: transform
0.5s;
}

.colorpicker.componentcount-3 .display-wrapper {
 
-webkit-transform: scale(0.6);
  transform:
scale(0.6);
}

.colorpicker.componentcount-4 .display-wrapper {
 
-webkit-transform: scale(0.45);
  transform:
scale(0.45);
}

.colorpicker.expanded .display-wrapper {
 
-webkit-transform: scale(1);
  transform: scale(1);
}

.colorpicker
.slider.a:before,
.colorpicker .display-wrapper {
  background-image:
url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyIiBoZWlnaHQ9IjIiPjxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjEiIHg9IjAiIHk9IjAiIHN0eWxlPSJmaWxsOiNjYWNhY2EiIC8+PHJlY3Qgd2lkdGg9IjEiIGhlaWdodD0iMSIgeD0iMSIgeT0iMSIgc3R5bGU9ImZpbGw6I2NhY2FjYSIgLz48L3N2Zz4=);
}

.colorpicker.componentcount-3
.display-wrapper {
  width: 3.4em;
  height:
3.4em;
}

.colorpicker.componentcount-4 .display-wrapper {
  width: 4.6em;

 height: 4.6em;
}

.colorpicker .display {
  width: 100%;
  height: 100%;
 
box-shadow: 0 0.1em 0.15em 0 rgba(0, 0, 0, 0.2) inset;
}

.colorpicker
.slider-container {
  opacity: 0;
  transition: transform 0.5s, opacity
0.5s;
}

.colorpicker.componentcount-3 .slider-container {
 
-webkit-transform: translateX(-1.4em);
  transform:
translateX(-1.4em);
}

.colorpicker.componentcount-4 .slider-container {
 
-webkit-transform: translateX(-2.6em);
  transform:
translateX(-2.6em);
}

.colorpicker.expanded .slider-container {
  opacity:
1;
  -webkit-transform: translateX(0%);
  transform:
translateX(0%);
}

.colorpicker .slider {
  box-sizing: border-box;
 
position: relative;
  display: block;
  width: 12em;
  height: 1em;
 
background: rgba(128, 128, 128, 0.12);
  box-shadow: 0 0.1em 0.15em 0
rgba(0, 0, 0, 0.2) inset;
  overflow: hidden;
  margin-bottom: 0.2em;
 
cursor: col-resize;
}

.colorpicker .slider.a:before {
  content: '';
 
position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
 
background-position: left center;
  background-size: auto 27%;
  z-index:
-1;
}

.colorpicker.show-labels .slider .handle:after {
  content:
attr(data-component);
  text-transform: uppercase;
  position: absolute;
 
left: 100%;
  color: white;
  font-size: 0.8em;
  top: 0.2em;
 
margin-left: 0.2em;
  text-shadow:  1px  0   0 rgba(0,0,0,0.25),
          
    -1px  0   0 rgba(0,0,0,0.25),
                0    1px 0
rgba(0,0,0,0.25),
                0   -1px 0
rgba(0,0,0,0.25);
}

.colorpicker .slider:last-child {
  margin-bottom:
0em;
}

.colorpicker .slider .handle {
  display: inline-block;
  position:
relative;
  content: '';
  margin-top: -0.1em;
  margin-left: -0.2em;
 
width: 0.4em;
  height: 100%;
  padding-bottom: 0.2em;
  background:
rgba(255, 255, 255, 0.6);
  box-shadow: 0 0.1em 0.2em 0 rgba(0, 0, 0, 0.3),
0 0 0.3em 0.1em white inset, 0 0 0 0.1em white inset;
  pointer-events:
none;
  z-index: 1;
}

.colorpicker .slider,
.colorpicker
.display,
.colorpicker .inner-maximize-wrapper,
.colorpicker
.display-wrapper {
  border-radius: 0.2em;
}

.colorpicker .output-wrapper
{
  font-size: 0.8em;
  height: 1.2em;
  margin-top: 0.4em;
  color: #333;

 -webkit-touch-callout: text;
  -webkit-user-select: text;
 
-moz-user-select: text;
  -ms-user-select: text;
  user-select:
text;
}

body.colorpicker-modal * {
  pointer-events:
none;
}

body.colorpicker-modal .colorpicker * {
  pointer-events: all;
}