body { font-family: "Noto Sans", sans-serif; margin: 0; font-size: 10pt; } .btn, input[type="submit"] { display: inline-block; cursor: pointer; background: #345; padding: 5px; color: white; border-radius: 3px; margin-right: 5px; white-space: nowrap; border: none; } .btn:hover, input[type="submit"]:hover { background: #666; } input[type="number"] { width: 80px; text-align: right; } @keyframes dash-animation { to { stroke-dashoffset: -1000; } } img.icon { height: .9em; width: .9em; } #interface { display: flex; flex-direction: row; height: 100vh; width: 100vw; } #status { display: flex; flex-direction: row; flex-wrap: wrap; width: 380px; height: 100%; overflow-y: scroll; } #status > div { width: 33.3333333%; height: 200px; border: solid 1px; box-sizing: border-box; position: relative; } #status > div#overview { width: 66.66667%; } #status .counts dd, #status .counts dt { display: inline-block; width: 30px; overflow: hidden; text-overflow: ellipsis; margiN: 0; } #status .counts dd:hover, #status .counts dt:hover { width: auto; } #status .hugvey { background-image: linear-gradient(to top, #587457, #35a589); color: white; display: flex; flex-direction: column; justify-content: center; } #status .hugvey h1 { text-align: center; margin: 0; font-weight: normal; position: absolute; left: 5px; top: 5px; } #status .hugvey .status { font-sytle: italic; color: gray; position: absolute; top: 10px; right: 5px; } #status .hugvey .stats .count { display: inline-block; margin-right: 10px; } #status .hugvey.hugvey--off { background-image: linear-gradient(to top, #575d74, #3572a5); } #status .hugvey.hugvey--off .status { text-align: center; } #status .hugvey.hugvey--gone { background-image: linear-gradient(to top, orange, #ce5c00); } #status .hugvey.hugvey--paused { background-image: linear-gradient(to top, #888a85, #555753); } #status .hugvey.hugvey--finished { background-image: linear-gradient(to top, #888a85, #35a589); } #status .hugvey.hugvey--finished .status { color: darkgreen; } #story { position: relative; width: calc(100% - 430px); } #story #controls { position: absolute; top: 5px; left: 5px; white-space: nowrap; } #story svg#graph { width: 100%; height: 100%; cursor: grab; } #story svg#graph:active { cursor: grabbing; } #story svg#graph .beenHit circle { stroke: #0f0; stroke-width: 25px; } #story svg#graph line.beenHit { stroke: #0f0; } #story circle { cursor: pointer; fill: #77618e; } #story .startMsg circle { fill: lightseagreen !important; } #story .orphanedMsg { fill: lightcoral !important; } #story text { text-anchor: middle; font-size: 11pt; font-family: sans-serif; fill: white; } #story text.msg_id { transform: translateY(-20px); opacity: .5; } #story text.msg_txt { font-weight: bold; } #story line { marker-end: url("#arrowHead"); stroke-width: 5px; stroke: black; } #story line.link--noconditions { stroke-dasharray: 5 4; stroke: red; } #story line.dir-highlight { stroke-dasharray: 5; animation: dash-animation 20s infinite linear; stroke-width: 3px; } #story label::after { content: ''; clear: both; display: block; } #story label { width: 100%; font-weight: bold; display: block; margin: 0 -10px; padding: 5px 10px; } #story label input, #story label select, #story label .label-value, #story label .label-unit { float: right; } #story label:nth-child(odd) { background-color: rgba(255, 255, 255, 0.3); } #story #msg { position: absolute; top: 0; right: 0; width: 385px; max-height: 100%; overflow-y: auto; } #story #msg .directions h3 { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; margin-right: 5em; } #story #msg .msg__info, #story #msg .directions > div { padding: 10px; margin-bottom: 10px; background: lightgray; } #story #msg .msg__info.btn, #story #msg .directions > div.btn { background: darkblue; } #story #msg h1 { margin: 0; } #story #msg .msg__info .btn--delete-mss { position: absolute; top: 15px; right: 10px; } #story #msg .play { text-align: center; } #story #msg .direction { position: relative; } #story #msg .direction h3 { margin-top: 0; } #story #msg .direction .btn--delete { position: absolute; top: 5px; right: 0px; } #story #msg #diversions .diversion { background: pink; } #story #nodes g:hover circle, #story .selectedMsg circle { stroke: lightgreen; stroke-width: 27; } #story .diversion circle { fill: pink !important; } #story .controlDown #nodes g:hover circle, #story .secondaryMsg circle { stroke: lightgreen; stroke-width: 5; stroke-dasharray: 10 3; } #story .condition { position: relative; } #story .condition h4 { text-align: center; } #story .condition.condition--add h4 { margin: 0; } #story .condition.condition--add h4 + div { margin-top: 10px; } #story .condition + .condition::before { content: "OR"; display: block; border-bottom: solid 2px; height: 10px; margin-bottom: 15px; text-align: center; text-shadow: 2px 2px 2px lightgray,-2px 2px 2px lightgray,2px -2px 2px lightgray,-2px -2px 2px lightgray; } #story .condition + .condition .btn--delete { margin-top: 20px; } .flag-icon { background-size: contain; background-position: 50%; background-repeat: no-repeat; position: relative; display: inline-block; width: 1.33333em; line-height: 1em; } .flag-icon:before { content: '\00a0'; } .flag-icon.flag-icon-squared { width: 1em; } .flag-icon.en-GB { background-image: url("/images/gb.svg"); } .flag-icon.de-DE { background-image: url("/images/de.svg"); } .flag-icon.fr-FR { background-image: url("/images/fr.svg"); } .flag-icon.nl-NL { background-image: url("/images/nl.svg"); } .divToggle { cursor: pointer; } .divToggle:hover { text-decoration: underline; } .divToggle.opened + div { display: block; } .divToggle + div { display: none; } body.showTimeline #toggleTimeline { background-color: pink; } #timeline { position: absolute; left: 380px; right: 0; top: 0; bottom: 0; background: #eee; pointer-events: none; opacity: 0; } body.showTimeline #timeline { opacity: 1; pointer-events: auto; } #timeline .vis-item.message { background: lightgray; } #timeline .vis-item.message.vis-range { background-color: darkgray; border-color: green; } #timeline .vis-item.speech { background-color: greenyellow; border-color: green; }