Zen Browser Customization

userChrome.css

/* Add some sapcing to the right of the exit button */
.titlebar-buttonbox-container {
	padding-right: var(--zen-element-separation);
}

/* Centered url text on the top bar */
.urlbar-input-box:not(:has(> #urlbar-input[aria-expanded='true'])) {
	text-align: center;
}

/* Transparent URL bar background on the top bar */
#urlbar-background:not(:has(~ .urlbar-input-container #urlbar-input[aria-expanded='true'])) {
	background-color: transparent !important;
}

#urlbar[open][zen-floating-urlbar='true'] {
	#urlbar-container:has(&) {
		background-color: transparent !important;
	}
}

/* Show URL bar icons only when expanded */
#urlbar:not(:has(#urlbar-input[aria-expanded='true'])) {
	#identity-box {
		position: absolute;
		padding: 4px;
		top: 2px;
		left: 0px;
		background-color: color-mix(in srgb, var(--toolbar-bgcolor), transparent 50%);
		backdrop-filter: blur(8px);
		z-index: 1;
		border-radius: 8px;
		display: none;
	}

	&:hover #identity-box, &:has([open="true"]) #identity-box {
		display: revert;
	}

	#page-action-buttons {
		position: absolute;
		padding: 1px 12px;
		top: 2px;
		right: 0px;
		background-color: color-mix(in srgb, var(--toolbar-bgcolor), transparent 50%);
		backdrop-filter: blur(8px);
		z-index: 1;
		border-radius: 8px;
		display: none;
	}
	
	&:hover #page-action-buttons, &:has([open="true"]) #page-action-buttons {
		display: flex;
	}
}

/* Less height for nav bar */
#nav-bar {
	min-height: 32px !important;
	height: 32px !important;
	max-height: 32px !important;
}
#urlbar-input:not([aria-expanded='true']) {
	font-size: 0.9rem !important;
}

/* Less height for things on top of sidebar */
#zen-sidebar-top-buttons {
	min-height: 32px !important;
	height: 32px !important;
	max-height: 32px !important;
}

/* Temporary fix for icons on top of sidebar does not align correctly */
#navigator-toolbox:not([zen-sidebar-expanded='true']) {
	& #zen-sidebar-top-buttons-customization-target {
		flex-direction: column;
		padding-top: 0 !important;
		margin-top: 0 !important;
	}
}

/* Color mod on selected tab */
#tabbrowser-tabs {
	& .tabbrowser-tab:not([zen-essential='true']) {
		&[selected] .tab-background {
			border: 2px var(--identity-tab-color, var(--zen-primary-color)) solid !important;
			background: color-mix(
				in srgb,
				var(--identity-tab-color, var(--zen-primary-color)),
				transparent 85%
			) !important;
		}
	}
}

/* Tab context line */
.tab-background {
	/* Not selected */
	& > .tab-context-line {
		border-radius: 9999px !important;
		position: absolute;
		transition: all;
		transition-duration: 100ms;

		width: 4px !important;
		height: 20px !important;
		top: 10px;
	}

	/*  Selected */
	&[selected] > .tab-context-line {
		width: 8px !important;
		height: 8px !important;
		top: 16px;
	}
}

/* Indicator position when left sidebar is not expanded */
#navigator-toolbox {
	& .tab-background > .tab-context-line {
		left: 0px;
	}
	& .tab-background[selected] > .tab-context-line {
		left: -2px;
	}

	&[zen-sidebar-expanded='true'] {
		& .tab-background > .tab-context-line {
			left: 1px;
		}
		& .tab-background[selected] > .tab-context-line {
			left: -1px;
		}
	}
}

/* Dialogs (e.g. Add bookmark page) background fix */
.dialogBox {
	background: var(--zen-dialog-background);
}

/* Remove some tab bar context menu items */
#tabContextMenu {
	#context_zen-add-essential,
	#context_pinTab,
	#context_unpinTab,
	#context_duplicateTab,
	#context_pinSelectedTabs,
	#context_uppinSelectedTabs,
	#context_duplicateTabs,
	#context_toggleMuteTab,
	#context_toggleMuteSelectedTabs,
	#context_undoCloseTab,
	#context_selectAllTabs,
	#context_moveTabOptions,
	#context_closeTab[data-l10n-args='{"tabCount":1}'] {
		display: none;
	}
}

/* Media control styles */
#zen-media-controls-toolbar > toolbaritem {
	background-color: color-mix(in srgb, var(--zen-primary-color), transparent 85%) !important;
	box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.1) !important;
}