diff options
Diffstat (limited to 'util/_UI/_web_interface/assets/style.css')
-rwxr-xr-x | util/_UI/_web_interface/assets/style.css | 215 |
1 files changed, 215 insertions, 0 deletions
diff --git a/util/_UI/_web_interface/assets/style.css b/util/_UI/_web_interface/assets/style.css new file mode 100755 index 0000000..1e39de9 --- /dev/null +++ b/util/_UI/_web_interface/assets/style.css @@ -0,0 +1,215 @@ +/*Globlal Properties*/ +/*Tags*/ +body { + background-color: #000000; + color:#ffffff; + margin: 0px; + padding: 0px; +} +*{ + font-size:18px; + font-family: 'Montserrat', sans-serif; +} +h1{ + font-size:22px; +} +a{ + font-size: 22px; +} +input[type="checkbox"]{ + width:20px; + height:20px; + background:white; + border-radius:5px; + border:2px solid #555; + vertical-align: text-bottom; +} +.Select-control { + background-color:#000000; +} +.Select-value { + background-color: rgb(255, 102, 0); + color:#000000; +} +.Select-menu-outer { + background-color: rgb(0, 0, 0); +} + +input, select{ + width: 100%; +} +iframe{ + background-color: transparent; + border: 0px none transparent; + padding: 0px; + overflow: hidden; +} +/*Classes*/ +.header{ + background-color: #000000; + width: 100%; + text-align: center; + padding: 10px; +} +.header a{ + color: white; + text-transform: uppercase; + text-decoration: none; + padding: 5px; + line-height: 40px; + border: 0.1em solid #ffffff; + border-radius:0.05em; + margin: 5px; +} +.header_active, .header a:hover{ + background-color: #ff6600c0; +} +.ctr_toolbar{ + background-color: #000000; + height: 50px; + width: 100%; + text-align: center; +} +.ctr_toolbar_item { + text-align: center; + display : inline-block; + position : relative; + margin : 0 auto; + padding : 0px; + float : center; +} +.doa_check{ + text-align: left; +} +.btn{ + height: 40px; + cursor: pointer; + background-color: #141414; + border: 0.1em solid #000000; + border-radius:0.12em; + color: white; + font-size:20px; + text-decoration: none; + text-align: center; + width: 100%; + transition: all 0.2s; +} +.btn:hover{ + color: rgb(0, 0, 0); + background-color: #ff6600; +} +.btn a{ + color: white; + text-decoration: none; + position: relative; + top: 15%; +} +.btn_start{ + height: 40px; + cursor: pointer; + background-color: #02c93d; + border: 0.1em solid #000000; + border-radius:0.12em; + color: rgb(0, 0, 0); + font-size:20px; + text-decoration: none; + text-align: center; + width: 100%; + transition: all 0.2s; +} +.btn_start:hover{ + color: rgb(0, 0, 0); + background-color: #ff6600; +} +.btn_stop{ + height: 40px; + cursor: pointer; + background-color: #c40404; + border: 0.1em solid #000000; + border-radius:0.12em; + color: rgb(0, 0, 0); + font-size:20px; + text-decoration: none; + text-align: center; + width: 100%; +} +.btn_stop:hover{ + color: rgb(0, 0, 0); + background-color: #ff6600; +} +.btn_save_cfg{ + height: 40px; + cursor: pointer; + background-color: #b5aef5; + border: 0.1em solid #000000; + border-radius:0.12em; + color: rgb(0, 0, 0); + font-size:20px; + text-decoration: none; + text-align: center; + width: 100%; +} +.btn_save_cfg:hover{ + color: rgb(154, 233, 102); + background-color: #ff6600; +} +.tooltip{ + color: rgb(0, 0, 0); + background-color: #ffffff; + opacity: 0.95; + border-radius:0.2em; + width: 300px; +} +.card{ + background-color: #000000; + border: 0.1em solid #ffffff; + border-radius:0.2em; + width: 400px; + max-width: 500px; + padding: 20px; + box-shadow: 0 6px 18px rgba(0, 0, 0, 0.46); + margin: 10px; + float: left; +} +.monitor_card{ + background-color: #000000; + border: 0.1em solid #ffffff; + border-radius:0.2em; + width: 95%; + height: 800px; + overflow:scroll; + box-shadow: 0 6px 18px rgba(0, 0, 0, 0.46); + margin: auto; + } + +.field{ + width: 400px; + display: block; + margin: 10px auto; + padding: 0px; +} +.field-label{ + width: 250px; + display: inline-block; + vertical-align: top; +} +.field-body{ + width: 144px; + display: inline-block; +} + +/*Mobile Properties*/ +@media screen and (max-width: 1072px) { + .card{ + width: calc( 100% - 30px ); + padding: 5px; + margin: 20px auto; + float: none; + } +} + +@media screen and (max-width: 500px) { + .field, .field-label, .field-body, input{ + width: calc( 100% - 15px ); + } +} |