hugvey/www/scss/styles.scss

$status_width: 380px;
$status_width_open: 860px;


@-webkit-keyframes sk-scaleout {
  0% { -webkit-transform: scale(0) }
  100% {
    -webkit-transform: scale(1.0);
    opacity: 0;
  }
}

@keyframes sk-scaleout {
  0% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 100% {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
    opacity: 0;
  }
}
	
body{
	font-family: "Noto Sans", sans-serif;
	margin: 0;
	font-size: 10pt;
}

body.dark{
	background-color:#333;
	color: #777;
	
	#story line{
        marker-end: url('#arrowHeadWhite');
        stroke: white;
    }
	#status .hugvey{
		color:#333;
	}
	#timeline{
		background:#444;
	}
}

.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;
	
	&:hover{
		background: #666;
	}
}

.btn.loading:after {
		display:inline-block;
		content: '';
	  width: 15px;
	  height: 15px;
	  background-color: white;
	
	  border-radius: 100%;  
	  -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
	  animation: sk-scaleout 1.0s infinite ease-in-out;
	}

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;
	
	&.showStatus{
	}

	#audioFiles, #configuration {
	    position: absolute;
	    top: 30%;
	    left: 30%;
	    right: 30%;
	    bottom: 30%;
	    background: #ccc;
	    overflow:auto;
	}
	
}

#status{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: $status_width;
	height: 100%;
	overflow-y: scroll;
	
	.panopticon &{
		width: 80%
	}
	
	& > div{
		width: 33.3333333%;
	    height: 200px;
	    border: solid 1px;
	    box-sizing: border-box;
	    position: relative;
	    padding: 5px;
	    
	    &#overview{
	    	width: calc(100% / 3 * 2);
	    	#languages{
	    		color:#ccc;
	    		list-style: none;padding:0;

	    	}
	    }
	}

	.counts{
		dd, dt{
			display: inline-block;
			width: 30px;
			overflow:hidden;
			text-overflow: ellipsis;
			margiN: 0;
			&:hover{
				width: auto;
				}
		}
	}

	.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 & {
			width: 160px;
		}
		
		h1{
			text-align: center;
			margin: 0;
			font-weight: normal;
			position: absolute;
		    left: 5px;
		    top: 5px;
		    font-size:150%;
		    
		    .light_id-hv_id{
		    	font-size:75%;
		    }
		}

		.status{
			font-style: italic;
			color: gray;
			position: absolute;
			top: 10px;
			right: 5px;
		}
	
	
		.light{
			position:absolute;
			bottom: 3px;
			right:3px;
			input{
				width: 4.2em;
				font-size: 20px;
			}
		}
	
		.stats{
			.count{
				display: inline-block;
				margin-right: 10px;
			}
		}
		
		&.hugvey--off{
			background-image: linear-gradient(to top, #575d74, #3572a5);
			.status{
				text-align:center;
			}
// 			&::after{
// 				content: 'off';
// 				font-style: italic;
// 				color: gray;
// 				text-align:center;
// // 				font-size: 30pt;
// 			}
		}
		
		&.hugvey--gone{
			background-image: linear-gradient(to top, orange, rgb(206, 92, 0));
// 			&::after{
// 				content: 'disconnected';
// 				font-style: italic;
// 				color: gray;
// 				text-align:center;
// // 				font-size: 30pt;
// 			}
		}
	
		&.hugvey--loading{
			background-image: linear-gradient(to top, #576074, #3581a5);
			.status{
				color: white;
			}
		}
	
		&.hugvey--blocked{
			background-image: linear-gradient(to top, rgb(136, 138, 133), rgb(85, 87, 83));
		}
	
		&.hugvey--available{
			background-image: linear-gradient(to top, rgb(136, 138, 133), #e2f04a);
			.status{
				color: darkgreen;
			}
		}
	
		&.hugvey--paused{
			background-image: linear-gradient(to top, #587457, #e2f04a);
		}
	
	
// 		TODO
// 		&.hugvey--light-false{
// 			background-image: linear-gradient(to top, #ccc, rgba(255,255,255,0));
// 		}
// 		&.hugvey--light-true{
// 			background-image: linear-gradient(to top, , rgba(255,255,255,0));
// 		}
	}

}

#story{
	position: relative;
	width: calc(100% - #{$status_width});
	
	&.en-GB{
		background:#02547e;
	}
	&.fr-FR{
		background:#5a434d;
	}
	&.de-DE{
		background:slategray;
	}
	
	#controls{
		position:absolute;
		top: 5px;
		left: 5px;
		white-space: nowrap;
		&.hidden{
			display:none;
		}
	}
	svg#graph{
		width: 100%;
		height: 100%;
		cursor: grab;
		&:active{
            cursor: grabbing;
        }
       
       	.beenHit{
       		circle {
       			stroke: #0f0;
       			stroke-width: 25px;
   			}
       	}
       	line.beenHit {
			stroke: #0f0;
		}
	}

    circle{
        cursor: pointer;
        fill: rgb(119, 97, 142);
    }
    .startMsg circle{
        fill: lightseagreen !important;
    }
    .endMsg circle{
//         fill: lightslategray !important;
    }
   .chapterStartMsg circle{
   		transform: scale(1.5);
   		fill: white !important;
   	}
   .chapterStartMsg text{
   		fill: black;
   	}

    .orphanedMsg{
        fill: lightcoral !important;
    }
    text{
        text-anchor: middle;
        font-size: 11pt;
        font-family: sans-serif;
        fill: white;
        
        &.msg_id {
		    transform: translateY(-20px);
		    opacity: .5;
		}
		&.msg_txt{
			font-weight: bold;
		}
    }
    line{
        marker-end: url('#arrowHead');
        stroke-width: 5px;
        stroke: black;
        
        &.link--noconditions{
        	stroke-dasharray: 5 4;
        	stroke: red;
        }
       	&.dir-highlight{
  			stroke-dasharray: 5;
  			animation: dash-animation 20s infinite linear;
  			stroke-width: 3px;
       	}
    }
    label::after {
        content: '';
        clear: both;
        display: block;
    }
    label{
        width:100%;
        font-weight:bold;
        display: block;
        margin: 0 -10px;
        padding: 5px 10px;
        input,select, .label-value, .label-unit{
	        float: right;
	    }
    }
    label:nth-child(odd){
        background-color: rgba(255,255,255,0.3);
    }

    #msg{
        position: absolute;
        top:0;
        right:0;
        width: 385px;
        max-height:100%;
        overflow-y: auto;
        
        .directions{
        	h3{
        		text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
				margin-right: 5em;
        	}
        }
        
        .msg__info, .directions > div{
        	padding: 10px;
            margin-bottom: 10px;
            background:lightgray;
            
            &.btn{
            	background: darkblue;
            }
        }
       
       h1{
       	margin:0;
       }
       
       .msg__info {
			.btn--delete-mss{
				position:absolute;
				top: 15px;
				right: 10px;
	       }
      	}
      
      .play{
//       	background: #ccc;
//       	padding: 20px;
      	text-align: center;
      }
       
       .direction{
       		position: relative;
       		h3{
       			margin-top:0;
       		}
       		.btn--delete{
       			position: absolute;
       			top: 5px;
       			right: 0px;
       		}
       	
       	}
       
       		#diversions{
       			.diversion{
       				background: pink;
       			}
       		}
    }

     #nodes g:hover circle,
    .selectedMsg circle {
        stroke: lightgreen;
        stroke-width: 27;
    }
   
   .diversion{
   		circle{
   			fill: pink !important;
   		}
   	}

    .controlDown #nodes g:hover circle,
    .secondaryMsg circle {
        stroke: lightgreen;
        stroke-width: 5;
        stroke-dasharray: 10 3;
    }
   
   .condition{
   		position: relative;
	   	h4{
	        text-align: center;
	    }
	   
	   &.condition--add{
	       h4{
   				margin: 0;
   			}
   			h4 +div {
   				margin-top: 10px;
   			}
	    }
	}
    .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;
        }
		
		.btn--delete{
			margin-top: 20px;
		}
    }
    
}


.flag-icon {
  background-size: contain;
  background-position: 50%;
  background-repeat: no-repeat;
  position: relative;
  display: inline-block;
  width: (4 / 3) * 2em;
  line-height: 2em;
  &:before {
    content: '\00a0';
  }
  &.flag-icon-squared {
    width: 2em;
  }
 
  &.en-GB {
	  background-image: url('/images/gb.svg');
	}

  &.de-DE {
	  background-image: url('/images/de.svg');
	}

  &.fr-FR {
	  background-image: url('/images/fr.svg');
	}
  &.fr-FR2 {
	  background-image: url('/images/fr2.svg');
	}
  &.nl-NL {
	  background-image: url('/images/nl.svg');
	}

}

.divToggle{
	cursor: pointer;
	&:hover{
		text-decoration: underline;
	}
	&.opened {
		+ div{
			display: block;
		}
	}
	+ div{
		display: none;
	}
}

#toggleTimeline {
	body.showTimeline & {
		background-color:pink;
	}
}
#timeline{
	position: absolute;
    left: 380px;
    right: 0;
    top: 0;
    bottom: 0;
    background: #eee;
//     display:none;
	pointer-events: none;
	opacity: 0;
	overflow:auto;
    
    body.showTimeline &{
    	opacity: 1;
    	pointer-events: auto;
    }
    
    .vis-item.message {
    	background: lightgray;
    	&.vis-range{
	      background-color: darkgray;
	      border-color: green;
      }
    }
   	.vis-item.speech {
      background-color: greenyellow;
      border-color: green;
    }
   
    .vis-text,.vis-labelset .vis-label {
	    color: #999;
	}

	.vis-dot{
		&.INFO{
		}
		&.WARNING{
			width: 10px;
			height:10px;
			background:yellow;
			border-color:yellow;
			border-radius:15px;
		}
		&.ERROR{
			width: 20px;
			height:20px;
			background:orange;
			border-color:orangered;
			border-radius:15px;
		}
		&.CRITICAL{
			width: 30px;
			height:30px;
			background:red;
			border-color:darkred;
			border-radius:15px;
		}
	}

}

#logbook{
	width: 20%;
    padding: 10px;
    color: #999;
    height: 100%;
    overflow-y:auto;
    .log{
    	margin-bottom:10px;
    }
   .time{
   		color:#666;
   	}
   .content{
   		.origin{
   			padding-right: 10px;
   			color:orange;
   		}
   		.extra{
   			color:#555;
   		}
	}
}

#variables{
	position: absolute;
    bottom: 0;
    left: 0;
    color: white;
    .name{
    	font-weight:bold;
    	&::after{
    		content:" - ";
    	}
    }
}

.loop_time{
	cursor:pointer;
}

#time_update{
	display:none;
	&.visible{
		display:block;
	}
}