UI Request: Vertical Address Bar, Vertical Status Bar



  • I’d like to request snapping the address bar and status bar to the sides, similar to how the tab bar is handled now: it can be snapped to the top, bottom, left or right. On widescreen monitors, vertical space is always at a premium, and the address and status bars are the only UI elements that can’t be placed vertically at this time. I realize this request might be a little niche, as reading text at a 90° angle may seem odd, but it doesn’t take as long to adjust as you might think. The popular text editor, Notepad++, has this feature built-in to its implementation of vertical tabs—the titles of each document run perpendicular to the main window along the left border. (See attached image.) It may look weird at first, but it takes a matter of minutes to get used to, and now I long for that feature in every tabbed application I use. Such a space saver! In the meantime, I’ve tried to mock-up this idea in css, but I’m stuck. I’ve tried [url=http://www.w3schools.com/cssref/css3_pr_rotation.asp]rotation and rotation-point[/url], but I can’t get it to work. How can I rotate text 90° in Vivaldi? Anyone have any ideas? Thanks for reading. Attachments: [img]https://forum.vivaldi.net/uploads/attachments/72212/VerticalTabs.png[/img]


  • Moderator

    @Dawn:

    In the meantime, I’ve tried to mock-up this idea in css, but I’m stuck. I’ve tried rotation and rotation-point, but I can’t get it to work. How can I rotate text 90° in Vivaldi? Anyone have any ideas?

    No browser supports this parameter, no wonder it did not work. Use:

    transform: rotation(90deg)



  • @An_dz:

    transform: rotation(90deg)

    That didn’t work, but:

    -webkit-transform:rotate

    Does work. Unfortunately, unlike rotation and rotation-point, you can’t specify where webkit transform pivots—it’s always around the midpoint. That means you have to fudge around with positioning to get it to where you want, and if you resize the window, it’s off.

    My code. Tabs and address to the left, positioning for a maximized window, 1920x1080 resolution. Any other size and the address bar doesn’t align under the left tab bar.

    .vivaldi,.newtab,.trash,.window-buttongroup,.button-toolbar,.button-addressfield,.button-toolbar-small,.tilingtoggle,.imageactions,.pageactions,#zoom_control,#header{display:none!important}
    .tab-strip{z-index:1!important}
    #tabs-container{border:0!important;padding:0!important;width:30px!important}
    .addressfield{border:0!important;margin:0!important;height:20px!important}
    .toolbar-addressbar{position:fixed!important;top:95px!important;right:948px!important;width:100%!important;-webkit-transform:rotate(-90deg)}
    .url{padding:0 0 2px 6px!important}
    #status_info{font-size:13px!important}
    
    ```Is there some trick to get the address bar to always snap to the left?


  • You may be looking for transform-origin: ?



  • @ShaneHudson:

    You may be looking for transform-origin: ?

    Yes! Thank you, that’s exactly what I was looking for.

    The completed code, for the dark theme.

    .vivaldi,.newtab,.trash,.window-buttongroup,.button-toolbar,.button-addressfield,.button-toolbar-small,.tilingtoggle,.imageactions,.pageactions,#zoom_control,#header,#switch,.panel>header,#downloads li .icon{display:none!important}
    .file{max-width:16vh!important}
    #panels-container{max-width:36px!important}
    #downloads ul{padding:0!important}
    #downloads li{margin-left:36px!important;padding:4px 4px 13.5vh!important;min-height:0!important;-webkit-transform:rotate(90deg);-webkit-transform-origin: left top}
    .tab-strip{z-index:1!important}
    #tabs-container{border:0!important;padding:0!important;width:30px!important}
    .url{padding:0 0 2px 6px!important}
    .addressfield{border:0!important;margin:0!important;height:20px!important}
    .toolbar-addressbar,#footer{position:fixed!important;bottom:-20px;left:4px;width:80vh;-webkit-transform:rotate(-90deg);-webkit-transform-origin: left top}
    #footer{box-shadow:none!important}
    #status_info{background-color:#2c2c2c!important;font-size:13px!important}
    
    ```Vertical favicon tabs to the left, with vertical address and status bars beneath them. The address and status bars occupy the same space. By default, the address is displayed, however when you hover over a link, the status bar is shown.
    
    ETA: Stripped-down downloads panel, in the same style as the address and status bars. Text flipped the other way since the panel is docked on the right.
    
    [attachment=2369]preview.png[/attachment]
    Attachments:
    ![](https://forum.vivaldi.net/uploads/attachments/72212/preview.png)


  • Uh… Thanks? (Not sure if that was meant as a compliment or an insult! :P)

    I’ve updated this style, making it work for both the light and dark themes, boosting the font size of the address/status bar and annotating the code so it’s easier to make it your own.

    I’ve noted in ALL CAPS where you can change the background and highlight colors for the dark and light themes, increase or decrease the font size (it’s already set at the max size before the text starts to get cut off, but you can make the font smaller if you like) and most importantly, decide what percentage of the vertical bar should be allocated to address/status, with the remaining space going towards tabs. By default I’ve set it at 66vh, or two-thirds of the bar’s total length, but you could set it to any value from 1 to 100vh (viewport height.)

    (If you have more tabs than fit in the remaining space however, don’t worry, they’ll just overflow in front of the address/status bar—you just won’t be able to see the loading info when you load a new page, since it will be covered by the extra tabs.)

    In the final section, you’ll see the settings I applied in Vivaldi to achieve the look in the screenshot below.
    [attachment=2502]lightdark.png[/attachment]

    /*purge visual clutter: first line strips out buttons, the other lines slim the panel to downloads only, with perpendicular text just like the unified url-status-tab bar*/
    .vivaldi,.newtab,.trash,.window-buttongroup,.button-toolbar,.button-addressfield,.button-toolbar-small,.tilingtoggle,.imageactions,.pageactions,.zoom-control,#header,#switch,.panel>header,#downloads li .icon,.pageload-loaded{display:none!important}
    .file{max-width:16vh!important}
    #panels-container{max-width:36px!important;border:0!important}
    #downloads ul{padding:0!important}
    #downloads li{min-width:16vh!important;min-height:0!important;margin-left:36px!important;padding:0 4px 14vh!important;-webkit-transform:rotate(90deg);-webkit-transform-origin: left top}
    
    /*keep tabs on top and reduce their width to a narrow column of square favicons*/
    .tab-strip{z-index:1!important}
    #tabs-container{width:30px!important;border:0!important;padding:0!important}
    .favicon,.unread{background-color:transparent!important;box-shadow:none!important}
    
    /*make address and status bars fit within the frame of the tab bar*/
    .addressfield,#footer{height:0!important;position:fixed!important;bottom:-10px;left:-8px;-webkit-transform:rotate(-90deg);-webkit-transform-origin: left top}
    #footer{height:24px!important;bottom:-38px;left:2px}
    #status_info{margin:0!important}
    #status_info>span{padding-left:20px!important}
    
    /*URL LENGTH: by default two-thirds of the bar is devoted to url (leaving a third for tabs) but you can change that here with WIDTH (any value from 1–100vh)*/
    #status_info>span,.addressfield{width:66vh;font-size:17.4px!important}
    
    /*COLORS: defaults for light and dark themes are: white—light background; black—dark background; light grey—light active tab; dark grey—dark active tab*/
    .ui-light #status_info,.ui-light .tab-transparent,.ui-light .url,.ui-light .panel-group,.ui-light{background-color:#fff!important}
    .ui-dark #status_info,.ui-dark .tab-transparent,.ui-dark .url,.ui-dark .panel-group,.ui-dark{background-color:#000!important}
    .ui-light .active{background-color:#ddd!important}
    .ui-dark .active{background-color:#666!important}
    
    /*suggested settings:
    appearance: SHOW STATUS BAR (mandatory, unless you don’t want status-on-hover at all; don’t choose info overlay, just the regular bar)
    tabs: LEFT SIDE (mandatory) & TRANSPARENT BACKGROUND TABS (optional, but imo this style looks nicer when the inactive tabs fade into the background)
    panel: RIGHT SIDE (mandatory because of text rotation; the vertical download panel on the right balances the vertical url-status-tab bar on the left)
    search field: UNCHECK display in address bar (mandatory due to space issues; set DuckDuckGo as default—its !bangs trigger all other search engines anyway!)*/
    
    ```Attachments:
    ![](https://forum.vivaldi.net/uploads/attachments/72212/lightdark.png)


  • Small update to bring the style in line with the latest version of Vivaldi.

    Everything is basically the same, except now it’s designed to work with STATUS INFO OVERLAY instead of the regular status bar.

    /*purge visual clutter: first line strips out buttons, the other lines slim the panel to downloads only, with perpendicular text just like the unified url-status-tab bar*/
    #header,.newtab,.trash,.button-toolbar,.button-addressfield,.pageload-loaded,#switch,.panel>header,#downloads li .icon{display:none!important}
    .file{max-width:16vh!important}
    #panels-container{max-width:36px!important;border:0!important}
    #downloads ul{padding:0!important}
    #downloads li{min-width:16vh!important;min-height:0!important;margin-left:36px!important;padding:0 4px 14vh!important;-webkit-transform:rotate(90deg);-webkit-transform-origin: left top}
    
    /*keep tabs on top and reduce their width to a narrow column of square favicons*/
    .tab-strip{z-index:1!important}
    #tabs-container{width:30px!important;border:0!important;padding:0!important}
    .favicon,.unread{background-color:transparent!important;box-shadow:none!important}
    
    /*URL WIDTH: in the first line below, set the width % for address/status, with the remainder going to tabs; any value from 1-100vh is valid; default is 80vh*/
    .addressfield,#status_info>span{width:80vh;font-size:17.4px!important;border:0!important;margin:0!important;padding:0!important}
    .addressfield,#status_info{position:fixed!important;-webkit-transform:rotate(-90deg);-webkit-transform-origin: left top}
    .addressfield{height:0!important;bottom:0;left:-1px}
    #status_info{bottom:-16px!important;left:2px!important}
    
    /*COLORS: defaults for light and dark themes are: white—light background; black—dark background; light grey—light active tab; dark grey—dark active tab*/
    .ui-light #status_info>span,.ui-light .tab-transparent,.ui-light .panel-group,.ui-light{background-color:#fff!important}
    .ui-dark #status_info>span,.ui-dark .tab-transparent,.ui-dark .panel-group,.ui-dark{background-color:#000!important}
    .ui-light .active{background-color:#ddd!important}
    .ui-dark .active{background-color:#666!important}
    
    /*suggested settings:
    appearance: show status info overlay
    tabs: left side & transparent background tabs
    panel: right side
    search: do not display search field in address bar (set DuckDuckGo as your default—its !bangs trigger all other search engines)*/
    
    


  • I haven’t updated this thing in forever, so here goes.

    With the theme selector in 1.3, the color stuff is irrelevant so the code’s gotten a lot simpler:

    /*purge clutter: first line removes buttons, the rest slim panel to downloads only, with perpendicular text like url-status-tab bar*/
    #header,.newtab,.trash,.button-toolbar,.button-addressfield,.pageload-loaded,#switch,.panel>header,#downloads li .icon{display:none!important}
    .file{max-width:16vh!important}
    #panels-container{max-width:36px!important;border:0!important}
    #downloads ul{padding:0!important}
    #downloads li{min-width:16vh!important;min-height:0!important;margin-left:36px!important;padding:0 4px 14vh!important;-webkit-transform:rotate(90deg);-webkit-transform-origin: left top}
    
    /*keep tabs on top and reduce their width to a narrow column of square favicons*/
    .tab-strip{z-index:2!important}
    #tabs-container{width:30px!important;border:0!important;padding:0!important}
    .favicon,.unread{background-color:transparent!important;box-shadow:none!important}
    
    /*URL WIDTH % in the THIRD LINE below (the remainder of the bar goes to tabs) any value from 1-100vh is valid; default is 80vh*/
    .addressfield,#status_info>span{font-size:17.4px!important;border:0!important;margin:0!important;padding:0!important}
    .toolbar-addressbar,#status_info{-webkit-transform:rotate(-90deg);-webkit-transform-origin: left top}
    .toolbar-addressbar{z-index:1!important;width:80vh;bottom:-24px;left:-1px}
    #status_info{z-index:2!important;bottom:-14px!important;left:2px!important}
    #status_info,.toolbar{position:fixed!important}
    
    

  • Moderator

    To my way of thinking, vertical address and status bars are kind of terrible ideas. That said, a vertical bookmark bar would be worth celebrating.



  • @ayespy

    Agree, but horizontal address bar, minimized, in left or right would be great...


Log in to reply
 

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