Find in Page - Panel Appearance

Aexea

Give the option to have a standard Find in Page panel like you would expect from another browser, such as Edge, just as an example.

Currently, the Find in Page panel that comes up when the shortcut is pressed is a bar, spanning the width of the page, that shows up under the address bar and pushes content down. It's not appealing in terms of how it looks or how it interacts with the page by pushing the content further down. The extra space on the bar is not really used for anything either.

Pesala

@Aexea

Use a few lines of CSS to move the Find in Page toolbar to the bottom of the window.

/* Find in Page at Bottom*/
.find-in-page-wrapper {order: 2;}

Aexea

@Pesala
That's actually a very good point. I ended up changing it to the way that I wanted in the css file.

I'll post the code that I changed to make it work in case someone wants it like how I mentioned. It was just a quick, and simple fix so you may need to tweak certain values depending on how you customized your Vivaldi, or if you just want it to look differently.

Create a backup of your common.css if you're worried about messing up.
With that aside, here are some steps on how to go about doing this:

Press Alt+H, followed by A to access the vivaldi about section
Use the file path given by the executable path, EXCLUDING the vivaldi.exe after the last slash.
(Or right click Vivaldi shortcut, and click Open File Location)
From there, navigate to the common.css file
The file location should look something like this, with a potentially different set of numbers based on the version you're on:
C:\Users\Administrator\AppData\Local\Vivaldi\Application\7.1.3570.42\resources\vivaldi\style
Open the common.css file in a text editor like notepad++
The class selectors .find-in-page and .find-in-page-wrapper were changed as follows:
NOTE: Comment out the contents of the class selectors rather than deleting them in case you want to revert the look

.find-in-page {
  /* height: 34px;
  display: flex;
  justify-content: center;
  align-items: center; */

  position: absolute; /* Overlaps content */
  z-index: 9999; /* Makes panel stay on top */
  
  top: 0;
  right: 17px; /* USE 'left:' INSTEAD IF YOU WANT THE PANEL ON THE LEFT SIDE FOR EASIER ALIGNMENT */
  padding: 10px;
  
  width: auto;
  height: 34px;
  max-width: 800px;
  /*min-width: 450px; /* min-width - UNCOMMENT THIS AND ADJUST VALUE IF YOU WANT A WIDER PANEL */
  
  background: rgba(70, 70, 70, 1); /* 1st-3rd Entry --> [0 - 255] Color Values. 4th entry --> [0.0 - 1.0] Opacity Value*/
  border-radius: 0 0 0 0; /* (Optional) Rounds the border. Ex: "border-radius (px): <top-left> <top-right> <bottom-right> <bottom-left>" */
}
.find-in-page-wrapper {
  /* color: var(--colorFg);
  background-color: var(--colorBgLightIntense);
  border-bottom: 1px solid var(--colorBorder); Border is useless visual clutter for this setup */
}

This is how it should end up looking if you kept the code the same. It's spaced a bit from the very right for when the scroll bar is active.

ldexterldesign

Bad UX IMO - absolute dogs dinner being made of find in page ATM

No surprise the major competitors to Vivaldi (i.e. Brave and DuckDuckGo) choose not to shunt the content around the page at the expense of reading experience (i.e. reading and finding words); for what should be a ancillary/overlay feature

Screenshot 2025-02-16 at 17.33.06.png

If you're reading and:

agree then please vote up (e.g. +1, like), or;
disagree then please vote down (e.g. -1, dislike) - I'd love to know why?

If there's agreement then I'll create a bug/feature request so we can wait another 5 years for it to be improved

ldexterldesign

Bad UX IMO - absolute dogs dinner being made of find in page ATM

No surprise the major competitors to Vivaldi (i.e. Brave and DuckDuckGo) choose not to shunt the content around the page at the expense of reading experience (i.e. reading and finding words); for what should be a ancillary/overlay feature

Screenshot 2025-02-16 at 17.33.06.png

If you're reading and:

agree then please vote up (e.g. +1, like), or;
disagree then please vote down (e.g. -1, dislike) - I'd love to know why?

If there's some agreement then I'll create a bug/feature request so we can wait another 5 years for it to be improved