FossilRepo
| afe42d0… | ragelink | 1 | .sticky { |
| afe42d0… | ragelink | 2 | position: sticky; |
| afe42d0… | ragelink | 3 | top: 0; |
| afe42d0… | ragelink | 4 | max-height: 100vh; |
| afe42d0… | ragelink | 5 | } |
| afe42d0… | ragelink | 6 | |
| afe42d0… | ragelink | 7 | .toggle-nav-sidebar { |
| afe42d0… | ragelink | 8 | z-index: 20; |
| afe42d0… | ragelink | 9 | left: 0; |
| afe42d0… | ragelink | 10 | display: flex; |
| afe42d0… | ragelink | 11 | align-items: center; |
| afe42d0… | ragelink | 12 | justify-content: center; |
| afe42d0… | ragelink | 13 | flex: 0 0 23px; |
| afe42d0… | ragelink | 14 | width: 23px; |
| afe42d0… | ragelink | 15 | border: 0; |
| afe42d0… | ragelink | 16 | border-right: 1px solid var(--hairline-color); |
| afe42d0… | ragelink | 17 | background-color: var(--body-bg); |
| afe42d0… | ragelink | 18 | cursor: pointer; |
| afe42d0… | ragelink | 19 | font-size: 1.25rem; |
| afe42d0… | ragelink | 20 | color: var(--link-fg); |
| afe42d0… | ragelink | 21 | padding: 0; |
| afe42d0… | ragelink | 22 | } |
| afe42d0… | ragelink | 23 | |
| afe42d0… | ragelink | 24 | [dir="rtl"] .toggle-nav-sidebar { |
| afe42d0… | ragelink | 25 | border-left: 1px solid var(--hairline-color); |
| afe42d0… | ragelink | 26 | border-right: 0; |
| afe42d0… | ragelink | 27 | } |
| afe42d0… | ragelink | 28 | |
| afe42d0… | ragelink | 29 | .toggle-nav-sidebar:hover, |
| afe42d0… | ragelink | 30 | .toggle-nav-sidebar:focus { |
| afe42d0… | ragelink | 31 | background-color: var(--darkened-bg); |
| afe42d0… | ragelink | 32 | } |
| afe42d0… | ragelink | 33 | |
| afe42d0… | ragelink | 34 | #nav-sidebar { |
| afe42d0… | ragelink | 35 | z-index: 15; |
| afe42d0… | ragelink | 36 | flex: 0 0 275px; |
| afe42d0… | ragelink | 37 | left: -276px; |
| afe42d0… | ragelink | 38 | margin-left: -276px; |
| afe42d0… | ragelink | 39 | border-top: 1px solid transparent; |
| afe42d0… | ragelink | 40 | border-right: 1px solid var(--hairline-color); |
| afe42d0… | ragelink | 41 | background-color: var(--body-bg); |
| afe42d0… | ragelink | 42 | overflow: auto; |
| afe42d0… | ragelink | 43 | } |
| afe42d0… | ragelink | 44 | |
| afe42d0… | ragelink | 45 | [dir="rtl"] #nav-sidebar { |
| afe42d0… | ragelink | 46 | border-left: 1px solid var(--hairline-color); |
| afe42d0… | ragelink | 47 | border-right: 0; |
| afe42d0… | ragelink | 48 | left: 0; |
| afe42d0… | ragelink | 49 | margin-left: 0; |
| afe42d0… | ragelink | 50 | right: -276px; |
| afe42d0… | ragelink | 51 | margin-right: -276px; |
| afe42d0… | ragelink | 52 | } |
| afe42d0… | ragelink | 53 | |
| afe42d0… | ragelink | 54 | .toggle-nav-sidebar::before { |
| afe42d0… | ragelink | 55 | content: '\00BB'; |
| afe42d0… | ragelink | 56 | } |
| afe42d0… | ragelink | 57 | |
| afe42d0… | ragelink | 58 | .main.shifted .toggle-nav-sidebar::before { |
| afe42d0… | ragelink | 59 | content: '\00AB'; |
| afe42d0… | ragelink | 60 | } |
| afe42d0… | ragelink | 61 | |
| afe42d0… | ragelink | 62 | .main > #nav-sidebar { |
| afe42d0… | ragelink | 63 | visibility: hidden; |
| afe42d0… | ragelink | 64 | } |
| afe42d0… | ragelink | 65 | |
| afe42d0… | ragelink | 66 | .main.shifted > #nav-sidebar { |
| afe42d0… | ragelink | 67 | margin-left: 0; |
| afe42d0… | ragelink | 68 | visibility: visible; |
| afe42d0… | ragelink | 69 | } |
| afe42d0… | ragelink | 70 | |
| afe42d0… | ragelink | 71 | [dir="rtl"] .main.shifted > #nav-sidebar { |
| afe42d0… | ragelink | 72 | margin-right: 0; |
| afe42d0… | ragelink | 73 | } |
| afe42d0… | ragelink | 74 | |
| afe42d0… | ragelink | 75 | #nav-sidebar .module th { |
| afe42d0… | ragelink | 76 | width: 100%; |
| afe42d0… | ragelink | 77 | overflow-wrap: anywhere; |
| afe42d0… | ragelink | 78 | } |
| afe42d0… | ragelink | 79 | |
| afe42d0… | ragelink | 80 | #nav-sidebar .module th, |
| afe42d0… | ragelink | 81 | #nav-sidebar .module caption { |
| afe42d0… | ragelink | 82 | padding-left: 16px; |
| afe42d0… | ragelink | 83 | } |
| afe42d0… | ragelink | 84 | |
| afe42d0… | ragelink | 85 | #nav-sidebar .module td { |
| afe42d0… | ragelink | 86 | white-space: nowrap; |
| afe42d0… | ragelink | 87 | } |
| afe42d0… | ragelink | 88 | |
| afe42d0… | ragelink | 89 | [dir="rtl"] #nav-sidebar .module th, |
| afe42d0… | ragelink | 90 | [dir="rtl"] #nav-sidebar .module caption { |
| afe42d0… | ragelink | 91 | padding-left: 8px; |
| afe42d0… | ragelink | 92 | padding-right: 16px; |
| afe42d0… | ragelink | 93 | } |
| afe42d0… | ragelink | 94 | |
| afe42d0… | ragelink | 95 | #nav-sidebar .current-app .section:link, |
| afe42d0… | ragelink | 96 | #nav-sidebar .current-app .section:visited { |
| afe42d0… | ragelink | 97 | color: var(--header-color); |
| afe42d0… | ragelink | 98 | font-weight: bold; |
| afe42d0… | ragelink | 99 | } |
| afe42d0… | ragelink | 100 | |
| afe42d0… | ragelink | 101 | #nav-sidebar .current-model { |
| afe42d0… | ragelink | 102 | background: var(--selected-row); |
| afe42d0… | ragelink | 103 | } |
| afe42d0… | ragelink | 104 | |
| afe42d0… | ragelink | 105 | @media (forced-colors: active) { |
| afe42d0… | ragelink | 106 | #nav-sidebar .current-model { |
| afe42d0… | ragelink | 107 | background-color: SelectedItem; |
| afe42d0… | ragelink | 108 | } |
| afe42d0… | ragelink | 109 | } |
| afe42d0… | ragelink | 110 | |
| afe42d0… | ragelink | 111 | .main > #nav-sidebar + .content { |
| afe42d0… | ragelink | 112 | max-width: calc(100% - 23px); |
| afe42d0… | ragelink | 113 | } |
| afe42d0… | ragelink | 114 | |
| afe42d0… | ragelink | 115 | .main.shifted > #nav-sidebar + .content { |
| afe42d0… | ragelink | 116 | max-width: calc(100% - 299px); |
| afe42d0… | ragelink | 117 | } |
| afe42d0… | ragelink | 118 | |
| afe42d0… | ragelink | 119 | @media (max-width: 767px) { |
| afe42d0… | ragelink | 120 | #nav-sidebar, #toggle-nav-sidebar { |
| afe42d0… | ragelink | 121 | display: none; |
| afe42d0… | ragelink | 122 | } |
| afe42d0… | ragelink | 123 | |
| afe42d0… | ragelink | 124 | .main > #nav-sidebar + .content, |
| afe42d0… | ragelink | 125 | .main.shifted > #nav-sidebar + .content { |
| afe42d0… | ragelink | 126 | max-width: 100%; |
| afe42d0… | ragelink | 127 | } |
| afe42d0… | ragelink | 128 | } |
| afe42d0… | ragelink | 129 | |
| afe42d0… | ragelink | 130 | #nav-filter { |
| afe42d0… | ragelink | 131 | width: 100%; |
| afe42d0… | ragelink | 132 | box-sizing: border-box; |
| afe42d0… | ragelink | 133 | padding: 2px 5px; |
| afe42d0… | ragelink | 134 | margin: 5px 0; |
| afe42d0… | ragelink | 135 | border: 1px solid var(--border-color); |
| afe42d0… | ragelink | 136 | background-color: var(--darkened-bg); |
| afe42d0… | ragelink | 137 | color: var(--body-fg); |
| afe42d0… | ragelink | 138 | } |
| afe42d0… | ragelink | 139 | |
| afe42d0… | ragelink | 140 | #nav-filter:focus { |
| afe42d0… | ragelink | 141 | border-color: var(--body-quiet-color); |
| afe42d0… | ragelink | 142 | } |
| afe42d0… | ragelink | 143 | |
| afe42d0… | ragelink | 144 | #nav-filter.no-results { |
| afe42d0… | ragelink | 145 | background: var(--message-error-bg); |
| afe42d0… | ragelink | 146 | } |
| afe42d0… | ragelink | 147 | |
| afe42d0… | ragelink | 148 | #nav-sidebar table { |
| afe42d0… | ragelink | 149 | width: 100%; |
| afe42d0… | ragelink | 150 | } |