mod: Vertical Bookmark Bar with favicons
-
This CSS was produced by @dude99 and @code3 .
Select the CSS at the panel position.Fixed: 2021/10/2
In Vivaldi 4.2.2406.54, transition is hidden under the panel icons.for Right Panel
.bookmark-bar.default { position: absolute; height: -webkit-fill-available; width: 215px; Right: 0; z-index: 4; overflow-x: hidden; overflow-y: auto; clip-path: inset(0); transition: clip-path .25s 1.5s, transform .25s 1.5s !important; } .bookmark-bar.default:not(:focus-within):not(:hover) { clip-path: inset(0 calc(100% - 28px) 0 0); transform: translateX(calc(100% - 28px)); } .bookmark-bar.default > .observer { flex-flow: column wrap; height: fit-content; min-width: 9999999999rem; } .bookmark-bar button { max-width: 200px; } #main > .bookmark-bar.default ~ #webview-container { margin-Right: 28px; } #panels-container{ margin-right:27px; }
for Left Panel
.bookmark-bar.default { position: absolute; height: -webkit-fill-available; width: 215px; left: 0; z-index: 4; overflow-x: hidden; overflow-y: auto; clip-path: inset(0); transition: clip-path .25s 1.5s, transform .25s 1.5s !important; } .bookmark-bar.default:not(:focus-within):not(:hover) { clip-path: inset(0 calc(100% - 28px) 0 0); } .bookmark-bar.default > .observer { flex-flow: column wrap; height: fit-content; min-width: 9999999999rem; } .bookmark-bar button { max-width: 200px; } #main > .bookmark-bar.default ~ #webview-container { margin-left: 28px; } #webview-container { margin-left: 27px !important; }
(1)
↓Put in a Custom UI Modifications folder..bookmark-bar { position: absolute; top:485px;left:-452px; z-index: 1; width:930px; transform: rotate( 90deg ); } .bookmarkbarItem{ width:27px; transform: rotate( -90deg ) }
(2)
Adjust the position according to the monitor size(3)
Stylebot OptionsURL: * Style: body{ position: relative!important; margin-left: 27px!important; }
Issue:
Bookmark Bar will be in the way, feedly.com and vivaldi://calendar/.
Two scroll bars in the Vivaldi Forum Page.
My English skillsmodedit format code
-
@shifte Nice! If you made this code, please post it here:
https://forum.vivaldi.net/category/52/modifications
And use the </> button to insert code blocks. -
@shifte You can use vw instead of ox to make sizing relative to the monitor.
You can insert this code as well:.webview-container { margin-left: 27px; }
When possible don’t use absolute positioning.
Try using this:
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin -
@code3
Thanks!! & Help!!
Fixed.
I can't figure out what happens when the monitor size is different..bookmark-bar{
position: absolute; z-index: 1;
transform-origin: bottom left;
margin-top:8px;
width:930px;
transform: rotate( 90deg );
}.bookmarkbarItem{
width:27px;
transform: rotate( -90deg )
}.startpage{
margin-left: 27px!important;
} -
@shifte
You put 930px as the height for the bookmarks bar. If that is supposed to be the height of the window, use 100vh instead.You used position: absolute why? I think because you needed to move the bookmarks bar left and downwards. This would not be the case if you had used a transform-origin. Removing position: absolute will solve many problems.
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin -
@code3
What are "vw" and "ox"?fixed. feedly.com and vivaldi calendar.
.bookmark-bar{
position: absolute; z-index: 1;
transform-origin: bottom left;
margin-top:8px;
width:100vh;
transform: rotate( 90deg );
}
.bookmarkbarItem{
width:27px;
transform: rotate( -90deg )
}
.startpage {
margin-left: 27px!important;
}Stylebot:
body{position: relative!important;
margin-left: 27px!important;
}
.Leftnav{
margin-left: 27px!important;
} -
@shifte said in mod: Vertical Bookmark Bar with favicons:
What are "vw" and "ox"?
vw is a unit based on the size of the window. ox is a typo.
Are you able to take position: absolute out of your code now?
@shifte said in mod: Vertical Bookmark Bar with favicons:
Stylebot:
body{position: relative!important;
margin-left: 27px!important;
}
.Leftnav{
margin-left: 27px!important;
}You shouldn’t need to modify the webpage styles for this. You will cause more problems that way.
Please try adding this to Vivaldi code:.webview-container { margin-left: 27px !important; }
And please post in the modding forum. Go to the three dot menu, ‘edit post’, change category.
-
@code3
Thank you very maych!!webview-container.
Without the ”body”, it will shift to the left. -
@shifte Where did you put the web view code? It should go in Vivaldi CSS, not website CSS.
-
@shifte And please take position: absolutely before more testing, as it is sometimes the cause of problems.
-
@code3
.webview-container {
margin-left: 27px !important;
}
webview {
margin-left: 27px !important;
}↑ It worked perfectly in custum css.
But, it conflicts with Vivaldi translation and extension "Trancelate Anywhere".No "absolute" didn't work.
↓This might be my limit.
.bookmark-bar{
position: absolute; z-index: 1;
transform-origin: bottom left;
margin-top:8px;
width:100vh;
transform: rotate( 90deg );
}.bookmarkbarItem{
width:27px;
transform: rotate( -90deg )
}.startpage {
margin-left: 27px!important;
}Stylebot:
body{position: relative!important;
margin-left: 27px!important;
}.Leftnav{
margin-left: 27px!important; -
@shifte Ok, I’ll look later.
-
@shifte Try this.
.bookmark-bar{ z-index: 9; transform-origin: bottom left; position: absolute; width: 100vh; transform: rotate( 90deg ); margin-left: 0px; margin-right: 27px; } .bookmarkbarItem{ width:27px; transform: rotate( -90deg ) } #webview-container { margin-left: 27px !important; }
-
@code3
We've done!!
Thank you so much!
I confirmed by 27inch-16×9-monitor / 22inch-16×9-monitor.
Why the translation didn't work...Because I was looking at English page with
English UI...Vertical Bookmark Bar for Right Panel
.bookmark-bar{ z-index: 9; transform-origin: bottom left; position: absolute; width: 100vh; transform: rotate( 90deg ); margin-right: 27px; margin-top:6px; } .bookmarkbarItem{ width:27px; transform: rotate( -90deg ) } #webview-container { margin-left: 27px !important; }
Vertical Bookmark Bar for Left Panel
.bookmark-bar{ z-index: 9; transform-origin: bottom left; position: absolute; width: 100vh; transform: rotate( 90deg ); margin-right: 27px; margin-top:6px; } .bookmarkbarItem{ width:27px; transform: rotate( -90deg ) } #panels-container{ margin-left:27px; }
-
My dirty hack, it shows all folders & titles when on mouseover/focus:
.bookmark-bar.default { position: absolute; height: -webkit-fill-available; width: 215px; left: 0; z-index: 1; overflow-x: hidden; overflow-y: auto; clip-path: inset(0); transition: clip-path .13s .15s !important; } .bookmark-bar.default:not(:focus-within):not(:hover) { clip-path: inset(0 calc(100% - 28px) 0 0); } .bookmark-bar.default > .observer { flex-flow: column wrap; height: fit-content; min-width: 9999999999rem; } .bookmark-bar button { max-width: 200px; } #main > .bookmark-bar.default ~ #webview-container { margin-left: 28px; }
I don't use boomark bar personally, this is just a 15mins exercise I did for fun using the devtool directly. It probably won't work on all setup... LOL
-
@dude99
Nice.
Can you place it on the right edge? -
@shifte yes, you shouldn't have difficulty doing so, consider you manage to cook up your own CSS mod... LOL
-
change
left:0
toright:0
. -
add
, transform .13s .15s
afterclip-path
transition -
add
transform: translateX(calc(100% - 28px));
afterclip-path: inset(0 calc(100% - 28px) 0 0);
-
change
margin-left
tomargin-right
.
I think that's all. Didn't test this at all, just did it inside my head. Let me know if it doesn't work. -
-
@dude99
Thanks! Great!
Your suggestion worked well, Are you a CIA hacking agent? or MI6?
I added this as my preference, transition-delay:1.5s;. -
-
Fixed:
Dude99's-Vertical- Bookmark-Bar is hidden under the panel, in the snapshot3.9.2305.3.bookmark-bar.default { position: absolute; height: -webkit-fill-available; width: 215px; Right: 0; z-index: 3; overflow-x: hidden; overflow-y: auto; clip-path: inset(0); transition: clip-path ,250ms 1500ms !important; margin-top:34px; } .bookmark-bar.default:not(:focus-within):not(:hover) { clip-path: inset(0 calc(100% - 28px) 0 0); transform: translateX(calc(100% - 28px)); } .bookmark-bar.default > .observer { flex-flow: column wrap; height: fit-content; min-width: 9999999999rem; } .bookmark-bar button { max-width: 200px; } #main > .bookmark-bar.default ~ #webview-container { margin-Right: 28px; } #panels-container{ margin-right:27px; }