diff --git a/src/presentation/settings/PluginSettingTab.test.ts b/src/presentation/settings/PluginSettingTab.test.ts index 9805b18..5de9e54 100644 --- a/src/presentation/settings/PluginSettingTab.test.ts +++ b/src/presentation/settings/PluginSettingTab.test.ts @@ -521,10 +521,13 @@ describe("PluginSettingTab", () => { for (const cardId of ["card-types", "sync-content", "scope", "deck", "commands"] as const) { const header = queryByDataset(tab.containerEl, "settingsCardToggle", cardId); expect(header.style.position).toBe("sticky"); - expect(header.style.top).toBe("8px"); - expect(header.style.zIndex).toBe("20"); + expect(header.style.top).toBe("0"); + expect(header.style.zIndex).toBe("30"); + expect(header.style.display).toBe("flex"); + expect(header.style.width).toBe("100%"); expect(header.style.background).toBe("var(--background-primary)"); - expect(header.style.boxShadow).toBe("0 2px 8px rgba(0, 0, 0, 0.08)"); + expect(header.style.borderBottom).toBe("1px solid var(--background-modifier-border)"); + expect(header.style.boxShadow).toBe("0 6px 14px rgba(0, 0, 0, 0.08)"); } }); diff --git a/src/presentation/settings/PluginSettingTab.ts b/src/presentation/settings/PluginSettingTab.ts index fec4c19..d5a5b5a 100644 --- a/src/presentation/settings/PluginSettingTab.ts +++ b/src/presentation/settings/PluginSettingTab.ts @@ -118,11 +118,22 @@ export class AnkiHeadingSyncSettingTab extends PluginSettingTab { headerEl.type = "button"; headerEl.dataset.settingsCardToggle = cardId; headerEl.style.position = "sticky"; - headerEl.style.top = "8px"; - headerEl.style.zIndex = "20"; + headerEl.style.top = "0"; + headerEl.style.zIndex = "30"; + headerEl.style.display = "flex"; + headerEl.style.alignItems = "center"; + headerEl.style.justifyContent = "flex-start"; + headerEl.style.width = "100%"; + headerEl.style.maxWidth = "100%"; + headerEl.style.padding = "10px 14px"; headerEl.style.background = "var(--background-primary)"; + headerEl.style.backdropFilter = "blur(8px)"; + headerEl.style.border = "none"; + headerEl.style.borderBottom = "1px solid var(--background-modifier-border)"; + headerEl.style.borderRadius = "0"; headerEl.style.marginBottom = "8px"; - headerEl.style.boxShadow = "0 2px 8px rgba(0, 0, 0, 0.08)"; + headerEl.style.textAlign = "left"; + headerEl.style.boxShadow = "0 6px 14px rgba(0, 0, 0, 0.08)"; headerEl.addEventListener("click", () => { this.toggleCard(cardId); });