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