Experiment with Transparent Status-bar

Share & showcase
,
1

I find my screen too small to pack a lot of elements. So I decided to experiment with a CSS snippet to solve this.

The end result is a transparent, narrow status-bar in ordinary state: image

And translucent when I hover the pointer:
image

I find it pleasant as I have one less element in the screen while I edit and don’t really need that info. If for any reason I need it, I just need to hover the pointer in the bottom center of the screen.

DISCLAIMER: I have a very basic handle of CSS, so I’m sorry if this snippet won’t work out for you perfectly. Also, improvements are very welcome :smiley: I reckon that there are desirable improvements I could make but couldn’t figure out how; namely have the bar stay at the center of the edit pane according to whether the sidebars are folded or not. For now it stays at the absolute center of the screen (or so I think).

Here’s the code:

.status-bar,
.is-translucent .status-bar {
	background: transparent;
  font-size: 11px;
  position: fixed;
  right: 45%;
  bottom: 1%;
  backdrop-filter: blur(15px);
  border-top: 1px solid var(--shade-plus-darker);
  border-left: 1px solid var(--shade-plus-darker);
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  line-height: 1;
  padding: 8px 12px 8px 0;
  color: var(--text-muted);
  max-height: unset;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.08);
  margin: 0;
	opacity: 0.1;
	transition: .2s;
}

.status-bar:hover {
	opacity: 1;
	transition: .2s;
}

.status-bar-item {
  padding: 0 0 0 10px;
}

.status-bar-item-segment {
  margin-right: 0; /* Give this a 10px space if you don't want to hide the last indicator (section below in this code */
}

/** Hides the last indicator, whatever it is. Mind this section if you use any plugin that adds indicators to the status bar. This section will probably hide it. **/
.status-bar-item-segment:last-child {
	display: none;
}

.status-bar-item-icon {
	display: block;
}

.status-bar-item-icon svg {
	display: block;
	width: 1em;
	height: 1em;
	fill: currentColor;
}

Update: I put a couple of comments regarding the last item in the bar (character count, if you have no plugins adding anything there). So if you don’t want to hide the character count (or other plugin indicator), you can comment/delete that section, and add some space between the indicators. :slight_smile:

Hope you find it useful!

6 Likes
2

Very useful! Thanks for sharing.

1 Like
3

thank a ton @davesilva, I needed the status bar but it was also blocking those crucial three dots of a note in sliding pane mode, I looked everywhere for a solution, yours is the best.

1 Like