mod: Vertical Bookmark Bar with favicons
-
@shifte
transition: clip-path ,250ms 1500ms !important;
is incorrect.it should be
transition: clip-path .25s 1.5s, transform .25s 1.5s !important;
The official shorthand syntax goes like this:
transition: property1 duration1 timing1 delay1
then repeat for the next property with
, property2 duration2 timing2 delay2
etc... (add,
before repeat next property)& ended with
!important;
(this means overwrite all contradict/applicable code, except code with!important
comes after this code)
references: https://www.w3schools.com/css/css3_transitions.asp -
@dude99
Hello my dear james Bond!
I think I'm starting to understand, or not?
I'll study!
https://www.w3schools.com/css/tryit.asp?filename=trycss3_transition4
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Transitions/Using_CSS_transitionstransition: clip-path .25s 1.5s, transform .25s 1.5s !important;
It will be applied in the next fix.
-
@shifte you can also do lazy code
transition: .25s 1.5s !important
ortransition: all .25s 1.5s !important
to apply general transition for all properties to an element, but that should be avoided if the element need to do more than one thing in different situation, as it might cause a lot of uncontrollable chaotic transition... LOL -
thanks for this!
could you update your first post with the latest/fixed code? -
@schreck
This is the latest version.Fixed:
Dude99's-Vertical- Bookmark-Bar is hidden under the panel, in the snapshot3.9.2305.3This is "for panel right + bookmarkbar right".
If you want to use the "panel left or bookmark bar left", I'll fix it. -
@shifte put it in the first post so people dont have to search the whole pages to find the working one..
-
I have now come this far. What exactly do I still have to change so that the bookmarks bar on the top left and bottom no longer has a gap?
No matter what pixel value I enter between 450px and 520px, the gaps never completely disappear.
-
@stardepp
Hello.
Your image is still not finished version.
Latest version is at top of topic page. ("for right panel" and "for Left Panel")โtop left gap
.bookmark-bar.default { margin-top:ใใpx; }
โbottom gap
.bookmark-bar-top .bookmark-bar { border-bottom-width: 0px; }
-
@shifte I have taken the code so, but the gaps are still not gone.
.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; } .bookmark-bar { position: absolute; top:485px;left:-452px; z-index: 1; width:930px; transform: rotate( 90deg ); } .bookmarkbarItem{ width:27px; transform: rotate( -90deg ) } URL: * Style: body{ position: relative!important; margin-left: 27px!important; } .bookmark-bar.default { margin-top:ใใpx; } .bookmark-bar-top .bookmark-bar { border-bottom-width: 0px; }
-
@stardepp
Please try changing the "15" in the second line.
, to "-20" or "30" and so on..bookmark-bar.default { margin-top:15px; 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; } .bookmark-bar-top .bookmark-bar { border-bottom-width: 0px; }
-