Keeps the sidebar ribbon out of sight and only shows it upon hover. [Not tested on Obsidian 1.0+]

obsidian-show-ribbon-on-hover.css

/*HIDE RIBBON WHEN SIDEBAR IS COLLAPSED*/
.side-dock-ribbon.mod-left.is-collapsed .side-dock-ribbon-action {
    opacity: 0;
    transition: opacity .3s;  
}
.side-dock-ribbon.mod-left.is-collapsed:hover .side-dock-actions:hover .side-dock-ribbon-action,
.side-dock-ribbon.mod-left.is-collapsed:hover .side-dock-settings:hover .side-dock-ribbon-action {
    opacity: 1;
}


/*HIDE RIBBON WHEN SIDEBAR IS EXPANDED*/
.side-dock-ribbon.mod-left:not(.is-collapsed) .side-dock-ribbon-action,
.side-dock-ribbon.mod-left:not(.is-collapsed) .workspace-ribbon-collapse-btn svg {
    opacity: 0;
}
.side-dock-ribbon.mod-left.is-collapsed .workspace-ribbon-collapse-btn:not(hover) + .side-dock-actions:hover .side-dock-ribbon-action,
.side-dock-ribbon.mod-left:hover:not(.is-collapsed) .side-dock-ribbon-action,
.side-dock-ribbon.mod-left:hover:not(.is-collapsed) .workspace-ribbon-collapse-btn svg {
    opacity: 1;
}
.side-dock-ribbon.mod-left:not(.is-collapsed) {
    flex: 0 0 5px;
    transition: flex .2s;
}
.side-dock-ribbon.mod-left:hover:not(.is-collapsed) {
    flex: 0 0 40px;
}

Has anyone found a fix for the traffice lights issue?

@cyanomys The following fixes the issue for me. But, it pushes tabs to the right 20px as well. It's not a problem for me.

.workspace-tab-header-container-inner {
    padding-left: 20px !important;
}

and the following style update fixes the thickness on the left;

.side-dock-ribbon.mod-left:not(.is-collapsed) {
    flex: 0 0 5px;
    padding-left: 0px;
    transition: flex 0.2s;
}
.side-dock-ribbon.mod-left:hover:not(.is-collapsed) {
    flex: 0 0 40px;
    padding-left: 5px;
}