fix web interface design
This commit is contained in:
parent
47033621da
commit
a04f3e1947
|
|
@ -1,26 +1,26 @@
|
||||||
adapters.html
|
adapters.html
|
||||||
api
|
api
|
||||||
api/dbg.json
|
api/dbg.json
|
||||||
api/dbg2.json
|
api/dbg2.json
|
||||||
api/gendata.json
|
api/gendata.json
|
||||||
api/mem.json
|
api/mem.json
|
||||||
api/set1.json
|
api/set1.json
|
||||||
api/set2.json
|
api/set2.json
|
||||||
api/set3.json
|
api/set3.json
|
||||||
api/stat.json
|
api/stat.json
|
||||||
api/status.json
|
api/status.json
|
||||||
api/tmr.json
|
api/tmr.json
|
||||||
favicon.ico
|
favicon.ico
|
||||||
iconsfont.css
|
iconsfont.css
|
||||||
iconsfont.woff2
|
iconsfont.woff2
|
||||||
index.html
|
index.html
|
||||||
info.html
|
info.html
|
||||||
logo.png
|
logo.png
|
||||||
main.js
|
main.js
|
||||||
reboot.html
|
reboot.html
|
||||||
res
|
res
|
||||||
res.js
|
res.js
|
||||||
res/ca_cert.pem
|
res/ca_cert.pem
|
||||||
services.html
|
services.html
|
||||||
styles.css
|
styles.css
|
||||||
system.html
|
system.html
|
||||||
760
HTML/styles.css
760
HTML/styles.css
|
|
@ -1,380 +1,380 @@
|
||||||
/*========== VARIABLES CSS ==========*/
|
/*========== VARIABLES CSS ==========*/
|
||||||
:root {
|
:root {
|
||||||
--header-height: 3.0rem;
|
--header-height: 60px;
|
||||||
--nav-width: 200px;
|
--nav-width: 200px;
|
||||||
|
|
||||||
/*========== Colors ==========*/
|
/*========== Colors ==========*/
|
||||||
--first-color: #FFFFFF;
|
--first-color: #FFFFFF;
|
||||||
--first-color-light: #90C0E0;
|
--first-color-light: #90C0E0;
|
||||||
--title-color: #336699;
|
--title-color: #336699;
|
||||||
--text-color: #404040;
|
--text-color: #404040;
|
||||||
--text-color-light: #336699;
|
--text-color-light: #336699;
|
||||||
--body-color: #FFFFFF;
|
--body-color: #FFFFFF;
|
||||||
--container-color: #90C0E0;
|
--container-color: #90C0E0;
|
||||||
|
|
||||||
/*========== Font and typography ==========*/
|
/*========== Font and typography ==========*/
|
||||||
--body-font: 'Arial', sanf-serif;
|
--body-font: 'Arial', sanf-serif;
|
||||||
--large-font-size: 1.5rem;
|
--large-font-size: 1.5rem;
|
||||||
--normal-font-size: 1.0rem;
|
--normal-font-size: 1.0rem;
|
||||||
--small-font-size: .9rem;
|
--small-font-size: .9rem;
|
||||||
--smaller-font-size: .8rem;
|
--smaller-font-size: .8rem;
|
||||||
|
|
||||||
/*========== Font weight ==========*/
|
/*========== Font weight ==========*/
|
||||||
--font-medium: 500;
|
--font-medium: 500;
|
||||||
--font-semi-bold: 600;
|
--font-semi-bold: 600;
|
||||||
|
|
||||||
/*========== z index ==========*/
|
/*========== z index ==========*/
|
||||||
--z-fixed: 100;
|
--z-fixed: 100;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 1024px) {
|
@media screen and (min-width: 1024px) {
|
||||||
:root {
|
:root {
|
||||||
--normal-font-size: 1.0rem;
|
--normal-font-size: 1.0rem;
|
||||||
--small-font-size: .9rem;
|
--small-font-size: .9rem;
|
||||||
--smaller-font-size: .8rem;
|
--smaller-font-size: .8rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/*========== BASE ==========*/
|
/*========== BASE ==========*/
|
||||||
*, ::before, ::after {
|
*, ::before, ::after {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
margin: var(--header-height) 0 0 0;
|
margin: var(--header-height) 0 0 0;
|
||||||
padding: 0 0 0;
|
padding: 0 0 0;
|
||||||
font-family: var(--body-font);
|
font-family: var(--body-font);
|
||||||
font-size: var(--normal-font-size);
|
font-size: var(--normal-font-size);
|
||||||
background-color: var(--body-color);
|
background-color: var(--body-color);
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*========== HEADER ==========*/
|
/*========== HEADER ==========*/
|
||||||
.header {
|
.header {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-color: var(--container-color);
|
background-color: var(--container-color);
|
||||||
box-shadow: 0 1px 0 rgba(22, 8, 43, 0.1);
|
box-shadow: 0 1px 0 rgba(22, 8, 43, 0.1);
|
||||||
padding: 0 1rem;
|
padding: 0 1rem;
|
||||||
z-index: var(--z-fixed);
|
z-index: var(--z-fixed);
|
||||||
}
|
}
|
||||||
|
|
||||||
.header__container {
|
.header__container {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
height: var(--header-height);
|
height: var(--header-height);
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header__img {
|
.header__img {
|
||||||
width: 3.0rem;
|
width: 40px;
|
||||||
height: 3.0rem;
|
height: 40px;
|
||||||
border-radius: 5%;
|
border-radius: 5%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header__logo {
|
.header__logo {
|
||||||
color: var(--title-color);
|
color: var(--title-color);
|
||||||
font-weight: var(--font-medium);
|
font-weight: var(--font-medium);
|
||||||
font-size: var(--large-font-size);
|
font-size: var(--large-font-size);
|
||||||
|
|
||||||
margin-left: 150px;
|
margin-left: 150px;
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header__icon,
|
.header__icon,
|
||||||
.header__toggle {
|
.header__toggle {
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header__toggle {
|
.header__toggle {
|
||||||
color: var(--title-color);
|
color: var(--title-color);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*========== NAV ==========*/
|
/*========== NAV ==========*/
|
||||||
.nav {
|
.nav {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: -100%;
|
left: -100%;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
padding: 1rem 1rem 0;
|
padding: 1rem 1rem 0;
|
||||||
background-color: var(--container-color);
|
background-color: var(--container-color);
|
||||||
box-shadow: 1px 0 0 rgba(22, 8, 43, 0.1);
|
box-shadow: 1px 0 0 rgba(22, 8, 43, 0.1);
|
||||||
z-index: var(--z-fixed);
|
z-index: var(--z-fixed);
|
||||||
transition: .4s;
|
transition: .4s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav__container {
|
.nav__container {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding-bottom: 3rem;
|
padding-bottom: 3rem;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
scrollbar-width: none; /* For mozilla */
|
scrollbar-width: none; /* For mozilla */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* For Google Chrome and others */
|
/* For Google Chrome and others */
|
||||||
.nav__container::-webkit-scrollbar {
|
.nav__container::-webkit-scrollbar {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav__logo {
|
.nav__logo {
|
||||||
font-weight: var(--font-semi-bold);
|
font-weight: var(--font-semi-bold);
|
||||||
margin-bottom: 2.5rem;
|
margin-bottom: 2.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav__list,
|
.nav__list,
|
||||||
.nav__items {
|
.nav__items {
|
||||||
display: grid;
|
display: grid;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav__list {
|
.nav__list {
|
||||||
row-gap: 2.5rem;
|
row-gap: 2.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav__items {
|
.nav__items {
|
||||||
row-gap: 1.5rem;
|
row-gap: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav__subtitle {
|
.nav__subtitle {
|
||||||
font-size: var(--normal-font-size);
|
font-size: var(--normal-font-size);
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
letter-spacing: .1rem;
|
letter-spacing: .1rem;
|
||||||
color: var(--text-color-light);
|
color: var(--text-color-light);
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav__link {
|
.nav__link {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav__link:hover {
|
.nav__link:hover {
|
||||||
color: var(--first-color);
|
color: var(--first-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav__icon {
|
.nav__icon {
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
margin-right: .5rem;
|
margin-right: .5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav__name {
|
.nav__name {
|
||||||
font-size: var(--small-font-size);
|
font-size: var(--small-font-size);
|
||||||
font-weight: var(--font-medium);
|
font-weight: var(--font-medium);
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav__logout {
|
.nav__logout {
|
||||||
margin-top: 5rem;
|
margin-top: 5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Dropdown */
|
/* Dropdown */
|
||||||
.nav__dropdown {
|
.nav__dropdown {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
max-height: 21px;
|
max-height: 21px;
|
||||||
transition: .4s ease-in-out;
|
transition: .4s ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav__dropdown-collapse {
|
.nav__dropdown-collapse {
|
||||||
background-color: var(--first-color-light);
|
background-color: var(--first-color-light);
|
||||||
border-radius: .5rem;
|
border-radius: .5rem;
|
||||||
margin-top: 1rem;
|
margin-top: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav__dropdown-content {
|
.nav__dropdown-content {
|
||||||
display: grid;
|
display: grid;
|
||||||
row-gap: .5rem;
|
row-gap: .5rem;
|
||||||
padding: .75rem 2.5rem .75rem 2.5rem;
|
padding: .75rem 2.5rem .75rem 2.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav__dropdown-item {
|
.nav__dropdown-item {
|
||||||
font-size: var(--small-font-size);
|
font-size: var(--small-font-size);
|
||||||
font-weight: var(--font-medium);
|
font-weight: var(--font-medium);
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
margin: 3px 3px;
|
margin: 3px 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav__dropdown-item:hover {
|
.nav__dropdown-item:hover {
|
||||||
color: var(--first-color);
|
color: var(--first-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav__dropdown-icon {
|
.nav__dropdown-icon {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
transition: .4s;
|
transition: .4s;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Show dropdown collapse */
|
/* Show dropdown collapse */
|
||||||
.nav__dropdown:hover {
|
.nav__dropdown:hover {
|
||||||
max-height: 100rem;
|
max-height: 100rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Rotate icon arrow */
|
/* Rotate icon arrow */
|
||||||
.nav__dropdown:hover .nav__dropdown-icon {
|
.nav__dropdown:hover .nav__dropdown-icon {
|
||||||
transform: rotate(180deg);
|
transform: rotate(180deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
/*===== Show menu =====*/
|
/*===== Show menu =====*/
|
||||||
.show-menu {
|
.show-menu {
|
||||||
left: 0;
|
left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*===== Active link =====*/
|
/*===== Active link =====*/
|
||||||
.active {
|
.active {
|
||||||
color: var(--first-color);
|
color: var(--first-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ========== MEDIA QUERIES ==========*/
|
/* ========== MEDIA QUERIES ==========*/
|
||||||
/* For small devices reduce search*/
|
/* For small devices reduce search*/
|
||||||
@media screen and (max-width: 320px) {
|
@media screen and (max-width: 320px) {
|
||||||
.header__search {
|
.header__search {
|
||||||
width: 70%;
|
width: 70%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 768px) {
|
@media screen and (min-width: 768px) {
|
||||||
body {
|
body {
|
||||||
padding: 0 0 0 4rem;
|
padding: 0 0 0 4rem;
|
||||||
}
|
}
|
||||||
.header {
|
.header {
|
||||||
padding: 0 3rem 0 4rem;
|
padding: 0 3rem 0 4rem;
|
||||||
}
|
}
|
||||||
.header__container {
|
.header__container {
|
||||||
height: calc(var(--header-height) + .5rem);
|
height: calc(var(--header-height) + .5rem);
|
||||||
}
|
}
|
||||||
.header__search {
|
.header__search {
|
||||||
width: 300px;
|
width: 300px;
|
||||||
padding: .55rem .75rem;
|
padding: .55rem .75rem;
|
||||||
}
|
}
|
||||||
.header__toggle {
|
.header__toggle {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.header__logo {
|
.header__logo {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
.header__img {
|
.header__img {
|
||||||
width: 30px;
|
width: 40px;
|
||||||
height: 30px;
|
height: 40px;
|
||||||
order: 1;
|
order: 1;
|
||||||
}
|
}
|
||||||
.nav {
|
.nav {
|
||||||
left: 0;
|
left: 0;
|
||||||
padding: 1.2rem 1.2rem 0;
|
padding: 1.2rem 1.2rem 0;
|
||||||
width: 4.0rem; /* Reduced navbar */
|
width: 4.0rem; /* Reduced navbar */
|
||||||
}
|
}
|
||||||
.nav__items {
|
.nav__items {
|
||||||
row-gap: 2.0rem;
|
row-gap: 2.0rem;
|
||||||
}
|
}
|
||||||
.nav__icon {
|
.nav__icon {
|
||||||
font-size: 1.0rem;
|
font-size: 1.0rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Element opacity */
|
/* Element opacity */
|
||||||
.nav__logo-name,
|
.nav__logo-name,
|
||||||
.nav__name,
|
.nav__name,
|
||||||
.nav__subtitle,
|
.nav__subtitle,
|
||||||
.nav__dropdown-icon {
|
.nav__dropdown-icon {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: .3s;
|
transition: .3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Navbar expanded */
|
/* Navbar expanded */
|
||||||
.nav:hover {
|
.nav:hover {
|
||||||
width: var(--nav-width);
|
width: var(--nav-width);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Visible elements */
|
/* Visible elements */
|
||||||
.nav:hover .nav__logo-name {
|
.nav:hover .nav__logo-name {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
.nav:hover .nav__subtitle {
|
.nav:hover .nav__subtitle {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
.nav:hover .nav__name {
|
.nav:hover .nav__name {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
.nav:hover .nav__dropdown-icon {
|
.nav:hover .nav__dropdown-icon {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.rl{text-align:right;}
|
.rl{text-align:right;}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
input, .btn, .lab, textarea {
|
input, .btn, .lab, textarea {
|
||||||
font:.8rem consolas,monospace;
|
font:.8rem consolas,monospace;
|
||||||
padding-left:3px;
|
padding-left:3px;
|
||||||
border:solid 1px #CCCCCC;
|
border:solid 1px #CCCCCC;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
height:2.0rem;
|
height:2.0rem;
|
||||||
margin: 3px 3px;
|
margin: 3px 3px;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn{min-width:100px;}
|
.btn{min-width:100px;}
|
||||||
.btn:active{background-color: #CCCCCC;}
|
.btn:active{background-color: #CCCCCC;}
|
||||||
.btn:hover {border:solid 1px #999999;}
|
.btn:hover {border:solid 1px #999999;}
|
||||||
|
|
||||||
.lab {border: none;}
|
.lab {border: none;}
|
||||||
|
|
||||||
textarea {
|
textarea {
|
||||||
height: 4.0rem;
|
height: 4.0rem;
|
||||||
margin:auto;
|
margin:auto;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cntr {
|
.cntr {
|
||||||
margin:auto;
|
margin:auto;
|
||||||
font: .8rem consolas, monospace;}
|
font: .8rem consolas, monospace;}
|
||||||
|
|
||||||
.mlhdr {
|
.mlhdr {
|
||||||
font:16px consolas,monospace;
|
font:16px consolas,monospace;
|
||||||
font-weight:bold;
|
font-weight:bold;
|
||||||
color: var(--title-color);
|
color: var(--title-color);
|
||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mlp {
|
.mlp {
|
||||||
break-inside: avoid;
|
break-inside: avoid;
|
||||||
padding:5px;
|
padding:5px;
|
||||||
|
|
||||||
}
|
}
|
||||||
.mlpc {
|
.mlpc {
|
||||||
margin: 10px 0;
|
margin: 10px 0;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
border:solid 1px #CCCCCC;
|
border:solid 1px #CCCCCC;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ml {
|
.ml {
|
||||||
column-count: 1;
|
column-count: 1;
|
||||||
column-gap: 0;
|
column-gap: 0;
|
||||||
}
|
}
|
||||||
@media (min-width: 768px) {
|
@media (min-width: 768px) {
|
||||||
.ml {
|
.ml {
|
||||||
column-count: 2;
|
column-count: 2;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@media (min-width: 1200px) {
|
@media (min-width: 1200px) {
|
||||||
.ml {
|
.ml {
|
||||||
column-count: 3;
|
column-count: 3;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
3046
sdkconfig.old
3046
sdkconfig.old
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user