1/** 2 * This file provides the design styles for the metatabbox 3 */ 4 5#spr__meta-box { 6 .display-flex(); 7 .flex-direction(); 8 .justify-content(flex-end); 9 10 position: relative; 11 float: right; 12 max-width: 40%; 13 margin-top: -(@page_padding-top); // reverse padding-top of .page container 14 margin-right: -1px; 15 16 // >= 1024 17 @media @screen_min-md { 18 height: @page-header_height; 19 border: 1px solid transparent; 20 } 21 22 // < 1024 23 @media @screen_max-md { 24 position: relative; 25 top: .2rem; 26 right: auto; 27 float: none; 28 max-width: 100%; 29 min-height: @page-header_height; 30 height: auto; 31 border: 0 none; 32 } 33 34 &.sticky { 35 position: fixed; 36 top: 0; 37 38 ul.meta-tabs > li > a { 39 border-top-color: @ini_background_site; 40 border-bottom-color: @noopentasks-border; 41 border-radius: 0 0 @ini_default_border_radius @ini_default_border_radius; 42 43 } 44 45 .meta-content .tab-pane.active { 46 max-height: 80vh; 47 overflow: auto; 48 } 49 } 50 51 + .msg-area + a { 52 clear: right; 53 margin-top: 20px; 54 } 55 56 .tab-container { 57 display: table; 58 59 @media @screen_max-md { 60 display: block; 61 width: 100%; 62 } 63 } 64 65 .box-content { 66 position: relative; 67 height: 0; 68 overflow-y: visible; 69 } 70 71 72 /* + + + + + tab controls + + + + + */ 73 ul.meta-tabs { 74 list-style: none; 75 line-height: 160%; 76 margin: 0; 77 padding: 0; 78 79 @media @screen_min-md { 80 white-space: nowrap; 81 text-align: right; 82 } 83 84 &::before, 85 &::after { 86 content: ''; 87 clear: both; 88 display: table; 89 box-sizing: border-box; 90 } 91 92 > li:first-child { 93 > a { 94 margin-left: 0; 95 } 96 } 97 98 > li { 99 position: relative; 100 display: inline-block; 101 vertical-align: bottom; 102 margin: 0; 103 104 @media @screen_min-md { 105 margin-left: .3rem; 106 } 107 108 @media @screen_max-md { 109 margin-right: .4rem; 110 margin-bottom: .2rem; 111 } 112 113 > a { 114 cursor: pointer; 115 position: relative; 116 display: block; 117 font-size: @font-size-small; 118 transition: @transition background-color, @transition border-color, @transition color; 119 120 @media @screen_min-md { 121 background-color: @ini_background_site; 122 border: 1px solid @noopentasks-border; 123 border-bottom-color: @ini_background_site; 124 border-radius: @ini_default_border_radius @ini_default_border_radius 0 0; // @ini_default_border_radius vs. @fix_border-radius 125 color: @ini_nav_menu_color; 126 margin-left: 4px; 127 padding: .3em 1rem .1em; 128 } 129 130 @media @screen_max-md { 131 background-color: @ini_background; 132 top: 0; 133 border: 1px solid @ini_existing; 134 color: @ini_existing; 135 margin-top: .2rem; 136 margin-left: 0; 137 padding: .2em .3rem; 138 } 139 140 * { 141 cursor: pointer; 142 color: inherit; 143 font-size: inherit; 144 } 145 146 .prefix { 147 position: relative; 148 color: inherit; 149 font-size: @font-size-small; 150 } 151 152 &:hover, 153 &:focus, 154 &:active { 155 text-decoration: none; 156 157 @media @screen_min-md { 158 background-color: @ini_background; 159 border-color: @ini_existing; 160 color: @ini_existing; 161 } 162 163 @media @screen_max-md { 164 background-color: @ini_existing; 165 border-color: @ini_background; 166 color: @ini_background; 167 } 168 } 169 } 170 171 &.active { 172 > a { 173 cursor: default; 174 background-color: @ini_background; 175 border-color: @ini_existing; 176 border-bottom-color: @ini_background; 177 color: @ini_existing; 178 179 @media @screen_max-md { 180 background-color: @ini_existing; 181 border-bottom-color: @ini_existing; 182 border-radius: 0; 183 color: @ini_background; 184 } 185 } 186 } 187 } 188 } 189 190 /* + + + + + toggle content + + + + + */ 191 .meta-content { 192 margin-top: -1px; 193 194 @media @screen_max-md { 195 clear: both; 196 margin-top: 2px; 197 } 198 199 .tab-pane { 200 position: absolute; 201 top: 0; 202 right: 0; 203 display: none; 204 width: 100%; 205 background-color: @ini_background; 206 border: 1px solid @ini_existing; 207 208 @media @screen_min-xs { 209 min-width: 20em; 210 } 211 212 @media @screen_min-md { 213 border-radius: 0 0 @fix_border-radius @fix_border-radius; // @ini_default_border_radius vs. @fix_border-radius 214 } 215 216 &.active { 217 display: block; 218 } 219 220 a { 221 color: @ini_existing; 222 } 223 224 > div { 225 font-size: @font-size-small; 226 padding: .8rem .5rem .5rem; 227 228 * { 229 font-size: inherit; 230 } 231 232 p { 233 padding-left: 1em; 234 } 235 236 ul { 237 list-style: none; 238 padding-left: 0; 239 } 240 241 li { 242 list-style-image: none; // overwrite universally styles 243 margin-left: 0; 244 padding-left: 1em; 245 } 246 } 247 248 &#spr__tab-tags { 249 > div { 250 ul { 251 li { 252 padding-left: 0; 253 } 254 } 255 } 256 } 257 258 #dw__toc { 259 width: auto; 260 float: none; 261 margin: 0; 262 padding: .6rem .5rem .5rem .8rem; 263 background: transparent; 264 border: 0 none; 265 266 h3 { 267 display: none; 268 } 269 270 > div { 271 padding: 0; 272 } 273 274 > div ul.toc { 275 font-size: @font-size-small; 276 padding-left: .5em; 277 278 a { 279 font-size: @font-size-small; 280 display: inline-block; 281 padding-left: 10px; 282 position: relative; 283 } 284 285 div.li { 286 position: relative; 287 padding: .15em 0; 288 289 &::before { 290 content: ''; 291 position: absolute; 292 top: .6em; 293 left: 0; 294 display: inline-block; 295 width: 4px; 296 height: 4px; 297 overflow: hidden; 298 background-color: @ini_existing; 299 } 300 } 301 } 302 303 > div > ul.toc { 304 padding: 0; 305 } 306 } 307 } 308 } 309 310 /* + + + + + tab issues + + + + + */ 311 #spr__tab-issues { 312 ul.mmissuelist { 313 padding-left: 0; 314 margin-top: 1rem; 315 316 li { 317 &.noissue { 318 font-size: @font-size-small; 319 list-style-type: none; 320 margin-left: 0; 321 322 .li { 323 font-size: @font-size-small; 324 margin-left: .5rem; 325 } 326 } 327 328 a { 329 display: inline-block; 330 } 331 } 332 333 img { 334 vertical-align: bottom; 335 margin-right: .3rem; 336 } 337 338 .mm__status { 339 padding-left: .3rem; 340 padding-right: .3rem; 341 } 342 343 form { 344 vertical-align: text-top; 345 } 346 } 347 } 348 349 /* + + + + + tab issues + + + + + */ 350 /* see plugins/magic-matcher.less */ 351 #spr__tab-issues { 352 ul.mmissuelist { 353 padding-left: 0; 354 margin-top: .5rem; 355 margin-bottom: .6rem; 356 357 li { 358 list-style-type: none; 359 margin-top: .3rem; 360 margin-left: .5rem; 361 362 &.noissue { 363 list-style-type: none; 364 margin-left: 0; 365 } 366 } 367 368 a { 369 display: inline-block; 370 font-size: @font-size-small; 371 372 * { 373 font-size: inherit; 374 } 375 } 376 377 img { 378 vertical-align: bottom; 379 margin-right: .3rem; 380 } 381 382 .mm__status { 383 display: inline-block; 384 text-decoration: none; 385 padding-left: .3rem; 386 padding-right: .3rem; 387 } 388 389 form { 390 vertical-align: text-top; 391 392 button { 393 background: @ini_button_background; 394 border-color: @ini_button_background; 395 color: @ini_button_color; 396 font-size: @font-size-small; 397 padding: .2em .3em; 398 399 &[name="removeIssue"] { 400 min-width: 20px; 401 font-size: .94rem; 402 font-weight: bold; 403 line-height: 95%; 404 text-align: center; 405 padding: 0 .1rem .1rem; 406 margin-left: .5rem; 407 } 408 409 &:hover, 410 &:focus, 411 &:active { 412 background: @ini_button_color; 413 color: @ini_button_background; 414 } 415 } 416 } 417 } 418 } 419} 420