Less obstructive compact bottom Find bar
-
Here i share my mod for bottom position Find bar, it do 4 things:
- Move find bar to bottom screen.
- Turn full width toolbar into smaller popup dialog.
- Find bar will turn semi transparent when not in-focus.
- Searchfield will turn pink & skipping 4 times when search word is not found.
EDIT: 26 Aug 2019 updated for v2.7./* find bar */ .active.visible.webpageview .find-in-page {position:absolute; bottom:-1px; z-index:1; margin: 0 auto; left:0; right:0; max-width: fit-content; border-radius: calc(var(--radius) * 1.3); padding-left: 6px;} .find-in-page .fip-input-label {display:none;} .find-in-page > label:not(:hover) .fip-checkbox-label {font-size:0; padding:.5px; } .find-in-page .fip-checkbox-label {font-size: 80%; transition: font-size .15s !important;} .find-in-page > .toolbar.toolbar-group button svg {transform:rotate(90deg);} .find-in-page > .button-toolbar button {fill:crimson;} .find-in-page > .button-toolbar button:hover {fill:beige; background:crimson; box-shadow: 0 0 0 1.5px beige inset;} /* compact mode */ .active.visible.webpageview .find-in-page:not(:focus-within):not(:hover) {opacity: .5; visibility:hidden;} .active.visible.webpageview .find-in-page :is(input[type="search"], .fip-results) {visibility:visible;} /* nomatch alert */ .find-in-page.fip-nomatches:focus-within input[type="search"] {color:maroon; background:pink; transition: 0s .15s !important;} .find-in-page.fip-nomatches:focus-within {animation: jump 1.3s steps(2) .15s 4 !important;} @keyframes jump {8% {transform:translateY(0);} 1%, 5% {transform:translateY(5px);} 3% {transform:translateY(-4px);}}
Have fun, enjoy more space to browse!
PS: Enhanced version is over here: https://forum.vivaldi.net/post/432191
-
Deleted, please refer to 1st post for update.
-
@dude99 Great work! Thanks! Makes it much easier to use.
-
On macOS
.find-in-page + .devtools-container .webpage {top: 0 !important;}
is needed, or you get the empty space. Works otherwise. -
Maybe some screenshot also when posting code?
-
Minimalist version updated to work properly in v2.2 update.
-
deleted
-
@dude99 may you give a tip why it doesn't work in present build?(both this and "latest one"). pressing Ctrl+F doesn't show any Search at all.
-
@reyn AFAIK Find in page doesn't work on this forum, it's a bug, u can try use . or F3 to get the findbar. But it should work on else where.
Also, try enabled chrome://flags/#enable-experimental-web-platform-features
-
@dude99 thanks, enabling that helped, actually it works even on this forum.
-
I've successfully done a version of this mod in several recent Vivaldi releases, but it looks like 2.4 has broken it. I did what I've always done, and nothing changed. Even tried adding the mods directly into common.css, no change. I haven't been paying attention, but I notice that in 2.4 there is no localeSettings-bundle.js anywhere. And several of the other bundle.js files listed in browser.html are also now missing. I suspect they have made serious changes...
So I put the unmodified files back. When I restarted Vivaldi after that, it drew a white page with icons in various sizes scattered along the left edge, and the "Vivaldi has been updated" tab about 2" square in the bottom corner. Couldn't find the Close X, so I killed it from Windows. Totally repeatable.
Gave up and tried to reinstall, and it kept saying "unknown error". I noticed the "2.4.1488.36" folder was empty after the install fails, so I deleted it. Next install worked, and it is back to its default operation.
But I really like having my search box at the bottom along with my address bar! I hope someone who knows more about Vivaldi can make this mod work again...
-
@LorenAmelang said in Less obstructive compact bottom Find bar:
Even tried adding the mods directly into common.css
Please don't do that, it might brake Vivaldi & do weird stuff.
I'm kinda busy right now but I probably will do a revision mod for v2.4 later when I have some free time.
-
updated mod for v2.4, latest version in 2nd post.
-
Thanks for this. I used it to cobble together my own version without the animation of the no match colouring, and it staying at the top.
Also it needs to be updated for v2.5, ".toolbar.toolbar-default" needs to be added to the first line.
And if you don't mind, i'm trying to figure out how to colour the fip-results when there's no match found. Currently on my mod it stays grey. Or maybe I could just hide it when there's no match.
I'm not overly familiar with CSS, as i just play around with things using trial & error till it works. I thought this might work:
.find-in-page.fip-nomatches.fip-results { color:maroon;}
Also tried a few variations using the .fip-results but no luck.
-
Is this broken for anyone else in 2.7?
On my mod of the original, it's reverting to a full width bar on showing with ctrl-F and found text, but then when no match is found seems to work fine (smaller width popup, coloured no-match)?
I went back to check with the original code as posted in the 2nd post and it's also not working as described in the first post. The colours/flashing and fade works, but it doesn't move to bottom, shrink or popup.
-
@7twenty It works for me, but I also only use a very minimal subset of the original mod. I tend to just take out the minimum to make it work and add from there if needed. I never blindly just copy+paste someone else's work without understanding what each declaration does.
I would start with deleting the fancy stuff until you have the bar on the bottom, then add the bells and whistles only when the base works.
Here's what I use:
/* Find in page on bottom */ .find-in-page { position:absolute; bottom:-1px; border-radius: var(--radius); max-width: fit-content; margin: 0 auto; right: 0; left: 0; z-index:1; } .find-in-page:not(:focus-within):not(:hover) { opacity: .8; }
-
@Pathduck said in Less obstructive compact bottom Find bar:
I would start with deleting the fancy stuff
That's what i did when i started retesting the code...well at least i thought so.
Anyway, after playing around with your code and testing on a fresh version, it seems to have fixed itself?!
Hopefully it stays like that now.
-
Anyone of you guys able to help with the CSS selector I need to use for only colouring the background of the search input field red if no match?
I've tried the very basic:
.find-in-page.fip-nomatches .fip-input-container
and the full monty:
.find-in-page.toolbar.toolbar-default.fip-nomatches .fip-input-container.toolbar.toolbar-default
The mod here uses the
:focus-within
specifier but I don't really need it to be red only when focused. -
@Pathduck
This?.find-in-page.fip-nomatches input[type="search"] {background:red;}
-
@dude99 Brilliant mate, that does it!
I was actually just sitting here trying to figure it out - I probably would've come up with a solution given a couple hours more :face_with_stuck-out_tongue_winking_eye:
What I didn't get was that the
.fip-input-container
wasn't actually the search field, just the background container. D'oh!Also I used the
var(--colorAccentBg)
since I prefer to use variables, just happens it's a more subtle dark red shade (#832929) for my theme.Thanks!