Merge pull request #4359 from IgorA100/UseVariablesToSpecifyColor

Use variables to specify color (CSS)

Author: connortechnology

web/skins/classic/css/base/skin.css

@@ -27,6 +27,9 @@
   --alarmBG: #FFC0C0;
   --alarmText: inherit;
   --backgroundMediumDark: #485460;
+  --colorLink: #3498db;
+  --colorBackgroundButtons: #3498db;
+  --colorBorder: #3498db;
 }
 
 html,
@@ -105,7 +108,7 @@ a {
 
 a.optionhelp,
 a:link {
-    color: #3498db;
+    color: var(--colorLink);
     text-decoration: none;
 }
 
@@ -192,8 +195,8 @@ hr {
     height: 1px;
     width: 100%;
     border: 0;
-    color: #3498db;
-    background-color: #3498db;
+    color: var(--colorLink);
+    background-color: var(--colorBackgroundButtons);
 }
 
 /*
@@ -621,9 +624,9 @@ input[type=button],
 input[type=submit],
 .btn-primary,
 .btn-primary:link {
-    background-color: #3498db;
+    background-color: var(--colorBackgroundButtons);
     color: #fff;
-    border-color: #3498db;
+    border-color: var(--colorBorder);
     text-transform: uppercase;
     font-weight: 200;
     padding: 7px 10px 5px 10px;
@@ -637,8 +640,8 @@ input[type=submit],
 .btn-normal,
 .btn-normal:link {
     color: #fff;
-    background-color: #3498db;
-    border: 1px solid #3498db;
+    background-color: var(--colorBackgroundButtons);
+    border: 1px solid var(--colorBorder);
 }
 
 button:hover,
@@ -665,7 +668,7 @@ input[type=submit]:disabled,
   padding: 0;
   display: flex;
   justify-content: space-between;
-	background-color:#485460 !important;
+  background-color: var(--backgroundMediumDark) !important;
 }
 
 #navbar-container > nav {
@@ -685,20 +688,20 @@ input[type=submit]:disabled,
 
 .navbar {
   padding: 0 0 0 0px;
-	margin-bottom: 0 !important;
-	border-radius: 0;
-	background-color:#485460 !important;
-	color: #0fbcf9;
-	border:none;
+  margin-bottom: 0 !important;
+  border-radius: 0;
+  background-color: var(--backgroundMediumDark) !important;
+  color: #0fbcf9;
+  border:none;
 }
 
 .navbar-brand {
   margin-left: 15px;
-	font-weight: normal;
-	font-size: 30px;
+  font-weight: normal;
+  font-size: 30px;
 }
 .navbar-brand a {
-color:#ffa801;
+  color:#ffa801;
 }
 @media (max-width: 600px){
   .navbar-brand {
@@ -828,11 +831,11 @@ li.search-choice {
 #dropdown_storage+div,
 #dropdown_reminder+div,
 #dropdown_bandwidth+div {
-  background-color:#485460;
+  background-color: var(--backgroundMediumDark);
 }
 
 #framesTable td:hover {
-    cursor: pointer;
+  cursor: pointer;
 }
 
 .zoom,

web/skins/classic/css/base/views/filter.css

@@ -83,12 +83,12 @@ min-width: 500px;
 min-width: 500px;
 }
 form {
-  border-bottom: 1px solid #3498db;
+  border-bottom: 1px solid var(--colorBorder);
 }
 #ActionsAndOptions {
   padding-top: 5px;
-  border-top: 1px solid #3498db;
-  border-bottom: 1px solid #3498db;
+  border-top: 1px solid var(--colorBorder);
+  border-bottom: 1px solid var(--colorBorder);
 }
 #ActionsAndOptions fieldset {
   border: none;