style: fix light mode gradients

This commit is contained in:
SethBurkart123
2025-05-05 23:00:56 +10:00
parent 364a5c2f22
commit 79ed998edf
2 changed files with 6 additions and 2 deletions
+5 -1
View File
@@ -30,7 +30,7 @@
</script> </script>
<div <div
class="flex w-14 p-1 cursor-pointer transition-all duration-150 rounded-full bg-gradient-to-tr dark:from-[#38373D]/50 dark:to-[#38373D] from-[#DDDDDD]/50 to-[#DDDDDD] switch select-none" class="flex w-14 p-1 cursor-pointer transition-all duration-150 rounded-full bg-gradient-to-tr dark:from-[#38373D]/50 dark:to-[#38373D] to-[#DDDDDD]/50 from-[#DDDDDD] switch select-none"
data-ison={state} data-ison={state}
onclick={() => onChange(!state)} onclick={() => onChange(!state)}
onkeydown={(e) => e.key === "Enter" && onChange(!state)} onkeydown={(e) => e.key === "Enter" && onChange(!state)}
@@ -46,6 +46,10 @@
<style> <style>
.switch[data-ison="true"] { .switch[data-ison="true"] {
@apply to-[#30D259]/80 from-[#30D259];
}
.dark .switch[data-ison="true"] {
@apply from-[#30D259]/50 to-[#30D259]; @apply from-[#30D259]/50 to-[#30D259];
} }
</style> </style>
@@ -67,7 +67,7 @@
{#each tabs as { Content, props }, index} {#each tabs as { Content, props }, index}
<div class="absolute focus:outline-none w-full pt-2 transition-opacity duration-300 overflow-y-scroll no-scrollbar pb-2 h-full tab {activeTab === index ? 'opacity-100 active' : 'opacity-0'}" <div class="absolute focus:outline-none w-full pt-2 transition-opacity duration-300 overflow-y-scroll no-scrollbar pb-2 h-full tab {activeTab === index ? 'opacity-100 active' : 'opacity-0'}"
style="left: {index * 100}%;"> style="left: {index * 100}%;">
<div style="left: {index * 100}%;" class="fixed top-0 w-full h-8 bg-gradient-to-b to-transparent pointer-events-none z-[100] from-zinc-200 dark:from-zinc-800 dark:to-transparent"></div> <div style="left: {index * 100}%;" class="fixed top-0 w-full h-8 bg-gradient-to-b to-transparent pointer-events-none z-[100] from-white dark:from-zinc-800 dark:to-transparent"></div>
<Content {...props} /> <Content {...props} />
</div> </div>
{/each} {/each}