Mainbar Popup Page Zoom Gauge Control CSS mod

dude99

9 months ago, I introduced Horizontal & Vertical popup gauge CSS mod for Statusbar's Page zoom control, today I'm gonna add another one for the Mainbar! cool

ReadMe

This mod ONLY apply to Page Zoom Control button located inside the top position Mainbar.
Please enable chrome://flags/#enable-experimental-web-platform-features for this mod to work properly.
Reset button will be hidden when page zoom is 100%, else it will appear above the 100% marker when applicable.
The popup gauge will adjust position according to the order of the Page Zoom Control button inside the Mainbar. If it's on the far-left it will move slightly rightward, & move leftward when it's on the far-right (last 4 position) of the Mainbar.
You can alter the gauge's width via width: 142px; value, original width is 129px. I have elongated it by 10% to improve drag & sliding accuracy.
If you have increased the gauge's width & place the Page Zoom Control button at the far right of the Mainbar, then you might need to adjust the last section of the code under rightside button to make sure the entire popup gauge stay within the window's frame.

CSS Code

/* popup page zoom control */
.toolbar-mainbar .page-zoom-controls input[type=range] {
	position: absolute;
	width: 142px;
	transform: translate(-7px, 0);
	visibility: hidden;
	opacity: 0;
	z-index: 9;
	background-image: repeating-linear-gradient(-50deg, #0000 0 20%, var(--colorBg) 0 21%, #fff6 0 40%, var(--colorBg) 0 41%);
	box-shadow: 0 0 0 7px var(--colorBg), 0 0 0 8px var(--colorBorder), 0 2px 12px hsl(0deg 0% 0% / 25%);
	transition: visibility .6s, opacity .2s ease-out .4s, transform .25s ease-in .35s !important;
}

.toolbar-mainbar .page-zoom-controls:is(:hover, :focus-within) > input[type=range] {
	visibility: visible;
	opacity: 1;
	transform: translate(-7px, 29px);
	transition: opacity .1s ease-out .2s, transform .2s ease-out .1s !important;
}

.toolbar-mainbar .page-zoom-controls input[type=range]::after {
	content: '';
	position: absolute;
	top: -19px;
	left: 13.5%;
	border: 6px solid hsl(0deg 0% 0% / 0%);
	border-bottom-color: var(--colorBgLight);
	filter: drop-shadow(0 -1px var(--colorBorder));
	pointer-events: none;
}

.toolbar-mainbar .page-zoom-controls > input[type=range]::before {
	content: '';
	position: absolute;
	inset: -14px 0 100% 0;
}

.toolbar-mainbar .page-zoom-controls:has(input[type=range]) .button-toolbar[title="Reset Zoom"]:has(button:disabled) {
	display: none;
}

.toolbar-mainbar .page-zoom-controls:has(input[type=range]) .button-toolbar:has(button[title="Reset Zoom"]) {
	position: absolute;
	align-self: unset;
	transform: translate(14px, 18.5px);
	z-index: 19;
	width: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease-in .25s, visibility .5s !important;
}

.toolbar-mainbar .page-zoom-controls:has(input[type=range]):is(:hover, :focus-within) .button-toolbar:has(button[title="Reset Zoom"]) {
	opacity: 1;
	visibility: visible;
	transition: opacity .2s ease-in .13s !important;
}

.toolbar-mainbar .page-zoom-controls:has(input[type=range]) button[title="Reset Zoom"] {
	border: 0;
	height: 13px;
}

.toolbar-mainbar .page-zoom-controls:has(input[type=range]) button[title="Reset Zoom"] .button-title {
	min-width: 1ch;
	max-width: 1ch;
	font-size: 13px;
	font-weight: bold;
	text-shadow: -1px 0 var(--colorBg), 1px 0 var(--colorBg), -2px 0 var(--colorBg), 2px 0 var(--colorBg);
}

.toolbar-mainbar .page-zoom-controls:has(input[type=range]) button[title="Reset Zoom"]:hover .button-title {
	font-size: 17px;
	color: var(--colorHighlightBg);
}

/* leftside 1st button */
.toolbar-mainbar > div:first-child > .page-zoom-controls:is(:hover, :focus-within) > input[type=range] {
	transform: translate(3px, 29px);
}

.toolbar-mainbar > div:first-child > .page-zoom-controls:has(input[type=range]) .button-toolbar:has(button[title="Reset Zoom"]) {
	transform: translate(24px, 18.5px);
}

/* rightside button */
.toolbar-mainbar > div:nth-last-child(4) > .page-zoom-controls:is(:hover, :focus-within) > input[type=range] {
	transform: translate(-10px, 29px);
}

.toolbar-mainbar > div:nth-last-child(3) > .page-zoom-controls:is(:hover, :focus-within) > input[type=range] {
	transform: translate(-44px, 29px);
}

.toolbar-mainbar > div:nth-last-child(3) > .page-zoom-controls input[type=range]::after {
	left: 40%;
}

.toolbar-mainbar > div:nth-last-child(3) > .page-zoom-controls:has(input[type=range]) .button-toolbar:has(button[title="Reset Zoom"]) {
	transform: translate(-24px, 18.5px);
}

.toolbar-mainbar > div:nth-last-child(2) > .page-zoom-controls:is(:hover, :focus-within) > input[type=range] {
	transform: translate(-78px, 29px);
}

.toolbar-mainbar > div:nth-last-child(2) > .page-zoom-controls input[type=range]::after {
	left: 64%;
}

.toolbar-mainbar > div:nth-last-child(2) > .page-zoom-controls:has(input[type=range]) .button-toolbar:has(button[title="Reset Zoom"]) {
	transform: translate(-58px, 18.5px);
}

.toolbar-mainbar > div:last-child > .page-zoom-controls:is(:hover, :focus-within) > input[type=range] {
	transform: translate(-112px, 29px);
}

.toolbar-mainbar > div:last-child > .page-zoom-controls input[type=range]::after {
	left: 88%;
}

.toolbar-mainbar > div:last-child > .page-zoom-controls:has(input[type=range]) .button-toolbar:has(button[title="Reset Zoom"]) {
	transform: translate(-92px, 18.5px);
}

mahuaer

@dude99 您好，我想学习一下如何利用css mod来自定义我的浏览器，请问哪里有完整的说明文档来指导我如何开始
Hello, I want to learn how to use CSS MOD to define my browser. Where can I have a complete explanation document to guide me how to start

mahuaer

@dude99 我似乎已经找到了学习的入口。
I seem to have found the entrance to learn.
thanks

dude99

@mahuaer
V forum tutorials:
https://forum.vivaldi.net/post/135732
https://forum.vivaldi.net/post/10549

General CSS info:
https://www.w3schools.com/css/
https://css-tricks.com
https://web.dev/learn/css/
https://www.tutorialspoint.com/css/index.htm

video tutorial:
https://www.youtube.com/watch?v=yfoY53QXEnI
https://www.youtube.com/watch?v=1Rs2ND1ryYc
https://www.youtube.com/watch?v=n4R2E7O-Ngo
https://www.youtube.com/kepowob/videos

Sorry I don't really know any Mandarin CSS tutorial. LOL

mahuaer

@dude99 Thank you very much

renantmagalhaes

Amazing work as always!

Much appreciated

ReadMe

CSS Code

◊ More CSS Mod ◊

◊ More CSS Mod ◊