fix: restore proper tab button CSS in help.html (browser-reset issue with Tailwind preflight: false)
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -108,13 +108,10 @@
|
||||
</div>
|
||||
|
||||
<!-- Tab bar -->
|
||||
<div class="flex gap-1 mb-5 border-b border-pg-border -mb-px">
|
||||
<button class="tab-btn px-4 py-2 text-sm font-medium text-pg-dim border-b-2 border-transparent -mb-px cursor-pointer transition-colors hover:text-pg-bright active"
|
||||
data-tab="ui">UI Guide</button>
|
||||
<button class="tab-btn px-4 py-2 text-sm font-medium text-pg-dim border-b-2 border-transparent -mb-px cursor-pointer transition-colors hover:text-pg-bright"
|
||||
data-tab="tools">Tools</button>
|
||||
<button class="tab-btn px-4 py-2 text-sm font-medium text-pg-dim border-b-2 border-transparent -mb-px cursor-pointer transition-colors hover:text-pg-bright"
|
||||
data-tab="persona" id="tab-btn-persona">Persona</button>
|
||||
<div class="tab-bar">
|
||||
<button class="tab-btn active" data-tab="ui">UI Guide</button>
|
||||
<button class="tab-btn" data-tab="tools">Tools</button>
|
||||
<button class="tab-btn" data-tab="persona" id="tab-btn-persona">Persona</button>
|
||||
</div>
|
||||
|
||||
<div id="tab-ui" class="tab-panel active"><div class="help-body"><p class="text-pg-dimmer text-sm text-center py-8">Loading…</p></div></div>
|
||||
@@ -123,7 +120,18 @@
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* Active tab indicator — must be CSS since Tailwind can't match .active sibling state */
|
||||
.tab-bar {
|
||||
display: flex; gap: 0.25rem; margin-bottom: 1.5rem;
|
||||
border-bottom: 1px solid var(--pg-border);
|
||||
}
|
||||
.tab-btn {
|
||||
padding: 0.45rem 1rem; font-size: 0.85rem; font-weight: 500;
|
||||
color: var(--pg-dim); background: none; border: none;
|
||||
border-bottom: 2px solid transparent; margin-bottom: -1px;
|
||||
cursor: pointer; transition: color 0.15s, border-color 0.15s;
|
||||
font-family: inherit;
|
||||
}
|
||||
.tab-btn:hover { color: var(--pg-bright); }
|
||||
.tab-btn.active { color: var(--pg-accent); border-bottom-color: var(--pg-accent); }
|
||||
</style>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user