update all imports with alias @ and scss

src/App.vue

@@ -28,8 +28,8 @@
 </script>
 
 <style lang="scss">
-  @import "src/scss/main";
-  @import "src/scss/media-queries";
+  @import "scss/main";
+  @import "scss/media-queries";
 
   #app {
     display: grid;

src/components/CastList.vue

@@ -12,7 +12,7 @@
 
 <script setup lang="ts">
   import { defineProps } from "vue";
-  import CastListItem from "src/components/CastListItem.vue";
+  import CastListItem from "@/components/CastListItem.vue";
   import type {
     IMovie,
     IShow,

src/components/LandingBanner.vue

@@ -100,8 +100,8 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/variables";
-  @import "src/scss/media-queries";
+  @import "scss/variables";
+  @import "scss/media-queries";
 
   header {
     width: 100%;

src/components/PageHeader.vue

@@ -47,9 +47,9 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/variables";
-  @import "src/scss/media-queries";
-  @import "src/scss/main";
+  @import "scss/variables";
+  @import "scss/media-queries";
+  @import "scss/main";
 
   header {
     width: 100%;

src/components/Popup.vue

@@ -90,8 +90,8 @@
 </script>
 
 <style lang="scss">
-  @import "src/scss/variables";
-  @import "src/scss/media-queries";
+  @import "scss/variables";
+  @import "scss/media-queries";
 
   .movie-popup {
     position: fixed;

src/components/ResultsList.vue

@@ -35,8 +35,8 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/media-queries";
-  @import "src/scss/main";
+  @import "scss/media-queries";
+  @import "scss/main";
 
   .no-results {
     width: 100%;

src/components/ResultsListItem.vue

@@ -111,9 +111,9 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/variables";
-  @import "src/scss/media-queries";
-  @import "src/scss/main";
+  @import "scss/variables";
+  @import "scss/media-queries";
+  @import "scss/main";
 
   .movie-item {
     padding: 15px;

src/components/ResultsSection.vue

@@ -172,7 +172,7 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/media-queries";
+  @import "scss/media-queries";
 
   .resultSection {
     background-color: var(--background-color);

src/components/header/AutocompleteDropdown.vue

@@ -24,11 +24,11 @@
 </template>
 
 <script setup lang="ts">
+  import type { Ref } from "vue";
   import { ref, watch, defineProps } from "vue";
   import { useStore } from "vuex";
-  import IconMovie from "@/icons/IconMovie.vue";
-  import IconShow from "@/icons/IconShow.vue";
-  import type { Ref } from "vue";
+  import IconMovie from "../../icons/IconMovie.vue";
+  import IconShow from "../../icons/IconShow.vue";
   import { elasticSearchMoviesAndShows } from "../../api";
   import { MediaTypes } from "../../interfaces/IList";
   import { Index } from "../../interfaces/IAutocompleteSearch";
@@ -134,9 +134,9 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/variables";
-  @import "src/scss/media-queries";
-  @import "src/scss/main";
+  @import "scss/variables";
+  @import "scss/media-queries";
+  @import "scss/main";
   $sizes: 22;
 
   @for $i from 0 through $sizes {

src/components/header/NavigationHeader.vue

@@ -61,8 +61,8 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/variables";
-  @import "src/scss/media-queries";
+  @import "scss/variables";
+  @import "scss/media-queries";
 
   .spacer {
     @include mobile-only {

src/components/header/NavigationIcon.vue

@@ -37,7 +37,7 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/media-queries";
+  @import "scss/media-queries";
 
   .navigation-link {
     display: grid;

src/components/header/NavigationIcons.vue

@@ -77,7 +77,7 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/media-queries";
+  @import "scss/media-queries";
 
   .navigation-icons {
     display: grid;

src/components/header/SearchInput.vue

@@ -43,13 +43,13 @@
 </template>
 
 <script setup lang="ts">
+  import type { Ref } from "vue";
   import { ref, computed } from "vue";
   import { useStore } from "vuex";
   import { useRouter, useRoute } from "vue-router";
-  import AutocompleteDropdown from "@/components/header/AutocompleteDropdown.vue";
-  import IconSearch from "@/icons/IconSearch.vue";
-  import IconClose from "@/icons/IconClose.vue";
-  import type { Ref } from "vue";
+  import AutocompleteDropdown from "./AutocompleteDropdown.vue";
+  import IconSearch from "../../icons/IconSearch.vue";
+  import IconClose from "../../icons/IconClose.vue";
   import type { MediaTypes } from "../../interfaces/IList";
 
   interface ISearchResult {
@@ -165,9 +165,9 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/variables";
-  @import "src/scss/media-queries";
-  @import "src/scss/main";
+  @import "scss/variables";
+  @import "scss/media-queries";
+  @import "scss/main";
 
   .close-icon {
     position: absolute;

src/components/popup/ActionButton.vue

@@ -26,7 +26,7 @@
 </script>
 
 <style lang="scss">
-  @import "src/scss/media-queries";
+  @import "scss/media-queries";
 
   li.sidebar-list-element {
     display: flex;

src/components/popup/Description.vue

@@ -67,7 +67,7 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/media-queries";
+  @import "scss/media-queries";
 
   .movie-description {
     font-weight: 300;

src/components/popup/Detail.vue

@@ -19,7 +19,7 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/media-queries";
+  @import "scss/media-queries";
 
   .movie-detail {
     margin-bottom: 20px;

src/components/popup/Movie.vue

@@ -169,21 +169,20 @@
   import { useStore } from "vuex";
 
   // import img from "@/directives/v-image";
-  import IconProfile from "@/icons/IconProfile.vue";
-  import IconThumbsUp from "@/icons/IconThumbsUp.vue";
-  import IconThumbsDown from "@/icons/IconThumbsDown.vue";
-  import IconInfo from "@/icons/IconInfo.vue";
-  import IconRequest from "@/icons/IconRequest.vue";
-  import IconRequested from "@/icons/IconRequested.vue";
-  import IconBinoculars from "@/icons/IconBinoculars.vue";
-  import IconPlay from "@/icons/IconPlay.vue";
-  import TorrentList from "@/components/torrent/TruncatedTorrentResults.vue";
-  import CastList from "@/components/CastList.vue";
-  import Detail from "@/components/popup/Detail.vue";
-  import ActionButton from "@/components/popup/ActionButton.vue";
-  import Description from "@/components/popup/Description.vue";
-  import LoadingPlaceholder from "@/components/ui/LoadingPlaceholder.vue";
-  import type { Ref } from "vue";
+  import IconProfile from "../../icons/IconProfile.vue";
+  import IconThumbsUp from "../../icons/IconThumbsUp.vue";
+  import IconThumbsDown from "../../icons/IconThumbsDown.vue";
+  import IconInfo from "../../icons/IconInfo.vue";
+  import IconRequest from "../../icons/IconRequest.vue";
+  import IconRequested from "../../icons/IconRequested.vue";
+  import IconBinoculars from "../../icons/IconBinoculars.vue";
+  import IconPlay from "../../icons/IconPlay.vue";
+  import TorrentList from "../torrent/TruncatedTorrentResults.vue";
+  import CastList from "../CastList.vue";
+  import Detail from "./Detail.vue";
+  import ActionButton from "./ActionButton.vue";
+  import Description from "./Description.vue";
+  import LoadingPlaceholder from "../ui/LoadingPlaceholder.vue";
   import type {
     IMovie,
     IShow,
@@ -331,10 +330,10 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/loading-placeholder";
-  @import "src/scss/variables";
-  @import "src/scss/media-queries";
-  @import "src/scss/main";
+  @import "scss/loading-placeholder";
+  @import "scss/variables";
+  @import "scss/media-queries";
+  @import "scss/main";
 
   header {
     $duration: 0.2s;

src/components/popup/Person.vue

@@ -165,10 +165,10 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/loading-placeholder";
-  @import "src/scss/variables";
-  @import "src/scss/media-queries";
-  @import "src/scss/main";
+  @import "scss/loading-placeholder";
+  @import "scss/variables";
+  @import "scss/media-queries";
+  @import "scss/main";
 
   section.person {
     overflow: hidden;

src/components/torrent/TorrentSearchResults.vue

@@ -100,9 +100,9 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/variables";
-  @import "src/scss/media-queries";
-  @import "src/scss/elements";
+  @import "scss/variables";
+  @import "scss/media-queries";
+  @import "scss/elements";
 
   h2 {
     font-size: 20px;

src/components/torrent/TorrentTable.vue

@@ -155,9 +155,9 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/variables";
-  @import "src/scss/media-queries";
-  @import "src/scss/elements";
+  @import "scss/variables";
+  @import "scss/media-queries";
+  @import "scss/elements";
 
   table {
     border-spacing: 0;

src/components/torrent/TruncatedTorrentResults.vue

@@ -25,8 +25,8 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, defineProps } from "vue";
   import { useRouter } from "vue-router";
+  import { ref, defineProps, computed } from "vue";
   import TorrentSearchResults from "@/components/torrent/TorrentSearchResults.vue";
   import SeasonedButton from "@/components/ui/SeasonedButton.vue";
   import IconArrowDown from "@/icons/IconArrowDown.vue";

src/components/ui/Hamburger.vue

@@ -23,7 +23,7 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/media-queries";
+  @import "scss/media-queries";
 
   .nav__hamburger {
     display: block;

src/components/ui/Loader.vue

@@ -23,7 +23,7 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/variables";
+  @import "scss/variables";
 
   .loader {
     display: flex;

src/components/ui/LoadingPlaceholder.vue

@@ -22,5 +22,5 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/loading-placeholder";
+  @import "scss/loading-placeholder";
 </style>

src/components/ui/SeasonedButton.vue

@@ -25,8 +25,8 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/variables";
-  @import "src/scss/media-queries";
+  @import "scss/variables";
+  @import "scss/media-queries";
 
   button {
     display: inline-block;

src/components/ui/SeasonedInput.vue

@@ -74,8 +74,8 @@
   }
 </script>
 <style lang="scss" scoped>
-  @import "src/scss/variables";
-  @import "src/scss/media-queries";
+  @import "scss/variables";
+  @import "scss/media-queries";
 
   .group {
     display: flex;

src/components/ui/SeasonedMessages.vue

@@ -65,8 +65,8 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/variables";
-  @import "src/scss/media-queries";
+  @import "scss/variables";
+  @import "scss/media-queries";
 
   .fade-active {
     transition: opacity 0.4s;

src/components/ui/ToggleButton.vue

@@ -35,7 +35,7 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/variables";
+  @import "scss/variables";
 
   $background: $background-ui;
   $background-selected: $background-color-secondary;

src/pages/404Page.vue

@@ -28,8 +28,8 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/variables";
-  @import "src/scss/media-queries";
+  @import "scss/variables.scss";
+  @import "scss/media-queries";
 
   .button {
     font-size: 1.2rem;

src/pages/ActivityPage.vue

@@ -141,7 +141,7 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/variables";
+  @import "scss/variables";
 
   .wrapper {
     padding: 2rem;

src/pages/ProfilePage.vue

@@ -118,8 +118,8 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/variables";
-  @import "src/scss/media-queries";
+  @import "scss/variables";
+  @import "scss/media-queries";
 
   .button--group {
     display: flex;

src/pages/RegisterPage.vue

@@ -131,7 +131,7 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/variables";
+  @import "scss/variables";
 
   section {
     padding: 1.3rem;

src/pages/SearchPage.vue

@@ -89,7 +89,7 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/media-queries";
+  @import "scss/media-queries";
 
   .filter {
     margin-top: 0.5rem;

src/pages/SettingsPage.vue

@@ -48,8 +48,8 @@
 </script>
 
 <style lang="scss">
-  @import "src/scss/variables";
-  @import "src/scss/media-queries";
+  @import "scss/variables";
+  @import "scss/media-queries";
 
   .settings {
     padding: 3rem;

src/pages/SigninPage.vue

@@ -112,7 +112,7 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/variables";
+  @import "scss/variables";
 
   section {
     padding: 1.3rem;

src/scss/elements.scss

@@ -1,5 +1,5 @@
-@import "src/scss/variables";
-@import "src/scss/media-queries";
+@import "scss/variables";
+@import "scss/media-queries";
 
 .filter {
   margin: 1rem;

src/scss/loading-placeholder.scss

@@ -1,4 +1,4 @@
-@import "src/scss/variables";
+@import "scss/variables";
 
 // Loading placeholder styling
 @mixin nth-children($points...) {

src/scss/main.scss

@@ -1,4 +1,4 @@
-@import "src/scss/variables";
+@import "scss/variables";
 
 .noselect {
   -webkit-touch-callout: none; /* iOS Safari */

src/scss/variables.scss

@@ -1,6 +1,6 @@
 // Colors
 // @import "./media-queries";
-@import "src/scss/media-queries";
+@import "scss/media-queries";
 
 :root {
   color-scheme: light;