vue3-ts-picker/dist/vue3-ts-picker.css

Vue3+ts的颜色选择器

.color-picker[data-v-0747681c]{position:relative;width:240px;background:#fff;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:9999;border:1px solid #eee;padding:10px;-webkit-box-sizing:content-box;box-sizing:content-box}.color-picker[data-v-0747681c] .picker-color-bar[data-v-0747681c]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.color-picker[data-v-0747681c] .picker-color-bar[data-v-0747681c] .color-content[data-v-0747681c]{width:24px;height:26px;position:relative;margin-top:4px;margin-right:4px;outline:1px dashed rgba(102,102,102,.12);background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==)}.color-picker[data-v-0747681c] .picker-color-bar[data-v-0747681c] .color-content[data-v-0747681c] .picker-current-color[data-v-0747681c]{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2}.color-picker[data-v-0747681c] .picker-color-bar[data-v-0747681c] .color-slider[data-v-0747681c]{padding:4px 0;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.color-picker[data-v-0747681c] .picker-color-bar[data-v-0747681c] .color-slider[data-v-0747681c] .picker-color-barWraper[data-v-0747681c]{position:relative;height:10px}.color-picker[data-v-0747681c] .picker-color-dropdown__btns[data-v-0747681c]{width:100%;height:25px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;border-bottom:1px solid #eee}.color-picker[data-v-0747681c] .picker-color-dropdown__btns[data-v-0747681c] .picker-color-mode[data-v-0747681c]{margin-left:20px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;cursor:pointer}.color-picker[data-v-0747681c] .picker-color-predefine-box[data-v-0747681c],.color-picker[data-v-0747681c] .picker-color-predefine[data-v-0747681c]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;margin-top:8px}.color-picker[data-v-0747681c] .picker-color-predefine-box[data-v-0747681c] .picker-color-box[data-v-0747681c],.color-picker[data-v-0747681c] .picker-color-predefine-box[data-v-0747681c] .picker-color-title[data-v-0747681c],.color-picker[data-v-0747681c] .picker-color-predefine[data-v-0747681c] .picker-color-box[data-v-0747681c],.color-picker[data-v-0747681c] .picker-color-predefine[data-v-0747681c] .picker-color-title[data-v-0747681c]{width:20px;height:20px;border-radius:2px;cursor:pointer}.color-picker[data-v-0747681c] .picker-color-predefine-box[data-v-0747681c] .picker-color-box[data-v-0747681c],.color-picker[data-v-0747681c] .picker-color-predefine[data-v-0747681c] .picker-color-box[data-v-0747681c]{margin-right:10px;margin-bottom:5px}.color-picker[data-v-0747681c] .picker-color-predefine-box[data-v-0747681c]>div[data-v-0747681c]:nth-child(8n),.color-picker[data-v-0747681c] .picker-color-predefine[data-v-0747681c]>div[data-v-0747681c]:nth-child(8n){margin-right:0}.pickerSvpanel[data-v-0747681c] .picker-color-svpanel[data-v-0747681c]{position:relative;height:180px;cursor:pointer}.pickerSvpanel[data-v-0747681c] .picker-color-svpanel[data-v-0747681c] .picker-color-svpanel__white[data-v-0747681c]{background:-webkit-gradient(linear,left top,right top,from(#fff),to(rgba(255,255,255,0)));background:linear-gradient(90deg,#fff,rgba(255,255,255,0))}.pickerSvpanel[data-v-0747681c] .picker-color-svpanel[data-v-0747681c] .picker-color-svpanel__black[data-v-0747681c]{background:-webkit-gradient(linear,left bottom,left top,from(#000),to(transparent));background:linear-gradient(0deg,#000,transparent)}.pickerSvpanel[data-v-0747681c] .picker-color-svpanel[data-v-0747681c] .picker-color-svpanel__cursor[data-v-0747681c]{position:absolute}.pickerSvpanel[data-v-0747681c] .picker-color-svpanel[data-v-0747681c] .picker-color-svpanel__cursor[data-v-0747681c] .pointer[data-v-0747681c]{width:4px;height:4px;-webkit-box-shadow:0 0 0 1.5px #fff,inset 0 0 1px 1px rgba(0,0,0,.3),0 0 1px 2px rgba(0,0,0,.4);box-shadow:0 0 0 1.5px #fff,inset 0 0 1px 1px rgba(0,0,0,.3),0 0 1px 2px rgba(0,0,0,.4);border-radius:50%;-webkit-transform:translate(-2px,-2px);transform:translate(-2px,-2px)}.pickerSvpanel[data-v-0747681c] .picker-color-svpanel[data-v-0747681c] .picker-com[data-v-0747681c]{position:absolute;top:0;left:0;right:0;bottom:0}.colorBar[data-v-0747681c] .content[data-v-0747681c]{background:-webkit-gradient(linear,left top,right top,color-stop(0,red),color-stop(17%,#ff0),color-stop(33%,#0f0),color-stop(50%,#0ff),color-stop(67%,#00f),color-stop(83%,#f0f),to(red));background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red);position:absolute;top:0;right:0;bottom:0;left:0}.colorBar[data-v-0747681c] .picker-color-content-bar[data-v-0747681c]{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2}.colorBar[data-v-0747681c] .picker-color-content-bar[data-v-0747681c] .bar[data-v-0747681c]{position:absolute;cursor:pointer;-webkit-box-sizing:border-box;box-sizing:border-box;top:0;width:4px;height:100%;border-radius:1px;background:#fff;border:1px solid #f0f0f0;-webkit-box-shadow:0 0 2px rgba(0,0,0,.6);box-shadow:0 0 2px rgba(0,0,0,.6);z-index:1}.colorSlider[data-v-0747681c] .picker-color-alpha-slider[data-v-0747681c]{position:relative;margin-top:4px;height:12px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==)}.colorSlider[data-v-0747681c] .picker-color-alpha-slider[data-v-0747681c] .picker-color-alpha-slider__thumb[data-v-0747681c]{position:absolute;cursor:pointer;-webkit-box-sizing:border-box;box-sizing:border-box;left:0;top:0;width:4px;height:100%;border-radius:1px;background:#fff;border:1px solid #f0f0f0;-webkit-box-shadow:0 0 2px rgba(0,0,0,.6);box-shadow:0 0 2px rgba(0,0,0,.6);z-index:1}.colorSlider[data-v-0747681c] .picker-color-alpha-slider[data-v-0747681c] .picker-color-alpha-slider__bar[data-v-0747681c]{position:absolute;top:0;right:0;bottom:0;left:0}