html, body {
width: 100%;
height: 100%;
}
body {
background-color: #e6e6e6;
}
.loader {
width: 100%;
font-size: 50px;
text-align: center;
}
#vfd-dashboard {
width: 100%;
height: 100%;
}
#vfd-dashboard header {
color: #eeeeee;
background-color: #222222;
padding-left: 8px;
padding-right: 8px;
padding-top: 3px;
padding-bottom: 3px;
margin-bottom: 3px;
display: flex;
}
#vfd-dashboard header > * {
margin: 5px;
flex: 1;
}
#vfd-dashboard header > :nth-child(1) {
text-align: left;
}
#vfd-dashboard header > :nth-child(2) {
text-align: center;
}
#vfd-dashboard header > :nth-child(3) {
text-align: right;
}
/* dashboard layout */
.d-container {
display: flex;
align-content: flex-start;
align-items: stretch;
}
.d-container > * {
flex: 1;
}
.d-column {
flex-direction: column;
}
.d-row {
flex-direction: row;
}
.d-above {
flex: none;
}
.d-left {
flex: 1 1 30%;
}
.d-main {
flex: 1 1 70%;
}
.d-panel {
margin: 3px;
padding: 10px;
background-color: white;
border-radius: 3px;
}
/* Mode styles */
.mode {
display: inline-block;
box-sizing: border-box;
text-decoration: normal;
margin-right: 5px;
}
.mode.danger {
color: #d9534f;
text-shadow: 0 0 5px #d9534f;
animation: danger-blink 1s linear infinite;
-webkit-animation: danger-blink 1s linear infinite;
}
.mode.warning {
color: #f0ad4e;
text-shadow: 0 0 5px #f0ad4e;
}
.mode.info {
color: #5bc0de;
text-shadow: 0 0 5px #5bc0de;
}
.mode.success {
color: #5cb85c;
text-shadow: 0 0 5px #5cb85c;
}
.mode.off {
color: #eeeeee;
text-shadow: none;
animation: none;
-webkit-animation: none;
}
/* TODO: Rules below are maybe obsolete and need to be reviewed */
.table-instrument {
table-layout: fixed;
width: 100%;
}
.table-instrument td {
width: 100%;
}
.heartbeat {
color: rgba(165, 25, 25, 1);
animation: heartbeat 2s linear infinite;
-webkit-animation: heartbeat 2s linear infinite;
}
@keyframes heartbeat {
0% {
transform: scale(1);
}
7% {
transform: scale(1.3);
}
14% {
transform: scale(1);
}
21% {
transform: scale(1.3);
}
28% {
transform: scale(1);
}
}
@-webkit-keyframes heartbeat {
0% {
transform: scale(1);
}
7% {
transform: scale(1.3);
}
14% {
transform: scale(1);
}
21% {
transform: scale(1.3);
}
28% {
transform: scale(1);
}
}
@keyframes danger-blink {
0% {
color: #eeeeee;
text-shadow: none;
}
50% {
color: #d9534f;
text-shadow: 0 0 5px #d9534f;
}
100% {
color: #eeeeee;
text-shadow: none;
}
}
@-webkit-keyframes danger-blink {
0% {
color: #eeeeee;
text-shadow: none;
}
50% {
color: #d9534f;
text-shadow: 0 0 5px #d9534f;
}
100% {
color: #eeeeee;
text-shadow: none;
}
}