hugvey/www/scss/styles.scss

664 lines
10 KiB
SCSS
Raw Normal View History

$status_width: 380px;
2019-01-24 14:27:04 +01:00
$status_width_open: 860px;
2019-11-11 12:45:08 +01:00
@-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;
}
}
2019-01-24 14:27:04 +01:00
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-23 15:26:44 +01:00
margin: 0;
2019-01-30 18:00:40 +01:00
font-size: 10pt;
2019-01-23 15:26:44 +01:00
}
2019-04-11 14:22:45 +02:00
body.dark{
background-color:#333;
color: #777;
#story line{
marker-end: url('#arrowHeadWhite');
stroke: white;
}
#status .hugvey{
color:#333;
}
#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;
&:hover{
background: #666;
}
}
2019-11-11 18:25:04 +01:00
.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;
}
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-01-24 14:27:04 +01:00
&.showStatus{
}
2019-04-10 18:46:32 +02:00
2019-05-12 14:54:37 +02:00
#audioFiles, #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%;
2019-04-10 18:46:32 +02:00
background: #ccc;
2019-05-12 14:54:37 +02:00
overflow:auto;
2019-04-10 18:46:32 +02:00
}
2019-05-12 14:54:37 +02:00
2019-01-23 15:26:44 +01:00
}
#status{
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: $status_width;
2019-01-23 15:26:44 +01:00
height: 100%;
overflow-y: scroll;
.panopticon &{
width: 80%
}
2019-01-23 15:26:44 +01:00
& > 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-11-11 12:45:08 +01:00
padding: 5px;
2019-01-24 14:27:04 +01:00
&#overview{
2019-11-11 12:45:08 +01:00
width: calc(100% / 3 * 2);
#languages{
color:#ccc;
list-style: none;padding:0;
}
2019-01-24 14:27:04 +01:00
}
2019-01-23 15:26:44 +01:00
}
.counts{
dd, dt{
display: inline-block;
width: 30px;
overflow:hidden;
text-overflow: ellipsis;
margiN: 0;
&:hover{
width: auto;
}
}
}
2019-01-23 15:26:44 +01:00
.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;
}
2019-01-23 15:26:44 +01:00
h1{
text-align: center;
margin: 0;
2019-01-23 15:41:40 +01:00
font-weight: normal;
2019-01-25 11:17:10 +01:00
position: absolute;
left: 5px;
top: 5px;
font-size:150%;
.light_id-hv_id{
font-size:75%;
}
2019-01-25 11:17:10 +01:00
}
.status{
font-style: italic;
2019-01-25 11:17:10 +01:00
color: gray;
position: absolute;
top: 10px;
right: 5px;
2019-01-23 15:26:44 +01:00
}
.light{
position:absolute;
bottom: 3px;
right:3px;
input{
2019-05-17 16:43:43 +02:00
width: 4.2em;
font-size: 20px;
}
}
2019-01-25 11:17:10 +01:00
.stats{
.count{
display: inline-block;
margin-right: 10px;
2019-01-23 15:26:44 +01:00
}
2019-01-25 11:17:10 +01:00
}
2019-01-23 15:26:44 +01:00
&.hugvey--off{
background-image: linear-gradient(to top, #575d74, #3572a5);
2019-01-25 11:17:10 +01:00
.status{
text-align:center;
}
2019-01-25 11:17:10 +01:00
// &::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));
2019-01-25 11:17:10 +01:00
// &::after{
// content: 'disconnected';
// font-style: italic;
// color: gray;
// text-align:center;
// // font-size: 30pt;
// }
}
2019-04-27 11:51:11 +02:00
&.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));
}
2019-04-27 11:51:11 +02:00
&.hugvey--available{
background-image: linear-gradient(to top, rgb(136, 138, 133), #e2f04a);
2019-01-25 11:17:10 +01:00
.status{
color: darkgreen;
2019-01-23 15:26:44 +01:00
}
}
&.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));
// }
2019-01-23 15:26:44 +01:00
}
}
#story{
position: relative;
2019-01-24 14:27:04 +01:00
width: calc(100% - #{$status_width});
2019-01-23 15:26:44 +01:00
&.en-GB{
background:#02547e;
}
&.fr-FR{
background:#5a434d;
}
&.de-DE{
background:slategray;
}
2019-01-23 15:26:44 +01:00
#controls{
position:absolute;
top: 5px;
left: 5px;
2019-01-24 14:27:04 +01:00
white-space: nowrap;
&.hidden{
display:none;
}
2019-01-23 15:26:44 +01:00
}
svg#graph{
width: 100%;
height: 100%;
2019-01-23 15:41:40 +01:00
cursor: grab;
&:active{
cursor: grabbing;
}
2019-01-25 14:10:19 +01:00
.beenHit{
circle {
stroke: #0f0;
2019-02-28 18:58:03 +01:00
stroke-width: 25px;
2019-01-25 14:10:19 +01:00
}
}
line.beenHit {
stroke: #0f0;
}
2019-01-23 15:26:44 +01:00
}
2019-01-23 15:41:40 +01:00
circle{
cursor: pointer;
fill: rgb(119, 97, 142);
}
.startMsg circle{
2019-02-28 18:58:03 +01:00
fill: lightseagreen !important;
2019-01-23 15:41:40 +01:00
}
.endMsg circle{
2019-02-28 18:58:03 +01:00
// fill: lightslategray !important;
2019-01-23 15:41:40 +01:00
}
.chapterStartMsg circle{
transform: scale(1.5);
fill: white !important;
}
.chapterStartMsg text{
fill: black;
}
2019-01-23 15:41:40 +01:00
.orphanedMsg{
2019-02-28 18:58:03 +01:00
fill: lightcoral !important;
2019-01-23 15:41:40 +01:00
}
text{
text-anchor: middle;
font-size: 11pt;
font-family: sans-serif;
fill: white;
2019-01-24 14:27:04 +01:00
&.msg_id {
transform: translateY(-20px);
opacity: .5;
}
&.msg_txt{
font-weight: bold;
}
2019-01-23 15:41:40 +01:00
}
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
&.link--noconditions{
stroke-dasharray: 5 4;
stroke: red;
}
&.dir-highlight{
stroke-dasharray: 5;
animation: dash-animation 20s infinite linear;
stroke-width: 3px;
}
2019-01-23 15:41:40 +01:00
}
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;
}
2019-01-23 15:41:40 +01:00
}
label:nth-child(odd){
background-color: rgba(255,255,255,0.3);
}
#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
.directions{
h3{
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
margin-right: 5em;
}
}
2019-01-23 15:41:40 +01:00
.msg__info, .directions > div{
padding: 10px;
margin-bottom: 10px;
background:lightgray;
2019-02-28 18:58:03 +01:00
&.btn{
background: darkblue;
}
2019-01-23 15:41:40 +01:00
}
2019-01-24 14:27:04 +01:00
2019-01-25 15:45:46 +01:00
h1{
margin:0;
}
.msg__info {
.btn--delete-mss{
position:absolute;
top: 15px;
right: 10px;
}
}
.play{
// background: #ccc;
// padding: 20px;
text-align: center;
}
2019-01-25 15:45:46 +01:00
2019-01-24 14:27:04 +01:00
.direction{
position: relative;
h3{
margin-top:0;
}
.btn--delete{
position: absolute;
top: 5px;
right: 0px;
}
}
2019-03-07 20:19:43 +01:00
#diversions{
.diversion{
background: pink;
}
}
2019-01-23 15:41:40 +01:00
}
#nodes g:hover circle,
.selectedMsg circle {
stroke: lightgreen;
2019-02-28 18:58:03 +01:00
stroke-width: 27;
2019-01-23 15:41:40 +01:00
}
2019-03-07 20:19:43 +01:00
.diversion{
circle{
fill: pink !important;
}
}
2019-01-23 15:41:40 +01:00
.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;
}
2019-01-23 15:41:40 +01:00
}
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: (4 / 3) * 2em;
line-height: 2em;
2019-01-24 14:27:04 +01:00
&:before {
content: '\00a0';
}
&.flag-icon-squared {
width: 2em;
2019-01-24 14:27:04 +01:00
}
&.en-GB {
background-image: url('/images/gb.svg');
}
&.de-DE {
background-image: url('/images/de.svg');
}
&.fr-FR {
background-image: url('/images/fr.svg');
}
2019-11-05 07:43:14 +01:00
&.fr-FR2 {
background-image: url('/images/fr2.svg');
}
&.ru-RU {
background-image: url('/images/ru.svg');
}
&.ru-RU2 {
background-image: url('/images/ru2.svg');
}
2019-01-24 14:27:04 +01:00
&.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;
2019-04-11 17:48:56 +02:00
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;
}
2019-04-11 14:22:45 +02:00
.vis-text,.vis-labelset .vis-label {
color: #999;
}
2019-01-24 14:27:04 +01:00
2019-04-27 16:46:10 +02:00
.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;
2019-04-27 15:43:30 +02:00
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;
}
}