fix(website): keep hero demo hint readable

This commit is contained in:
Timo
2026-07-08 20:22:20 +02:00
parent 7718885511
commit 5b7ee654e4
2 changed files with 29 additions and 19 deletions
+10 -8
View File
@@ -325,13 +325,14 @@
<!-- Interactive Live Demo: two synced video tabs + the extension popup -->
<div class="hero-mockup-wrapper">
<div class="hero-demo-scene popup-open connected" id="hero-demo">
<button class="demo-sync-chip" id="demo-sync-chip" type="button" title="Live sync status of the two demo tabs">
<span class="demo-chip-dot" aria-hidden="true"></span>
<span class="demo-chip-label-sync">{{DEMO_SYNC}}</span>
<span class="demo-chip-event"></span>
</button>
<div class="demo-tab-stack">
<button class="demo-sync-chip" id="demo-sync-chip" type="button" title="Live sync status of the two demo tabs">
<span class="demo-chip-dot" aria-hidden="true"></span>
<span class="demo-chip-label-sync">{{DEMO_SYNC}}</span>
<span class="demo-chip-event"></span>
</button>
<div class="demo-tab-card demo-tab-a" id="demo-tab-a" role="button" tabindex="0" aria-pressed="false" aria-label="Press play or pause as 🐱 ChillCat. KoalaSync mirrors it to the other tab" title="Press play/pause here. KoalaSync mirrors it to the other tab">
<div class="demo-tab-card demo-tab-a" id="demo-tab-a" role="button" tabindex="0" aria-pressed="false" aria-label="Press play or pause as 🐱 ChillCat. KoalaSync mirrors it to the other tab" title="Press play/pause here. KoalaSync mirrors it to the other tab">
<div class="demo-tab-titlebar">
<span class="demo-tab-dots" aria-hidden="true"><i></i><i></i><i></i></span>
<span class="demo-tab-title"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="11" height="11" aria-hidden="true"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg> <span class="demo-title-text-ep1">Stranger Things - S4E1</span></span>
@@ -388,7 +389,7 @@
</div>
</div>
<div class="demo-tab-card demo-tab-b" id="demo-tab-b" role="button" tabindex="0" aria-pressed="false" aria-label="Press play or pause as 🐶 HappyDog. KoalaSync mirrors it to the other tab" title="Press play/pause here. KoalaSync mirrors it to the other tab">
<div class="demo-tab-card demo-tab-b" id="demo-tab-b" role="button" tabindex="0" aria-pressed="false" aria-label="Press play or pause as 🐶 HappyDog. KoalaSync mirrors it to the other tab" title="Press play/pause here. KoalaSync mirrors it to the other tab">
<div class="demo-tab-titlebar">
<span class="demo-tab-dots" aria-hidden="true"><i></i><i></i><i></i></span>
<span class="demo-tab-title"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="11" height="11" aria-hidden="true"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg> <span class="demo-title-text-ep1">Stranger Things - S4E1</span></span>
@@ -444,7 +445,9 @@
</div>
</div>
<div class="demo-tab-toast" id="demo-toast-b" data-joined="{{DEMO_JOINED}}" data-selected="{{DEMO_TAB_SELECTED}}" aria-hidden="true"></div>
</div>
</div>
<p class="demo-hint" id="demo-hint">{{DEMO_HINT}}</p>
<div class="extension-mockup">
<div class="mock-header-row">
@@ -722,7 +725,6 @@
<div class="demo-cursor" id="demo-cursor" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 2l13 11.5-6 .7 3.4 6.3-2.6 1.4-3.4-6.4L5 19.5z" fill="#f8fafc" stroke="#0f172a" stroke-width="1.4" stroke-linejoin="round"/></svg>
</div>
<p class="demo-hint" id="demo-hint">{{DEMO_HINT}}</p>
</div>
</div>
</div>