Skip to content

Instantly share code, notes, and snippets.

@lazerl0rd
Last active April 2, 2020 15:05
Show Gist options
  • Save lazerl0rd/cdbf4a8f89ee56237ebc397a583e63ba to your computer and use it in GitHub Desktop.
Save lazerl0rd/cdbf4a8f89ee56237ebc397a583e63ba to your computer and use it in GitHub Desktop.
A userChrome.css for Firefox.
/*
CleanFox (A userChrome.css for Firefox)
By: Diab Neiroukh
Based-on: https://github.com/coekuss/quietfox by coekuss
Licensed-under: The MIT License
Last-updated: 23/Feb/2020
*/
* {
--tab-corner-rounding: 5px;
--button-corner-rounding: 4px;
--menu-item-height: 23px;
--animation-speed: 0.15s
}
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
tab[visuallyselected] .tab-background::after,tab[visuallyselected] .tab-background::before {
content: "" !important;
display: inline !important;
position: absolute !important;
width: var(--tab-corner-rounding) !important;
height: var(--tab-corner-rounding) !important;
bottom: -1px !important;
pointer-events: none !important;
background-color: transparent !important;
transition: var(--animation-speed) !important
}
tab[visuallyselected] .tab-background::before {
border-bottom-right-radius: var(--tab-corner-rounding) !important;
transform: translateX(calc(-1 * var(--tab-corner-rounding))) !important;
box-shadow: 4px 4px 0 4px var(--toolbar-bgcolor) !important;
transition: var(--animation-speed) !important
}
tab[visuallyselected] .tab-background::after {
border-bottom-left-radius: var(--tab-corner-rounding) !important;
right: 0 !important;
transform: translateX(calc(var(--tab-corner-rounding) + 1px)) !important;
box-shadow: -4px 4px 0 4px var(--toolbar-bgcolor) !important;
transition: var(--animation-speed) !important
}
.panel-arrowcontent,panelview:not([extension]) {
background-color: var(--toolbar-bgcolor) !important;
color: var(--toolbar-color) !important
}
.subviewbutton,.toolbarbutton-icon,stack,toolbarbutton,vbox {
transition: background-color var(--animation-speed) !important
}
.titlebar-spacer[type="pre-tabs"] {
border-inline-end: 0 !important;
width: 0 !important
}
scrollbox[part="scrollbox"][flex="1"][orient="horizontal"] {
padding-left: 12px !important
}
.tab-background,.tab-loading-burst {
border-radius: var(--tab-corner-rounding) var(--tab-corner-rounding) 0 0 !important;
margin: -1px !important
}
tab:not(:active) .tab-background {
transition: background-color var(--animation-speed) !important
}
:root[uidensity="compact"] {
--tab-min-height: 31px !important
}
tab:not([selected]):hover .tab-background {
background-color: var(--toolbarbutton-hover-background) !important
}
tab {
min-width: 1px !important;
clip-width: 1px !important;
padding-bottom: 1px !important
}
.tab-line {
display: none !important
}
tab:not([beforeselected-visible])::after {
margin-top: 4px !important;
margin-bottom: 4px !important;
transition: border-color var(--animation-speed), margin-top var(--animation-speed) !important
}
tab:hover::after,tab[beforehovered]::after {
border-color: transparent !important;
margin-top: 20px !important
}
#navigator-toolbox {
--tabs-border-color: transparent !important
}
tab[visuallyselected] {
box-shadow: 0 3px 12px -5px black !important
}
[last-visible-tab] {
margin-right: calc(var(--tab-corner-rounding) + 2px) !important
}
.toolbarbutton-badge-stack,.toolbarbutton-icon {
background-color: transparent !important
}
.toolbarbutton-1:not(#back-button)[open],toolbarbutton:not(#back-button)[open] {
background-color: var(--toolbarbutton-active-background)
}
#nav-bar .toolbarbutton-1 {
margin-right: 2px !important
}
.close-icon:not(.tab-close-button):hover {
fill-opacity: 0.0 !important
}
.toolbarbutton-1:not(#back-button):not([disabled]):not([open]):hover,toolbarbutton:not(#back-button):not([disabled]):not([open]):hover {
background-color: var(--toolbarbutton-hover-background) !important
}
.tab-close-button {
transition: fill-opacity var(--animation-speed) !important
}
.findbar-textbox:focus {
border: 1px solid grey !important
}
#BMB_bookmarksShowAll {
display: none !important
}
:root:not([uidensity="compact"]) #back-button > .toolbarbutton-icon {
background-color: transparent !important;
border: none !important;
transition: background-color var(--animation-speed) !important
}
:root:not([uidensity="compact"]) #back-button:not([disabled]):not([open]):hover > .toolbarbutton-icon {
background-color: var(--toolbarbutton-hover-background) !important;
box-shadow: none !important
}
:root:not([uidensity="compact"]) #back-button:not([disabled]):not([open]):active > .toolbarbutton-icon {
background-color: var(--toolbarbutton-active-background) !important;
box-shadow: none !important
}
.toolbarbutton-1:not(#back-button):not([disabled]):not([open]):active,:root:not([uidensity="compact"]) toolbarbutton:not(#back-button):not([disabled]):not([open]):active {
background-color: var(--toolbarbutton-active-background) !important
}
:root:not([uidensity="compact"]) #back-button[open] > .toolbarbutton-icon {
background-color: var(--toolbarbutton-active-background) !important
}
:root:not([uidensity="compact"]) #PersonalToolbar {
height: 30px !important
}
:root:not([uidensity="touch"]):not([uidensity="compact"]) #nav-bar .toolbarbutton-1:not(#back-button) {
margin: 4px 0 !important;
padding-left: 3px !important;
padding-right: 3px !important
}
:root:not([uidensity="touch"]):not([uidensity="compact"]) #nav-bar .toolbarbutton-1:not(#back-button) image {
margin-bottom: 1px !important
}
:root:not([uidensity="touch"]):not([uidensity="compact"]) #back-button {
margin-top: -1px !important;
margin-bottom: -1px !important
}
:root:not([uidensity="touch"]):not([uidensity="compact"]) #identity-box,:root:not([uidensity="touch"]):not([uidensity="compact"]) #tracking-protection-icon-container {
padding-left: 8px !important;
padding-right: 8px !important
}
:root:not([uidensity="touch"]):not([uidensity="compact"]) #identity-icon,:root:not([uidensity="touch"]):not([uidensity="compact"]) #tracking-protection-icon-box {
margin-left: 1px !important;
margin-right: 1px !important
}
:root:not([uidensity="touch"]):not([uidensity="compact"]) #urlbar {
height: 36px !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important
}
:root:not([uidensity="touch"]):not([uidensity="compact"]) .urlbar-icon:not(#pocket-button) {
width: 34px !important;
height: 36px !important;
padding: 8px !important
}
:root:not([uidensity="touch"]):not([uidensity="compact"]) #pocket-button {
width: 32px !important;
height: 36px !important;
padding: 8px 8px 6px 8px !important
}
:root:not([uidensity="touch"]):not([uidensity="compact"]) #contextual-feature-recommendation {
width: 32px !important;
height: 32px !important;
padding: 2px !important
}
:root:not([uidensity="touch"]):not([uidensity="compact"]) #PanelUI-button {
padding-right: 5px !important;
padding-left: 5px !important;
margin-left: 5px !important
}
:root:not([uidensity="touch"]):not([uidensity="compact"]) #library-animatable-box {
margin-top: 4px !important
}
:root:not([uidensity="touch"]):not([uidensity="compact"]) #tabs-newtab-button {
margin-left: -5px !important;
padding-left: 2px !important;
margin-bottom: 1px !important;
padding-bottom: 1px !important
}
:root[uidensity="compact"] #nav-bar .toolbarbutton-1 {
margin-top: 4px !important;
margin-bottom: 4px !important;
padding: 0 0 0 0 !important
}
:root[uidensity="compact"] #nav-bar toolbaritem[animate] box {
margin-top: 1px !important
}
:root[uidensity="compact"] #back-button[open] {
background-color: var(--toolbarbutton-active-background) !important
}
:root[uidensity="compact"] #back-button:not([disabled]):not([open]):hover {
background-color: var(--toolbarbutton-hover-background) !important
}
:root[uidensity="compact"] #back-button:not([disabled]):not([open]):active {
background-color: var(--toolbarbutton-active-background) !important
}
:root[uidensity="compact"] #identity-box,:root[uidensity="compact"] #tracking-protection-icon-container {
min-width: 2px !important;
padding-left: 6px !important;
padding-right: 6px !important
}
:root[uidensity="compact"] #nav-bar {
padding-top: 1px !important
}
:root[uidensity="compact"] #urlbar {
height: 30px !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-bottom: 0 !important
}
:root[uidensity="compact"] .urlbar-icon:not(#pocket-button) {
width: 28px !important;
height: 30px !important;
padding: 6px !important
}
:root[uidensity="compact"] #pocket-button {
width: 28px !important;
height: 40px !important;
padding: 7px 6px 5px 6px !important
}
:root[uidensity="compact"] #contextual-feature-recommendation {
width: 32px !important;
height: 32px !important;
padding: 2px !important
}
:root[uidensity="compact"] #PersonalToolbar {
height: 25px !important
}
:root[uidensity="compact"] #library-animatable-box {
margin-top: 5px !important
}
:root[uidensity="compact"] #tabs-newtab-button {
margin-left: -5px !important;
margin-bottom: 1px !important;
padding-bottom: 1px !important
}
:root[uidensity="touch"] #nav-bar .toolbarbutton-1:not(#back-button) {
margin-top: 5px !important;
margin-bottom: 3px !important;
padding-left: 0 !important;
padding-right: 0 !important
}
:root[uidensity="touch"] #stop-reload-button[animate] .toolbarbutton-animatable-image {
margin-top: 2px !important
}
:root[uidensity="touch"] #identity-box,:root[uidensity="touch"] #tracking-protection-icon-container {
padding-left: 9px !important;
padding-right: 9px !important
}
:root[uidensity="touch"] #urlbar {
height: 36px !important;
margin-top: 0 !important;
margin-bottom: 0 !important
}
:root[uidensity="touch"] #nav-bar {
padding-top: 2px !important
}
:root[uidensity="touch"] .urlbar-icon:not(#pocket-button) {
width: 34px !important;
height: 36px !important;
padding: 9px !important
}
:root[uidensity="touch"] #pocket-button {
width: 34px !important;
height: 36px !important;
padding: 10px 7px 8px 7px !important
}
:root[uidensity="touch"] #contextual-feature-recommendation {
width: 32px !important;
height: 33px !important;
padding: 2px !important
}
:root[uidensity="touch"] #PanelUI-button {
padding-left: 5px !important;
padding-right: 5px !important
}
:root[uidensity="touch"] tab {
height: 40px !important
}
:root[uidensity="touch"] #library-animatable-box {
margin-top: 7px !important
}
:root[uidensity="touch"] #tabs-newtab-button {
margin-left: -5px !important;
margin-bottom: 2px !important;
padding-right: 3px !important;
padding-left: 3px !important;
padding-bottom: 1px !important
}
#identity-box,#reader-mode-button,#tracking-protection-icon-container,.toolbarbutton-1 > stack,.urlbar-history-dropmarker,.urlbar-input-box,.urlbar-page-action,[anonid=urlbar-go-button],toolbarbutton:not(.titlebar-button):not([class^="findbar-find"]):not([class^="scrollbutton"]),.close-icon {
border-radius: var(--button-corner-rounding)!important
}
.findbar-find-next {
border-radius: 0 var(--button-corner-rounding) var(--button-corner-rounding) 0 !important
}
.findbar-textbox {
border-radius: var(--button-corner-rounding) 0 0 var(--button-corner-rounding) !important
}
.bookmark-item {
padding-left: 7px !important;
padding-right: 7px !important;
margin-right: 0 !important
}
#urlbar {
border-radius: calc(1px + var(--button-corner-rounding)) !important
}
#identity-box {
margin-right: 0 !important
}
#urlbar {
border-color: transparent !important;
box-shadow: none !important
}
#tracking-protection-icon-container {
border-inline-end: none !important
}
#pageActionSeparator {
display: none !important
}
#userContext-indicator,#userContext-label,.urlbar-icon {
fill: transparent !important;
background-color: transparent !important;
color: transparent !important;
transition: var(--animation-speed) !important
}
#urlbar:active .urlbar-icon,#urlbar:hover .urlbar-icon,#urlbar[focused] .urlbar-icon {
fill: var(--toolbar-color) !important
}
#urlbar:active #userContext-indicator,#urlbar:active #userContext-label,#urlbar:hover #userContext-indicator,#urlbar:hover #userContext-label,#urlbar[focused] #userContext-indicator,#urlbar[focused] #userContext-label {
color: var(--identity-tab-color) !important;
fill: var(--identity-tab-color) !important
}
.urlbar-page-action[open] {
background-color: var(--toolbarbutton-active-background) !important;
fill: var(--toolbar-color) !important
}
.urlbar-page-action[open]:hover {
background-color: var(--toolbarbutton-active-background) !important;
fill: var(--toolbar-color) !important
}
.urlbar-page-action[open] .urlbar-icon {
fill: var(--toolbar-color) !important
}
.urlbar-scheme {
padding-bottom: 11px !important
}
#urlbar-container {
margin-left: -1px !important;
margin-right: -1px !important
}
.urlbar-input-box {
padding: 5px 5px !important
}
#urlbar {
background-color: transparent !important;
color: var(--lwt-toolbar-field-color, black) !important
}
#urlbar:not(.hidden-focus)[focused="true"] {
background-color: var(--toolbarbutton-hover-background) !important
}
#pocket-button {
padding-bottom: 4px !important
}
.urlbar-icon-wrapper > .urlbar-icon:hover {
background-color: transparent !important
}
.urlbar-icon-wrapper {
background-color: transparent !important;
transition: background-color var(--animation-speed) !important
}
#identity-box:hover,#tracking-protection-icon-container:hover,#urlbar:not([focused]) .urlbar-input-box:hover,.urlbar-icon-wrapper:hover,.urlbar-icon:hover,[anonid=urlbar-go-button]:hover {
background-color: var(--toolbarbutton-hover-background) !important
}
#identity-box:active,#tracking-protection-icon-container:active,.urlbar-icon-wrapper:active,.urlbar-icon:active,[anonid=urlbar-go-button]:active {
background-color: var(--toolbarbutton-active-background) !important
}
#identity-box,#tracking-protection-icon-container,#urlbar,.urlbar-input-box,[anonid=urlbar-go-button] {
transition: background-color var(--animation-speed) !important
}
#identity-box image,#tracking-protection-icon {
transition: fill-opacity var(--animation-speed) !important
}
[lwthemetextcolor="dark"] .urlbarView-body-outer {
background-color: #f5f6f7 !important;
color: var(--toolbar-color) !important
}
.urlbarView-body-inner {
background-color: var(--toolbar-bgcolor) !important
}
.downloadsPanelFooterButton:hover {
outline: none !important
}
#context-bookmarklink,#context-navigation,#context-savelink,#context-sendimage,#context-sep-navigation,#context-setDesktopBackground,#context-viewinfo,#context-viewpartialsource-selection,#context_bookmarkTab,#context_moveTabOptions,#context_reloadTab,#inspect-separator,.bookmarks-actions-menuseparator,.openintabs-menuitem {
display: none !important
}
menupopup,menupopup menu,menupopup menuitem,menupopup menuseparator {
-moz-appearance: none !important
}
menupopup:not(#BMB_bookmarksPopup) {
padding: 6px 9px 9px !important;
margin: -6px -9px 0 !important;
border: 0 !important;
background: 0 !important
}
menu[open] menupopup:not(#BMB_bookmarksPopup) {
margin: -12px -9px 0 !important
}
#BMB_bookmarksPopup menu[open] menupopup {
transform: translateY(4px) !important
}
menupopup menuseparator {
margin-top: 5px !important;
margin-bottom: 5px !important;
padding: 0 !important;
border-bottom: none !important;
opacity: 0.2 !important
}
.popup-internal-box {
background: Menu !important
}
.popup-internal-box:not(.in-bookmarks-menu) {
padding: 6px 0 !important
}
.panel-arrowcontent {
padding-top: 0 !important;
border: none !important
}
.popup-internal-box:not(.in-bookmarks-menu) {
border-radius: var(--menu-corner-rounding) !important;
box-shadow: 0 2px 9px -3px black !important
}
.panel-arrowcontainer .panel-arrowcontent,.popup-internal-box,hbox[flex="1"][part="innerbox"] {
border-radius: var(--menu-corner-rounding) !important
}
.in-bookmarks-menu {
padding-bottom: 5px !important;
padding-top: 5px !important
}
menu,menucaption,menuitem {
-moz-appearance: none !important;
height: var(--menu-item-height) !important
}
menu,menucaption,menuitem {
padding-left: 5px !important;
padding-right: 5px !important
}
menu:not(.subviewbutton) > .menu-right {
margin-top: 2px !important;
margin-right: 0 !important;
width: 0 !important
}
menu:not(.subviewbutton) > .menu-right image {
margin-right: -5px !important;
margin-top: -2px !important;
border: 6px solid var(--toolbar-color) !important;
border-top-color: transparent !important;
border-right-color: transparent !important;
border-bottom-color: transparent !important
}
panelview toolbarbutton:not(#fxa-manage-account-button) {
height: var(--menu-item-height) !important
}
#BMB_bookmarksPopup .menu-right {
height: 23px !important
}
#customization-uidensity-menuitem-compact,#sidebar-switcher-bookmarks {
margin-top: 5px !important
}
#customization-lwtheme-menu-header {
margin-top: 0 !important
}
@media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8), (-moz-os-version: windows-win10) {
.bookmark-item .scrollbutton-up {
margin-top: -3px !important
}
.bookmark-item .scrollbutton-up > .toolbarbutton-icon {
margin-top: -2px !important;
border: 6px solid MenuText !important;
border-top-color: transparent !important;
border-right-color: transparent !important;
border-left-color: transparent !important
}
.bookmark-item .scrollbutton-down {
margin-bottom: -3px !important
}
.bookmark-item .scrollbutton-down > .toolbarbutton-icon {
margin-bottom: -2px !important;
border: 6px solid MenuText !important;
border-bottom-color: transparent !important;
border-right-color: transparent !important;
border-left-color: transparent !important
}
menu,menucaption,menuitem {
padding-left: 5px !important;
padding-right: 5px !important
}
menu:not(.subviewbutton) > .menu-right {
margin-right: 0 !important;
padding-left: 0 !important
}
.in-bookmarks-menu {
padding-bottom: 5px !important;
padding-top: 1px !important
}
#BMB_bookmarksPopup menu menupopup {
transform: translateY(-1px) !important
}
* {
--menu-corner-rounding: 0px;
}
}
@media not (-moz-os-version: windows-win10) {
@media not (-moz-os-version: windows-win8) {
@media not (-moz-os-version: windows-win7) {
hbox[flex="1"][part="innerbox"] {
box-shadow: 0px 2px 12px -6px black !important;
}
.menu-iconic-left {
margin: 0px 6px !important;
}
#BMB_bookmarksPopup menu[open] menupopup {
transform: translateY(1px) !important;
}
#TabsToolbar {
-moz-appearance: none !important;
background-color: rgba(49,49,58,0.2) !important;
background-image: none !important
}
* {
--menu-corner-rounding: 5px;
}
}
}
}
menu,menucaption,menuitem {
color: var(--toolbar-color) !important
}
.popup-internal-box {
background-color: var(--toolbar-bgcolor, Menu) !important
}
menu[_moz-menuactive="true"]:not([disabled="true"]),menuitem[_moz-menuactive="true"]:not([disabled="true"]),menucaption[_moz-menuactive="true"]:not([disabled="true"]) {
background-color: var(--toolbarbutton-hover-background, rgba(127,127,127,0.5)) !important
}
menu[disabled="true"],menuitem[disabled="true"],menucaption[disabled="true"] {
color: var(--toolbarbutton-hover-background, rgba(127,127,127,0.5)) !important
}
menu[disabled="true"][_moz-menuactive="true"],menuitem[disabled="true"][_moz-menuactive="true"],menucaption[disabled="true"][_moz-menuactive="true"] {
background-color: transparent !important
}
.panel-arrow {
fill: var(--toolbar-bgcolor) !important
}
[lwthemetextcolor="dark"] .panel-arrowcontent,[lwthemetextcolor="dark"] panelview:not([extension]) {
background-color: #f5f6f7 !important
}
.panel-subview-body {
background-color: var(--toolbar-bgcolor) !important
}
#downloadsPanel-mainView {
background-color: var(--toolbar-bgcolor) !important
}
#identity-popup-mainView {
background-color: var(--toolbar-bgcolor) !important
}
#identity-popup-content-blocking-detected {
color: var(--toolbar-active-background) !important
}
#identity-popup-permission-empty-hint {
color: var(--toolbar-active-background) !important
}
.identity-popup-warning-yellow {
color: black !important
}
panel:not([viewId^="PanelUI-webext"]) .panel-arrow {
fill: var(--toolbar-bgcolor) !important
}
.bookmark-item [class^="scrollbutton"] {
background-color: var(--toolbar-bgcolor) !important
}
.theme-body {
background: transparent !important
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment