1/* =Toolbar 2----------------------------------------------- */ 3 4.disableToolbar { 5 #writr__toolbar { 6 display: none; 7 } 8} 9.enableToolbar { 10 #writr__page { 11 margin-top: 32px; 12 } 13 #writr__toolbar { 14 display: flex; 15 flex-direction: row; 16 justify-content: space-between; 17 align-items: center; 18 background:@ini_text_alt; 19 height:32px; 20 width:100vw; 21 position:fixed; 22 top:0; 23 box-sizing:border-box; 24 z-index:100000; 25 padding-right: 16px; 26 padding-left: 16px; 27 28 > * { 29 line-height: 16px; 30 font-size: 16px; 31 height: 32px; 32 color:@ini_background; 33 } 34 .hook { 35 display: flex; 36 flex-direction: row; 37 justify-content: left; 38 align-items: center; 39 vertical-align: middle; 40 color:@ini_background; 41 42 > p, 43 > a, 44 > ol, 45 > span, 46 > img { 47 display: none; 48 } 49 ul { 50 list-style: none; 51 margin: 0; 52 padding: 0; 53 display: flex; 54 flex-direction: row; 55 justify-content: left; 56 align-items: center; 57 vertical-align: middle; 58 height: 100%; 59 60 li { 61 list-style: none; 62 vertical-align: middle; 63 margin: 0; 64 padding: 0; 65 height: 100%; 66 display: flex; 67 flex-direction: row; 68 justify-content: left; 69 align-items: center; 70 vertical-align: middle; 71 72 div.li { 73 height: 100%; 74 display: flex; 75 flex-direction: row; 76 justify-content: left; 77 align-items: center; 78 vertical-align: middle; 79 padding: 8px 12px; 80 81 p { 82 margin: 0px; 83 } 84 img { 85 max-height: 32px; 86 max-width: 32px; 87 height: 32px; 88 width: 32px; 89 display: inline-block; 90 margin: 0px; 91 } 92 span.curid a{ 93 font-weight: normal; 94 } 95 a,a.urlextern { 96 display: inline-block; 97 height: 100%; 98 font-size: 16px; 99 line-height: 16px; 100 text-decoration: none; 101 color:@ini_background; 102 padding: 8px 12px !important; 103 104 img { 105 margin: 0px; 106 } 107 } 108 a:hover { 109 background-color: @ini_theme_color; 110 } 111 a:has(img),a.urlexter:has(img) { 112 padding: 0px 12px !important; 113 } 114 a.mail { 115 background-image: none; 116 display: flex !important; 117 align-items: center; 118 align-content: center; 119 } 120 a.mail::before { 121 content: '\F32F'; 122 font-family: 'bootstrap-icons'; 123 display: inline-block; 124 margin-right: 4px; 125 font-size: 1.2em; 126 color: #007bff; 127 } 128 a[href*="github.com/sponsors/"] { 129 display: flex !important; 130 align-items: center; 131 align-content: center; 132 } 133 a[href*="github.com/sponsors/"]:before { 134 content: "\F417"; 135 font-family: "bootstrap-icons"; 136 display: inline-block; 137 margin-right: 4px; 138 font-size: 1.2em; 139 color: #e60073; 140 } 141 } 142 div.li:has(a) { 143 padding: 0px; 144 } 145 > ul { 146 display: none; 147 position: absolute; 148 top: 32px; 149 background-color: @ini_text_alt; 150 color: @ini_background; 151 border-radius: 0px; 152 border-bottom-left-radius: 20px; 153 border-bottom-right-radius: 20px; 154 min-width: 250px; 155 height: auto; 156 157 li { 158 list-style-type: none; 159 width: 100%; 160 margin-top: 4px; 161 162 div.li { 163 width: 100%; 164 cursor: default; 165 166 > span { 167 width: 100%; 168 } 169 a { 170 cursor: pointer; 171 width: 100%; 172 padding: 8px; 173 padding-left: 16px; 174 padding-right: 16px; 175 border-radius: 0px; 176 177 i { 178 vertical-align: middle; 179 } 180 } 181 a:hover { 182 background-color: @ini_theme_color; 183 } 184 } 185 } 186 li:last-child { 187 div.li { 188 a { 189 border-bottom-left-radius: 20px; 190 border-bottom-right-radius: 20px; 191 } 192 } 193 } 194 } 195 } 196 > li:has(ul) { 197 cursor: pointer; 198 } 199 } 200 } 201 202 .inline.user-tools { 203 float:right; 204 color:@ini_background; 205 206 a,button { 207 color:@ini_background; 208 display: inline-block; 209 text-decoration: none; 210 padding: 6px; 211 padding-left: 12px; 212 padding-right: 12px; 213 line-height: 16px; 214 font-size: 16px; 215 outline: none; 216 217 i { 218 line-height: 16px; 219 font-size: 16px; 220 } 221 } 222 a:hover,button:hover { 223 background-color: @ini_theme_color; 224 } 225 } 226 227 .dropdown.user-tools { 228 float:right; 229 color:@ini_background; 230 231 a[data-toggle="dropdown"],button[data-toggle="dropdown"] { 232 border-radius: 0px; 233 } 234 a,button { 235 color:@ini_background; 236 237 i { 238 font-size: 16px; 239 line-height: 16px; 240 height: 16px; 241 width: 16px; 242 vertical-align: baseline; 243 margin-right: 4px; 244 } 245 i.bi-person:before { content: '\F4E1'; } 246 } 247 .dropdown-menu { 248 border-top-left-radius: 0px; 249 border-top-right-radius: 0px; 250 251 li { 252 a,button { 253 254 i { 255 vertical-align: middle; 256 } 257 } 258 .avatar { 259 padding: 20px; 260 margin: 0px; 261 text-align: center; 262 vertical-align: middle; 263 264 img { 265 border-radius: 50%; 266 height: 96px; 267 width: 96px; 268 border: 3px solid @ini_background; 269 } 270 } 271 } 272 } 273 } 274 } 275} 276/* Print */ 277@media print { 278 .enableToolbar { 279 #writr__page { 280 margin-top: 0px; 281 } 282 #writr__toolbar { 283 display: none; 284 } 285 } 286} 287/* 960px > x */ 288@media only screen and (max-width: 959px) { 289 .enableToolbar { 290 #writr__page { 291 margin-top: 64px; 292 } 293 #writr__toolbar { 294 flex-direction: column; 295 background: @ini_text_alt; 296 297 > * { 298 background: @ini_text_alt; 299 width: 100vw; 300 align-items: center; 301 align-content: center; 302 justify-content: center; 303 vertical-align: middle; 304 display: flex; 305 } 306 307 .hook { 308 justify-content: center; 309 } 310 311 .user-tools { 312 313 .dropdown-menu { 314 width: 100vw; 315 } 316 } 317 } 318 } 319} 320