openvibers/openvibe.tools Commits

Nothing spins on the tools: each spinner is a full ring that pulses out (#166)

OP OpenVibers committed 13 days ago · f6cbff3bae · 6 files, +16 −19

Changes

ddiff --git a/apps/audio/public/css/style.css b/apps/audio/public/css/style.css
iindex 74b0335..0e3df30 100644
---- a/apps/audio/public/css/style.css
++++ b/apps/audio/public/css/style.css
@@@ -359,13 +359,12 @@ a:hover { color: var(--accent-hover); }
  .spinner {
      width: 48px;
      height: 48px;
--    border: 4px solid var(--border);
--    border-top-color: var(--accent);
++    border: 4px solid var(--accent); --spin-c: var(--accent);
      border-radius: 50%;
--    animation: spin .8s linear infinite;
++    animation: spin 1.4s ease-out infinite;
      margin: 0 auto 16px;
  }
--@keyframes spin { to { transform: rotate(360deg); } }
++@keyframes spin { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--spin-c, var(--accent, #3b82f6)) 50%, transparent); } to { box-shadow: 0 0 0 10px transparent; } }   /* "spin" pulses out now: nothing spins (design lint, plan L45) */
  @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  
  /* ---------- Result Panel ---------- */
ddiff --git a/apps/docs/public/css/style.css b/apps/docs/public/css/style.css
iindex c3f9f98..0bd4509 100644
---- a/apps/docs/public/css/style.css
++++ b/apps/docs/public/css/style.css
@@@ -337,13 +337,12 @@ body {
  .spinner {
      width: 48px;
      height: 48px;
--    border: 4px solid var(--border);
--    border-top-color: var(--accent);
++    border: 4px solid var(--accent); --spin-c: var(--accent);
      border-radius: 50%;
--    animation: spin .8s linear infinite;
++    animation: spin 1.4s ease-out infinite;
      margin: 0 auto 16px;
  }
--@keyframes spin { to { transform: rotate(360deg); } }
++@keyframes spin { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--spin-c, var(--accent, #3b82f6)) 50%, transparent); } to { box-shadow: 0 0 0 10px transparent; } }   /* "spin" pulses out now: nothing spins (design lint, plan L45) */
  
  /* ── Result Panel ───────────────────────────────────────────── */
  .result-panel {
ddiff --git a/apps/food/public/css/style.css b/apps/food/public/css/style.css
iindex c48dfa1..69f4b5f 100644
---- a/apps/food/public/css/style.css
++++ b/apps/food/public/css/style.css
@@@ -209,10 +209,10 @@ body { min-height:100%; font-family:var(--font); background:var(--bg); color:var
  .leaflet-popup-content { font-family:var(--font) !important; font-size:12px !important; }
  
  /* Spinner */
--.spinner { width:24px; height:24px; border:3px solid var(--border); border-top-color:var(--green); border-radius:50%; animation:spin 0.8s linear infinite; margin:0 auto; }
++.spinner { width:24px; height:24px; border: 3px solid var(--green); --spin-c: var(--green); border-radius:50%; animation: spin 1.4s ease-out infinite; margin:0 auto; }
  .loading-state { text-align:center; padding:32px; }
  .loading-state p { font-size:12px; color:var(--text-muted); margin-top:8px; }
--@keyframes spin { to { transform:rotate(360deg); } }
++@keyframes spin { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--spin-c, var(--accent, #3b82f6)) 50%, transparent); } to { box-shadow: 0 0 0 10px transparent; } }   /* "spin" pulses out now: nothing spins (design lint, plan L45) */
  
  /* Footer */
  /* Data attribution line above the shared footer (OpenVibeFooter mounts on #ov-footer) */
ddiff --git a/apps/img/public/css/style.css b/apps/img/public/css/style.css
iindex 8b0e0e8..e239e43 100644
---- a/apps/img/public/css/style.css
++++ b/apps/img/public/css/style.css
@@@ -330,13 +330,13 @@ body {
  .spinner {
      width: 48px;
      height: 48px;
--    border: 4px solid var(--border);
++    border: 4px solid var(--accent); --spin-c: var(--accent);
      border-top: 4px solid var(--accent);
      border-radius: 50%;
      margin: 0 auto 16px;
--    animation: spin .8s linear infinite;
++    animation: spin 1.4s ease-out infinite;
  }
--@keyframes spin { to { transform: rotate(360deg); } }
++@keyframes spin { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--spin-c, var(--accent, #3b82f6)) 50%, transparent); } to { box-shadow: 0 0 0 10px transparent; } }   /* "spin" pulses out now: nothing spins (design lint, plan L45) */
  
  /* ── Result Panel ───────────────────────────────────────────── */
  .result-panel {
ddiff --git a/apps/maps/public/css/style.css b/apps/maps/public/css/style.css
iindex 66f8780..e837fb9 100644
---- a/apps/maps/public/css/style.css
++++ b/apps/maps/public/css/style.css
@@@ -60,7 +60,7 @@ body {
  @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  @keyframes fadeOut { to { opacity: 0; } }
  @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
--@keyframes spin { to { transform: rotate(360deg); } }
++@keyframes spin { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--spin-c, var(--accent, #3b82f6)) 50%, transparent); } to { box-shadow: 0 0 0 10px transparent; } }   /* "spin" pulses out now: nothing spins (design lint, plan L45) */
  
  /* ── Disclaimer ── */
  #disclaimer-overlay {
@@@ -504,7 +504,7 @@ body {
  
  /* Search progress */
  .search-progress { padding: 16px; text-align: center; }
--.search-progress .spinner { width: 24px; height: 24px; border: 3px solid var(--border); border-top-color: var(--green); border-radius: 50%; animation: spin 0.8s linear infinite; margin: 0 auto 8px; }
++.search-progress .spinner { width: 24px; height: 24px; border: 3px solid var(--green); --spin-c: var(--green); border-radius: 50%; animation: spin 1.4s ease-out infinite; margin: 0 auto 8px; }
  .search-progress p { font-size: 12px; color: var(--text-muted); }
  
  /* ── Source progress panel (streaming search) ── */
ddiff --git a/apps/yt/public/css/style.css b/apps/yt/public/css/style.css
iindex d59ad37..4780d32 100644
---- a/apps/yt/public/css/style.css
++++ b/apps/yt/public/css/style.css
@@@ -167,13 +167,12 @@ a:hover { text-decoration: underline; }
  .spinner {
      width: 48px;
      height: 48px;
--    border: 4px solid var(--border);
--    border-top-color: var(--accent);
++    border: 4px solid var(--accent); --spin-c: var(--accent);
      border-radius: 50%;
--    animation: spin 0.8s linear infinite;
++    animation: spin 1.4s ease-out infinite;
      margin: 0 auto 16px;
  }
--@keyframes spin { to { transform: rotate(360deg); } }
++@keyframes spin { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--spin-c, var(--accent, #3b82f6)) 50%, transparent); } to { box-shadow: 0 0 0 10px transparent; } }   /* "spin" pulses out now: nothing spins (design lint, plan L45) */
  
  /* Video Card */
  .video-card {