color-gradient-picker-vue3
Version:
A modern color and gradient picker component for Vue 3 with TypeScript support
2 lines (1 loc) • 15.5 kB
CSS
@font-face{font-family:iconfont;src:url(data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAWsAAsAAAAACsQAAAVdAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACDVgqIEIcCATYCJAMcCxAABCAFhGcHWRthCciOkcvLsvLHyrH6edy095NgCaJt55kYq4jTiQdo50ig1A/SiYY7D3eOTM0oZ8rOHYJsuObYCxojcBjZFF241uJLlzikRiji0e3/j3uVs/wHcD3LdJt72adobFIwVFxjivcqUOY+wDMMVDfvAwgAKVM5rNYYx4ByPeA6oDdCMIxAXYrWC7cNpLoeMUNEpCqxdN8M6A4igN2w2wDwWv7z6B+ykxQAIwoITjJpWueE8/E+3/hwPsED/AXpECC4PgZABAAHkHpkRnSat8+Hl9LUXE6O/Q1hHAA5KQzx7hsfGDc/Wf6NL5Eg3qclDpKInDJsBMDgRIgz++ehIpBcjoRGrdg1FMQ0gIF4XxrAQXwgDYhA3EwDBHiynAYQ+MangKuKk2ysBJAEUA2gBxByszFiiCjNxMoig0GjCL5TShApJKlLVihkMp1+ETM5tGL59s1bkyzOoJ4J7ky2RpLdlvC6XccMk627YtEH0cdznIzVvShgjoYIzzxGBEsP4rfGdGahLeNHZQGU+XFJJhCN8o8f9wg4rRY+Gg3EYv6eGYlQ3s4fi1UJx3fze04ETu3z7z1pnbfrwQhu+0M3hZHT4xdJ/p2kXNgOQKIyf4ZSBM4hEYXs1whFBUIA8sVl++QL7UQixYKSEA5HkhdFtm1ZoZ+vCYT4oJ0UwskR5O+xhFeu2mY4vGrg9cHgdCHsPz/uLPdMMyghyRL2N7QG8+KTWYWz/nOBM/xpi7CZ3xLY5t+6SC3MmCjV/DKhYJCL+JMsqkDqCZNqoSkNjVwvkPf0kKZptSsWtuYc3bai3nT6tLnr2ZQLg/qmPCthnOVNpu/JD9Z/zzQ1vVilDrWgTo9dUn70qLqxUXX0GNBhOnjKXCUlrjLPnxEnm+8q8ZT92Vt2UWHbjLym3NymvBlvE4c4FaeJ/rZZ0TraGjZbwnuj7cOWvTCm0mA0NqSO3Z86xjiaOby8tbBhocm04E3TwoX1bxAn45TLLVhoanjKWDdiZB1DSN1IRoD1IyK9b6zOXX0jN62BB6/27//dqQ8TNlj3Az2JXjcxu/OHOYpBCjpmn/PMnJPZ29z7PJezEhWSFyUfo7dSZ2dKtn7JjT6Gwm7JeMm1mf1r0z5rc1cpCHflUHUS9b3h+9xb/ZIfkXJNy4yTTEX3kPPV3dPrcti8lnk6pezbwXmSHSpm7mFUK1S1C0+tXdIg1J5EtaP6ud5MnjmvLq+293RKlaJKjreDov4oo+yW9pbsj+eeZ7XFsuYdO2tSx26dN4TVsj35H8MZRsnWsak12k3NWlgKACBxMJ7BcYDE8biONwAAvFm4rZB+DB5Xb3wl1uEsSCRiN46+5uvB2Ycz+s1Wlf4mpT76I5/daxmX+xIHM8j5X1MFOPwvtWKGEJVwAwCSPNY/5pNTwv72RzEAZDgA8D12a324PaVOLIf/jVJXA0aiD+CkBmEIghFEKNkgJlUGpFHqDqbodMGhLAOAYZ4BQNR2AEbpBODUrmEIQgxEkjwBMbX/gGRJiuNRhiVH1cvaONZJ2xfQHkdnhytScfmiU1h3d5vNOxSxsF6fB0N0VnpmN2ViO1jvJnbwzXVnc5yLdnk72+l69WJsW1sn3eXtbGEdXHozx3UVZ2S4xt4k3dHZDjW8WDYclhPNbgGah0OnDq4UnWv/vilYbt3a2HiFGIvVy8c8WpyWJV2mAGOSd4h6Hkm1z1xu2TiKutBcWnGndrT69aystjDeidY1vlYLlgMnXfMa0S7FMgjNJZWn71/Z/iDPAEAKnlOSMIQjAomQGEmQFIjNwseKvQOnx9Ymblt0sDav2DlpYzkWz1ZzS9iNo9nmZgEAAAAA) format("woff2"),url(iconfont.woff?t=1739176396764) format("woff"),url(iconfont.ttf?t=1739176396764) format("truetype")}.iconfont{font-family:iconfont;font-size:16px;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.cpg-xise:before{content:""}.cpg-radial:before{content:""}.cpg-linear:before{content:""}.cpg-delete:before{content:""}.cpg-deg:before{content:""}.cpg-exchage:before{content:""}.cpg-box{-webkit-box-shadow:0 0 6px rgba(0,0,0,.25);box-shadow:0 0 6px #00000040;min-width:320px;position:relative;z-index:100;box-sizing:border-box;border-radius:8px;--un-bg-opacity:1;background-color:rgb(255 255 255 / var(--un-bg-opacity));padding:8px;--un-text-opacity:1;color:rgb(50 49 54 / var(--un-text-opacity))}.cpg-box .cpg-picker-wrap,.cpg-box .cpg-picker-wrap .cpg-picker-area{overflow:hidden;border-radius:6px}.cpg-box .cpg-gradient-controls-wrapper{margin-top:12px;box-sizing:border-box;border-radius:4px;--un-bg-opacity:1;background-color:rgb(233 233 245 / var(--un-bg-opacity));padding:4px;font-size:12px}.cpg-box .cpg-gradientBar-warp{position:relative;margin-top:14px;height:14px}.cpg-box .cpg-gradientBar-warp .cpg-gradientBar{height:100%;border-radius:10px}.cpg-box .cpg-hue-wrap{position:relative;margin-top:14px;height:14px}.cpg-box .cpg-hue-wrap .cpg-hue-colors{position:relative;width:100%;border-radius:14px;vertical-align:top}.cpg-box .cpg-inputs-wrap{margin-top:14px;box-sizing:border-box;display:flex;-webkit-user-select:none;user-select:none;align-items:center;justify-content:space-between;overflow:hidden}.cpg-box .cpg-inputs-wrap .cpg-inputItem-wrap{text-align:center;font-size:12px}.cpg-box .cpg-inputs-wrap .cpg-inputItem-wrap .cpg-input{box-sizing:border-box;height:32px;width:100%;border-width:1px;--un-border-opacity:1;border-color:rgb(190 190 190 / var(--un-border-opacity));border-radius:6px;border-style:solid;padding:2px;text-align:center;--un-text-opacity:1;color:rgb(0 0 0 / var(--un-text-opacity));font-weight:400;outline:2px solid transparent;outline-offset:2px}.cpg-box .cpg-inputs-wrap .cpg-inputItem-wrap .cpg-input-label{--un-text-opacity:1;color:rgb(86 86 86 / var(--un-text-opacity));font-weight:700}.cpg-box .cpg-opacity-wrap{position:relative;margin-top:14px;box-sizing:border-box;width:100%;height:14px}.cpg-box .cpg-opacity-wrap .cpg-opacity-bar{background:linear-gradient(45deg,rgba(0,0,0,.18) 25%,transparent 0,transparent 75%,rgba(0,0,0,.18) 0,rgba(0,0,0,.18) 0),linear-gradient(45deg,rgba(0,0,0,.18) 25%,transparent 0,transparent 75%,rgba(0,0,0,.18) 0,rgba(0,0,0,.18) 0),#fff;background-clip:border-box,border-box;background-origin:padding-box,padding-box;background-position:0 0,7px 7px;background-repeat:repeat,repeat;background-size:14px 14px,14px 14px;-webkit-transition:none;transition:none;-webkit-box-shadow:none;box-shadow:none;text-shadow:none;-webkit-transform:scaleX(1) scaleY(1) scaleZ(1);transform:scaleX(1) scaleY(1) scaleZ(1);-webkit-transform-origin:0 0 0;transform-origin:0 0 0;width:100%;height:14px;border-radius:10px}.cpg-box .cpg-opacity-wrap .cpg-opacity-color{position:absolute;left:0;top:0;box-sizing:border-box;width:100%;height:14px;overflow:hidden;border-radius:10px}.cpg-box .cpg-controls-wrapper{margin-top:4px;display:flex;align-items:center;justify-content:space-between}.cpg-box .cpg-controls-wrapper .cpg-controls-item{-webkit-box-shadow:1px 1px 3px transparent;box-shadow:1px 1px 3px transparent;box-sizing:border-box;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;border-radius:4px;--un-bg-opacity:1;background-color:rgb(233 233 245 / var(--un-bg-opacity));padding:4px;font-size:12px;--un-text-opacity:1;color:rgb(86 86 86 / var(--un-text-opacity))}.cpg-box .cpg-controls-wrapper .cpg-controls-item .cpg-controls-item-btn{-webkit-transition:all .16s ease;transition:all .16s ease;position:relative;height:24px;display:flex;align-items:center;justify-content:center;border-radius:4px;padding-left:8px;padding-right:8px}.cpg-box .cpg-controls-wrapper .cpg-controls-item .cpg-controls-item-btn .cpg-controls-inputType{-webkit-box-shadow:1px 1px 14px 1px rgba(0,0,0,.25);box-shadow:1px 1px 14px 1px #00000040;-webkit-transition:opacity .12s linear,visibility linear,z-index linear;transition:opacity .12s linear,visibility linear,z-index linear;visibility:visible;position:absolute;right:-2px;top:34px;z-index:1000;box-sizing:border-box;border-radius:6px;--un-bg-opacity:1;background-color:rgb(233 233 245 / var(--un-bg-opacity));padding:5px;opacity:1}.cpg-box .cpg-controls-wrapper .cpg-controls-item .cpg-controls-item-btn .cpg-controls-inputType .cpg-control-inputType-item{-webkit-transition:all .16s ease;transition:all .16s ease;height:24px;display:flex;align-items:center;justify-content:center;border-radius:4px;padding-left:8px;padding-right:8px;font-size:12px;font-weight:700;line-height:.25rem}.cpg-box .cpg-controls-wrapper .cpg-controls-item .cpg-controls-item-btn .cpg-controls-inputType .cpg-control-inputType-item-active{-webkit-box-shadow:1px 1px 3px rgba(0,0,0,.2);box-shadow:1px 1px 3px #0003;--un-bg-opacity:1;background-color:rgb(255 255 255 / var(--un-bg-opacity));--un-text-opacity:1;color:rgb(86 140 245 / var(--un-text-opacity))}.cpg-box .cpg-controls-wrapper .cpg-controls-item .cpg-controls-item-btn .cpg-controls-hideInputType{-webkit-transition:opacity .15s linear 50ms,visibility .1s linear .15s,z-index .1s linear .15s;transition:opacity .15s linear 50ms,visibility .1s linear .15s,z-index .1s linear .15s;z-index:-100;opacity:0}.cpg-box .cpg-controls-wrapper .cpg-control-active{--un-bg-opacity:1;background-color:rgb(255 255 255 / var(--un-bg-opacity));--un-text-opacity:1;color:rgb(86 140 245 / var(--un-text-opacity))}.cpg-box .cpg-gradient-controls-wrapper{width:100%;height:28px;display:flex;align-items:center;justify-content:space-between}.cpg-box .cpg-gradient-controls-wrapper .cpg-deg-input{height:24px;width:28px;border-style:none;background-color:transparent;font-size:12px;--un-text-opacity:1;color:rgb(50 49 54 / var(--un-text-opacity));font-weight:500;outline:2px solid transparent;outline-offset:2px}.cpg-box .cpg-gradient-controls-wrapper .cpg-gradient-btn{box-sizing:border-box;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:4px;padding:4px 8px}.cpg-box .cpg-gradient-controls-wrapper .cpg-gradient-btn-active{-webkit-box-shadow:1px 1px 3px rgba(0,0,0,.2);box-shadow:1px 1px 3px #0003;-webkit-transition:all .16s ease;transition:all .16s ease;--un-bg-opacity:1;background-color:rgb(255 255 255 / var(--un-bg-opacity));--un-text-opacity:1;color:rgb(86 140 245 / var(--un-text-opacity))}.cpg-box .cpg-preview-wrap{margin-top:14px;width:100%;display:flex;-webkit-user-select:none;user-select:none;align-items:center;justify-content:space-between}.cpg-box .cpg-preview-wrap .cpg-preview-color{box-sizing:border-box;width:50px;height:50px;flex-shrink:0;border-radius:6px}.cpg-box .cpg-preview-wrap .cpg-preview-presetColor{margin-left:12px;height:50px;display:flex;flex:1 1 0%;flex-wrap:wrap;justify-content:flex-start}.cpg-box .cpg-preview-wrap .cpg-preview-presetColor .cpg-preview-presetItem{margin-left:2px;margin-bottom:2px;box-sizing:border-box;width:10.2%;height:24px;cursor:pointer;border-radius:4px}.cpg-box .cpg-advance-wrap{-webkit-transition:.12s linear;transition:.12s linear;margin-top:12px;width:100%;height:80px;-webkit-user-select:none;user-select:none}.cpg-box .cpg-advance-wrap .cpg-advance-item{position:relative;margin-top:8px;box-sizing:border-box;width:100%}.cpg-box .cpg-advance-wrap .cpg-advance-item .cpg-advance-text{text-shadow:rgba(0,0,0,.6) 1px 1px 1px;position:absolute;left:50%;top:50%;z-index:1;--un-translate-y:-50%;--un-translate-x:-50%;transform:translate(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotate(var(--un-rotate-z)) skew(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));text-align:center;font-size:12px;--un-text-opacity:1;color:rgb(255 255 255 / var(--un-text-opacity))}.cpg-box .cpg-advance-wrap .cpg-advance-item .cpg-advance-canvas{position:relative;border-radius:14px}.cpg-box .cpg-pointer{-webkit-transition:all 10ms linear;transition:all 10ms linear;-webkit-box-shadow:0 0 3px rgba(0,0,0,.5);box-shadow:0 0 3px #00000080;position:absolute;left:0;top:-2px;z-index:10;box-sizing:border-box;width:18px;height:18px;border-width:2px;--un-border-opacity:1;border-color:rgb(255 255 255 / var(--un-border-opacity));border-radius:50%;border-style:solid}.cpg-box .cpg-pointer-centerPoint:after{content:"";position:absolute;left:50%;top:50%;display:inline-block;width:5px;height:5px;--un-translate-x:-50%;--un-translate-y:-50%;transform:translate(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotate(var(--un-rotate-z)) skew(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));border-radius:50%;--un-bg-opacity:1;background-color:rgb(255 255 255 / var(--un-bg-opacity))}.cpg-box .cpg-cursor-pointer{cursor:pointer}*,:before,:after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / .5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }::-ms-backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / .5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / .5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }.absolute{position:absolute}.relative{position:relative}.\!top-1px{top:1px}.right-0{right:0}.top-4px{top:4px}.flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.cursor-not-allowed{cursor:not-allowed}.items-center{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.justify-start{-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start}.justify-end{-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end}.b,.border{border-width:1px}.px{padding-left:1rem;padding-right:1rem}.text-right{text-align:right}.text-12px{font-size:12px}.text-14px{font-size:14px}.text-\#568cf5{--un-text-opacity:1;color:rgb(86 140 245 / var(--un-text-opacity))}.text-\#ccc{--un-text-opacity:1;color:rgb(204 204 204 / var(--un-text-opacity))}.font-400{font-weight:400}