Replace the page zoom "Reset" button with an icon

[jnss98b]

When the page zoom slider is moved to the panel bar, it squeezes the "Reset" button down to just "R..." which makes it look weird and not very informational

I propose that this text button be replaced with an icon instead, and if you really insist, it could just show up only in this scenario where the button title is truncated.

I do recognize that this might be a pretty niche request, but the change seems quite trivial and as a bonus this opens up another icon to be themeable, so hopefully it would be accepted.

[scfast001]

@jnss98b fantastic ideas

[purplehat7]

I solved it with a custom CSS:

/* Target the span that contains the text */
.page-zoom-controls button.ToolbarButton-Button .button-title {
  visibility: hidden;
}

.page-zoom-controls button.ToolbarButton-Button .button-title::before {
  content: "↺";
  visibility: visible;
}

Here's a guide to custom css for the unfamiliar: https://gabevilela.vivaldi.net/2020/12/26/guide-customizing-vivaldis-ui-with-css-mods/

It's still not the most beautiful thing; the size and margins could be tweaked, but it's good enough for me for now. If you end up improving it please send it here!

[Pesala]

@jnss98b A vertical slider is also easier to control precisely for small steps.

[jnss98b]

@purplehat7 Are you on the latest vivaldi version? It doesn't seem to work for me. I just saved the snippet as a css file and then loaded it in appearance settings

[Pesala]

@jnss98b It works for me, but only if I change the CSS file to Unicode encoding from ANSI encoding; otherwise the "↺" icon shows as a Question mark on the toolbar.

[purplehat7]

@jnss98b I am on the latest stable version.
Maybe it's an OS issue? I'm on Debian Linux, and UNIX-based systems do file encoding a little different than Windows, for example, so that might be why Pesala had to change the encoding to Unicode manually.

[Catweazle]

I've the Zoom slider in the Side bar, there it shows only "R"

[Pesala]

@Catweazle That indicates that there is an error in your CSS. This works for me if the file uses Unicode encoding.

/* Change Reset Button to "↺" */

.page-zoom-controls button.ToolbarButton-Button .button-title {visibility: hidden;}.page-zoom-controls button.ToolbarButton-Button .button-title::before {content: "↺"; visibility: visible;}

[Catweazle]

@Pesala, I don't use any CSS code in Vivaldi, I simply moved the Zoom to the side Panel ant it appears this way, no other thing done.

[Pesala]

@Catweazle Have you read the whole thread?

This is how it should look with the CSS.

[WIXAPOL]

+1 to the idea, in polish the "reset" button is even longer (it is "resetuj"), I can imagine in some languages it may be even longer. An unnecessary waste of space.

[jnss98b]

@Pesala said in Replace the page zoom "Reset" button with an icon:

@jnss98b It works for me, but only if I change the CSS file to Unicode encoding from ANSI encoding; otherwise the "↺" icon shows as a Question mark on the toolbar.

Yep this was the issue for me. Thanks!

[jnss98b]

Also why is everyone else's bars reversed compared to mine?

[Pesala]

@jnss98b Try Settings, Panel, Right Side

[jnss98b]

@Pesala Ah I see, cool

[JyuSensei]

I have the zoom in the status bar, but is there a way to reduce the space between the button and the bar?

[Pesala]

@JyuSensei The only way I know is to put some spaces before the Reload Icon.

Replace: content: "↺"; with content: " ↺";

[JyuSensei]

@Pesala

Tried it, but doesn't seem to do anything.

[Catweazle]

@JyuSense, you can reduce the size of the Zoom bar in >Settings >Apearance of thr Window >Using Buttons instead of sliders. Zoom appears with it this way-