改了一下界面,看起来舒服多了
-
五一没事干,改了一波vivaldi的界面,现在看起来舒服多了。
- 删了标签页上方的空白,
- 删除标签页的圆角,
- 把标签页关闭按钮背景改成了圆形,
- 再加了一个自动隐藏书签栏(鼠标放到地址栏书签栏出现,移开后隐藏)
效果如下:
代码如下:
.address-top.bookmark-bar-top { .bookmark-bar { height: 0 !important; border: none !important; } .mainbar{ z-index: 5 !important; } .bookmark-bar .observer { position: absolute !important; z-index: 4 !important; width: 100% !important; transform: translateY(-30px) !important; transition: transform 300ms ease-out 700ms !important; } .mainbar:not(:has(.OmniDropdown, nav.menu, .button-toolbar:hover, .UrlBar-SearchField:hover)):hover + .bookmark-bar .observer, .bookmark-bar .observer:hover{ transform: translateY(0px) !important; } } .tabs-top.address-top#browser.win:not(.fullscreen, .disable-titlebar) #header{ min-height: calc(34px / var(--uiZoomLevel)); } #tabs-tabbar-container.top{ height: 34px !important; padding-top: 0 !important; box-shadow: none !important; } .tabs-top .tab-position .tab:not(.tab-in-accordion, .tab-accordion){ border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; } .tab-position .tab{ font-size: 13px !important; } .tab-position .tab .tab-header { flex: 0 0 34px !important; } .vivaldi{ margin: 0 !important; height: 34px !important; } .tabs-top#browser.win .window-buttongroup button:not(.vivaldi){ height: 34px !important; } .toolbar-tabbar > .button-toolbar > button, .toolbar-tabbar > .toolbar-group > .button-toolbar > button{ min-height: 34px !important; } .UrlBar-UrlFieldWrapper{ font-size: 15px !important; } .bookmark-bar{ font-size: 13px !important; } #browser:not(.alt-tabs) #tabs-container .tab-audio, #browser:not(.alt-tabs) #tabs-container .tab.pinned:not(.active) .tab-audio{ top: 8px !important; } .close{ border-radius: 10px !important; }
-
嗯,这样更好看了。
-
css 代码应该放在哪儿运行?没改过,想试一下
-
@riotous
https://forum.vivaldi.net/post/717316
设置->外观->自定义UI Mod -
-
先打开 Allow CSS modification
-
然后就能设置CSS文件的位置了
-
-
-
-
- 打开 vivaldi:inspect
- 找到window.html结尾行,点击其的 inspect ,就可以inspect 整个浏览器的UI了
-
感谢各位指点,实现了想要的简洁化效果
-
很想把 vivaldi app 顶部条隐藏,这个应该不太可能实现了..