userChromeTest2

:root {
    /* delay before expanding tabs, set to '0' for no delay */
    --delay: 0.2s;
    --transition-time: 0s;
    --positionX1: 48px; /* '48px' for left, '0px' for right sidebar */
    --positionX2: absolute; /* 'absolute' for left, 'none' for right sidebar */
    /* width of the collapsed sidebar in fullscreen mode ('1px' or '48px') */
    --fullscreen-sidebar-width: 1px;
}



/* Windows specific styles */

@media (-moz-platform: windows),
       (-moz-platform: windows-win10) {
    /* Hide main tabs toolbar */
    :root[tabsintitlebar]{
        --uc-window-control-width: 137px; /* Space at the right of nav-bar for window controls */
        /* --uc-window-drag-space-width: 24px; */ /* To add extra window drag space in nav-bar */
    }


    #nav-bar {
        background-image: linear-gradient(to right, #49577e, #f16971 calc(100% - var(--uc-window-control-width,0px))) !important;
    }


    #PersonalToolbar {
        background-image: linear-gradient(to right, #49577e, #f16971 calc(100% - var(--uc-window-control-width,0px))) !important;
    }

    :root:not([inFullscreen]) #nav-bar {
      padding-inline: var(--uc-window-drag-space-width,80px) calc(var(--uc-window-control-width,0px) + var(--uc-window-drag-space-width,0px)) !important;
    }


.titlebar-buttonbox-container {
    height: calc(var(--uc-toolbar-height) + 2px) !important;
}

    :root {
        --uc-toolbar-height: 32px;
        --chrome-content-separator-color: none !important;
    }

    :root:not([uidensity="compact"]) {
        --uc-toolbar-height: 38px;
    }

    #TabsToolbar {
        visibility: collapse !important;
    }

    /* Hide the Windows controls on the left side. */
    #TabsToolbar .titlebar-buttonbox-container {
        visibility: hidden !important;
    }

    :root:not([inFullscreen]) #nav-bar {
    margin-top: calc(0px - var(--uc-toolbar-height));
    z-index: 2;
    }

    #toolbar-menubar {
        min-height: unset !important;
        height: var(--uc-toolbar-height) !important;
        position: relative;
    }

    /* For a rounded button design, uncomment both lines in .titlebar-buttonbox. */
    .titlebar-buttonbox {
        z-index: 3 !important;
        padding-right: 3px;
    }

    .titlebar-buttonbox * {
        border-radius: 5px;
        /* width:35px;
        height:38px; */
    }

    #main-menubar {
        -moz-box-flex: 1;
        /* background-color: var(--toolbar-bgcolor,--toolbar-non-lwt-bgcolor);*/
        /*background-clip: padding-box;*/
        /*border-right: 30px solid transparent;*/
        /*border-image: linear-gradient(to left, transparent, var(--toolbar-bgcolor,--toolbar-non-lwt-bgcolor) 30px) 20 / 30px;*/
    }

    #toolbar-menubar:not([inactive]) {
        z-index: 2;
    }

    #toolbar-menubar[inactive] > #menubar-items {
        opacity: 0;
        pointer-events: none;
        margin-left: var(--uc-window-drag-space-width,0px);
    }

}


/* General styles */
#browser {
    position: relative;
}

#nav-bar, #urlbar {
    z-index: 100;
}

#sidebar-box:not([lwt-sidebar]){
    appearance: unset !important;
}

#sidebar-box[sidebarcommand*="tabcenter"] {
    z-index: 1;
}

#sidebar-box[sidebarcommand*="tabcenter"] #sidebar-header {
    visibility: collapse;
    display: none;
}

[sidebarcommand*="tabcenter"] #sidebar,
#sidebar-box[sidebarcommand*="tabcenter"] {
    display: block !important;
    min-width: 48px !important;
    max-width: 48px !important;
    width: 48px;
}

#sidebar-box[sidebarcommand*="tabcenter"]:not([hidden]) {
    display: block;
    position: var(--positionX2);
    min-width: 48px;
    max-width: 48px;
    overflow: hidden;
    border-right: 1px solid var(--sidebar-border-color);
    z-index: 1;
    top: 0;
    bottom: 0;
}

/* use :where() selector to lower specificity */
:where(#main-window[inFullscreen]) #sidebar-box[sidebarcommand*="tabcenter"]:not([hidden]) {
    min-width: var(--fullscreen-sidebar-width) !important;
    max-width: var(--fullscreen-sidebar-width) !important;
}

#sidebar-box[sidebarcommand*="tabcenter"]:hover #sidebar,
#sidebar-box[sidebarcommand*="tabcenter"]:hover {
    min-width: 10vw !important;
    width: 30vw !important;
    max-width: 200px !important;
    z-index: 1 !important;
    transition: all var(--transition-time) ease var(--delay);
}

/* used for delay function */
#sidebar-box[sidebarcommand*="tabcenter"]:not(:hover) #sidebar,
#sidebar-box[sidebarcommand*="tabcenter"]:not(:hover) {
    transition: all var(--transition-time) ease 0s;
}

@media (width >= 1200px) {
    #sidebar-box[sidebarcommand*="tabcenter"]:hover #sidebar,
    #sidebar-box[sidebarcommand*="tabcenter"]:hover {
        max-width: 250px !important;
    }
}

[sidebarcommand*="tabcenter"] ~ #sidebar-splitter {
    display: none;
}

[sidebarcommand*="tabcenter"] #sidebar {
    max-height: 100%;
    height: 100%;
}

#main-window:not([inFullscreen]) #sidebar-box[sidebarcommand*="tabcenter"]:not([hidden]) ~ #appcontent {
    margin-left: var(--positionX1);
}

#main-window[inFullscreen]:not([inDOMFullscreen]) #sidebar-box[sidebarcommand*="tabcenter"]:not([hidden]) ~ #appcontent {
    margin-left: var(--fullscreen-sidebar-width);
}

#main-window[inFullscreen] #sidebar {
    height: 100vh;
}

[sidebarcommand*="tabcenter"] #sidebar-header {
    background: #0C0C0D;
    border-bottom: none !important;
}

[sidebarcommand*="tabcenter"] ~ #sidebar-splitter {
    border-right-color: #0C0C0D !important;
    border-left-color: #0C0C0D !important;
}

[sidebarcommand*="tabcenter"] #sidebar-switcher-target,
[sidebarcommand*="tabcenter"] #sidebar-close {
    filter: invert(100%);
}

@media (max-width: 630px) {
    #urlbar-container {
        min-width: 100% !important;
    }

    #menubar-items {
        display: none !important;
    }
}