chore: improve links color in alerts

unjs · Feb 27, 2024 · 58ca050 · 58ca050
1 parent dddfed4
commit 58ca050
Show file tree

Hide file tree

Showing 5 changed files with 5 additions and 15 deletions.
diff --git a/app/components/global/Caution.vue b/app/components/global/Caution.vue
@@ -3,11 +3,9 @@
     title="Caution"
     icon="i-ph-warning-octagon-duotone"
     color="red"
-    class="dark:!bg-red-800/40 !bg-red-200/40 dark:!border-red-600/30 !border-red-400/30"
+    class="prose-a:text-red-500 hover:prose-a:border-red-500 dark:prose-a:text-red-400 dark:hover:prose-a:border-red-400 dark:!bg-red-800/40 !bg-red-200/40 dark:!border-red-600/30 !border-red-400/30"
     :class="$attrs.to ? 'dark:hover:!border-red-600/50 hover:!border-red-400/50' : ''"
   >
     <ContentSlot :use="$slots.default" unwrap="p" />
   </Alert>
 </template>
-
-<script setup lang="ts"></script>
diff --git a/app/components/global/Important.vue b/app/components/global/Important.vue
@@ -3,11 +3,9 @@
     title="Important"
     icon="i-ph-warning-diamond-duotone"
     color="violet"
-    class="dark:!bg-violet-800/30 !bg-violet-200/50 dark:!border-violet-600/30 !border-violet-400/30"
+    class="prose-a:text-violet-500 hover:prose-a:border-violet-500 dark:prose-a:text-violet-400 dark:hover:prose-a:border-violet-400 dark:!bg-violet-800/30 !bg-violet-200/50 dark:!border-violet-600/30 !border-violet-400/30"
     :class="$attrs.to ? 'dark:hover:!border-violet-600/50 hover:!border-violet-400/50' : ''"
   >
     <ContentSlot :use="$slots.default" unwrap="p" />
   </Alert>
 </template>
-
-<script setup lang="ts"></script>
diff --git a/app/components/global/Note.vue b/app/components/global/Note.vue
@@ -3,11 +3,9 @@
     title="Note"
     icon="i-ph-info-duotone"
     color="blue"
-    class="dark:!bg-blue-800/40 !bg-blue-200/40 dark:!border-blue-600/30 !border-blue-400/30"
+    class="prose-a:text-blue-500 hover:prose-a:border-blue-500 dark:prose-a:text-blue-400 dark:hover:prose-a:border-blue-400 dark:!bg-blue-800/40 !bg-blue-200/40 dark:!border-blue-600/30 !border-blue-400/30"
     :class="$attrs.to ? 'dark:hover:!border-blue-600/50 hover:!border-blue-400/50' : ''"
   >
     <ContentSlot :use="$slots.default" unwrap="p" />
   </Alert>
 </template>
-
-<script setup lang="ts"></script>
diff --git a/app/components/global/Tip.vue b/app/components/global/Tip.vue
@@ -3,11 +3,9 @@
     title="Tip"
     icon="i-ph-lightbulb-duotone"
     color="green"
-    class="dark:!bg-green-800/40 !bg-green-200/40 dark:!border-green-600/30 !border-green-400/30"
+    class="prose-a:text-green-500 hover:prose-a:border-green-500 dark:prose-a:text-green-400 dark:hover:prose-a:border-green-400 dark:!bg-green-800/40 !bg-green-200/40 dark:!border-green-600/30 !border-green-400/30"
     :class="$attrs.to ? 'dark:hover:!border-green-600/50 hover:!border-green-400/50' : ''"
   >
     <ContentSlot :use="$slots.default" unwrap="p" />
   </Alert>
 </template>
-
-<script setup lang="ts"></script>
diff --git a/app/components/global/Warning.vue b/app/components/global/Warning.vue
@@ -3,11 +3,9 @@
     title="Warning"
     icon="i-ph-warning-duotone"
     color="amber"
-    class="dark:!bg-amber-800/40 dark:!border-amber-800/40 !bg-amber-200/30 !border-amber-400/30"
+    class="prose-a:text-amber-500 hover:prose-a:border-amber-500 dark:prose-a:text-amber-400 dark:hover:prose-a:border-amber-400 dark:!bg-amber-800/40 dark:!border-amber-800/40 !bg-amber-200/30 !border-amber-400/30"
     :class="$attrs.to ? 'dark:hover:!border-amber-600/50 hover:!border-amber-400/50' : ''"
   >
     <ContentSlot :use="$slots.default" unwrap="p" />
   </Alert>
 </template>
-
-<script setup lang="ts"></script>