-Experiment- for smaller dials (Tabs on right)

  • Premises

    • I'm using zoom and font-size to trick Vivaldi sizings.
    • Tested on windows only at 1920x1080 with tabs on right.
    • My UI before this -- was 75% so probably you have to tweak values.
      Values in zoom should be x1.5/x2 the "old" Vivaldi UI zoom value.
    • Other tab positions don't work very well - tabs on top won't work at all if you hide #header; left and bottom need fixes.
    • Untested on other platforms (linux/mac)
    • Couldn't work on several screen sizes

    To test it:

    • Set max column in speed dial settings to 10, 12 or none.
    • Set UI zoom to 50% (barely readable) to reduce dial size (only known way).
    • The code below will change size to single UI elements without touching dial thumb size. Thumbs will be -25% in size (from 75% to 50%) and the vivaldi rendering shouldn't be broken.

    Known issues:

    • Context menu in menubar overlap half button. I really don't know how push it slightly down. (conflictual code)
    • Bookmark/History managers have strange columns (but readable).
    • Popup extensions are shown but in the wrong position. (Removed popup arrow and used a less aggressive reposition).
    • Site popup in urlbar is not centered. (shouldn't go offscreen)
    • Resizing tabbar is a bit awkard (better now)
      Don't work very well with default extension wrapper on. But you can use this.

    // Legacy code (Won't work with latest snapshot)

    .topmenu, .addressfield, .bookmark-bar, 
    .tab-strip, .manager, .dialog-clear-data,
    .win .vivaldi-settings,
    .addwebpanelcallout, .button-title,
    .button-startpage.up, .startpage-navigation,
    .footer {zoom: 150%;}
     /*Reposition popup*/
    .extensionaction .popup  {
        position: inherit;
        right: 125px;
        top: 90px;
    /*Fix grid view*/
    div.ReactVirtualized__List {width: 100% !important;}
     /*Hide popup arrow*/
    .extensionaction .popup.top:before, .extensionaction .popup.top:after {display: none;}	
    .vivaldi-tree .tree-row label span,
    .panel#downloads li, span.url {zoom: 135%;}
    .sortselector-dropdown {zoom: 133%;}
    .panel > header {zoom: 120%;}
    .startpage {zoom: 115%;} /*Reduced right/left margins*/

    // NEW CODE (tested on RC2)
    box-shadow are for debugging extension popup.

    .startpage .startpage-drawer-wrapper,
    #footer {zoom: 150%;}
    .dials .dial .button-title {
        padding: 2px 6px 3px;
        font-size: 155%;
    .dials .dial .editable-title-container.edit  {
    	font-size: 155%;
    .extensionaction {
    	zoom: 72%;
    	/*position: inherit;*/
    	transform: translate(300px, 100px);
    	/*box-shadow: 10px 5px 5px red;*/
    .extensionaction .popup {
    	box-shadow: none;
    .extensionaction .popup.top:after {
    	/*display: none;*/
    webview.ignore-react-onclickoutside {
    	/*box-shadow: 5px 5px 5px blue;*/

    // [WIP] Vivaldi settings - Without this - or with a generic zoom - the color picker in themes is broken. Sad.

    .vivaldi-settings .settings-header {font-size: 150%;}
    .vivaldi-settings .settings-sidebar .settings-navigation-header .settings-search {font-size: 150%;}
    .vivaldi-settings .settings-sidebar .settings-navigation {font-size: 150%;}
    .vivaldi-settings .setting-single > label span {font-size: 150%;}
    .vivaldi-settings h3 {font-size: 150%;}
    .vivaldi-settings label + p.info {font-size: 150%;}
    .vivaldi-settings h3 + p.info {font-size: 150%;}
    .vivaldi-settings .selectbox .selectbox-title {font-size: 150%;}
    .vivaldi-settings h2  {font-size: 150%;}
    .vivaldi-settings .info {font-size: 150%;} 
    .vivaldi-settings .zoom-control input[type=button].zoom-reset {font-size: 150%;}
    .vivaldi-settings .button-toolbar-small,
    .vivaldi-settings .zoom-percent {font-size: 150%;}
    .vivaldi-settings .theme-name {font-size: 140%;}
    .vivaldi-settings .color-name {font-size: 140%;}
    .vivaldi-settings .color-hex {font-size: 155%;}
    .vivaldi-settings .settings-content .themes-edit .theme-colors .theme-color-container .color-preview:before {
    	opacity: .1;
    .vivaldi-settings .settings-content .themes-edit .theme-colors .theme-color-container .color-preview  {
    	width: 100px; height: 100px;}
    .vivaldi-settings .settings-content .themes-edit .theme-colors .theme-color-container .color-hex {
    	width: 100px;}
    .vivaldi-settings .max-columns {font-size: 150%;}
    .vivaldi-settings .category > button  {font-size: 150%;}
    .vivaldi-settings .category.show .list {font-size: 150%;}
    .vivaldi-settings .gesture-map .gesture-list {font-size: 150%;}
    .vivaldi-settings .toolbar.icons {font-size: 150%;}
    /*.vivaldi-settings*/ #browser .tolerance .gesture-preview  {font-size: 150%;}
    .vivaldi-settings .master-detail .master-items  {font-size: 150%;}
    .vivaldi-settings .master-detail .detail .detail-content  {font-size: 150%;}
    .vivaldi-settings .master-detail .detail .detail-toolbar {font-size: 150%;}
    .vivaldi-settings .setting-single > input[type=button] {font-size: 150%;}
    .vivaldi-settings .saved-passwords .header label, 
    .vivaldi-settings .saved-passwords .password_list label {font-size: 150%;}
    .vivaldi-settings .saved-passwords .password_list {max-width: initial;}
    .vivaldi-settings .saved-passwords .header label + label {opacity: 0;}  
    .vivaldi-settings .sync-setup .sync-login .setting-single span {font-size: 155%;}
    .vivaldi-settings .sync-setup .login input {font-size: 155%;}
    .vivaldi-settings .setting-section .setting-group-double.pad-top  {font-size: 155%;}
    .vivaldi-settings .setting-section .setting-group-double {font-size: 155%;}
    /*.vivaldi-settings  input[type=button] {font-size: 155%;}*/
    .vivaldi-settings .toolbar .button-group {font-size: 155%;}
    .vivaldi-settings .webpage-button  {font-size: 155%;}

  • @Hadden89 Nice effort and good idea, but doesn't work at all. There is no element displaying at the right size for me at 50% UI zoom.

    The issue is mathematical. If you go to 50% size, and then go from this new 100% to 150%, you don't get to the original size. That's simply impossible.

  • Just to show it:
    3 x 0.5 = 1.5
    1.5 x 1.5 = 2.25
    2.25 != 3

  • @luetage I suspected.
    I fear this code work only on Windows and with specific sizes of font, DPI, resolution and bar positions. I really don't know how to make it scalable for different resolutions, as is just a bad workaround I hope to kill very soon (with native function :P ).
    The start UI scale was to 75%. Forgot to say.

Log in to reply

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