fix: link styling - prevent icon underline, ensure highlight color
Restructure link HTML so icon and text are separate spans. Apply text-decoration only to .pi-link-text on hover (CSS text-decoration propagates from parent and cannot be removed on children). Set color: var(--color-highlight) on both spans explicitly to override the global a { color: inherit } rule. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
TerminallyLazy committed
Mar 4, 2026 at 00:01 UTC
cc5f2e4d9df8a66c989c29a010c263371189080d
1 file changed
+13
-10
plugins/plugin_installer/webui/install-detail.html
+13
-10
@@ -38,12 +38,14 @@
38
<div class="pi-detail-links">
39
<template x-if="$store.pluginInstallStore.selectedPlugin.github">
40
<a :href="$store.pluginInstallStore.selectedPlugin.github" target="_blank" class="pi-link">
41
- <span class="material-symbols-outlined">code</span> GitHub Repository
41
+ <span class="material-symbols-outlined pi-link-icon">code</span>
42
+ <span class="pi-link-text">GitHub Repository</span>
43
</a>
44
</template>
45
<template x-if="$store.pluginInstallStore.selectedPlugin.discussion">
46
<a :href="$store.pluginInstallStore.selectedPlugin.discussion" target="_blank" class="pi-link">
46
- <span class="material-symbols-outlined">forum</span> Discussion
47
+ <span class="material-symbols-outlined pi-link-icon">forum</span>
48
+ <span class="pi-link-text">Discussion</span>
49
</a>
50
</template>
51
</div>
@@ -216,23 +218,24 @@
218
display: inline-flex;
219
align-items: center;
220
gap: 0.3rem;
219
- color: var(--color-highlight);
221
text-decoration: none;
222
font-size: 0.9rem;
223
}
224
224
- .pi-link:hover {
225
- text-decoration: underline;
226
- text-underline-offset: 2px;
225
+ .pi-link-icon {
226
+ color: var(--color-highlight);
227
+ display: inline-block;
228
+ font-size: 1.1rem;
229
+ flex-shrink: 0;
230
}
231
229
- .pi-link .material-symbols-outlined {
230
- text-decoration: none;
232
+ .pi-link-text {
233
color: var(--color-highlight);
234
}
235
234
- .pi-link:hover .material-symbols-outlined {
235
- text-decoration: none;
236
+ .pi-link:hover .pi-link-text {
237
+ text-decoration: underline;
238
+ text-underline-offset: 2px;
239
}
240
241
.pi-detail-actions {