body { cursor: default; font-family: helvetica, arial, sans-serif; font-size: 0.8em; color: #4d596c; background-color: #f4f5f7; } .node { user-select: none; cursor: move; background-color: white; border-style: solid; border-width: 1px; border-color: #dadde2; border-radius: 3px; padding: 1em; margin: 0px; margin-left: auto; margin-right: auto; box-shadow: 1px 1px 1px #666; } .board .node { background-color: #edf5ff; } .board .node .children { background-color: #edf5ff; } .children .node { background-color: white; } .children .node .children { background-color: #f4f5f7; } .node + .node { margin-top: 12px; } .node .data { } .node .id { float: left; font-size: 0.8em; vertical-align: text-top; opacity: 0.6; min-width: 2.8em; display: inline-block; pointer-events: none; padding-right: 0.3px; } .node .title { clear: both; float: left; font-weight: bold; font-size: 1.1em; background: transparent; pointer-events: auto; min-width: 20em; width: 100%; min-height: 1.1em; padding-top: 0.4em; } .title:hover, .description:hover { background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.07), rgba(0,0,0,0)); } .node .state { float: right; padding: 0.3em 1em 0.3em 1em; margin-right: 0.3em; pointer-events: auto; cursor: pointer; border-radius: 3px; text-transform: uppercase; font-size: 0.8em; font-weight: bold; color: black; } .node .description { display: block; clear: both; padding-top: 0.5em; padding-bottom: 1em; pointer-events: auto; min-height: 0.5em; } .node .edit { border-color: red; pointer-events: all; width: 90% /* border: inherit; padding: inherit; margin: inherit; background: inherit; */ } .node .button { float: right; width: 1.6em; height: 1.5em; padding-top: 0.1em; vertical-align: text-center; text-align: center; cursor: pointer; pointer-events: auto; background-color: #ebedf0; border-radius: 3px; } .button + .button { margin-right: 0.3em; } .node .children { clear: both; padding: 6px; min-height: 5px; overflow: hidden; background-color: #f4f5f7; } .collapsed .children { display: none; } .collapsed .description { height: 0px; padding: 0px; overflow: hidden; min-height: 0px; } .collapsed .title { clear: none; padding: 0px; width: unset; } .board { width: 48%; padding: 8px; margin: 2px; display: inline-box; float:left; } .log { clear: both; height: 20em; font-family: monospace; font-size: 1em; padding: 2px 5px; color: #0f0; background-color: #111; border: 1px solid #030; border-radius: 3px; overflow: auto; }