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 width: 100%; 18 /* min-width must be summary of all 3 panels' min-widths */ 19 min-width: 50em; /* @change */ 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 min-height: 20px; 42 padding: 10px 10px 8px; 43 margin: 0 10px 10px 0; 44 overflow: hidden; 45 text-align: left; 46 background-color: __background_alt__; 47} 48 49#mediamanager__page .panelContent { 50 position: relative; 51 padding: 0; 52 margin: 0 10px 10px 0; 53 overflow-x: hidden; 54 overflow-y: auto; 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 right: 2px; 67 width: 6px; 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 padding: 0; 86 margin: 0 0 3px; 87 font-size: 1em; 88 font-weight: normal; 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 position: relative; 101 bottom: -1px; 102 z-index: 2; 103 display: inline-block; 104 padding: .3em .8em; 105 margin: 0 0 0 .3em; 106 font-size: 1em; 107 font-weight: normal; 108 line-height: 1.4em; 109 color: __text__; 110 background-color: __background_alt__; 111 border: 1px solid __border__; 112 border-bottom-color: __background_alt__; 113 border-radius: .5em .5em 0 0; 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 position: relative; 121 right: 10px; 122 margin: 0 .3em 0 0; 123} 124#mediamanager__page .namespaces .panelHeader { 125 z-index: 1; 126 border-top: 1px solid __border__; 127} 128 129#mediamanager__page .namespaces ul { 130 padding: 0; 131 margin-bottom: 0; 132 margin-left: .2em; 133 list-style: none; 134} 135[dir=rtl] #mediamanager__page .namespaces ul { 136 margin-right: .2em; 137 margin-left: 0; 138} 139#mediamanager__page .namespaces ul ul { 140 margin-left: 1em; 141} 142[dir=rtl] #mediamanager__page .namespaces ul ul { 143 margin-right: 1em; 144 margin-left: 0; 145} 146#mediamanager__page .namespaces ul ul li { 147 margin: 0; 148} 149 150#mediamanager__page .namespaces ul .selected { 151 font-weight: bold; 152 background-color: __highlight__; 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 padding: 0; 167 margin: 0; 168 list-style: none; 169} 170#mediamanager__page .panelHeader ul li { 171 float: left; 172 padding-left: 3px; 173 line-height: 1; 174 color: __text__; 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 margin-right: -.4em; 194 font-size: 90%; 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 display: table-cell; 217 overflow: hidden; 218 vertical-align: middle; 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 position: relative; 233 display: inline-block; 234 display: -moz-inline-stack; 235 width: 100px; 236 min-height: 130px; 237 padding: 5px; 238 /* the right margin should visually be 10px, but because of its inline-block nature the whitespace inbetween is about 4px more */ 239 margin: 0 6px 10px 0; 240 line-height: 1.2; 241 color: __text__; 242 text-align: center; 243 vertical-align: top; 244 background-color: __background_neu__; 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 width: 90px; 272 overflow: hidden; 273 text-overflow: ellipsis; 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 position: relative; 289 display: block; 290 max-height: 50px; 291 margin: 0; 292 margin-bottom: 3px; 293 overflow: hidden; 294 color: __text__; 295 list-style: none; 296 background-color: __background__; 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 float: left; 325 margin-left: 1%; 326 overflow: hidden; 327 text-overflow: ellipsis; 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: .5em; 349} 350 351/*____________ file panel ____________*/ 352 353#mediamanager__page .file ul.actions { 354 padding: 0; 355 margin: 0 0 5px; 356 text-align: center; 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 display: block; 378 font-weight: bold; 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 width: 95%; 407 min-width: 95%; 408 max-width: 95%; 409 height: 6em; 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 padding: 0; 417 margin-left: 10px; 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 padding-left: 18px; 424 font-size: 90%; 425 color: __text_neu__; 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 padding: 0; 445 margin: 0 5px 10px 0; 446 text-align: left; 447 vertical-align: top; 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 line-height: 1.2; 458 background-color: __background__; 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 font-weight: normal; 469 color: __text__; 470 background-color: __highlight__; 471} 472 473/* image diff views */ 474 475#mediamanager__page .file form.diffView { 476 display: block; 477 margin-bottom: 10px; 478} 479 480#mediamanager__diff div.slider { 481 width: 95%; 482 margin: 10px; 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 opacity: .5; 496 497 -moz-opacity: .5; 498 -khtml-opacity: .5; 499} 500 501#mediamanager__diff .imageDiff.portions .image2 { 502 overflow: hidden; 503 border-right: 1px solid red; 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