Less obstructive compact bottom Find bar
-
@Pathduck Actually, the answer is in the first post of this thread all along...
Is it my codes too difficult to understand? I usually doesn't like to use proper format, but you can feed it to https://codebeautify.org/css-beautify-minify to clean it up.
-
@dude99 said in Less obstructive compact bottom Find bar:
Is it my codes too difficult to understand?
No, not at all, now that I understand it
I just didn't need the:focus-within
selector and I didn't understand that you had to choose a input field of type search to make it work. -
@Pathduck Well, that's a trial & error process. It would be easier to get the correct target if you enabled chrome://flags/#debug-packed-apps & then right-click on the GUI you want to mod > Inspect to highlight it directly, usually that's the element you need to modify.
Hope that help.
Have fun mod Vivaldi to your heart content! -
@dude99 said in Less obstructive compact bottom Find bar:
right-click on the GUI you want to mod > Inspect to highlight it directly
Yeah I do that, I launch Vivaldi with the debug flags when testing CSS.
Even after nearly 20 years, I'm still learning the basics of CSS
-
enhanced version is over here: https://forum.vivaldi.net/post/432191
Note: I won't be updating this thread, cuz the new one is nicer. LOL -
Thanks for the mod. I'm using it for quite long time almost unchanged.
However, I've found an issue: when Ctrl+F is pressed, the content is moving down for 1px.
To make my CDO happy I've fixed it (see the last line in my css). My modified version is:
/* find bar */ /* https://forum.vivaldi.net/topic/28750/less-obstructive-compact-bottom-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; } */ /* changed: I do no like missed label, so the line is commented out */ .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:var(--colorErrorBg); background:var(--colorBg);} .find-in-page > .button-toolbar button:hover {fill:var(--colorBg); background:var(--colorErrorBg)!important; box-shadow: 0 0 0 1.5px var(--colorBg) inset;} /* changed: there were no cross in clear button on hover */ /* 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);}} .find-in-page-wrapper {border-bottom: 0;} /* changed: the whole content was moving down for 1px when search opened */
P.S. Sorry, do not like your new version