mirror of
https://github.com/HASwitchPlate/openHASP.git
synced 2025-07-28 13:46:36 +00:00
Minor css tweaks and fixes #246
This commit is contained in:
fvanroie
parent
ddd35c8be7
commit
1a50f055af
270
data/style.css
270
data/style.css
@ -1 +1,269 @@
|
|||||||
:root{--star:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -6 16 16"><line y1="-3" y2="3" stroke="red" transform="rotate(15)"></line><line y1="-3" y2="3" stroke="red" transform="rotate(75)"></line><line y1="-3" y2="3" stroke="red" transform="rotate(-45)"></line></svg>');--trash:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" id="mdi-trash-can-outline" width="24" height="24" viewBox="0 0 24 24"><path d="M9,3V4H4V6H5V19A2,2 0 0,0 7,21H17A2,2 0 0,0 19,19V6H20V4H15V3H9M7,6H17V19H7V6M9,8V17H11V8H9M13,8V17H15V8H13Z" /></svg>')}a.foot:link,a.foot:visited{color:var(--footfg)}input:not([type=file]){background-color:var(--fldbg);color:var(--fldfg)}input[type=checkbox],input[type=radio]{width:1em}select{background-color:var(--fldbg);color:var(--fldfg)}input:invalid{border:1px solid var(--fldred)}body{font-family:verdana;margin:auto;background:var(--bg);color:var(--txt)}.c,body{text-align:center}.clear{clear:both}.foot{background-color:transparent!important;all:revert;float:right;margin:0;font-size:.6em}.red{background-color:var(--btnred)}.red:focus,.red:hover{background-color:var(--btnredhi)}#doc{text-align:left;margin:0 auto;display:inline-block;color:var(--txt);width:80%;min-width:300px;max-width:600px;display:table}td{font-size:.87rem;padding-bottom:0;padding-top:0}th{padding-top:.5em}*{box-sizing:border-box}input,select,textarea{width:100%;padding:12px;border:1px solid #ccc;border-radius:.6rem;resize:vertical}label{padding:12px 18px 12px 0;display:inline-block}.required{background-image:var(--star);background-size:1.5em 1.5em;background-position:left;background-repeat:no-repeat}.edit::before{content:"\0000a0"}.edit{background-image:var(--edit);background-size:1.5em 1.5em;background-position:left;background-repeat:no-repeat;width:1.5em;display:inline-block}.trash::before{content:"\0000a0"}.trash{background-image:var(--trash);background-size:1.5em 1.5em;background-position:left;background-repeat:no-repeat;width:1.5em;display:inline-block}.mdi{background-size:1.5em 1.5em;background-position:right;background-repeat:no-repeat;width:1.5em;display:inline-block}#doc>a,button,input[type=submit]{padding:12px;border:1px solid var(--btnbrd);border-radius:.6rem;background-color:var(--btnbg);color:var(--btnfg);font-size:1rem;width:100%;margin:12px 0;display:flex;align-items:center;justify-content:center;text-align:center;text-decoration:none}a.btn:hover,button:hover,input[type=submit]:hover{background-color:var(--btnbghi)}.container{background-color:var(--grpbg);color:var(--grpfg);border-radius:.6rem;padding:10px;margin:20px 0}.dist{display:flex;justify-content:space-between;width:100%}.dist>a{flex-grow:1;margin:0 6px}.dist>a:first-child{margin-left:0}.dist>a:last-child{margin-right:0}.col-25{float:left;width:25%;text-align:right;margin:0}.col-75{margin:0;float:left;width:75%}.row:after{content:"";display:table;clear:both}.row{font-size:.833rem;margin:5px}.gap,.row:last-of-type{margin:5px 5px 20px}.error,.info,.success,.validation,.warning{border:1px solid;margin:10px auto;padding:15px 10px 15px 50px;background-repeat:no-repeat;background-position:10px center;max-width:500px}.info{color:#00529B;background-color:#BDE5F8}.success{color:#4F8A10;background-color:#DFF2BF}.warning{color:#9F6000;background-color:#FEEFB3}.error{color:#D8000C;background-color:#FFD2D2}@media screen and (max-width:800px){.col-25,.col-75,input[type=submit]{width:100%;margin-top:0}.col-25{text-align:left}label{padding:5px 18px 5px 0}}
|
:root {
|
||||||
|
--star: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -6 16 16"><line y1="-3" y2="3" stroke="red" transform="rotate(15)"></line><line y1="-3" y2="3" stroke="red" transform="rotate(75)"></line><line y1="-3" y2="3" stroke="red" transform="rotate(-45)"></line></svg>');
|
||||||
|
--trash: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" id="mdi-trash-can-outline" width="24" height="24" viewBox="0 0 24 24"><path d="M9,3V4H4V6H5V19A2,2 0 0,0 7,21H17A2,2 0 0,0 19,19V6H20V4H15V3H9M7,6H17V19H7V6M9,8V17H11V8H9M13,8V17H15V8H13Z" /></svg>')
|
||||||
|
}
|
||||||
|
|
||||||
|
a.foot:link,
|
||||||
|
a.foot:visited {
|
||||||
|
color: var(--footfg)
|
||||||
|
}
|
||||||
|
|
||||||
|
input:not([type=file]) {
|
||||||
|
background-color: var(--fldbg);
|
||||||
|
color: var(--fldfg)
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=checkbox],
|
||||||
|
input[type=radio] {
|
||||||
|
width: 1em
|
||||||
|
}
|
||||||
|
|
||||||
|
select {
|
||||||
|
background-color: var(--fldbg);
|
||||||
|
color: var(--fldfg)
|
||||||
|
}
|
||||||
|
|
||||||
|
input:invalid {
|
||||||
|
border: 1px solid var(--fldred)
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: verdana;
|
||||||
|
margin: auto;
|
||||||
|
background: var(--bg);
|
||||||
|
color: var(--txt)
|
||||||
|
}
|
||||||
|
|
||||||
|
.c,
|
||||||
|
body {
|
||||||
|
text-align: center
|
||||||
|
}
|
||||||
|
|
||||||
|
.clear {
|
||||||
|
clear: both
|
||||||
|
}
|
||||||
|
|
||||||
|
.foot {
|
||||||
|
background-color: transparent!important;
|
||||||
|
all: revert;
|
||||||
|
float: right;
|
||||||
|
margin: 0;
|
||||||
|
font-size: .6em
|
||||||
|
}
|
||||||
|
|
||||||
|
#doc>a.red,
|
||||||
|
button.red {
|
||||||
|
background-color: var(--btnred)
|
||||||
|
}
|
||||||
|
|
||||||
|
#doc>a.red:focus,
|
||||||
|
#doc>a.red:hover,
|
||||||
|
button.red:focus,
|
||||||
|
button.red:hover {
|
||||||
|
background-color: var(--btnredhi)
|
||||||
|
}
|
||||||
|
|
||||||
|
#doc {
|
||||||
|
text-align: left;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: inline-block;
|
||||||
|
color: var(--txt);
|
||||||
|
width: 80%;
|
||||||
|
min-width: 300px;
|
||||||
|
max-width: 600px;
|
||||||
|
display: table
|
||||||
|
}
|
||||||
|
|
||||||
|
td {
|
||||||
|
font-size: .87rem;
|
||||||
|
padding-bottom: 0;
|
||||||
|
padding-top: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
padding-top: .5em
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box
|
||||||
|
}
|
||||||
|
|
||||||
|
input,
|
||||||
|
select,
|
||||||
|
textarea {
|
||||||
|
width: 100%;
|
||||||
|
padding: 12px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: .6rem;
|
||||||
|
resize: vertical
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
padding: 12px 18px 12px 0;
|
||||||
|
display: inline-block
|
||||||
|
}
|
||||||
|
|
||||||
|
.required {
|
||||||
|
background-image: var(--star);
|
||||||
|
background-size: 1.5em 1.5em;
|
||||||
|
background-position: right;
|
||||||
|
background-repeat: no-repeat
|
||||||
|
}
|
||||||
|
|
||||||
|
.edit::before {
|
||||||
|
content: "\0000a0"
|
||||||
|
}
|
||||||
|
|
||||||
|
.edit {
|
||||||
|
background-image: var(--edit);
|
||||||
|
background-size: 1.5em 1.5em;
|
||||||
|
background-position: left;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
width: 1.5em;
|
||||||
|
display: inline-block;
|
||||||
|
text-decoration: none
|
||||||
|
}
|
||||||
|
|
||||||
|
.trash::before {
|
||||||
|
content: "\0000a0"
|
||||||
|
}
|
||||||
|
|
||||||
|
.trash {
|
||||||
|
background-image: var(--trash);
|
||||||
|
background-size: 1.5em 1.5em;
|
||||||
|
background-position: left;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
width: 1.5em;
|
||||||
|
display: inline-block;
|
||||||
|
text-decoration: none
|
||||||
|
}
|
||||||
|
|
||||||
|
#doc>a,
|
||||||
|
.dist>a,
|
||||||
|
button,
|
||||||
|
input[type=submit] {
|
||||||
|
padding: 12px;
|
||||||
|
border: 1px solid var(--btnbrd);
|
||||||
|
border-radius: .6rem;
|
||||||
|
background-color: var(--btnbg);
|
||||||
|
color: var(--btnfg);
|
||||||
|
font-size: 1rem;
|
||||||
|
width: 100%;
|
||||||
|
margin: 12px 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none
|
||||||
|
}
|
||||||
|
|
||||||
|
#doc>a:hover,
|
||||||
|
.dist>a:hover,
|
||||||
|
button:hover,
|
||||||
|
input[type=submit]:hover {
|
||||||
|
background-color: var(--btnbghi)
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
background-color: var(--grpbg);
|
||||||
|
color: var(--grpfg);
|
||||||
|
border-radius: .6rem;
|
||||||
|
padding: 10px;
|
||||||
|
margin: 20px 0
|
||||||
|
}
|
||||||
|
|
||||||
|
.dist {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 100%
|
||||||
|
}
|
||||||
|
|
||||||
|
.dist>a {
|
||||||
|
flex-grow: 1;
|
||||||
|
margin: 0 6px
|
||||||
|
}
|
||||||
|
|
||||||
|
.dist>a:first-child {
|
||||||
|
margin-left: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
.dist>a:last-child {
|
||||||
|
margin-right: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-25 {
|
||||||
|
float: left;
|
||||||
|
width: 25%;
|
||||||
|
text-align: right;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-75 {
|
||||||
|
margin: 0;
|
||||||
|
float: left;
|
||||||
|
width: 75%
|
||||||
|
}
|
||||||
|
|
||||||
|
.row:after {
|
||||||
|
content: "";
|
||||||
|
display: table;
|
||||||
|
clear: both
|
||||||
|
}
|
||||||
|
|
||||||
|
.row {
|
||||||
|
font-size: .833rem;
|
||||||
|
margin: 5px
|
||||||
|
}
|
||||||
|
|
||||||
|
.gap,
|
||||||
|
.row:last-of-type {
|
||||||
|
margin: 5px 5px 20px
|
||||||
|
}
|
||||||
|
|
||||||
|
.error,
|
||||||
|
.info,
|
||||||
|
.success,
|
||||||
|
.validation,
|
||||||
|
.warning {
|
||||||
|
border: 1px solid;
|
||||||
|
margin: 10px auto;
|
||||||
|
padding: 15px 10px 15px 50px;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: 10px center;
|
||||||
|
max-width: 500px
|
||||||
|
}
|
||||||
|
|
||||||
|
.info {
|
||||||
|
color: #00529B;
|
||||||
|
background-color: #BDE5F8
|
||||||
|
}
|
||||||
|
|
||||||
|
.success {
|
||||||
|
color: #4F8A10;
|
||||||
|
background-color: #DFF2BF
|
||||||
|
}
|
||||||
|
|
||||||
|
.warning {
|
||||||
|
color: #9F6000;
|
||||||
|
background-color: #FEEFB3
|
||||||
|
}
|
||||||
|
|
||||||
|
.error {
|
||||||
|
color: #D8000C;
|
||||||
|
background-color: #FFD2D2
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width:800px) {
|
||||||
|
.col-25,
|
||||||
|
.col-75,
|
||||||
|
input[type=submit] {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 0
|
||||||
|
}
|
||||||
|
.col-25 {
|
||||||
|
text-align: left
|
||||||
|
}
|
||||||
|
label {
|
||||||
|
padding: 5px 18px 5px 0
|
||||||
|
}
|
||||||
|
}
|
||||||
Binary file not shown.
Loading…
x
Reference in New Issue
Block a user