By G2Lighter
Description
A better sidebar, hover over the arrow in the bottom right corner of the page to show it.
更好的侧边栏,光标悬停/点击页面的右下角箭头时会自动展开。
Code
[[module CSS]]
div#side-bar span.printuser a:nth-child(1) {
pointer-events: none;
}
div#side-bar::before {
content: '';
background-color: #eee;
background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='50%25' y='55%25' font-size='15' fill='%23a2a9b6' font-family='system-ui, sans-serif' text-anchor='middle' dominant-baseline='middle'%3E⇱%3C/text%3E%3C/svg%3E");
background-size:cover;
position: fixed;
right: 5%;
bottom: 5%;
height: 5vh;
width: 5vh;
display:block;
border-radius: 1rem 0 0;
transition: .2s ease;
box-shadow: #eee 5px 5px 13px;
border: .1rem solid #ccc;
}
div#side-bar {
height: 0%;
max-height: 50%;
border: unset;
margin: 0;
padding: 0;
overflow: hidden;
position: fixed;
bottom: 5%;
right: 5%;
transition: .2s ease;
}
div#side-bar:hover {
height: max-content;
width: max-content;
scrollbar-width: none;
margin: 0;
padding: 1rem;
overflow: scroll;
position: fixed;
bottom: 5%;
right: 5%;
background-color: #f8f8f8cc;
border: 1px solid #ccc;
border-radius: 1rem 0;
box-shadow: #555 5px 5px 13px;
}
div#side-bar:hover::before {
border-radius: 1rem 0;
background-color: #3339;
box-shadow: #555 5px 5px 13px;
}
[[/module]]
In action
link to the implemented solution on a Wikidot site or put a working example here
Thanks to tsangk for this great snippet: conditional-blocks
text above inserted with:
[[include :snippets:if START |unique=1|type=equal|var1=%%name%%|var2=conditional-blocks]]
**##red|Thanks to tsangk for this great snippet:##** [[[code:conditional-blocks]]]
[[include :snippets:if END]]
Other snippets posted by G2Lighter
Custom Identity Groups/自定义身份组 - 09 Nov 2024 18:49
Rate this solution
If you think this solution is useful — rate it up!
随机到你了
I'm Be Creeping Day And Night!
awa
挺久之前搞的没什么用的组件,兼容好差
This is the slightly altered code to make the sidebar be on the top left instead of bottom right:
You can see an example of this at http://s-a-p.wikidot.com/. It should also be noted that to implement said sidebar, you need to make a custom theme and put this into the CSS code, which was not stated with the original post.
"But as for me and my house, we shall serve the Lord."
I apologize but I have changed the sidebar on the site to be bottom left, as being top left caused issues with the wiki title. So the link I provided as an example of the upper code working is no longer valid.
"But as for me and my house, we shall serve the Lord."
this might help ↓
My thanks. Though what I've really been trying to do is add a "sidebar toggle". If you have an information on the subject, that would be greatly appreciated.
"But as for me and my house, we shall serve the Lord."
[[module listPages]] and [[module Watchers]] may break the sidebar because of their length