From 779bd164223ca8b4c20b3a65453c27c822d7329d Mon Sep 17 00:00:00 2001
From: Hieromon Ikasamo <Hieromon@users.noreply.github.com>
Date: Sat, 11 May 2019 01:50:08 +0900
Subject: [PATCH] Customize menu color scheme. #73

---
 src/AutoConnectLabels.h | 24 ++++++++++++++++++
 src/AutoConnectPage.cpp | 56 ++++++++++++++++++++---------------------
 2 files changed, 52 insertions(+), 28 deletions(-)

diff --git a/src/AutoConnectLabels.h b/src/AutoConnectLabels.h
index 1591ed4..8c5e137 100644
--- a/src/AutoConnectLabels.h
+++ b/src/AutoConnectLabels.h
@@ -62,4 +62,28 @@
 //#define AUTOCONNECT_BUTTONLABEL_RESET     "Reboot"
 #endif // !AUTOCONNECT_BUTTONLABEL_RESET
 
+// Menu colors
+// The following three color code items determine the color scheme of
+// the menu. In addition to hexadecimal color values, you can specify
+// 140 standard color names that apply to CSS.
+// To be no sense of discomfort, select the same series of values for
+// the background and the active item.
+
+// Menu text foreground color
+#ifndef AUTOCONNECT_MENUCOLOR_TEXT
+#define AUTOCONNECT_MENUCOLOR_TEXT        "#fff"
+//#define AUTOCONNECT_MENUCOLOR_TEXT        "#fffacd"
+#endif // !AUTOCONNECT_MENUCOLOR_TEXT
+
+// Menu background color
+#ifndef AUTOCONNECT_MENUCOLOR_BACKGROUND
+#define AUTOCONNECT_MENUCOLOR_BACKGROUND  "#263238"
+// #define AUTOCONNECT_MENUCOLOR_BACKGROUND  "#696969"
+#endif // !AUTOCONNECT_MENUCOLOR_BACKGROUND
+
+// Background color with active menu items and mouse hover
+#ifndef AUTOCONNECT_MENUCOLOR_ACTIVE
+#define AUTOCONNECT_MENUCOLOR_ACTIVE      "#37474f"
+// #define AUTOCONNECT_MENUCOLOR_ACTIVE      "#808080"
+#endif
 #endif
diff --git a/src/AutoConnectPage.cpp b/src/AutoConnectPage.cpp
index 468c449..195fb64 100644
--- a/src/AutoConnectPage.cpp
+++ b/src/AutoConnectPage.cpp
@@ -334,19 +334,19 @@ const char AutoConnect::_CSS_LUXBAR[] PROGMEM = {
     "z-index:1000;"
     "box-shadow:0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);"
   "}"
-  ".luxbar-hamburger span,"
-  ".luxbar-hamburger span::before,"
-  ".luxbar-hamburger span::after{"
+  ".luxbar-burger span,"
+  ".luxbar-burger span::before,"
+  ".luxbar-burger span::after{"
     "display:block;"
     "height:2px;"
     "width:26px;"
     "transition:0.6s ease;"
   "}"
-  ".luxbar-checkbox:checked~.luxbar-menu li .luxbar-hamburger span{"
+  ".luxbar-checkbox:checked~.luxbar-menu li .luxbar-burger span{"
     "background-color:transparent;"
   "}"
-  ".luxbar-checkbox:checked~.luxbar-menu li .luxbar-hamburger span::before,"
-  ".luxbar-checkbox:checked~.luxbar-menu li .luxbar-hamburger span::after{"
+  ".luxbar-checkbox:checked~.luxbar-menu li .luxbar-burger span::before,"
+  ".luxbar-checkbox:checked~.luxbar-menu li .luxbar-burger span::after{"
     "margin-top:0;"
   "}"
   ".luxbar-header{"
@@ -356,7 +356,7 @@ const char AutoConnect::_CSS_LUXBAR[] PROGMEM = {
     "align-items:center;"
     "height:58px;"
   "}"
-  ".luxbar-menu-right .luxbar-hamburger{"
+  ".luxbar-menu-right .luxbar-burger{"
     "margin-left:auto;"
   "}"
   ".luxbar-brand{"
@@ -388,20 +388,20 @@ const char AutoConnect::_CSS_LUXBAR[] PROGMEM = {
     "padding:18px 24px 18px 24px;"
     "display:block;"
   "}"
-  ".luxbar-hamburger{"
+  ".luxbar-burger{"
     "padding:18px 24px 18px 24px;"
     "position:relative;"
     "cursor:pointer;"
   "}"
-  ".luxbar-hamburger span::before,"
-  ".luxbar-hamburger span::after{"
+  ".luxbar-burger span::before,"
+  ".luxbar-burger span::after{"
     "content:'';"
     "position:absolute;"
   "}"
-  ".luxbar-hamburger span::before{"
+  ".luxbar-burger span::before{"
     "margin-top:-8px;"
   "}"
-  ".luxbar-hamburger span::after{"
+  ".luxbar-burger span::after{"
     "margin-top:8px;"
   "}"
   ".luxbar-checkbox{"
@@ -456,7 +456,7 @@ const char AutoConnect::_CSS_LUXBAR[] PROGMEM = {
       "flex-flow:row;"
       "justify-content:flex-end;"
     "}"
-    ".luxbar-hamburger{"
+    ".luxbar-burger{"
       "display:none;"
     "}"
     ".luxbar-checkbox:not(:checked)~.luxbar-menu{"
@@ -490,25 +490,25 @@ const char AutoConnect::_CSS_LUXBAR[] PROGMEM = {
       "white-space:nowrap;"
     "}"
   "}"
-  ".luxbar-checkbox:checked+.luxbar-menu .luxbar-hamburger-doublespin span::before{"
+  ".luxbar-checkbox:checked+.luxbar-menu .luxbar-burger-doublespin span::before{"
     "transform:rotate(225deg);"
   "}"
-  ".luxbar-checkbox:checked+.luxbar-menu .luxbar-hamburger-doublespin span::after{"
+  ".luxbar-checkbox:checked+.luxbar-menu .luxbar-burger-doublespin span::after{"
     "transform:rotate(-225deg);"
   "}"
-  ".luxbar-menu-material-bluegrey,"
-  ".luxbar-menu-material-bluegrey .dropdown ul{"
-    "background-color:#263238;"
-    "color:#fff;"
+  ".luxbar-menu-material,"
+  ".luxbar-menu-material .dropdown ul{"
+    "background-color:" AUTOCONNECT_MENUCOLOR_BACKGROUND ";"
+    "color:" AUTOCONNECT_MENUCOLOR_TEXT
   "}"
-  ".luxbar-menu-material-bluegrey .active,"
-  ".luxbar-menu-material-bluegrey .luxbar-item:hover{"
-    "background-color:#37474f;"
+  ".luxbar-menu-material .active,"
+  ".luxbar-menu-material .luxbar-item:hover{"
+    "background-color:" AUTOCONNECT_MENUCOLOR_ACTIVE
   "}"
-  ".luxbar-menu-material-bluegrey .luxbar-hamburger span,"
-  ".luxbar-menu-material-bluegrey .luxbar-hamburger span::before,"
-  ".luxbar-menu-material-bluegrey .luxbar-hamburger span::after{"
-    "background-color:#fff;"
+  ".luxbar-menu-material .luxbar-burger span,"
+  ".luxbar-menu-material .luxbar-burger span::before,"
+  ".luxbar-menu-material .luxbar-burger span::after{"
+    "background-color:" AUTOCONNECT_MENUCOLOR_TEXT
   "}"
 };
 
@@ -524,11 +524,11 @@ const char AutoConnect::_ELM_HTML_HEAD[] PROGMEM = {
 const char  AutoConnect::_ELM_MENU_PRE[] PROGMEM = {
   "<header id=\"luxbar\" class=\"luxbar-fixed\">"
     "<input type=\"checkbox\" class=\"luxbar-checkbox\" id=\"luxbar-checkbox\"/>"
-    "<div class=\"luxbar-menu luxbar-menu-right luxbar-menu-material-bluegrey\">"
+    "<div class=\"luxbar-menu luxbar-menu-right luxbar-menu-material\">"
       "<ul class=\"luxbar-navigation\">"
         "<li class=\"luxbar-header\">"
           "<a href=\"" AUTOCONNECT_URI "\" class=\"luxbar-brand\">MENU_TITLE</a>"
-          "<label class=\"luxbar-hamburger luxbar-hamburger-doublespin\" id=\"luxbar-hamburger\" for=\"luxbar-checkbox\"><span></span></label>"
+          "<label class=\"luxbar-burger luxbar-burger-doublespin\" id=\"luxbar-burger\" for=\"luxbar-checkbox\"><span></span></label>"
         "</li>"
         "<li class=\"luxbar-item\"><a href=\"" AUTOCONNECT_URI_CONFIG "\">" AUTOCONNECT_MENULABEL_CONFIGNEW "</a></li>"
         "<li class=\"luxbar-item\"><a href=\"" AUTOCONNECT_URI_OPEN "\">" AUTOCONNECT_MENULABEL_OPENSSIDS "</a></li>"