Animated Overlays (Updated 27.March.19)
-
This post is deleted! -
Leave the code up
I wanted to try something but I deleted it. -
it's back
-
#panels-container:not(:hover) { max-width: 1px; opacity: 0; transition-delay: 0.8s !important; transition: opacity 2s ease-in, max-width 1.2s ease-out; } #panels-container:hover { max-width: 500px; opacity: 1; } #main .inner { position: relative; } #panels-container { position: absolute; z-index: 1; height: 100%; } #panels-container.right { right: 0; }
Try this, it works. I think max-width makes sense in this case. But the transition definitely needs work still.
-
Thanks. I had tried
width
too but didn't like the effect. It also makes that panel inconsistent with the others -
Yeah, you're right. I didn't think about it this way. You can do it with transform instead. Did it for panel on right side.
@keyframes show-panel { 0% { transform: translateX(99%); opacity:0; } 99% { opacity: 0.01; } 100% { transform: translateX(0%); opacity: 1; } } @keyframes hide-panel { 0% { transform: translateX(0%); opacity: 1; } 99% { opacity: 0.99; } 100% { transform: translateX(99%); opacity: 0; } }
Edit: This misbehaved too while no panel was expanded. That's why I exchanged 100% with 99% above to make it work, and that's why opacity had to be animated too. I think to do this in a really clean way javascript would be needed. http://n12v.com/css-transition-to-from-auto/
Only works reliably for panel on the left side (-99%)
-
Really enjoying this mod. Makes the status bar and side panel much more useable.
Also I came up with yet another solution to the side panel issue:
@keyframes show-panel { 0% { left: 0; max-width: 1px; } 1% { left: -360px; max-width: 400px; } 100% { left: 0; } } @keyframes hide-panel { 0% { left: 0; } 98% { left: -360px; max-width: 400px; opacity: 1; } 99% { left: -360px; max-width: 1px; opacity: 0; } 100% { left: 0; max-width: 1px; opacity: 0; } }
Basically it slides the panel offscreen, then changes the max-width and opacity, then moves it back onto the screen so you can hover it. It's not perfect, but it's better than losing it when no panel is expanded.
-
@narsis That's a cute workaround. At times showing panel is still a little wonky, but maybe that's just because of the time it takes for the animation to finish and the panel to slide out again to be detectable.
-
@luetage Ya that's one of the things I meant when I said it's not perfect. Only real fix to that I can think of is to speed up the animation.
-
Hi all, nice mod.
Unfortunately drag & drop item from webpage to panel function is no longer possible.
-
This post is deleted! -
Where does this have to be inserted?
-
create a custom css file and place it with the default
browser.html
. I use a mods sub-folder myself but it's not needed. Then you add it to the browser.html like this thread discusses https://forum.vivaldi.net/topic/10549/modding-vivaldi/32Here's what mine looks like for an example
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Vivaldi</title> <link rel="stylesheet" href="style/common.css" /> <link rel="stylesheet" href="mods/ui-tweaks.css" /> <link rel="stylesheet" href="mods/combine-header-toolbar.css" /> <link rel="stylesheet" href="mods/speeddial-tweaks.css" /> <link rel="stylesheet" href="mods/tabbar-left-overlay.css" /> <link rel="stylesheet" href="mods/panel-toggle-button.css" /> <link rel="stylesheet" href="mods/extension-toggle.css" /> <link rel="stylesheet" href="mods/status-bar-toggle.css" /> </head> <body style=" background-color: #0f0f0f; background-image: url('resources/vivaldi-splash-icon.svg'); background-size: 16%; background-position: center; background-repeat: no-repeat;"> <div id="app" /> <script src="localeSettings-bundle.js"></script> <script src="background-common-bundle.js"></script> <script src="vendor-bundle.js"></script> <script src="settings-bundle.js"></script> <script src="urlbar-bundle.js"></script> <script src="components-bundle.js"></script> <script src="bundle.js"></script> <script src="mods/panel-toggle-button.js"></script> <script src="mods/panel-overlay-toggle.js"></script> <script src="mods/extension-toggle.js"></script> <script src="mods/status-bar-toggle.js"></script> </body> </html>
-
This post is deleted! -
The Vertical Tabs code has been updated and I've added a new animated Navigation Bar overlay for the speed dial
-
@sjudenim oooo. really like the update!
-