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