1/** 2 * The CSS in here controls the appearance of the media manager 3 */ 4 5#media__manager { 6 height: 100%; 7 overflow: hidden; 8} 9 10#media__left { 11 width: 30%; 12 border-right: solid 1px __border__; 13 background-color: rgba(255,255,255,0.6); 14 height: 100%; 15 overflow: auto; 16 position: absolute; 17 left: 0; 18} 19 20#media__right { 21 width: 69.7%; 22 background-color: rgba(255,255,255,0.6); 23 height: 100%; 24 overflow: auto; 25 position: absolute; 26 right: 0; 27} 28 29#media__manager h1 { 30 margin: 0; 31 padding: 0; 32 margin-bottom: 0.5em; 33} 34 35#media__manager a.select { 36 cursor: pointer; 37} 38 39/* --- Tree formatting --- */ 40 41#media__tree img { 42 float: left; 43 padding: 0.5em 0.3em 0 0; 44} 45[dir=rtl] #media__tree img { 46 float: right; 47 padding: 0.5em 0 0 0.3em; 48} 49 50#media__tree ul { 51 list-style-type: none; 52 list-style-image: none; 53 margin-left: 1.5em; 54} 55[dir=rtl] #media__tree ul { 56 margin-left: 0; 57 margin-right: 1.5em; 58} 59 60#media__tree li { 61 clear: left; 62 list-style-type: none; 63 list-style-image: none; 64} 65[dir=rtl] #media__tree li { 66 clear: right; 67} 68*+html #media__tree li, 69* html #media__tree li { 70 border: 1px solid __background__; 71}/* I don't understand this, but this fixes a style bug in IE; 72it's dirty, so any "real" fixes are welcome */ 73 74/* --- options --- */ 75 76#media__opts { 77 padding-left: 1em; 78 margin-bottom: 0.5em; 79} 80 81#media__opts input { 82 float: left; 83 display: block; 84 margin-top: 4px; 85 position: absolute; 86} 87*+html #media__opts input, 88* html #media__opts input { 89 position: static; 90} 91 92#media__opts label { 93 display: block; 94 float: left; 95 margin-left: 20px; 96 margin-bottom: 4px; 97} 98*+html #media__opts label, 99* html #media__opts label { 100 margin-left: 10px; 101} 102 103#media__opts br { 104 clear: left; 105} 106 107/* --- file list --- */ 108 109#media__content img.load { 110 margin: 1em auto; 111} 112 113#media__content #scroll__here { 114 border: 1px dashed __border__; 115} 116 117#media__content .odd { 118 background-color: __background_neu__; 119 padding: 0.4em; 120} 121 122#media__content .even { 123 padding: 0.4em; 124} 125 126#media__content a.mediafile { 127 margin-right: 1.5em; 128 font-weight: bold; 129} 130 131#media__content div.detail { 132 padding: 0.3em 0 0.3em 2em; 133} 134 135#media__content div.detail div.thumb { 136 float: left; 137 width: 130px; 138 text-align: center; 139 margin-right: 0.4em; 140} 141 142 143#media__content img.btn { 144 vertical-align: text-bottom; 145} 146 147#media__content div.example { 148 color: __text_neu__; 149 margin-left: 1em; 150} 151 152/* --- upload form --- */ 153 154#media__content div.upload { 155 font-size: 90%; 156 padding: 0 0.5em 0.5em 0.5em; 157} 158 159#media__content #mediamanager__uploader { 160 display: block; 161 border-bottom: solid 1px __border__; 162 padding: 0 0.5em 1em 0.5em; 163} 164 165#media__content form#dw__upload { 166 border-bottom: 0; 167} 168 169#media__content form#dw__upload fieldset { 170 padding: 0; 171 margin: 0; 172 border: none; 173 width: auto; 174} 175#media__content form#dw__upload p { 176 text-align: left; 177 padding: 0.25em 0; 178 margin: 0; 179 line-height: 1.0em; 180} 181#media__content form#dw__upload label.check { 182 float: none; 183 width: auto; 184 margin-left: 11.5em; 185} 186 187/* --- meta edit form --- */ 188 189#media__content form.meta { 190 display: block; 191 padding: 0 0 1em 0; 192} 193 194#media__content form.meta label { 195 display: block; 196 width: 25%; 197 float: left; 198 font-weight: bold; 199 margin-left: 1em; 200 clear: left; 201} 202 203#media__content form.meta .edit { 204 font: 100% "Lucida Grande", Verdana, Lucida, Helvetica, Arial, sans-serif; 205 float: left; 206 width: 70%; 207 padding-right: 0; 208 padding-left: 0.2em; 209 margin: 2px; 210} 211 212#media__content form.meta textarea.edit { 213 height: 8em; 214} 215 216#media__content form.meta div.metafield { 217 clear: left; 218} 219 220#media__content form.meta div.buttons { 221 clear: left; 222 margin-left: 20%; 223 padding-left: 1em; 224} 225 226/*____________ Layout ____________*/ 227 228#mediamanager__page h1 { 229 margin: 0 0 .5em; 230} 231 232#mediamanager__page { 233 min-width: 800px; 234 width: 100%; 235 text-align: left; 236} 237 238#mediamanager__page .panel { 239 float: left; 240} 241 242#mediamanager__page .namespaces { 243 width: 15%; 244 min-width: 120px; 245} 246#mediamanager__page .filelist { 247 width: 50%; 248 min-width: 400px; 249} 250#mediamanager__page .file { 251 width: 35%; 252 min-width: 280px; 253} 254 255#mediamanager__page .panelHeader { 256 background-color: __background_alt__; 257 margin: 0 10px 10px 0; 258 padding: 10px 10px 8px; 259 text-align: left; 260 min-height: 20px; 261 overflow: hidden; 262} 263[dir=rtl] #mediamanager__page .panelContent { 264 text-align: right; 265} 266 267 268#mediamanager__page .panelContent { 269 overflow-y: auto; 270 overflow-x: hidden; 271 padding: 0; 272 margin: 0 10px 10px 0; 273 position: relative; 274} 275 276#mediamanager__page .file .panelHeader, 277#mediamanager__page .file .panelContent { 278 margin-right: 0; 279} 280 281#mediamanager__page .ui-resizable-e { 282 width: 6px; 283 right: 2px; 284 background: transparent url(images/resizecol.png) center center no-repeat; 285} 286#mediamanager__page .ui-resizable-e:hover { 287 background-color: __background_alt__; 288} 289 290 291/*____________ Namespaces tree ____________*/ 292 293[dir=rtl] #mediamanager__page .namespaces { 294 text-align: right; 295} 296 297#mediamanager__page .namespaces h2 { 298 font-size: 1em; 299 display: inline-block; 300 border-width: 0; 301 padding: .3em .8em; 302 margin: 0 .3em 0 0; 303 border-radius: .5em .5em 0 0; 304 font-weight: normal; 305 background-color: __background_alt__; 306 color: __text__; 307 line-height: 1.5em; 308} 309* html #mediamanager__page .namespaces h2, 310*+html #mediamanager__page .namespaces h2 { 311 display: inline; 312} 313[dir=rtl] #mediamanager__page .namespaces h2 { 314 margin-right: 10px; 315} 316 317#mediamanager__page .namespaces ul { 318 margin-left: .2em; 319 margin-bottom: 0; 320 padding: 0; 321 list-style: none; 322} 323[dir=rtl] #mediamanager__page .namespaces ul { 324 margin-left: 0; 325 margin-right: .2em; 326} 327 328#mediamanager__page .namespaces ul ul { 329 margin-left: 1em; 330} 331[dir=rtl] #mediamanager__page .namespaces ul ul { 332 margin-left: 0; 333 margin-right: 1em; 334} 335#mediamanager__page .namespaces ul ul li { 336 margin: 0; 337} 338 339 340#mediamanager__page .namespaces ul .selected { 341 background-color: __highlight__; 342 font-weight: bold; 343} 344 345/*____________ Panel header ____________*/ 346 347#mediamanager__page .panelHeader h3 { 348 float: left; 349 font-weight: normal; 350 font-size: 1em; 351 padding: 0; 352 margin: 0 0 3px; 353} 354 355#mediamanager__page .panelHeader form.options { 356 float: right; 357 margin-top: -3px; 358} 359 360#mediamanager__page .panelHeader ul { 361 list-style: none; 362 margin: 0; 363 padding: 0; 364} 365#mediamanager__page .panelHeader ul li { 366 color: __text__; 367 float: left; 368 line-height: 1; 369 padding-left: 3px; 370} 371 372#mediamanager__page .panelHeader ul li.listType { 373 padding-left: 30px; 374 background: url('../../images/icon-list.png') 3px 1px no-repeat; 375} 376#mediamanager__page .panelHeader ul li.sortBy { 377 padding-left: 30px; 378 background: url('../../images/icon-sort.png') 3px 1px no-repeat; 379} 380 381#mediamanager__page .panelHeader form.options .ui-buttonset label{ 382 font-size: 90%; 383 margin-right: -0.4em; 384} 385#mediamanager__page .panelHeader form.options .ui-buttonset .ui-button-text { 386 padding: .4em .7em; 387 line-height: 1; 388} 389 390/*____________ File list ____________*/ 391 392#mediamanager__page .filelist ul { 393 padding: 0; 394 margin: 0; 395} 396[dir=rtl] #mediamanager__page .filelist ul.tabs { 397 margin-right: 10px; 398} 399 400#mediamanager__page .filelist .panelContent ul li:hover { 401 background-color: __background_alt__; 402} 403 404#mediamanager__page .filelist li dt a { 405 vertical-align: middle; 406 display: table-cell; 407 overflow: hidden; 408} 409* html #mediamanager__page .filelist .thumbs li dt a, 410*+html #mediamanager__page .filelist .thumbs li dt a { 411 display: block; 412} 413* html #mediamanager__page .filelist .rows li dt a, 414*+html #mediamanager__page .filelist .rows li dt a { 415 display: inline; 416} 417 418/* thumbs */ 419 420#mediamanager__page .filelist .thumbs li { 421 width: 100px; 422 min-height: 130px; 423 display: inline-block; 424 display: -moz-inline-stack; 425 /* the right margin should visually be 10px, but because of its inline-block nature the whitespace inbetween is about 4px more */ 426 margin: 0 6px 10px 0; 427 background-color: __background_neu__; 428 color: __text__; 429 padding: 5px; 430 vertical-align: top; 431 text-align: center; 432 position: relative; 433 line-height: 1.2; 434} 435[dir=rtl] #mediamanager__page .filelist .thumbs li { 436 margin-right: 0; 437 margin-left: 6px; 438} 439* html #mediamanager__page .filelist .thumbs li, 440*+html #mediamanager__page .filelist .thumbs li { 441 display: inline; 442 zoom: 1; 443} 444 445#mediamanager__page .filelist .thumbs li dt a { 446 width: 100px; 447 height: 90px; 448} 449 450#mediamanager__page .filelist .thumbs li dt a img { 451 max-width: 90px; 452 max-height: 90px; 453} 454 455#mediamanager__page .filelist .thumbs li .name, 456#mediamanager__page .filelist .thumbs li .size, 457#mediamanager__page .filelist .thumbs li .filesize, 458#mediamanager__page .filelist .thumbs li .date { 459 display: block; 460 overflow: hidden; 461 text-overflow: ellipsis; 462 width: 90px; 463 white-space: nowrap; 464} 465#mediamanager__page .filelist .thumbs li .name { 466 padding: 5px 0; 467 font-weight: bold; 468} 469#mediamanager__page .filelist .thumbs li .date { 470 font-style: italic; 471 white-space: normal; 472} 473 474/* rows */ 475 476#mediamanager__page .filelist .rows li { 477 list-style: none; 478 display: block; 479 position: relative; 480 max-height: 50px; 481 margin: 0; 482 margin-bottom: 3px; 483 background-color: __background__; 484 color: __text__; 485 overflow: hidden; 486} 487 488#mediamanager__page .filelist .rows li:nth-child(2n+1) { 489 background-color: __background_neu__; 490} 491 492#mediamanager__page .filelist .rows li dt { 493 float: left; 494 width: 10%; 495 height: 40px; 496 text-align: center; 497} 498 499#mediamanager__page .filelist .rows li dt a { 500 width: 100px; 501 height: 40px; 502} 503 504#mediamanager__page .filelist .rows li dt a img { 505 max-width: 40px; 506 max-height: 40px; 507} 508 509#mediamanager__page .filelist .rows li .name, 510#mediamanager__page .filelist .rows li .size, 511#mediamanager__page .filelist .rows li .filesize, 512#mediamanager__page .filelist .rows li .date { 513 overflow: hidden; 514 text-overflow: ellipsis; 515 float: left; 516 margin-left: 1%; 517 white-space: nowrap; 518} 519 520#mediamanager__page .filelist .rows li .name { 521 width: 30%; 522 font-weight: bold; 523} 524#mediamanager__page .filelist .rows li .size, 525#mediamanager__page .filelist .rows li .filesize { 526 width: 15%; 527} 528#mediamanager__page .filelist .rows li .date { 529 width: 20%; 530 font-style: italic; 531 white-space: normal; 532} 533 534/*____________ Upload panel ____________*/ 535 536#mediamanager__page div.upload { 537 padding-bottom: 0.5em; 538} 539 540#media__content #mediamanager__uploader { 541 border-bottom: 1px solid __border__; 542 padding-bottom: 0.5em; 543} 544 545/*____________ File preview ____________*/ 546 547#mediamanager__page .file ul.actions { 548 text-align: center; 549 margin: 0 0 5px; 550 list-style: none; 551} 552#mediamanager__page .file ul.actions li { 553 display: inline; 554} 555 556#mediamanager__page .file div.image { 557 margin-bottom: 5px; 558 text-align: center; 559} 560 561#mediamanager__page .file div.image img { 562 width: 100%; 563} 564 565#mediamanager__page .file dl { 566} 567#mediamanager__page .file dl dt { 568 font-weight: bold; 569 display: block; 570 background-color: __background_alt__; 571} 572#mediamanager__page .file dl dd { 573 display: block; 574 background-color: __background_neu__; 575} 576 577 578/*____________ Meta data edit form ____________*/ 579 580#mediamanager__page form.meta div.row { 581 margin-bottom: 5px; 582} 583 584#mediamanager__page form.meta label span { 585 display: block; 586} 587[dir=rtl] #mediamanager__page form.meta label span { 588 text-align: right; 589} 590 591#mediamanager__page form.meta input { 592 width: 50%; 593} 594 595#mediamanager__page form.meta input.button { 596 width: auto; 597} 598 599#mediamanager__page form.meta textarea.edit { 600 height: 6em; 601 width: 95%; 602 min-width: 95%; 603 max-width: 95%; 604} 605 606/*____________ Revisions form ____________*/ 607 608#mediamanager__page form.changes ul { 609 margin-left: 10px; 610 list-style-type: none; 611} 612 613#mediamanager__page form.changes ul li div.li div { 614 font-size: 90%; 615 color: __text_neu__; 616 padding-left: 18px; 617} 618 619#mediamanager__page form.changes ul li div.li input { 620 position: relative; 621 top: 1px; 622} 623 624/* File diff */ 625 626#mediamanager__diff table { 627 table-layout: fixed; 628} 629 630#mediamanager__diff td, 631#mediamanager__diff th { 632 width: 48%; 633 margin: 0 5px 10px 0; 634 padding: 0; 635 vertical-align: top; 636 text-align: left; 637} 638[dir=rtl] #mediamanager__diff td, 639[dir=rtl] #mediamanager__diff th { 640 text-align: right; 641} 642 643#mediamanager__diff th { 644 font-weight: normal; 645} 646#mediamanager__diff th a { 647 font-weight: bold; 648} 649#mediamanager__diff th span { 650 font-size: 90%; 651} 652 653#mediamanager__diff dl dd strong{ 654 background-color: __highlight__; 655 color: __text__; 656 font-weight: normal; 657} 658 659/* Image diff */ 660 661#mediamanager__page .file form.diffView { 662 margin-bottom: 10px; 663 display: block; 664} 665 666#mediamanager__diff div.slider { 667 margin: 10px; 668 width: 95%; 669} 670 671#mediamanager__diff .imageDiff { 672 position: relative; 673} 674#mediamanager__diff .imageDiff .image2 { 675 position: absolute; 676 top: 0; 677 left: 0; 678} 679 680#mediamanager__diff .imageDiff.opacity .image2 { 681 opacity: 0.5; 682} 683 684#mediamanager__diff .imageDiff.portions .image2 { 685 border-right: 1px solid red; 686 overflow: hidden; 687} 688 689#mediamanager__diff .imageDiff.portions img { 690 float: left; 691} 692 693#mediamanager__diff .imageDiff img { 694 width: 100%; 695 max-width: none; 696} 697 698