web: improve style for mobile view (#393)
* move stylecss to beautified file * beware! remove unused code * tabs to space * add responsive classes * fix td border * add to advanced web * enlarge checkboxes * use common header func for confirmation html * fix checkbox center align * update const css code * move css to resources folder
This commit is contained in:
David Girón
4
resources/README.md
Normal file
4
resources/README.md
Normal file
@@ -0,0 +1,4 @@
|
||||
## Resources
|
||||
|
||||
Any files used along with application source code, but not to be mixed with C/C++ code.
|
||||
This can include CSS, JS, favicon, etc.
|
||||
233
resources/style.css
Normal file
233
resources/style.css
Normal file
@@ -0,0 +1,233 @@
|
||||
/*
|
||||
escaped by https://www.cescaper.com/
|
||||
source: https://cdn.jsdelivr.net/npm/@exampledev/new.css@1.1.2/new.min.css
|
||||
*/
|
||||
|
||||
/*
|
||||
* Usage:
|
||||
* Compact / minify this code with any tool
|
||||
* Copy one-line string to src/WebCfgServerConstants.h as stylecss
|
||||
* TODO: automate this process upon building :)
|
||||
*/
|
||||
|
||||
:root {
|
||||
--nc-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
||||
--nc-font-mono: Consolas, monaco, 'Ubuntu Mono', 'Liberation Mono', 'Courier New', Courier, monospace;
|
||||
--nc-tx-1: #000000;
|
||||
--nc-tx-2: #1A1A1A;
|
||||
--nc-bg-1: #FFFFFF;
|
||||
--nc-bg-2: #F6F8FA;
|
||||
--nc-bg-3: #E5E7EB;
|
||||
--nc-lk-1: #0070F3;
|
||||
--nc-lk-2: #0366D6;
|
||||
--nc-lk-tx: #FFFFFF;
|
||||
--nc-ac-1: #79FFE1;
|
||||
--nc-ac-tx: #0C4047
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme:dark) {
|
||||
:root {
|
||||
--nc-tx-1: #ffffff;
|
||||
--nc-tx-2: #eeeeee;
|
||||
--nc-bg-1: #000000;
|
||||
--nc-bg-2: #111111;
|
||||
--nc-bg-3: #222222;
|
||||
--nc-lk-1: #3291FF;
|
||||
--nc-lk-2: #0070F3;
|
||||
--nc-lk-tx: #FFFFFF;
|
||||
--nc-ac-1: #7928CA;
|
||||
--nc-ac-tx: #FFFFFF
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0
|
||||
}
|
||||
|
||||
img,
|
||||
input,
|
||||
option,
|
||||
p,
|
||||
table,
|
||||
textarea,
|
||||
ul {
|
||||
margin-bottom: 1rem
|
||||
}
|
||||
|
||||
button,
|
||||
html,
|
||||
input,
|
||||
select {
|
||||
font-family: var(--nc-font-sans)
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0 auto;
|
||||
max-width: 750px;
|
||||
padding: 2rem;
|
||||
border-radius: 6px;
|
||||
overflow-x: hidden;
|
||||
word-break: normal;
|
||||
overflow-wrap: anywhere;
|
||||
background: var(--nc-bg-1);
|
||||
color: var(--nc-tx-2);
|
||||
font-size: 1.03rem;
|
||||
line-height: 1.5
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: var(--nc-ac-1);
|
||||
color: var(--nc-ac-tx)
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1;
|
||||
color: var(--nc-tx-1);
|
||||
padding-top: .875rem
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
color: var(--nc-tx-1);
|
||||
padding-bottom: 2px;
|
||||
margin-bottom: 8px;
|
||||
border-bottom: 1px solid var(--nc-bg-2)
|
||||
}
|
||||
|
||||
h4, h5, h6 {
|
||||
margin-bottom: .3rem
|
||||
}
|
||||
|
||||
h1 { font-size: 2.25rem }
|
||||
h2 { font-size: 1.85rem }
|
||||
h3 { font-size: 1.55rem }
|
||||
h4 { font-size: 1.25rem }
|
||||
h5 { font-size: 1rem }
|
||||
h6 { font-size: .875rem }
|
||||
a { color: var(--nc-lk-1) }
|
||||
a:hover { color: var(--nc-lk-2) }
|
||||
abbr { cursor: help }
|
||||
abbr:hover { cursor: help }
|
||||
|
||||
a button,
|
||||
button,
|
||||
input[type=button],
|
||||
input[type=reset],
|
||||
input[type=submit] {
|
||||
font-size: 1rem;
|
||||
display: inline-block;
|
||||
padding: 6px 12px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
background: var(--nc-lk-1);
|
||||
color: var(--nc-lk-tx);
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
color: var(--nc-lk-tx)
|
||||
}
|
||||
|
||||
a button[disabled],
|
||||
button[disabled],
|
||||
input[type=button][disabled],
|
||||
input[type=reset][disabled],
|
||||
input[type=submit][disabled] {
|
||||
cursor: default;
|
||||
opacity: .5;
|
||||
cursor: not-allowed
|
||||
}
|
||||
|
||||
.button:focus,
|
||||
.button:hover,
|
||||
button:focus,
|
||||
button:hover,
|
||||
input[type=button]:focus,
|
||||
input[type=button]:hover,
|
||||
input[type=reset]:focus,
|
||||
input[type=reset]:hover,
|
||||
input[type=submit]:focus,
|
||||
input[type=submit]:hover {
|
||||
background: var(--nc-lk-2)
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
td, th {
|
||||
border: 1px solid var(--nc-bg-3);
|
||||
text-align: left;
|
||||
padding: .5rem
|
||||
}
|
||||
|
||||
th { background: var(--nc-bg-2) }
|
||||
tr:nth-child(even) { background: var(--nc-bg-2) }
|
||||
|
||||
textarea { max-width: 100% }
|
||||
|
||||
input, select, textarea {
|
||||
padding: 6px 12px;
|
||||
margin-bottom: .5rem;
|
||||
background: var(--nc-bg-2);
|
||||
color: var(--nc-tx-2);
|
||||
border: 1px solid var(--nc-bg-3);
|
||||
border-radius: 4px;
|
||||
box-shadow: none;
|
||||
box-sizing: border-box
|
||||
}
|
||||
|
||||
img { max-width: 100% }
|
||||
|
||||
td>input {
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px
|
||||
}
|
||||
|
||||
td>textarea {
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px
|
||||
}
|
||||
|
||||
td>select {
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px
|
||||
}
|
||||
|
||||
#tblnav td, th {
|
||||
border: 0;
|
||||
border-bottom: 1px solid;
|
||||
}
|
||||
|
||||
.tdbtn {
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.warning {
|
||||
color: #f00;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
.adapt td { display: block; }
|
||||
|
||||
.adapt input[type=text],
|
||||
.adapt input[type=password],
|
||||
.adapt input[type=submit],
|
||||
.adapt textarea,
|
||||
.adapt select { width: 100%; }
|
||||
|
||||
.adapt td:has(input[type=checkbox]) {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.adapt input[type=checkbox] {
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
}
|
||||
|
||||
.adapt table td:first-child { border-bottom: 0; }
|
||||
.adapt table td:last-child { border-top: 0; }
|
||||
}
|
||||
Reference in New Issue
Block a user