Compact Popup Page Zoom Gauge Control CSS mod

[luetage]

@dude99 Hmm, when I checked the UI yesterday, the only input element I could find in page zoom controls was the slider and that’s exactly the same thing as in your picture when you requested help. When you check devtools you will see the mod changes the step value. It works when using the mouse and dragging the slider, it doesn’t work when focusing the slider and using arrow keys. I believe this is because the shortcut uses an internal value, but I don’t know what to do about it right now. I haven’t used your mod, because I use shortcut keys to change zoom level and rarely have the statusbar visible.

[dude99]

@pesala CSS mod have limitation & unfortunately it can't tracking backward on every elements, so it's a no go with CSS alone. It can be done with JS but I'm not proficient at it & it's probably not worth the effort, cuz who need +/- buttons when you can do it better by scrolling the gauge? LOL

[dude99]

@luetage Thank you for your effort, now you mentioned about KB shortcut, I tested it & it indeed works. I guess there are nothing we can do about it since it's hardcoded for mouse scrolling...

[Pesala]

@lonm said in Zoom, Find in Page & other actions in Web Panels:

Incidentally, if anyone did want finer control of the vivaldi page zoom, turns out it's not too difficult. It uses a js mod like so:

(function finerZoom(){
	try{
		document.querySelector(`.page-zoom-controls input[type="range"]`).setAttribute("step", "0.05");	
	} catch {
		setTimeout(finerZoom, 500); 
	}
})();

This worked for me, once I had figured out how to edit browser.html, and found the right place to save the finezoom.js file.

[luetage]

@pesala I hope you realize it’s exactly the solution I posted above…

[dude99]

@luetage It's similar but slightly more accurate, because it target input[type="range"] instead of just INPUT. Thus it doesn't causing the problem I posted in https://forum.vivaldi.net/post/534605 where the 100% textbox span (which turn into INPUT when focused) broken by the JS mod. But the hardcoded 10% for scrolling still can't be overwritten...

But now we have 2 ways to zoom with mouse, scroll for 10% drag for 5%. So this might turn out to be a blessing in disguise. LOL

[luetage]

@dude99 Yeah, but this one probably breaks as soon as the status bar is removed or the display is changed. It only triggers on first start.

edit: whatever, if you’re happy now that's all that matters

[dude99]

@luetage Oh, I didn't know about that, my JS knowledge is really pitiful. I did try to insert [type="range"] into your mod earlier but failed miserably... LOL

So I settled with @LonM JS mod cuz it doesn't break the 100% textbox.

[dude99]

UPDATE: Here are extra code to turn the round slider thumb into a slim slider thumb:

#browser > footer .page-zoom-controls input[type=range]::-webkit-slider-thumb {width:5px;}

Then you should replace 2nd line background-image section with this code to undo separators visual adjustment of original code:

background-image: repeating-linear-gradient(90deg, #0000 0 calc(20% - 2.5px), var(--colorBg) 0 20%);

[jaytsecan]

All I can say is - Thank You everyone for this mod.

It is so freaking cool!

I have a lot to learn...

[dude99]

Both version updated for v5.3:

• fixed broken vertical code, caused by class change.

• now it's made compatible with range button mode with new pseudo selector :has(input[type=range]), so no more floating buttons during button mode!

[dude99]

If you preferred Zoom Control button in the Mainbar, I just made another Popup gauge CSS mod for this: https://forum.vivaldi.net/post/607814

[Streptococcus]

What is wrong with the page zoom control on the status bar?

[barbudo2005]

@Streptococcus

What is wrong with the page zoom control on the status bar?

Occupies vital space in the vertical.

[Balentay]

So interestingly the gauge for the zoom does pop up when you're in editing mode. But otherwise it doesn't seem to appear.

It still works other than that though. You can click on the text field and manually adjust the zoom level that way or you can scroll to increase

[dude99]

@Balentay These mods are written pre-editior period, so they are not made with the editor in mind. The gauge should appear when mouseover or focus on the page zoom controls, and it's limited to Statusbar only. If you place the page zoom controls in the mainbar, then try this version instead.

EDIT: So, it's brick by another CSS mod (Automate statusbar) I recently updated.