vue-amazing-ui/lib/colorpicker/ColorPicker.css

An Amazing Vue3 UI Components Library, Using TypeScript.

.color-picker-panel[data-v-e56e98ea]{padding:12px}.color-picker-panel .color-picker-pallete[data-v-e56e98ea]{height:180px;position:relative;margin-bottom:8px;cursor:crosshair}.color-picker-panel .color-picker-pallete .color-picker-pallete-layer[data-v-e56e98ea]{position:absolute;inset:0}.color-picker-panel .color-picker-pallete .pallete-layer-shadowed[data-v-e56e98ea]{box-shadow:inset 0 0 2px #0000003d}.color-picker-panel .color-picker-preview[data-v-e56e98ea]{display:flex}.color-picker-panel .color-picker-preview .color-picker-preview-sliders[data-v-e56e98ea]{flex:1 0 auto}.color-picker-panel .color-picker-preview .color-picker-preview-sliders .color-picker-slider[data-v-e56e98ea]{margin-bottom:8px;position:relative;cursor:pointer}.color-picker-panel .color-picker-preview .color-picker-preview-sliders .color-picker-slider[data-v-e56e98ea]:after{content:"";position:absolute;border-radius:inherit;inset:0;box-shadow:inset 0 0 2px #0000003d;pointer-events:none}.color-picker-panel .color-picker-preview .color-picker-preview-sliders .color-picker-slider .color-picker-checkboard[data-v-e56e98ea]{background:#fff;position:absolute;inset:0}.color-picker-panel .color-picker-preview .color-picker-preview-sliders .color-picker-slider .color-picker-checkboard[data-v-e56e98ea]:after{background-image:linear-gradient(45deg,#ddd 25%,#0000 25%),linear-gradient(-45deg,#ddd 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#ddd 75%),linear-gradient(-45deg,#0000 75%,#ddd 75%);background-size:12px 12px;background-position:0 0,0 6px,6px -6px,-6px 0px;background-repeat:repeat;content:"";position:absolute;inset:0}.color-picker-panel .color-picker-preview .color-picker-preview-sliders .color-picker-slider .color-picker-slider-image[data-v-e56e98ea]{position:absolute;inset:0}.color-picker-panel .color-picker-preview .color-picker-preview-circle[data-v-e56e98ea]{position:relative;height:30px;width:30px;margin:0 0 8px 6px;border-radius:50%;box-shadow:#00000026 0 0 0 1px inset;overflow:hidden}.color-picker-panel .color-picker-preview .color-picker-preview-circle .color-picker-circle-fill[data-v-e56e98ea]{display:block;width:30px;height:30px}.color-picker-panel .color-picker-preview .color-picker-preview-circle .color-picker-circle-input[data-v-e56e98ea]{position:absolute;top:0;left:0;width:30px;height:30px;opacity:0;z-index:1}.color-picker-panel .color-picker-handle[data-v-e56e98ea]{z-index:1;box-shadow:0 0 2px #00000073;position:absolute;background-color:#fff;overflow:hidden}.color-picker-panel .color-picker-handle .color-picker-handle-fill[data-v-e56e98ea]{border:2px solid white}.color-picker-panel .color-picker-input[data-v-e56e98ea]{display:flex;align-items:center}.color-picker-panel .color-picker-input .color-picker-input-mode[data-v-e56e98ea]{width:72px;text-align:center}.color-picker-panel .color-picker-input .color-picker-input-group[data-v-e56e98ea]{display:inline-flex;width:100%;flex-wrap:nowrap;vertical-align:bottom}.color-picker-panel .color-picker-input .color-picker-input-group[data-v-e56e98ea] .input-wrap{flex-grow:1;flex-basis:0}.color-picker-panel .color-picker-input .color-picker-input-group[data-v-e56e98ea] .input-wrap:not(:first-child){margin-left:-1px}.color-picker-panel .color-picker-input .color-picker-input-group[data-v-e56e98ea] .input-wrap:not(:first-child) .input-container{border-top-left-radius:0;border-bottom-left-radius:0}.color-picker-panel .color-picker-input .color-picker-input-group[data-v-e56e98ea] .input-wrap:not(:last-child) .input-container{border-top-right-radius:0;border-bottom-right-radius:0}.color-picker-panel .color-picker-input .color-picker-input-group[data-v-e56e98ea] .input-wrap .input-container{padding:1px 4px}.color-picker-panel .color-picker-input .color-picker-input-group[data-v-e56e98ea] .input-wrap .input-item{text-align:center}.color-picker-panel .color-picker-swatches[data-v-e56e98ea]{display:flex;gap:8px;flex-wrap:wrap;position:relative;margin-top:10px}.color-picker-panel .color-picker-swatches .color-picker-swatch[data-v-e56e98ea]{width:18px;height:18px;background-image:linear-gradient(45deg,#ddd 25%,#0000 25%),linear-gradient(-45deg,#ddd 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#ddd 75%),linear-gradient(-45deg,#0000 75%,#ddd 75%);background-size:8px 8px;background-position:0px 0,0px 4px,4px -4px,-4px 0px;background-repeat:repeat}.color-picker-panel .color-picker-swatches .color-picker-swatch .color-picker-swatch-fill[data-v-e56e98ea]{position:relative;width:100%;height:100%;border-radius:3px;box-shadow:#00000026 0 0 0 1px inset;cursor:pointer}.panel-with-actions[data-v-e56e98ea]{padding-bottom:8px}.color-picker-actions[data-v-e56e98ea]{display:flex;gap:8px;border-top:1px solid rgba(5,5,5,.06);padding:8px 12px;justify-content:flex-end}.color-picker-footer[data-v-e56e98ea]{border-top:1px solid rgba(5,5,5,.06);padding:8px 12px}.color-picker-display[data-v-e56e98ea]{display:inline-block;width:var(--color-picker-width);height:var(--color-picker-height);border-radius:4px;position:relative;outline:none}.color-picker-display:not(.color-picker-disabled):hover .color-picker-wrap[data-v-e56e98ea]{border-color:var(--color-picker-primary-color-hover)}.color-picker-display:not(.color-picker-disabled):focus .color-picker-wrap[data-v-e56e98ea]{border-color:var(--color-picker-primary-color-focus);box-shadow:0 0 0 2px var(--color-picker-primary-shadow-color)}.color-picker-display .color-picker-wrap[data-v-e56e98ea]{height:100%;cursor:pointer;border:1px solid #d9d9d9;border-radius:4px;transition:all .2s cubic-bezier(.4,0,.2,1)}.color-picker-display .color-picker-wrap .color-picker-fill[data-v-e56e98ea]{position:absolute;inset:4px;display:flex;align-items:center;justify-content:center}.color-picker-display .color-picker-wrap .color-picker-fill .color-picker-checkboard[data-v-e56e98ea]{width:100%;height:100%;position:relative;background:#fff;position:absolute;inset:0}.color-picker-display .color-picker-wrap .color-picker-fill .color-picker-checkboard[data-v-e56e98ea]:after{background-image:linear-gradient(45deg,#ddd 25%,#0000 25%),linear-gradient(-45deg,#ddd 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#ddd 75%),linear-gradient(-45deg,#0000 75%,#ddd 75%);background-size:calc(var(--color-picker-block-size) * 2) calc(var(--color-picker-block-size) * 2);background-position:0 0,0 var(--color-picker-block-size),var(--color-picker-block-size) calc(-1 * var(--color-picker-block-size)),calc(-1 * var(--color-picker-block-size)) 0px;background-repeat:repeat;content:"";position:absolute;inset:0}.color-picker-display .color-picker-wrap .color-picker-fill .color-picker-value[data-v-e56e98ea]{white-space:nowrap;position:relative;font-size:14px;line-height:1.71428571}.color-picker-small .color-picker-wrap .color-picker-fill[data-v-e56e98ea]{inset:3px}.color-picker-small .color-picker-wrap .color-picker-fill .color-picker-value[data-v-e56e98ea]{line-height:1.28571429}.color-picker-large .color-picker-wrap .color-picker-fill[data-v-e56e98ea]{inset:5px}.color-picker-large .color-picker-wrap .color-picker-fill .color-picker-value[data-v-e56e98ea]{font-size:16px;line-height:1.875}.color-picker-disabled[data-v-e56e98ea]{cursor:not-allowed}