1@grayTab: #ddd; 2ul.tabs { 3 .nav; 4 .nav-tabs; 5 line-height: 14px; 6 margin-bottom: 0px; 7 padding-bottom: 0px; 8 margin-right: 8px; 9} 10#mediamanager__page { 11 min-width: 50em; 12} 13#mediamanager__page .panel { 14 .pull-left; 15 min-height: 500px; 16} 17.panel.namespaces { 18 width: 20%; 19 min-width: 10em; 20} 21.panel.filelist { 22 width: 50%; 23 min-width: 25em; 24} 25.panel.file { 26 width: 30%; 27 min-width: 15em; 28} 29 30ul.tabs > li { 31 .pull-left; 32} 33div.panel h2, div.panel h3 { 34 font-size: @baseFontSize; 35} 36ul.tabs > li > a, 37ul.tabs > li > strong, 38div.panel h2, 39div.panel h3 { 40 font-weight: normal; 41 padding-top: 8px; 42 padding-right: 12px; 43 padding-left: 12px; 44 margin-right: 2px; 45 line-height: 14px; 46 margin-left: 0px; 47} 48div.panel h2, 49ul.tabs > li > a, 50ul.tabs > li > strong { 51 display:block; 52 text-decoration: none; 53 padding-bottom: 8px; 54 line-height: @baseLineHeight; 55 .border-radius(4px 4px 0 0); 56 border-left: 1px solid @grayTab; 57 border-top: 1px solid @grayTab; 58 border-bottom: 1px solid transparent; 59 margin-bottom: -1px; 60 cursor: default; 61} 62ul.tabs > li > a { 63 border: 1px solid transparent; 64 &:hover { 65 border-color: @grayLighter @grayLighter @grayTab; 66 background-color: @grayLighter; 67 } 68} 69ul.tabs > li > strong { 70 background-color: @tbgcolor; 71 border-right: 1px solid @grayTab; 72 color: @gray; 73} 74div.panel h2 { 75 float: left; 76 color: @gray; 77 border-right: 1px solid @grayTab; 78 margin-top: 0px; 79} 80 81.ui-resizable { 82 position: relative; 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: @grayTab; 91} 92 93#mediamanager__page .panelHeader{ 94 padding-top: 8px; 95 padding-right: 12px; 96 padding-left: 12px; 97 margin-right: 2px; 98 margin-left: 0px; 99 text-align: left; 100 min-height: 20px; 101 overflow: hidden; 102} 103#mediamanager__page .namespaces .panelHeader { 104 clear: both; 105} 106#mediamanager__page .panelContent { 107 padding-top: 8px; 108 padding-right: 12px; 109 padding-left: 12px; 110 margin-right: 0px; 111 margin-left: 0px; 112 overflow-y: auto; 113 overflow-x: hidden; 114 min-height: 400px; 115 position: relative; 116} 117 118//From dokuwiki/_media_fullscreen.css 119#mediamanager__page dd { 120 margin: 0; 121} 122 123#mediamanager__page .panelHeader h3 { 124 float: left; 125 font-weight: normal; 126 font-size: 1em; 127 padding: 0; 128 margin: 0 0 3px; 129} 130 131/*____________ namespaces panel ____________*/ 132 133[dir=rtl] #mediamanager__page .namespaces { 134 text-align: right; 135} 136 137#mediamanager__page .namespaces ul { 138 margin-left: .2em; 139 margin-bottom: 0; 140 padding: 0; 141 list-style: none; 142} 143[dir=rtl] #mediamanager__page .namespaces ul { 144 margin-left: 0; 145 margin-right: .2em; 146} 147#mediamanager__page .namespaces ul ul { 148 margin-left: 1em; 149} 150[dir=rtl] #mediamanager__page .namespaces ul ul { 151 margin-left: 0; 152 margin-right: 1em; 153} 154#mediamanager__page .namespaces ul ul li { 155 margin: 0; 156} 157 158#mediamanager__page .namespaces ul .selected { 159 background-color: @btnBackgroundHighlight; 160 font-weight: bold; 161} 162 163 164/*____________ file list panel ____________*/ 165 166/* file list header */ 167 168#mediamanager__page .panelHeader form.options { 169 float: right; 170 margin-top: -3px; 171} 172 173#mediamanager__page .panelHeader ul { 174 list-style: none; 175 margin: 0; 176 padding: 0; 177} 178#mediamanager__page .panelHeader ul li { 179 color: @textColor; 180 float: left; 181 line-height: 1; 182 padding-left: 3px; 183} 184[dir=rtl] #mediamanager__page .panelHeader ul li { 185 margin-right: 0; 186 margin-left: .5em; 187} 188 189#mediamanager__page .panelHeader ul li.listType { 190 padding-left: 30px; 191 background: url('../../images/icon-list.png') 3px 1px no-repeat; 192} 193#mediamanager__page .panelHeader ul li.sortBy { 194 padding-left: 30px; 195 background: url('../../images/icon-sort.png') 3px 1px no-repeat; 196} 197 198#mediamanager__page .panelHeader form.options .ui-buttonset label{ 199 font-size: 90%; 200 margin-right: -0.4em; 201} 202#mediamanager__page .panelHeader form.options .ui-buttonset .ui-button-text { 203 padding: .3em .5em; 204 line-height: 1; 205} 206 207/* file list content */ 208 209#mediamanager__page .filelist ul { 210 padding: 0; 211 margin: 0; 212} 213[dir=rtl] #mediamanager__page .filelist ul.tabs { 214 margin-right: 10px; 215} 216 217#mediamanager__page .filelist .panelContent ul li:hover { 218 background-color: @btnBackground; 219} 220 221#mediamanager__page .filelist li dt a { 222 vertical-align: middle; 223 display: table-cell; 224 overflow: hidden; 225} 226* html #mediamanager__page .filelist .thumbs li dt a, 227*+html #mediamanager__page .filelist .thumbs li dt a { 228 display: block; 229} 230* html #mediamanager__page .filelist .rows li dt a, 231*+html #mediamanager__page .filelist .rows li dt a { 232 display: inline; 233} 234 235/* file list as thumbs */ 236 237#mediamanager__page .filelist .thumbs li { 238 width: 100px; 239 min-height: 130px; 240 display: inline-block; 241 display: -moz-inline-stack; 242 /* the right margin should visually be 10px, but because of its inline-block nature the whitespace inbetween is about 4px more */ 243 margin: 0 6px 10px 0; 244 background-color: @btnBackgroundHighlight; 245 color: @textColor; 246 padding: 5px; 247 vertical-align: top; 248 text-align: center; 249 position: relative; 250 line-height: 1.2; 251} 252[dir=rtl] #mediamanager__page .filelist .thumbs li { 253 margin-right: 0; 254 margin-left: 6px; 255} 256* html #mediamanager__page .filelist .thumbs li, 257*+html #mediamanager__page .filelist .thumbs li { 258 display: inline; 259 zoom: 1; 260} 261 262#mediamanager__page .filelist .thumbs li dt a { 263 width: 100px; 264 height: 90px; 265} 266 267#mediamanager__page .filelist .thumbs li dt a img { 268 max-width: 90px; 269 max-height: 90px; 270} 271 272#mediamanager__page .filelist .thumbs li .name, 273#mediamanager__page .filelist .thumbs li .size, 274#mediamanager__page .filelist .thumbs li .filesize, 275#mediamanager__page .filelist .thumbs li .date { 276 display: block; 277 overflow: hidden; 278 text-overflow: ellipsis; 279 width: 90px; 280 white-space: nowrap; 281} 282#mediamanager__page .filelist .thumbs li .name { 283 padding: 5px 0; 284 font-weight: bold; 285} 286#mediamanager__page .filelist .thumbs li .date { 287 font-style: italic; 288 white-space: normal; 289} 290 291/* file list as rows */ 292 293#mediamanager__page .filelist .rows li { 294 list-style: none; 295 display: block; 296 position: relative; 297 max-height: 50px; 298 margin: 0; 299 margin-bottom: 3px; 300 background-color: @bodyBackground; 301 color: @textColor; 302 overflow: hidden; 303} 304 305#mediamanager__page .filelist .rows li:nth-child(2n+1) { 306 background-color: @btnBackgroundHighlight; 307} 308 309#mediamanager__page .filelist .rows li dt { 310 float: left; 311 width: 10%; 312 height: 40px; 313 text-align: center; 314} 315 316#mediamanager__page .filelist .rows li dt a { 317 width: 100px; 318 height: 40px; 319} 320 321#mediamanager__page .filelist .rows li dt a img { 322 max-width: 40px; 323 max-height: 40px; 324} 325 326#mediamanager__page .filelist .rows li .name, 327#mediamanager__page .filelist .rows li .size, 328#mediamanager__page .filelist .rows li .filesize, 329#mediamanager__page .filelist .rows li .date { 330 overflow: hidden; 331 text-overflow: ellipsis; 332 float: left; 333 margin-left: 1%; 334 white-space: nowrap; 335} 336 337#mediamanager__page .filelist .rows li .name { 338 width: 30%; 339 font-weight: bold; 340} 341#mediamanager__page .filelist .rows li .size, 342#mediamanager__page .filelist .rows li .filesize { 343 width: 15%; 344} 345#mediamanager__page .filelist .rows li .date { 346 width: 20%; 347 font-style: italic; 348 white-space: normal; 349} 350 351/* upload form */ 352 353#mediamanager__page div.upload { 354 padding-bottom: 0.5em; 355} 356 357/*____________ file panel ____________*/ 358 359#mediamanager__page .file ul.actions { 360 text-align: center; 361 margin: 0 0 5px; 362 padding: 0; 363 list-style: none; 364} 365#mediamanager__page .file ul.actions li { 366 display: inline; 367 margin: 0; 368} 369 370#mediamanager__page .file div.image { 371 margin-bottom: 5px; 372 text-align: center; 373} 374 375#mediamanager__page .file div.image img { 376 width: 100%; 377} 378 379#mediamanager__page .file dl { 380 margin-bottom: 0; 381} 382#mediamanager__page .file dl dt { 383 font-weight: bold; 384 display: block; 385 background-color: @btnBackground; 386} 387#mediamanager__page .file dl dd { 388 display: block; 389 background-color: @btnBackgroundHighlight; 390} 391 392 393/* file meta data edit form */ 394 395#mediamanager__page form.meta div.row { 396 margin-bottom: 5px; 397} 398 399#mediamanager__page form.meta label span { 400 display: block; 401} 402 403#mediamanager__page form.meta input { 404 width: 50%; 405} 406 407#mediamanager__page form.meta input.button { 408 width: auto; 409} 410 411#mediamanager__page form.meta textarea.edit { 412 height: 6em; 413 width: 95%; 414 min-width: 95%; 415 max-width: 95%; 416} 417 418/* file revisions form */ 419 420#mediamanager__page #page__revisions ul { 421 margin-left: 10px; 422 padding: 0; 423 list-style-type: none; 424} 425 426#mediamanager__page #page__revisions ul li div.li div { 427 font-size: 90%; 428 color: @headingsColor; 429 padding-left: 18px; 430} 431 432#mediamanager__page #page__revisions ul li div.li input { 433 position: relative; 434 top: 1px; 435} 436 437/* file diff view */ 438 439#mediamanager__diff table { 440 table-layout: fixed; 441 border-width: 0; 442} 443 444#mediamanager__diff td, 445#mediamanager__diff th { 446 width: 48%; 447 margin: 0 5px 10px 0; 448 padding: 0; 449 vertical-align: top; 450 text-align: left; 451 border-color: @bodyBackground; 452} 453[dir=rtl] #mediamanager__diff td, 454[dir=rtl] #mediamanager__diff th { 455 text-align: right; 456} 457 458#mediamanager__diff th { 459 font-weight: normal; 460 background-color: @bodyBackground; 461 line-height: 1.2; 462} 463#mediamanager__diff th a { 464 font-weight: bold; 465} 466#mediamanager__diff th span { 467 font-size: 90%; 468} 469 470#mediamanager__diff dl dd strong{ 471 background-color: @btnBackgroundHighlight; 472 color: @textColor; 473 font-weight: normal; 474} 475 476/* image diff views */ 477 478#mediamanager__page .file form.diffView { 479 margin-bottom: 10px; 480 display: block; 481} 482 483#mediamanager__diff div.slider { 484 margin: 10px; 485 width: 95%; 486} 487 488#mediamanager__diff .imageDiff { 489 position: relative; 490} 491#mediamanager__diff .imageDiff .image2 { 492 position: absolute; 493 top: 0; 494 left: 0; 495} 496 497#mediamanager__diff .imageDiff.opacity .image2 { 498 opacity: 0.5; 499} 500 501#mediamanager__diff .imageDiff.portions .image2 { 502 border-right: 1px solid red; 503 overflow: hidden; 504} 505 506#mediamanager__diff .imageDiff.portions img { 507 float: left; 508} 509 510#mediamanager__diff .imageDiff img { 511 width: 100%; 512 max-width: none; 513} 514 515/** 516 * This file provides the styles for the file uploader 517 * used in the media manager (both fullscreen and popup). 518 */ 519 520.qq-uploader { 521 position: relative; 522 width: 100%; 523} 524 525.qq-uploader .error { 526 color: #f00; 527 background-color: #fff; 528} 529 530/* select file button */ 531 532.qq-upload-button { 533 display: inline-block; 534 text-decoration: none; 535 font-size: 100%; 536 cursor: pointer; 537 margin: 1px 1px 5px; 538} 539 540* html .qq-upload-button, 541*+html .qq-upload-button { 542 display: inline; 543} 544 545.qq-upload-button-focus { 546 outline: 1px dotted; 547} 548 549/* drop area */ 550 551.qq-upload-drop-area { 552 position: absolute; 553 top: 0; 554 left: 0; 555 width: 100%; 556 height: 100%; 557 min-height: 70px; 558 z-index: 2; 559 background: @btnBackgroundHighlight; 560 color: @textColor; 561 text-align: center; 562} 563 564.qq-upload-drop-area span { 565 display: block; 566 position: absolute; 567 top: 50%; 568 width: 100%; 569 margin-top: -8px; 570 font-size: 120%; 571} 572 573.qq-upload-drop-area-active { 574 background: @btnBackground; 575} 576 577/* list of files to upload */ 578 579div.qq-uploader ul { 580 margin: 0; 581 padding: 0; 582 list-style: none; 583} 584 585.qq-uploader li { 586 margin: 0 0 5px; 587 color: @textColor; 588} 589 590.qq-uploader li span, 591.qq-uploader li input, 592.qq-uploader li a { 593 margin-right: 5px; 594} 595 596.qq-upload-file { 597 display: block; 598 font-weight: bold; 599} 600 601.qq-upload-spinner { 602 display: inline-block; 603 background: url("../../images/throbber.gif"); 604 width: 15px; 605 height: 15px; 606 vertical-align: text-bottom; 607} 608 609.qq-upload-size, 610.qq-upload-cancel { 611 font-size: 85%; 612} 613 614.qq-upload-failed-text { 615 display: none; 616} 617.qq-upload-fail .qq-upload-failed-text { 618 display: inline; 619} 620 621.qq-action-container * { 622 vertical-align: middle; 623} 624.qq-overwrite-check input { 625 margin-left: 10px; 626} 627