rickub
judu/ex-egopublic Fork
⑂ 15fbb33
Branches
main
Tags
v0.3.1 v0.3.2 v0.4.0 v0.5.0 v0.5.1 View all branches → View all tags →
Commits
⬇ Clone ▾
git clone https://git.rickub.com/judu/ex-ego.git
git clone ssh://git@rickub.com/judu/ex-ego.git

Host key fingerprint (ed25519): SHA256:iycHnxEyq0Q7uyVpB7JlznP0G7JrTPXLYRcAU5CSLhc — verify it before your first connect.

Download ZIP

feat(toast): affiché en haut de l'écran et disparition en fondu après 5 sUnverified

Julien Durillon committed 2026-08-08T08:12:44+02:00 Browse files
15fbb33 parent: 4328d27
modified assets/style.css +14 -6
@@ -356,7 +356,7 @@ input[type=number] { -moz-appearance: textfield; appearance: textfield; }
356356 position: relative; width: 100%; max-width: 430px; background: var(--color-bg);
357357 border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg);
358358 padding: var(--space-6) var(--space-4) var(--space-8); box-shadow: var(--shadow-lg);
359- animation: tt-rise .18s ease-out;
359+ animation: tt-rise-sheet .18s ease-out;
360360 }
361361 .sheet-head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); }
362362 .sheet-head .pname { font-family: var(--font-heading); font-size: 20px; }
@@ -397,16 +397,24 @@ input[type=number] { -moz-appearance: textfield; appearance: textfield; }
397397 }
398398
399399 /* — toast — */
400+/* En haut : le bas de l'écran est déjà occupé par la pill timer et la tab bar. */
400401 .toast {
401- position: fixed; bottom: 96px; left: 50%; transform: translateX(-50%);
402+ position: fixed; top: calc(var(--space-4) + env(safe-area-inset-top, 0px));
403+ left: 50%; transform: translateX(-50%);
402404 width: calc(100% - 2 * var(--space-4)); max-width: calc(430px - 2 * var(--space-4));
403405 background: var(--color-neutral-900); color: var(--color-neutral-100);
404406 padding: var(--space-3) var(--space-4); border-radius: 999px;
405407 font-size: 14px; text-align: center; box-shadow: var(--shadow-md);
406- animation: tt-rise .18s ease-out; z-index: 5;
408+ /* Apparition, puis fondu automatique après 5 s — zéro JS. */
409+ animation: tt-drop .18s ease-out, tt-fade .4s ease-in 5s forwards; z-index: 5;
407410 }
408411
409-@keyframes tt-rise { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
410-.sheet { animation-name: tt-rise-sheet; }
412+@keyframes tt-drop { from { opacity: 0; transform: translate(-50%, -10px); } to { opacity: 1; transform: translate(-50%, 0); } }
413+@keyframes tt-fade { to { opacity: 0; visibility: hidden; } }
411414 @keyframes tt-rise-sheet { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
412-@media (prefers-reduced-motion: reduce) { .sheet, .toast { animation: none; } }
415+/* Motion réduit : pas de glissements, mais le toast doit quand même
416+ disparaître — on ne garde que le fondu différé. */
417+@media (prefers-reduced-motion: reduce) {
418+ .sheet { animation: none; }
419+ .toast { animation: tt-fade .4s ease-in 5s forwards; }
420+}
@@ -356,7 +356,7 @@ input[type=number] { -moz-appearance: textfield; appearance: textfield; }
356 position: relative; width: 100%; max-width: 430px; background: var(--color-bg);356 position: relative; width: 100%; max-width: 430px; background: var(--color-bg);
357 border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg);357 border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg);
358 padding: var(--space-6) var(--space-4) var(--space-8); box-shadow: var(--shadow-lg);358 padding: var(--space-6) var(--space-4) var(--space-8); box-shadow: var(--shadow-lg);
359- animation: tt-rise .18s ease-out;359+ animation: tt-rise-sheet .18s ease-out;
360 }360 }
361 .sheet-head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); }361 .sheet-head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); }
362 .sheet-head .pname { font-family: var(--font-heading); font-size: 20px; }362 .sheet-head .pname { font-family: var(--font-heading); font-size: 20px; }
@@ -397,16 +397,24 @@ input[type=number] { -moz-appearance: textfield; appearance: textfield; }
397 }397 }
398 398
399 /* — toast — */399 /* — toast — */
400+/* En haut : le bas de l'écran est déjà occupé par la pill timer et la tab bar. */
400 .toast {401 .toast {
401- position: fixed; bottom: 96px; left: 50%; transform: translateX(-50%);402+ position: fixed; top: calc(var(--space-4) + env(safe-area-inset-top, 0px));
403+ left: 50%; transform: translateX(-50%);
402 width: calc(100% - 2 * var(--space-4)); max-width: calc(430px - 2 * var(--space-4));404 width: calc(100% - 2 * var(--space-4)); max-width: calc(430px - 2 * var(--space-4));
403 background: var(--color-neutral-900); color: var(--color-neutral-100);405 background: var(--color-neutral-900); color: var(--color-neutral-100);
404 padding: var(--space-3) var(--space-4); border-radius: 999px;406 padding: var(--space-3) var(--space-4); border-radius: 999px;
405 font-size: 14px; text-align: center; box-shadow: var(--shadow-md);407 font-size: 14px; text-align: center; box-shadow: var(--shadow-md);
406- animation: tt-rise .18s ease-out; z-index: 5;408+ /* Apparition, puis fondu automatique après 5 s — zéro JS. */
409+ animation: tt-drop .18s ease-out, tt-fade .4s ease-in 5s forwards; z-index: 5;
407 }410 }
408 411
409-@keyframes tt-rise { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }412+@keyframes tt-drop { from { opacity: 0; transform: translate(-50%, -10px); } to { opacity: 1; transform: translate(-50%, 0); } }
410-.sheet { animation-name: tt-rise-sheet; }413+@keyframes tt-fade { to { opacity: 0; visibility: hidden; } }
411 @keyframes tt-rise-sheet { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }414 @keyframes tt-rise-sheet { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
412-@media (prefers-reduced-motion: reduce) { .sheet, .toast { animation: none; } }415+/* Motion réduit : pas de glissements, mais le toast doit quand même
416+ disparaître — on ne garde que le fondu différé. */
417+@media (prefers-reduced-motion: reduce) {
418+ .sheet { animation: none; }
419+ .toast { animation: tt-fade .4s ease-in 5s forwards; }
420+}