From ea87953f94e8565e2b156793cc827e28f2a01fa9 Mon Sep 17 00:00:00 2001 From: fvanroie <15969459+fvanroie@users.noreply.github.com> Date: Mon, 8 Nov 2021 21:44:13 +0100 Subject: [PATCH] Updates colors for Responsive web UI #246 --- data/style.css | 2 +- data/style.css.gz | Bin 962 -> 982 bytes include/user_config_override-template.h | 26 ++++++++++++++++-------- src/sys/svc/hasp_http.cpp | 23 ++++++++++++++++++--- 4 files changed, 39 insertions(+), 12 deletions(-) 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 4bab67bd05f3a9c4c91dc7037eff504bb87e4600..e388712e5236a1d56a8d6de797cfd28b86629556 100644 GIT binary patch literal 982 zcmV;{11bC;iwFn^fr()P0CRMCY-KKEb8`TtRqe8qFc5tetmAmAK%q+O1nW4yhU1R_ zfyRae!_p5K-rY^0fNlL4ow=8rY<9Dov*+w3S}ABfuLi0~qs7z9i~=RRqy<~m$Kv(5 z6z+RmIJl7YZm|cb$ZB;uo&3`qU+H4C4uZhAE}SE0r%&putNC|E{0%ERYA+{P+`%2zM_zMaS=(nh zQvKw4<{&SY9hX%DL@Idt43~=SaxU1H>!aLg#i%(8VE-nO7%&4Ss zU&bbQafOjKpyH{PA?0lea0YBNUjD1H6Oee?`;c6vP3_v{USa0n2krT?d!DIuP9VW@ zh%;VSf?n{+hHzdYRC>6pDjt9h%#*nE`t5oXRA+qRdDw3Q+>aLmO$3W4TE-R4GA;`e zIBWE~LSxn)WbKS+@3xwiS9cF%L6syJ4WKF#bg*yd20y~4ziN>e<`R>p@12L1j`mb> zds4Ut0+a!5r&o=|g=;MBuIvXrqDduvETVwrBIDr$zI3v6U{0{jTna&!jd!qO3sB; zH%ZCiOZ$5~MrI{CTRsHl*JK=7KbdkgP5losek9zap&JNu!OpSevB!ax^)L?OuT2d+ zzhG7gXt|m#?K74tO)WZ7N!HO`IRgyC<{pec>MJRXynK_Aa`|i5LRaJKCsSTLgm9wd zjar<*q!QjbYVE}Cbv#HidJ#_wznSHI*fwg%;eHptjb0!h)rrs?@EunW7mHuY+PeRw z-ZyWs`fJh%)$JFwa_y~x*5Ik!Gw8OHhhu*2)2w^RWHZ<1UsUnC;o>u`m3DnDbLIMV zlcuc3!D%PFC4=jqsFoOgH}6O8ncB<{pPFJywr0DEaP>Q_JyfU-ANV;<(YG5@^v9BA zoH})?8Iul`ne#NcyfcG#*$ymlhqgYF@tur@={bbn{x`UpU(t1ZMV58l4+Of|sj~?H E03PV%R{#J2 literal 962 zcmV;z13mm7iwFpwQh;Fs0CRMCY-KKEb8`TtRO_;nFc5wf#BppDD6P^u!8(qw;rJs! zpz(wR!_rb2-rY^01>58CHggV5HhcYcza?5J=zPBhs!5~8;$=pG5?<1Rt?Fa(x-EtG z9uE#4WW9F}02NuSPN!3FdJ`yJtTtg78dcXha(4Qp+P&+qL&x7bYxC!RcrUnQ&UuaU zH?DKu>|Ok+L8}M0cQwmg2Q-y+u5^ia1r*p~9WBvtWi0>6e)pgD{@b|&Q{IP{%RWfG zL}lj=SPMQCypSYi5}3vp!Km)+mm~@feUKYuQzeupN2(XT4=pU?gr*OLR*lU3;myXb zs761}cv&e8R6^`>o7%I-gTly98y)zvf1asyJ|cqU5NEuu1U+NPW~BT?sPy43 zt9S%9G$nEA57*5$tXeFw9q+pk?^lOF6T#wX@ZySQ8J7hKoek<;pfTqjvThoj;N4EM z@}lmeEvS-&R{^MsggqR(xgdzJ>94S1t#M+)488MF($is7ykRIj0|C{Hc2iZ?v7@5Uz-|ue#WR0P;wF5vCmklG_~kR zC0S1g=8Q0mmwPaN%dey`^a@N!$|b7)1tNv65RqyAZm8je#;@=#<%UGxHnPn`(O0h7KU=DNS+uvPzws&C$4ZI_@CQaLDS5nDLICbh&GbSA>GiNcWyfa&M*^N`+ kjct95vv-^sSLJAWyZUdIRdm@^k)68!2Obqb@q!5e08>KNQUCw| 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()); }