~Vivaldi Focus Theme 1.0 [ icon + colors + common.css ]
-
Vivaldi Focus Theme 1.0
Hello there,
I discovered Vivaldi a little over a week ago and this is the first time I fell in love with a web browser. There are many reasons for this and I will not go into details since you probably know them all. I just wanted to share with you my own personalization of Vivaldi, from the redesign of his icon to the few changes I made to his interface.
This theme was conceived through a simple idea:
Attention should be paid to the content, not the container.This theme is based on keyboard shortcuts.
If you don't master the main ones, you will have to learn how to use them.Icon
Theme
Day
Background, Accent – #e6e6e6
Foreground, Highlight – #3d3d3dNight
Background, Accent – #333333
Foreground, Highlight – #ffffff[ V ] Accent Color
[ V ] Transparent Tabs
Corner Rounding – DefaultAdditional parameters
[ X ] Show Address Bar ( use instead ⌘ + L and ⌘ + E )Common.css
Hide extension buttons
#browser.mac .window-buttongroup { +829 display: none; .mac #tabs-container.top { 5848 padding-left: 7px;
Hide new tab & trash buttons
.button-tabbar { 2318 margin: auto -10000px; 2322 opacity: 0; .button-tabbar:hover, .button-tabbar:active, .button-tabbar:focus { 2340 opacity: 0; #tabs-container .toggle-trash svg { 5626 opacity: 0;
Soft accent color – active tab
#browser .tab-position .tab.active { 5233 background-color: var(--colorAccentBgAlpha); .color-behind-tabs-off #tabs-container.top, .color-behind-tabs-off #tabs-container.bottom { 5812 border-color: var(--colorAccentBgAlpha); .stacks-on .tab-strip .tab.active .tab-group-indicator .tab-indicator.active { 6003 background-color: var(--colorAccentBgAlpha);
Soft accent color – title bar ( w. tabs on left )
#browser.color-behind-tabs-on.tabs-top, #browser + div.color-behind-tabs-on.tabs-top, #browser + div + div.color-behind-tabs-on.tabs-top, #browser.color-behind-tabs-off:not(.tabs-top), #browser + div.color-behind-tabs-off:not(.tabs-top), #browser + div + div.color-behind-tabs-off:not(.tabs-top) { 4457 background-color: var(--colorBg); 4458 color: var(--colorFg); 4459 fill: var(--colorFg);
All ideas are welcome!
-
I like the application icon. As for ideas, look at this forum board ––––> https://forum.vivaldi.net/category/52/modifications
Generally we don't edit
common.css
directly but rather implement our own files and load them overbrowser.html
, directions here.Hiding all extension icons can be done with the extension toggle in settings, has the advantage that you still have access to them, if you need one of them.
If you don't like the look of buttons, you can easily style them
––> https://forum.vivaldi.net/topic/20227/changing-icons-with-css-part-iiAnd yeah, about your themes. If you make the highlight color the same as the background, many things will be unreadable in the Vivaldi UI, there should be good contrast between background and foreground/highlight.
-
@luetage Thank you for the advice, I'll make those changes in the next few days.
I came across the topic on icons a few days ago because my initial idea was to modify icons. But I think that the icon to add a tab is useless with the possibility to open a tab with the double click (which completes well with the possibility to close a tab with the same action).
Thanks for your comment on the icon
I will continue to modify it over time (as much as the theme)I would eventually like to replace the area that was occupied by the trash icon by the previous and next arrows, do you know if this is possible?
-
It's possible with javascript, because you can select the icons and append them to the trash and sync container. But there's a problem: Since you are hiding the addressbar in settings, the mod cannot select the next and previous buttons to move them to tab bar. The workaround is hiding the addressbar with css, but then the shortcuts to show the floating address field won't work anymore (I think?). I haven't tried it yet, but I don't see a solution right now.
-
I spoke too soon. Surprisingly it works. A possible cause could be that unticking "Show Address Bar" in settings just hides it with css, but not sure. I'll cook something up.
-
Ok, this should work. You will need both a
custom.js
file and acustom.css
file to implement. Since you already should have a custom.css file with your edits (instead of editing common.css), you can just add the code to it. No need to add multiple css files, if you don't want to.
custom.js
function tabNav() { const tab = document.getElementById('tabs-container'); const forward = document.querySelector('.button-toolbar.forward'); const back = document.querySelector('.button-toolbar.back'); forward.classList.add('button-tabbar'); forward.classList.remove('button-toolbar'); back.classList.add('button-tabbar'); back.classList.remove('button-toolbar'); tab.appendChild(back); tab.appendChild(forward); }; let adr = {}; setTimeout(function wait() { adr = document.querySelector('.toolbar-addressbar.toolbar'); if (adr) { tabNav(); } else { setTimeout(wait, 300); } }, 300);
custom.css
#tabs-container .back, #tabs-container .forward { height: 34px; min-width: 34px; margin: 0px; display: unset; }
-
Impressive! Super job @luetage, it's exactly what I wanted to achieve. I will implement and credit your work for 1.1. Thank you so much. I love it!
-
@focuspurpose Thanks a mil for sharing such great post and welcome to Vivaldi's community
-
This reminds me a bit of an Epiphany redesign someone mocked up, where there was no address bar, but clicking on the current tab brought out an address field within the tab, highlighted and ready to have something entered.
Maybe in the future, we could have a UI the OP showed, but with the ability to click on the tab and have either:
- the tab itself transform into an url field
or - the url bar appear below the address bar, showing it's the URL for the current tab, highlighted and ready to have something else highlighted.
The trouble would be the buttons(back, forward, refresh, etc.), but just thought I'd throw the idea out there.
Very inspiring post, OP! And beautiful theme!
- the tab itself transform into an url field
-
@focuspurpose Great theme and congrats on getting featured on vivaldi's social networks
-
@focuspurpose ps we promoted you on our social media channels in case you haven't already seen it
https://twitter.com/vivaldibrowser/status/1001441982089134080 -
Wow! I haven't been connected in the last few days so I'm discovering all your messages
First of all thanks to everyone for the support! I am very grateful for your interest and I will do my best to contribute to the community.
Thank you very much @gaelle for your welcome message and for giving such visibility to this project! It wasn't expected and I really appreciate it!
@D0J0P I find this mockup and your ideas very interesting. A few days ago I was thinking about an interface where tabs would have their own back and forward buttons but I thought that it could be visually complex. There is something to explore with tabs I agree with you
Once again thank you all, I hope to be able to make further contributions on this and other topics soon!
-
This inspired me to make my own Vivaldi theme/mod. A lot of it is based on this theme, but with some additional stuff put in (like I want to keep the sidebar and the status bar, as well as the trash icon and window close). Might put this up in a separate thread as well.
(Couldn't upload directly to Vivaldi Forums for some reason. So I uploaded to imgur and image quality got messed up...) -
Great job @Komposten! Personally I display the sidebar only when I need it, with shortcuts (same thing for reloading closing etc). However I understand the need you may have with the trash icon. I use CMD + SHIFT + T which call the previous closed tab and this is enough for my daily use (if I need more I use the "Closed Tabs" part of the Window panel).
-
can you help with this maybe??
https://forum.vivaldi.net/topic/27898/how-do-i-make-it-look-like-this/2
-
@focuspurpose I like
-
I like it. Nice and minimal. You've inspired me to consider hiding window controls. I'm a keyboard guy as well.
My only design suggestion would be to keep the active tab font color the same as the rest. Or at least not an inverse of the rest. But that's more personal opinion than critique.
-