1/** 2 * This file provides the styles for the fullscreen media manager 3 * (?do=media). 4 * 5 * What most templates would probably need to change (depending on 6 * their site width) are the 4 min-width's (search for @change). 7 * 8 * Comes from 9 * https://www.dokuwiki.org/template:dokuwiki 10 */ 11 12/* ---------- Added to style the tabs -------------*/ 13 14#mediamanager__page .filelist ul.tabs, 15#mediamanager__page .file ul.tabs { 16 display: flex; 17 flex-wrap: wrap; 18 padding-left: 0; 19 margin-bottom: 0; 20 list-style: none; 21 border-bottom: 1px solid #dee2e6; 22} 23 24#mediamanager__page .filelist ul.tabs li strong, 25#mediamanager__page .filelist ul.tabs li a, 26#mediamanager__page .file ul.tabs li strong, 27#mediamanager__page .file ul.tabs li a { 28 margin-bottom: -1px; 29 background: 0 0; 30 border: 1px solid transparent; 31 border-top-left-radius: 0.25rem; 32 border-top-right-radius: 0.25rem; 33 display: block; 34 padding: 0.5rem 1rem; 35 color: #0d6efd; 36 text-decoration: none; 37 transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out; 38} 39 40#mediamanager__page .file ul.tabs li a, 41#mediamanager__page .filelist ul.tabs li a { 42 border-color: #dee2e6 #dee2e6 #fff; 43 border-width: 1px; 44 border-style: solid; 45 border-top-left-radius: 0.25rem; 46 border-top-right-radius: 0.25rem; 47} 48 49#mediamanager__page .filelist .rows li:nth-child(2n+1) { 50 background-color: #ddd; 51} 52 53#mediamanager__page .filelist .rows li:hover { 54 background-color: #dee7ec; 55} 56 57/* ------- The original ------ */ 58 59/*____________ structure ____________*/ 60 61#mediamanager__page h1 { 62 margin-bottom: .5em; 63} 64 65#mediamanager__page { 66 /* min-width must be summary of all 3 panels' min-widths */ 67 min-width: 50em; /* @change */ 68 width: 100%; 69 text-align: left; 70} 71 72[dir=rtl] #mediamanager__page { 73 text-align: right; 74} 75 76#mediamanager__page .panel { 77 float: left; 78} 79 80[dir=rtl] #mediamanager__page .panel { 81 float: right; 82} 83 84#mediamanager__page .namespaces { 85 width: 20%; 86 min-width: 10em; /* @change */ 87 left: 0 !important; /* overrules jQuery UI resizable in rtl */ 88} 89 90#mediamanager__page .filelist { 91 width: 50%; 92 min-width: 25em; /* @change */ 93 left: 0 !important; /* overrules jQuery UI resizable in rtl */ 94} 95 96#mediamanager__page .file { 97 width: 30%; 98 min-width: 15em; /* @change */ 99} 100 101#mediamanager__page .tabs li { 102 white-space: nowrap; 103} 104 105#mediamanager__page .panelHeader { 106 /*background-color: @ini_background_alt;*/ 107 margin: 0 10px 10px 0; 108 padding: 10px 10px 8px; 109 text-align: left; 110 min-height: 20px; 111 overflow: hidden; 112} 113 114[dir=rtl] #mediamanager__page .panelHeader { 115 text-align: right; 116 margin: 0 0 10px 10px; 117} 118 119#mediamanager__page .panelContent { 120 overflow-y: auto; 121 overflow-x: hidden; 122 padding: 0; 123 margin: 0 10px 10px 0; 124 position: relative; 125} 126 127[dir=rtl] #mediamanager__page .panelContent { 128 text-align: right; 129 margin: 0 0 10px 10px; 130} 131 132#mediamanager__page .file .panelHeader, 133#mediamanager__page .file .panelContent { 134 margin-right: 0; 135} 136 137[dir=rtl] #mediamanager__page .file .panelHeader, 138[dir=rtl] #mediamanager__page .file .panelContent { 139 margin-left: 0; 140} 141 142#mediamanager__page .ui-resizable-e { 143 width: 6px; 144 right: 2px; 145 /*background: transparent url(../../images/resizecol.png) center center no-repeat;*/ 146} 147 148#mediamanager__page .ui-resizable-e:hover { 149 /*background-color: @ini_background_alt;*/ 150} 151 152[dir=rtl] #mediamanager__page .ui-resizable-w { 153 width: 6px; 154 left: 2px; 155 /*background: transparent url(../../images/resizecol.png) center center no-repeat;*/ 156} 157 158[dir=rtl] #mediamanager__page .ui-resizable-w:hover { 159 /*background-color: @ini_background_alt;*/ 160} 161 162 163#mediamanager__page dd { 164 margin: 0; 165} 166 167#mediamanager__page .panelHeader h3 { 168 float: left; 169 font-weight: normal; 170 font-size: 1em; 171 padding: 0; 172 margin: 0 0 3px; 173} 174 175[dir=rtl] #mediamanager__page .panelHeader h3 { 176 float: right 177} 178 179 180/*____________ namespaces panel ____________*/ 181 182[dir=rtl] #mediamanager__page .namespaces { 183 text-align: right; 184} 185 186/* make it look like a tab (as in _tabs.css) */ 187#mediamanager__page .namespaces h2 { 188 font-size: 1em; 189 display: inline-block; 190 padding: .3em .8em; 191 margin: 0 0 0 .3em; 192 border-radius: .5em .5em 0 0; 193 font-weight: normal; 194 /*background-color: @ini_background_alt;*/ 195 /*color: @ini_text;*/ 196 /*border: 1px solid @ini_border;*/ 197 /*border-bottom-color: @ini_background_alt;*/ 198 line-height: 1.4em; 199 position: relative; 200 bottom: -1px; 201 z-index: 2; 202} 203 204[dir=rtl] #mediamanager__page .namespaces h2 { 205 margin: 0 .3em 0 0; 206 position: relative; 207 right: 10px; 208} 209 210#mediamanager__page .namespaces .panelHeader { 211 /*border-top: 1px solid @ini_border;*/ 212 z-index: 1; 213} 214 215#mediamanager__page .namespaces ul { 216 margin-left: .2em; 217 margin-bottom: 0; 218 padding: 0; 219 list-style: none; 220} 221 222[dir=rtl] #mediamanager__page .namespaces ul { 223 margin-left: 0; 224 margin-right: .2em; 225} 226 227#mediamanager__page .namespaces ul ul { 228 margin-left: 1em; 229} 230 231[dir=rtl] #mediamanager__page .namespaces ul ul { 232 margin-left: 0; 233 margin-right: 1em; 234} 235 236#mediamanager__page .namespaces ul ul li { 237 margin: 0; 238} 239 240#mediamanager__page .namespaces ul .selected { 241 /*background-color: __highlight__;*/ 242 font-weight: bold; 243} 244 245 246/*____________ file list panel ____________*/ 247 248/* file list header */ 249 250#mediamanager__page .panelHeader form.options { 251 float: right; 252 margin-top: -3px; 253} 254 255[dir=rtl] #mediamanager__page .panelHeader form.options { 256 float: left 257} 258 259#mediamanager__page .panelHeader ul { 260 list-style: none; 261 margin: 0; 262 padding: 0; 263} 264 265#mediamanager__page .panelHeader ul li { 266 /*color: @ini_text;*/ 267 float: left; 268 line-height: 1; 269 padding-left: 3px; 270} 271 272[dir=rtl] #mediamanager__page .panelHeader ul li { 273 padding-right: 3px; 274 padding-left: 0; 275 float: right; 276} 277 278#mediamanager__page .panelHeader ul li.ui-controlgroup-horizontal { 279 padding-left: 30px; 280 margin: 0 0 0 5px; 281} 282 283#mediamanager__page .panelHeader ul li.listType { 284 background: url('../../images/icon-list.png') 3px 1px no-repeat; 285} 286 287#mediamanager__page .panelHeader ul li.sortBy { 288 background: url('../../images/icon-sort.png') 3px 1px no-repeat; 289} 290 291[dir=rtl] #mediamanager__page .panelHeader ul li.ui-controlgroup-horizontal { 292 padding-left: 0; 293 padding-right: 30px; 294 margin: 0 5px 0 0; 295 background-position: right 1px; 296} 297 298#mediamanager__page .panelHeader form.options .ui-controlgroup-horizontal label { 299 font-size: 90%; 300 margin-right: -0.4em; 301 padding: .3em .5em; 302 line-height: 1; 303} 304 305/* file list content */ 306 307#mediamanager__page .filelist ul { 308 padding: 0; 309 margin: 0 10px 0 0; 310} 311 312[dir=rtl] #mediamanager__page .filelist ul { 313 margin: 0 0 0 10px; 314} 315 316#mediamanager__page .filelist ul.rows { 317 margin: 0; 318} 319 320#mediamanager__page .filelist .panelContent ul li:hover { 321 /*background-color: @ini_background_alt;*/ 322} 323 324#mediamanager__page .filelist li dt a { 325 vertical-align: middle; 326 display: table-cell; 327 overflow: hidden; 328} 329 330/* file list as thumbs */ 331 332#mediamanager__page .filelist .thumbs li { 333 width: 100px; 334 min-height: 130px; 335 display: inline-block; 336 /* the right margin should visually be 10px, but because of its inline-block nature the whitespace inbetween is about 4px more */ 337 margin: 0 6px 10px 0; 338 /*background-color: @ini_background_neu;*/ 339 /*color: @ini_text;*/ 340 padding: 5px; 341 vertical-align: top; 342 text-align: center; 343 position: relative; 344 line-height: 1.2; 345} 346 347[dir=rtl] #mediamanager__page .filelist .thumbs li { 348 margin-right: 0; 349 margin-left: 6px; 350} 351 352#mediamanager__page .filelist .thumbs li dt a { 353 width: 100px; 354 height: 90px; 355} 356 357#mediamanager__page .filelist .thumbs li dt a img { 358 max-width: 90px; 359 max-height: 90px; 360} 361 362#mediamanager__page .filelist .thumbs li .name, 363#mediamanager__page .filelist .thumbs li .size, 364#mediamanager__page .filelist .thumbs li .filesize, 365#mediamanager__page .filelist .thumbs li .date { 366 display: block; 367 overflow: hidden; 368 text-overflow: ellipsis; 369 width: 90px; 370 white-space: nowrap; 371} 372 373#mediamanager__page .filelist .thumbs li .name { 374 padding: 5px 0; 375 font-weight: bold; 376} 377 378#mediamanager__page .filelist .thumbs li .date { 379 font-style: italic; 380 white-space: normal; 381} 382 383/* file list as rows */ 384 385#mediamanager__page .filelist .rows li { 386 list-style: none; 387 display: block; 388 position: relative; 389 max-height: 50px; 390 margin: 0 0 3px 0; 391 /*background-color: @ini_background;*/ 392 /*color: @ini_text;*/ 393 overflow: hidden; 394} 395 396#mediamanager__page .filelist .rows li:nth-child(2n+1) { 397 /*background-color: @ini_background_neu;*/ 398} 399 400#mediamanager__page .filelist .rows li dt { 401 float: left; 402 width: 10%; 403 height: 40px; 404 text-align: center; 405} 406 407[dir=rtl] #mediamanager__page .filelist .rows li dt { 408 float: right; 409} 410 411#mediamanager__page .filelist .rows li dt a { 412 width: 100px; 413 height: 40px; 414} 415 416#mediamanager__page .filelist .rows li dt a img { 417 max-width: 40px; 418 max-height: 40px; 419} 420 421#mediamanager__page .filelist .rows li .name, 422#mediamanager__page .filelist .rows li .size, 423#mediamanager__page .filelist .rows li .filesize, 424#mediamanager__page .filelist .rows li .date { 425 overflow: hidden; 426 text-overflow: ellipsis; 427 float: left; 428 margin-left: 1%; 429 white-space: nowrap; 430} 431 432[dir=rtl] #mediamanager__page .filelist .rows li .name, 433[dir=rtl] #mediamanager__page .filelist .rows li .size, 434[dir=rtl] #mediamanager__page .filelist .rows li .filesize, 435[dir=rtl] #mediamanager__page .filelist .rows li .date { 436 float: right; 437 margin-left: 0; 438 margin-right: 1%; 439} 440 441#mediamanager__page .filelist .rows li .name { 442 width: 30%; 443 font-weight: bold; 444} 445 446#mediamanager__page .filelist .rows li .size, 447#mediamanager__page .filelist .rows li .filesize { 448 width: 15%; 449} 450 451#mediamanager__page .filelist .rows li .date { 452 width: 20%; 453 font-style: italic; 454 white-space: normal; 455} 456 457/* upload form */ 458 459#mediamanager__page div.upload { 460 padding-bottom: 0.5em; 461} 462 463/*____________ file panel ____________*/ 464 465#mediamanager__page .file ul.actions { 466 text-align: center; 467 margin: 0 0 5px; 468 padding: 0; 469 list-style: none; 470} 471 472#mediamanager__page .file ul.actions li { 473 display: inline; 474 margin: 0; 475} 476 477#mediamanager__page .file div.image { 478 margin-bottom: 5px; 479 text-align: center; 480} 481 482#mediamanager__page .file div.image img { 483 width: 100%; 484} 485 486#mediamanager__page .file dl { 487 margin-bottom: 0; 488} 489 490#mediamanager__page .file dl dt { 491 font-weight: bold; 492 display: block; 493 /*background-color: @ini_background_alt;*/ 494} 495 496#mediamanager__page .file dl dd { 497 display: block; 498 /*background-color: @ini_background_neu;*/ 499} 500 501 502/* file meta data edit form */ 503 504#mediamanager__page form.meta div.row { 505 margin-bottom: 5px; 506} 507 508#mediamanager__page form.meta label span { 509 display: block; 510} 511 512#mediamanager__page form.meta input { 513 width: 50%; 514} 515 516#mediamanager__page form.meta button { 517 width: auto; 518} 519 520#mediamanager__page form.meta textarea.edit { 521 height: 6em; 522 width: 95%; 523 min-width: 95%; 524 max-width: 95%; 525} 526 527/* file revisions form */ 528 529#mediamanager__page form.changes ul { 530 margin-left: 10px; 531 padding: 0; 532 list-style-type: none; 533} 534 535[dir=rtl] #mediamanager__page form.changes ul { 536 margin-left: 0; 537 margin-right: 10px; 538} 539 540#mediamanager__page form.changes ul li div.li div { 541 font-size: 90%; 542 /*color: @ini_text_neu;*/ 543 padding-left: 18px; 544} 545 546[dir=rtl] #mediamanager__page form.changes ul li div.li div { 547 padding-left: 0; 548 padding-right: 18px; 549} 550 551#mediamanager__page form.changes ul li div.li input { 552 position: relative; 553 top: 1px; 554} 555 556/* file diff view */ 557 558#mediamanager__diff table { 559 table-layout: fixed; 560 border-width: 0; 561} 562 563#mediamanager__diff td, 564#mediamanager__diff th { 565 width: 48%; 566 margin: 0 5px 10px 0; 567 padding: 0; 568 vertical-align: top; 569 text-align: left; 570 /*border-color: @ini_background;*/ 571} 572 573[dir=rtl] #mediamanager__diff td, 574[dir=rtl] #mediamanager__diff th { 575 margin: 0 0 10px 5px; 576 text-align: right; 577} 578 579#mediamanager__diff th { 580 font-weight: normal; 581 /*background-color: @ini_background;*/ 582 line-height: 1.2; 583} 584 585#mediamanager__diff th a { 586 font-weight: bold; 587} 588 589#mediamanager__diff th span { 590 font-size: 90%; 591} 592 593#mediamanager__diff dl dd strong { 594 /*background-color: __highlight__;*/ 595 /*color: @ini_text;*/ 596 font-weight: normal; 597} 598 599/* image diff views */ 600 601#mediamanager__page .file form.diffView { 602 margin-bottom: 10px; 603 display: block; 604} 605 606#mediamanager__diff div.slider { 607 margin: 10px; 608 width: 95%; 609} 610 611#mediamanager__diff .imageDiff { 612 position: relative; 613} 614 615#mediamanager__diff .imageDiff .image2 { 616 position: absolute; 617 top: 0; 618 left: 0; 619} 620 621#mediamanager__diff .imageDiff.opacity .image2 { 622 opacity: 0.5; 623} 624 625#mediamanager__diff .imageDiff.portions .image2 { 626 border-right: 1px solid red; 627 overflow: hidden; 628} 629 630#mediamanager__diff .imageDiff.portions img { 631 float: left; 632} 633 634#mediamanager__diff .imageDiff img { 635 width: 100%; 636 max-width: none; 637} 638