From mboxrd@z Thu Jan 1 00:00:00 1970 Return-Path: X-Spam-Checker-Version: SpamAssassin 3.4.6 (2021-04-09) on gnuweeb.org X-Spam-Level: X-Spam-Status: No, score=-1.2 required=5.0 tests=ALL_TRUSTED,DKIM_SIGNED, DKIM_VALID,DKIM_VALID_AU,DKIM_VALID_EF,URIBL_BLOCKED, URIBL_DBL_BLOCKED_OPENDNS autolearn=ham autolearn_force=no version=3.4.6 DKIM-Signature: v=1; a=rsa-sha256; c=relaxed/simple; d=gnuweeb.org; s=default; t=1695416368; bh=ZGDiDkjuNC4S5h1ihpIPCPmr3MEbs3Skqjs6lC2tjmE=; h=From:To:Cc:Subject:Date:In-Reply-To:References; b=jt7fR8gsadJSlFNRNVkQn7XkhvErFTtcHmQHQSSx84NT7CKjuL1iHZVeOX9YeuRAv rscrA98pPRXlZy65dzxU4EQE4+Kyr6M1Sgyh10mXifFPsQT9OqEsqygzOuE2ORJyl+ QW+OG9eBSoUJvOSDw0aT6x5cMAIbRaqKi0lxjXFebhm97X9xSU8QoIa+eQKZDlp+as ZfOWUw8C7e/zxP/mQv2mutkLKnnQ1kuUq/N0CZzz5c0aNnKOOYfQU5mkbBDSBN4gqy srUUfGBLkKaKGxVdhXOSXkOca2RYwm8mtJ+aCt9i5dq9ZtovTN3AL+ar3UVE6ltQW4 Vo3RfC4e4n/JA== Received: from localhost.localdomain (unknown [175.158.50.129]) by gnuweeb.org (Postfix) with ESMTPSA id 2B9F924B6A6; Sat, 23 Sep 2023 03:59:25 +0700 (WIB) From: Muhammad Rizki To: Ammar Faizi Cc: Muhammad Rizki , Alviro Iskandar Setiawan , Arthur Lapz , Memet Zx , GNU/Weeb Mailing List Subject: [PATCH v1 10/11] feat(css): add initial CSS class styles for chat bubbles Date: Sat, 23 Sep 2023 03:58:16 +0700 Message-Id: <20230922205817.107-11-kiizuha@gnuweeb.org> X-Mailer: git-send-email 2.34.1.windows.1 In-Reply-To: <20230922205817.107-1-kiizuha@gnuweeb.org> References: <20230922205817.107-1-kiizuha@gnuweeb.org> MIME-Version: 1.0 Content-Transfer-Encoding: 8bit List-Id: This CSS is designed for rendering chat bubbles in the list of recent Telegram group messages. Signed-off-by: Muhammad Rizki --- 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