mirror of
https://github.com/duckietm/Nitro-V3.git
synced 2026-06-19 15:06:20 +00:00
feat: add custom wired show message bubble styles
This commit is contained in:
Lorenzune
Binary file not shown.
|
After Width: | Height: | Size: 280 B |
Binary file not shown.
|
After Width: | Height: | Size: 282 B |
Binary file not shown.
|
After Width: | Height: | Size: 280 B |
Binary file not shown.
|
After Width: | Height: | Size: 280 B |
Binary file not shown.
|
After Width: | Height: | Size: 280 B |
Binary file not shown.
|
After Width: | Height: | Size: 280 B |
Binary file not shown.
|
After Width: | Height: | Size: 290 B |
Binary file not shown.
|
After Width: | Height: | Size: 283 B |
Binary file not shown.
|
After Width: | Height: | Size: 280 B |
Binary file not shown.
|
After Width: | Height: | Size: 280 B |
Binary file not shown.
|
After Width: | Height: | Size: 280 B |
Binary file not shown.
|
After Width: | Height: | Size: 280 B |
Binary file not shown.
|
After Width: | Height: | Size: 531 B |
Binary file not shown.
|
After Width: | Height: | Size: 137 B |
@@ -3000,6 +3000,23 @@ export const WiredCreatorToolsView: FC<{}> = () =>
|
||||
return;
|
||||
}
|
||||
|
||||
const selectedRoomObject = GetRoomEngine().getRoomObject(roomSession.roomId, selectedUser.roomIndex, RoomObjectCategory.UNIT);
|
||||
const currentLocation = (selectedRoomObject?.getLocation() ?? new Vector3d(currentLiveState.positionX, currentLiveState.positionY, (currentLiveState.altitude / 100)));
|
||||
const nextLocation = new Vector3d(nextX, nextY, currentLocation.z);
|
||||
const nextDirectionVector = new Vector3d((nextDirection * 45));
|
||||
|
||||
GetRoomEngine().updateRoomObjectUserLocation(
|
||||
roomSession.roomId,
|
||||
selectedUser.roomIndex,
|
||||
currentLocation,
|
||||
nextLocation,
|
||||
false,
|
||||
0,
|
||||
nextDirectionVector,
|
||||
(nextDirection * 45),
|
||||
false,
|
||||
true);
|
||||
|
||||
SendMessageComposer(new WiredUserInspectMoveComposer(selectedUser.roomIndex, nextX, nextY, nextDirection));
|
||||
|
||||
setSelectedUserLiveState({
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { FC, useEffect, useState } from 'react';
|
||||
import { FC, useEffect, useMemo, useState } from 'react';
|
||||
import { GetConfigurationValue, LocalizeText, WiredFurniType } from '../../../../api';
|
||||
import { Text } from '../../../../common';
|
||||
import { useWired } from '../../../../hooks';
|
||||
@@ -6,20 +6,26 @@ import { NitroInput } from '../../../../layout';
|
||||
import { WiredActionBaseView } from './WiredActionBaseView';
|
||||
import { WiredSourcesSelector } from '../WiredSourcesSelector';
|
||||
|
||||
const SHOW_MESSAGE_STYLE_IDS = [ 34, 200, 201, 202, 210, 211, 212, 220, 221, 222, 223, 224, 225, 226, 227, 228, 229, 250, 251, 252 ];
|
||||
const DEFAULT_SHOW_MESSAGE_STYLE_ID = 34;
|
||||
|
||||
export const WiredActionChatView: FC<{}> = props =>
|
||||
{
|
||||
const [ message, setMessage ] = useState('');
|
||||
const [ visibilitySelection, setVisibilitySelection ] = useState<number>(0);
|
||||
const [ bubbleStyle, setBubbleStyle ] = useState<number>(DEFAULT_SHOW_MESSAGE_STYLE_ID);
|
||||
const { trigger = null, setStringParam = null, setIntParams = null } = useWired();
|
||||
const [ userSource, setUserSource ] = useState<number>(() =>
|
||||
{
|
||||
if(trigger?.intData?.length >= 1) return trigger.intData[0];
|
||||
return 0;
|
||||
});
|
||||
const bubbleStyleIds = useMemo(() => SHOW_MESSAGE_STYLE_IDS, []);
|
||||
|
||||
const save = () =>
|
||||
{
|
||||
setStringParam(message);
|
||||
setIntParams([ userSource ]);
|
||||
setIntParams([ userSource, visibilitySelection, bubbleStyle ]);
|
||||
};
|
||||
|
||||
useEffect(() =>
|
||||
@@ -27,6 +33,10 @@ export const WiredActionChatView: FC<{}> = props =>
|
||||
setMessage(trigger.stringData);
|
||||
if(trigger.intData.length >= 1) setUserSource(trigger.intData[0]);
|
||||
else setUserSource(0);
|
||||
if(trigger.intData.length >= 2) setVisibilitySelection(trigger.intData[1]);
|
||||
else setVisibilitySelection(0);
|
||||
if((trigger.intData.length >= 3) && SHOW_MESSAGE_STYLE_IDS.includes(trigger.intData[2])) setBubbleStyle(trigger.intData[2]);
|
||||
else setBubbleStyle(DEFAULT_SHOW_MESSAGE_STYLE_ID);
|
||||
}, [ trigger ]);
|
||||
|
||||
return (
|
||||
@@ -39,6 +49,28 @@ export const WiredActionChatView: FC<{}> = props =>
|
||||
<Text bold>{ LocalizeText('wiredfurni.params.message') }</Text>
|
||||
<NitroInput maxLength={ GetConfigurationValue<number>('wired.action.chat.max.length', 100) } type="text" value={ message } onChange={ event => setMessage(event.target.value) } />
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<Text bold>{ LocalizeText('wiredfurni.params.show_message.visibility_selection.title') }</Text>
|
||||
<div className="flex items-center gap-1">
|
||||
<input checked={ (visibilitySelection === 0) } className="form-check-input" name="showMessageVisibilitySelection" type="radio" onChange={ () => setVisibilitySelection(0) } />
|
||||
<Text>{ LocalizeText('wiredfurni.params.show_message.visibility_selection.0') }</Text>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<input checked={ (visibilitySelection === 1) } className="form-check-input" name="showMessageVisibilitySelection" type="radio" onChange={ () => setVisibilitySelection(1) } />
|
||||
<Text>{ LocalizeText('wiredfurni.params.show_message.visibility_selection.1') }</Text>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<Text bold>{ LocalizeText('wiredfurni.params.show_message.style_selection.title') }</Text>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="bubble-container relative w-[50px] shrink-0">
|
||||
<div className={ `relative min-h-[26px] chat-bubble bubble-${ bubbleStyle }` } />
|
||||
</div>
|
||||
<select className="form-select form-select-sm" value={ bubbleStyle } onChange={ event => setBubbleStyle(Number(event.target.value)) }>
|
||||
{ bubbleStyleIds.map(styleId => <option key={ styleId } value={ styleId }>{ LocalizeText(`wiredfurni.params.show_message.style_selection.${ styleId }`) }</option>) }
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</WiredActionBaseView>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -807,6 +807,419 @@
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-200,
|
||||
&.bubble-201,
|
||||
&.bubble-202,
|
||||
&.bubble-210,
|
||||
&.bubble-211,
|
||||
&.bubble-212,
|
||||
&.bubble-220,
|
||||
&.bubble-221,
|
||||
&.bubble-222,
|
||||
&.bubble-223,
|
||||
&.bubble-224,
|
||||
&.bubble-225,
|
||||
&.bubble-226,
|
||||
&.bubble-227,
|
||||
&.bubble-228,
|
||||
&.bubble-229,
|
||||
&.bubble-250,
|
||||
&.bubble-251,
|
||||
&.bubble-252 {
|
||||
border-image: none;
|
||||
border: 1px solid #000;
|
||||
border-radius: 6px;
|
||||
background: #dbdbdb;
|
||||
overflow: visible;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0 auto 0 0;
|
||||
width: 35px;
|
||||
border-radius: 5px 0 0 5px;
|
||||
background: var(--notification-color);
|
||||
box-shadow: inset -1px 0 0 var(--notification-divider);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
&.type-1 {
|
||||
.message {
|
||||
font-style: unset;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
.user-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.username {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.chat-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-left: 36px;
|
||||
padding-left: 7px;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.pointer {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-200 {
|
||||
--notification-color: #d43535;
|
||||
--notification-divider: #a82424;
|
||||
|
||||
&::after {
|
||||
content: '!';
|
||||
position: absolute;
|
||||
left: 9px;
|
||||
top: 50%;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
transform: translateY(-50%);
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
color: #a82424;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-201 {
|
||||
--notification-color: #35ff24;
|
||||
--notification-divider: #349f00;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
top: 50%;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
transform: translateY(-50%);
|
||||
background: center / contain no-repeat url('@/assets/images/chat/chatbubbles/bubble_34_extra.png');
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-202 {
|
||||
--notification-color: #3879e3;
|
||||
--notification-divider: #1b5ac2;
|
||||
|
||||
&::after {
|
||||
content: '!';
|
||||
position: absolute;
|
||||
left: 9px;
|
||||
top: 50%;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
transform: translateY(-50%);
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
color: #1b5ac2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-210 {
|
||||
--notification-color: #d43535;
|
||||
--notification-divider: #a82424;
|
||||
|
||||
&::after {
|
||||
content: '!';
|
||||
position: absolute;
|
||||
left: 9px;
|
||||
top: 50%;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
transform: translateY(-50%);
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
color: #a82424;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-211 {
|
||||
--notification-color: #3879e3;
|
||||
--notification-divider: #1b5ac2;
|
||||
|
||||
&::after {
|
||||
content: 'i';
|
||||
position: absolute;
|
||||
left: 9px;
|
||||
top: 50%;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
transform: translateY(-50%);
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
color: #1b5ac2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 700;
|
||||
font-size: 11px;
|
||||
line-height: 1;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-212 {
|
||||
--notification-color: #e3883f;
|
||||
--notification-divider: #c7691d;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 6px;
|
||||
top: 50%;
|
||||
width: 22px;
|
||||
height: 20px;
|
||||
transform: translateY(-50%);
|
||||
background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='20' viewBox='0 0 22 20'%3E%3Cpath d='M11 2L20 18H2Z' fill='none' stroke='white' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M11 6V12' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='11' cy='15' r='1.3' fill='white'/%3E%3C/svg%3E");
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-220 {
|
||||
--notification-color: #af3131;
|
||||
--notification-divider: #872525;
|
||||
|
||||
&::after {
|
||||
content: "\2715";
|
||||
position: absolute;
|
||||
left: 9px;
|
||||
top: 50%;
|
||||
transform: translateY(-54%);
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-221 {
|
||||
--notification-color: #af3131;
|
||||
--notification-divider: #872525;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 7px;
|
||||
top: 50%;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
transform: translateY(-50%);
|
||||
background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='8' fill='white'/%3E%3Cpath d='M6 6L12 12M12 6L6 12' stroke='%23af3131' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-222 {
|
||||
--notification-color: #009c6c;
|
||||
--notification-divider: #005e42;
|
||||
|
||||
&::after {
|
||||
content: "\2713";
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 50%;
|
||||
transform: translateY(-55%);
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-223 {
|
||||
--notification-color: #009c6c;
|
||||
--notification-divider: #005e42;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 7px;
|
||||
top: 50%;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
transform: translateY(-50%);
|
||||
background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='8' fill='white'/%3E%3Cpath d='M5 9.2L7.6 11.8L13 6.4' stroke='%23009c6c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-224 {
|
||||
--notification-color: #ab47ff;
|
||||
--notification-divider: #7f00e9;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 6px;
|
||||
top: 50%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
transform: translateY(-50%);
|
||||
background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ctext x='10' y='10.5' text-anchor='middle' dominant-baseline='middle' font-size='15.5' font-weight='900' font-family='Arial, sans-serif' fill='white' stroke='white' stroke-width='0.55' paint-order='stroke fill'%3E%3F%3C/text%3E%3C/svg%3E");
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-225 {
|
||||
--notification-color: #ab47ff;
|
||||
--notification-divider: #7f00e9;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 7px;
|
||||
top: 50%;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
transform: translateY(-50%);
|
||||
background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='8' fill='white'/%3E%3Ctext x='9' y='9.4' text-anchor='middle' dominant-baseline='middle' font-size='12.5' font-weight='900' font-family='Arial, sans-serif' fill='%23ab47ff' stroke='%23ab47ff' stroke-width='0.45' paint-order='stroke fill'%3E%3F%3C/text%3E%3C/svg%3E");
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-226 {
|
||||
--notification-color: #009c6c;
|
||||
--notification-divider: #005e42;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 7px;
|
||||
top: 50%;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
transform: translateY(-50%);
|
||||
background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M9 4.5V12' stroke='white' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M6.3 7.4L9 4.7L11.7 7.4' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-227 {
|
||||
--notification-color: #009c6c;
|
||||
--notification-divider: #005e42;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 7px;
|
||||
top: 50%;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
transform: translateY(-50%);
|
||||
background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='8' fill='white'/%3E%3Cpath d='M9 4.5V12' stroke='%23009c6c' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M6.3 7.4L9 4.7L11.7 7.4' stroke='%23009c6c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-228 {
|
||||
--notification-color: #af3131;
|
||||
--notification-divider: #872525;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 7px;
|
||||
top: 50%;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
transform: translateY(-50%);
|
||||
background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M9 5.8V13.2' stroke='white' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M6.3 10.3L9 13L11.7 10.3' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-229 {
|
||||
--notification-color: #af3131;
|
||||
--notification-divider: #872525;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 7px;
|
||||
top: 50%;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
transform: translateY(-50%);
|
||||
background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='8' fill='white'/%3E%3Cpath d='M9 5.8V13.2' stroke='%23af3131' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M6.3 10.3L9 13L11.7 10.3' stroke='%23af3131' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-250,
|
||||
&.bubble-251 {
|
||||
--notification-color: #2d2d2d;
|
||||
--notification-divider: #0f0f0f;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
top: 50%;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
transform: translateY(-50%);
|
||||
background: center / contain no-repeat url('@/assets/images/chat/chatbubbles/bubble_skull_extra.png');
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-251 {
|
||||
background: #8b8b8b;
|
||||
|
||||
.chat-content {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-252 {
|
||||
--notification-color: #b4b4b4;
|
||||
--notification-divider: #6b6b6b;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
top: 50%;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
transform: translateY(-50%);
|
||||
background: center / contain no-repeat url('@/assets/images/chat/chatbubbles/bubble_252_extra.png');
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.user-container {
|
||||
z-index: 3;
|
||||
display: flex;
|
||||
@@ -1097,4 +1510,304 @@
|
||||
&.bubble-53 {
|
||||
background-image: url('@/assets/images/chat/chatbubbles/bubble_53.png');
|
||||
}
|
||||
|
||||
&.bubble-200 {
|
||||
background-image: url('@/assets/images/chat/chatbubbles/bubble_200.png');
|
||||
|
||||
&::before {
|
||||
content: '!';
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 10px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
color: #a82424;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-201 {
|
||||
background-image: url('@/assets/images/chat/chatbubbles/bubble_201.png');
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 8px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: center / contain no-repeat url('@/assets/images/chat/chatbubbles/bubble_34_extra.png');
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-202 {
|
||||
background-image: url('@/assets/images/chat/chatbubbles/bubble_202.png');
|
||||
|
||||
&::before {
|
||||
content: '!';
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 10px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
color: #1b5ac2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-210 {
|
||||
background-image: url('@/assets/images/chat/chatbubbles/bubble_200.png');
|
||||
|
||||
&::before {
|
||||
content: '!';
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 10px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
color: #a82424;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-211 {
|
||||
background-image: url('@/assets/images/chat/chatbubbles/bubble_202.png');
|
||||
|
||||
&::before {
|
||||
content: 'i';
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 10px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
color: #1b5ac2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-212 {
|
||||
background-image: url('@/assets/images/chat/chatbubbles/bubble_212.png');
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 9px;
|
||||
top: 7px;
|
||||
width: 20px;
|
||||
height: 18px;
|
||||
background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='18' viewBox='0 0 20 18'%3E%3Cpath d='M10 2L18 16H2Z' fill='none' stroke='white' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M10 5.6V10.8' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='13.4' r='1.2' fill='white'/%3E%3C/svg%3E");
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-220 {
|
||||
background-image: url('@/assets/images/chat/chatbubbles/bubble_220.png');
|
||||
|
||||
&::before {
|
||||
content: "\2715";
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 9px;
|
||||
color: #fff;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-221 {
|
||||
background-image: url('@/assets/images/chat/chatbubbles/bubble_220.png');
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 8px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='white'/%3E%3Cpath d='M5.3 5.3L10.7 10.7M10.7 5.3L5.3 10.7' stroke='%23af3131' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-222 {
|
||||
background-image: url('@/assets/images/chat/chatbubbles/bubble_222.png');
|
||||
|
||||
&::before {
|
||||
content: "\2713";
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 8px;
|
||||
color: #fff;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-223 {
|
||||
background-image: url('@/assets/images/chat/chatbubbles/bubble_222.png');
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 8px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='white'/%3E%3Cpath d='M4.6 8.2L7 10.6L11.6 6' stroke='%23009c6c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-224 {
|
||||
background-image: url('@/assets/images/chat/chatbubbles/bubble_224.png');
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 6px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ctext x='10' y='10.5' text-anchor='middle' dominant-baseline='middle' font-size='15.5' font-weight='900' font-family='Arial, sans-serif' fill='white' stroke='white' stroke-width='0.55' paint-order='stroke fill'%3E%3F%3C/text%3E%3C/svg%3E");
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-225 {
|
||||
background-image: url('@/assets/images/chat/chatbubbles/bubble_224.png');
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 8px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='white'/%3E%3Ctext x='8' y='8.3' text-anchor='middle' dominant-baseline='middle' font-size='11.2' font-weight='900' font-family='Arial, sans-serif' fill='%23ab47ff' stroke='%23ab47ff' stroke-width='0.4' paint-order='stroke fill'%3E%3F%3C/text%3E%3C/svg%3E");
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-226 {
|
||||
background-image: url('@/assets/images/chat/chatbubbles/bubble_226.png');
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 8px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M8 4.3V10.8' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M5.8 6.6L8 4.4L10.2 6.6' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-227 {
|
||||
background-image: url('@/assets/images/chat/chatbubbles/bubble_226.png');
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 8px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='white'/%3E%3Cpath d='M8 4.3V10.8' stroke='%23009c6c' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M5.8 6.6L8 4.4L10.2 6.6' stroke='%23009c6c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-228 {
|
||||
background-image: url('@/assets/images/chat/chatbubbles/bubble_228.png');
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 8px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M8 5.2V11.7' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M5.8 9.5L8 11.7L10.2 9.5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-229 {
|
||||
background-image: url('@/assets/images/chat/chatbubbles/bubble_228.png');
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 8px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='white'/%3E%3Cpath d='M8 5.2V11.7' stroke='%23af3131' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M5.8 9.5L8 11.7L10.2 9.5' stroke='%23af3131' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-250 {
|
||||
background-image: url('@/assets/images/chat/chatbubbles/bubble_250.png');
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 8px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: center / contain no-repeat url('@/assets/images/chat/chatbubbles/bubble_skull_extra.png');
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-251 {
|
||||
background-image: url('@/assets/images/chat/chatbubbles/bubble_251.png');
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 8px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: center / contain no-repeat url('@/assets/images/chat/chatbubbles/bubble_skull_extra.png');
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-252 {
|
||||
background-image: url('@/assets/images/chat/chatbubbles/bubble_252.png');
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 8px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: center / contain no-repeat url('@/assets/images/chat/chatbubbles/bubble_252_extra.png');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user