diff --git a/app/blog/_components/BlogList.tsx b/app/blog/_components/BlogList.tsx index dd10e6ed..82698b75 100644 --- a/app/blog/_components/BlogList.tsx +++ b/app/blog/_components/BlogList.tsx @@ -74,7 +74,7 @@ export async function BlogList() { height="297" viewBox="0 0 210 297" fill="currentColor" - className="absolute -right-3 -top-3 z-10 h-10 w-10 rounded-full bg-hover p-1 text-foreground/70 shadow" + className="absolute -right-3 -top-3 z-10 h-10 w-10 rounded-full bg-hover p-1 text-foreground/70 shadow-sm" > diff --git a/app/globals.css b/app/globals.css index 57ee9ed4..166c8fa2 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,6 +1,51 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; +@import 'tailwindcss'; + +@config '../tailwind.config.ts'; + +/* + 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, + ::before, + ::backdrop, + ::file-selector-button { + border-color: var(--color-gray-200, currentColor); + } +} + +@utility popular-pack { + position: relative; + + &::before { + content: ''; + position: absolute; + width: 100%; + height: 100%; + inset: 0; + border-radius: calc(var(--radius) + 0.1875rem); + z-index: -1; + background-image: linear-gradient( + 146.78deg, + #0598f6 -1.37%, + #f00505 104.43% + ); + } +} + +@utility popular-btn { + background: linear-gradient(102.07deg, #0e93ed -169.31%, #e10f14 113.25%); +} + +@utility popular-badge { + background: linear-gradient(98.64deg, #4a6db0 -12.21%, #725487 119.79%); +} @layer base { :root { @@ -106,7 +151,7 @@ } .brand-focus { - @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary-light focus-visible:ring-offset-2; + @apply focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-brand-primary-light focus-visible:ring-offset-2; } .disable-focus { @@ -115,16 +160,16 @@ @media screen and (max-width: 500px) { .discord-message:first-child { - @apply w-[95%] !important; + @apply w-[95%]!; } .smalldevice { - @apply mx-auto my-[0.5rem] w-[100%] !important; + @apply mx-auto! my-[0.5rem]! w-[100%]!; } .order-last { - @apply mx-auto w-[100%] !important; + @apply mx-auto! w-[100%]!; } .discord-messages { - @apply min-w-0 !important; + @apply min-w-0!; } } @@ -133,93 +178,66 @@ @apply text-xs; } .discord-thread-message .discord-thread-message-timestamp { - @apply text-xs !important; + @apply text-xs!; } .discord-thread { - @apply max-w-full !important; + @apply max-w-full!; } } } -[data-radix-popper-content-wrapper] { - outline: none !important; -} - -body { - display: flex; - flex-direction: column; - min-height: 100vh; - align-items: center; - font-family: 'Inter', sans-serif; - overflow-x: hidden; - overflow-y: auto; -} - -body::-webkit-scrollbar { - width: 0.5rem; - border-radius: 20px; -} - -body::-webkit-scrollbar-thumb { - width: 0.5rem; - background-color: hsl(var(--scrollbar)); - border-radius: 20px; -} -body::-webkit-scrollbar-track { - width: 0.5rem; - background-color: transparent; -} - -.discord-button span { - display: flex; - align-items: center; -} - -.discord-embed-footer { - color: #999999; -} - -.ring-pulse { - animation: 2s pulse infinite ease-in-out; -} - -@keyframes pulse { - 0% { - box-shadow: 0 0 0 0px hsl(var(--foreground) / 0.15); - } - - 100% { - box-shadow: 0 0 0 14px hsl(var(--secondary) / 0); - } -} - -@layer components { - .popular-pack { - position: relative; - } - - .popular-pack::before { - content: ''; - position: absolute; - width: 100%; - height: 100%; - inset: 0; - border-radius: calc(var(--radius) + 0.1875rem); - z-index: -1; - background-image: linear-gradient( - 146.78deg, - #0598f6 -1.37%, - #f00505 104.43% - ); - } - - .popular-btn { - background: linear-gradient(102.07deg, #0e93ed -169.31%, #e10f14 113.25%); - } - - .popular-badge { - background: linear-gradient(98.64deg, #4a6db0 -12.21%, #725487 119.79%); - } +@layer utilities { + [data-radix-popper-content-wrapper] { + outline: none !important; + } + + body { + display: flex; + flex-direction: column; + min-height: 100vh; + align-items: center; + font-family: 'Inter', sans-serif; + overflow-x: hidden; + overflow-y: auto; + } + + body::-webkit-scrollbar { + width: 0.5rem; + border-radius: 20px; + } + + body::-webkit-scrollbar-thumb { + width: 0.5rem; + background-color: hsl(var(--scrollbar)); + border-radius: 20px; + } + body::-webkit-scrollbar-track { + width: 0.5rem; + background-color: transparent; + } + + .discord-button span { + display: flex; + align-items: center; + } + + .discord-embed-footer { + color: #999999; + } + + .ring-pulse { + animation: 2s pulse infinite ease-in-out; + } + + @keyframes pulse { + 0% { + box-shadow: 0 0 0 0px hsl(var(--foreground) / 0.15); + } + + 100% { + box-shadow: 0 0 0 14px hsl(var(--secondary) / 0); + } + } } .thin-scrollbar::-webkit-scrollbar { diff --git a/app/packs/_components/QuestionPackList.tsx b/app/packs/_components/QuestionPackList.tsx index a2a1981d..06d65b06 100644 --- a/app/packs/_components/QuestionPackList.tsx +++ b/app/packs/_components/QuestionPackList.tsx @@ -17,7 +17,7 @@ function QuestionPackList({ const type = searchParams.get('type') return ( -