Update visual theme to be cleaner and less cluttered.

files/assets/css/TheMotte.css

@@ -3,6 +3,7 @@
 
 :root {
 	--primary: #1a6187;
+	--primary-overlay: #1a618720;
 
 	--primary-dark1: #165476;
 	--primary-dark2: #134662;
@@ -169,9 +170,6 @@ div.deleted {
 div.deleted.banned {
 	background-color: var(--gray) !important;
 }
-.comment-body > .comment-anchor {
-	padding: 5px;
-}
 .comment-anchor:target, .unread {
 	background: #2280B310 !important;
 }
@@ -195,11 +193,14 @@ a.visited,
 #search .post-title a:visited {
 	color: var(--primary-dark1);
 }
-.comment .comment-collapse-desktop {
+.comment .comment-collapse-bar {
-	border-left: 2px solid var(--primary-dark1) !important;
+	border-right: 2px solid var(--primary-overlay);
 }
-.comment .comment-collapse-desktop:hover {
+.comment .comment-collapse-bar-click:hover .comment-collapse-bar {
-	border-left: 2px solid var(--primary-light2) !important;
+	border-right: 2px solid var(--primary-light2);
+}
+.comment.collapsed .comment-collapse-bar {
+	display: none;
 }
 
 .usernote-link {

files/assets/css/main.css

@@ -2505,9 +2505,6 @@ a.text-primary:hover, a.text-primary:focus {
 a.text-success:hover, a.text-success:focus {
 	color: #19692c !important;
 }
-.text-info {
-	color: #17a2b8 !important;
-}
 a.text-info:hover, a.text-info:focus {
 	color: #0f6674 !important;
 }
@@ -2685,6 +2682,9 @@ a.dropdown-toggle:hover {
 .comment-text ul li ul {
 	padding-left: 0;
 }
+.comment-text a {
+	text-decoration: underline;
+}
 ul.no-bullets {
 	list-style-type: none;
 }
@@ -3171,9 +3171,6 @@ small, .small {
 #frontpage .pseudo-submit-form.card .card-body .form-control:hover, #frontpage .pseudo-submit-form.card .card-body .form-control:active, #frontpage .pseudo-submit-form.card .card-body .form-control:focus {
 	background-color: var(--light);
 }
-.user-name {
-	color: inherit;
-}
 .banner-pic-135 {
 	object-fit: cover;
 	height: 135px;
@@ -3564,7 +3561,7 @@ small, .small {
 	.post-img {
 		width: 60px;
 		height: 60px;
-}
+	}
 }
 .post-actions .comments, .post-actions .share, .post-actions .flag {
 	margin-right: 0.5rem;
@@ -3582,11 +3579,29 @@ small, .small {
 	color: var(--muted);
 }
 .comment {
-	display: flex;
+	display: grid;
+	grid-template-columns: auto 1fr;
+	grid-template-rows: auto auto;
+	grid-template-areas:
+		"comment-collapse-icon comment-user-info"
+		"comment-collapse-bar-click comment-body";
+	column-gap: 5px;
 	position: relative;
-	margin-top: 0.25rem;
+	margin-top: 1rem;
 	padding-left: 12px;
 }
+.comment-collapse-icon {
+	grid-area: comment-collapse-icon;
+}
+.comment-user-info {
+	grid-area: comment-user-info;
+}
+.comment-collapse-bar-click {
+	grid-area: comment-collapse-bar-click;
+}
+.comment-body {
+	grid-area: comment-body;
+}
 #notifications .comment, #userpage .comment {
 	margin-top: 0.25rem;
 	margin-bottom: 1rem;
@@ -3594,17 +3609,26 @@ small, .small {
 #notifications .comment:last-child, #userpage .comment:last-child {
 	margin-bottom: 0;
 }
+.comment-section > .comment {
+	padding-top: 1rem;
+	margin-top: 0.5rem;
+	padding-bottom: 0.5rem;
+}
+.comment-section > .comment ~ .comment {
+	border-top: 1px solid var(--tertiary);
+}
 .comment .comment-body {
 	width: 100%;
 }
-.comment .comment-body .user-info {
+.comment-user-info {
 	font-size: 12px;
 	color: var(--muted);
-	margin-bottom: 0.25rem;
-	margin-top: -0.25rem;
 }
-.comment .comment-body .user-name {
+.comment .comment-user-info .user-name {
-	color: var(--black);
+	color: var(--primary);
+}
+.comment.collapsed .comment-user-info .user-name {
+	color: var(--muted);
 }
 .comment .comment-body .comment-text {
 	margin-bottom: 1rem;
@@ -3649,7 +3673,7 @@ small, .small {
 	font-size: 10px;
 	margin-right: 0.25rem;
 	margin-left: 0.25rem;
-	color: var(--gray-100);
+	color: var(--muted);
 }
 @media (min-width: 768px) {
 	.comment-actions .fa, .comment-actions .fas, .comment-actions .fa {
@@ -3724,7 +3748,6 @@ ul.comment-section {
 	z-index: 1;
 }
 .comment-write .comment-format .format {
-	padding: 0 0.5rem;
 	font-size: 1rem;
 	color: var(--gray-200);
 }
@@ -3734,24 +3757,9 @@ ul.comment-section {
 .comment .comment-collapse-icon:hover::before {
 	border-left-color: var(--primary);
 }
-.comment.collapsed .comment-collapse-icon::before {
-	content: "\f055";
-	font-family: "font awesome 5 pro" !important;
-	font-weight: 900;
-	border-left: none;
-	top: -0.1px;
-	left: -3px;
-	font-size: 10px;
-}
-.comment.collapsed .comment-collapse-icon:hover::before {
-	color: var(--primary);
-}
 .comment.collapsed .comment-body p.text, .comment.collapsed div.comment-text, .comment.collapsed .comment-actions, .comment.collapsed .comment-write, .comment.collapsed .comment {
 	display: none;
 }
-.comment.collapsed .user-info {
-	margin-bottom: 0;
-}
 .comment.collapsed .profile-pic-25 {
 	opacity: 0.5;
 }
@@ -4211,12 +4219,6 @@ pre .com, code .com {
 	.post-actions .voting .fa, .post-actions .voting .fas, .post-actions .voting .far {
 		font-size: 1.25rem;
 	}
-	.comment-actions .score {
-		color: var(--gray-200);
-	}
-	.score {
-		color: var(--gray-200);
-	}
 	.active.arrow-up::before, .active.arrow-up:hover::before {
 		color: var(--primary);
 	}
@@ -4233,20 +4235,15 @@ pre .com, code .com {
 		background-color: var(--gray-600);
 	}
 	.comment-section > .comment {
-		padding-left: 12px;
+		padding-left: 0px;
 	}
 	.comment {
 		margin-top: 0.25rem;
-	}
+		padding-left: 0px;
-	.comment.collapsed .user-info {
-		padding-top: 0.5rem;
 	}
 	.comment.collapsed .comment-body:hover {
 		opacity: 0.5;
 	}
-	.comment-actions .fa, .comment-actions .fas, .comment-actions .far {
-		color: var(--gray-100);
-	}
 	.banner-pic-135 {
 		max-width: 100%;
 	}
@@ -4359,13 +4356,23 @@ div.deleted.banned {
 }
 }
 .comment .comment-collapse-desktop {
-	padding-right: 20px;
+	width: 20px;
 	cursor: pointer;
 }
-.comment .comment-collapse-desktop:hover {
+.comment-collapse-bar-click {
-	border-left-color: var(--white) !important;
+	width: 100%;
 }
-.comment.collapsed .comment-collapse-desktop:hover {
+.comment-collapse-bar {
+	width: 50%;
+	height: 100%;
+}
+.comment-section > .comment > .comment-collapse-bar-click > .comment-collapse-bar {
+	border-right-color: var(--background);
+}
+.comment .comment-collapse-bar-click:hover .comment-collapse-bar {
+	border-right-color: var(--white) !important;
+}
+.comment.collapsed .comment-collapse-bar-click:hover .comment-collapse-bar {
 	color: var(--white) !important;
 }
 @media (max-width: 767.98px) {
@@ -4426,7 +4433,10 @@ div.deleted.banned {
 	background-color: var(--background) !important;
 }
 .text-info {
-	color: var(--primary) !important;
+	color: var(--primary);
+}
+.collapsed .text-info {
+	color: var(--muted);
 }
 * {
 	-webkit-animation: None !important;
@@ -4574,7 +4584,9 @@ video {
 	overflow-y: scroll !important;
 }
 .comment .comment-collapse-icon {
-	padding-right: 10px;
+	margin-left: 5px;
+	margin-right: 5px;
+	align-self: center;
 }
 .comment .comment-collapse-icon::before {
 	font-family: "font awesome 5 pro" !important;
@@ -4582,14 +4594,19 @@ video {
 	display: inline-block;
 	cursor: pointer;
 	height: 100%;
-	width: 10px;
 	content: "\f056";
-	position: static;
+	font-size: 14px;
-	font-size: 10px;
 	font-weight: 900;
 	border: none;
-	margin-left: 0.25rem;
 }
+.comment.collapsed .comment-collapse-icon::before {
+	content: "\f055";
+	color: var(--muted);
+}
+.comment.collapsed .comment-collapse-icon:hover::before {
+	color: var(--primary);
+}
+
 .text-removed {
 	color: #ffabab !important;
 }
@@ -4601,7 +4618,11 @@ video {
 @media (max-width: 768px) {
 	.popover-bio * {
 		font-size: 0.8rem !important;
-}
+	}
+	.comment .comment-collapse-icon {
+		margin-left: 0px;
+		margin-right: 0px;
+	}
 }
 @media (min-width: 768px) {
 	.popover-bio * {
@@ -4888,12 +4909,6 @@ toast {
 html {
 	scroll-padding-top: 100px;
 }
-.comment .comment-body {
-	padding: 3px 0 0 0;
-}
-.comment-anchor {
-	padding: 1px;
-}
 .comment-anchor::before {
 	content: '';
 	display: block;

files/templates/comments.html

@@ -57,17 +57,21 @@
 {% if (c.is_banned or c.deleted_utc or c.is_blocking) and not (v and v.admin_level > 1) and not (v and v.id==c.author_id) %}
 
 <div id="comment-{{c.id}}" class="comment">
-		<span class="comment-collapse-desktop d-none d-md-block" onclick="collapse_comment('{{c.id}}', this.parentElement)"></span>
+		<div class="comment-collapse-icon" onclick="collapse_comment('{{c.id}}', this.parentElement)"></div>
+		<div class="comment-collapse-bar-click" onclick="collapse_comment('{{c.id}}', this.parentElement)">
+			<div class="comment-collapse-bar"></div>
+		</div>
+
+		<div class="comment-user-info">
+			{% if standalone and c.over_18 %}<span class="badge badge-danger">+18</span> {% endif %}
+			{% if c.is_banned %}removed by @{{c.ban_reason}}{% elif c.deleted_utc %}Deleted by author{% elif c.is_blocking %}You are blocking @{{c.author_name}}{% endif %}
+		</div>
 		
 		<div class="comment-body">
 
 				<div id="comment-{{c.id}}-only" class="{% if c.award_count('glowie') %}glow{% endif %} comment-{{c.id}}-only">
 
-						<div class="user-info">
+						
-							<span class="comment-collapse-icon" onclick="collapse_comment('{{c.id}}', this.parentElement.parentElement.parentElement)"></span>
-							{% if standalone and c.over_18 %}<span class="badge badge-danger">+18</span> {% endif %}
-							{% if c.is_banned %}removed by @{{c.ban_reason}}{% elif c.deleted_utc %}Deleted by author{% elif c.is_blocking %}You are blocking @{{c.author_name}}{% endif %}
-						</div>
 
 				</div>
 				
@@ -152,16 +156,33 @@
 	{% set isreply = False %}
 {% endif %}
 
-<div id="comment-{{c.id}}" class="anchor comment {% if standalone and level==1 %} mt-0{% endif %} {% if c.collapse_for_user(v,request.path) %}collapsed{% endif %}" style="{% if isreply %}padding-left:0!important;{% else %}border-left: 2px solid var(--primary){% endif %}">
+<div id="comment-{{c.id}}" class="anchor comment {% if standalone and level==1 %} mt-0{% endif %} {% if c.collapse_for_user(v,request.path) %}collapsed{% endif %}">
 	{% if not isreply %}
-		<span class="comment-collapse-desktop d-none d-md-block" onclick="collapse_comment('{{c.id}}', this.parentElement)"></span>
+		<div class="comment-collapse-icon" onclick="collapse_comment('{{c.id}}', this.parentElement)"></div>
+		<div class="comment-collapse-bar-click" onclick="collapse_comment('{{c.id}}', this.parentElement)">
+			<div class="comment-collapse-bar"></div>
+		</div>
 	{% endif %}
-	<div class="comment-body">
+	<div class="comment-user-info">
 
-		<div id="{% if comment_info and comment_info.id == c.id %}context{%else%}comment-{{c.id}}-only{% endif %}" class="{% if c.unread %}unread{% endif %} {% if c.award_count('glowie') %}glow{% endif %} comment-{{c.id}}-only comment-anchor {% if comment_info and comment_info.id == c.id %}context{%endif%}{% if c.is_banned %} banned{% endif %}{% if c.deleted_utc %} deleted{% endif %}">
+		{% if c.ghost %}
+			👻
+		{% else %}
 
-			<div class="user-info">
+			{% if c.author.verified %}<i class="fas fa-badge-check align-middle ml-1 {% if c.author.verified=='Glowiefied' %}glow{% endif %}" style="color:{% if c.author.verifiedcolor %}#{{c.author.verifiedcolor}}{% else %}#1DA1F2{% endif %}" data-bs-toggle="tooltip" data-bs-placement="bottom" title="{{c.author.verified}}"></i>
-				<span class="comment-collapse-icon" onclick="collapse_comment('{{c.id}}', this.parentElement.parentElement.parentElement.parentElement)"></span>
+			{% endif %}
+			{% if not c.author %}
+				{{c.print()}}
+			{% endif %}
+			<a href="/@{{c.author_name}}" class="user-name" onclick='popclick({{c.author.json_popover(v) | tojson}})' data-bs-placement="bottom" data-bs-toggle="popover" data-bs-trigger="click" data-content-id="popover" role="button" tabindex="0" style="font-size:12px; font-weight:bold;"><img loading="lazy" src="{{c.author.profile_url}}" class="profile-pic-20 mr-2"><span {% if c.author.patron and not c.distinguish_level %}class="patron" style="background-color:#{{c.author.namecolor}};"{% elif c.distinguish_level %}class="mod"{% endif %}>{{c.author_name}}</span></a>
+			{% if v and v.admin_level > 1 %}
+			<span 
+				class="usernote-link" 
+				data-micromodal-trigger="modal-1" 
+				onclick='fillnote( {{c.author.json_popover(v) | tojson}}, null, {{c.id}} )'>_U_</span>
+			{% endif %}
+			{% if c.author.customtitle %}&nbsp;<bdi style="color: #{{c.author.titlecolor}}">&nbsp;{{c.author.customtitle | safe}}</bdi>{% endif %}
+		{% endif %}
 
 		{% for a in c.awards|reverse %}
 			<i class="{{a.class_list}} px-1" data-bs-toggle="tooltip" data-bs-placement="bottom" title="{{a.title}} Award given by @{{a.user.username}}"></i>
@@ -189,25 +210,6 @@
 		{% if c.is_blocking %}<i class="fas fa-user-minus text-warning" data-bs-toggle="tooltip" data-bs-placement="bottom" title="You're blocking this user, but you can see this comment because you're an admin"></i>{% endif %}
 		{% if c.is_blocked %}<i class="fas fa-user-minus text-danger" data-bs-toggle="tooltip" data-bs-placement="bottom" title="This user is blocking you."></i>{% endif %}
 
-				{% if c.ghost %}
-					👻
-				{% else %}
-
-					{% if c.author.verified %}<i class="fas fa-badge-check align-middle ml-1 {% if c.author.verified=='Glowiefied' %}glow{% endif %}" style="color:{% if c.author.verifiedcolor %}#{{c.author.verifiedcolor}}{% else %}#1DA1F2{% endif %}" data-bs-toggle="tooltip" data-bs-placement="bottom" title="{{c.author.verified}}"></i>
-					{% endif %}
-					{% if not c.author %}
-						{{c.print()}}
-					{% endif %}
-					<a href="/@{{c.author_name}}" class="user-name" onclick='popclick({{c.author.json_popover(v) | tojson}})' data-bs-placement="bottom" data-bs-toggle="popover" data-bs-trigger="click" data-content-id="popover" role="button" tabindex="0" style="font-size:12px; font-weight:bold;"><img loading="lazy" src="{{c.author.profile_url}}" class="profile-pic-20 mr-2"><span {% if c.author.patron and not c.distinguish_level %}class="patron" style="background-color:#{{c.author.namecolor}};"{% elif c.distinguish_level %}class="mod"{% endif %}>{{c.author_name}}</span></a>
-					{% if v and v.admin_level > 1 %}
-					<span 
-						class="usernote-link" 
-						data-micromodal-trigger="modal-1" 
-						onclick='fillnote( {{c.author.json_popover(v) | tojson}}, null, {{c.id}} )'>_U_</span>
-					{% endif %}
-					{% if c.author.customtitle %}&nbsp;<bdi style="color: #{{c.author.titlecolor}}">&nbsp;{{c.author.customtitle | safe}}</bdi>{% endif %}
-				{% endif %}
-
 		{% if c.parent_comment_id and not standalone and level != 1 %}<a href="#comment-{{c.parent_comment_id}}-only" class="text-muted ml-2"><i class="fas fa-reply fa-sm fa-fw fa-flip-horizontal mr-1"></i>{{c.parent_comment.author_name}}</a>{% endif %}
 
 		{% if c.notif_utc %}
@@ -220,6 +222,12 @@
 		<span class="time-edited" id="time-edit-{{c.id}}" onmouseover="timestamp('time-edit-{{c.id}}','{{c.edited_utc}}')"><span>&#183;</span> <span class="font-italic">Edited {{c.edited_string}}</span></span>
 		{% endif %}
 	</div>
+
+	<div class="comment-body">
+
+		<div id="{% if comment_info and comment_info.id == c.id %}context{%else%}comment-{{c.id}}-only{% endif %}" class="{% if c.unread %}unread{% endif %} {% if c.award_count('glowie') %}glow{% endif %} comment-{{c.id}}-only comment-anchor {% if comment_info and comment_info.id == c.id %}context{%endif%}{% if c.is_banned %} banned{% endif %}{% if c.deleted_utc %} deleted{% endif %}">
+
+			
 			{% if v and c.filter_state == 'reported' and v.can_manage_reports() %}
 			<div id="flaggers-{{c.id}}" class="flaggers d-none">
 				<strong><i class="far fa-fw fa-flag"></i> Reports:</strong>
@@ -379,14 +387,14 @@
 					<ul class="d-none d-md-flex list-inline text-right text-md-left"><li>
 						{% if v and request.path.startswith('/@') and v.admin_level < 2%}
 							{% if voted==1 %}
-								<button class="btn caction py-0 m-0 px-3 nobackground arrow-up mx-0 comment-{{c.id}}-up active"></button>
+								<button class="btn caction p-0 m-0 pr-3 nobackground arrow-up mx-0 comment-{{c.id}}-up active"></button>
 							{% endif %}
 						{% elif v %}
 						
-							<button  tabindex="0" role="button" onclick="vote('comment', '{{c.id}}', '1')" class="comment-{{c.id}}-up btn caction py-0 m-0 px-3 nobackground arrow-up upvote-button mx-0 comment-{{c.id}}-up {% if voted==1 %}active{% endif %}"></button>
+							<button  tabindex="0" role="button" onclick="vote('comment', '{{c.id}}', '1')" class="comment-{{c.id}}-up btn caction p-0 m-0 pr-3 nobackground arrow-up upvote-button comment-{{c.id}}-up {% if voted==1 %}active{% endif %}"></button>
 						
 						{% else %}
-							<button  tabindex="0" class="comment-{{c.id}}-up btn caction nobackground py-0 m-0 px-3 arrow-up" onclick="location.href='/login';"></button>
+							<button  tabindex="0" class="comment-{{c.id}}-up btn caction nobackground p-0 m-0 pr-3 arrow-up" onclick="location.href='/login';"></button>
 						
 						{% endif %}