firefox css oled friendly

userChrome.css

:root{
  --uc-autohide-toolbox-delay: 200ms; /* Wait 0.1s before hiding toolbars */
}

#navigator-toolbox{
  transition: opacity 82ms linear !important;
  transition-delay: var(--uc-autohide-toolbox-delay) !important;
  transform-origin: top;
  opacity: 0;
}

/* #mainPopupSet:hover ~ box > toolbox, */
/* Uncomment the above line to make toolbar visible if some popup is hovered */
#navigator-toolbox:hover,
#navigator-toolbox:focus-within{
  transition-delay: 33ms !important;
  opacity: 1;
}

 :root{
  --toolbar-bgcolor: rgb(0, 0, 0) !important;
  --uc-menu-bkgnd: rgb(0, 0, 0);
  --arrowpanel-background: rgb(0, 0, 0) !important;
  --autocomplete-popup-background: rgb(0, 0, 0) !important;
  --uc-menu-disabled: rgb(0, 0, 0) !important;
  --lwt-toolbar-field-focus: rgb(0, 0, 0) !important;
  border-width: 0px;
}

#sidebar-box{ --sidebar-background-color: rgb(0, 0, 0) !important; } 
window.sidebar-panel{ --lwt-sidebar-background-color: rgb(36,44,59) !important; }

#navigator-toolbox-background {
  background-color: black;
}

/* Denizjcan#2050 discord*/

/* H I D I N G   E L E M E N T S */
/* Comment or uncomment depending of what elements you want to hide */

/* hide new "extensions" icon */
#unified-extensions-button {display: none !important;}

/* hide "Overflow" icon */
#nav-bar-overflow-button { display: none !important; }

/* hide "Zoom" indicator */
#urlbar-zoom-button { display: none !important; }

/* hide "Shield" icon */
#tracking-protection-icon-container { display: none !important }

/* hide "Site information" button */
#identity-box { display: none !important }

/* hide "tab list" */
#alltabs-button { display: none !important; }

/* hide "panel button" */
#PanelUI-button { display: none !important } */


/* autohide back&forward button */
#forward-button {
  
	transform: scale(1, 1) !important;
	transition: margin-left 150ms var(--animation-easing-function), opacity 250ms var(--animation-easing-function), transform 350ms var(--animation-easing-function) !important;
}

#forward-button[disabled="true"] {
  margin-top: 1.2px !important;
	margin-left: -22px !important;
	opacity: 0 !important;
	transform: scale(0.8, 0.8) !important;
	pointer-events: none !important;
}

#back-button {
  margin-top: 1.2px !important;
	transform: scale(1, 1) !important;
	transition: margin-left 150ms var(--animation-easing-function), opacity 250ms var(--animation-easing-function), transform 350ms var(--animation-easing-function) !important;
}

#back-button[disabled="true"] {
  margin-top: 1.2px !important;
	margin-left: -26px !important;
	opacity: 0 !important;
	transform: scale(0.8, 0.8) !important;
	pointer-events: none !important;
}

/*============================================================================*/
/* T A B S*/

 /* ----- move tab close button to the left ----- */

 .tabbrowser-tab:not(:hover) .tab-close-button{
  padding-inline: 0px !important;   
  opacity:0;
  display: none !important;
}

.tabbrowser-tab:not([pinned]):hover .tab-close-button{
	 -moz-box-ordinal-group: 0 !important;
     margin-inline: -5px 2.5px !important;
     display:-moz-box !important;
     opacity:1;
	 border-radius: 6px !important;
}

 .tabbrowser-tab:not([pinned="true"]):hover .tab-icon-stack {
   -moz-box-ordinal-group: 99999 !important;
 }
 .tabbrowser-tab:not([pinned="true"]):hover .tab-icon-stack:not([indicator-replaces-favicon]) {
   display: none;
 }


/* ----- pinned tab width ----- */
.tabbrowser-tab[pinned] { 
width: 67px !important; 
}

.tab-icon-image[pinned] { 
margin-left: 13px !important; 
}
.tab-label-container[pinned] { visibility: hidden !important; }

/* ----- space between tabs (4px is Safari default) ----- */
.tabbrowser-tab{
  padding-inline: 4px !important;
}
.tabbrowser-tab[first-visible-tab] {
  padding-inline-start: 3px !important;
}


/*============================================================================*/
/* S E T T I N G S */

/* adaptive tab width */
.tabbrowser-tab[selected][fadein]:not([pinned]) { max-width: 340px !important; }
.tabbrowser-tab[selected][fadein]:not([pinned]) { min-width: 150px !important; }
.tabbrowser-tab[fadein]:not([selected]):not([pinned]) { max-width: 150px !important; }
.tabbrowser-tab[fadein]:not([selected]):not([pinned]) { min-width: 69px !important; }

/* main */
:root {
  --navbarWidth     : 30vw; /* Set width of navbar. Use px for a fixed width 
                                or vw for a percentage of your window. */
  --animationSpeed  : 0.15s;
}

:root {
  --tab-min-height: 28px !important;
}

:root #tabbrowser-tabs {
  --tab-min-height: 28px !important;
}

/* Thanks @linitfor <3 , url bar text padding */
#urlbar-input {
  transition: transform .1s linear;
  transform: none !important;
  padding-left: 13px !important;
}


/*============================================================================*/
/* B U T T O N   S T Y L E S */

#forward-button {
  list-style-image: url(window/right-arrow.svg) !important;
}

#back-button {
  list-style-image: url(window/left-arrow.svg) !important;
}

#sidebar-button {
  list-style-image: url(window/sidebar.svg) !important;
}

.tab-close-button {
  list-style-image: url(window/tabclose.svg) !important;
}


/*============================================================================*/
/* O N E L I N E   T W E A K */

#TabsToolbar {
  margin-left : var(--navbarWidth) !important;
  margin-bottom  : 6px !important;
}

#nav-bar {
  margin-right: calc(100vw - var(--navbarWidth)) !important;
}

#urlbar-container {
  min-width   : 100px !important;
}

#urlbar[breakout][breakout-extend] {
  min-width: 420px !important;
}

:root[uidensity="compact"] #nav-bar {
  margin-top  : -34px !important;
  height      : 37px !important;
}

:root:not([uidensity="compact"]):not([uidensity="touch"]) #nav-bar {
  margin-top  : -40px !important;
  height      : 31px !important;
}

:root[uidensity="touch"] #nav-bar {
  margin-top  : -30px !important;
  height      : 52px !important;
}


/* Dragging space */
:root[sizemode="maximized"] #TabsToolbar {
  margin-top: 1px;
}

#TabsToolbar {
  margin-top: -2px;
  padding-top: -10px !important;
}


/* Simplifying interface */

#nav-bar {
  background  : none !important;
  box-shadow  : none !important;
  
}


.titlebar-spacer {
  display     : -moz-box !important;
  width      : 10px !important;
}

#urlbar-background,#urlbar {
  margin-top: 0.7px;
  margin-left: 5px;
  border: 1px !important;
  border-radius: 6px !important;
  opacity: 0.9 !important;
  }
 
#urlbar:not(:hover):not([breakout][breakout-extend]) > #urlbar-background {
  box-shadow  : none !important;
  background  : none !important;
}


/* Hide urlbar elements when not active */

.urlbar-icon, #userContext-indicator, #userContext-label {
  fill        : transparent !important;
  background  : transparent !important;
  color       : transparent !important;
}

#urlbar:hover .urlbar-icon,
#urlbar:active .urlbar-icon, 
#urlbar[focused] .urlbar-icon {
 fill        : var(--toolbar-color) !important;
}


/* animations */
.subviewbutton,
#urlbar-background,
.urlbar-icon,
#userContext-indicator,
#userContext-label,
.urlbar-input-box, 
#identity-box,
#tracking-protection-icon-container,
[anonid=urlbar-go-button],
.urlbar-icon-wrapper,
#tracking-protection-icon,
#identity-box image,
stack,
tab:not(:active) .tab-background,
tab:not([beforeselected-visible])::after,
tab[visuallyselected] .tab-background::before,
tab[visuallyselected] .tab-background::before,
.tab-close-button {
  transition  : var(--animationSpeed) !important;
}


/*============================================================================*/
/* ----- M O V E   CLOSE/MINIMIZE/MAXIMIZE  B U T T O N S   T O   T H E   L E F T ----- */
/* @linitfor make the icons to stay colored even when not hovered. I liked it so I decided to keep it that way.*/
/* #nav-bar {padding-left: -12px;} */

#navigator-toolbox:not([inFullscreen]) #TabsToolbar .titlebar-buttonbox-container {
	visibility: visible !important;
	/* display: block !important;
	position: absolute !important;
    top: 20px;
    left: 0; */
}

/* #TabsToolbar .titlebar-buttonbox-container {
	-moz-box-ordinal-group: 0 !important; 
} */

:root[sizemode="maximized"] .titlebar-buttonbox-container{
	padding-top: 0px !important;
}
 
:root:-moz-window-inactive:not([customizing])
    :is(.titlebar-buttonbox)
    > toolbarbutton:not(:hover) {
	opacity: 0.65 !important;
    list-style-image: url(window/inactive.svg) !important;
}

:is(.titlebar-buttonbox) .toolbarbutton-icon {
	opacity: 1 !important;
    appearance: none !important;
}

.titlebar-button > .toolbarbutton-icon {
    width: 12px !important;
	min-width: 12px !important;
	min-height: 12px !important;
    height: 12px !important;
    stroke: none !important;
}


.titlebar-buttonbox {
    margin-right: 12px !important;
    margin-left: 12px !important;
}

.titlebar-close {
    appearance: none !important;
    padding: 0px !important;
    padding-left: 6px !important;
    padding-right: 5px !important;
    margin: 0px !important;
    background-color: transparent !important;
    /* -moz-box-ordinal-group: 3 !important; */
}

.titlebar-min {
    appearance: none !important;
    padding: 0px !important;
    padding-left: 3px !important;
    padding-right: 5px !important;
    margin: 0px !important;
    background-color: transparent !important;
    /* -moz-box-ordinal-group:1 !important; */
}

.titlebar-max,
.titlebar-restore {
    appearance: none !important;
    padding: 0px !important;
    padding-left: 4px !important;
    padding-right: 5px !important;
    margin: 0px !important;
    background-color: transparent !important;
    /* -moz-box-ordinal-group: 0 !important; */
}

#TabsToolbar .titlebar-buttonbox .titlebar-button {
	list-style-image: url(window/inactive.svg) !important;
}


#TabsToolbar .titlebar-buttonbox-container .titlebar-close {
	list-style-image: url(window/close.svg) !important;
}

#TabsToolbar .titlebar-buttonbox-container .titlebar-close:hover {
    list-style-image: url(window/close-hover.svg) !important;
}

#TabsToolbar .titlebar-buttonbox-container .titlebar-min {
	list-style-image: url(window/minimize.svg) !important;	
}

#TabsToolbar .titlebar-buttonbox-container .titlebar-min:hover {
    list-style-image: url(window/minimize-hover.svg) !important;
}

#TabsToolbar .titlebar-buttonbox-container .titlebar-max,
#TabsToolbar .titlebar-buttonbox-container .titlebar-restore {
	list-style-image: url(window/maximize.svg) !important;
}

#TabsToolbar .titlebar-buttonbox-container .titlebar-max:hover {
    list-style-image: url(window/maximize-hover.svg) !important;
}

:root[sizemode="maximized"] #TabsToolbar .titlebar-buttonbox-container .titlebar-max:hover,
#TabsToolbar .titlebar-buttonbox-container .titlebar-restore:hover {
    list-style-image: url(window/maximize-restore.svg) !important;
}



/*============================================================================*/
/* ----- T A B   D E S I G N S ----- */

/* Selected tabs design */
.tabbrowser-tab .tab-background[selected="true"] {
  border: 0 !important;
  border-radius: 6px 6px 6px 6px !important;
  }

/* Background tabs design */
.tabbrowser-tab .tab-background:not([selected]) {
  border: 0 !important;
  border-radius: 6px 6px 6px 6px !important;
  background-color: rgb(160,160,160,0.1) !important;
}

/* Normal tabs design on hover */
#tabbrowser-tabs
  .tabbrowser-tab:hover
  > .tab-stack
  > .tab-background:not([selected="true"]) {
  border: 0 !important;
}

/* Multiselect tabs design on hover */
#tabbrowser-tabs .tabbrowser-tab .tab-background[multiselected="true"] {
  border: 0 !important;
  border-radius: 6px 6px 6px 6px !important;
}
/* Fixing Multiselect */
.tab-background[multiselected="true"]:not([selected="true"])
  > .tab-background-inner {
  background: none !important;
}


/*============================================================================*/
/* ----- A U T O   H I D E   &   R E P O S I T I O N   T H E   B O O K M A R K S   B A R ----- */

/* Tab bar below Navigation & Bookmarks Toolbars */
#nav-bar { /* main toolbar */
  -moz-box-ordinal-group: 1 !important;
  box-shadow: none !important;
}
#TabsToolbar { /* tab bar */
  -moz-box-ordinal-group: 2 !important;
  padding-top: 0 !important;
}
#PersonalToolbar { /* bookmarks toolbar */
  -moz-box-ordinal-group: 3 !important;
}

/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/autohide_bookmarks_toolbar.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

#PersonalToolbar{
  --uc-bm-height: 20px; /* Might need to adjust if the toolbar has other buttons */
  --uc-bm-padding: 2px; /* Vertical padding to be applied to bookmarks */
  --uc-autohide-toolbar-delay: 50ms; /* The toolbar is hidden after 0.6s */
  
  /* 0deg = "show" ; 90deg = "hide" ;  Set the following to control when bookmarks are shown */
  --uc-autohide-toolbar-focus-rotation: 0deg; /* urlbar is focused */
  --uc-autohide-toolbar-hover-rotation: 0deg; /* cursor is over the toolbar area */
}

:root[uidensity="compact"] #PersonalToolbar{ --uc-bm-padding: 1px; }
:root[uidensity="touch"] #PersonalToolbar{ --uc-bm-padding: 7px }

#PersonalToolbar:not([customizing]){
  position: relative;
  margin-bottom: calc(-4px - var(--uc-bm-height) - 2 * var(--uc-bm-padding));
  transform: rotateX(90deg);
  transform-origin: top;
  transition: transform 135ms linear var(--uc-autohide-toolbar-delay) !important;
  z-index: 1;
  /* The following properties should allow the themes with trasparent toolbars to work */
  background-color: transparent !important;
  background-repeat: no-repeat,no-repeat,var(--lwt-background-tiling);
  --uc-bg-y: calc(-2 * (var(--tab-block-margin) + var(--toolbarbutton-inner-padding) + var(--toolbarbutton-outer-padding)) - var(--tab-min-height) - 16px - var(--bookmark-block-padding));
  background-position: top left,top left,var(--lwt-background-alignment,top left);
  background-position-y:top,top,var(--uc-bg-y),var(--uc-bg-y),var(--uc-bg-y);
  background-image: var(--toolbar-bgimage), linear-gradient(var(--toolbar-bgcolor),var(--toolbar-bgcolor)),var(--lwt-header-image,var(--lwt-additional-images)) !important;
}

#PlacesToolbarItems > .bookmark-item,
#OtherBookmarks,
#PersonalToolbar > #import-button{
  padding-block: var(--uc-bm-padding) !important;
}

#nav-bar:focus-within + #PersonalToolbar{
  transition-delay: 100ms !important;
  transform: rotateX(var(--uc-autohide-toolbar-focus-rotation,0));
}

#navigator-toolbox:hover > #PersonalToolbar{
  transition-delay: 100ms !important;
  transform: rotateX(var(--uc-autohide-toolbar-hover-rotation,0));
}

#navigator-toolbox:hover > #nav-bar:focus-within + #PersonalToolbar {  
  transform: rotateX(0);
}
/* @denizjcan Denizjcan#2050 discord*/


/* ENABLE THESE CODES TO CHANGE FIREFOX LOGO IN NEW TAB */

/* this code hides new tab icon
.tabbrowser-tab[label="New Tab"] .tab-icon-image {
  opacity: 0;
}

/* this code fixes the "New Tab" text location when its icon hidden
.tabbrowser-tab[label="New Tab"] .tab-label:not(:hover) {
  position: absolute;
  left: 29px;
  top: 8px;
  white-space: nowrap; 
  min-width: 90px; 
  overflow: hidden;
  text-overflow: ellipsis;
}

/* .tabbrowser-tab[label="New Tab .tab-label:hover {
  position: absolute;
  left: 29px;
  top: 8px;
}

/* this code inserts new icon to new tab
.tabbrowser-tab:not(:hover)[label="New Tab"] .tab-label-container::before {
  content: "";
  background-image: url('https://img.webme.com/pic/d/denizpl76/icons8-star-50.png');
  background-size: 100%;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 10px;
  left: 8px;
  pointer-events: none;
  opacity: 1;
}


.tabbrowser-tab:hover[label="New Tab"] .tab-label-container::before {
  content: "";
  background-size: 100%;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 10px;
  left: 8px;
  pointer-events: none;
  opacity: 0;
} */