forked from rDrama/rDrama
fix collapse lines contrast
parent
af8c92ae9a
commit
cdda63f163
|
@ -7570,3 +7570,7 @@ bdi {
|
||||||
#system {
|
#system {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.comment-collapse-desktop {
|
||||||
|
border-left: 2px solid;
|
||||||
|
}
|
||||||
|
|
|
@ -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})`
|
||||||
|
}
|
||||||
|
}
|
|
@ -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) %}
|
{% 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 %}">
|
<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 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">
|
<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 %}">
|
<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 %}
|
{% 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 %}
|
{% endif %}
|
||||||
<div class="comment-body">
|
<div class="comment-body">
|
||||||
|
|
||||||
|
@ -792,6 +792,7 @@
|
||||||
<script defer src="{{'js/comments+post_listing.js' | asset}}"></script>
|
<script defer src="{{'js/comments+post_listing.js' | asset}}"></script>
|
||||||
<script defer src="{{'js/comments.js' | asset}}"></script>
|
<script defer src="{{'js/comments.js' | asset}}"></script>
|
||||||
<script defer src="{{'js/more_comments.js' | asset}}"></script>
|
<script defer src="{{'js/more_comments.js' | asset}}"></script>
|
||||||
|
<script defer src="{{'js/fix_collapse_lines.js' | asset}}"></script>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
{% if p %}
|
{% if p %}
|
||||||
|
|
Loading…
Reference in New Issue