UserChrome-Tweaks
hint.css
UserChrome-Tweaks | hint.css | |
---|---|---|
8 | 5 | |
1,166 | 8,409 | |
- | - | |
0.6 | 7.1 | |
almost 3 years ago | 5 months ago | |
CSS | CSS | |
GNU General Public License v3.0 only | MIT License |
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
hint.css
-
Japanese Hover Over
For example: https://kushagra.dev/lab/hint/ {{Front}} Type the above content into the card template. Place the cursor over the text in the "Front" field and the contents of the "Back" field will appear.
- Hint.css: crea botones con infografĂas para tu sitio web
-
Making a URL Shortener website using Axios
First we will talk about the requirements and dependencies of this project. In this project we will use Axios to make a HTTP request (you can also use XML request for Fetch api to do the same), and Hint.css for hints (not necessary).
-
CSS Deep
chinchang/hint.css - A CSS only tooltip library for your lovely websites.
What are some alternatives?
SpinKit - A collection of loading indicators animated with CSS
qTip2
humane-js - A simple, modern, browser notification system
jquery-popup-overlay - jQuery plugin for responsive and accessible modal windows and tooltips
css-loaders - A collection of loading spinners animated with CSS
tipsy - Facebook-style tooltips plugin for jQuery
FirefoxW10ContextMenus - Emulates the Windows 10 context menus in Firefox.
tooltipster - A jQuery tooltip plugin
awesome-conferences
simptip - A simple CSS tooltip made with Sass
pnotify - Beautiful JavaScript notifications with Web Notifications support.
toolbar - A tooltip style toolbar jQuery plugin