Compact Popup Page Zoom Gauge Control CSS mod

[dude99]

Updated for v5.3

Most people prefer Zoom buttons range controls over the horizontal zoom gauge GUI, because the later is bloating the Statusbar by 25%, & it lacks meaningful markers to help user zoom in/out quickly & accurately...

Here is my CSS mod to transform the horizontal zoom gauge into a popup gauge, it will reveal when mouseover/focus on the zoom control. Other QoL improvements include 100% incremental markers & compact Reset button.

---

ReadMe

1. Pls enable chrome://flags/#enable-experimental-web-platform-features for this code to work properly.

2. You can increase the popup gauge's width to improve mouse drag control by adding width: 192px; in line 2.

3. You can adjust the popup gauge's x-position via transform: translate(-25px, -20px) in line 2 & line 3. Alter the -25px value to move left/right-ward.

4. You can restore the 100% input box back to the right side by remove line 5.

5. You can restore full size Reset button by remove line 6.

---

CSS Code (Horizontal version)

/* popup page zoom control */
#browser > footer .page-zoom-controls input[type=range] {position: absolute; background-image: linear-gradient(90deg, #0000 0 calc(22% - 2px), var(--colorBg) 0 22%, #0000 0 calc(40% - 2px), var(--colorBg) 0 40%, #0000 0 calc(58% - 2px), var(--colorBg) 0 58%, #0000 0 calc(77% - 2px), var(--colorBg) 0 77%, #0000 0 100%); box-shadow: 0 0 0 7px var(--colorBg), 0 0 0 8px var(--colorBorder), 0 2px 12px hsl(0deg 0% 0% / 25%); visibility: hidden; opacity:0; transform: translate(-25px, -20px); transition: visibility .6s, opacity .2s ease-out .4s, transform .25s ease-in .35s !important;}
#browser > footer .page-zoom-controls:is(:hover, :focus-within) > input[type=range] {visibility: visible; opacity: 1; transform: translate(-25px, -25px); transition: opacity: .1s ease-out .12s, transform .1s ease .1s !important;}
#browser > footer .page-zoom-controls input[type=range]::before {content: ''; position: absolute; pointer-events: none; border: 6px solid hsl(0deg 0% 0% / 0%); z-index: inherit; filter: drop-shadow(0 1px var(--colorBorder)); bottom: -19px; left: 50%; margin-left: -6px; border-top-color: var(--colorBgLight);}
#browser > footer .page-zoom-controls:has(input[type=range]) .zoom-percent {order:-1;} /* move % to left */
#browser > footer .page-zoom-controls .button-toolbar > button .button-title {min-width: 1ch; max-width: 1ch;} /* reduced Reset to R button */

---

---

CSS Code (Vertical version)

/* vertical popup zoom gauge */
#browser > footer .page-zoom-controls input[type=range] {position: absolute; background-image: repeating-linear-gradient(90deg, #0000 0 calc(20% - 2.5px), var(--colorBg) 0 20%); box-shadow: 0 0 0 7px var(--colorBg), 0 0 0 8.5px var(--colorBorder), -2px 0 12px hsl(0deg 0% 0% / 25%); visibility: hidden; opacity:0; transform-origin: bottom left; transform: translate(20px, -26px) rotate(-90deg); transition: visibility .6s, opacity .2s ease-out .4s, transform .25s ease-in .35s !important;}
#browser > footer .page-zoom-controls:is(:hover, :focus-within) > input[type=range] {visibility: visible; opacity: 1; transform: translate(20px, -36px) rotate(-90deg); transition: opacity: .1s ease-out .12s, transform .1s ease .1s !important;}
#browser > footer .page-zoom-controls input[type=range]::-webkit-slider-thumb {width:5px;}  /* slim slider thumb */
/* vertical R button */
#browser > footer .page-zoom-controls:has(input[type=range]) > .button-toolbar {position: absolute; top:0; transform: translate(9.5px, -14px); z-index: 1; width: 21.5px; height: 20px; border-radius: 0 0 9px 9px; border: solid var(--colorBorder); border-width: 0 1.5px 2px 1.5px; background: var(--colorBg); visibility: hidden; opacity:0; transition: visibility .6s, opacity .2s ease-out .4s, transform .25s ease-in .35s !important;}
#browser > footer .page-zoom-controls:has(input[type=range]):is(:hover, :focus-within) .button-toolbar { transform: translate(9.5px, -26px); visibility: visible; opacity: 1; transition: opacity: .1s ease-out .12s, transform .1s ease .1s !important;}
#browser > footer .page-zoom-controls > .button-toolbar > button:not(:disabled):hover {color: var(--colorHighlightBgDark); font-weight: 800;}
#browser > footer .page-zoom-controls .button-toolbar > button .button-title {min-width: 1ch; max-width: 1ch;} /* reduced Reset to R button */

NOTE: line 5 to 9 is for vertical compact R button, you can remove 'em if you prefer the Reset button remain inside Statubar.

---

Request JS Help

I would like to alter the 10% zoom range increment to 5% during scrolling. I think it can only be done with JS, so is there any JS guru know how to alter the step="0.1" value to 0.05?

Many thanks in advance. I hope this CSS mod can help more people enjoy & appreciate the advantages of zoom gauge.

[luetage]

@dude99 I hacked something together for you.

(function () {
  var appendChild = Element.prototype.appendChild;
  Element.prototype.appendChild = function () {
    if (arguments[0].tagName === "INPUT") {
      setTimeout(
        function () {
          if (arguments[0].parentNode.classList.contains("page-zoom-controls")) {
            arguments[0].step = "0.05";
          }
        }.bind(this, arguments[0])
      );
    }
    return appendChild.apply(this, arguments);
  };
})();

[dude99]

@luetage Thanks man, I just made a vertical gauge version... Hope u like it too! LOL

EDIT: I think something is wrong, the zoom gauge is still increment by 10%, but the "100%" textbox is increment by 0.05%...

[dude99]

Updated again... LOL

• add full code for vertical popup zoom gauge in OP

• move R button into popup, & add mouseover highlight effects.

[Pesala]

@dude99 It has some interesting side effects, if Use Buttons in Range Controls is enabled, but it does what it was designed to do very well.

[dude99]

@pesala what's side effects? of which version u r using? I will try to fix it if it's a bug.

[dude99]

@luetage Hi, can u fix this problem please?

It seems the JS applied the attribute change to the wrong INPUT tag, it altered the 100% textbox input.zoom-percent instead of the zoom gauge input[type=range]...

[Pesala]

@dude99 I use the vertical popup. I would not even call it a bug. It is not designed to work with Use Buttons in Range Controls enabled.

I guess if it was really smart, it would automatically disable that setting, or be ignored if it was enabled, but I think most users will be happy with it as it is.

[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