Alexcoder5 / zen-sidebery

7 stars 3 forks source link

Close button in minimal mode #3

Open Damglador opened 1 month ago

Damglador commented 1 month ago

Better set "Show close button" to "no", because if it's shown on hover, switching between tabs when sidebar is in minimal mode is very hard.

Alexcoder5 commented 1 month ago

You can add this code to Sidebery so the close button is smaller when the tab is less than 80px

.Tab .body {
    container-type: inline-size!important;
    container-name: close;
}

@container close (max-width: 80px) {
    #icon_remove, .close .close-icon {
        display: none!important;
    }

    .close {
        width: 12px
    }

    .close:after {
        content: '|';
        position: relative;
        top: 5px;
        left: 4px;
        color: rgba(255,255,255, 0.5)
    }

    .t-box {
        mask: unset!important;
    }

    .Tab:hover .t-box {
        mask: linear-gradient(-90deg,transparent,transparent 12px,#000 12px,#000)!important;

    }   

}