1@grayTab: #ddd;
2ul.tabs {
3	.nav;
4	.nav-tabs;
5	line-height: 14px;
6	margin-bottom: 0px;
7	padding-bottom: 0px;
8	margin-right: 8px;
9}
10#mediamanager__page {
11	min-width: 50em;
12}
13#mediamanager__page .panel {
14	.pull-left;
15	min-height: 500px;
16}
17.panel.namespaces {
18	width: 20%;
19	min-width: 10em;
20}
21.panel.filelist {
22	width: 50%;
23	min-width: 25em;
24}
25.panel.file {
26	width: 30%;
27	min-width: 15em;
28}
29
30ul.tabs > li {
31	.pull-left;
32}
33div.panel h2, div.panel h3 {
34  font-size: @baseFontSize;
35}
36ul.tabs > li > a,
37ul.tabs > li > strong,
38div.panel h2,
39div.panel h3 {
40  font-weight: normal;
41  padding-top: 8px;
42  padding-right: 12px;
43  padding-left: 12px;
44  margin-right: 2px;
45  line-height: 14px;
46  margin-left: 0px;
47}
48div.panel h2,
49ul.tabs > li > a,
50ul.tabs > li > strong {
51  display:block;
52  text-decoration: none;
53  padding-bottom: 8px;
54  line-height: @baseLineHeight;
55  .border-radius(4px 4px 0 0);
56  border-left: 1px solid @grayTab;
57  border-top: 1px solid @grayTab;
58  border-bottom: 1px solid transparent;
59  margin-bottom: -1px;
60  cursor: default;
61}
62ul.tabs > li > a {
63	border: 1px solid transparent;
64	&:hover {
65		border-color: @grayLighter @grayLighter @grayTab;
66		background-color: @grayLighter;
67	}
68}
69ul.tabs > li > strong {
70  background-color: @tbgcolor;
71  border-right: 1px solid @grayTab;
72  color: @gray;
73}
74div.panel h2 {
75  float: left;
76  color: @gray;
77  border-right: 1px solid @grayTab;
78  margin-top: 0px;
79}
80
81.ui-resizable {
82	position: relative;
83}
84#mediamanager__page .ui-resizable-e {
85    width: 6px;
86    right: 2px;
87    background: transparent url(images/resizecol.png) center center no-repeat;
88}
89#mediamanager__page .ui-resizable-e:hover {
90    background-color: @grayTab;
91}
92
93#mediamanager__page .panelHeader{
94  padding-top: 8px;
95  padding-right: 12px;
96  padding-left: 12px;
97  margin-right: 2px;
98  margin-left: 0px;
99    text-align: left;
100    min-height: 20px;
101    overflow: hidden;
102}
103#mediamanager__page .namespaces .panelHeader {
104	clear: both;
105}
106#mediamanager__page .panelContent {
107  padding-top: 8px;
108  padding-right: 12px;
109  padding-left: 12px;
110  margin-right: 0px;
111  margin-left: 0px;
112  overflow-y: auto;
113  overflow-x: hidden;
114  min-height: 400px;
115  position: relative;
116}
117
118//From dokuwiki/_media_fullscreen.css
119#mediamanager__page dd {
120    margin: 0;
121}
122
123#mediamanager__page .panelHeader h3 {
124    float: left;
125    font-weight: normal;
126    font-size: 1em;
127    padding: 0;
128    margin: 0 0 3px;
129}
130
131/*____________ namespaces panel ____________*/
132
133[dir=rtl] #mediamanager__page .namespaces {
134    text-align: right;
135}
136
137#mediamanager__page .namespaces ul {
138    margin-left: .2em;
139    margin-bottom: 0;
140    padding: 0;
141    list-style: none;
142}
143[dir=rtl] #mediamanager__page .namespaces ul {
144    margin-left: 0;
145    margin-right: .2em;
146}
147#mediamanager__page .namespaces ul ul {
148    margin-left: 1em;
149}
150[dir=rtl] #mediamanager__page .namespaces ul ul {
151    margin-left: 0;
152    margin-right: 1em;
153}
154#mediamanager__page .namespaces ul ul li {
155    margin: 0;
156}
157
158#mediamanager__page .namespaces ul .selected {
159    background-color: @btnBackgroundHighlight;
160    font-weight: bold;
161}
162
163
164/*____________ file list panel ____________*/
165
166/* file list header */
167
168#mediamanager__page .panelHeader form.options {
169    float: right;
170    margin-top: -3px;
171}
172
173#mediamanager__page .panelHeader ul {
174    list-style: none;
175    margin: 0;
176    padding: 0;
177}
178#mediamanager__page .panelHeader ul li {
179    color: @textColor;
180    float: left;
181    line-height: 1;
182    padding-left: 3px;
183}
184[dir=rtl] #mediamanager__page .panelHeader ul li {
185    margin-right: 0;
186    margin-left: .5em;
187}
188
189#mediamanager__page .panelHeader ul li.listType {
190    padding-left: 30px;
191    background: url('../../images/icon-list.png') 3px 1px no-repeat;
192}
193#mediamanager__page .panelHeader ul li.sortBy {
194    padding-left: 30px;
195    background: url('../../images/icon-sort.png') 3px 1px no-repeat;
196}
197
198#mediamanager__page .panelHeader form.options .ui-buttonset label{
199    font-size: 90%;
200    margin-right: -0.4em;
201}
202#mediamanager__page .panelHeader form.options .ui-buttonset .ui-button-text {
203    padding: .3em .5em;
204    line-height: 1;
205}
206
207/* file list content */
208
209#mediamanager__page .filelist ul {
210    padding: 0;
211    margin: 0;
212}
213[dir=rtl] #mediamanager__page .filelist ul.tabs {
214    margin-right: 10px;
215}
216
217#mediamanager__page .filelist .panelContent ul li:hover {
218    background-color: @btnBackground;
219}
220
221#mediamanager__page .filelist li dt a {
222    vertical-align: middle;
223    display: table-cell;
224    overflow: hidden;
225}
226* html #mediamanager__page .filelist .thumbs li dt a,
227*+html #mediamanager__page .filelist .thumbs li dt a {
228    display: block;
229}
230* html #mediamanager__page .filelist .rows li dt a,
231*+html #mediamanager__page .filelist .rows li dt a {
232    display: inline;
233}
234
235/* file list as thumbs */
236
237#mediamanager__page .filelist .thumbs li {
238    width: 100px;
239    min-height: 130px;
240    display: inline-block;
241    display: -moz-inline-stack;
242    /* the right margin should visually be 10px, but because of its inline-block nature the whitespace inbetween is about 4px more */
243    margin: 0 6px 10px 0;
244    background-color: @btnBackgroundHighlight;
245    color: @textColor;
246    padding: 5px;
247    vertical-align: top;
248    text-align: center;
249    position: relative;
250    line-height: 1.2;
251}
252[dir=rtl] #mediamanager__page .filelist .thumbs li {
253    margin-right: 0;
254    margin-left: 6px;
255}
256* html #mediamanager__page .filelist .thumbs li,
257*+html #mediamanager__page .filelist .thumbs li {
258    display: inline;
259    zoom: 1;
260}
261
262#mediamanager__page .filelist .thumbs li dt a {
263    width: 100px;
264    height: 90px;
265}
266
267#mediamanager__page .filelist .thumbs li dt a img {
268    max-width: 90px;
269    max-height: 90px;
270}
271
272#mediamanager__page .filelist .thumbs li .name,
273#mediamanager__page .filelist .thumbs li .size,
274#mediamanager__page .filelist .thumbs li .filesize,
275#mediamanager__page .filelist .thumbs li .date {
276    display: block;
277    overflow: hidden;
278    text-overflow: ellipsis;
279    width: 90px;
280    white-space: nowrap;
281}
282#mediamanager__page .filelist .thumbs li .name {
283    padding: 5px 0;
284    font-weight: bold;
285}
286#mediamanager__page .filelist .thumbs li .date {
287    font-style: italic;
288    white-space: normal;
289}
290
291/* file list as rows */
292
293#mediamanager__page .filelist .rows li {
294    list-style: none;
295    display: block;
296    position: relative;
297    max-height: 50px;
298    margin: 0;
299    margin-bottom: 3px;
300    background-color: @bodyBackground;
301    color: @textColor;
302    overflow: hidden;
303}
304
305#mediamanager__page .filelist .rows li:nth-child(2n+1) {
306    background-color: @btnBackgroundHighlight;
307}
308
309#mediamanager__page .filelist .rows li dt {
310    float: left;
311    width: 10%;
312    height: 40px;
313    text-align: center;
314}
315
316#mediamanager__page .filelist .rows li dt a {
317    width: 100px;
318    height: 40px;
319}
320
321#mediamanager__page .filelist .rows li dt a img {
322    max-width: 40px;
323    max-height: 40px;
324}
325
326#mediamanager__page .filelist .rows li .name,
327#mediamanager__page .filelist .rows li .size,
328#mediamanager__page .filelist .rows li .filesize,
329#mediamanager__page .filelist .rows li .date {
330    overflow: hidden;
331    text-overflow: ellipsis;
332    float: left;
333    margin-left: 1%;
334    white-space: nowrap;
335}
336
337#mediamanager__page .filelist .rows li .name {
338    width: 30%;
339    font-weight: bold;
340}
341#mediamanager__page .filelist .rows li .size,
342#mediamanager__page .filelist .rows li .filesize {
343    width: 15%;
344}
345#mediamanager__page .filelist .rows li .date {
346    width: 20%;
347    font-style: italic;
348    white-space: normal;
349}
350
351/* upload form */
352
353#mediamanager__page div.upload {
354    padding-bottom: 0.5em;
355}
356
357/*____________ file panel ____________*/
358
359#mediamanager__page .file ul.actions {
360    text-align: center;
361    margin: 0 0 5px;
362    padding: 0;
363    list-style: none;
364}
365#mediamanager__page .file ul.actions li {
366    display: inline;
367    margin: 0;
368}
369
370#mediamanager__page .file div.image {
371    margin-bottom: 5px;
372    text-align: center;
373}
374
375#mediamanager__page .file div.image img {
376    width: 100%;
377}
378
379#mediamanager__page .file dl {
380    margin-bottom: 0;
381}
382#mediamanager__page .file dl dt {
383    font-weight: bold;
384    display: block;
385    background-color: @btnBackground;
386}
387#mediamanager__page .file dl dd {
388    display: block;
389    background-color: @btnBackgroundHighlight;
390}
391
392
393/* file meta data edit form */
394
395#mediamanager__page form.meta div.row {
396    margin-bottom: 5px;
397}
398
399#mediamanager__page form.meta label span {
400    display: block;
401}
402
403#mediamanager__page form.meta input {
404    width: 50%;
405}
406
407#mediamanager__page form.meta input.button {
408    width: auto;
409}
410
411#mediamanager__page form.meta textarea.edit {
412    height: 6em;
413    width: 95%;
414    min-width: 95%;
415    max-width: 95%;
416}
417
418/* file revisions form */
419
420#mediamanager__page #page__revisions ul {
421    margin-left: 10px;
422    padding: 0;
423    list-style-type: none;
424}
425
426#mediamanager__page #page__revisions ul li div.li div {
427    font-size: 90%;
428    color: @headingsColor;
429    padding-left: 18px;
430}
431
432#mediamanager__page #page__revisions ul li div.li input {
433    position: relative;
434    top: 1px;
435}
436
437/* file diff view */
438
439#mediamanager__diff table {
440    table-layout: fixed;
441    border-width: 0;
442}
443
444#mediamanager__diff td,
445#mediamanager__diff th {
446    width: 48%;
447    margin: 0 5px 10px 0;
448    padding: 0;
449    vertical-align: top;
450    text-align: left;
451    border-color: @bodyBackground;
452}
453[dir=rtl] #mediamanager__diff td,
454[dir=rtl] #mediamanager__diff th {
455    text-align: right;
456}
457
458#mediamanager__diff th {
459    font-weight: normal;
460    background-color: @bodyBackground;
461    line-height: 1.2;
462}
463#mediamanager__diff th a {
464    font-weight: bold;
465}
466#mediamanager__diff th span {
467    font-size: 90%;
468}
469
470#mediamanager__diff dl dd strong{
471    background-color: @btnBackgroundHighlight;
472    color: @textColor;
473    font-weight: normal;
474}
475
476/* image diff views */
477
478#mediamanager__page .file form.diffView {
479    margin-bottom: 10px;
480    display: block;
481}
482
483#mediamanager__diff div.slider {
484    margin: 10px;
485    width: 95%;
486}
487
488#mediamanager__diff .imageDiff {
489    position: relative;
490}
491#mediamanager__diff .imageDiff .image2 {
492    position: absolute;
493    top: 0;
494    left: 0;
495}
496
497#mediamanager__diff .imageDiff.opacity .image2 {
498    opacity: 0.5;
499}
500
501#mediamanager__diff .imageDiff.portions .image2 {
502    border-right: 1px solid red;
503    overflow: hidden;
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
515/**
516 * This file provides the styles for the file uploader
517 * used in the media manager (both fullscreen and popup).
518 */
519
520.qq-uploader {
521    position: relative;
522    width: 100%;
523}
524
525.qq-uploader .error {
526    color: #f00;
527    background-color: #fff;
528}
529
530/* select file button */
531
532.qq-upload-button {
533    display: inline-block;
534    text-decoration: none;
535    font-size: 100%;
536    cursor: pointer;
537    margin: 1px 1px 5px;
538}
539
540* html .qq-upload-button,
541*+html .qq-upload-button {
542    display: inline;
543}
544
545.qq-upload-button-focus {
546    outline: 1px dotted;
547}
548
549/* drop area */
550
551.qq-upload-drop-area {
552    position: absolute;
553    top: 0;
554    left: 0;
555    width: 100%;
556    height: 100%;
557    min-height: 70px;
558    z-index: 2;
559    background: @btnBackgroundHighlight;
560    color: @textColor;
561    text-align: center;
562}
563
564.qq-upload-drop-area span {
565    display: block;
566    position: absolute;
567    top: 50%;
568    width: 100%;
569    margin-top: -8px;
570    font-size: 120%;
571}
572
573.qq-upload-drop-area-active {
574    background: @btnBackground;
575}
576
577/* list of files to upload */
578
579div.qq-uploader ul {
580    margin: 0;
581    padding: 0;
582    list-style: none;
583}
584
585.qq-uploader li {
586    margin: 0 0 5px;
587    color: @textColor;
588}
589
590.qq-uploader li span,
591.qq-uploader li input,
592.qq-uploader li a {
593    margin-right: 5px;
594}
595
596.qq-upload-file {
597    display: block;
598    font-weight: bold;
599}
600
601.qq-upload-spinner {
602    display: inline-block;
603    background: url("../../images/throbber.gif");
604    width: 15px;
605    height: 15px;
606    vertical-align: text-bottom;
607}
608
609.qq-upload-size,
610.qq-upload-cancel {
611    font-size: 85%;
612}
613
614.qq-upload-failed-text {
615    display: none;
616}
617.qq-upload-fail .qq-upload-failed-text {
618    display: inline;
619}
620
621.qq-action-container * {
622    vertical-align: middle;
623}
624.qq-overwrite-check input {
625    margin-left: 10px;
626}
627