switch to scss for css, begin refactoring old css into scss, add bulma 0.9.1 to repo

viewer/static/main.scss

@@ -0,0 +1,155 @@
+@charset "utf-8";
+
+$body-background-color: #92e1ff;
+$background: #0a556d;
+$code-background: #bcf6ff;
+$code: #033343;
+
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;800&display=swap');
+@import "./bulma/bulma.sass";
+
+html, body {
+  height: 100%
+}
+
+
+.panel {
+  background-color: #0a556d;
+
+  .panel-heading {
+    background-color: #17a0cd;
+    color: white;
+  }
+}
+
+.panel-block:not(:last-child), .panel-tabs:not(:last-child) {
+  border-bottom-color: #0b87ac;
+}
+
+.tag:not(body).is-info {
+  background-color: #37a0bf;
+}
+
+.panel-block a {
+  color: #ffffff;
+}
+
+.panel-icon, .icon {
+  color: #11a3cf;
+
+  a {
+
+  }
+}
+
+.icon a {
+  /*color: inherit;*/
+}
+
+.navbar {
+  background-color: #0c5167;
+  color: white;
+  font-family: 'Open Sans', sans-serif;
+
+  .navbar-brand .navbar-item {
+    color: white;
+    font-size: 150%;
+    font-weight: 700;
+
+    &:focus, &:hover {
+      text-decoration: none;
+      color: inherit;
+    }
+  }
+}
+
+
+.navbar-link.is-active, .navbar-link:focus, .navbar-link:focus-within, .navbar-link:hover, a.navbar-item.is-active, a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover {
+  background-color: inherit;
+  color: inherit;
+}
+
+
+.card-header {
+  background-color: #17a0cd;
+}
+
+.card {
+  background-color: #0a556d;
+  color: white;
+
+  .card-footer {
+    border-top-color: rgba(207, 245, 255, 0.5);
+
+    .card-footer-item {
+      background-color: #0c6988;
+
+      &:not(:last-child) {
+        border-right-color: rgba(207, 245, 255, 0.5);
+      }
+    }
+  }
+}
+
+a {
+  color: #38c8f8;
+
+  &:hover {
+    color: #a4e6ff;
+  }
+}
+
+.checkbox {
+  color: white;
+}
+
+.checkbox:hover {
+  color: #a4e6ff;
+}
+
+a.card-footer-item {
+  color: #c9f2ff;
+}
+
+a.card-footer-item:hover {
+  color: white;
+}
+
+.navbar-item, p, .label, .card-header-title {
+  color: white;
+}
+
+.media + .media {
+  border-top-color: rgba(164, 230, 255, 0.5);
+}
+
+#browse.card .card-content {
+  padding: 0;
+}
+
+.content .media {
+  padding: 0 0.5rem;
+}
+
+.card .media:not(:last-child) {
+  margin: 0;
+  padding: 1rem 0;
+}
+
+.icon {
+  vertical-align: middle;
+}
+
+.delete-icon {
+  text-align: right;
+  float: right;
+  display: inline-block;
+}
+
+.delete-icon .icon {
+  color: #d63b3b;
+}
+
+.image-placeholder img {
+  background-color: #17a0cd;
+}