.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: absolute; left: 0; top: 0; height: calc(100% - 4.125rem); 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 1rem 0.75rem 2rem; position: relative; width: 100%; display:flex; justify-content: space-between;} .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]::after { content: ">"; font-family: cursive; font-weight: 700; margin-left:4rem; transform:rotate(0deg); transition:0.2s } .yt-navbar ul li a[data-nb-node-type=parent][data-nb-node-status=open]::after { transform:rotate(90deg); } .yt-navbar-content ul li a[data-nb-node-type=parent] span:hover { color: #886ab5; background: white; } .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; } .yt-navbar-content ul.yt-navbar-dropdown { padding:0; } .yt-navbar-content ul.yt-navbar-dropdown li a { padding: 0.75rem 0.5rem 0.75rem 3.5rem; }