{ /* Left panel: position + rotation */ }
diff --git a/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetUserView.tsx b/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetUserView.tsx
index 1791979..2dac49e 100644
--- a/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetUserView.tsx
+++ b/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetUserView.tsx
@@ -1,4 +1,4 @@
-import { GetSessionDataManager, RelationshipStatusInfoEvent, RelationshipStatusInfoMessageParser, RoomSessionFavoriteGroupUpdateEvent, RoomSessionUserBadgesEvent, RoomSessionUserFigureUpdateEvent, UserRelationshipsComposer } from '@nitrots/nitro-renderer';
+import { CreateLinkEvent, GetSessionDataManager, RelationshipStatusInfoEvent, RelationshipStatusInfoMessageParser, RoomSessionFavoriteGroupUpdateEvent, RoomSessionUserBadgesEvent, RoomSessionUserFigureUpdateEvent, UserRelationshipsComposer } from '@nitrots/nitro-renderer';
import { Dispatch, FC, FocusEvent, KeyboardEvent, SetStateAction, useCallback, useEffect, useState } from 'react';
import { FaPencilAlt, FaTimes } from 'react-icons/fa';
import { AvatarInfoUser, CloneObject, GetConfigurationValue, GetGroupInformation, GetUserProfile, LocalizeText, SendMessageComposer } from '../../../../../api';
@@ -7,7 +7,6 @@ import { useMessageEvent, useNitroEvent, useRoom } from '../../../../../hooks';
import { InfoStandBadgeSlotView } from './InfoStandBadgeSlotView';
import { InfoStandWidgetUserRelationshipsView } from './InfoStandWidgetUserRelationshipsView';
import { InfoStandWidgetUserTagsView } from './InfoStandWidgetUserTagsView';
-import { BackgroundsView } from '../../../../backgrounds/BackgroundsView';
interface InfoStandWidgetUserViewProps {
avatarInfo: AvatarInfoUser;
@@ -32,7 +31,7 @@ export const InfoStandWidgetUserView: FC
= props =
const handleProfileClick = useCallback(() => { GetUserProfile(avatarInfo.webID); }, [avatarInfo.webID]);
- const handleEditClick = useCallback((event: React.MouseEvent) => { event.stopPropagation(); setIsVisible(prev => !prev); }, []);
+ const handleEditClick = useCallback((event: React.MouseEvent) => { event.stopPropagation(); CreateLinkEvent('interface-settings/profile'); }, []);
const saveMotto = (motto: string) => {
if (!isEditingMotto || motto.length > GetConfigurationValue('motto.max.length', 38) || !roomSession) return;
@@ -127,7 +126,7 @@ export const InfoStandWidgetUserView: FC = props =
return (
<>
-
+
@@ -257,19 +256,6 @@ export const InfoStandWidgetUserView: FC
= props =
)}
- {isVisible && avatarInfo.type === AvatarInfoUser.OWN_USER && (
-
-
-
- )}
);
};
\ No newline at end of file
diff --git a/src/components/room/widgets/context-menu/ContextMenuHeaderView.tsx b/src/components/room/widgets/context-menu/ContextMenuHeaderView.tsx
index a0513cf..ff26177 100644
--- a/src/components/room/widgets/context-menu/ContextMenuHeaderView.tsx
+++ b/src/components/room/widgets/context-menu/ContextMenuHeaderView.tsx
@@ -3,16 +3,21 @@ import { Flex, FlexProps } from '../../../../common';
export const ContextMenuHeaderView: FC = props =>
{
- const { justifyContent = 'center', alignItems = 'center', classNames = [], ...rest } = props;
+ const { justifyContent = 'center', alignItems = 'center', classNames = [], style = {}, ...rest } = props;
const getClassNames = useMemo(() =>
{
- const newClassNames: string[] = [ 'bg-[#3d5f6e] text-[#fff] min-w-[117px] h-[25px] max-h-[25px] text-[16px] mb-[2px]', 'p-1' ];
+ const newClassNames: string[] = [ 'text-[#fff] min-w-[117px] h-[25px] max-h-[25px] text-[16px] mb-[2px]', 'p-1' ];
if(classNames.length) newClassNames.push(...classNames);
return newClassNames;
}, [ classNames ]);
- return ;
+ const mergedStyle = useMemo(() => ({
+ backgroundColor: 'var(--ui-ctx-header-bg, #3d5f6e)',
+ ...style
+ }), [ style ]);
+
+ return ;
};
diff --git a/src/components/room/widgets/context-menu/ContextMenuListItemView.tsx b/src/components/room/widgets/context-menu/ContextMenuListItemView.tsx
index 0a1eacc..b012a93 100644
--- a/src/components/room/widgets/context-menu/ContextMenuListItemView.tsx
+++ b/src/components/room/widgets/context-menu/ContextMenuListItemView.tsx
@@ -8,7 +8,7 @@ interface ContextMenuListItemViewProps extends FlexProps
export const ContextMenuListItemView: FC = props =>
{
- const { disabled = false, fullWidth = true, justifyContent = 'center', alignItems = 'center', classNames = [], onClick = null, ...rest } = props;
+ const { disabled = false, fullWidth = true, justifyContent = 'center', alignItems = 'center', classNames = [], style = {}, onClick = null, ...rest } = props;
const handleClick = (event: MouseEvent) =>
{
@@ -19,7 +19,7 @@ export const ContextMenuListItemView: FC = 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] cursor-pointer' ];
if(disabled) newClassNames.push('disabled');
@@ -28,5 +28,10 @@ export const ContextMenuListItemView: FC = props =
return newClassNames;
}, [ disabled, classNames ]);
- return ;
+ const mergedStyle = useMemo(() => ({
+ background: 'repeating-linear-gradient(var(--ui-ctx-item-bg1, #131e25), var(--ui-ctx-item-bg1, #131e25) 50%, var(--ui-ctx-item-bg2, #0d171d) 50%, var(--ui-ctx-item-bg2, #0d171d) 100%)',
+ ...style
+ }), [ style ]);
+
+ return ;
};
diff --git a/src/components/room/widgets/context-menu/ContextMenuView.tsx b/src/components/room/widgets/context-menu/ContextMenuView.tsx
index 1ca3e83..b92dc89 100644
--- a/src/components/room/widgets/context-menu/ContextMenuView.tsx
+++ b/src/components/room/widgets/context-menu/ContextMenuView.tsx
@@ -76,7 +76,6 @@ export const ContextMenuView: FC = ({
const getClassNames = useMemo(() => {
const classes = [
'p-[2px]!',
- 'bg-[#1c323f]',
'border-2',
'border-[solid]',
'border-[rgba(255,255,255,.5)]',
@@ -98,6 +97,7 @@ export const ContextMenuView: FC = ({
top: pos.y ?? 0,
transition: isFading ? 'opacity 75ms linear' : undefined,
opacity,
+ backgroundColor: 'var(--ui-ctx-bg, #1c323f)',
...style,
}),
[pos, opacity, isFading, style]
diff --git a/src/components/toolbar/ToolbarView.tsx b/src/components/toolbar/ToolbarView.tsx
index 7d6743a..62503bb 100644
--- a/src/components/toolbar/ToolbarView.tsx
+++ b/src/components/toolbar/ToolbarView.tsx
@@ -69,38 +69,38 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
)}
-
-
-
-
- {
- setMeExpanded(!isMeExpanded);
- event.stopPropagation();
- } }>
-
- { (getTotalUnseen > 0) &&
- }
-
- { isInRoom &&
- VisitDesktop() } /> }
- { !isInRoom &&
- CreateLinkEvent('navigator/goto/home') } /> }
- CreateLinkEvent('navigator/toggle') } />
- { GetConfigurationValue('game.center.enabled') &&
- CreateLinkEvent('games/toggle') } /> }
- CreateLinkEvent('catalog/toggle') } />
- CreateLinkEvent('inventory/toggle') }>
- { (getFullCount > 0) &&
- }
-
- { isInRoom &&
- CreateLinkEvent('camera/toggle') } /> }
- { isMod &&
- CreateLinkEvent('mod-tools/toggle') } /> }
+
+
+
+ {
+ setMeExpanded(!isMeExpanded);
+ event.stopPropagation();
+ } }>
+
+ { (getTotalUnseen > 0) &&
+ }
-
+ { isInRoom &&
+ VisitDesktop() } /> }
+ { !isInRoom &&
+ CreateLinkEvent('navigator/goto/home') } /> }
+ CreateLinkEvent('navigator/toggle') } />
+ { GetConfigurationValue('game.center.enabled') &&
+ CreateLinkEvent('games/toggle') } /> }
+ CreateLinkEvent('catalog/toggle') } />
+ CreateLinkEvent('inventory/toggle') }>
+ { (getFullCount > 0) &&
+ }
+
+ { isInRoom &&
+ CreateLinkEvent('camera/toggle') } /> }
+ { isMod &&
+ CreateLinkEvent('mod-tools/toggle') } /> }
+ { isMod &&
+ CreateLinkEvent('furni-editor/toggle') } /> }
-
+
+
CreateLinkEvent('friends/toggle') }>
{ (requests.length > 0) &&
diff --git a/src/css/common/Buttons.css b/src/css/common/Buttons.css
index 106a3cc..21d7f1f 100644
--- a/src/css/common/Buttons.css
+++ b/src/css/common/Buttons.css
@@ -24,8 +24,8 @@ input[type=number] {
.btn-primary {
color: #fff;
- background-color: #3c6d82;
- border: 2px solid #1a617f;
+ background-color: var(--ui-btn-primary-bg, #3c6d82);
+ border: 2px solid var(--ui-btn-primary-border, #1a617f);
padding: 0.25rem 0.5rem;
font-size: .7875rem;
border-radius: 0.5rem;
@@ -33,7 +33,7 @@ input[type=number] {
}
.btn-primary:hover {
- border: 2px solid #1a617f;
+ border: 2px solid var(--ui-btn-primary-border, #1a617f);
box-shadow: none!important;
}
@@ -81,16 +81,16 @@ input[type=number] {
.btn-dark {
color: #fff;
- background-color: #212131;
- border: 2px solid #1c1c2a;
+ background-color: var(--ui-dark-bg, #212131);
+ border: 2px solid var(--ui-dark-border, #1c1c2a);
box-shadow: none!important;
border-radius: 8px;
padding: 4px 11px 4px 11px;
}
.btn-dark:hover{
- background-color: #212131;
- border: 2px solid #1c1c2a;
+ background-color: var(--ui-dark-bg, #212131);
+ border: 2px solid var(--ui-dark-border, #1c1c2a);
box-shadow: none!important;
border-radius: 8px;
padding: 4px 11px 4px 11px;
diff --git a/src/css/purse/PurseView.css b/src/css/purse/PurseView.css
index 7134551..69c1732 100644
--- a/src/css/purse/PurseView.css
+++ b/src/css/purse/PurseView.css
@@ -22,7 +22,7 @@
pointer-events: all;
}
.borderhccontent{
- background-color: #212131;
+ background-color: var(--ui-dark-bg, #212131);
border-radius: 0.5rem!important;
border: 2px solid #383853;
height: calc(100% - 3px);
@@ -46,7 +46,7 @@
}
.nitro-purse-seasonal-currency {
- background-color: #212131;
+ background-color: var(--ui-dark-bg, #212131);
background: linear-gradient(to right, #5f5f8d, transparent);
height: 30px;
margin-bottom: 4px;
diff --git a/src/css/room/InfoStand.css b/src/css/room/InfoStand.css
index e44b062..7e1a050 100644
--- a/src/css/room/InfoStand.css
+++ b/src/css/room/InfoStand.css
@@ -27,7 +27,7 @@
width: clamp(160px, 20vw, 190px); /* Responsive width */
z-index: 30;
pointer-events: auto;
- background: #212131;
+ background: var(--ui-dark-bg, #212131);
box-shadow: inset 0 5px rgba(38, 38, 57, 0.6), inset 0 -4px rgba(25, 25, 37, 0.6);
border-radius: 0.5rem;
padding: 10px;
diff --git a/src/css/room/RoomWidgets.css b/src/css/room/RoomWidgets.css
index 093fa67..b4d6ee2 100644
--- a/src/css/room/RoomWidgets.css
+++ b/src/css/room/RoomWidgets.css
@@ -4,7 +4,7 @@
left: 15px;
.nitro-room-tools {
- background: #212131;
+ background: var(--ui-dark-bg, #212131);
box-shadow: inset 0px 5px lighten(rgba(#000, .6), 2.5), inset 0 -4px darken(rgba(#000, .6), 4);
border-top-right-radius: .25rem;
border-bottom-right-radius: .25rem;
@@ -54,7 +54,7 @@
}
.nitro-room-history {
- background: #212131;
+ background: var(--ui-dark-bg, #212131);
box-shadow: inset 0px 5px lighten(rgba(#000, .6), 2.5), inset 0 -4px darken(rgba(#000, .6), 4);
transition: all .2s ease;
width: 150px;
@@ -63,7 +63,7 @@
}
.nitro-room-tools-info {
- background: #212131;
+ background: var(--ui-dark-bg, #212131);
box-shadow: inset 0px 5px lighten(rgba(#000, .6), 2.5), inset 0 -4px darken(rgba(#000, .6), 4);
transition: all .2s ease;
max-width: 250px;