diff --git a/src/components/Settings/SettingsContainer.vue b/src/components/Settings/SettingsContainer.vue index fdfb677e..2067716a 100644 --- a/src/components/Settings/SettingsContainer.vue +++ b/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; diff --git a/src/styles/color-themes.scss b/src/styles/color-themes.scss index a288ac55..4a0bc6f3 100644 --- a/src/styles/color-themes.scss +++ b/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; } + // } +} \ No newline at end of file diff --git a/src/utils/defaults.js b/src/utils/defaults.js index b2fcb00c..e8a105ab 100644 --- a/src/utils/defaults.js +++ b/src/utils/defaults.js @@ -33,6 +33,7 @@ module.exports = { 'tiger', 'material-original', 'material-dark-original', + 'vaporware', 'high-contrast-dark', 'high-contrast-light', ],