Some experimentation with tab-thumbnails (skin-customization)



  • Hi, recently I was wondering if one could make tabs more expressive about the content without wasting too much screen space and came up with an idea to combine thumbnails and tabs more closely. So I worked a bit on the default css style and created this: [img]http://i.imgur.com/6oi29im.png[/img] Update with blur: [img]http://i.imgur.com/3EMH13C.png[/img] The top part of thumbnails is displayed directly in the tabs. Working similar to tab coloring, but with more detail. I think the major problem is good readability (for me it's okay, but people are different) One could just put a solid slim box around the text (similar to speed dial tab), but waste some image-space by doing this. Another idea would be to blur the thumbnails to reduce obstructive details. Also currently the thumbnail only updates when re-entering the tab (when scrolling and leaving, the image stays the same) What do you think? ;) If you want to try it out for yourself, save the css code below as tabs.css in C:\Users<youraccount>\AppData\Local\Vivaldi\Application\1.0.83.38[b]resources\vivaldi\style[/b] (where common.css is also located) [code]#tabs .tab .tab-header { display: flex; min-height: 30px; flex: 0; position: absolute; top:0; left:0; right:0; z-index:1; } #tabs .tab { color:#000; text-shadow:0 0 1px #fff,0 0 4px #fff,0 0 5px #fff, 0 0 7px #fff,0 0 9px #fff,0 0 9px #fff,0 0 11px #fff,0 0 11px #fff; border:1px solid #aaa; background-color: transparent!important; background-image: transparent!important; font-weight:500; } #tabs .tab.active { color: #000; border:1px solid #000!important; z-index: 2; font-weight:700; } #tabs .tab .tab-thumb { flex: 1; background-size: 100% auto; background-repeat: no-repeat; background-position: 0 0; margin-left: 0px; margin-right: 0px; z-index:0; } #tabs .tab:not(.active) .tab-thumb { -webkit-filter: blur(1px)!important; } #tabs .tab.active .tab-thumb { -webkit-filter: contrast(110%) brightness(110%)!important; } #tabs .tab .tab-header .title { padding:2px 3px; } #tabs .tab.active .tab-header .title { background:rgba(255,255,255,0.9); box-shadow:0 0 5px rgba(255,255,255,1); } #tabs .tab:not(.active) { background-color: #transparent!important; color: #000; } #tabs .tab:not(.active):hover { background-color: #transparent!important; } #tabs .tab:not(.active):active { background-color: #transparent!important; }[/code] Open browser.html in resources\vivaldi and insert below [code]<link rel="stylesheet" href="style/common.css">[/code] this line: [code]<link rel="stylesheet" href="style/tabs.css">[/code] If you want to revert the changes, you can simply remove this line again. Now (re)start vivaldi.</youraccount>



  • Looks great :)
    What about hiding the page titles by default and show them only when hovering? I think the thumbnails and favicons are detailed enough.



  • That looks really great- i would love to have this too!

    :cheer:

    Very innovative!

    But I would only update the non active tab content when the computer is idle, and only optional ( if the fan noise increases, the battery suffers or I surf with a limited data volume, it would be good to disable this background reloading..)

    Alternatively I also like the opera 12 way and was surprised it never was copied by other browsers, besides slepinir.
    I just found out vivaldi has it! Great! Very promising after all!


Log in to reply
 

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