summaryrefslogtreecommitdiffstats
path: root/util/_UI/_web_interface/assets/style.css
diff options
context:
space:
mode:
Diffstat (limited to 'util/_UI/_web_interface/assets/style.css')
-rwxr-xr-xutil/_UI/_web_interface/assets/style.css215
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 );
+ }
+}