flo-bit.dev / ui-kit
[READ-ONLY] Mirror of https://github.com/flo-bit/ui-kit. 🦊 fox ui, svelte 5 and tailwind 4 flo-bit.dev/ui-kit/
svelte tailwindcss ui-components
0
Fork 0

Configure Feed

Select the types of activity you want to include in your feed.

switch background color

Florian (Feb 23, 2026, 2:53 AM +0100) 80c342db 08b89be2

+3 -43
+1 -1
apps/docs/src/app.html
··· 14 14 </head> 15 15 <body 16 16 data-sveltekit-preload-data="hover" 17 - class="bg-base-100 dark:bg-base-950 overflow-x-hidden motion-safe:transition-colors" 17 + class="bg-base-100 dark:bg-base-900 overflow-x-hidden motion-safe:transition-colors" 18 18 > 19 19 <div style="display: contents">%sveltekit.body%</div> 20 20 </body>
+1 -1
apps/docs/src/lib/site-components/Cards.svelte
··· 15 15 class="group relative flex flex-col items-start gap-3 transition-opacity duration-150 md:gap-4" 16 16 > 17 17 <div 18 - class="bg-base-50 dark:bg-base-900/50 shadow-lg backdrop-blur-xl shadow-base-900/10 inset-shadow-sm inset-shadow-base-800/5 dark:inset-shadow-base-400/5 border-base-200 dark:border-base-900 pointer-events-none relative h-44 w-full overflow-hidden rounded-2xl border" 18 + class="bg-base-50 dark:bg-base-950/50 shadow-lg backdrop-blur-xl shadow-base-900/10 inset-shadow-sm inset-shadow-base-800/5 dark:inset-shadow-black/50 border-base-200 dark:border-base-800 pointer-events-none relative h-44 w-full overflow-hidden rounded-2xl border" 19 19 > 20 20 <div 21 21 class={cn(
+1 -41
packages/core/src/lib/components/navbar/Navbar.svelte
··· 13 13 14 14 <div 15 15 class={cn( 16 - 'header fixed top-1 right-0 mx-1 left-0 z-50 flex h-16 items-center justify-between p-2 shadow-lg rounded-2xl border border-base-400/30 dark:border-base-300/10 overflow-hidden', 16 + 'border-base-400/30 dark:border-base-300/10 dark:bg-base-950/70 fixed top-1 right-0 left-0 z-50 mx-1 flex h-16 items-center justify-between overflow-hidden rounded-2xl border p-2 shadow-lg inset-shadow-black/50 backdrop-blur-lg dark:shadow-none dark:inset-shadow-sm', 17 17 hasSidebar ? 'lg:left-74' : '', 18 18 className 19 19 )} 20 20 {...restProps} 21 21 > 22 22 {@render children?.()} 23 - <div 24 - class="backdrop from-base-100/50 via-base-50/20 dark:from-base-900/30 dark:via-base-950/10 pointer-events-none absolute inset-0 -z-10 bg-linear-to-b backdrop-blur-md" 25 - ></div> 26 - 27 - <div 28 - class="backdrop-edge bg-base-900/10 dark:bg-base-500/10 pointer-events-none absolute right-0 bottom-0 left-0 -z-10 translate-y-full backdrop-blur-sm" 29 - ></div> 30 23 </div> 31 - 32 - <style> 33 - /** better frosted glass effect adopted from https://www.joshwcomeau.com/css/backdrop-filter/ */ 34 - .header { 35 - --thickness: 1px; 36 - } 37 - 38 - @supports (mask-image: none) or (-webkit-mask-image: none) { 39 - .backdrop { 40 - height: 200%; 41 - -webkit-mask-image: linear-gradient(to bottom, black 0% 50%, transparent 50% 100%); 42 - mask-image: linear-gradient(to bottom, black 0% 50%, transparent 50% 100%); 43 - } 44 - .backdrop-edge { 45 - height: 100%; 46 - inset: 0; 47 - -webkit-mask-image: linear-gradient( 48 - to bottom, 49 - black 0, 50 - black var(--thickness), 51 - transparent var(--thickness) 52 - ); 53 - mask-image: linear-gradient( 54 - to bottom, 55 - black 0, 56 - black var(--thickness), 57 - transparent var(--thickness) 58 - ); 59 - 60 - filter: brightness(1.5); 61 - } 62 - } 63 - </style>