From 23c969ad1b3174267b16ad30769a956d3f5ae2d2 Mon Sep 17 00:00:00 2001
From: Pavel Djundik <github@xpaw.me>
Date: Wed, 21 Mar 2018 19:23:47 +0200
Subject: [PATCH 1/3] Replace pseudo element gradient fade with mask-image

---
 client/css/style.css      | 27 ++++-----------------------
 client/themes/crypto.css  |  4 ----
 client/themes/morning.css |  6 ------
 client/themes/zenburn.css | 10 ----------
 4 files changed, 4 insertions(+), 43 deletions(-)

diff --git a/client/css/style.css b/client/css/style.css
index 7b50eb4b..74621c0e 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -642,16 +642,8 @@ kbd {
 	overflow: hidden;
 	white-space: nowrap;
 	margin-right: 5px;
-}
-
-#sidebar .chan .name::after {
-	position: absolute;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	width: 20px;
-	background: linear-gradient(to right, rgba(69, 81, 100, 0) 0%, rgba(69, 81, 100, 1) 100%);
-	content: " ";
+	-webkit-mask-image: linear-gradient(to left, transparent, black 20px);
+	mask-image: linear-gradient(to left, transparent, black 20px);
 }
 
 #sidebar .badge,
@@ -2216,22 +2208,11 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 
 @media (min-width: 480px) {
 	/* Fade out for long usernames */
-
 	#chat .from {
 		padding-left: 10px;
+		-webkit-mask-image: linear-gradient(to left, transparent, black 10px);
+		mask-image: linear-gradient(to left, transparent, black 10px);
 	}
-
-	#chat .from::after {
-		position: absolute;
-		right: 0;
-		bottom: 0;
-		width: 10px;
-		height: 100%;
-		background: linear-gradient(to right, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 1) 100%);
-		content: " ";
-	}
-
-	/* End fade out for long usernames */
 }
 
 @media (max-width: 768px) {
diff --git a/client/themes/crypto.css b/client/themes/crypto.css
index 207709b4..1559c5f8 100644
--- a/client/themes/crypto.css
+++ b/client/themes/crypto.css
@@ -68,10 +68,6 @@ a:hover,
 	color: #00ff0e;
 }
 
-#sidebar .chan .name::after {
-	background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
-}
-
 #sidebar button,
 #sidebar .chan,
 #chat .time,
diff --git a/client/themes/morning.css b/client/themes/morning.css
index 24c3caac..5ea07e31 100644
--- a/client/themes/morning.css
+++ b/client/themes/morning.css
@@ -250,9 +250,3 @@ kbd {
 }
 
 /* End form elements */
-
-@media (min-width: 480px) {
-	#chat .from::after {
-		background: linear-gradient(to right, rgba(51, 60, 74, 0.5) 0%, rgba(51, 60, 74, 1) 100%);
-	}
-}
diff --git a/client/themes/zenburn.css b/client/themes/zenburn.css
index 70b9070f..a2924258 100644
--- a/client/themes/zenburn.css
+++ b/client/themes/zenburn.css
@@ -54,10 +54,6 @@ body {
 	background: #2b2b2b;
 }
 
-#sidebar .chan .name::after {
-	background: linear-gradient(to right, rgba(43, 43, 43, 0) 0%, rgba(43, 43, 43, 1) 100%);
-}
-
 #footer {
 	background: #333;
 	border-top: 1px solid #000;
@@ -277,9 +273,3 @@ kbd {
 }
 
 /* End form elements */
-
-@media (min-width: 480px) {
-	#chat .from::after {
-		background: linear-gradient(to right, rgba(63, 63, 63, 0.5) 0%, rgba(63, 63, 63, 1) 100%);
-	}
-}

From 8ce55af55dc5ead73dfdcb8c40eb16c7a2924f56 Mon Sep 17 00:00:00 2001
From: Pavel Djundik <github@xpaw.me>
Date: Wed, 21 Mar 2018 19:28:38 +0200
Subject: [PATCH 2/3] Overflow topics with fade instead of ellipsis

---
 client/css/style.css | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/client/css/style.css b/client/css/style.css
index 74621c0e..42cf14af 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -642,6 +642,10 @@ kbd {
 	overflow: hidden;
 	white-space: nowrap;
 	margin-right: 5px;
+}
+
+#windows .header .topic,
+#sidebar .chan .name {
 	-webkit-mask-image: linear-gradient(to left, transparent, black 20px);
 	mask-image: linear-gradient(to left, transparent, black 20px);
 }
@@ -910,7 +914,6 @@ kbd {
 	flex-grow: 1;
 	white-space: nowrap;
 	overflow: hidden;
-	text-overflow: ellipsis;
 	font-size: 14px;
 }
 

From f85622914172c4b97f1de9d4f94340f1e56a6ab3 Mon Sep 17 00:00:00 2001
From: Pavel Djundik <github@xpaw.me>
Date: Thu, 22 Mar 2018 19:43:33 +0200
Subject: [PATCH 3/3] Allow whitespace in topics again

Was removed in c051b705375c838d189d3dec7aa74c80794bb356
---
 client/css/style.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/css/style.css b/client/css/style.css
index 42cf14af..8aa41870 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -912,7 +912,6 @@ kbd {
 	margin-left: 8px;
 	word-break: break-all;
 	flex-grow: 1;
-	white-space: nowrap;
 	overflow: hidden;
 	font-size: 14px;
 }
@@ -2499,6 +2498,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 /* Correctly handle multiple successive whitespace characters.
    For example: user has quit ( ===> L   O   L <=== )  */
 
+#windows .header .topic,
 #chat .message .text,
 #chat .motd .text,
 #chat .notice .text,