From f0b76477bcea76b25162ed1ce4ae692412ec1853 Mon Sep 17 00:00:00 2001 From: marsman7 Date: Fri, 26 Apr 2024 20:13:13 +0200 Subject: [PATCH 1/3] extend web color customising --- data/edit.htm | 62 ++++++++++++++++++++++++- data/style.css | 33 ++++++++++++- include/user_config_override-template.h | 6 +++ src/sys/svc/hasp_http.cpp | 2 + src/sys/svc/hasp_http.h | 8 ++++ 5 files changed, 109 insertions(+), 2 deletions(-) diff --git a/data/edit.htm b/data/edit.htm index 4143e51c..0b6c6d5a 100644 --- a/data/edit.htm +++ b/data/edit.htm @@ -1 +1,61 @@ -openHASP File Editor
L:
  • New File
  • Upload Files
  • Edit
  • Preview
  • Download
  • Delete
\ No newline at end of file + + + + + + + + + + + + openHASP File Editor + + + + + + + + +
+
+
+
L:
+
+
+
+
+
+
+
+
+
+
+
+
    +
  • New File
    • +
  • Upload Files
    • +
  • Edit
    • +
  • Preview
    • +
  • Download
    • +
  • Delete
    • +
+
+
+
+ + + \ No newline at end of file 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 2d6c97c7..f40f140a 100644 --- a/include/user_config_override-template.h +++ b/include/user_config_override-template.h @@ -112,6 +112,12 @@ #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 "#222" // Editor left menu background +#define D_HTTP_COLOR_TOOLBAR "#222" // 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 "#ccf" // Editor left menu item hover background */ /*************************************************** diff --git a/src/sys/svc/hasp_http.cpp b/src/sys/svc/hasp_http.cpp index eba778bb..95a4b6a9 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 */ From f5b5c16b2fa9fe19a811985cc30e7ad1b5f46380 Mon Sep 17 00:00:00 2001 From: marsman7 Date: Tue, 29 Apr 2025 23:36:35 +0200 Subject: [PATCH 2/3] update user template --- include/user_config_override-template.h | 32 +++++++++++++++---------- 1 file changed, 19 insertions(+), 13 deletions(-) diff --git a/include/user_config_override-template.h b/include/user_config_override-template.h index f40f140a..ae8a681c 100644 --- a/include/user_config_override-template.h +++ b/include/user_config_override-template.h @@ -83,19 +83,25 @@ * 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 From 22f79cb0a64624d5399931652dfaa1ec1f20608f Mon Sep 17 00:00:00 2001 From: marsman7 Date: Wed, 30 Apr 2025 09:23:21 +0200 Subject: [PATCH 3/3] update user template dark theme --- include/user_config_override-template.h | 76 ++++++++++++------------- 1 file changed, 38 insertions(+), 38 deletions(-) diff --git a/include/user_config_override-template.h b/include/user_config_override-template.h index ae8a681c..7435eabb 100644 --- a/include/user_config_override-template.h +++ b/include/user_config_override-template.h @@ -83,47 +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_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 +#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_TITLE "#fa0" // -#define D_HTTP_COLOR_TREE "#222" // Editor left menu background -#define D_HTTP_COLOR_TOOLBAR "#222" // 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 "#ccf" // Editor left menu item hover background +#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 */ /***************************************************