fix: sidebar should follow same overall opcity

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

View file

@ -33,6 +33,22 @@
}
@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 {
position: relative;
display: block;

View file

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