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

ENH - add swipe-to-clear lock-screen notifications

Browse Source
This commit is contained in:
DerEchteAlec
2026-08-13 03:10:40 +02:00
parent 0c702b4c6c
commit a98b3b0c98
4 changed files with 317 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/assets/main.css
+51 -18
View File
@@ -734,17 +734,65 @@ button {
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
.lock-screen__notification-row {
position: relative;
overflow: hidden;
min-height: 76px;
border-radius: 18px;
background: transparent;
isolation: isolate;
}
.lock-screen__notification-clear {
position: absolute;
z-index: 0;
top: 0;
right: 0;
bottom: 0;
display: flex;
width: 76px;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
border: 0;
padding: 0;
color: #fff;
background: #ff3b30;
font-size: 10px;
font-weight: 650;
cursor: pointer;
opacity: 0;
transition: opacity 0.12s ease-out;
}
.lock-screen__notification-row.is-action-visible {
background: #ff3b30;
}
.lock-screen__notification-row.is-action-visible
.lock-screen__notification-clear {
opacity: 1;
}
.lock-screen__notification {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 42px minmax(0, 1fr);
gap: 10px;
min-height: 72px;
width: 100%;
min-height: 76px;
border-radius: 18px;
padding: 11px 38px 11px 11px;
padding: 11px;
color: #fff;
background-color: rgb(28 28 32 / 72%);
background-color: rgb(38 36 40 / 76%);
text-shadow: 0 1px 3px #0009;
touch-action: pan-y;
transform: translate3d(var(--notification-swipe), 0, 0);
transition: transform 0.28s cubic-bezier(0.22, 0.78, 0.24, 1);
will-change: transform;
backdrop-filter: blur(22px) saturate(1.18);
-webkit-backdrop-filter: blur(22px) saturate(1.18);
}
.lock-screen__notification-row.is-swiping .lock-screen__notification {
transition: none;
}
.phone-notification.is-actionable {
cursor: pointer;
@@ -800,21 +848,6 @@ button {
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.lock-screen__notification-close {
position: absolute;
top: 8px;
right: 8px;
display: grid;
width: 24px;
height: 24px;
place-items: center;
border: 0;
border-radius: 50%;
padding: 0;
color: #fff;
background: #0007;
cursor: pointer;
}
.lock-screen__footer {
position: absolute;
z-index: 3;