mirror of
https://github.com/HASwitchPlate/openHASP.git
synced 2025-04-19 12:57:19 +00:00
Fix CSS SVG icons
This commit is contained in:
fvanroie
parent
230ad4b5ea
commit
ae728d8fb6
275
data/style.css
275
data/style.css
@ -1,274 +1 @@
|
||||
: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
|
||||
}
|
||||
|
||||
input[type=color] {
|
||||
width: 30%;
|
||||
padding: 5px
|
||||
}
|
||||
|
||||
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
|
||||
}
|
||||
}
|
||||
: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}input[type=color]{width: 30%;padding: 5px}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