Upgraded to latest mooncore packages. Upgraded to tailwind v4

2025-05-02 13:06:09 +02:00
parent 6657bae0cd
commit bbc6c0fbd3
28 changed files with 1386 additions and 1963 deletions
--- a/Moonlight.ApiServer/Http/Controllers/OAuth2/Login.razor
+++ b/Moonlight.ApiServer/Http/Controllers/OAuth2/Login.razor
@@ -9,7 +9,7 @@

 <div class="flex min-h-full flex-col justify-center py-12 sm:px-6 lg:px-8">
    <div class="sm:mx-auto sm:w-full sm:max-w-md">
-        <img class="mx-auto h-14 w-auto" src="https://help.moonlightpanel.xyz/images/logo.svg" alt="Your Company">
+        <img class="mx-auto h-14 w-auto" src="/svg/logo.svg" alt="Moonlight">
        <h2 class="mt-6 text-center text-2xl font-bold leading-9 tracking-tight text-gray-100">Login into your account</h2>
    </div>

--- a/Moonlight.ApiServer/Http/Controllers/OAuth2/Register.razor
+++ b/Moonlight.ApiServer/Http/Controllers/OAuth2/Register.razor
@@ -9,7 +9,7 @@

 <div class="flex min-h-full flex-col justify-center py-12 sm:px-6 lg:px-8">
    <div class="sm:mx-auto sm:w-full sm:max-w-md">
-        <img class="mx-auto h-14 w-auto" src="https://help.moonlightpanel.xyz/images/logo.svg" alt="Your Company">
+        <img class="mx-auto h-14 w-auto" src="/svg/logo.svg" alt="Moonlight">
        <h2 class="mt-6 text-center text-2xl font-bold leading-9 tracking-tight text-gray-100">Create your account</h2>
    </div>

--- a/Moonlight.ApiServer/Services/BundleGenerationService.cs
+++ b/Moonlight.ApiServer/Services/BundleGenerationService.cs
@@ -81,6 +81,16 @@ public class BundleGenerationService : IHostedService
        if (physicalPaths.Count == 1) // Only one stylesheet => nothing to process
            return await File.ReadAllTextAsync(physicalPaths[0]);

+        // Simple bundler just to test
+        var result = "";
+
+        foreach (var path in physicalPaths)
+        {
+            result += await File.ReadAllTextAsync(path);
+        }
+        
+        return result;
+        
        // Create bundle by stripping out double declared classes and combining all css files into one bundle
        var parser = new StylesheetParser();
        string? content = null;
--- a/Moonlight.Client/Moonlight.Client.csproj
+++ b/Moonlight.Client/Moonlight.Client.csproj
@@ -1,6 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">

    <PropertyGroup>
+        <PublishTrimmed>false</PublishTrimmed>
        <TargetFramework>net8.0</TargetFramework>
        <Nullable>enable</Nullable>
        <ImplicitUsings>enable</ImplicitUsings>
@@ -27,7 +28,7 @@
        <PackageReference Include="MoonCore" Version="1.8.5" />
        <PackageReference Include="MoonCore.Blazor" Version="1.2.9" />
        <PackageReference Include="MoonCore.PluginFramework" Version="1.0.5"/>
-        <PackageReference Include="MoonCore.Blazor.Tailwind" Version="1.4.0" />
+        <PackageReference Include="MoonCore.Blazor.Tailwind" Version="1.4.2" />
    </ItemGroup>

    <!-- 
@@ -49,6 +50,7 @@

    <ItemGroup>
        <Folder Include="Helpers\"/>
+        <Folder Include="Styles\" />
        <Folder Include="wwwroot\css\"/>
    </ItemGroup>

--- a/Moonlight.Client/Styles/additions/buttons.css
+++ b/Moonlight.Client/Styles/additions/buttons.css
@@ -4,7 +4,7 @@
 .btn-lg,
 .btn-sm,
 .btn-xs {
-    @apply font-medium text-sm inline-flex items-center justify-center border border-transparent rounded-lg leading-5 shadow-sm transition;
+    @apply cursor-pointer font-medium text-sm inline-flex items-center justify-center border border-transparent rounded-lg leading-5 shadow-sm transition active:scale-95;
 }

 .btn {
@@ -16,7 +16,7 @@
 }

 .btn-sm {
-    @apply px-2 py-1;
+    @apply px-2.5 py-1.5;
 }

 .btn-xs {
@@ -26,57 +26,31 @@
 /* Colors */

 .btn-primary {
-    @apply bg-primary-600 hover:bg-primary-500 focus-visible:outline-primary-600 text-diffcolor;
+    @apply bg-primary hover:bg-primary/90 focus-visible:outline-primary text-diffcolor;
 }

 .btn-secondary {
-    @apply bg-secondary-800 hover:bg-secondary-700 focus-visible:outline-secondary-800 text-diffcolor;
+    @apply bg-secondary hover:bg-secondary/90 focus-visible:outline-secondary text-diffcolor;
 }

 .btn-tertiary {
-    @apply bg-tertiary-600 hover:bg-tertiary-500 focus-visible:outline-tertiary-600 text-diffcolor;
+    @apply bg-tertiary hover:bg-tertiary/90 focus-visible:outline-tertiary text-diffcolor;
 }

 .btn-danger {
-    @apply bg-danger-600 hover:bg-danger-500 focus-visible:outline-danger-600 text-diffcolor;
+    @apply bg-danger hover:bg-danger/90 focus-visible:outline-danger text-diffcolor;
 }

 .btn-warning {
-    @apply bg-warning-500 hover:bg-warning-400 focus-visible:outline-warning-500 text-diffcolor;
+    @apply bg-warning hover:bg-warning/90 focus-visible:outline-warning text-diffcolor;
 }

 .btn-info {
-    @apply bg-info-600 hover:bg-info-500 focus-visible:outline-info-600 text-diffcolor;
+    @apply bg-info hover:bg-info/90 focus-visible:outline-info text-diffcolor;
 }

 .btn-success {
-    @apply bg-success-600 hover:bg-success-500 focus-visible:outline-success-600 text-diffcolor;
-}
-
-/* Outline */
-
-.btn-outline-primary {
-    @apply bg-gray-800 hover:border-gray-600 text-primary-500;
-}
-
-.btn-outline-tertiary {
-    @apply bg-gray-800 hover:border-gray-600 text-tertiary-500;
-}
-
-.btn-outline-danger {
-    @apply bg-gray-800 hover:border-gray-600 text-danger-500;
-}
-
-.btn-outline-warning {
-    @apply bg-gray-800 hover:border-gray-600 text-warning-400;
-}
-
-.btn-outline-info {
-    @apply bg-gray-800 hover:border-gray-600 text-info-500;
-}
-
-.btn-outline-success {
-    @apply bg-gray-800 hover:border-gray-600 text-success-500;
+    @apply bg-success hover:bg-success/90 focus-visible:outline-success text-diffcolor;
 }

 /* Disabled Buttons */
@@ -91,55 +65,29 @@
 /* Colors for Disabled States */

 .btn-primary:disabled {
-    @apply bg-primary-600 text-gray-300;
+    @apply bg-primary/80 text-gray-300;
 }

 .btn-secondary:disabled {
-    @apply bg-secondary-800 text-gray-400;
+    @apply bg-secondary/80 text-gray-400;
 }

 .btn-tertiary:disabled {
-    @apply bg-tertiary-600 text-gray-300;
+    @apply bg-tertiary/80 text-gray-300;
 }

 .btn-danger:disabled {
-    @apply bg-danger-600 text-gray-300;
+    @apply bg-danger/80 text-gray-300;
 }

 .btn-warning:disabled {
-    @apply bg-warning-500 text-gray-400;
+    @apply bg-warning/80 text-gray-400;
 }

 .btn-info:disabled {
-    @apply bg-info-600 text-gray-300;
+    @apply bg-info/80 text-gray-300;
 }

 .btn-success:disabled {
-    @apply bg-success-600 text-gray-300;
-}
-
-/* Outline Disabled States */
-
-.btn-outline-primary:disabled {
-    @apply bg-gray-800 border-gray-700 text-gray-500;
-}
-
-.btn-outline-tertiary:disabled {
-    @apply bg-gray-800 border-gray-700 text-gray-500;
-}
-
-.btn-outline-danger:disabled {
-    @apply bg-gray-800 border-gray-700 text-gray-500;
-}
-
-.btn-outline-warning:disabled {
-    @apply bg-gray-800 border-gray-700 text-gray-500;
-}
-
-.btn-outline-info:disabled {
-    @apply bg-gray-800 border-gray-700 text-gray-500;
-}
-
-.btn-outline-success:disabled {
-    @apply bg-gray-800 border-gray-700 text-gray-500;
+    @apply bg-success/80 text-gray-300;
 }
--- a/Moonlight.Client/Styles/additions/cards.css
+++ b/Moonlight.Client/Styles/additions/cards.css
@@ -3,17 +3,21 @@
 }

 .card-header {
-    @apply px-5 py-4 border-b border-gray-700/60 flex items-center;
+    @apply p-5;
+}
+
+.card-header:has(+ .card-body) {
+    @apply pb-0;
 }

 .card-title {
-    @apply font-semibold text-gray-100;
+    @apply text-2xl font-semibold text-white;
 }

 .card-body {
-    @apply px-5 py-5 text-gray-300;
+    @apply p-5 text-gray-200;
 }

 .card-footer {
-    @apply pt-3 pb-3 border-t border-gray-700/60 mt-auto;
+    @apply p-5;
 }
--- a/Moonlight.Client/Styles/additions/fonts.css
+++ b/Moonlight.Client/Styles/additions/fonts.css
@@ -1,3 +1,8 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=fallback');
-@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap');
-@import url("https://cdn.jsdelivr.net/npm/lucide-static@0.487.0/font/lucide.css");
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=fallback') layer;
+@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap') layer;
+@import url("https://cdn.jsdelivr.net/npm/lucide-static/font/lucide.css") layer;
+
+@theme {
+    --font-inter: "Inter", var(--font-sans);
+    --font-scp: "Source Code Pro", var(--font-mono);
+}
--- a/Moonlight.Client/Styles/additions/forms.css
+++ b/Moonlight.Client/Styles/additions/forms.css
@@ -23,7 +23,7 @@ input[type="search"]::-webkit-search-results-decoration {
 .form-textarea,
 .form-multiselect,
 .form-select {
-    @apply text-sm text-gray-100 leading-5 py-2 px-3 border-gray-700 focus:border-primary-500 shadow-sm rounded-lg;
+    @apply text-sm text-gray-100 leading-5 py-2 px-3 border-gray-700 focus:border-primary shadow-sm rounded-lg;
 }

 .form-input,
@@ -37,7 +37,7 @@ input[type="search"]::-webkit-search-results-decoration {

 .form-checkbox,
 .form-radio {
-    @apply text-primary-500 checked:bg-primary-500 checked:border-transparent border border-gray-700/60 focus:border-primary-500/50;
+    @apply text-primary checked:bg-primary checked:border-transparent border border-gray-700/60 focus:border-primary/50;
 }

 /* Switch element */
@@ -61,7 +61,7 @@ input[type="search"]::-webkit-search-results-decoration {
 }

 .form-switch input[type="checkbox"]:checked + label {
-    @apply bg-primary-600;
+    @apply bg-primary;
 }

 .form-switch input[type="checkbox"]:checked + label > span:first-child {
--- a/Moonlight.Client/Styles/additions/progress.css
+++ b/Moonlight.Client/Styles/additions/progress.css
@@ -3,7 +3,7 @@
 }

 .progress-bar {
-    @apply bg-primary-500 rounded-full h-3;
+    @apply bg-primary rounded-full h-3;
    transition: width 0.6s ease;
 }

--- a/Moonlight.Client/Styles/additions/tabs.css
+++ b/Moonlight.Client/Styles/additions/tabs.css
@@ -0,0 +1,11 @@
+.tabs {
+    @apply flex gap-x-1 bg-gray-800 rounded-lg transition p-1;
+}
+
+.tabs .tabs-segment {
+    @apply cursor-pointer font-medium text-sm inline-flex items-center justify-center border border-transparent rounded-lg leading-5 text-gray-300 hover:text-primary py-1.5 px-3.5;
+}
+
+.tabs .tabs-segment-active {
+    @apply bg-primary hover:bg-primary/90 focus-visible:outline-primary text-diffcolor hover:text-diffcolor;
+}
--- a/Moonlight.Client/Styles/additions/theme.css
+++ b/Moonlight.Client/Styles/additions/theme.css
@@ -1,122 +1,46 @@
-@layer base {
-    :root {
-        
-        /* Color Variables */
-        
-        /* Primary */
-        
-        --color-primary-50: 238 242 255;
-        --color-primary-100: 224 231 255;
-        --color-primary-200: 199 210 254;
-        --color-primary-300: 165 180 252;
-        --color-primary-400: 129 140 248;
-        --color-primary-500: 99 102 241;
-        --color-primary-600: 79 70 229;
-        --color-primary-700: 67 56 202;
-        --color-primary-800: 55 48 163;
-        --color-primary-900: 49 46 129;
-        --color-primary-950: 30 27 75;
-        
-        /* Secondary */
-        
-        --color-secondary-100: 249 249 249;
-        --color-secondary-200: 241 241 242;
-        --color-secondary-300: 219 223 233;
-        --color-secondary-400: 181 181 195;
-        --color-secondary-500: 153 161 183;
-        --color-secondary-600: 112 121 147;
-        --color-secondary-700: 68 78 107;
-        --color-secondary-800: 28 36 56;
-        --color-secondary-900: 17 23 33;
-        --color-secondary-950: 14 18 28;
-        
-        /* Tertiary */
-        
-        --color-tertiary-50: 245 243 255;
-        --color-tertiary-100: 237 233 254;
-        --color-tertiary-200: 221 214 254;
-        --color-tertiary-300: 196 181 253;
-        --color-tertiary-400: 167 139 250;
-        --color-tertiary-500: 139 92 246;
-        --color-tertiary-600: 124 58 237;
-        --color-tertiary-700: 109 40 217;
-        --color-tertiary-800: 91 33 182;
-        --color-tertiary-900: 76 29 149;
-        --color-tertiary-950: 46 16 101;
-        
-        /* Warning */
-        
-        --color-warning-50: 254 252 232;
-        --color-warning-100: 254 249 195;
-        --color-warning-200: 254 240 138;
-        --color-warning-300: 253 224 71;
-        --color-warning-400: 250 204 21;
-        --color-warning-500: 234 179 8;
-        --color-warning-600: 202 138 4;
-        --color-warning-700: 161 98 7;
-        --color-warning-800: 133 77 14;
-        --color-warning-900: 113 63 18;
-        --color-warning-950: 66 32 6;
-        
-        /* Danger */
-        
-        --color-danger-50: 254 242 242;
-        --color-danger-100: 254 226 226;
-        --color-danger-200: 254 202 202;
-        --color-danger-300: 252 165 165;
-        --color-danger-400: 248 113 113;
-        --color-danger-500: 239 68 68;
-        --color-danger-600: 220 38 38;
-        --color-danger-700: 185 28 28;
-        --color-danger-800: 153 27 27;
-        --color-danger-900: 127 29 29;
-        --color-danger-950: 69 10 10;
-        
-        /* Success */
-        
-        --color-success-50: 240 253 244;
-        --color-success-100: 220 252 231;
-        --color-success-200: 187 247 208;
-        --color-success-300: 134 239 172;
-        --color-success-400: 74 222 128;
-        --color-success-500: 34 197 94;
-        --color-success-600: 22 163 74;
-        --color-success-700: 21 128 61;
-        --color-success-800: 22 101 52;
-        --color-success-900: 20 83 45;
-        --color-success-950: 5 46 22;
-        
-        /* Info */
-        
-        --color-info-50: 239 246 255;
-        --color-info-100: 219 234 254;
-        --color-info-200: 191 219 254;
-        --color-info-300: 147 197 253;
-        --color-info-400: 96 165 250;
-        --color-info-500: 59 130 246;
-        --color-info-600: 37 99 235;
-        --color-info-700: 29 78 216;
-        --color-info-800: 30 64 175;
-        --color-info-900: 30 58 138;
-        --color-info-950: 23 37 84;
-        
-        /* Gray */
-        
-        --color-gray-100: 249 249 249;
-        --color-gray-200: 241 241 242;
-        --color-gray-300: 219 223 233;
-        --color-gray-400: 181 181 195;
-        --color-gray-500: 153 161 183;
-        --color-gray-600: 112 121 147;
-        --color-gray-700: 68 78 107;
-        --color-gray-750: 41 50 73;
-        --color-gray-800: 28 36 56;
-        --color-gray-900: 17 23 33;
-        --color-gray-950: 14 18 28;
+@theme {
+    /* Color Variables */

-        /* Full Colors */
-        
-        --color-light: 255 255 255;
-        --color-dark: 0 0 0;
-    }
+    --color-primary: oklch(.511 .262 276.966);
+    --color-secondary: rgb(31, 41, 55);
+    --color-tertiary: oklch(.627 .265 303.9);
+    --color-warning: oklch(.828 .189 84.429);
+    --color-danger: oklch(.586 .253 17.585);
+    --color-success: oklch(.627 .194 149.214);
+    --color-info: oklch(.546 .245 262.881);
+
+    /* Gray */
+
+    --color-gray-50: #e8eefc;
+    --color-gray-100: rgb(249 249 249);
+    --color-gray-200: rgb(241 241 242);
+    --color-gray-300: rgb(219 223 233);
+    --color-gray-400: rgb(181 181 195);
+    --color-gray-500: rgb(153 161 183);
+    --color-gray-600: rgb(112 121 147);
+    --color-gray-700: rgb(68 78 107);
+    --color-gray-750: rgb(41 50 73);
+    --color-gray-800: rgb(28 36 56);
+    --color-gray-900: rgb(17 23 33);
+    --color-gray-950: rgb(14 18 28);
+
+/*
+    --color-gray-50: #e8eefc;
+    --color-gray-100: #ccd6ee;
+    --color-gray-200: #bec9e1;
+    --color-gray-300: #a3b2d5;
+    --color-gray-400: #7d91bb;
+    --color-gray-500: #5f719d;
+    --color-gray-600: #1a2640;
+    --color-gray-700: #101a2e;
+    --color-gray-750: #0f1729;
+    --color-gray-800: #0c1221;
+    --color-gray-900: #050a16;
+    --color-gray-950: #03060e;
+    */
+    /* Full Colors */
+
+    --color-white: rgb(255 255 255);
+    --color-black: rgb(0 0 0);
+    --color-diffcolor: rgb(var(--color-white));
 }
--- a/Moonlight.Client/Styles/additions/theme.white.css
+++ b/Moonlight.Client/Styles/additions/theme.white.css
@@ -0,0 +1,23 @@
+@theme {
+    /* Gray (Inverted for White Mode) */
+
+    --color-gray-100: rgb(14 18 28); /* Formerly gray-950 */
+    --color-gray-200: rgb(17 23 33); /* Formerly gray-900 */
+    --color-gray-300: rgb(28 36 56); /* Formerly gray-800 */
+    --color-gray-400: rgb(41 50 73); /* Formerly gray-750 */
+    --color-gray-500: rgb(68 78 107); /* Formerly gray-700 */
+    --color-gray-600: rgb(112 121 147); /* Formerly gray-600 */
+    --color-gray-700: rgb(153 161 183); /* Formerly gray-500 */
+    --color-gray-750: rgb(181 181 195); /* Formerly gray-400 */
+    --color-gray-800: rgb(219 223 233); /* Formerly gray-300 */
+    --color-gray-900: rgb(241 241 242); /* Formerly gray-200 */
+    --color-gray-950: rgb(249 249 249); /* Formerly gray-100 */
+
+    /* Full Colors (Inverted) */
+
+    --color-white: rgb(0 0 0);         /* Inverted to black */
+    --color-black: rgb(255 255 255);   /* Inverted to white */
+
+    /* Special light mode stuff */
+    --color-diffcolor: rgb(255 255 255);
+}
--- a/Moonlight.Client/Styles/mappings/mooncore.map
+++ b/Moonlight.Client/Styles/mappings/mooncore.map
@@ -1,171 +1,169 @@
 [
-  "!px-1",
-  "!py-1",
-  "-m-1",
-  "-m-1.5",
-  "-m-2.5",
-  "-m-3",
-  "-mx-2",
-  "-mx-4",
-  "-translate-x-1/2",
-  "-translate-x-full",
+  "pointer-events-auto",
+  "pointer-events-none",
+  "sr-only",
  "absolute",
-  "align-middle",
-  "animate-spin",
-  "backdrop-blur",
-  "bg-danger-500",
-  "bg-danger-600",
-  "bg-gradient-to-t",
-  "bg-gray-100",
-  "bg-gray-400",
-  "bg-gray-50",
-  "bg-gray-700",
-  "bg-gray-700/50",
-  "bg-gray-700/60",
-  "bg-gray-750",
-  "bg-gray-800",
-  "bg-gray-800/60",
-  "bg-gray-800/80",
-  "bg-gray-900",
-  "bg-gray-900/75",
-  "bg-gray-950",
-  "bg-indigo-500",
-  "bg-info-400",
-  "bg-slate-900",
-  "bg-success-400",
-  "bg-tertiary-500",
-  "bg-transparent",
-  "bg-warning-400",
-  "bg-white",
-  "block",
-  "border",
-  "border-0",
-  "border-2",
-  "border-b",
-  "border-b-2",
-  "border-dashed",
-  "border-gray-100/10",
-  "border-gray-600",
-  "border-gray-700",
-  "border-gray-700/60",
-  "border-none",
-  "border-primary-500",
-  "border-red-600",
-  "border-slate-700",
-  "border-t",
-  "border-transparent",
+  "fixed",
+  "relative",
+  "static",
+  "inset-0",
+  "inset-y-0",
+  "inset-y-2",
+  "right-auto",
+  "bottom-0",
  "bottom-full",
+  "-left-4",
+  "left-0",
+  "left-1/2",
+  "left-auto",
+  "isolate",
+  "z-10",
+  "z-40",
+  "z-50",
  "col-span-1",
  "col-span-2",
  "col-span-3",
+  "-m-3",
+  "m-1",
+  "m-3",
+  "m-10",
+  "mx-0.5",
+  "5);",
+  "mx-auto",
+  "my-1",
+  "my-3",
+  "my-8",
+  "ms-0.5",
+  "ms-1",
+  "ms-2",
+  "ms-3",
+  "me-1",
+  "me-2",
+  "me-2.5",
+  "me-3",
+  "mt-1",
+  "mt-2",
+  "mt-2.5",
+  "mt-3",
+  "mt-4",
+  "mt-5",
+  "mt-6",
+  "mt-8",
+  "mt-10",
+  "mt-auto",
+  "-mr-1",
+  "mr-2",
+  "mr-4",
+  "mb-1",
+  "mb-2",
+  "mb-3",
+  "mb-4",
+  "mb-5",
+  "mb-6",
+  "mb-8",
+  "-ml-4",
+  "ml-2",
+  "ml-3",
+  "ml-4",
+  "ml-auto",
+  "form-checkbox",
+  "6%",
+  "245",
+  "881);",
+  "w3.org/2000/svg\u0027%3e%3cpath",
+  "207",
+  "793a1",
+  "414l-5",
+  "414",
+  "414-1.414L6.5",
+  "086l4.293-4.293a1",
+  "w3.org/2000/svg\u0027",
+  "form-radio",
+  "w3.org/2000/svg\u0027%3e%3ccircle",
+  "form-input",
+  "5rem;",
+  "75rem;",
+  "5em;",
+  "block",
+  "flex",
+  "grid",
+  "hidden",
+  "inline",
+  "inline-block",
+  "inline-flex",
+  "inline-grid",
+  "h-4",
+  "h-5",
+  "h-8",
+  "h-10",
+  "h-12",
+  "h-20",
+  "h-64",
+  "h-[20vh]",
+  "h-full",
+  "h-screen",
+  "max-h-56",
+  "max-h-60",
+  "min-h-0",
+  "min-h-full",
+  "min-h-svh",
+  "w-0",
+  "w-0.5",
+  "w-4",
+  "w-5",
+  "w-8",
+  "w-10",
+  "w-12",
+  "w-20",
+  "w-24",
+  "w-32",
+  "w-40",
+  "w-56",
+  "w-64",
+  "w-full",
+  "w-screen",
+  "max-w-2xl",
+  "max-w-3xl",
+  "max-w-7xl",
+  "max-w-80",
+  "max-w-lg",
+  "max-w-sm",
+  "max-w-xl",
+  "min-w-0",
+  "min-w-60",
+  "flex-1",
+  "flex-shrink-0",
+  "shrink-0",
+  "flex-grow",
+  "grow",
+  "table-auto",
+  "-translate-x-1/2",
+  "-translate-x-full",
+  "translate-x-0",
+  "translate-y-0",
+  "translate-y-2",
+  "transform",
+  "animate-spin",
  "cursor-default",
  "cursor-not-allowed",
  "cursor-pointer",
-  "dark:bg-gray-700",
-  "dark:disabled:bg-gray-800",
-  "dark:disabled:border-gray-700",
-  "dark:disabled:placeholder:text-gray-600",
-  "dark:disabled:text-gray-600",
-  "dark:group-hover:text-gray-400",
-  "dark:text-gray-100",
-  "dark:text-gray-400",
-  "dark:text-gray-500",
-  "disabled:bg-gray-100",
-  "disabled:bg-gray-800",
-  "disabled:border-gray-200",
-  "disabled:border-gray-700",
-  "disabled:cursor-not-allowed",
-  "disabled:text-gray-400",
-  "disabled:text-gray-600",
-  "divide-gray-700/60",
-  "divide-y",
-  "duration-100",
-  "duration-200",
-  "duration-300",
-  "duration-75",
-  "ease-in",
-  "ease-in-out",
-  "ease-linear",
-  "ease-out",
-  "fill-current",
-  "fill-primary-600",
-  "filter",
-  "first:pl-4",
-  "fixed",
-  "flex",
-  "flex-1",
-  "flex-col",
-  "flex-grow",
-  "flex-nowrap",
-  "flex-row",
-  "flex-shrink-0",
-  "flex-wrap",
-  "focus:outline-none",
-  "focus:ring-0",
-  "focus:ring-2",
-  "focus:ring-indigo-500",
-  "focus:ring-indigo-600",
-  "focus:ring-offset-0",
-  "focus:ring-offset-2",
-  "font-bold",
-  "font-inter",
-  "font-medium",
-  "font-normal",
-  "font-semibold",
-  "form-checkbox",
-  "form-input",
-  "form-radio",
+  "list-disc",
  "form-select",
-  "from-gray-700",
-  "from-primary-700",
-  "gap-2",
-  "gap-5",
-  "gap-x-2",
-  "gap-x-3",
-  "gap-x-4",
-  "gap-x-5",
-  "gap-x-6",
-  "gap-y-2",
-  "gap-y-3",
-  "gap-y-5",
-  "gap-y-7",
-  "gap-y-8",
-  "grid",
+  "5\u0027",
+  "5rem",
+  "5em",
+  "form-textarea",
+  "grid-flow-col",
  "grid-cols-1",
  "grid-cols-2",
  "grid-cols-3",
+  "grid-cols-4",
  "grid-cols-6",
-  "grid-flow-col",
-  "group-hover:text-gray-500",
-  "group-hover:text-white",
-  "grow",
-  "h-10",
-  "h-12",
-  "h-16",
-  "h-20",
-  "h-4",
-  "h-5",
-  "h-6",
-  "h-64",
-  "h-8",
-  "h-[20vh]",
-  "hidden",
-  "hover:bg-gray-600",
-  "hover:bg-gray-700",
-  "hover:bg-gray-800",
-  "hover:bg-primary-600",
-  "hover:border-b-2",
-  "hover:border-gray-500",
-  "hover:border-gray-600",
-  "hover:border-primary-500",
-  "hover:text-gray-100",
-  "hover:text-gray-500",
-  "hover:text-info-400",
-  "hover:text-white",
-  "inline",
-  "inline-flex",
-  "inset-0",
-  "italic",
+  "grid-cols-7",
+  "grid-cols-12",
+  "flex-col",
+  "flex-row",
+  "flex-wrap",
  "items-center",
  "items-end",
  "items-start",
@@ -174,128 +172,91 @@
  "justify-end",
  "justify-start",
  "justify-stretch",
-  "last:mr-0",
-  "last:pr-4",
-  "leading-5",
-  "leading-6",
-  "leading-7",
-  "left-1/2",
-  "left-auto",
-  "left-full",
-  "lg:-mx-8",
-  "lg:bg-gray-900/10",
-  "lg:block",
-  "lg:first:pl-8",
-  "lg:fixed",
-  "lg:flex",
-  "lg:flex-col",
-  "lg:gap-x-6",
-  "lg:h-6",
-  "lg:hidden",
-  "lg:inset-y-0",
-  "lg:items-center",
-  "lg:last:pr-8",
-  "lg:pl-72",
-  "lg:px-8",
-  "lg:w-72",
-  "lg:w-px",
-  "lg:z-50",
-  "list-disc",
-  "m-1",
-  "m-10",
-  "m-3",
-  "max-h-56",
-  "max-w-3xl",
-  "max-w-lg",
-  "max-w-sm",
-  "max-w-xs",
-  "mb-1",
-  "mb-2",
-  "mb-3",
-  "mb-4",
-  "mb-5",
-  "mb-6",
-  "mb-8",
-  "md:flex-row",
-  "md:gap-x-5",
-  "md:gap-y-0",
-  "md:grid-cols-2",
-  "md:grid-cols-3",
-  "md:h-[40vh]",
-  "md:items-center",
-  "md:ms-2",
-  "md:space-x-2",
-  "md:space-y-0",
-  "md:table-cell",
-  "md:text-3xl",
-  "me-1",
-  "me-2",
-  "me-2.5",
-  "me-3",
-  "min-h-full",
-  "min-w-60",
-  "ml-2",
-  "ml-3",
-  "ml-4",
-  "ml-auto",
-  "mr-1",
-  "mr-16",
-  "mr-2",
-  "mr-3",
-  "mr-6",
-  "ms-0.5",
-  "ms-1",
-  "ms-2",
-  "ms-3",
-  "mt-1",
-  "mt-10",
-  "mt-2",
-  "mt-2.5",
-  "mt-3",
-  "mt-4",
-  "mt-5",
-  "mt-6",
-  "mt-8",
-  "mt-auto",
-  "mx-0.5",
-  "mx-2",
-  "mx-auto",
-  "my-1",
-  "my-3",
-  "my-8",
-  "opacity-0",
-  "opacity-100",
-  "origin-top-right",
+  "gap-0.5",
+  "gap-1.5",
+  "gap-2",
+  "gap-3",
+  "gap-4",
+  "gap-5",
+  "gap-6",
+  "gap-8",
+  "space-y-1",
+  "space-y-2",
+  "space-y-3",
+  "space-y-4",
+  "space-y-8",
+  "gap-x-2",
+  "space-x-0.5",
+  "5)",
+  "space-x-1",
+  "space-x-2",
+  "space-x-5",
+  "gap-y-2",
+  "gap-y-3",
+  "gap-y-5",
+  "divide-y",
+  "divide-gray-700/60",
+  "truncate",
  "overflow-auto",
  "overflow-hidden",
  "overflow-x-auto",
-  "overflow-x-scroll",
  "overflow-y-auto",
+  "rounded",
+  "25rem;",
+  "rounded-full",
+  "rounded-lg",
+  "rounded-md",
+  "rounded-t-lg",
+  "rounded-b-lg",
+  "border",
+  "border-0",
+  "border-2",
+  "border-t",
+  "border-b",
+  "border-dashed",
+  "border-none",
+  "border-gray-600",
+  "border-gray-700",
+  "border-gray-700/60",
+  "border-red-600",
+  "border-transparent",
+  "border-white/5",
+  "bg-black/30",
+  "bg-danger",
+  "bg-gray-50",
+  "bg-gray-100",
+  "bg-gray-200",
+  "bg-gray-300",
+  "bg-gray-400",
+  "bg-gray-500",
+  "bg-gray-600",
+  "bg-gray-700",
+  "bg-gray-700/50",
+  "bg-gray-700/60",
+  "bg-gray-750",
+  "bg-gray-800",
+  "bg-gray-900",
+  "bg-gray-900/75",
+  "bg-gray-950",
+  "bg-info",
+  "bg-success",
+  "bg-transparent",
+  "bg-warning",
+  "bg-white",
+  "bg-white/5",
+  "bg-gradient-to-t",
+  "from-gray-700",
+  "from-primary",
+  "to-gray-800",
+  "to-primary",
+  "fill-current",
+  "fill-primary",
  "p-0",
-  "p-1",
-  "p-1.5",
  "p-2",
-  "p-2.5",
+  "p-3",
  "p-4",
  "p-5",
-  "pb-3",
-  "pb-4",
-  "pb-6",
-  "pl-12",
-  "pl-2",
-  "pl-3",
-  "pl-5",
-  "pl-9",
-  "placeholder-gray-500",
-  "pointer-events-auto",
-  "pointer-events-none",
-  "pr-1",
-  "pr-3",
-  "pr-8",
-  "ps-4",
-  "pt-0.5",
-  "pt-5",
-  "pt-6",
+  "p-6",
  "px-1",
  "px-2",
  "px-3",
@@ -304,51 +265,119 @@
  "px-6",
  "py-1",
  "py-1.5",
-  "py-10",
  "py-2",
+  "py-2.5",
  "py-3",
  "py-6",
  "py-8",
-  "relative",
-  "right-0",
-  "right-auto",
-  "ring-1",
-  "ring-black",
-  "ring-gray-900/5",
-  "ring-opacity-5",
-  "ring-white/10",
-  "rounded",
-  "rounded-b-lg",
-  "rounded-full",
-  "rounded-lg",
-  "rounded-md",
-  "rounded-t-lg",
-  "scale-100",
-  "scale-95",
-  "select-none",
+  "ps-1",
+  "pt-0.5",
+  "pt-3",
+  "pt-5",
+  "pr-3",
+  "pr-8",
+  "pb-4",
+  "pb-6",
+  "pl-3",
+  "pl-5",
+  "pl-9",
+  "pl-12",
+  "text-center",
+  "text-left",
+  "align-middle",
+  "font-inter",
+  "text-2xl",
+  "text-3xl",
+  "text-4xl",
+  "text-base",
+  "text-base/6",
+  "text-lg",
+  "text-sm",
+  "text-sm/5",
+  "text-xl",
+  "text-xs",
+  "text-xs/5",
+  "leading-6",
+  "font-bold",
+  "font-medium",
+  "font-normal",
+  "font-semibold",
+  "text-danger",
+  "text-diffcolor",
+  "text-gray-100",
+  "text-gray-200",
+  "text-gray-300",
+  "text-gray-400",
+  "text-gray-500",
+  "text-gray-600",
+  "text-gray-700",
+  "text-gray-800",
+  "text-green-500",
+  "text-info",
+  "text-primary",
+  "text-red-500",
+  "text-success",
+  "text-tertiary",
+  "text-warning",
+  "text-white",
+  "uppercase",
+  "italic",
+  "underline",
+  "placeholder-gray-500",
+  "opacity-0",
+  "opacity-100",
  "shadow-lg",
+  "1))",
+  "1));",
  "shadow-none",
  "shadow-sm",
  "shadow-xl",
-  "shrink-0",
-  "sm:-mx-6",
-  "sm:auto-cols-max",
+  "shadow-xs",
+  "05));",
+  "ring-1",
+  "ring-black",
+  "ring-white/10",
+  "filter",
+  "transition",
+  "transition-all",
+  "transition-opacity",
+  "duration-200",
+  "duration-300",
+  "ease-in-out",
+  "ease-linear",
+  "ease-out",
+  "select-none",
+  "group-hover:text-gray-500",
+  "group):hover",
+  "hover:border-gray-500",
+  "hover:bg-gray-100",
+  "hover:bg-gray-600",
+  "hover:bg-gray-700",
+  "hover:bg-primary",
+  "hover:bg-white/5",
+  "hover:text-gray-100",
+  "hover:text-gray-500",
+  "hover:text-white",
+  "focus:ring-0",
+  "focus:ring-2",
+  "focus:ring-indigo-500",
+  "focus:ring-offset-0",
+  "focus:ring-offset-2",
+  "focus:outline-none",
+  "disabled:cursor-not-allowed",
+  "disabled:border-gray-200",
+  "disabled:border-gray-700",
+  "disabled:bg-gray-100",
+  "disabled:bg-gray-800",
+  "disabled:text-gray-400",
+  "disabled:text-gray-600",
+  "max-lg:hidden",
+  "max-lg:flex-col",
+  "sm:mt-5",
+  "sm:mt-6",
+  "sm:mb-0",
  "sm:block",
-  "sm:col-span-1",
-  "sm:col-span-2",
-  "sm:col-span-3",
-  "sm:col-span-4",
-  "sm:col-span-5",
-  "sm:col-span-6",
-  "sm:first:pl-6",
  "sm:flex",
-  "sm:gap-x-6",
-  "sm:grid-cols-6",
-  "sm:items-center",
-  "sm:items-end",
-  "sm:justify-between",
-  "sm:justify-end",
-  "sm:last:pr-6",
  "sm:max-w-2xl",
  "sm:max-w-3xl",
  "sm:max-w-4xl",
@@ -358,95 +387,91 @@
  "sm:max-w-lg",
  "sm:max-w-md",
  "sm:max-w-xl",
-  "sm:mb-0",
-  "sm:mr-3",
-  "sm:mt-5",
-  "sm:mt-6",
+  "sm:auto-cols-max",
+  "sm:items-center",
+  "sm:items-end",
+  "sm:justify-between",
+  "sm:justify-end",
  "sm:p-0",
  "sm:p-6",
+  "sm:py-2",
  "sm:pb-4",
-  "sm:px-6",
  "sm:text-sm",
-  "space-x-0.5",
-  "space-x-1",
-  "space-x-2",
-  "space-x-5",
-  "space-y-1",
-  "space-y-2",
-  "space-y-3",
-  "space-y-4",
-  "space-y-8",
-  "sr-only",
-  "static",
-  "sticky",
-  "table",
-  "table-auto",
-  "text-2xl",
-  "text-3xl",
-  "text-4xl",
-  "text-[0.625rem]",
-  "text-base",
-  "text-center",
-  "text-danger-500",
-  "text-gray-100",
-  "text-gray-200",
-  "text-gray-300",
-  "text-gray-400",
-  "text-gray-500",
-  "text-gray-600",
-  "text-gray-700",
-  "text-gray-800",
-  "text-gray-900",
-  "text-green-500",
-  "text-indigo-600",
-  "text-info-400",
-  "text-info-500",
-  "text-left",
-  "text-lg",
-  "text-primary-500",
-  "text-red-500",
-  "text-secondary-500",
-  "text-secondary-600",
-  "text-slate-600",
-  "text-sm",
-  "text-success-400",
-  "text-success-500",
-  "text-tertiary-500",
-  "text-warning-400",
-  "text-warning-500",
-  "text-white",
-  "text-xl",
-  "text-xs",
-  "to-gray-800",
-  "to-primary-600",
-  "top-0",
-  "transform",
-  "transition",
-  "transition-all",
-  "transition-opacity",
-  "translate-x-0",
-  "translate-y-0",
-  "translate-y-2",
-  "truncate",
-  "uppercase",
-  "w-0",
-  "w-10",
-  "w-12",
-  "w-16",
-  "w-20",
-  "w-24",
-  "w-32",
-  "w-4",
-  "w-40",
-  "w-5",
-  "w-6",
-  "w-8",
-  "w-auto",
-  "w-full",
-  "w-px",
-  "w-screen",
-  "whitespace-nowrap",
-  "z-10",
-  "z-40",
-  "z-50"
-]
+  "sm:text-sm/5",
+  "md:ms-2",
+  "md:table-cell",
+  "md:h-[40vh]",
+  "md:grid-cols-2",
+  "md:grid-cols-3",
+  "md:flex-row",
+  "md:items-center",
+  "md:space-y-0",
+  "md:gap-x-5",
+  "md:space-x-2",
+  "md:gap-y-0",
+  "md:text-3xl",
+  "lg:hidden",
+  "lg:min-w-0",
+  "lg:rounded-lg",
+  "lg:bg-gray-900/80",
+  "lg:bg-gray-950/80",
+  "lg:p-10",
+  "lg:pt-5",
+  "lg:pr-3.5",
+  "lg:pb-5",
+  "lg:pl-64",
+  "lg:shadow-xs",
+  "lg:ring-1",
+  "lg:ring-white/10",
+  "dark:bg-gray-700",
+  "dark:text-gray-100",
+  "dark:text-gray-400",
+  "dark:text-gray-500",
+  "dark:group-hover:text-gray-400",
+  "dark:disabled:border-gray-700",
+  "dark:disabled:bg-gray-800",
+  "dark:disabled:text-gray-600",
+  "dark:disabled:placeholder:text-gray-600",
+  "btn",
+  "btn-lg",
+  "btn-sm",
+  "btn-xs",
+  "1))",
+  "1));",
+  "5);",
+  "btn-primary",
+  "511",
+  "262",
+  "966)",
+  "btn-secondary",
+  "btn-tertiary",
+  "627",
+  "265",
+  "9)",
+  "btn-danger",
+  "586",
+  "253",
+  "585)",
+  "btn-warning",
+  "828",
+  "189",
+  "429)",
+  "btn-info",
+  "546",
+  "245",
+  "881)",
+  "btn-success",
+  "194",
+  "214)",
+  "btn:disabled",
+  "btn-lg:disabled",
+  "btn-sm:disabled",
+  "btn-xs:disabled",
+  "btn-primary:disabled",
+  "btn-secondary:disabled",
+  "btn-tertiary:disabled",
+  "btn-danger:disabled",
+  "btn-warning:disabled",
+  "btn-info:disabled",
+  "btn-success:disabled"
+]
--- a/Moonlight.Client/Styles/package-lock.json
+++ b/Moonlight.Client/Styles/package-lock.json
--- a/Moonlight.Client/Styles/package.json
+++ b/Moonlight.Client/Styles/package.json
@@ -1,8 +1,7 @@
 {
-  "devDependencies": {
-    "tailwindcss": "^3.4.11"
-  },
  "dependencies": {
-    "@tailwindcss/forms": "^0.5.9"
+    "@tailwindcss/cli": "^4.1.4",
+    "@tailwindcss/forms": "^0.5.10",
+    "tailwindcss": "^4.1.4"
  }
 }
--- a/Moonlight.Client/Styles/style.css
+++ b/Moonlight.Client/Styles/style.css
@@ -1,80 +1,32 @@
-@import "tailwindcss/base";
-@import "tailwindcss/components";
+@import "./additions/fonts.css";
+@import "tailwindcss";
+@import "./additions/theme.css" layer(theme);

-@import "additions/theme.css";
-@import "additions/animations.css";
-@import "additions/fonts.css";
-@import "additions/buttons.css";
-@import "additions/cards.css";
-@import "additions/forms.css";
-@import "additions/progress.css";
-@import "additions/scrollbar.css";
-@import "additions/loaders.css";
+/* @import "./additions/theme.white.css"; */

-@import "tailwindcss/utilities";
+@import "./additions/buttons.css" layer(components);
+@import "./additions/cards.css" layer(components);
+@import "./additions/forms.css" layer(utilities);
+@import "./additions/progress.css" layer(components);
+@import "./additions/scrollbar.css" layer(components);
+@import "./additions/loaders.css" layer(components);
+@import "./additions/tabs.css" layer(components);
+
+@plugin "@tailwindcss/forms";
+
+@source "../**/*.razor";
+@source "../**/*.cs";
+@source "../**/*.html";
+@source "./mappings/*.map";

 #blazor-error-ui {
    display: none;
 }

-#loader {
-    display: block;
-    width: 10rem;
-    height: 10rem;
-    border-radius: 50%;
-    border: 3px solid transparent;
-    border-top-color: #9370DB;
-    -webkit-animation: spin 2s linear infinite;
-    animation: spin 2s linear infinite;
-    @apply border-t-primary-500
+#blazor-loader-label:after {
+    content: var(--blazor-load-percentage-text, "Loading");
 }
-#loader:before {
-    content: "";
-    position: absolute;
-    top: 5px;
-    left: 5px;
-    right: 5px;
-    bottom: 5px;
-    border-radius: 50%;
-    border: 3px solid transparent;
-    -webkit-animation: spin 3s linear infinite;
-    animation: spin 3s linear infinite;
-    @apply border-t-tertiary-500
-}
-#loader:after {
-    content: "";
-    position: absolute;
-    top: 15px;
-    left: 15px;
-    right: 15px;
-    bottom: 15px;
-    border-radius: 50%;
-    border: 3px solid transparent;
-    -webkit-animation: spin 1.5s linear infinite;
-    animation: spin 1.5s linear infinite;
-    @apply border-t-info-500
-}
-@-webkit-keyframes spin {
-    0%   {
-        -webkit-transform: rotate(0deg);
-        -ms-transform: rotate(0deg);
-        transform: rotate(0deg);
-    }
-    100% {
-        -webkit-transform: rotate(360deg);
-        -ms-transform: rotate(360deg);
-        transform: rotate(360deg);
-    }
-}
-@keyframes spin {
-    0%   {
-        -webkit-transform: rotate(0deg);
-        -ms-transform: rotate(0deg);
-        transform: rotate(0deg);
-    }
-    100% {
-        -webkit-transform: rotate(360deg);
-        -ms-transform: rotate(360deg);
-        transform: rotate(360deg);
-    }
+
+#blazor-loader-progress {
+    width: var(--blazor-load-percentage, 0%);
 }
--- a/Moonlight.Client/Styles/tailwind.config.js
+++ b/Moonlight.Client/Styles/tailwind.config.js
@@ -1,132 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-    content: [
-        '../**/*.razor',
-        'mappings/*.map'
-    ],
-    theme: {
-        extend: {
-            fontFamily: {
-                inter: ['Inter', 'sans-serif'],
-                scp: ['Source Code Pro', 'mono'],
-            },
-            colors: {
-                primary: {
-                    50: 'rgb(var(--color-primary-50))',
-                    100: 'rgb(var(--color-primary-100))',
-                    200: 'rgb(var(--color-primary-200))',
-                    300: 'rgb(var(--color-primary-300))',
-                    400: 'rgb(var(--color-primary-400))',
-                    500: 'rgb(var(--color-primary-500))',
-                    600: 'rgb(var(--color-primary-600))',
-                    700: 'rgb(var(--color-primary-700))',
-                    800: 'rgb(var(--color-primary-800))',
-                    900: 'rgb(var(--color-primary-900))',
-                    950: 'rgb(var(--color-primary-950))'
-                },
-                secondary: {
-                    100: 'rgb(var(--color-secondary-100))',
-                    200: 'rgb(var(--color-secondary-200))',
-                    300: 'rgb(var(--color-secondary-300))',
-                    400: 'rgb(var(--color-secondary-400))',
-                    500: 'rgb(var(--color-secondary-500))',
-                    600: 'rgb(var(--color-secondary-600))',
-                    700: 'rgb(var(--color-secondary-700))',
-                    800: 'rgb(var(--color-secondary-800))',
-                    900: 'rgb(var(--color-secondary-900))',
-                    950: 'rgb(var(--color-secondary-950))'
-                },
-                tertiary: {
-                    50: 'rgb(var(--color-tertiary-50))',
-                    100: 'rgb(var(--color-tertiary-100))',
-                    200: 'rgb(var(--color-tertiary-200))',
-                    300: 'rgb(var(--color-tertiary-300))',
-                    400: 'rgb(var(--color-tertiary-400))',
-                    500: 'rgb(var(--color-tertiary-500))',
-                    600: 'rgb(var(--color-tertiary-600))',
-                    700: 'rgb(var(--color-tertiary-700))',
-                    800: 'rgb(var(--color-tertiary-800))',
-                    900: 'rgb(var(--color-tertiary-900))',
-                    950: 'rgb(var(--color-tertiary-950))'
-                },
-                warning: {
-                    50: 'rgb(var(--color-warning-50))',
-                    100: 'rgb(var(--color-warning-100))',
-                    200: 'rgb(var(--color-warning-200))',
-                    300: 'rgb(var(--color-warning-300))',
-                    400: 'rgb(var(--color-warning-400))',
-                    500: 'rgb(var(--color-warning-500))',
-                    600: 'rgb(var(--color-warning-600))',
-                    700: 'rgb(var(--color-warning-700))',
-                    800: 'rgb(var(--color-warning-800))',
-                    900: 'rgb(var(--color-warning-900))',
-                    950: 'rgb(var(--color-warning-950))'
-                },
-                danger: {
-                    50: 'rgb(var(--color-danger-50))',
-                    100: 'rgb(var(--color-danger-100))',
-                    200: 'rgb(var(--color-danger-200))',
-                    300: 'rgb(var(--color-danger-300))',
-                    400: 'rgb(var(--color-danger-400))',
-                    500: 'rgb(var(--color-danger-500))',
-                    600: 'rgb(var(--color-danger-600))',
-                    700: 'rgb(var(--color-danger-700))',
-                    800: 'rgb(var(--color-danger-800))',
-                    900: 'rgb(var(--color-danger-900))',
-                    950: 'rgb(var(--color-danger-950))'
-                },
-                success: {
-                    50: 'rgb(var(--color-success-50))',
-                    100: 'rgb(var(--color-success-100))',
-                    200: 'rgb(var(--color-success-200))',
-                    300: 'rgb(var(--color-success-300))',
-                    400: 'rgb(var(--color-success-400))',
-                    500: 'rgb(var(--color-success-500))',
-                    600: 'rgb(var(--color-success-600))',
-                    700: 'rgb(var(--color-success-700))',
-                    800: 'rgb(var(--color-success-800))',
-                    900: 'rgb(var(--color-success-900))',
-                    950: 'rgb(var(--color-success-950))'
-                },
-                info: {
-                    50: 'rgb(var(--color-info-50))',
-                    100: 'rgb(var(--color-info-100))',
-                    200: 'rgb(var(--color-info-200))',
-                    300: 'rgb(var(--color-info-300))',
-                    400: 'rgb(var(--color-info-400))',
-                    500: 'rgb(var(--color-info-500))',
-                    600: 'rgb(var(--color-info-600))',
-                    700: 'rgb(var(--color-info-700))',
-                    800: 'rgb(var(--color-info-800))',
-                    900: 'rgb(var(--color-info-900))',
-                    950: 'rgb(var(--color-info-950))'
-                },
-                gray: {
-                    100: 'rgb(var(--color-gray-100))',
-                    200: 'rgb(var(--color-gray-200))',
-                    300: 'rgb(var(--color-gray-300))',
-                    400: 'rgb(var(--color-gray-400))',
-                    500: 'rgb(var(--color-gray-500))',
-                    600: 'rgb(var(--color-gray-600))',
-                    700: 'rgb(var(--color-gray-700))',
-                    750: 'rgb(var(--color-gray-750))',
-                    800: 'rgb(var(--color-gray-800))',
-                    900: 'rgb(var(--color-gray-900))',
-                    950: 'rgb(var(--color-gray-950))'
-                },
-                white: 'rgb(var(--color-light))',
-                black: 'rgb(var(--color-dark))'
-            },
-            textColor:{
-                diffcolor: 'rgb(var(--color-diffcolor, var(--color-light)))'
-            },
-            animation: {
-                'shimmer': 'shimmer 2s linear infinite',
-            }
-        },
-    },
-    plugins: [
-        require('@tailwindcss/forms')
-    ],
-}
-
--- a/Moonlight.Client/UI/Components/StatCard.razor
+++ b/Moonlight.Client/UI/Components/StatCard.razor
@@ -3,7 +3,7 @@
        <p class="text-xl font-semibold text-slate-200">
            @Text
        </p>
-        <i class="@Icon text-4xl text-primary-500"></i>
+        <i class="@Icon text-4xl text-primary"></i>
    </div>
    <p class="text-base text-slate-300">@Title</p>
 </div>
--- a/Moonlight.Client/UI/Layouts/MainLayout.razor
+++ b/Moonlight.Client/UI/Layouts/MainLayout.razor
@@ -4,12 +4,12 @@

@inherits LayoutComponentBase

-<div class="relative isolate flex min-h-svh w-full max-lg:flex-col bg-gray-950">
+<div class="relative isolate flex min-h-svh w-full max-lg:flex-col bg-gray-900 lg:bg-gray-950/80">
    <AppSidebar Layout="this"/>
    <AppHeader Layout="this" />

    <main class="flex flex-1 flex-col lg:pb-5 lg:min-w-0 lg:pt-5 lg:pr-3.5 lg:pl-64">
-        <div class="grow p-6 lg:rounded-lg lg:p-10 lg:ring-1 lg:shadow-xs lg:bg-gray-900 lg:ring-white/10">
+        <div class="grow p-6 lg:rounded-lg lg:p-10 lg:ring-1 lg:shadow-xs lg:bg-gray-900/80 lg:ring-white/10">
            <div class="mx-auto max-w-7xl">
                <CascadingValue Value="this" IsFixed="true">
                    @Body
@@ -23,6 +23,19 @@
 <ToastLauncher/>
 <ModalLauncher/>

+<div id="blazor-error-ui" class="fixed bottom-0 left-0 w-full z-50">
+    <div class="bg-danger-600 text-white p-4 flex flex-row justify-between items-center">
+        <div class="flex items-center">
+            <i class="icon-bomb text-lg text-white me-2"></i>
+            <span>An unhandled error has occurred.</span>
+        </div>
+        <div>
+            <a href="#" class="reload text-white underline mr-4">Reload</a>
+            <a href="#" class="dismiss hidden">🗙</a>
+        </div>
+    </div>
+</div>
+
@code
 {
    // Mobile navigation
--- a/Moonlight.Client/UI/Partials/Design/ThemeSettings.razor
+++ b/Moonlight.Client/UI/Partials/Design/ThemeSettings.razor
@@ -56,7 +56,7 @@
        AddSetting("primary", "primary-200", 199, 210, 254);
        AddSetting("primary", "primary-300", 165, 180, 252);
        AddSetting("primary", "primary-400", 129, 140, 248);
-        AddSetting("primary", "primary-500", 99, 102, 241);
+        AddSetting("primary", "primary", 99, 102, 241);
        AddSetting("primary", "primary-600", 79, 70, 229);
        AddSetting("primary", "primary-700", 67, 56, 202);
        AddSetting("primary", "primary-800", 55, 48, 163);
@@ -81,7 +81,7 @@
        AddSetting("tertiary", "tertiary-200", 221, 214, 254);
        AddSetting("tertiary", "tertiary-300", 196, 181, 253);
        AddSetting("tertiary", "tertiary-400", 167, 139, 250);
-        AddSetting("tertiary", "tertiary-500", 139, 92, 246);
+        AddSetting("tertiary", "tertiary", 139, 92, 246);
        AddSetting("tertiary", "tertiary-600", 124, 58, 237);
        AddSetting("tertiary", "tertiary-700", 109, 40, 217);
        AddSetting("tertiary", "tertiary-800", 91, 33, 182);
@@ -107,7 +107,7 @@
        AddSetting("danger", "danger-200", 254, 202, 202);
        AddSetting("danger", "danger-300", 252, 165, 165);
        AddSetting("danger", "danger-400", 248, 113, 113);
-        AddSetting("danger", "danger-500", 239, 68, 68);
+        AddSetting("danger", "danger", 239, 68, 68);
        AddSetting("danger", "danger-600", 220, 38, 38);
        AddSetting("danger", "danger-700", 185, 28, 28);
        AddSetting("danger", "danger-800", 153, 27, 27);
@@ -120,7 +120,7 @@
        AddSetting("success", "success-200", 187, 247, 208);
        AddSetting("success", "success-300", 134, 239, 172);
        AddSetting("success", "success-400", 74, 222, 128);
-        AddSetting("success", "success-500", 34, 197, 94);
+        AddSetting("success", "success", 34, 197, 94);
        AddSetting("success", "success-600", 22, 163, 74);
        AddSetting("success", "success-700", 21, 128, 61);
        AddSetting("success", "success-800", 22, 101, 52);
--- a/Moonlight.Client/UI/Views/Admin/Api/Index.razor
+++ b/Moonlight.Client/UI/Views/Admin/Api/Index.razor
@@ -10,38 +10,38 @@
@inject ToastService ToastService

 <div class="grid grid-cols-1 sm:grid-cols-3 mb-8 gap-x-3 gap-y-2 sm:gap-y-0">
-    <div class="col-span-1 card card-body border-l-4 border-primary-500">
+    <div class="col-span-1 card card-body border-l-4 border-primary">
        <p class="font-medium tracking-wide text-slate-100">
            API Documentation
        </p>
-        <a href="/api/swagger" target="_blank" class="mt-2 flex items-center justify-between text-primary-500">
+        <a href="/api/swagger" target="_blank" class="mt-2 flex items-center justify-between text-primary">
            <div class="font-medium">Open</div>
            <div>
-                <i class="bi bi-box-arrow-up-right text-lg text-primary-500"></i>
+                <i class="bi bi-box-arrow-up-right text-lg text-primary"></i>
            </div>
        </a>
    </div>

-    <div class="col-span-1 card card-body border-l-4 border-tertiary-500">
+    <div class="col-span-1 card card-body border-l-4 border-tertiary">
        <p class="font-medium tracking-wide text-slate-100">
            Learn about the api usage
        </p>
-        <a href="https://help.moonlightpanel.xyz" target="_blank" class="mt-2 flex items-center justify-between text-primary-500">
+        <a href="https://help.moonlightpanel.xyz" target="_blank" class="mt-2 flex items-center justify-between text-primary">
            <div class="font-medium">Open</div>
            <div>
-                <i class="bi bi-box-arrow-up-right text-lg text-tertiary-500"></i>
+                <i class="bi bi-box-arrow-up-right text-lg text-tertiary"></i>
            </div>
        </a>
    </div>

-    <div class="col-span-1 card card-body border-l-4 border-success-500">
+    <div class="col-span-1 card card-body border-l-4 border-success">
        <p class="font-medium tracking-wide text-slate-100">
            Open API Specification
        </p>
-        <a href="/api/swagger/main" target="_blank" class="mt-2 flex items-center justify-between text-primary-500">
+        <a href="/api/swagger/main" target="_blank" class="mt-2 flex items-center justify-between text-primary">
            <div class="font-medium">Open</div>
            <div>
-                <i class="bi bi-box-arrow-up-right text-lg text-success-500"></i>
+                <i class="bi bi-box-arrow-up-right text-lg text-success"></i>
            </div>
        </a>
    </div>
@@ -67,12 +67,12 @@
        <DataTableColumn TItem="ApiKeyResponse">
            <ColumnTemplate>
                <div class="flex justify-end">
-                    <a href="/admin/api/@(context.Id)" class="text-primary-500 mr-2 sm:mr-3">
+                    <a href="/admin/api/@(context.Id)" class="text-primary mr-2 sm:mr-3">
                        <i class="icon-pencil text-base"></i>
                    </a>

                    <a href="#" @onclick="() => Delete(context)" @onclick:preventDefault
-                       class="text-danger-500">
+                       class="text-danger">
                        <i class="icon-trash text-base"></i>
                    </a>
                </div>
--- a/Moonlight.Client/UI/Views/Admin/Sys/Advanced.razor
+++ b/Moonlight.Client/UI/Views/Admin/Sys/Advanced.razor
@@ -8,7 +8,7 @@
@inject HttpApiClient ApiClient
@inject DownloadService DownloadService

-<div class="mb-3">
+<div class="mb-5">
    <NavTabs Index="4" Names="UiConstants.AdminNavNames" Links="UiConstants.AdminNavLinks" />
 </div>

@@ -22,7 +22,7 @@
                If you want to host your moonlight frontend on a static web server instead of it being hosted by the api server
                (useful for hosting on a cdn for high availability) you can use this helper. By pressing the button below moonlight
                will generate a zip file containing everything you need to host the frontend. Next to the WASM app itself it automatically
-                includes your installed theme and plugins. For more information, have a look at <a class="text-primary-500" href="https://help.moonlightpanel.xyz">our docs</a>
+                includes your installed theme and plugins. For more information, have a look at <a class="text-primary" href="https://help.moonlightpanel.xyz">our docs</a>
            </p>
            
            <WButton OnClick="GenerateFrontend" CssClasses="btn btn-primary mt-5">Generate frontend.zip</WButton>
--- a/Moonlight.Client/UI/Views/Admin/Sys/Files.razor
+++ b/Moonlight.Client/UI/Views/Admin/Sys/Files.razor
@@ -12,7 +12,7 @@
@inject DownloadService DownloadService
@inject LocalStorageService LocalStorageService

-<div class="mb-3">
+<div class="mb-5">
    <NavTabs Index="2" Names="UiConstants.AdminNavNames" Links="UiConstants.AdminNavLinks"/>
 </div>

--- a/Moonlight.Client/UI/Views/Admin/Sys/Hangfire.razor
+++ b/Moonlight.Client/UI/Views/Admin/Sys/Hangfire.razor
@@ -9,7 +9,7 @@

@inject HttpApiClient ApiClient

-<div class="mb-3">
+<div class="mb-5">
    <NavTabs Index="3" Names="UiConstants.AdminNavNames" Links="UiConstants.AdminNavLinks"/>
 </div>

--- a/Moonlight.Client/UI/Views/Admin/Sys/Index.razor
+++ b/Moonlight.Client/UI/Views/Admin/Sys/Index.razor
@@ -9,7 +9,7 @@

@inject HttpApiClient ApiClient

-<div class="mb-3">
+<div class="mb-5">
    <NavTabs Index="0" Names="UiConstants.AdminNavNames" Links="UiConstants.AdminNavLinks" />
 </div>

--- a/Moonlight.Client/UI/Views/Admin/Sys/Theme.razor
+++ b/Moonlight.Client/UI/Views/Admin/Sys/Theme.razor
@@ -5,7 +5,7 @@

@attribute [RequirePermission("admin.system.theme")]

-<div class="mb-3">
+<div class="mb-5">
    <NavTabs Index="1" Names="UiConstants.AdminNavNames" Links="UiConstants.AdminNavLinks" />
 </div>

--- a/Moonlight.Client/UI/Views/Admin/Users/Index.razor
+++ b/Moonlight.Client/UI/Views/Admin/Users/Index.razor
@@ -27,12 +27,12 @@
        <DataTableColumn TItem="UserResponse">
            <ColumnTemplate>
                <div class="flex justify-end">
-                    <a href="/admin/users/@(context.Id)" class="text-primary-500 mr-2 sm:mr-3">
+                    <a href="/admin/users/@(context.Id)" class="text-primary mr-2 sm:mr-3">
                        <i class="icon-pencil text-base"></i>
                    </a>

                    <a href="#" @onclick="() => Delete(context)" @onclick:preventDefault
-                       class="text-danger-500">
+                       class="text-danger">
                        <i class="icon-trash text-base"></i>
                    </a>
                </div>
--- a/Moonlight.Client/wwwroot/index.html
+++ b/Moonlight.Client/wwwroot/index.html
@@ -15,17 +15,18 @@
 <body class="bg-gray-950 text-white font-inter h-full">
    <div id="app">

-        <div class="h-full w-full min-h-[100dvh] flex items-center justify-center">
-            <div id="loader"></div>
+        <div class="flex h-screen justify-center items-center">
+            <div class="sm:max-w-lg">
+                <div id="blazor-loader-label" class="text-center mb-2 text-lg font-semibold"></div>
+                <div class="flex flex-col gap-1">
+                    <div class="progress min-w-sm md:min-w-md" role="progressbar">
+                        <div id="blazor-loader-progress" class="progress-bar"></div>
+                    </div>
+                </div>
+            </div>
        </div>
        
    </div>
-
-    <div id="blazor-error-ui">
-        An unhandled error has occurred.
-        <a href="" class="reload">Reload</a>
-        <a class="dismiss">🗙</a>
-    </div>
    
    <script src="/js/moonlight.js"></script>
    <script src="/js/moonCore.js"></script>