@opentiny/vue-theme/color-select-panel/index.css

An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.

.tiny-color-select-panel{--tv-ColorSelectPanel-border-radius-lg:var(--tv-border-radius-lg, 8px);--tv-ColorSelectPanel-border-radius-md:var(--tv-border-radius-md, 6px);--tv-ColorSelectPanel-border-radius-sm:var(--tv-border-radius-sm, 4px);--tv-ColorSelectPanel-padding-y:var(--tv-space-md, 8px);--tv-ColorSelectPanel-padding-x:var(--tv-space-md, 8px);--tv-ColorSelectPanel-alpha-margin-top:var(--tv-space-md, 8px);--tv-ColorSelectPanel-box-shadow:var(--tv-shadow-2-down, 0 2px 12px 0 rgba(0, 0, 0, 0.16));--tv-ColorSelectPanel-bg-color:var(--tv-color-bg-3, #ffffff);--tv-ColorSelectPanel-tools-line-height:40px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:absolute;min-width:320px;z-index:10;background:var(--tv-ColorSelectPanel-bg-color);gap:var(--tv-ColorSelectPanel-spacing);padding:var(--tv-ColorSelectPanel-padding-y) var(--tv-ColorSelectPanel-padding-x);-webkit-box-shadow:var(--tv-ColorSelectPanel-box-shadow);box-shadow:var(--tv-ColorSelectPanel-box-shadow);border-radius:var(--tv-ColorSelectPanel-border-radius-md)}.tiny-color-select-panel__tools{display:-webkit-box;display:-ms-flexbox;display:flex;margin:6px 0}.tiny-color-select-panel__tools .tiny-input{-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0}.tiny-color-select-panel__tools-btns{margin-left:8px}.tiny-color-select-panel__tools__format-select{width:96px}.tiny-color-select-panel__inner{display:-webkit-box;display:-ms-flexbox;display:flex;gap:12px}.tiny-color-select-panel__inner__color-select{min-width:220px;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;height:142px;position:relative}.tiny-color-select-panel__inner__color-select .white{background:-webkit-gradient(linear,left top,right top,from(#fff),to(rgba(255,255,255,0)));background:linear-gradient(to right,#fff,rgba(255,255,255,0))}.tiny-color-select-panel__inner__color-select .black{background:-webkit-gradient(linear,left bottom,left top,from(#000),to(rgba(0,0,0,0)));background:linear-gradient(to top,#000,rgba(0,0,0,0))}.tiny-color-select-panel__inner__color-select .black,.tiny-color-select-panel__inner__color-select .white{position:absolute;inset:0}.tiny-color-select-panel__inner__color-select .cursor{position:absolute;width:12px;height:12px;border-radius:100%;border:1px solid #fff;background:rgba(0,0,0,.15);-webkit-box-shadow:inset 0 0 1px 1px #0000004d,0 0 1px 2px #0006;box-shadow:inset 0 0 1px 1px #0000004d,0 0 1px 2px #0006}.tiny-color-select-panel__inner__hue-select{position:relative;width:8px;border-radius:var(--tv-ColorSelectPanel-border-radius-lg);background:-webkit-gradient(linear,left top,left bottom,from(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(to bottom,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}.tiny-color-select-panel__inner__hue-select div{position:absolute;top:0;width:100%;height:4px;background:#fff;-webkit-box-shadow:0 0 2px rgba(0,0,0,.6);box-shadow:0 0 2px rgba(0,0,0,.6);border-radius:1px}.tiny-color-select-panel__alpha{position:relative;min-width:240px;height:8px;border-radius:var(--tv-ColorSelectPanel-border-radius-lg);margin-top:var(--tv-ColorSelectPanel-alpha-margin-top)}.tiny-color-select-panel__alpha__slider{width:100%;height:100%;border-radius:var(--tv-ColorSelectPanel-border-radius-lg)}.tiny-color-select-panel__alpha__thumb{width:4px;height:100%;position:absolute;top:0;left:0;background:#fff;-webkit-box-shadow:0 0 2px rgba(0,0,0,.6);box-shadow:0 0 2px rgba(0,0,0,.6);border-radius:1px}.tiny-color-select-panel .tiny-collapse .tiny-collapse-item__content{border:0;padding:12px}.tiny-color-select-panel .tiny-collapse .tiny-collapse-item__content .tiny-color-select-panel__history,.tiny-color-select-panel .tiny-collapse .tiny-collapse-item__content .tiny-color-select-panel__predefine{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;height:auto;gap:var(--tv-ColorSelectPanel-spacing)}.tiny-color-select-panel .tiny-collapse .tiny-collapse-item__content .tiny-color-select-panel__history__color-block,.tiny-color-select-panel .tiny-collapse .tiny-collapse-item__content .tiny-color-select-panel__predefine__color-block{width:20px;height:20px;border-radius:var(--tv-ColorSelectPanel-border-radius-sm);margin:0 4px 4px 0}