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