Custom/keaz (#612)

* add theme variables * add keaz theme
wirenboard · Oct 15, 2024 · 92a9a8e · 92a9a8e
1 parent ca41cd2
commit 92a9a8e
Show file tree

Hide file tree

Showing 15 changed files with 85 additions and 154 deletions.
diff --git a/app/favicon.ico b/app/favicon.ico
diff --git a/app/images/logo.png b/app/images/logo.png
diff --git a/app/images/logo.svg b/app/images/logo.svg
diff --git a/app/index.ejs b/app/index.ejs
@@ -2,7 +2,7 @@
 <html class="no-js">
   <head>
     <meta charset="utf-8">
-    <title>Wiren Board Web UI</title>
+    <title>KEAZ OptiSmart WEB</title>
     <meta name="description" content="">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -36,7 +36,7 @@
                   <span class="icon-bar"></span>
               </button>
               <a class="navbar-brand wb-navbar-brand" ui-sref="home">
-                <img src="images/logo.svg" alt="Wiren Board Web UI">
+                <img src="images/logo.png" alt="KEAZ OptiSmart WEB">
               </a>
               <p class="navbar-text navbar-right connection-status">
                 <span class="label label-custom access-level-label" ng-class="roles.current.roles.isAdmin ? 'label label-custom label-danger' : 'label label-custom label-warning'"

diff --git a/app/scripts/app.js b/app/scripts/app.js
@@ -1,6 +1,7 @@
 'use strict';
 
 // Import slylesheets
+import '../styles/css/keaz-theme.css';
 import '../styles/css/bootstrap.min.css';
 import '../styles/css/font-awesome.min.css';
 import '../styles/css/fontawesome.min.css';

diff --git a/app/styles/css/bootstrap.min.css b/app/styles/css/bootstrap.min.css
diff --git a/app/styles/css/device-manager.css b/app/styles/css/device-manager.css
@@ -168,15 +168,15 @@
 @media (min-width: 992px) {
     .device-manager-page .nav-stacked li.active {
         color: #fff;
-        background-color: #3276b1;
+        background-color: var(--primary-color);
     }
 
     .device-manager-page li:not(.active):not(:hover):not(:focus) .port-tab {
         background-color: #f5f5f5;
     }
 
     .device-manager-page li.active .settings-tab {
-        border: 1px solid #3276b1;
+        border: 1px solid var(--primary-color);
     }
 
     .device-manager-page .group-editor {

diff --git a/app/styles/css/keaz-theme.css b/app/styles/css/keaz-theme.css
@@ -0,0 +1,33 @@
+:root {
+    --primary-color: #0a08ef;
+    --primary-color-hover: #0046ff;
+    --secondary-color: #ff4700;
+    --secondary-color-hover: #ffa27f;
+    --success-color: var(--secondary-color);
+    --success-color-hover: var(--secondary-color-hover);
+    --success-color-border: var(--secondary-color);
+    --gray-color: #cfdae2;
+
+    --bar-color: #e7ecf0;
+    --bar-border: var(--gray-color);
+    --bar-hover-color: var(--secondary-color);
+    --bar-inside-color: var(--gray-color);
+    --bar-burger-color: var(--secondary-color);
+    --bar-burger-border-color: var(--bar-inside-color);
+    --bar-text-color: var(--primary-color);
+    --bar-inside-text-color: var(--primary-color);
+    --online-color: #27ae60;
+    --bar-font-size: 15px;
+
+    --font: "Loos Normal Regular", Sans Serif;
+}
+
+@font-face {
+    font-family: "Loos Normal Regular";
+    src: url("../fonts/Loos-Normal-Regular-Web.woff") format("woff");
+}
+
+.navbar-nav li:last-of-type {
+    display: none;
+}
+
diff --git a/app/styles/css/network-connections.css b/app/styles/css/network-connections.css
@@ -121,7 +121,7 @@
 }
 
 .network-connections-page .nav-tabs li.active {
-    box-shadow: 0 -2px 0 #3276b1;
+    box-shadow: 0 -2px 0 var(--primary-color);
     border-top-width: 0 !important;
     font-weight: 700;
     border-left: 1px solid #ddd;
@@ -158,7 +158,7 @@
 }
 .network-connections-page .nav-stacked li.active {
     color: #fff;
-    background-color: #3276b1;
+    background-color: var(--primary-color);
 }
 .network-connections-page .nav-stacked li > *:first-child {
     padding: 10px 9px 10px;

diff --git a/app/styles/css/new.css b/app/styles/css/new.css
@@ -168,6 +168,10 @@ div[uib-datepicker-popup-wrap] {
   padding: 7px 10px;
 }
 
+.navbar-brand img {
+  max-height: 42px;
+}
+
 .devices-panel-list .device-panel:not(:last-child) {
   margin-bottom: 18px;
 }
@@ -192,7 +196,7 @@ div[uib-datepicker-popup-wrap] {
 }
 
 .device-panel > .panel-heading {
-  background-color: #3276b1;
+  background-color: var(--primary-color);
   color: white;
   padding: 0;
   border: none !important;
@@ -219,7 +223,7 @@ div[uib-datepicker-popup-wrap] {
 
 .device-panel__header-wrapper {
   position: relative;
-  background-color: #3276b1;
+  background-color: var(--primary-color);
   color: white;
 }
 
@@ -249,7 +253,7 @@ div[uib-datepicker-popup-wrap] {
 }
 
 .device-panel__body {
-  border: 1px solid #3276b1;
+  border: 1px solid var(--primary-color);
   border-top: 0px;
   padding: 10px;
 }
@@ -288,7 +292,7 @@ div[uib-datepicker-popup-wrap] {
   }
 
   .navbar-inverse > * {
-    background-color: black;
+    background-color: var(--bar-color);
   }
 
   .navbar-collapse {

diff --git a/app/styles/css/smartadmin-production.min.css b/app/styles/css/smartadmin-production.min.css
@@ -264,7 +264,7 @@
 
 .ui-buttonset .ui-state-active.ui-state-hover {
   color: #fff;
-  background-color: #3276b1;
+  background-color: var(--primary-color);
   border-color: #285e8e
 }
 
@@ -613,7 +613,7 @@ time.icon strong {
 time.icon em {
   position: absolute;
   bottom: 3px;
-  color: #3276b1
+  color: var(--primary-color)
 }
 
 time.icon span {
@@ -645,7 +645,7 @@ h2,
 h3,
 h4 {
   margin: 0;
-  font-family: "Open Sans", Arial, Helvetica, Sans-Serif;
+  font-family: var(--font);
   font-weight: 300
 }
 
@@ -802,7 +802,7 @@ h6 {
 
 nav ul li a {
   line-height: normal;
-  font-size: 14px;
+  font-size: var(--bar-font-size);
   padding: 10px 10px 10px 11px;
   color: #c0bbb7;
   display: block;
@@ -814,7 +814,7 @@ nav ul li a {
 nav ul ul {
   margin: 0;
   display: none;
-  background: rgba(69, 69, 69, .6);
+  background: var(--bar-inside-color);
   padding: 7px 0
 }
 
@@ -1627,7 +1627,7 @@ img.away {
 }
 
 .progress-bar-success {
-  background-color: #739e73
+  background-color: var(--success-color);
 }
 
 .progress-striped .progress-bar-success {

diff --git a/app/styles/css/wb-switch.css b/app/styles/css/wb-switch.css
@@ -54,7 +54,7 @@
 }
 
 .wb-switch-input:checked ~ .wb-switch-label {
-  background: #3276b1;
+  background: var(--primary-color);
 }
 
 .wb-switch-input:checked ~ .wb-switch-label:before {

diff --git a/app/styles/fonts/Loos-Normal-Regular-Web.woff b/app/styles/fonts/Loos-Normal-Regular-Web.woff