Floorp Sidebery vertical tabs

Floorp Sidebery vertical tabs.md

Floorp Sidebery vertical tabs CSS

Based on: https://web.archive.org/web/20240920201617/https://codeberg.org/ranmaru22/firefox-vertical-tabs (archived, unfortunately unavailable now)

Steps

1. Install Floorp
2. In Floorp Hub, go to Tab and Appearance, then in the Tab Bar section, choose the Hide Tab Bar & Title Bar position option (this disables the horizontal tab bar, and moves the min, max, close buttons to the toolbar)
3. Install Sidebery
4. Set CSS:
   • go to about:profiles
   • search for a profile which has "This is the profile in use" text above it (the current profile)
   • click "Open directory" in the Root directory column
   • a file manager will open, create a folder called chrome in the current directory
   • change directory to chrome, download the userChrome.css file below in this gist, and place it in the chrome folder, or only copy its parts if you have already configured something there
5. Restart Floorp, and you're done!

userChrome.css

/*************************************************************************************************************************************************************************************************************************************************************

"userChrome.css" is a custom CSS file that can be used to specify CSS style rules for Floorp's interface (NOT internal site) using "chrome" privileges.
For instance, if you want to hide the tab bar, you can use the following CSS rule:

**************************************
#TabsToolbar {                       *
    display: none !important;        *
}                                    *
**************************************

NOTE: You can use the userChrome.css file without change preferences (about:config)

Quote: https://userChrome.org | https://github.com/topics/userchrome 

************************************************************************************************************************************************************************************************************************************************************/

@charset "UTF-8";
@-moz-document url(chrome://browser/content/browser.xhtml) {
/* Please write your custom CSS under this line*/

    :root {
        /* Delay before expanding tabs */
        --sidebery-delay: 0s;
        /* Time it takes for sidebar to expand. */
        --sidebery-transition-time: 0.2s;
        /* Width of expanded sidebar */
        --sidebery-expanded-width: 250px;
    }

    #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]
    #sidebar-header {
        visibility: collapse;
    }

    hbox#browser {
        position: relative;
    }

    /* NORMALNY WIDTH. */
    #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] {
        /* position: relative; */
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        min-width: 48px !important;
        width: 48px !important;
        max-width: 48px !important;
        z-index: 100;
        margin-top: -1px;
        transition: min-width var(--sidebery-transition-time) linear !important;
        will-change: min-width;
    }

    /* Use an existing unused splitter for space reservation */
    splitter#sidebar-splitter.sidebar-splitter {
        box-sizing: border-box;
        width: 48px !important;
        z-index: 0;
    }

    /* OKEJ WIDTH */
    #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:hover {
        min-width: var(--sidebery-expanded-width) !important;
    }

    /* positioned=true means sidebar docked to the right */
    #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"][positionend="true"] {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
    }

    #browser:has(
    #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"][positionend="true"]
    )
    > #appcontent {
        margin-right: 50px;
    }

    #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"][positionend="true"]:hover {
        min-width: var(--sidebery-expanded-width) !important;
    }

    #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]
    > #sidebar {
        transition: min-width var(--sidebery-transition-time) linear var(--sidebery-delay) !important;
        will-change: min-width;
    }

    #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:hover
    > #sidebar {
        min-width: var(--sidebery-expanded-width) !important;
        transition: min-width var(--sidebery-transition-time) linear var(--sidebery-delay);
        clip-path: inset(0px -15px 0px -15px);
    }

    #sidebar,
    #sidebar-header {
        background-color: var(--toolbar-bgcolor) !important;
        border-inline: 1px solid var(--chrome-content-separator-color) !important;
        border-inline-width: 0px 1px !important;
    }

    #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:not(
    [positionend]
    ):hover
    ~ #appcontent
    #statuspanel {
        inset-inline: auto 0px !important;
    }

    #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:not(
    [positionend]
    ):hover
    ~ #appcontent
    #statuspanel-label {
        margin-inline: 0px !important;
        border-left-style: solid !important;
    }

}