Panel similar to Opera Reborn's



  • Just in case I'm not the only one who really likes the way Opera's new panel merges with the application icon when it's active, here's some simple css to make Vivaldi's panel do the same thing:

    /* move addressbar to the right */
    .toolbar-addressbar.toolbar {margin-left: 34px;}
    
    /* create illusion of panel merging into address bar by making panel same color as browser background */
    #switch {background: var(--colorBg);}
    
    /* move panel buttons down just a tad */
    .bookmarks {margin-top: 1px;}
    

    https://i.imgur.com/TUfRwTT.png
    https://i.imgur.com/TUfRwTT.png

    But this is only css, so it's not quite as dynamic as Opera's. If you ever disable your panel, your address bar will not compensate. I was unable to figure out how to fix that using just css, but I'm sure it would be possible with some additional javascript.



  • @Tiamarth Nice hack :)
    Did you check if that still works if you switch on Settings > Panel > Panel Options: [X] Show panel Toggle ?



  • Yeah, I don't think you can control the margin of the toolbar with the panel state in css, since the hidden panel simply has a width of zero and no special id/class. Nice idea in any case!



  • @QuHno Ah, no, I forgot that was even a feature. I don't use it. Here's some css that takes both the panel toggle and the bookmark bar into account, customize as needed:

    /* move addressbar and bookmarks  to the right */
    .toolbar-addressbar.toolbar,.bookmark-bar {margin-left: 34px;} /* if you use panel toggle, make this 44 */
    
    /* create illusion of panel merging into address bar by making panel same color as browser background */
    #switch {background: var(--colorBg);}
    
    /* move panel buttons down just a tad */
    .bookmarks {margin-top: 1px;} /* if you use the bookmarks bar, make this -1 */
    

    @luetage It does! The panel toggled off on the left is #panels-container.left.switcher, toggled on is #panels-container.left.icons. The problem is that the panel is not a child of the address bar, so I can't dynamically adjust them based on each others' states with just css. But this works for my personal needs because I only rarely disable my panel.



  • Give me this color theme settings :grinning:
    @Tiamarth



  • @Mioni See "Arc Darker" in the OP of this thread: https://forum.vivaldi.net/topic/16892/arc-for-vivaldi



  • I had a go at this, because I'm on osx and wanted to keep my legacy panel setup, I took a different approach.

    Image:

    alt text)

    .toolbar-addressbar.search.toolbar:before {
    	content:"";
    	width: 34px;
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAIAAAC1JZyVAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3BpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMi1jMDAxIDYzLjEzOTQzOSwgMjAxMC8xMC8xMi0wODo0NTozMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpGNzdGMTE3NDA3MjA2ODExODA4M0Y3MUQ0NjMzMDQ2RCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo4QTZBQTNGMDM1Q0ExMUU3OEExNkUwQzJFQ0FCMzk4OSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4QTZBQTNFRjM1Q0ExMUU3OEExNkUwQzJFQ0FCMzk4OSIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgRWxlbWVudHMgMTEuMCBNYWNpbnRvc2giPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGNzdGMTE3NDA3MjA2ODExODA4M0Y3MUQ0NjMzMDQ2RCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGNzdGMTE3NDA3MjA2ODExODA4M0Y3MUQ0NjMzMDQ2RCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PgrBSZEAAAN3SURBVHja7FZZT1NBFJ65c29vb29bq1CqQtyChopoTEQTSTTRVCtuhICBgPHVmOBv0Gjikw+GRwIasGKoCTHULYa4L3GJLAIVhISt2gBWutDlLuO0xVoEaRuVp563OTNzvrN858zAgoIC8P+FAksiaZg0zNLA0IvsYVn2+nyhUIjnOSWrBHCeTxhDCgqC6PF4IIAajRrRdGowMgYyVGzZtikne3V3j/3b1AQNMcBzzkAIRRmwvK5w125JErt6+nAoACGebw0ZDIYFMGRZlOQD5sMXL5wrPmTOM+Z3dve6JpwIUcR27JgoCIySrzlbU3Pm9MEDJqTgOjs7RCFIUVRStRFFUaPVHi42r8nJXq7T7d9bVFpSwi3LlOV4T7F3xm/MMxYfNOn1mVlZ+oqy4wZ9BrmbLAXC2RAEUpiYprz06OYtBYIkknr8SgWigqIUCIaiS5/PKwhCXLSJYGiE3G73vfsPpj3eqEafmXGi9JhKrSP5jDnDsWz/J3tvrz3CBmxttTm+OumFWPCHaCiKYdDLZ0/a7jyIKc2mfUV79giSPBsQBMSi1+2ZmJoiq46untbbNgRJiCiFvmEZxud1t7RYh0cdsxqWPXWyaoUhx+cPYCyBMN1ntLoVuRvWS5LU0GiZco7RhCMAJsu0SHkAouDY+BetLmPnju1R8mSvWokh6vho93i9/qCgUOmqq6sqy0ranzyvq79GiX5qoVAWgwnvUUgIBUccjh2FhasMWVHl1nzj2nVrM/Qrjcb8ioryU5XlgWDw/KXLw4P9rIJesP6JpgAAap4bHhyw3LTmbcwlk4AoGYY5YjYdMu0nM4JmwtfrGpq63r9maRzBgADglGca4QLPKe7a2l6+fjsnUERFMT4PDt2yNof8HoZGP31LfXQSTnEc53FN1jdcdbmm53dx882WT/Y+TslhAP9qQhOkZVr1qxfP2u7ej2uasLx598FmsyGKRMb8g4eAtAKDQGPTdUK8mPL7tNtyo9kxPsrzKozxP4AhRpRKdmig71qjRRCkaAUePX7a3v6QPBEQJjayGKF/YwNpo/7BIaVKrdHwhBFXamu/TTpVKi5RJJHLyX0Ho+XFZNLIGBqyMgkdZgIzao7FMv7b13NuC4WFQZQsiY6xEQXDqJWKJDGSh4krJqJ5niGJwhgnfytlmOjMT//T0jApyg8BBgAa3WuedPhBDQAAAABJRU5ErkJggg==);
    }
    

    There is only one Problem, I don't know how to color/get rid of the bottom border in the :before content, because it's just the same border as the rest of the address bar. Anyone got a brilliant idea? :D



  • @luetage That css doesn't actually appear to do anything for me. But to remove the address bar's bottom border, you could just .toolbar-addressbar.toolbar:after {display: none;} ?



  • This works of course, but i like the border :/
    I also tried changing its color to the same black, which let's it disappear too in the panel, but it doesn't look right.

    Strange the css doesn't work for you btw, I wonder why.



  • @luetage Ah, I was just now able to get it working by changing .toolbar-addressbar.search.toolbar:before to .toolbar-addressbar.toolbar:before.

    Which allowed me to actually see the issue. You can just give the after pseudo element a margin: .toolbar-addressbar.toolbar:after {margin-left: 34px;}

    Though I will say I do currently prefer my method, as the icon provided in your css isn't actually a menu ;)



  • Brilliant, and so simple..... I have much to learn lol

    And yeah, this solution is for osx. On osx there exists no Vivaldi menu, therefore there is also no Vivaldi icon anywhere on the browser. I thought it would be nice to introduce it this way, and just having blank space up there looks kinda silly anyway.

    Btw., is the image in my first post not visible to you? I hid it in a quote to save space.



  • @luetage Oh I see, I didn't realize that was the case for osx. I'm guessing that's because window menus on Mac are in the panel? Ubuntu does something similar with its window menus, I wonder if they considered that for Linux as well, as Ubuntu is what everyone targets when building for Linux.

    I can see the image, yes, it allowed me to see the issue but not to inspect it ;)


Log in to reply
 

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