diff --git a/website/public/data/manifest.json b/website/public/data/manifest.json index 1d190fe2..6d9bc0bb 100644 --- a/website/public/data/manifest.json +++ b/website/public/data/manifest.json @@ -1,5 +1,5 @@ { - "generated": "2026-01-28T08:51:25.860Z", + "generated": "2026-01-28T22:33:37.643Z", "counts": { "agents": 140, "prompts": 134, diff --git a/website/public/styles/global.css b/website/public/styles/global.css index 69c62406..2f613deb 100644 --- a/website/public/styles/global.css +++ b/website/public/styles/global.css @@ -646,6 +646,101 @@ a:hover { color: var(--color-text); } +/* Split Button Dropdown */ +.install-dropdown { + position: relative; + display: inline-flex; +} + +.install-dropdown .install-btn-main { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 1px solid rgba(255, 255, 255, 0.2); +} + +.install-dropdown .install-btn-toggle { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + padding: 10px 10px; + min-width: auto; +} + +.install-dropdown .install-btn-toggle svg { + transition: transform var(--transition); +} + +.install-dropdown.open .install-btn-toggle svg { + transform: rotate(180deg); +} + +.install-dropdown-menu { + position: absolute; + top: 100%; + right: 0; + margin-top: 4px; + min-width: 160px; + background: var(--color-bg-secondary); + border: 1px solid var(--color-border); + border-radius: var(--border-radius); + box-shadow: var(--shadow-md); + z-index: 1000; + opacity: 0; + visibility: hidden; + transform: translateY(-8px); + transition: all var(--transition); +} + +.install-dropdown.open .install-dropdown-menu { + opacity: 1; + visibility: visible; + transform: translateY(0); +} + +.install-dropdown-menu a { + display: flex; + align-items: center; + gap: 10px; + padding: 10px 14px; + color: var(--color-text); + text-decoration: none; + font-size: 14px; + transition: background var(--transition); +} + +.install-dropdown-menu a:first-child { + border-radius: var(--border-radius) var(--border-radius) 0 0; +} + +.install-dropdown-menu a:last-child { + border-radius: 0 0 var(--border-radius) var(--border-radius); +} + +.install-dropdown-menu a:hover { + background: var(--color-bg-tertiary); +} + +.install-dropdown-menu svg { + width: 16px; + height: 16px; + flex-shrink: 0; +} + +/* Small variant for list items */ +.install-dropdown.install-dropdown-small .install-btn-main { + padding: 8px 12px; + font-size: 13px; +} + +.install-dropdown.install-dropdown-small .install-btn-toggle { + padding: 8px 8px; +} + +.install-dropdown-menu .dropdown-divider { + height: 1px; + background: var(--color-border); + margin: 4px 0; +} + /* Spinner animation */ @keyframes spin { from { diff --git a/website/src/components/Modal.astro b/website/src/components/Modal.astro index 560b3e04..f587f0e5 100644 --- a/website/src/components/Modal.astro +++ b/website/src/components/Modal.astro @@ -14,18 +14,29 @@ Copy - - - - - VS Code - - - - - - Insiders - + +
+ + + VS Code + + + + VS Code Insiders + +
+ + `; +} + +/** + * Setup dropdown close handlers for dynamically created dropdowns + */ +export function setupDropdownCloseHandlers(): void { + document.addEventListener('click', (e) => { + const target = e.target as HTMLElement; + // Close all open dropdowns if clicking outside + if (!target.closest('.install-dropdown')) { + document.querySelectorAll('.install-dropdown.open').forEach(dropdown => { + dropdown.classList.remove('open'); + }); + } + }); +}