diff --git a/android-client/web/app.html b/android-client/web/app.html index 8e23f73..c5dd0dd 100644 --- a/android-client/web/app.html +++ b/android-client/web/app.html @@ -31,8 +31,15 @@ } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { - margin: 0; height: 100%; overflow: hidden; - background: linear-gradient(var(--bg-top), var(--bg-bot)) fixed; + /* CLOUE AU CADRE. overflow:hidden ne suffit pas dans un WebView Android : + un glissement qui ne trouve rien a faire defiler fait quand meme + glisser le document entier, et on voit alors le degrade du corps passer + sous celui de l'ecran - deux degrades empiles, sans le moindre contenu. + position:fixed lui retire cette liberte. */ + position: fixed; inset: 0; + margin: 0; overflow: hidden; + overscroll-behavior: none; + background: var(--bg-bot); color: var(--text); font: 15px/1.4 system-ui, "Roboto", sans-serif; /* Le texte de l'interface ne se selectionne pas - un appui maintenu sur @@ -56,7 +63,7 @@ body.on-detail #detail { transform: translateX(0); } .scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; - padding: 0 12px 16px; } + overscroll-behavior: contain; padding: 0 12px 16px; } /* --- barre de recherche ------------------------------------------------ */ .top { padding: 10px 12px 6px; display: flex; gap: 8px; } @@ -74,6 +81,7 @@ color: var(--muted); font-size: 17px; } .glass { left: 2px; } + .glass svg { width: 19px; height: 19px; } .clear { right: 2px; display: none; font-size: 20px; } body.searching .glass { display: none; } body.searching .clear { display: flex; } @@ -122,6 +130,18 @@ .empty { text-align: center; color: var(--muted); padding: 48px 16px; } + /* --- boutons a icone ---------------------------------------------------- */ + /* Une icone seule ne dit ce qu'elle fait que si elle est archi-connue. Le + cadenas l'est ; c'est pourquoi il est le seul a se passer d'intitule. */ + .ico { + flex: 0 0 46px; width: 46px; height: 46px; border: 0; padding: 0; + border-radius: var(--radius-s); background: rgba(255,255,255,.10); + color: var(--text); display: flex; align-items: center; + justify-content: center; + } + .ico:active { opacity: .62; } + .ico svg { width: 21px; height: 21px; } + /* --- detail ------------------------------------------------------------ */ .head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; } .head h1 { flex: 1; margin: 0; font-size: 19px; font-weight: 600; @@ -156,11 +176,24 @@