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

112
.vivaldi-mods/css/dialog.css Executable file
View file

@ -0,0 +1,112 @@
/**
* Opens links in a dialog, either by key combinations, holding the middle mouse button or context menu
* Forum link: https://forum.vivaldi.net/topic/92501/open-in-dialog-mod?_=1717490394230
*/
@keyframes dialog-tab-animate-progress-bar {
0% {
left: -100%;
}
100% {
left: 100%;
}
}
.dialog-container {
z-index: 999;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, .4);
transition-property: background-color;
transition-duration: 0.1s;
transition-timing-function: ease;
transition-delay: 0s;
backdrop-filter: blur(2px);
border-radius: var(--radius);
display: flex;
justify-content: center;
align-items: center;
.dialog-tab {
position: relative;
display: flex;
flex-direction: column;
.options-container {
display: flex;
height: 35px;
text-align: center;
align-items: center;
justify-content: center;
gap: 0.5rem;
color: white;
z-index: 1160;
.options-button {
display: flex;
background: transparent;
border: unset;
cursor: pointer;
width: 35px;
height: 35px;
align-items: center;
justify-content: center;
&:hover {
background-color: var(--colorBgAlphaHeavy);
}
}
.dialog-input {
background: var(--colorAccentBgAlpha);
color: white;
border: unset;
width: 20%;
margin: 0 0.5rem;
padding: 0.25rem 0.5rem;
}
}
.progress-bar {
height: 5px;
max-width: calc(100% - var(--radius) * 1.5);
left: calc(var(--radius)* 0.75);
background-color: #0080ff;
border-radius: var(--radius);
transition: width 0.2s linear;
overflow: hidden;
position: relative;
&[style*="width: 100%"]:after {
content: "";
width: 50%;
height: 100%;
background-image: linear-gradient(
to right,
rgba(255, 255, 255, 0.5),
rgba(255, 255, 255, 0.8),
rgba(255, 255, 255, 0.5)
);
position: absolute;
top: 0;
left: -100%;
animation: dialog-tab-animate-progress-bar 1.5s linear infinite;
}
}
webview {
position: relative;
flex: 1;
overflow: hidden;
border-radius: var(--radius);
}
&:has(webview[src^="https://clearthis.page/"]) .reader-view-toggle {
background-color: var(--colorBgAlphaHeavy);
border-color: var(--colorBgDarker);
}
}
}

33
.vivaldi-mods/css/extensions-dropdown.css Executable file
View file

@ -0,0 +1,33 @@
/*
* Vertical extensions drop-down menu
* Forum link: https://forum.vivaldi.net/topic/96266/vertical-extensions-drop-down-menu
*/
/* Vertical Extensions Drop-Down Menu */
.extensionIconPopupMenu {
--popupWidth: 280px !important;
}
.extensionIconPopupMenu > .toolbar {
max-height: 50vh;
overflow: hidden auto;
flex-direction: column;
flex-wrap: nowrap;
align-items: stretch;
}
.extensionIconPopupMenu .ExtensionDropdownIcon > button {
justify-content: flex-start;
padding: 8px 10px;
}
.extensionIconPopupMenu .ExtensionDropdownIcon > button::after {
content: attr(title);
overflow: hidden;
text-overflow: ellipsis;
}
.extensionIconPopupMenu .ExtensionDropdownIcon .button-badge {
top: auto;
right: 10px;
}

202
.vivaldi-mods/css/find-bar.css Executable file
View file

@ -0,0 +1,202 @@
/*
* Minimalist find bar
* Forum link: https://forum.vivaldi.net/topic/54938/minimalist-find-bar-css-mod
*/
:root {
--caribbean-green: #00cc99
}
/* Minimalist find bar */
.find-in-page {
position: fixed;
z-index: 3;
bottom: 0;
left: 118px;
right: 0;
justify-content: left;
max-width: 382px;
margin: auto;
background: transparent;
}
.find-in-page .fip-input-label {
display: none;
}
/* findbox */
.find-in-page:not(.fip-nomatches) .fip-input-container > * {
color: TURQUOISE;
font-weight: 500;
text-shadow: 0px 0px 4px black, 1px 1px 1px black;
}
.find-in-page:not(.fip-nomatches) .fip-input-container:is(:hover, :focus-within) > * {
color: var(--caribbean-green);
}
.find-in-page:not(.fip-nomatches) input[type="search"] {
box-shadow: 0 1px #ffd70099;
background: linear-gradient(55deg, rgba(0,0,0,.2), rgba(0,0,0,.05));
border-radius: var(--radius) var(--radius) 0 0;
border: none;
outline: none;
backdrop-filter: blur(2px);
}
.find-in-page:not(.fip-nomatches) input[type="search"]:focus-within {
box-shadow: 0 -1px var(--caribbean-green) inset, 0 1px #ffbe00;
}
.find-in-page:not(.fip-nomatches) .fip-input-container > input[type=search]::-webkit-search-cancel-button {
filter: sepia(100%) saturate(550%) brightness(104%) opacity(77%) drop-shadow(.7px .7px 1.4px #0008);
} /* yellow */
/.find-in-page:not(.fip-nomatches) .fip-input-container > input[type=search]::-webkit-search-cancel-button {
filter: sepia(98%) saturate(270%) hue-rotate(102deg) brightness(103%) contrast(106%) opacity(70%) drop-shadow(1px 0 1.5px #0009);
} /* optional: turquoise clear button */
/* nomatch alert */
.find-in-page.fip-nomatches .fip-input-container > input {
font-weight: 500;
color: maroon;
background-color: #ffbbffD9;
box-shadow: 0 0 4px pink inset, 0 0 0 .6px magenta inset;
border: none;
outline: none;
backdrop-filter: blur(2px);
transition-delay: .1s !important;
}
.find-in-page.fip-nomatches:not(:hover):not(:focus-within) .fip-input-container > input {
color: mediumviolet;
background: linear-gradient(55deg, #ffbbff80, #ffbbff33);
box-shadow: none;
transition-delay: .1s !important;
}
.find-in-page.fip-nomatches .fip-input-container > input[type=search]::-webkit-search-cancel-button {
filter: invert(45%) sepia(25%) saturate(5900%) hue-rotate(311deg) brightness(100%) contrast(65%) drop-shadow(.5px .5px .6px pink);
transition-delay: .1s !important;
}
.find-in-page.fip-nomatches:focus-within .fip-input-container > input {
animation: shake 1s steps(2) .15s 2 !important;
}
@keyframes shake {
9% {
transform: translateX(0);
}
1%, 5% {
transform: translateX(-4px);
}
3%, 7% {
transform: translateX(5px);
}
}
/* autohide buttons */
.find-in-page > :nth-last-child(-n+3) > * {
opacity: 0;
outline: none;
backdrop-filter: blur(2px);
transition: opacity .13s ease-out !important;
}
.find-in-page:is(:hover, :focus-within) > :nth-last-child(-n+3) > * {
opacity: 1;
}
/* arrow buttons */
.find-in-page > .toolbar-group button {
background: transparent !important;
border: none !important;
box-shadow: none !important;
filter: drop-shadow(.5px .5px maroon) drop-shadow(1px 1px 1px #000D);
}
.find-in-page > .toolbar-group button > span {
fill: TURQUOISE;
transform: rotate(90deg);
}
.find-in-page > .toolbar-group button:is(:hover, :focus-within) svg {
fill: var(--caribbean-green);
transform: scale(1.3);
}
/* close button */
.find-in-page button[title='Cancel search'] {
fill: TURQUOISE;
background: transparent !important;
border: none !important;
}
.find-in-page button[title='Cancel search']:not(:hover):not(:focus-within) > span {
filter: drop-shadow(.6px .6px maroon) drop-shadow(1px 1px 1px #000D);
}
.find-in-page button[title='Cancel search']:is(:hover, :focus-within) {
fill: red;
box-shadow: 0 0 0 1.7px red inset;
filter: drop-shadow(.5px .5px maroon) drop-shadow(.8px .8px .9px #000D);
transition: box-shadow .12s !important;
}
/.find-in-page > .toolbar-group {
display: flex;
order: 1;
} /* optional: reorder close button closer to findbox */
/* check-box */
.find-in-page label > input[type=checkbox] {
background: transparent !important;
border: none !important;
box-shadow: 0 0 0 1.7px TURQUOISE inset !important;
filter: drop-shadow(.5px .5px maroon) drop-shadow(.8px .8px 1px #000D);
}
.find-in-page label:is(:hover, :focus-within) > input[type=checkbox] {
box-shadow: 0 0 0 1.7px var(--caribbean-green) inset !important;
}
/* match text */
.find-in-page .fip-checkbox-label {
color: var(--caribbean-green);
font-size: 85%;
padding-right: 4px;
margin-left: -48px;
transform: translateX(50px);
background-color: transparent;
text-shadow: 0 0, 1px 1px 1px maroon, 1px 1px 2px #000D, 1px 1px 3px #000D, 1px 1px 4px #000D;
transition: .13s !important;
}
.find-in-page label:not(:hover) > input[type=checkbox]:not(:focus-visible) ~ .fip-checkbox-label {
font-size: 0;
}
.find-in-page:not(:hover):not(:focus-within) label > input[type=checkbox]:checked ~ .fip-checkbox-label {
opacity: 1;
font-size: 85% !important;
margin-left: -140px;
}
/* automate find box during small window */
@media only screen and (max-width: 600px) {
.find-in-page .fip-checkbox-label {
margin-left: 0;
transform: translateX(0);
}
.find-in-page:not(:hover):not(:focus-within) label > input[type=checkbox]:checked ~ .fip-checkbox-label {
margin-left: -95px;
}
}
/* enter & exit animation */
.find-in-page.find-in-page-enter {
transform: scaleX(0);
transition: transform 150ms ease-out, opacity 100ms ease-out !important;
}
.find-in-page.find-in-page-enter-active {
transform: scaleX(1);
}
.find-in-page.find-in-page-exit-active {
transform: scaleX(0);
transition: transform 150ms ease-in, opacity 150ms ease-in !important;
}

48
.vivaldi-mods/css/hover-bookmark-bar.css Executable file
View file

@ -0,0 +1,48 @@
/*
* Autohide bookmark bar
* Forum link: https://forum.vivaldi.net/topic/95511/overlay-bookmark-bar
*/
#browser {
--bookmark-bar-hide-delay: 400ms;
--bookmark-bar-show-ctrlkey: false;
}
.bookmark-bar-top:is(.address-top, .tabs-top) {
#main:has(.bookmark-bar:hover) #webview-container {
pointer-events: none !important;
}
&.tabs-top #tabs-subcontainer {
-webkit-app-region: no-drag !important;
}
.bookmark-bar {
height: 0 !important;
border: none !important;
}
.bookmark-bar .observer {
position: absolute !important;
z-index: 4 !important;
width: 100% !important;
border-bottom: solid 1px var(--colorBorder) !important;
clip-path: inset(0 0 100% 0) !important;
transition-delay: var(--bookmark-bar-hide-delay) !important;
}
&:has(.button-disabled-preview):has(.tabbar-wrapper:hover).tabs-top .bookmark-bar .observer,
&:has(.button-disabled-preview).address-top .bookmark-bar:is(.mainbar:not(:has(.OmniDropdown, nav.menu)):hover ~ *) .observer,
.bookmark-bar:is(:focus-within, :hover) .observer {
clip-path: inset(0 0 -1px 0) !important;
transition: clip-path 150ms cubic-bezier(0, 1, 0, 0.9) 50ms !important;
}
@container not style(--bookmark-bar-show-ctrlkey: true) {
&:has(.tabbar-wrapper:hover).tabs-top .bookmark-bar .observer,
&.address-top .bookmark-bar:is(.mainbar:not(:has(.OmniDropdown, nav.menu)):hover ~ *) .observer,
.bookmark-bar:is(:focus-within, :hover) .observer {
clip-path: inset(0 0 -1px 0) !important;
transition: clip-path 150ms cubic-bezier(0, 1, 0, 0.9) 50ms !important;
}
}
&.animation-off .bookmark-bar .observer {
transition-duration: 0ms !important;
}
}

29
.vivaldi-mods/css/hover-panel.css Executable file
View file

@ -0,0 +1,29 @@
/*
* Autohide panels (while making it possible to use scrollbar still)
*/
:root {
--panel-transition: max-width .2s ease-out, opacity .2s ease-out;
--panel-peek-width: 12px;
--panel-peek-height: 12px;
}
/* Base hidden state for panels */
#panels-container {
position: absolute !important;
z-index: 1;
opacity: 0;
max-height: var(--panel-peek-height);
max-width: var(--panel-peek-width);
transition: var(--panel-transition) !important;
}
#panels-container.right {
right: 0;
}
/* Show panels on hover */
#panels-container:hover {
max-height: 100%;
max-width: 41px;
opacity: 1;
}

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;
}

7
.vivaldi-mods/css/no-newtab-button.css Executable file
View file

@ -0,0 +1,7 @@
/*
* Remove new tab button on tab bar
*/
.newtab {
display: none;
}

9
.vivaldi-mods/css/progress-bar.css Executable file
View file

@ -0,0 +1,9 @@
/*
* Load indicator as underline
* Forum link: https://forum.vivaldi.net/post/452647
*/
.UrlBar-AddressField .pageload:not(.unstarted).progressing .pageload-indicator {
opacity: 1 !important;
background: linear-gradient(0deg, #00cc99 4px, transparent 0);
}

43
.vivaldi-mods/css/quick-commands.css Executable file
View file

@ -0,0 +1,43 @@
/*
* Make quick commands transparent during mouseout
* Forum link: https://forum.vivaldi.net/topic/50773/quick-commands-peekaboo-v2
*/
/* Compact QC */
#modal-bg.qc-modal.float.top:not(:hover) > div {
background: transparent;
box-shadow: none;
}
#modal-bg.qc-modal.float.top:not(:hover) .quick-command-container .quick-commands {
opacity: 0;
}
#modal-bg.qc-modal.float.top:not(:hover) .qc-entry input {
font-weight: 500;
color: #00cc99;
text-shadow: 2px 2px 6px black;
background: linear-gradient(45deg, #00000099, transparent 80%);
border-radius: 10px;
}
#modal-bg.qc-modal.float.top > div {
transition: background .4s !important;
}
.quick-command-container .quick-commands {
transition: opacity .4s !important;
}
/* expand width */
.quick-command-container, .quick-command-container .quick-commands > div {
min-width: 86vw;
cursor: auto;
}
.quick-command-container .quick-commands > div > div {
max-width: 100% !important;
}
.quick-command-container .quick-command {
cursor: pointer;
}

46
.vivaldi-mods/css/tab-stack.css Executable file
View file

@ -0,0 +1,46 @@
/*
* Automate 2 level tab stacks
* Forum link: https://forum.vivaldi.net/topic/83079/automate-2-level-tab-stack-columns-v3
*/
/* Automate 2 level vertical tabbar columns */
.substrip-tabs-on #tabs-tabbar-container:is(.left, .right) > div {
z-index: 1;
transition: background-color .15s, flex-basis .12s ease-out .05s !important;
}
/* active main column */
.substrip-tabs-on #tabs-tabbar-container:is(.left, .right) > #tabs-container:is(:focus-within, :hover):not(:has(.SlideBar--FullHeight:active)) + #tabs-subcontainer {
flex-basis: 30px !important;
z-index: 0;
}
/* active sub column */
.substrip-tabs-on #tabs-tabbar-container:is(.left, .right) > #tabs-subcontainer:is(:focus-within, :hover) {
flex-basis: calc(100% - 64px) !important;
z-index: 3;
}
/* active sub column with small width tabbar */
.substrip-tabs-on #tabs-tabbar-container:is(.left, .right):is(:focus-within, :hover):is([style^='width: 6'], [style^='width: 7'], [style^='width: 8'], [style^='width: 9']) > #tabs-subcontainer:is(:focus-within, :hover) {
flex-basis: calc(100% - 30px) !important;
z-index: 3;
}
/* inactive tabbar columns' ratio during small width (minimized sub column to favicon) */
.substrip-tabs-on #tabs-tabbar-container:is(.left, .right):not(:focus-within, :hover):is([style^='width: 6'], [style^='width: 7'], [style^='width: 8'], [style^='width: 9']) > #tabs-subcontainer:not(:focus-within, :hover) {flex-basis: 30px !important;}
/* fix small tab hover effect for title, stack counter, & close button */
#tabs-container .tab.tab-small.tab-mini .tab-header {justify-content: unset; padding-left: 5px;}
#tabs-container .tab.tab-small.tab-mini .tab-header .title {display: flex;}
#browser:not(.alt-tabs).substrip-tabs-on #tabs-tabbar-container:is(.left, .right) .tab-position .tab:hover.tab:not(.button-off, .force-hover, .tab-small) .stack-counter,
.substrip-tabs-on #tabs-tabbar-container:is(.left, .right) .tab-position .tab:not(.tab-mini) .stack-counter {display: block; margin-left: -6px;}
.substrip-tabs-on #tabs-tabbar-container:is(.left, .right) .tab-position :is(.tab:hover.tab-small, .tab.force-hover.tab-small) .close {display: flex; margin-left: -3px;}
/* autohide inactive columns' scrollbar */
#tabs-tabbar-container > div.overflow:not(:focus-within):not(:hover) .tab-strip {
overflow-y: hidden;
}
/* optional: hide tabbar columns' resizer */
.substrip-tabs-on #tabs-tabbar-container:is(.left, .right) > #tabs-container .SlideBar--FullHeight {visibility: hidden;}
/* option 2: Minimized main column to favicon + stack counter */
.substrip-tabs-on #tabs-tabbar-container:is(.left, .right):not(:focus-within, :hover):not([style^='width: 6']):not([style^='width: 7']):not([style^='width: 8']):not([style^='width: 9']) > #tabs-subcontainer.visible {flex-basis: calc(100% - 64px) !important;}