diff --git a/src/Miscellaneous/IDColor.coffee b/src/Miscellaneous/IDColor.coffee index bb4046c3c..5fe4d804b 100644 --- a/src/Miscellaneous/IDColor.coffee +++ b/src/Miscellaneous/IDColor.coffee @@ -33,7 +33,7 @@ IDColor = ] # Weight color luminance values, assign a font color that should be readable. - rgb.push if (rgb[0] * 0.299 + rgb[1] * 0.587 + rgb[2] * 0.114) > 125 + rgb.push if $.luma(rgb) > 125 '#000' else '#fff' diff --git a/src/main/Main.coffee b/src/main/Main.coffee index f15c698bf..220d34854 100644 --- a/src/main/Main.coffee +++ b/src/main/Main.coffee @@ -273,7 +273,7 @@ Main = unless /^rgb\(/.test(bgColor) s = window.getComputedStyle(d.body) bgColor = "#{s.backgroundColor} #{s.backgroundImage} #{s.backgroundRepeat} #{s.backgroundPosition}" - Main.bgColorStyle.textContent = """ + css = """ .dialog, .suboption-list > div:last-of-type, :root.catalog-hover-expand .catalog-container:hover > .post { background: #{bgColor}; } @@ -281,6 +281,13 @@ Main = background-color: rgba(#{rgb[...3].join(', ')}, #{0.5*(rgb[3] || 1)}); } """ + if $.luma(rgb) < 100 + css += """ + .watch-thread-link { + background-image: url("data:image/svg+xml,"); + } + """ + Main.bgColorStyle.textContent = css $.after $.id('fourchanx-css'), Main.bgColorStyle $.onExists d.head, Site.selectors.styleSheet, (el) -> diff --git a/src/platform/$.coffee b/src/platform/$.coffee index 28d031819..a650aa51b 100644 --- a/src/platform/$.coffee +++ b/src/platform/$.coffee @@ -460,6 +460,9 @@ $.minmax = (value, min, max) -> $.hasAudio = (video) -> video.mozHasAudio or !!video.webkitAudioDecodedByteCount +$.luma = (rgb) -> + rgb[0] * 0.299 + rgb[1] * 0.587 + rgb[2] * 0.114 + $.engine = do -> return 'edge' if /Edge\//.test navigator.userAgent return 'blink' if /Chrome\//.test navigator.userAgent