| @media screen and (max-width: 1023px) { |
| aside.toc.sidebar { |
| display: none; |
| } |
| } |
| |
| @media screen and (min-width: 1024px) { |
| main { |
| flex: auto; |
| /* min-width: 0 required for flexbox to constrain overflowing elements */ |
| min-width: 0; |
| } |
| |
| main > .content { |
| display: flex; |
| } |
| |
| aside.toc.embedded { |
| display: none; |
| } |
| |
| aside.toc.sidebar { |
| flex: 0 0 var(--toc-width); |
| min-width: 15rem; |
| } |
| |
| .toc.sidebar .toc-menu ul { |
| scrollbar-width: thin; /* Firefox */ |
| } |
| |
| .toc.sidebar .toc-menu ul::-webkit-scrollbar { |
| width: var(--scrollbar-thickness); /* Chrome/Safari/Webkit */ |
| } |
| |
| .toc.sidebar .toc-menu ul::-webkit-scrollbar-track { |
| background: var(--scrollbar-track-color); |
| border-radius: var(--scrollbar-radius); |
| } |
| |
| .toc.sidebar .toc-menu ul::-webkit-scrollbar-thumb { |
| background: var(--scrollbar-thumb-color); |
| border-radius: var(--scrollbar-radius); |
| } |
| |
| .toc.sidebar .toc-menu ul::-webkit-scrollbar-thumb:hover, |
| .toc.sidebar .toc-menu ul::-webkit-scrollbar-thumb:active { |
| background: var(--scrollbar-thumb-active-color); |
| } |
| } |
| |
| @media screen and (min-width: 1216px) { |
| aside.toc.sidebar { |
| flex-basis: var(--toc-width--widescreen); |
| } |
| } |