css Vivaldi Custom CSS

Posted 2021-05-13

/*
1. Create file custom.css here: C:\Users\****\AppData\Local\Vivaldi\Application\2.0.****\resources\vivaldi\style
2. Add <link rel="stylesheet" href="style/custom.css" /> in file browser.html above common.css line located C:\Users\****\AppData\Local\Vivaldi\Application\2.0.****\resources\vivaldi
3. Relaunch Vivaldi

Helpful links:
* https://forum.vivaldi.net/topic/10549/modding-vivaldi
* https://vivalditips.com/customization/user-interface-scale
* https://www.ghacks.net/2017/03/15/intro-to-customizing-vivaldis-interface-with-css/
* https://codebeautify.org/css-beautify-minify

add (and include spacebar)
--debug-packed-apps --silent-debugger-extension-api to vivaldi shortcut target
C:\Users\october\AppData\Local\Vivaldi\Application\vivaldi.exe --debug-packed-apps --silent-debugger-extension-api
and relaunch vivaldi to inspect browser elements

*/

/*remove app titlebar, tabs etc (like google hangout for example)*/

#app div#tabs-container, {
  display: none;
}

/*remove title bar*/
div#header {
  display: none;
}

/*make URL bar border disappear*/
.addressfield {
  /*border-color: #FFF !important;*/
  border: 0 !important;
}

/*make recycle can more transparent*/
.sync-and-trash-container {
  opacity: 0.35;
}

.sync-and-trash-container:hover {
  opacity: 1;
}

/* remove 3px padding below tabs comment or delete order: 2;
if you don't want tabs to be ABOVE url bar */

#tabs-container.no-thumbs.bottom {
    padding-bottom: 0 !important;
    order: 2;
}

/*add padding right*/
.tab-header {
    padding-right: 10px;
}

/*make URL input field center align*/
input.url.vivaldi-addressfield {
    /*text-align: center;*/
    font-size: 17px !important;
}

/*make address bar larger font and add full height instead of adding margni / padding*/
.addressfield,
.searchfield {
    line-height: 1.4;
    font-size: 16px;
    height: 32px !important;
}
.addressfield form input.url,
button.button-addressfield {
    height: 30px !important;
}

/*make favicon match url bar height*/
.addressfield .addressfield-siteinfo {
    height: 32px !important;
}

/*remove box shadow fromt he address bar*/
.toolbar-addressbar.toolbar {
    box-shadow: none !important;
}

/* Merge Address Bar w/Title Bar https://forum.vivaldi.net/topic/22304/address-bar-at-very-top/42?page=3 */
#browser.address-top.tabs-top #titlebar,
#browser.address-top.tabs-off #titlebar {
    z-index: 1;
}
#browser.address-top.tabs-top .vivaldi,
#browser.address-top.tabs-top #header #titlebar .window-buttongroup button:not(.vivaldi),
#browser.address-top.tabs-off .vivaldi,
#browser.address-top.tabs-off #header #titlebar .window-buttongroup button:not(.vivaldi) {
    height: 34px!important;
}
#browser.address-top.tabs-top .vivaldi,
#browser.address-top.tabs-off .vivaldi {
    padding: 1px 0;
}
#browser.address-top.tabs-top #titlebar #pagetitle,
#browser.address-top.tabs-off #titlebar #pagetitle {
    display: none;
}
#browser.address-top.tabs-top #tabs-container.top {
    top: 34px;
    padding-left: 0;
    padding-right: 0;
    position: relative;
    z-index: 1;
    padding-top: 0;
}
#browser.address-top.tabs-top #main {
    margin-top: -30px;
}
#browser.address-top.tabs-off #main {
    margin-top: -25px;
}
#browser.address-top.tabs-top .toolbar-addressbar {
    padding: 0 140px 30px 34px;
}
#browser.address-top.tabs-off .toolbar-addressbar {
    padding: 0 140px 0 34px;
}
.urlSearch,
.dialog-add-bookmark,
.extensionaction {
    z-index: 999999999999999999;
}

/*#tabs-container.bottom {
    order: -3;
     border-top: none;
     padding-top: var(--padding);
     padding-bottom: 0px !important;
}
 .bookmark-bar {
     order: -2;
}
 .toolbar.toolbar-addressbar {
     order: -1;
}
 .tabs-bottom .tab-position .tab {
     border-top-left-radius: var(--radiusHalf);
     border-top-right-radius: var(--radiusHalf);
     border-bottom-left-radius: unset;
     border-bottom-right-radius: unset;
}
 .tabs-bottom .tab-strip .tab-group-indicator {
     bottom: 28px !important;
}
*/