@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 {
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.
2b6e7aba-1e59-4686-91e8-b1dacf5697a0-image.png