-18

src/entrypoints/popup/app.css

reviewed

··· 1 1 @import "tailwindcss"; 2 2 @import "@catppuccin/tailwindcss/mocha.css"; 3 3 4 4 - /* 5 5 - The default border color has changed to `currentcolor` in Tailwind CSS v4, 6 6 - so we've added these compatibility styles to make sure everything still 7 7 - looks the same as it did with Tailwind CSS v3. 8 8 - 9 9 - If we ever want to remove these styles, we need to add an explicit border 10 10 - color utility to any element that depends on these defaults. 11 11 - */ 12 12 - @layer base { 13 13 - *, 14 14 - ::after, 15 15 - ::before, 16 16 - ::backdrop, 17 17 - ::file-selector-button { 18 18 - border-color: var(--color-gray-200, currentcolor); 19 19 - } 20 20 - } 21 21 - 22 4 body { 23 5 width: 450px; /* max: 1000px */ 24 6 @apply bg-ctp-base text-ctp-text text-base;

+1 -1

src/entrypoints/popup/components/Modal.svelte

reviewed

··· 15 15 onclick={(e) => { 16 16 if (e.target === dialog) dialog.close(); 17 17 }} 18 18 - class="bg-ctp-base text-ctp-text relative"> 18 18 + class="bg-ctp-base text-ctp-text relative m-auto"> 19 19 <!-- svelte-ignore a11y_autofocus --> 20 20 <button autofocus onclick={() => dialog?.close()} class="small bg-ctp-surface1 absolute top-0 right-0 m-2" 21 21 ><X /></button>

+6 -9

src/entrypoints/popup/components/inputs/IconBtn.svelte

reviewed

··· 8 8 color?: string; 9 9 } 10 10 11 11 - let { 12 12 - title, 13 13 - id, 14 14 - onClick, 15 15 - icon, 16 16 - label = "", 17 17 - color = "accent" 18 18 - }: Props = $props(); 11 11 + let { title, id, onClick, icon, label = "" }: Props = $props(); 19 12 </script> 20 13 21 21 - <button {title} {id} class="flex items-center mx-2 small hover:text-ctp-crust hover:bg-ctp-{color}" onclick={onClick}> 14 14 + <button 15 15 + {title} 16 16 + {id} 17 17 + class="flex items-center mx-2 small hover:text-ctp-crust hover:bg-(--ctp-accent)" 18 18 + onclick={onClick}> 22 19 {#if icon} 23 20 {@const SvelteComponent = icon} 24 21 <SvelteComponent />