frontend CHANGE utilize liberouter-gui color variables and define Netopeer colorTheme
diff --git a/frontend/_netopeer-common.scss b/frontend/_netopeer-common.scss
index 9154f15..7fc0782 100644
--- a/frontend/_netopeer-common.scss
+++ b/frontend/_netopeer-common.scss
@@ -1,3 +1,5 @@
+@import "./colors";
+
$colorSuccess: #def2de;
$colorSuccessBorder: green;
$colorFailure: #f2dede;
@@ -12,8 +14,8 @@
.netopeer-content {
display: block;
padding: 0.7em 1em 1em 2em;
- background-color: #FAFAFA;
- color: #000;
+ background-color: $colorBackground;
+ color: $black;
}
.msg-rounded {
@@ -32,7 +34,7 @@
.msg-success {
background-color: $colorSuccess;
- color: green;
+ color: $colorSuccessBorder;
padding: 5px 1em 5px 0em;
.msg-close {
@@ -42,7 +44,7 @@
.msg-failure {
background-color: $colorFailure;
- color: red;
+ color: colorFailureBorder;
padding: 5px 1em 5px 0em;
.msg-close {
diff --git a/frontend/config/config.component.scss b/frontend/config/config.component.scss
index f482948..40384fb 100644
--- a/frontend/config/config.component.scss
+++ b/frontend/config/config.component.scss
@@ -26,7 +26,7 @@
filter: invert(100%);
&:hover {
- color: green;
+ color: $green;
}
}
@@ -40,7 +40,7 @@
#confignav {
position: fixed;
width: 100%;
- background-color: #3B4257;
+ background-color: $colorMain;
padding-left: 1em;
a {
@@ -48,7 +48,7 @@
text-decoration: none;
display: inline-block;
padding: 0.2em 0em 0.1em 1em;
- color: #FAFAFA;
+ color: $colorTextInverse;
&:visited,
&:link {
@@ -56,8 +56,8 @@
}
&:hover,
&.active {
- background-color: #FAFAFA;
- color: #000;
+ background-color: $colorBackground;
+ color: $colorText;
}
&active:hover {
cursor: default;
@@ -75,11 +75,11 @@
}
.item_action_collapse:hover {
- color:red;
+ color: $red;
}
.item_action_expand:hover {
- color:green;
+ color: $green;
}
.modifications-status {
diff --git a/frontend/config/tree.component.scss b/frontend/config/tree.component.scss
index 93d7344..72e5ad2 100644
--- a/frontend/config/tree.component.scss
+++ b/frontend/config/tree.component.scss
@@ -111,8 +111,8 @@
.editmenu {
visibility: hidden;
- background-color: #FAFAFA;
- border: 1px solid black;
+ background-color: $colorBackground;
+ border: 1px solid $black;
position: fixed;
z-index: 1;
@@ -123,7 +123,7 @@
padding: 0.3em 1em 0.3em 0.5em;
&:hover {
- background-color: #3B4257;
- color: #FAFAFA;
+ background-color: $colorHighlight;
+ color: $colorTextInverse;
}
}
diff --git a/frontend/inventory/inventory.component.scss b/frontend/inventory/inventory.component.scss
index 07acff4..6ad0d4d 100644
--- a/frontend/inventory/inventory.component.scss
+++ b/frontend/inventory/inventory.component.scss
@@ -1,24 +1,24 @@
@import '../netopeer-common';
nav {
- background-color: #3B4257;
+ background-color: $colorMain;
padding-left: 1em;
a {
text-decoration: none;
display: inline-block;
padding: 0.2em 1em 0.1em 1em;
- color: #FAFAFA;
+ color: $colorTextInverse;
&:visited,
&:link {
- color: #FAFAFA;
+ color: $colorTextInverse;
}
&:hover,
&.active {
- background-color: #FAFAFA;
- color: #000;
+ background-color: $colorBackground;
+ color: $colorText;
}
&.active:hover {
cursor: default;
@@ -42,8 +42,8 @@
&:hover,
&.selected {
- background-color: #454D67;
- color: #FAFAFA;
+ background-color: $colorMain;
+ color: $colorTextInverse;
}
&.selected:hover {
cursor: default;
@@ -51,8 +51,8 @@
}
.item_header {
- background-color: #454D67;
- color: #FAFAFA;
+ background-color: $colorMain;
+ color: $colorTextInverse;
}
.item_left {
@@ -73,7 +73,7 @@
font-weight: bold;
font-family: monospace;
font-size: large;
- color: grey;
+ color: $grey;
}
.item_action_delete {
@@ -81,7 +81,7 @@
vertical-align: middle;
&:hover {
- color: red;
+ color: $red;
}
}
@@ -110,7 +110,7 @@
.input_line_alert {
display: inline-block;
background-color: $colorFailure;
- color: red;
+ color: $red;
}
form {
diff --git a/frontend/netopeer.scss b/frontend/netopeer.scss
index 3ede088..6f4f23d 100644
--- a/frontend/netopeer.scss
+++ b/frontend/netopeer.scss
@@ -3,48 +3,48 @@
#netopeer-header {
position: fixed;
width: 100%;
- margin: -0.5em -1em 0em -1em;
- padding-top: 1em;
- background-color: #313747;
- color: #FAFAFA;
+ margin: -0.5em -1em 0em -1em;
+ padding-top: 1em;
+ background-color: $colorMain;
+ color: $colorTextInverse;
display: block;
}
#netopeer-header h1 {
- margin-left: 1em;
+ margin-left: 1em;
}
#netopeer-component {
- margin: 0em -1em 0em -1em;
+ margin: 0em -1em 0em -1em;
}
#mainnav {
- with: 100%;
- padding-left: 1em;
+ with: 100%;
+ padding-left: 1em;
}
#mainnav a:visited,
#mainnav a:link {
- color: inherit;
+ color: inherit;
}
#mainnav a:hover {
- border-top-color: #3B4257;
- background-color: #3B4257;
+ border-top-color: $colorHighlight;
+ background-color: $colorHighlight;
}
#mainnav a.active {
- border-top-color: #BAE4F0;
- background-color: #3B4257;
+ border-top-color: $colorSelected2;
+ background-color: $colorSelected;
}
#mainnav a.active:hover {
- cursor: default;
+ cursor: default;
}
#mainnav a {
- text-decoration: none;
- display: inline-block;
- padding: 0.5em 1em 0.5em 0.5em;
- color: #FAFAFA;
- border-top: 0.2em solid #313747;
+ text-decoration: none;
+ display: inline-block;
+ padding: 0.5em 1em 0.5em 0.5em;
+ color: $colorTextInverse;
+ border-top: 0.2em solid $colorMain;
}