fix light mode styling and remove transitions

This commit is contained in:
jerremyng 2026-01-10 06:44:01 +00:00
parent c4480690a3
commit 0070c1bd38
2 changed files with 33 additions and 23 deletions

View file

@ -73,28 +73,38 @@ select:focus[data-flux-control] {
@apply size-4;
} */
.tab-button {
@apply flex items-center gap-2 px-4 py-2 text-sm font-medium transition-all;
@apply rounded-t-lg border-t border-x border-transparent;
@layer components {
/* standard container for app */
.styled-container,
.tab-button {
@apply rounded-xl border bg-white dark:bg-stone-950 dark:border-zinc-700 text-stone-800 shadow-xs;
}
/* This makes the button sit slightly over the box border */
margin-bottom: -1px;
position: relative;
z-index: 1;
}
.tab-button {
@apply flex items-center gap-2 px-4 py-2 text-sm font-medium;
@apply rounded-b-none shadow-none bg-inherit;
.tab-button.is-active {
@apply text-white border-zinc-700;
/* Z-index 10 ensures the bottom border of the tab hides the top border of the box */
z-index: 10;
border-bottom: 1px solid theme('colors.zinc.800');
}
/* This makes the button sit slightly over the box border */
margin-bottom: -1px;
position: relative;
z-index: 1;
}
.tab-button:not(.is-active) {
@apply text-zinc-500;
}
.tab-button.is-active {
@apply text-zinc-700 dark:text-zinc-300;
@apply border-b-white dark:border-b-zinc-800;
.tab-button:not(.is-active):hover {
@apply bg-zinc-700/50 text-zinc-300 border-zinc-700/50;
cursor: pointer;
/* Z-index 10 ensures the bottom border of the tab hides the top border of the box */
z-index: 10;
}
.tab-button:not(.is-active) {
@apply text-zinc-500 border-transparent;
}
.tab-button:not(.is-active):hover {
@apply text-zinc-700 dark:text-zinc-300;
@apply border-zinc-300 dark:border-zinc-700;
cursor: pointer;
}
}