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-flex; 97 align-items: center; 98 height: 100%; 99 font-size: 16px; 100 line-height: 16px; 101 text-decoration: none; 102 color:@ini_background; 103 padding: 8px 12px !important; 104 105 img { 106 margin: 0px; 107 } 108 109 &::before { 110 font-family: "bootstrap-icons"; 111 display: inline-block; 112 margin-right: 4px; 113 font-size: 1.2em; 114 } 115 116 &[href*="youtube.com/"]::before { 117 content: "\F62B"; 118 color: #b2071d; 119 } 120 121 &[href*="instagram.com/"]::before { 122 content: "\F437"; 123 color: #E4405F; 124 } 125 126 &[href*="github.com/"]::before { 127 content: "\F3ED"; 128 color: #ffffff; 129 } 130 } 131 a:hover { 132 background-color: @ini_theme_color; 133 } 134 a:has(img),a.urlexter:has(img) { 135 padding: 0px 12px !important; 136 } 137 a.mail { 138 background-image: none; 139 display: flex !important; 140 align-items: center; 141 align-content: center; 142 } 143 a.mail::before { 144 content: '\F32F'; 145 font-family: 'bootstrap-icons'; 146 display: inline-block; 147 margin-right: 4px; 148 font-size: 1.2em; 149 color: #007bff; 150 } 151 a[href*="github.com/sponsors/"] { 152 display: flex !important; 153 align-items: center; 154 align-content: center; 155 } 156 a[href*="github.com/sponsors/"]:before { 157 content: "\F417"; 158 font-family: "bootstrap-icons"; 159 display: inline-block; 160 margin-right: 4px; 161 font-size: 1.2em; 162 color: #e60073; 163 } 164 } 165 div.li:has(a) { 166 padding: 0px; 167 } 168 > ul { 169 display: none; 170 position: absolute; 171 top: 32px; 172 background-color: @ini_text_alt; 173 color: @ini_background; 174 border-radius: 0px; 175 border-bottom-left-radius: 20px; 176 border-bottom-right-radius: 20px; 177 min-width: 250px; 178 height: auto; 179 180 li { 181 list-style-type: none; 182 width: 100%; 183 margin-top: 4px; 184 185 div.li { 186 width: 100%; 187 cursor: default; 188 189 > span { 190 width: 100%; 191 } 192 a { 193 cursor: pointer; 194 width: 100%; 195 padding: 8px; 196 padding-left: 16px; 197 padding-right: 16px; 198 border-radius: 0px; 199 200 i { 201 vertical-align: middle; 202 } 203 } 204 a:hover { 205 background-color: @ini_theme_color; 206 } 207 } 208 } 209 li:last-child { 210 div.li { 211 a { 212 border-bottom-left-radius: 20px; 213 border-bottom-right-radius: 20px; 214 } 215 } 216 } 217 } 218 } 219 > li:has(ul) { 220 cursor: pointer; 221 } 222 } 223 } 224 225 .inline.user-tools { 226 float:right; 227 color:@ini_background; 228 229 a,button { 230 color:@ini_background; 231 display: inline-block; 232 text-decoration: none; 233 padding: 6px; 234 padding-left: 12px; 235 padding-right: 12px; 236 line-height: 16px; 237 font-size: 16px; 238 outline: none; 239 240 i { 241 line-height: 16px; 242 font-size: 16px; 243 } 244 } 245 a:hover,button:hover { 246 background-color: @ini_theme_color; 247 } 248 } 249 250 .dropdown.bookmarks, 251 .dropdown.user-tools { 252 float:right; 253 color:@ini_background; 254 255 a[data-toggle="dropdown"],button[data-toggle="dropdown"] { 256 border-radius: 0px; 257 } 258 a,button { 259 color:@ini_background; 260 261 i { 262 font-size: 16px; 263 line-height: 16px; 264 height: 16px; 265 width: 16px; 266 vertical-align: baseline; 267 margin-right: 4px; 268 } 269 i.bi-person:before { content: '\F4E1'; } 270 } 271 .dropdown-menu { 272 border-top-left-radius: 0px; 273 border-top-right-radius: 0px; 274 275 li { 276 a,button { 277 278 i { 279 vertical-align: middle; 280 } 281 } 282 .avatar { 283 padding: 20px; 284 margin: 0px; 285 text-align: center; 286 vertical-align: middle; 287 288 img { 289 border-radius: 50%; 290 height: 96px; 291 width: 96px; 292 border: 3px solid @ini_background; 293 } 294 } 295 } 296 } 297 } 298 } 299} 300/* Print */ 301@media print { 302 .enableToolbar { 303 #writr__page { 304 margin-top: 0px; 305 } 306 #writr__toolbar { 307 display: none; 308 } 309 } 310} 311/* 960px > x */ 312@media only screen and (max-width: 959px) { 313 .enableToolbar { 314 #writr__page { 315 margin-top: 64px; 316 } 317 #writr__toolbar { 318 flex-direction: column; 319 background: @ini_text_alt; 320 321 > * { 322 background: @ini_text_alt; 323 width: 100vw; 324 align-items: center; 325 align-content: center; 326 justify-content: center; 327 vertical-align: middle; 328 display: flex; 329 } 330 331 .hook { 332 justify-content: center; 333 } 334 335 .bookmarks, 336 .user-tools { 337 338 .dropdown-menu { 339 width: 100vw; 340 position: fixed; 341 top: 64px; 342 left: 0px; 343 } 344 } 345 } 346 } 347} 348