v5.0.9 — Surveillance timeout session EasyVista (compteur tick 1s, alertes 5min/2min)

2026-04-21 15:19:06 +02:00
parent 9d701701e6
commit e17f604d9e
5 changed files with 571 additions and 20 deletions
@@ -2217,3 +2217,122 @@ header.topbar::before {
  font-size: 13px;
  cursor: pointer;
 }
+
+/* ==========================================================================
+   v5.0.9 : Compteur de session EasyVista (topbar)
+   ========================================================================== */
+
+.app-session {
+  position: absolute;
+  top: 50%;
+  left: calc(50% + 60px);  /* à droite de l'horloge (~60px de décalage) */
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 10px;
+  border-radius: 14px;
+  font-size: 13px;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+  z-index: 9;
+  background: rgba(0, 0, 0, 0.05);
+  transition: background 0.3s, color 0.3s;
+}
+.app-session.hidden {
+  display: none;
+}
+.app-session .session-icon {
+  font-size: 14px;
+}
+.app-session .session-time {
+  font-weight: 600;
+}
+.app-session .session-extend-btn {
+  margin-left: 4px;
+  padding: 3px 8px;
+  font-size: 11px;
+  border-radius: 10px;
+  border: 1px solid currentColor;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  font-weight: 500;
+  transition: background 0.2s;
+}
+.app-session .session-extend-btn:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+.app-session .session-extend-btn:disabled {
+  opacity: 0.6;
+  cursor: default;
+}
+
+/* État warning (2-5 min) : jaune */
+.app-session.session-warn {
+  background: #f5c518;
+  color: #2a2100;
+}
+.app-session.session-warn .session-extend-btn {
+  border-color: #2a2100;
+}
+
+/* État critical (< 2 min) : rouge + pulse */
+.app-session.session-critical {
+  background: #e74c3c;
+  color: #fff;
+  animation: session-pulse 1s infinite;
+}
+.app-session.session-critical .session-extend-btn {
+  border-color: #fff;
+  background: rgba(255, 255, 255, 0.15);
+  font-weight: 600;
+}
+.app-session.session-critical .session-extend-btn:hover {
+  background: rgba(255, 255, 255, 0.3);
+}
+@keyframes session-pulse {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.5); }
+  50%      { box-shadow: 0 0 0 6px rgba(231, 76, 60, 0); }
+}
+
+/* Bouton "Me reconnecter" dans la bannière session expirée */
+.session-expired-reconnect-btn {
+  margin-left: 12px;
+  padding: 6px 14px;
+  border-radius: 4px;
+  background: #fff;
+  color: #c0392b;
+  border: none;
+  font-weight: 600;
+  cursor: pointer;
+  font-size: 13px;
+  transition: background 0.2s;
+}
+.session-expired-reconnect-btn:hover {
+  background: #f8d7da;
+}
+
+/* Bannière "Reconnexion en cours" */
+.banner-reconnecting {
+  background: #3498db;
+  color: #fff;
+  padding: 10px 20px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 14px;
+  font-weight: 500;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+.banner-reconnecting.hidden {
+  display: none;
+}
+.banner-reconnecting .banner-spinner {
+  font-size: 16px;
+  animation: spin-slow 2s linear infinite;
+}
+@keyframes spin-slow {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}