File: assets/colorpicker/colorpicker.css

Recommend this page to a friend!
  Classes of Nikos M.  >  PHP Widget Library for HTML Pages  >  assets/colorpicker/colorpicker.css  >  Download  
File: assets/colorpicker/colorpicker.css
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: PHP Widget Library for HTML Pages
Generate HTML and JavaScript to show Web page widg
Author: By
Last change: v.2.1.1

* color input and color icon on input
* dark theme css
* update colorpicker assets
* update examples
Date: 1 month ago
Size: 13,661 bytes
 

Contents

Class file image Download
.colorpicker-selector{position:relative;z-index:1;display:inline-block;vertical-align:bottom;cursor:pointer;width:24px;height:24px;background-image:url(images/colorpicker_transparent.jpg);background-repeat:repeat;background-position:0 0;background-color:#fff;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;-o-border-radius:4px;border:none;border-radius:4px;padding:0;margin:2px 4px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box}.colorpicker-selector:before{position:absolute;display:block;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box;content:" ";padding:0;margin:0;top:0;left:0;bottom:0;right:0;z-index:2;background-image:none;background-color:inherit;border:2px solid rgba(127,127,127,.5);border-radius:inherit}.colorpicker-selector:after{position:absolute;display:block;z-index:3;width:8px;height:8px;text-align:center;line-height:8px;font-size:8px;background:none;bottom:0;right:0;background-color:rgba(127,127,127,.5);-webkit-border-radius:1px;-moz-border-radius:1px;-ms-border-radius:1px;-o-border-radius:1px;border-radius:1px;content:"\25BE";color:rgba(0,0,0,.8);text-shadow:0 1px 1px rgba(127,127,127,.3)}.colorpicker-selector:focus,.colorpicker-selector:active,.colorpicker-selector:hover{outline:0!important}:focus>.colorpicker-selector:before,:focus+.colorpicker-selector:before,.colorpicker-selector:focus:before,.colorpicker-selector:active:before,.colorpicker-selector:hover:before{border-color:rgba(255,255,255,.5)}:focus>.colorpicker-selector:after,:focus+.colorpicker-selector:after,.colorpicker-selector:focus:after,.colorpicker-selector:active:after,.colorpicker-selector:hover:after{background-color:rgba(255,255,255,.5)}.colorpicker{position:absolute;padding:0;margin:3px;overflow:hidden;z-index:1000;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box;background:#fff;color:#121212;border-width:1px;border-style:solid;border-color:transparent;border-radius:4px;font-family:Arial,Helvetica,sans-serif;width:343px;height:195px;max-height:195px;display:none;opacity:1}.colorpicker.visible,.colorpicker.colorpicker-visible{display:block;box-shadow:0 0 7px 2px rgba(0,0,0,.3)!important}.colorpicker.flat,.colorpicker.colorpicker-flat{position:relative;max-height:195px;opacity:1;display:block!important;-webkit-transition:none!important;-moz-transition:none!important;-ms-transition:none!important;-o-transition:none!important;transition:none!important}.colorpicker.colorpicker-transition-fade{display:block;max-height:0;opacity:0;box-shadow:0 0 0 0 rgba(0,0,0,.3);-webkit-transition:opacity .15s ease-out 0s,max-height 0s linear .2s;-moz-transition:opacity .15s ease-out 0s,max-height 0s linear .2s;-ms-transition:opacity .15s ease-out 0s,max-height 0s linear .2s;-o-transition:opacity .15s ease-out 0s,max-height 0s linear .2s;transition:opacity .15s ease-out 0s,max-height 0s linear .2s}.colorpicker.visible.colorpicker-transition-fade,.colorpicker.colorpicker-visible.colorpicker-transition-fade{max-height:195px;opacity:1;-webkit-transition:max-height 0s linear 0s,opacity .15s ease-out .05s;-moz-transition:max-height 0s linear 0s,opacity .15s ease-out .05s;-ms-transition:max-height 0s linear 0s,opacity .15s ease-out .05s;-o-transition:max-height 0s linear 0s,opacity .15s ease-out .05s;transition:max-height 0s linear 0s,opacity .15s ease-out .05s}.colorpicker.colorpicker-transition-slide{display:block;max-height:0;opacity:1;box-shadow:0 0 0 0 rgba(0,0,0,.3);-webkit-transition:max-height .15s ease;-moz-transition:max-height .15s ease;-ms-transition:max-height .15s ease;-o-transition:max-height .15s ease;transition:max-height .15s ease}.colorpicker.visible.colorpicker-transition-slide,.colorpicker.colorpicker-visible.colorpicker-transition-slide{max-height:195px;-webkit-transition:max-height .15s ease;-moz-transition:max-height .15s ease;-ms-transition:max-height .15s ease;-o-transition:max-height .15s ease;transition:max-height .15s ease}.colorpicker_satur_bright{display:block;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box;padding:0;margin:0;width:150px;height:150px;left:2px;top:3px;position:absolute;background-color:transparent;background-image:url(images/colorpicker_sprites.png);background-repeat:no-repeat;background-position:0 0;border:1px solid #474747;border-radius:2px;overflow:hidden;cursor:crosshair}.colorpicker_satur_bright div{display:block;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box;border:2px solid rgba(255,255,255,.8);border-radius:50%;background:transparent;box-shadow:0 0 1px 0 rgba(0,0,0,.8);position:absolute;padding:0;margin:0;top:0;left:0;margin-top:-5px;margin-left:-5px;width:10px;height:10px;overflow:hidden;-webkit-pointer-events:none;pointer-events:none}.colorpicker_hue{display:block;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box;border:none;position:absolute;overflow:visible;padding:0;margin:0;top:1px;left:162px;width:21px;height:154px;cursor:n-resize;background:url(images/colorpicker_sprites.png) no-repeat right 0;z-index:1}.colorpicker_hue .colorpicker_indic{display:block;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box;border:none;position:absolute;padding:0;font-size:9px;color:#555;width:100%;height:9px;overflow:visible;left:0;margin:0;-webkit-pointer-events:none;pointer-events:none;color:inherit}.colorpicker_hue .colorpicker_indic:before{display:block;position:absolute;padding:0;margin:0;content:"\25ba";text-shadow:0 0 1px rgba(255,255,255,.5);left:-9px;top:-4px;color:inherit}.colorpicker_hue .colorpicker_indic:after{display:block;position:absolute;padding:0;margin:0;content:"\25c0";text-shadow:0 0 1px rgba(255,255,255,.5);right:-9px;top:-5px;color:inherit}.colorpicker_opacity{display:block;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box;border:2px solid #666;position:absolute;overflow:visible;padding:0;margin:0;top:162px;left:2px;width:150px;height:21px;cursor:w-resize;background:transparent url(images/colorpicker_transparent.jpg) repeat 0 0;z-index:1}.colorpicker_opacity .colorpicker_opacity_transparent{display:block;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box;position:absolute;overflow:hidden;border:0;padding:0;margin:0;top:0;left:0;width:100%;height:100%;background-color:transparent;background-image:linear-gradient(-90deg,rgba(120,120,120,0) 0,rgba(120,120,120,1) 100%)}.colorpicker_opacity .colorpicker_indic{display:block;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box;border:none;position:absolute;padding:0;font-size:9px;color:#555;width:12px;height:100%;overflow:visible;left:0;margin:0;-webkit-pointer-events:none;pointer-events:none;color:inherit}.colorpicker_opacity .colorpicker_indic:before{display:block;position:absolute;padding:0;margin:0;content:"\25BC";text-shadow:0 0 1px rgba(255,255,255,.5);top:-11px;left:-5px;color:inherit}.colorpicker_opacity .colorpicker_indic:after{display:block;position:absolute;padding:0;margin:0;content:"\25B2";text-shadow:0 0 1px rgba(255,255,255,.5);bottom:-11px;left:-5px;color:inherit}.colorpicker_transparent{background:transparent url(images/colorpicker_transparent.jpg) repeat 0 0;overflow:hidden}.colorpicker_transparent>.colorpicker_color{position:absolute;display:block;padding:0;margin:0;top:0;left:0;width:100%;height:100%;z-index:2;background-image:none;background-repeat:no-repeat;background-position:0 0;background-color:none;cursor:pointer}.colorpicker_new_color{position:absolute;padding:0;margin:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box;width:62px;height:32px;left:198px;top:3px;border:2px solid #474747;border-radius:2px;cursor:pointer}.colorpicker_current_color{position:absolute;padding:0;margin:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box;width:62px;height:32px;left:275px;top:3px;border:2px solid #474747;border-radius:2px;cursor:pointer}.colorpicker input{background-color:transparent;border:1px solid transparent;position:absolute;font-size:10px;font-family:Arial,Helvetica,sans-serif;color:inherit;top:5px;right:13px;text-align:right;margin:0;padding:0;height:11px;z-index:2}.colorpicker button:active,.colorpicker button:hover,.colorpicker button:focus,.colorpicker input:active,.colorpicker input:hover,.colorpicker input:focus,.colorpicker button,.colorpicker input{border:none!important;outline:0!important}.colorpicker_field{position:absolute;display:block;padding:0;margin:0;background:none;height:22px;width:62px}.colorpicker_field>.colorpicker_field_back{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box;border:none;position:absolute;display:block;padding:0;margin:0;overflow:hidden;top:0;left:0;bottom:0;right:0;background-color:transparent;background-image:none;background-repeat:no-repeat;background-position:0 0}.colorpicker_field>input+span{position:absolute;width:12px;height:22px;overflow:hidden;top:0;right:0;cursor:n-resize;z-index:2}[data-field="opacity"].colorpicker_field{left:198px;top:132px}[data-field="opacity"].colorpicker_field>.colorpicker_field_back{background-position:0 -66px}[data-field="opacity"].colorpicker_field>input:focus ~ .colorpicker_field_back{background-position:0 -88px}[data-field="opacity"].colorpicker_field.colorpicker_slider>.colorpicker_field_back{background-position:0 -110px}[data-field="hex"].colorpicker_field{width:72px;height:22px;left:266px;top:132px}[data-field="hex"].colorpicker_field>input{right:6px}[data-field="hex"].colorpicker_field>.colorpicker_field_back{background-position:-372px 0}[data-field="hex"].colorpicker_field>input:focus ~ .colorpicker_field_back{background-position:-372px -22px}[data-field="rgb.0"].colorpicker_field{top:42px;left:198px}[data-field="rgb.0"].colorpicker_field>.colorpicker_field_back{background-position:0 0}[data-field="rgb.0"].colorpicker_field>input:focus ~ .colorpicker_field_back{background-position:0 -22px}[data-field="rgb.0"].colorpicker_field.colorpicker_slider>.colorpicker_field_back{background-position:0 -44px}[data-field="rgb.1"].colorpicker_field{top:72px;left:198px}[data-field="rgb.1"].colorpicker_field>.colorpicker_field_back{background-position:-62px 0}[data-field="rgb.1"].colorpicker_field>input:focus ~ .colorpicker_field_back{background-position:-62px -22px}[data-field="rgb.1"].colorpicker_field.colorpicker_slider>.colorpicker_field_back{background-position:-62px -44px}[data-field="rgb.2"].colorpicker_field{top:102px;left:198px}[data-field="rgb.2"].colorpicker_field>.colorpicker_field_back{background-position:-124px 0}[data-field="rgb.2"].colorpicker_field>input:focus ~ .colorpicker_field_back{background-position:-124px -22px}[data-field="rgb.2"].colorpicker_field.colorpicker_slider>.colorpicker_field_back{background-position:-124px -44px}[data-field="hsb.0"].colorpicker_field{top:42px;left:275px}[data-field="hsb.0"].colorpicker_field>.colorpicker_field_back{background-position:-186px 0}[data-field="hsb.0"].colorpicker_field>input:focus ~ .colorpicker_field_back{background-position:-186px -22px}[data-field="hsb.0"].colorpicker_field.colorpicker_slider>.colorpicker_field_back{background-position:-186px -44px}[data-field="hsb.1"].colorpicker_field{top:72px;left:275px}[data-field="hsb.1"].colorpicker_field>.colorpicker_field_back{background-position:-248px 0}[data-field="hsb.1"].colorpicker_field>input:focus ~ .colorpicker_field_back{background-position:-248px -22px}[data-field="hsb.1"].colorpicker_field.colorpicker_slider>.colorpicker_field_back{background-position:-248px -44px}[data-field="hsb.2"].colorpicker_field{top:102px;left:275px}[data-field="hsb.2"].colorpicker_field>.colorpicker_field_back{background-position:-310px 0}[data-field="hsb.2"].colorpicker_field>input:focus ~ .colorpicker_field_back{background-position:-310px -22px}[data-field="hsb.2"].colorpicker_field.colorpicker_slider>.colorpicker_field_back{background-position:-310px -44px}.colorpicker_submit{position:absolute;width:22px;height:22px;background-image:none;background-color:transparent;background-position:top right;background-repeat:no-repeat;left:315px;top:161px;overflow:hidden;cursor:pointer}.colorpicker_submit:focus,.colorpicker_submit:hover,.colorpicker_submit:active{background-position:-22px right}.colorpicker.colorpicker-light,.colorpicker{background:#fafafa;border-color:#adadad;color:#121212}.colorpicker.colorpicker-light .colorpicker_field>.colorpicker_field_back,.colorpicker .colorpicker_field>.colorpicker_field_back,.colorpicker.colorpicker-light .colorpicker_submit,.colorpicker .colorpicker_submit{background-image:url(images/colorpicker_light_fields.png)}.colorpicker.colorpicker-dark{background:#343434;border-color:#454545;color:#efefef}.colorpicker.colorpicker-dark .colorpicker_field>.colorpicker_field_back,.colorpicker.colorpicker-dark .colorpicker_submit{background-image:url(images/colorpicker_dark_fields.png)}
For more information send a message to info at phpclasses dot org.