diff --git a/data/style.css b/data/style.css
index de23e58c..f403a582 100644
--- a/data/style.css
+++ b/data/style.css
@@ -1 +1 @@
-:root{--star:url('data:image/svg+xml,')}.c,body{text-align:center}.clear{clear:both}.foot{color:var(--txt);background-color:transparent!important;all:revert;float:right;margin:0;font-size:11px}input:not([type=file]){background-color:var(--fldbg);color:var(--fldfg)}input[type=checkbox],input[type=radio]{width:1em}select{background-color:var(--fldbg);color:var(--fldfg)}input:invalid{border:1px solid var(--redbg)}body{font-family:verdana;width:60%;margin:auto;background:var(--bg);color:var(--txt)}.red{background-color:var(--btnred)}.red:focus,.red:hover{background-color:var(--btnredhi)}#doc{text-align:left;display:inline-block;color:var(--txt);width:100%;min-width:260px;max-width:700px;display:table;clear:both;padding:0 20px;margin:20px}td{font-size:.87rem;padding-bottom:0;padding-top:0}th{padding-top:.5em}*{box-sizing:border-box}a,input,select,textarea{width:100%;padding:12px;border:1px solid #ccc;border-radius:.6rem;resize:vertical}label{padding:12px 18px 12px 0;display:inline-block}.required{background-image:var(--star);background-size:1.5em 1.5em;background-position:right;background-repeat:no-repeat}a,button,input[type=submit]{padding:12px;border:1px solid var(--btnbrd);border-radius:.6rem;background-color:var(--btnbg);color:var(--btnfg);font-size:1rem;width:100%;margin:12px 0;display:flex;align-items:center;justify-content:center;text-decoration:none}a:hover,button:hover,input[type=submit]:hover{background-color:var(--btnbghi)}.container{border-radius:.6rem;background-color:var(--grpbg);padding:10px;margin:20px 0}.col-25{float:left;width:25%;text-align:right;margin:0}.col-75{margin:0;float:left;width:75%}.row:after{content:"";display:table;clear:both}.row{font-size:.833rem;margin:5px}.gap,.row:last-of-type{margin:5px 5px 20px 5px}.menu{width:100%;content:"";display:table;clear:both;padding:0 20px;margin:20px}.error,.info,.success,.validation,.warning{border:1px solid;margin:10px auto;padding:15px 10px 15px 50px;background-repeat:no-repeat;background-position:10px center;max-width:460px}@media screen and (max-width:800px){.col-25,.col-75,input[type=submit]{width:100%;margin-top:0}.col-25{text-align:left}label{padding:5px 18px 5px 0}}
\ No newline at end of file
+:root{--star:url('data:image/svg+xml,')}.c,body{text-align:center}.clear{clear:both}.foot{background-color:transparent!important;all:revert;float:right;margin:0;font-size:.6em}a.foot:link,a.foot:visited{color:var(--footfg)}input:not([type=file]){background-color:var(--fldbg);color:var(--fldfg)}input[type=checkbox],input[type=radio]{width:1em}select{background-color:var(--fldbg);color:var(--fldfg)}input:invalid{border:1px solid var(--redbg)}body{font-family:verdana;width:60%;margin:auto;background:var(--bg);color:var(--txt)}.red{background-color:var(--btnred)}.red:focus,.red:hover{background-color:var(--btnredhi)}#doc{text-align:left;display:inline-block;color:var(--txt);width:100%;min-width:260px;max-width:700px;display:table;clear:both;padding:0 20px;margin:20px}td{font-size:.87rem;padding-bottom:0;padding-top:0}th{padding-top:.5em}*{box-sizing:border-box}a,input,select,textarea{width:100%;padding:12px;border:1px solid #ccc;border-radius:.6rem;resize:vertical}label{padding:12px 18px 12px 0;display:inline-block}.required{background-image:var(--star);background-size:1.5em 1.5em;background-position:right;background-repeat:no-repeat}a,button,input[type=submit]{padding:12px;border:1px solid var(--btnbrd);border-radius:.6rem;background-color:var(--btnbg);color:var(--btnfg);font-size:1rem;width:100%;margin:12px 0;display:flex;align-items:center;justify-content:center;text-decoration:none}a:hover,button:hover,input[type=submit]:hover{background-color:var(--btnbghi)}.container{background-color:var(--grpbg);color:var(--grpfg);border-radius:.6rem;padding:10px;margin:20px 0}.col-25{float:left;width:25%;text-align:right;margin:0}.col-75{margin:0;float:left;width:75%}.row:after{content:"";display:table;clear:both}.row{font-size:.833rem;margin:5px}.gap,.row:last-of-type{margin:5px 5px 20px 5px}.menu{width:100%;content:"";display:table;clear:both;padding:0 20px;margin:20px}.error,.info,.success,.validation,.warning{border:1px solid;margin:10px auto;padding:15px 10px 15px 50px;background-repeat:no-repeat;background-position:10px center;max-width:460px}@media screen and (max-width:800px){.col-25,.col-75,input[type=submit]{width:100%;margin-top:0}.col-25{text-align:left}label{padding:5px 18px 5px 0}}
\ No newline at end of file
diff --git a/data/style.css.gz b/data/style.css.gz
index 4bab67bd..e388712e 100644
Binary files a/data/style.css.gz and b/data/style.css.gz differ
diff --git a/include/user_config_override-template.h b/include/user_config_override-template.h
index 6a751391..1f3f30f6 100644
--- a/include/user_config_override-template.h
+++ b/include/user_config_override-template.h
@@ -73,14 +73,19 @@
* Web interface coloring
**************************************************/
// Light theme (default)
-#define D_HTTP_COLOR_TEXT "#000" // Global text color - Black
-#define D_HTTP_COLOR_BACKGROUND "#fff" // Global background color - White
-#define D_HTTP_COLOR_INPUT_TEXT "#000" // Input text color - Black
-#define D_HTTP_COLOR_INPUT "#fff" // Input background color - White
-#define D_HTTP_COLOR_INPUT_WARNING "#f00" // Input warning border color - Red
-#define D_HTTP_COLOR_BUTTON_TEXT "#fff" // Button text color - White
-#define D_HTTP_COLOR_BUTTON "#1fa3ec" // Button color - Vivid blue
-#define D_HTTP_COLOR_BUTTON_RESET "#f00" // Restart/Reset button color - red
+#define D_HTTP_COLOR_TEXT "#000" // Global text color - Black
+#define D_HTTP_COLOR_BACKGROUND "#fff" // Global background color - White
+#define D_HTTP_COLOR_INPUT_TEXT "#000" // Input text color - Black
+#define D_HTTP_COLOR_INPUT "#fff" // Input background color - White
+#define D_HTTP_COLOR_INPUT_WARNING "#f00" // Input warning border color - Red
+#define D_HTTP_COLOR_BUTTON_TEXT "#fff" // Button text color - White
+#define D_HTTP_COLOR_BUTTON "#1fa3ec" // Button color - Vivid blue
+#define D_HTTP_COLOR_BUTTON_HOVER "#008ecc" // Button color - Olympic blue
+#define D_HTTP_COLOR_BUTTON_RESET "#f00" // Restart/Reset button color - red
+#define D_HTTP_COLOR_BUTTON_RESET_HOVER "#b00" // Restart/Reset button color - Dark red
+#define D_HTTP_COLOR_GROUP "#f3f3f3" // Group container background color
+#define D_HTTP_COLOR_GROUP_TEXT "#000" // Group container text color - black
+#define D_HTTP_COLOR_FOOTER_TEXT "#008ecc" // Footer text color - Olympic blue
/*
// Dark theme
@@ -91,7 +96,12 @@
#define D_HTTP_COLOR_INPUT_WARNING "#ff5661" // Warning text color - Brick Red
#define D_HTTP_COLOR_BUTTON_TEXT "#faffff" // Button text color - Very pale (mostly white) cyan
#define D_HTTP_COLOR_BUTTON "#1fa3ec" // Button color - Vivid blue
+#define D_HTTP_COLOR_BUTTON_HOVER "#008ecc" // Button color - Olympic Blue
#define D_HTTP_COLOR_BUTTON_RESET "#d43535" // Restart/Reset/Delete button color - Strong red
+#define D_HTTP_COLOR_BUTTON_RESET_HOVER "#b00" // Restart/Reset button color - Dark red
+#define D_HTTP_COLOR_GROUP "#444" // Group container background color - Dark gray
+#define D_HTTP_COLOR_GROUP_TEXT "#fff" // Group container text color - white
+#define D_HTTP_COLOR_FOOTER_TEXT "#1fa3ec" // Footer text color - Vivid blue
*/
/***************************************************
diff --git a/src/sys/svc/hasp_http.cpp b/src/sys/svc/hasp_http.cpp
index 15109075..0351d1f8 100644
--- a/src/sys/svc/hasp_http.cpp
+++ b/src/sys/svc/hasp_http.cpp
@@ -52,9 +52,24 @@
#ifndef D_HTTP_COLOR_BUTTON
#define D_HTTP_COLOR_BUTTON "#1fa3ec" // Button color - Vivid blue
#endif
+#ifndef D_HTTP_COLOR_BUTTON_HOVER
+#define D_HTTP_COLOR_BUTTON_HOVER "#008ecc" // Button color - Olympic blue
+#endif
#ifndef D_HTTP_COLOR_BUTTON_RESET
#define D_HTTP_COLOR_BUTTON_RESET "#f00" // Restart/Reset button color - red
#endif
+#ifndef D_HTTP_COLOR_BUTTON_RESET_HOVER
+#define D_HTTP_COLOR_BUTTON_RESET_HOVER "#b00" // Restart/Reset button color - Dark red
+#endif
+#ifndef D_HTTP_COLOR_GROUP_TEXT
+#define D_HTTP_COLOR_GROUP_TEXT "#000" // Container text color - Black
+#endif
+#ifndef D_HTTP_COLOR_GROUP
+#define D_HTTP_COLOR_GROUP "#f3f3f3" // Container color - Light gray
+#endif
+#ifndef D_HTTP_COLOR_FOOTER_TEXT
+#define D_HTTP_COLOR_FOOTER_TEXT "#008ecc" // Text color of the page footer
+#endif
/* clang-format on */
#if defined(ARDUINO_ARCH_ESP8266) || defined(ARDUINO_ARCH_ESP32)
@@ -2287,14 +2302,16 @@ void webSendCss()
"--bg:" D_HTTP_COLOR_BACKGROUND ";"
"--btnfg:" D_HTTP_COLOR_BUTTON_TEXT ";"
"--btnbg:" D_HTTP_COLOR_BUTTON ";"
- "--btnbghi: #0083cc;"
+ "--btnbghi:" D_HTTP_COLOR_BUTTON_HOVER ";"
"--btnred:" D_HTTP_COLOR_BUTTON_RESET ";"
- "--btnredhi: #b00;"
+ "--btnredhi:" D_HTTP_COLOR_BUTTON_RESET_HOVER ";"
"--btnbrd: transparent;"
- "--grpbg: #f2f2f2;"
+ "--grpfg:" D_HTTP_COLOR_GROUP_TEXT ";"
+ "--grpbg:" D_HTTP_COLOR_GROUP ";"
"--fldbg:" D_HTTP_COLOR_INPUT ";"
"--fldfg:" D_HTTP_COLOR_INPUT_TEXT ";"
"--fldred:" D_HTTP_COLOR_INPUT_WARNING ";"
+ "--footfg:" D_HTTP_COLOR_FOOTER_TEXT ";"
"}");
webSendCached(200, PSTR("text/css"), HTTP_CSS.c_str(), HTTP_CSS.length());
}