1/** 2 * The input entry form 3 */ 4.dokuwiki .struct_entry_form { 5 margin-bottom: 1em; 6 7 fieldset { 8 width: 100%; 9 padding: 0.5em 0; 10 text-align: left; 11 12 legend { 13 text-align: left; 14 padding-left: 17px; 15 cursor: pointer; 16 background: transparent url(../../images/open.png) 5px center no-repeat; 17 font-weight: bold; 18 } 19 } 20 21 fieldset.closed { 22 padding: 0; 23 24 div.field { 25 display: none; 26 } 27 28 legend { 29 display: block; 30 background: transparent url(../../images/closed.png) 5px center no-repeat; 31 } 32 } 33 34 div.field { 35 display: flex; 36 padding: 0.5em; 37 38 &:hover { 39 background-color: @ini_background_alt; 40 } 41 42 > label { 43 text-align: left; 44 font-weight: normal; 45 width: 12em; 46 flex-shrink: 0; 47 48 span.label { 49 padding-right: 16px; 50 display: block; 51 52 // fixes for bootstrap3 template 53 color: @ini_text; 54 font-size: 100%; 55 text-align: left; 56 57 58 &.hashint { 59 background: url(../../images/info.png) no-repeat right 5px top; 60 } 61 } 62 } 63 64 > span.input { 65 display: flex; 66 text-align: left; 67 flex-grow: 1; 68 flex-wrap: wrap; 69 70 // general input fields 71 input:not([type='checkbox']):not([type='color']), 72 textarea, 73 select { 74 width: 100%; 75 76 // smaller input types 77 &.struct_media, 78 &.struct_date { 79 width: 30%; 80 } 81 } 82 83 // checkboxes 84 label { 85 margin-right: 1em; 86 white-space: nowrap; 87 } 88 89 // wrap multi-value fields 90 .multiwrap, .newtemplate { 91 display: inline; 92 width: fit-content; 93 } 94 95 // space multi-value fields 96 .multiwrap { 97 margin: 0 0.25em 0.25em 0; 98 } 99 100 // overlay media button on top of input field 101 button.struct_media { 102 width: 2.5em; 103 margin-left: -2.5em; 104 } 105 106 // input hints 107 small { 108 display: block; 109 color: @ini_text_alt; 110 } 111 } 112 } 113} 114 115/*responsive - small screen*/ 116@media (max-width: 480px) { 117 .dokuwiki .struct_entry_form div.field { 118 flex-wrap: wrap; 119 120 label { 121 > span { 122 text-align: left; 123 width: 100%; 124 } 125 } 126 127 span.input { 128 width: 100%; 129 } 130 } 131} 132 133/** 134 * Bureaucracy form adjustments 135 */ 136 137.dokuwiki form.bureaucracy__plugin div.field { 138 display: flex; 139 justify-content: flex-end; 140 141 label { 142 clear: both; // this is somehow missing in the bootstrap template 143 flex-grow: 1; 144 } 145 146 span { 147 line-height: 2em; 148 float: left; 149 text-align: right; 150 } 151 152 span.label { 153 vertical-align: top; 154 width: 100%; 155 156 // fixes for bootstrap3 template 157 color: @ini_text; 158 font-size: 100%; 159 } 160 161 span.input { 162 width: 50%; 163 display: inline-block; 164 text-align: left; 165 padding-left: 0.25em; 166 color: @ini_text; 167 168 input, select, textarea { 169 width: 100%; 170 } 171 172 input[type='checkbox'] { 173 width: auto; 174 margin-right: 0; 175 } 176 177 label { 178 text-align: left; 179 line-height: 1.5em; 180 } 181 } 182} 183 184/*responsive - small screen*/ 185@media (max-width: 480px) { 186 .dokuwiki form.bureaucracy__plugin div.field { 187 flex-wrap: wrap; 188 189 label { 190 > span { 191 text-align: left; 192 width: 100%; 193 } 194 } 195 196 span.input { 197 width: 100%; 198 } 199 } 200} 201 202/** 203 * Tabs in the Schema Editor 204 */ 205 206#plugin__struct_delete, 207#plugin__struct_json { 208 border: 1px solid @ini_border; 209 border-top: none; 210 display: block; 211 padding: 2em; 212 213 fieldset { 214 margin-bottom: 1em; 215 width: 500px; 216 217 label.block { 218 font-weight: normal; 219 } 220 } 221} 222 223form.struct_newschema { 224 label { 225 display: block; 226 text-align: left; 227 228 span { 229 display: inline-block; 230 width: 45%; 231 text-align: right; 232 padding-right: 1em; 233 } 234 } 235} 236 237/** 238 * The Schema Editor 239 */ 240 241#plugin__struct_editor { 242 table.inline { 243 width: 100%; 244 border-top: none; 245 246 tr:first-child { 247 border-top: none; 248 249 th { 250 border-top: none; 251 } 252 } 253 } 254 255 tr.disabled { 256 td { 257 opacity: 0.5; 258 } 259 260 // collapse config block 261 td.config > div { 262 overflow: auto; 263 height: 2em; 264 265 div.jsoneditor-outer { 266 margin: 0; 267 padding: 0; 268 } 269 } 270 271 td.isenabled { 272 opacity: 1; 273 } 274 } 275 276 fieldset { 277 width: 100%; 278 padding-left: 0; 279 padding-right: 0; 280 margin-bottom: 1em; 281 282 div.jsoneditor { 283 margin: auto; 284 } 285 } 286} 287 288/** 289 * In page output 290 */ 291 292#plugin__struct_output { 293 margin-right: 16em; // space for the TOC 294 border: 1px solid @ini_border; 295 margin-bottom: 1.2em; 296 297 div.table { 298 margin: 0; 299 300 table { 301 font-size: 90%; 302 width: 100%; 303 border: none; 304 margin: 0; 305 306 td, th { 307 background-color: transparent; 308 vertical-align: top; 309 border: none; 310 } 311 312 tbody th { 313 width: 20%; 314 text-align: right; 315 316 &::after { 317 content: ':'; 318 } 319 } 320 321 thead th { 322 background-color: @ini_background_alt; 323 text-align: center; 324 font-size: 110%; 325 font-weight: normal; 326 } 327 } 328 } 329} 330 331/** 332 * Aggregation 333 */ 334 335.dokuwiki .structaggregation { 336 337 &.structaggregationtable, 338 &.structaggregationeditortable { 339 table.inline td > *:last-child { 340 margin-bottom: 0; 341 } 342 } 343 344 &.structaggregationlist > ul li div { 345 display: inline; 346 347 p { 348 display: inline; 349 margin: 0; 350 } 351 } 352 353 /* Indexed List */ 354 355 &.structaggregationlist.is-indexed > ul { 356 list-style: none; 357 display: flex; 358 flex-wrap: wrap; 359 padding: 0; 360 gap: 0.5em; 361 362 363 > li { 364 flex: 1 1 30%; 365 min-width: 18em; 366 max-width: 100%; 367 margin: 0; 368 overflow: hidden; 369 370 > div.li { 371 font-size: 1.5em; 372 font-weight: bold; 373 } 374 } 375 } 376 377 378 table th { 379 a { 380 color: @ini_link; 381 font-weight: bold; 382 383 &.sort-up::before { 384 content: '↑'; 385 } 386 387 &.sort-down::before { 388 content: '↓'; 389 } 390 391 &.next { 392 float: right; 393 } 394 } 395 396 input { 397 width: 20px; 398 background-image: url(../../tpl/dokuwiki/images/search.png); 399 background-repeat: no-repeat; 400 background-position: 2px center; 401 padding-left: 20px; 402 } 403 404 input:not([value]) { 405 opacity: 0.5; 406 } 407 408 input:focus { 409 width: auto; 410 opacity: 1; 411 } 412 } 413 414 img.media { 415 box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.5); 416 } 417 418 div.table { 419 margin-bottom: 2.4em; 420 } 421 422 a.export { 423 float: left; 424 margin-top: -2.4em; 425 margin-left: 1em; 426 border: 1px solid @ini_border; 427 border-top: none; 428 border-bottom-right-radius: 4px; 429 border-bottom-left-radius: 4px; 430 padding: 2px 5px 2px 22px; 431 background-position-x: 2px; 432 } 433} 434 435.dokuwiki .structaggregationcloud { 436 ul { 437 text-align: center; 438 439 li { 440 list-style: none; 441 margin: 0 1em 0 0; 442 padding: 0; 443 display: inline-block; 444 445 .struct_color, .struct_media { 446 a { 447 display: block; 448 height: 100%; 449 } 450 } 451 452 .struct_media a { 453 background-size: cover; 454 background-position: center; 455 box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.5) 456 } 457 } 458 } 459} 460 461/** 462 * Lookup Aggregation Editor 463 */ 464 465.dokuwiki .structaggregationeditor { 466 table.inline { 467 min-width: 100%; 468 469 th.action { 470 width: 30px; //16px icon + margins 471 } 472 } 473} 474 475/** 476 * General Output styles 477 */ 478 479.dokuwiki div.struct_color { 480 width: 1.2em; 481 height: 1.2em; 482 display: inline-block; 483 margin-right: 0.5em; 484} 485 486/** 487 * Inline Editor Overlay 488 */ 489 490.dokuwiki .struct_inlineditor { 491 position: absolute; 492 top: 0; 493 left: 0; 494 width: 300px; 495 496 background-color: @ini_background; 497 color: @ini_text; 498 border: 1px solid @ini_border; 499 padding: 5px; 500 501 box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.5); 502 503 .ctl { 504 margin-top: 5px; 505 } 506 507} 508 509/** 510 * Errors on AJAX 511 */ 512 513.dokuwiki .structaggregationeditor form, 514.dokuwiki .struct_inlineditor { 515 .err { 516 font-size: 90%; 517 margin-top: 5px; 518 padding: 5px; 519 background-color: @ini_highlight; 520 color: @ini_text; 521 text-align: left; 522 } 523} 524 525/** 526 * Struct Filter 527 */ 528.dokuwiki .structaggregationfilter { 529 display: flex; 530 flex-wrap: wrap; 531 gap: 1em; 532 box-sizing: border-box; 533 534 details { 535 position: relative; 536 max-width: 30%; 537 border: 1px solid transparent; 538 padding: 0.25em 0.5em; 539 cursor: pointer; 540 541 &[open] { 542 background-color: @ini_background_alt; 543 544 ul { 545 z-index: 10; 546 min-width: 15em; 547 border: 1px solid @ini_border; 548 } 549 } 550 551 /** needed for Sprintdoc template */ 552 summary { 553 display: list-item; 554 } 555 556 ul { 557 left: -1px; 558 right: -1px; 559 position: absolute; 560 padding: 0; 561 background-color: @ini_background; 562 max-height: 33vh; 563 overflow-y: auto; 564 565 li { 566 margin: 0; 567 text-overflow: ellipsis; 568 overflow: hidden; 569 padding: 0.25em 0.5em; 570 571 &.active { 572 background-color: @ini_background_alt; 573 a { 574 font-weight: bold; 575 } 576 } 577 578 &:hover { 579 background-color: @ini_background_alt; 580 } 581 582 a { 583 display: block; 584 } 585 } 586 } 587 } 588} 589