Theming support

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;
+}