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