Request to Hide Image Properties Bubble in Vivaldi

BrandonKalicharan

I've recently started using Vivaldi and I'm thoroughly impressed with its features and customization options. However, I've encountered a minor inconvenience when viewing images. Whenever I open an image, a small "i" bubble appears in the upper right corner, which displays image properties when clicked. While this feature may be useful for some users, I find it distracting and would prefer the option to hide or disable it.

I understand that Vivaldi prides itself on offering extensive customization options, and I'm wondering if it would be possible to add a setting or flag in the browser preferences to toggle the display of the image properties bubble. This would allow users like myself to tailor the browsing experience to our preferences.

I've been able to change the font on youtube's many different elements and i customized my tabs to be round and colored using Stylus and a Custom CSS file but i cant seem to find the element that points to the "i" bubble so i cant hide it. Please help me

Pathduck

@BrandonKalicharan Hi, this is the CSS I use for that:

/* Hide Image Properties button */
.webpageview button.inspector {
	display: none;
}

I can still right-click and open properties from the context menu.

BrandonKalicharan

@Pathduck thank you so much it works! im so happy

one last thing as i have you here, is it possible to move the speaker icon (the one that shows a tab is making noise/makes the tab muted by clicking on it) from the left side of the tab title to the right side?

Pathduck

@BrandonKalicharan said in Request to Hide Image Properties Bubble in Vivaldi:

one last thing as i have you here, is it possible to move the speaker icon (the one that shows a tab is making noise/makes the tab muted by clicking on it) from the left side of the tab title to the right side?

This is possible without CSS by setting the close button to the left:

Some CSS to do the same, but IMO looks a bit messy:

#tabs-container .tab-audio {
    position: unset !important;
    margin-top: 6px;
}

Lots of things are possible with CSS, it's up to you and your skill with CSS, which is not too hard and can be learned. Most important is learning to inspect the UI and find the code to change:
https://forum.vivaldi.net/topic/16684/inspecting-the-vivaldi-ui-with-devtools

BrandonKalicharan

@Pathduck thanks man. i have OCD which means i was using waterfox, a firefox classic clone, for years past its last update. after some system freezes i decided that that i wanted to switch and i using chatgpt until it decided recommend vivaldi and it even wrote the code for my first few CSS changes for youtube and the tab size and color. with your last few changes everything is perfect just how i wanted it, thank you

Pathduck

@BrandonKalicharan said in Request to Hide Image Properties Bubble in Vivaldi:

using chatgpt until it decided recommend vivaldi

Well I guess Algorithmic Inference is good for something!

BrandonKalicharan

@Pathduck Hello again,

I'm having another issue that i'd like to make a post about but I figured I'd ask you first since you seem knowledgeable about vivaldi and css

I like tab scrolling but i don't like how big the tabs become. I tried using chatgpt again but the closest it got was getting the size down but there was still gaps between the tabs where the original size were

ideally id like it like firefox which gets small but still readable with no space between tabs
FF Tabs.PNG

If you're curious this is the current code it made

/* Set the tab width */
.tab {
  min-width: 75px !important;
  max-width: 75px !important;
}

/* Ensure tabs are aligned correctly */
.tab-strip {
  display: flex;
  overflow: hidden;
}

/* Ensure each tab occupies only its own space */
.tab-position {
  flex: 0 1 auto !important;
}

/* Prevent gaps by resetting flex properties */
.tab {
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
}

/* Additional rule to handle spacing */
.tab-strip > .tab:not(.pinned) {
  flex: 0 1 auto !important;
}

Pathduck

@BrandonKalicharan Sorry, no idea about horizontal scrolling, I don't use it.

Also Vivaldi uses hard-coded values for each tab position. I'm not even sure the CSS experts here on the forum have found a solution for this, and I'm not one of those

I tried using chatgpt again

Please don't use AI. AI are idiots and will only end up confusing you more.
Learn CSS from the basic steps and use your human brain to solve problems.
https://www.w3schools.com/css/
https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics

BrandonKalicharan

thanks for the links man

Truemotion

@BrandonKalicharan Something changed in last Vivaldi release, I had just icons in tabs, now they have minimal fixed size. That's what you are experiencing. The free room near the tabs, are the part of the tab container's minimal size...

BrandonKalicharan

is it able to be readjusted?

Truemotion

@BrandonKalicharan I didn't find a way.