@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-spacing:0;--tv-ColorSelectPanel-predefine-spacing:10px;--tv-ColorSelectPanel-padding-y:var(--tv-space-xl, 16px);--tv-ColorSelectPanel-padding-x:var(--tv-space-xl, 16px);--tv-ColorSelectPanel-alpha-margin-top:var(--tv-space-xl, 16px);--tv-ColorSelectPanel-box-shadow:var(--tv-shadow-2-down, 0 4px 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;position:relative;min-width:320px;z-index:10;margin-top:8px;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__display{position:absolute;top:170px;right:16px;height:40px;width:40px;border-radius:4px}.tiny-color-select-panel__no-alpha{width:85%;height:12px;margin-top:12px}.tiny-color-select-panel__tools{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;gap:8px;line-height:30px;height:30px;margin-top:16px}.tiny-color-select-panel__tools-style{-webkit-box-flex:1;-ms-flex:1;flex:1}.tiny-color-select-panel__tools-hex{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;gap:8px}.tiny-color-select-panel__tools-hex1{-webkit-box-flex:1;-ms-flex:1;flex:1}.tiny-color-select-panel__tools-hex2{width:52px}.tiny-color-select-panel__tools-hex3{-webkit-box-flex:1;-ms-flex:1;flex:1}.tiny-color-select-panel__tools-hex4{width:31%}.tiny-color-select-panel__tools-hex5{width:31%}.tiny-color-select-panel__tools-hex6{width:31%}.tiny-color-select-panel__tools-hex7{width:31%}.tiny-color-select-panel__tools-btns{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;margin-left:8px;margin-top:16px}.tiny-color-select-panel__tools-btns button{margin-left:12px}.tiny-color-select-panel__tools .tiny-input .tiny-input__inner{padding-left:6px;padding-right:6px}.tiny-color-select-panel__tools__format-select{width:60px}.tiny-color-select-panel__tools__format-select .tiny-select .tiny-input .tiny-input__inner{padding-left:0;padding-right:0;border-width:0}.tiny-color-select-panel__inner{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;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:85%;height:12px;border-radius:12px;background:-webkit-gradient(linear,left top,right top,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 right,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}.tiny-color-select-panel__inner__hue-select-thumb{position:absolute;position:relative;top:-2px;width:16px;height:16px;background:#fff;-webkit-box-shadow:0 0 8px rgba(0,0,0,.2);box-shadow:0 0 8px rgba(0,0,0,.2);border-radius:16px}.tiny-color-select-panel__inner__hue-select-thumb-heart{position:absolute;top:50%;left:50%;width:12px;height:12px;border-radius:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.tiny-color-select-panel__alpha{position:relative;width:85%;height:12px;border-radius:12px;margin-top:12px}.tiny-color-select-panel__alpha__slider{width:100%;height:100%;border-radius:12px}.tiny-color-select-panel__alpha__thumb{position:relative;position:absolute;top:-2px;width:16px;height:16px;left:0;background:#fff;-webkit-box-shadow:0 0 8px rgba(0,0,0,.2);box-shadow:0 0 8px rgba(0,0,0,.2);border-radius:16px}.tiny-color-select-panel__alpha__thumb-heart{position:absolute;top:50%;left:50%;width:12px;height:12px;border-radius:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.tiny-color-select-panel .tiny-color-select-panel__history,.tiny-color-select-panel .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-predefine-spacing);padding-top:16px}.tiny-color-select-panel .tiny-color-select-panel__history__color-block,.tiny-color-select-panel .tiny-color-select-panel__predefine__color-block{width:28px;height:28px;border-radius:var(--tv-ColorSelectPanel-border-radius-sm)}.tiny-color-select-panel .tiny-color-select-panel__history{border-bottom:1px solid grey;padding-bottom:16px}.tiny-color-select-panel .tiny-color-select-panel__predefine-title{height:22px;line-height:22px;font-size:14px;margin-top:13px}