494 lines
9.5 KiB
CSS
494 lines
9.5 KiB
CSS
|
|
body {
|
|
margin: 0;
|
|
font-family: sans-serif;
|
|
--top-panel-height : 64px;
|
|
--left-panel-width : 80px;
|
|
--right-panel-width : 210px;
|
|
background:#f8fcff;
|
|
--label : "image";
|
|
}
|
|
canvas {
|
|
display: block;
|
|
box-shadow: 0px 0px 0px 2px;
|
|
}
|
|
.noselect {
|
|
-webkit-touch-callout: none;
|
|
-webkit-user-select: none;
|
|
-khtml-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.nodrag {
|
|
user-drag: none;
|
|
-webkit-user-drag: none;
|
|
}
|
|
|
|
|
|
.panel {
|
|
position: absolute;
|
|
left:0px;
|
|
right:0px;
|
|
top:0px;
|
|
height: var(--top-panel-height);
|
|
}
|
|
|
|
.button {
|
|
transition: all 0.05s;
|
|
display: inline-block;
|
|
border-radius: 4px;
|
|
width:32px;
|
|
height:32px;
|
|
margin:2px;
|
|
background-color : #ddd;
|
|
box-sizing: border-box;
|
|
box-shadow: -1px -1px 1px 1px black inset, 1px 1px 1px 1px white inset;
|
|
}
|
|
.button:hover {
|
|
background-color : #eee;
|
|
}
|
|
.button:active {
|
|
background-color : white;
|
|
box-shadow: 1px 1px 1px 1px black inset, -1px -1px 1px 1px white inset;
|
|
}
|
|
.button.down {
|
|
background-color : #FFF;
|
|
box-shadow: 1px 1px 1px 1px black inset, -1px -1px 1px 1px white inset;
|
|
}
|
|
|
|
.pen.button {
|
|
margin-bottom: 9px;
|
|
}
|
|
|
|
.subpanel {
|
|
display: inline-block;
|
|
border-left: 1px solid black;
|
|
padding-left: 6px;
|
|
height: var(--top-panel-height);
|
|
vertical-align: top;
|
|
box-sizing:border-box;
|
|
}
|
|
|
|
.subpanel input {
|
|
display:block;
|
|
}
|
|
|
|
.subpanel.simple_mirrors {
|
|
width:70px;
|
|
}
|
|
|
|
.subpanel.grid_mirrors>span {
|
|
height: var(--top-panel-height);
|
|
vertical-align: top;
|
|
padding-top: 10px;
|
|
}
|
|
|
|
|
|
.mirror.button {
|
|
width:24px;
|
|
height:24px;
|
|
}
|
|
|
|
.mirror.button#mirror_y {
|
|
background-image: linear-gradient(to bottom, #0000 45%, #000f 50%, #0000 55%);
|
|
}
|
|
|
|
.mirror.button#mirror_x {
|
|
background-image: linear-gradient(to right, #0000 45%, #000f 50%, #0000 55%);
|
|
}
|
|
|
|
.mirror.button#mirror_tlbr {
|
|
background-image: linear-gradient(to right top, #0000 45%, #000f 50%, #0000 55%);
|
|
}
|
|
|
|
.mirror.button#mirror_trbl {
|
|
background-image: linear-gradient(to right bottom, #0000 45%, #000f 50%, #0000 55%);
|
|
}
|
|
|
|
.mirror.button#mirror_grid {
|
|
width: 48px;
|
|
height: 48px;
|
|
margin-top: 6px;
|
|
}
|
|
|
|
.subpanel.rotational_mirrors {
|
|
width: 55px;
|
|
text-align:center;
|
|
}
|
|
|
|
.mirror.button#mirror_rotational {
|
|
width: 36px;
|
|
height: 36px;
|
|
margin-bottom:0;
|
|
}
|
|
|
|
.subpanel.rotational_mirrors input {
|
|
width: 42px;
|
|
}
|
|
|
|
|
|
|
|
#palette {
|
|
position:absolute;
|
|
left:0px;
|
|
top:var(--top-panel-height);
|
|
width:var(--left-panel-width);
|
|
bottom:0px;
|
|
}
|
|
.paletteentry {
|
|
width :32px;
|
|
height :32px;
|
|
display:inline-block;
|
|
border:1px solid black;
|
|
margin : 3px;
|
|
}
|
|
|
|
.paletteentry.erase {
|
|
width: 72px;
|
|
text-align: center;
|
|
line-height: 32px;
|
|
}
|
|
|
|
#workspace{
|
|
position:absolute;
|
|
|
|
left: calc( var(--left-panel-width) + 8px);
|
|
right: calc( var(--right-panel-width));
|
|
top: calc( var(--top-panel-height) + 4px);
|
|
bottom:0px;
|
|
overflow:hidden;
|
|
background-color:lightgrey;
|
|
margin: 4px;
|
|
box-shadow: 0px 0px 2px 2px black;
|
|
}
|
|
.pic {
|
|
cursor:crosshair;
|
|
background-color:White;
|
|
background-image: linear-gradient(rgba(32,100,150,.05), transparent 2px),
|
|
linear-gradient(90deg, rgba(32,100,150,.05) 2px, transparent 2px),
|
|
linear-gradient(rgba(32,100,150,.1) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(32,100,150,.1) 1px, transparent 1px);
|
|
background-size:100px 100px, 100px 100px, 20px 20px, 20px 20px;
|
|
background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px;
|
|
|
|
transition: transform 0.5s;
|
|
|
|
position:absolute;
|
|
margin: auto;
|
|
left:0px;
|
|
top:0px;
|
|
image-rendering:pixelated;
|
|
image-rendering:-moz-crisp-edges;
|
|
transform : scale(2,2);
|
|
transition: transform 0.15s;
|
|
|
|
transform-origin: top left;
|
|
transform: translate(var(--translateX),var(--translateY)) scale(var(--scalefactor) )
|
|
}
|
|
|
|
.pic .closebutton {
|
|
position: absolute;
|
|
top: -20px;
|
|
left: 3px;
|
|
width: 16px;
|
|
height: 16px;
|
|
background: #8008;
|
|
border-radius: 16px;
|
|
box-sizing: border-box;
|
|
border: 1px solid black;
|
|
cursor: default;
|
|
}
|
|
|
|
.pic .closebutton:hover {
|
|
background: #f33f;
|
|
}
|
|
|
|
.pic .closebutton:active {
|
|
background: #f00f;
|
|
border: 3px solid black;
|
|
|
|
}
|
|
|
|
input[type="color"] {
|
|
width:48px;
|
|
height:32px;
|
|
padding:0px;
|
|
background:none;
|
|
border:none;
|
|
outline:none;
|
|
}
|
|
#foreground {
|
|
position: absolute;
|
|
bottom : 32px;
|
|
left : 12px;
|
|
z-index : 1;
|
|
}
|
|
#background {
|
|
position: absolute;
|
|
bottom : 20px;
|
|
left : 24px;
|
|
}
|
|
#global_overlay {
|
|
z-index: 1111;
|
|
}
|
|
|
|
.fillparent {
|
|
position:absolute;
|
|
bottom:0px;
|
|
top:0px;
|
|
left:0px;
|
|
right:0px;
|
|
}
|
|
#save {
|
|
position:absolute;
|
|
top:0px;
|
|
bottom:0px;
|
|
right:0px;
|
|
}
|
|
.pic>.eventoverlay {
|
|
transform: translate(-0.5px,-0.5px);
|
|
}
|
|
|
|
.pic>.eventoverlay::before {
|
|
content: var(--label);
|
|
position: absolute;
|
|
height: 19px;
|
|
display: inline-block;
|
|
top: -21px;
|
|
transform-origin: left;
|
|
background-color: palegoldenrod;
|
|
border-radius: 0 11px 0 0;
|
|
padding-left: 32px;
|
|
padding-right: 17px;
|
|
box-shadow: 0px 0px 0px 2px;
|
|
font-family: sans-serif;
|
|
}
|
|
|
|
.pic[data-z="1"]>.eventoverlay::before {
|
|
background-color: orange;
|
|
}
|
|
|
|
.parameters textarea {
|
|
width : 47%;
|
|
height :4em;
|
|
display: inline-block;
|
|
border-top :16px solid #aa42;
|
|
height: 100%;
|
|
}
|
|
|
|
.parameters label {
|
|
margin-left:8px;
|
|
font-family: sans-serif;
|
|
font-size:14px;
|
|
position: absolute;
|
|
|
|
}
|
|
.parameters {
|
|
z-index:2;
|
|
overflow: visible;
|
|
width: 50%;
|
|
display: inline-block;
|
|
position: absolute;
|
|
right: 0px;
|
|
top: 0px;
|
|
}
|
|
|
|
.diameter_control {
|
|
display:inline-block;
|
|
margin-top: 8px;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.sidebutton {
|
|
width: 32px;
|
|
height: 32px;
|
|
border: 2px solid black;
|
|
position: absolute;
|
|
background-color: green;
|
|
right: -36px;
|
|
top: 0px;
|
|
border-radius: 0px 30px 30px 0px;
|
|
}
|
|
.sidebutton.output {
|
|
background: radial-gradient(ellipse at center, #ffffff 0%,#f4ff60 11%,#f4ff60 11%,#80c217 57%,#008000 100%);
|
|
}
|
|
|
|
#right_panel{
|
|
position: absolute;
|
|
top:var(--top-panel-height);
|
|
width:var(--right-panel-width);
|
|
right:0px;
|
|
bottom:0px;
|
|
width:200px;
|
|
|
|
}
|
|
|
|
.sidepanel_block {
|
|
position:absolute;
|
|
border-top:1px solid black;
|
|
border-bottom:1px solid black;
|
|
left:0px;
|
|
right:0px;
|
|
}
|
|
|
|
#layer_control {
|
|
--control-height :400px;
|
|
bottom:0px;
|
|
height:var(--control-height);
|
|
}
|
|
|
|
.layer_list {
|
|
height:calc(var(--control-height) - 100px);
|
|
overflow-y: auto;
|
|
}
|
|
|
|
|
|
.layer-attributes {
|
|
position:relative;
|
|
}
|
|
|
|
#layer_control input,
|
|
#layer_control select {
|
|
width:95%;
|
|
text-align:center;
|
|
}
|
|
|
|
#layer_control label {
|
|
width:95%;
|
|
text-align:center;
|
|
display: inline-block;
|
|
padding-top:5px;
|
|
font: 16px sans-serif;
|
|
}
|
|
|
|
#layer_control .thumbnail {
|
|
display:inline-block;
|
|
}
|
|
|
|
#layer_control .layer_name {
|
|
display:inline-block;
|
|
vertical-align: top;
|
|
line-height: 36px;
|
|
}
|
|
|
|
#layer_control .visibilitybox {
|
|
display:inline-block;
|
|
content:"Q";
|
|
height : 32px;
|
|
width:24px;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -18 24 32'%3E%3Cpath d='M 0 5 H 15 V -10 H 0 V 5 Z M 2 3 H 2 V -8 H 13 V 3 Z' fill='%2300000080'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
#layer_control .visibilitybox.showing {
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-11 -13 14 20'%3E%3Cpath d='M 0.4 -0.2 l 1.1 -1.1 a 1.1 1.1 90 0 0 -11.2 -2.2 q 2.9 4.5 7.7 3.7 M -1.8 -4 A 1.1 1.1 90 0 1 -6.7 -3.6 A 1.1 1.1 90 0 1 -1.4 -3.2 M -1 -3.3 A 1.1 1.1 90 0 0 -8.2 -3.2 A 1.1 1.1 90 0 1 -0.5 -4 M -3 -3 A 1.1 1.1 90 1 0 -3.2 -2.8 z' fill='%2300000080'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
#layer_control .layer_widget {
|
|
height: 40px;
|
|
border: 1px solid #0003;
|
|
position:relative;
|
|
|
|
}
|
|
|
|
#layer_control .checkbox {
|
|
width: 16px;
|
|
height: 16px;
|
|
border: 1px solid black;
|
|
display: inline-block;
|
|
position: absolute;
|
|
top: 8px;
|
|
right: 8px;
|
|
}
|
|
#layer_control .checkbox.checked {
|
|
background: radial-gradient(ellipse at center, #ffffff 0%,#e0e6f9 11%,#5b9aff 43%,#3d8cf4 70%,#007fef 100%);
|
|
}
|
|
|
|
|
|
#layer_control .layer_list.insert_top {
|
|
border-top:3px solid red;
|
|
}
|
|
|
|
#layer_control .layer_widget.insert_after {
|
|
border-bottom:3px solid red;
|
|
}
|
|
|
|
.layer_widget.active {
|
|
background: cornsilk;
|
|
}
|
|
|
|
|
|
.layer-attributes .imageLayer {
|
|
height:24px;
|
|
}
|
|
|
|
.layer-attributes .maskLayer {
|
|
display: none;
|
|
}
|
|
|
|
.layer-attributes.mask .imageLayer {
|
|
display: none;
|
|
}
|
|
|
|
.layer-attributes.mask .maskLayer {
|
|
display: block;
|
|
height:24px;
|
|
}
|
|
|
|
.layer_actions {
|
|
position: absolute;
|
|
bottom: 2px;
|
|
border: 1px solid black;
|
|
height: 26px;
|
|
left: 0px;
|
|
right: 0px;
|
|
}
|
|
.layer_actions .remove_layer {
|
|
position:absolute;
|
|
|
|
width:24px;
|
|
height:24px;
|
|
right:0px;
|
|
bottom:0px;
|
|
box-sizing: border-box;
|
|
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-6 -12 24 24'%3E%3Cpath d='M 0 7 L -1 -6 L 13 -6 L 12 7 Z M 3 4 v -7 a 1 1 0 0 0 -1 0 v 7 a 1 1 0 0 0 1 0 Z M 6.5 4 v -7 a 1 1 0 0 0 -1 0 v 7 a 1 1 0 0 0 1 0 Z M 10 3.8 v -7 a 1 1 0 0 0 -1 0 v 7 a 1 1 0 0 0 1 0 m 4 -10 h -16 a 1 0.2 0 0 1 16 0 m -9 -1.3 h 2 a 1 1 0 0 0 -2 0' fill='%2300000080'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
.layer_actions .add_layer {
|
|
position:absolute;
|
|
|
|
width:24px;
|
|
height:24px;
|
|
left:0px;
|
|
bottom:0px;
|
|
box-sizing: border-box;
|
|
|
|
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -12 24 24'%3E%3Cpath d='M -1 7 H 1 V 1 H 7 V -1 H 1 V -7 H -1 V -1 H -7 V 1 H -1' fill='%2300000080'/%3E%3C/svg%3E")
|
|
}
|
|
|
|
|
|
input.maskColor {
|
|
display:inline-block;
|
|
position:absolute;
|
|
top: -3px;
|
|
height:28px;
|
|
}
|
|
|
|
#import_control {
|
|
display: inline-block;
|
|
width: 184px;
|
|
padding: 0.5em;
|
|
text-align: center;
|
|
height: var(--top-panel-height);
|
|
vertical-align: top;
|
|
padding-top: 1em;
|
|
border-right: 1px solid black;
|
|
}
|
|
|
|
#import_control select {
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|