Initial commit

static/less/Makefile

@@ -0,0 +1,11 @@
+less = $(wildcard *.less)
+_css  = $(less:.less=.css)
+css  = $(addprefix ../css/, $(_css) )
+
+../css/%.css: %.less theme.less
+	lessc $< ../css/$@
+
+all: $(css)
+
+clean:
+	rm -vf $(css)

static/less/loop_make.sh

@@ -0,0 +1,15 @@
+#!/bin/bash
+
+while true
+do
+	# inotifywait -q -e MOVE_SELF *less
+	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
+done

static/less/main.less

@@ -0,0 +1,102 @@
+@import "theme.less";
+
+#layout {
+	display: grid;
+	grid-template-areas: "menu content";
+	grid-template-columns: 64px 1fr;
+	grid-template-rows:
+		100% 100%;
+	height: 100vh;
+}
+
+#menu {
+	display: flex;
+	flex-flow: column wrap;
+	justify-content: flex-start;
+	gap: 24px;
+
+	grid-area: menu;
+	background: @bg2;
+	padding: 16px;
+
+	img {
+		display: block;
+		width: 32px;
+	}
+}
+
+#page {
+	grid-area: content;
+	padding: 32px;
+
+	.page-label {
+		display: grid;
+		grid-template-columns: min-content 1fr;
+		grid-gap: 12px;
+		align-items: center;
+		margin-bottom: 32px;
+
+		div {
+			font-size: 1.5em;
+			color: @color1;
+		}
+
+		img {
+			display: block;
+		}
+	}
+}
+
+
+#areas {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 12px;
+	margin-top: 16px;
+
+	.area {
+		background: @bg3;
+		border-radius: 4px;
+
+		&>.name {
+			background: @color1;
+			color: #fff;
+			font-weight: bold;
+			padding: 4px 16px;
+			border-top-left-radius: 4px;
+			border-top-right-radius: 4px;
+		}
+
+		.section {
+			margin: 8px 16px;
+
+			&>.name {
+				font-weight: bold;
+			}
+
+			.triggers {
+
+				a {
+					color: inherit;
+					text-decoration: none;
+				}
+
+				.trigger {
+					display: grid;
+					grid-template-columns: min-content 1fr;
+					grid-gap: 8px;
+					align-items: center;
+					margin-top: 8px;
+
+					img {
+						height: 16px;
+					}
+
+					.label {
+						color: @text2;
+					}
+				}
+			}
+		}
+	}
+}

static/less/theme.less

@@ -0,0 +1,82 @@
+@bg1: #282828;
+@bg2: #202020;
+@bg3: #333;
+
+@text1: #d5c4a1;
+@text2: #f7edd7;
+
+@error: #fb4934;
+@color1: #fb4934;
+
+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: "Roboto", sans-serif;
+	color: @text1;
+	font-size: 11pt;
+}
+
+h1, h2 {
+	margin-top: 0px;
+	margin-bottom: 4px;
+}
+
+h1 {
+	font-size: 1.5em;
+	color: @color1;
+}
+
+h2 {
+	font-size: 1.25em;
+}
+
+.roboto-light {
+	font-family: "Roboto", sans-serif;
+	font-weight: 300;
+	font-style: normal;
+}
+
+.roboto-medium {
+	font-family: "Roboto", sans-serif;
+	font-weight: 500;
+	font-style: normal;
+}
+
+input[type="text"], textarea {
+	font-family: "Roboto Mono", monospace;
+	background: @bg2;
+	color: @text1;
+	padding: 4px 8px;
+	border: none;
+	font-size: 1em;
+}
+
+button {
+	background: @bg2;
+	color: @text1;
+	padding: 8px 32px;
+	border: 1px solid lighten(@bg2, 10%);
+	font-size: 1em;
+	height: 3em;
+}

static/less/trigger_edit.less

@@ -0,0 +1,45 @@
+@import "theme.less";
+
+.widgets {
+	display: grid;
+	grid-template-columns: min-content 1fr;
+	gap: 8px 16px;
+
+	.label {
+		margin-top: 4px;
+	}
+
+	input[type="text"], textarea {
+		width: 100%;
+	}
+
+	.datapoints {
+		font: "Roboto Mono", monospace;
+		display: grid;
+		grid-template-columns: min-content 1fr;
+		gap: 6px 8px;
+		margin-bottom: 8px;
+	}
+
+	.action {
+		display: grid;
+		grid-template-columns: min-content min-content 1fr;
+		grid-gap: 8px;
+
+		#run-result {
+			font-family: 'Roboto Mono', monospace;
+			margin-left: 16px;
+			padding: 16px;
+			background: @bg2;
+			min-height: 8em;
+
+			&.ok {
+				color: @text1;
+			}
+
+			&.error {
+				color: @error;
+			}
+		}
+	}
+}