Make the app feel more native & use transparency on windows & macos

src/App.css

@@ -5,8 +5,7 @@
 }
 
 body {
-  @apply bg-(--col0) text-white h-screen text-center select-none relative;
-  font-family: "Lexend", sans-serif;
+  @apply text-white h-screen text-center select-none relative;
 
   --col0: rgb(8, 8, 8);
   --col1: rgb(16, 16, 16);
@@ -39,7 +38,7 @@ p {
 }
 
 button {
-  @apply bg-(--col1) hover:bg-(--col3) border border-(--col3) hover:border-(--col5) rounded-lg cursor-pointer transition-all;
+  @apply bg-(--col1)/50 hover:bg-(--col3)/50 border border-(--col3)/50 hover:border-(--col5)/50 rounded-lg cursor-pointer transition-all;
 }
 
 .preset-buttons,
@@ -53,7 +52,7 @@ button {
 }
 
 .char-selection-buttons button.char-selected {
-  @apply bg-(--col3) hover:bg-(--col5) border-(--col5) hover:border-(--col7) -translate-y-0.5;
+  @apply bg-(--col3)/50 hover:bg-(--col5)/50 border-(--col5)/50 hover:border-(--col7)/50 -translate-y-0.5;
 }
 
 .generate-btn {
@@ -65,7 +64,7 @@ button {
 }
 
 .password-display {
-  @apply w-full mb-2 p-2 bg-(--col1) border border-(--col3) rounded-lg wrap-break-word text-sm max-h-36 overflow-y-auto select-text;
+  @apply w-full mb-2 p-2 bg-(--col1)/50 border border-(--col3)/50 rounded-lg wrap-break-word text-sm max-h-48 overflow-y-auto select-text;
 }
 
 .result-buttons {

src/App.tsx

@@ -1,6 +1,5 @@
-import { useState, useEffect, useCallback } from 'react'
-import '@fontsource/lexend'
 import './App.css'
+import { useState, useEffect, useCallback } from 'react'
 import { writeText } from '@tauri-apps/plugin-clipboard-manager'
 import { platform } from '@tauri-apps/plugin-os'
 
@@ -64,7 +63,7 @@ function App () {
             : 'h-[calc(100vh-32px)] top-4 rounded-lg'
         }`}
       >
-        <h1>Password Generator</h1>
+        <p className='text-3xl font-bold'>Password Generator</p>
         <p>Select a length, or use the slider for a custom value.</p>
 
         <form

src/main.tsx

@@ -2,6 +2,10 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App'
 
+const params = new URLSearchParams(window.location.search)
+const html = document.documentElement
+html.className = params.get('transparent') ? 'bg-transparent' : 'bg-black'
+
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
     <App />