1/** 2 * Styles for the sidebar/navigation bar 3 */ 4 5#sidebar { 6 & { 7 width: @ini_sidebar_width; 8 max-width: @ini_sidebar_width; 9 font-size: @ini_default_font_size * .86; 10 flex-grow: 0; 11 transition-duration: .25s; 12 transition-timing-function: ease-in-out; 13 } 14 #sbNavigation { 15 margin: 1em .25em 0 1em; 16 } 17 &.toggle.hide, 18 &.toggle.alt { 19 max-width: 1em; 20 } 21 p, ul, ol { 22 padding-left: 1.5em; 23 } 24 ul { 25 list-style: square outside; 26 } 27 ul ~ ul, ul ~ ol, 28 ol ~ ul, ol ~ ol { 29 margin-top: .5em; 30 } 31 ul li, ol li { 32 color: @ini_text_alt; 33 padding: .1em 0; 34 } 35 dl dt { 36 font-weight: bold; 37 } 38 a:link, a:visited { 39 color: @ini_link; 40 } 41 .home a::before { 42 content: ' '; 43 display: inline-block; 44 width: 10pt; 45 height: 1em; 46 background: transparent url('images/home.svg') no-repeat no-repeat 0 4px; 47 background-size: .8em; 48 padding-right: 3pt; 49 } 50 .curid { 51 font-weight: bold; 52 } 53 h2, h3, h4, h5 { 54 color: @ini_headlines; 55 margin: 0.25em 2pt; 56 } 57 & > button.tg_button { 58 float: right; 59 display: block; 60 background-color: transparent; 61 border: transparent none 0; 62 margin-right: 2px; 63 font-size: 1.5rem; 64 } 65 & > button:focus { 66 outline: @ini_focus_color solid 2px; 67 } 68 & > button.tg_button span { 69 display: none; 70 } 71 &.hide > button.tg_button, 72 &.alt > button.tg_button { 73 margin-left: 0; 74 width: 11pt; 75 } 76 & > button.tg_button::after { 77 content: '\2039'; 78 color: @ini_link; 79 display: inline-block; 80 width: .75em; 81 height: 1.25em; 82 text-align: center; 83 } 84 &.hide>button.tg_button span, 85 &.alt>button.tg_button span { 86 display: none; 87 } 88 &.hide>button.tg_button::after, 89 &.alt>button.tg_button::after { 90 content: '\203A'; 91 width: auto; 92 } 93 94 .tg_content { 95 line-height: 1.5em; 96 } 97 98 hr { 99 border: 0; 100 height: 1pt; 101 background: @ini_text_alt; 102 background-image: linear-gradient(to right, @ini_background_alt, @ini_text_alt, @ini_background_alt); 103 margin: .5em 1em .5em 0; 104 } 105 106 /* definition list elements: */ 107 dl { 108 dt { 109 margin: 0.25em 2pt; 110 } 111 dd { 112 margin-left: .3em; 113 } 114 } 115} 116 117/* dark mode overrides */ 118@media (prefers-color-scheme: dark) { 119 120 body.darkmode { 121 #sidebar { 122 123 ul li, ol li { 124 color: @ini_text_alt_dark; 125 } 126 a:link, a:visited, 127 & > button.tg_button::after { 128 color: @ini_link_dark !important; 129 } 130 h2, h3, h4, h5 { 131 color: @ini_headlines_dark; 132 } 133 134 hr { 135 background: @ini_text_alt_dark; 136 background-image: linear-gradient(to right, @ini_background_alt_dark, @ini_text_alt_dark, @ini_background_alt_dark); 137 } 138 139 /* details-summary elements: */ 140 details { 141 summary { 142 color: @ini_headlines_dark; 143 } 144 summary::after { 145 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z' style='fill:%2376B0FD' /%3E%3C/svg%3E"); 146 } 147 } 148 149 /* definition list elements: */ 150 dl dt { 151 color: @ini_headlines_dark; 152 } 153 } 154 } 155} 156 157/* small screen break point: */ 158@media (max-width: 440px) { 159 #sidebar.alt div.tg_content { 160 width: ~"calc(100vw - 1em)"; 161 } 162}
