250c833895
Also updates a lot of other things (brush size now independent from scale factor, split some files, and a lot other things; removed erase safeguard as now erase is supported by undo/redo; tried adding github prettier autoformatting to pull requests; may have some other things as well Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com> Former-commit-id: 0ba21f23c69f9dca2c3189a838b945900b01f81d
142 lines
2.1 KiB
CSS
142 lines
2.1 KiB
CSS
* {
|
|
font-size: 100%;
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
}
|
|
body {
|
|
margin: 0px;
|
|
}
|
|
|
|
.container {
|
|
position: relative;
|
|
}
|
|
|
|
.backgroundCanvas {
|
|
background-color: #ccc;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.menu-container {
|
|
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;
|
|
}
|
|
|
|
.maskPaintCanvas {
|
|
filter: opacity(40%);
|
|
}
|
|
|
|
.strokeText {
|
|
-webkit-text-stroke: 1px #000;
|
|
font-size: 150%;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
}
|