1 files changed, 215 insertions, 0 deletions
diff --git a/_UI/_web_interface/assets/style.css b/_UI/_web_interface/assets/style.css
new file mode 100755
index 0000000..1e39de9
--- /dev/null
+++ b/_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 );
+  }
+}