Simple CSS Mods

code3

Here are three I have made and like. I have put them in one post because they are so small.
Modded start page navigation, great if you have a window background image:

.startpage-navigation {
    background-color: transparent !important;
    box-shadow: none !important;
    color: white !important;
}

nav.startpage-navigation * {
    padding: 3px 20px;
}

Rounded buttons animation, makes Vivaldi look more modern:

.button-toolbar button:hover {
    border-radius: 100% !important;
}
.panelbtn:hover {
  border-radius: 50% 0% 50% 50% !important;
}

.button-toolbar button, .panelbtn {
      transition: 0.7s;
}

And this one increases the size of the search field on hover:

/* Increase Search Field on Focus */
.UrlBar-SearchField:focus-within {
    flex-basis: calc(var(--SearchFieldWidth, 210) * 1.5px);
    }
.UrlBar-SearchField {
    transition: all 0.5s;
}

You can also use CSS to rename the mail panel if you want to! (That's not my mod though).

I looked at more modern-looking applications, and they do not make their buttons shrink on hover. So I removed it:

/* Change Acitve Button animation from shrink to background change */

button:active > span svg {
    transform: scale(1) !important;
}
button:active {
    transition: background 0.1s;
    background-color: var(--colorHighlightBg) !important;
}

hebgbs

@code3 said

Rounded buttons animation, makes Vivaldi look more modern:

"Modern" is subjective. Clearly tthe people at Vivaldi think a more industrial art deco design is modern, with square corners all around. I would say that rounded buttons make the browser look more "Friendly", but around the time when people were making round button mods for Firefox, people thought that was modern back in the day.

Legacy copies of Windows Media Player had what many thought were modern design elements back in the day, and under Nullsoft's ownership, WinAmp had so many skin customization features, a lot of mods people would do for that thing also had rounded corners. It was still a square box at the end of the day but it didn't look like a square box.

So your modernity's probably a bit dated. But I'd be damning myself if I didn't say I like it too.

code3

@hebgbs Of course my modernity is subjective.
(I don't know why they think the square corners are so great though )
What I like about it is the animation. But thank you for trying my mod!

Pesala

Don't forget to include a header in each snippet of code. It makes the *.css file easier to read. I think this is a must-have to hide the useless bookmark thumbnails and show more of the URL (which does not wrap).

/*Hide the Bookmark and Notes Previews*/
.addbookmark-cardwrapper .upper-half .preview,
.notes-cardwrapper .upper-half .preview {display: none;}

Buglocker

@code3
For the "Rounded buttons animation" , is there the possibility of changing the background color (when hover) ?

code3

@Buglocker

@code3 said in Simple CSS Mods:

.button-toolbar button:hover {
border-radius: 100% !important;
background-color: blue;
}
.panelbtn:hover {
border-radius: 50% 0% 50% 50% !important;
background-color: blue;
}

.button-toolbar button, .panelbtn {
transition: 0.7s;
}

Buglocker

@code3 I tried with three colors (yellow, white and blue) but I do not see any difference.

code3

@Buglocker Hmm... Try making it important:

background-color: blue !important;

Or using background shorthand:
background: blue !important;

Buglocker

@code3 In the first case does not change anything , in the 2nd and 3rd works only for the trash icon.

code3

Are you using the built-in support for CSS mods enabled in vivaldi:experiments?

Have you tried this:

button.panelbtn:hover {
    background-color: red !important;
}

Ybra

@code3 Hello. I'm not a tech smart person at all. However, Give me simple, clear instructions to follow and I can sometimes accomplish a fix. For example, in Pale Moon (which I've ditched because I'm running up against 'browser not supported' too often), I was able to use a fellow's simple instructions to create Firefox's lost multirow bookmarks toolbar. (It involved adding a folder in the Profile Folder, named Chrome and then adding a text file within it naming it userchrome and changing the extension to css.) YouTube site:

https://www.youtube.com/watch?v=pM8R5q_b6TI

Is that possible with Vivaldi?

code3

@Ybra This is call completely desperate from my CSS mods, right? You might want to create a separate thread in the modding forum. Have you tried the bookmarks panel? It is kind of the same idea - without opening a new tab, be able to easily search through all your bookmarks. You can make it even easier by setting panel to floating and using a keyboard shortcut.

Ybra

Okay. Understood. Maybe I can find a YouTube (hate it, but) video showing the bookmarks panel you speak of. Otherwise, I don't know whether it's something I'd want. Thanks. Later...

nomadic

@Ybra Check out the Vivaldi Help pages. They contain a lot of useful information for new users:

Here is the page for the Bookmark Panel: Bookmark Panel

And here is a link to the modding forum if you want to create a new post about your idea for a multiline bookmark bar.

code3

@Ybra If you make a post in the modding forum I can walk you through this.

If you don’t like YouTube’s bad privacy/bad speed/bad ads you could access it via invidious using the extension “Privacy Redirect”

Ybra

@code3 Thanks for the offer, but I have to take a break from this for now. I'm just getting burned out with everything. I'm on holiday - and should be trying to relax. Mind you, for me, relaxing includes lots of research and blogging. But even so, I just need it to be less work. Thanks again.

Incidentally, When I checked YouTube, I could only find vids of tab panels. I do sometimes have a lot of tabs open, but not that many. And tabs, to me, are neither here nor there. They change and depend on what I'm doing. The bookmarks change too, but not so often. How often does someone change their browser, or email for example. And because I pass on info, I bookmark some of the more important vids that I've come across (James Corbett for example). Then there's the Index to my 140 blog posts on covid.

Mod edit to post to observe the community Code of Conduct.

code3

@Ybra If you can access any other panel, you can access the bookmarks panel. I believe the bookmarks panel is at the top by default.

Ybra

@code3 I just experimented. I dragged a bookmark from the panel to the toolbar and that worked. And what I like about it, is that it did 'not' remove my bookmark from the panel. I've always hated the way that my ability to organized bookmarks was limited that way. Step by step.