duckietm/Nitro-V3
1
0
Fork 0
mirror of https://github.com/duckietm/Nitro-V3.git synced 2026-06-19 15:06:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

🆙 Upgrade to tailwind css 4.2.0

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+2 -1
View File
@@ -26,6 +26,7 @@
},
"devDependencies": {
"@tailwindcss/forms": "^0.5.11",
"@tailwindcss/postcss": "^4.2.0",
"@types/node": "^25.3.0",
"@types/react": "^19.2.14",
"@types/react-dom": "^19.2.3",
@@ -40,7 +41,7 @@
"postcss": "^8.5.6",
"postcss-nested": "^7.0.2",
"sass": "^1.97.3",
"tailwindcss": "^3.4.17",
"tailwindcss": "^4.2.0",
"typescript": "^5.9.3",
"typescript-eslint": "^8.56.0",
"vite": "^7.3.1",
postcss.config.js
+1 -1
View File
@@ -2,7 +2,7 @@
module.exports = {
plugins: {
tailwindcss: {},
'@tailwindcss/postcss': {},
autoprefixer: {}
}
}
src/common/Base.tsx
+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);
src/common/Button.tsx
+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]!');
}
}
src/common/Grid.tsx
+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);
src/common/Popover.tsx
+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 }
src/common/card/NitroCardHeaderView.tsx
+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>
}
src/common/card/NitroCardView.tsx
+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);
src/common/card/tabs/NitroCardTabsItemView.tsx
+2 -2
View File
@@ -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]');
src/common/card/tabs/NitroCardTabsView.tsx
+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);
src/common/layout/LayoutAvatarImageView.tsx
+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);
src/common/layout/LayoutBadgeImageView.tsx
+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> }
src/common/layout/LayoutCounterTimeView.tsx
+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>
src/common/layout/LayoutGiftTagView.tsx
+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) &&
src/common/layout/LayoutGridItem.tsx
+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');
src/common/layout/LayoutItemCountView.tsx
+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);
src/common/layout/LayoutNotificationBubbleView.tsx
+1 -1
View File
@@ -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);
src/common/layout/LayoutProgressBar.tsx
+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>
);
src/common/layout/LayoutRoomThumbnailView.tsx
+1 -1
View File
@@ -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);
src/common/layout/UserProfileIconView.tsx
+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);
src/components/achievements/AchievementsView.tsx
+2 -2
View File
@@ -69,7 +69,7 @@ export const AchievementsView: FC<{}> = (props) =>
className="bg-[url('@/assets/images/achievements/back-arrow.png')] bg-center no-repeat w-[33px] h-[34px]"
onClick={(event) => setSelectedCategoryCode(null)}
/>
<Column className="!flex-grow" gap={0}>
<Column className="grow!" gap={0}>
<Text
className="text-small"
fontSize={4}
@@ -110,7 +110,7 @@ export const AchievementsView: FC<{}> = (props) =>
setSelectedCategoryCode={setSelectedCategoryCode}
/>
<div
className="flex flex-col justify-end flex-grow gap-1"
className="flex flex-col justify-end grow gap-1"
>
<Text center small>
{LocalizeText(
src/components/avatar-editor/AvatarEditorView.tsx
+1 -1
View File
@@ -98,7 +98,7 @@ export const AvatarEditorView: FC<{}> = props =>
</div>
<div className="flex flex-col col-span-3 overflow-hidden gap-1">
<AvatarEditorFigurePreviewView />
<div className="flex flex-col !flex-grow gap-1">
<div className="flex flex-col grow! gap-1">
<div className="relative inline-flex align-middle">
<Button className="flex-auto " variant="secondary" onClick={ event => processAction(AvatarEditorAction.ACTION_RESET) }>
<FaRedo className="fa-icon" />
src/components/avatar-editor/AvatarEditorWardrobeView.tsx
+1 -1
View File
@@ -48,7 +48,7 @@ export const AvatarEditorWardrobeView: FC<{}> = props =>
{ figureContainer &&
<LayoutAvatarImageView direction={ 2 } figure={ figureContainer.getFigureString() } gender={ gender } /> }
<div className="avatar-shadow" />
{ !hcDisabled && (clubLevel > 0) && <LayoutCurrencyIcon className="absolute top-1 start-1" type="hc" /> }
{ !hcDisabled && (clubLevel > 0) && <LayoutCurrencyIcon className="absolute top-1 inset-s-1" type="hc" /> }
<div className="flex gap-1 button-container">
<Button fullWidth variant="link" onClick={ event => saveFigureAtWardrobeIndex(index) }>{ LocalizeText('avatareditor.wardrobe.save') }</Button>
{ figureContainer &&
src/components/avatar-editor/figure-set/AvatarEditorFigureSetItemView.tsx
+2 -2
View File
@@ -48,9 +48,9 @@ export const AvatarEditorFigureSetItemView: FC<{
return (
<InfiniteGrid.Item itemActive={ isSelected } itemImage={ (partItem.isClear ? undefined : assetUrl) } style={ { flex: '1', backgroundPosition: (setType === AvatarFigurePartType.HEAD) ? 'center -35px' : 'center' } } { ...rest }>
{ !partItem.isClear && isHC && <LayoutCurrencyIcon className="absolute end-1 bottom-1" type="hc" /> }
{ !partItem.isClear && isHC && <LayoutCurrencyIcon className="absolute inset-e-1 bottom-1" type="hc" /> }
{ partItem.isClear && <AvatarEditorIcon icon="clear" /> }
{ !partItem.isClear && partItem.partSet.isSellable && <AvatarEditorIcon className="end-1 bottom-1 absolute" icon="sellable" /> }
{ !partItem.isClear && partItem.partSet.isSellable && <AvatarEditorIcon className="inset-e-1 bottom-1 absolute" icon="sellable" /> }
</InfiniteGrid.Item>
);
};
src/components/avatar-editor/palette-set/AvatarEditorPaletteSetItemView.tsx
+1 -1
View File
@@ -19,7 +19,7 @@ export const AvatarEditorPaletteSetItem: FC<{
return (
<InfiniteGrid.Item itemHighlight className="clear-bg" itemActive={ isSelected } itemColor={ ColorConverter.int2rgb(partColor.rgb) } { ...rest }>
{ isHC && <LayoutCurrencyIcon className="absolute end-1 bottom-1" type="hc" /> }
{ isHC && <LayoutCurrencyIcon className="absolute inset-e-1 bottom-1" type="hc" /> }
</InfiniteGrid.Item>
);
};
src/components/backgrounds/BackgroundsView.tsx
+1 -1
View File
@@ -82,7 +82,7 @@ export const BackgroundsView: FC<BackgroundsViewProps> = ({
className={item.selectable ? '' : 'non-selectable'}
>
<Base className={`profile-${type} ${type}-${item.id}`} />
{item.isHcOnly && <LayoutCurrencyIcon position="absolute" className="top-1 end-1" type="hc" />}
{item.isHcOnly && <LayoutCurrencyIcon position="absolute" className="top-1 inset-e-1" type="hc" />}
</Flex>
), [handleSelection]);
src/components/camera/views/CameraWidgetCaptureView.tsx
+7 -7
View File
@@ -61,27 +61,27 @@ export const CameraWidgetCaptureView: FC<CameraWidgetCaptureViewProps> = props =
<DraggableWindow uniqueKey="nitro-camera-capture">
<Column center className="relative" gap={ 0 }>
{ selectedPicture && <img alt="" className="absolute top-[37px] left-[10px] w-[320px] h-[320px]" src={ selectedPicture.imageUrl } /> }
<div className="relative w-[340px] h-[462px] bg-[url('@/assets/images/room-widgets/camera-widget/camera-spritesheet.png')] bg-[-1px_-1px] drag-handler">
<div className="absolute top-[8px] right-[8px] rounded-[.25rem] [box-shadow:0_0_0_1.5px_#fff] border-[2px] border-[solid] border-[#921911] bg-[repeating-linear-gradient(rgb(245,_80,_65),_rgb(245,_80,_65)_50%,_rgb(194,_48,_39)_50%,_rgb(194,_48,_39)_100%)] cursor-pointer leading-none px-[3px] py-px" onClick={ onClose }>
<div className="relative w-[340px] h-[462px] bg-[url('@/assets/images/room-widgets/camera-widget/camera-spritesheet.png')] bg-position-[-1px_-1px] drag-handler">
<div className="absolute top-[8px] right-[8px] rounded-[.25rem] [box-shadow:0_0_0_1.5px_#fff] border-2 border-[solid] border-[#921911] bg-[repeating-linear-gradient(rgb(245,80,65),rgb(245,80,65)_50%,rgb(194,48,39)_50%,rgb(194,48,39)_100%)] cursor-pointer leading-none px-[3px] py-px" onClick={ onClose }>
<FaTimes className="fa-icon" />
</div>
{ !selectedPicture && <div ref={ elementRef } className="absolute top-[37px] left-[10px] w-[320px] h-[320px] bg-[url('@/assets/images/room-widgets/camera-widget/camera-spritesheet.png')] bg-[-343px_-1px]" /> }
{ !selectedPicture && <div ref={ elementRef } className="absolute top-[37px] left-[10px] w-[320px] h-[320px] bg-[url('@/assets/images/room-widgets/camera-widget/camera-spritesheet.png')] bg-position-[-343px_-1px]" /> }
{ selectedPicture &&
<div className="absolute top-[37px] left-[10px] w-[320px] h-[320px] ">
<div className="bg-[rgba(0,_0,_0,_0.5)] w-full absolute bottom-0 py-2 text-center inline-flex justify-center">
<div className="bg-[rgba(0,0,0,0.5)] w-full absolute bottom-0 py-2 text-center inline-flex justify-center">
<Button className="me-3" title={ LocalizeText('camera.editor.button.tooltip') } variant="success" onClick={ onEdit }>{ LocalizeText('camera.editor.button.text') }</Button>
<Button variant="danger" onClick={ onDelete }>{ LocalizeText('camera.delete.button.text') }</Button>
</div>
</div> }
<div className="flex justify-center">
<div className="w-[94px] h-[94px] cursor-pointer mt-[362px] bg-[url('@/assets/images/room-widgets/camera-widget/camera-spritesheet.png')] bg-[-343px_-321px]" title={ LocalizeText('camera.take.photo.button.tooltip') } onClick={ takePicture } />
<div className="w-[94px] h-[94px] cursor-pointer mt-[362px] bg-[url('@/assets/images/room-widgets/camera-widget/camera-spritesheet.png')] bg-position-[-343px_-321px]" title={ LocalizeText('camera.take.photo.button.tooltip') } onClick={ takePicture } />
</div>
</div>
{ (cameraRoll.length > 0) &&
<div className="w-[330px] bg-[#bab8b4] rounded-bl-[10px] rounded-br-[10px] border-[1px] border-[solid] border-[black] [box-shadow:inset_1px_0px_white,_inset_-1px_-1px_white] flex justify-center py-2">
<div className="w-[330px] bg-[#bab8b4] rounded-bl-[10px] rounded-br-[10px] border border-[solid] border-[black] [box-shadow:inset_1px_0px_white,inset_-1px_-1px_white] flex justify-center py-2">
{ cameraRoll.map((picture, index) =>
{
return <img key={ index } alt="" className="w-[56px] h-[56px] border-[1px] border-[solid] border-[black] object-contain [image-rendering:initial]" src={ picture.imageUrl } onClick={ event => setSelectedPictureIndex(index) } />;
return <img key={ index } alt="" className="w-[56px] h-[56px] border border-[solid] border-[black] object-contain [image-rendering:initial]" src={ picture.imageUrl } onClick={ event => setSelectedPictureIndex(index) } />;
}) }
</div> }
</Column>
src/components/catalog/views/navigation/CatalogNavigationItemView.tsx
+2 -2
View File
@@ -19,9 +19,9 @@ export const CatalogNavigationItemView: FC<CatalogNavigationItemViewProps> = pro
return (
<div className={ child ? 'pl-[5px] border-s-2 border-[#b6bec5]' : '' }>
<LayoutGridItem className={ ' !h-[23px] bg-[#cdd3d9] !border-[0] px-[3px] py-px text-sm' } column={ false } gap={ 1 } itemActive={ node.isActive } onClick={ event => activateNode(node) }>
<LayoutGridItem className={ ' h-[23px]! bg-[#cdd3d9] border-0! px-[3px] py-px text-sm' } column={ false } gap={ 1 } itemActive={ node.isActive } onClick={ event => activateNode(node) }>
<CatalogIconView icon={ node.iconId } />
<Text truncate className="!flex-grow">{ node.localization }</Text>
<Text truncate className="grow!">{ node.localization }</Text>
{ node.isBranch &&
<>
{ node.isOpen && <FaCaretUp className="fa-icon" /> }
src/components/catalog/views/navigation/CatalogNavigationView.tsx
+1 -1
View File
@@ -19,7 +19,7 @@ export const CatalogNavigationView: FC<CatalogNavigationViewProps> = props =>
return (
<>
<CatalogSearchView />
<Column fullHeight className="!border-[#b6bec5] bg-[#cdd3d9] border-[2px] border-[solid] rounded p-1" overflow="hidden">
<Column fullHeight className="border-[#b6bec5]! bg-[#cdd3d9] border-2 border-[solid] rounded p-1" overflow="hidden">
<AutoGrid columnCount={ 1 } gap={ 1 } id="nitro-catalog-main-navigation">
{ searchResult && (searchResult.filteredNodes.length > 0) && searchResult.filteredNodes.map((n, index) =>
{
src/components/catalog/views/page/layout/CatalogLayoutBadgeDisplayView.tsx
+2 -2
View File
@@ -38,9 +38,9 @@ export const CatalogLayoutBadgeDisplayView: FC<CatalogLayoutProps> = props =>
<div className="relative overflow-hidden">
<CatalogViewProductWidgetView />
</div>
<Column className="!flex-grow" gap={ 1 }>
<Column className="grow!" gap={ 1 }>
<CatalogLimitedItemWidgetView />
<Text truncate className="!flex-grow">{ currentOffer.localizationName }</Text>
<Text truncate className="grow!">{ currentOffer.localizationName }</Text>
<div className="flex justify-end">
<CatalogTotalPriceWidget alignItems="end" />
</div>
src/components/catalog/views/page/layout/CatalogLayoutColorGroupingView.tsx
+4 -4
View File
@@ -152,15 +152,15 @@ export const CatalogLayoutColorGroupingView: FC<CatalogLayoutColorGroupViewProps
<>
<div className="relative overflow-hidden">
<CatalogViewProductWidgetView />
<CatalogAddOnBadgeWidgetView className="bg-muted rounded bottom-1 end-1" position="absolute" />
<CatalogAddOnBadgeWidgetView className="bg-muted rounded bottom-1 inset-e-1" position="absolute" />
{ currentOffer.product.furnitureData.hasIndexedColor &&
<Button className="bottom-1 start-1" position="absolute" onClick={ event => setColorsShowing(prev => !prev) }>
<Button className="bottom-1 inset-s-1" position="absolute" onClick={ event => setColorsShowing(prev => !prev) }>
<FaFillDrip className="fa-icon" />
</Button> }
</div>
<Column className="!flex-grow" gap={ 1 }>
<Column className="grow!" gap={ 1 }>
<CatalogLimitedItemWidgetView />
<Text truncate className="!flex-grow">{ currentOffer.localizationName }</Text>
<Text truncate className="grow!">{ currentOffer.localizationName }</Text>
<div className="flex justify-between">
<div className="flex flex-col gap-1">
<CatalogSpinnerWidgetView />
src/components/catalog/views/page/layout/CatalogLayoutDefaultView.tsx
+1 -1
View File
@@ -38,7 +38,7 @@ export const CatalogLayoutDefaultView: FC<CatalogLayoutProps> = props =>
{ (currentOffer.product.productType !== ProductTypeEnum.BADGE) &&
<>
<CatalogViewProductWidgetView />
<CatalogAddOnBadgeWidgetView className="bg-muted rounded bottom-1 end-1" />
<CatalogAddOnBadgeWidgetView className="bg-muted rounded bottom-1 inset-e-1" />
</> }
{ (currentOffer.product.productType === ProductTypeEnum.BADGE) && <CatalogAddOnBadgeWidgetView className="scale-2" /> }
</Flex>
src/components/catalog/views/page/layout/CatalogLayoutGuildCustomFurniView.tsx
+2 -2
View File
@@ -29,11 +29,11 @@ export const CatalogLayouGuildCustomFurniView: FC<CatalogLayoutProps> = props =>
<>
<div className="relative overflow-hidden">
<CatalogViewProductWidgetView />
<CatalogGuildBadgeWidgetView className="bottom-1 end-1" position="absolute" />
<CatalogGuildBadgeWidgetView className="bottom-1 inset-e-1" position="absolute" />
</div>
<Column grow gap={ 1 }>
<Text truncate>{ currentOffer.localizationName }</Text>
<div className="!flex-grow">
<div className="grow!">
<CatalogGuildSelectorWidgetView />
</div>
<div className="flex justify-end">
src/components/catalog/views/page/layout/CatalogLayoutGuildForumView.tsx
+1 -1
View File
@@ -33,7 +33,7 @@ export const CatalogLayouGuildForumView: FC<CatalogLayoutProps> = props =>
<>
<Column grow gap={ 1 }>
<Text truncate>{ currentOffer.localizationName }</Text>
<div className="!flex-grow">
<div className="grow!">
<CatalogGuildSelectorWidgetView />
</div>
<div className="flex justify-end">
src/components/catalog/views/page/layout/CatalogLayoutRoomBundleView.tsx
+2 -2
View File
@@ -27,8 +27,8 @@ export const CatalogLayoutRoomBundleView: FC<CatalogLayoutProps> = props =>
<Text center small overflow="auto">{ page.localization.getText(1) }</Text> }
<Column grow gap={ 0 } overflow="hidden" position="relative">
{ !!page.localization.getImage(1) &&
<img alt="" className="!flex-grow" src={ page.localization.getImage(1) } /> }
<CatalogAddOnBadgeWidgetView className="bg-muted rounded bottom-0 start-0" position="absolute" />
<img alt="" className="grow!" src={ page.localization.getImage(1) } /> }
<CatalogAddOnBadgeWidgetView className="bg-muted rounded bottom-0 inset-s-0" position="absolute" />
<CatalogSimplePriceWidgetView />
</Column>
<div className="flex flex-col gap-1">
src/components/catalog/views/page/layout/CatalogLayoutSingleBundleView.tsx
+2 -2
View File
@@ -27,8 +27,8 @@ export const CatalogLayoutSingleBundleView: FC<CatalogLayoutProps> = props =>
<Text center small overflow="auto">{ page.localization.getText(1) }</Text> }
<Column grow gap={ 0 } overflow="hidden" position="relative">
{ !!page.localization.getImage(1) &&
<img alt="" className="!flex-grow" src={ page.localization.getImage(1) } /> }
<CatalogAddOnBadgeWidgetView className="bg-muted rounded bottom-0 start-0" position="absolute" />
<img alt="" className="grow!" src={ page.localization.getImage(1) } /> }
<CatalogAddOnBadgeWidgetView className="bg-muted rounded bottom-0 inset-s-0" position="absolute" />
<CatalogSimplePriceWidgetView />
</Column>
<div className="flex flex-col gap-1">
src/components/catalog/views/page/layout/CatalogLayoutSoundMachineView.tsx
+1 -1
View File
@@ -88,7 +88,7 @@ export const CatalogLayoutSoundMachineView: FC<CatalogLayoutProps> = props =>
{ (currentOffer.product.productType !== ProductTypeEnum.BADGE) &&
<>
<CatalogViewProductWidgetView />
<CatalogAddOnBadgeWidgetView className="bg-muted rounded bottom-1 end-1" />
<CatalogAddOnBadgeWidgetView className="bg-muted rounded bottom-1 inset-e-1" />
</> }
{ (currentOffer.product.productType === ProductTypeEnum.BADGE) && <CatalogAddOnBadgeWidgetView className="scale-2" /> }
</div>
src/components/catalog/views/page/layout/CatalogLayoutTrophiesView.tsx
+1 -1
View File
@@ -31,7 +31,7 @@ export const CatalogLayoutTrophiesView: FC<CatalogLayoutProps> = props =>
<Grid>
<Column overflow="hidden" size={ 7 }>
<CatalogItemGridWidgetView />
<textarea className="!flex-grow form-control w-full" defaultValue={ trophyText || '' } onChange={ event => setTrophyText(event.target.value) } />
<textarea className="grow! form-control w-full" defaultValue={ trophyText || '' } onChange={ event => setTrophyText(event.target.value) } />
</Column>
<Column center={ !currentOffer } overflow="hidden" size={ 5 }>
{ !currentOffer &&
src/components/catalog/views/page/layout/pets/CatalogLayoutPetView.tsx
+2 -2
View File
@@ -218,9 +218,9 @@ export const CatalogLayoutPetView: FC<CatalogLayoutProps> = props =>
<>
<div className="relative overflow-hidden">
<CatalogViewProductWidgetView />
<CatalogAddOnBadgeWidgetView className="bg-muted rounded bottom-1 end-1" position="absolute" />
<CatalogAddOnBadgeWidgetView className="bg-muted rounded bottom-1 inset-e-1" position="absolute" />
{ ((petIndex > -1) && (petIndex <= 7)) &&
<Button className="bottom-1 start-1" position="absolute" onClick={ event => setColorsShowing(!colorsShowing) }>
<Button className="bottom-1 inset-s-1" position="absolute" onClick={ event => setColorsShowing(!colorsShowing) }>
<FaFillDrip className="fa-icon" />
</Button> }
</div>
src/components/catalog/views/page/widgets/CatalogSpinnerWidgetView.tsx
+1 -1
View File
@@ -38,7 +38,7 @@ export const CatalogSpinnerWidgetView: FC<{}> = props =>
<Text>{ LocalizeText('catalog.bundlewidget.spinner.select.amount') }</Text>
<div className="flex items-center gap-1">
<FaCaretLeft className="text-black cursor-pointer fa-icon" onClick={ event => updateQuantity(quantity - 1) } />
<input className="[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none min-h-[17px] h-[17px] w-[28px] px-[4px] py-[0] text-right rounded-[.2rem]" type="number" value={ quantity } onChange={ event => updateQuantity(event.target.valueAsNumber) } />
<input className="[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none min-h-[17px] h-[17px] w-[28px] px-[4px] py-0 text-right rounded-[.2rem]" type="number" value={ quantity } onChange={ event => updateQuantity(event.target.valueAsNumber) } />
<FaCaretRight className="text-black cursor-pointer fa-icon" onClick={ event => updateQuantity(quantity + 1) } />
</div>
</>
src/components/friends/views/friends-bar/FriendBarItemView.tsx
+2 -2
View File
@@ -33,7 +33,7 @@ export const FriendBarItemView: FC<{ friend: MessengerFriend }> = props =>
if(!friend)
{
return (
<Button className="border w-[130px] mx-[3px] my-[0] z-0 relative pl-[37px] text-left friend-bar-search" justifyContent="start" size="md">
<Button className="border w-[130px] mx-[3px] my-0 z-0 relative pl-[37px] text-left friend-bar-search" justifyContent="start" size="md">
<div className="absolute -top-[3px] left-[5px] w-[31px] h-[34px] bg-[url('@/assets/images/toolbar/friend-search.png')]" />
<div className="truncate">{ LocalizeText('friend.bar.find.title') }</div>
</Button>
@@ -41,7 +41,7 @@ export const FriendBarItemView: FC<{ friend: MessengerFriend }> = props =>
}
return (
<Button className={ ' block w-[130px] mx-[3px] my-[0] z-0 relative pl-[37px] text-left' + (isVisible ? 'mb-[21px]' : '') } justifyContent="start" size="md" variant={ 'success' } onClick={ event => setVisible(prevValue => !prevValue) }>
<Button className={ ' block w-[130px] mx-[3px] my-0 z-0 relative pl-[37px] text-left' + (isVisible ? 'mb-[21px]' : '') } justifyContent="start" size="md" variant={ 'success' } onClick={ event => setVisible(prevValue => !prevValue) }>
<div className={ `friend-bar-item-head absolute ${ friend.id > 0 ? '-top-[30px] -left-[30px]' : '-top-[5px] -left-[3.5px]' }` }>
{ (friend.id > 0) && <LayoutAvatarImageView direction={ 2 } figure={ friend.figure } headOnly={ true } /> }
{ (friend.id <= 0) && <LayoutBadgeImageView badgeCode={ friend.figure } isGroup={ true } /> }
src/components/friends/views/friends-bar/FriendsBarView.tsx
+2 -2
View File
@@ -14,11 +14,11 @@ export const FriendBarView: FC<{ onlineFriends: MessengerFriend[] }> = props =>
return (
<div ref={ elementRef } className="flex items-center ">
<Button className="z-[2] cursor-pointer" disabled={ (indexOffset <= 0) } variant="black" onClick={ event => setIndexOffset(indexOffset - 1) }>
<Button className="z-2 cursor-pointer" disabled={ (indexOffset <= 0) } variant="black" onClick={ event => setIndexOffset(indexOffset - 1) }>
<FaChevronLeft className="fa-icon" />
</Button>
{ Array.from(Array(MAX_DISPLAY_COUNT), (e, i) => <FriendBarItemView key={ i } friend={ (onlineFriends[indexOffset + i] || null) } />) }
<Button className="z-[2] cursor-pointer" disabled={ !((onlineFriends.length > MAX_DISPLAY_COUNT) && ((indexOffset + MAX_DISPLAY_COUNT) <= (onlineFriends.length - 1))) } variant="black" onClick={ event => setIndexOffset(indexOffset + 1) }>
<Button className="z-2 cursor-pointer" disabled={ !((onlineFriends.length > MAX_DISPLAY_COUNT) && ((indexOffset + MAX_DISPLAY_COUNT) <= (onlineFriends.length - 1))) } variant="black" onClick={ event => setIndexOffset(indexOffset + 1) }>
<FaChevronRight className="fa-icon" />
</Button>
</div>
src/components/friends/views/messenger/messenger-thread/FriendsMessengerThreadGroup.tsx
+2 -2
View File
@@ -33,12 +33,12 @@ export const FriendsMessengerThreadGroup: FC<{ thread: MessengerThread, group: M
<Base className="w-full text-break">
{ (chat.type === MessengerThreadChat.SECURITY_NOTIFICATION) &&
<Flex alignItems="center" className="bg-light rounded mb-2 px-2 py-1 small text-muted" gap={ 2 }>
<Base className="nitro-friends-spritesheet icon-warning flex-shrink-0" />
<Base className="nitro-friends-spritesheet icon-warning shrink-0" />
<Base>{ chat.message }</Base>
</Flex> }
{ (chat.type === MessengerThreadChat.ROOM_INVITE) &&
<Flex alignItems="center" className="bg-light rounded mb-2 px-2 py-1 small text-black" gap={ 2 }>
<Base className="messenger-notification-icon flex-shrink-0" />
<Base className="messenger-notification-icon shrink-0" />
<Base>{ (LocalizeText('messenger.invitation') + ' ') }{ chat.message }</Base>
</Flex> }
</Base>
src/components/game-center/GameCenterView.tsx
+1 -1
View File
@@ -39,7 +39,7 @@ export const GameCenterView = () =>
if(!isVisible || !games || !accountStatus) return;
return <Flex className="top-0 bottom-0 start-0 end-0 bg-black" justifyContent="center" position="absolute">
return <Flex className="top-0 bottom-0 inset-s-0 inset-e-0 bg-black" justifyContent="center" position="absolute">
<Flex column className="game-center-main">
<GameView/>
<GameListView />
src/components/groups/views/GroupBadgeCreatorView.tsx
+2 -2
View File
@@ -49,13 +49,13 @@ export const GroupBadgeCreatorView: FC<GroupBadgeCreatorViewProps> = props =>
<Grid columnCount={ 3 } gap={ 1 }>
{ POSITIONS.map((position, posIndex) =>
{
return <div key={ posIndex } className={ `relative rounded-[.25rem] w-[16px] h-[16px] bg-[#fff] border-[2px] border-[solid] border-[#fff] [box-shadow:inset_3px_3px_#0000001a] cursor-pointer ${ (badgeParts[index].position === position) ? 'bg-primary [box-shadow:none]' : '' }` } onClick={ event => setPartProperty(index, 'position', position) } />;
return <div key={ posIndex } className={ `relative rounded-[.25rem] w-[16px] h-[16px] bg-[#fff] border-2 border-[solid] border-[#fff] [box-shadow:inset_3px_3px_#0000001a] cursor-pointer ${ (badgeParts[index].position === position) ? 'bg-primary [box-shadow:none]' : '' }` } onClick={ event => setPartProperty(index, 'position', position) } />;
}) }
</Grid> }
<Grid columnCount={ 8 } gap={ 1 }>
{ (groupCustomize.badgePartColors.length > 0) && groupCustomize.badgePartColors.map((item, colorIndex) =>
{
return <div key={ colorIndex } className={ `relative [box-shadow:inset_2px_2px_#0003] rounded-[.25rem] w-[16px] h-[16px] bg-[#fff] border-[2px] border-[solid] border-[#fff] [box-shadow:inset_3px_3px_#0000001a]cursor-pointer ${ (badgeParts[index].color === (colorIndex + 1)) ? 'bg-primary [box-shadow:none]' : '' }` } style={ { backgroundColor: '#' + item.color } } onClick={ event => setPartProperty(index, 'color', (colorIndex + 1)) } />;
return <div key={ colorIndex } className={ `relative [box-shadow:inset_2px_2px_#0003] rounded-[.25rem] w-[16px] h-[16px] bg-[#fff] border-2 border-[solid] border-[#fff] [box-shadow:inset_3px_3px_#0000001a]cursor-pointer ${ (badgeParts[index].color === (colorIndex + 1)) ? 'bg-primary [box-shadow:none]' : '' }` } style={ { backgroundColor: '#' + item.color } } onClick={ event => setPartProperty(index, 'color', (colorIndex + 1)) } />;
}) }
</Grid>
</Flex>
src/components/groups/views/GroupCreatorView.tsx
+4 -4
View File
@@ -118,14 +118,14 @@ export const GroupCreatorView: FC<GroupCreatorViewProps> = props =>
if(!groupData) return null;
return (
<NitroCardView className="h-[355px] w-[390px] border-[1px] border-[solid] border-[#283F5D] " theme="primary-slim">
<NitroCardView className="h-[355px] w-[390px] border border-[solid] border-[#283F5D] " theme="primary-slim">
<NitroCardHeaderView headerText={ LocalizeText('group.create.title') } onCloseClick={ onCloseClose } />
<NitroCardContentView>
<div className="flex items-center justify-center creator-tabs">
{ TABS.map((tab, index) =>
{
return (
<Flex key={ index } center className={ `relative -ml-[6px] bg-[url('@/assets/images/groups/creator_tabs.png')] bg-no-repeat ${ ((tab === 1) ? 'w-[84px] h-[24px] bg-[0px_0px]' : (tab === 4) ? 'w-[133px] h-[28px] bg-[0px_-104px]' : 'w-[83px] h-[24px] bg-[0px_-52px]') } ${ (currentTab === tab) ? 'active' : '' }` }>
<Flex key={ index } center className={ `relative -ml-[6px] bg-[url('@/assets/images/groups/creator_tabs.png')] bg-no-repeat ${ ((tab === 1) ? 'w-[84px] h-[24px] bg-position-[0px_0px]' : (tab === 4) ? 'w-[133px] h-[28px] bg-position-[0px_-104px]' : 'w-[83px] h-[24px] bg-position-[0px_-52px]') } ${ (currentTab === tab) ? 'active' : '' }` }>
<Text variant="white">{ LocalizeText(`group.create.steplabel.${ tab }`) }</Text>
</Flex>
);
@@ -133,8 +133,8 @@ export const GroupCreatorView: FC<GroupCreatorViewProps> = props =>
</div>
<Column overflow="hidden">
<div className="flex items-center gap-2">
<div className={ `bg-no-repeat w-[122px] h-[68px] bg-[url('@/assets/images/groups/creator_images.png')] ${ currentTab === 1 && 'bg-[0px_0px] !w-[99px] !h-[50px]' }
${ currentTab == 2 && '!bg-[-99px_0px] !w-[98px] !h-[62px]' } ${ currentTab === 3 && '!bg-[0px_-50px] !w-[96px] !h-[45px]' } ${ currentTab === 4 || currentTab === 5 && '!bg-[0px_-95px] !w-[114px] !h-[61px]' } ` } />
<div className={ `bg-no-repeat w-[122px] h-[68px] bg-[url('@/assets/images/groups/creator_images.png')] ${ currentTab === 1 && 'bg-position-[0px_0px] w-[99px]! h-[50px]!' }
${ currentTab == 2 && 'bg-position-[-99px_0px]! w-[98px]! h-[62px]!' } ${ currentTab === 3 && 'bg-position-[0px_-50px]! w-[96px]! h-[45px]!' } ${ currentTab === 4 || currentTab === 5 && 'bg-position-[0px_-95px]! w-[114px]! h-[61px]!' } ` } />
<Column grow gap={ 0 }>
<Text bold fontSize={ 4 }>{ LocalizeText(`group.create.stepcaption.${ currentTab }`) }</Text>
<Text>{ LocalizeText(`group.create.stepdesc.${ currentTab }`) }</Text>
src/components/groups/views/GroupRoomInformationView.tsx
+1 -1
View File
@@ -105,7 +105,7 @@ export const GroupRoomInformationView: FC<{}> = props =>
if(!groupInformation) return null;
return (
<div className="pointer-events-auto px-[5px] py-[6px] [box-shadow:inset_0_5px_#22222799,_inset_0_-4px_#12121599] bg-[#1c1c20f2] rounded text-sm">
<div className="pointer-events-auto px-[5px] py-[6px] [box-shadow:inset_0_5px_#22222799,inset_0_-4px_#12121599] bg-[#1c1c20f2] rounded text-sm">
<div className="flex flex-col gap-2">
<Flex pointer alignItems="center" justifyContent="between" onClick={ event => setIsOpen(value => !value) }>
<Text variant="white">{ LocalizeText('group.homeroominfo.title') }</Text>
src/components/groups/views/tabs/GroupTabColorsView.tsx
+2 -2
View File
@@ -110,7 +110,7 @@ export const GroupTabColorsView: FC<GroupTabColorsViewProps> = props =>
<AutoGrid columnCount={ 7 } columnMinHeight={ 16 } columnMinWidth={ 16 } gap={ 1 }>
{ groupData.groupColors && groupCustomize.groupColorsA && groupCustomize.groupColorsA.map((item, index) =>
{
return <div key={ index } className={ classNames('relative rounded-[.25rem] w-[16px] h-[16px] bg-[#fff] border-[2px] border-[solid] border-[#fff] [box-shadow:inset_3px_3px_#0000001a] [box-shadow:inset_2px_2px_#0003] cursor-pointer', ((groupData.groupColors[0] === item.id) && 'bg-primary [box-shadow:none]')) } style={ { backgroundColor: '#' + item.color } } onClick={ () => selectColor(0, item.id) }></div>;
return <div key={ index } className={ classNames('relative rounded-[.25rem] w-[16px] h-[16px] bg-[#fff] border-2 border-[solid] border-[#fff] [box-shadow:inset_3px_3px_#0000001a] [box-shadow:inset_2px_2px_#0003] cursor-pointer', ((groupData.groupColors[0] === item.id) && 'bg-primary [box-shadow:none]')) } style={ { backgroundColor: '#' + item.color } } onClick={ () => selectColor(0, item.id) }></div>;
}) }
</AutoGrid>
</Column>
@@ -119,7 +119,7 @@ export const GroupTabColorsView: FC<GroupTabColorsViewProps> = props =>
<AutoGrid columnCount={ 7 } columnMinHeight={ 16 } columnMinWidth={ 16 } gap={ 1 }>
{ groupData.groupColors && groupCustomize.groupColorsB && groupCustomize.groupColorsB.map((item, index) =>
{
return <div key={ index } className={ classNames('relative rounded-[.25rem] w-[16px] h-[16px] bg-[#fff] border-[2px] border-[solid] border-[#fff] [box-shadow:inset_3px_3px_#0000001a] [box-shadow:inset_2px_2px_#0003] cursor-pointer', ((groupData.groupColors[1] === item.id) && 'bg-primary [box-shadow:none]')) } style={ { backgroundColor: '#' + item.color } } onClick={ () => selectColor(1, item.id) }></div>;
return <div key={ index } className={ classNames('relative rounded-[.25rem] w-[16px] h-[16px] bg-[#fff] border-2 border-[solid] border-[#fff] [box-shadow:inset_3px_3px_#0000001a] [box-shadow:inset_2px_2px_#0003] cursor-pointer', ((groupData.groupColors[1] === item.id) && 'bg-primary [box-shadow:none]')) } style={ { backgroundColor: '#' + item.color } } onClick={ () => selectColor(1, item.id) }></div>;
}) }
</AutoGrid>
</Column>
src/components/guide-tool/views/GuideToolOngoingView.tsx
+2 -2
View File
@@ -92,7 +92,7 @@ export const GuideToolOngoingView: FC<GuideToolOngoingViewProps> = props =>
{
return (
<Flex key={ index } fullWidth gap={ 2 } justifyContent={ isOwnChat(group.userId) ? 'end' : 'start' }>
<div className="flex-shrink-0 message-avatar">
<div className="shrink-0 message-avatar">
{ (!isOwnChat(group.userId)) &&
<LayoutAvatarImageView direction={ 2 } figure={ userFigure } /> }
</div>
@@ -104,7 +104,7 @@ export const GuideToolOngoingView: FC<GuideToolOngoingViewProps> = props =>
{ group.messages.map((chat, index) => <div key={ index } className={ classNames(chat.roomId ? 'text-break text-underline' : 'text-break', 'chat.roomId' && 'cursor-pointer') } onClick={ () => chat.roomId ? TryVisitRoom(chat.roomId) : null }>{ chat.message }</div>) }
</div>
{ (isOwnChat(group.userId)) &&
<div className="flex-shrink-0 message-avatar">
<div className="shrink-0 message-avatar">
<LayoutAvatarImageView direction={ 4 } figure={ GetSessionDataManager().figure } />
</div> }
</Flex>
src/components/hc-center/HcCenterView.tsx
+3 -3
View File
@@ -137,13 +137,13 @@ export const HcCenterView: FC<{}> = props =>
</Button>
</Flex>
</div>
<div className="end-0 p-4 top-0 habbo-avatar absolute">
<div className="inset-e-0 p-4 top-0 habbo-avatar absolute">
<LayoutAvatarImageView direction={ 4 } figure={ userFigure } scale={ 2 } />
</div>
</Flex>
<NitroCardContentView>
<div className="flex gap-2">
<LayoutBadgeImageView badgeCode={ badgeCode } className="align-self-center flex-shrink-0 me-1" />
<LayoutBadgeImageView badgeCode={ badgeCode } className="align-self-center shrink-0 me-1" />
<Column className="streak-info" gap={ 0 } size={ 5 }>
<Text>{ LocalizeText('hccenter.status.' + clubStatus) }</Text>
<Text dangerouslySetInnerHTML={ { __html: getInfoText() } } />
@@ -157,7 +157,7 @@ export const HcCenterView: FC<{}> = props =>
<div>{ LocalizeText('hccenter.special.info') }</div>
<div className="btn btn-link text-white p-0 mt-auto align-self-baseline" onClick={ () => CreateLinkEvent('habbopages/' + GetConfigurationValue('hc.center')['payday.habbopage']) }>{ LocalizeText('hccenter.special.infolink') }</div>
</Column>
<div className="payday flex-shrink-0 p-2">
<div className="payday shrink-0 p-2">
<h5 className="mb-2 ms-2">{ LocalizeText('hccenter.special.time.title') }</h5>
<div className="flex flex-row mb-2">
<div className="clock me-2" />
src/components/help/views/HelpIndexView.tsx
+1 -1
View File
@@ -22,7 +22,7 @@ export const HelpIndexView: FC<{}> = props =>
return (
<>
<div className="flex flex-col justify-center alignp-items-enter !flex-grow gap-1">
<div className="flex flex-col justify-center alignp-items-enter grow! gap-1">
<Text fontSize={ 3 }>{ LocalizeText('help.main.frame.title') }</Text>
<Text>{ LocalizeText('help.main.self.description') }</Text>
</div>
src/components/inventory/views/badge/InventoryBadgeView.tsx
+1 -1
View File
@@ -86,7 +86,7 @@ export const InventoryBadgeView: FC<{ filteredBadgeCodes?: string[] }> = props =
{ LocalizeText(isWearingBadge(selectedBadgeCode) ? 'inventory.badges.clearbadge' : 'inventory.badges.wearbadge') }
</NitroButton>
{ !isWearingBadge(selectedBadgeCode) &&
<NitroButton className="!bg-danger hover:!bg-danger/80 p-1" onClick={ attemptDeleteBadge }>
<NitroButton className="bg-danger! hover:bg-danger/80! p-1" onClick={ attemptDeleteBadge }>
<FaTrashAlt className="fa-icon" />
</NitroButton> }
</div>
src/components/inventory/views/furniture/InventoryFurnitureDeleteView.tsx
+2 -2
View File
@@ -84,7 +84,7 @@ export const InventoryFurnitureDeleteView: FC<{}> = props =>
className="cursor-pointer text-black fa-icon shrink-0"
onClick={ () => updateAmount((amount - 1).toString()) } />
<NitroInput
className="quantity-input text-center !py-0.5"
className="quantity-input text-center py-0.5!"
type="number"
min={ 1 }
max={ maxAmount }
@@ -98,7 +98,7 @@ export const InventoryFurnitureDeleteView: FC<{}> = props =>
</NitroButton>
</div>
<NitroButton
className="!bg-danger hover:!bg-danger/80 w-full"
className="bg-danger! hover:bg-danger/80! w-full"
disabled={ amount > maxAmount }
onClick={ deleteItem }>
{ LocalizeText('inventory.delete.confirm_delete.button') }
src/components/inventory/views/furniture/InventoryFurnitureView.tsx
+3 -3
View File
@@ -131,14 +131,14 @@ export const InventoryFurnitureView: FC<{
<LayoutRoomPreviewerView height={ 140 } roomPreviewer={ roomPreviewer } />
{ selectedItem &&
<NitroButton
className="!bg-danger hover:!bg-danger/80 absolute bottom-2 end-2 p-1"
className="bg-danger! hover:bg-danger/80! absolute bottom-2 inset-e-2 p-1"
onClick={ () => attemptDeleteItem(selectedItem) }>
<FaTrashAlt className="fa-icon" />
</NitroButton> }
{ selectedItem && selectedItem.stuffData.isUnique &&
<LayoutLimitedEditionCompactPlateView className="top-2 end-2" position="absolute" uniqueNumber={ selectedItem.stuffData.uniqueNumber } uniqueSeries={ selectedItem.stuffData.uniqueSeries } /> }
<LayoutLimitedEditionCompactPlateView className="top-2 inset-e-2" position="absolute" uniqueNumber={ selectedItem.stuffData.uniqueNumber } uniqueSeries={ selectedItem.stuffData.uniqueSeries } /> }
{ (selectedItem && selectedItem.stuffData.rarityLevel > -1) &&
<LayoutRarityLevelView className="top-2 end-2" level={ selectedItem.stuffData.rarityLevel } position="absolute" /> }
<LayoutRarityLevelView className="top-2 inset-e-2" level={ selectedItem.stuffData.rarityLevel } position="absolute" /> }
</div>
{ selectedItem &&
<div className="flex flex-col justify-between gap-2 grow">
src/components/inventory/views/furniture/InventoryTradeView.tsx
+3 -3
View File
@@ -189,7 +189,7 @@ export const InventoryTradeView: FC<InventoryTradeViewProps> = props =>
return (
<LayoutGridItem key={ index } className={ !count ? 'opacity-0-5 ' : '' } itemActive={ (groupItem === item) } itemCount={ count } itemImage={ item.iconUrl } itemUniqueNumber={ item.stuffData.uniqueNumber } onClick={ event => (count && setGroupItem(item)) } onDoubleClick={ event => attemptItemOffer(1) }>
{ ((count > 0) && (groupItem === item)) &&
<Button className="trade-button bottom-1 end-1" position="absolute" variant="success" onClick={ event => attemptItemOffer(1) }>
<Button className="trade-button bottom-1 inset-e-1" position="absolute" variant="success" onClick={ event => attemptItemOffer(1) }>
<FaChevronRight className="fa-icon" />
</Button>
}
@@ -229,7 +229,7 @@ export const InventoryTradeView: FC<InventoryTradeViewProps> = props =>
return (
<LayoutGridItem key={ i } itemActive={ (ownGroupItem === item) } itemCount={ item.getTotalCount() } itemImage={ item.iconUrl } itemUniqueNumber={ item.stuffData.uniqueNumber } onClick={ event => setOwnGroupItem(item) } onDoubleClick={ event => removeItem(item) }>
{ (ownGroupItem === item) &&
<Button className="trade-button bottom-1 start-1" position="absolute" variant="danger" onClick={ event => removeItem(item) }>
<Button className="trade-button bottom-1 inset-s-1" position="absolute" variant="danger" onClick={ event => removeItem(item) }>
<FaChevronLeft className="fa-icon" />
</Button> }
</LayoutGridItem>
@@ -260,7 +260,7 @@ export const InventoryTradeView: FC<InventoryTradeViewProps> = props =>
</div>
</Column>
</Grid>
<div className="flex !flex-grow justify-between">
<div className="flex grow! justify-between">
<Button variant="danger" onClick={ cancelTrade }>{ LocalizeText('generic.cancel') }</Button>
{ (tradeState === TradeState.TRADING_STATE_READY) &&
<Button disabled={ (!ownUser.itemCount && !otherUser.itemCount) } variant="secondary" onClick={ progressTrade }>{ LocalizeText('inventory.trading.accept') }</Button> }
src/components/inventory/views/pet/InventoryPetView.tsx
+1 -1
View File
@@ -92,7 +92,7 @@ export const InventoryPetView: FC<{
<LayoutRoomPreviewerView height={ 140 } roomPreviewer={ roomPreviewer } />
{ selectedPet &&
<NitroButton
className="!bg-danger hover:!bg-danger/80 absolute bottom-2 end-2 p-1"
className="bg-danger! hover:bg-danger/80! absolute bottom-2 inset-e-2 p-1"
onClick={ attemptDeletePet }>
<FaTrashAlt className="fa-icon" />
</NitroButton> }
src/components/mod-tools/ModToolsView.tsx
+4 -4
View File
@@ -124,16 +124,16 @@ export const ModToolsView: FC<{}> = props =>
<NitroCardHeaderView headerText={ 'Mod Tools' } onCloseClick={ event => setIsVisible(false) } />
<NitroCardContentView className="text-black" gap={ 1 }>
<Button className="relative" disabled={ (currentRoomId <= 0) } gap={ 1 } onClick={ event => CreateLinkEvent(`mod-tools/toggle-room-info/${ currentRoomId }`) }>
<div className="nitro-icon icon-small-room absolute start-1" /> Room Tool
<div className="nitro-icon icon-small-room absolute inset-s-1" /> Room Tool
</Button>
<Button className="relative" disabled={ (currentRoomId <= 0) } gap={ 1 } innerRef={ elementRef } onClick={ event => CreateLinkEvent(`mod-tools/toggle-room-chatlog/${ currentRoomId }`) }>
<div className="nitro-icon icon-chat-history absolute start-1" /> Chatlog Tool
<div className="nitro-icon icon-chat-history absolute inset-s-1" /> Chatlog Tool
</Button>
<Button className="relative" disabled={ !selectedUser } gap={ 1 } onClick={ () => CreateLinkEvent(`mod-tools/toggle-user-info/${ selectedUser.userId }`) }>
<div className="nitro-icon icon-user absolute start-1" /> User: { selectedUser ? selectedUser.username : '' }
<div className="nitro-icon icon-user absolute inset-s-1" /> User: { selectedUser ? selectedUser.username : '' }
</Button>
<Button className="relative" gap={ 1 } onClick={ () => setIsTicketsVisible(prevValue => !prevValue) }>
<div className="nitro-icon icon-tickets absolute start-1" /> Report Tool
<div className="nitro-icon icon-tickets absolute inset-s-1" /> Report Tool
</Button>
</NitroCardContentView>
</NitroCardView> }
src/components/navigator/views/NavigatorRoomCreatorView.tsx
+3 -3
View File
@@ -71,9 +71,9 @@ export const NavigatorRoomCreatorView: FC<{}> = props =>
<Text>{ LocalizeText('navigator.createroom.roomnameinfo') }</Text>
<NitroInput maxLength={ 60 } placeholder={ LocalizeText('navigator.createroom.roomnameinfo') } type="text" onChange={ event => setName(event.target.value) } />
</div>
<div className="flex flex-col !flex-grow gap-1">
<div className="flex flex-col grow! gap-1">
<Text>{ LocalizeText('navigator.createroom.roomdescinfo') }</Text>
<textarea className="!flex-grow form-control form-control-sm w-full" maxLength={ 255 } placeholder={ LocalizeText('navigator.createroom.roomdescinfo') } onChange={ event => setDescription(event.target.value) } />
<textarea className="grow! form-control form-control-sm w-full" maxLength={ 255 } placeholder={ LocalizeText('navigator.createroom.roomdescinfo') } onChange={ event => setDescription(event.target.value) } />
</div>
<div className="flex flex-col gap-1">
<Text>{ LocalizeText('navigator.category') }</Text>
@@ -111,7 +111,7 @@ export const NavigatorRoomCreatorView: FC<{}> = props =>
<img alt="" src={ getRoomModelImage(model.name) } />
</Flex>
<Text bold>{ model.tileSize } { LocalizeText('navigator.createroom.tilesize') }</Text>
{ !hcDisabled && model.clubLevel > HabboClubLevelEnum.NO_CLUB && <LayoutCurrencyIcon className="top-1 end-1" position="absolute" type="hc" /> }
{ !hcDisabled && model.clubLevel > HabboClubLevelEnum.NO_CLUB && <LayoutCurrencyIcon className="top-1 inset-e-1" position="absolute" type="hc" /> }
</LayoutGridItem>);
})
}
src/components/navigator/views/NavigatorRoomInfoView.tsx
+1 -1
View File
@@ -131,7 +131,7 @@ export const NavigatorRoomInfoView: FC<NavigatorRoomInfoViewProps> = props => {
</div> }
</Column>
<Column alignItems="center" gap={ 1 }>
<i className={ classNames('flex-shrink-0 nitro-icon icon-house-small cursor-pointer', ((navigatorData.homeRoomId !== navigatorData.enteredGuestRoom.roomId) && 'gray')) } onClick={ () => processAction('set_home_room') } />
<i className={ classNames('shrink-0 nitro-icon icon-house-small cursor-pointer', ((navigatorData.homeRoomId !== navigatorData.enteredGuestRoom.roomId) && 'gray')) } onClick={ () => processAction('set_home_room') } />
{ hasPermission('settings') &&
<i className="cursor-pointer nitro-icon icon-cog" title={ LocalizeText('navigator.room.popup.info.room.settings') } onClick={ event => processAction('open_room_settings') } /> }
<FaLink className="cursor-pointer fa-icon" title={ LocalizeText('navigator.embed.caption') } onClick={ event => processAction('toggle_room_link') } />
src/components/navigator/views/search/NavigatorSearchResultItemInfoView.tsx
+6 -6
View File
@@ -48,7 +48,7 @@ export const NavigatorSearchResultItemInfoView: FC<{
<Popover
ref={ elementRef } // if you'd like a ref to your popover's child, you can grab one here
containerClassName="max-w-[276px] not-italic font-normal leading-normal text-left no-underline [text-shadow:none] normal-case tracking-[normal] [word-break:normal] [word-spacing:normal] whitespace-normal text-[.7875rem] [word-wrap:break-word] bg-[#dfdfdf] bg-clip-padding border-[1px] border-[solid] border-[#283F5D] rounded-[.25rem] [box-shadow:0_2px_#00000073] z-[1070]"
containerClassName="max-w-[276px] not-italic font-normal leading-normal text-left no-underline text-shadow-none normal-case tracking-[normal] [word-break:normal] [word-spacing:normal] whitespace-normal text-[.7875rem] [word-wrap:break-word] bg-[#dfdfdf] bg-clip-padding border border-[solid] border-[#283F5D] rounded-[.25rem] [box-shadow:0_2px_#00000073] z-1070"
content={ ({ position, childRect, popoverRect }) => (
<ArrowContainer // if you'd like an arrow, you can import the ArrowContainer!
arrowColor={ 'black' }
@@ -63,12 +63,12 @@ export const NavigatorSearchResultItemInfoView: FC<{
<Flex gap={ 2 } overflow="hidden">
<LayoutRoomThumbnailView className="flex flex-col items-center mb-1 justify-content-end" customUrl={ roomData.officialRoomPicRef } roomId={ roomData.roomId }>
{ roomData.habboGroupId > 0 && (
<LayoutBadgeImageView badgeCode={ roomData.groupBadgeCode } className={ 'absolute top-0 start-0 m-1 ' } isGroup={ true } />) }
<LayoutBadgeImageView badgeCode={ roomData.groupBadgeCode } className={ 'absolute top-0 inset-s-0 m-1 ' } isGroup={ true } />) }
{ roomData.doorMode !== RoomDataParser.OPEN_STATE && (
<i className={ 'absolute end-0 mb-1 me-1 icon icon-navigator-room-' + (roomData.doorMode === RoomDataParser.DOORBELL_STATE ? 'locked' : roomData.doorMode === RoomDataParser.PASSWORD_STATE ? 'password' : roomData.doorMode === RoomDataParser.INVISIBLE_STATE ? 'invisible' : '') } />) }
<i className={ 'absolute inset-e-0 mb-1 me-1 icon icon-navigator-room-' + (roomData.doorMode === RoomDataParser.DOORBELL_STATE ? 'locked' : roomData.doorMode === RoomDataParser.PASSWORD_STATE ? 'password' : roomData.doorMode === RoomDataParser.INVISIBLE_STATE ? 'invisible' : '') } />) }
</LayoutRoomThumbnailView>
<div className="flex flex-col gap-1">
<Text bold truncate className="flex-grow-1" style={ { maxHeight: 13 } }>
<Text bold truncate className="grow" style={ { maxHeight: 13 } }>
{ roomData.roomName }
</Text>
<div className="flex gap-2">
@@ -80,10 +80,10 @@ export const NavigatorSearchResultItemInfoView: FC<{
<Text italics>{ roomData.ownerName }</Text>
</div>
</div>
<Text className="flex-grow-1">
<Text className="grow">
{ roomData.description }
</Text>
<Flex className={ 'badge p-1 absolute m-1 bottom-0 end-0 m-2 ' + getUserCounterColor() } gap={ 1 }>
<Flex className={ 'badge p-1 absolute m-1 bottom-0 inset-e-0 m-2 ' + getUserCounterColor() } gap={ 1 }>
<FaUser className="fa-icon" />
{ roomData.userCount }
</Flex>
src/components/navigator/views/search/NavigatorSearchResultItemView.tsx
+3 -3
View File
@@ -83,16 +83,16 @@ export const NavigatorSearchResultItemView: FC<NavigatorSearchResultItemViewProp
if(thumbnail) return (
<Column pointer alignItems="center" className="navigator-item p-1 bg-light rounded-3 small mb-1 flex-col border border-muted" gap={ 0 } overflow="hidden" onClick={ visitRoom } { ...rest }>
<LayoutRoomThumbnailView className="flex flex-col items-center justify-end mb-1" customUrl={ roomData.officialRoomPicRef } roomId={ roomData.roomId }>
{ roomData.habboGroupId > 0 && <LayoutBadgeImageView badgeCode={ roomData.groupBadgeCode } className={ 'absolute top-0 start-0 m-1' } isGroup={ true } /> }
{ roomData.habboGroupId > 0 && <LayoutBadgeImageView badgeCode={ roomData.groupBadgeCode } className={ 'absolute top-0 inset-s-0 m-1' } isGroup={ true } /> }
<Flex center className={ 'inline-block px-[.65em] py-[.35em] text-[.75em] font-bold leading-none text-[#fff] text-center whitespace-nowrap align-baseline rounded-[.25rem] p-1 absolute m-1 ' + getUserCounterColor() } gap={ 1 }>
<FaUser className="fa-icon" />
{ roomData.userCount }
</Flex>
{ (roomData.doorMode !== RoomDataParser.OPEN_STATE) &&
<i className={ ('absolute end-0 mb-1 me-1 icon icon-navigator-room-' + ((roomData.doorMode === RoomDataParser.DOORBELL_STATE) ? 'locked' : (roomData.doorMode === RoomDataParser.PASSWORD_STATE) ? 'password' : (roomData.doorMode === RoomDataParser.INVISIBLE_STATE) ? 'invisible' : '')) } /> }
<i className={ ('absolute inset-e-0 mb-1 me-1 icon icon-navigator-room-' + ((roomData.doorMode === RoomDataParser.DOORBELL_STATE) ? 'locked' : (roomData.doorMode === RoomDataParser.PASSWORD_STATE) ? 'password' : (roomData.doorMode === RoomDataParser.INVISIBLE_STATE) ? 'invisible' : '')) } /> }
</LayoutRoomThumbnailView>
<Flex className="w-full">
<Text truncate className="!flex-grow">{ roomData.roomName }</Text>
<Text truncate className="grow!">{ roomData.roomName }</Text>
<Flex reverse alignItems="center" gap={ 1 }>
<NavigatorSearchResultItemInfoView roomData={ roomData } />
</Flex>
src/components/navigator/views/search/NavigatorSearchResultView.tsx
+1 -1
View File
@@ -88,7 +88,7 @@ export const NavigatorSearchResultView: FC<NavigatorSearchResultViewProps> = pro
// <div className="flex flex-col">
// <div className="flex items-center px-2 py-1 text-black">
// <i className={ 'text-secondary fas ' + (isExtended ? 'fa-minus' : 'fa-plus') } onClick={ toggleExtended }></i>
// <div className="ms-2 !flex-grow">{ LocalizeText(getResultTitle()) }</div>
// <div className="ms-2 grow!">{ LocalizeText(getResultTitle()) }</div>
// <i className={ 'text-secondary fas ' + classNames({ 'fa-bars': (displayMode === NavigatorSearchResultViewDisplayMode.LIST), 'fa-th': displayMode >= NavigatorSearchResultViewDisplayMode.THUMBNAILS })}></i>
// </div>
// { isExtended &&
src/components/notification-center/views/alert-layouts/NotificationDefaultAlertView.tsx
+1 -1
View File
@@ -24,7 +24,7 @@ export const NotificationDefaultAlertView: FC<NotificationDefaultAlertViewProps>
return (
<LayoutNotificationAlertView title={ title } onClose={ onClose } { ...rest } type={ hasFrank ? NotificationAlertType.DEFAULT : item.alertType }>
<Flex fullHeight gap={ hasFrank || (item.imageUrl && !imageFailed) ? 2 : 0 } overflow="auto">
{ hasFrank && !item.imageUrl && <div className="notification-frank flex-shrink-0" /> }
{ hasFrank && !item.imageUrl && <div className="notification-frank shrink-0" /> }
{ item.imageUrl && !imageFailed && <img alt={ item.title } className="align-self-baseline" src={ item.imageUrl } onError={ () =>
{
setImageFailed(true);
src/components/notification-center/views/bubble-layouts/NotificationClubGiftBubbleView.tsx
+1 -1
View File
@@ -14,7 +14,7 @@ export const NotificationClubGiftBubbleView: FC<NotificationClubGiftBubbleViewPr
return (
<LayoutNotificationBubbleView className="flex-col nitro-notification-bubble" fadesOut={ false } onClose={ onClose } { ...rest }>
<div className="flex items-center gap-2 mb-2">
<LayoutCurrencyIcon className="flex-shrink-0" type="hc" />
<LayoutCurrencyIcon className="shrink-0" type="hc" />
<span className="ms-1">{ LocalizeText('notifications.text.club_gift') }</span>
</div>
<div className="flex items-center justify-end gap-2">
src/components/right-side/RightSideView.tsx
+1 -1
View File
@@ -10,7 +10,7 @@ import { RoomPromotesWidgetView } from '../room/widgets/room-promotes/RoomPromot
export const RightSideView: FC<{}> = props =>
{
return (
<div className="absolute top-[0] right-[10px] min-w-[200px] max-w-[200px] h-[calc(100%-55px)] pointer-events-none">
<div className="absolute top-0 right-[10px] min-w-[200px] max-w-[200px] h-[calc(100%-55px)] pointer-events-none">
<Column gap={ 1 } position="relative">
<PurseView />
<GroupRoomInformationView />
src/components/room/widgets/avatar-info/infostand/InfoStandWidgetFurniView.tsx
+12 -12
View File
@@ -329,34 +329,34 @@ export const InfoStandWidgetFurniView: FC<InfoStandWidgetFurniViewProps> = props
return (
<Column alignItems="end" gap={ 1 }>
<Column className="relative min-w-[190px] max-w-[190px] z-30 pointer-events-auto bg-[rgba(28,_28,_32,_.95)] [box-shadow:inset_0_5px_#22222799,_inset_0_-4px_#12121599] rounded">
<Column className="relative min-w-[190px] max-w-[190px] z-30 pointer-events-auto bg-[rgba(28,28,32,.95)] [box-shadow:inset_0_5px_#22222799,inset_0_-4px_#12121599] rounded">
<Column className="h-full p-[8px] overflow-auto" gap={ 1 } overflow="visible">
<div className="flex flex-col gap-1">
<Flex alignItems="center" gap={ 1 } justifyContent="between">
<Text small wrap variant="white">{ avatarInfo.name }</Text>
<FaTimes className="cursor-pointer fa-icon" onClick={ onClose } />
</Flex>
<hr className="m-0 bg-[#0003] border-[0] opacity-[.5] h-px" />
<hr className="m-0 bg-[#0003] border-0 opacity-[.5] h-px" />
</div>
<div className="flex flex-col gap-1">
<Flex gap={ 1 } position="relative">
{ avatarInfo.stuffData.isUnique &&
<div className="absolute end-0">
<div className="absolute inset-e-0">
<LayoutLimitedEditionCompactPlateView uniqueNumber={ avatarInfo.stuffData.uniqueNumber } uniqueSeries={ avatarInfo.stuffData.uniqueSeries } />
</div> }
{ (avatarInfo.stuffData.rarityLevel > -1) &&
<div className="absolute end-0">
<div className="absolute inset-e-0">
<LayoutRarityLevelView level={ avatarInfo.stuffData.rarityLevel } />
</div> }
<Flex center fullWidth>
<LayoutRoomObjectImageView category={ avatarInfo.category } objectId={ avatarInfo.id } roomId={ roomSession.roomId } />
</Flex>
</Flex>
<hr className="m-0 bg-[#0003] border-[0] opacity-[.5] h-px" />
<hr className="m-0 bg-[#0003] border-0 opacity-[.5] h-px" />
</div>
<div className="flex flex-col gap-1">
<Text fullWidth small textBreak wrap variant="white">{ avatarInfo.description }</Text>
<hr className="m-0 bg-[#0003] border-[0] opacity-[.5] h-px" />
<hr className="m-0 bg-[#0003] border-0 opacity-[.5] h-px" />
</div>
<div className="flex flex-col gap-1">
<div className="flex items-center gap-1">
@@ -374,7 +374,7 @@ export const InfoStandWidgetFurniView: FC<InfoStandWidgetFurniViewProps> = props
</div>
{ (isJukeBox || isSongDisk) &&
<div className="flex flex-col gap-1">
<hr className="m-0 bg-[#0003] border-[0] opacity-[.5] h-px" />
<hr className="m-0 bg-[#0003] border-0 opacity-[.5] h-px" />
{ (songId === -1) &&
<Text small wrap variant="white">
{ LocalizeText('infostand.jukebox.text.not.playing') }
@@ -397,12 +397,12 @@ export const InfoStandWidgetFurniView: FC<InfoStandWidgetFurniViewProps> = props
<div className="flex flex-col gap-1">
{ isCrackable &&
<>
<hr className="m-0 bg-[#0003] border-[0] opacity-[.5] h-px" />
<hr className="m-0 bg-[#0003] border-0 opacity-[.5] h-px" />
<Text small wrap variant="white">{ LocalizeText('infostand.crackable_furni.hits_remaining', [ 'hits', 'target' ], [ crackableHits.toString(), crackableTarget.toString() ]) }</Text>
</> }
{ avatarInfo.groupId > 0 &&
<>
<hr className="m-0 bg-[#0003] border-[0] opacity-[.5] h-px" />
<hr className="m-0 bg-[#0003] border-0 opacity-[.5] h-px" />
<Flex pointer alignItems="center" gap={ 2 } onClick={ () => GetGroupInformation(avatarInfo.groupId) }>
<LayoutBadgeImageView badgeCode={ getGroupBadgeCode() } isGroup={ true } />
<Text underline variant="white">{ groupName }</Text>
@@ -410,11 +410,11 @@ export const InfoStandWidgetFurniView: FC<InfoStandWidgetFurniViewProps> = props
</> }
{ godMode &&
<>
<hr className="m-0 bg-[#0003] border-[0] opacity-[.5] h-px" />
<hr className="m-0 bg-[#0003] border-0 opacity-[.5] h-px" />
{ canSeeFurniId && <Text small wrap variant="white">ID: { avatarInfo.id }</Text> }
{ (furniKeys.length > 0) &&
<>
<hr className="m-0 bg-[#0003] border-[0] opacity-[.5] h-px" />
<hr className="m-0 bg-[#0003] border-0 opacity-[.5] h-px" />
<div className="flex flex-col gap-1">
{ furniKeys.map((key, index) =>
{
@@ -429,7 +429,7 @@ export const InfoStandWidgetFurniView: FC<InfoStandWidgetFurniViewProps> = props
</> }
{ (customKeys.length > 0) &&
<>
<hr className="m-0 bg-[#0003] border-[0] opacity-[.5] h-px" />
<hr className="m-0 bg-[#0003] border-0 opacity-[.5] h-px" />
<div className="flex flex-col gap-1">
{ customKeys.map((key, index) =>
{
src/components/room/widgets/avatar-info/infostand/InfoStandWidgetPetView.tsx
+2 -2
View File
@@ -102,7 +102,7 @@ const MonsterplantStats: FC<{
{LocalizeText('infostand.pet.text.growth')}
</Text>
<LayoutCounterTimeView
className="top-2 end-2"
className="top-2 inset-e-2"
day={ConvertSeconds(remainingGrowTime).split(':')[0]}
hour={ConvertSeconds(remainingGrowTime).split(':')[1]}
minutes={ConvertSeconds(remainingGrowTime).split(':')[2]}
@@ -114,7 +114,7 @@ const MonsterplantStats: FC<{
<Text small truncate variant="white">
{LocalizeText('infostand.pet.text.raritylevel', ['level'], [LocalizeText(`infostand.pet.raritylevel.${avatarInfo.rarityLevel}`)])}
</Text>
<LayoutRarityLevelView className="top-2 end-2" level={avatarInfo.rarityLevel} />
<LayoutRarityLevelView className="top-2 inset-e-2" level={avatarInfo.rarityLevel} />
</Column>
<hr className="m-0" />
</div>
src/components/room/widgets/avatar-info/infostand/InfoStandWidgetUserView.tsx
+7 -7
View File
@@ -126,7 +126,7 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
return (
<>
<Column className="relative min-w-[190px] max-w-[190px] z-30 pointer-events-auto bg-[rgba(28,28,32,0.95)] [box-shadow:inset_0_5px_#22222799,_inset_0_-4px_#12121599] rounded">
<Column className="relative min-w-[190px] max-w-[190px] z-30 pointer-events-auto bg-[rgba(28,28,32,0.95)] [box-shadow:inset_0_5px_#22222799,inset_0_-4px_#12121599] rounded">
<Column className="h-full p-[8px] overflow-auto" gap={1} overflow="visible">
<div className="flex flex-col gap-1">
<div className="flex items-center justify-between">
@@ -136,13 +136,13 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
</div>
<FaTimes className="cursor-pointer fa-icon" onClick={onClose} />
</div>
<hr className="m-0 bg-[#0003] border-[0] opacity-[0.5] h-px" />
<hr className="m-0 bg-[#0003] border-0 opacity-[0.5] h-px" />
</div>
<div className="flex flex-col gap-1">
<div className="flex gap-1">
<Column
fullWidth
className={`flex items-center w-full max-w-[68px] rounded-[0.25rem] profile-background ${infostandBackgroundClass}`}
className={`flex items-center w-full max-w-[68px] rounded-sm profile-background ${infostandBackgroundClass}`}
onClick={handleProfileClick}
>
<Base position="absolute" className={`profile-stand ${infostandStandClass}`} />
@@ -185,7 +185,7 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
</Flex>
</Column>
</div>
<hr className="m-0 bg-[#0003] border-[0] opacity-[0.5] h-px" />
<hr className="m-0 bg-[#0003] border-0 opacity-[0.5] h-px" />
</div>
<div className="flex flex-col gap-1">
<Flex alignItems="center" className="bg-light-dark rounded py-1 px-2">
@@ -206,7 +206,7 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
{isEditingMotto && (
<input
autoFocus={true}
className="w-full h-full text-[12px] p-0 outline-[0] border-[0] text-[#fff] relative bg-transparent resize-none focus:italic border-transparent focus:border-transparent focus:ring-0"
className="w-full h-full text-[12px] p-0 outline-0 border-0 text-[#fff] relative bg-transparent resize-none focus:italic border-transparent focus:border-transparent focus:ring-0"
maxLength={GetConfigurationValue<number>('motto.max.length', 38)}
type="text"
value={motto}
@@ -219,7 +219,7 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
</Flex>
)}
</Flex>
<hr className="m-0 bg-[#0003] border-[0] opacity-[0.5] h-px" />
<hr className="m-0 bg-[#0003] border-0 opacity-[0.5] h-px" />
</div>
<div className="flex flex-col gap-1">
<Text small wrap variant="white">
@@ -227,7 +227,7 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
</Text>
{avatarInfo.carryItem > 0 && (
<>
<hr className="m-0 bg-[#0003] border-[0] opacity-[0.5] h-px" />
<hr className="m-0 bg-[#0003] border-0 opacity-[0.5] h-px" />
<Text small wrap variant="white">
{LocalizeText('infostand.text.handitem', ['item'], [LocalizeText('handitem' + avatarInfo.carryItem)])}
</Text>
src/components/room/widgets/chat-input/ChatInputStyleSelectorView.tsx
+2 -2
View File
@@ -46,7 +46,7 @@ export const ChatInputStyleSelectorView: FC<ChatInputStyleSelectorViewProps> = p
<>
<Popover
containerClassName="max-w-[276px] not-italic font-normal leading-normal text-left no-underline [text-shadow:none] normal-case tracking-[normal] [word-break:normal] [word-spacing:normal] whitespace-normal text-[.7875rem] [word-wrap:break-word] bg-[#dfdfdf] bg-clip-padding border-[1px] border-[solid] border-[#283F5D] rounded-[.25rem] [box-shadow:0_2px_#00000073] z-[1070]"
containerClassName="max-w-[276px] not-italic font-normal leading-normal text-left no-underline text-shadow-none normal-case tracking-[normal] [word-break:normal] [word-spacing:normal] whitespace-normal text-[.7875rem] [word-wrap:break-word] bg-[#dfdfdf] bg-clip-padding border border-[solid] border-[#283F5D] rounded-[.25rem] [box-shadow:0_2px_#00000073] z-1070"
content={ ({ position, childRect, popoverRect }) => (
<ArrowContainer // if you'd like an arrow, you can import the ArrowContainer!
arrowColor={ 'black' }
@@ -56,7 +56,7 @@ export const ChatInputStyleSelectorView: FC<ChatInputStyleSelectorViewProps> = p
popoverRect={ popoverRect }
position={ position }
>
<NitroCardContentView className="bg-transparent !max-h-[200px]" overflow="hidden">
<NitroCardContentView className="bg-transparent max-h-[200px]!" overflow="hidden">
<Grid columnCount={ 3 } overflow="auto">
{ chatStyleIds && (chatStyleIds.length > 0) && chatStyleIds.map((styleId) =>
{
src/components/room/widgets/chat/ChatWidgetMessageView.tsx
+3 -3
View File
@@ -79,16 +79,16 @@ export const ChatWidgetMessageView: FC<ChatWidgetMessageViewProps> = ({
<div ref={ elementRef } className={ `bubble-container newbubblehe ${ isVisible ? 'visible' : 'invisible' } w-max absolute select-none pointer-events-auto` }
onClick={ () => GetRoomEngine().selectRoomObject(chat.roomId, chat.senderId, RoomObjectCategory.UNIT) }>
{ chat.styleId === 0 && (
<div className="absolute top-[-1px] left-[1px] w-[30px] h-[calc(100%-0.5px)] rounded-[7px] z-[1]" style={ { backgroundColor: chat.color } } />
<div className="absolute -top-px left-px w-[30px] h-[calc(100%-0.5px)] rounded-[7px] z-1" style={ { backgroundColor: chat.color } } />
) }
<div className={ `chat-bubble bubble-${ chat.styleId } ${ getBubbleWidth } relative z-[1] break-words min-h-[26px] text-[14px] max-w-[350px]` }
<div className={ `chat-bubble bubble-${ chat.styleId } ${ getBubbleWidth } relative z-1 wrap-break-word min-h-[26px] text-[14px] max-w-[350px]` }
style={ { maxWidth: getBubbleWidth } }>
<div className="user-container flex items-center justify-center h-full max-h-[24px] overflow-hidden">
{ chat.imageUrl && chat.imageUrl.length > 0 && (
<div className="user-image absolute top-[-15px] left-[-9.25px] w-[45px] h-[65px] bg-no-repeat bg-center scale-50" style={ { backgroundImage: `url(${ chat.imageUrl })` } } />
) }
</div>
<div className="chat-content py-[5px] px-[6px] ml-[27px] leading-[1] min-h-[25px]">
<div className="chat-content py-[5px] px-[6px] ml-[27px] leading-none min-h-[25px]">
<b className="username" dangerouslySetInnerHTML={ { __html: `${ chat.username }: ` } } />
<span className="message" dangerouslySetInnerHTML={ { __html: `${ chat.formattedText }` } } />
</div>
src/components/room/widgets/chat/ChatWidgetView.tsx
+1 -1
View File
@@ -155,7 +155,7 @@ export const ChatWidgetView: FC<{}> = props =>
}, [ getScrollSpeed, removeHiddenChats, setChatMessages ]);
return (
<div ref={ elementRef } className="absolute flex justify-center items-center w-full top-0 min-h-[1px] z-[var(--chat-zindex)] bg-transparent roundehidden shadow-none pointer-events-none">
<div ref={ elementRef } className="absolute flex justify-center items-center w-full top-0 min-h-px z-(--chat-zindex) bg-transparent roundehidden shadow-none pointer-events-none">
{ chatMessages.map(chat => <ChatWidgetMessageView key={ chat.id } bubbleWidth={ chatSettings.weight } chat={ chat } makeRoom={ makeRoom } />) }
</div>
);
src/components/room/widgets/choosers/ChooserWidgetView.tsx
+1 -1
View File
@@ -73,7 +73,7 @@ export const ChooserWidgetView: FC<ChooserWidgetViewProps> = props => {
<Flex pointer alignItems="center" className={ classNames('rounded p-1', (selectedItem === row) && 'bg-muted') } onClick={ () => setSelectedItem(row) }>
{ pickallFurni && (
<input
className="flex-shrink-0 mx-1 form-check-input"
className="shrink-0 mx-1 form-check-input"
type="checkbox"
checked={ isChecked(row.id) }
onChange={ () => checkedId(row.id) }
src/components/room/widgets/context-menu/ContextMenuListItemView.tsx
+1 -1
View File
@@ -19,7 +19,7 @@ export const ContextMenuListItemView: FC<ContextMenuListItemViewProps> = props =
const getClassNames = useMemo(() =>
{
const newClassNames: string[] = [ 'relative mb-[2px] p-[3px] overflow-hidden', 'h-[24px] max-h-[24px] p-[3px] bg-[repeating-linear-gradient(#131e25,_#131e25_50%,_#0d171d_50%,_#0d171d_100%)] cursor-pointer' ];
const newClassNames: string[] = [ 'relative mb-[2px] p-[3px] overflow-hidden', 'h-[24px] max-h-[24px] p-[3px] bg-[repeating-linear-gradient(#131e25,#131e25_50%,#0d171d_50%,#0d171d_100%)] cursor-pointer' ];
if(disabled) newClassNames.push('disabled');
src/components/room/widgets/context-menu/ContextMenuView.tsx
+2 -2
View File
@@ -75,9 +75,9 @@ export const ContextMenuView: FC<ContextMenuViewProps> = ({
const getClassNames = useMemo(() => {
const classes = [
'!p-[2px]',
'p-[2px]!',
'bg-[#1c323f]',
'border-[2px]',
'border-2',
'border-[solid]',
'border-[rgba(255,255,255,.5)]',
'rounded-[.25rem]',
src/components/room/widgets/furniture/FurnitureCraftingView.tsx
+1 -1
View File
@@ -55,7 +55,7 @@ export const FurnitureCraftingView: FC<{}> = props =>
<NitroCardView className="nitro-widget-crafting" theme="primary-slim">
<NitroCardHeaderView headerText={ LocalizeText('crafting.title') } onCloseClick={ onClose } />
<NitroCardContentView>
<div className="flex !flex-grow gap-2 overflow-hidden">
<div className="flex grow! gap-2 overflow-hidden">
<div className="flex flex-col w-full gap-2">
<Column fullHeight overflow="hidden">
<div className="bg-muted rounded py-1 text-center">{ LocalizeText('crafting.title.products') }</div>
src/components/room/widgets/furniture/FurnitureExchangeCreditView.tsx
+1 -1
View File
@@ -17,7 +17,7 @@ export const FurnitureExchangeCreditView: FC<{}> = props =>
<div className="flex flex-col items-center justify-conent-center">
<div className="exchange-image" />
</div>
<div className="flex flex-col justify-between overflow-hidden !flex-grow">
<div className="flex flex-col justify-between overflow-hidden grow!">
<Column gap={ 1 } overflow="auto">
<Text fontWeight="bold">{ LocalizeText('creditfurni.description', [ 'credits' ], [ value.toString() ]) }</Text>
<Text>{ LocalizeText('creditfurni.prompt') }</Text>
src/components/room/widgets/furniture/FurnitureMannequinView.tsx
+2 -2
View File
@@ -90,7 +90,7 @@ export const FurnitureMannequinView: FC<{}> = props =>
<div className="relative mannequin-preview">
<LayoutAvatarImageView direction={ 2 } figure={ renderedFigure } position="absolute" />
{ (clubLevel > 0) &&
<LayoutCurrencyIcon className="absolute end-2 bottom-2" type="hc" /> }
<LayoutCurrencyIcon className="absolute inset-e-2 bottom-2" type="hc" /> }
</div>
</div>
<Column grow justifyContent="between" overflow="auto">
@@ -132,7 +132,7 @@ export const FurnitureMannequinView: FC<{}> = props =>
</Button>
</> }
{ (mode === MODE_NO_CLUB) &&
<div className="flex justify-center items-center !flex-grow">
<div className="flex justify-center items-center grow!">
<Text>{ LocalizeText('mannequin.widget.clubnotification') }</Text>
</div> }
{ (mode === MODE_WRONG_GENDER) &&
src/components/room/widgets/furniture/FurnitureMysteryTrophyOpenDialogView.tsx
+2 -2
View File
@@ -27,7 +27,7 @@ export const FurnitureMysteryTrophyOpenDialogView: FC<FurnitureMysteryTrophyOpen
<NitroCardHeaderView center headerText={ LocalizeText('mysterytrophy.header.title') } onCloseClick={ onClose } />
<NitroCardContentView>
<div className="flex mysterytrophy-dialog-top p-3">
<div className="mysterytrophy-image flex-shrink-0"></div>
<div className="mysterytrophy-image shrink-0"></div>
<div className="m-2">
<Text className="mysterytrophy-text-big" variant="white">{ LocalizeText('mysterytrophy.header.description') }</Text>
</div>
@@ -36,7 +36,7 @@ export const FurnitureMysteryTrophyOpenDialogView: FC<FurnitureMysteryTrophyOpen
<div className="flex flex-col gap-1">
<div className="flex items-center bg-white rounded py-1 px-2 input-mysterytrophy-dialog">
<textarea className="min-h-[calc(1.5em+ .5rem+2px)] px-[.5rem] py-[.25rem] rounded-[.2rem] form-control-sm input-mysterytrophy" value={ description } onChange={ event => setDescription(event.target.value) } />
<div className="mysterytrophy-pencil-image flex-shrink-0 small fa-icon"></div>
<div className="mysterytrophy-pencil-image shrink-0 small fa-icon"></div>
</div>
<div className="flex items-center mt-2 gap-5 justify-center">
<Text pointer className="text-decoration" onClick={ () => onClose() }>{ LocalizeText('cancel') }</Text>
src/components/room/widgets/furniture/FurnitureSpamWallPostItView.tsx
+1 -1
View File
@@ -25,7 +25,7 @@ export const FurnitureSpamWallPostItView: FC<{}> = props =>
<DraggableWindow handleSelector=".drag-handler" windowPosition={ DraggableWindowPosition.TOP_LEFT }>
<div className={ 'nitro-stickie nitro-stickie-image stickie-' + getStickieColorName(color) }>
<div className="flex items-center stickie-header drag-handler">
<div className="flex items-center !flex-grow h-full">
<div className="flex items-center grow! h-full">
{ canModify &&
<>
<div className="nitro-stickie-image stickie-trash header-trash" onClick={ onClose }></div>
src/components/room/widgets/furniture/FurnitureStickieView.tsx
+1 -1
View File
@@ -42,7 +42,7 @@ export const FurnitureStickieView: FC<{}> = props =>
<DraggableWindow handleSelector=".drag-handler" windowPosition={ DraggableWindowPosition.TOP_LEFT }>
<div className={ 'nitro-stickie nitro-stickie-image stickie-' + (type == 'post_it' ? getStickieColorName(color) : getStickieTypeName(type)) }>
<div className="flex items-center stickie-header drag-handler">
<div className="flex items-center !flex-grow h-full">
<div className="flex items-center grow! h-full">
{ canModify &&
<>
<div className="nitro-stickie-image stickie-trash header-trash" onClick={ trash }></div>
src/components/room/widgets/furniture/playlist-editor/DiskInventoryView.tsx
+1 -1
View File
@@ -66,7 +66,7 @@ export const DiskInventoryView: FC<DiskInventoryViewProps> = props =>
return (
<LayoutGridItem key={ index } classNames={ [ 'text-black' ] } itemActive={ (selectedItem === index) } onClick={ () => setSelectedItem(prev => prev === index ? -1 : index) }>
<div className="flex-shrink-0 disk-image mb-n2" style={ { backgroundColor: GetDiskColor(songInfo?.songData) } }>
<div className="shrink-0 disk-image mb-n2" style={ { backgroundColor: GetDiskColor(songInfo?.songData) } }>
</div>
<Text fullWidth truncate className="text-center">{ songInfo?.name }</Text>
{ (selectedItem === index) &&
src/components/room/widgets/mysterybox/MysteryBoxExtensionView.tsx
+3 -3
View File
@@ -38,7 +38,7 @@ export const MysteryBoxExtensionView: FC<{}> = props =>
if(keyColor === '' && boxColor === '') return null;
return (
<div className="px-[5px] py-[6px] [box-shadow:inset_0_5px_#22222799,_inset_0_-4px_#12121599] text-sm bg-[#1c1c20f2] rounded mysterybox-extension">
<div className="px-[5px] py-[6px] [box-shadow:inset_0_5px_#22222799,inset_0_-4px_#12121599] text-sm bg-[#1c1c20f2] rounded mysterybox-extension">
<div className="flex flex-col">
<Flex pointer alignItems="center" justifyContent="between" onClick={ event => setIsOpen(value => !value) }>
<Text variant="white">{ LocalizeText('mysterybox.tracker.title') }</Text>
@@ -50,12 +50,12 @@ export const MysteryBoxExtensionView: FC<{}> = props =>
<Text variant="white">{ LocalizeText('mysterybox.tracker.description') }</Text>
<div className="flex items-center gap-2 justify-center">
<LayoutGridItem className="mysterybox-container">
<div className="box-image flex-shrink-0" style={ { backgroundColor: getRgbColor(boxColor) } }>
<div className="box-image shrink-0" style={ { backgroundColor: getRgbColor(boxColor) } }>
<div className="chain-overlay-image" />
</div>
</LayoutGridItem>
<LayoutGridItem className="mysterybox-container">
<div className="key-image flex-shrink-0" style={ { backgroundColor: getRgbColor(keyColor) } }>
<div className="key-image shrink-0" style={ { backgroundColor: getRgbColor(keyColor) } }>
<div className="key-overlay-image" />
</div>
</LayoutGridItem>
src/components/room/widgets/pet-package/PetPackageWidgetView.tsx
+2 -2
View File
@@ -14,7 +14,7 @@ export const PetPackageWidgetView: FC<{}> = props =>
<NitroCardHeaderView center headerText={ objectType === 'gnome_box' ? LocalizeText('widgets.gnomepackage.name.title') : LocalizeText('furni.petpackage.open') } onCloseClick={ () => onClose() } />
<NitroCardContentView>
<div className="flex pet-package-container-top p-3">
<div className={ `package-image-${ objectType } flex-shrink-0` }></div>
<div className={ `package-image-${ objectType } shrink-0` }></div>
<div className="m-2">
<Text className="package-text-big" variant="white">{ objectType === 'gnome_box' ? LocalizeText('widgets.gnomepackage.name.title') : LocalizeText('furni.petpackage') }</Text>
</div>
@@ -23,7 +23,7 @@ export const PetPackageWidgetView: FC<{}> = props =>
<div className="flex flex-col gap-1">
<div className="flex items-center bg-white rounded py-1 px-2 input-pet-package-container">
<input className="min-h-[calc(1.5em+ .5rem+2px)] px-[.5rem] py-[.25rem] rounded-[.2rem] form-control-sm input-pet-package" maxLength={ GetConfigurationValue('pet.package.name.max.length') } placeholder={ objectType === 'gnome_box' ? LocalizeText('widgets.gnomepackage.name.select') : LocalizeText('widgets.petpackage.name.title') } type="text" value={ petName } onChange={ event => onChangePetName(event.target.value) } />
<div className="package-pencil-image flex-shrink-0 small fa-icon"></div>
<div className="package-pencil-image shrink-0 small fa-icon"></div>
</div>
{ (errorResult.length > 0) &&
<div className="invalid-feedback d-block m-0">{ errorResult }</div> }
src/components/room/widgets/room-promotes/RoomPromotesWidgetView.tsx
+1 -1
View File
@@ -21,7 +21,7 @@ export const RoomPromotesWidgetView: FC<{}> = props =>
return (
<>
{ promoteInformation.data.adId !== -1 &&
<div className="px-[5px] py-[6px] [box-shadow:inset_0_5px_#22222799,_inset_0_-4px_#12121599] text-sm bg-[#1c1c20f2] rounded">
<div className="px-[5px] py-[6px] [box-shadow:inset_0_5px_#22222799,inset_0_-4px_#12121599] text-sm bg-[#1c1c20f2] rounded">
<div className="flex flex-col">
<Flex pointer alignItems="center" justifyContent="between" onClick={ event => setIsOpen(value => !value) }>
<Text overflow="hidden" variant="white">{ promoteInformation.data.eventName }</Text>
src/components/toolbar/ToolbarMeView.tsx
+1 -1
View File
@@ -32,7 +32,7 @@ export const ToolbarMeView: FC<PropsWithChildren<{
}, [ setMeExpanded ]);
return (
<Flex alignItems="center" className="absolute bottom-[60px] left-[33px] bg-[rgba(20,_20,_20,_.95)] border-[1px] border-[solid] border-[#101010] [box-shadow:inset_2px_2px_rgba(255,_255,_255,_.1),_inset_-2px_-2px_rgba(255,_255,_255,_.1)] rounded-[$border-radius] p-2" gap={ 2 } innerRef={ elementRef }>
<Flex alignItems="center" className="absolute bottom-[60px] left-[33px] bg-[rgba(20,20,20,.95)] border border-[solid] border-[#101010] [box-shadow:inset_2px_2px_rgba(255,255,255,.1),inset_-2px_-2px_rgba(255,255,255,.1)] rounded-[$border-radius] p-2" gap={ 2 } innerRef={ elementRef }>
{ (GetConfigurationValue('guides.enabled') && useGuideTool) &&
<div className="navigation-item relative nitro-icon icon-me-helper-tool cursor-pointer" onClick={ event => DispatchUiEvent(new GuideToolEvent(GuideToolEvent.TOGGLE_GUIDE_TOOL)) } /> }
<div className="navigation-item relative nitro-icon icon-me-achievements cursor-pointer" onClick={ event => CreateLinkEvent('achievements/toggle') }>
src/components/toolbar/ToolbarView.tsx
+1 -1
View File
@@ -69,7 +69,7 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
<ToolbarMeView setMeExpanded={ setMeExpanded } unseenAchievementCount={ getTotalUnseen } useGuideTool={ useGuideTool } />
</motion.div> )}
</AnimatePresence>
<Flex alignItems="center" className="absolute bottom-[0] left-[0] w-full h-[55px] bg-[rgba(28,_28,_32,_.95)] [box-shadow:inset_0_5px_#22222799,_inset_0_-4px_#12121599] py-1 px-3" gap={ 2 } justifyContent="between">
<Flex alignItems="center" className="absolute bottom-0 left-0 w-full h-[55px] bg-[rgba(28,28,32,.95)] [box-shadow:inset_0_5px_#22222799,inset_0_-4px_#12121599] py-1 px-3" gap={ 2 } justifyContent="between">
<Flex alignItems="center" gap={ 2 }>
<Flex alignItems="center" gap={ 2 }>
<Flex center pointer className={ 'relative w-[50px] h-[45px] overflow-hidden ' + (isMeExpanded ? 'active ' : '') } onClick={ event =>
src/components/user-profile/GroupsContainerView.tsx
+1 -1
View File
@@ -74,7 +74,7 @@ export const GroupsContainerView: FC<GroupsContainerViewProps> = props =>
return (
<LayoutGridItem key={ index } className="p-1" itemActive={ (selectedGroupId === group.groupId) } overflow="unset" onClick={ () => setSelectedGroupId(group.groupId) }>
{ itsMe &&
<i className={ 'absolute end-0 top-0 z-20 nitro-icon icon-group-' + (group.favourite ? 'favorite' : 'not-favorite') } onClick={ () => ToggleFavoriteGroup(group) } /> }
<i className={ 'absolute inset-e-0 top-0 z-20 nitro-icon icon-group-' + (group.favourite ? 'favorite' : 'not-favorite') } onClick={ () => ToggleFavoriteGroup(group) } /> }
<LayoutBadgeImageView badgeCode={ group.badgeCode } isGroup={ true } />
</LayoutGridItem>
);
src/components/user-profile/RelationshipsContainerView.tsx
+2 -2
View File
@@ -27,7 +27,7 @@ export const RelationshipsContainerView: FC<RelationshipsContainerViewProps> = p
<Flex center className="h-[25px]">
<i className={ `nitro-friends-spritesheet icon-${ relationshipName }` } />
</Flex>
<div className="flex flex-col flex-grow gap-0">
<div className="flex flex-col grow gap-0">
<div className="flex items-center justify-between bg-white rounded px-2 py-1 h-[25px]">
<p className="text-sm underline pointer" onClick={ event => (relationshipInfo && (relationshipInfo.randomFriendId >= 1) && GetUserProfile(relationshipInfo.randomFriendId)) }>
{ (!relationshipInfo || (relationshipInfo.friendCount === 0)) &&
@@ -40,7 +40,7 @@ export const RelationshipsContainerView: FC<RelationshipsContainerViewProps> = p
<LayoutAvatarImageView direction={ 4 } figure={ relationshipInfo.randomFriendFigure } headOnly={ true } />
</div> }
</div>
<p className="italics text-sm mt-[2px] ml-[5px] !text-[#939392]">
<p className="italics text-sm mt-[2px] ml-[5px] text-[#939392]!">
{ (!relationshipInfo || (relationshipInfo.friendCount === 0)) &&
LocalizeText('extendedprofile.no.friends.in.this.category') }
{ (relationshipInfo && (relationshipInfo.friendCount > 1)) &&
src/css/index.css
+12 -12
View File
@@ -1,12 +1,12 @@
@import 'tailwindcss';
@config "../../tailwind.config.js";
@font-face {
font-family: Ubuntu;
src: url("@/assets/webfonts/Ubuntu-C.ttf");
}
@tailwind base;
@tailwind components;
@tailwind utilities;
html,
body {
padding: 0;
@@ -175,35 +175,35 @@ body {
}
.avatar-image {
@apply pointer-events-none relative h-[130px] w-[90px] bg-[center_-8px] bg-no-repeat;
@apply pointer-events-none relative h-[130px] w-[90px] bg-position-[center_-8px] bg-no-repeat;
}
.ubuntu-close-button {
@apply inline-block h-[20px] w-[19px] bg-transparent bg-[0px_0px] bg-no-repeat outline-0;
@apply inline-block h-[20px] w-[19px] bg-transparent bg-position-[0px_0px] bg-no-repeat outline-0;
background-image: url("@/assets/images/ui/ubuntu-close-buttons.png");
&:hover {
@apply bg-[-38px];
@apply bg-position-[-38px];
}
&:active {
@apply bg-[-19px];
@apply bg-position-[-19px];
}
}
}
.unique-item {
.unique-bg-override {
@apply z-[2] bg-center bg-no-repeat;
@apply z-2 bg-center bg-no-repeat;
}
&:before {
@apply absolute z-[1] size-full bg-center bg-no-repeat [content:""];
@apply absolute z-1 size-full bg-center bg-no-repeat [content:""];
background-image: url("@/assets/images/unique/grid-bg.png");
}
&:after {
@apply absolute bottom-0 z-[4] size-full bg-center bg-no-repeat [content:""];
@apply absolute bottom-0 z-4 size-full bg-center bg-no-repeat [content:""];
background-image: url("@/assets/images/unique/grid-bg-glass.png");
}
@@ -215,7 +215,7 @@ body {
.unique-item-counter {
background-image: url("@/assets/images/unique/grid-count-bg.png");
@apply bottom-[1px] z-[3] mx-auto my-0 flex h-[9px] w-full items-center justify-center bg-center bg-no-repeat;
@apply bottom-px z-3 mx-auto my-0 flex h-[9px] w-full items-center justify-center bg-center bg-no-repeat;
}
}
src/css/widgets/ChooserWidgets.css
-1
View File
@@ -1 +0,0 @@
1
src/layout/InfiniteGrid.tsx
+1 -1
View File
@@ -161,7 +161,7 @@ const InfiniteGridItem = forwardRef<HTMLDivElement, {
) }
{ ...rest }>
{ (itemCount > itemCountMinimum) &&
<div className="absolute align-middle rounded bg-red-700 bg-opacity-80 text-white border-black border top-[2px] right-[2px] text-[9.5px] p-[2px] z-[1] leading-[8px]">{ itemCount }</div> }
<div className="absolute align-middle rounded bg-red-700 bg-opacity-80 text-white border-black border top-[2px] right-[2px] text-[9.5px] p-[2px] z-1 leading-[8px]">{ itemCount }</div> }
{ (itemUniqueNumber > 0) &&
<>
<div
src/layout/NitroCard.tsx
+3 -3
View File
@@ -80,7 +80,7 @@ const NitroCardTabs = forwardRef<HTMLDivElement, {
<div
ref={ ref }
className={ classNames(
'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]',
'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',
className)
}
{ ...rest } />
@@ -100,8 +100,8 @@ const NitroCardTabItem = forwardRef<HTMLDivElement, {
<div
ref={ ref }
className={ classNames(
'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',
'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',
className)
}
{ ...rest }>
src/layout/NitroItemCountBadge.tsx
+1 -1
View File
@@ -2,7 +2,7 @@ import { DetailedHTMLProps, forwardRef, HTMLAttributes, PropsWithChildren } from
import { classNames } from './classNames';
const classes = {
base: 'text-[white] font-bold leading-none text-[9.5px] absolute right-0 top-0 py-0.5 px-[3px] z-[1] rounded border',
base: 'text-[white] font-bold leading-none text-[9.5px] absolute right-0 top-0 py-0.5 px-[3px] z-1 rounded border',
themes: {
'primary': 'border-black bg-red-700'
}