Customize menu color scheme. #73

pull/74/head
Hieromon Ikasamo 6 years ago
parent ab48009490
commit 779bd16422
  1. 24
      src/AutoConnectLabels.h
  2. 56
      src/AutoConnectPage.cpp

@ -62,4 +62,28 @@
//#define AUTOCONNECT_BUTTONLABEL_RESET "Reboot" //#define AUTOCONNECT_BUTTONLABEL_RESET "Reboot"
#endif // !AUTOCONNECT_BUTTONLABEL_RESET #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 #endif

@ -334,19 +334,19 @@ const char AutoConnect::_CSS_LUXBAR[] PROGMEM = {
"z-index:1000;" "z-index:1000;"
"box-shadow:0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);" "box-shadow:0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);"
"}" "}"
".luxbar-hamburger span," ".luxbar-burger span,"
".luxbar-hamburger span::before," ".luxbar-burger span::before,"
".luxbar-hamburger span::after{" ".luxbar-burger span::after{"
"display:block;" "display:block;"
"height:2px;" "height:2px;"
"width:26px;" "width:26px;"
"transition:0.6s ease;" "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;" "background-color:transparent;"
"}" "}"
".luxbar-checkbox:checked~.luxbar-menu li .luxbar-hamburger span::before," ".luxbar-checkbox:checked~.luxbar-menu li .luxbar-burger span::before,"
".luxbar-checkbox:checked~.luxbar-menu li .luxbar-hamburger span::after{" ".luxbar-checkbox:checked~.luxbar-menu li .luxbar-burger span::after{"
"margin-top:0;" "margin-top:0;"
"}" "}"
".luxbar-header{" ".luxbar-header{"
@ -356,7 +356,7 @@ const char AutoConnect::_CSS_LUXBAR[] PROGMEM = {
"align-items:center;" "align-items:center;"
"height:58px;" "height:58px;"
"}" "}"
".luxbar-menu-right .luxbar-hamburger{" ".luxbar-menu-right .luxbar-burger{"
"margin-left:auto;" "margin-left:auto;"
"}" "}"
".luxbar-brand{" ".luxbar-brand{"
@ -388,20 +388,20 @@ const char AutoConnect::_CSS_LUXBAR[] PROGMEM = {
"padding:18px 24px 18px 24px;" "padding:18px 24px 18px 24px;"
"display:block;" "display:block;"
"}" "}"
".luxbar-hamburger{" ".luxbar-burger{"
"padding:18px 24px 18px 24px;" "padding:18px 24px 18px 24px;"
"position:relative;" "position:relative;"
"cursor:pointer;" "cursor:pointer;"
"}" "}"
".luxbar-hamburger span::before," ".luxbar-burger span::before,"
".luxbar-hamburger span::after{" ".luxbar-burger span::after{"
"content:'';" "content:'';"
"position:absolute;" "position:absolute;"
"}" "}"
".luxbar-hamburger span::before{" ".luxbar-burger span::before{"
"margin-top:-8px;" "margin-top:-8px;"
"}" "}"
".luxbar-hamburger span::after{" ".luxbar-burger span::after{"
"margin-top:8px;" "margin-top:8px;"
"}" "}"
".luxbar-checkbox{" ".luxbar-checkbox{"
@ -456,7 +456,7 @@ const char AutoConnect::_CSS_LUXBAR[] PROGMEM = {
"flex-flow:row;" "flex-flow:row;"
"justify-content:flex-end;" "justify-content:flex-end;"
"}" "}"
".luxbar-hamburger{" ".luxbar-burger{"
"display:none;" "display:none;"
"}" "}"
".luxbar-checkbox:not(:checked)~.luxbar-menu{" ".luxbar-checkbox:not(:checked)~.luxbar-menu{"
@ -490,25 +490,25 @@ const char AutoConnect::_CSS_LUXBAR[] PROGMEM = {
"white-space:nowrap;" "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);" "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);" "transform:rotate(-225deg);"
"}" "}"
".luxbar-menu-material-bluegrey," ".luxbar-menu-material,"
".luxbar-menu-material-bluegrey .dropdown ul{" ".luxbar-menu-material .dropdown ul{"
"background-color:#263238;" "background-color:" AUTOCONNECT_MENUCOLOR_BACKGROUND ";"
"color:#fff;" "color:" AUTOCONNECT_MENUCOLOR_TEXT
"}" "}"
".luxbar-menu-material-bluegrey .active," ".luxbar-menu-material .active,"
".luxbar-menu-material-bluegrey .luxbar-item:hover{" ".luxbar-menu-material .luxbar-item:hover{"
"background-color:#37474f;" "background-color:" AUTOCONNECT_MENUCOLOR_ACTIVE
"}" "}"
".luxbar-menu-material-bluegrey .luxbar-hamburger span," ".luxbar-menu-material .luxbar-burger span,"
".luxbar-menu-material-bluegrey .luxbar-hamburger span::before," ".luxbar-menu-material .luxbar-burger span::before,"
".luxbar-menu-material-bluegrey .luxbar-hamburger span::after{" ".luxbar-menu-material .luxbar-burger span::after{"
"background-color:#fff;" "background-color:" AUTOCONNECT_MENUCOLOR_TEXT
"}" "}"
}; };
@ -524,11 +524,11 @@ const char AutoConnect::_ELM_HTML_HEAD[] PROGMEM = {
const char AutoConnect::_ELM_MENU_PRE[] PROGMEM = { const char AutoConnect::_ELM_MENU_PRE[] PROGMEM = {
"<header id=\"luxbar\" class=\"luxbar-fixed\">" "<header id=\"luxbar\" class=\"luxbar-fixed\">"
"<input type=\"checkbox\" class=\"luxbar-checkbox\" id=\"luxbar-checkbox\"/>" "<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\">" "<ul class=\"luxbar-navigation\">"
"<li class=\"luxbar-header\">" "<li class=\"luxbar-header\">"
"<a href=\"" AUTOCONNECT_URI "\" class=\"luxbar-brand\">MENU_TITLE</a>" "<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>"
"<li class=\"luxbar-item\"><a href=\"" AUTOCONNECT_URI_CONFIG "\">" AUTOCONNECT_MENULABEL_CONFIGNEW "</a></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>" "<li class=\"luxbar-item\"><a href=\"" AUTOCONNECT_URI_OPEN "\">" AUTOCONNECT_MENULABEL_OPENSSIDS "</a></li>"

Loading…
Cancel
Save