-
-@media (min-width: 901px) and (max-width: 1024px) {
- html .col-content {
- width: 72%;
- }
- html .col-menu {
- width: 28%;
- }
- html .tsd-navigation {
- padding-left: 10px;
- }
-}
-@media (max-width: 900px) {
- html .col-content {
- float: none;
- width: 100%;
- }
- html .col-menu {
- position: fixed !important;
- overflow: auto;
- -webkit-overflow-scrolling: touch;
- z-index: 1024;
- top: 0 !important;
- bottom: 0 !important;
- left: auto !important;
- right: 0 !important;
- width: 100%;
- padding: 20px 20px 0 0;
- max-width: 450px;
- visibility: hidden;
- background-color: var(--color-panel);
- transform: translate(100%, 0);
- }
- html .col-menu > *:last-child {
- padding-bottom: 20px;
- }
- html .overlay {
- content: "";
- display: block;
- position: fixed;
- z-index: 1023;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background-color: rgba(0, 0, 0, 0.75);
- visibility: hidden;
- }
-
- .to-has-menu .overlay {
- animation: fade-in 0.4s;
- }
-
- .to-has-menu :is(header, footer, .col-content) {
- animation: shift-to-left 0.4s;
- }
-
- .to-has-menu .col-menu {
- animation: pop-in-from-right 0.4s;
- }
-
- .from-has-menu .overlay {
- animation: fade-out 0.4s;
- }
-
- .from-has-menu :is(header, footer, .col-content) {
- animation: unshift-to-left 0.4s;
- }
-
- .from-has-menu .col-menu {
- animation: pop-out-to-right 0.4s;
- }
-
- .has-menu body {
- overflow: hidden;
- }
- .has-menu .overlay {
- visibility: visible;
- }
- .has-menu :is(header, footer, .col-content) {
- transform: translate(-25%, 0);
- }
- .has-menu .col-menu {
- visibility: visible;
- transform: translate(0, 0);
- display: grid;
- grid-template-rows: auto 1fr;
- max-height: 100vh;
- }
- .has-menu .tsd-navigation {
- max-height: 100%;
- }