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>
|
</div>
|
||||||
|
|
||||||
<!-- Tab bar -->
|
<!-- Tab bar -->
|
||||||
<div class="flex gap-1 mb-5 border-b border-pg-border -mb-px">
|
<div class="tab-bar">
|
||||||
<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"
|
<button class="tab-btn active" data-tab="ui">UI Guide</button>
|
||||||
data-tab="ui">UI Guide</button>
|
<button class="tab-btn" 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"
|
<button class="tab-btn" data-tab="persona" id="tab-btn-persona">Persona</button>
|
||||||
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>
|
</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>
|
<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>
|
</div>
|
||||||
|
|
||||||
<style>
|
<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); }
|
.tab-btn.active { color: var(--pg-accent); border-bottom-color: var(--pg-accent); }
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user