@radial-color-picker/vue-color-picker/dist/vue-color-picker.min.css

Radial Color Picker - Vue

.rcp,.rcp *,.rcp *:before{-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-sizing:border-box;border-radius:50%}.rcp,.rcp__knob,.rcp__ripple,.rcp__well{aspect-ratio:1}.rcp{display:flex;align-items:center;justify-content:center;width:280px;position:relative;transform:scale(1.001);transition:transform .15s cubic-bezier(.68,0,.47,2)}.rcp:focus{outline:0}.rcp:hover .rcp__knob{box-shadow:0 0 20px #00000030,0 0 10px #0000003d}.rcp[aria-expanded=false]{pointer-events:none}.rcp[aria-expanded=false] .rcp__well{pointer-events:auto}.rcp:active:focus{transform:scale(1.04)}.rcp[aria-disabled=true]{cursor:not-allowed;transform:scale(.96)}.rcp__palette{position:absolute;top:0;right:0;bottom:0;left:0;background-size:100% 100%;background-image:conic-gradient(red,#ff0,#0f0,#0ff,#00f,#f0f,red);-webkit-mask-image:radial-gradient(circle at 50% 50%,transparent 53.5%,black 54%);mask-image:radial-gradient(circle at 50% 50%,transparent 53.5%,black 54%);will-change:transform,opacity;transition:transform .5s cubic-bezier(.35,0,.25,1),opacity .5s cubic-bezier(.35,0,.25,1);transform:scale(1);opacity:1}.rcp[aria-expanded=false] .rcp__palette{transform:scale(0);opacity:0}.rcp[aria-disabled=true] .rcp__palette{filter:contrast(.25)}.rcp__rotator{position:absolute;top:0;right:0;bottom:0;left:0;transform:rotate(var(--rcp-initial-angle))}.rcp__knob{box-shadow:0 0 10px #0000001f,0 0 5px #00000029;width:7%;margin-top:2.5%;margin-inline:auto;background-color:#fff;transition:transform .4s cubic-bezier(.35,0,.25,1);outline:0;border-style:none}.rcp__knob.in{transform:scale(1)}.rcp__knob.out{transform:scale(0)}.rcp[aria-disabled=true] .rcp__knob{box-shadow:none;pointer-events:none}.rcp__well{width:25%;padding:0;margin:0;background-color:red;outline:0;cursor:pointer;border:1px solid #b2b2b2;z-index:1;position:relative}.rcp__well:before{content:"";position:absolute;display:block;top:0;right:0;bottom:0;left:0;border:6px solid #fff}.rcp__well::-moz-focus-inner{border:0}.rcp:focus-visible .rcp__knob,.rcp__well:focus-visible{box-shadow:0 0 0 2px #a0aec099}.rcp__well:hover{border-color:#6b7280}.rcp__well.pressed{animation:rcp-beat .4s cubic-bezier(.35,0,.25,1) forwards}.rcp[aria-disabled=true] .rcp__well{background-color:#bfbfbf!important;pointer-events:none}.rcp__ripple{width:20%;opacity:1;position:absolute;border:8px solid #ff0000}.rcp__ripple.rippling{animation:rcp-ripple .5s cubic-bezier(.35,0,.25,1) forwards}@keyframes rcp-ripple{0%{transform:scale(1);opacity:.3}50%{opacity:.1}to{opacity:0;border-width:0;transform:scale(3.8)}}@keyframes rcp-beat{0%{transform:scale(1)}25%{transform:scale(.8)}50%{transform:scale(1)}to{transform:scale(1)}}