Skip to content

Instantly share code, notes, and snippets.

@BobbyWibowo
Last active November 26, 2024 18:24
Show Gist options
  • Save BobbyWibowo/29a915c3877e69be6674883bc02e5128 to your computer and use it in GitHub Desktop.
Save BobbyWibowo/29a915c3877e69be6674883bc02e5128 to your computer and use it in GitHub Desktop.
/** Import Lepton stylesheet (Chrome) *****************************************/
@import url("css/leptonChrome.css");
/** Add your custom styles below **********************************************/
/* Enable option to edit bookmark URLs under Add Bookmark (blue star) menu */
/*
.editBMPanel_locationRow {
display: initial !important;
}
*/
/* Disable Email Image/Audio/Video and Set as Desktop Background context menu items */
#context-sendimage,
#context-sendvideo,
#context-sendaudio,
#context-sep-setbackground,
#context-setDesktopBackground {
display: none !important;
}
/** Hides native tabs toolbar **/
#TabsToolbar { visibility: collapse !important }
/**
* Decrease size of the sidebar header
*/
#sidebar-header {
font-size: 1.2em !important;
padding: 2px 6px 2px 3px !important;
}
#sidebar-header #sidebar-close {
padding: 3px !important;
}
#sidebar-header #sidebar-close .toolbarbutton-icon {
width: 14px !important;
height: 14px !important;
opacity: 0.6 !important;
}
/** Disable Recent Bookmarks in pop-up **/
#PanelUI-bookmarks > .panel-subview-body > toolbarseparator:last-of-type,
#panelMenu_recentBookmarks,
#panelMenu_bookmarksMenu {
display: none;
}
#PanelUI-bookmarks > .panel-subview-body {
flex: unset !important;
}
/* -------------------------- Sidebery Auto-hiding Sidebar ------------------------ */
:root {
--autohide-sidebar-extended: 220px; /* width of tab panel shown */
--autohide-sidebar-collapsed: 0px; /* width of tab panel hidden */
--autohide-sidebar-left-padding: 2px; /* needs to be at least 1px if using 0px collapse width */
--sidebar-height: 100vh;
}
/* width of panel (grey box) (different from width of each tab) */
#main-window:not([extradragspace="true"])
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:not([hidden]) {
position: absolute;
right: 0px;
width: var(--autohide-sidebar-collapsed) !important;
min-width: unset !important;
z-index: calc(var(--browser-area-z-index-tabbox) + 1);
transition: width 0.1s ease-in-out, margin-inline-start 0.25s var(--animation-easing-function), opacity 0.25s ease-in-out, visibility 0s linear !important;
padding-left: var(--autohide-sidebar-left-padding);
background-color: transparent !important;
}
#main-window:not([extradragspace="true"])
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:not([hidden]) #sidebar-header {
background-color: var(--sidebar-background-color);
}
/* width of panel (grey box):hover */
#main-window:not([extradragspace="true"])
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:not([hidden]):hover,
/* width of panel header - use if your header is shown */
#main-window:not([extradragspace="true"])
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] #sidebar-header,
/* width of each tab */
#main-window:not([extradragspace="true"])
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] #sidebar {
width: calc(var(--autohide-sidebar-extended) + var(--autohide-sidebar-left-padding)) !important;
padding-right: var(--autohide-sidebar-left-padding) !important;
}
/* normal website page right margin */
#main-window:not([extradragspace="true"])
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:not([hidden])
~ #appcontent {
margin-right: var(--autohide-sidebar-collapsed);
}
/* when youtube full screen */
#main-window:not([extradragspace="true"])[inFullscreen][inDOMFullscreen]
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:not([hidden])
~ #appcontent {
margin-right: 0 !important;
}
/* adjust if your sidebery is not tall enough */
#main-window:not([extradragspace="true"])[inFullscreen]
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"],
#main-window:not([extradragspace="true"])
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] {
height: var(--sidebar-height);
}
@BobbyWibowo
Copy link
Author

https://github.com/black7375/Firefox-UI-Fix with some custom CSS rules to be used together with Sidebery

Most of them were taken from Sidebery's wiki, https://github.com/mbnuqw/sidebery/wiki/Firefox-Styles-Snippets-(via-userChrome.css), with some modifications

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment