~Vivaldi Focus Theme 1.0 [ icon + colors + common.css ]



  • Vivaldi Focus Theme 1.0


    alt text

    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


    alt text

    Download

    Theme


    alt text
    alt text

    Day
    Background, Accent – #e6e6e6
    Foreground, Highlight – #3d3d3d

    Night
    Background, Accent – #333333
    Foreground, Highlight – #ffffff

    [ V ] Accent Color
    [ V ] Transparent Tabs
    Corner Rounding – Default

    Additional 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 over browser.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-ii

    And 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 a custom.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;
    }
    

    0_1527061899590_Screenshot 2018-05-23 09.51.07.png



  • 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!


  • Community Manager

    @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!


  • Ambassador

    @focuspurpose Great theme and congrats on getting featured on vivaldi's social networks


  • Community Manager

    @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!


  • Vivaldi Translator

    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.

    Custom Vivaldi Theme
    (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).





  • @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.


Log in to reply
 

Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.