fe508f8b21
Implements command pattern for providing edit history capabilities to editing. For now, no implementation is done to support keyboard shortcuts, so the buttons are the only way to navigate. Also, only image insertion is supported for now. Waiting for the masking updates to implement masking history. Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com>
178 lines
No EOL
2.9 KiB
CSS
178 lines
No EOL
2.9 KiB
CSS
* {
|
|
font-size: 100%;
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
}
|
|
|
|
.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;
|
|
|
|
}
|
|
|
|
#infoContainer {
|
|
position: absolute;
|
|
width: 250px;
|
|
height: auto;
|
|
z-index: 999;
|
|
|
|
}
|
|
|
|
#DraggableTitleBar {
|
|
z-index: 999;
|
|
cursor: move;
|
|
background-color: rgba(104, 104, 104, 0.75);
|
|
|
|
padding-left: 5px;
|
|
padding-right: 5px;
|
|
padding-top: 5px;
|
|
padding-bottom: 5px;
|
|
margin-bottom: auto;
|
|
font-size: 1.5em;
|
|
color: black;
|
|
text-align: center;
|
|
border-top-left-radius: 10px;
|
|
border-top-right-radius: 10px;
|
|
border: solid;
|
|
border-bottom: none;
|
|
border-color: black;
|
|
}
|
|
|
|
.toolbar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.toolbar > .tool {
|
|
flex: 1;
|
|
}
|
|
|
|
.toolbar > .tool:not(:last-child) {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
button.tool {
|
|
background-color: rgb(0, 0, 50);
|
|
color: rgb(255, 255, 255);
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
border: none;
|
|
text-align: center;
|
|
outline: none;
|
|
font-size: 15px;
|
|
padding: 5px;
|
|
margin-top: 5px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
button.tool:hover {
|
|
background-color: #667;
|
|
}
|
|
|
|
.collapsible {
|
|
background-color: rgb(0, 0, 0);
|
|
color: rgb(255, 255, 255);
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
width: 100%;
|
|
border: none;
|
|
text-align: center;
|
|
outline: none;
|
|
font-size: 15px;
|
|
padding: 5px;
|
|
margin-top: 5px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.collapsible:hover {
|
|
background-color: #777;
|
|
}
|
|
|
|
.content {
|
|
max-height: 0;
|
|
overflow: hidden;
|
|
transition: max-height 0.2s ease-out;
|
|
}
|
|
|
|
.info {
|
|
background-color: rgba(255, 255, 255, 0.5);
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
padding-top: 5px;
|
|
padding-bottom: 5px;
|
|
|
|
color: black;
|
|
border: solid;
|
|
border-top: none;
|
|
border-color: black;
|
|
font-size: medium;
|
|
text-align: left;
|
|
max-height: fit-content;
|
|
overflow: auto;
|
|
cursor: auto;
|
|
}
|
|
|
|
|
|
.canvasHolder {
|
|
position: relative;
|
|
width: 2560px;
|
|
height: 1440px;
|
|
}
|
|
|
|
.mainCanvases {
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
width: 2560px;
|
|
height: 1440px;
|
|
}
|
|
|
|
.masks {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
grid-template-rows: 1fr;
|
|
grid-column-gap: 0px;
|
|
grid-row-gap: 0px;
|
|
}
|
|
|
|
.maskCanvasMonitor .overMaskCanvasMonitor .initImgCanvasMonitor {
|
|
position: absolute;
|
|
} |