Merge pull request #2643 from thelounge/astorije/sticky-userlist

Make userlist section titles sticky on scroll, improve contrasts for accessibility, use CSS variables

client/css/style.css

@@ -5,6 +5,9 @@
 	/* Main text color */
 	--body-color: #222;
 
+	/* Secondary text color, dimmed. Make sure to keep contrast WCAG 2.0 AA compliant on var(--window-bg-color) */
+	--body-color-muted: #767676;
+
 	/* Background color of the whole page */
 	--body-bg-color: #415364;
 
@@ -369,11 +372,13 @@ kbd {
 
 #chat .motd .from::before {
 	content: "\f02e"; /* https://fontawesome.com/icons/bookmark?style=solid */
+	color: var(--body-color-muted);
 }
 
 #chat .ctcp .from::before,
 #chat .ctcp_request .from::before {
 	content: "\f15c"; /* https://fontawesome.com/icons/file-alt?style=solid */
+	color: var(--body-color-muted);
 }
 
 #chat .whois .from::before {
@@ -958,7 +963,7 @@ background on hover (unless active) */
 }
 
 #windows .header .topic {
-	color: #777;
+	color: var(--body-color-muted);
 	margin-left: 8px;
 	word-break: break-all;
 	flex-grow: 1;
@@ -1182,7 +1187,7 @@ background on hover (unless active) */
 }
 
 #chat .time {
-	color: #999;
+	color: var(--body-color-muted);
 	padding-left: 10px;
 	width: 55px;
 }
@@ -1192,7 +1197,6 @@ background on hover (unless active) */
 }
 
 #chat .from {
-	color: #b1c3ce;
 	padding-right: 10px;
 	text-align: right;
 	width: 134px;
@@ -1210,6 +1214,10 @@ background on hover (unless active) */
 	overflow: hidden; /* Prevents Zalgo text to expand beyond messages */
 }
 
+#chat .unhandled .from {
+	color: var(--body-color-muted);
+}
+
 #chat .special .time,
 #chat .special .from {
 	display: none;
@@ -1277,7 +1285,7 @@ background on hover (unless active) */
 #chat.colored-nicks .user.color-32 { color: #e60082; }
 
 #chat .self .text {
-	color: #999;
+	color: var(--body-color-muted);
 }
 
 #chat .msg.channel_list_loading .text {
@@ -1328,14 +1336,6 @@ background on hover (unless active) */
 	width: 50px;
 }
 
-#chat table.channel-list td.channel .inline-channel {
-	color: #428bca;
-}
-
-#chat table.channel-list td {
-	color: #555;
-}
-
 #chat.hide-status-messages .condensed,
 #chat.hide-motd .motd {
 	display: none !important;
@@ -1359,7 +1359,7 @@ background on hover (unless active) */
 #chat .quit .content,
 #chat .topic .content,
 #chat .topic_set_by .content {
-	color: #999;
+	color: var(--body-color-muted);
 }
 
 #chat .action .from,
@@ -1564,13 +1564,19 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 	white-space: nowrap;
 }
 
+#chat .user-mode {
+	margin-bottom: 15px;
+}
+
 #chat .user-mode::before {
-	content: "";
+	background: var(--window-bg-color);
-	border-bottom: 1px solid #eee;
+	color: var(--body-color-muted);
 	display: block;
+	font-size: 0.85em;
 	line-height: 1.6;
-	padding: 12px 16px 10px;
+	padding: 5px 16px;
-	margin-bottom: 10px;
+	position: sticky;
+	top: 0;
 }
 
 #chat .user-mode.owner::before {

client/js/utils.js

@@ -60,7 +60,7 @@ function hasRoleInChannel(channel, roles, nick) {
 function scrollIntoViewNicely(el) {
 	// Ideally this would use behavior: "smooth", but that does not consistently work in e.g. Chrome
 	// https://github.com/iamdustan/smoothscroll/issues/28#issuecomment-364061459
-	el.scrollIntoView({block: "nearest", inline: "nearest"});
+	el.scrollIntoView({block: "center", inline: "nearest"});
 }
 
 function collapse() {

client/themes/morning.css

@@ -2,6 +2,7 @@
 
 :root {
 	--body-color: #f3f3f3;
+	--body-color-muted: #b7c5d1;
 	--link-color: #77abd9;
 	--window-bg-color: #303e4a;
 	--date-marker-color: #97ea70;
@@ -106,10 +107,6 @@
 	color: #b7c5d1;
 }
 
-#windows .header .topic {
-	color: #b7c5d1;
-}
-
 #viewport .lt,
 #viewport .rt,
 #chat button.menu,
@@ -122,42 +119,11 @@
 	color: #f3f3f3;
 }
 
-#chat .self .text {
-	color: #b7c5d1;
-}
-
 #chat .error,
 #chat .error .from {
 	color: #f92772;
 }
 
-#chat .unhandled .from {
-	color: #b7c5d1;
-}
-
-#chat .msg.topic {
-	color: #b7c5d1;
-}
-
-#chat .time,
-#chat .condensed .content,
-#chat .away .content,
-#chat .back .content,
-#chat .join .content,
-#chat .kick .content,
-#chat .mode .content,
-#chat .nick .content,
-#chat .part .content,
-#chat .quit .content,
-#chat .topic .content,
-#chat .topic_set_by .content {
-	color: #b7c5d1;
-}
-
-#chat table.channel-list td {
-	color: #b7c5d1;
-}
-
 #chat .msg.motd .text,
 code,
 .irc-monospace {

client/views/user.tpl

@@ -1,3 +1,4 @@
+<!-- htmlmin:ignore -->
 {{#diff "reset"}}{{/diff}}
 {{#each users}}
 	{{#diff mode}}
@@ -9,3 +10,4 @@
 	{{> user_name}}
 {{/each}}
 </div>
+<!-- htmlmin:ignore -->