51 lines
1.5 KiB
CSS
51 lines
1.5 KiB
CSS
|
.yt-navbar {
|
|||
|
|
overflow-y:auto;
|
|||
|
|
}
|
|||
|
|
/* width */
|
|||
|
|
.yt-navbar::-webkit-scrollbar {
|
|||
|
|
width: 5px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Track */
|
|||
|
|
.yt-navbar::-webkit-scrollbar-track {
|
|||
|
|
background: #f1f1f1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Handle */
|
|||
|
|
.yt-navbar::-webkit-scrollbar-thumb {
|
|||
|
|
background: #888;
|
|||
|
|
border-radius:5px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Handle on hover */
|
|||
|
|
.yt-navbar::-webkit-scrollbar-thumb:hover {
|
|||
|
|
background: #555;
|
|||
|
|
}
|
|||
|
|
.yt-left-navbar { position: fixed; left: 0; top: 0; height: 100%; z-index: 10; background-color: rgb(25 25 25 / 95%); width: auto; max-width: 300px; margin-top: 4.125rem; }
|
|||
|
|
.yt-navbar-content ul { padding: 1rem 0rem; list-style-type: none; }
|
|||
|
|
.yt-navbar-content ul li { position: relative; display: flex; flex-wrap: wrap; flex-direction: column; }
|
|||
|
|
.yt-navbar-content ul li a { font-size: 0.9rem; padding: 0.75rem 2.5rem; position: relative; width: 100%; }
|
|||
|
|
.yt-navbar-content ul li a:hover { background-color: var(--theme-fusion-600); }
|
|||
|
|
.yt-navbar-content ul li a:active, .yt-navbar-content ul li a.active { background-color: var(--theme-light); }
|
|||
|
|
|
|||
|
|
.yt-navbar ul li a[data-nb-node-type=parent]::before {
|
|||
|
|
content: "▶";
|
|||
|
|
position: absolute;
|
|||
|
|
left: 19px;
|
|||
|
|
transform:rotate(0deg);
|
|||
|
|
transition:0.2s
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.yt-navbar ul li a[data-nb-node-type=parent][data-nb-node-status=open]::before {
|
|||
|
|
transform:rotate(90deg);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.yt-navbar ul li a[data-nb-node-type=parent] ~ ul{
|
|||
|
|
display:none;
|
|||
|
|
opacity: 0;
|
|||
|
|
transition: transform 0.3s;
|
|||
|
|
transform: translateY(-5%);
|
|||
|
|
}
|
|||
|
|
.yt-navbar ul li a[data-nb-node-type=parent][data-nb-node-status=open] ~ ul{
|
|||
|
|
transition: transform 0.3s;
|
|||
|
|
}
|