starred/sky_phone
1
0
Fork 0
mirror of https://github.com/sky-systems/sky_phone.git synced 2026-09-04 17:23:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

ADD - Graphics modes and new phone frames

Browse Source 
Introduces Graphics Mode settings to toggle between "Performance" (blur-free) and "Ultimate" (full effects) to optimize CEF rendering. Expands device customization with ten new phone frames, standardizes 24-hour time formatting across all apps, and updates the build target to Chrome 103 for better compatibility.
This commit is contained in:
Alec Schitzkat
2026-08-09 05:30:11 +02:00
parent 1ee14ad4ce
commit 7cdfac3285
37 changed files with 400 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/assets/main.css
+88 -6
View File
@@ -324,6 +324,81 @@ button {
.phone-app--light {
color-scheme: light;
}
/* FiveM CEF blur-free glass fallback. Ultimate keeps the native effects. */
.phone-app--performance {
--phone-performance-glass: rgb(28 28 31 / 96%);
}
.phone-app--performance.phone-app--light {
--phone-performance-glass: rgb(245 245 248 / 97%);
}
.phone-device.phone-app--performance {
filter: none;
}
.phone-app--performance,
.phone-app--performance *,
.phone-app--performance *::before,
.phone-app--performance *::after {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.phone-app--performance .k-glass {
background-color: var(--phone-performance-glass) !important;
}
.phone-app--performance .control-center__backdrop {
background: rgb(20 20 24 / 92%);
}
.phone-app--performance .app-dock {
background-color: rgb(38 38 46 / 92%);
}
.phone-app--performance .widget {
background-color: rgb(21 24 34 / 95%);
}
.phone-app--performance .app-library-search,
.phone-app--performance .app-search,
.phone-app--performance .app-library-group__icons {
background-color: rgb(18 18 25 / 92%);
}
.phone-app--performance .app-library-all {
background-color: rgb(9 9 16 / 97%);
}
.phone-screen--app .phone-app--performance .springboard,
.phone-app--performance .lock-screen__time,
.phone-app--performance .lock-screen-leave-to,
.phone-app--performance .minesweeper-marker-drop__trail,
.phone-app--performance .flappy-clouds i::after {
filter: none !important;
}
.phone-app--performance .springboard {
transition-property: transform !important;
}
.phone-app--performance .lock-screen {
will-change: transform, opacity;
}
.phone-app--performance .lock-screen-leave-active {
transition-property: transform, opacity !important;
}
.phone-app--performance .sim-picker__glow,
.phone-app--performance .banking-app__aurora {
display: none;
}
/* Chromium 103 cannot resolve color-mix() when the mixed color is a variable. */
@supports not (color: color-mix(in srgb, white, black)) {
.flappy-menu__tower,
.flappy-obstacle span {
background: var(--tower);
}
.flappy-menu__tower::after {
border: 3px solid var(--tower);
background: var(--tower);
}
.flappy-obstacle span::after {
background: var(--tower);
}
}
.phone-display-dimmer {
position: absolute;
z-index: 99;
@@ -369,7 +444,7 @@ button {
color: #fff;
display: flex;
justify-content: space-between;
align-items: flex-start;
align-items: center;
font-size: 17px;
font-weight: 600;
line-height: 20px;
@@ -377,6 +452,12 @@ button {
text-shadow: 0 1px 3px #0009;
pointer-events: none;
}
.phone-status-bar__time {
position: absolute;
left: 0;
width: calc(50% - 70px);
text-align: center;
}
.phone-status-bar__indicators {
position: absolute;
top: 0;
@@ -483,13 +564,13 @@ button {
.lock-screen__status {
position: absolute;
z-index: 1;
top: 11px;
right: 26px;
left: 26px;
top: 17px;
right: 30px;
left: 30px;
display: flex;
align-items: center;
justify-content: flex-end;
min-height: 18px;
min-height: 26px;
filter: drop-shadow(0 1px 2px #0009);
}
.lock-screen__lock {
@@ -505,7 +586,7 @@ button {
right: 0;
display: flex;
align-items: center;
gap: 3px;
gap: 6px;
}
.lock-screen__content {
position: relative;
@@ -5987,6 +6068,7 @@ button {
}
.messages-inbox-page .messages-conversation:active,
.messages-inbox-page .messages-conversation--selected {
background: var(--messages-inbox-control);
background: color-mix(
in srgb,
var(--messages-inbox-control) 86%,