[UX] FAB feedback: pill cyan con label, animazione pulse, stile lg231

This commit is contained in:
DevEnv nis2-agile 2026-03-10 11:27:19 +01:00
parent 397d6a88d2
commit 4143dd31d3
2 changed files with 27 additions and 17 deletions

View File

@ -1972,34 +1972,44 @@ tbody tr.clickable:active {
Sistema Segnalazioni & Risoluzione AI (feedback.js)
*/
/* FAB */
/* FAB — Segnalazioni & Bug Report */
@keyframes fab-pulse {
0% { box-shadow: 0 0 0 0 rgba(6,182,212,.55), 0 4px 16px rgba(6,182,212,.35); }
70% { box-shadow: 0 0 0 10px rgba(6,182,212,0), 0 4px 16px rgba(6,182,212,.35); }
100% { box-shadow: 0 0 0 0 rgba(6,182,212,0), 0 4px 16px rgba(6,182,212,.35); }
}
#feedback-fab {
position: fixed;
bottom: 28px;
right: 28px;
z-index: 8000;
width: 52px;
height: 52px;
border-radius: 50%;
background: #ef4444;
display: flex;
align-items: center;
gap: 8px;
padding: 0 18px 0 14px;
height: 48px;
border-radius: 24px;
background: #06B6D4;
color: #fff;
border: none;
cursor: pointer;
box-shadow: 0 4px 16px rgba(239,68,68,.4);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
font-size: .85rem;
font-weight: 700;
font-family: inherit;
letter-spacing: .02em;
white-space: nowrap;
box-shadow: 0 4px 16px rgba(6,182,212,.35);
animation: fab-pulse 2.5s ease-in-out infinite;
transition: background .2s, transform .15s, box-shadow .2s;
}
#feedback-fab i { font-size: 1rem; }
#feedback-fab:hover {
background: #dc2626;
transform: scale(1.08);
box-shadow: 0 6px 20px rgba(239,68,68,.5);
}
#feedback-fab:active {
transform: scale(.96);
background: #0891b2;
transform: scale(1.05);
animation: none;
box-shadow: 0 6px 22px rgba(6,182,212,.55);
}
#feedback-fab:active { transform: scale(.97); }
/* Overlay */
.feedback-overlay {

View File

@ -67,7 +67,7 @@
fab.id = 'feedback-fab';
fab.type = 'button';
fab.title = 'Segnala un problema o suggerisci un miglioramento';
fab.innerHTML = '<i class="fas fa-comment-alt"></i>';
fab.innerHTML = '<i class="fas fa-comment-medical"></i><span>Segnala / Feedback</span>';
fab.setAttribute('aria-label', 'Segnala problema');
document.body.appendChild(fab);
}