mirror of
https://github.com/HASwitchPlate/openHASP.git
synced 2025-07-25 20:26:41 +00:00
Updates colors for Responsive web UI #246
This commit is contained in:
fvanroie
parent
52f2692489
commit
ea87953f94
@ -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}}
|
||||
Binary file not shown.
@ -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
|
||||
*/
|
||||
|
||||
/***************************************************
|
||||
|
||||
@ -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());
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user