myprint-design
Version:
操作简单，组件丰富的一站式打印解决方案打印设计器
1 lines • 7.79 kB
CSS
.moveable-control{position:absolute;height:14px;border-radius:50%;border:2px solid #fff;box-sizing:border-box;background:var(--moveable-control);margin-top:-7px;margin-left:-7px;z-index:10}.moveable-nw{border-radius:0;width:calc(var(--direction-width) * 1px);height:calc(var(--direction-height) * 1px);margin-left:calc(var(--direction-width)/ -2 * 1px);margin-top:calc(var(--direction-height)/ -2 * 1px);background:0 0;border:none}.moveable-nw:before{content:" ";width:calc(var(--direction-width) * 1px);height:3px;position:absolute;background:var(--moveable-control);left:calc((var(--direction-width) - 2)/ 2 * 1px);top:calc((var(--direction-height) - 2)/ 2 * 1px)}.moveable-nw:after{content:" ";width:3px;height:calc(var(--direction-height) * 1px);position:absolute;background:var(--moveable-control);left:calc((var(--direction-width) - 2)/ 2 * 1px);top:calc((var(--direction-height) - 2)/ 2 * 1px)}.moveable-ne{border-radius:0;width:calc(var(--direction-width) * 1px);height:calc(var(--direction-height) * 1px);margin-left:calc(var(--direction-width)/ -2 * 1px);margin-top:calc(var(--direction-height)/ -2 * 1px);background:0 0;border:none}.moveable-ne:before{content:" ";width:calc(var(--direction-width) * 1px);height:3px;position:absolute;background:var(--moveable-control);left:calc((var(--direction-width) - 2)/ -2 * 1px);top:calc((var(--direction-height) - 2)/ 2 * 1px)}.moveable-ne:after{content:" ";width:3px;height:calc(var(--direction-height) * 1px);position:absolute;background:var(--moveable-control);left:calc(((var(--direction-width) - 2)/ 2 - 1) * 1px);top:calc((var(--direction-height) - 2)/ 2 * 1px)}.moveable-sw{border-radius:0;width:calc(var(--direction-width) * 1px);height:calc(var(--direction-height) * 1px);margin-left:calc(var(--direction-width)/ -2 * 1px);margin-top:calc(var(--direction-height)/ -2 * 1px);background:0 0;border:none}.moveable-sw:before{content:" ";width:calc(var(--direction-width) * 1px);height:3px;position:absolute;background:var(--moveable-control);left:calc((var(--direction-width) - 2)/ 2 * 1px);top:calc(((var(--direction-height) - 2)/ 2 - 1) * 1px)}.moveable-sw:after{content:" ";width:3px;height:calc(var(--direction-height) * 1px);position:absolute;background:var(--moveable-control);left:calc((var(--direction-width) - 2)/ 2 * 1px);top:calc((var(--direction-height) - 2)/ -2 * 1px)}.moveable-se{border-radius:0;width:calc(var(--direction-width) * 1px);height:calc(var(--direction-height) * 1px);margin-left:calc(var(--direction-width)/ -2 * 1px);margin-top:calc(var(--direction-height)/ -2 * 1px);background:0 0;border:none}.moveable-se:before{content:" ";width:calc(var(--direction-width) * 1px);height:3px;position:absolute;background:var(--moveable-control);left:calc((var(--direction-width) - 2)/ -2 * 1px);top:calc(((var(--direction-height) - 2)/ 2 - 1) * 1px)}.moveable-se:after{content:" ";width:3px;height:calc(var(--direction-height) * 1px);position:absolute;background:var(--moveable-control);left:calc(((var(--direction-width) - 2)/ 2 - 1) * 1px);top:calc((var(--direction-height) - 2)/ -2 * 1px)}.moveable-w{border-radius:0;width:3px;transform-origin:1px 50%;height:calc(var(--direction-height) * 1px);margin-left:-1px;margin-top:calc(var(--direction-height)/ -2 * 1px);background:0 0;border-left:solid 3px var(--moveable-control);border-bottom:none;border-top:none;border-right:none}.moveable-n{border-radius:0;width:calc(var(--direction-width) * 1px);height:3px;transform-origin:50% 1px;margin-left:calc(var(--direction-width)/ -2 * 1px);margin-top:-1px;background:0 0;border-top:solid 3px var(--moveable-control);border-bottom:none;border-left:none;border-right:none}.moveable-e{border-radius:0;width:3px;transform-origin:2px 50%;height:calc(var(--direction-height) * 1px);margin-left:-2px;margin-top:calc(var(--direction-height)/ -2 * 1px);background:var(--moveable-control);border:none}.moveable-s{border-radius:0;width:calc(var(--direction-width) * 1px);transform-origin:50% 2px;height:3px;margin-left:calc(var(--direction-width)/ -2 * 1px);margin-top:-2px;background:0 0;border-bottom:solid 3px var(--moveable-control);border-top:none;border-left:none;border-right:none}.moveable-origin{background:0 0;border:none}.moveable-origin:before{content:" ";width:1px;height:7px;position:absolute;background:var(--moveable-control);left:6px;top:3px}.moveable-origin:after{content:" ";width:7px;height:1px;position:absolute;background:var(--moveable-control);left:3px;top:6px}.moveable-control-box[data-able-groupable=true] .moveable-line{background:var(--drag-h-color)}.moveable-control-box[data-able-groupable=true] .moveable-line.moveable-direction{display:block}.moveable-control-box .moveable-line{background:0 0}.moveable-control-box .moveable-bounds{background:var(--bounds-color)}.moveable-control-box .moveable-line.moveable-guideline.moveable-horizontal.moveable-bold{background:var(--drag-h-color)}.moveable-control-box .moveable-line.moveable-guideline.moveable-horizontal.moveable-dashed{border-top:1px dashed red;border-top-color:red}.moveable-control-box .moveable-line.moveable-guideline.moveable-horizontal.moveable-target.moveable-bold.moveable-bounds{background:var(--bounds-color)}.moveable-control-box .moveable-line.moveable-guideline.moveable-vertical.moveable-bold{background:var(--drag-h-color)}.moveable-control-box .moveable-line.moveable-guideline.moveable-vertical.moveable-dashed{border-left:1px dashed red;border-left-color:red}.moveable-control-box .moveable-line.moveable-guideline.moveable-vertical.moveable-target.moveable-bold.moveable-bounds{background:var(--bounds-color)}.moveable-control-box .moveable-line.moveable-direction{display:none}.moveable-control-box .moveable-line.moveable-guideline.moveable-bounds{background:var(--bounds-color)}.moveable-control-box .moveable-guideline-group .moveable-guideline.moveable-gap{background:var(--drag-h-color)}.moveable-control-box .moveable-rotation{height:calc(20px * var(--zoom))}.moveable-control-box .moveable-rotation .moveable-rotation-line{margin-left:-1px;border-right:1px dashed var(--moveable-control)}.moveable-control-box .moveable-rotation .moveable-rotation-control{border:none;width:10px;height:10px;margin-left:-5px;cursor:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32" ><path d="M7.9,15.1c-4,0-7.3-3.3-7.3-7.3s3.3-7.3,7.3-7.3c1.7,0,3.4,0.6,4.7,1.7l0.9-0.9c0.2-0.2,0.4-0.3,0.7-0.3 c0.1,0,0.3,0,0.4,0.1c0.4,0.2,0.6,0.5,0.6,0.9v4c0,0.5-0.4,1-1,1h-4c-0.4,0-0.7-0.2-0.9-0.6C9.1,6.2,9.2,5.7,9.5,5.5l0.9-0.9 C9.7,4,8.8,3.7,7.9,3.7c-2.3,0-4.2,1.9-4.2,4.2c0,2.3,1.9,4.2,4.2,4.2c1.3,0,2.5-0.6,3.3-1.6c0.1-0.1,0.3-0.2,0.5-0.3c0,0,0,0,0,0 c0.2,0,0.4,0.1,0.5,0.2l1.2,1.3c0.2,0.2,0.3,0.6,0,0.9C12.1,14.2,10,15.1,7.9,15.1z" stroke-linejoin="round" stroke-width="1.2" stroke="white" fill="black"></path></svg>') 8 8,alias}.selectClass{background:var(--drag-h-color1);border:1px solid var(--drag-h-color)}