starred/sky_phone
1
0
Fork 0
mirror of https://github.com/sky-systems/sky_phone.git synced 2026-08-29 01:08:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

FIX - give Control Center an opaque backdrop

Browse Source 
Replace the scene-dependent background with a stable layered material and keep the control panel above it. Performance mode now uses the same readable fallback without relying on blur.
This commit is contained in:
Leon.Schmidt
2026-08-15 20:04:34 +02:00
parent 47778c70e6
commit f6fb680fbd
2 changed files with 18 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/assets/main.css
+3 -1
View File
@@ -446,7 +446,9 @@ button {
box-shadow: none;
}
.phone-app--performance .control-center__backdrop {
background: rgb(20 20 24 / 92%);
background:
radial-gradient(circle at 16% 12%, rgb(77 96 135 / 20%), transparent 46%),
linear-gradient(180deg, #191b23 0%, #11131a 100%) !important;
}
.phone-app--performance .app-dock {
background-color: rgb(38 38 46 / 92%);
frontend/src/components/PhoneControlCenter.vue
+15 -4
View File
@@ -573,18 +573,29 @@ onBeforeUnmount(() => {
.control-center__backdrop {
position: absolute;
z-index: -1;
z-index: 0;
inset: 0;
width: 100%;
height: 100%;
border: 0;
background: rgba(20, 20, 24, 0.34);
backdrop-filter: blur(25px) saturate(1.45);
-webkit-backdrop-filter: blur(25px) saturate(1.45);
background:
radial-gradient(circle at 16% 12%, rgb(77 96 135 / 24%), transparent 46%),
linear-gradient(180deg, #191b23 0%, #11131a 100%);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.control-center__backdrop {
background:
radial-gradient(circle at 16% 12%, rgb(77 96 135 / 14%), transparent 46%),
linear-gradient(180deg, rgb(20 22 29 / 72%) 0%, rgb(13 15 21 / 86%) 100%);
backdrop-filter: blur(32px) brightness(0.76) saturate(0.82);
-webkit-backdrop-filter: blur(32px) brightness(0.76) saturate(0.82);
}
}
.control-center__panel {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 12px;