💅 Adds new theme, Vapourwave. And fixes curve styling of nav

Author: Lissy93

src/components/Settings/SettingsContainer.vue

@@ -136,6 +136,7 @@ export default {
     position: relative;
     flex: 1;
     background: var(--settings-background);
+    border-radius: var(--curve-factor-navbar);
   }
   .options-container {
     display: flex;

src/styles/color-themes.scss

@@ -585,3 +585,86 @@ html[data-theme='minimal-dark'] {
     }
   }
 }
+
+html[data-theme='vaporware'] {
+  --primary: #09bfe6;
+  --background: #100e2c;
+  --background-darker: #6c27ea;
+  --background-darker: linear-gradient(0deg, rgba(108,39,234,1) 0%, rgba(132,76,235,1) 80%);
+  --settings-text-color: #6c27ea;
+  --item-group-outer-background: #096de6;
+  --item-group-outer-background: linear-gradient(45deg, rgba(9,109,230,1) 0%, rgba(9,147,230,1) 50%, rgba(9,109,230,1) 100%);
+  --item-group-background: #190e2c;
+  --item-group-heading-text-color: var(--white);
+  --item-group-heading-text-color-hover: #5118b9;
+  --item-text-color: #5118b9;
+  --item-background: #09bfe6;
+  --item-background-hover: #9967f6;
+  --footer-text-color: var(--white);
+  --item-shadow: none;
+  --curve-factor: 2px;
+  --curve-factor-navbar: 6px;
+  --login-form-color: #09bfe6;
+
+  .home {
+    background: linear-gradient(180deg, rgba(16,14,44,1) 10%, rgba(27,24,79,1) 40%, rgba(16,14,44,1) 100%);
+  }
+
+  div.item-group-container {
+    gap: 0.3rem;
+    margin: 1rem auto;
+  }
+  div.collapsable {
+    margin: 0.2rem;
+    padding: 0.2rem;
+  }
+  div.content-inner {
+    padding: 0 !important;
+  }
+  a.item {
+    margin: 0.1rem;
+    border: 0;
+    &.size-medium {
+      min-height: 80px;
+    }
+  }
+  section.filter-container {
+    background: linear-gradient(0deg, var(--background) 25%, #6c27ea 100%);
+    form {
+      background: #6c27ea;
+      height: 2.5rem;
+    }
+    form label, i.clear-search {
+      color: #100e2c;
+      border-color: #100e2c;
+      font-weight: bold;
+    }
+  }
+  .tile-title span.text {
+    font-weight: normal;
+  }
+  label.lbl-toggle h3 {
+    font-size: 1.4rem;
+  }
+  footer {
+    color: var(--white);
+  }
+  a.item {
+    background: linear-gradient(45deg, rgba(9,191,230,1) 0%, rgba(9,191,230,1) 80%, rgba(9,203,230,1) 100%);
+    &:hover {
+      background: #844ceb;
+      color: #09bfe6;
+    }
+    .tile-title span.text { transition: none; }
+  }
+
+  div.login-page {
+    background: url('https://i.ibb.co/JqcJcGK/vaporwave-sunset-wallpaper.jpg');
+    background-size: cover;
+  }
+  // body {
+  //   background: url('https://i.ibb.co/JqcJcGK/vaporwave-sunset-wallpaper.jpg');
+  //   background-size: cover;
+  //   div.home { background: none; }
+  // }
+}

src/utils/defaults.js

@@ -33,6 +33,7 @@ module.exports = {
     'tiger',
     'material-original',
     'material-dark-original',
+    'vaporware',
     'high-contrast-dark',
     'high-contrast-light',
   ],