You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 lines
5.2 KiB
1 lines
5.2 KiB
.hu-color-picker{padding:10px;background:#1d2024;border-radius:4px;box-shadow:0 0 16px #00000029;z-index:1}.hu-color-picker.light{background:#f7f8f9}.hu-color-picker.light .color-show .sucker{background:#eceef0}.hu-color-picker.light .color-type .name{background:#e7e8e9}.hu-color-picker.light .color-type .value{color:#666;background:#eceef0}.hu-color-picker.light .colors.history{border-top:1px solid #eee}.hu-color-picker canvas{vertical-align:top}.hu-color-picker .color-set{display:flex}.hu-color-picker .color-show{margin-top:8px;display:flex}.saturation{position:relative;cursor:pointer}.saturation .slide{position:absolute;left:100px;top:0;width:10px;height:10px;border-radius:50%;border:1px solid #fff;box-shadow:0 0 1px 1px #0000004d;pointer-events:none}.color-type{display:flex;margin-top:8px;font-size:12px}.color-type .name{width:60px;height:30px;float:left;display:flex;justify-content:center;align-items:center;color:#999;background:#252930}.color-type .value{flex:1;height:30px;min-width:100px;padding:0 12px;border:0;color:#fff;background:#2e333a;box-sizing:border-box}.color-alpha{position:relative;margin-left:8px;cursor:pointer}.color-alpha .slide{position:absolute;left:0;top:100px;width:100%;height:4px;background:#fff;box-shadow:0 0 1px #0000004d;pointer-events:none}.sucker{width:30px;fill:#9099a4;background:#2e333a;cursor:pointer;transition:all .3s}.sucker.active,.sucker:hover{fill:#1593ff}.colors{padding:0;margin:0}.colors.history{margin-top:10px;border-top:1px solid #2e333a}.colors .item{position:relative;width:16px;height:16px;margin:10px 0 0 10px;border-radius:3px;box-sizing:border-box;vertical-align:top;display:inline-block;transition:all .1s;cursor:pointer}.colors .item:nth-child(8n+1){margin-left:0}.colors .item:hover{transform:scale(1.4)}.colors .item .alpha{height:100%;border-radius:4px}.colors .item .color{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:3px}.hue{position:relative;margin-left:8px;cursor:pointer}.hue .slide{position:absolute;left:0;top:100px;width:100%;height:4px;background:#fff;box-shadow:0 0 1px #0000004d;pointer-events:none}.color_picker_wrapper{width:245px}.color_picker_wrapper .color_picker_box{box-shadow:0 0 16px #00000029;border-radius:4px;background:var(--05c21f2f);padding:15px 10px}.color_picker_wrapper .color_picker_box :deep(.hu-color-picker){box-shadow:none;border-radius:0;background:var(--05c21f2f);padding:0}.color_picker_wrapper .color_picker_box .gcolor_deg{display:block;display:flex;align-items:center}.color_picker_wrapper .color_picker_box .gcolor_deg .gcolor_deg_span{font-size:12px;margin-right:10px}.color_picker_wrapper .color_picker_box .gcolor_deg .number_input{min-width:30px;max-width:30px;float:none;order:1;margin-left:10px;margin-top:0;display:flex;align-items:center;text-align:center;color:#606266;font-size:12px;padding:3px;background-color:#fff;border:1px solid #dcdfe6;border-radius:4px}.color_picker_wrapper .color_picker_box .gcolor_deg .number_input:focus{border-color:#409eff;outline:0}.color_picker_wrapper .color_picker_box .color_hd{margin-bottom:15px}.color_picker_wrapper .color_picker_box .color_hd_0{margin-bottom:0}.color_picker_wrapper .color_picker_box .title{font-size:16px;display:flex;justify-content:space-between}.color_picker_wrapper .color_picker_box .title .close_box{speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;vertical-align:baseline;display:inline-block;color:#909399;width:26px;height:100%;font-size:21px;cursor:pointer}.color_picker_wrapper .color_picker_box .gcolor{position:relative;margin:10px 0 20px}.color_picker_wrapper .color_picker_box .gcolor_bar{position:relative;margin-top:3px;height:16px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJ0lEQVQoU2M8c/X2fwYkYKylgsxlYKSDgv///6O44ey1O6huoL0CAJgaKeXe+C99AAAAAElFTkSuQmCC) repeat;border-radius:2px}.color_picker_wrapper .color_picker_box .setAsCommon{display:flex;justify-content:flex-end;align-items:center;margin:5px 0}.color_picker_wrapper .color_picker_box .setAsCommon input{margin-right:5px}.color_picker_wrapper .color_picker_box .gcolor_bar_bg{position:absolute;left:0;right:0;top:0;bottom:0}.color_picker_wrapper .color_picker_box .gcolor_bar_pot_box{position:absolute;left:8px;top:0;bottom:0;z-index:1;width:calc(100% - 16px);pointer-events:none}.color_picker_wrapper .color_picker_box .gcolor_bar_pot{pointer-events:initial;position:absolute;top:50%;transform:translateY(-50%);height:16px;width:12px;cursor:pointer;border:2px solid #fff}.color_picker_wrapper .color_picker_box .gcolor_bar_pot.on{z-index:2}.color_picker_wrapper .color_picker_box .gcolor_bar_pot.on:before{visibility:visible}.color_picker_wrapper .color_picker_box .gcolor_bar_pot:after{content:"";position:absolute;left:-3px;right:-3px;top:-3px;bottom:-3px;border:1px solid #999;border-radius:3px}.color_picker_wrapper .color_picker_box .gcolor_bar_pot:before{content:"";position:absolute;left:-4px;right:-4px;top:-4px;bottom:-4px;border:2px solid var(--hoverColor);visibility:hidden;z-index:1;border-radius:3px}.color_picker_wrapper .gradient-box{margin:0;padding:0}.color_picker_wrapper .gradient-point{list-style:none;display:inline-block;margin-right:5px;width:16px;height:16px;border-radius:2px;cursor:pointer}
|