openHASP/data/style.css

: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}}