|
|
@ -12,8 +12,19 @@
|
|
|
|
background-image: linear-gradient(to bottom, #ffffff, #f3f3f3);
|
|
|
|
background-image: linear-gradient(to bottom, #ffffff, #f3f3f3);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.dashboard .basic-board {
|
|
|
|
|
|
|
|
display:grid;
|
|
|
|
|
|
|
|
grid-template-rows: 60px calc(100% - 60px);
|
|
|
|
|
|
|
|
grid-template-columns: 100%;
|
|
|
|
|
|
|
|
gap: 10px;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
padding:8px;
|
|
|
|
|
|
|
|
align-content: center;
|
|
|
|
|
|
|
|
}
|
|
|
|
.dashboard .scalar {
|
|
|
|
.dashboard .scalar {
|
|
|
|
display:grid; grid-template-rows:auto auto; gap:4px; align-items: center; align-content: center;}
|
|
|
|
display:grid; grid-template-rows:auto auto; gap: 10px; align-items: center; align-content: center;}
|
|
|
|
.dashboard .scalar .value {font-size:40px; font-family: courier; font-weight: bold;}
|
|
|
|
.dashboard .scalar .value {font-size:40px; font-family: courier; font-weight: bold;}
|
|
|
|
.dashboard .scalar .label {font-size:10px; text-transform: uppercase;}
|
|
|
|
.dashboard .scalar .label {font-size:10px; text-transform: uppercase;}
|
|
|
|
|
|
|
|
|
|
|
@ -21,16 +32,16 @@
|
|
|
|
.apexcharts-title-text {
|
|
|
|
.apexcharts-title-text {
|
|
|
|
text-transform: capitalize;
|
|
|
|
text-transform: capitalize;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.dashboard .title {grid-column:1 / span 4; text-transform:capitalize; padding:4px;}
|
|
|
|
.dashboard .board-title {grid-column:1 / span 4; text-transform:capitalize; padding:4px;}
|
|
|
|
.scalar-pane { text-align: center;
|
|
|
|
.scalar-pane { text-align: center;
|
|
|
|
|
|
|
|
|
|
|
|
;}
|
|
|
|
;}
|
|
|
|
.board-10{
|
|
|
|
.board-10{
|
|
|
|
|
|
|
|
|
|
|
|
display:grid;
|
|
|
|
display:grid;
|
|
|
|
grid-template-columns: calc(100% - 150px) 150px; gap:4px;
|
|
|
|
grid-template-columns: calc(100% - 125px) 125px; gap: 10px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.board-10 .scalar-pane { display:grid; gap:4px;
|
|
|
|
.board-10 .scalar-pane { display:grid; gap: 10px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.board-10 .scalar-pane .scalar {border-top:1px solid #d3d3d3}
|
|
|
|
.board-10 .scalar-pane .scalar {border-top:1px solid #d3d3d3}
|
|
|
@ -44,32 +55,32 @@
|
|
|
|
.board-110 {
|
|
|
|
.board-110 {
|
|
|
|
display:grid;
|
|
|
|
display:grid;
|
|
|
|
grid-template-columns: 2fr 2fr 150px;
|
|
|
|
grid-template-columns: 2fr 2fr 150px;
|
|
|
|
gap:4px;
|
|
|
|
gap: 10px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.board-110 .scalar-pane{display:grid;}
|
|
|
|
.board-110 .scalar-pane{display:grid;}
|
|
|
|
|
|
|
|
|
|
|
|
.board-110-2 {
|
|
|
|
.board-110-2 {
|
|
|
|
display:grid;
|
|
|
|
display:grid;
|
|
|
|
grid-template-columns: 2fr 2fr;
|
|
|
|
grid-template-columns: 2fr 2fr;
|
|
|
|
gap:4px;
|
|
|
|
gap: 10px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.board-110-2 .scalar-pane {grid-row:3; grid-column: 2;
|
|
|
|
.board-110-2 .scalar-pane {grid-row:3; grid-column: 2;
|
|
|
|
display: grid;
|
|
|
|
display: grid;
|
|
|
|
grid-template-columns: 50% 50%; gap:4px;}
|
|
|
|
grid-template-columns: 50% 50%; gap: 10px;}
|
|
|
|
|
|
|
|
|
|
|
|
.board-110-2 .scalar-pane > :nth-child(even){ border-left:1px solid #d3d3d3;}
|
|
|
|
.board-110-2 .scalar-pane > :nth-child(even){ border-left:1px solid #d3d3d3;}
|
|
|
|
|
|
|
|
|
|
|
|
.board-100 {
|
|
|
|
.board-100 {
|
|
|
|
display:grid;
|
|
|
|
display:grid;
|
|
|
|
grid-template-columns: 2fr 1fr 1fr; gap:4px;
|
|
|
|
grid-template-columns: 2fr 1fr 1fr; gap: 10px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.board-100-2 {
|
|
|
|
.board-100-2 {
|
|
|
|
display:grid;
|
|
|
|
display:grid;
|
|
|
|
grid-template-columns: 2fr 1fr ; gap:4px;
|
|
|
|
grid-template-columns: 2fr 1fr ; gap: 10px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.board-100,.board-100-2 .scalar-pane {display:grid; gap:4px;}
|
|
|
|
.board-100,.board-100-2 .scalar-pane {display:grid; gap: 10px;}
|
|
|
|
.board-100-2 > :nth-child(2){grid-row:2 / span 3}
|
|
|
|
.board-100-2 > :nth-child(1){grid-row:1 / span 2}
|
|
|
|
/* .board-100-2 :nth-child(3){grid-row:2; grid-column:2} */
|
|
|
|
.board-100-2 > :nth-child(2){grid-row:1; grid-column:2}
|
|
|
|
.board-100-2 .scalar-pane {grid-row:3; grid-column: 2 ; display:grid; grid-template-columns: repeat(2, 1fr); }
|
|
|
|
.board-100-2 .scalar-pane {grid-row:2; grid-column: 2 ; display:grid; grid-template-columns: repeat(2, 1fr); }
|
|
|
|
.board-100-2 .scalar-pane > :nth-child(even){ border-left:1px solid #d3d3d3;}
|
|
|
|
.board-100-2 .scalar-pane > :nth-child(even){ border-left:1px solid #d3d3d3;}
|