2022-11-18 04:37:28 +00:00
|
|
|
* {
|
|
|
|
font-size: 100%;
|
|
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
|
|
}
|
|
|
|
|
2022-11-16 22:52:11 +00:00
|
|
|
.container {
|
|
|
|
position: relative;
|
|
|
|
}
|
|
|
|
|
|
|
|
.backgroundCanvas {
|
|
|
|
background-color: #ccc;
|
|
|
|
}
|
|
|
|
|
|
|
|
.maskPaintCanvas {
|
|
|
|
border: 3px dotted #993355C0
|
|
|
|
}
|
|
|
|
|
|
|
|
.overlayCanvas {
|
|
|
|
border: 1px solid #F00;
|
|
|
|
}
|
|
|
|
|
|
|
|
.tempCanvas {
|
|
|
|
border: 3px dotted #007AFFC0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.targetCanvas {
|
|
|
|
border: 2px dashed #0F0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.canvas {
|
|
|
|
border: 2px dotted #00F;
|
|
|
|
}
|
|
|
|
|
|
|
|
.mainHSplit {
|
|
|
|
display: grid;
|
|
|
|
grid-template-columns: 1fr;
|
|
|
|
grid-template-rows: repeat(2, 1fr);
|
|
|
|
grid-column-gap: 5px;
|
|
|
|
grid-row-gap: 5px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.uiWrapper {
|
|
|
|
display: grid;
|
|
|
|
grid-template-columns: 1fr 15fr;
|
|
|
|
grid-template-rows: 1fr;
|
|
|
|
grid-column-gap: 5px;
|
|
|
|
grid-row-gap: 5px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.canvasHolder {
|
|
|
|
position: relative;
|
|
|
|
width: 2560px;
|
|
|
|
height: 1440px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.mainCanvases {
|
|
|
|
position: absolute;
|
|
|
|
top: 0px;
|
|
|
|
left: 0px;
|
|
|
|
width: 2560px;
|
|
|
|
height: 1440px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.masks {
|
|
|
|
display: grid;
|
2022-11-18 03:21:48 +00:00
|
|
|
grid-template-columns: repeat(3, 1fr);
|
2022-11-16 22:52:11 +00:00
|
|
|
grid-template-rows: 1fr;
|
|
|
|
grid-column-gap: 0px;
|
|
|
|
grid-row-gap: 0px;
|
|
|
|
}
|
|
|
|
|
2022-11-18 03:21:48 +00:00
|
|
|
.maskCanvasMonitor {
|
2022-11-16 22:52:11 +00:00
|
|
|
position: absolute;
|
|
|
|
}
|
|
|
|
|
2022-11-18 03:21:48 +00:00
|
|
|
.overMaskCanvasMonitor {
|
2022-11-16 22:52:11 +00:00
|
|
|
position: absolute;
|
|
|
|
left: 600px;
|
2022-11-18 03:21:48 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.initImgCanvasMonitor {
|
|
|
|
position: absolute;
|
|
|
|
left: 1200px;
|
2022-11-16 22:52:11 +00:00
|
|
|
}
|