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