Mercurial > libervia-web

comparison browser/public/libervia.css @ 1124:28e3eb3bb217

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
files reorganisation and installation rework: - files have been reorganised to follow other SàT projects and usual Python organisation (no more "/src" directory) - VERSION file is now used, as for other SàT projects - replace the overcomplicated setup.py be a more sane one. Pyjamas part is not compiled anymore by setup.py, it must be done separatly - removed check for data_dir if it's empty - installation tested working in virtual env - libervia launching script is now in bin/libervia
author Goffi <goffi@goffi.org>
date Sat, 25 Aug 2018 17:59:48 +0200
parents src/browser/public/libervia.css@2ef71ec07d87
children
comparison
equal deleted inserted replaced
1123:63a4b8fe9782 1124:28e3eb3bb217
1 /*
2 Libervia: a Salut à Toi frontend
3 Copyright (C) 2011-2016 Jérôme Poisson <goffi@goffi.org>
4 Copyright (C) 2011 Adrien Vigneron <adrienvigneron@mailoo.org>
5 Copyright (C) 2013-2016 Adrien Cossa <souliane@mailoo.org>
6
7 This program is free software: you can redistribute it and/or modify
8 it under the terms of the GNU Affero General Public License as published by
9 the Free Software Foundation, either version 3 of the License, or
10 (at your option) any later version.
11
12 This program is distributed in the hope that it will be useful,
13 but WITHOUT ANY WARRANTY; without even the implied warranty of
14 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
15 GNU Affero General Public License for more details.
16
17 You should have received a copy of the GNU Affero General Public License
18 along with this program. If not, see <http://www.gnu.org/licenses/>.
19 */
20
21
22 /*
23 * CSS Reset: see http://pyjs.org/wiki/csshellandhowtodealwithit/
24 */
25
26 /* reset/default styles */
27
28 html, body, div, span, applet, object, iframe,
29 p, blockquote, pre,
30 a, abbr, acronym, address, big, cite, code,
31 del, dfn, em, font, img, ins, kbd, q, s, samp,
32 small, strike, strong, sub, sup, tt, var,
33 b, u, i, center, dl, dt, dd, li,
34 fieldset, form, label, legend, table, caption,
35 tbody, tfoot, thead, tr, th, td {
36 margin: 0;
37 padding: 0;
38 border: 0;
39 outline: 0;
40 font-size: 100%;
41 vertical-align: baseline;
42 background: transparent;
43 color: #444;
44 }
45
46 /* styles for displaying rich text - START */
47 h1, h2, h3, h4, h5, h6 {
48 margin: 0;
49 padding: 0;
50 border: 0;
51 outline: 0;
52 vertical-align: baseline;
53 background: transparent;
54 color: #444;
55 border-bottom: 1px solid rgb(170, 170, 170);
56 margin-bottom: 0.6em;
57 }
58 ol, ul {
59 margin: 0;
60 border: 0;
61 outline: 0;
62 font-size: 100%;
63 vertical-align: baseline;
64 background: transparent;
65 color: #444;
66 }
67 a:link {
68 color: blue;
69 }
70 .bubble p {
71 margin: 0.4em 0em;
72 }
73 .bubble img {
74 /* /!\ setting a max-width percentage value affects the toolbar icons */
75 max-width: 600px;
76 }
77
78 /* styles for displaying rich text - END */
79
80 blockquote, q { quotes: none; }
81
82 blockquote:before, blockquote:after,
83 q:before, q:after {
84 content: '';
85 content: none;
86 }
87
88 :focus { outline: 0; }
89 ins { text-decoration: none; }
90 del { text-decoration: line-through; }
91
92 table {
93 border-collapse: collapse;
94 border-spacing: 0;
95 }
96
97 /* pyjamas iframe hide */
98 iframe { position: absolute; }
99
100
101 html, body {
102 width: 100%;
103 height: 100%;
104 min-height: 100%;
105
106 }
107
108 body {
109 line-height: 1em;
110 font-size: 1em;
111 overflow: auto;
112
113 }
114
115 .scrollpanel {
116 margin-bottom: -10000px;
117
118 }
119
120 .iescrollpanelfix {
121 position: relative;
122 top: 100%;
123 margin-bottom: -10000px;
124
125 }
126
127 /* undo part of the above (non-IE) */
128 html>body .iescrollpanelfix { position: static; }
129
130 /* CSS Reset END */
131
132 body {
133 background-color: #fff;
134 font: normal 0.8em/1.5em Arial, Helvetica, sans-serif;
135 }
136
137 .header {
138 background-color: #eee;
139 border-bottom: 1px solid #ddd;
140 width: 100%;
141 height: 64px;
142 }
143
144 .mainPanel {
145 width: 100%;
146 height: 100%;
147 }
148
149 .mainMenuBar {
150 background-color: #222;
151 background: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#222222));
152 background: -webkit-linear-gradient(top, #444444, #222222);
153 background: linear-gradient(to bottom, #444444, #222222);
154 height: 28px;
155 padding: 5px 5px 0 5px;
156 border: 1px solid #ddd;
157 border-radius: 0 0 1em 1em;
158 line-height: 100%;
159 -webkit-box-shadow: 0px 1px 4px #000;
160 box-shadow: 0px 1px 4px #000;
161 display: inline-block;
162 position: absolute;
163 left: 20px;
164 right: 20px;
165 width: auto;
166 }
167
168 .mainMenuBar .gwt-MenuItem {
169 padding: 3px 15px;
170 text-decoration: none;
171 font-weight: bold;
172 height: 100%;
173 color: #e7e5e5;
174 border-radius: 1em 1em 1em 1em;
175 text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
176 -webkit-transition: color 0.2s linear;
177 transition: color 0.2s linear;
178 }
179
180 .mainMenuBar .gwt-MenuItem-selected {
181 background-color: #eee;
182 background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#aaa));
183 background: -webkit-linear-gradient(top, #eee, #aaa);
184 background: linear-gradient(to bottom, #eee, #aaa);
185 color: #444;
186 text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
187 }
188
189 /* Menu bars and items */
190
191 .gwt-MenuBar {
192 /* Common to all menu bars */
193 margin: 0;
194 }
195
196 .gwt-MenuBar table {
197 /* Common to all tables within a menu bar */
198 width: 100%;
199 display: inline-table;
200 }
201
202 .gwt-MenuBar-horizontal {
203 /* Specific to horizontal menu bars*/
204 }
205
206 .gwt-MenuBar-vertical {
207 /* Specific to vertical menu bars*/
208 background-color: #fff;
209 background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc));
210 background: -webkit-linear-gradient(top, #fff, #ccc);
211 background: linear-gradient(to bottom, #fff, #ccc);
212 height: 100%;
213 min-width: 148px;
214 padding: 0;
215 border: solid 1px #aaa;
216 border-radius: 0 0 10px 10px;
217 -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
218 box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
219 }
220
221 .gwt-MenuItem img {
222 /* Common to all images within a menu item */
223 padding-right: 2px;
224 }
225
226 .gwt-MenuBar .gwt-MenuItem {
227 /* Common to items of all menu bars */
228 }
229
230 .gwt-MenuBar-horizontal .gwt-MenuItem {
231 /* Specific to items of horizontal menu bars*/
232 }
233
234 .gwt-MenuBar-vertical .gwt-MenuItem {
235 /* Specific to items of vertical menu bars*/
236 padding: 8px 15px;
237 }
238
239 .gwt-MenuBar .gwt-MenuItem-selected {
240 /* Common to all selected items */
241 cursor: pointer;
242 }
243
244 .gwt-MenuBar-horizontal .gwt-MenuItem-selected {
245 /* Specific to selected items of horizontal menu bars */
246 }
247
248 .gwt-MenuBar-vertical .gwt-MenuItem-selected {
249 /* Specific to selected items of vertical menu bars */
250 background: #cf2828 !important;
251 background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#981a1a)) !important;
252 background: -webkit-linear-gradient(top, #cf2828, #981a1a) !important;
253 background: linear-gradient(to bottom, #cf2828, #981a1a) !important;
254 color: #fff !important;
255 border-radius: 0 0 0 0;
256 text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
257 -webkit-transition: color 0.2s linear;
258 transition: color 0.2s linear;
259 }
260
261 .gwt-MenuBar-vertical tr:last-child td {
262 /* Specific to last items of vertical menus */
263 border-radius: 0 0 9px 9px !important;
264 }
265
266 .menuLastPopup .gwt-MenuBar-vertical {
267 /* Specific to the last popup menu of the main menu bar */
268 border-top-right-radius: 9px 9px;
269 }
270
271 .menuLastPopup .gwt-MenuBar-vertical tr:first-child td {
272 /* Specific to the first item of the last popup menu of the main menu bar */
273 border-radius: 0px 9px 0px 0px !important;
274 }
275
276 .menuSeparator {
277 width: 100%;
278 }
279
280 .menuSeparator.gwt-MenuItem-selected {
281 border: 0;
282 background: inherit;
283 cursor: default;
284 }
285
286 .menuFlattenedCategory {
287 font-weight: bold;
288 font-style: italic;
289 padding: 8px 5px;
290 cursor: default;
291 }
292
293 .menuFlattenedCategory.gwt-MenuItem-selected {
294 /* !important are needed for the style to not be overwritten when the item is selected */
295 background-color: inherit !important;
296 background: inherit !important;
297 color: #444 !important;
298 cursor: default !important;
299 }
300
301 /* Misc Pyjamas stuff */
302
303 .gwt-DialogBox {
304 padding: 10px;
305 border: 1px solid #aaa;
306 background-color: #fff;
307 background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc));
308 background: -webkit-linear-gradient(top, #fff, #ccc);
309 background: linear-gradient(to bottom, #fff, #ccc);
310 border-radius: 9px 9px 9px 9px;
311 -webkit-box-shadow: 0px 1px 4px #000;
312 box-shadow: 0px 1px 4px #000;
313 }
314
315 .gwt-DialogBox .Caption {
316 height: 20px;
317 font-size: 1.3em !important;
318 background-color: #cf2828;
319 background: #cf2828 !important;
320 background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#981a1a)) !important;
321 background: -webkit-linear-gradient(top, #cf2828, #981a1a) !important;
322 background: linear-gradient(to bottom, #cf2828, #981a1a) !important;
323 color: #fff;
324 padding: 3px 3px 4px 3px;
325 margin: -10px;
326 margin-bottom: 5px;
327 font-weight: bold;
328 cursor: default;
329 text-align: center;
330 border-radius: 7px 7px 0 0;
331 }
332
333 /*DIALOG: button, listbox, textbox, label */
334
335 .gwt-DialogBox .gwt-button {
336 background-color: #ccc;
337 border-radius: 5px 5px 5px 5px;
338 -webkit-box-shadow: 0px 1px 4px #000;
339 box-shadow: 0px 1px 4px #000;
340 background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#222));
341 background: -webkit-linear-gradient(top, #444, #222);
342 background: linear-gradient(to bottom, #444, #222);
343 text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
344 padding: 3px 5px 3px 5px;
345 margin: 10px 5px 10px 5px;
346 font-weight: bold;
347 font-size: 1em;
348 border: none;
349 -webkit-transition: color 0.2s linear;
350 transition: color 0.2s linear;
351 }
352
353 .gwt-DialogBox .gwt-button:enabled {
354 cursor: pointer;
355 color: #fff;
356 }
357
358 .gwt-DialogBox .gwt-button:enabled:hover {
359 background-color: #cf2828;
360 background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#981a1a));
361 background: -webkit-linear-gradient(top, #cf2828, #981a1a);
362 background: linear-gradient(to bottom, #cf2828, #981a1a);
363 color: #fff;
364 text-shadow: 1px 1px 1px rgba(0,0,0,0.25);
365 }
366
367 .gwt-DialogBox .gwt-TextBox, .gwt-DialogBox .gwt-PasswordTextBox {
368 background-color: #fff;
369 border-radius: 5px 5px 5px 5px;
370 -webkit-box-shadow:inset 0px 1px 4px #000;
371 box-shadow:inset 0px 1px 4px #000;
372 padding: 3px 5px 3px 5px;
373 margin: 10px 5px 10px 5px;
374 color: #444;
375 font-size: 1em;
376 border: none;
377 }
378
379 .gwt-DialogBox .gwt-TextArea {
380 background-color: #fff;
381 border-radius: 5px 5px 5px 5px;
382 -webkit-box-shadow:inset 0px 1px 4px #000;
383 box-shadow:inset 0px 1px 4px #000;
384 padding: 3px 5px 3px 5px;
385 margin: 0px 5px 10px 5px;
386 color: #444;
387 border: none;
388 vertical-align: text-top;
389 }
390
391 .gwt-DialogBox .gwt-ListBox {
392 overflow: auto;
393 width: 100%;
394 background-color: #fff;
395 border-radius: 5px 5px 5px 5px;
396 -webkit-box-shadow:inset 0px 1px 4px #000;
397 box-shadow:inset 0px 1px 4px #000;
398 padding: 3px 5px 3px 5px;
399 margin: 9px 5px 9px 5px;
400 color: #444;
401 font-size: 1em;
402 border: none;
403 }
404
405 .gwt-DialogBox .gwt-Label {
406 margin-top: 13px;
407 }
408
409 .gwt-DialogBox .gwt-CheckBox {
410 margin-top: 12px;
411 display: block;
412 }
413
414 .gwt-DialogBox .gwt-RadioButton {
415 margin-top: 13px;
416 display: block;
417 }
418
419 .gwt-DialogBox .gwt-RadioButton label {
420 vertical-align: bottom;
421 }
422
423 .gwt-DialogBox tr td:first-child {
424 vertical-align: top !important;
425 }
426
427 /* Custom Dialogs */
428
429 .formWarning { /* used when a form is not valid and must be corrected before submission */
430 font-weight: bold;
431 color: lightcoral !important;
432 height: 34px; /* a higher value will screw up the display of registration tab, check before you modify */
433 text-align: center;
434 }
435
436 .formInfo { /* used when a form is being edited and we want to tell something to the user */
437 color: lightcyan !important;
438 }
439
440 .contactsChooser {
441 text-align: center;
442 margin:auto;
443 cursor: pointer;
444 }
445
446 .infoDialogBody {
447 width: 100%;
448 height: 100%
449 }
450 /* Contact List */
451
452 div.contactList {
453 width: 100%;
454 margin-top: 9px;
455 }
456
457 .contactTitle {
458 color: #cf2828;
459 font-size: 1.7em;
460 text-indent: 5px;
461 text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
462 width: 200px;
463 height: 30px;
464 }
465
466 .contactsSwitch {
467 /* Button used to switch contacts panel */
468 background: none;
469 border: 0;
470 padding: 0;
471 font-size: large;
472 margin-top: 9px;
473 }
474
475 .groupPanel {
476 width: 100%;
477 }
478
479 .groupPanel tr:first-child td {
480 padding-top: 10px;
481 }
482
483 .group {
484 curser: pointer;
485 padding: 2px 15px;
486 margin: 5px;
487 display: inline-block;
488 text-decoration: none;
489 font-weight: bold;
490 color: #e7e5e5;
491 text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
492 border-radius: 1em 1em 1em 1em;
493 background-color: #eee;
494 background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#aaa));
495 background: -webkit-linear-gradient(top, #eee, #aaa);
496 background: linear-gradient(to bottom, #eee, #aaa);
497 color: #444;
498 text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
499 -webkit-box-shadow: 0px 1px 1px #000;
500 box-shadow: 0px 1px 1px #000;
501 }
502
503 div.group:hover {
504 color: #fff;
505 text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
506 background-color: #cf2828;
507 background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#981a1a));
508 background: -webkit-linear-gradient(top, #cf2828, #981a1a);
509 background: linear-gradient(to bottom, #cf2828, #981a1a);
510 -webkit-transition: color 0.1s linear;
511 transition: color 0.1s linear;
512 }
513
514 .contactBox {
515 cursor: pointer;
516 width: 100%;
517 margin: 5px;
518 border-radius: 5px;
519 background: #EDEDED;
520 }
521
522 .contactBox img, .muc_contact img {
523 width: 32px;
524 height: 32px;
525 border-radius: 5px;
526 margin: 5px 5px 0px 10px;
527 }
528
529 .contactBox .widgetHeader_buttonGroup {
530 float: left;
531 }
532
533 .contactBox .widgetHeader_buttonGroup img {
534 width: 32px;
535 height: 32px;
536 border-radius: 5px;
537 border: 1px solid #ededed;
538 padding: 0px 0px 0px 0px;
539 background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#aaa));
540 background: -webkit-linear-gradient(top, #eee, #aaa);
541 background: linear-gradient(to bottom, #eee, #aaa);
542 }
543
544 .contactBox .widgetHeader_buttonGroup img:hover {
545 border: 1px solid #cf2828;
546 }
547
548 .contactBox table {
549 width: 100%;
550 }
551
552 .contactLabel {
553 font-size: 1em;
554 margin-top: 3px;
555 padding: 3px 10px 3px 10px;
556 }
557
558 .contact-menu-selected {
559 font-size: 1em;
560 margin-top: 3px;
561 padding: 3px 10px 3px 10px;
562 border-radius: 5px;
563 background-color: rgb(175, 175, 175);
564 }
565
566 .gwt-ScrollPanel {
567 padding-right: 15px; /* avoid systematic horizontal scroll when only the vertical one is needed */
568 }
569
570 .xmlui-JidsListWidget {
571 padding-right: 20px; /* avoid systematic horizontal scroll when only the vertical one is needed */
572 height: 300px;
573 }
574
575 /* Contacts in MUC */
576
577 .muc_contact {
578 border-radius: 5px;
579 background: #EDEDED;
580 margin: 2px;
581 width: 100%;
582 }
583
584 /* START - contact presence status */
585 .contactLabel-connected {
586 color: #3c7e0c;
587 font-weight: bold;
588 }
589 .contactLabel-unavailable {
590 }
591 .contactLabel-chat {
592 color: #3c7e0c;
593 font-weight: bold;
594 }
595 .contactLabel-away {
596 color: brown;
597 font-weight: bold;
598 }
599 .contactLabel-dnd {
600 color: red;
601 font-weight: bold;
602 }
603 .contactLabel-xa {
604 color: red;
605 font-weight: bold;
606 }
607 /* END - contact presence status */
608
609 .selected {
610 color: #fff;
611 background-color: #cf2828;
612 background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#981a1a));
613 background: -webkit-linear-gradient(top, #cf2828, #981a1a);
614 background: linear-gradient(to bottom, #cf2828, #981a1a);
615 border-radius: 1em 1em 1em 1em;
616 -webkit-transition: color 0.2s linear;
617 transition: color 0.2s linear;
618 }
619
620 .messageBox {
621 width: 100%;
622 padding: 5px;
623 border: 1px solid #bbb;
624 color: #444;
625 background: #fff url('media/libervia/unibox_2.png') right bottom no-repeat;
626 -webkit-box-shadow:inset 0 0 10px #ddd;
627 box-shadow:inset 0 0 10px #ddd;
628 border-radius: 0px 0px 10px 10px;
629 height: 28px;
630 margin: 0px;
631 }
632
633 .presenceStatusPanel {
634 margin: auto;
635 text-align: center;
636 padding: 5px 0px;
637 text-shadow: 0 -1px 1px rgba(255,255,255,0.25);
638 font-size: 1.2em;
639 background-color: #eee;
640 font-style: italic;
641 font-weight: bold;
642 color: #666;
643 cursor: pointer;
644 }
645
646 .presence-button {
647 font-size: x-large;
648 padding-right: 5px;
649 cursor: pointer;
650 }
651
652 /* RegisterBox */
653
654 .registerPanel_main button {
655 margin: 0;
656 padding: 0;
657 border: 0;
658 }
659
660 .registerPanel_main div, .registerPanel_main button {
661 color: #fff;
662 text-decoration: none;
663 }
664
665 .registerPanel_main{
666 height: 100%;
667 border: 5px solid #222;
668 -webkit-box-shadow: 0px 1px 4px #000;
669 box-shadow: 0px 1px 4px #000;
670 }
671
672 .registerPanel_right_side {
673 background: #111 url('media/libervia/register_right.png');
674 height: 100%;
675 width: 100%;
676 }
677
678 .registerPanel_right_side .gwt-StackPanelItem {
679 margin: 15px;
680 height: auto;
681 text-align: center;
682 cursor: pointer;
683 color: #fff;
684 display: block;
685 text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.2);
686 }
687
688 .registerPanel_right_side .gwt-StackPanelItem-selected {
689 display: none;
690 }
691
692 .registerPanel_content {
693 margin: auto 50px;
694 }
695
696 .registerPanel_content div {
697 font-size: 1em;
698 margin-left: 10px;
699 margin-top: 15px;
700 font-weight: bold;
701 color: #aaa;
702 }
703
704 .registerPanel_content input {
705 height: 25px;
706 line-height: 25px;
707 width: 200px;
708 text-indent: 11px;
709 background: #000;
710 color: #aaa;
711 border: 1px solid #222;
712 border-radius: 15px 15px 15px 15px;
713 }
714
715 .registerPanel_content input:focus {
716 border: 1px solid #444;
717 }
718
719
720 .registerPanel_content .button, .registerPanel_content .button:visited {
721 background: #222 url('media/libervia/gradient.png') repeat-x;
722 display: block;
723 text-decoration: none;
724 border-radius: 6px 6px 6px 6px;
725 border-bottom: 1px solid rgba(0,0,0,0.25);
726 cursor: pointer;
727 margin: 30px auto;
728 }
729
730 /* Fix for Opera */
731 .button, .button:visited {
732 border-radius: 6px 6px 6px 6px !important;
733 }
734
735 .registerPanel_content .button:hover { background-color: #111; color: #fff; }
736 .registerPanel_content .button:active { top: 1px; }
737 .registerPanel_content .button, .registerPanel_content .button:visited { font-size: 1em; font-weight: bold; line-height: 1; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); padding: 7px 10px 8px; }
738 .registerPanel_content .red.button, .registerPanel_content .red.button:visited { background-color: #000; }
739 .registerPanel_content .red.button:hover { background-color: #bc0000; }
740
741 /* Widgets */
742
743 .widgetsPanel td {
744 vertical-align: top;
745 }
746
747 .widgetsPanel > div > table {
748 border-collapse: separate !important;
749 border-spacing: 7px;
750 }
751
752 .widgetHeader {
753 margin: auto;
754 height: 25px;
755 border-radius: 10px 10px 0 0;
756 background-color: #222;
757 background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#222));
758 background: -webkit-linear-gradient(top, #444, #222);
759 background: linear-gradient(to bottom, #444, #222);
760 }
761
762 .widgetHeader_title {
763 color: #fff;
764 font-weight: bold;
765 text-align: left;
766 text-indent: 15px;
767 margin-top: 4px;
768 }
769
770 .widgetHeader_info {
771 position: absolute;
772 right: 90px; # FIXME: temporary dirty setting to fit a header menu with 3 icon buttons
773 color: white;
774 background-color: white;
775 border-radius: 5px;
776 padding: 0px 4px;
777 top: 2px !important;
778 }
779
780 .widgetHeader_info img {
781 padding: 2px;
782 height: 16px;
783 }
784
785 .widgetHeader_buttonsWrapper {
786 position: absolute;
787 top: 0;
788 height: 100%;
789 width: 100%;
790 }
791
792 .widgetHeader_buttonGroup {
793 float: right;
794 }
795
796 .widgetHeader_buttonGroup img {
797 background-color: transparent;
798 width: 25px;
799 height: 20px;
800 padding: 2px 0px 3px 0px;
801 border-left: 1px solid #666;
802 border-top: 0;
803 border-radius: 0 0 0 0;
804 background: -webkit-gradient(linear, left top, left bottom, from(#555), to(#333));
805 background: -webkit-linear-gradient(top, #555, #333);
806 background: linear-gradient(to bottom, #555, #333);
807 cursor: pointer;
808 }
809
810 .widgetHeader_buttonGroup img:hover {
811 background-color: #cf2828;
812 background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#981a1a));
813 background: -webkit-linear-gradient(top, #cf2828, #981a1a);
814 background: linear-gradient(to bottom, #cf2828, #981a1a);
815 }
816
817 .widgetBody {
818 border-radius: 0 0 10px 10px;
819 background-color: #fff;
820 min-width: 200px;
821 min-height: 150px;
822 -webkit-box-shadow:inset 0px 0 1px #444;
823 box-shadow:inset 0px 0 1px #444;
824 }
825
826 /* BorderWidgets */
827
828 .borderWidgetOnDrag {
829 background-color: lightgray;
830 border: 1px dashed #000;
831 border-radius: 1em;
832 }
833
834 .bottomBorderWidget {
835 height: 10px !important;
836 }
837
838 .leftBorderWidget, .rightBorderWidget {
839 width: 10px !important;
840 }
841
842 .leftBorderWidget {
843 float: right;
844 }
845
846 .rightBorderWidget {
847 float: left;
848 }
849
850 /* Microblog */
851
852 .microblogPanel {
853 width: 100%;
854 }
855
856 .microblogPanel_footer {
857 cursor: pointer;
858 text-align: center;
859 background-color: #ededed;
860 border-radius: 5px;
861 width: 85%;
862 margin: auto;
863 margin-top: 5px;
864 margin-bottom: 5px;
865 }
866
867 .microblogPanel_footer a {
868 color: blue;
869 }
870
871 .microblogNewButton {
872 width: 100%;
873 height: 35px;
874 }
875
876 .subPanel {
877 }
878
879 .subpanel .mb_entry {
880 padding-left: 65px;
881 }
882
883 .mb_entry {
884 min-height: 64px;
885 }
886
887 .mb_entry_header
888 {
889 width: 100%;
890 }
891
892 .mb_entry_header_info {
893 cursor: pointer;
894 padding: 0px 5px 0px 5px;
895 }
896
897 .selected_widget .selected_entry .mb_entry_header_info
898 {
899 background: #cf2828;
900 border-radius: 5px 5px 0px 0px;
901 }
902
903 .mb_entry_comments {
904 float: right;
905 padding-right: 5px;
906 }
907
908 .mb_entry_comments a {
909 color: blue;
910 cursor: pointer;
911 }
912
913 .mb_entry_author {
914 font-weight: bold;
915 }
916
917 .mb_entry_avatar {
918 float: left;
919 }
920
921 .mb_entry_avatar img {
922 width: 48px;
923 height: 48px;
924 padding: 8px;
925 border-radius: 13px; /* padding value + 5px */
926 }
927
928 .mb_entry_dialog {
929 float: left;
930 min-height: 54px;
931 padding: 5px 20px 5px 20px;
932 border-collapse: separate; /* for the bubble queue since the entry dialog is now a HorizontalPanel */
933 }
934
935 .bubble {
936 position: relative;
937 padding: 15px;
938 margin: 2px;
939 border-radius:10px;
940 background: #EDEDED;
941 border-color: #C1C1C1;
942 border-width: 1px;
943 border-style: solid;
944 display: block;
945 border-collapse: separate;
946 min-height: 15px; /* for the bubble queue to be aligned when the bubble is empty */
947 }
948
949 .bubble:after {
950 background: transparent url('media/libervia/bubble_after.png') top right no-repeat;
951 border: none;
952 content: "";
953 position: absolute;
954 bottom: auto;
955 left: -20px;
956 top: 16px;
957 display: block;
958 height: 20px;
959 width: 20px;
960 }
961
962 .bubble textarea{
963 width: 100%;
964 min-width: 350px;
965 }
966
967 .mb_entry_timestamp {
968 font-style: italic;
969 }
970
971 .mb_entry_actions {
972 float: right;
973 margin: 5px;
974 cursor: pointer;
975 font-size: large;
976 }
977
978 .mb_entry_action_larger {
979 font-size: x-large;
980 }
981
982 .mb_entry_toggle_syntax {
983 cursor: pointer;
984 float: right;
985 display: block;
986 position: relative;
987 top: -20px;
988 left: -20px;
989 }
990
991 .mb_entry_publish_button {
992 cursor: pointer;
993 float: left;
994 display: block;
995 position: relative;
996 top: -20px;
997 left: 20px;
998 }
999
1000 /* START TAGS: styles are adapted from Dotclear */
1001 .mblog_tags {
1002 background: #fbfbfb none repeat scroll 0% 0%;
1003 padding: 5px;
1004 margin: 8px 0px 5px 0px;
1005 overflow: hidden;
1006 border-radius: 5px;
1007 }
1008
1009 .mblog_tags li {
1010 display: inline;
1011 font-size: small;
1012 }
1013
1014 .mblog_tags li a {
1015 float: left;
1016 padding: 2px 8px 2px 18px;
1017 white-space: nowrap;
1018 color: #005D99;
1019 text-decoration: none;
1020 background: transparent url("../themes/default/images/flaticon/tag67.png") no-repeat scroll 0px 0px;
1021 }
1022 /* END TAGS */
1023
1024
1025 /* Chat & MUC Room */
1026
1027 .chatPanel {
1028 height: 100%;
1029 width: 100%;
1030 }
1031
1032 .chatPanel_body {
1033 height: 100%;
1034 width: 100%;
1035 }
1036
1037 .chatContent {
1038 overflow: auto;
1039 padding: 5px 15px 5px 15px;
1040 }
1041
1042 .chatText {
1043 margin-top: 7px;
1044 }
1045
1046 .chatTextMe {
1047 margin-top: 7px;
1048 font-style: italic;
1049 }
1050
1051 .chatTextInfo {
1052 margin-top: 7px;
1053 font-weight: bold;
1054 font-style: italic;
1055 }
1056
1057 .chatTextInfo-link {
1058 font-weight: bold;
1059 font-style: italic;
1060 cursor: pointer;
1061 display: inline;
1062 }
1063
1064 .chatArea {
1065 height:100%;
1066 width:100%;
1067 }
1068
1069 .chat_text_timestamp {
1070 font-style: italic;
1071 margin-right: -4px;
1072 padding: 1px 3px 1px 3px;
1073 border-radius: 15px 0 0 15px;
1074 background-color: #eee;
1075 color: #888;
1076 border: 1px solid #ddd;
1077 border-right: none;
1078 }
1079
1080 .chat_text_nick {
1081 font-weight: bold;
1082 padding: 1px 3px 1px 3px;
1083 border-radius: 0 15px 15px 0;
1084 background-color: #eee;
1085 color: #b01e1e;
1086 border: 1px solid #ddd;
1087 border-left: none;
1088 }
1089
1090 .chat_text_msg {
1091 white-space: pre-wrap;
1092 }
1093
1094 .chat_text_mymess {
1095 color: #006600;
1096 }
1097
1098 .occupantsPanelCell {
1099 border-right: 2px dotted #ddd;
1100 padding-left: 5px;
1101 height: 100%;
1102 }
1103
1104 /* Games */
1105
1106 .cardPanel {
1107 background: #02FE03;
1108 margin: 0 auto;
1109 }
1110
1111 .cardGamePlayerNick {
1112 font-weight: bold;
1113 }
1114
1115 /* Radiocol */
1116
1117 .radiocolPanel {
1118
1119 }
1120
1121 .radiocol_metadata_lbl {
1122 font-weight: bold;
1123 padding-right: 5px;
1124 }
1125
1126 .radiocol_next_song {
1127 margin-right: 5px;
1128 font-style:italic;
1129 }
1130
1131 .radiocol_status {
1132 margin-left: 10px;
1133 margin-right: 10px;
1134 font-weight: bold;
1135 color: black;
1136 }
1137
1138 .radiocol_upload_status_ok {
1139 margin-left: 10px;
1140 margin-right: 10px;
1141 font-weight: bold;
1142 color: #28F215;
1143 }
1144
1145 .radiocol_upload_status_ko {
1146 margin-left: 10px;
1147 margin-right: 10px;
1148 font-weight: bold;
1149 color: #B80000;
1150 }
1151
1152 /* Drag and drop */
1153
1154 .dragover {
1155 background: #cf2828 !important;
1156 border-radius: 1em 1em 1em 1em !important;
1157 }
1158
1159 .dragover .widgetHeader, .dragover .widgetBody, .dragover .widgetBody span, .dragover .widgetHeader img {
1160 background: #cf2828 !important;
1161 }
1162
1163 .dragover.widgetHeader {
1164 border-radius: 1em 1em 0 0 !important;
1165 }
1166
1167 .dragover.widgetBody {
1168 border-radius: 0 0 1em 1em !important;
1169 }
1170
1171 /* Warning message */
1172
1173 .warningPopup {
1174 font-size: 1em;
1175 width: 100%;
1176 height: 26px;
1177 text-align: center;
1178 padding: 5px 0;
1179 border-bottom: 1px solid #444;
1180 }
1181
1182 .warningTarget {
1183 font-weight: bold;
1184
1185 }
1186
1187 .targetPublic {
1188 background-color: red;
1189 }
1190
1191 .targetGroup {
1192 background-color: #00FFFB;
1193 }
1194
1195 .targetOne2One {
1196 background-color: #66FF00;
1197 }
1198
1199 .targetStatus {
1200 background-color: #fff;
1201 }
1202
1203 .notifInfo {
1204 background-color: #66FF00;
1205 }
1206
1207 .notifWarning {
1208 background-color: #DB1616;
1209 }
1210
1211 /* Tab panel */
1212
1213 .gwt-TabPanel {
1214 }
1215
1216 .gwt-TabPanelBottom {
1217 height: 100%;
1218 }
1219
1220 .gwt-TabBar {
1221 font-weight: bold;
1222 text-decoration: none;
1223 border-bottom: 3px solid #a01c1c;
1224 }
1225
1226 .gwt-TabBar .gwt-TabBarFirst {
1227 height: 100%;
1228 }
1229
1230 .gwt-TabBar .gwt-TabBarRest {
1231 }
1232
1233 .mainPanel .gwt-TabBar {
1234 z-index: 10;
1235 }
1236
1237 .mainPanel .gwt-TabBar-oneTab {
1238 position: fixed;
1239 left: 0px;
1240 bottom: 0px;
1241 border: none;
1242 }
1243
1244 .mainPanel .gwt-TabBar-oneTab .gwt-TabBarItem-wrapper {
1245 display: none;
1246 }
1247
1248 .mainPanel .gwt-TabBar-oneTab .gwt-TabBarItem-wrapper:nth-child(3) {
1249 display: block;
1250 }
1251
1252 .liberviaTabPanel {
1253 width: 100%;
1254 height: 100%;
1255 }
1256
1257 .liberviaTabPanel .gwt-TabBarItem div {
1258 color: #fff;
1259 }
1260
1261 .liberviaTabPanel .gwt-TabBarItem {
1262 color: #444 !important;
1263 background-color: #222;
1264 background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#222));
1265 background: -webkit-linear-gradient(top, #444, #222);
1266 background: linear-gradient(to bottom, #444, #222);
1267 -webkit-box-shadow: 0px 1px 4px #000;
1268 box-shadow: 0px 1px 4px #000;
1269 padding: 4px 15px 4px 15px;
1270 border-radius: 1em 1em 0 0;
1271 text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
1272 cursor: pointer;
1273 margin-right: 5px;
1274 }
1275
1276 .liberviaTabPanel .gwt-TabBarItem-selected {
1277 color: #fff;
1278 background-color: #cf2828;
1279 background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#981a1a));
1280 background: -webkit-linear-gradient(top, #cf2828, #981a1a);
1281 background: linear-gradient(to bottom, #cf2828, #981a1a);
1282 -webkit-box-shadow: 0px 1px 4px #000;
1283 box-shadow: 0px 1px 4px #000;
1284 padding: 4px 15px 4px 15px;
1285 border-radius: 1em 1em 0 0;
1286 text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
1287 cursor: default;
1288 }
1289
1290 .liberviaTabPanel div.gwt-TabBarItem:hover {
1291 color: #fff;
1292 background-color: #cf2828;
1293 background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#981a1a));
1294 background: -webkit-linear-gradient(top, #cf2828, #981a1a);
1295 background: linear-gradient(to bottom, #cf2828, #981a1a);
1296 -webkit-box-shadow: 0px 1px 4px #000;
1297 box-shadow: 0px 1px 4px #000;
1298 padding: 4px 15px 4px 15px;
1299 border-radius: 1em 1em 0 0;
1300 text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
1301 }
1302
1303 .globalLeftArea {
1304 margin-top: 9px;
1305 }
1306
1307
1308 /* Misc */
1309
1310 .selected_widget .widgetHeader {
1311 background-color: #cf2828;
1312 background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#981a1a));
1313 background: -webkit-linear-gradient(top, #cf2828, #981a1a);
1314 background: linear-gradient(to bottom, #cf2828, #981a1a);
1315 }
1316
1317 .infoFrame {
1318 position: relative;
1319 width: 100%;
1320 height: 100%;
1321 }
1322
1323 .marginAuto {
1324 margin: auto;
1325 }
1326
1327 .maxWidthLimit {
1328 max-width: 500px;
1329 }
1330
1331 .transparent {
1332 opacity: 0;
1333 }
1334
1335 /* URLs */
1336
1337 a.url {
1338 color: blue;
1339 text-decoration: none
1340 }
1341
1342 a:hover.url {
1343 text-decoration: underline
1344 }
1345
1346 /* Rich Text/Message Editor */
1347
1348 .richTextEditor {
1349 }
1350
1351 .richTextEditor tbody {
1352 width: 100%;
1353 display: table;
1354 }
1355
1356 .richTextTitle {
1357 margin-bottom: 5px;
1358 }
1359
1360 .richTextTitle textarea {
1361 height: 22px;
1362 width: 99%;
1363 margin: auto;
1364 padding: 4px;
1365 display: block;
1366 border: 0px;
1367 border-radius: 5px;
1368 }
1369
1370 .richTextToolbar {
1371 white-space: nowrap;
1372 width: 100%;
1373 }
1374
1375 .richTextArea {
1376 width: 100%;
1377 height: 250px;
1378 }
1379
1380 .richTextWysiwyg {
1381 min-height: 50px;
1382 background-color: white;
1383 border: 1px solid #a0a0a0;
1384 border-radius: 5px;
1385 display: block;
1386 font-size: larger;
1387 white-space: pre;
1388 }
1389
1390 .richTextSyntaxLabel {
1391 text-align: right;
1392 margin: 14px 0px 0px 14px;
1393 font-size: 12px;
1394 }
1395
1396 .richTextToolButton {
1397 cursor: pointer;
1398 width:26px;
1399 height:26px;
1400 vertical-align: middle;
1401 margin: 2px 1px;
1402 border-radius: 5px 5px 5px 5px;
1403 -webkit-box-shadow: 0px 1px 4px #000;
1404 box-shadow: 0px 1px 4px #000;
1405 border: none;
1406 -webkit-transition: color 0.2s linear;
1407 transition: color 0.2s linear;
1408 }
1409
1410 .richTextIcon {
1411 width:16px;
1412 height:16px;
1413 vertical-align: middle;
1414 }
1415
1416 /* List panel */
1417
1418 .itemButtonCell {
1419 width:55px;
1420 }
1421
1422 .itemKeyMenu {
1423 }
1424
1425 .itemKey {
1426 cursor: pointer;
1427 border-radius: 5px;
1428 width: 50px;
1429 }
1430
1431 .listItem {
1432 }
1433
1434 .listItem-box {
1435 cursor: pointer;
1436 width: auto;
1437 border: 1px solid #87B3FF;
1438 border-radius: 5px 5px 5px 5px;
1439 -webkit-box-shadow: inset 0px 1px 0px rgba(135, 179, 255, 0.6);
1440 box-shadow: inset 0px 1px 2px rgba(135, 179, 255, 0.6);
1441 padding: 2px 1px;
1442 }
1443
1444 .listItem-box-invalid {
1445 border: 1px solid rgb(255, 0, 0);
1446 -webkit-box-shadow: inset 0px 1px 0px rgba(255, 0, 0, 0.6);
1447 box-shadow: inset 0px 1px 0px rgba(255, 0, 0, 0.6);
1448 }
1449
1450 .listItem-button {
1451 cursor: pointer;
1452 margin: 0px;
1453 padding: 0px;
1454 border: none;
1455 background: transparent;
1456 }
1457
1458 .listItem-button span {
1459 color: red;
1460 }
1461
1462 /* Popup (context) menu */
1463
1464 .popupMenuItem {
1465 cursor: pointer;
1466 border-radius: 5px;
1467 width: 100%;
1468 }
1469
1470 /* Contact group manager */
1471
1472 .contactGroupEditor {
1473 width: 680px !important;
1474 }
1475
1476 .contactGroupManager {
1477 width: 400px !important;
1478 height: 300px !important;
1479 margin: 20px 0px;
1480 }
1481
1482 .contactGroupRoster {
1483 width: 280px !important;
1484 height: 300px !important;
1485 margin: 20px 0px;
1486 }
1487
1488 .addContactGroupPanel {
1489
1490 }
1491
1492 .listPanel {
1493 vertical-align:top;
1494 padding: 10px 0px;
1495 }
1496
1497 .listPanel.dragover {
1498 border-radius: 5px !important;
1499 background: none repeat scroll 0% 0% rgb(135, 179, 255) !important;
1500 border: 1px dashed rgb(35,79,255) !important;
1501 }
1502
1503 .toggleAssignedContacts {
1504 white-space: nowrap;
1505 }
1506
1507 .listManager-button-cell {
1508 vertical-align: top;
1509 padding: 10px 0px;
1510 width: 55px;
1511 white-space: top;
1512 }
1513
1514 .listManager-button-cell .group {
1515 border: 0px;
1516 margin: 0px 5px;
1517 }
1518
1519 .tagsPanel-main {
1520 margin-bottom: 10px;
1521 }
1522
1523 .tagsPanel-tags {
1524 padding: 0px;
1525 display: flex;
1526 flex-wrap: wrap;
1527 }
1528
1529 /* Room and contacts chooser */
1530
1531 .room-contact-chooser {
1532 width:380px;
1533 }
1534
1535 /* StackPanel */
1536
1537 .gwt-StackPanel {
1538 }
1539
1540 .gwt-StackPanel .gwt-StackPanelItem {
1541 background-color: #222;
1542 background: -webkit-gradient(linear, left top, left bottom, from(#888888), to(#666666));
1543 background: -webkit-linear-gradient(top, #888888, #666666);
1544 background: linear-gradient(to bottom, #888888, #666666);
1545 text-decoration: none;
1546 font-weight: bold;
1547 height: 100%;
1548 color: #e7e5e5;
1549 padding: 3px 15px;
1550 border-radius: 1em 1em 1em 1em;
1551 text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
1552 -webkit-transition: color 0.2s linear;
1553 transition: color 0.2s linear;
1554 }
1555
1556 .gwt-StackPanel .gwt-StackPanelItem:hover {
1557 background-color: #eee;
1558 background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#aaa));
1559 background: -webkit-linear-gradient(top, #eee, #aaa);
1560 background: linear-gradient(to bottom, #eee, #aaa);
1561 color: #444;
1562 text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
1563 cursor: pointer;
1564 }
1565
1566 .gwt-StackPanel .gwt-StackPanelItem-selected {
1567 background-color: #eee;
1568 background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#aaa));
1569 background: -webkit-linear-gradient(top, #eee, #aaa);
1570 background: linear-gradient(to bottom, #eee,#aaa);
1571 color: #444;
1572 text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
1573 cursor: pointer;
1574 }
1575
1576 /* Caption Panel */
1577
1578 .gwt-CaptionPanel {
1579 overflow: auto;
1580 background-color: #fff;
1581 border-radius: 5px 5px 5px 5px;
1582 padding: 3px 5px 3px 5px;
1583 margin: 10px 5px 10px 5px;
1584 color: #444;
1585 font-size: 1em;
1586 border: solid 1px gray;
1587 }
1588
1589 /* Radio buttons */
1590
1591 .gwt-RadioButton {
1592 white-space: nowrap;
1593 }
1594
1595 [contenteditable="true"] {
1596 }
1597
1598 /* XMLUI styles */
1599
1600 .AdvancedListSelectable tr{
1601 cursor: pointer;
1602 }
1603
1604 .AdvancedListSelectable tr:hover{
1605 background: none repeat scroll 0 0 #EE0000;
1606 }
1607
1608 .line hr {
1609
1610 }
1611
1612 .dot hr {
1613 height: 0px;
1614 border-top: 1px dotted;
1615 border-bottom: 0px;
1616 }
1617
1618 .dash hr {
1619 height: 0px;
1620 border-top: 1px dashed;
1621 border-bottom: 0px;
1622 }
1623
1624 .plain hr {
1625 height: 10px;
1626 color: black;
1627 background-color: black;
1628 }
1629
1630 .blank hr {
1631 border: 0px;
1632 }
1633
1634
1635 /* Some CSS to style the quote XHTML generated by Movim */
1636
1637 .mb_entry_dialog .bubble div.quote {
1638 display: block;
1639 border-radius: 2px;
1640 border: 1px solid rgba(0, 0, 0, 0.12);
1641 padding: 2rem;
1642 box-sizing: border-box;
1643 }
1644
1645 .mb_entry_dialog .bubble div.quote:before,
1646 .mb_entry_dialog .bubble div.quote:after {
1647 content: '';
1648 display: none;
1649 }
1650
1651 .mb_entry_dialog .bubble div.quote ul {
1652 display: flex;
1653 flex-flow: row wrap;
1654 }
1655
1656 .mb_entry_dialog .bubble div.quote li {
1657 flex: 1 25%;
1658 list-style-type: none;
1659 padding-left: 0;
1660 }
1661
1662 .mb_entry_dialog .bubble div.quote ul li > * {
1663 margin-right: 1rem;
1664 }
1665
1666 .mb_entry_dialog .bubble div.quote li:first-child {
1667 flex: 1 75%;
1668 }
1669
1670 @media screen and (max-width: 1024px) {
1671 .mb_entry_dialog .bubble div.quote li {
1672 flex: 1 100%;
1673 }
1674 }
1675
1676 .mb_entry_dialog .bubble div.quote li img {
1677 max-height: 10rem;
1678 max-width: 100%;
1679 float: right;
1680 }
1681
1682 .parameters {
1683 }
1684
1685 .parameters .xmlui-JidsListWidget {
1686 height: auto;
1687 }