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