Skip to content

Instantly share code, notes, and snippets.

@xinyangli
Forked from BrianGilbert/userChrome.css
Created August 11, 2024 02:19
Show Gist options
  • Save xinyangli/0ded98af9fe3da35f3688f81364d8c14 to your computer and use it in GitHub Desktop.
Save xinyangli/0ded98af9fe3da35f3688f81364d8c14 to your computer and use it in GitHub Desktop.
Firefox userChrome to autohide Sideberry panel and hide titlebar tabs, and autohide Page Actions.
@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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment