From 48f9a474d16a79fda6bd70d217cabd4e3dff87ab Mon Sep 17 00:00:00 2001 From: James Dugan Date: Mon, 26 May 2025 16:03:26 -0600 Subject: [PATCH] Add vivaldi browser modifications --- .vivaldi-mods/.luarc.json | 6 + .vivaldi-mods/after-update.lua | 6 + .vivaldi-mods/css/dialog.css | 112 ++ .vivaldi-mods/css/extensions-dropdown.css | 33 + .vivaldi-mods/css/find-bar.css | 202 +++ .vivaldi-mods/css/hover-bookmark-bar.css | 48 + .vivaldi-mods/css/hover-panel.css | 29 + .vivaldi-mods/css/hover-tabbar.css | 124 ++ .vivaldi-mods/css/no-newtab-button.css | 7 + .vivaldi-mods/css/progress-bar.css | 9 + .vivaldi-mods/css/quick-commands.css | 43 + .vivaldi-mods/css/tab-stack.css | 46 + .vivaldi-mods/install-mods.lua | 45 + .vivaldi-mods/js/dialog.js | 863 +++++++++ .vivaldi-mods/js/global-media-controls.js | 1955 +++++++++++++++++++++ .vivaldi-mods/js/group-tabs-by-domain.js | 172 ++ .vivaldi-mods/posix.lua | 147 ++ .vivaldi-mods/restore-backup.lua | 18 + 18 files changed, 3865 insertions(+) create mode 100755 .vivaldi-mods/.luarc.json create mode 100755 .vivaldi-mods/after-update.lua create mode 100755 .vivaldi-mods/css/dialog.css create mode 100755 .vivaldi-mods/css/extensions-dropdown.css create mode 100755 .vivaldi-mods/css/find-bar.css create mode 100755 .vivaldi-mods/css/hover-bookmark-bar.css create mode 100755 .vivaldi-mods/css/hover-panel.css create mode 100755 .vivaldi-mods/css/hover-tabbar.css create mode 100755 .vivaldi-mods/css/no-newtab-button.css create mode 100755 .vivaldi-mods/css/progress-bar.css create mode 100755 .vivaldi-mods/css/quick-commands.css create mode 100755 .vivaldi-mods/css/tab-stack.css create mode 100755 .vivaldi-mods/install-mods.lua create mode 100755 .vivaldi-mods/js/dialog.js create mode 100755 .vivaldi-mods/js/global-media-controls.js create mode 100755 .vivaldi-mods/js/group-tabs-by-domain.js create mode 100755 .vivaldi-mods/posix.lua create mode 100755 .vivaldi-mods/restore-backup.lua diff --git a/.vivaldi-mods/.luarc.json b/.vivaldi-mods/.luarc.json new file mode 100755 index 0000000..7f4ba28 --- /dev/null +++ b/.vivaldi-mods/.luarc.json @@ -0,0 +1,6 @@ +{ + "$schema": "https://raw.githubusercontent.com/sumneko/vscode-lua/master/setting/schema.json", + "Lua.diagnostics.globals": [ + "hilbish" + ] +} diff --git a/.vivaldi-mods/after-update.lua b/.vivaldi-mods/after-update.lua new file mode 100755 index 0000000..1828de7 --- /dev/null +++ b/.vivaldi-mods/after-update.lua @@ -0,0 +1,6 @@ +#!/usr/bin/env hilbish + +-- Run this script after each Vivaldi update. + +hilbish.run("./restore-backup.lua") +hilbish.run("./install-mods.lua") diff --git a/.vivaldi-mods/css/dialog.css b/.vivaldi-mods/css/dialog.css new file mode 100755 index 0000000..3dc5791 --- /dev/null +++ b/.vivaldi-mods/css/dialog.css @@ -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); + } + } +} diff --git a/.vivaldi-mods/css/extensions-dropdown.css b/.vivaldi-mods/css/extensions-dropdown.css new file mode 100755 index 0000000..5c9353f --- /dev/null +++ b/.vivaldi-mods/css/extensions-dropdown.css @@ -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; +} diff --git a/.vivaldi-mods/css/find-bar.css b/.vivaldi-mods/css/find-bar.css new file mode 100755 index 0000000..a42b2f3 --- /dev/null +++ b/.vivaldi-mods/css/find-bar.css @@ -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; +} diff --git a/.vivaldi-mods/css/hover-bookmark-bar.css b/.vivaldi-mods/css/hover-bookmark-bar.css new file mode 100755 index 0000000..9d4c1e3 --- /dev/null +++ b/.vivaldi-mods/css/hover-bookmark-bar.css @@ -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; + } +} diff --git a/.vivaldi-mods/css/hover-panel.css b/.vivaldi-mods/css/hover-panel.css new file mode 100755 index 0000000..adfd3fe --- /dev/null +++ b/.vivaldi-mods/css/hover-panel.css @@ -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; +} diff --git a/.vivaldi-mods/css/hover-tabbar.css b/.vivaldi-mods/css/hover-tabbar.css new file mode 100755 index 0000000..7be2b51 --- /dev/null +++ b/.vivaldi-mods/css/hover-tabbar.css @@ -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; +} diff --git a/.vivaldi-mods/css/no-newtab-button.css b/.vivaldi-mods/css/no-newtab-button.css new file mode 100755 index 0000000..837e377 --- /dev/null +++ b/.vivaldi-mods/css/no-newtab-button.css @@ -0,0 +1,7 @@ +/* + * Remove new tab button on tab bar + */ + +.newtab { + display: none; +} diff --git a/.vivaldi-mods/css/progress-bar.css b/.vivaldi-mods/css/progress-bar.css new file mode 100755 index 0000000..091e26f --- /dev/null +++ b/.vivaldi-mods/css/progress-bar.css @@ -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); +} diff --git a/.vivaldi-mods/css/quick-commands.css b/.vivaldi-mods/css/quick-commands.css new file mode 100755 index 0000000..1b1d707 --- /dev/null +++ b/.vivaldi-mods/css/quick-commands.css @@ -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; +} diff --git a/.vivaldi-mods/css/tab-stack.css b/.vivaldi-mods/css/tab-stack.css new file mode 100755 index 0000000..4d7ae39 --- /dev/null +++ b/.vivaldi-mods/css/tab-stack.css @@ -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;} diff --git a/.vivaldi-mods/install-mods.lua b/.vivaldi-mods/install-mods.lua new file mode 100755 index 0000000..6112f05 --- /dev/null +++ b/.vivaldi-mods/install-mods.lua @@ -0,0 +1,45 @@ +#!/usr/bin/env hilbish + +-- Note: this script only supports 1 Vivaldi install. + +local posix = require("posix") +local fs = require("fs") + +local _, mod_dir = posix.pwd() +mod_dir = mod_dir:gsub("\n", "") .. "/js" +local custom_js = mod_dir .. "/custom.js" + +local _, vivaldi_install = posix.find("/opt", { name = "vivaldi-bin" }) +local _, dir = posix.dirname(vivaldi_install) +dir = dir:gsub("\n", "") +local resources_dir = dir .. "/resources/vivaldi" + +print("Patch originating from " .. mod_dir .. " targeting " .. dir) + +local backup_files = fs.glob(resources_dir .. "/window.html.bak") + +if #backup_files == 0 then + print("Not patched; backing up window.html to window.html.bak...") + posix.cp(resources_dir .. "/window.html", resources_dir .. "/window.html.bak", { sudo = true }) + + print("Patching window.html...") + posix.sed('s/<\\/body>/