Reduce padding/height of tab bar?

Custom CSS & Theme Design
12

OK, so now I’ve tested, and in my setup (using either default or Minimal theme), this CSS reduces the top bar down to 30px all across the line.

.is-left-sidedock-open .workspace-ribbon.side-dock-ribbon.mod-left::before,
.sidebar-toggle-button:is(.mod-right, .mod-left),
.mod-top .workspace-tab-header-container {
  height: 30px;
  /* background-color: blue !important; /* */
}

.workspace .mod-root .workspace-tab-header {
  padding-bottom: 0px;
  padding-top: 0px;
  /* background-color: green; /* */
}

.mod-top .workspace-tab-header-container-inner {
  margin-top: 0px;
  padding-bottom: 0px;
  /* background-color: yellow;  /* */
}

A few comments:

  • These do not address every element on the top bar, but they do seem to address those which matters when deciding the height
  • The syntax /* some: css-stuff; /* */ is a variant to allow to me have “line comments” in CSS. By adding/removing the first /* I can comment out/in that particular line. As it stands now, none of these are functional, but if you want to see which targets where, you can uncomment them (remove the /*) and see it in color. And of course, you can remove them altogether if you so please.
  • I don’t think these changes should have too much side effect else where, but it’s always hard to tell until you experience it somewhere
3 Likes