Declare public file image class in pithos.css
[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 .gwt-MenuBar-vertical {
211         background: #D0E3ED;
212 }
213
214 .gwt-MenuBarPopup .menuPopupTopLeft {
215         background: none;
216         background-color: #D0E3ED;
217 }
218
219 .gwt-MenuBarPopup .menuPopupTopCenter {
220         background: none;
221         background-color: #D0E3ED;
222 }
223
224 .gwt-MenuBarPopup .menuPopupTopRight {
225         background: none;
226         background-color: #D0E3ED;
227 }
228
229 .gwt-MenuBarPopup .menuPopupMiddleLeft {
230         background: none;
231         background-color: #D0E3ED;
232 }
233
234 .gwt-MenuBarPopup .menuPopupMiddleRight {
235         background: none;
236         background-color: #D0E3ED;
237 }
238
239 .gwt-popuppanel {
240     border: 3px solid #D0E3ED;
241     padding: 3px;
242     background: #D0E3ED;
243     border-image: initial;
244 }
245
246 .gwt-MenuBar .gwt-MenuItem {
247         border-bottom: 1px solid #EFEFEF;
248 }
249
250 .gwt-MenuBar .gwt-MenuItem-selected {
251         background-color: #E1EFF6;
252 }
253
254 .gwt-MenuBarPopup .menuPopupBottomLeft {
255         background: none;
256         background-color: #D0E3ED;
257 }
258
259 .gwt-MenuBarPopup .menuPopupBottomCenter {
260         background: none;
261         background-color: #D0E3ED;
262 }
263
264 .gwt-MenuBarPopup .menuPopupBottomRight {
265         background: none;
266         background-color: #D0E3ED;
267 }
268
269 .pithos-sessionExpired {
270         width: 24em;
271         /* Restore the padding we remove when overriding the gwt-DialogBox style */
272         padding: 3px;
273 }
274
275 .pithos-statusbar {
276         background-color: #4085a5;
277         border: none;
278         font-size: 90%;
279         vertical-align: middle;
280         font-weight: normal;
281         height:119px;
282         color: white;
283 }
284
285 .pithos-FileListContainer {
286     padding-left: 10px;
287 }
288
289 .pithos-List {
290         cursor: default;
291         border-collapse: collapse;
292         /* prevents selecting text in table with shift and ctrl*/
293         -moz-user-select: none;
294 }
295
296 .pithos-errorMessage {
297         font-size: 90%;
298         background-color: #880000;
299         color: #fff;
300         cursor: pointer;
301 }
302
303 .pithos-errorMessage td {
304         font-size: 90%;
305 }
306
307 .pithos-warnMessage {
308         font-size: 90%;
309         background-color: #eeee99;
310         cursor: pointer;
311 }
312
313 .pithos-infoMessage {
314         font-size: 90%;
315         background-color: #ccffcc;
316         cursor: pointer;
317 }
318
319 .pithos-clearMessage {
320         font-size: 90%;
321         font-weight: bold;
322         text-decoration: none;
323         color: black;
324         padding-left: 5px;
325 }
326
327 .pithos-clearMessage:visited {
328         font-size: 90%;
329         font-weight: bold;
330         text-decoration: none;
331         color: black;
332 }
333
334 .pithos-readForAllNote {
335         width: 240px;
336         text-align: justify;
337         font-style: italic;
338         font-size: 12px;
339         padding-left: 4;
340 }
341
342 .pithos-treeHeader {
343         background-color: #74aec9;
344         height: 25px;
345     width: 100%;
346 }
347
348 .pithos-statistics {
349         color: white;
350         padding: 5px;
351 }
352
353 .pithos-splitPanel {
354         background: url(images/white50.png) transparent;
355         margin-bottom: 34px;
356 }
357
358 .pithos-splitPanel-noframe {
359         margin-bottom: 0;
360 }
361
362 /* Use the background color for the splitter. */
363 .gwt-HorizontalSplitPanel .hsplitter {
364         cursor: move;
365         border: 0px;
366         background: url(images/background.png) repeat-x;
367 }
368
369 .pithos-tag {
370         display:inline;
371 }
372
373 .pithos-uploadButton {
374         background: none;
375         background-color: #ff7f2a;
376     font-size: 120%;
377     text-align: center;
378     height: auto;
379     padding: 8px;
380     width: 146px;
381     border: none;
382 }
383
384 .pithos-uploadButton-loading {
385         background: url(images/ajax-loader.gif) no-repeat;
386         background-position: 110px 0px;
387         background-color: #ff7f2a;
388 }
389
390 .pithos-uploadButton:HOVER {
391     background-color: #f95;
392 }
393
394 .pithos-rightSide {
395     vertical-align: middle;
396     width: 100%;
397     padding-left: 7px;
398 }
399 .pithos-parentButton {
400     background: none;
401     background-color: #a1c8da;
402 }
403
404 .pithos-folderStatistics {
405     background-color: #a1c8da;
406     text-align: center;
407     color: white;
408     height: 32px;
409         padding: 5px 15px;
410         margin-right: 10px;
411         margin-left: 10px;
412 }
413
414 .grnet-sign {
415         color: #72ADC8;
416 }
417
418 .pithos-logo {
419         position: absolute;
420         top: 65px;
421 }
422
423 .pithos-header {
424         background: url(images/white50.png);
425         margin-top: 34;
426         height: 60px;
427 }
428
429 .pithos-header-noframe {
430         margin-top: 0;
431 }
432
433 /*.cellTreeWidget-selectedTree {
434     background-color: #BCD7E3;
435 }*/
436
437 .pithos-list thead th img {
438     top: 5px !important;
439 }
440
441 .effectPanel-inner {
442         background-color: #4085A5;
443         margin: 10px;
444 }
445
446 .clearfix {
447         display: block;
448         width: auto;
449         zoom: 1;
450 }
451
452 div#toolbar {
453         clear: both;
454         color: white;
455         float: right;
456 /*      position: absolute;
457         right: 15px;
458         top: 15px;*/
459 }
460
461 div#toolbar a {
462         display: block;
463         float: left;
464 }
465
466 .pithos-toolbarItem {
467         text-decoration: none;
468         font-size: 0.8em;
469         padding: 4px;
470         padding-right: 8px;
471         color: white;
472         margin-left: 5px;
473         background-repeat: no-repeat;
474         background-color: #A1C8DB;
475 }
476
477 .pithos-toolbarItem:HOVER {
478         background-color: #74aec9;
479 }
480
481
482 .pithos-toolbarItem span {
483         float: left;
484         padding-top: 2px;
485 }
486
487 .pithos-toolbarItem span.ico {
488         width: 16px;
489         height: 16px;
490         margin-right: 5px;
491         background-repeat: no-repeat;
492 /*      background-position: -36px 0;*/
493 }
494
495 #tools-button span.ico {
496         background-image: url(images/advancedsettings.png);
497 }
498
499 #refresh-button span.ico {
500         background-image: url(images/refresh.png);
501 }
502
503 #newFolder-button span.ico {
504         background-image: url(images/folder_new.png);
505 }
506
507 #shareFolder-button span.ico {
508         background-image: url(images/myshared22.png);
509 }
510
511 /*move background from inner to centerinner to wrap action buttons too*/
512 .dialogMiddleCenterInner.dialogContent  {
513     background: url(images/white50.png); 
514     margin: 7px;
515     padding: 15px;
516     /*border: 1px solid #aaa;*/
517     -moz-box-shadow: 0 0 1px 1px #888;
518     -webkit-box-shadow: 0 0 1px 1px #888;
519     box-shadow: 0 0 1px 1px #888;
520 }
521
522 .pithos-dialogbox .outer {
523     width: 600px;
524 }
525
526 /*remove background/padding from .inner*/
527 .pithos-dialogbox .inner {
528     background: none;
529     padding:0;
530     width: 100%;
531 }
532
533 /*button position within the overlay content*/
534 .dialogMiddleCenterInner .button {
535     margin-left: 2px;
536     border: none;
537     padding: 7px 20px;
538     margin-top: 10px;
539     float: right;
540     margin-right: 4px;
541 }
542
543 /* fix placement of overlay paragraphs */
544 .pithos-credentialstext {
545     padding: 0 0 10px 0;
546 }
547
548 /* overlay styles */
549 .pithos-dialogbox {
550     background-color: white;
551     border: 2px solid #444;
552     text-align: left;
553     -moz-box-shadow: 0 0 90px 5px #000;
554     -webkit-box-shadow: 0 0 90px 5px #000;
555     box-shadow: 0 0 90px 5px #000;
556         clip: inherit !important;
557 }
558
559 /* hide overlay dialogue unneeded side elements */
560 .dialogMiddleRight, .dialogBottomRight, .dialogTopRight,
561 .dialogMiddleLeft, .dialogBottomLeft, .dialogTopLeft,
562 .dialogBottomCenter {
563     display: none;
564 }
565
566 /* fix dialogbox caption padding and font-size */
567 .pithos-dialogbox .caption {
568     padding: 10px !important;
569     font-size: 1.1em;
570 }
571
572
573 /* form input styling */
574 .dialogMiddleCenterInner input {
575     border: 1px solid #aaa;
576     padding: 4px;
577 }
578
579 /* fix tag color */
580 a.pithos-tag {
581     color: #4085a5;
582 }
583
584 .pithos-invitationsLeft {
585     padding: 0 0 10px 0;
586         border-bottom: 1px solid #4085A5;
587 }
588
589 .pithos-leftInvitationsNumber {
590         background-color: #4085A5;
591         padding: 3px;
592         color: white;
593         font-weight: bold;
594 }
595
596 .pithos-sendInvitationsPanel {
597         margin-top: 10px;
598         border-right: 1px solid #4085A5;
599         padding-right: 5px;
600 }
601
602 .pithos-sendInvitationsTitle {
603         font-weight: bold;
604         color: #4085A5;
605         margin-right: 10px;
606 }
607
608 .pithos-addInvitationImg {
609         background-color: #4085A5;
610         padding: 5px;
611         cursor: pointer;
612 }
613
614 .pithos-invitationResponse {
615         background-color: green;
616         color: white;
617         padding: 5px;
618 }
619
620 .pithos-invitationResponseError {
621         background-color: #880000;
622         color: #fff;
623         padding: 5px;
624 }
625
626 .pithos-invitationResponse .user {
627         font-weight: bold;
628 }
629
630 .props-labels .eg {
631         font-weight: normal;
632         color: gray;
633 }
634
635 .pithos-invitationsSplitPanel {
636         width:100%;
637 }
638
639 .pithos-invitationDeleteImg {
640         cursor: pointer;
641 }
642
643 .pithos-invitationFormRow {
644         border-top: 1px solid gray;
645 }
646
647 .pithos-sendInvitationButton {
648     background: none;
649     background-color: #ff7f2a;
650     text-align: center;
651     height: auto;
652     padding: 8px;
653     border: none;
654     color: white;
655 }
656
657 .pithos-sentInvitationsPanel {
658         margin-top: 10px;
659         padding-left: 5px;
660         width: 100%;
661 }
662
663 .pithos-sentInvitationsTitle {
664         font-weight: bold;
665         color: #4085A5;
666 }
667
668 .pithos-sentInvitationsTable {
669         width: 100%;
670 }
671
672 .pithos-invitedEmail {
673         color: #ff7f2a;
674         font-weight: bold;
675 }
676
677 .pithos-invitedEmailBorder {
678         border-bottom: 1px solid #4085A5;
679 }
680
681 .pithos-resendInvitation {
682         cursor: pointer;
683 }
684
685 .pithos-pagerButton {
686         background: none;
687         background-color: transparent;
688         border: 1px solid gray;
689         color: gray;
690         padding: 0px 2px 0px 2px;
691         font-size: 80%;
692 }
693
694 .pithos-pagerButton:HOVER {
695         background-color: #4085A5;
696         color: white;
697 }
698
699 .pithos-pagerButtonCurrent {
700         background-color: #4085A5;
701         color: white;
702 }
703
704 .pithos-metaTitle {
705         font-weight: bold;
706 }
707
708 .pithos-addMetaImg {
709         background-image: url(images/plus.png);
710         background-color: #4085A5;
711         background-repeat: no-repeat;
712         background-position: center;
713         padding: 8px;
714         cursor: pointer;
715 }
716
717 .pithos-metaDeleteImg {
718         background: url(images/delete.png);
719         background-repeat: no-repeat;
720         background-position: center;
721         padding: 10px;
722         cursor: pointer;
723 }
724
725 .pithos-metaName {
726         width: 7em;
727 }
728
729 .pithos-metaValue {
730         width: 7em;
731 }
732
733 .pithos-versionList {
734         padding-right: 5px;
735 }
736
737
738 .glg5-e2bki {
739     background: url(images/share.png) no-repeat 5px 9px !important;
740 }