From 58e0b2f0818dc5bcfe230d978f7e153c34db7086 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Magnus=20=C3=85hall?= Date: Tue, 25 Jun 2024 08:59:07 +0200 Subject: [PATCH] Theming support --- configuration.go | 40 ++++ main.go | 14 ++ page.go | 3 + sql/00018.sql | 5 + sql/00019.sql | 1 + static/css/configuration.css | 130 ----------- static/css/datapoints.css | 168 -------------- static/css/default_light/configuration.css | 26 +++ static/css/default_light/datapoints.css | 64 ++++++ static/css/default_light/default_light.css | 37 ++++ static/css/default_light/gruvbox.css | 0 static/css/default_light/index.css | 4 + static/css/default_light/main.css | 205 ++++++++++++++++++ static/css/default_light/problems.css | 51 +++++ .../css/default_light/theme-default_light.css | 0 static/css/default_light/theme-gruvbox.css | 0 static/css/default_light/trigger_edit.css | 44 ++++ static/css/default_light/triggers.css | 13 ++ static/css/gruvbox/configuration.css | 26 +++ static/css/gruvbox/datapoints.css | 64 ++++++ static/css/gruvbox/default_light.css | 37 ++++ static/css/gruvbox/gruvbox.css | 0 static/css/gruvbox/index.css | 4 + static/css/{ => gruvbox}/main.css | 182 ++++++++-------- static/css/gruvbox/problems.css | 51 +++++ static/css/gruvbox/theme-default_light.css | 0 static/css/gruvbox/theme-gruvbox.css | 0 static/css/{ => gruvbox}/theme.css | 0 static/css/gruvbox/trigger_edit.css | 44 ++++ static/css/gruvbox/triggers.css | 13 ++ static/css/index.css | 108 --------- static/css/problems.css | 155 ------------- static/css/trigger_edit.css | 148 ------------- static/css/triggers.css | 117 ---------- .../default_light/acknowledge-filled.svg | 1 + .../default_light/acknowledge-outline.svg | 1 + static/images/default_light/acknowledge.svg | 1 + static/images/default_light/configuration.svg | 69 ++++++ .../default_light/configuration_selected.svg | 67 ++++++ static/images/default_light/datapoints.svg | 76 +++++++ .../default_light/datapoints_selected.svg | 80 +++++++ static/images/default_light/delete.svg | 1 + static/images/default_light/delete_white.svg | 1 + static/images/default_light/graph.drawio | 1 + static/images/default_light/graph.svg | 1 + static/images/default_light/info-filled.svg | 1 + static/images/default_light/info-outline.svg | 1 + static/images/default_light/logo.svg | 73 +++++++ static/images/default_light/logo_selected.svg | 71 ++++++ static/images/default_light/problems.svg | 69 ++++++ .../default_light/problems_selected.svg | 67 ++++++ static/images/default_light/triggers.svg | 71 ++++++ .../default_light/triggers_selected.svg | 69 ++++++ static/images/default_light/values.svg | 1 + static/images/gruvbox/acknowledge-filled.svg | 1 + static/images/gruvbox/acknowledge-outline.svg | 1 + static/images/gruvbox/acknowledge.svg | 1 + static/images/gruvbox/configuration.svg | 1 + .../images/gruvbox/configuration_selected.svg | 1 + static/images/gruvbox/datapoints.svg | 1 + static/images/gruvbox/datapoints_selected.svg | 1 + static/images/gruvbox/delete.svg | 1 + static/images/gruvbox/delete_white.svg | 1 + static/images/gruvbox/graph.drawio | 1 + static/images/gruvbox/graph.svg | 1 + static/images/gruvbox/info-filled.svg | 1 + static/images/gruvbox/info-outline.svg | 1 + static/images/gruvbox/logo.svg | 1 + static/images/gruvbox/logo_selected.svg | 1 + static/images/gruvbox/problems.svg | 1 + static/images/gruvbox/problems_selected.svg | 1 + static/images/gruvbox/triggers.svg | 1 + static/images/gruvbox/triggers_selected.svg | 1 + static/images/gruvbox/values.svg | 1 + static/less/Makefile | 6 +- static/less/configuration.less | 2 +- static/less/datapoints.less | 2 +- static/less/default_light.less | 53 +++++ static/less/gruvbox.less | 1 + static/less/index.less | 2 +- static/less/loop_make.sh | 17 +- static/less/main.less | 131 ++++++++++- static/less/problems.less | 2 +- static/less/theme-default_light.less | 20 ++ static/less/theme-gruvbox.less | 20 ++ static/less/theme.less | 143 ------------ static/less/trigger_edit.less | 2 +- static/less/triggers.less | 2 +- views/components/menu.gotmpl | 10 +- views/components/page_label.gotmpl | 2 +- views/layouts/main.gotmpl | 3 +- views/pages/configuration.gotmpl | 2 +- views/pages/datapoint_edit.gotmpl | 2 +- views/pages/datapoint_values.gotmpl | 2 +- views/pages/datapoints.gotmpl | 2 +- views/pages/index.gotmpl | 2 +- views/pages/problems.gotmpl | 2 +- views/pages/trigger_edit.gotmpl | 2 +- views/pages/triggers.gotmpl | 5 +- 99 files changed, 1839 insertions(+), 1094 deletions(-) create mode 100644 configuration.go create mode 100644 sql/00018.sql create mode 100644 sql/00019.sql delete mode 100644 static/css/configuration.css delete mode 100644 static/css/datapoints.css create mode 100644 static/css/default_light/configuration.css create mode 100644 static/css/default_light/datapoints.css create mode 100644 static/css/default_light/default_light.css create mode 100644 static/css/default_light/gruvbox.css create mode 100644 static/css/default_light/index.css create mode 100644 static/css/default_light/main.css create mode 100644 static/css/default_light/problems.css create mode 100644 static/css/default_light/theme-default_light.css create mode 100644 static/css/default_light/theme-gruvbox.css create mode 100644 static/css/default_light/trigger_edit.css create mode 100644 static/css/default_light/triggers.css create mode 100644 static/css/gruvbox/configuration.css create mode 100644 static/css/gruvbox/datapoints.css create mode 100644 static/css/gruvbox/default_light.css create mode 100644 static/css/gruvbox/gruvbox.css create mode 100644 static/css/gruvbox/index.css rename static/css/{ => gruvbox}/main.css (96%) create mode 100644 static/css/gruvbox/problems.css create mode 100644 static/css/gruvbox/theme-default_light.css create mode 100644 static/css/gruvbox/theme-gruvbox.css rename static/css/{ => gruvbox}/theme.css (100%) create mode 100644 static/css/gruvbox/trigger_edit.css create mode 100644 static/css/gruvbox/triggers.css delete mode 100644 static/css/index.css delete mode 100644 static/css/problems.css delete mode 100644 static/css/trigger_edit.css delete mode 100644 static/css/triggers.css create mode 120000 static/images/default_light/acknowledge-filled.svg create mode 120000 static/images/default_light/acknowledge-outline.svg create mode 120000 static/images/default_light/acknowledge.svg create mode 100644 static/images/default_light/configuration.svg create mode 100644 static/images/default_light/configuration_selected.svg create mode 100644 static/images/default_light/datapoints.svg create mode 100644 static/images/default_light/datapoints_selected.svg create mode 120000 static/images/default_light/delete.svg create mode 120000 static/images/default_light/delete_white.svg create mode 120000 static/images/default_light/graph.drawio create mode 120000 static/images/default_light/graph.svg create mode 120000 static/images/default_light/info-filled.svg create mode 120000 static/images/default_light/info-outline.svg create mode 100644 static/images/default_light/logo.svg create mode 100644 static/images/default_light/logo_selected.svg create mode 100644 static/images/default_light/problems.svg create mode 100644 static/images/default_light/problems_selected.svg create mode 100644 static/images/default_light/triggers.svg create mode 100644 static/images/default_light/triggers_selected.svg create mode 120000 static/images/default_light/values.svg create mode 120000 static/images/gruvbox/acknowledge-filled.svg create mode 120000 static/images/gruvbox/acknowledge-outline.svg create mode 120000 static/images/gruvbox/acknowledge.svg create mode 120000 static/images/gruvbox/configuration.svg create mode 120000 static/images/gruvbox/configuration_selected.svg create mode 120000 static/images/gruvbox/datapoints.svg create mode 120000 static/images/gruvbox/datapoints_selected.svg create mode 120000 static/images/gruvbox/delete.svg create mode 120000 static/images/gruvbox/delete_white.svg create mode 120000 static/images/gruvbox/graph.drawio create mode 120000 static/images/gruvbox/graph.svg create mode 120000 static/images/gruvbox/info-filled.svg create mode 120000 static/images/gruvbox/info-outline.svg create mode 120000 static/images/gruvbox/logo.svg create mode 120000 static/images/gruvbox/logo_selected.svg create mode 120000 static/images/gruvbox/problems.svg create mode 120000 static/images/gruvbox/problems_selected.svg create mode 120000 static/images/gruvbox/triggers.svg create mode 120000 static/images/gruvbox/triggers_selected.svg create mode 120000 static/images/gruvbox/values.svg create mode 100644 static/less/default_light.less create mode 100644 static/less/gruvbox.less create mode 100644 static/less/theme-default_light.less create mode 100644 static/less/theme-gruvbox.less delete mode 100644 static/less/theme.less diff --git a/configuration.go b/configuration.go new file mode 100644 index 0000000..889b2fe --- /dev/null +++ b/configuration.go @@ -0,0 +1,40 @@ +package main + +import ( + // External + werr "git.gibonuddevalla.se/go/wrappederror" + + // Standard + "database/sql" +) + +type Configuration struct { + Settings map[string]string +} + +var smonConfig Configuration + +func SmonConfigInit() (err error) { + smonConfig.Settings = make(map[string]string, 8) + + var rows *sql.Rows + rows, err = service.Db.Conn.Query(`SELECT * FROM public.configuration`) + if err != nil { + err = werr.Wrap(err) + return + } + defer rows.Close() + + for rows.Next() { + var setting, value string + err = rows.Scan(&setting, &value) + if err != nil { + err = werr.Wrap(err) + return + } + + smonConfig.Settings[setting] = value + } + + return +} diff --git a/main.go b/main.go index f31024f..21dcedf 100644 --- a/main.go +++ b/main.go @@ -152,6 +152,12 @@ func main() { // {{{ go nodataLoop() + err = SmonConfigInit() + if err != nil { + logger.Error("configuration", "error", werr.Wrap(err)) + os.Exit(1) + } + err = service.Start() if err != nil { logger.Error("webserver", "error", werr.Wrap(err)) @@ -366,6 +372,7 @@ func pageIndex(w http.ResponseWriter, _ *http.Request, _ *session.T) { // {{{ page := Page{ LAYOUT: "main", PAGE: "index", + CONFIG: smonConfig.Settings, } page.Render(w) } // }}} @@ -481,6 +488,7 @@ func pageProblems(w http.ResponseWriter, _ *http.Request, _ *session.T) { // {{{ page := Page{ LAYOUT: "main", PAGE: "problems", + CONFIG: smonConfig.Settings, } problems, err := ProblemsRetrieve() @@ -555,6 +563,7 @@ func pageDatapoints(w http.ResponseWriter, r *http.Request, _ *session.T) { // { page := Page{ LAYOUT: "main", PAGE: "datapoints", + CONFIG: smonConfig.Settings, } datapoints, err := DatapointsRetrieve() @@ -599,6 +608,7 @@ func pageDatapointEdit(w http.ResponseWriter, r *http.Request, _ *session.T) { / page := Page{ LAYOUT: "main", PAGE: "datapoint_edit", + CONFIG: smonConfig.Settings, MENU: "datapoints", Icon: "datapoints", Label: "Datapoint", @@ -679,6 +689,7 @@ func pageDatapointValues(w http.ResponseWriter, r *http.Request, _ *session.T) { page := Page{ LAYOUT: "main", PAGE: "datapoint_values", + CONFIG: smonConfig.Settings, MENU: "datapoints", Icon: "datapoints", Label: "Values for " + datapoint.Name, @@ -706,6 +717,7 @@ func pageTriggers(w http.ResponseWriter, _ *http.Request, _ *session.T) { // {{{ page := Page{ LAYOUT: "main", PAGE: "triggers", + CONFIG: smonConfig.Settings, Data: map[string]any{ "Areas": areas, }, @@ -790,6 +802,7 @@ func pageTriggerEdit(w http.ResponseWriter, r *http.Request, _ *session.T) { // LAYOUT: "main", PAGE: "trigger_edit", MENU: "triggers", + CONFIG: smonConfig.Settings, Label: "Trigger", Icon: "triggers", Data: map[string]any{ @@ -934,6 +947,7 @@ func pageConfiguration(w http.ResponseWriter, _ *http.Request, _ *session.T) { / page := Page{ LAYOUT: "main", PAGE: "configuration", + CONFIG: smonConfig.Settings, Data: map[string]any{ "Areas": areas, }, diff --git a/page.go b/page.go index 2465645..18e151b 100644 --- a/page.go +++ b/page.go @@ -15,6 +15,7 @@ type Page struct { LAYOUT string PAGE string MENU string + CONFIG map[string]string Label string Icon string @@ -47,6 +48,8 @@ func (p *Page) Render(w http.ResponseWriter) { "LAYOUT": p.LAYOUT, "PAGE": p.PAGE, "MENU": p.MENU, + "CONFIG": smonConfig.Settings, + "Label": p.Label, "Icon": p.Icon, "Data": p.Data, diff --git a/sql/00018.sql b/sql/00018.sql new file mode 100644 index 0000000..c9f5a0c --- /dev/null +++ b/sql/00018.sql @@ -0,0 +1,5 @@ +CREATE TABLE public."configuration" ( + setting varchar NOT NULL, + value varchar DEFAULT '' NOT NULL, + CONSTRAINT configuration_pk PRIMARY KEY (setting) +); diff --git a/sql/00019.sql b/sql/00019.sql new file mode 100644 index 0000000..e564737 --- /dev/null +++ b/sql/00019.sql @@ -0,0 +1 @@ +INSERT INTO public.configuration(setting, value) VALUES('THEME', 'gruvbox'); diff --git a/static/css/configuration.css b/static/css/configuration.css deleted file mode 100644 index e013c47..0000000 --- a/static/css/configuration.css +++ /dev/null @@ -1,130 +0,0 @@ -html { - box-sizing: border-box; -} -*, -*:before, -*:after { - box-sizing: inherit; -} -*:focus { - outline: none; -} -[onClick] { - cursor: pointer; -} -html, -body { - margin: 0; - padding: 0; -} -body { - background: #282828; - font-family: sans-serif; - font-weight: 300; - color: #d5c4a1; - font-size: 11pt; -} -h1, -h2 { - margin-bottom: 4px; -} -h1:first-child, -h2:first-child { - margin-top: 0px; -} -h1 { - font-size: 1.5em; - color: #fb4934; - font-weight: 800; -} -h2 { - font-size: 1.25em; - color: #b8bb26; - font-weight: 800; -} -a { - color: #3f9da1; - text-decoration: none; -} -a:hover { - text-decoration: underline; -} -b { - font-weight: 800; -} -input[type="text"], -textarea, -select { - font-family: monospace; - background: #202020; - color: #d5c4a1; - padding: 4px 8px; - border: none; - font-size: 1em; - line-height: 1.5em; -} -button { - background: #202020; - color: #d5c4a1; - padding: 8px 32px; - border: 1px solid #535353; - font-size: 1em; - height: 3em; -} -button:focus { - background: #333; -} -.line { - grid-column: 1 / -1; - border-bottom: 1px solid #4e4e4e; -} -span.date { - color: #d5c4a1; - font-weight: 800; -} -span.time { - font-size: 0.9em; - color: #d5c4a1; -} -span.seconds { - display: none; -} -label { - user-select: none; -} -.description { - border: 1px solid #737373; - color: #3f9da1; - background: #202020; - padding: 4px 8px; - margin-top: 8px; - white-space: nowrap; - width: min-content; - border-radius: 8px; -} -#areas .area > .name { - display: grid; - grid-template-columns: 1fr min-content; - grid-gap: 0px 16px; - align-items: center; - padding-left: 16px; - padding-right: 8px; -} -#areas .area > .name img { - margin-top: 3px; - margin-bottom: 4px; - height: 16px; -} -#areas .area .section.configuration { - display: grid; - grid-template-columns: 1fr min-content; - grid-gap: 0 16px; - margin-top: 8px; - margin-bottom: 8px; -} -#areas .area .section.configuration:last-child { - margin-bottom: 16px; -} -#areas .area .section.configuration img { - height: 16px; -} diff --git a/static/css/datapoints.css b/static/css/datapoints.css deleted file mode 100644 index 3baa3b0..0000000 --- a/static/css/datapoints.css +++ /dev/null @@ -1,168 +0,0 @@ -html { - box-sizing: border-box; -} -*, -*:before, -*:after { - box-sizing: inherit; -} -*:focus { - outline: none; -} -[onClick] { - cursor: pointer; -} -html, -body { - margin: 0; - padding: 0; -} -body { - background: #282828; - font-family: sans-serif; - font-weight: 300; - color: #d5c4a1; - font-size: 11pt; -} -h1, -h2 { - margin-bottom: 4px; -} -h1:first-child, -h2:first-child { - margin-top: 0px; -} -h1 { - font-size: 1.5em; - color: #fb4934; - font-weight: 800; -} -h2 { - font-size: 1.25em; - color: #b8bb26; - font-weight: 800; -} -a { - color: #3f9da1; - text-decoration: none; -} -a:hover { - text-decoration: underline; -} -b { - font-weight: 800; -} -input[type="text"], -textarea, -select { - font-family: monospace; - background: #202020; - color: #d5c4a1; - padding: 4px 8px; - border: none; - font-size: 1em; - line-height: 1.5em; -} -button { - background: #202020; - color: #d5c4a1; - padding: 8px 32px; - border: 1px solid #535353; - font-size: 1em; - height: 3em; -} -button:focus { - background: #333; -} -.line { - grid-column: 1 / -1; - border-bottom: 1px solid #4e4e4e; -} -span.date { - color: #d5c4a1; - font-weight: 800; -} -span.time { - font-size: 0.9em; - color: #d5c4a1; -} -span.seconds { - display: none; -} -label { - user-select: none; -} -.description { - border: 1px solid #737373; - color: #3f9da1; - background: #202020; - padding: 4px 8px; - margin-top: 8px; - white-space: nowrap; - width: min-content; - border-radius: 8px; -} -#datapoints { - display: grid; - grid-template-columns: repeat(6, min-content); - grid-gap: 8px 16px; - margin-top: 16px; -} -#datapoints .group { - font-size: 1.1em; - font-weight: bold; - color: #b8bb26; - margin-top: 1.5em; - padding-bottom: 4px; -} -#datapoints h2 { - border-bottom: unset; -} -#datapoints .header { - font-weight: 800; - font-size: 0.85em; - color: #d5c4a1; -} -#datapoints div { - white-space: nowrap; - align-self: center; -} -#datapoints .icons { - display: flex; - gap: 12px; - align-items: center; -} -#datapoints img.info { - height: 20px; -} -#values { - display: grid; - grid-template-columns: repeat(2, min-content); - gap: 16px; - white-space: nowrap; -} -.widgets { - display: grid; - grid-template-columns: min-content 1fr; - gap: 8px 16px; -} -.widgets .label { - margin-top: 4px; - white-space: nowrap; -} -.widgets input[type="text"], -.widgets textarea { - width: 100%; -} -.widgets .datapoints { - display: grid; - grid-template-columns: min-content 1fr; - gap: 6px 8px; - font-family: "Roboto Mono", monospace; - margin-bottom: 8px; -} -.widgets .action { - display: grid; - grid-template-columns: min-content min-content; - grid-gap: 8px; -} diff --git a/static/css/default_light/configuration.css b/static/css/default_light/configuration.css new file mode 100644 index 0000000..83a9658 --- /dev/null +++ b/static/css/default_light/configuration.css @@ -0,0 +1,26 @@ +#areas .area > .name { + display: grid; + grid-template-columns: 1fr min-content; + grid-gap: 0px 16px; + align-items: center; + padding-left: 16px; + padding-right: 8px; +} +#areas .area > .name img { + margin-top: 3px; + margin-bottom: 4px; + height: 16px; +} +#areas .area .section.configuration { + display: grid; + grid-template-columns: 1fr min-content; + grid-gap: 0 16px; + margin-top: 8px; + margin-bottom: 8px; +} +#areas .area .section.configuration:last-child { + margin-bottom: 16px; +} +#areas .area .section.configuration img { + height: 16px; +} diff --git a/static/css/default_light/datapoints.css b/static/css/default_light/datapoints.css new file mode 100644 index 0000000..5ca8d48 --- /dev/null +++ b/static/css/default_light/datapoints.css @@ -0,0 +1,64 @@ +#datapoints { + display: grid; + grid-template-columns: repeat(6, min-content); + grid-gap: 8px 16px; + margin-top: 16px; +} +#datapoints .group { + font-size: 1.1em; + font-weight: bold; + color: #2c6e97; + margin-top: 1.5em; + padding-bottom: 4px; +} +#datapoints h2 { + border-bottom: unset; +} +#datapoints .header { + font-weight: 800; + font-size: 0.85em; + color: #333; +} +#datapoints div { + white-space: nowrap; + align-self: center; +} +#datapoints .icons { + display: flex; + gap: 12px; + align-items: center; +} +#datapoints img.info { + height: 20px; +} +#values { + display: grid; + grid-template-columns: repeat(2, min-content); + gap: 16px; + white-space: nowrap; +} +.widgets { + display: grid; + grid-template-columns: min-content 1fr; + gap: 8px 16px; +} +.widgets .label { + margin-top: 4px; + white-space: nowrap; +} +.widgets input[type="text"], +.widgets textarea { + width: 100%; +} +.widgets .datapoints { + display: grid; + grid-template-columns: min-content 1fr; + gap: 6px 8px; + font-family: "Roboto Mono", monospace; + margin-bottom: 8px; +} +.widgets .action { + display: grid; + grid-template-columns: min-content min-content; + grid-gap: 8px; +} diff --git a/static/css/default_light/default_light.css b/static/css/default_light/default_light.css new file mode 100644 index 0000000..f1ece36 --- /dev/null +++ b/static/css/default_light/default_light.css @@ -0,0 +1,37 @@ +.widgets .action #run-result { + background-color: #fff !important; + border: 1px solid #ccc; +} +#menu .entry .label { + color: #7bb8eb !important; +} +#menu .entry.selected .label { + color: #fff !important; +} +input[type="text"], +textarea, +select { + border: 1px solid #ccc; +} +.description { + border: 1px solid #ccc; +} +button { + background: #2979b8; + color: #fff; + border: 1px solid #2e84cb; +} +button:focus { + background: #2979b8; +} +#areas .area { + background: #fff !important; + border: 1px solid #2979b8; +} +#areas .area .name { + border-top-left-radius: unset; + border-top-right-radius: unset; +} +#areas .area .section .name { + font-weight: normal; +} diff --git a/static/css/default_light/gruvbox.css b/static/css/default_light/gruvbox.css new file mode 100644 index 0000000..e69de29 diff --git a/static/css/default_light/index.css b/static/css/default_light/index.css new file mode 100644 index 0000000..32a3a60 --- /dev/null +++ b/static/css/default_light/index.css @@ -0,0 +1,4 @@ +.graph { + margin-top: 192px; + border-radius: 16px; +} diff --git a/static/css/default_light/main.css b/static/css/default_light/main.css new file mode 100644 index 0000000..d672af0 --- /dev/null +++ b/static/css/default_light/main.css @@ -0,0 +1,205 @@ +html { + box-sizing: border-box; +} +*, +*:before, +*:after { + box-sizing: inherit; +} +*:focus { + outline: none; +} +[onClick] { + cursor: pointer; +} +#layout { + display: grid; + grid-template-areas: "menu content"; + grid-template-columns: 104px 1fr; + height: 100vh; +} +#menu { + display: grid; + grid-template-columns: 1fr; + grid-template-rows: repeat(32, min-content); + align-items: start; + grid-area: menu; + background: #1b4e78; +} +#menu .entry.selected { + background: #2979b8; +} +#menu .entry.selected a { + color: #000 !important; +} +#menu .entry > a { + display: grid; + justify-items: center; + grid-template-rows: 38px + 16px + ; + padding: 16px; + color: #7bb8eb; + text-decoration: none; +} +#menu .entry > a img { + display: block; + width: 32px; +} +#menu .entry > a .label { + font-size: 0.9em; + font-weight: bold; +} +#page { + grid-area: content; + padding: 32px; +} +#page .page-label { + display: grid; + grid-template-columns: min-content 1fr; + grid-gap: 12px; + align-items: center; + margin-bottom: 32px; +} +#page .page-label div { + font-weight: 800; + font-size: 1.5em; + color: #1b4e78; +} +#page .page-label img { + display: block; +} +#areas { + display: flex; + flex-wrap: wrap; + gap: 12px; + margin-top: 16px; +} +#areas .area { + background: #2979b8; + border-radius: 4px; +} +#areas .area > .name { + background: #1b4e78; + color: #fff; + font-weight: 800; + padding: 4px 16px; + border-top-left-radius: 4px; + border-top-right-radius: 4px; +} +#areas .area .section { + margin: 8px 16px; + margin-top: 12px; + margin-bottom: 20px; +} +#areas .area .section:last-child { + margin-bottom: 12px; +} +#areas .area .section .create { + display: grid; + grid-template-columns: min-content min-content; + grid-gap: 8px; + white-space: nowrap; +} +#areas .area .section .create .new { + font-weight: 800; +} +#areas .area .section > .name { + font-weight: 800; +} +dialog { + background: #1b4e78; + border: 1px solid #3f90d4; + color: #333; + box-shadow: 10px 10px 15px 0px rgba(0, 0, 0, 0.25); +} +html, +body { + margin: 0; + padding: 0; +} +body { + background: #fff; + font-family: sans-serif; + font-weight: 300; + color: #333; + font-size: 11pt; +} +h1, +h2 { + margin-bottom: 4px; +} +h1:first-child, +h2:first-child { + margin-top: 0px; +} +h1 { + font-size: 1.5em; + color: #1b4e78; + font-weight: 800; +} +h2 { + font-size: 1.25em; + color: #2c6e97; + font-weight: 800; +} +a { + color: #2c6e97; + text-decoration: none; +} +a:hover { + text-decoration: underline; +} +b { + font-weight: 800; +} +input[type="text"], +textarea, +select { + font-family: monospace; + background: #fff; + color: #333; + padding: 4px 8px; + border: 1px solid #484848; + font-size: 1em; + line-height: 1.5em; +} +button { + background: #1b4e78; + color: #333; + padding: 8px 32px; + border: 1px solid #2e84cb; + font-size: 1em; + height: 3em; +} +button:focus { + background: #2979b8; +} +.line { + grid-column: 1 / -1; + border-bottom: 1px solid #d9d9d9; +} +span.date { + color: #333; + font-weight: 800; +} +span.time { + font-size: 0.9em; + color: #333; +} +span.seconds { + display: none; +} +label { + user-select: none; +} +.description { + border: 1px solid #123450; + color: #2c6e97; + background: #fff; + padding: 4px 8px; + margin-top: 8px; + white-space: nowrap; + width: min-content; + border-radius: 8px; +} diff --git a/static/css/default_light/problems.css b/static/css/default_light/problems.css new file mode 100644 index 0000000..ffe8a97 --- /dev/null +++ b/static/css/default_light/problems.css @@ -0,0 +1,51 @@ +#problems-list, +#acknowledged-list { + display: grid; + grid-template-columns: repeat(6, min-content); + grid-gap: 4px 16px; + margin-bottom: 32px; +} +#problems-list div, +#acknowledged-list div { + white-space: nowrap; + line-height: 24px; +} +#problems-list .header, +#acknowledged-list .header { + font-weight: 800; +} +#problems-list .trigger, +#acknowledged-list .trigger { + color: #1b4e78; + font-weight: 800; +} +#problems-list .acknowledge img, +#acknowledged-list .acknowledge img { + height: 16px; +} +#acknowledged-list.hidden { + display: none; +} +#areas { + display: flex; + flex-wrap: wrap; + gap: 12px; + margin-top: 16px; +} +#areas .area .section { + display: grid; + grid-template-columns: repeat(2, min-content); + grid-gap: 8px 12px; +} +#areas .area .section .name { + color: #000; + grid-column: 1 / -1; + font-weight: bold !important; + line-height: 24px; +} +#areas .area .section div { + white-space: nowrap; +} +.hidden { + display: none; +} diff --git a/static/css/default_light/theme-default_light.css b/static/css/default_light/theme-default_light.css new file mode 100644 index 0000000..e69de29 diff --git a/static/css/default_light/theme-gruvbox.css b/static/css/default_light/theme-gruvbox.css new file mode 100644 index 0000000..e69de29 diff --git a/static/css/default_light/trigger_edit.css b/static/css/default_light/trigger_edit.css new file mode 100644 index 0000000..0ba9a92 --- /dev/null +++ b/static/css/default_light/trigger_edit.css @@ -0,0 +1,44 @@ +.widgets { + display: grid; + grid-template-columns: min-content 1fr; + gap: 8px 16px; +} +.widgets .label { + margin-top: 4px; +} +.widgets input[type="text"], +.widgets textarea { + width: 100%; +} +.widgets .datapoints { + font: "Roboto Mono", monospace; + display: grid; + grid-template-columns: min-content min-content 1fr; + gap: 6px 8px; + margin-bottom: 8px; + white-space: nowrap; +} +.widgets .datapoints .invalid { + color: #c83737; +} +.widgets .datapoints .delete img { + height: 16px; +} +.widgets .action { + display: grid; + grid-template-columns: min-content min-content 1fr; + grid-gap: 8px; +} +.widgets .action #run-result { + font-family: 'Roboto Mono', monospace; + margin-left: 16px; + padding: 16px; + background: #1b4e78; + min-height: 8em; +} +.widgets .action #run-result.ok { + color: #333; +} +.widgets .action #run-result.error { + color: #fb4934; +} diff --git a/static/css/default_light/triggers.css b/static/css/default_light/triggers.css new file mode 100644 index 0000000..0e0890f --- /dev/null +++ b/static/css/default_light/triggers.css @@ -0,0 +1,13 @@ +#areas .area .section .triggers .trigger { + display: grid; + grid-template-columns: min-content 1fr min-content; + grid-gap: 8px; + align-items: center; + margin-top: 8px; +} +#areas .area .section .triggers .trigger img { + height: 16px; +} +#areas .area .section .triggers .trigger .label { + color: inherit; +} diff --git a/static/css/gruvbox/configuration.css b/static/css/gruvbox/configuration.css new file mode 100644 index 0000000..83a9658 --- /dev/null +++ b/static/css/gruvbox/configuration.css @@ -0,0 +1,26 @@ +#areas .area > .name { + display: grid; + grid-template-columns: 1fr min-content; + grid-gap: 0px 16px; + align-items: center; + padding-left: 16px; + padding-right: 8px; +} +#areas .area > .name img { + margin-top: 3px; + margin-bottom: 4px; + height: 16px; +} +#areas .area .section.configuration { + display: grid; + grid-template-columns: 1fr min-content; + grid-gap: 0 16px; + margin-top: 8px; + margin-bottom: 8px; +} +#areas .area .section.configuration:last-child { + margin-bottom: 16px; +} +#areas .area .section.configuration img { + height: 16px; +} diff --git a/static/css/gruvbox/datapoints.css b/static/css/gruvbox/datapoints.css new file mode 100644 index 0000000..4b896e4 --- /dev/null +++ b/static/css/gruvbox/datapoints.css @@ -0,0 +1,64 @@ +#datapoints { + display: grid; + grid-template-columns: repeat(6, min-content); + grid-gap: 8px 16px; + margin-top: 16px; +} +#datapoints .group { + font-size: 1.1em; + font-weight: bold; + color: #b8bb26; + margin-top: 1.5em; + padding-bottom: 4px; +} +#datapoints h2 { + border-bottom: unset; +} +#datapoints .header { + font-weight: 800; + font-size: 0.85em; + color: #d5c4a1; +} +#datapoints div { + white-space: nowrap; + align-self: center; +} +#datapoints .icons { + display: flex; + gap: 12px; + align-items: center; +} +#datapoints img.info { + height: 20px; +} +#values { + display: grid; + grid-template-columns: repeat(2, min-content); + gap: 16px; + white-space: nowrap; +} +.widgets { + display: grid; + grid-template-columns: min-content 1fr; + gap: 8px 16px; +} +.widgets .label { + margin-top: 4px; + white-space: nowrap; +} +.widgets input[type="text"], +.widgets textarea { + width: 100%; +} +.widgets .datapoints { + display: grid; + grid-template-columns: min-content 1fr; + gap: 6px 8px; + font-family: "Roboto Mono", monospace; + margin-bottom: 8px; +} +.widgets .action { + display: grid; + grid-template-columns: min-content min-content; + grid-gap: 8px; +} diff --git a/static/css/gruvbox/default_light.css b/static/css/gruvbox/default_light.css new file mode 100644 index 0000000..d30536b --- /dev/null +++ b/static/css/gruvbox/default_light.css @@ -0,0 +1,37 @@ +.widgets .action #run-result { + background-color: #fff !important; + border: 1px solid #ccc; +} +#menu .entry .label { + color: #777 !important; +} +#menu .entry.selected .label { + color: #fff !important; +} +input[type="text"], +textarea, +select { + border: 1px solid #ccc; +} +.description { + border: 1px solid #ccc; +} +button { + background: #333; + color: #fff; + border: 1px solid #535353; +} +button:focus { + background: #333; +} +#areas .area { + background: #fff !important; + border: 1px solid #333; +} +#areas .area .name { + border-top-left-radius: unset; + border-top-right-radius: unset; +} +#areas .area .section .name { + font-weight: normal; +} diff --git a/static/css/gruvbox/gruvbox.css b/static/css/gruvbox/gruvbox.css new file mode 100644 index 0000000..e69de29 diff --git a/static/css/gruvbox/index.css b/static/css/gruvbox/index.css new file mode 100644 index 0000000..32a3a60 --- /dev/null +++ b/static/css/gruvbox/index.css @@ -0,0 +1,4 @@ +.graph { + margin-top: 192px; + border-radius: 16px; +} diff --git a/static/css/main.css b/static/css/gruvbox/main.css similarity index 96% rename from static/css/main.css rename to static/css/gruvbox/main.css index c5de4d4..8071027 100644 --- a/static/css/main.css +++ b/static/css/gruvbox/main.css @@ -12,100 +12,10 @@ html { [onClick] { cursor: pointer; } -html, -body { - margin: 0; - padding: 0; -} -body { - background: #282828; - font-family: sans-serif; - font-weight: 300; - color: #d5c4a1; - font-size: 11pt; -} -h1, -h2 { - margin-bottom: 4px; -} -h1:first-child, -h2:first-child { - margin-top: 0px; -} -h1 { - font-size: 1.5em; - color: #fb4934; - font-weight: 800; -} -h2 { - font-size: 1.25em; - color: #b8bb26; - font-weight: 800; -} -a { - color: #3f9da1; - text-decoration: none; -} -a:hover { - text-decoration: underline; -} -b { - font-weight: 800; -} -input[type="text"], -textarea, -select { - font-family: monospace; - background: #202020; - color: #d5c4a1; - padding: 4px 8px; - border: none; - font-size: 1em; - line-height: 1.5em; -} -button { - background: #202020; - color: #d5c4a1; - padding: 8px 32px; - border: 1px solid #535353; - font-size: 1em; - height: 3em; -} -button:focus { - background: #333; -} -.line { - grid-column: 1 / -1; - border-bottom: 1px solid #4e4e4e; -} -span.date { - color: #d5c4a1; - font-weight: 800; -} -span.time { - font-size: 0.9em; - color: #d5c4a1; -} -span.seconds { - display: none; -} -label { - user-select: none; -} -.description { - border: 1px solid #737373; - color: #3f9da1; - background: #202020; - padding: 4px 8px; - margin-top: 8px; - white-space: nowrap; - width: min-content; - border-radius: 8px; -} #layout { display: grid; grid-template-areas: "menu content"; - grid-template-columns: 96px 1fr; + grid-template-columns: 104px 1fr; height: 100vh; } #menu { @@ -203,3 +113,93 @@ dialog { color: #d5c4a1; box-shadow: 10px 10px 15px 0px rgba(0, 0, 0, 0.25); } +html, +body { + margin: 0; + padding: 0; +} +body { + background: #282828; + font-family: sans-serif; + font-weight: 300; + color: #d5c4a1; + font-size: 11pt; +} +h1, +h2 { + margin-bottom: 4px; +} +h1:first-child, +h2:first-child { + margin-top: 0px; +} +h1 { + font-size: 1.5em; + color: #fb4934; + font-weight: 800; +} +h2 { + font-size: 1.25em; + color: #b8bb26; + font-weight: 800; +} +a { + color: #3f9da1; + text-decoration: none; +} +a:hover { + text-decoration: underline; +} +b { + font-weight: 800; +} +input[type="text"], +textarea, +select { + font-family: monospace; + background: #282828; + color: #d5c4a1; + padding: 4px 8px; + border: 1px solid #484848; + font-size: 1em; + line-height: 1.5em; +} +button { + background: #202020; + color: #d5c4a1; + padding: 8px 32px; + border: 1px solid #535353; + font-size: 1em; + height: 3em; +} +button:focus { + background: #333; +} +.line { + grid-column: 1 / -1; + border-bottom: 1px solid #4e4e4e; +} +span.date { + color: #d5c4a1; + font-weight: 800; +} +span.time { + font-size: 0.9em; + color: #d5c4a1; +} +span.seconds { + display: none; +} +label { + user-select: none; +} +.description { + border: 1px solid #737373; + color: #3f9da1; + background: #282828; + padding: 4px 8px; + margin-top: 8px; + white-space: nowrap; + width: min-content; + border-radius: 8px; +} diff --git a/static/css/gruvbox/problems.css b/static/css/gruvbox/problems.css new file mode 100644 index 0000000..6cd6c90 --- /dev/null +++ b/static/css/gruvbox/problems.css @@ -0,0 +1,51 @@ +#problems-list, +#acknowledged-list { + display: grid; + grid-template-columns: repeat(6, min-content); + grid-gap: 4px 16px; + margin-bottom: 32px; +} +#problems-list div, +#acknowledged-list div { + white-space: nowrap; + line-height: 24px; +} +#problems-list .header, +#acknowledged-list .header { + font-weight: 800; +} +#problems-list .trigger, +#acknowledged-list .trigger { + color: #fb4934; + font-weight: 800; +} +#problems-list .acknowledge img, +#acknowledged-list .acknowledge img { + height: 16px; +} +#acknowledged-list.hidden { + display: none; +} +#areas { + display: flex; + flex-wrap: wrap; + gap: 12px; + margin-top: 16px; +} +#areas .area .section { + display: grid; + grid-template-columns: repeat(2, min-content); + grid-gap: 8px 12px; +} +#areas .area .section .name { + color: #f7edd7; + grid-column: 1 / -1; + font-weight: bold !important; + line-height: 24px; +} +#areas .area .section div { + white-space: nowrap; +} +.hidden { + display: none; +} diff --git a/static/css/gruvbox/theme-default_light.css b/static/css/gruvbox/theme-default_light.css new file mode 100644 index 0000000..e69de29 diff --git a/static/css/gruvbox/theme-gruvbox.css b/static/css/gruvbox/theme-gruvbox.css new file mode 100644 index 0000000..e69de29 diff --git a/static/css/theme.css b/static/css/gruvbox/theme.css similarity index 100% rename from static/css/theme.css rename to static/css/gruvbox/theme.css diff --git a/static/css/gruvbox/trigger_edit.css b/static/css/gruvbox/trigger_edit.css new file mode 100644 index 0000000..711dc17 --- /dev/null +++ b/static/css/gruvbox/trigger_edit.css @@ -0,0 +1,44 @@ +.widgets { + display: grid; + grid-template-columns: min-content 1fr; + gap: 8px 16px; +} +.widgets .label { + margin-top: 4px; +} +.widgets input[type="text"], +.widgets textarea { + width: 100%; +} +.widgets .datapoints { + font: "Roboto Mono", monospace; + display: grid; + grid-template-columns: min-content min-content 1fr; + gap: 6px 8px; + margin-bottom: 8px; + white-space: nowrap; +} +.widgets .datapoints .invalid { + color: #c83737; +} +.widgets .datapoints .delete img { + height: 16px; +} +.widgets .action { + display: grid; + grid-template-columns: min-content min-content 1fr; + grid-gap: 8px; +} +.widgets .action #run-result { + font-family: 'Roboto Mono', monospace; + margin-left: 16px; + padding: 16px; + background: #202020; + min-height: 8em; +} +.widgets .action #run-result.ok { + color: #d5c4a1; +} +.widgets .action #run-result.error { + color: #fb4934; +} diff --git a/static/css/gruvbox/triggers.css b/static/css/gruvbox/triggers.css new file mode 100644 index 0000000..0e0890f --- /dev/null +++ b/static/css/gruvbox/triggers.css @@ -0,0 +1,13 @@ +#areas .area .section .triggers .trigger { + display: grid; + grid-template-columns: min-content 1fr min-content; + grid-gap: 8px; + align-items: center; + margin-top: 8px; +} +#areas .area .section .triggers .trigger img { + height: 16px; +} +#areas .area .section .triggers .trigger .label { + color: inherit; +} diff --git a/static/css/index.css b/static/css/index.css deleted file mode 100644 index 5c0077f..0000000 --- a/static/css/index.css +++ /dev/null @@ -1,108 +0,0 @@ -html { - box-sizing: border-box; -} -*, -*:before, -*:after { - box-sizing: inherit; -} -*:focus { - outline: none; -} -[onClick] { - cursor: pointer; -} -html, -body { - margin: 0; - padding: 0; -} -body { - background: #282828; - font-family: sans-serif; - font-weight: 300; - color: #d5c4a1; - font-size: 11pt; -} -h1, -h2 { - margin-bottom: 4px; -} -h1:first-child, -h2:first-child { - margin-top: 0px; -} -h1 { - font-size: 1.5em; - color: #fb4934; - font-weight: 800; -} -h2 { - font-size: 1.25em; - color: #b8bb26; - font-weight: 800; -} -a { - color: #3f9da1; - text-decoration: none; -} -a:hover { - text-decoration: underline; -} -b { - font-weight: 800; -} -input[type="text"], -textarea, -select { - font-family: monospace; - background: #202020; - color: #d5c4a1; - padding: 4px 8px; - border: none; - font-size: 1em; - line-height: 1.5em; -} -button { - background: #202020; - color: #d5c4a1; - padding: 8px 32px; - border: 1px solid #535353; - font-size: 1em; - height: 3em; -} -button:focus { - background: #333; -} -.line { - grid-column: 1 / -1; - border-bottom: 1px solid #4e4e4e; -} -span.date { - color: #d5c4a1; - font-weight: 800; -} -span.time { - font-size: 0.9em; - color: #d5c4a1; -} -span.seconds { - display: none; -} -label { - user-select: none; -} -.description { - border: 1px solid #737373; - color: #3f9da1; - background: #202020; - padding: 4px 8px; - margin-top: 8px; - white-space: nowrap; - width: min-content; - border-radius: 8px; -} -.graph { - margin-top: 192px; - border-radius: 16px; -} diff --git a/static/css/problems.css b/static/css/problems.css deleted file mode 100644 index afbf302..0000000 --- a/static/css/problems.css +++ /dev/null @@ -1,155 +0,0 @@ -html { - box-sizing: border-box; -} -*, -*:before, -*:after { - box-sizing: inherit; -} -*:focus { - outline: none; -} -[onClick] { - cursor: pointer; -} -html, -body { - margin: 0; - padding: 0; -} -body { - background: #282828; - font-family: sans-serif; - font-weight: 300; - color: #d5c4a1; - font-size: 11pt; -} -h1, -h2 { - margin-bottom: 4px; -} -h1:first-child, -h2:first-child { - margin-top: 0px; -} -h1 { - font-size: 1.5em; - color: #fb4934; - font-weight: 800; -} -h2 { - font-size: 1.25em; - color: #b8bb26; - font-weight: 800; -} -a { - color: #3f9da1; - text-decoration: none; -} -a:hover { - text-decoration: underline; -} -b { - font-weight: 800; -} -input[type="text"], -textarea, -select { - font-family: monospace; - background: #202020; - color: #d5c4a1; - padding: 4px 8px; - border: none; - font-size: 1em; - line-height: 1.5em; -} -button { - background: #202020; - color: #d5c4a1; - padding: 8px 32px; - border: 1px solid #535353; - font-size: 1em; - height: 3em; -} -button:focus { - background: #333; -} -.line { - grid-column: 1 / -1; - border-bottom: 1px solid #4e4e4e; -} -span.date { - color: #d5c4a1; - font-weight: 800; -} -span.time { - font-size: 0.9em; - color: #d5c4a1; -} -span.seconds { - display: none; -} -label { - user-select: none; -} -.description { - border: 1px solid #737373; - color: #3f9da1; - background: #202020; - padding: 4px 8px; - margin-top: 8px; - white-space: nowrap; - width: min-content; - border-radius: 8px; -} -#problems-list, -#acknowledged-list { - display: grid; - grid-template-columns: repeat(6, min-content); - grid-gap: 4px 16px; - margin-bottom: 32px; -} -#problems-list div, -#acknowledged-list div { - white-space: nowrap; - line-height: 24px; -} -#problems-list .header, -#acknowledged-list .header { - font-weight: 800; -} -#problems-list .trigger, -#acknowledged-list .trigger { - color: #fb4934; - font-weight: 800; -} -#problems-list .acknowledge img, -#acknowledged-list .acknowledge img { - height: 16px; -} -#acknowledged-list.hidden { - display: none; -} -#areas { - display: flex; - flex-wrap: wrap; - gap: 12px; - margin-top: 16px; -} -#areas .area .section { - display: grid; - grid-template-columns: repeat(2, min-content); - grid-gap: 8px 12px; -} -#areas .area .section .name { - color: #f7edd7; - grid-column: 1 / -1; - font-weight: bold !important; - line-height: 24px; -} -#areas .area .section div { - white-space: nowrap; -} -.hidden { - display: none; -} diff --git a/static/css/trigger_edit.css b/static/css/trigger_edit.css deleted file mode 100644 index 070964d..0000000 --- a/static/css/trigger_edit.css +++ /dev/null @@ -1,148 +0,0 @@ -html { - box-sizing: border-box; -} -*, -*:before, -*:after { - box-sizing: inherit; -} -*:focus { - outline: none; -} -[onClick] { - cursor: pointer; -} -html, -body { - margin: 0; - padding: 0; -} -body { - background: #282828; - font-family: sans-serif; - font-weight: 300; - color: #d5c4a1; - font-size: 11pt; -} -h1, -h2 { - margin-bottom: 4px; -} -h1:first-child, -h2:first-child { - margin-top: 0px; -} -h1 { - font-size: 1.5em; - color: #fb4934; - font-weight: 800; -} -h2 { - font-size: 1.25em; - color: #b8bb26; - font-weight: 800; -} -a { - color: #3f9da1; - text-decoration: none; -} -a:hover { - text-decoration: underline; -} -b { - font-weight: 800; -} -input[type="text"], -textarea, -select { - font-family: monospace; - background: #202020; - color: #d5c4a1; - padding: 4px 8px; - border: none; - font-size: 1em; - line-height: 1.5em; -} -button { - background: #202020; - color: #d5c4a1; - padding: 8px 32px; - border: 1px solid #535353; - font-size: 1em; - height: 3em; -} -button:focus { - background: #333; -} -.line { - grid-column: 1 / -1; - border-bottom: 1px solid #4e4e4e; -} -span.date { - color: #d5c4a1; - font-weight: 800; -} -span.time { - font-size: 0.9em; - color: #d5c4a1; -} -span.seconds { - display: none; -} -label { - user-select: none; -} -.description { - border: 1px solid #737373; - color: #3f9da1; - background: #202020; - padding: 4px 8px; - margin-top: 8px; - white-space: nowrap; - width: min-content; - border-radius: 8px; -} -.widgets { - display: grid; - grid-template-columns: min-content 1fr; - gap: 8px 16px; -} -.widgets .label { - margin-top: 4px; -} -.widgets input[type="text"], -.widgets textarea { - width: 100%; -} -.widgets .datapoints { - font: "Roboto Mono", monospace; - display: grid; - grid-template-columns: min-content min-content 1fr; - gap: 6px 8px; - margin-bottom: 8px; - white-space: nowrap; -} -.widgets .datapoints .invalid { - color: #c83737; -} -.widgets .datapoints .delete img { - height: 16px; -} -.widgets .action { - display: grid; - grid-template-columns: min-content min-content 1fr; - grid-gap: 8px; -} -.widgets .action #run-result { - font-family: 'Roboto Mono', monospace; - margin-left: 16px; - padding: 16px; - background: #202020; - min-height: 8em; -} -.widgets .action #run-result.ok { - color: #d5c4a1; -} -.widgets .action #run-result.error { - color: #fb4934; -} diff --git a/static/css/triggers.css b/static/css/triggers.css deleted file mode 100644 index 352428d..0000000 --- a/static/css/triggers.css +++ /dev/null @@ -1,117 +0,0 @@ -html { - box-sizing: border-box; -} -*, -*:before, -*:after { - box-sizing: inherit; -} -*:focus { - outline: none; -} -[onClick] { - cursor: pointer; -} -html, -body { - margin: 0; - padding: 0; -} -body { - background: #282828; - font-family: sans-serif; - font-weight: 300; - color: #d5c4a1; - font-size: 11pt; -} -h1, -h2 { - margin-bottom: 4px; -} -h1:first-child, -h2:first-child { - margin-top: 0px; -} -h1 { - font-size: 1.5em; - color: #fb4934; - font-weight: 800; -} -h2 { - font-size: 1.25em; - color: #b8bb26; - font-weight: 800; -} -a { - color: #3f9da1; - text-decoration: none; -} -a:hover { - text-decoration: underline; -} -b { - font-weight: 800; -} -input[type="text"], -textarea, -select { - font-family: monospace; - background: #202020; - color: #d5c4a1; - padding: 4px 8px; - border: none; - font-size: 1em; - line-height: 1.5em; -} -button { - background: #202020; - color: #d5c4a1; - padding: 8px 32px; - border: 1px solid #535353; - font-size: 1em; - height: 3em; -} -button:focus { - background: #333; -} -.line { - grid-column: 1 / -1; - border-bottom: 1px solid #4e4e4e; -} -span.date { - color: #d5c4a1; - font-weight: 800; -} -span.time { - font-size: 0.9em; - color: #d5c4a1; -} -span.seconds { - display: none; -} -label { - user-select: none; -} -.description { - border: 1px solid #737373; - color: #3f9da1; - background: #202020; - padding: 4px 8px; - margin-top: 8px; - white-space: nowrap; - width: min-content; - border-radius: 8px; -} -#areas .area .section .triggers .trigger { - display: grid; - grid-template-columns: min-content 1fr min-content; - grid-gap: 8px; - align-items: center; - margin-top: 8px; -} -#areas .area .section .triggers .trigger img { - height: 16px; -} -#areas .area .section .triggers .trigger .label { - color: inherit; -} diff --git a/static/images/default_light/acknowledge-filled.svg b/static/images/default_light/acknowledge-filled.svg new file mode 120000 index 0000000..a0ab2cc --- /dev/null +++ b/static/images/default_light/acknowledge-filled.svg @@ -0,0 +1 @@ +../acknowledge-filled.svg \ No newline at end of file diff --git a/static/images/default_light/acknowledge-outline.svg b/static/images/default_light/acknowledge-outline.svg new file mode 120000 index 0000000..8c2311e --- /dev/null +++ b/static/images/default_light/acknowledge-outline.svg @@ -0,0 +1 @@ +../acknowledge-outline.svg \ No newline at end of file diff --git a/static/images/default_light/acknowledge.svg b/static/images/default_light/acknowledge.svg new file mode 120000 index 0000000..b168727 --- /dev/null +++ b/static/images/default_light/acknowledge.svg @@ -0,0 +1 @@ +../acknowledge.svg \ No newline at end of file diff --git a/static/images/default_light/configuration.svg b/static/images/default_light/configuration.svg new file mode 100644 index 0000000..b7430d2 --- /dev/null +++ b/static/images/default_light/configuration.svg @@ -0,0 +1,69 @@ + + + + + + + + + + image/svg+xml + + + + + + cog + cog-outline + + + diff --git a/static/images/default_light/configuration_selected.svg b/static/images/default_light/configuration_selected.svg new file mode 100644 index 0000000..d76911c --- /dev/null +++ b/static/images/default_light/configuration_selected.svg @@ -0,0 +1,67 @@ + + + + + + + + + + image/svg+xml + + + + + + cog + + + diff --git a/static/images/default_light/datapoints.svg b/static/images/default_light/datapoints.svg new file mode 100644 index 0000000..ec437db --- /dev/null +++ b/static/images/default_light/datapoints.svg @@ -0,0 +1,76 @@ + + + + + + + + file-chart + chart-timeline-variant + + + + + + + diff --git a/static/images/default_light/datapoints_selected.svg b/static/images/default_light/datapoints_selected.svg new file mode 100644 index 0000000..fdb858d --- /dev/null +++ b/static/images/default_light/datapoints_selected.svg @@ -0,0 +1,80 @@ + + + + + + + + file-chart + chart-timeline-variant + + + + + + + + diff --git a/static/images/default_light/delete.svg b/static/images/default_light/delete.svg new file mode 120000 index 0000000..e08e9df --- /dev/null +++ b/static/images/default_light/delete.svg @@ -0,0 +1 @@ +../delete.svg \ No newline at end of file diff --git a/static/images/default_light/delete_white.svg b/static/images/default_light/delete_white.svg new file mode 120000 index 0000000..4a1a536 --- /dev/null +++ b/static/images/default_light/delete_white.svg @@ -0,0 +1 @@ +../delete_white.svg \ No newline at end of file diff --git a/static/images/default_light/graph.drawio b/static/images/default_light/graph.drawio new file mode 120000 index 0000000..2d35e0f --- /dev/null +++ b/static/images/default_light/graph.drawio @@ -0,0 +1 @@ +../graph.drawio \ No newline at end of file diff --git a/static/images/default_light/graph.svg b/static/images/default_light/graph.svg new file mode 120000 index 0000000..4590ffb --- /dev/null +++ b/static/images/default_light/graph.svg @@ -0,0 +1 @@ +../graph.svg \ No newline at end of file diff --git a/static/images/default_light/info-filled.svg b/static/images/default_light/info-filled.svg new file mode 120000 index 0000000..dbbeefa --- /dev/null +++ b/static/images/default_light/info-filled.svg @@ -0,0 +1 @@ +../info-filled.svg \ No newline at end of file diff --git a/static/images/default_light/info-outline.svg b/static/images/default_light/info-outline.svg new file mode 120000 index 0000000..bdbc69f --- /dev/null +++ b/static/images/default_light/info-outline.svg @@ -0,0 +1 @@ +../info-outline.svg \ No newline at end of file diff --git a/static/images/default_light/logo.svg b/static/images/default_light/logo.svg new file mode 100644 index 0000000..a15846a --- /dev/null +++ b/static/images/default_light/logo.svg @@ -0,0 +1,73 @@ + + + + + + + + + + image/svg+xml + + + + + + alert-octagram + alert-octagram-outline + database-alert + database-alert-outline + + + diff --git a/static/images/default_light/logo_selected.svg b/static/images/default_light/logo_selected.svg new file mode 100644 index 0000000..b60f69c --- /dev/null +++ b/static/images/default_light/logo_selected.svg @@ -0,0 +1,71 @@ + + + + + + + + + + image/svg+xml + + + + + + alert-octagram + alert-octagram-outline + database-alert + + + diff --git a/static/images/default_light/problems.svg b/static/images/default_light/problems.svg new file mode 100644 index 0000000..04f5282 --- /dev/null +++ b/static/images/default_light/problems.svg @@ -0,0 +1,69 @@ + + + + + + + + + + image/svg+xml + + + + + + alert-octagram + alert-octagram-outline + + + diff --git a/static/images/default_light/problems_selected.svg b/static/images/default_light/problems_selected.svg new file mode 100644 index 0000000..32283c5 --- /dev/null +++ b/static/images/default_light/problems_selected.svg @@ -0,0 +1,67 @@ + + + + + + + + + + image/svg+xml + + + + + + alert-octagram + + + diff --git a/static/images/default_light/triggers.svg b/static/images/default_light/triggers.svg new file mode 100644 index 0000000..76542fe --- /dev/null +++ b/static/images/default_light/triggers.svg @@ -0,0 +1,71 @@ + + + + + + + + + + image/svg+xml + + + + + + script-text + script-text-outline + calculator-variant-outline + + + diff --git a/static/images/default_light/triggers_selected.svg b/static/images/default_light/triggers_selected.svg new file mode 100644 index 0000000..59d9a72 --- /dev/null +++ b/static/images/default_light/triggers_selected.svg @@ -0,0 +1,69 @@ + + + + + + + + + + image/svg+xml + + + + + + script-text + calculator-variant + + + diff --git a/static/images/default_light/values.svg b/static/images/default_light/values.svg new file mode 120000 index 0000000..6b56d01 --- /dev/null +++ b/static/images/default_light/values.svg @@ -0,0 +1 @@ +../values.svg \ No newline at end of file diff --git a/static/images/gruvbox/acknowledge-filled.svg b/static/images/gruvbox/acknowledge-filled.svg new file mode 120000 index 0000000..a0ab2cc --- /dev/null +++ b/static/images/gruvbox/acknowledge-filled.svg @@ -0,0 +1 @@ +../acknowledge-filled.svg \ No newline at end of file diff --git a/static/images/gruvbox/acknowledge-outline.svg b/static/images/gruvbox/acknowledge-outline.svg new file mode 120000 index 0000000..8c2311e --- /dev/null +++ b/static/images/gruvbox/acknowledge-outline.svg @@ -0,0 +1 @@ +../acknowledge-outline.svg \ No newline at end of file diff --git a/static/images/gruvbox/acknowledge.svg b/static/images/gruvbox/acknowledge.svg new file mode 120000 index 0000000..b168727 --- /dev/null +++ b/static/images/gruvbox/acknowledge.svg @@ -0,0 +1 @@ +../acknowledge.svg \ No newline at end of file diff --git a/static/images/gruvbox/configuration.svg b/static/images/gruvbox/configuration.svg new file mode 120000 index 0000000..4e1aa6a --- /dev/null +++ b/static/images/gruvbox/configuration.svg @@ -0,0 +1 @@ +../configuration.svg \ No newline at end of file diff --git a/static/images/gruvbox/configuration_selected.svg b/static/images/gruvbox/configuration_selected.svg new file mode 120000 index 0000000..027e0f1 --- /dev/null +++ b/static/images/gruvbox/configuration_selected.svg @@ -0,0 +1 @@ +../configuration_selected.svg \ No newline at end of file diff --git a/static/images/gruvbox/datapoints.svg b/static/images/gruvbox/datapoints.svg new file mode 120000 index 0000000..e8426db --- /dev/null +++ b/static/images/gruvbox/datapoints.svg @@ -0,0 +1 @@ +../datapoints.svg \ No newline at end of file diff --git a/static/images/gruvbox/datapoints_selected.svg b/static/images/gruvbox/datapoints_selected.svg new file mode 120000 index 0000000..1fcbab5 --- /dev/null +++ b/static/images/gruvbox/datapoints_selected.svg @@ -0,0 +1 @@ +../datapoints_selected.svg \ No newline at end of file diff --git a/static/images/gruvbox/delete.svg b/static/images/gruvbox/delete.svg new file mode 120000 index 0000000..e08e9df --- /dev/null +++ b/static/images/gruvbox/delete.svg @@ -0,0 +1 @@ +../delete.svg \ No newline at end of file diff --git a/static/images/gruvbox/delete_white.svg b/static/images/gruvbox/delete_white.svg new file mode 120000 index 0000000..4a1a536 --- /dev/null +++ b/static/images/gruvbox/delete_white.svg @@ -0,0 +1 @@ +../delete_white.svg \ No newline at end of file diff --git a/static/images/gruvbox/graph.drawio b/static/images/gruvbox/graph.drawio new file mode 120000 index 0000000..2d35e0f --- /dev/null +++ b/static/images/gruvbox/graph.drawio @@ -0,0 +1 @@ +../graph.drawio \ No newline at end of file diff --git a/static/images/gruvbox/graph.svg b/static/images/gruvbox/graph.svg new file mode 120000 index 0000000..4590ffb --- /dev/null +++ b/static/images/gruvbox/graph.svg @@ -0,0 +1 @@ +../graph.svg \ No newline at end of file diff --git a/static/images/gruvbox/info-filled.svg b/static/images/gruvbox/info-filled.svg new file mode 120000 index 0000000..dbbeefa --- /dev/null +++ b/static/images/gruvbox/info-filled.svg @@ -0,0 +1 @@ +../info-filled.svg \ No newline at end of file diff --git a/static/images/gruvbox/info-outline.svg b/static/images/gruvbox/info-outline.svg new file mode 120000 index 0000000..bdbc69f --- /dev/null +++ b/static/images/gruvbox/info-outline.svg @@ -0,0 +1 @@ +../info-outline.svg \ No newline at end of file diff --git a/static/images/gruvbox/logo.svg b/static/images/gruvbox/logo.svg new file mode 120000 index 0000000..b70ce76 --- /dev/null +++ b/static/images/gruvbox/logo.svg @@ -0,0 +1 @@ +../logo.svg \ No newline at end of file diff --git a/static/images/gruvbox/logo_selected.svg b/static/images/gruvbox/logo_selected.svg new file mode 120000 index 0000000..91070fc --- /dev/null +++ b/static/images/gruvbox/logo_selected.svg @@ -0,0 +1 @@ +../logo_selected.svg \ No newline at end of file diff --git a/static/images/gruvbox/problems.svg b/static/images/gruvbox/problems.svg new file mode 120000 index 0000000..d7b581e --- /dev/null +++ b/static/images/gruvbox/problems.svg @@ -0,0 +1 @@ +../problems.svg \ No newline at end of file diff --git a/static/images/gruvbox/problems_selected.svg b/static/images/gruvbox/problems_selected.svg new file mode 120000 index 0000000..7bf99c0 --- /dev/null +++ b/static/images/gruvbox/problems_selected.svg @@ -0,0 +1 @@ +../problems_selected.svg \ No newline at end of file diff --git a/static/images/gruvbox/triggers.svg b/static/images/gruvbox/triggers.svg new file mode 120000 index 0000000..a347e36 --- /dev/null +++ b/static/images/gruvbox/triggers.svg @@ -0,0 +1 @@ +../triggers.svg \ No newline at end of file diff --git a/static/images/gruvbox/triggers_selected.svg b/static/images/gruvbox/triggers_selected.svg new file mode 120000 index 0000000..3b99184 --- /dev/null +++ b/static/images/gruvbox/triggers_selected.svg @@ -0,0 +1 @@ +../triggers_selected.svg \ No newline at end of file diff --git a/static/images/gruvbox/values.svg b/static/images/gruvbox/values.svg new file mode 120000 index 0000000..6b56d01 --- /dev/null +++ b/static/images/gruvbox/values.svg @@ -0,0 +1 @@ +../values.svg \ No newline at end of file diff --git a/static/less/Makefile b/static/less/Makefile index 7e91a05..4d60bca 100644 --- a/static/less/Makefile +++ b/static/less/Makefile @@ -1,9 +1,9 @@ less = $(wildcard *.less) _css = $(less:.less=.css) -css = $(addprefix ../css/, $(_css) ) +css = $(addprefix ../css/${THEME}/, $(_css) ) -../css/%.css: %.less theme.less - lessc $< ../css/$@ +../css/${THEME}/%.css: %.less theme-${THEME}.less + lessc --global-var="THEME=${THEME}" $< $@ all: $(css) diff --git a/static/less/configuration.less b/static/less/configuration.less index 8c59755..33a8323 100644 --- a/static/less/configuration.less +++ b/static/less/configuration.less @@ -1,4 +1,4 @@ -@import 'theme.less'; +@import 'theme-@{THEME}.less'; #areas { .area { diff --git a/static/less/datapoints.less b/static/less/datapoints.less index 8ecc09a..878623d 100644 --- a/static/less/datapoints.less +++ b/static/less/datapoints.less @@ -1,4 +1,4 @@ -@import "theme.less"; +@import "theme-@{THEME}.less"; #datapoints { display: grid; diff --git a/static/less/default_light.less b/static/less/default_light.less new file mode 100644 index 0000000..8afa131 --- /dev/null +++ b/static/less/default_light.less @@ -0,0 +1,53 @@ +@import "theme-@{THEME}.less"; + +.widgets { + .action { + #run-result { + background-color: #fff !important; + border: 1px solid #ccc; + } + } +} + +#menu .entry .label { + color: @text3 !important; +} + +#menu .entry.selected .label { + color: #fff !important; +} + +input[type="text"], +textarea, +select { + border: 1px solid #ccc; +} + +.description { + border: 1px solid #ccc; +} + +button { + background: @bg3; + color: #fff; + border: 1px solid lighten(@bg2, 20%); + &:focus { + background: @bg3; + } +} + +#areas { + .area { + background: #fff !important; + border: 1px solid @bg3; + + .name { + border-top-left-radius: unset; + border-top-right-radius: unset; + } + + .section .name { + font-weight: normal; + } + } +} diff --git a/static/less/gruvbox.less b/static/less/gruvbox.less new file mode 100644 index 0000000..f369797 --- /dev/null +++ b/static/less/gruvbox.less @@ -0,0 +1 @@ +@import "theme-@{THEME}.less"; diff --git a/static/less/index.less b/static/less/index.less index 97eb0bb..015fe1e 100644 --- a/static/less/index.less +++ b/static/less/index.less @@ -1,4 +1,4 @@ -@import "theme.less"; +@import "theme-@{THEME}.less"; .graph { margin-top: 192px; diff --git a/static/less/loop_make.sh b/static/less/loop_make.sh index 0aceed7..afae519 100755 --- a/static/less/loop_make.sh +++ b/static/less/loop_make.sh @@ -6,10 +6,15 @@ do inotifywait -q -e MODIFY *less #sleep 0.5 clear - if make -j12; then - echo -e "\n\e[32;1mOK!\e[0m" - #curl -s http://notes.lan:1371/_ws/css_update - sleep 1 - clear - fi + + for THEME in $(ls theme-*.less | sed -e 's/^theme-\(.*\)\.less$/\1/'); do + if make -j12; then + : + #curl -s http://notes.lan:1371/_ws/css_update + fi + done + echo -e "\n\e[32;1mOK!\e[0m" + sleep 1 + clear + done diff --git a/static/less/main.less b/static/less/main.less index d04e244..17ad78c 100644 --- a/static/less/main.less +++ b/static/less/main.less @@ -1,9 +1,27 @@ -@import "theme.less"; +@import "theme-@{THEME}.less"; + +html { + box-sizing: border-box; +} + +*, +*:before, +*:after { + box-sizing: inherit; +} + +*:focus { + outline: none; +} + +[onClick] { + cursor: pointer; +} #layout { display: grid; grid-template-areas: "menu content"; - grid-template-columns: 96px 1fr; + grid-template-columns: 104px 1fr; height: 100vh; } @@ -30,7 +48,7 @@ 16px ; padding: 16px; - color: #777; + color: @text3; text-decoration: none; img { @@ -122,3 +140,110 @@ dialog { color: @text1; box-shadow: 10px 10px 15px 0px rgba(0, 0, 0, 0.25); } + +html, +body { + margin: 0; + padding: 0; +} + +body { + background: @bg1; + font-family: sans-serif; + font-weight: 300; + color: @text1; + font-size: 11pt; +} + +h1, +h2 { + margin-bottom: 4px; + &:first-child { + margin-top: 0px; + } +} + +h1 { + font-size: 1.5em; + color: @color1; + font-weight: @bold; +} + +h2 { + font-size: 1.25em; + color: @color3; + font-weight: @bold; +} + +a { + color: @color4; + text-decoration: none; + + &:hover { + text-decoration: underline; + } +} + +b { + font-weight: @bold; +} + +input[type="text"], +textarea, +select { + font-family: monospace; + background: @bg1; + color: @text1; + padding: 4px 8px; + border: 1px solid #484848; + font-size: 1em; + line-height: 1.5em; // fix for chrome hiding underscores +} + +button { + background: @bg2; + color: @text1; + padding: 8px 32px; + border: 1px solid lighten(@bg2, 20%); + font-size: 1em; + height: 3em; + + &:focus { + background: @bg3; + } +} + +.line { + grid-column: 1 / -1; + border-bottom: 1px solid .lighterOrDarker(@bg1, 15%)[@result]; +} + +span.date { + color: @text1; + font-weight: @bold; +} + +span.time { + font-size: 0.9em; + color: @text1; +} + +span.seconds { + display: none; +} + +label { + user-select: none; +} + +.description { + border: 1px solid .lighterOrDarker(@bg3, 25%)[@result]; + color: @color4; + background: @bg1; + padding: 4px 8px; + margin-top: 8px; + white-space: nowrap; + width: min-content; + border-radius: 8px; +} + diff --git a/static/less/problems.less b/static/less/problems.less index a6b6551..29caf1f 100644 --- a/static/less/problems.less +++ b/static/less/problems.less @@ -1,4 +1,4 @@ -@import "theme.less"; +@import "theme-@{THEME}.less"; #problems-list, #acknowledged-list { display: grid; diff --git a/static/less/theme-default_light.less b/static/less/theme-default_light.less new file mode 100644 index 0000000..36dca3d --- /dev/null +++ b/static/less/theme-default_light.less @@ -0,0 +1,20 @@ +@bg1: #fff; +@bg2: #1b4e78; +@bg3: #2979b8; + +@text1: #333; +@text2: #000; +@text3: #7bb8eb; + +@error: #fb4934; +@color1: #1b4e78; +@color2: #fabd2f; +@color3: #2c6e97; +@color4: #2c6e97; +@color5: #fe8019; + +@bold: 800; + +.lighterOrDarker(@color, @amount) { + @result: darken(@color, @amount); +} diff --git a/static/less/theme-gruvbox.less b/static/less/theme-gruvbox.less new file mode 100644 index 0000000..5df450d --- /dev/null +++ b/static/less/theme-gruvbox.less @@ -0,0 +1,20 @@ +@bg1: #282828; +@bg2: #202020; +@bg3: #333; + +@text1: #d5c4a1; +@text2: #f7edd7; +@text3: #777; + +@error: #fb4934; +@color1: #fb4934; +@color2: #fabd2f; +@color3: #b8bb26; +@color4: #3f9da1; +@color5: #fe8019; + +@bold: 800; + +.lighterOrDarker(@color, @amount) { + @result: lighten(@color, @amount); +} diff --git a/static/less/theme.less b/static/less/theme.less deleted file mode 100644 index 9a27b23..0000000 --- a/static/less/theme.less +++ /dev/null @@ -1,143 +0,0 @@ -@bg1: #282828; -@bg2: #202020; -@bg3: #333; - -@text1: #d5c4a1; -@text2: #f7edd7; - -@error: #fb4934; -@color1: #fb4934; -@color2: #fabd2f; -@color3: #b8bb26; -@color4: #3f9da1; -@color5: #fe8019; - -@bold: 800; - -.lighterOrDarker(@color, @amount) { - @result: lighten(@color, @amount); -} - -html { - box-sizing: border-box; -} - -*, -*:before, -*:after { - box-sizing: inherit; -} - -*:focus { - outline: none; -} - -[onClick] { - cursor: pointer; -} - -html, -body { - margin: 0; - padding: 0; -} - -body { - background: @bg1; - font-family: sans-serif; - font-weight: 300; - color: @text1; - font-size: 11pt; -} - -h1, -h2 { - margin-bottom: 4px; - &:first-child { - margin-top: 0px; - } -} - -h1 { - font-size: 1.5em; - color: @color1; - font-weight: @bold; -} - -h2 { - font-size: 1.25em; - color: @color3; - font-weight: @bold; -} - -a { - color: @color4; - text-decoration: none; - - &:hover { - text-decoration: underline; - } -} - -b { - font-weight: @bold; -} - -input[type="text"], -textarea, -select { - font-family: monospace; - background: @bg2; - color: @text1; - padding: 4px 8px; - border: none; - font-size: 1em; - line-height: 1.5em; // fix for chrome hiding underscores -} - -button { - background: @bg2; - color: @text1; - padding: 8px 32px; - border: 1px solid lighten(@bg2, 20%); - font-size: 1em; - height: 3em; - - &:focus { - background: @bg3; - } -} - -.line { - grid-column: 1 / -1; - border-bottom: 1px solid .lighterOrDarker(@bg1, 15%)[@result]; -} - -span.date { - color: @text1; - font-weight: @bold; -} - -span.time { - font-size: 0.9em; - color: @text1; -} - -span.seconds { - display: none; -} - -label { - user-select: none; -} - -.description { - border: 1px solid .lighterOrDarker(@bg3, 25%)[@result]; - color: @color4; - background: @bg2; - padding: 4px 8px; - margin-top: 8px; - white-space: nowrap; - width: min-content; - border-radius: 8px; -} diff --git a/static/less/trigger_edit.less b/static/less/trigger_edit.less index 8e48ed9..4e3f0e2 100644 --- a/static/less/trigger_edit.less +++ b/static/less/trigger_edit.less @@ -1,4 +1,4 @@ -@import "theme.less"; +@import "theme-@{THEME}.less"; #dlg-datapoints { } diff --git a/static/less/triggers.less b/static/less/triggers.less index 9fecbe5..b83dfa2 100644 --- a/static/less/triggers.less +++ b/static/less/triggers.less @@ -1,4 +1,4 @@ -@import 'theme.less'; +@import 'theme-@{THEME}.less'; #areas { diff --git a/views/components/menu.gotmpl b/views/components/menu.gotmpl index f00b4d6..c0c1ddf 100644 --- a/views/components/menu.gotmpl +++ b/views/components/menu.gotmpl @@ -2,35 +2,35 @@