Add .signal-icon + .signal-bar classes

This commit is contained in:
billz 2023-03-24 12:02:19 +01:00
parent 26bde30e95
commit 4850354630
3 changed files with 109 additions and 1 deletions

View file

@ -257,3 +257,57 @@ canvas#divDBChartBandwidthhourly {
color: #ff4500;
}
.signal-icon {
margin-top: 2px;
height: 16px;
width: 16px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: baseline;
}
.signal-icon .signal-bar {
width: 4px;
border-radius: 1px;
opacity: 30%;
background: <?php echo $color; ?>;
}
.signal-icon .signal-bar:nth-child(1) { height: 40%; }
.signal-icon .signal-bar:nth-child(2) { height: 70%; }
.signal-icon .signal-bar:nth-child(3) { height: 100%; }
.signal-icon.weak .signal-bar:nth-child(1),
.signal-icon.medium .signal-bar:nth-child(1),
.signal-icon.medium .signal-bar:nth-child(2),
.signal-icon.strong .signal-bar:nth-child(1),
.signal-icon.strong .signal-bar:nth-child(2),
.signal-icon.strong .signal-bar:nth-child(3)
{ opacity: 100%; }.signal-icon {
margin-top: 2px;
height: 16px;
width: 16px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: baseline;
}
.signal-icon .signal-bar {
width: 4px;
border-radius: 1px;
opacity: 30%;
background: <?php echo $color; ?>;
}
.signal-icon .signal-bar:nth-child(1) { height: 40%; }
.signal-icon .signal-bar:nth-child(2) { height: 70%; }
.signal-icon .signal-bar:nth-child(3) { height: 100%; }
.signal-icon.weak .signal-bar:nth-child(1),
.signal-icon.medium .signal-bar:nth-child(1),
.signal-icon.medium .signal-bar:nth-child(2),
.signal-icon.strong .signal-bar:nth-child(1),
.signal-icon.strong .signal-bar:nth-child(2),
.signal-icon.strong .signal-bar:nth-child(3)
{ opacity: 100%; }

View file

@ -39,7 +39,7 @@ h5.card-title {
}
.card, .modal-dialog {
border-radius: 1px;
border-radius: 3px;
border-color: #ff6600;
}
@ -302,3 +302,30 @@ canvas#divDBChartBandwidthhourly {
color: #ff4500;
}
.signal-icon {
margin-top: 2px;
height: 16px;
width: 16px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: baseline;
}
.signal-icon .signal-bar {
width: 4px;
border-radius: 1px;
opacity: 30%;
background: #ff6600;
}
.signal-icon .signal-bar:nth-child(1) { height: 40%; }
.signal-icon .signal-bar:nth-child(2) { height: 70%; }
.signal-icon .signal-bar:nth-child(3) { height: 100%; }
.signal-icon.weak .signal-bar:nth-child(1),
.signal-icon.medium .signal-bar:nth-child(1),
.signal-icon.medium .signal-bar:nth-child(2),
.signal-icon.strong .signal-bar:nth-child(1),
.signal-icon.strong .signal-bar:nth-child(2),
.signal-icon.strong .signal-bar:nth-child(3)
{ opacity: 100%; }

View file

@ -484,3 +484,30 @@ canvas#divDBChartBandwidthhourly {
color: #ff4500;
}
.signal-icon {
margin-top: 2px;
height: 16px;
width: 16px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: baseline;
}
.signal-icon .signal-bar {
width: 4px;
border-radius: 1px;
opacity: 30%;
background: #2b8080;
}
.signal-icon .signal-bar:nth-child(1) { height: 40%; }
.signal-icon .signal-bar:nth-child(2) { height: 70%; }
.signal-icon .signal-bar:nth-child(3) { height: 100%; }
.signal-icon.weak .signal-bar:nth-child(1),
.signal-icon.medium .signal-bar:nth-child(1),
.signal-icon.medium .signal-bar:nth-child(2),
.signal-icon.strong .signal-bar:nth-child(1),
.signal-icon.strong .signal-bar:nth-child(2),
.signal-icon.strong .signal-bar:nth-child(3)
{ opacity: 100%; }