mkrieger/byos_laravel
1
0
Fork 0
mirror of https://github.com/usetrmnl/byos_laravel.git synced 2026-01-13 15:07:49 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

fix light mode styling and remove transitions

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

50
resources/css/app.css
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;
}
}

6
resources/views/livewire/plugins/recipe.blade.php
View file

@ -766,8 +766,8 @@ HTML;
</button>
</div>
<div class="flex-col p-4 border border-zinc-700 rounded-b-xl rounded-tr-xl shadow-2xl">
<div x-show="subTab === 'settings'" x-transition:enter.opacity.duration.150ms>
<div class="flex-col p-4 bg-transparent rounded-tl-none styled-container">
<div x-show="subTab === 'settings'">
<flux:field>
<flux:description>Enter the URL(s) to poll for data:</flux:description>
<flux:textarea
@ -781,7 +781,7 @@ HTML;
</flux:field>
</div>
<div x-show="subTab === 'preview'" x-cloak x-transition:enter.opacity.duration.150ms>
<div x-show="subTab === 'preview'" x-cloak>
<flux:field>
<flux:description>Preview computed URLs here (readonly):</flux:description>
<flux:textarea