From bff7e6a82f3f6769e4759dde2c0012585043710b Mon Sep 17 00:00:00 2001
From: Ricardo Wurmus <rekado@elephly.net>
Date: Tue, 31 Mar 2020 00:11:48 +0200
Subject: css: Add bubble tab to the left of messages on wide screens.

---
 assets/css/screen.css | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

(limited to 'assets')

diff --git a/assets/css/screen.css b/assets/css/screen.css
index fbf0e59..fdcf9b7 100644
--- a/assets/css/screen.css
+++ b/assets/css/screen.css
@@ -194,6 +194,34 @@ table {
     font-style: italic;
 }
 
+@media (min-width: 768px) {
+    .message .card-header:before {
+        content: "";
+        border-color: transparent;
+        border-right-color: #ddd;
+        border-style: solid solid outset;
+        border-width: 10px;
+        height: 0;
+        width: 0;
+        margin-left: -40px;
+        top: calc(1rem - 1px);
+        position: absolute;
+    }
+    .message .card:before {
+        content: "";
+        border-color: transparent;
+        border-right-color: #f8f9fa;
+        border-style: solid solid outset;
+        border-width: 9px;
+        height: 0;
+        width: 0;
+        left: -18px;
+        top: 1rem;
+        position: absolute;
+        z-index: 10;
+    }
+}
+
 .message .from .address {
     font-weight: bold;
 }
-- 
cgit v1.2.3