diff --git a/src/components/status.css b/src/components/status.css index bda6b2d1..b2f20954 100644 --- a/src/components/status.css +++ b/src/components/status.css @@ -525,6 +525,13 @@ .timeline-deck .status .content.truncated ~ .card { display: none; } +.status .content a:not(.mention, .has-url-text) { + color: var(--link-text-color); +} +.status .content a:not(.mention, .has-url-text):is(:hover, :focus) { + color: var(--text-color); + text-decoration-color: var(--link-color); +} .status .content p { /* 12px = 75% of 16px */ margin-block: min(0.75em, 12px); diff --git a/src/index.css b/src/index.css index d65914e0..2b2eaa16 100644 --- a/src/index.css +++ b/src/index.css @@ -30,6 +30,11 @@ --link-faded-color: #4169e155; --link-bg-hover-color: #f0f2f599; --link-visited-color: mediumslateblue; + --link-text-color: color-mix( + in lch, + var(--link-color) 60%, + var(--text-color) 40% + ); --focus-ring-color: var(--link-color); --button-bg-color: var(--blue-color); --button-bg-blur-color: #4169e1aa; diff --git a/src/utils/enhance-content.js b/src/utils/enhance-content.js index bf91733b..2d2586d6 100644 --- a/src/utils/enhance-content.js +++ b/src/utils/enhance-content.js @@ -21,6 +21,16 @@ function enhanceContent(content, opts = {}) { }); } + // Add 'has-url-text' to all links that contains a url + if (hasLink) { + const links = Array.from(dom.querySelectorAll('a[href]')); + links.forEach((link) => { + if (/^https?:\/\//i.test(link.textContent.trim())) { + link.classList.add('has-url-text'); + } + }); + } + // Spanify un-spanned mentions if (hasLink) { const notMentionLinks = Array.from(dom.querySelectorAll('a[href]'));