Feature
Global transparent frosted glass effect
3201896b-8eae-4a30-8dd0-c9e808840b01-PixPin_2025-05-23_14-46-09.png
Auto translucence vertical tabs
4d621828-61ed-4fe5-aae9-28629658e9b7-PixPin_2025-05-23_14-51-20.png
Adapt to different color backgrounds
19f00811-a4ab-45fb-92e5-62e1e10e80f7-PixPin_2025-05-23_14-55-05.png
bcfc2434-3bd6-4580-825a-1ed7b159bf8e-PixPin_2025-05-23_14-58-39.png
7587e320-a7ca-4563-ba76-e2952b2ff1d3-PixPin_2025-05-23_15-01-44.png
Settings
Set vertical tab bar (Left)
b492875d-19e1-4f6e-ad7d-7a58ea3aaaf3-PixPin_2025-05-23_15-04-25.png
Enable custom CSS support
8741a41c-bef8-4b14-95cb-873d46cc0e93-PixPin_2025-05-23_15-26-51.png
Apply custom CSS
03a5a647-573e-424c-aa41-800d6cc65519-PixPin_2025-05-23_15-28-43.png
Code
:root{
--window-border:4px;
--win-header:calc(var(--window-border) + 10px);
--window-button-scale:0.8;
--window-button-opacity:0.3;
--colorToviTransparent:transparent;
--tabbar-collapsed-width: 36px;
--tabbar-expanded-width: 200px;
--tabs-transition-speed: 0.25s; /* 过渡动画速度 */
--webview-z-index: 0;
--tabs-z-index: 2;
}
/*breakmode*/
#browser.break-mode #main{
opacity:0;
}
/*tabbarButton*/
#browser:not(.tabs-top):not(.tabs-bottom) .toolbar-tabbar>.button-toolbar>button{
opacity:0.4;
}
#browser:not(.tabs-top):not(.tabs-bottom) .toolbar-tabbar>.button-toolbar>button:hover{
opacity:0.8;
}
/*footerDisplay*/
#browser:not(.tabs-bottom):not(.tabs-top) footer#footer,
:not(.tabs-bottom)#browser > footer,
#browser > footer > .toolbar-statusbar{
background:transparent;
border:none;
}
/*defaultBrowserModal*/
#modal-bg.default-browser{
display:none;
}
/*topHeader*/
#browser:not(.is-settingspage):not(.address-top) > #header,
#browser:not(.is-settingspage):not(.tabs-top) #header,
#browser.color-behind-tabs-off:not(.is-settingspage)#browser:not(.tabs-top):not(.tabs-bottom) #header{
box-shadow:none;
overflow: visible;
}
#browser:not(.is-settingspage).fullscreen > #header,
#browser:not(.is-settingspage):not(.address-top).tabs-bottom > #header,
#browser:not(.is-settingspage).tabs-off.address-top > #header,
.color-behind-tabs-off:not(.is-settingspage)#browser.tabs-bottom #header{
display: none;
}
/*标题栏-Win*/
#browser.win:not(.is-settingspage):not(.address-top) > #header,
#browser.win:not(.is-settingspage):not(.tabs-top) #header,
#browser.win.color-behind-tabs-off:not(.is-settingspage)#browser:not(.tabs-top):not(.tabs-bottom) #header{
min-height:var(--win-header) !important;
height:var(--win-header) !important;
background:transparent;
backdrop-filter: blur(5px);
background-color: rgba(0, 0, 0, 0.25);
}
#browser.win #titlebar #pagetitle{
height:var(--win-header);
padding:0 140px;
}
/* 隐藏标题-Win */
.linux:not(.alt) #titlebar #pagetitle,
#browser.win #titlebar #pagetitle,
#browser.mac #titlebar #pagetitle{
font-size:11px;
color:var(--colorFg);
opacity:0;
}
.win #titlebar #pagetitle > span,
.linux:not(.alt) #titlebar #pagetitle > span{
text-align:center;
}
/*windowVivaldi*/
.disable-titlebar.address-top#browser:not(.tabs-top) .vivaldi{
border-radius:var(--radiusCap);
margin:0 0px;
}
.disable-titlebar.address-top#browser:not(.tabs-top) .vivaldi:hover{
background-color:var(--colorFgAlpha);
}
/* 菜单按钮 */
#browser.linux:not(.tabs-top) #titlebar .vivaldi,
#browser.win:not(.is-settingspage):not(.tabs-top) #titlebar .vivaldi{
color:var(--colorFgAlpha);
scale: calc(0.6 / var(--uiZoomLevel));
margin-left: 5px;
margin-top: -8px;
}
#browser.linux:not(.tabs-top) #titlebar .vivaldi:hover,
#browser.win:not(.is-settingspage):not(.tabs-top) #titlebar .vivaldi:hover{
color:var(--colorFg);
background-color:var(--colorImageBgAlpha), var(--colorBgAlpha);
}
/*windowButtonGroup-Win*/
#browser.win:not(.is-settingspage):not(.tabs-top):not(.tabs-bottom) #header #titlebar .window-buttongroup{
opacity:var(--window-button-opacity);
color:var(--colorFg);
line-height:var(--win-header);
}
#browser.win:not(.is-settingspage):not(.tabs-top):not(.tabs-bottom) #header #titlebar .window-buttongroup:hover{
opacity:1;
}
#browser.win:not(.is-settingspage):not(.tabs-top):not(.tabs-bottom) #header #titlebar .window-buttongroup button,
#browser.win:not(.is-settingspage):not(.tabs-top):not(.tabs-bottom) #header #titlebar .window-buttongroup button.window-close{
width: calc(var(--win-header) * 2);
height:var(--win-header);
}
#browser.win:not(.is-settingspage):not(.tabs-top):not(.tabs-bottom) #header #titlebar .window-buttongroup button.window-minimize svg,
#browser.win:not(.is-settingspage):not(.tabs-top):not(.tabs-bottom) #header #titlebar .window-buttongroup button.window-maximize svg,
#browser.win:not(.is-settingspage):not(.tabs-top):not(.tabs-bottom) #header #titlebar .window-buttongroup button.window-close svg{
scale:var(--window-button-scale);
}
/*addressbar_legacy*/
#browser.win:not(.tabs-top):not(.tabs-bottom).address-top .toolbar:has(.window-buttongroup.on-mainbar),
#browser.linux:not(.tabs-top):not(.tabs-bottom).address-top .toolbar:has(.window-buttongroup.on-mainbar){
min-height:calc((var(--addressbar-height)) / var(--uiZoomLevel));
}
#browser:not(.tabs-top):not(.tabs-bottom).disable-titlebar#browser.win .window-buttongroup{
height:var(--addressbar-height);
}
/*地址栏样式*/
.color-behind-tabs-off.address-top#browser:not(.tabs-top):not(.tabs-bottom) .mainbar,
.color-behind-tabs-on.address-top#browser:not(.tabs-top):not(.tabs-bottom) .mainbar{
border:none;
background: transparent;
backdrop-filter: blur(5px); /* Add frosted glass effect */
background-color: rgba(0, 0, 0, 0.25);
z-index: 3; /* 确保地址栏下拉菜单显示在网页内容上方 */
}
.color-behind-tabs-off.address-top#browser:not(.tabs-top):not(.tabs-bottom) .mainbar{
/* background:var(--colorTabBar);
color: var(--colorFg); */
-webkit-app-region: drag;
}
#browser:not(.tabs-top):not(.tabs-bottom).address-top .UrlBar-SearchField,
#browser:not(.tabs-top):not(.tabs-bottom).address-top .UrlBar-AddressField,
#browser:not(.tabs-top):not(.tabs-bottom).address-top .SearchField {
background-color: var(--colorFgAlpha);
}
#browser:not(.tabs-top):not(.tabs-bottom).dim-blurred:not(.hasfocus) .UrlBar-AddressField,
#browser:not(.tabs-top):not(.tabs-bottom).dim-blurred:not(.hasfocus) .SearchField,
#browser:not(.tabs-top):not(.tabs-bottom).color-behind-tabs-off .SearchField,
#browser:not(.tabs-top):not(.tabs-bottom).color-behind-tabs-off .UrlBar-AddressField {
border: 1px solid var(--colorFgAlpha);
}
.UrlFragment-Wrapper--ShouldHighlight{
--HighlightColor: var(--colorFgIntense);
--LowlightColor: var(--colorFgFadedMore);
}
.button-toolbar > button{
border-radius:var(--radiusHalf);
}
#browser:not(.tabs-top):not(.tabs-bottom) .ExtensionIcon--Hidden{
background-color:transparent;
}
.disable-titlebar .toolbar-mainbar .toolbar-extensions > .button-toolbar > button,
.disable-titlebar .toolbar-mainbar .page-zoom-controls > .button-toolbar > button,
.disable-titlebar .toolbar-mainbar > .button-toolbar > button,
.disable-titlebar .toolbar-mainbar .toolbar-extensions > .toolbar-group > .button-toolbar > button,
.disable-titlebar .toolbar-mainbar .page-zoom-controls > .toolbar-group > .button-toolbar > button,
.disable-titlebar .toolbar-mainbar > .toolbar-group > .button-toolbar > button,
#browser:not(.tabs-top):not(.tabs-bottom).color-behind-tabs-off .ExtensionIcon{
border-radius:var(--radiusHalf);
}
#browser:not(.tabs-top):not(.tabs-bottom).color-behind-tabs-off .toolbar-mainbar .toolbar-extensions > .button-toolbar > button:hover,
#browser:not(.tabs-top):not(.tabs-bottom).color-behind-tabs-off .toolbar-mainbar .page-zoom-controls > .button-toolbar > button:hover,
#browser:not(.tabs-top):not(.tabs-bottom).color-behind-tabs-off .toolbar-mainbar > .button-toolbar > button:hover,
#browser:not(.tabs-top):not(.tabs-bottom).color-behind-tabs-off .toolbar-mainbar .toolbar-extensions > .toolbar-group > .button-toolbar > button:hover,
#browser:not(.tabs-top):not(.tabs-bottom).color-behind-tabs-off .toolbar-mainbar .page-zoom-controls > .toolbar-group > .button-toolbar > button:hover,
#browser:not(.tabs-top):not(.tabs-bottom).color-behind-tabs-off .toolbar-mainbar > .toolbar-group > .button-toolbar > button:hover,
#browser:not(.tabs-top):not(.tabs-bottom).color-behind-tabs-off .ExtensionIcon:hover,
#browser:not(.tabs-top):not(.tabs-bottom).color-behind-tabs-off .ExtensionIcon--Hidden:hover,
#browser:not(.tabs-top):not(.tabs-bottom).color-behind-tabs-off .ExtensionIcon--Hidden:active,
#browser:not(.tabs-top):not(.tabs-bottom).color-behind-tabs-off .bookmark-bar button:hover
{
background-color: var(--colorFgAlpha);
}
.color-behind-tabs-off .ExtensionToggleIcon.ExtensionToggleIcon--extensionsExpanded{
background-color:transparent;
}
/*bookmark-bar*/
#browser:not(.tabs-top):not(.tabs-bottom).color-behind-tabs-off.bookmark-bar-top .bookmark-bar,
#browser:not(.tabs-top):not(.tabs-bottom).color-behind-tabs-off .bookmark-bar button{
background:var(--colorTabBar);
color:var(--colorFg);
border-bottom-width:0;
border-radius:var(--radiusHalf);
}
/*workspace button*/
#browser.transparent-tabbar .button-toolbar.workspace-popup.tabbar-workspace-button,
#browser.transparent-tabbar.tabs-left .button-toolbar.workspace-popup.tabbar-workspace-button,
#browser.transparent-tabbar.tabs-right .button-toolbar.workspace-popup.tabbar-workspace-button,
.tabs-left .button-toolbar.workspace-popup.tabbar-workspace-button,
.tabs-right .button-toolbar.workspace-popup.tabbar-workspace-button{
box-shadow:none;
background:var(--colorToviTransparent);
}
#browser:not(.tabs-top):not(.tabs-bottom).transparent-tabbar .button-toolbar.workspace-popup.tabbar-workspace-button.button-menu{
color:var(--colorFg);
}
#app .tabs-left .button-toolbar.workspace-popup.tabbar-workspace-button button,
#app .tabs-right .button-toolbar.workspace-popup.tabbar-workspace-button button{
padding-left:4px;
padding-right:4px;
}
.button-toolbar.button-menu .button-toolbar-menu-indicator.disabled{
opacity:0.3;
}
/* 面板栏 */
#browser:not(.tabs-top):not(.tabs-bottom) #panels-container{
background:var(--colorToviTransparent);
}
#browser:not(.tabs-top):not(.tabs-bottom) #panels-container.overlay{
background:var(--colorBgAlphaBlur);
}
#browser:not(.tabs-top):not(.tabs-bottom) #panels-container.icons{
background: var(--colorToviTransparent);
backdrop-filter: blur(5px); /* Add frosted glass effect */
background-color: rgba(0, 0, 0, 0.3);
}
/* 悬浮面板 */
#browser:not(.tabs-top):not(.tabs-bottom) #panels-container:not(.icons) .panel-group{
background:var(--colorBgAlphaBlur);
backdrop-filter: blur(5px); /* Add frosted glass effect */
background-color: rgba(0, 0, 0, 0.5);
}
#browser:not(.tabs-top):not(.tabs-bottom) #panels-container .panel-group{
border-radius:var(--radiusCap)
}
#browser:not(.tabs-top):not(.tabs-bottom) #panels-container.overlay .panel-group{
border-radius:0;
}
/* 圆角网页样式 */
#main, #main > .inner{
overflow:visible;
}
/* 网页内容容器圆角和阴影 */
#browser:not(.tabs-top):not(.tabs-bottom):not(.fullscreen) #webpage-stack{
border-radius:var(--radiusCap);
}
#browser:not(.tabs-top):not(.tabs-bottom):not(.fullscreen).theme-light #webpage-stack{
box-shadow: var(--webview-shadow-light);
}
#browser:not(.tabs-top):not(.tabs-bottom):not(.fullscreen).theme-dark #webpage-stack{
box-shadow: var(--webview-shadow-dark);
}
/* 起始页导航栏样式 */
.startpage .startpage-navigation {
box-shadow: none !important;
background: rgba(0, 0, 0, 0.1) !important; /* Add semi-transparent background */
backdrop-filter: blur(5px); /* Add frosted glass effect */
}
.startpage .startpage-navigation .startpage-navigation-group { border: 0 !important; }
/* 标签页悬停展开 */
#browser.tabs-left #tabs-tabbar-container.left:hover {
width: var(--tabbar-expanded-width) !important;
}
/* 标签页默认收起 */
#browser.tabs-left #tabs-tabbar-container.left {
width: var(--tabbar-collapsed-width) !important;
}
/* 页面容器样式 */
#browser.tabs-left #webview-container {
margin-left: 36px;
transition: margin-left var(--sidebar-transition-duration) ease;
will-change: margin-left;
}
#browser.tabs-left::before:hover ~ #webview-container,
#browser.tabs-left #tabs-tabbar-container.left:hover ~ #webview-container {
margin-left: var(--tabbar-expanded-width);
}
/* 悬浮标签栏样式 - 左侧 */
#browser.tabs-left #tabs-tabbar-container.left {
position: absolute;
width: var(--tabs-container-width);
overflow: hidden;
background-color: rgba(0, 0, 0, 0.25);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-radius: 0 var(--radiusCap) var(--radiusCap) 0;
box-shadow: 4px 0 10px rgba(0, 0, 0, 0.25);
transition: width var(--tabs-transition-speed) ease;
padding: 0px;
}
#browser.tabs-left #tabs-tabbar-container.left:hover {
width: var(--tabs-container-expanded-width);
}
/* 标签栏内部元素样式调整 */
.tabs-left .tab-position .tab,
.tabs-right .tab-position .tab {
opacity: 0.7;
transition: opacity 0.2s ease;
}
.tabs-left .tab-position .tab:hover,
.tabs-right .tab-position .tab:hover,
.tabs-left .tab-position .tab.active,
.tabs-right .tab-position .tab.active {
opacity: 1;
}
/* 工作区按钮样式调整 */
.tabs-left .button-toolbar.workspace-popup.tabbar-workspace-button,
.tabs-right .button-toolbar.workspace-popup.tabbar-workspace-button {
opacity: 0.7;
transition: opacity 0.2s ease;
}
.tabs-left .button-toolbar.workspace-popup.tabbar-workspace-button:hover,
.tabs-right .button-toolbar.workspace-popup.tabbar-workspace-button:hover {
opacity: 1;
}
/* 确保标签栏显示在网页内容上方 */
#browser.tabs-left #tabs-tabbar-container.left,
#browser.tabs-right #tabs-tabbar-container.right {
z-index: var(--tabs-z-index) !important;
}
/* 确保网页内容在最底层 */
#browser #webview-container {
z-index: var(--webview-z-index) !important;
}
