Fix multiselect + tooltip styles (#53)

modrinth · May 25, 2023 · 7ae9627 · 7ae9627
1 parent 097a1cc
commit 7ae9627
Show file tree

Hide file tree

Showing 4 changed files with 134 additions and 21 deletions.
diff --git a/lib/assets/styles/classes.scss b/lib/assets/styles/classes.scss
@@ -616,17 +616,17 @@ a,
 
 .v-popper--theme-tooltip {
   .v-popper__inner {
-    background: var(--color-contrast) !important;
-    color: var(--color-base) !important;
+    background: var(--color-tooltip-bg) !important;
+    color: var(--color-tooltip-text) !important;
     padding: 5px 10px 4px !important;
-    border-radius: var(--gap-xs) !important;
+    border-radius: var(--radius-sm) !important;
     box-shadow: var(--shadow-floating) !important;
     font-size: 0.9rem !important;
   }
 
   .v-popper__arrow-outer,
   .v-popper__arrow-inner {
-    border-color: var(--color-base) !important;
+    border-color: var(--color-tooltip-bg) !important;
   }
 }
 
@@ -850,3 +850,126 @@ select {
     text-decoration: underline;
   }
 }
+
+.multiselect {
+  color: var(--color-base) !important;
+  outline: 2px solid transparent;
+  max-width: 15rem;
+  width: 100% !important;
+
+  .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;
+}
diff --git a/lib/assets/styles/defaults.scss b/lib/assets/styles/defaults.scss
@@ -125,22 +125,6 @@ svg {
   width: 1em;
 }
 
-.v-popper--theme-tooltip {
-  .v-popper__inner {
-    background: var(--color-tooltip-bg) !important;
-    color: var(--color-tooltip-text) !important;
-    padding: 5px 10px 4px !important;
-    border-radius: var(--size-rounded-tooltip) !important;
-    box-shadow: var(--shadow-floating) !important;
-    font-size: 0.9rem !important;
-  }
-
-  .v-popper__arrow-outer,
-  .v-popper__arrow-inner {
-    border-color: var(--color-tooltip-bg) !important;
-  }
-}
-
 .button-animation {
   transition: opacity 0.5s ease-in-out, filter 0.2s ease-in-out, transform 0.05s ease-in-out,
     outline 0.2s ease-in-out;

diff --git a/lib/assets/styles/variables.scss b/lib/assets/styles/variables.scss
@@ -54,6 +54,9 @@ html {
     hsla(0, 0%, 0%, 0.1) 0px 4px 6px -1px, hsla(0, 0%, 0%, 0.1) 0px 2px 4px -1px;
 
   --shadow-card: rgba(50, 50, 100, 0.1) 0px 2px 4px 0px;
+
+  --color-tooltip-text: var(--color-accent-contrast);
+  --color-tooltip-bg: var(--color-base);
 }
 
 .dark-mode,
@@ -91,6 +94,9 @@ html {
     hsla(0, 0%, 0%, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
 
   --shadow-card: rgba(0, 0, 0, 0.25) 0px 2px 4px 0px;
+
+  --color-tooltip-text: var(--color-base);
+  --color-tooltip-bg: var(--color-button-bg);
 }
 
 .oled-mode {

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "omorphia",
   "type": "module",
-  "version": "0.4.17",
+  "version": "0.4.18",
   "files": [
     "dist"
   ],