Added area deletion

static/css/configuration.css

@@ -0,0 +1,130 @@
+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;
+}

static/css/main.css

@@ -182,10 +182,6 @@ label {
   margin-top: 12px;
   margin-bottom: 20px;
 }
-#areas .area .section.configuration {
-  margin-top: 8px;
-  margin-bottom: 8px;
-}
 #areas .area .section:last-child {
   margin-bottom: 12px;
 }