firefox css v136

/* Main sidebar styling */
/* Define a variable for transition speed */
/* Define variables for easy adjustments */
:root {
    --sidebar-transition-speed: 0.3s; /* Sidebar width transition */
    --text-fade-speed: 0.2s; /* Tab text fade transition */
    --sidebar-bg: #191919; /* Sidebar background color */
}

/* Main sidebar styling */
#sidebar-main {
    width: 50px !important; /* Collapsed width */
    transition: width var(--sidebar-transition-speed),
                margin-right var(--sidebar-transition-speed),
                background var(--sidebar-transition-speed) !important; /* Smooth background transition */
    z-index: 4 !important; /* Ensure it overlays other elements */
    margin-right: 0px !important;
    background: var(--sidebar-bg) !important; /* Keep background even when collapsed */
}

/* When hovering over the sidebar */
#sidebar-main:hover {
    width: 250px !important; /* Expanded width */
    margin-right: -200px !important; /* Adjust for layout shift */
    background: var(--sidebar-bg) !important; /* Ensure background doesn't turn transparent */
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.4) !important; /* Optional shadow for depth */
}

/* Tab text fade effect */
.tabbrowser-tab .tab-text {
    opacity: 0; /* Hide text when collapsed */
    transition: opacity var(--text-fade-speed) ease-in-out !important;
}

/* Show text when sidebar is expanded */
#sidebar-main:hover .tabbrowser-tab .tab-text {
    opacity: 1 !important; /* Fully visible when expanded */
}

/* Optional styling for smoother transitions */
#sidebar-main:hover .tabbrowser-tab {
    width: auto !important;
    min-width: 100% !important;
    max-width: 100% !important;
}

/* Column layout for pinned tabs */
#vertical-pinned-tabs-container {
    grid-template-columns: none !important;
}

/* Show pinned tabs separator in expanded state */
#tabbrowser-tabs[expanded] > #vertical-pinned-tabs-container-separator {
    display: block !important;
}

/* Hide pinned tabs separator in expanded state with no pinned tabs */
#vertical-pinned-tabs-container:empty + #vertical-pinned-tabs-container-separator {
    display: none !important;
}

/* Hide close button in collapsed state */
#tabbrowser-tabs[orient="vertical"]:not([expanded]) .tab-close-button {
    display: none !important;
}

/* Uniform tab padding */
#tabbrowser-tabs[orient="vertical"] .tabbrowser-tab {
    padding-block: 0px !important;
}


 /*END*/