tfaour/espresso_frame
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases 12 Wiki Activity

Flatten page-level cards when installed as a standalone PWA
Build and push server image / test (push) Successful in 40s
Details
Build and push server image / build-and-push (push) Successful in 2m38s
Details
Build and push server image / deploy (push) Successful in 51s
Details

Browse Source 
The boxed-card look reads as "still a website" once the app is
running full-screen off the home screen. Scoped to
display-mode: standalone so the regular browser-tab view is
untouched; dialog-internal cards keep their box since they group
subsections of one form rather than acting as page furniture.
This commit is contained in:
tfaour
2026-07-28 02:40:58 +00:00
parent dd038f8e46
commit 5866c2f040
1 changed files with 30 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
server/app/static/theme.css
+30
View File
@@ -243,6 +243,36 @@ input[type="range"] {
}
.card + .card { margin-top: 20px; }
/* Installed as a standalone app, the boxed-card look reads as "still a
website" -- flatten page-level cards into the page background so it
feels native. Cards inside the widget dialog keep their box: they're
grouping subsections of one form, not top-level page furniture. */
@media (display-mode: standalone) {
.card {
background: transparent;
border: none;
border-radius: 0;
box-shadow: none;
padding: 20px 0;
}
.card + .card {
margin-top: 4px;
padding-top: 24px;
border-top: 1px solid var(--border);
}
#widget-dialog-body .card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 14px;
padding: 20px 22px 22px;
}
#widget-dialog-body .card + .card {
margin-top: 20px;
padding-top: 22px;
border-top: none;
}
}
label { display: block; margin-top: 16px; font-size: 13px; font-weight: 600; color: var(--text); }
label:first-child { margin-top: 0; }