From a0a9e5f61fb0c27451a11e54eeefe509bb676a90 Mon Sep 17 00:00:00 2001
From: Refringe <me@refringe.com>
Date: Thu, 6 Feb 2025 10:50:45 -0500
Subject: [PATCH] Resolves PostCSS utility class error

---
 resources/css/app.css                         | 45 +++++++------------
 resources/views/components/mod-card.blade.php |  2 +-
 resources/views/mod/show.blade.php            |  4 +-
 3 files changed, 18 insertions(+), 33 deletions(-)

diff --git a/resources/css/app.css b/resources/css/app.css
index 163b347..8553bd0 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -12,14 +12,6 @@
     --font-sans: Figtree, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
 }
 
-/*
-  The default border color has changed to `currentColor` in Tailwind CSS v4,
-  so we've added these compatibility styles to make sure everything still
-  looks the same as it did with Tailwind CSS v3.
-
-  If we ever want to remove these styles, we need to add an explicit border
-  color utility to any element that depends on these defaults.
-*/
 @layer base {
     *,
     ::after,
@@ -120,34 +112,27 @@ main a:not(.mod-list-component):not(.tab):not([role="menuitem"]) {
     }
 }
 
-@layer components {
-    .ribbon {
-        font-size: 18px;
-        font-weight: bold;
-        @apply text-white bg-cyan-500 dark:bg-cyan-700;
-    }
-
-    .ribbon {
-        --f: .5em;
-        position: absolute;
-        top: 0;
-        left: 0;
-        line-height: 1.5;
-        padding-inline: 1lh;
-        padding-bottom: var(--f);
-        border-image: conic-gradient(#0008 0 0) 51%/var(--f);
-        clip-path: polygon(100% calc(100% - var(--f)), 100% 100%, calc(100% - var(--f)) calc(100% - var(--f)), var(--f) calc(100% - var(--f)), 0 100%, 0 calc(100% - var(--f)), 999px calc(100% - var(--f) - 999px), calc(100% - 999px) calc(100% - var(--f) - 999px));
-        transform: translate(calc((cos(45deg) - 1) * 100%), -100%) rotate(-45deg);
-        transform-origin: 100% 100%;
-    }
+.ribbon {
+    --f: .5em;
+    position: absolute;
+    top: 0;
+    left: 0;
+    line-height: 1.5;
+    font-size: 18px;
+    font-weight: bold;
+    padding-inline: 1lh;
+    padding-bottom: var(--f);
+    border-image: conic-gradient(#0008 0 0) 51%/var(--f);
+    clip-path: polygon(100% calc(100% - var(--f)), 100% 100%, calc(100% - var(--f)) calc(100% - var(--f)), var(--f) calc(100% - var(--f)), 0 100%, 0 calc(100% - var(--f)), 999px calc(100% - var(--f) - 999px), calc(100% - 999px) calc(100% - var(--f) - 999px));
+    transform: translate(calc((cos(45deg) - 1) * 100%), -100%) rotate(-45deg);
+    transform-origin: 100% 100%;
+    @apply text-white bg-cyan-500 dark:bg-cyan-700;
 }
 
 .ribbon-red {
-    @apply ribbon;
     @apply text-white bg-red-500 dark:bg-red-700;
 }
 
-
 .rainbow {
     height: 100%;
     width: 100%;
diff --git a/resources/views/components/mod-card.blade.php b/resources/views/components/mod-card.blade.php
index 13e0be2..e6206ee 100644
--- a/resources/views/components/mod-card.blade.php
+++ b/resources/views/components/mod-card.blade.php
@@ -5,7 +5,7 @@
         <div class="ribbon z-10">{{ __('Featured!') }}</div>
     @endif
     @if ($mod->disabled)
-            <div class="ribbon-red z-10">{{ __('Disabled') }}</div>
+            <div class="ribbon ribbon-red z-10">{{ __('Disabled') }}</div>
     @endif
     <div class="flex flex-col group h-full w-full bg-white dark:bg-gray-950 rounded-xl shadow-md dark:shadow-gray-950 drop-shadow-2xl overflow-hidden hover:shadow-lg hover:bg-gray-50 dark:hover:bg-black hover:shadow-gray-400 dark:hover:shadow-black transition-colors ease-out duration-700">
         <div class="h-auto md:h-full md:flex">
diff --git a/resources/views/mod/show.blade.php b/resources/views/mod/show.blade.php
index 76b57b5..41bf697 100644
--- a/resources/views/mod/show.blade.php
+++ b/resources/views/mod/show.blade.php
@@ -20,7 +20,7 @@
                     <div class="ribbon z-10">{{ __('Featured!') }}</div>
                 @endif
                 @if ($mod->disabled)
-                    <div class="ribbon-red z-10">{{ __('Disabled') }}</div>
+                    <div class="ribbon ribbon-red z-10">{{ __('Disabled') }}</div>
                 @endif
                 <div class="flex flex-col sm:flex-row gap-4 sm:gap-6">
                     <div class="grow-0 shrink-0 flex justify-center items-center">
@@ -107,7 +107,7 @@
                     @foreach ($mod->versions as $version)
                         <div class="p-4 mb-4 sm:p-6 bg-white dark:bg-gray-950 rounded-xl shadow-md dark:shadow-gray-950 drop-shadow-2xl">
                             @if($version->disabled)
-                                <div class="ribbon-red z-10">{{ __('Disabled') }}</div>
+                                <div class="ribbon ribbon-red z-10">{{ __('Disabled') }}</div>
                             @endif
                             <div class="pb-6 border-b-2 border-gray-200 dark:border-gray-800">
                                 @if (auth()->check() && auth()->user()->isModOrAdmin())