danvics/ytptube
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

fix: sidebar should follow same overall opcity

Browse source
This commit is contained in:
arabcoders 2026-04-24 20:22:30 +03:00
parent 3c1567930f
commit 31786ad8d9
2 changed files with 35 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
ui/app/assets/css/tailwind.css
View file

@ -33,6 +33,22 @@
} }
@layer components { @layer components {
.shell-surface {
background:
radial-gradient(circle at top left, rgb(99 102 241 / 0.1), transparent 28%),
radial-gradient(circle at top right, rgb(245 158 11 / 0.08), transparent 22%),
linear-gradient(180deg, rgb(255 255 255 / 0.84), rgb(248 250 252 / 0.9));
backdrop-filter: blur(16px);
}
.dark .shell-surface {
background:
radial-gradient(circle at top left, rgb(99 102 241 / 0.12), transparent 26%),
radial-gradient(circle at top right, rgb(245 158 11 / 0.07), transparent 20%),
linear-gradient(180deg, rgb(9 12 18 / 0.84), rgb(17 24 39 / 0.9));
backdrop-filter: blur(16px);
}
.play-overlay { .play-overlay {
position: relative; position: relative;
display: block; display: block;

27
ui/app/layouts/default.vue
View file

@ -39,7 +39,7 @@
<Simple @show_settings="show_settings = true" /> <Simple @show_settings="show_settings = true" />
</div> </div>
<div v-else key="regular" class="shell-stage flex flex-col"> <div v-else key="regular" class="shell-stage shell-surface flex flex-col">
<Shutdown v-if="app_shutdown" /> <Shutdown v-if="app_shutdown" />
<div id="main_container" class="shell-root flex flex-col" v-else> <div id="main_container" class="shell-root flex flex-col" v-else>
@ -183,13 +183,14 @@
color="neutral" color="neutral"
variant="ghost" variant="ghost"
size="sm" size="sm"
icon="i-lucide-refresh-cw" icon="i-lucide-search"
@click="$router.go(0)" aria-label="Search routes and actions"
> title="Search routes and actions"
<span class="hidden xl:inline">Reload</span> class="shrink-0 lg:hidden"
</UButton> @click="showRouteSearch = true"
/>
<UDashboardSearchButton class="shrink-0" /> <UDashboardSearchButton class="hidden shrink-0 lg:inline-flex" />
<UButton <UButton
color="neutral" color="neutral"
@ -203,6 +204,16 @@
<span class="hidden xl:inline">{{ colorModeButtonTitle }}</span> <span class="hidden xl:inline">{{ colorModeButtonTitle }}</span>
</UButton> </UButton>
<UButton
color="neutral"
variant="ghost"
size="sm"
icon="i-lucide-refresh-cw"
@click="$router.go(0)"
>
<span class="hidden xl:inline">Reload</span>
</UButton>
<UButton <UButton
color="neutral" color="neutral"
variant="ghost" variant="ghost"
@ -706,7 +717,7 @@ const handleSwipeCancel = (): void => {
}; };
const dashboardSidebarUi = { const dashboardSidebarUi = {
root: 'border-r border-default bg-default/95 backdrop-blur-sm', root: 'shell-surface border-r border-default bg-default/95 backdrop-blur-sm',
header: 'border-b border-default px-2.5 py-3', header: 'border-b border-default px-2.5 py-3',
body: 'gap-3 px-2.5 py-3', body: 'gap-3 px-2.5 py-3',
footer: 'border-t border-default px-2.5 py-3', footer: 'border-t border-default px-2.5 py-3',