From 14a5bbb45dadb7d3f59e6b96081062b2cfac29b7 Mon Sep 17 00:00:00 2001
From: Ly-sec <itslysec@gmail.com>
Date: Sun, 9 Nov 2025 10:02:14 +0100
Subject: [PATCH] Template/Discord: actually fix link color

---
 Assets/MatugenTemplates/vesktop.css | 71 ++++++++---------------------
 1 file changed, 19 insertions(+), 52 deletions(-)

diff --git a/Assets/MatugenTemplates/vesktop.css b/Assets/MatugenTemplates/vesktop.css
index 6de0a101..7208535a 100644
--- a/Assets/MatugenTemplates/vesktop.css
+++ b/Assets/MatugenTemplates/vesktop.css
@@ -220,70 +220,37 @@ h3[class*="postTitleText"]:hover {
     opacity: 1 !important;
 }
 
-/* Improve link readability - target Discord's link callout containers */
-[class*="linkCalloutContainer"] {
+/* Improve link readability - ONLY target link callout containers (not channels or other UI) */
+/* Override CSS variables only within link callout containers */
+div[class*="linkCalloutContainer"] {
     --text-muted: var(--text-3) !important;
     --text-default: var(--accent-1) !important;
 }
 
-[class*="linkCalloutContainer"],
-[class*="linkCalloutContainer"] * {
-    opacity: 1 !important;
-}
-
-/* Override Discord's text-muted variable for links (protocol and path parts) */
-[class*="linkCalloutContainer"] [style*="--text-muted"],
-[class*="linkCalloutContainer"] [style*="color: var(--text-muted)"],
-[class*="linkCalloutContainer"] [class*="normal"]:not([class*="semibold"]),
-[class*="linkCalloutContainer"] [data-text-variant*="normal"]:not([data-text-variant*="semibold"]) {
+/* Make muted parts (protocol, path) more readable - only direct child spans in link containers */
+div[class*="linkCalloutContainer"] > span[class*="normal"][data-text-variant*="normal"][style*="--text-muted"],
+div[class*="linkCalloutContainer"] > span[class*="normal"][style*="color: var(--text-muted)"] {
     color: var(--text-3) !important;
-    opacity: 0.85 !important;
-}
-
-/* Make the domain (semibold part) stand out with accent color */
-[class*="linkCalloutContainer"] [class*="semibold"],
-[class*="linkCalloutContainer"] [data-text-variant*="semibold"],
-[class*="linkCalloutContainer"] [style*="--text-default"],
-[class*="linkCalloutContainer"] [style*="color: var(--text-default)"] {
-    color: var(--accent-1) !important;
-    font-weight: 600 !important;
-    opacity: 1 !important;
-}
-
-/* Hover state for links - make entire link brighter */
-[class*="linkCalloutContainer"]:hover,
-[class*="linkCalloutContainer"]:hover * {
-    opacity: 1 !important;
-}
-
-[class*="linkCalloutContainer"]:hover [class*="semibold"],
-[class*="linkCalloutContainer"]:hover [data-text-variant*="semibold"] {
-    color: var(--accent-1) !important;
-    opacity: 1 !important;
-    font-weight: 600 !important;
-}
-
-[class*="linkCalloutContainer"]:hover [class*="normal"]:not([class*="semibold"]) {
-    color: var(--text-2) !important;
     opacity: 0.9 !important;
 }
 
-/* General link styling for embedded links */
-a[href],
-[class*="embed"] a,
-[class*="embed"] [class*="link"],
-[class*="embedDescription"] a {
+/* Make the domain (semibold part) stand out with accent color - only direct child spans in link containers */
+div[class*="linkCalloutContainer"] > span[class*="semibold"],
+div[class*="linkCalloutContainer"] > span[data-text-variant*="semibold"],
+div[class*="linkCalloutContainer"] > span[style*="color: var(--text-default)"] {
     color: var(--accent-1) !important;
+    font-weight: 600 !important;
     opacity: 1 !important;
-    text-decoration: underline !important;
-    text-decoration-color: var(--accent-1) !important;
-    text-underline-offset: 2px !important;
 }
 
-a[href]:hover,
-[class*="embed"] a:hover,
-[class*="embed"] [class*="link"]:hover {
+/* Hover state for link containers - only affects spans inside link containers */
+div[class*="linkCalloutContainer"]:hover > span[class*="normal"][data-text-variant*="normal"] {
+    color: var(--text-2) !important;
+    opacity: 1 !important;
+}
+
+div[class*="linkCalloutContainer"]:hover > span[class*="semibold"],
+div[class*="linkCalloutContainer"]:hover > span[data-text-variant*="semibold"] {
     color: var(--accent-1) !important;
     opacity: 1 !important;
-    text-decoration-thickness: 2px !important;
 }
\ No newline at end of file