Fixed styling of plupload to match the rest of the ui
[pithos-web-client] / src / gr / grnet / pithos / web / public / pithos.css
1 /*
2  * Copyright 2011-2012 GRNET S.A. All rights reserved.
3  *
4  * Redistribution and use in source and binary forms, with or
5  * without modification, are permitted provided that the following
6  * conditions are met:
7  *
8  *   1. Redistributions of source code must retain the above
9  *      copyright notice, this list of conditions and the following
10  *      disclaimer.
11  *
12  *   2. Redistributions in binary form must reproduce the above
13  *      copyright notice, this list of conditions and the following
14  *      disclaimer in the documentation and/or other materials
15  *      provided with the distribution.
16  *
17  * THIS SOFTWARE IS PROVIDED BY GRNET S.A. ``AS IS'' AND ANY EXPRESS
18  * OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
19  * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
20  * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL GRNET S.A OR
21  * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
22  * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
23  * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF
24  * USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
25  * AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT
26  * LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN
27  * ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
28  * POSSIBILITY OF SUCH DAMAGE.
29  *
30  * The views and conclusions contained in the software and
31  * documentation are those of the authors and should not be
32  * interpreted as representing official policies, either expressed
33  * or implied, of GRNET S.A.
34  */
35 body {
36         color: black;
37         font: 13px Verdana, 'PT Sans', sans-serif;
38         margin: 8px;
39         margin-top: 3px;
40         background-color: transparent;
41 }
42
43 table td {
44         font: 13px Verdana, 'PT Sans', sans-serif;
45 }
46
47 .pithos-outer {
48         background: url(images/background.png) repeat-x;
49 }
50
51 a {
52         color: white;
53         text-decoration: none;
54 }
55
56 a:hover {
57         color: white;
58 }
59
60 a:visited {
61         color: white;
62 }
63
64 a.info {
65         position: relative; /*this is the key*/
66         z-index: 24;
67         color: black;
68         text-decoration: none
69 }
70
71 a.info:hover {
72         z-index: 25;
73         background-color: yellow;
74 }
75
76 a.info div {
77         display: none
78 }
79
80 a.info:hover span {
81         cursor: pointer;
82 }
83
84 /* The span will only display on :hover state. */
85 a.info:hover div {
86         display: block;
87         position: absolute;
88         bottom: 2em;
89         right: 1em;
90         width: 10em;
91         border: 1px solid lightblue;
92         background-color: #D0E4F6;
93         color: black;
94         text-align: center
95 }
96
97 .pithos-DialogBox .inner form {
98         margin: 0px;
99         clip: 
100 }
101
102 .pithos-dialogbox .inner form input,
103 .pithos-dialogbox .inner form textarea
104 {
105     border: 1px solid #aaa;
106     padding:4px;
107 }
108
109 .pithos-DialogBox .button {
110         background: none;
111         background-color: #4085A5;
112         color: white;
113         padding: 5px 6px;
114         white-space: nowrap;
115 }
116
117 .pithos-DialogBox .Caption {
118         color: white;
119         background-color: #4085a5;
120         padding: 20px;
121         border-bottom: 1px solid white;
122 }
123
124 .pithos-DialogBox .close {
125         background: url(images/close-popup.png) no-repeat;
126         cursor: pointer;
127         position: absolute;
128         width: 13px;
129         height: 13px;
130         top: 12px;
131         right: 7px;
132 }
133
134 .pithos-DialogBox .dialogMiddleCenter {
135         background: url(images/popup-bg.png) repeat-x;
136         background-color: white;
137         padding: 3px;
138 }
139
140 .pithos-DialogBox .dialogBottomCenter {
141         border-bottom: 5px solid #4085A5;
142 }
143
144 .gwt-DecoratedTabBar .gwt-TabBarItem-selected .tabTopLeft {
145   background-position: 0px -55px;
146 }
147 .gwt-DecoratedTabBar .gwt-TabBarItem-selected .tabTopRight {
148   background-position: -6px -55px;
149 }
150 .gwt-DecoratedTabBar .gwt-TabBarItem-selected .tabTopCenter {
151         background: #D0E4F6;
152 }
153 .gwt-DecoratedTabBar .gwt-TabBarItem-selected .tabMiddleLeft,
154 .gwt-DecoratedTabBar .gwt-TabBarItem-selected .tabMiddleCenter,
155 .gwt-DecoratedTabBar .gwt-TabBarItem-selected .tabMiddleRight {
156         background: #D0E4F6;
157         color:#d45500;
158 }
159 .pithos-TabPanelBottom {
160         border: none;
161 }
162
163 table.pithos-permList {
164         border-spacing: 3px;
165         border-collapse: collapse;
166
167 }
168
169 table.pithos-permList td {
170         padding: 5px 5px 5px 5px;
171         font-size:80%;
172 }
173
174 table.pithos-permList.props-labels {
175         font-weight: bold;
176 }
177
178 .props-labels {
179         font-size: 80%;
180         font-weight: bold;
181 }
182
183 .props-toplabels {
184         font-size: 80%;
185         font-weight: bold;
186         font-style: italic;
187 }
188
189 .props-values {
190         font-size: 80%;
191 }
192
193 .hidden-link {
194         text-decoration: none !important;
195         color: black !important;
196 }
197
198 .hidden-link:visited {
199         text-decoration: none !important;
200         color: black !important;
201 }
202
203 .pithos-topPanel {
204         background-color: #4085a5;
205         font-size: 75%;
206         height: 59px;
207         border-bottom: 1px solid white;
208 }
209
210 .pithos-usernameMenu {
211     cursor: pointer;
212 }
213
214 .pithos-usernameMenuItem {
215         background: url(images/down-arrow-light.png) no-repeat scroll right 8px transparent;
216         padding-right: 13px;
217         cursor: pointer;
218     color: white;
219 }
220
221 .pithos-usernameMenuItem:HOVER {
222         background: url(images/down-arrow-lighter.png) no-repeat scroll right 8px transparent;
223         background-color: #599EBD;
224 }
225
226 .pithos-usernameMenuItem:ACTIVE {
227         background: url(images/down-arrow-lighter.png) no-repeat scroll right 8px transparent;
228         background-color: #BED5E0;
229 }
230
231 .pithos-langMenuItem {
232         cursor: pointer;
233     color: #72ADC8;
234 }
235
236 .gwt-MenuBar-vertical {
237         background: #D0E3ED;
238 }
239
240 .gwt-MenuBarPopup .menuPopupTopLeft {
241         background: none;
242         background-color: #D0E3ED;
243 }
244
245 .gwt-MenuBarPopup .menuPopupTopCenter {
246         background: none;
247         background-color: #D0E3ED;
248 }
249
250 .gwt-MenuBarPopup .menuPopupTopRight {
251         background: none;
252         background-color: #D0E3ED;
253 }
254
255 .gwt-MenuBarPopup .menuPopupMiddleLeft {
256         background: none;
257         background-color: #D0E3ED;
258 }
259
260 .gwt-MenuBarPopup .menuPopupMiddleRight {
261         background: none;
262         background-color: #D0E3ED;
263 }
264
265 .pithos-userItemMenu {
266         background-color: #D0E3ED;
267 }
268
269 .gwt-popuppanel {
270     border: 3px solid #D0E3ED;
271     padding: 3px;
272     background: #D0E3ED;
273     border-image: initial;
274 }
275
276 .gwt-MenuBar .gwt-MenuItem {
277         border-bottom: 1px solid #EFEFEF;
278 }
279
280 .gwt-MenuBar .gwt-MenuItem-selected {
281         background-color: #E1EFF6;
282 }
283
284 .gwt-MenuBarPopup .menuPopupBottomLeft {
285         background: none;
286         background-color: #D0E3ED;
287 }
288
289 .gwt-MenuBarPopup .menuPopupBottomCenter {
290         background: none;
291         background-color: #D0E3ED;
292 }
293
294 .gwt-MenuBarPopup .menuPopupBottomRight {
295         background: none;
296         background-color: #D0E3ED;
297 }
298
299 .pithos-sessionExpired {
300         width: 24em;
301         /* Restore the padding we remove when overriding the gwt-DialogBox style */
302         padding: 3px;
303 }
304
305 .pithos-statusbar {
306         background-color: #4085a5;
307         border: none;
308         font-size: 90%;
309         vertical-align: middle;
310         font-weight: normal;
311         height:119px;
312         color: white;
313 }
314
315 .pithos-FileListContainer {
316     padding-left: 10px;
317 }
318
319 .pithos-List {
320         cursor: default;
321         border-collapse: collapse;
322         /* prevents selecting text in table with shift and ctrl*/
323         -moz-user-select: none;
324 }
325
326 .pithos-errorMessage {
327         font-size: 90%;
328         background-color: #880000;
329         color: #fff;
330         cursor: pointer;
331 }
332
333 .pithos-errorMessage td {
334         font-size: 90%;
335 }
336
337 .pithos-warnMessage {
338         font-size: 90%;
339         background-color: #eeee99;
340         cursor: pointer;
341 }
342
343 .pithos-infoMessage {
344         font-size: 90%;
345         background-color: #ccffcc;
346         cursor: pointer;
347 }
348
349 .pithos-clearMessage {
350         font-size: 90%;
351         font-weight: bold;
352         text-decoration: none;
353         color: black;
354         padding-left: 5px;
355 }
356
357 .pithos-clearMessage:visited {
358         font-size: 90%;
359         font-weight: bold;
360         text-decoration: none;
361         color: black;
362 }
363
364 .pithos-readForAllNote {
365         width: 240px;
366         text-align: justify;
367         font-style: italic;
368         font-size: 12px;
369         padding-left: 4;
370 }
371
372 .pithos-treeHeader {
373         background-color: #74aec9;
374         height: 25px;
375     width: 100%;
376 }
377
378 .pithos-statistics {
379         color: white;
380         padding: 5px;
381 }
382
383 .pithos-splitPanel {
384         background: url(images/white50.png) transparent;
385         margin-bottom: 34px;
386 }
387
388 .pithos-splitPanel-noframe {
389         margin-bottom: 0;
390 }
391
392 /* Use the background color for the splitter. */
393 .gwt-HorizontalSplitPanel .hsplitter {
394         cursor: move;
395         border: 0px;
396         background: url(images/background.png) repeat-x;
397 }
398
399 .pithos-tag {
400         display:inline;
401 }
402
403 .pithos-uploadButton {
404     background: none;
405     background-color: #ff7f2a;
406     font-size: 120%;
407     text-align: center;
408     height: auto;
409     padding: 8px;
410     width: 146px;
411     border: none;
412 }
413
414 .pithos-uploadButton:HOVER {
415     background-color: #f95;
416 }
417
418 .pithos-rightSide {
419     vertical-align: middle;
420     width: 100%;
421     padding-left: 7px;
422 }
423 .pithos-parentButton {
424     background: none;
425     background-color: #a1c8da;
426 }
427
428 .pithos-folderStatistics {
429     background-color: #a1c8da;
430     text-align: center;
431     color: white;
432     height: 32px;
433         padding: 5px 15px;
434         margin-right: 10px;
435         margin-left: 10px;
436 }
437
438 .grnet-sign {
439         color: #72ADC8;
440 }
441
442 .pithos-logo {
443         position: absolute;
444         top: 29px;
445 }
446
447 .pithos-header {
448         background: url(images/white50.png);
449         margin-top: 34;
450         height: 60px;
451 }
452
453 .pithos-header-noframe {
454         margin-top: 0;
455 }
456
457 /*.cellTreeWidget-selectedTree {
458     background-color: #BCD7E3;
459 }*/
460
461 .pithos-list thead th img {
462     top: 5px !important;
463 }
464
465 .effectPanel-inner {
466         background-color: #4085A5;
467         margin: 10px;
468 }
469
470 .clearfix {
471         display: block;
472         width: auto;
473         zoom: 1;
474 }
475
476 div#toolbar {
477         clear: both;
478         color: white;
479         float: right;
480 /*      position: absolute;
481         right: 15px;
482         top: 15px;*/
483 }
484
485 div#toolbar a {
486         display: block;
487         float: left;
488 }
489
490 .pithos-toolbarItem {
491         text-decoration: none;
492         font-size: 0.8em;
493         padding: 4px;
494         padding-right: 8px;
495         color: white;
496         margin-left: 5px;
497         background-repeat: no-repeat;
498         background-color: #A1C8DB;
499 }
500
501 .pithos-toolbarItem:HOVER {
502         background-color: #74aec9;
503 }
504
505
506 .pithos-toolbarItem span {
507         float: left;
508         padding-top: 2px;
509 }
510
511 .pithos-toolbarItem span.ico {
512         width: 16px;
513         height: 16px;
514         margin-right: 5px;
515         background-repeat: no-repeat;
516 /*      background-position: -36px 0;*/
517 }
518
519 #tools-button span.ico {
520         background-image: url(images/advancedsettings.png);
521 }
522
523 #refresh-button span.ico {
524         background-image: url(images/refresh.png);
525 }
526
527 #newFolder-button span.ico {
528         background-image: url(images/folder_new.png);
529 }
530
531 #shareFolder-button span.ico {
532         background-image: url(images/myshared22.png);
533 }
534
535 /*move background from inner to centerinner to wrap action buttons too*/
536 .dialogMiddleCenterInner.dialogContent  {
537     background: url(images/white50.png); 
538     margin: 7px;
539     padding: 15px;
540     /*border: 1px solid #aaa;*/
541     -moz-box-shadow: 0 0 1px 1px #888;
542     -webkit-box-shadow: 0 0 1px 1px #888;
543     box-shadow: 0 0 1px 1px #888;
544 }
545
546 .pithos-dialogbox .outer {
547     width: 600px;
548 }
549
550 /*remove background/padding from .inner*/
551 .pithos-dialogbox .inner {
552     background: none;
553     padding:0;
554     width: 100%;
555 }
556
557 /*button position within the overlay content*/
558 .dialogMiddleCenterInner .button {
559     margin-left: 2px;
560     border: none;
561     padding: 7px 20px;
562     margin-top: 10px;
563     float: right;
564     margin-right: 4px;
565 }
566
567 /* fix placement of overlay paragraphs */
568 .pithos-credentialstext {
569     padding: 0 0 10px 0;
570 }
571
572 /* overlay styles */
573 .pithos-dialogbox {
574     background-color: white;
575     border: 2px solid #444;
576     text-align: left;
577     -moz-box-shadow: 0 0 90px 5px #000;
578     -webkit-box-shadow: 0 0 90px 5px #000;
579     box-shadow: 0 0 90px 5px #000;
580         clip: inherit !important;
581 }
582
583 /* hide overlay dialogue unneeded side elements */
584 .dialogMiddleRight, .dialogBottomRight, .dialogTopRight,
585 .dialogMiddleLeft, .dialogBottomLeft, .dialogTopLeft,
586 .dialogBottomCenter {
587     display: none;
588 }
589
590 /* fix dialogbox caption padding and font-size */
591 .pithos-dialogbox .caption {
592     padding: 10px !important;
593     font-size: 1.1em;
594 }
595
596
597 /* form input styling */
598 .dialogMiddleCenterInner input {
599     border: 1px solid #aaa;
600     padding: 4px;
601 }
602
603 /* fix tag color */
604 a.pithos-tag {
605     color: #4085a5;
606 }
607
608 .pithos-invitationsLeft {
609     padding: 0 0 10px 0;
610         border-bottom: 1px solid #4085A5;
611 }
612
613 .pithos-leftInvitationsNumber {
614         background-color: #4085A5;
615         padding: 3px;
616         color: white;
617         font-weight: bold;
618 }
619
620 .pithos-sendInvitationsPanel {
621         margin-top: 10px;
622         border-right: 1px solid #4085A5;
623         padding-right: 5px;
624 }
625
626 .pithos-sendInvitationsTitle {
627         font-weight: bold;
628         color: #4085A5;
629         margin-right: 10px;
630 }
631
632 .pithos-addInvitationImg {
633         background-color: #4085A5;
634         padding: 5px;
635         cursor: pointer;
636 }
637
638 .pithos-invitationResponse {
639         background-color: green;
640         color: white;
641         padding: 5px;
642 }
643
644 .pithos-invitationResponseError {
645         background-color: #880000;
646         color: #fff;
647         padding: 5px;
648 }
649
650 .pithos-invitationResponse .user {
651         font-weight: bold;
652 }
653
654 .props-labels .eg {
655         font-weight: normal;
656         color: gray;
657 }
658
659 .pithos-invitationsSplitPanel {
660         width:100%;
661 }
662
663 .pithos-invitationDeleteImg {
664         cursor: pointer;
665 }
666
667 .pithos-invitationFormRow {
668         border-top: 1px solid gray;
669 }
670
671 .pithos-sendInvitationButton {
672     background: none;
673     background-color: #ff7f2a;
674     text-align: center;
675     height: auto;
676     padding: 8px;
677     border: none;
678     color: white;
679 }
680
681 .pithos-sentInvitationsPanel {
682         margin-top: 10px;
683         padding-left: 5px;
684         width: 100%;
685 }
686
687 .pithos-sentInvitationsTitle {
688         font-weight: bold;
689         color: #4085A5;
690 }
691
692 .pithos-sentInvitationsTable {
693         width: 100%;
694 }
695
696 .pithos-invitedEmail {
697         color: #ff7f2a;
698         font-weight: bold;
699 }
700
701 .pithos-invitedEmailBorder {
702         border-bottom: 1px solid #4085A5;
703 }
704
705 .pithos-resendInvitation {
706         cursor: pointer;
707 }
708
709 .pithos-pagerButton {
710         background: none;
711         background-color: transparent;
712         border: 1px solid gray;
713         color: gray;
714         padding: 0px 2px 0px 2px;
715         font-size: 80%;
716 }
717
718 .pithos-pagerButton:HOVER {
719         background-color: #4085A5;
720         color: white;
721 }
722
723 .pithos-pagerButtonCurrent {
724         background-color: #4085A5;
725         color: white;
726 }
727
728 .pithos-metaTitle {
729         font-weight: bold;
730 }
731
732 .pithos-addMetaImg {
733         background-color: #4085A5;
734         padding: 5px;
735         cursor: pointer;
736 }
737
738 .pithos-metaDeleteImg {
739         cursor: pointer;
740 }
741
742 .pithos-metaName {
743         width: 7em;
744 }
745
746 .pithos-metaValue {
747         width: 7em;
748 }