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