[PATCH v1 10/11] feat(css): add initial CSS class styles for chat bubbles

[Muhammad Rizki <kiizuha@gnuweeb.org>]

This CSS is designed for rendering chat bubbles in the list of recent
Telegram group messages.

Signed-off-by: Muhammad Rizki <kiizuha@gnuweeb.org>
---
 style.css | 54 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 54 insertions(+)

diff --git a/style.css b/style.css
index b5c61c9..19d1659 100644
--- a/style.css
+++ b/style.css
@@ -1,3 +1,57 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+
+.chat {
+  @apply grid gap-x-3 py-1
+}
+
+.chat-start {
+  @apply place-items-start grid-cols-[auto,1fr];
+}
+
+.chat-image {
+  @apply row-span-2 self-end;
+}
+
+.chat-start .chat-image {
+  @apply col-start-1;
+}
+
+.chat-start .chat-header {
+  @apply col-start-2;
+}
+
+.chat-bubble {
+  @apply relative block w-fit px-4 py-2 max-w-[90%] rounded-2xl
+  min-h-[2.75rem] min-w-[2.75rem] bg-neutral-900 text-neutral-500;
+}
+
+.chat-bubble::before {
+  @apply absolute bottom-0 h-3 w-3 bg-inherit content-[""];
+  mask-size: contain;
+  -webkit-mask-size: contain;
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-position: center;
+  -webkit-mask-position: center;
+}
+
+.chat-start .chat-bubble {
+  @apply col-start-2 rounded-bl-none;
+}
+
+.chat-start .chat-bubble::before {
+  @apply content-[""] -left-3;
+  mask-image: url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 3 3 L 3 0 C 3 1 1 3 0 3'/%3e%3c/svg%3e");
+  -webkit-mask-image: url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 3 3 L 3 0 C 3 1 1 3 0 3'/%3e%3c/svg%3e");
+}
+
+.avatar {
+  @apply relative inline-flex;
+}
+
+.avatar > div {
+  @apply block aspect-square overflow-hidden;
+}
-- 
Muhammad Rizki