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