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