Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
UserChrome.css (One Liner Firefox) #archived
/*
# ========================================================= #
# One Liner Firefox userChrome.css #
# Created by: spcmd #
# Website: http://spcmd.github.io #
# https://github.com/spcmd #
# https://gist.github.com/spcmd #
# ========================================================= #
*/
/*
* One Liner style Firefox customization
* Depends on: Classic Theme Restorer (Customize UI)
* Download: https://addons.mozilla.org/en-US/firefox/addon/classicthemerestorer/
* Icon sprite generated with: http://spritegen.website-performance.org/
*/
/* =========================== */
/* ====== BOOKMARK STUFF ====== */
/* =========================== */
/* Dropdown menu, bookmark folder dropdown */
menupopup { padding:5px 0 5px 0!important; }
/* Margin for the first menu items and boomark folder items */
menupopup menuitem, menupopup menu {margin-top: 2px!important;}
/* Margin for the last menu items and boomark folder items */
menupopup menuitem:nth-last-child(4) {margin-bottom: 4px!important;}
/* Sub bookmark folder style in bookmark folder */
menu.bookmark-item {}
/* Show subfolder icons in bookmark folders */
menu.bookmark-item > .menu-iconic-left { visibility: visible!important;}
/* Remove dropdown arrows from the right side of the folders */
dropmarker { -moz-appearance: none!important; }
/* ================================= */
/* ====== TAB & TOOLBAR STUFF ====== */
/* ================================= */
/* Url bar fixing */
#urlbar-container {padding:0!important;margin-left:-2px!important;}
#urlbar-wrapper { margin-top:-2px!important;}
#urlbar {
padding-right:4px!important;
height:32px!important;
margin-bottom:-2px!important;
background:#f5f5f5!important;
}
/*
Classic Theme Restorer fix:
Remove CTR's !important settings from urlbar border and highlight
Need to extract the .xpi and comment out these styles below in /content/css/linux/back-forwardextra.css
The installed xpi can be found here: ~/.mozilla/firefox/PROFILEDIR/extensions/ClassicThemeRestorer@SOMESTRING.xpi
*/
#main-window[defaultfxtheme="true"] * #urlbar,
#main-window[defaultfxtheme="true"] #nav-bar .searchbar-textbox { border: 1px solid #9B9B9B !important; }
#main-window[defaultfxtheme="true"] * #urlbar[focused],
#main-window[defaultfxtheme="true"] * .searchbar-textbox[focused] { border-color: #9B9B9B !important; }
/* Hide the dropmarker in the Address/URL bar */
.autocomplete-history-dropmarker { display: none !important; }
/* Hide nav bar - for one liner firefox */
#nav-bar { display:none!important; }
/* Hide the long verified site label in the urlbar */
#identity-icon-labels { display: none !important; }
/* Verified site lock icon */
#identity-box.verifiedIdentity:not(:-moz-lwtheme) { background-color:#F5F5F5!important; }
/* Notification icon in the urlbar (e.g. activate flash plugin) */
#notification-popup-box {
background-color: #f5f5f5!important;
padding-left: 0!important;
border-bottom: 1px solid #a8a8a8!important;
border-right:1px solid #a8a8a8!important;
border-image: none!important;
}
/* Remove toolbarbuttons/icons padding */
toolbarbutton { padding:0!important; }
/* Fix toolbar text color */
.toolbarbutton-text { color:#000!important; }
/* Fix search bar's prev/next button padding */
.findbar-find-previous > .toolbarbutton-icon,
.findbar-find-next > .toolbarbutton-icon {
padding-left:5px!important;
padding-right:5px!important;
}
/*
Custom back/forward arrow
Need to tick the 'Movable back-forward buttons' option in Classic Theme
Restorer's Preferences/General UI (1)
*/
#ctraddon_back-button > .toolbarbutton-icon {
background: url("http://i.imgur.com/NbLMIbM.png")!important;
background-position: -6px -11px!important;
width: 9px!important;
height: 16px!important;
list-style:none!important;
margin:0 2px!important;
}
#ctraddon_forward-button > .toolbarbutton-icon {
background: url("http://i.imgur.com/NbLMIbM.png")!important;
background-position: -128px -11px!important;
width: 9px!important;
height: 16px!important;
list-style:none!important;
margin:0 2px!important;
}
/* Custom CTR bookmark icon */
#ctraddon_bookmarks-menu-toolbar-button > .toolbarbutton-icon,
#ctraddon_bookmarks-button > .toolbarbutton-icon,
#ctraddon_bookmarks-menu-toolbar-button:-moz-lwtheme-brighttext > .toolbarbutton-icon,
#ctraddon_bookmarks-button:-moz-lwtheme-brighttext > .toolbarbutton-icon
{
list-style-image: none!important;
}
#ctraddon_bookmarks-menu-toolbar-button {
background: url("http://i.imgur.com/NbLMIbM.png")!important;
background-position: -34px -3px!important;
width: 30px!important;
height: 17px!important;
}
/* Bookmarks Toolbar's items */
#PlacesToolbarItems { margin-left:5px!important;}
/* Remove the "hover effect" from bookmarks toolbar's items & fix margin */
#PlacesToolbarItems > .bookmark-item:hover {
-moz-appearance:none!important;
margin-left:5px!important;
margin-right:5px!important;
}
/* Downloads icon */
#downloads-button > image {
background: url("http://i.imgur.com/NbLMIbM.png")!important;
background-position: -222px 1px!important;
width: 32px!important;
height: 31px!important;
list-style:none!important;
}
#downloads-indicator-icon {
background: url("http://i.imgur.com/NbLMIbM.png")!important;
background-position: -228px -5px!important;
width: 18px!important;
height: 17px!important;
list-style:none!important;
}
/* Download toolbar - remaining time */
#downloads-indicator-counter {
color: #000!important;
text-shadow:none!important;
}
/* Menu icon */
#PanelUI-menu-button {
background: url("http://i.imgur.com/NbLMIbM.png")!important;
background-position: -157px 0px!important;
width: 17px!important;
height: 11px!important;
list-style:none!important;
}
/* Remove the "hover effect" from toolbar buttons */
:root {
--toolbarbutton-hover-background: none!important;
--toolbarbutton-hover-boxshadow: none!important;
--toolbarbutton-hover-bordercolor: transparent!important;
--toolbarbutton-active-boxshadow: none!important;
--toolbarbutton-active-bordercolor: transparent!important;
--toolbarbutton-active-background: none!important;
--toolbarbutton-checkedhover-backgroundcolor: none!important;
--toolbarbutton-combined-boxshadow: none!important;
--toolbarbutton-combined-backgroundimage: none!important;
}
/* Center tab title */
.tab-text { text-align: center !important; }
/* Tab width */
.tabbrowser-tab:not([pinned]) {
width: 150px !important;
min-width:40px!important;
}
/* Tab style */
#TabsToolbar .arrowscrollbox-scrollbox { padding: 0 !important; }
#TabsToolbar .tabbrowser-tabs { min-height: 26px !important; }
#TabsToolbar .tabbrowser-tab {
text-shadow: none !important;
background-clip: padding-box !important;
margin: 1px 1px 1px 0 !important;
}
#TabsToolbar .tabbrowser-tab:first-child {
border-left:solid 1px #9B9B9B!important;
-moz-border-top-colors: #9B9B9B !important;
-moz-border-left-colors: #9B9B9B !important;
-moz-border-right-colors: #9B9B9B !important;
-moz-border-bottom-colors: #9B9B9B !important;
}
#TabsToolbar .tabbrowser-tab:not(:first-child) {
-moz-border-top-colors: none !important;
-moz-border-left-colors: none !important;
-moz-border-right-colors: none !important;
-moz-border-bottom-colors: none !important;
border-left:solid 1px #9B9B9B!important;
}
#TabsToolbar .tabbrowser-tab:last-child { border-right:solid 1px #9B9B9B!important; }
#TabsToolbar .tabbrowser-tab[selected] { background: #EFEFEF !important; }
#TabsToolbar .tabs-newtab-button {
background: url("http://i.imgur.com/NbLMIbM.png")!important;
background-position: -199px -3px!important;
width: 14px!important;
height: 14px!important;
list-style-image: none !important;
margin:2px 4px!important;
}
.tabbrowser-tab:not([selected]) .tab-text.tab-label { color:#535353!important; }
/* Tab close button */
.tab-close-button.close-icon {
opacity:0.65!important;
background: url("http://i.imgur.com/NbLMIbM.png")!important;
background-position: -72px -6px!important;
}
.tab-close-button.close-icon:hover {
opacity:1!important;
background: url("http://i.imgur.com/NbLMIbM.png")!important;
background-position: -100px -6px!important;
}
.tabbrowser-tab:not([selected]) .tab-close-button.close-icon {
opacity:0.35!important;
}
.tabbrowser-tab:not([selected]) .tab-close-button.close-icon:hover {
opacity:1!important;
}
/* fixing the curved tab style */
#TabsToolbar .tab-background {
margin: 0 !important;
background: transparent !important;
}
#TabsToolbar .tab-background-start,
#TabsToolbar .tab-background-end { display: none !important; }
#TabsToolbar .tab-background-middle {
margin: -4px -2px !important;
background: transparent !important;
}
#TabsToolbar .tabbrowser-tab:after,
#TabsToolbar .tabbrowser-tab:before { display: none !important; }
#TabsToolbar .tab-throbber:not([pinned]),
#TabsToolbar .tab-icon-image:not([pinned]) { -moz-margin-start: -4px !important; }
.tab-close-button:not([pinned]) { -moz-margin-end: -4px !important; }
#TabsToolbar .toolbarbutton-1 { margin-bottom: -1px !important; }
@koolx
Copy link

koolx commented Mar 13, 2017

I got 2 problems with customizing FF:

  1. I use the code below to darken the background of the drop down of the address bar. It works well but it also darkens the background color of the drop down of fields in webpages. How do I prevent the code from affecting the background color of the drop down fields in webpages?

.autocomplete-richlistbox {
color: white !important;
background: linear-gradient(to bottom, #222 0%,#444 100%) !important;
}

  1. Look at the attached screen shot circled in red. Whats the code to darken the background color of the top part of the right-click menu?

[url=https://postimg.org/image/41wa3i0qh/][img]https://s4.postimg.org/41wa3i0qh/menu_top_part.jpg[/img][/url]

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