102 lines
1.7 KiB
SCSS
102 lines
1.7 KiB
SCSS
.sensors-page {
|
|
.sensors-head {
|
|
display: flex;
|
|
align-items: center;
|
|
flex: 1;
|
|
|
|
> button {
|
|
margin-left: auto;
|
|
}
|
|
}
|
|
|
|
section.content {
|
|
.sensors-list {
|
|
display: grid;
|
|
grid-template-columns: repeat(6, 1fr);
|
|
overflow: auto;
|
|
padding: 1rem;
|
|
|
|
@media screen and (max-width: 1500px) {
|
|
grid-template-columns: repeat(4, 1fr);
|
|
}
|
|
|
|
@media screen and (max-width: 1200px) {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
|
|
@media screen and (max-width: 900px) {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
@media screen and (max-width: 768px) {
|
|
grid-template-columns: repeat(1, 1fr);
|
|
}
|
|
|
|
.sensor-item {
|
|
margin: 0.25rem;
|
|
padding: 0.5rem;
|
|
|
|
> div {
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
> .name {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
> .auth {
|
|
.auth-value {
|
|
display: flex;
|
|
font-size: 85%;
|
|
margin: 0.25rem 0;
|
|
|
|
.label {
|
|
width: 2rem;
|
|
background-color: #ddd;
|
|
color: #000;
|
|
padding: 0 0.25rem;
|
|
border-radius: 0.25rem;
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.value {
|
|
flex: 1;
|
|
display: flex;
|
|
|
|
input {
|
|
flex: 1;
|
|
border-radius: 0;
|
|
}
|
|
|
|
button {
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
padding: 0rem 0.5rem;
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
font-size: 120%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
> .actions {
|
|
text-align: right;
|
|
margin-top: 0.5rem;
|
|
|
|
button {
|
|
margin-left: 0.25rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|