From 5739667998d9ed5611cdeb915f145b9afb50d00f Mon Sep 17 00:00:00 2001
From: Ricardo Wurmus <rekado@elephly.net>
Date: Tue, 31 Mar 2020 08:48:48 +0200
Subject: Add inline avatar for narrow screens.

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

(limited to 'assets')

diff --git a/assets/css/screen.css b/assets/css/screen.css
index fdcf9b7..c7a151e 100644
--- a/assets/css/screen.css
+++ b/assets/css/screen.css
@@ -127,6 +127,17 @@ table {
     display: none;
 }
 
+.message .from .avatar {
+    width: 1.2em;
+    height: 1.2em;
+    border-radius: 3px;
+    color: #fff;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    margin-right: 3px;
+}
+
 @media (min-width: 768px) {
     .conversation .avatar {
         height: 64px;
@@ -220,6 +231,9 @@ table {
         position: absolute;
         z-index: 10;
     }
+    .message .from .avatar {
+        display: none;
+    }
 }
 
 .message .from .address {
-- 
cgit v1.2.3