UserChrome-Tweaks
Less
UserChrome-Tweaks | Less | |
---|---|---|
8 | 2 | |
1,166 | 121 | |
- | - | |
0.6 | 0.0 | |
almost 3 years ago | about 7 years ago | |
CSS | Ruby | |
GNU General Public License v3.0 only | - |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
UserChrome-Tweaks
-
Been fiddling around with userChrome.css since I got bothered with TreeStyleTab's lack of horizontal screen space; no tabs and auto-hide sidebar! :D
I've done some weird things with licenses as some of the titlebar code is borrowed from the Timvde user tweaks repo but everyone is credited.
-
Mouseover icon replace?
Upd. Manage to solve it thanks to : https://github.com/Timvde/UserChrome-Tweaks
-
Can anything be done to widen tabs?
There seems to be a separate css for windows. Can't really test it now but here it is https://github.com/Timvde/UserChrome-Tweaks/blob/master/tabs/hide-tabs-windows.css
-
Putting navbar and menu bar on the same level, proton UI edition
/* TABS: on bottom - Firefox 65 and later */ #navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) { -moz-box-ordinal-group: 10 !important; } #TabsToolbar { -moz-box-ordinal-group: 1000 !important; display: block !important; position: absolute !important; bottom: 0 !important; /* width: 100vw !important; */ } :root[tabsintitlebar]:not([inFullscreen="true"]):not([sizemode="maximized"]) #toolbar-menubar[autohide="true"] ~ #TabsToolbar{ bottom: var(--tab-min-height) !important; padding-top: calc(var(--tab-min-height) - 20px) !important; /* may need adjustment */ } #tabbrowser-tabs { width: 100vw !important; } :root:not([chromehidden*="toolbar"]) #navigator-toolbox { padding-bottom: calc(var(--tab-min-height) + 1px); /* may need adjustment */ } /* TABS: height */ :root { --tab-toolbar-navbar-overlap: 0px !important; --tab-min-height: 25px !important; /* adjust */ } :root #tabbrowser-tabs { --tab-min-width: 80px !important; /* adjust */ } #tabbrowser-tabs, #tabbrowser-tabs > .tabbrowser-arrowscrollbox, .tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] { min-height: var(--tab-min-height) !important; max-height: var(--tab-min-height) !important; } #TabsToolbar { height: var(--tab-min-height) !important; margin-bottom: 1px !important; box-shadow: ThreeDShadow 0 -1px inset, -moz-dialog 0 1px !important; /* omit */ background-color: var(--toolbar-bgcolor) !important; color: var(--toolbar-color) !important; } /* indicators */ .private-browsing-indicator {display: none !important;} .accessibility-indicator {display: none !important;} /* drag space */ .titlebar-spacer[type="pre-tabs"], .titlebar-spacer[type="post-tabs"] { width: 20px !important; } /* Override vertical shifts when moving a tab */ #navigator-toolbox[movingtab] > #titlebar > #TabsToolbar { padding-bottom: unset !important; } #navigator-toolbox[movingtab] #tabbrowser-tabs { padding-bottom: unset !important; margin-bottom: unset !important; } #navigator-toolbox[movingtab] > #nav-bar { margin-top: unset !important; } /* windows controls - hide */ #TabsToolbar #window-controls {display: none !important;} /* caption box - hide */ :root[tabsintitlebar]:not([inFullscreen="true"]) #toolbar-menubar[autohide="true"] ~ #TabsToolbar .titlebar-buttonbox-container {display: none !important;} /* move caption buttons to right of Tab bar */ #main-window[tabsintitlebar]:not([inFullscreen="true"]) #toolbar-menubar[autohide="true"] ~ #TabsToolbar .titlebar-buttonbox-container { position: fixed !important; right: 0 !important; top: calc(6px + var(--tab-min-height)) !important; display: block !important; visibility: visible !important; } #toolbar-menubar[autohide="true"] ~ #TabsToolbar {padding-right: 100px !important;} /* URL bar on same level as Menu Bar */ :root{ --uc-navbar-height: 32px; } #TabsToolbar{-moz-box-ordinal-group: 2;} #toolbar-menubar{ height: var(--uc-navbar-height); background-color: var(--toolbar-bgcolor); } #nav-bar{ padding-right: 144px; margin-top: calc(var(--uc-navbar-height) * -1); margin-left: 300px; background-color: transparent !important; } /* Black background when loading new page */ browser { background-color: #000 !important; } /* tabs on bottom #navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10} #TabsToolbar {-moz-box-ordinal-group:1000!important} */ /* Change the tab-bar height tab {height: 20px !important; } .tabbrowser-strip { height: 20px !important; } */ #PanelUI-menu-button { display: none; } #nav-bar-overflow-button { display: none !important;} #back-button, #forward-button { display: none; } /* * Make the toolbar extra-compact (similar to v56 with CTR) * Applies to Compact density * Contributor(s): Alex Vallat * https://github.com/Timvde/UserChrome-Tweaks/blob/master/toolbars/compact-toolbars.css */ :root[uidensity=compact] #urlbar, :root[uidensity=compact] .searchbar-textbox { font-size: unset !important; min-height: 24px !important; } :root[uidensity=compact] #identity-box { max-height: 22px; } :root[uidensity=compact] #nav-bar .toolbarbutton-1 { padding: 0px !important; } /* Compatibility with auto-hide.css */ :root[uidensity=compact] #navigator-toolbox { --nav-bar-height: 31px !important; }
-
Changing the color of right click menu
But I got it to work by replacing the original context menu section (lines 34~574) with this css code
-
FF89 Context Menu Background Color
Hi everyone, I've been going over my entire userchrome since FF updated to 89 today, I cant seem to work out how to change the context menus background, it seems there is a new element that supersedes older css for the context menus, if you were to try this https://github.com/Timvde/UserChrome-Tweaks/blob/master/context-menu/dark-thin-context-menu.css
-
Firefox 89.0 Beta with New Look
If you need to tweak firefox interface more, these resources will help:
https://www.reddit.com/r/FirefoxCSS/
https://github.com/MrOtherGuy/firefox-csshacks
https://github.com/Timvde/UserChrome-Tweaks
-
CSS Deep
Timvde/UserChrome-Tweaks - A community maintained repository of userChrome.css tweaks for Firefox
Less
-
CSS Deep
mrkrupski/LESS-Dynamic-Stylesheet - A set of useful mixins for LESS, the CSS pre-processor: http://lesscss.org
-
Setting Up a JavaScript Build Process using Rollup
Now that we have addressed our scripts, we can focus on our styles. In this setup, we will look at the CSS preprocessor Less which lets us write CSS simpler, use variables and mixins. We can add it to the project with the following command:
What are some alternatives?
SpinKit - A collection of loading indicators animated with CSS
rollup-plugin-postcss - Seamless integration between Rollup and PostCSS.
humane-js - A simple, modern, browser notification system
Less Rails - :-1: :train: Less.js For Rails
css-loaders - A collection of loading spinners animated with CSS
Quiet Assets
FirefoxW10ContextMenus - Emulates the Windows 10 context menus in Firefox.
Sass - Sass makes CSS fun!
awesome-conferences
Emoji - A gem. For Emoji. For everyone. ❤
pnotify - Beautiful JavaScript notifications with Web Notifications support.
Gutenberg - Modern framework to print the web correctly.