vue-colorfull.css

.vue-colorful{position:relative;display:flex;flex-direction:column;width:200px;height:200px;-webkit-user-select:none;user-select:none;cursor:default}.vue-colorful__saturation{position:relative;flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(to top,#000,#0000),linear-gradient(to right,#fff,#fff0)}.vue-colorful__pointer-fill,.vue-colorful__alpha-gradient{content:"";position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;border-radius:inherit}.vue-colorful__alpha-gradient,.vue-colorful__saturation{box-shadow:inset 0 0 0 1px #0000000d}.vue-colorful__hue,.vue-colorful__alpha{position:relative;height:24px}.vue-colorful__hue{background:linear-gradient(to right,red,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red)}.vue-colorful__last-control{border-radius:0 0 8px 8px}.vue-colorful__interactive{position:absolute;left:0;top:0;right:0;bottom:0;border-radius:inherit;outline:none;touch-action:none}.vue-colorful__pointer{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px #0003}.vue-colorful__interactive:focus .vue-colorful__pointer{transform:translate(-50%,-50%) scale(1.1)}.vue-colorful__alpha,.vue-colorful__alpha-pointer{background-color:#fff;background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><rect x="8" width="8" height="8"/><rect y="8" width="8" height="8"/></svg>')}.vue-colorful__saturation-pointer{z-index:3}.vue-colorful__hue-pointer{z-index:2}