feat: swap to absolute paths for css (#1224)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **Style**
- Updated CSS file paths across multiple components to reference assets
absolutely, ensuring consistent and reliable styling across the user
interface.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

web/components/Auth.ce.vue

@@ -32,5 +32,5 @@ const { authAction, stateData } = storeToRefs(serverStore);
 <style lang="postcss">
 /* Import unraid-ui globals first */
 @import '@unraid/ui/styles';
-@import '../assets/main.css';
+@import '~/assets/main.css';
 </style>

web/components/CallbackHandler.ce.vue

@@ -15,5 +15,5 @@ onBeforeMount(() => {
 <style lang="postcss">
 /* Import unraid-ui globals first */
 @import '@unraid/ui/styles';
-@import '../assets/main.css';
+@import '~/assets/main.css';
 </style>

web/components/ColorSwitcher.ce.vue

@@ -78,5 +78,5 @@ watch([form], () => {
 <style lang="postcss">
 /* Import unraid-ui globals first */
 @import '@unraid/ui/styles';
-@import '../assets/main.css';
+@import '~/assets/main.css';
 </style>

web/components/DevSettings.vue

@@ -25,5 +25,5 @@ import { CogIcon } from '@heroicons/vue/24/solid';
 <style lang="postcss">
 /* Import unraid-ui globals first */
 @import '@unraid/ui/styles';
-@import '../assets/main.css';
+@import '~/assets/main.css';
 </style>

web/components/DowngradeOs.ce.vue

@@ -74,5 +74,5 @@ onBeforeMount(() => {
 <style lang="postcss">
 /* Import unraid-ui globals first */
 @import '@unraid/ui/styles';
-@import '../assets/main.css';
+@import '~/assets/main.css';
 </style>

web/components/DownloadApiLogs.ce.vue

@@ -73,5 +73,5 @@ const downloadUrl = computed(() => {
 <style lang="postcss">
 /* Import unraid-ui globals first */
 @import '@unraid/ui/styles';
-@import '../assets/main.css';
+@import '~/assets/main.css';
 </style>

web/components/DummyServerSwitcher.vue

@@ -32,5 +32,5 @@ const updateSelector = (val: string) => {
 <style lang="postcss">
 /* Import unraid-ui globals first */
 @import '@unraid/ui/styles';
-@import '../assets/main.css';
+@import '~/assets/main.css';
 </style>

web/components/Modals.ce.vue

@@ -31,7 +31,7 @@ const { releaseForUpdate: updateOsChangelogModalVisible } = storeToRefs(useUpdat
 <style lang="postcss">
 /* Import unraid-ui globals first */
 @import '@unraid/ui/styles';
-@import '../assets/main.css';
+@import '~/assets/main.css';
 
 .unraid_mark_2,
 .unraid_mark_4 {

web/components/Registration.ce.vue

@@ -324,5 +324,5 @@ const items = computed((): RegistrationItemProps[] => {
 <style lang="postcss">
 /* Import unraid-ui globals first */
 @import '@unraid/ui/styles';
-@import '../assets/main.css';
+@import '~/assets/main.css';
 </style>

web/components/SsoButton.ce.vue

@@ -152,5 +152,5 @@ const navigateToExternalSSOUrl = () => {
 <style lang="postcss">
 /* Import unraid-ui globals first */
 @import '@unraid/ui/styles';
-@import '../assets/main.css';
+@import '~/assets/main.css';
 </style>

web/components/UpdateOs.ce.vue

@@ -72,7 +72,7 @@ onBeforeMount(() => {
 <style lang="postcss">
 /* Import unraid-ui globals first */
 @import '@unraid/ui/styles';
-@import '../assets/main.css';
+@import '~/assets/main.css';
 
 .unraid_mark_2,
 .unraid_mark_4 {

web/components/UpdateOs/Downgrade.vue

@@ -134,5 +134,5 @@ const downgradeButton = ref<UserProfileLink>({
 <style lang="postcss">
 /* Import unraid-ui globals first */
 @import '@unraid/ui/styles';
-@import '../../assets/main.css';
+@import '~/assets/main.css';
 </style>

web/components/UpdateOs/Update.vue

@@ -267,5 +267,5 @@ watchEffect(() => {
 <style lang="postcss">
 /* Import unraid-ui globals first */
 @import '@unraid/ui/styles';
-@import '../../assets/main.css';
+@import '~/assets/main.css';
 </style>

web/components/UpdateOs/UpdateIneligible.vue

@@ -124,5 +124,5 @@ watchEffect(() => {
 <style lang="postcss">
 /* Import unraid-ui globals first */
 @import '@unraid/ui/styles';
-@import '../../assets/main.css';
+@import '~/assets/main.css';
 </style>

web/components/UserProfile.ce.vue

@@ -169,7 +169,7 @@ onMounted(() => {
 <style lang="postcss">
 /* Import unraid-ui globals first */
 @import '@unraid/ui/styles';
-@import '../assets/main.css';
+@import '~/assets/main.css';
 
 .DropdownWrapper_blip {
   box-shadow: var(--ring-offset-shadow), var(--ring-shadow), var(--shadow-popover-foreground);

web/components/UserProfile/CallbackFeedback.vue

@@ -427,7 +427,7 @@ const showUpdateEligibility = computed(() => {
 <style lang="postcss">
 /* Import unraid-ui globals first */
 @import '@unraid/ui/styles';
-@import '../../assets/main.css';
+@import '~/assets/main.css';
 
 .unraid_mark_2,
 .unraid_mark_4 {

web/components/UserProfile/DropdownLaunchpad.vue

@@ -59,7 +59,7 @@ const showExpireTime = computed(
 <style lang="postcss">
 /* Import unraid-ui globals first */
 @import '@unraid/ui/styles';
-@import '../../assets/main.css';
+@import '~/assets/main.css';
 
 .DropdownWrapper_blip {
   box-shadow: var(--ring-offset-shadow), var(--ring-shadow), var(--shadow-foreground);

web/components/UserProfile/Promo.vue

@@ -155,5 +155,5 @@ const { install } = useInstallPlugin();
 <style lang="postcss">
 /* Import unraid-ui globals first */
 @import '@unraid/ui/styles';
-@import '../../assets/main.css';
+@import '~/assets/main.css';
 </style>

web/components/WanIpCheck.ce.vue

@@ -80,5 +80,5 @@ watchEffect(async () => {
 <style lang="postcss">
 /* Import unraid-ui globals first */
 @import '@unraid/ui/styles';
-@import '../assets/main.css';
+@import '~/assets/main.css';
 </style>

web/components/WelcomeModal.ce.vue

@@ -113,7 +113,7 @@ onBeforeMount(() => {
 <style lang="postcss">
 /* Import unraid-ui globals first */
 @import '@unraid/ui/styles';
-@import '../assets/main.css';
+@import '~/assets/main.css';
 
 .unraid_mark_2,
 .unraid_mark_4 {

web/nuxt.config.ts

@@ -36,7 +36,13 @@ export default defineNuxtConfig({
     enabled: process.env.NODE_ENV === 'development',
   },
 
-  modules: ['@vueuse/nuxt', '@pinia/nuxt', '@nuxtjs/tailwindcss', 'nuxt-custom-elements', '@nuxt/eslint'],
+  modules: [
+    '@vueuse/nuxt',
+    '@pinia/nuxt',
+    '@nuxtjs/tailwindcss',
+    'nuxt-custom-elements',
+    '@nuxt/eslint',
+  ],
 
   ignore: ['/webGui/images'],
 
@@ -138,4 +144,4 @@ export default defineNuxtConfig({
   },
 
   compatibilityDate: '2024-12-05',
-});
+});

web/pages/index.vue

@@ -199,7 +199,7 @@ const bannerImage = watch(theme, () => {
 <style lang="postcss">
 /* Import unraid-ui globals first */
 @import '@unraid/ui/styles';
-@import '../assets/main.css';
+@import '~/assets/main.css';
 
 code {
   @apply rounded-lg bg-gray-200 p-1 text-black shadow;