aside#navbar-left { z-index: var(--navLeft); position: fixed; top: 0; left: 0; overflow-x: hidden; height: 100vh; width: var(--appNavBarLeftWidth); background: var(--backgroundDarkPrimary); transition: all 0.1s; transform: translateZ(0); } aside#navbar-left:hover { width: 200px; box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.6); } aside#navbar-left > .logoLink { display: block; position: relative; left: 0; margin: 20px 0 10px; transition: left 0.1s; } aside#navbar-left > .logoLink > .styledLogo { display: inline-block; margin-left: 8px; padding: 10px; cursor: pointer; user-select: none; } aside#navbar-left .item { position: relative; width: 100%; height: 42px; line-height: 42px; padding-left: 64px; color: #deebff; transition: color 0.1s; cursor: pointer; user-select: none; display: block; } aside#navbar-left .item:hover { background: rgba(255, 255, 255, 0.1); } aside#navbar-left .item > .styledIcon { position: absolute; left: 18px; height: 42px; line-height: 42px; } aside#navbar-left .item > .styledIcon > .styledAvatar { margin-top: 7px; width: 27px; height: 27px; } aside#navbar-left > .item > .styledIcon.search { font-size: 22px; color: #DEEBFE; } aside#navbar-left > .item > .styledIcon.plus { font-size: 27px; color: #DEEBFE; } aside#navbar-left .item > .styledIcon.help { font-size: 27px; color: #DEEBFE; } aside#navbar-left .item > .itemText { position: relative; right: 12px; visibility: hidden; opacity: 0; text-transform: uppercase; transition: all 0.1s; font-family: var(--font-bold); font-size: 12px; transition-property: right, visibility, opacity; display: block; } aside#navbar-left > .bottom { position: absolute; bottom: 20px; left: 0; width: 100%; } aside#navbar-left > .bottom > .aboutTooltip { } aside#navbar-left:hover .item > .itemText { right: 0; visibility: visible; opacity: 1; } .styledTooltip.aboutTooltipPopup { bottom: 48px; left: 120px; } .styledTooltip.aboutTooltipPopup #about-github-button { margin-left: 10px; }