aside .MuiList-root svg { width: 20px; height: 20px; opacity: 0.9; } aside span.MuiTypography-root { font-size: var(--env-var-font-size-medium); line-height: 1; } aside .MuiStack-root + span.MuiTypography-root { font-size: var(--env-var-font-size-medium-plus); } aside .MuiListSubheader-root { font-size: var(--env-var-font-size-small); font-weight: 500; line-height: 1.5; text-transform: uppercase; margin-bottom: 2px; opacity: 0.6; } aside p.MuiTypography-root { font-size: var(--env-var-font-size-small); opacity: 0.8; } aside .MuiListItemButton-root:not(.selected-path) > * { opacity: 0.9; } aside .selected-path > * { opacity: 1; } aside .selected-path span.MuiTypography-root { font-weight: 600; } aside .MuiCollapse-wrapperInner .MuiList-root > .MuiListItemButton-root { position: relative; } aside .MuiCollapse-wrapperInner .MuiList-root svg, aside .MuiList-root .MuiListItemText-root + svg { width: 18px; height: 18px; } .sidebar-popup li.MuiButtonBase-root:has(.MuiBox-root) { padding-bottom: 0; } .sidebar-popup svg { width: 16px; height: 16px; opacity: 0.9; } /* TRANSITIONS */ aside { flex: 1; transition: max-width 650ms cubic-bezier(0.36, -0.01, 0, 0.77); } .home-layout aside.collapsed { max-width: 64px; } aside.expanded .MuiTypography-root, aside.expanded p.MuiTypography-root, aside.expanded .MuiListItemText-root + svg, aside.expanded .MuiAvatar-root + .MuiBox-root + .MuiIconButton-root { visibility: visible; animation: fadeIn 1s ease; } aside.collapsed .MuiTypography-root, aside.collapsed p.MuiTypography-root, aside.collapsed .MuiListItemText-root + svg, aside.collapsed .MuiAvatar-root + .MuiBox-root + .MuiIconButton-root { opacity: 0; visibility: hidden; } aside .MuiListSubheader-root { transition: padding 200ms ease; } @keyframes fadeIn { 0% { opacity: 0; visibility: hidden; } 30% { opacity: 0; visibility: hidden; } 100% { opacity: 0.9; visibility: visible; } }