spt/forge
spt/forge
0
0
Fork 0
mirror of https://github.com/sp-tarkov/forge.git synced 2025-02-12 12:10:41 -05:00
Code Issues Packages Projects Releases Wiki Activity

Resolves PostCSS utility class error

Browse Source
This commit is contained in:
Refringe 2025-02-06 10:50:45 -05:00
parent a7b5c2ccb5
commit a0a9e5f61f
Signed by: Refringe
SSH Key Fingerprint: SHA256:t865XsQpfTeqPRBMN2G6+N8wlDjkgUCZF3WGW6O9N/k
3 changed files with 18 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
resources/css/app.css
View File

@ -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%;

2
resources/views/components/mod-card.blade.php
View File

@ -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">

4
resources/views/mod/show.blade.php
View File

@ -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())