From cdda63f163d87440ead1f241f6279a88e7e825a0 Mon Sep 17 00:00:00 2001
From: Aevann <randomname42029@gmail.com>
Date: Fri, 14 Jul 2023 20:45:28 +0300
Subject: [PATCH] fix collapse lines contrast

---
 files/assets/css/main.css             |  4 ++++
 files/assets/js/fix_collapse_lines.js | 24 ++++++++++++++++++++++++
 files/templates/comments.html         |  5 +++--
 3 files changed, 31 insertions(+), 2 deletions(-)
 create mode 100644 files/assets/js/fix_collapse_lines.js

diff --git a/files/assets/css/main.css b/files/assets/css/main.css
index 9dcf99f60..38d75df8c 100644
--- a/files/assets/css/main.css
+++ b/files/assets/css/main.css
@@ -7570,3 +7570,7 @@ bdi {
 #system {
 	font-size: 16px;
 }
+
+.comment-collapse-desktop {
+	border-left: 2px solid;
+}
diff --git a/files/assets/js/fix_collapse_lines.js b/files/assets/js/fix_collapse_lines.js
new file mode 100644
index 000000000..ebce4bd81
--- /dev/null
+++ b/files/assets/js/fix_collapse_lines.js
@@ -0,0 +1,24 @@
+function deltaRgb (rgb1, rgb2) {
+	const [ r1, g1, b1 ] = rgb1,
+		[ r2, g2, b2 ] = rgb2,
+		drp2 = Math.pow(r1 - r2, 2),
+		dgp2 = Math.pow(g1 - g2, 2),
+		dbp2 = Math.pow(b1 - b2, 2),
+		t = (r1 + r2) / 2
+
+	return Math.sqrt(2 * drp2 + 4 * dgp2 + 3 * dbp2 + t * (drp2 - dbp2) / 256)
+}
+
+const toRGBArray = rgbStr => rgbStr.match(/\d+/g).map(Number);
+
+const background_color = toRGBArray(getComputedStyle(document.documentElement).getPropertyValue('--background'));
+
+for (const line of document.getElementsByClassName('comment-collapse-desktop')) {
+	const line_color = toRGBArray(line.style.borderColor)
+	if (deltaRgb(line_color, background_color) < 100) {
+		const R = Math.abs(background_color[0] - 255)
+		const G = Math.abs(background_color[1] - 255)
+		const B = Math.abs(background_color[2] - 255)
+		line.style.borderColor = `rgb(${R}, ${G}, ${B})`
+	}
+}
diff --git a/files/templates/comments.html b/files/templates/comments.html
index de0e6b456..f2b0e5d7d 100644
--- a/files/templates/comments.html
+++ b/files/templates/comments.html
@@ -26,7 +26,7 @@
 {% if c.is_blocking and not c.ghost or (c.is_banned or c.deleted_utc) and not (v and v.admin_level >= PERMS['POST_COMMENT_MODERATION']) and not (v and v.id==c.author_id) %}
 
 	<div id="comment-{{c.id}}" class="comment {% if not (v and v.id == author_id) and not (v and v.admin_level) %}collapsed{% endif %}">
-			<span class="comment-collapse-desktop" style="border-left: 2px solid #{{c.author.name_color}}" data-nonce="{{g.nonce}}" data-onclick="collapse_comment('{{c.id}}')"></span>
+			<span class="comment-collapse-desktop" style="border-color: #{{c.author.name_color}}" data-nonce="{{g.nonce}}" data-onclick="collapse_comment('{{c.id}}')"></span>
 
 			<div class="comment-body">
 					<div id="comment-{{c.id}}-only" class="{% if c.award_count('tilt', v) %}tilt tilt-{{c.award_count('tilt', v)}}{% endif %} {% if c.award_count('glowie', v) %}glow{% endif %} comment-{{c.id}}-only">
@@ -115,7 +115,7 @@
 
 <div id="comment-{{c.id}}" class="anchor comment {% if wall and level == 1 %}mt-5{% elif wall %}mt-4{% elif standalone and level==1 %}mt-0{% endif %} {% if collapse or c.collapse_for_user(v,request.full_path) %}collapsed{% endif %}" style="{% if isreply %}padding-left:0!important{% endif %}">
 	{% if not isreply %}
-		<span class="comment-collapse-desktop" style="border-left: 2px solid {% if c.ghost %}var(--primary){% else %}#{{c.author.name_color}}{% endif %}" data-nonce="{{g.nonce}}" data-onclick="collapse_comment('{{c.id}}')"></span>
+		<span class="comment-collapse-desktop" style="border-color: {% if c.ghost %}var(--primary){% else %}#{{c.author.name_color}}{% endif %}" data-nonce="{{g.nonce}}" data-onclick="collapse_comment('{{c.id}}')"></span>
 	{% endif %}
 	<div class="comment-body">
 
@@ -792,6 +792,7 @@
 	<script defer src="{{'js/comments+post_listing.js' | asset}}"></script>
 	<script defer src="{{'js/comments.js' | asset}}"></script>
 	<script defer src="{{'js/more_comments.js' | asset}}"></script>
+	<script defer src="{{'js/fix_collapse_lines.js' | asset}}"></script>
 {% endif %}
 
 {% if p %}