add theme variables (#611)

* add theme variables * Update debian/changelog Co-authored-by: KraPete <[email protected]> --------- Co-authored-by: KraPete <[email protected]>
wirenboard · Aug 29, 2024 · 6090629 · 6090629
1 parent f614f43
commit 6090629
Show file tree

Hide file tree

Showing 10 changed files with 70 additions and 31 deletions.
diff --git a/app/scripts/app.js b/app/scripts/app.js
@@ -1,6 +1,7 @@
 'use strict';
 
 // Import slylesheets
+import '../styles/css/variables.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/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
@@ -165,6 +165,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;
 }
@@ -189,7 +193,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;
@@ -216,7 +220,7 @@ div[uib-datepicker-popup-wrap] {
 
 .device-panel__header-wrapper {
   position: relative;
-  background-color: #3276b1;
+  background-color: var(--primary-color);
   color: white;
 }
 
@@ -246,7 +250,7 @@ div[uib-datepicker-popup-wrap] {
 }
 
 .device-panel__body {
-  border: 1px solid #3276b1;
+  border: 1px solid var(--primary-color);
   border-top: 0px;
   padding: 10px;
 }
@@ -285,7 +289,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/variables.css b/app/styles/css/variables.css
@@ -0,0 +1,21 @@
+:root {
+    --primary-color: #337ab7;
+    --primary-color-hover: #5393c8;
+    --success-color: #739e73;
+    --success-color-disabled: #739e73;
+    --success-color-hover: #5b835b;
+    --success-color-border: #659265;
+
+    --bar-color: #222;
+    --bar-border: #080808;
+    --bar-hover-color: #000;
+    --bar-inside-color: rgba(69, 69, 69, .6);
+    --bar-burger-color: #333;
+    --bar-burger-border-color: #333;
+    --bar-inside-text-color: #999;
+    --bar-text-color: #999;
+    --online-color: var(--success-color);
+    --bar-font-size: 14px;
+
+    --font: "Open Sans", Arial, Helvetica, Sans-Serif;
+}
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/main.css b/app/styles/main.css
@@ -12,7 +12,7 @@ html, body {
 
 body {
     margin-top: 50px;
-    background: #222;
+    background: var(--bar-color);
 }
 
 @media(min-width:768px) {
@@ -135,7 +135,7 @@ ul.alert-dropdown {
         border: none;
         border-radius: 0;
         overflow-y: auto;
-        background-color: #222;
+        background-color: var(--bar-color);
         bottom:0;
         overflow-x:hidden;
     }
@@ -147,7 +147,7 @@ ul.alert-dropdown {
     .side-nav li a:hover,
     .side-nav li a:focus {
         outline: none;
-        background-color: #000 !important;
+        background-color: var(--bar-hover-color) !important;
     }
 }
 
@@ -159,7 +159,7 @@ ul.alert-dropdown {
     display: block;
     padding: 10px 15px 10px 38px;
     text-decoration: none;
-    color: #999;
+    color: var(--bar-inside-text-color);
 }
 
 .side-nav>li>ul>li>a:hover {
@@ -311,7 +311,16 @@ ul.alert-dropdown {
 .navbar-nav .active > a,
 .navbar-nav a.active{
   color: #fff !important;
-  background-color: #080808 !important;
+  background-color: var(--bar-hover-color) !important;
+}
+
+.navbar-nav > li .glyphicon {
+  margin-right: 4px;
+}
+
+.navbar-text .label {
+  padding: 3px 6px;
+  display: inline-block;
 }
 
 /* Glyphicons */
@@ -361,12 +370,12 @@ footer{
 
 
 .btn-primary {
-	background-color: #337ab7;
+	background-color: var(--primary-color);
 	color: #ffffff;
 }
 
 .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary {
-	background-color: #5393c8;
+	background-color: var(--primary-color-hover);
 }
 
 .btn-primary:active, .btn-primary.active {
@@ -776,7 +785,7 @@ button.show-console span {
 }
 
 .widgets-table .button-col button {
-  color: #337ab7;
+  color: var(--primary-color);
   margin: 0;
   padding: 2px;
 }
@@ -834,14 +843,12 @@ svg:not(:root) {
     background-color: #456b7b;
     border-color: #456b7b;
 }
-.uib-datepicker-popup .btn-info {
-    background-color: #5b835b;
-    border-color: #5b835b;
-}
+.uib-datepicker-popup .btn-info,
 .uib-daypicker .btn-info {
-  background-color: #5b835b;
-  border-color: #5b835b;
+    background-color: var(--success-color);
+    border-color: var(--success-color);
 }
+
 /*разъединяю btn-group */
 .uib-datepicker-popup .btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle) {
     border-bottom-right-radius: 2px;

diff --git a/debian/changelog b/debian/changelog
@@ -1,3 +1,9 @@
+wb-mqtt-homeui (2.95.0) stable; urgency=medium
+
+  * Add style variables
+
+ -- Victor Vedenin <[email protected]>  Thu, 29 Aug 2024 12:55:09 +0300
+
 wb-mqtt-homeui (2.94.3) stable; urgency=medium
 
   * Fix localization of widget on Devices page