mirror of
https://github.com/duckietm/Nitro-V3.git
synced 2026-06-19 23:16:21 +00:00
Take #2 Desktop cacta 100%
This commit is contained in:
duckietm
@@ -0,0 +1,366 @@
|
||||
/* ============================================================================
|
||||
Chat-bar @-mention autocomplete - Habbo style
|
||||
----------------------------------------------------------------------------
|
||||
Mirrors the NitroCard look (cream cardstock, habbo-blue header, black 2px
|
||||
border, drop shadow) and the in-room infostand row chrome. The popover
|
||||
appears above the chat input, anchored to its bottom-left and the same
|
||||
width as the input, with the bottom corners flush so it visually merges
|
||||
with the input edge.
|
||||
============================================================================ */
|
||||
|
||||
.chat-input-mention-popover {
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
margin-bottom: 4px;
|
||||
background: #f2f2eb;
|
||||
border: 2px solid #000;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
|
||||
overflow: hidden;
|
||||
z-index: 1070;
|
||||
font-family: Volter, Volter_Goldfish, "Ubuntu", sans-serif;
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
|
||||
.chat-input-mention-popover-header {
|
||||
height: 24px;
|
||||
padding: 0 8px;
|
||||
background: #30728c;
|
||||
border-bottom: 2px solid #000;
|
||||
color: #fff;
|
||||
text-shadow: 1px 1px 1px #000;
|
||||
font-family: UbuntuCondensed, Ubuntu, sans-serif;
|
||||
font-size: 13px;
|
||||
line-height: 22px;
|
||||
letter-spacing: 0.3px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.chat-input-mention-popover-header-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #ffdc4c;
|
||||
border: 1px solid #000;
|
||||
border-radius: 50%;
|
||||
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.55);
|
||||
}
|
||||
|
||||
.chat-input-mention-popover-list {
|
||||
max-height: 220px;
|
||||
overflow-y: auto;
|
||||
padding: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.chat-input-mention-row {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 4px 6px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
transition: background 0.08s linear, border-color 0.08s linear;
|
||||
}
|
||||
|
||||
.chat-input-mention-row:hover {
|
||||
background: rgba(48, 114, 140, 0.12);
|
||||
}
|
||||
|
||||
.chat-input-mention-row.is-selected {
|
||||
background: #30728c;
|
||||
border-color: #000;
|
||||
color: #fff;
|
||||
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.45);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
|
||||
}
|
||||
|
||||
.chat-input-mention-row-tile {
|
||||
position: relative;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
flex-shrink: 0;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #000;
|
||||
background: #cfcfc4;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(0, 0, 0, 0.12);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.chat-input-mention-row.is-selected .chat-input-mention-row-tile {
|
||||
background: #1f5a72;
|
||||
}
|
||||
|
||||
.chat-input-mention-row-tile.is-alias {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(180deg, #ffdc4c 0%, #f0a91c 100%);
|
||||
color: #4a2b00;
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.45);
|
||||
}
|
||||
|
||||
.chat-input-mention-row.is-selected .chat-input-mention-row-tile.is-alias {
|
||||
background: linear-gradient(180deg, #ffe97a 0%, #f9bd44 100%);
|
||||
}
|
||||
|
||||
.chat-input-mention-row-tile .avatar-image {
|
||||
position: absolute !important;
|
||||
inset: 0 !important;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
left: 0 !important;
|
||||
background-repeat: no-repeat;
|
||||
background-position: -22px -32px;
|
||||
background-size: auto;
|
||||
}
|
||||
|
||||
.chat-input-mention-row-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
flex: 1 1 auto;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.chat-input-mention-row-name {
|
||||
font-family: UbuntuCondensed, Ubuntu, sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 1.1;
|
||||
color: #2c2c2c;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.2px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.chat-input-mention-row.is-selected .chat-input-mention-row-name {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.chat-input-mention-row-desc {
|
||||
font-size: 10px;
|
||||
line-height: 1.1;
|
||||
color: #6b6b6b;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.chat-input-mention-row.is-selected .chat-input-mention-row-desc {
|
||||
color: #d6e6ee;
|
||||
}
|
||||
|
||||
.chat-input-mention-row-kind {
|
||||
font-size: 9px;
|
||||
line-height: 1;
|
||||
padding: 2px 5px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #000;
|
||||
background: #cfe6ef;
|
||||
color: #1c3d4c;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
flex-shrink: 0;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.chat-input-mention-row-kind.is-alias {
|
||||
background: #ffe97a;
|
||||
color: #5a3a00;
|
||||
}
|
||||
|
||||
.chat-input-mention-row.is-selected .chat-input-mention-row-kind {
|
||||
background: #ffdc4c;
|
||||
color: #4a2b00;
|
||||
}
|
||||
|
||||
/* Habbo-style scrollbar, matching NitroCardContentView scroll chrome. */
|
||||
.chat-input-mention-popover-list::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.chat-input-mention-popover-list::-webkit-scrollbar-track {
|
||||
background: #d8d8cf;
|
||||
border-left: 1px solid #000;
|
||||
}
|
||||
|
||||
.chat-input-mention-popover-list::-webkit-scrollbar-thumb {
|
||||
background: #30728c;
|
||||
border: 1px solid #000;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.chat-input-mention-popover-list::-webkit-scrollbar-thumb:hover {
|
||||
background: #3c88a6;
|
||||
}
|
||||
|
||||
/* ============================================================================
|
||||
:command popover - same Habbo NitroCard chrome as the @-mention picker.
|
||||
Header is green to distinguish it visually from the mention popover,
|
||||
which uses the standard habbo-blue.
|
||||
============================================================================ */
|
||||
|
||||
.chat-input-command-popover {
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
margin-bottom: 4px;
|
||||
background: #f2f2eb;
|
||||
border: 2px solid #000;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
|
||||
overflow: hidden;
|
||||
z-index: 1070;
|
||||
font-family: Volter, Volter_Goldfish, "Ubuntu", sans-serif;
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
|
||||
.chat-input-command-popover-header {
|
||||
height: 24px;
|
||||
padding: 0 8px;
|
||||
background: #2f8d4a;
|
||||
border-bottom: 2px solid #000;
|
||||
color: #fff;
|
||||
text-shadow: 1px 1px 1px #000;
|
||||
font-family: UbuntuCondensed, Ubuntu, sans-serif;
|
||||
font-size: 13px;
|
||||
line-height: 22px;
|
||||
letter-spacing: 0.3px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.chat-input-command-popover-header-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #ffdc4c;
|
||||
border: 1px solid #000;
|
||||
border-radius: 50%;
|
||||
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.55);
|
||||
}
|
||||
|
||||
.chat-input-command-popover-list {
|
||||
max-height: 220px;
|
||||
overflow-y: auto;
|
||||
padding: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.chat-input-command-row {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 4px 6px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
transition: background 0.08s linear, border-color 0.08s linear;
|
||||
}
|
||||
|
||||
.chat-input-command-row:hover {
|
||||
background: rgba(47, 141, 74, 0.12);
|
||||
}
|
||||
|
||||
.chat-input-command-row.is-selected {
|
||||
background: #2f8d4a;
|
||||
border-color: #000;
|
||||
color: #fff;
|
||||
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.45);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
|
||||
}
|
||||
|
||||
.chat-input-command-row-tile {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
flex-shrink: 0;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #000;
|
||||
background: linear-gradient(180deg, #b6e6c4 0%, #5ec07d 100%);
|
||||
color: #1a4a28;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
font-family: UbuntuCondensed, Ubuntu, sans-serif;
|
||||
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.45);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.chat-input-command-row.is-selected .chat-input-command-row-tile {
|
||||
background: linear-gradient(180deg, #c8f0d5 0%, #7ed79a 100%);
|
||||
}
|
||||
|
||||
.chat-input-command-row-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
flex: 1 1 auto;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.chat-input-command-row-name {
|
||||
font-family: UbuntuCondensed, Ubuntu, sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 1.1;
|
||||
color: #2c2c2c;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.2px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.chat-input-command-row.is-selected .chat-input-command-row-name {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.chat-input-command-row-desc {
|
||||
font-size: 10px;
|
||||
line-height: 1.1;
|
||||
color: #6b6b6b;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.chat-input-command-row.is-selected .chat-input-command-row-desc {
|
||||
color: #d9efde;
|
||||
}
|
||||
|
||||
.chat-input-command-popover-list::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.chat-input-command-popover-list::-webkit-scrollbar-track {
|
||||
background: #d8d8cf;
|
||||
border-left: 1px solid #000;
|
||||
}
|
||||
|
||||
.chat-input-command-popover-list::-webkit-scrollbar-thumb {
|
||||
background: #2f8d4a;
|
||||
border: 1px solid #000;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.chat-input-command-popover-list::-webkit-scrollbar-thumb:hover {
|
||||
background: #3aa55b;
|
||||
}
|
||||
@@ -807,435 +807,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-253 {
|
||||
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_253.png');
|
||||
border-image-slice: 16 22 15 27 fill;
|
||||
border-image-width: 16px 22px 15px 27px;
|
||||
border-image-repeat: stretch stretch;
|
||||
|
||||
.pointer {
|
||||
background: url('@/assets/images/chat/chatbubbles/bubble_253_pointer.png');
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-254 {
|
||||
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_254.png');
|
||||
border-image-slice: 7 28 15 25 fill;
|
||||
border-image-width: 7px 28px 15px 25px;
|
||||
border-image-repeat: stretch stretch;
|
||||
|
||||
.pointer {
|
||||
background: url('@/assets/images/chat/chatbubbles/bubble_254_pointer.png');
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-255 {
|
||||
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_255.png');
|
||||
border-image-slice: 12 19 22 30 fill;
|
||||
border-image-width: 12px 19px 22px 30px;
|
||||
border-image-repeat: stretch stretch;
|
||||
|
||||
.pointer {
|
||||
background: url('@/assets/images/chat/chatbubbles/bubble_255_pointer.png');
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-256 {
|
||||
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_256.png');
|
||||
border-image-slice: 24 18 10 31 fill;
|
||||
border-image-width: 24px 18px 10px 31px;
|
||||
border-image-repeat: stretch stretch;
|
||||
|
||||
.pointer {
|
||||
background: url('@/assets/images/chat/chatbubbles/bubble_256_pointer.png');
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-257 {
|
||||
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_257.png');
|
||||
border-image-slice: 6 17 19 36 fill;
|
||||
border-image-width: 6px 17px 19px 36px;
|
||||
border-image-repeat: stretch stretch;
|
||||
|
||||
.pointer {
|
||||
background: url('@/assets/images/chat/chatbubbles/bubble_257_pointer.png');
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-258 {
|
||||
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_258.png');
|
||||
border-image-slice: 22 27 10 27 fill;
|
||||
border-image-width: 22px 27px 10px 27px;
|
||||
border-image-repeat: stretch stretch;
|
||||
|
||||
.pointer {
|
||||
background: url('@/assets/images/chat/chatbubbles/bubble_258_pointer.png');
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-259 {
|
||||
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_259.png');
|
||||
border-image-slice: 21 27 18 37 fill;
|
||||
border-image-width: 21px 27px 18px 37px;
|
||||
border-image-repeat: stretch stretch;
|
||||
|
||||
.pointer {
|
||||
background: url('@/assets/images/chat/chatbubbles/bubble_259_pointer.png');
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-260 {
|
||||
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_260.png');
|
||||
border-image-slice: 6 22 16 27 fill;
|
||||
border-image-width: 6px 22px 16px 27px;
|
||||
border-image-repeat: stretch stretch;
|
||||
|
||||
.pointer {
|
||||
background: url('@/assets/images/chat/chatbubbles/bubble_260_pointer.png');
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-261 {
|
||||
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_261.png');
|
||||
border-image-slice: 18 27 5 22 fill;
|
||||
border-image-width: 18px 27px 5px 22px;
|
||||
border-image-repeat: stretch stretch;
|
||||
|
||||
.pointer {
|
||||
background: url('@/assets/images/chat/chatbubbles/bubble_261_pointer.png');
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-262 {
|
||||
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_262.png');
|
||||
border-image-slice: 33 31 11 34 fill;
|
||||
border-image-width: 33px 31px 11px 34px;
|
||||
border-image-repeat: stretch stretch;
|
||||
|
||||
.pointer {
|
||||
background: url('@/assets/images/chat/chatbubbles/bubble_262_pointer.png');
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-263 {
|
||||
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_263.png');
|
||||
border-image-slice: 15 19 10 32 fill;
|
||||
border-image-width: 15px 19px 10px 32px;
|
||||
border-image-repeat: stretch stretch;
|
||||
|
||||
.pointer {
|
||||
background: url('@/assets/images/chat/chatbubbles/bubble_263_pointer.png');
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-264 {
|
||||
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_264.png');
|
||||
border-image-slice: 18 24 16 25 fill;
|
||||
border-image-width: 18px 24px 16px 25px;
|
||||
border-image-repeat: stretch stretch;
|
||||
|
||||
.pointer {
|
||||
background: url('@/assets/images/chat/chatbubbles/bubble_264_pointer.png');
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-265 {
|
||||
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_265.png');
|
||||
border-image-slice: 41 40 17 18 fill;
|
||||
border-image-width: 41px 40px 17px 18px;
|
||||
border-image-repeat: stretch stretch;
|
||||
|
||||
.pointer {
|
||||
background: url('@/assets/images/chat/chatbubbles/bubble_265_pointer.png');
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-266 {
|
||||
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_266.png');
|
||||
border-image-slice: 13 34 22 27 fill;
|
||||
border-image-width: 13px 34px 22px 27px;
|
||||
border-image-repeat: stretch stretch;
|
||||
|
||||
.pointer {
|
||||
background: url('@/assets/images/chat/chatbubbles/bubble_266_pointer.png');
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-267 {
|
||||
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_267.png');
|
||||
border-image-slice: 17 30 22 25 fill;
|
||||
border-image-width: 17px 30px 22px 25px;
|
||||
border-image-repeat: stretch stretch;
|
||||
|
||||
.pointer {
|
||||
background: url('@/assets/images/chat/chatbubbles/bubble_267_pointer.png');
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-268 {
|
||||
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_268.png');
|
||||
border-image-slice: 7 30 21 24 fill;
|
||||
border-image-width: 7px 30px 21px 24px;
|
||||
border-image-repeat: stretch stretch;
|
||||
|
||||
.pointer {
|
||||
background: url('@/assets/images/chat/chatbubbles/bubble_268_pointer.png');
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-269 {
|
||||
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_269.png');
|
||||
border-image-slice: 10 23 25 35 fill;
|
||||
border-image-width: 10px 23px 25px 35px;
|
||||
border-image-repeat: stretch stretch;
|
||||
|
||||
.pointer {
|
||||
background: url('@/assets/images/chat/chatbubbles/bubble_269_pointer.png');
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-270 {
|
||||
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_270.png');
|
||||
border-image-slice: 13 30 14 26 fill;
|
||||
border-image-width: 13px 30px 14px 26px;
|
||||
border-image-repeat: stretch stretch;
|
||||
|
||||
.pointer {
|
||||
background: url('@/assets/images/chat/chatbubbles/bubble_270_pointer.png');
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-271 {
|
||||
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_271.png');
|
||||
border-image-slice: 23 23 9 35 fill;
|
||||
border-image-width: 23px 23px 9px 35px;
|
||||
border-image-repeat: stretch stretch;
|
||||
|
||||
.pointer {
|
||||
background: url('@/assets/images/chat/chatbubbles/bubble_271_pointer.png');
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-272 {
|
||||
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_272.png');
|
||||
border-image-slice: 9 31 24 25 fill;
|
||||
border-image-width: 9px 31px 24px 25px;
|
||||
border-image-repeat: stretch stretch;
|
||||
|
||||
.pointer {
|
||||
background: url('@/assets/images/chat/chatbubbles/bubble_272_pointer.png');
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-273 {
|
||||
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_273.png');
|
||||
border-image-slice: 11 16 25 37 fill;
|
||||
border-image-width: 11px 16px 25px 37px;
|
||||
border-image-repeat: stretch stretch;
|
||||
|
||||
.pointer {
|
||||
background: url('@/assets/images/chat/chatbubbles/bubble_273_pointer.png');
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-274 {
|
||||
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_274.png');
|
||||
border-image-slice: 7 22 19 27 fill;
|
||||
border-image-width: 7px 22px 19px 27px;
|
||||
border-image-repeat: stretch stretch;
|
||||
|
||||
.pointer {
|
||||
background: url('@/assets/images/chat/chatbubbles/bubble_274_pointer.png');
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-275 {
|
||||
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_275.png');
|
||||
border-image-slice: 8 23 14 26 fill;
|
||||
border-image-width: 8px 23px 14px 26px;
|
||||
border-image-repeat: stretch stretch;
|
||||
|
||||
.pointer {
|
||||
background: url('@/assets/images/chat/chatbubbles/bubble_275_pointer.png');
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-276 {
|
||||
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_276.png');
|
||||
border-image-slice: 12 40 17 17 fill;
|
||||
border-image-width: 12px 40px 17px 17px;
|
||||
border-image-repeat: stretch stretch;
|
||||
|
||||
.pointer {
|
||||
background: url('@/assets/images/chat/chatbubbles/bubble_276_pointer.png');
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-277 {
|
||||
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_277.png');
|
||||
border-image-slice: 6 39 18 17 fill;
|
||||
border-image-width: 6px 39px 18px 17px;
|
||||
border-image-repeat: stretch stretch;
|
||||
|
||||
.pointer {
|
||||
background: url('@/assets/images/chat/chatbubbles/bubble_277_pointer.png');
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-278 {
|
||||
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_278.png');
|
||||
border-image-slice: 16 38 6 19 fill;
|
||||
border-image-width: 16px 38px 6px 19px;
|
||||
border-image-repeat: stretch stretch;
|
||||
|
||||
.pointer {
|
||||
background: url('@/assets/images/chat/chatbubbles/bubble_278_pointer.png');
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-279 {
|
||||
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_279.png');
|
||||
border-image-slice: 6 26 16 23 fill;
|
||||
border-image-width: 6px 26px 16px 23px;
|
||||
border-image-repeat: stretch stretch;
|
||||
|
||||
.pointer {
|
||||
background: url('@/assets/images/chat/chatbubbles/bubble_279_pointer.png');
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-280 {
|
||||
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_280.png');
|
||||
border-image-slice: 23 29 6 15 fill;
|
||||
border-image-width: 23px 29px 6px 15px;
|
||||
border-image-repeat: stretch stretch;
|
||||
|
||||
.pointer {
|
||||
background: url('@/assets/images/chat/chatbubbles/bubble_280_pointer.png');
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-281 {
|
||||
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_281.png');
|
||||
border-image-slice: 18 42 9 18 fill;
|
||||
border-image-width: 18px 42px 9px 18px;
|
||||
border-image-repeat: stretch stretch;
|
||||
|
||||
.pointer {
|
||||
background: url('@/assets/images/chat/chatbubbles/bubble_281_pointer.png');
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-282 {
|
||||
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_282.png');
|
||||
border-image-slice: 18 42 9 18 fill;
|
||||
border-image-width: 18px 42px 9px 18px;
|
||||
border-image-repeat: stretch stretch;
|
||||
|
||||
.pointer {
|
||||
background: url('@/assets/images/chat/chatbubbles/bubble_282_pointer.png');
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-283 {
|
||||
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_283.png');
|
||||
border-image-slice: 17 26 13 31 fill;
|
||||
border-image-width: 17px 26px 13px 31px;
|
||||
border-image-repeat: stretch stretch;
|
||||
|
||||
.pointer {
|
||||
background: url('@/assets/images/chat/chatbubbles/bubble_283_pointer.png');
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-284 {
|
||||
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_284.png');
|
||||
border-image-slice: 9 26 23 26 fill;
|
||||
border-image-width: 9px 26px 23px 26px;
|
||||
border-image-repeat: stretch stretch;
|
||||
|
||||
.pointer {
|
||||
background: url('@/assets/images/chat/chatbubbles/bubble_284_pointer.png');
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-285 {
|
||||
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_285.png');
|
||||
border-image-slice: 16 35 15 15 fill;
|
||||
border-image-width: 16px 35px 15px 15px;
|
||||
border-image-repeat: stretch stretch;
|
||||
|
||||
.pointer {
|
||||
background: url('@/assets/images/chat/chatbubbles/bubble_285_pointer.png');
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-286 {
|
||||
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_286.png');
|
||||
border-image-slice: 18 22 4 23 fill;
|
||||
border-image-width: 18px 22px 4px 23px;
|
||||
border-image-repeat: stretch stretch;
|
||||
|
||||
.pointer {
|
||||
background: url('@/assets/images/chat/chatbubbles/bubble_286_pointer.png');
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-287 {
|
||||
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_287.png');
|
||||
border-image-slice: 6 22 18 26 fill;
|
||||
border-image-width: 6px 22px 18px 26px;
|
||||
border-image-repeat: stretch stretch;
|
||||
|
||||
.pointer {
|
||||
background: url('@/assets/images/chat/chatbubbles/bubble_287_pointer.png');
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-288 {
|
||||
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_288.png');
|
||||
border-image-slice: 18 31 11 24 fill;
|
||||
border-image-width: 18px 31px 11px 24px;
|
||||
border-image-repeat: stretch stretch;
|
||||
|
||||
.pointer {
|
||||
background: url('@/assets/images/chat/chatbubbles/bubble_288_pointer.png');
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-289 {
|
||||
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_289.png');
|
||||
border-image-slice: 7 54 17 24 fill;
|
||||
border-image-width: 7px 54px 17px 24px;
|
||||
border-image-repeat: stretch stretch;
|
||||
|
||||
.pointer {
|
||||
background: url('@/assets/images/chat/chatbubbles/bubble_289_pointer.png');
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-290 {
|
||||
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_290.png');
|
||||
border-image-slice: 18 24 14 29 fill;
|
||||
border-image-width: 18px 24px 14px 29px;
|
||||
border-image-repeat: stretch stretch;
|
||||
|
||||
.pointer {
|
||||
background: url('@/assets/images/chat/chatbubbles/bubble_290_pointer.png');
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-291 {
|
||||
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_291.png');
|
||||
border-image-slice: 9 26 11 35 fill;
|
||||
border-image-width: 9px 26px 11px 35px;
|
||||
border-image-repeat: stretch stretch;
|
||||
|
||||
.pointer {
|
||||
background: url('@/assets/images/chat/chatbubbles/bubble_291_pointer.png');
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-200,
|
||||
&.bubble-201,
|
||||
&.bubble-202,
|
||||
@@ -2239,169 +1810,4 @@
|
||||
background: center / contain no-repeat url('@/assets/images/chat/chatbubbles/bubble_252_extra.png');
|
||||
}
|
||||
}
|
||||
&.bubble-253 {
|
||||
background-image: url('@/assets/images/chat/chatbubbles/bubble_253.png');
|
||||
}
|
||||
|
||||
&.bubble-254 {
|
||||
background-image: url('@/assets/images/chat/chatbubbles/bubble_254.png');
|
||||
}
|
||||
|
||||
&.bubble-255 {
|
||||
background-image: url('@/assets/images/chat/chatbubbles/bubble_255.png');
|
||||
}
|
||||
|
||||
&.bubble-256 {
|
||||
background-image: url('@/assets/images/chat/chatbubbles/bubble_256.png');
|
||||
}
|
||||
|
||||
&.bubble-257 {
|
||||
background-image: url('@/assets/images/chat/chatbubbles/bubble_257.png');
|
||||
}
|
||||
|
||||
&.bubble-258 {
|
||||
background-image: url('@/assets/images/chat/chatbubbles/bubble_258.png');
|
||||
}
|
||||
|
||||
&.bubble-259 {
|
||||
background-image: url('@/assets/images/chat/chatbubbles/bubble_259.png');
|
||||
}
|
||||
|
||||
&.bubble-260 {
|
||||
background-image: url('@/assets/images/chat/chatbubbles/bubble_260.png');
|
||||
}
|
||||
|
||||
&.bubble-261 {
|
||||
background-image: url('@/assets/images/chat/chatbubbles/bubble_261.png');
|
||||
}
|
||||
|
||||
&.bubble-262 {
|
||||
background-image: url('@/assets/images/chat/chatbubbles/bubble_262.png');
|
||||
}
|
||||
|
||||
&.bubble-263 {
|
||||
background-image: url('@/assets/images/chat/chatbubbles/bubble_263.png');
|
||||
}
|
||||
|
||||
&.bubble-264 {
|
||||
background-image: url('@/assets/images/chat/chatbubbles/bubble_264.png');
|
||||
}
|
||||
|
||||
&.bubble-265 {
|
||||
background-image: url('@/assets/images/chat/chatbubbles/bubble_265.png');
|
||||
}
|
||||
|
||||
&.bubble-266 {
|
||||
background-image: url('@/assets/images/chat/chatbubbles/bubble_266.png');
|
||||
}
|
||||
|
||||
&.bubble-267 {
|
||||
background-image: url('@/assets/images/chat/chatbubbles/bubble_267.png');
|
||||
}
|
||||
|
||||
&.bubble-268 {
|
||||
background-image: url('@/assets/images/chat/chatbubbles/bubble_268.png');
|
||||
}
|
||||
|
||||
&.bubble-269 {
|
||||
background-image: url('@/assets/images/chat/chatbubbles/bubble_269.png');
|
||||
}
|
||||
|
||||
&.bubble-270 {
|
||||
background-image: url('@/assets/images/chat/chatbubbles/bubble_270.png');
|
||||
}
|
||||
|
||||
&.bubble-271 {
|
||||
background-image: url('@/assets/images/chat/chatbubbles/bubble_271.png');
|
||||
}
|
||||
|
||||
&.bubble-272 {
|
||||
background-image: url('@/assets/images/chat/chatbubbles/bubble_272.png');
|
||||
}
|
||||
|
||||
&.bubble-273 {
|
||||
background-image: url('@/assets/images/chat/chatbubbles/bubble_273.png');
|
||||
}
|
||||
|
||||
&.bubble-274 {
|
||||
background-image: url('@/assets/images/chat/chatbubbles/bubble_274.png');
|
||||
}
|
||||
|
||||
&.bubble-275 {
|
||||
background-image: url('@/assets/images/chat/chatbubbles/bubble_275.png');
|
||||
}
|
||||
|
||||
&.bubble-276 {
|
||||
background-image: url('@/assets/images/chat/chatbubbles/bubble_276.png');
|
||||
}
|
||||
|
||||
&.bubble-277 {
|
||||
background-image: url('@/assets/images/chat/chatbubbles/bubble_277.png');
|
||||
}
|
||||
|
||||
&.bubble-278 {
|
||||
background-image: url('@/assets/images/chat/chatbubbles/bubble_278.png');
|
||||
}
|
||||
|
||||
&.bubble-279 {
|
||||
background-image: url('@/assets/images/chat/chatbubbles/bubble_279.png');
|
||||
}
|
||||
|
||||
&.bubble-280 {
|
||||
background-image: url('@/assets/images/chat/chatbubbles/bubble_280.png');
|
||||
}
|
||||
|
||||
&.bubble-281 {
|
||||
background-image: url('@/assets/images/chat/chatbubbles/bubble_281.png');
|
||||
}
|
||||
|
||||
&.bubble-282 {
|
||||
background-image: url('@/assets/images/chat/chatbubbles/bubble_282.png');
|
||||
}
|
||||
|
||||
&.bubble-283 {
|
||||
background-image: url('@/assets/images/chat/chatbubbles/bubble_283.png');
|
||||
}
|
||||
|
||||
&.bubble-284 {
|
||||
background-image: url('@/assets/images/chat/chatbubbles/bubble_284.png');
|
||||
}
|
||||
|
||||
&.bubble-285 {
|
||||
background-image: url('@/assets/images/chat/chatbubbles/bubble_285.png');
|
||||
}
|
||||
|
||||
&.bubble-286 {
|
||||
background-image: url('@/assets/images/chat/chatbubbles/bubble_286.png');
|
||||
}
|
||||
|
||||
&.bubble-287 {
|
||||
background-image: url('@/assets/images/chat/chatbubbles/bubble_287.png');
|
||||
}
|
||||
|
||||
&.bubble-288 {
|
||||
background-image: url('@/assets/images/chat/chatbubbles/bubble_288.png');
|
||||
}
|
||||
|
||||
&.bubble-289 {
|
||||
background-image: url('@/assets/images/chat/chatbubbles/bubble_289.png');
|
||||
}
|
||||
|
||||
&.bubble-290 {
|
||||
background-image: url('@/assets/images/chat/chatbubbles/bubble_290.png');
|
||||
}
|
||||
|
||||
&.bubble-291 {
|
||||
background-image: url('@/assets/images/chat/chatbubbles/bubble_291.png');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* Mention highlight inside chat bubbles (cosmetic) */
|
||||
.mention-highlight {
|
||||
font-weight: 700;
|
||||
color: #1e7295;
|
||||
background-color: rgba(30, 114, 149, 0.16);
|
||||
border-radius: 3px;
|
||||
padding: 0 2px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user