1#menu { 2 height: max-content; 3} 4 5#menu .caption { 6 cursor: pointer; 7 margin-bottom: 0; 8} 9 10#menu a { 11 color: inherit; 12 text-overflow: ellipsis; 13 overflow: hidden; 14 display: block; 15 text-decoration: none; 16} 17 18#menu a[href^="#"] { 19 color: var(--bs-secondary-color); 20} 21 22#menu .caption, 23#menu li { 24 margin-top: 0.25rem; 25} 26 27#menu .caption-text, 28#menu li.current { 29 font-weight: bold; 30} 31 32#menu li.current > a { 33 color: var(--bs-body-color) 34} 35 36#menu li.current li { 37 font-weight: initial; 38} 39 40#menu ul { 41 list-style-type: none; 42 padding-left: 0; 43 padding-left: 1rem; 44 margin-bottom: 0.5rem; 45} 46 47#menu ul:last-of-type { 48 margin-bottom: 0; 49} 50 51#menu p.caption::after { 52 display: block; 53 content: ''; 54 clear: both; 55} 56 57#menu .collapse-icon .caption-text:after { 58 content: ' '; 59 float: right; 60 display: block; 61 background-image: url('chevron-up.svg'); 62 background-size: 1.5em 1.5em; 63 opacity: 0.25; 64 width: 1.5em; 65 height: 1.5em; 66} 67 68@media (prefers-reduced-motion: no-preference) { 69 #menu .collapse-icon .caption-text:after { 70 transition: transform 0.2s; 71 } 72} 73 74#menu .collapse-icon.collapsed .caption-text:after { 75 transform: rotate(180deg); 76} 77
