wirtz
/
AutoConnect
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Customize menu color scheme. #73

Browse Source
pull/74/head
Hieromon Ikasamo 6 years ago
parent ab48009490
commit 779bd16422
2 changed files with 52 additions and 28 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 24
      src/AutoConnectLabels.h
  2. 56
      src/AutoConnectPage.cpp

24
src/AutoConnectLabels.h
Unescape View File

@ -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

56
src/AutoConnectPage.cpp
Unescape View File

@ -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>"

Write Preview
Loading…
Cancel
Save