polats Claude Opus 4.8 (1M context) commited on
Commit
48ba265
·
1 Parent(s): 2a6b00d

Shell: scope nav-item link styles under .tac-sidebar (beats host .prose a)

Browse files

Gradio'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>

Files changed (1) hide show
  1. 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-nav-item {
 
 
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 {