Initial commit

src/presentation/styles/colors.scss

@@ -0,0 +1,8 @@
+$white: #fff;
+$light-gray: #eceef1;
+$gray: darken(#eceef1, 30%);
+$dark-gray: #616f86;
+$slate: darken(#eceef1, 70%);
+$dark-slate: #2f3133;
+$accent: #1abc9c;
+$black: #000

src/presentation/styles/fonts.scss

@@ -0,0 +1,26 @@
+/* latin-ext */
+@font-face {
+    font-family: 'Slabo 27px';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Slabo 27px'), local('Slabo27px-Regular'), url('~@/presentation/styles/fonts/Slabo27px-v6.woff2') format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  }
+  /* latin */
+  @font-face {
+    font-family: 'Slabo 27px';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Slabo 27px'), local('Slabo27px-Regular'), url('~@/presentation/styles/fonts/Slabo27px-v6.woff2') format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+  /* latin */
+  @font-face {
+    font-family: 'Yesteryear';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Yesteryear'), local('Yesteryear-Regular'), url('~@/presentation/styles/fonts/yesteryear-v8.woff2') format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+
+  $default-font: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;

src/presentation/styles/tooltip.scss

@@ -0,0 +1,43 @@
+// based on https://github.com/Akryum/v-tooltip/blob/83615e394c96ca491a4df04b892ae87e833beb97/demo-src/src/App.vue#L179-L303
+.tooltip {
+    display: block !important;
+    z-index: 10000;
+    .tooltip-inner {
+      background: $black;
+      color: $white;
+      border-radius: 16px;
+      padding: 5px 10px 4px;
+    }
+    .tooltip-arrow {
+      width: 0;
+      height: 0;
+      border-style: solid;
+      position: absolute;
+      margin: 5px;
+      border-color: $black;
+      z-index: 1;
+    }
+    &[x-placement^="top"] {
+      margin-bottom: 5px;
+      .tooltip-arrow {
+        border-width: 5px 5px 0 5px;
+        border-left-color: transparent !important;
+        border-right-color: transparent !important;
+        border-bottom-color: transparent !important;
+        bottom: -5px;
+        left: calc(50% - 5px);
+        margin-top: 0;
+        margin-bottom: 0;
+      }
+    }
+    &[aria-hidden='true'] {
+      visibility: hidden;
+      opacity: 0;
+      transition: opacity .15s, visibility .15s;
+    }
+    &[aria-hidden='false'] {
+      visibility: visible;
+      opacity: 1;
+      transition: opacity .15s;
+    }
+  }

src/presentation/styles/tree.scss

@@ -0,0 +1,35 @@
+// Overrides base styling for LiquorTree
+
+.tree-node > .tree-content > .tree-anchor > span {
+    color: $white !important;
+}
+
+.tree-node {
+    white-space: normal !important;
+}
+
+.tree-arrow.has-child {
+    &.rtl:after, &:after {
+        border-color: $white !important;
+    }
+}
+
+.tree-node.selected > .tree-content {
+    > .tree-anchor > span {
+        font-weight: bolder;
+    }
+}
+
+.tree-content:hover {
+    background: $dark-gray !important;
+}
+
+.tree-checkbox {
+    &.checked {
+        background: $accent !important;
+    }
+    &.indeterminate {
+        border-color: $gray !important;
+    }
+    background: $dark-slate !important;
+}