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