.color-grid-wrapper[data-v-7feee3c3]{position:relative}.color-grid[data-v-7feee3c3]{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:20px;min-height:300px}.draggable-container[data-v-7feee3c3]{display:contents}.color-item[data-v-7feee3c3]{width:100%;aspect-ratio:1;border-radius:8px;overflow:hidden;position:relative;cursor:pointer;-webkit-box-shadow:0 2px 8px rgba(0,0,0,.1);box-shadow:0 2px 8px rgba(0,0,0,.1);-webkit-transition:all .3s;transition:all .3s}.color-item[data-v-7feee3c3]:hover{-webkit-transform:translateY(-4px);transform:translateY(-4px);-webkit-box-shadow:0 4px 12px rgba(0,0,0,.15);box-shadow:0 4px 12px rgba(0,0,0,.15)}.color-item:hover .color-actions[data-v-7feee3c3]{opacity:1}.color-item .color-image[data-v-7feee3c3]{width:100%;height:100%}.color-item .image-error[data-v-7feee3c3]{width:100%;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;background-color:#f5f7fa;color:#909399;font-size:48px}.color-item .color-actions[data-v-7feee3c3]{position:absolute;top:8px;right:8px;opacity:0;-webkit-transition:opacity .3s;transition:opacity .3s;z-index:2}.color-item .color-actions i[data-v-7feee3c3]{font-size:20px;color:#fff;background-color:rgba(0,0,0,.5);padding:6px;border-radius:4px;cursor:pointer;-webkit-transition:all .3s;transition:all .3s}.color-item .color-actions i[data-v-7feee3c3]:hover{background-color:#f56c6c}.color-item .drag-handle[data-v-7feee3c3]{position:absolute;bottom:8px;right:8px;opacity:0;-webkit-transition:opacity .3s;transition:opacity .3s;z-index:2;cursor:move;background-color:rgba(0,0,0,.5);padding:6px;border-radius:4px}.color-item .drag-handle i[data-v-7feee3c3]{font-size:18px;color:#fff}.color-item .drag-handle[data-v-7feee3c3]:hover{background-color:rgba(0,0,0,.7)}.color-item:hover .drag-handle[data-v-7feee3c3]{opacity:1}.color-item.upload-item[data-v-7feee3c3]{border:2px dashed #dcdfe6;background-color:#fafafa;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;cursor:pointer;-webkit-transition:all .3s;transition:all .3s}.color-item.upload-item[data-v-7feee3c3]:hover{border-color:#409eff;background-color:#ecf5ff;-webkit-transform:translateY(-4px);transform:translateY(-4px)}.color-item.upload-item:hover .upload-icon[data-v-7feee3c3]{color:#409eff}.color-item.upload-item .upload-icon-wrapper[data-v-7feee3c3]{text-align:center}.color-item.upload-item .upload-icon-wrapper .upload-icon[data-v-7feee3c3]{font-size:48px;color:#909399;-webkit-transition:color .3s;transition:color .3s}.color-item.upload-item .upload-icon-wrapper .upload-text[data-v-7feee3c3]{margin-top:12px;font-size:14px;color:#606266}[data-v-7feee3c3] .ghost{opacity:.5;background-color:#f0f0f0}[data-v-7feee3c3] .chosen{border:2px solid #409eff}[data-v-7feee3c3] .drag{opacity:.8}