Minimal Floating Centered Status Bar

Custom CSS & Theme Design
1

I wanted to center the status bar to have the current view icon and word count front and center. The status bar feels right at home at the bottom of the main area as opposed to off to the side.

Use Commander or Status Bar Organizer to hide unneeded status bar elements.

Screen Shot 2024-10-17 at 03.06.53
Screen Shot 2024-10-17 at 03.06.531710×1300 300 KB

The dramatic shadow makes it pop and helps distinguish it from file content, especially in dark mode.

Screen Shot 2024-10-17 at 03.07.04
Screen Shot 2024-10-17 at 03.07.041710×1300 296 KB

I couldn’t figure out how to center it to the editor, not the window though :confused: Any ideas?

Screen Shot 2024-10-17 at 03.08.56
Screen Shot 2024-10-17 at 03.08.561928×1578 307 KB


CSS snippet

Minimal_floating_centered_status_bar.css (811 Bytes)

/*
 * Snippet Name: Minimal Floating Centered Status Bar
 * Version: 1.2
 * Source: https://forum.obsidian.md/t/minimal-floating-centered-status-bar/89998
 * Last Updated: 2024-12-11
 */

.status-bar {
  position: fixed;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  background-color: var(--background-secondary);
  border-radius: 5px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  padding: 4px 0px 4px 12px !important;
  width: max-content;
  min-width: max-content;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.status-bar-item + .status-bar-item {
  margin-left: 0;
  flex-shrink: 0;
}
.workspace-split.mod-vertical.mod-root {
  position: relative;
}
.workspace-split.mod-vertical.mod-root > .workspace-leaf:last-child {
  position: static;
}

Code inspired by:

2

The Minimal Theme dims the status bar and undims it when you hover over it. This removes the dimming entirely:

CSS snippet 
/* Remove Status Bar Dimming */
.minimal-status-off .status-bar,
.minimal-status-off .status-bar:hover {
  opacity: 1 !important;
  transition: none !important;
  color: var(--text-muted) !important;
}

.status-bar,
.status-bar:hover {
  opacity: 1 !important;
  transition: none !important;
  color: var(--text-muted) !important;
}
1 Like