Tutorial of custom css

Talk Cases
, , ,
101

Come on, I’ll share a little too.
I wanted to manage the space bar better, even though the team is already actively working on it.
Here’s a proposal with what I’ve set up on my side (an example that needs a bit of fine-tuning)

It’s work with auto-hide active/inactive and with widgets hide/shown.
demobugAnytype

/* Global */
#vault{
    width:50px;
}

#vault .body{
    width:50px;
}

#vault #scroll{
    padding:0;
}

#sidebar{
    left:0;
}

#vault #scroll .isActive::after{
    left:-5px;
}

#vault #item-settings.item{
    width: 30px;
    height: 30px;
    margin:5px;
}

#sidebarToggle{
    top: 5px;
    left:5px;
}

/* Custom for autohide */
#vault{
    height: 35px !important;
    background-color: transparent;
}

#vault .head{
    display:none;
}

#vault #scroll{
    display:none;
}

/* Autohide */
#vault:hover #scroll{
    display:flex;
    order: 1;
}

#vault:hover{
    background-color: var(--color-shape-primary);
    height: 100% !important;
    box-shadow:0 0 3px black;
}