🆙 Upgrade to tailwind css 4.2.0

This commit is contained in:
duckietm
2026-02-20 08:17:17 +01:00
parent eef3841c87
commit f2446d232b
93 changed files with 188 additions and 188 deletions
+2 -2
View File
@@ -37,9 +37,9 @@ export const Base: FC<BaseProps<HTMLDivElement>> = props =>
if(fitV) newClassNames.push('vw-full', 'vh-full');
if(grow) newClassNames.push('!flex-grow');
if(grow) newClassNames.push('grow!');
if(shrink) newClassNames.push('!flex-shrink-0');
if(shrink) newClassNames.push('shrink-0!');
if(overflow) newClassNames.push('overflow-' + overflow);
+3 -3
View File
@@ -19,7 +19,7 @@ export const Button: FC<ButtonProps> = props =>
// fucked up method i know (i dont have a clue what im doing because im a ninja)
const newClassNames: string[] = [ 'pointer-events-auto inline-block font-normal leading-normal text-[#fff] text-center no-underline align-middle cursor-pointer select-none border-[1px] border-[solid] border-[transparent] px-[.75rem] py-[.375rem] text-[.9rem] rounded-[.25rem] [transition:color_.15s_ease-in-out,_background-color_.15s_ease-in-out,_border-color_.15s_ease-in-out,_box-shadow_.15s_ease-in-out]' ];
const newClassNames: string[] = [ 'pointer-events-auto inline-block font-normal leading-normal text-[#fff] text-center no-underline align-middle cursor-pointer select-none border border-[solid] border-transparent px-[.75rem] py-[.375rem] text-[.9rem] rounded-[.25rem] [transition:color_.15s_ease-in-out,background-color_.15s_ease-in-out,border-color_.15s_ease-in-out,box-shadow_.15s_ease-in-out]' ];
if(variant)
{
@@ -40,7 +40,7 @@ export const Button: FC<ButtonProps> = props =>
newClassNames.push('text-white bg-[#000] border-[#000] [box-shadow:inset_0_2px_#ffffff26,inset_0_-2px_#0000001a,0_1px_#0000001a] hover:text-white hover:bg-[#000] hover:border-[#000]');
if(variant == 'secondary')
newClassNames.push('text-white bg-[#185d79] border-[#185d79] [box-shadow:inset_0_2px_#ffffff26,_inset_0_-2px_#0000001a,_0_1px_#0000001a] hover:text-white hover:bg-[#144f67] hover:border-[#134a61]');
newClassNames.push('text-white bg-[#185d79] border-[#185d79] [box-shadow:inset_0_2px_#ffffff26,inset_0_-2px_#0000001a,0_1px_#0000001a] hover:text-white hover:bg-[#144f67] hover:border-[#134a61]');
if(variant == 'dark')
newClassNames.push('text-white bg-dark [box-shadow:inset_0_2px_#ffffff26,inset_0_-2px_#0000001a,0_1px_#0000001a] hover:text-white hover:bg-[#18181bfb] hover:border-[#161619fb]');
@@ -54,7 +54,7 @@ export const Button: FC<ButtonProps> = props =>
{
if(size == 'sm')
{
newClassNames.push('!px-[.5rem] !py-[.25rem] !text-[.7875rem] !rounded-[.2rem] !min-h-[28px]');
newClassNames.push('px-[.5rem]! py-[.25rem]! text-[.7875rem]! rounded-[.2rem]! min-h-[28px]!');
}
}
+2 -2
View File
@@ -25,12 +25,12 @@ export const Grid: FC<GridProps> = props =>
if(inline) newClassNames.push('inline-grid');
else newClassNames.push('grid grid-rows-[repeat(var(--bs-rows,_1),_1fr)] grid-cols-[repeat(var(--bs-columns,_12),_1fr)]');
else newClassNames.push('grid grid-rows-[repeat(var(--bs-rows,1),1fr)] grid-cols-[repeat(var(--bs-columns,12),1fr)]');
if(gap) newClassNames.push('gap-' + gap);
else if(gap === 0) newClassNames.push('gap-0');
if(maxContent) newClassNames.push('[flex-basis:max-content]');
if(maxContent) newClassNames.push('basis-[max-content]');
if(alignSelf) newClassNames.push('self-' + alignSelf);
+1 -1
View File
@@ -43,7 +43,7 @@ export const ReactPopover: FC<PropsWithChildren<{
{ children }
</div>
<div
className="min-w-fit w-[200px] h-fit absolute bottom-[100%] z-50 transition-all"
className="min-w-fit w-[200px] h-fit absolute bottom-full z-50 transition-all"
hidden={ !show }>
<div className="rounded bg-white p-3 shadow-[10px_30px_150px_rgba(46,38,92,0.25)] mb-[10px]">
{ content }
+1 -1
View File
@@ -28,7 +28,7 @@ export const NitroCardHeaderView: FC<NitroCardHeaderViewProps> = props =>
<Flex center fullWidth>
<span className="text-xl text-white drop-shadow-lg">{ headerText }</span>
{ isGalleryPhoto &&
<Base className="end-4 nitro-card-header-report-camera" position="absolute" onClick={ onReportPhoto }>
<Base className="inset-e-4 nitro-card-header-report-camera" position="absolute" onClick={ onReportPhoto }>
<FaFlag className="fa-icon" />
</Base>
}
+1 -1
View File
@@ -18,7 +18,7 @@ export const NitroCardView: FC<NitroCardViewProps> = props =>
const newClassNames: string[] = [ 'resize', 'rounded', 'shadow', ];
// Card Theme Changer
newClassNames.push('border-[1px] border-[#283F5D]');
newClassNames.push('border border-[#283F5D]');
if(classNames.length) newClassNames.push(...classNames);
@@ -14,8 +14,8 @@ export const NitroCardTabsItemView: FC<NitroCardTabsItemViewProps> = props =>
const getClassNames = useMemo(() =>
{
const newClassNames: string[] = [ 'overflow-hidden relative cursor-pointer rounded-t-md flex bg-card-tab-item px-3 py-1 z-[1] border-card-border border-t border-l border-r before:absolute before:w-[93%] before:h-[3px] before:rounded-md before:top-[1.5px] before:left-0 before:right-0 before:m-auto before:z-[1] before:bg-[#C2C9D1]',
isActive && 'bg-card-tab-item-active -mb-[1px] before:bg-white' ];
const newClassNames: string[] = [ 'overflow-hidden relative cursor-pointer rounded-t-md flex bg-card-tab-item px-3 py-1 z-1 border-card-border border-t border-l border-r before:absolute before:w-[93%] before:h-[3px] before:rounded-md before:top-[1.5px] before:left-0 before:right-0 before:m-auto before:z-1 before:bg-[#C2C9D1]',
isActive && 'bg-card-tab-item-active -mb-px before:bg-white' ];
//if (isActive) newClassNames.push('bg-[#dfdfdf] border-b-[1px_solid_black]');
+1 -1
View File
@@ -7,7 +7,7 @@ export const NitroCardTabsView: FC<FlexProps> = props =>
const getClassNames = useMemo(() =>
{
const newClassNames: string[] = [ 'justify-center gap-0.5 flex bg-card-tabs min-h-card-tabs max-h-card-tabs pt-1 border-b border-card-border px-2 -mt-[1px]' ];
const newClassNames: string[] = [ 'justify-center gap-0.5 flex bg-card-tabs min-h-card-tabs max-h-card-tabs pt-1 border-b border-card-border px-2 -mt-px' ];
if(classNames.length) newClassNames.push(...classNames);
+1 -1
View File
@@ -22,7 +22,7 @@ export const LayoutAvatarImageView: FC<LayoutAvatarImageViewProps> = props =>
const getClassNames = useMemo(() =>
{
const newClassNames: string[] = [ 'avatar-image relative w-[90px] h-[130px] bg-no-repeat bg-[center_-8px] pointer-events-none' ];
const newClassNames: string[] = [ 'avatar-image relative w-[90px] h-[130px] bg-no-repeat bg-position-[center_-8px] pointer-events-none' ];
if(classNames.length) newClassNames.push(...classNames);
+1 -1
View File
@@ -99,7 +99,7 @@ export const LayoutBadgeImageView: FC<LayoutBadgeImageViewProps> = props =>
return (
<Base className="group" classNames={ getClassNames } style={ getStyle } { ...rest }>
{ (showInfo && GetConfigurationValue<boolean>('badge.descriptions.enabled', true)) &&
<Base className="hidden group-hover:block before:absolute before:content-['_'] before:w-[0] before:h-[0] before:!border-l-[10px] before:!border-b-[10px] before:!border-t-[10px] before:top-[10px] before:-right-[10px] before:[border-left-color:white] before:[border-top-color:transparent] before:[border-bottom-color:transparent] z-50 absolute pointer-events-none select-none w-[210px] rounded-[.25rem] bg-[#fff] -left-[220px] text-black py-1 px-2 small">
<Base className="hidden group-hover:block before:absolute before:content-['_'] before:w-0 before:h-0 before:border-l-10! before:border-b-10! before:border-t-10! before:top-[10px] before:-right-[10px] before:border-l-[white] before:border-t-transparent before:border-b-transparent z-50 absolute pointer-events-none select-none w-[210px] rounded-[.25rem] bg-[#fff] -left-[220px] text-black py-1 px-2 small">
<div className="font-bold mb-1">{ isGroup ? customTitle : LocalizeBadgeName(badgeCode) }</div>
<div>{ isGroup ? LocalizeText('group.badgepopup.body') : LocalizeBadgeDescription(badgeCode) }</div>
</Base> }
+1 -1
View File
@@ -24,7 +24,7 @@ export const LayoutCounterTimeView: FC<LayoutCounterTimeViewProps> = props =>
}, [ classNames ]);
return (
<div className="flex gap-1 top-2 end-2">
<div className="flex gap-1 top-2 inset-e-2">
<Base classNames={ getClassNames } { ...rest }>
<div>{ day != '00' ? day : hour }{ day != '00' ? LocalizeText('countdown_clock_unit_days') : LocalizeText('countdown_clock_unit_hours') }</div>
</Base>
+2 -2
View File
@@ -20,14 +20,14 @@ export const LayoutGiftTagView: FC<LayoutGiftTagViewProps> = props =>
return (
<Flex className="nitro-gift-card text-black" overflow="hidden">
<div className="flex items-center justify-center gift-face flex-shrink-0">
<div className="flex items-center justify-center gift-face shrink-0">
{ !userName && <div className="gift-incognito"></div> }
{ figure && <div className="gift-avatar">
<LayoutAvatarImageView direction={ 2 } figure={ figure } headOnly={ true } />
</div> }
</div>
<Flex className="w-full pt-4 pb-4 pe-4 ps-3" overflow="hidden">
<Column className="!flex-grow" justifyContent="between" overflow="auto">
<Column className="grow!" justifyContent="between" overflow="auto">
{ !editable &&
<Text textBreak className="gift-message">{ message }</Text> }
{ editable && (onChange !== null) &&
+1 -1
View File
@@ -27,7 +27,7 @@ export const LayoutGridItem: FC<LayoutGridItemProps> = props =>
const newClassNames: string[] = [ 'layout-grid-item', 'border', 'border-2', 'border-muted', 'rounded' ];
if(itemActive) newClassNames.push('!bg-[#ececec] !border-[#fff]');
if(itemActive) newClassNames.push('bg-[#ececec]! border-[#fff]!');
if(itemUniqueSoldout || (itemUniqueNumber > 0)) newClassNames.push('unique-item');
+1 -1
View File
@@ -12,7 +12,7 @@ export const LayoutItemCountView: FC<LayoutItemCountViewProps> = props =>
const getClassNames = useMemo(() =>
{
const newClassNames: string[] = [ 'inline-block px-[.65em] py-[.35em] text-[.75em] font-bold leading-none text-[#fff] text-center whitespace-nowrap align-baseline rounded-[.25rem]', '!border-[1px] !border-[solid] !border-[#283F5D]', 'border-black', 'bg-danger', 'px-1', 'top-[2px] right-[2px] text-[9.5px] px-[3px] py-[2px] ' ];
const newClassNames: string[] = [ 'inline-block px-[.65em] py-[.35em] text-[.75em] font-bold leading-none text-[#fff] text-center whitespace-nowrap align-baseline rounded-[.25rem]', 'border! border-[solid]! border-[#283F5D]!', 'border-black', 'bg-danger', 'px-1', 'top-[2px] right-[2px] text-[9.5px] px-[3px] py-[2px] ' ];
if(classNames.length) newClassNames.push(...classNames);
@@ -16,7 +16,7 @@ export const LayoutNotificationBubbleView: FC<LayoutNotificationBubbleViewProps>
const getClassNames = useMemo(() =>
{
const newClassNames: string[] = [ 'text-sm bg-[#1c1c20f2] px-[5px] py-[6px] [box-shadow:inset_0_5px_#22222799,_inset_0_-4px_#12121599] ', 'rounded' ];
const newClassNames: string[] = [ 'text-sm bg-[#1c1c20f2] px-[5px] py-[6px] [box-shadow:inset_0_5px_#22222799,inset_0_-4px_#12121599] ', 'rounded' ];
if(classNames.length) newClassNames.push(...classNames);
+3 -3
View File
@@ -14,7 +14,7 @@ export const LayoutProgressBar: FC<LayoutProgressBarProps> = props =>
const getClassNames = useMemo(() =>
{
const newClassNames: string[] = [ 'border-[1px] border-[solid] border-[#fff] p-[2px] h-[20px] rounded-[.25rem] overflow-hidden bg-[#1E7295] ', 'text-white' ];
const newClassNames: string[] = [ 'border border-[solid] border-[#fff] p-[2px] h-[20px] rounded-[.25rem] overflow-hidden bg-[#1E7295] ', 'text-white' ];
if(classNames.length) newClassNames.push(...classNames);
@@ -24,8 +24,8 @@ export const LayoutProgressBar: FC<LayoutProgressBarProps> = props =>
return (
<Column classNames={ getClassNames } justifyContent={ justifyContent } position={ position } { ...rest }>
{ text && (text.length > 0) &&
<Flex center fit className="[text-shadow:0px_4px_4px_rgba(0,_0,_0,_.25)] z-20" position="absolute">{ text }</Flex> }
<Base className="h-full z-10 [transition:all_1s] rounded-[.125rem] bg-[repeating-linear-gradient(#2DABC2,_#2DABC2_50%,_#2B91A7_50%,_#2B91A7_100%)]" style={ { width: (~~((((progress - 0) * (100 - 0)) / (maxProgress - 0)) + 0) + '%') } } />
<Flex center fit className="[text-shadow:0px_4px_4px_rgba(0,0,0,.25)] z-20" position="absolute">{ text }</Flex> }
<Base className="h-full z-10 [transition:all_1s] rounded-[.125rem] bg-[repeating-linear-gradient(#2DABC2,#2DABC2_50%,#2B91A7_50%,#2B91A7_100%)]" style={ { width: (~~((((progress - 0) * (100 - 0)) / (maxProgress - 0)) + 0) + '%') } } />
{ children }
</Column>
);
@@ -14,7 +14,7 @@ export const LayoutRoomThumbnailView: FC<LayoutRoomThumbnailViewProps> = props =
const getClassNames = useMemo(() =>
{
const newClassNames: string[] = [ 'relative w-[110px] h-[110px] bg-[url("@/assets/images/navigator/thumbnail_placeholder.png")] bg-no-repeat bg-center', 'rounded', '!border-[1px] !border-[solid] !border-[#283F5D]' ];
const newClassNames: string[] = [ 'relative w-[110px] h-[110px] bg-[url("@/assets/images/navigator/thumbnail_placeholder.png")] bg-no-repeat bg-center', 'rounded', 'border! border-[solid]! border-[#283F5D]!' ];
if(classNames.length) newClassNames.push(...classNames);
+1 -1
View File
@@ -14,7 +14,7 @@ export const UserProfileIconView: FC<UserProfileIconViewProps> = props =>
const getClassNames = useMemo(() =>
{
const newClassNames: string[] = [ 'bg-[url("@/assets/images/friends/friends-spritesheet.png")]', 'w-[13px] h-[11px] bg-[-51px_-91px]' ];
const newClassNames: string[] = [ 'bg-[url("@/assets/images/friends/friends-spritesheet.png")]', 'w-[13px] h-[11px] bg-position-[-51px_-91px]' ];
if(classNames.length) newClassNames.push(...classNames);