149 lines
4.8 KiB
CSS
Executable File
149 lines
4.8 KiB
CSS
Executable File
#diagram {
|
|
height: 100%;
|
|
width: 100%;
|
|
margin: 0;
|
|
user-select: none;
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
font-size: 16px;
|
|
color: rgb(73, 80, 87);
|
|
outline: none;
|
|
height: calc(95% + 2px);
|
|
}
|
|
|
|
a {
|
|
color: #0d6efd;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
#dgrmDiv {
|
|
display: inline-block;
|
|
user-select: none;
|
|
width: -webkit-fill-available;
|
|
border-radius: 5px;
|
|
height: 600px;
|
|
font-size: 1em;
|
|
max-width: calc(100% - 20px);
|
|
overflow-y: hidden;
|
|
transform: translate(0%, 0%);
|
|
}
|
|
|
|
#dgrmTop {
|
|
text-align: center;
|
|
border-bottom: 1px #40464d solid;
|
|
padding: 5px;
|
|
background-color: rgba(255, 255, 255, 0.6);
|
|
}
|
|
#dgrmTopTitle {
|
|
text-align: center;
|
|
}
|
|
|
|
#options {
|
|
position: absolute !important;
|
|
}
|
|
.menu {
|
|
position: absolute !important;
|
|
}
|
|
#menu {
|
|
position: absolute !important;
|
|
}
|
|
|
|
|
|
|
|
text {
|
|
white-space: pre-wrap;
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
font-size: 16px;
|
|
color: rgb(73, 80, 87);
|
|
}
|
|
|
|
textarea {
|
|
text-align: center;
|
|
border: none;;
|
|
padding: 10px;
|
|
padding-top: 0.8em;
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
font-size: 16px;
|
|
background-color: transparent;
|
|
color: transparent;
|
|
outline: none;
|
|
overflow: hidden;
|
|
resize: none;
|
|
line-height: 1em;
|
|
caret-color: #fff;
|
|
}
|
|
|
|
[data-connect] { display: none; }
|
|
|
|
.select path[data-key="selected"],
|
|
.select .path-end,
|
|
.select [data-connect],
|
|
.highlight-e [data-key="end"] .path-end,
|
|
.highlight-s [data-key="start"] .path-end,
|
|
.hover [data-connect] {
|
|
display: unset;
|
|
opacity: 0.51;
|
|
stroke: rgb(108 187 247);
|
|
fill: rgb(108 187 247);
|
|
}
|
|
[data-connect].hover { stroke-width: 25px; }
|
|
|
|
.select path[data-key="selected"] { fill:none; }
|
|
|
|
.highlight [data-key="main"]{
|
|
paint-order: stroke;
|
|
stroke-width: 10px;
|
|
stroke: rgb(108 187 247 / 51%);
|
|
}
|
|
|
|
.shpath [data-key="end"] .path,
|
|
.shpath [data-key="start"] .path { display: none;}
|
|
.shpath.arw-e [data-key="end"] .path,
|
|
.shpath.arw-s [data-key="start"] .path { display: unset;}
|
|
.shpath.dash [data-key="path"] { stroke-dasharray:5; }
|
|
|
|
@media (pointer: coarse) {
|
|
circle.path-end { r: 20px; }
|
|
.ative-elem {
|
|
stroke: rgb(108 187 247 / 51%);
|
|
stroke-width: 70px;
|
|
}
|
|
|
|
[data-connect] { stroke-width: 15px; }
|
|
[data-connect].hover { stroke-width: 70px; }
|
|
}
|
|
|
|
|
|
.shrect.ta-1 text, .shtxt.ta-1 text { text-anchor: start; }
|
|
.shrect.ta-2 text, .shtxt.ta-2 text { text-anchor: middle; }
|
|
.shrect.ta-3 text, .shtxt.ta-3 text { text-anchor: end; }
|
|
.shrect.ta-1 textarea, .shtxt.ta-1 textarea { text-align: left; }
|
|
.shrect.ta-2 textarea, .shtxt.ta-2 textarea { text-align: center; }
|
|
.shrect.ta-3 textarea, .shtxt.ta-3 textarea { text-align: right; }
|
|
.shtxt textarea { caret-color: rgb(73, 80, 87); }
|
|
.shtxt text { fill:rgb(73, 80, 87); }
|
|
.shtxt [data-key="main"] { fill: transparent; stroke: transparent; }
|
|
.shtxt.select [data-key="main"], .shtxt.highlight [data-key="main"] { stroke: rgb(108 187 247 / 51%); stroke-width: 2px; }
|
|
|
|
.shrhomb.highlight [data-key="border"] { stroke-width: 28px; stroke: rgb(108 187 247 / 51%); }
|
|
.shrhomb.highlight [data-key="main"] { stroke-width:18px; stroke:#1D809F; }
|
|
|
|
.cl-red [data-key="main"] { fill: #E74C3C; } .cl-red .path { stroke: #E74C3C;}
|
|
.cl-orange [data-key="main"] { fill: #ff6600;} .cl-orange .path { stroke: #ff6600;}
|
|
.cl-green [data-key="main"] { fill: #19bc9b;} .cl-green .path { stroke: #19bc9b;}
|
|
.cl-blue [data-key="main"] { fill: #1aaee5;} .cl-blue .path { stroke: #1aaee5;}
|
|
.cl-dblue [data-key="main"] { fill: #1D809F;} .cl-dblue .path { stroke: #1D809F;}
|
|
.cl-dgray [data-key="main"] { fill: #495057;} .cl-dgray .path { stroke: #495057;}
|
|
|
|
.shtxt.cl-red [data-key="main"] { fill: transparent; } .shtxt.cl-red text { fill: #E74C3C; }
|
|
.shtxt.cl-orange [data-key="main"] { fill: transparent; } .shtxt.cl-orange text { fill: #ff6600; }
|
|
.shtxt.cl-green [data-key="main"] { fill: transparent; } .shtxt.cl-green text { fill: #19bc9b; }
|
|
.shtxt.cl-blue [data-key="main"] { fill: transparent; } .shtxt.cl-blue text { fill: #1aaee5; }
|
|
.shtxt.cl-dblue [data-key="main"] { fill: transparent; } .shtxt.cl-dblue text { fill: #1D809F; }
|
|
.shtxt.cl-dgray [data-key="main"] { fill: transparent; } .shtxt.cl-dgray text { fill: #495057; }
|
|
|
|
.shrhomb.cl-red [data-key="main"] { stroke-width:18px; stroke:#E74C3C; }
|
|
.shrhomb.cl-orange [data-key="main"] { stroke-width:18px; stroke:#ff6600; }
|
|
.shrhomb.cl-green [data-key="main"] { stroke-width:18px; stroke:#19bc9b; }
|
|
.shrhomb.cl-blue [data-key="main"] { stroke-width:18px; stroke:#1aaee5; }
|
|
.shrhomb.cl-dblue [data-key="main"] { stroke-width:18px; stroke:#1D809F; }
|
|
.shrhomb.cl-dgray [data-key="main"] { stroke-width:18px; stroke:#495057; } |