In Tabs: Show Only Popup Thumbnail with No Info/Text Below
-
I tried this, but it doesn’t work:
/* Change the font size of all tooltip text */ #vivaldi-tooltip .tooltip .tooltip-item, #vivaldi-tooltip .tooltip .text { font-size: 0px; /* Set to 0 to hide the text effectively */ line-height: 0px; /* Set line height to 0 as well */ } /* Ensure thumbnail image is displayed */ #vivaldi-tooltip .tooltip .thumbnail-image { display: block !important; /* Show the image */ } /* Additional rule to ensure the img tag is visible */ #vivaldi-tooltip .tooltip .thumbnail-image img { display: block !important; /* Ensure the image is displayed */ }
Does anyone know how to mod this?
-
/* Tab tooltip hide size+ruler */ #vivaldi-tooltip .tooltip-item .thumbnail-text hr, #vivaldi-tooltip .tooltip-item .thumbnail-text .size { display: none !important; }
-
@DoctorG said in In Tabs: Show Only Popup Thumbnail with No Info/Text Below:
/* Tab tooltip hide size+ruler */
#vivaldi-tooltip .tooltip-item .thumbnail-text hr,
#vivaldi-tooltip .tooltip-item .thumbnail-text .size {
display: none !important;
}Thanks for your reply @DoctorG but it does not work
-
this works but not perfect:
/* Tab tooltip hide */ #vivaldi-tooltip .tooltip-item .thumbnail-text { display: none !important; }
-
@fontcl If you want perfect code, learn to inspect the UI yourself
https://forum.vivaldi.net/topic/16684/inspecting-the-vivaldi-ui-with-devtoolsThis is not perfect either:
#vivaldi-tooltip .tooltip-item .thumbnail-caption { display: none !important; }
I'll leave it as an exercise to figure out the bottom corner-rounding
-
@Pathduck said in In Tabs: Show Only Popup Thumbnail with No Info/Text Below:
#vivaldi-tooltip .tooltip-item .thumbnail-caption {
display: none !important;
}
thanks @Pathduck I will get into it! -
@Pathduck I've been trying for around three hours, but I think it's beyond my understanding, and now all I'm doing is trying random things. I think that since it's a popup, it's harder to find...
can't find the popup thumbnail -
/* Tab tooltip hide */ #vivaldi-tooltip .tooltip-item .thumbnail-caption { display: none !important; } #vivaldi-tooltip .tooltip-item .thumbnail-image { flex: 1; flex-grow: 1; flex-shrink: 1; flex-basis: 0%; margin: 0 2px 2px; margin-top: 0px; margin-right: 2px; margin-bottom: 2px; margin-left: 2px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); transition: background-image 0.3s; width: auto; border-radius: 0; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; color: var(--colorFg); background-color: var(--colorFg); }
@Pathduck with this code I got black rounded border:
-
@fontcl Getting there - You have the correct selector at least:
thumbnail-image
But - why copy the entire code from common.css?
You only need to override the part you actually want to change.And you're setting border-radius to 0, which is the exact property you want rounded following your theme's rounding value.
The tooltip-item code looks like this:
So the bottom left/right radius is set to 0 and gets square corners. This overrides the
border-radius
value set below because it's more specific.
You'll need to override that value, and for simplicity it's often easiest to just use the!important
keyword instead of using the exact selector:#vivaldi-tooltip .tooltip-item .thumbnail-image { border-radius: var(--radiusHalf) !important; }
You could also use the exact selector and avoid the !important:
#vivaldi-tooltip .tooltip .tab-solo .tooltip-item .thumbnail-image
But I prefer to use the least possible selectors to identify the element as more selectors are more likely to break when they change the code.Yes, popup elements are tricky - you'd need to use breakpoints (kind of messy) or use the keyboard to navigate the elements without moving the mouse to find the correct selectors. And it helps with two displays or a very large screen
I see you found the box-shadow property, it's fun to play with and get some even nicer-looking popups
https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow -
@Pathduck far away so close!
thanks for the help and knowledge!
finally:/* Show tab popup thumbnail with no text (tooltip) below */ #vivaldi-tooltip .tooltip-item .thumbnail-caption { display: none !important; } #vivaldi-tooltip .tooltip-item .thumbnail-image { border-radius: var(--radiusHalf) !important; }
-
@fontcl Great
And now you have learned to inspect the UI and find the code you need as well as some basic CSS skills
It's funny, because I had the exact opposite need, to remove the thumbnail as I find it completely useless
/* Tab tooltip hide thumbnail */ #vivaldi-tooltip .tooltip-item .thumbnail-image { display: none !important; }
But Vivaldi caters to all needs
-
@Pathduck yes, that was the only code I could find! I'm not sure I will use mine, but it was a challenge!
-
@fontcl Well at least you didn't resort to one of those hallucinating AI idiots that will give you completely bogus code just to complete their task