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