🆙 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
+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);