ESPTerm web interface submodule, separated to make testing and development easier
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
espterm-front-end/sass/pages/_wifi.scss

186 lines
2.6 KiB

#ap-list {
column-count: 3;
column-gap: 0;
@include media($tablet) {
column-count: 2;
}
@include media($phone) {
column-count: 1;
}
margin: 0 (- dist(-3));
}
#ap-loader, #ap-noscan, #ap-scan {
background: rgba(white, .1);
border-radius: 5px;
padding: dist(-2);
margin-bottom: dist(-2);
margin-top: dist(-2);
font-size: 110%;
}
#ap-noscan {
font-weight: bold;
}
#ap-box {
padding-top: dist(-2);
label {
display: block;
color: white;
font-weight: bold;
margin-bottom: dist(-3);
}
}
#psk-modal form {
@extend %form-row-spacing;
display: flex;
align-items: center;
margin: dist(-2);
input[type=password] {
min-width: 5rem;
}
}
#wificonfbox form {
@extend %form-row-spacing;
}
%ap-inner {
cursor: pointer;
@include noselect;
position: relative;
&:active {
left: 0;
top: 1px;
}
border-radius: 3px;
color: #222;
background: #afafaf;
transition: background-color 0.5s;
&:hover { background: white }
display: flex;
.rssi {
min-width: 2.5rem;
flex: 0 0 15%;
text-align: right;
&:after {
padding-left: dist(-5);
content: '%';
font-size: fsize(-1);
}
}
.essid {
flex: 1 1 70%;
min-width: 0;
text-overflow: ellipsis;
overflow: hidden;
font-weight: bold;
}
.auth {
flex: 0 0 15%;
}
}
.AP {
// can't use margins inside a column
break-inside: avoid-column;
max-width: 500px;
padding: dist(-3);
&.selected .inner {//#70dfa3
background: #42a6f9 !important; // override the hover effect #43de81
cursor: default;
top: 0 !important; // no click effect
}
.inner {
@extend %ap-inner;
& > * {
padding: dist(-1);
@include nowrap;
}
}
}
.AP-preview-nil {
padding: 8px;
border-radius: 5px;
border: 1px dashed #ddd;
width: 250px;
height: 94px;
}
.AP-preview {
.wrap {
@extend %ap-inner;
flex-direction: row;
background: #ddd !important; // override the hover effect #43de81
cursor: default;
top: 0 !important; // no click effect
overflow: hidden;
.inner {
display: flex;
flex-direction: column;
& > * {
padding: dist(-1);
@include nowrap;
}
}
.forget {
align-self: stretch;
line-height: 100%;
padding: dist(-1);
border-left: 1px solid #bbb;
display: flex;
align-items: center;
&, &:hover {
color: black;
text-decoration: none;
}
font-size: 28px;
&:hover {
background: #dc4a6a;
color: white;
border-left: 1px solid #666;
border-bottom-right-radius: 3px;
border-top-right-radius: 3px;
}
&:active {
position: relative;
padding-top: calc(#{dist(-1)} + 1px);
}
}
.essid, .passwd, .nopasswd {
padding-bottom: 0;
}
.x-passwd {
font-family: monospace;
}
}
}