mirror of
https://github.com/idolpx/csdb-ng.git
synced 2025-12-05 20:28:49 -05:00
2013 lines
36 KiB
CSS
2013 lines
36 KiB
CSS
@font-face {
|
|
font-family: "Open Sans";
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
src: url("./assets/open-sans-v17-latin-ext_latin-regular.eot"); /* IE9 Compat Modes */
|
|
src: local("Open Sans Regular"), local("OpenSans-Regular"),
|
|
url("./assets/open-sans-v17-latin-ext_latin-regular.eot?#iefix")
|
|
format("embedded-opentype"),
|
|
/* IE6-IE8 */ url("./assets/open-sans-v17-latin-ext_latin-regular.woff2")
|
|
format("woff2"),
|
|
/* Super Modern Browsers */
|
|
url("./assets/open-sans-v17-latin-ext_latin-regular.woff")
|
|
format("woff"),
|
|
/* Modern Browsers */
|
|
url("./assets/open-sans-v17-latin-ext_latin-regular.ttf")
|
|
format("truetype"),
|
|
/* Safari, Android, iOS */
|
|
url("./assets/open-sans-v17-latin-ext_latin-regular.svg#OpenSans")
|
|
format("svg"); /* Legacy iOS */
|
|
}
|
|
|
|
/* open-sans-600 - latin-ext_latin */
|
|
@font-face {
|
|
font-family: "Open Sans";
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
src: url("./assets/open-sans-v17-latin-ext_latin-600.eot"); /* IE9 Compat Modes */
|
|
src: local("Open Sans SemiBold"), local("OpenSans-SemiBold"),
|
|
url("./assets/open-sans-v17-latin-ext_latin-600.eot?#iefix")
|
|
format("embedded-opentype"),
|
|
/* IE6-IE8 */ url("./assets/open-sans-v17-latin-ext_latin-600.woff2")
|
|
format("woff2"),
|
|
/* Super Modern Browsers */
|
|
url("./assets/open-sans-v17-latin-ext_latin-600.woff") format("woff"),
|
|
/* Modern Browsers */
|
|
url("./assets/open-sans-v17-latin-ext_latin-600.ttf")
|
|
format("truetype"),
|
|
/* Safari, Android, iOS */
|
|
url("./assets/open-sans-v17-latin-ext_latin-600.svg#OpenSans")
|
|
format("svg"); /* Legacy iOS */
|
|
}
|
|
|
|
/* open-sans-700 - latin-ext_latin */
|
|
@font-face {
|
|
font-family: "Open Sans";
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
src: url("./assets/open-sans-v17-latin-ext_latin-700.eot"); /* IE9 Compat Modes */
|
|
src: local("Open Sans Bold"), local("OpenSans-Bold"),
|
|
url("./assets/open-sans-v17-latin-ext_latin-700.eot?#iefix")
|
|
format("embedded-opentype"),
|
|
/* IE6-IE8 */ url("./assets/open-sans-v17-latin-ext_latin-700.woff2")
|
|
format("woff2"),
|
|
/* Super Modern Browsers */
|
|
url("./assets/open-sans-v17-latin-ext_latin-700.woff") format("woff"),
|
|
/* Modern Browsers */
|
|
url("./assets/open-sans-v17-latin-ext_latin-700.ttf")
|
|
format("truetype"),
|
|
/* Safari, Android, iOS */
|
|
url("./assets/open-sans-v17-latin-ext_latin-700.svg#OpenSans")
|
|
format("svg"); /* Legacy iOS */
|
|
}
|
|
|
|
html, body {
|
|
margin: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
html,
|
|
body,
|
|
#root,
|
|
.app-layout,
|
|
.aside-left,
|
|
.aside-right,
|
|
.diagram {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.diagram {
|
|
overflow: auto;
|
|
background: #333;
|
|
}
|
|
|
|
.main-area {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
html,
|
|
body,
|
|
div,
|
|
p,
|
|
span,
|
|
a,
|
|
td,
|
|
ul,
|
|
li {
|
|
font-family: "Open Sans", "Exo";
|
|
}
|
|
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
padding: 4px 0;
|
|
margin: 0;
|
|
font-family: "Open Sans", "Exo";
|
|
font-weight: 400;
|
|
}
|
|
|
|
h1 strong,
|
|
h1 b,
|
|
h2 strong,
|
|
h2 b,
|
|
h3 strong,
|
|
h3 b,
|
|
h4 strong,
|
|
h4 b,
|
|
h5 strong,
|
|
h5 b,
|
|
h6 strong,
|
|
h6 b {
|
|
font-weight: 700;
|
|
}
|
|
|
|
p {
|
|
padding: 1px 0;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.diagram {
|
|
position: relative;
|
|
}
|
|
|
|
.t {
|
|
position: relative;
|
|
border-radius: 3px;
|
|
box-shadow: 4px 4px 8px -8px black;
|
|
border: 1px solid rgba(0, 0, 0, 0.3);
|
|
z-index: 10 !important;
|
|
margin: 1px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 44px;
|
|
min-width: 150px;
|
|
min-width: fit-content;
|
|
}
|
|
|
|
path {
|
|
z-index: 10 !important;
|
|
}
|
|
|
|
.t-max-content {
|
|
min-width: max-content;
|
|
}
|
|
|
|
.t-fixed-min {
|
|
min-width: 150px;
|
|
}
|
|
|
|
|
|
.drgbl:after {
|
|
content: "";
|
|
display: inline-block;
|
|
opacity: 0;
|
|
height: 20px;
|
|
width: 1px;
|
|
position: absolute;
|
|
bottom: -20px;
|
|
left: 0;
|
|
}
|
|
|
|
.im-n {
|
|
position: relative;
|
|
border-radius: 3px;
|
|
border: 1px solid transparent;
|
|
z-index: 5;
|
|
margin: 1px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 24px;
|
|
min-width: 50px;
|
|
}
|
|
|
|
.im-n-sa {
|
|
position: absolute;
|
|
border-radius: 3px;
|
|
border: 1px solid transparent;
|
|
z-index: 1;
|
|
margin: 1px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 150px;
|
|
min-height: 50px;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.im-n-sa > div {
|
|
padding:10px;
|
|
padding-top: 30px;
|
|
}
|
|
|
|
.im-n-sa-type {
|
|
min-width: 150px;
|
|
min-height: 50px;
|
|
}
|
|
|
|
.im-n-sa-type > div {
|
|
padding:10px;
|
|
padding-top: 30px;
|
|
}
|
|
|
|
.im-n-sa-header {
|
|
position: absolute;
|
|
border-radius: 3px;
|
|
border: 1px solid transparent;
|
|
z-index: 10;
|
|
display: flex;
|
|
flex-direction: column;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
background: rgba(0, 0, 0, 0.15);
|
|
pointer-events: all !important;
|
|
cursor: move;
|
|
min-width: 150px;
|
|
min-height: 24px !important;
|
|
max-height: 24px;
|
|
|
|
}
|
|
|
|
.im-n-sa-header-text {
|
|
padding: 4px 10px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.im-n-other {
|
|
position: relative;
|
|
border-radius: 3px;
|
|
border: 1px solid transparent;
|
|
z-index: 8;
|
|
margin: 1px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 150px;
|
|
min-height: 44px;
|
|
}
|
|
|
|
.sel-item-sa {
|
|
z-index: 2;
|
|
}
|
|
|
|
.im-n img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.im-tp {
|
|
position: absolute;
|
|
background: #fff;
|
|
border-radius: 3px;
|
|
box-shadow: 4px 4px 8px -8px black;
|
|
border: 1px dashed #666;
|
|
overflow: auto;
|
|
z-index: 1;
|
|
margin: 1px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: #f9f9f9;
|
|
}
|
|
|
|
.t a,
|
|
.im-n a,
|
|
.im-tp a {
|
|
text-decoration: none;
|
|
color: black;
|
|
}
|
|
|
|
#mainHtmlCanvas {
|
|
transform-origin: 0 0;
|
|
}
|
|
|
|
.watermark {
|
|
opacity: 0.25;
|
|
width: 200px;
|
|
height: 200px;
|
|
}
|
|
|
|
.dGraphicsHeader {
|
|
display: flex;
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.15);
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
background: #666;
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
color: #fff;
|
|
height: 22px;
|
|
min-width: fit-content;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.dTableName {
|
|
padding: 3px 0 1px 3px;
|
|
user-select: none;
|
|
font-weight: 700;
|
|
text-shadow: 0 0 1px #000;
|
|
}
|
|
|
|
.dTableNameLight {
|
|
padding: 3px 0 1px 3px;
|
|
user-select: none;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.dGraphicsLeftTop {
|
|
margin-right: auto;
|
|
padding: 2px 4px;
|
|
}
|
|
|
|
.dGraphicsRightTop {
|
|
margin-left: auto;
|
|
padding: 2px 4px;
|
|
}
|
|
|
|
.im-tp .dGraphicsHeader {
|
|
display: flex;
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.15);
|
|
font-size: 15px;
|
|
cursor: pointer;
|
|
background: #666;
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
color: #fff;
|
|
}
|
|
|
|
.im-tp .dTableName {
|
|
padding: 1px 0 1px 0;
|
|
cursor: move;
|
|
user-select: none;
|
|
text-align: left;
|
|
}
|
|
|
|
.t a.gr {
|
|
background: #404040;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
user-select: none;
|
|
flex-grow: 1;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.dCols,
|
|
.im-n-text {
|
|
padding: 2px 4px;
|
|
font-size: 13px;
|
|
overflow: auto;
|
|
min-height: auto;
|
|
min-width: auto;
|
|
color: #fff;
|
|
background: #404040;
|
|
user-select: none;
|
|
flex-grow: 1;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.dCols-report {
|
|
margin-top: 20px;
|
|
grid-column: span 4;
|
|
padding: 15px;
|
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.im-n-text {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.im-n-text-nowrap div,
|
|
.im-n-text-nowrap p,
|
|
.im-n-text-nowrap h1,
|
|
.im-n-text-nowrap h2,
|
|
.im-n-text-nowrap h3,
|
|
.im-n-text-nowrap h4,
|
|
.im-n-text-nowrap h5,
|
|
.im-n-text-nowrap h6,
|
|
.im-n-text-nowrap ul,
|
|
.im-n-text-nowrap ol {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.im-table-columns-displayed {
|
|
opacity: 1;
|
|
}
|
|
|
|
.im-table-columns-hidden {
|
|
opacity: 0;
|
|
max-height: 1px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.im-table-descriptions-hidden,
|
|
.im-table-indexes-hidden
|
|
{
|
|
display: none;
|
|
}
|
|
|
|
.im-table-descriptions-displayed {
|
|
display: block;
|
|
margin-top: 5px;
|
|
margin-bottom: 3px;
|
|
}
|
|
|
|
.im-table-indexes-displayed {
|
|
margin-top: 5px;
|
|
padding-top: 5px;
|
|
border-top: 1px solid rgba(0, 0, 0, 0.3);
|
|
color: #ccc;
|
|
}
|
|
|
|
.im-table-descriptions-displayed {
|
|
padding: 5px;
|
|
position: absolute;
|
|
top: 100%;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.im-table-descriptions-displayed div,
|
|
.im-table-descriptions-hidden div {
|
|
white-space: pre-wrap;
|
|
word-wrap: break-word;
|
|
word-break: break-word;
|
|
|
|
font-size: 12px;
|
|
}
|
|
|
|
.dCols-desc pre {
|
|
white-space: pre-wrap;
|
|
padding: 5px;
|
|
font-size: 13px;
|
|
font-family: "Courier New", Courier, monospace;
|
|
overflow: auto;
|
|
margin: 0;
|
|
color: beige;
|
|
}
|
|
|
|
.dCols-desc-nowrap pre {
|
|
white-space: revert;
|
|
}
|
|
|
|
|
|
.im-n-text p {
|
|
margin: 0;
|
|
}
|
|
|
|
.im-n-text a {
|
|
color: #2196f3;
|
|
}
|
|
|
|
pre.im-n-text {
|
|
padding: 0;
|
|
margin: 0;
|
|
font-family: "Open sans";
|
|
}
|
|
|
|
.im-tp-text {
|
|
padding: 5px 4px 2px 4px;
|
|
font-size: 13px;
|
|
overflow: auto;
|
|
min-height: auto;
|
|
min-width: auto;
|
|
color: #555;
|
|
user-select: none;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.dRow {
|
|
display: grid;
|
|
grid-template-columns: 25px fit-content(150px) 1fr minmax(auto, 24px);
|
|
border-radius: 2px;
|
|
min-height: 18px;
|
|
}
|
|
|
|
.dRow-thin {
|
|
grid-template-columns: 5px fit-content(150px) 1fr auto 200px 200px;
|
|
}
|
|
|
|
#diagram .dRow-thin {
|
|
grid-template-columns: 5px fit-content(150px) 1fr minmax(auto, 24px);
|
|
}
|
|
|
|
.dCol {
|
|
margin-right: 0;
|
|
font-size: 12px;
|
|
min-height: 17px;
|
|
}
|
|
|
|
.dItem {
|
|
font-size: 12px;
|
|
min-height: 17px;
|
|
padding: 0 2px 0;
|
|
}
|
|
|
|
.dCol:nth-of-type(2),
|
|
.dCol:nth-of-type(3) {
|
|
white-space: nowrap;
|
|
margin-right: 0;
|
|
font-weight: 400;
|
|
margin-right: 0px;
|
|
}
|
|
|
|
.dCol:nth-of-type(3) {
|
|
font-style: italic;
|
|
color: #ddd;
|
|
padding-left: 4px;
|
|
padding-right: 10px;
|
|
text-align: right;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.dCol:last-of-type {
|
|
margin-right: auto;
|
|
padding-left: 5px;
|
|
}
|
|
|
|
|
|
.t:hover:not(.sel-item-diagram),
|
|
.im-n:hover:not(.sel-item-diagram) {
|
|
transition: box-shadow 0.4s;
|
|
}
|
|
|
|
.sel-item-diagram,
|
|
.sel-item-diagram-multi,
|
|
.sel-item-diagram:hover {
|
|
z-index: 100;
|
|
outline: none;
|
|
outline-offset: 0px;
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
.res {
|
|
display: none;
|
|
}
|
|
|
|
.sel-item-diagram-multi .res {
|
|
display: none;
|
|
}
|
|
|
|
.sel-item-diagram .res {
|
|
display: block;
|
|
}
|
|
|
|
marker path {
|
|
stroke-width: 1;
|
|
}
|
|
|
|
path {
|
|
fill: none;
|
|
stroke-width: 1;
|
|
cursor: pointer;
|
|
}
|
|
|
|
circle.relationCardinality {
|
|
fill: #585858;
|
|
stroke: #ddd;
|
|
stroke-width: 1;
|
|
}
|
|
|
|
#svgMain {
|
|
position: absolute;
|
|
background: linear-gradient(45deg, #f2f2f2, #ddd, #f2f2f2, #eee);
|
|
background: #585858;
|
|
border: 0;
|
|
z-index: 2;
|
|
}
|
|
|
|
.sel-relation-diagram {
|
|
stroke: #000;
|
|
}
|
|
|
|
.sel-relation-diagram-arrow {
|
|
fill: #000;
|
|
}
|
|
|
|
.relation-diagram-bg {
|
|
stroke: rgba(0, 0, 0, 0.01);
|
|
stroke-width: 5px;
|
|
z-index: 0;
|
|
}
|
|
|
|
.sel-relation-diagram-bg {
|
|
stroke: #3faaff;
|
|
}
|
|
|
|
text,
|
|
tspan {
|
|
user-select: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.rbelongs {
|
|
/*stroke-dasharray: 3;*/
|
|
}
|
|
|
|
.rboth {
|
|
/*stroke-dasharray: 10, 5, 2, 2, 2, 5;*/
|
|
}
|
|
|
|
|
|
.rCardinality {
|
|
font-size: 10px;
|
|
fill: #eee;
|
|
color: #eee;
|
|
}
|
|
|
|
.rLineGraphicsCaption {
|
|
font-size: 12px;
|
|
fill: #eee;
|
|
color: #eee;
|
|
}
|
|
|
|
.rCardinalityBg {
|
|
font-size: 10px;
|
|
stroke-width: 4px;
|
|
fill: #333;
|
|
stroke:#333;
|
|
}
|
|
.im-t-c {
|
|
display: table-cell;
|
|
}
|
|
|
|
.im-t-c:not(:nth-of-type(1)):not(:nth-of-type(3)) {
|
|
padding-right: 4px;
|
|
}
|
|
|
|
.im-mini {
|
|
font-size: 11px;
|
|
padding-bottom: 1px;
|
|
}
|
|
|
|
|
|
.im-mini-PK, .im-mini-PI {
|
|
background: #ff0000;
|
|
font-size: 10px;
|
|
padding: 0 2px;
|
|
border-radius: 2px;
|
|
margin-right: 5px;
|
|
color: #fff;
|
|
text-align: center;
|
|
position: relative;
|
|
top: 2px;
|
|
}
|
|
|
|
.im-mini-PFK, .im-mini-PL {
|
|
background: #2196f3;
|
|
font-size: 10px;
|
|
padding: 0 2px;
|
|
border-radius: 2px;
|
|
margin-right: 5px;
|
|
color: #fff;
|
|
text-align: center;
|
|
position: relative;
|
|
top: 2px;
|
|
}
|
|
|
|
.im-mini-FK {
|
|
background: #4caf50;
|
|
font-size: 10px;
|
|
padding: 0 2px;
|
|
border-radius: 2px;
|
|
margin-right: 5px;
|
|
color: #fff;
|
|
text-align: center;
|
|
position: relative;
|
|
top: 2px;
|
|
}
|
|
.im-mini-IX {
|
|
background: #8F5D00;
|
|
font-size: 10px;
|
|
padding: 0 2px;
|
|
border-radius: 2px;
|
|
margin-right: 5px;
|
|
color: #fff;
|
|
text-align: center;
|
|
position: relative;
|
|
top: 2px;
|
|
}
|
|
|
|
.im-mini-AK, .im-mini-AI {
|
|
background: #B20DA2;
|
|
font-size: 10px;
|
|
padding: 0 2px;
|
|
border-radius: 2px;
|
|
margin-right: 5px;
|
|
color: #fff;
|
|
text-align: center;
|
|
position: relative;
|
|
top: 2px;
|
|
}
|
|
|
|
.im-embedded {
|
|
margin-left: 0;
|
|
padding-left: 0;
|
|
grid-column: span 4;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.im-embedded-thin {
|
|
background: rgba(0, 0, 0, 0.15);
|
|
margin-left: 14px;
|
|
padding-left: 0px;
|
|
}
|
|
|
|
.im-col-list {
|
|
color: limegreen;
|
|
padding-right: 1px;
|
|
padding-left: 1px;
|
|
font-style: normal;
|
|
}
|
|
|
|
.im-col-object-left {
|
|
color: goldenrod;
|
|
padding-right: 1px;
|
|
font-style: normal;
|
|
display: inline-block;
|
|
}
|
|
|
|
.im-col-object-right {
|
|
color: goldenrod;
|
|
padding-left: 1px;
|
|
font-style: normal;
|
|
display: inline-block;
|
|
}
|
|
|
|
.im-select-decorator {
|
|
position: absolute;
|
|
height: 100px;
|
|
width: 100px;
|
|
left: 50px;
|
|
top: 50px;
|
|
border: 2px dotted #ccc;
|
|
z-index: 9999;
|
|
}
|
|
|
|
.im-other-object {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
padding: 1px 4px;
|
|
}
|
|
|
|
.im-other-object-type {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 8px;
|
|
opacity: 0.6;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.im-backgroundImageGrid {
|
|
background-image: url(backgroundImageGrid.svg);
|
|
}
|
|
|
|
.im-backgroundImageSquares {
|
|
background-image: url(backgroundImageSquares.svg);
|
|
}
|
|
|
|
.im-backgroundImageTriangles {
|
|
background-image: url(backgroundImageTriangles.svg);
|
|
}
|
|
|
|
.im-backgroundImageBricks {
|
|
background-image: url(backgroundImageBricks.svg);
|
|
}
|
|
|
|
.im-z-index-8 {
|
|
z-index: 8;
|
|
}
|
|
|
|
.sel-item-diagram-multi.im-z-index-4,.im-z-index-4 {
|
|
z-index: 4 !important;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.sel-item-diagram-multi.im-z-index-4 div,.im-z-index-4 div {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.im-dropdown ul li.im-dropdown-icon-empty {
|
|
display: grid;
|
|
grid-template-columns: 21px 1fr;
|
|
}
|
|
|
|
|
|
|
|
.forcedLineColor {
|
|
stroke: white !important;
|
|
}
|
|
|
|
polygon.forcedPolygonFill, circle.forcedPolygonFill, tspan.forcedPolygonFill {
|
|
fill: white !important;
|
|
stroke-width: 0;
|
|
}
|
|
|
|
.forcedTransparentFill {
|
|
fill: rgb(51, 51, 51) !important;
|
|
|
|
}
|
|
|
|
.im-icon-ResizeBottomRight16 {
|
|
display: none;
|
|
}
|
|
|
|
.tree__wrapper {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
height: max-content;
|
|
width: max-content;
|
|
z-index: 10;
|
|
}
|
|
|
|
.tree__wrapper * {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.tree__spacer {
|
|
height: 40px;
|
|
width: 100%;
|
|
display: block;
|
|
}
|
|
|
|
.tree__mini__toolbar {
|
|
position: sticky;
|
|
top: 0;
|
|
width: 100%;
|
|
left: 0;
|
|
right: 0;
|
|
margin: auto;
|
|
height: 24px;
|
|
background: #282828;
|
|
z-index: 9999;
|
|
display: flex;
|
|
box-shadow: 0px 0px 5px -2px #000;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-left: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-right: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-bottom-left-radius: 5px;
|
|
border-bottom-right-radius: 5px;
|
|
}
|
|
|
|
.tree__item__root {
|
|
display: flex;
|
|
color: #eee;
|
|
position: relative;
|
|
margin-bottom: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.tree__item__root__wrapper {
|
|
display: flex;
|
|
margin: 15px 20px;
|
|
}
|
|
|
|
.tree__item__hidden__caption__text {
|
|
padding-left: 10px;
|
|
font-size: 12px;
|
|
width: max-content;
|
|
display: inline-block;
|
|
color: #999;
|
|
padding-top: 4px;
|
|
}
|
|
|
|
.tree__item__hidden__caption__text::after {
|
|
font-family: "im-line-icons" !important;
|
|
content: "";
|
|
background: transparent;
|
|
width: 20px;
|
|
height: 100%;
|
|
color: #999;
|
|
position: absolute;
|
|
top: 4px;
|
|
left: auto;
|
|
opacity: 0.6;
|
|
font-size: 10px;
|
|
padding-left: 5px;
|
|
padding-top: 4px;
|
|
}
|
|
|
|
.tree__item__root__name {
|
|
font-size: 12px;
|
|
display: inline-block;
|
|
width: fit-content;
|
|
align-self: center;
|
|
padding: 0;
|
|
border: 1px solid transparent;
|
|
background: #404040;
|
|
padding: 1px 8px 1px 5px;
|
|
width: max-content;
|
|
min-width: 50px;
|
|
}
|
|
|
|
.tree__item {
|
|
display: flex;
|
|
margin: 0px 0px 0px 0px;
|
|
width: fit-content;
|
|
font-size: 10px;
|
|
position: relative;
|
|
padding-left: 20px;
|
|
padding-top: 3px;
|
|
padding-bottom: 3px;
|
|
}
|
|
|
|
.tree__item:not(.t__tree__item__single__line):first-of-type::before {
|
|
content: " ";
|
|
position: absolute;
|
|
left: 2px;
|
|
top: 50%;
|
|
height: 50%;
|
|
width: 0;
|
|
border-left: thin solid #eee;
|
|
}
|
|
|
|
.tree__item:not(.t__tree__item__single__line):last-of-type::before {
|
|
content: " ";
|
|
position: absolute;
|
|
left: 2px;
|
|
top: 0%;
|
|
height: 50%;
|
|
width: 0;
|
|
border-left: thin solid #eee;
|
|
}
|
|
|
|
.tree__item.t__tree__item__single__line {
|
|
padding-left: 0 !important;
|
|
}
|
|
|
|
.tree__item__single__line::before {
|
|
content: " ";
|
|
width: 0px;
|
|
height: 0;
|
|
background: transparent;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: -21px;
|
|
border-bottom: thin solid #eee;
|
|
}
|
|
|
|
.tree__item__first__line::before {
|
|
content: " ";
|
|
width: 21px;
|
|
height: 0;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: -21px;
|
|
border-top: thin solid #eee;
|
|
}
|
|
|
|
.tree__item__last__line::before {
|
|
content: " ";
|
|
width: 21px;
|
|
height: 0;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: -21px;
|
|
border-top: thin solid #eee;
|
|
}
|
|
|
|
.tree__item__middle__line::before {
|
|
content: " ";
|
|
width: 20px;
|
|
height: 0;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: -21px;
|
|
border-top: thin solid #eee;
|
|
}
|
|
|
|
.t__tree__item__middle__line::before {
|
|
content: " ";
|
|
position: absolute;
|
|
left: 2px;
|
|
top: 0%;
|
|
height: 100%;
|
|
width: 0;
|
|
border-left: thin solid #eee;
|
|
}
|
|
|
|
.tree__spec {
|
|
white-space: pre-wrap;
|
|
font-style: normal;
|
|
color: #ccc;
|
|
background: #333;
|
|
padding: 3px 4px 0px 4px;
|
|
font-size: 10px;
|
|
border-radius: 4px;
|
|
margin-top: 1px;
|
|
}
|
|
|
|
.tree__prop__key {
|
|
color: goldenrod;
|
|
max-width: 180px;
|
|
text-overflow: ellipsis;
|
|
display: inline-block;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
width: auto;
|
|
padding-right: 10px;
|
|
}
|
|
|
|
.tree__prop__value {
|
|
color: #ccc;
|
|
max-width: 180px;
|
|
text-overflow: ellipsis;
|
|
display: inline-block;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.tree__prop__comment {
|
|
color: limegreen;
|
|
max-width: 180px;
|
|
display: inline-block;
|
|
overflow: hidden;
|
|
padding-left: 2px;
|
|
font-size: 11px;
|
|
border-radius: 4px;
|
|
padding-right: 5px;
|
|
}
|
|
|
|
.tree__item__named {
|
|
display: inline-block;
|
|
width: fit-content;
|
|
align-self: center;
|
|
padding: 0;
|
|
border: thin solid transparent;
|
|
position: relative;
|
|
margin-right: 28px;
|
|
}
|
|
|
|
.tree__expander__icon__left > i.im-icon-MinusCircle16::after {
|
|
content: " ";
|
|
width: 15px;
|
|
height: 0;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 100%;
|
|
background: transparent;
|
|
border-bottom: thin solid #eee;
|
|
}
|
|
|
|
.tree__item__bg {
|
|
background: #404040;
|
|
border: thin dashed rgba(255, 255, 255, 0.2);
|
|
box-shadow: 4px 4px 8px -8px black;
|
|
padding: 3px;
|
|
width: max-content;
|
|
position: relative;
|
|
}
|
|
|
|
.tree__item__spec__bg span {
|
|
padding: 3px;
|
|
display: inline-block;
|
|
}
|
|
|
|
.tree__item__required {
|
|
border: thin solid rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.tree_padding_sm {
|
|
padding: 3px;
|
|
}
|
|
|
|
.tree__item__sub {
|
|
display: inline-block;
|
|
margin: 0;
|
|
left: 0px;
|
|
position: relative;
|
|
align-self: center;
|
|
}
|
|
|
|
.group {
|
|
/*background: url(bg-vertical.svg);*/
|
|
background-repeat: repeat-y;
|
|
background-position-x: 20px;
|
|
background-position-y: center;
|
|
background-size: 1px 100%;
|
|
}
|
|
|
|
.tree__expander__icon {
|
|
align-self: center;
|
|
position: relative;
|
|
left: -6px;
|
|
top: 1;
|
|
background: #404040;
|
|
border-radius: 100%;
|
|
box-shadow: 4px 4px 8px -6px black;
|
|
cursor: pointer;
|
|
padding: 1px;
|
|
width: 15px;
|
|
height: 15px;
|
|
z-index: 999;
|
|
}
|
|
|
|
.tree__expander__icon__left {
|
|
align-self: center;
|
|
display: block;
|
|
cursor: pointer;
|
|
padding: 1px;
|
|
width: 15px;
|
|
height: 15px;
|
|
z-index: 999;
|
|
position: absolute;
|
|
right: -15px;
|
|
top: 0;
|
|
bottom: 0;
|
|
margin: auto;
|
|
}
|
|
|
|
.tree__expander__icon__left i.im-icon-FullCircle {
|
|
position: absolute;
|
|
top: 0px;
|
|
left: -5px;
|
|
width: 15px;
|
|
height: 15px;
|
|
color: #404040;
|
|
}
|
|
|
|
.tree__expander__icon__left i.im-icon-MinusCircle16, .tree__expander__icon__left i.im-icon-PlusCircle16 {
|
|
position: relative;
|
|
left: -6px;
|
|
background: transparent;
|
|
border-radius: 100%;
|
|
color: #fff;
|
|
}
|
|
|
|
.tree__flex__rows {
|
|
display: flex;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.tree__flex {
|
|
display: flex;
|
|
}
|
|
|
|
.tree__select {
|
|
padding: 0;
|
|
width: 100%;
|
|
max-width: 100% !important;
|
|
}
|
|
|
|
.tree__select option {
|
|
padding: 1px;
|
|
width: 80px;
|
|
}
|
|
|
|
.tree__input {
|
|
width: 100%;
|
|
min-width: 60px;
|
|
border: thin solid transparent;
|
|
border-bottom-color: transparent;
|
|
border-bottom-style: solid;
|
|
border-bottom-width: 1px;
|
|
border-radius: 2px;
|
|
padding: 0 2px;
|
|
font-family: "Open Sans";
|
|
font-size: 12px;
|
|
}
|
|
|
|
.tree__item input, .tree__item__rootbox input {
|
|
background: #404040;
|
|
border-bottom: 1px solid transparent;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.tree__item__box {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
grid-gap: 4px;
|
|
}
|
|
|
|
.tree__item__rootbox {
|
|
display: grid;
|
|
grid-template-columns: 15px 1fr;
|
|
grid-gap: 0;
|
|
}
|
|
|
|
.tree__item__type {
|
|
text-align: center;
|
|
}
|
|
|
|
.tree__item__req {
|
|
display: inline-block;
|
|
align-self: right;
|
|
background: rgba(0, 0, 0, 0.2);
|
|
margin: 0 4px;
|
|
padding: 1px 4px 1px 4px;
|
|
border-radius: 4px;
|
|
color: #eee;
|
|
}
|
|
|
|
.tree__item__last {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
}
|
|
|
|
.tree__item__last > div > div {
|
|
margin: 1px 4px 4px 4px;
|
|
}
|
|
|
|
.tree__item__last > div > span:first-of-type {
|
|
margin: 1px 0px 1px 4px;
|
|
padding-top: 3px;
|
|
}
|
|
|
|
|
|
.tree__required {
|
|
color: #eee;
|
|
padding-right: 2px;
|
|
display: inline-block;
|
|
font-style: normal;
|
|
font-size: 9px;
|
|
}
|
|
|
|
.tree__item__inputwrapper {
|
|
padding-right: 5px;
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
font-size: 11px;
|
|
color: #eee;
|
|
}
|
|
|
|
.tree__condition__wrapper .tree__item__inputwrapper {
|
|
padding-right: 0;
|
|
}
|
|
.tree__condition__wrapper .tree__item__last {
|
|
padding-left: 0;
|
|
}
|
|
|
|
.tree__key__inputwrapper .tree__input {
|
|
color: #ccc;
|
|
}
|
|
|
|
.tree__key__inputwrapper {
|
|
padding-right: 3px;
|
|
padding-left: 2px;
|
|
display: grid;
|
|
grid-template-columns: auto 1fr;
|
|
font-size: 10px;
|
|
color: #eee;
|
|
}
|
|
|
|
.tree__item__icon {
|
|
font-size: 11px;
|
|
position: relative;
|
|
top: 1px;
|
|
}
|
|
|
|
.tree__icon__array {
|
|
font-size: 11px;
|
|
color: limegreen;
|
|
padding-right: 4px;
|
|
padding-left: 1px;
|
|
font-style: normal;
|
|
}
|
|
|
|
.tree__icon__array__mini {
|
|
font-size: 8px;
|
|
color: limegreen;
|
|
padding-right: 2px;
|
|
padding-left: 1px;
|
|
position: relative;
|
|
bottom: 1px;
|
|
font-style: italic;
|
|
}
|
|
|
|
.tree__icon__multi {
|
|
font-size: 11px;
|
|
color: white;
|
|
padding-right: 4px;
|
|
padding-left: 1px;
|
|
font-style: normal;
|
|
}
|
|
|
|
.tree__icon__array i.im-icon-DotsVerticallDouble16 {
|
|
font-size: 10px;
|
|
color: limegreen;
|
|
padding: 0;
|
|
position: relative;
|
|
top: 1px;
|
|
}
|
|
|
|
.tree__icon__pattern {
|
|
font-size: 10px;
|
|
color: #999;
|
|
padding-right: 4px;
|
|
font-style: normal;
|
|
display: inline-block;
|
|
align-self: center;
|
|
}
|
|
|
|
.tree__icon__object {
|
|
font-size: 10px;
|
|
color: goldenrod;
|
|
padding-right: 4px;
|
|
font-style: normal;
|
|
display: inline-block;
|
|
align-self: center;
|
|
}
|
|
|
|
.tree__icon__object__mini {
|
|
font-size: 8px;
|
|
color: goldenrod;
|
|
padding-right: 2px;
|
|
position: relative;
|
|
bottom: 1px;
|
|
font-style: italic;
|
|
}
|
|
|
|
.tree__icon__object i.im-icon-ArrowLeft16 {
|
|
font-size: 9px;
|
|
color: goldenrod;
|
|
padding: 0;
|
|
position: relative;
|
|
top: 1px;
|
|
}
|
|
|
|
.tree__icon__ref i.im-icon-Type {
|
|
font-size: 9px;
|
|
color: #2196f3;
|
|
padding: 0;
|
|
position: relative;
|
|
top: 1px;
|
|
}
|
|
|
|
.tree__icon__ref i.im-icon-Table {
|
|
font-size: 9px;
|
|
color: goldenrod;
|
|
padding: 0;
|
|
position: relative;
|
|
top: 1px;
|
|
}
|
|
|
|
.tree__icon__object i.im-icon-Table {
|
|
font-size: 9px;
|
|
color: #eee;
|
|
padding: 0;
|
|
position: relative;
|
|
top: 1px;
|
|
}
|
|
|
|
.tree__icon__object i.im-icon-DotsVerticallDouble16 {
|
|
font-size: 10px;
|
|
color: goldenrod;
|
|
padding: 0;
|
|
position: relative;
|
|
top: 1px;
|
|
}
|
|
|
|
.tree__icon__condition {
|
|
background: darkmagenta;
|
|
color: rgba(255, 255, 255, 0.7);
|
|
padding-right: 1px;
|
|
font-style: normal;
|
|
display: inline-block;
|
|
font-size: 9px;
|
|
padding: 2px 4px;
|
|
min-width: 25px;
|
|
text-align: center;
|
|
border-radius: 5px;
|
|
bottom: 0;
|
|
position: relative;
|
|
top: -3px;
|
|
width: auto;
|
|
margin: 0 5px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.tree__icon__def {
|
|
color: goldenrod;
|
|
padding-right: 1px;
|
|
font-style: normal;
|
|
display: inline-block;
|
|
}
|
|
|
|
.tree__icon__referenced {
|
|
color: #2196f3;
|
|
padding-right: 4px;
|
|
font-style: normal;
|
|
display: inline-block;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.tree__ref__key {
|
|
color: #2196f3;
|
|
font-size: 11px;
|
|
max-width: 180px;
|
|
text-overflow: ellipsis;
|
|
display: inline-block;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.tree__datatype__name {
|
|
color: #999;
|
|
padding-left: 2px;
|
|
padding-right: 10px;
|
|
text-align: left;
|
|
margin-left: 0px;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.tree__item__index {
|
|
color: #eee;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.tree__item__hidden {
|
|
padding-right: 10px;
|
|
opacity: 0;
|
|
font-size: 12px;
|
|
line-height: 0;
|
|
padding-left: 3px;
|
|
}
|
|
|
|
.tree__item__hidden__caption {
|
|
opacity: 0;
|
|
position: sticky;
|
|
top: -2px;
|
|
bottom: unset;
|
|
height: 24px;
|
|
align-self: center;
|
|
z-index: -1;
|
|
width: 2px;
|
|
}
|
|
|
|
.tree__item__root svg {
|
|
position: absolute;
|
|
width: 45px;
|
|
height: 100%;
|
|
left: -5px;
|
|
top: 5px;
|
|
}
|
|
|
|
.tree__item__root line,
|
|
.tree__item__root path {
|
|
stroke-width: 1;
|
|
stroke: #fff;
|
|
}
|
|
|
|
#diagram-tree {
|
|
margin: 30px;
|
|
position: relative;
|
|
}
|
|
|
|
#diagram-tree svg {
|
|
margin: 2px;
|
|
}
|
|
|
|
#diagram-tree .im-mw-sm, #diagram-tree input.im-mw-sm, #diagram-tree select.im-mw-sm {
|
|
min-width: fit-content !important;
|
|
width: fit-content !important;
|
|
}
|
|
|
|
#diagram #svgMain {
|
|
top: 0px;
|
|
left: 0px;
|
|
background: transparent;
|
|
position: absolute;
|
|
height: 100%;
|
|
}
|
|
|
|
#diagram #mainHtmlCanvas {
|
|
height: 100%;
|
|
transform-origin: 0 0;
|
|
}
|
|
|
|
#diagram {
|
|
height: 100%;
|
|
width: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
.im-position-top-2 {
|
|
position: relative;
|
|
top: -2px;
|
|
}
|
|
|
|
.tree__key {
|
|
width: max-content;
|
|
align-self: center;
|
|
position: relative;
|
|
left: -1px;
|
|
background-position: -3px center;
|
|
background-repeat: no-repeat;
|
|
background-size: 28px 24px;
|
|
stroke: #ddd !important;
|
|
font-size: 10px;
|
|
color: #ccc;
|
|
box-shadow: 4px 4px 8px -8px black;
|
|
}
|
|
|
|
.tree__key__text {
|
|
color: #ccc;
|
|
font-size: 10px;
|
|
background: #404040;
|
|
border-radius: 8px;
|
|
min-width: 28px;
|
|
padding: 2px 5px 2px 5px;
|
|
}
|
|
|
|
.tree__key__text__mini {
|
|
font-size: 12px;
|
|
border-radius: 4px;
|
|
min-width: 28px;
|
|
min-height: 12px;
|
|
padding: 1px 6px 1px 0;
|
|
text-align: center;
|
|
color: #ccc;
|
|
}
|
|
|
|
.tree__mini__selected {
|
|
background: #0267b7;
|
|
border-radius: 4px;
|
|
position: relative;
|
|
left: -3px;
|
|
padding-left: 3px;
|
|
padding-right: 1px !important;
|
|
color: white;
|
|
max-height: 16px;
|
|
}
|
|
|
|
.im-arrow .tree__mini__clickable, .im-Arrow .tree__mini__clickable {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.im-arrow .tree__mini__clickable:hover, .im-Arrow .tree__mini__clickable:hover {
|
|
background: #222;
|
|
border-radius: 4px;
|
|
position: relative;
|
|
left: -3px;
|
|
padding-left: 3px;
|
|
padding-right: 1px !important;
|
|
color: white !important;
|
|
max-height: 16px;
|
|
}
|
|
|
|
.tree__mini__selected .tree__key__text__mini {
|
|
color: white;
|
|
}
|
|
|
|
.tree__choice, .tree__condition {
|
|
width: max-content;
|
|
align-self: center;
|
|
position: relative;
|
|
left: -1px;
|
|
background-position: -3px center;
|
|
background-repeat: no-repeat;
|
|
background-size: 28px 24px;
|
|
padding-left: 13px;
|
|
font-size: 10px;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
}
|
|
|
|
.tree__choice__mini {
|
|
background-size: 20px 16px;
|
|
background-position: -1px center;
|
|
padding-left: 12px;
|
|
background-repeat: no-repeat;
|
|
font-style: italic;
|
|
}
|
|
|
|
.tree__choice__oneOf {
|
|
background-image: url(oneOf-dark.svg);
|
|
}
|
|
|
|
.tree__choice__allOf {
|
|
background-image: url(allOf-dark.svg);
|
|
}
|
|
|
|
.tree__choice__anyOf {
|
|
background-image: url(anyOf-dark.svg);
|
|
}
|
|
|
|
.tree__choice__not {
|
|
background-image: url(not-dark.svg);
|
|
}
|
|
|
|
.tree__choice__wrapper {
|
|
background: darkgreen;
|
|
border-radius: 11px;
|
|
padding: 0 3px;
|
|
}
|
|
|
|
.tree__choice__text {
|
|
font-size: 10px;
|
|
background: darkgreen;
|
|
border-radius: 11px;
|
|
min-width: 28px;
|
|
padding: 5px 9px 3px 7px;
|
|
text-align: center;
|
|
}
|
|
|
|
.tree__choice__text__mini {
|
|
font-size: 10px;
|
|
background: darkgreen;
|
|
border-radius: 4px;
|
|
min-width: 28px;
|
|
min-height: 12px;
|
|
padding: 1px 6px 0px 4px;
|
|
text-align: center;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
font-style: italic;
|
|
}
|
|
|
|
.tree__condition {
|
|
background-position: 0 center;
|
|
padding-left: 16px;
|
|
}
|
|
|
|
.tree__condition__if {
|
|
background-image: url(if-dark.svg);
|
|
color: white;
|
|
}
|
|
|
|
.tree__condition__then {
|
|
background-image: url(then-dark.svg);
|
|
color: white;
|
|
}
|
|
|
|
.tree__condition__else {
|
|
background-image: url(else-dark.svg);
|
|
color: white;
|
|
}
|
|
|
|
.tree__condition__wrapper {
|
|
border-radius: 11px;
|
|
padding: 0 3px;
|
|
overflow: hidden;
|
|
background: #404040;
|
|
box-shadow: 4px 4px 8px -8px black;
|
|
}
|
|
|
|
.tree__condition__text {
|
|
font-size: 10px;
|
|
background: darkmagenta;
|
|
border-radius: 11px;
|
|
min-width: 24px;
|
|
padding: 5px 9px 3px 7px;
|
|
text-align: center;
|
|
color: white;
|
|
}
|
|
|
|
.tree__condition__text__mini {
|
|
font-size: 10px;
|
|
background: darkmagenta;
|
|
border-radius: 4px;
|
|
min-width: 28px;
|
|
min-height: 12px;
|
|
padding: 1px 6px 0px 4px;
|
|
text-align: center;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
font-style: italic;
|
|
}
|
|
|
|
input::placeholder {
|
|
color: #ccc;
|
|
font-style: italic;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.tree__bg__referenced, .tree__bg__subschema {
|
|
background: rgba(0, 0, 0, 0.1);
|
|
border: thin dashed rgba(255, 255, 255, 0.2);
|
|
padding: 15px 2px 15px 20px;
|
|
position: relative;
|
|
}
|
|
|
|
.tree__bg__referenced:before {
|
|
content: "Definition";
|
|
position: absolute;
|
|
top: 3px;
|
|
left: 5px;
|
|
color: #eee;
|
|
opacity: 0.3;
|
|
font-size: 8px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.tree__subschema {
|
|
position: relative;
|
|
}
|
|
|
|
.tree__subschema::before {
|
|
content: "Subschema";
|
|
position: absolute;
|
|
top: 5px;
|
|
left: 5px;
|
|
color: #eee;
|
|
opacity: 0.3;
|
|
font-size: 8px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.tree__bg__subschema::before {
|
|
content: " ";
|
|
width: 20px;
|
|
height: 0;
|
|
position: absolute;
|
|
top: calc(50% - 0.5px);
|
|
left: 0px;
|
|
border-top: thin solid #eee;
|
|
margin-bottom: 1px;
|
|
}
|
|
|
|
.tree__schema:before {
|
|
content: "Schema";
|
|
position: absolute;
|
|
top: -15px;
|
|
left: 1px;
|
|
color: #eee;
|
|
opacity: 0.5;
|
|
font-size: 8px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.tree__definition:before {
|
|
content: "Subschema";
|
|
position: absolute;
|
|
top: -15px;
|
|
left: 1px;
|
|
color: #eee;
|
|
opacity: 0.5;
|
|
font-size: 8px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.tree__ref:before {
|
|
content: "External ref";
|
|
position: absolute;
|
|
top: -15px;
|
|
left: 1px;
|
|
color: #eee;
|
|
opacity: 0.5;
|
|
font-size: 8px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.tree__condition__wrapper .tree__prop__comment {
|
|
background: #333;
|
|
border-bottom-left-radius: 8px;
|
|
border-bottom-right-radius: 8px;
|
|
padding: 3px 7px 2px 4px;
|
|
text-align: left;
|
|
}
|
|
|
|
.tree__item__hidden__caption[sticky-active] {
|
|
opacity: 1;
|
|
z-index: 9999;
|
|
}
|
|
|
|
@media print {
|
|
.mm-freeware #mainHtmlCanvas div.tree__item:nth-child(3n) .tree__item__bg::after, .mm-trial #mainHtmlCanvas div.tree__item:nth-child(3n) .tree__item__bg::after {
|
|
content: " Trial ";
|
|
display: inline-block;
|
|
position: absolute;
|
|
top: 1px;
|
|
left: 1px;
|
|
right: 1px;
|
|
bottom: 1px;
|
|
background: rgba(0, 0, 0, 0.8);
|
|
color: white;
|
|
padding: 0;
|
|
text-align: center;
|
|
padding-top: 5px;
|
|
}
|
|
}
|
|
|
|
|
|
.dCols-report .tree__flex__rows {
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
.sel-item-diagram-multi {
|
|
box-shadow: none;
|
|
outline: 0;
|
|
}
|
|
|
|
.sel-item-diagram, .sel-item-diagram:hover {
|
|
outline: 0;
|
|
box-shadow: 4px 4px 8px -8px black;
|
|
border: 1px solid rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
/**/
|
|
.im-display-none {
|
|
display: none;
|
|
}
|
|
|
|
.im-display-flex {
|
|
display: flex;
|
|
flex-grow: 1;
|
|
justify-content: center;
|
|
}
|
|
|
|
.im-display-inline-block {
|
|
display: inline-block;
|
|
}
|
|
|
|
.tree__input, .tree__input:focus, .tree__input:focus-visible {
|
|
outline: none;
|
|
}
|
|
|
|
.tree__empty_decorator {
|
|
display: inline-block;
|
|
min-width: 6px;
|
|
}
|
|
|
|
.im-text-opacity-50 {
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.mm-section-group {
|
|
display: none;
|
|
}
|
|
.im-bottom-box .im-customizations-displayed:first-of-type {
|
|
margin-top: 5px;
|
|
padding-top: 5px;
|
|
border-top-left-radius: 4px;
|
|
border-top-right-radius: 4px;
|
|
}
|
|
|
|
.dCols .im-customizations-displayed:last-of-type {
|
|
border-bottom-left-radius: 4px;
|
|
border-bottom-right-radius: 4px;
|
|
}
|
|
|
|
.im-customizations-displayed {
|
|
color: #ccc;
|
|
font-size: 12px;
|
|
padding: 1px 5px;
|
|
color: #ccc;
|
|
font-size: 12px;
|
|
background: #404040;
|
|
width: auto;
|
|
display: block;
|
|
min-width: 140px;
|
|
}
|
|
|
|
.im-customizations-displayed div,
|
|
.im-other-customizations-displayed div,
|
|
.im-note-customizations-displayed div {
|
|
white-space: pre-wrap;
|
|
word-wrap: break-word;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.im-n .ql-editor {
|
|
height: auto;
|
|
}
|
|
|
|
.im-bottom-box {
|
|
padding: 0;
|
|
position: absolute;
|
|
top: 100%;
|
|
margin-bottom: 40px;
|
|
min-width: 150px;
|
|
left: 0;
|
|
right: 0;
|
|
margin: auto;
|
|
}
|
|
|
|
.im-bottom-box .im-range-caption-wrapper {
|
|
margin-top: 1px;
|
|
}
|
|
|
|
.im-table-descriptions-displayed {
|
|
padding: 5px;
|
|
}
|
|
|
|
.im-custom-properties-grid {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr;
|
|
grid-row-gap: 1px;
|
|
grid-column-gap: 5px;
|
|
justify-content: stretch;
|
|
justify-items: stretch;
|
|
padding-bottom: 3px;
|
|
}
|
|
|
|
.im-custom-properties-grid .im-prop-span-2 {
|
|
grid-column: span 2;
|
|
}
|
|
|
|
.aside-right .im-prop-span-2 {
|
|
grid-column: span 2;
|
|
}
|
|
|
|
.im-item-options {
|
|
display: grid;
|
|
grid-gap: 2px;
|
|
grid-template-columns: 1fr 1fr 22px 22px;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.im-item-options-array {
|
|
display: grid;
|
|
grid-gap: 2px;
|
|
grid-template-columns: 1fr 22px 22px;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.im-custom-properties-grid .im-item-options {
|
|
display: grid;
|
|
grid-gap: 2px;
|
|
grid-template-columns: 1fr 1fr;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.im-custom-properties-grid .im-item-options-array {
|
|
display: grid;
|
|
grid-gap: 2px;
|
|
grid-template-columns: 1fr;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.im-custom-properties-grid .im-item-options > div, .im-custom-properties-grid .im-item-options-array > div {
|
|
background: rgba(255,255,255,0.1);
|
|
padding: 1px 4px;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
|
|
.im-custom-properties-grid div.im-range-indicator {
|
|
display: flex;
|
|
position: relative;
|
|
top: 0;
|
|
max-width: 180px;
|
|
word-wrap: break-word;
|
|
white-space: pre-wrap;
|
|
word-break: break-all;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.im-margin-bottom-xs {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
|
|
.im-range-indicator {
|
|
display: flex;
|
|
grid-column-gap: 2px;
|
|
width: 100%;
|
|
margin-top: 5px;
|
|
position: absolute;
|
|
top: 26px;
|
|
}
|
|
|
|
.im-range-empty {
|
|
display: inline-block;
|
|
min-width: 4px;
|
|
background: rgba(0, 0, 0, 0.1);
|
|
flex-grow: 1;
|
|
height: 4px;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.im-range-fill {
|
|
display: inline-block;
|
|
min-width: 4px;
|
|
flex-grow: 1;
|
|
height: 4px;
|
|
border-radius: 2px;
|
|
background: rgba(0, 0, 0, 0.4);
|
|
}
|
|
.im-textarea-code {
|
|
min-height: 150px;
|
|
font-family: "Courier New", Courier, monospace;
|
|
font-size: 13px;
|
|
padding: 10px;
|
|
padding-bottom: -10px;
|
|
background: rgba(0, 0, 0, 0.1);
|
|
color: beige;
|
|
resize: vertical;
|
|
}
|
|
|
|
.im-colorbox {
|
|
width: 14px;
|
|
height: 14px;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.im-yes {
|
|
color: lawngreen !important;
|
|
}
|
|
|
|
.im-link {
|
|
color: #007add !important;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.im-custom-properties-grid p, .mm-d-v p {
|
|
font-size: 12px;
|
|
margin: 0;
|
|
padding: 1px 0;
|
|
} |