Updates colors for Responsive web UI #246

data/style.css

@@ -1 +1 @@
-:root{--star:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -6 16 16"><line y1="-3" y2="3" stroke="red" transform="rotate(15)"></line><line y1="-3" y2="3" stroke="red" transform="rotate(75)"></line><line y1="-3" y2="3" stroke="red" transform="rotate(-45)"></line></svg>')}.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}}
+:root{--star:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -6 16 16"><line y1="-3" y2="3" stroke="red" transform="rotate(15)"></line><line y1="-3" y2="3" stroke="red" transform="rotate(75)"></line><line y1="-3" y2="3" stroke="red" transform="rotate(-45)"></line></svg>')}.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}}

include/user_config_override-template.h

@@ -80,7 +80,12 @@
 #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
 */
 
 /***************************************************

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());
 }