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