Spaces:
Running
Running
Shell: scope nav-item link styles under .tac-sidebar (beats host .prose a)
Browse filesGradio's .prose a re-coloured/underlined the nav links; bumping specificity with
the .tac-sidebar ancestor (framework-neutral) keeps the sidebar's own styling.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- web/shell/sidebar.css +6 -4
web/shell/sidebar.css
CHANGED
|
@@ -49,15 +49,17 @@ body:not(.tac-collapsed) .gradio-container { margin-left: var(--tac-w); }
|
|
| 49 |
font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
|
| 50 |
color: var(--tac-muted); padding: 4px 8px;
|
| 51 |
}
|
| 52 |
-
.tac-
|
|
|
|
|
|
|
| 53 |
display: flex; align-items: center; gap: 8px; width: 100%;
|
| 54 |
padding: 8px 10px; margin: 1px 0; border: 0; border-radius: 8px;
|
| 55 |
background: none; color: var(--tac-ink); font: inherit; text-align: left;
|
| 56 |
cursor: pointer; text-decoration: none;
|
| 57 |
}
|
| 58 |
-
.tac-nav-item:hover { background: var(--tac-bg-2); }
|
| 59 |
-
.tac-nav-item.active { background: color-mix(in srgb, var(--tac-accent) 22%, transparent); }
|
| 60 |
-
.tac-nav-item .tac-ico { width: 18px; text-align: center; opacity: .9; }
|
| 61 |
|
| 62 |
/* Edge tab to reopen when collapsed. */
|
| 63 |
.tac-reopen {
|
|
|
|
| 49 |
font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
|
| 50 |
color: var(--tac-muted); padding: 4px 8px;
|
| 51 |
}
|
| 52 |
+
/* `.tac-sidebar` ancestor raises specificity so host link styles (e.g. Gradio's
|
| 53 |
+
* `.prose a`) don't re-colour/underline nav items — framework-neutral. */
|
| 54 |
+
.tac-sidebar .tac-nav-item {
|
| 55 |
display: flex; align-items: center; gap: 8px; width: 100%;
|
| 56 |
padding: 8px 10px; margin: 1px 0; border: 0; border-radius: 8px;
|
| 57 |
background: none; color: var(--tac-ink); font: inherit; text-align: left;
|
| 58 |
cursor: pointer; text-decoration: none;
|
| 59 |
}
|
| 60 |
+
.tac-sidebar .tac-nav-item:hover { background: var(--tac-bg-2); text-decoration: none; }
|
| 61 |
+
.tac-sidebar .tac-nav-item.active { background: color-mix(in srgb, var(--tac-accent) 22%, transparent); color: var(--tac-ink); }
|
| 62 |
+
.tac-sidebar .tac-nav-item .tac-ico { width: 18px; text-align: center; opacity: .9; }
|
| 63 |
|
| 64 |
/* Edge tab to reopen when collapsed. */
|
| 65 |
.tac-reopen {
|