Template/Discord: fix link colors

This commit is contained in:
Ly-sec
2025-11-09 10:00:22 +01:00
parent 871104be59
commit ecc76777d1
+68
View File
@@ -218,4 +218,72 @@ h3[class*="postTitleText"]:hover {
[class*="tooltip"] div {
color: var(--text-2) !important;
opacity: 1 !important;
}
/* Improve link readability - target Discord's link callout containers */
[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"]) {
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 {
color: var(--accent-1) !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 {
color: var(--accent-1) !important;
opacity: 1 !important;
text-decoration-thickness: 2px !important;
}