2 files changed, 41 insertions, 16 deletions

diff --git a/themes/luci-theme-material/htdocs/luci-static/material/css/style.css b/themes/luci-theme-material/htdocs/luci-static/material/cascade.css
index 01fef2110a..fa0316343b 100755..100644
--- a/themes/luci-theme-material/htdocs/luci-static/material/css/style.css
+++ b/themes/luci-theme-material/htdocs/luci-static/material/cascade.css
@@ -19,15 +19,20 @@
  */
 
 /*
+ *  Include custom css
+ */
+@import url("custom.css");
+
+/*
  *  Font generate by Icomoon<icomoon.io>
  */
 @font-face {
     font-family: 'icomoon';
-    src: url('../fonts/font.eot');
-    src: url('../fonts/font.eot') format('embedded-opentype'),
-    url('../fonts/font.ttf') format('truetype'),
-    url('../fonts/font.woff') format('woff'),
-    url('../fonts/font.svg') format('svg');
+    src: url('fonts/font.eot');
+    src: url('fonts/font.eot') format('embedded-opentype'),
+    url('fonts/font.ttf') format('truetype'),
+    url('fonts/font.woff') format('woff'),
+    url('fonts/font.svg') format('svg');
     font-weight: normal;
     font-style: normal;
 }
@@ -255,7 +260,7 @@ footer > a {
     width: calc(0% + 15rem);
     height: 100%;
     height: calc(100% - 4rem);
-    background-color: white;
+    background-color: var(--menu-bg-color, #FFFFFF);
     overflow-x: auto;
     position: fixed;
 }
@@ -281,18 +286,18 @@ footer > a {
 }
 
 header {
-    background: #0099CC;
-    color: white;
+    background: var(--header-bg, #0099CC);
+    color: var(--header-color, #FFFFFF);
 }
 
-header > .container {
+header > .fill > .container {
     margin-top: 0.5rem;
     padding: 0.5rem 1rem 0 1rem;
 }
 
-header > .container > .brand {
+header > .fill > .container > .brand {
     font-size: 1.4rem;
-    color: white;
+    color: var(--header-color, #FFFFFF);
     text-decoration: none;
     cursor: default;
     vertical-align: text-bottom;
@@ -374,7 +379,7 @@ header > .container > .brand {
 }
 
 .main > .main-left > .nav > li a {
-    color: #404040;
+    color: var(--menu-color, #404040);
     display: block;
 }
 
@@ -406,7 +411,7 @@ header > .container > .brand {
 
 .main > .main-left > .nav > li:hover,
 .main > .main-left > .nav > .slide > .menu:hover {
-    background: #D4D4D4;
+    background: var(--submenu-bg-hover, #D4D4D4)
 }
 
 .main > .main-left > .nav > .slide:hover {
@@ -418,7 +423,7 @@ header > .container > .brand {
 }
 
 .main > .main-left > .nav > .slide > .slide-menu > .active {
-    background-color: #0099CC;
+    background-color: var(--submenu-bg-hover-active, #0099CC);
 }
 
 .main > .main-left > .nav > .slide > .slide-menu > li > a {
@@ -431,7 +436,7 @@ header > .container > .brand {
 }
 
 .main > .main-left > .nav > .slide > .slide-menu > li:hover {
-    background: #D4D4D4;
+    background: var(--submenu-bg-hover, #D4D4D4)
 }
 
 .main > .main-left > .nav > .slide > .slide-menu > .active:hover {
@@ -1226,7 +1231,7 @@ td > .ifacebadge,
     min-height: 14rem;
     padding: 0.8rem;
     font-size: 0.8rem;
-    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-family: monospace;
     color: black;
 }
 
@@ -1732,6 +1737,17 @@ body.lang_pl.node-main-login .cbi-value-title {
     width: 12rem;
 }
 
+/* applyreboot fix */
+
+#applyreboot-container {
+	margin: 2rem;
+}
+
+#applyreboot-section {
+	margin: 2rem;
+	line-height: 300%;
+}
+
 @media screen and (max-width: 1600px) {
     .main-left {
         width: calc(0% + 13rem);
diff --git a/themes/luci-theme-material/htdocs/luci-static/material/custom.css b/themes/luci-theme-material/htdocs/luci-static/material/custom.css
new file mode 100644
index 0000000000..b32eb2af1b
--- /dev/null
+++ b/themes/luci-theme-material/htdocs/luci-static/material/custom.css
@@ -0,0 +1,9 @@
+
+:root {
+	--header-bg: #0099CC;
+	--header-color: #FFFFFF;
+	--menu-bg-color: #FFFFFF;
+	--menu-color: #404040;
+	--submenu-bg-hover: #D4D4D4;
+	--submenu-bg-hover-active: #0099CC;
+}