sidebery.css

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

/*
 * This style will hide the tab bar. For MacOS Big Sur
 *
 * Contributor(s): Isaac-Newt, Ivan0xFF, millerdev, AMomchilov
 */

#titlebar {
    visibility: collapse;
}

/* Position window controls */
#TabsToolbar .titlebar-buttonbox-container {
    display: block;
    position: absolute;
    visibility: visible;
}

/* Reposition the close/maximize/minimize buttons for the "normal" toolbar density  */
/* When the UI density is set to "normal", the `uidensity` attribute is undefined.  */
/* `window.document.documentElement.getAttribute("uidensity")` will be null.        */
:root:not([uidensity]) #TabsToolbar .titlebar-buttonbox-container {
    margin-left: 12px;
    margin-top: 12px;
}

/* Reposition the close/maximize/minimize buttons for the "compact" toolbar density */
:root[uidensity="compact"] #TabsToolbar .titlebar-buttonbox-container {
    margin-left: 10px;
    margin-top: 9px;
}

#TabsToolbar .titlebar-buttonbox.titlebar-color {
    margin-left: 0px !important;
}

/*
 * Make room for window controls and a bit of extra space for window drag/move.
 * Only apply this style when not in fullscreen mode.
 */
#main-window:not([inFullscreen]) #nav-bar {
    padding: 0px 0px 0px 70px !important;
}

/*  Sideberry Dynamic sidebar   */

/* Add the following to Sideberry settings/Styles Editor/Sidebar:
.Tab[data-pin="false"] .ctx {
  right: unset !important;
}
*/

#sidebar-box {
    background-color: #2B2A33;
    overflow: hidden;
    height: calc(100% + 6px);
    position: fixed;
    max-width: 26em !important;
    width: 100% !important;
    display: block;
    transition: 90ms;
}

#sidebar-box:hover {
    padding-bottom: 50px;
    position: absolute;
    z-index: 1;
}

#sidebar-header {
    background-color: #2B2A33;
}

#sidebar {
    width: calc(45px * 7) !important;
    max-width: 50vw !important;
    height: 100%;
}

#sidebar:hover {
    max-width: 100% !important;
}

#appcontent {
    margin-left: 45px;
}

/* Page Actions Hide and Show on Hover */

/* Hide Buttons and Reveal on Hover */

#page-action-buttons:not(:hover) .urlbar-page-action,
#page-action-buttons:not(:hover) #star-button
{
    width: 0px !important;
    min-width: 0px !important;
    padding-left: 0px !important;
    padding-right: 10px !important;
    margin-right: -5px !important;
    transition: all 250ms ease-in-out;
}

#page-action-buttons:not(:hover) #userContext-indicator {
    margin-right : 45px !important;
    transition: all 250ms ease-in-out;
}

#page-action-buttons:hover .urlbar-page-action,
#page-action-buttons:hover #star-button  {
    visibility: visible;
    min-width: unset !important;
}

#page-action-buttons:hover #userContext-indicator {
    margin-right : 0px !important;
}

/* Create page actions hover "button" */
#page-action-buttons::after {
    content: "•••";
    position: absolute;
    top: 0.7em;
    font-size: 0.7em;
    opacity: 0.5;
    right: 8px;
    transition: all 50ms ease-in-out;
}

/* Hide the button on hover */
#page-action-buttons:hover::after {
    display: none !important;
    width: 0px !important;
    margin-left: 0px !important;
    transition: all 50ms ease-in-out;
}

/* Hide URLBar Buttons and Reveal on Hover Finished*/
#urlbar,#searchbar {
    font-size: 13px !important;
    margin-top: 1px !important;
}