feat(chat): 39 nuove chat bubble (253-291) + paginator soundboard

- 39 bubble custom con relativo pointer colorato (colore campionato dal
  fondo di ogni bubble) + regole CSS in Chats.css (resa in-stanza border-image
  + anteprima nel selettore)
- selezionabili via chat.styles dell'ui-config (lato server)
- soundboard: paginazione 9/pagina (griglia 3x3) con frecce + indicatore,
  cosi la card non cresce a dismisura
This commit is contained in:
medievalshell
2026-05-31 04:01:04 +02:00
parent fa71e8eb4a
commit 7745c5f66b
80 changed files with 506 additions and 12 deletions
+468
View File
@@ -807,6 +807,318 @@
}
}
&.bubble-253 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_253.png');
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_253_pointer.png');
}
}
&.bubble-254 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_254.png');
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_254_pointer.png');
}
}
&.bubble-255 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_255.png');
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_255_pointer.png');
}
}
&.bubble-256 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_256.png');
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_256_pointer.png');
}
}
&.bubble-257 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_257.png');
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_257_pointer.png');
}
}
&.bubble-258 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_258.png');
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_258_pointer.png');
}
}
&.bubble-259 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_259.png');
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_259_pointer.png');
}
}
&.bubble-260 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_260.png');
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_260_pointer.png');
}
}
&.bubble-261 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_261.png');
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_261_pointer.png');
}
}
&.bubble-262 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_262.png');
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_262_pointer.png');
}
}
&.bubble-263 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_263.png');
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_263_pointer.png');
}
}
&.bubble-264 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_264.png');
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_264_pointer.png');
}
}
&.bubble-265 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_265.png');
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_265_pointer.png');
}
}
&.bubble-266 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_266.png');
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_266_pointer.png');
}
}
&.bubble-267 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_267.png');
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_267_pointer.png');
}
}
&.bubble-268 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_268.png');
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_268_pointer.png');
}
}
&.bubble-269 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_269.png');
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_269_pointer.png');
}
}
&.bubble-270 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_270.png');
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_270_pointer.png');
}
}
&.bubble-271 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_271.png');
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_271_pointer.png');
}
}
&.bubble-272 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_272.png');
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_272_pointer.png');
}
}
&.bubble-273 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_273.png');
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_273_pointer.png');
}
}
&.bubble-274 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_274.png');
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_274_pointer.png');
}
}
&.bubble-275 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_275.png');
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_275_pointer.png');
}
}
&.bubble-276 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_276.png');
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_276_pointer.png');
}
}
&.bubble-277 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_277.png');
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_277_pointer.png');
}
}
&.bubble-278 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_278.png');
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_278_pointer.png');
}
}
&.bubble-279 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_279.png');
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_279_pointer.png');
}
}
&.bubble-280 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_280.png');
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_280_pointer.png');
}
}
&.bubble-281 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_281.png');
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_281_pointer.png');
}
}
&.bubble-282 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_282.png');
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_282_pointer.png');
}
}
&.bubble-283 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_283.png');
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_283_pointer.png');
}
}
&.bubble-284 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_284.png');
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_284_pointer.png');
}
}
&.bubble-285 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_285.png');
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_285_pointer.png');
}
}
&.bubble-286 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_286.png');
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_286_pointer.png');
}
}
&.bubble-287 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_287.png');
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_287_pointer.png');
}
}
&.bubble-288 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_288.png');
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_288_pointer.png');
}
}
&.bubble-289 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_289.png');
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_289_pointer.png');
}
}
&.bubble-290 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_290.png');
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_290_pointer.png');
}
}
&.bubble-291 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_291.png');
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_291_pointer.png');
}
}
&.bubble-200,
&.bubble-201,
&.bubble-202,
@@ -1810,4 +2122,160 @@
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');
}
}