mirror of
https://github.com/duckietm/Nitro-V3.git
synced 2026-06-19 23:16:21 +00:00
feat: add custom wired show message bubble styles
This commit is contained in:
Lorenzune
@@ -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