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