ejs + webadmin + bugfixes

web/css/breadcrumbs.css

@@ -1,3 +1,15 @@
+h1 {
+    color: var(--color-4);
+    font-size: 52px;
+    font-weight: 300;
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+h1#tuner-name {
+    font-size: 32px;
+}
+
 h2 {
     color: var(--color-4);
     margin-bottom: 0;
@@ -8,9 +20,22 @@ h3 {
     font-size: 22px;
 }
 
+p#tuner-desc {
+    margin: 0;
+}
+
+label {
+    font-size: 12px;
+    font-weight: bold;
+    text-transform: uppercase;
+    display: block;
+    text-align: left;
+    color: var(--color-4);
+}
+
 .canvas-container {
     width: 100%;
-    height: 200px;
+    height: 175px;
 }
 
 #data-ant {
@@ -36,7 +61,7 @@ h3 {
     margin-right: 5px;
 }
 
-#color-settings, #settings {
+#settings, #back-btn {
     background: transparent;
     border: 0;
     color: white;
@@ -53,12 +78,13 @@ h3 {
     cursor: pointer;
 }
 
-#color-settings {
-    top: 96px;
+#settings:hover, #back-btn:hover {
+    background: var(--color-3);
 }
 
-#settings:hover, #color-settings:hover {
-    background: var(--color-3);
+#back-btn {
+    left: 15px;
+    right: auto;
 }
 
 #af-list ul {
@@ -79,6 +105,49 @@ h3 {
     display: none;
 }
 
+.checkbox input[type="checkbox"] {
+    padding: 0;
+    height: initial;
+    width: initial;
+    margin-bottom: 0;
+    display: none;
+    cursor: pointer;
+  }
+  
+  .checkbox label {
+    position: relative;
+    cursor: pointer;
+  }
+  
+  .checkbox label:before {
+    content:'';
+    appearance: none;
+    -webkit-appearance: none;
+    background-color: transparent;
+    border: 2px solid var(--color-4);
+    padding: 10px;
+    display: inline-block;
+    position: relative;
+    vertical-align: middle;
+    cursor: pointer;
+    margin-right: 5px;
+  }
+  
+  .form-group input:checked + label:after {
+    content: '✓';
+    display: block;
+    position: absolute;
+    top: 2px;
+    left: 6px;
+    width: 16px;
+    height: 16px;
+  }
+
+  .tuner-info {
+    margin-top: 0px !important;
+    margin-bottom: 0px !important;
+  }
+
 @media (max-width: 768px) {
     canvas, #flags-container {
         display: none;
@@ -153,6 +222,9 @@ h3 {
     .button-ims {
         order: 3;
     }
+    .tuner-info {
+        margin-bottom: -60px !important;
+    }
 }
 
 @media only screen and (min-width: 960px) and (max-height: 860px) {
@@ -165,4 +237,13 @@ h3 {
     .canvas-container {
         height: 120px;
     }
+    .tuner-info #tuner-name {
+        float: left;
+        font-size: 24px;
+    }
+
+    .tuner-info #tuner-desc {
+        float: right;
+        text-align: right;
+    }
 }