diff --git a/data/edit.htm b/data/edit.htm index aaaf9e85..f3dbb9ba 100644 --- a/data/edit.htm +++ b/data/edit.htm @@ -1 +1,61 @@ -openHASP File Editor
L:
\ No newline at end of file + + + + + + + + + + + + openHASP File Editor + + + + + + + + +
+
+
+
L:
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+ + + diff --git a/data/style.css b/data/style.css index 6b3ac6eb..11abf52a 100644 --- a/data/style.css +++ b/data/style.css @@ -518,7 +518,7 @@ a.foot:visited { top: 10px; left: 50px; position: absolute; - background: #fff; + background: var(--ddmenubg); z-index: 10; padding: 0.75rem; border-radius: 0.5rem; @@ -593,6 +593,37 @@ a.foot:visited { animation: toastIt 3000ms cubic-bezier(0.785, 0.135, 0.15, 0.86) forwards; } +ul { + list-style-type: none; + padding-left: 20px +} + +ul>li { + white-space: nowrap +} + +.inact:hover { + cursor: default +} + +.item:hover { + cursor: pointer; +/* background-color: #dadaff */ + background-color: var(--itemhoverbg) +} + +.item>span:nth-child(2):hover { + text-decoration: underline +} + +.selitem>div { + background-color: var(--itemhoverbg) +} + +.selitem>div:hover { + background-color: var(--itemhoverbg) +} + @keyframes toastIt { 0%, 100% { diff --git a/include/user_config_override-template.h b/include/user_config_override-template.h index 113acc7e..7925f48c 100644 --- a/include/user_config_override-template.h +++ b/include/user_config_override-template.h @@ -83,35 +83,47 @@ * 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_HOVER "#0083cc" // 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 "#0083cc" // Footer text color - Olympic blue +#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 "#0083cc" // 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 "#0083cc" // Footer text color - Olympic blue +#define D_HTTP_COLOR_TITLE "#fa0" +#define D_HTTP_COLOR_TREE "#fff" // Editor left menu background +#define D_HTTP_COLOR_TOOLBAR "#fff" // Editor top bar background +#define D_HTTP_COLOR_PREVIEW "#888" // +#define D_HTTP_COLOR_DROPDOWN_BG "#777" // Editor dropdown menu background +#define D_HTTP_COLOR_ITEM_HOVER "#060" // Editor left menu item hover background /* // Dark theme -#define D_HTTP_COLOR_TEXT "#eaeaea" // Global text color - Very light gray -#define D_HTTP_COLOR_BACKGROUND "#252525" // Global background color - Very dark gray (mostly black) -#define D_HTTP_COLOR_INPUT_TEXT "#000" // Input text color - Black -#define D_HTTP_COLOR_INPUT "#ddd" // Input background color - Very light gray -#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 "#0083cc" // 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 +#define D_HTTP_COLOR_TEXT "#eaeaea" // Global text color - Very light gray +#define D_HTTP_COLOR_BACKGROUND "#252525" // Global background color - Very dark gray (mostly black) +#define D_HTTP_COLOR_INPUT_TEXT "#000" // Input text color - Black +#define D_HTTP_COLOR_INPUT "#ddd" // Input background color - Very light gray +#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 "#0083cc" // 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 +#define D_HTTP_COLOR_TITLE "#fa0" +#define D_HTTP_COLOR_TREE "#444" // Editor left menu background +#define D_HTTP_COLOR_TOOLBAR "#1fa3ec" // Editor top bar background +#define D_HTTP_COLOR_PREVIEW "#888" // +#define D_HTTP_COLOR_DROPDOWN_BG "#666" // Editor dropdown menu background +#define D_HTTP_COLOR_ITEM_HOVER "#0083cc" // Editor left menu item hover background */ /*************************************************** diff --git a/src/sys/svc/hasp_http.cpp b/src/sys/svc/hasp_http.cpp index 99f3c981..9a64f47a 100644 --- a/src/sys/svc/hasp_http.cpp +++ b/src/sys/svc/hasp_http.cpp @@ -134,6 +134,8 @@ const uint8_t HTTP_VARS_CSS[] PROGMEM = ":root{" "--toolbg:" D_HTTP_COLOR_TOOLBAR ";" "--treebg:" D_HTTP_COLOR_TREE ";" "--preeviewbg:" D_HTTP_COLOR_PREVIEW ";" + "--ddmenubg:" D_HTTP_COLOR_DROPDOWN_BG ";" + "--itemhoverbg:" D_HTTP_COLOR_ITEM_HOVER ";" "}"; //////////////////////////////////////////////////////////////////////////////////////////////////// diff --git a/src/sys/svc/hasp_http.h b/src/sys/svc/hasp_http.h index 388bb67c..c33b39a8 100644 --- a/src/sys/svc/hasp_http.h +++ b/src/sys/svc/hasp_http.h @@ -86,6 +86,14 @@ bool httpSetConfig(const JsonObject& settings); #ifndef D_HTTP_COLOR_PREVIEW #define D_HTTP_COLOR_PREVIEW "#888" #endif +#ifndef D_HTTP_COLOR_DROPDOWN_BG +#define D_HTTP_COLOR_DROPDOWN_BG "#777" // Editor dropdown menu background +#endif +#ifndef D_HTTP_COLOR_ITEM_HOVER +#define D_HTTP_COLOR_ITEM_HOVER "#ccf" // Editor left menu item hover background +#endif + + /* clang-format on */