feat: tweak styles

assets/css/main.css

@@ -29,6 +29,9 @@
     /* Fix for elements jumping around with overflow-auto */
     * {
         scrollbar-gutter: stable;
+
+        /*min-width: 0;*/
+        /*min-height: 0;*/
     }
 }
 

components/pages/home/Newsletter.vue

@@ -2,7 +2,7 @@
 
 <template>
   <div
-    class="relative isolate overflow-hidden bg-transparent px-6 pb-12 pt-16 shadow-2xl sm:rounded-3xl sm:px-24 xl:py-32"
+    class="relative isolate overflow-hidden bg-transparent px-6 pb-12 pt-16 shadow-2xl sm:rounded-3xl sm:px-24 sm:py-28"
   >
     <h2 class="mx-auto max-w-2xl text-center text-3xl font-bold tracking-tight text-base-content-highlight sm:text-4xl">
       Newsletter
@@ -24,7 +24,7 @@
       <input
         id="email-address"
         autocomplete="email"
-        class="focus-visible:focus-outline-util min-w-0 flex-auto rounded-md border-0 bg-base-0/5 px-3.5 py-2 text-base-content-highlight ring-1 ring-inset ring-base-0/10 sm:text-sm sm:leading-6"
+        class="focus-visible:focus-outline-util min-w-0 flex-auto rounded-md border-0 bg-base-0/10 px-3.5 py-2 text-base-content-highlight ring-1 ring-inset ring-base-0/10 sm:text-sm sm:leading-6"
         name="email"
         placeholder="Enter your email"
         required=""

components/pages/home/SimpleSearch.vue

@@ -83,7 +83,7 @@
         <!-- Input -->
         <ComboboxInput
           :displayValue="(tag) => tag?.name"
-          class="focus-visible:focus-outline-util hover:hover-bg-util hover:hover-text-util w-full rounded-full border-0 bg-base-0/5 px-9 py-2 text-base-content-highlight ring-1 ring-inset ring-base-0/10 sm:text-sm"
+          class="focus-visible:focus-outline-util hover:hover-bg-util hover:hover-text-util w-full rounded-full border-0 bg-transparent px-9 py-2 text-base-content-highlight ring-1 ring-inset ring-base-0/20 sm:text-sm"
           placeholder="Search for tags: genshin_impact"
           @change="onComboboxInputChange"
         />

components/pages/posts/navigation/DomainSelector.vue

@@ -48,8 +48,8 @@
     >
       <!-- Select -->
       <ListboxButton
-        :class="[props.compact ? 'flex w-auto items-stretch !rounded-full !p-0' : 'w-56']"
-        class="hover:hover-text-util focus-visible:focus-outline-util hover:hover-bg-util relative cursor-default rounded-md py-1.5 pl-3 pr-10 text-left ring-1 ring-inset ring-base-0/20 sm:text-sm sm:leading-6"
+        :class="[props.compact ? 'flex w-auto items-stretch !rounded-full !p-2.5' : 'w-56']"
+        class="hover:hover-text-util focus-visible:focus-outline-util hover:hover-bg-util relative cursor-default rounded-md py-1.5 pl-3 pr-10 text-left ring-1 ring-inset ring-base-0/20 bg-transparent sm:text-sm sm:leading-6"
         v-bind="$attrs"
       >
         <span class="flex items-center">

pages/index.vue

@@ -443,7 +443,7 @@
           />
 
           <button
-            class="focus-visible:focus-outline-util hover:hover-bg-util hover:hover-text-util rounded-full border-0 bg-base-1000 p-2.5 ring-1 ring-inset ring-base-0/20 sm:text-sm"
+            class="focus-visible:focus-outline-util hover:hover-bg-util hover:hover-text-util rounded-full border-0 bg-transparent p-2.5 ring-1 ring-inset ring-base-0/20 sm:text-sm"
             @click="onSearchSubmit()"
           >
             <span class="sr-only"> Go to {{ selectedBooru.domain }}</span>

pages/premium/sign-in.vue

@@ -91,7 +91,7 @@ definePageMeta({
                 id='license'
                 v-model.trim='formData.password'
                 autocomplete='current-password'
-                class='focus-visible:focus-outline-util block w-full rounded-md border-0 bg-base-0/5 py-1.5 text-base-content-highlight shadow-sm ring-1 ring-inset ring-base-0/10 focus-visible:ring-inset sm:text-sm sm:leading-6'
+                class='focus-visible:focus-outline-util block w-full rounded-md border-0 bg-transparent py-1.5 text-base-content-highlight shadow-sm ring-1 ring-inset ring-base-0/20 sm:text-sm sm:leading-6'
                 name='password'
                 required
                 type='password'