UserChrome.css (One Liner Firefox) #archived

userChrome.css [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/[email protected]
*/
#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; }

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;
}

2. 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]