mtd/AstralRinth
1
0
Fork 0
forked from didirus/AstralRinth
Code Pull Requests Activity

Make major box shadows toggleable with Advanced rendering setting (#4712)

Browse Source 
* Update App.vue

* Update App.vue

* tone down light mode shadows, disable with advanced rendering disabled

---------

Co-authored-by: Calum H. <contact@cal.engineer>
Co-authored-by: Prospector <6166773+Prospector@users.noreply.github.com>
This commit is contained in:
Airyzz
2025-11-08 03:05:55 +10:30
committed by GitHub
parent 4289f8b52d
commit 67fb825937
1 changed files with 24 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
apps/app-frontend/src/App.vue
View File

@@ -686,7 +686,11 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
<template> <template>
<SplashScreen v-if="!stateFailed" ref="splashScreen" data-tauri-drag-region /> <SplashScreen v-if="!stateFailed" ref="splashScreen" data-tauri-drag-region />
<div id="teleports"></div> <div id="teleports"></div>
<div v-if="stateInitialized" class="app-grid-layout experimental-styles-within relative"> <div
v-if="stateInitialized"
class="app-grid-layout experimental-styles-within relative"
:class="{ 'disable-advanced-rendering': !themeStore.advancedRendering }"
>
<Suspense> <Suspense>
<Transition name="toast"> <Transition name="toast">
<UpdateToast <UpdateToast
@@ -914,7 +918,10 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
<div <div
v-if="stateInitialized" v-if="stateInitialized"
class="app-contents experimental-styles-within" class="app-contents experimental-styles-within"
:class="{ 'sidebar-enabled': sidebarVisible }" :class="{
'sidebar-enabled': sidebarVisible,
'disable-advanced-rendering': !themeStore.advancedRendering,
}"
> >
<div class="app-viewport flex-grow router-view"> <div class="app-viewport flex-grow router-view">
<transition name="popup-survey"> <transition name="popup-survey">
@@ -1194,9 +1201,19 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
display: none; display: none;
} }
.disable-advanced-rendering {
.app-sidebar::before {
box-shadow: none;
}
&.app-contents::before {
box-shadow: none;
}
}
.app-sidebar::before { .app-sidebar::before {
content: ''; content: '';
box-shadow: -15px 0 15px -15px rgba(0, 0, 0, 0.2) inset; box-shadow: -15px 0 15px -15px rgba(0, 0, 0, 0.1) inset;
top: 0; top: 0;
bottom: 0; bottom: 0;
left: -2rem; left: -2rem;
@@ -1221,9 +1238,10 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
right: calc(-1 * var(--left-bar-width)); right: calc(-1 * var(--left-bar-width));
bottom: calc(-1 * var(--left-bar-width)); bottom: calc(-1 * var(--left-bar-width));
border-radius: var(--radius-xl); border-radius: var(--radius-xl);
box-shadow: box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.1) inset;
1px 1px 15px rgba(0, 0, 0, 0.2) inset, border-color: var(--surface-5);
inset 1px 1px 1px rgba(255, 255, 255, 0.23); border-width: 1px;
border-style: solid;
pointer-events: none; pointer-events: none;
} }