From 035d10005ab5fa6b4bdcd00b5409cac87e70e176 Mon Sep 17 00:00:00 2001
From: Niko Bews <deltebews@gmail.com>
Date: Thu, 11 May 2017 03:17:27 +0300
Subject: [PATCH] Fade out for long usernames.

---
 client/css/style.css      | 22 ++++++++++++++++++++++
 client/themes/morning.css |  6 ++++++
 client/themes/zenburn.css |  6 ++++++
 3 files changed, 34 insertions(+)

diff --git a/client/css/style.css b/client/css/style.css
index 9f731c39..b571469f 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -911,6 +911,9 @@ kbd {
 	padding-right: 10px;
 	text-align: right;
 	width: 134px;
+	overflow: hidden;
+	white-space: nowrap;
+	position: relative;
 }
 
 #chat .text {
@@ -1810,6 +1813,25 @@ kbd {
 	font-style: italic;
 }
 
+@media (min-width: 480px) {
+	/* Fade out for long usernames */
+
+	#chat .from {
+		padding-left: 10px;
+	}
+
+	#chat .from:after {
+		position: absolute;
+		right: 0;
+		width: 10px;
+		height: 100%;
+		background: linear-gradient(to right, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 1) 100%);
+		content: " ";
+	}
+
+	/* End fade out for long usernames */
+}
+
 @media (max-width: 768px) {
 	/**
 	  * TODO Replace this with `@media (hover: hover)` when Firefox supports it
diff --git a/client/themes/morning.css b/client/themes/morning.css
index d5ca62e9..d886db9e 100644
--- a/client/themes/morning.css
+++ b/client/themes/morning.css
@@ -253,3 +253,9 @@ body {
 }
 
 /* End form elements */
+
+@media (min-width: 480px) {
+	#chat .from:after {
+		background: linear-gradient(to right, rgba(51, 60, 74, .5) 0%, rgba(51, 60, 74, 1) 100%);
+	}
+}
diff --git a/client/themes/zenburn.css b/client/themes/zenburn.css
index b4abd4ed..9b93e2ef 100644
--- a/client/themes/zenburn.css
+++ b/client/themes/zenburn.css
@@ -279,3 +279,9 @@ body {
 }
 
 /* End form elements */
+
+@media (min-width: 480px) {
+	#chat .from:after {
+		background: linear-gradient(to right, rgba(63, 63, 63, .5) 0%, rgba(63, 63, 63, 1) 100%);
+	}
+}