hugvey/www/css/styles.css

381 lines
9.4 KiB
CSS
Raw Normal View History

2019-01-23 15:26:44 +01:00
body {
2019-01-23 15:41:40 +01:00
font-family: "Noto Sans", sans-serif;
2019-01-30 18:00:40 +01:00
margin: 0;
font-size: 10pt; }
2019-01-23 15:26:44 +01:00
2019-04-11 14:22:45 +02:00
body.dark {
2019-04-11 17:48:56 +02:00
background-color: #333;
color: #777; }
2019-04-11 14:22:45 +02:00
body.dark #story line {
marker-end: url("#arrowHeadWhite");
stroke: white; }
body.dark #status .hugvey {
color: #333; }
body.dark #timeline {
background: #444; }
2019-01-24 14:27:04 +01:00
.btn, input[type="submit"] {
2019-01-23 15:26:44 +01:00
display: inline-block;
cursor: pointer;
background: #345;
2019-01-23 15:26:44 +01:00
padding: 5px;
color: white;
border-radius: 3px;
2019-01-24 14:27:04 +01:00
margin-right: 5px;
white-space: nowrap;
border: none; }
.btn:hover, input[type="submit"]:hover {
background: #666; }
input[type="number"] {
width: 80px;
text-align: right; }
2019-01-24 14:27:04 +01:00
@keyframes dash-animation {
to {
stroke-dashoffset: -1000; } }
2019-01-23 15:26:44 +01:00
img.icon {
height: .9em;
width: .9em; }
2019-01-23 15:26:44 +01:00
#interface {
display: flex;
flex-direction: row;
height: 100vh;
width: 100vw; }
2019-05-12 14:54:37 +02:00
#interface #audioFiles, #interface #configuration {
2019-04-10 18:46:32 +02:00
position: absolute;
2019-05-12 14:54:37 +02:00
top: 30%;
left: 30%;
right: 30%;
bottom: 30%;
background: #ccc;
overflow: auto; }
2019-01-23 15:26:44 +01:00
#status {
display: flex;
flex-direction: row;
flex-wrap: wrap;
2019-01-30 18:00:40 +01:00
width: 380px;
2019-01-23 15:26:44 +01:00
height: 100%;
overflow-y: scroll; }
.panopticon #status {
width: 80%; }
2019-01-23 15:26:44 +01:00
#status > div {
width: 33.3333333%;
2019-01-25 11:17:10 +01:00
height: 200px;
2019-01-23 15:26:44 +01:00
border: solid 1px;
box-sizing: border-box;
position: relative; }
2019-01-24 14:27:04 +01:00
#status > div#overview {
width: 100% / 3; }
#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; }
2019-01-23 15:26:44 +01:00
#status .hugvey {
background-image: linear-gradient(to top, #587457, #35a589);
color: white;
display: flex;
flex-direction: column;
justify-content: center;
width: 120px;
flex-grow: 1; }
.panopticon #status .hugvey {
width: 160px; }
2019-01-23 15:26:44 +01:00
#status .hugvey h1 {
text-align: center;
2019-01-23 15:41:40 +01:00
margin: 0;
2019-01-25 11:17:10 +01:00
font-weight: normal;
2019-01-23 15:26:44 +01:00
position: absolute;
left: 5px;
top: 5px; }
2019-01-25 11:17:10 +01:00
#status .hugvey .status {
font-style: italic;
2019-01-25 11:17:10 +01:00
color: gray;
position: absolute;
top: 10px;
right: 5px; }
#status .hugvey .light {
position: absolute;
bottom: 3px;
right: 3px; }
#status .hugvey .light input {
2019-05-17 16:43:43 +02:00
width: 4.2em;
font-size: 20px; }
2019-01-25 11:17:10 +01:00
#status .hugvey .stats .count {
display: inline-block;
margin-right: 10px; }
2019-01-23 15:26:44 +01:00
#status .hugvey.hugvey--off {
background-image: linear-gradient(to top, #575d74, #3572a5); }
2019-01-25 11:17:10 +01:00
#status .hugvey.hugvey--off .status {
text-align: center; }
#status .hugvey.hugvey--gone {
background-image: linear-gradient(to top, orange, #ce5c00); }
2019-04-27 11:51:11 +02:00
#status .hugvey.hugvey--loading {
background-image: linear-gradient(to top, #576074, #3581a5); }
#status .hugvey.hugvey--loading .status {
color: white; }
#status .hugvey.hugvey--blocked {
background-image: linear-gradient(to top, #888a85, #555753); }
2019-04-27 11:51:11 +02:00
#status .hugvey.hugvey--available {
background-image: linear-gradient(to top, #888a85, #e2f04a); }
2019-04-27 11:51:11 +02:00
#status .hugvey.hugvey--available .status {
2019-01-25 11:17:10 +01:00
color: darkgreen; }
#status .hugvey.hugvey--paused {
background-image: linear-gradient(to top, #587457, #e2f04a); }
2019-01-23 15:26:44 +01:00
#story {
2019-01-24 14:27:04 +01:00
position: relative;
width: calc(100% - 380px); }
#story.en-GB {
background: #02547e; }
#story.fr-FR {
background: #5a434d; }
#story.de-DE {
background: slategray; }
2019-01-23 15:26:44 +01:00
#story #controls {
position: absolute;
top: 5px;
2019-01-24 14:27:04 +01:00
left: 5px;
white-space: nowrap; }
#story #controls.hidden {
display: none; }
2019-01-23 15:26:44 +01:00
#story svg#graph {
width: 100%;
2019-01-23 15:41:40 +01:00
height: 100%;
cursor: grab; }
#story svg#graph:active {
cursor: grabbing; }
2019-01-25 14:10:19 +01:00
#story svg#graph .beenHit circle {
stroke: #0f0;
2019-02-28 18:58:03 +01:00
stroke-width: 25px; }
2019-01-25 14:10:19 +01:00
#story svg#graph line.beenHit {
stroke: #0f0; }
2019-01-23 15:41:40 +01:00
#story circle {
cursor: pointer;
fill: #77618e; }
#story .startMsg circle {
2019-02-28 18:58:03 +01:00
fill: lightseagreen !important; }
#story .chapterStartMsg circle {
transform: scale(1.5);
fill: white !important; }
#story .chapterStartMsg text {
fill: black; }
2019-01-23 15:41:40 +01:00
#story .orphanedMsg {
2019-02-28 18:58:03 +01:00
fill: lightcoral !important; }
2019-01-23 15:41:40 +01:00
#story text {
text-anchor: middle;
font-size: 11pt;
font-family: sans-serif;
fill: white; }
2019-01-24 14:27:04 +01:00
#story text.msg_id {
transform: translateY(-20px);
opacity: .5; }
#story text.msg_txt {
font-weight: bold; }
2019-01-23 15:41:40 +01:00
#story line {
marker-end: url("#arrowHead");
2019-02-28 18:58:03 +01:00
stroke-width: 5px;
2019-01-23 15:41:40 +01:00
stroke: black; }
2019-01-24 14:27:04 +01:00
#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; }
2019-01-23 15:41:40 +01:00
#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; }
2019-01-23 15:41:40 +01:00
#story label:nth-child(odd) {
background-color: rgba(255, 255, 255, 0.3); }
#story #msg {
position: absolute;
top: 0;
right: 0;
2019-01-30 18:00:40 +01:00
width: 385px;
2019-01-23 15:41:40 +01:00
max-height: 100%;
overflow-y: auto; }
2019-02-18 22:33:31 +01:00
#story #msg .directions h3 {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
margin-right: 5em; }
2019-01-23 15:41:40 +01:00
#story #msg .msg__info, #story #msg .directions > div {
padding: 10px;
margin-bottom: 10px;
background: lightgray; }
2019-02-28 18:58:03 +01:00
#story #msg .msg__info.btn, #story #msg .directions > div.btn {
background: darkblue; }
2019-01-25 15:45:46 +01:00
#story #msg h1 {
margin: 0; }
#story #msg .msg__info .btn--delete-mss {
2019-01-25 15:45:46 +01:00
position: absolute;
top: 15px;
right: 10px; }
#story #msg .play {
text-align: center; }
2019-01-24 14:27:04 +01:00
#story #msg .direction {
position: relative; }
#story #msg .direction h3 {
margin-top: 0; }
#story #msg .direction .btn--delete {
position: absolute;
top: 5px;
right: 0px; }
2019-03-07 20:19:43 +01:00
#story #msg #diversions .diversion {
background: pink; }
2019-01-23 15:41:40 +01:00
#story #nodes g:hover circle,
#story .selectedMsg circle {
stroke: lightgreen;
2019-02-28 18:58:03 +01:00
stroke-width: 27; }
2019-03-07 20:19:43 +01:00
#story .diversion circle {
fill: pink !important; }
2019-01-23 15:41:40 +01:00
#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; }
2019-01-23 15:41:40 +01:00
#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; }
2019-01-24 14:27:04 +01:00
.flag-icon {
background-size: contain;
background-position: 50%;
background-repeat: no-repeat;
position: relative;
display: inline-block;
width: 2.66667em;
line-height: 2em; }
2019-01-24 14:27:04 +01:00
.flag-icon:before {
content: '\00a0'; }
.flag-icon.flag-icon-squared {
width: 2em; }
2019-01-24 14:27:04 +01:00
.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;
2019-04-11 17:48:56 +02:00
opacity: 0;
overflow: auto; }
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; }
2019-04-11 14:22:45 +02:00
#timeline .vis-text, #timeline .vis-labelset .vis-label {
color: #999; }
2019-04-27 16:46:10 +02:00
#timeline .vis-dot.WARNING {
width: 10px;
height: 10px;
background: yellow;
border-color: yellow;
border-radius: 15px; }
#timeline .vis-dot.ERROR {
width: 20px;
height: 20px;
background: orange;
border-color: orangered;
border-radius: 15px; }
#timeline .vis-dot.CRITICAL {
width: 30px;
height: 30px;
background: red;
border-color: darkred;
border-radius: 15px; }
#logbook {
width: 20%;
padding: 10px;
2019-04-27 15:43:30 +02:00
color: #999;
height: 100%;
overflow-y: auto; }
#logbook .log {
margin-bottom: 10px; }
#logbook .time {
color: #666; }
#logbook .content .origin {
padding-right: 10px;
color: orange; }
#logbook .content .extra {
color: #555; }
#variables {
position: absolute;
bottom: 0;
left: 0;
color: white; }
#variables .name {
font-weight: bold; }
#variables .name::after {
content: " - "; }
.loop_time {
cursor: pointer; }
#time_update {
display: none; }
#time_update.visible {
display: block; }