One-line UI: help wanted!



  • I'm using vivaldi-snapshot on Linux (Ubuntu 16.04):

    Vivaldi 1.6.689.32 (Official Build) dev (64-bit)
    Revision 841b9a58130b84a3816d42023b714a2127e1e56f
    OS Linux
    JavaScript V8 5.5.372.32
    Flash (Disabled)
    User Agent Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.92 Safari/537.36 Vivaldi/1.6.689.32
    Command Line /usr/bin/vivaldi-snapshot --user-data-dir=/home/USER1/.config/vivaldi-snapshot --disable-gpu --debug-packed-apps --silent-debugger-extension-api --always-authorize-plugins --disable-translate --enable-blink-features=ResizeObserver --flag-switches-begin --flag-switches-end --disable-smooth-scrolling
    Executable Path /opt/vivaldi-snapshot/vivaldi-snapshot

    I came across a highly minimal single bar (powerline?) theme and borrowed much of it.

    My present custom.css in /opt/vivaldi-snapshot/resources/vivaldi/style/custom.css with help from sjudenim in Use a fixed width font for tooltips? is this:

    * {
        font-family: Ubuntu Mono, monospace !important;
        font-size: 17px !important;
    }
    #browser.linux, 
    #browser.linux + div, 
    #browser.linux + div + div, 
    #browser.linux button, 
    #browser.linux input, 
    #browser.linux select, 
    #browser.linux textarea { 
        color: var(--colorFg) !important;
    }
    .addressfield .pageload-indicator {  
        background-color: var(--colorAccentBgDark) !important;
    }
    .tab.active { 
        color: var(--colorFg) !important;
        font-weight: 700 !important;
    }
    .tab-position .tab {
        min-width: 15px !important;
    } 
    .tab-position .tab .progress-indicator {
        background-color: var(--colorHighlightBg) !important;
    }
    #status_info>span { 
        font-size: 18px !important;
        color: var(--colorHighlightBg) !important;
        background-color: var(--colorFg) !important;
        border: none !important;
    }
    .button-toolbar.forward,
    .button-toolbar.reload,
    .button-toolbar.home,
    .favicon,
    .tab-audio {
        display:none !important;
    }
    .bookmark-bar {
        font-weight: 700 !important;
    }
    .button-toolbar.back {
        opacity: 0.5 !important;
    }
    
    /*>>> powerline css <<<*/
    
    #tabs-container.top {
        padding-top: 0px !important
    }
    .address-top .toolbar.toolbar-addressbar:after {
        content: unset !important;
    }
    .addressfield {
        flex: unset !important;
        width: 500px !important;
        border: unset !important;
        margin-bottom: 0px !important;
        font-weight: 700 !important;
    }
    #tabs-container {
        padding-left: 545px !important;
    }
    #header {
        height: 33px !important;
    }
    .tab-position .tab .tab-header {
        flex: unset !important;
    }
    .tab-position .tab .title {
    display: initial !important;
    flex: unset !important;
        margin: unset !important;
        text-overflow: ellipsis !important;
    -webkit-mask-image: unset !important;
    }
    .toolbar {
        position: fixed !important;
        top: -1px !important;
        z-index: 2 !important;
    }
    #tabs-container .newtab {
        display: block !important;
        z-index: 2 !important;
    }
    .button-tabbar {
    padding: 0 0px !important;
        width: 10px !important;
        height: 10px !important;
    }
    .tab-position .tab.active .tab-header .progress-indicator {
        visibility: initial !important; 
    }
    .extensions-wrapper {
    flex: unset !important;
        position: fixed !important;
        right: 20px !important;
    }
    

    This is what the the UI in one line looks like:
    0_1482382128186_vivaldi-one-liner.png

    While I am quite happy with the results, given that I have very little of css theory and practice, I would like some help!

    • I can't see the Vivaldi button. I know I can get the menu by pressing Alt, I would like to have the button always visible to the left of the back arrow (which is currently at the left edge).
    • The new tab button is under the ublock origin extension button. I tried to get rid of the new tab button altogether but I can't.

    Thanks for reading and any pointers!



  • ...

    • The new tab button is under the ublock origin extension button. I tried to get rid of the new tab button altogether but I can't.

    ...

    I think I got the new tab button out from under the ublock icon using:

    div#tabs-container.no-thumbs.top {  
        max-width:750px !important;  
    }
    

    It isn't really important for me to get rid of it just as long as I can get it to behave!



  • A simple .newtab {display: none;} is enough to hide it. I tried out your code but on osx everything overlaps, so it's not really working.



  • @luetage said in One-line UI: help wanted!:

    A simple .newtab {display: none;} is enough to hide it. I tried out your code but on osx everything overlaps, so it's not really working.

    Thanks for responding!

    Your code does work and it is what I tried not realising I had code lower down that negated it!

    The pixel values in the code I posted are specific for my laptop (15.6", 1366x768) with Vivaldi maximized. I should have made that clear but didn't!


Log in to reply
 

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