- Legacy- for smaller dials (Tabs on right)
-
This mod is quite old and aggressive. It won't be updated anymore.
New mod made to replace this is here
Everything is kept for "nostalgic reasons".
// Oldest code
.topmenu, .addressfield, .bookmark-bar, .tab-strip, .manager, .dialog-clear-data, .win .vivaldi-settings, .addwebpanelcallout, .button-title, .button-startpage.up, .startpage-navigation, .button-toolbar.browserAction-button, .button-toolbar.back, .button-toolbar.forward, .button-toolbar.reload, .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*/
README
- I'm using
zoom
,font-size
andtransform
to trick Vivaldi. - 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
How 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: (critical ones was "fixed")
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(Fixed, yay)
Don't work very well with default extension wrapper on. But you can use this.
Panel zoom prevent resizing. I don't know how to fix it
// Still old code
.webpanel-header > .toolbar.icons > .button-toolbar.back, .webpanel-header > .toolbar.icons > .button-toolbar.forward, .webpanel-header > .toolbar.icons > .button-toolbar.reload {zoom: 100%;} .welcome-wrapper, .addressfield, .bookmark-bar, .manager, .startpage-navigation, .startpage .startpage-drawer-wrapper, .button-toolbar.back, .button-toolbar.rewind, .button-toolbar.forward, .button-toolbar.next, .button-toolbar.reload, .button-toolbar.browserAction-button, .button-toolbar.toggle-extensions-group, .button-startpage.up, .page-confirm-info-bar, .page-infobar, .quick-command-container, /*.dialog-header,*/ .dialog-addsearch, .dialog-clear-data, .dialog-download, #footer {zoom: 150%;} /*.dialog-javascript {zoom: 115%;}*/ /*.dialog-content,*/ /*.dialog-footer {zoom: 100%;}*/ .cb-form-row select.bookmark-folders { border-top: black 1px; border-left: black 1px; } .button-tabbar.synced-tabs-button { zoom: 140%; } #tabs-container .resize > * { zoom: 150%; margin-right: 11px !important; } #panels-container, .image-inspector {zoom: 150%;} .panel#downloads .download-item .file .size { font-size: 105%; /*DL size too small*/ } /*Javascript popup(TEST)*/ .dialog-javascript > header.dialog-header {zoom: 130%;} .dialog-javascript form {zoom: 150%;} /*Avoid webpage overlap*/ .find-in-page {transform: scale(1.3); font-size: 106%;} .dials .dial .button-title { padding: 2px 6px 3px; font-size: 155%; } .dials .dial .editable-title-container.edit { font-size: 155%; }
// Fix Vivaldi Settings - I had to write this as a generic
zoom
in settings breaks the color picker. And I love it..vivaldi-settings select.command-list {font-size: 150%;} .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%;} #app .floating-label .floating-input {font-size: 100%;} .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 p {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%;} .vivaldi-settings .setting-single > label span {margin-top: -5px;} .vivaldi-settings #browser .max-bookmarks input[type=number] {font-size: 155%;} .vivaldi-settings .setting-single input[type=text]:first-child:last-child {font-size: 155%;} .vivaldi-settings .setting-single > select {font-size: 111%; /*155%;*/} .vivaldi-settings input[type=text] {font-size: 155%;} #browser .reader-mode-toolbar.setting-group .setting-single .value {font-size: 155%;}
I hope the team will kill this with a native function.
The code is not very optimized, and should be meant more as an hack than a mod ^^, - I'm using
-
@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 ).
The start UI scale was to 75%. Forgot to say. -