Project pages (#65)

* Initial impl of project pages * Finalize project styling * Revert browse page changes * Fix lint * Addressed some comments * 😄 * Run lint * Addressed issues * fixed dist * addressed changes * Address changes * I am speed * Howd you get there
2023-04-06 21:06:37 -04:00
parent b9a3a6dc11
commit 34f4b762f9
26 changed files with 1706 additions and 150 deletions
--- a/theseus_gui/src/assets/stylesheets/global.css
+++ b/theseus_gui/src/assets/stylesheets/global.css
@@ -1,11 +0,0 @@
-@import url('https://rsms.me/inter/inter.css');
-
-:root {
-  font-family: var(--font-standard);
-}
-
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
--- a/theseus_gui/src/assets/stylesheets/global.scss
+++ b/theseus_gui/src/assets/stylesheets/global.scss
@@ -0,0 +1,153 @@
+@import url('https://rsms.me/inter/inter.css');
+
+:root {
+  font-family: var(--font-standard);
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+.card-divider {
+  background-color: var(--color-button-bg);
+  border: none;
+  color: var(--color-button-bg);
+  height: 1px;
+  margin: var(--gap-sm) 0;
+}
+
+.no-wrap {
+  white-space: nowrap;
+}
+
+a {
+  color: var(--color-link);
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+.multiselect {
+  color: var(--color-base) !important;
+  outline: 2px solid transparent;
+
+  .multiselect__input:focus-visible {
+    outline: none !important;
+    box-shadow: none !important;
+    padding: 0 !important;
+    min-height: 0 !important;
+    font-weight: normal !important;
+    margin-left: 0.5rem;
+    margin-bottom: 10px;
+  }
+
+  input {
+    background: transparent;
+    box-shadow: none;
+    border: none !important;
+
+    &:focus {
+      box-shadow: none;
+    }
+  }
+
+  input::placeholder {
+    color: var(--color-base);
+  }
+
+  .multiselect__tags {
+    border-radius: var(--radius-md);
+    background: var(--color-button-bg);
+    box-shadow: var(--shadow-inset-sm);
+    border: none;
+    cursor: pointer;
+    padding-left: 0.5rem;
+    font-size: 1rem;
+
+    transition: background-color 0.1s ease-in-out;
+
+    &:active {
+      filter: brightness(1.25);
+
+      .multiselect__spinner {
+        filter: brightness(1.25);
+      }
+    }
+
+    .multiselect__single {
+      background: transparent;
+    }
+
+    .multiselect__tag {
+      border-radius: var(--radius-md);
+      color: var(--color-base);
+      background: transparent;
+      border: 2px solid var(--color-brand);
+    }
+
+    .multiselect__tag-icon {
+      background: transparent;
+
+      &:after {
+        color: var(--color-contrast);
+      }
+    }
+
+    .multiselect__placeholder {
+      color: var(--color-base);
+      margin-left: 0.5rem;
+      opacity: 0.6;
+      font-size: 1rem;
+      line-height: 1.25rem;
+    }
+  }
+
+  .multiselect__content-wrapper {
+    background: var(--color-button-bg);
+    border: none;
+    overflow-x: hidden;
+    box-shadow: var(--shadow-inset-sm), var(--shadow-floating);
+    width: 100%;
+
+    .multiselect__element {
+      .multiselect__option--highlight {
+        background: var(--color-button-bg);
+        filter: brightness(1.25);
+        color: var(--color-contrast);
+      }
+
+      .multiselect__option--selected {
+        background: var(--color-brand);
+        font-weight: bold;
+        color: var(--color-accent-contrast);
+      }
+    }
+  }
+
+  .multiselect__spinner {
+    background: var(--color-button-bg);
+
+    &:active {
+      filter: brightness(1.25);
+    }
+  }
+
+  &.multiselect--disabled {
+    background: none;
+
+    .multiselect__current,
+    .multiselect__select {
+      background: none;
+    }
+  }
+}
+
+.multiselect--above .multiselect__content-wrapper {
+  border-top: none !important;
+  border-top-left-radius: var(--radius-md) !important;
+  border-top-right-radius: var(--radius-md) !important;
+}