user chrome for firefox

userChrome.css

/*
# Tabs expand when leaved
*/

/*uncomment to expand tabs when leaved

:root {
	--Tabs-transition-time: 0.1s;
	--Tabs-transition-delay: 0s;
}

#main-window:not(:hover) .tabbrowser-tab:not([visuallyselected=true],
[multiselected]) {
	max-width: 35px!important;
	min-width: 0px!important;
	overflow: hidden;
	transition: ease-out var(--Tabs-transition-time);
	transition-delay: var(--Tabs-transition-delay)!important;
}

#main-window:not(:hover) .tabbrowser-tab[visuallyselected=true] {
	max-width: 65vw !important;
	min-width: 0px!important;
	overflow: hidden;
	transition: ease-out var(--Tabs-transition-time);
	transition-delay: var(--Tabs-transition-delay)!important;
}


/* 
# Auto-hide Navigation bar
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. 
*/


:root {
	--navbar-transition-delay: 0.1s;
	--navbar-transition-duartion: 100ms;
}

:root[uidensity="compact"] {
	--nav-bar-margin: -64px;
	--bookmark-bar-margin: -22px;
}

:root:not([uidensity]) {
	--nav-bar-margin: -41px;
	--bookmark-bar-margin: -28px;
}

:root[uidensity=touch] {
	--nav-bar-margin: -41px;
	--bookmark-bar-margin: -34px;
}


/*Auto-hide url-bar*/

:root:not([customizing])[sizemode="normal"] #nav-bar,
:root:not([customizing])[sizemode="maximized"] #nav-bar {
	position: relative;
	padding-top: 1px;
	margin-bottom: var(--nav-bar-margin);
	transform: rotateX(90deg);
	transform-origin: top;
	transition: transform var(--navbar-transition-duartion) linear var(--navbar-transition-delay) !important;
	z-index: 101;
}


/* show nav-bar on navigator-toolbox hover/focus */

:root:not([customizing])[sizemode="normal"] #navigator-toolbox:hover #nav-bar,
:root:not([customizing])[sizemode="maximized"] #navigator-toolbox:hover #nav-bar,
:root:not([customizing])[sizemode="normal"] #navigator-toolbox:focus-within #nav-bar,
:root:not([customizing])[sizemode="maximized"] #navigator-toolbox:focus-within #nav-bar {
	transform: rotateX(0deg);
	transition: all var(--navbar-transition-duartion) ease 0s !important;
	z-index: 100;
}


/* Auto-hide bookmark bar */

#PersonalToolbar {
	--uc-autohide-toolbar-delay: 100ms;
	/* The toolbar is hidden after 0.6s */
}

:root:not([customizing])[sizemode="normal"] #PersonalToolbar,
:root:not([customizing])[sizemode="maximized"] #PersonalToolbar {
	position: relative;
	margin-bottom: var(--bookmark-bar-margin);
	transform: rotateX(90deg) translate(0px, calc(-1 * var(--bookmark-bar-margin)));
	transform-origin: top;
	transition: transform var(--navbar-transition-duartion) linear var(--navbar-transition-delay) !important;
	z-index: 99;
}


/* show bookmark bar when navigator-toolbox hover*/

:root:not([customizing])[sizemode="normal"] #navigator-toolbox:hover #PersonalToolbar,
:root:not([customizing])[sizemode="maximized"] #navigator-toolbox:hover #PersonalToolbar {
	transition-delay: var(--navbar-transition-duration) !important;
	transform: rotateX(0) translate(0px, calc(-1 * var(--nav-bar-margin)));
}


/*Auto-hide-tab-bar*/

:root:not([customizing])[sizemode="normal"] #navigator-toolbox {
	border-bottom: none!important;
	margin-top:calc(-1 * var(--tab-min-height) - 3px);
	transition-delay: 0.1s!important;
	opacity:0;
	transition: 0.1s;
	z-index: 99;
}
:root:not([customizing])[sizemode="normal"][extradragspace] #navigator-toolbox {
	margin-top:calc(-1 * var(--tab-min-height) - 8px);
}
/* :root:not([customizing])[sizemode="normal"]#main-window:focus-within #navigator-toolbox, */

/* uncomment to show tab bar on hover

:root:not([customizing])[sizemode="normal"]#main-window:hover #navigator-toolbox {
	margin-top:0px;
	transition-delay: 0s!important;
	opacity:1;
	z-index: 99;
}
:root:not([customizing])[sizemode="maximized"] #navigator-toolbox {
	background:hsl(234, 33%, 19%);
	margin-top:calc(-1 * var(--tab-min-height));
	transition-delay: var(--navbar-transition-delay);
	opacity:0;
	z-index: 99;
}
:root:not([customizing])[sizemode="maximized"] #navigator-toolbox:hover,
:root:not([customizing])[sizemode="maximized"] #navigator-toolbox:focus-within {
	transform: translate(0px, var(--tab-min-height));
	transition-delay: 0s;
	opacity:1;
	z-index: 99;
}

*/

/* Uncomment to enable compatibility for multi-row_bookmarks.css */


/* This would break buttons placed in the toolbar but that is likely not happening if you are using multi-row setup  */


/*
#PersonalToolbar:not([customizing]){
  position: fixed;
  display: block;
  margin-bottom: 0px !important;
}
*/


/* 
# Urlbar lager when active
*/

:root:not([customizing])[sizemode="normal"] #urlbar-container:focus-within #urlbar {
	position: fixed!important;
	width: 90%!important;
	margin-left: 5%;
}


/*
# Sidebar Auto Hide
# https://github.com/Getulio-Mendes/.dotFiles/tree/master/Firefox/chrome
*/

/*uncoment for auto hide siede bar

:root {
	--sidebar-button-size: 15px;
	--sidebar-width: 200px;
	--sidebar-button-distance: 40px;
	--sidebar-toolbar-height: 0px;
	--sidebar-menubar-height: 0px;
	--sidebar-transition-time: 0.1s;
	--sidebar-transition-delay: 0.1s;
	--sidebar-shadow-color: #ffffff;
	--sidebar-button-color: #000;
}

#sidebar-switcher-arrow,
#sidebar-switcher-target,
#sidebar-switcher-target:active,
#sidebar-close,
#sidebar-close:active {
	padding-bottom: 10px!important;
	outline: none!important;
	background: none!important;
}

#sidebar-box {
	z-index: 2 !important;
	position: relative !important;
	padding-top: calc(-1 * var(--menubar-height));
	min-width: var(--sidebar-width) !important;
	max-width: var(--sidebar-width) !important;
	transition: all var(--sidebar-transition-time) ease-in-out;
	margin-top: var(--menubar-height) !important;
}

#sidebar {
	border-right: none !important;
	max-width: var(--sidebar-width)!important;
}

#sidebar-header {
	display: -webkit-box!important;
	position: fixed!important;
	-webkit-box-pack: justify;
	border-bottom: none!important;
	color: var(--sidebar-button-color);
	height: calc(10px + var(--sidebar-button-size));
}

#sidebar-switcher-target {
	z-index: 1;
}

#sidebar-switcher-arrow,
#sidebar-title {
	display: none;
}

#sidebar-icon,
#sidebar-close image {
	padding: 4px;
	block-size: calc(10px + var(--sidebar-button-size))!important;
	width: calc(10px + var(--sidebar-button-size))!important;
	transform: rotate(-90deg);
	background-color: rgba(241, 241, 241, 0.4);
	border-radius: 5px 5px 5px 5px;
}


/*When sidebar is move to left */


/*sidebar-button-distance*/

#sidebar-box[style*="-moz-box-ordinal-group: 1"] #sidebar-header {
	transform: translate(calc(var(--sidebar-width) + var(--sidebar-button-distance) - 70px), 50vh) rotate(90deg);
}


/* inner width = expanded width & move inner to only show initial-width long section */

#sidebar-box[style*="-moz-box-ordinal-group: 1"] {
	margin-left: calc(-1 * var(--sidebar-width));
}


/* move inner to show entire sidebar */

#sidebar-box[style*="-moz-box-ordinal-group: 1"]:hover {
	margin-left: 0px;
	margin-right: calc(-1 * var(--sidebar-width));
	box-shadow: 2px 0 100px var(--sidebar-shadow-color);
	transition-delay: var(--sidebar-transition-delay);
}


/* When sidebar is move to right */

#sidebar-box[style*="-moz-box-ordinal-group: 3"] #sidebar-header {
	transform: translate(calc(-1 * (var(--sidebar-width) + var(--sidebar-button-distance)) + var(--sidebar-width) - 20px), 50vh) rotate(90deg);
}

#sidebar-box[style*="-moz-box-ordinal-group: 3"] {
	margin-right: calc(-1 * var(--sidebar-width));
	margin-left: 0px;
}

#sidebar-box[style*="-moz-box-ordinal-group: 3"]:hover {
	margin-right: 10px;
	margin-left: calc(-1 * var(--sidebar-width));
	box-shadow: 2px 0 200px var(--sidebar-shadow-color);
	transition-delay: var(--sidebar-transition-delay);
}

#sidebar-box[style*="-moz-box-ordinal-group: 3"] #sidebar-switcher-target,
#sidebar-box[style*="-moz-box-ordinal-group: 3"] #sidebar-close {
	margin-top: var(--sidebar-button-distance)!important;
}


/* fix urlbar being too high in ff 74 */

#urlbar {
	--urlbar-toolbar-height: calc(var(--tab-min-height) - 1px)!important;
	--urlbar-height: calc(var(--tab-min-height) - 1px)!important;
}

/* hide scrollbar on the right */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */

	:-moz-any(#content,#appcontent) browser{
	 margin-right:-8px!important;
	 overflow-y:scroll;
	 margin-bottom:-0px!important;
	 overflow-x:scroll;
}

/*no over link in bott right croner*/
statuspanel[type="overLink"] .statuspanel-label {display:none!important;}