Firefox Zen

One of the things that i love about Arc and zen browser is the almost clutter free experience they provide. Its almost a full view of the webpage without any kind of ui. Im also used to my firefox installation, i dont want to tinker with other browsers.

Thanks to the new released vertical tabs, some useful extensions like Userchrome Toggle Extended and some css wizardy, i can have a similar experience. I have binded ctrl+shift+L to toggle the styles because its similar to ctrl+L that will put my cursor in the urlbar.

Want to go back or forwards? You have the buttons in the context menu, or you can hit alt+scroll wheel. For this i needed to set in about:config the value mousewheel.with_alt.delta_multiplier_y to -100 because i wanted them the other way.

Want to refresh? Context menu or classic F5.

And while writing this, i found out that in the context menu there is also the bookmark button. Amazing.

If i want an experience without any kind of UI, i can press ctrl+shift+L, toggle the sidebar from the button, and press it again to hide everything else.

:root[titlepreface*="᠎show-ui"]{
	#navigator-toolbox {
		border: none !important;
	}

	#TabsToolbar, #PersonalToolbar {
		display: none;
	}

	#nav-bar {
		height: 0 !important;
		min-height: 0 !important;
		max-height: 0;
		border: none !important;
	}

	#urlbar-container {
		top: 5vh;
		position: fixed;
		left: 0;
		right: 0;
		width: 80% !important;
		margin: 0 auto !important;
	}

	#urlbar {
		opacity: 0;
		pointer-events: none;

		&::before {
			content: "";
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: rgba(28, 27, 34, 0.45);
			display: none;
		}
	}

	#urlbar:focus-within {
		opacity: 1;
		pointer-events: all;

		&::before {
			display: block;
		}
	}
}

.titlebar-spacer[type="pre-tabs"], .titlebar-spacer[type="post-tabs"], #vertical-spacer {
	display: none;
}