Titlebar - changing position of close, maximize, and minimize

[mjedmonds]

Hi,

With the new titlebar, does anyone have CSS to reposition the close, max, and min buttons to the other side? For instance, on Windows and Linux, they would be moved to the left side of the titlebar instead of the right side. The motivation for doing this is on any system where the system button positions have been changed (e.g. gnome-tweaks) by the user’s preferences.

You can quickly move them to the left with:

.titlebar-button-container.mod-right {
  left: 0;
}`

But this approach doesn’t rearrange the close, max, and min ordering. When the group is on the right, the order should be min, max, close (from left to right), but on the left, the order should be close, max, min.

This doesn’t appear to be trivial to implement using CSS, because the ordering is controlled by the ordering of the divs where each is is displayed as inline-block:

<div class="titlebar-button-container mod-right">
    <div class="titlebar-button mod-minimize" aria-label="Minimize">...</div>
    <div class="titlebar-button mod-maximize" aria-label="Restore down">...</div>
    <div class="titlebar-button mod-close" aria-label="Close window">....</div>
</div>

Any ideas/suggestions?

[_ph]

try this: (tweak the 150px value in the 2nd line to position the group horizontally)

/*===== reposition min max close restore =====*/
.titlebar-button-container.mod-right {
  left: 150px;
  position: absolute;
}
.titlebar-button.mod-close{
  left: -50px !important;
  position: relative;
}
.titlebar-button.mod-maximize{
  left: 0px !important;
  position: relative;
}
.titlebar-button.mod-minimize{
  left: 50px !important;
  position: relative;
}

in the same idea, you can move the whole titlebar in the status line like so :

/*=============== titlebar in the status bar================*/

.is-frameless {
  padding-top:0px !important;
}  
.titlebar {
  position: fixed;
  left: 30px ;
  top: calc(100% - 28px);
  z-index:20;
  background-color: var(--background-secondary-alt);
  width:calc(100% - 390px);
  min-width: 180px;
  border-left: 1px solid var(--text-normal);
  border-right: 1px solid var(--text-normal);
}
.titlebar-button-container {
  position: absolute;
  top: 6px;
  left: calc(100% - 60px);
  display: inline-flex;
  text-outline: 0px;
  height:46px;
}
.titlebar-button {
  -webkit-app-region: no-drag;
  padding: 0 5px;
  cursor: pointer;
  line-height: 28px;
  opacity: 1;
  display: inline-flex;
}

.titlebar-button.mod-back, .titlebar-button.mod-forward {
  line-height: 20px;
  color:red;
}

.titlebar-button-container.mod-left {
  left: 10px !important;
  position: absolute;
} 

.titlebar-text {
  display:none;
}

.titlebar-button.mod-close{
  left: -70px !important;
  position: relative;
}
.titlebar-button.mod-maximize{
  left: -20px !important;
  position: relative;
}
.titlebar-button.mod-minimize{
  left: 30px !important;
  position: relative;
}

then you should get this (no titlebar, the buttons and drag bar are over the status bar)