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