Hide tab popup thumbnail image while retaining name and RAM use

[BadTimesVirus]

This hides the big superfluous thumbnail preview image on hover, keeping RAM and tab info.

div[class*="tooltip"] .popup-thumbnail,
div[class*="card"] .popup-thumbnail {
    display: none !important;
    width: 105px !important;
    height: auto !important;
}
div[class*="tooltip"] > :nth-child(1) > :nth-child(1) > :nth-child(1),
div[class*="card"] > :nth-child(1) > :nth-child(1) > :nth-child(1) {
    display: none !important; /* Hides the image */
}
div[class*="tooltip"]:has(.tab.active),
div[class*="card"]:has(.tab.active) {
    display: none !important; /* Hides active tab's pop-up */
}
.active div[class*="tooltip"] > :nth-child(1) > :nth-child(1) > :nth-child(1),
.active div[class*="card"] > :nth-child(1) > :nth-child(1) > :nth-child(1) {
    display: none !important; /* Hides the thumbnail for active tabs */
}
div[class*="tooltip"],
div[class*="card"] {
    outline: 0px !important; /* Debug parent containers */
}
div[class*="tooltip"],
div[class*="card"] {
    box-shadow: none !important;
    outline: none !important;
}

Important:

I do not know what CSS is. I do not know what a computer is. I can't be sure if this will play nice with other things. Though I'd like to, I cannot assist or troubleshoot. I clawed and squealed until the demon box did what I wanted. There's almost certainly a better way to do this: If you wield CSS like someone that walks upright, feel free to rewrite and repost

[mib2berlin]

@BadTimesVirus
Hi, this setting should do the same:

Cheers, mib

[BadTimesVirus]

@mib2berlin This setting configuration gets rid of the entire popup for me, not just the image.

[mib2berlin]

@BadTimesVirus
Ah sorry, I am not sure what you are showing.

Cheers, mib

[Pathduck]

@BadTimesVirus In that case, something like this should suffice:

#vivaldi-tooltip .tooltip {
	display: none;
}

Notes:

• There's no point in setting properties on an element with display: none, it doesn't make it more hidden.

• If you want to select for the third child element just use :nth-child(3).
  https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

• Using attribute selectors like this div[class*="tooltip"] doesn't make much sense.
  If you want to select a specfic class just use .tooltip. If you want to select a div element with a specific class use div.tooltip.
  https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors

In any case, +1 for the effort

[Pathduck]

@mib2berlin Actually, disabling the "Show Popup Thumbnails" (like you show) makes it use the native Chromium implementation instead of Vivaldi's styled one. The native one can't be styled.

So for me, I want the prettier Vivaldi popup, but hide the thumbnail like this:

/* Tab tooltip hide thumbnail */
#vivaldi-tooltip .tooltip-item .thumbnail-image {
	display: none !important;
}

This would also allow me to change the font/colour etc of the popup should I want to.

But modding these popups are a PITA as their code disappears when the cursor is moved obviously so not easy to inspect.

[BadTimesVirus]

@Pathduck

I want the prettier Vivaldi popup, but hide the thumbnail like this:

/* Tab tooltip hide thumbnail */
#vivaldi-tooltip .tooltip-item .thumbnail-image {
	display: none !important;
}

This would also allow me to change the font/colour etc of the popup should I want to.

Praise be, you have done what I was attempting to do but with far less primal screaming and violence. I would amend the OG post with this if I could.

Still, probably something to be gained from the sheer comparison of "Sharp stick" vs DeWalt power tool. Even if it's just humor

[Pathduck]

@BadTimesVirus said in Hide tab popup thumbnail image while retaining name and RAM use:

I would amend the OG post with this if I could.

With a few more upvotes you should be able to edit your own posts

(it's a spam prevention measure)