jdugan6240/dippin-dotfiles
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add vivaldi browser modifications

Browse source
This commit is contained in:
James Dugan 2025-05-26 16:03:26 -06:00
parent 09d936d7ea
commit 48f9a474d1
18 changed files with 3865 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

124
.vivaldi-mods/css/hover-tabbar.css Executable file
View file

@ -0,0 +1,124 @@
/*
* Autohide tab bar.
* Forum link: https://forum.vivaldi.net/topic/107399/auto-hide-vertical-tabs-arc-browser-style
*/
:root {
--tabbar-transition: transform .2s ease-out, opacity .2s ease-out;
--scrollbar-width: 10px;
--scrollbar-border-color: #9fb0cb;
--tabbar-peek-width: 3px;
}
/*----- Scrollbar Styling -----*/
#tabs-tabbar-container:is(.left, .right) .tab-strip::-webkit-scrollbar {
padding: 0 2px !important;
width: var(--scrollbar-width) !important;
border: 1px solid var(--scrollbar-border-color) !important;
border-radius: 8px !important;
}
#tabs-tabbar-container:is(.left, .right) .tab-strip::-webkit-scrollbar-button {
display: none !important;
}
#tabs-tabbar-container:is(.left, .right) .tab-strip::-webkit-scrollbar-thumb {
border: 2px solid transparent !important;
border-radius: 8px !important;
}
/*----- Vertical Tabbar Auto-Hide Behavior -----*/
/* Base hidden state for vertical tabbar */
#browser:is(.tabs-left, .tabs-right) .tabbar-wrapper {
position: absolute;
transform: translateX(calc(-100% + var(--tabbar-peek-width)));
transition: var(--tabbar-transition) !important;
opacity: 0;
z-index: 1;
}
/* Right side positioning */
#browser.tabs-right .tabbar-wrapper {
right: 0;
transform: translateX(calc(100% - var(--tabbar-peek-width)));
}
/* Tab move functionality support */
#browser.tabs-left.isblurred:where(:has(div.tab-yield-space, .tab-acceptsdrop)) .tabbar-wrapper,
#browser.tabs-left.isblurred:is(:active, :focus) .tabbar-wrapper:is(:active, :focus) {
transform: translateX(0);
opacity: 1;
}
/* Show tabbar on hover */
#browser:is(.tabs-left, .tabs-right) .tabbar-wrapper:hover {
transform: translateX(0);
transition: var(--tabbar-transition) !important;
opacity: 1;
}
/* Show when mouse approaches edge of screen */
#browser:is(.tabs-left) .mainbar:hover + .tabbar-wrapper,
#browser:is(.tabs-right) .webpage:hover + .tabbar-wrapper {
transform: translateX(0);
transition: var(--tabbar-transition) !important;
opacity: 1;
}
/* Show when workspace popups are active */
#browser:is(.tabs-left, .tabs-right):has(.WorkspacePopup:visible,
.workspace-popup:visible) .tabbar-wrapper {
transform: translateX(0);
transition: var(--tabbar-transition) !important;
opacity: 1;
}
/* Keep tab bar visible during workspace naming */
#browser:is(.tabs-left, .tabs-right):has(.quick-command-container.workspace-naming) .tabbar-wrapper,
#browser:is(.tabs-left, .tabs-right):has(.workspace-naming) .tabbar-wrapper,
#browser:is(.tabs-left, .tabs-right):has(.WorkspacePopup) .tabbar-wrapper,
#browser:is(.tabs-left, .tabs-right):has(input[placeholder*="workspace"]) .tabbar-wrapper {
transform: translateX(0) !important;
transition: none !important;
opacity: 1 !important;
}
/* Hide on click outside */
html:active:not(:has(.tabbar-wrapper:hover,
.quick-command-container.workspace-naming,
.workspace-naming,
input[placeholder="workspace"]:focus,
.WorkspacePopup:visible,
.workspace-popup:visible)) .tabbar-wrapper {
transform: translateX(calc(-100% + var(--tabbar-peek-width))) !important;
transition: var(--tabbar-transition) !important;
opacity: 0 !important;
}
/* Fix right side hiding behavior on click outside */
html:active:not(:has(.tabbar-wrapper:hover,
.quick-command-container.workspace-naming,
.workspace-naming,
input[placeholder="workspace"]:focus,
.WorkspacePopup:visible,
.workspace-popup:visible)) #browser.tabs-right .tabbar-wrapper {
transform: translateX(calc(100% - var(--tabbar-peek-width))) !important;
}
/* Additional reset mechanism for when tabs get stuck */
html:active:active .tabbar-wrapper:not(:hover):not(:has(.quick-command-container.workspace-naming,
.workspace-naming,
input[placeholder="workspace"]:focus)) {
transform: translateX(calc(-100% + var(--tabbar-peek-width))) !important;
opacity: 0 !important;
}
/* Additional reset for right side */
html:active:active #browser.tabs-right .tabbar-wrapper:not(:hover):not(:has(.quick-command-container.workspace-naming,
.workspace-naming,
input[placeholder="workspace"]:focus)) {
transform: translateX(calc(100% - var(--tabbar-peek-width))) !important;
opacity: 0 !important;
}