diff --git a/preview/entry.ts b/preview/entry.ts index 052ced0..b3ab331 100644 --- a/preview/entry.ts +++ b/preview/entry.ts @@ -25,6 +25,7 @@ function press(element: Element | null | undefined): void { // Scenes for screenshots: open the page with a hash to land in a state. // Width comes from the window (``--window-size``), the state from here. +// biome-ignore lint/complexity/noExcessiveCognitiveComplexity: one flat scene list async function main(): Promise { const client = new FakeClient(); const state = new PanelState(); @@ -33,7 +34,7 @@ async function main(): Promise { if (scene === "empty") { state.selected = null; } - if (scene === "question") { + if (scene === "question" || scene === "toggle") { state.selected = BRANCH_BLASTER; } if (scene === "deep") { @@ -95,6 +96,9 @@ async function main(): Promise { }) ); } + if (scene.startsWith("toggle")) { + press(document.querySelector('[data-slot="switch"]')); + } if (scene.startsWith("actions")) { press(document.querySelector('[aria-label="Conversation actions"]')); } diff --git a/src/tailwind.css b/src/tailwind.css index 490c0e5..a7ad938 100644 --- a/src/tailwind.css +++ b/src/tailwind.css @@ -360,18 +360,23 @@ .beaver-root [data-slot="select-content"]::before { display: none !important; } - /* Obsidian's own toggle: border-hover track, accent when on, a white thumb. */ - .beaver-root [data-slot="switch"] { + /* Obsidian's own toggle: border-hover track, accent when on, a white thumb. + Tripled class: luma's group/data variants carry three classes' worth of + specificity, and the utilities are all !important. */ + .beaver-root.beaver-root.beaver-root [data-slot="switch"] { + justify-content: flex-start !important; width: 40px !important; height: 20px !important; + padding: 0 !important; background: var(--background-modifier-border-hover) !important; border: 0 !important; border-radius: var(--toggle-radius, 18px) !important; } - .beaver-root [data-slot="switch"][data-state="checked"] { + .beaver-root.beaver-root.beaver-root + [data-slot="switch"][data-state="checked"] { background: var(--interactive-accent) !important; } - .beaver-root [data-slot="switch-thumb"] { + .beaver-root.beaver-root.beaver-root [data-slot="switch-thumb"] { display: block !important; width: 16px !important; height: 16px !important; @@ -380,8 +385,12 @@ border-radius: 50% !important; box-shadow: var(--shadow-s) !important; } - .beaver-root [data-slot="switch-thumb"][data-state="checked"] { - transform: translateX(20px) !important; + .beaver-root.beaver-root.beaver-root [data-slot="switch-thumb"] { + translate: 0 !important; + } + .beaver-root.beaver-root.beaver-root + [data-slot="switch-thumb"][data-state="checked"] { + translate: 20px 0 !important; } .beaver-root [data-slot="button"][data-variant="default"], .beaver-root [data-slot="button"]:not([class*="bg-"]) {