[Mobile] Make Sync icon always visible

Feature requests
, ,
24

I added the snippet to rotate the icon while syncing. I am satisfied, especially on mobile, as it is now easier to detect the sync status.

(I changed the padding of .sync-status-icon to 0 for smooth animation. So you need to adjust the position of the icon again).

:is(.is-mobile, .is-phone) .workspace:not(:has(.workspace-drawer-backdrop)) .sync-status-icon {
    padding: 0;
}

/* Animation */
.sync-status-icon.mod-working{
  animation: linear 2s sync_working infinite;
}

@keyframes sync_working {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

I leave here the CSS classes for each icons related to Obsidian Sync. You should be able to change the icons to your favorites and customize them further!

/* Icons */
.sync-status-icon.mod-success{}
.sync-status-icon.mod-working{}
.sync-status-icon.mod-error{}
3 Likes