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 font-size: 16px; 124 line-height: 16px; 125 height: 16px; 126 width: 16px; 127 vertical-align: middle; 128 margin-right: 4px; 129 } 130 a[href*="github.com/sponsors/"] { 131 display: flex !important; 132 align-items: center; 133 align-content: center; 134 } 135 a[href*="github.com/sponsors/"]:before { 136 content: "\F417"; 137 font-family: "bootstrap-icons"; 138 display: inline-block; 139 margin-right: 4px; 140 font-size: 1.2em; 141 color: #e60073; 142 } 143 } 144 div.li:has(a) { 145 padding: 0px; 146 } 147 > ul { 148 display: none; 149 position: absolute; 150 top: 32px; 151 background-color: @ini_text_alt; 152 color: @ini_background; 153 border-radius: 0px; 154 border-bottom-left-radius: 20px; 155 border-bottom-right-radius: 20px; 156 min-width: 250px; 157 height: auto; 158 159 li { 160 list-style-type: none; 161 width: 100%; 162 margin-top: 4px; 163 164 div.li { 165 width: 100%; 166 cursor: default; 167 168 > span { 169 width: 100%; 170 } 171 a { 172 cursor: pointer; 173 width: 100%; 174 padding: 8px; 175 padding-left: 16px; 176 padding-right: 16px; 177 border-radius: 0px; 178 179 i { 180 vertical-align: middle; 181 } 182 } 183 a:hover { 184 background-color: @ini_theme_color; 185 } 186 } 187 } 188 li:last-child { 189 div.li { 190 a { 191 border-bottom-left-radius: 20px; 192 border-bottom-right-radius: 20px; 193 } 194 } 195 } 196 } 197 } 198 > li:has(ul) { 199 cursor: pointer; 200 } 201 } 202 } 203 204 .inline.user-tools { 205 float:right; 206 color:@ini_background; 207 208 a,button { 209 color:@ini_background; 210 display: inline-block; 211 text-decoration: none; 212 padding: 6px; 213 padding-left: 12px; 214 padding-right: 12px; 215 line-height: 16px; 216 font-size: 16px; 217 outline: none; 218 219 i { 220 line-height: 16px; 221 font-size: 16px; 222 } 223 } 224 a:hover,button:hover { 225 background-color: @ini_theme_color; 226 } 227 } 228 229 .dropdown.user-tools { 230 float:right; 231 color:@ini_background; 232 233 a[data-toggle="dropdown"],button[data-toggle="dropdown"] { 234 border-radius: 0px; 235 } 236 a,button { 237 color:@ini_background; 238 239 i { 240 font-size: 16px; 241 line-height: 16px; 242 height: 16px; 243 width: 16px; 244 vertical-align: baseline; 245 margin-right: 4px; 246 } 247 i.bi-person:before { content: '\F4E1'; } 248 } 249 .dropdown-menu { 250 border-top-left-radius: 0px; 251 border-top-right-radius: 0px; 252 253 li { 254 a,button { 255 256 i { 257 vertical-align: middle; 258 } 259 } 260 .avatar { 261 padding: 20px; 262 margin: 0px; 263 text-align: center; 264 vertical-align: middle; 265 266 img { 267 border-radius: 50%; 268 height: 96px; 269 width: 96px; 270 border: 3px solid @ini_background; 271 } 272 } 273 } 274 } 275 } 276 } 277} 278/* 960px > x */ 279@media only screen and (max-width: 959px) { 280 .enableToolbar { 281 #writr__page { 282 margin-top: 64px; 283 } 284 #writr__toolbar { 285 flex-direction: column; 286 background: @ini_text_alt; 287 288 > * { 289 background: @ini_text_alt; 290 width: 100vw; 291 align-items: center; 292 align-content: center; 293 justify-content: center; 294 vertical-align: middle; 295 display: flex; 296 } 297 298 .hook { 299 justify-content: center; 300 } 301 302 .user-tools { 303 304 .dropdown-menu { 305 width: 100vw; 306 } 307 } 308 } 309 } 310} 311