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