hugvey/www/scss/styles.scss
2019-01-23 15:41:40 +01:00

182 lines
No EOL
3.1 KiB
SCSS

body{
font-family: "Noto Sans", sans-serif;
margin: 0;
}
.btn{
display:inline-block;
cursor: pointer;
background: #333;
padding: 5px;
color: white;
border-radius: 5px;
}
#interface{
display: flex;
flex-direction: row;
height: 100vh;
width: 100vw;
}
#status{
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 430px;
height: 100%;
overflow-y: scroll;
& > div{
width: 33.3333333%;
height: 150px;
border: solid 1px;
box-sizing: border-box;
position: relative;
}
.hugvey{
background-image: linear-gradient(to top, #587457, #35a589);
color:white;
display: flex;
flex-direction: column;
justify-content: center;
h1{
text-align: center;
margin: 0;
font-weight: normal;
}
// &.hugvey--on{
h1 {
position: absolute;
left: 5px;
top: 5px;
}
// }
&.hugvey--off{
background-image: linear-gradient(to top, #575d74, #3572a5);
&::after{
content: 'disconnected';
font-style: italic;
color: gray;
text-align:center;
// font-size: 30pt;
}
}
}
}
#story{
position: relative;
#controls{
position:absolute;
top: 5px;
left: 5px;
}
svg#graph{
width: 100%;
height: 100%;
cursor: grab;
&:active{
cursor: grabbing;
}
}
circle{
cursor: pointer;
fill: rgb(119, 97, 142);
}
.startMsg circle{
fill: lightseagreen;
}
.endMsg circle{
fill: lightslategray;
}
.orphanedMsg{
fill: lightcoral;
}
text{
text-anchor: middle;
font-size: 11pt;
font-family: sans-serif;
fill: white;
}
line{
marker-end: url('#arrowHead');
stroke-width: 2px;
stroke: black;
}
line.link--noconditions{
stroke-dasharray: 5 4;
stroke: red;
}
label::after {
content: '';
clear: both;
display: block;
}
label{
width:100%;
font-weight:bold;
display: block;
margin: 0 -10px;
padding: 5px 10px;
}
label input,label select{
float: right;
}
label:nth-child(odd){
background-color: rgba(255,255,255,0.3);
}
#msg{
position: absolute;
top:0;
right:0;
width: 30%;
max-height:100%;
overflow-y: auto;
.msg__info, .directions > div{
padding: 10px;
margin-bottom: 10px;
background:lightgray;
}
}
#nodes g:hover circle,
.selectedMsg circle {
stroke: lightgreen;
stroke-width: 8;
}
.controlDown #nodes g:hover circle,
.secondaryMsg circle {
stroke: lightgreen;
stroke-width: 5;
stroke-dasharray: 10 3;
}
.condition h4{
text-align: center;
}
.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;
}
.condition--add{
/* text-align: center; */
}
}