Skip to content

Instantly share code, notes, and snippets.

@vdeemann
Last active January 25, 2025 15:05
Show Gist options
  • Save vdeemann/04aa01cf1f2e619927a06a4bec055314 to your computer and use it in GitHub Desktop.
Save vdeemann/04aa01cf1f2e619927a06a4bec055314 to your computer and use it in GitHub Desktop.
1.) Open your current Firefox Profile folder
a.) On the Firefox address bar type about:support
b.) Folder path is in โ€œProfile Folderโ€ section, use that and navigate to it
2.) create a folder called chrome (if it doesnt exist)
3.) go into created folder and create a userChrome.css file
4.) In userChrome.css paste in code from:
(use the gist snippet below)
5.) activate custom stylesheets in Firefox:
a.) navigate firefox to about:config
b.) accept warning
c.) change toolkit.legacyUserProfileCustomizations.stylesheets flag to true
6.) Install Tree Style Tab
7.) Browse to URL: "about:addons" - Select 'Tree Style Tab' -> 'Preferences' tab -> 'Extra style rules for sidebar contents' - paste in the content from treestyletab.css from:
(use the gist snippet below)
8.) Restart firefox
/* Show title of unread tabs with red and italic font */
/*
:root.sidebar tab-item.unread .label-content {
color: red !important;
font-style: italic !important;
}
*/
/* Add private browsing indicator per tab */
/*
:root.sidebar tab-item.private-browsing tab-label:before {
content: "๐Ÿ•ถ";
}
*/
/* Hide border on tab bar, force its state to 'scroll', adjust margin-left for width of scrollbar. */
#tabbar {
border: 0;
scrollbar-width: none;
overflow: scroll !important;
margin-top: 0 !important;
}
/* Include 'reveal' animation ... stagers by level */
#tabbar .tab {
transition: 0.1s margin-top, 0.2s 0.1s margin-left, 0.2s 0.1s visibility;
}
/* delay transitions on open */
#tabbar:not(:hover) .tab {
transition-delay: 0s;
margin-left: 0;
}
/* animate twisty reveal */
#tabbar .tab .twisty {
transition: 0.2s margin;
}
/* general tabs */
.tab {
background-color: transparent;
}
.tab,
.tab.pinned {
height: 2.8em;
}
/* Push tab labels slightly to the right so they're completely hidden in collapsed state, but still look fine while expanded. */
.tab .label {
margin-left: 1em;
}
/* fix closebox */
.tab .closebox {
margin-left: 0;
}
.tab .counter {
margin-left: auto;
display: inline-block !important;
}
/* Hide .twisty and adjust margins so favicons have 7px on left. */
#tabbar:not(:hover) .tab .twisty {
visibility: hidden;
margin-left: -12px;
transition-delay: 0s;
}
/* hide closebox unless needed */
.tab:not(:hover) .closebox {
visibility: hidden;
}
/* Hide sound playing/muted button. */
.sound-button {
margin-left: 0;
display: inline-block;
visibility: collapse;
}
.tab.audible .sound-button {
visibility: visible;
margin-left: 0.25em;
}
.tab:not([data-child-ids]) .counter {
/* visibility: hidden; */
}
tab-item:not(.subtree-collapsed) .counter {
visibility: hidden;
}
/* Hide 'new tab' button. */
.newtab-button {
display: none;
}
/* active tab */
.tab.active {
background-color: rgba(255, 255, 255, 0.05) !important;
box-shadow: inset 3px 0 0 #ffffff99 !important;
}
.tab:hover,
.tab.active:hover {
background-color: inherit;
}
.tab.active .label {
font-weight: bold;
color: #f4f4f4 !important;
}
.tab .label,
.tab.active .label {
border-bottom: 1px solid transparent;
}
.tab:hover .label,
.tab.active:hover .label {
border-bottom: 1px dotted;
min-width: 0 !important;
flex-shrink: 1 !important;
flex-grow: unset !important;
}
/* pending / unloaded tabs */
.tab.discarded {
background-color: #1d1d1d;
}
.tab.discarded .label {
color: #efefefCC !important;
}
.tab.discarded:hover .label {
color: #efefef !important;
}
/* Adjust style for tab that has sound playing. */
.tab.sound-playing .favicon::after,
.tab.muted .favicon::after {
content: '๐Ÿ”Š';
z-index: var(--favicon-base-z-index);
position: absolute;
font-size: 0.5em;
bottom: -0.35em;
right: -0.7em;
}
/* Adjust style for tab that is muted. */
.tab.muted .favicon::after {
content: '๐Ÿ”‡';
}
/* Pinned tabs: */
/* Hide all non-active pinned tabs (these are included in top-bar instead) */
/*.tab.pinned {
position: relative;
max-width: none;
width: auto;
top: 0 !important;
left: 0 !important;
}
.tab.pinned:not(.active) {
display: none;
}
.tab.pinned .label {
display: block;
}
.tab.pinned .sound-button {
position: relative;
transform: none;
}
.tab.pinned .twisty {
display: block;
min-width: none;
width: auto;
}*/
/*Command + L on Mac to focus on address bar*/
#nav-bar {
/* customize this value. */
--navbar-margin: -44px;
margin-top: var(--navbar-margin);
/*margin-bottom: 0;*/
/*z-index: -100;*/
/*transition: all 0.3s ease !important;*/
/*opacity: 0;*/
}
#navigator-toolbox:focus-within > #nav-bar,
#navigator-toolbox:hover > #nav-bar
{
margin-top: 0;
margin-bottom: var(--navbar-margin);
/*z-index: 100;*/
/*opacity: 1;*/
}
/*
* Hide Tabs on Topbar
*/
#TabsToolbar {
visibility: collapse;
}
/* Hide main tabs toolbar */
/*#main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #TabsToolbar > .toolbar-items {
opacity: 0;
pointer-events: none;
}*/
/*#main-window:not([tabsintitlebar="true"]) #TabsToolbar {
visibility: collapse !important;
}*/
/* Sidebar min and max width removal */
/*#sidebar {
max-width: none !important;
min-width: 0px !important;
}*/
/* Hide splitter, when using Tree Style Tab. */
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] + #sidebar-splitter {
display: none !important;
}
/* Hide sidebar header, when using Tree Style Tab. */
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header {
visibility: collapse;
}
/* Shrink sidebar until hovered, when using Tree Style Tab. */
:root {
--thin-tab-width: 30px;
--wide-tab-width: 200px;
}
/*#sidebar-box:not([sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]) {
min-width: var(--wide-tab-width) !important;
max-width: none !important;
}*/
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] {
position: relative !important;
transition: all 100ms !important;
min-width: var(--thin-tab-width) !important;
max-width: var(--thin-tab-width) !important;
z-index: calc(var(--browser-area-z-index-tabbox, 10000) + 1) !important;
}
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]:hover {
transition: all 200ms !important;
transition-delay: 0.1s !important;
min-width: var(--wide-tab-width) !important;
max-width: var(--wide-tab-width) !important;
margin-right: calc((var(--wide-tab-width) - var(--thin-tab-width)) * -1) !important;
}
@vdeemann
Copy link
Author

Yes, that is the iframe button then select 3. Here is learning material for working and debugging with CSS. https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS

@Milor123
Copy link

Yes, that is the iframe button then select 3. Here is learning material for working and debugging with CSS. https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS

Ok bro thanks, but i dont understand, what should I send to you? I am not developer, but could send you the log or something that can help

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