Show us your Browser Thread?



  • I'm not sure if this is right here and wether such a thing already exists (search didn't bring anything up), so here goes.

    On XDA, where we mod our phones, a "Show your Homescreen" Thread is quite popular. It gives an opportunity to share what you have done in terms of mods to your Browser in our case. I went through some extensive modding to get a "Fullscreen" Browser and thought it might be interesting to look at and see what others use day to day.
    Feel free to share what ever you've done and want to show to us. You can also tell me this is a dumb idea and we'll all move on :thumbsup:
    0_1505929931845_2017-09-20 19_47_22-.png

    In this case, the Tab bar, Adressbar, Header and sidebar all extend on hover to still be useable.



  • It's not a dumb idea, but you should share the code you used. Generally I think it makes more sense to create threads with specific modifications, and keep them updated in case Vivaldi's code changes. We already had one general thread where all mods went into, and it was closed down -- the reason seemingly being keeping specific mods separated.



  • @luetage
    Thanks for the feedback. Although my CSS certainly is messy and will mostly just work with my setup i'm happy to share the specific parts:

    Hiding the Windows Header:

    #browser:not(.native):not(.horizontal-menu):not(.tabs-top).maximized #header {
    	opacity: 0;
    	min-height: 1px;
    	transition: all 0s ease 1s;
    }
    
    #browser:not(.native):not(.horizontal-menu):not(.tabs-top).maximized #header:hover {
    	background-color: var(--colorAccentBg);
    	opacity: 1;
    	min-height: 23px;
    	transition: all 0s ease 0s;
    }
    
    #browser:not(.native):not(.horizontal-menu):not(.tabs-top).maximized #header:active {
    	background-color: var(--colorAccentBg);
    	opacity: 1;
    	min-height: 23px;
    	transition: all 0s ease 0s;
    }
    

    Everything needed to make the Tab bar small, transparent and expand on hover:

    .tabs-left .tab-position .tab .tab-header .title {
    	width: 180px !important;
    }
    
    .tabs-left .tab-position .tab.pinned .title,
    .tabs-left .tab-position .tab.pinned .close,
    .toolbar-addressbar .button-toolbar.reload,
    .toolbar-addressbar .button-toolbar.home,
    .searchfield, #tabs-container.left .trash,
    #tabs-container.left .newtab  {
    	display: none !important;
    }
    
    .tabs-left .tab-position .tab .tab-header .title {
    	color: #FFFFFF !important;
    }
    
    .tabs-left .tab-position .tab.pinned .progress-indicator {
    	width: 30px !important;
    }
    
    .tabs-left .tab-position .tab.pinned {
    	flex: none !important;
    	margin-bottom: none !important;
    	height: auto !important;
    	width: 180px !important;
    }
    
    .tabs-left .tab-position .tab {
    	width: 180px !important;
    
    }
    
    .tabs-left .tab-position {
    	position: initial !important;
    	width: auto !important;
    	flex: 0 0 auto !important;
    }
    
    .tab-position .tab.active {
    	background-color: #CC342B !important;
    }
    
    #tabs-container.left .tab-strip {
    	display: flex !important;
    	flex-flow: row wrap !important;
    	position: initial !important;
    	overflow-x: hidden !important;
    	overflow-y: auto !important;
    	height: 100% !important;
    }
    
    #tabs-container.left .resize {
    	display: initial !important;
    	overflow: hidden !important;
    	flex: 1 1 auto !important;
    }
    #tabs-container {
    	position: absolute;
    	z-index: 25;
    	top: 0;
    	bottom: 0;
    	width: 30px !important;
    	background-color: var(--colorBg);
    	transition: width 0.2s linear 0.2s;
    	opacity: 0.5 !important;
    }
    
    #tabs-container .resize {
    	transition: width 0.2s linear 0.2s;
    }
    
    #tabs-container .resize:hover {
        width: 180px !important;
    		opacity: 1 !important;
    }
    
    #tabs-container:hover {
    		opacity: 1 !important;
    }
    
    #tabs-container.left {
        left: 0;
    }
    

    The Parts for making the Panel Container work:

    #panels-container {
        position: absolute;
        z-index: 25;
        top: 0;
        bottom: 1005px;
        width: 34px !important;
        background-color: var(--colorBg);
        transition: width 0.2s linear 0.2s;
    		opacity: 0.6 !important;
    }
    
    #switch button.preferences {
    	margin-top: !important;
    }
    
    #panels-container.right:hover {
        width: 400px !important;
    		opacity: 0.9 !important;
    		bottom: 0px;
    }
    
    #panels-container.right {
        right: 0;
    }
    

    Small Adressbar with expension feature:

    .toolbar-addressbar {
    	opacity: 0.6 !important;
    	transition: width 0.5s linear 0.5s;
    	width: fit-content !important;
    	align-self: center !important;
    	z-index: 30 !important;
    	overflow: hidden !important;
    }
    
    .toolbar-addressbar:hover, .toolbar-addressbar:focus-within {
    	opacity: 1 !important;
    }
    
    .addressfield {
    	width: 100px !important;
    	transition: width 0.3s linear 0.3s;
    }
    
    .addressfield:hover, .addressfield:focus-within {
    	width: 600px !important;
    }
    
    #webview-container {
    	position: initial !important;
    }
    

    And finally, stretching the page all across screen:

    
    .inner {
    	top: -34px !important;
    }
    
    #main .inner {
        position: absolute !important;
        padding-right: 34px;
    		Top: 0 !important;
    		Bottom: 0 !important;
    		Left: 0 !important;
    		Right: 0 !important;
    }
    
    html, body, #browser, #main {
    	flex: 1 0 auto !important;
    	height: -webkit-fill-available !important;
    }
    

    Please keep in mind, that all of this is a product of itterative testing. So I might have done things in a not so nice way. I tried deleting all duplicate options, but since it's quite a bit of code now, so feel free to share your improvements.

    I do realize, that this is far from useable for most people, but i love vivaldi for me having the option to use it exactly the way i want it to.




Log in to reply
 

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