refactor: move font size overrides for SsoButton to standalone-mount.ts

- Removed inline CSS from SsoButton.ce.vue and added font size overrides in standalone-mount.ts for better organization and maintainability.
- This change centralizes styling management for the SSO button component, improving clarity and reducing redundancy.

Author: elibosley

web/components/SsoButton.ce.vue

@@ -6,25 +6,5 @@ import SsoButtons from './sso/SsoButtons.vue';
   <SsoButtons />
 </template>
 
-<style>
-/* Font size overrides for 16px base (standard Tailwind sizing) */
-:root {
-  /* Text sizes - standard Tailwind rem values */
-  --text-xs: 0.75rem; /* 12px */
-  --text-sm: 0.875rem; /* 14px */
-  --text-base: 1rem; /* 16px */
-  --text-lg: 1.125rem; /* 18px */
-  --text-xl: 1.25rem; /* 20px */
-  --text-2xl: 1.5rem; /* 24px */
-  --text-3xl: 1.875rem; /* 30px */
-  --text-4xl: 2.25rem; /* 36px */
-  --text-5xl: 3rem; /* 48px */
-  --text-6xl: 3.75rem; /* 60px */
-  --text-7xl: 4.5rem; /* 72px */
-  --text-8xl: 6rem; /* 96px */
-  --text-9xl: 8rem; /* 128px */
-  
-  /* Spacing - standard Tailwind value */
-  --spacing: 0.25rem; /* 4px */
-}
-</style>
+<!-- Font size overrides are handled in standalone-mount.ts for custom elements -->
+

web/components/standalone-mount.ts

@@ -83,6 +83,23 @@ function injectPreRenderCSS() {
     unraid-api-key-authorize.unapi {
       opacity: 1;
     }
+    
+    /* Font size overrides for SSO button component */
+    unraid-sso-button {
+      --text-xs: 0.75rem;
+      --text-sm: 0.875rem;
+      --text-base: 1rem;
+      --text-lg: 1.125rem;
+      --text-xl: 1.25rem;
+      --text-2xl: 1.5rem;
+      --text-3xl: 1.875rem;
+      --text-4xl: 2.25rem;
+      --text-5xl: 3rem;
+      --text-6xl: 3.75rem;
+      --text-7xl: 4.5rem;
+      --text-8xl: 6rem;
+      --text-9xl: 8rem;
+    }
   `;
   document.head.appendChild(style);
 }