]> git.mxchange.org Git - friendica.git/blob - view/theme/quattro/quattro.less
Merge branch 'friendica:2022.12-rc' into new_image_presentation
[friendica.git] / view / theme / quattro / quattro.less
1 // Quattro Theme LESS file
2
3 /* global */
4 body {
5         font-family: Liberation Sans,helvetica,arial,clean,sans-serif;
6         font-size: 11px;
7         background-color: @BodyBackground;
8         color: @BodyColor;
9         margin: 50px 0 0 0;
10         display:table;
11 }
12 h4 { font-size: 1.1em }
13
14 .shadow(@x: 0, @y: 5px){
15         -webkit-box-shadow:@x @y 10px rgba(0, 0, 0, 0.7);
16         -moz-box-shadow:@x @y 10px rgba(0, 0, 0, 0.7);
17         box-shadow:@x @y 10px rgba(0, 0, 0, 0.7);
18 }
19
20 .rounded(@tr: 5px, @tl: 5px, @bl: 5px, @br: 5px){
21         -moz-border-radius: @arguments;
22         -webkit-border-radius: @arguments;
23         border-radius: @arguments;
24 }
25 .roundbottom (@radius: 5px){ .rounded(0, 0, @radius, @radius); }
26 .roundtop (@radius: 5px){ .rounded(@radius, @radius, 0, 0); }
27
28 .opaque(@v: 0.5){
29         opacity: @v;
30         .transition();
31 }
32
33 .transition(@d: 0.2s){
34         -webkit-transition: all @d ease-in-out;
35         -moz-transition: all @d ease-in-out;
36         -o-transition: all @d ease-in-out;
37         -ms-transition: all @d ease-in-out;
38         transition: all @d ease-in-out;
39 }
40
41
42 a, a:link { color: @Link; text-decoration: none; }
43 a:visited { color: @LinkVisited; text-decoration: none; }
44 a:hover {color: @LinkHover; text-decoration: underline; }
45
46 .left { float: left; }
47 .right { float: right; }
48 .hidden { display: none; }
49 .clear { clear: both; }
50
51 .fakelink { color: @Link; text-decoration: none; cursor:pointer; }
52 .fakelink:hover { color: @LinkHover; text-decoration: underline; }
53
54 blockquote {
55         background:@BlockquoteBackgroundColor;
56         padding: 1em;
57         margin-left: 1em;
58         border-left: 1em solid @BlockquoteBorderColor;
59
60 }
61
62 pre code {
63         font-family: Courier, monospace;
64         white-space: pre;
65         display: block;
66         overflow: auto;
67         border: 1px solid #444;
68         background: #EEE;
69         color: #444;
70         padding: 10px;
71         margin-top: 20px;
72 }
73
74 #panel {
75         position: absolute;
76         width: 10em;
77         background: @MenuBg;
78         color: @Menu;
79         margin: 0;
80         padding: 1em;
81         list-style: none;
82         border: 3px solid @MenuBorder;
83         z-index: 100000;
84
85         .shadow();
86 }
87
88
89
90 /* tool */
91
92 .tool {
93         height: auto; overflow: auto;
94         .label { float: left;}
95         .action { float: right; }
96         > img { float: left; }
97 }
98
99
100
101
102 /* popup notifications */
103 #jGrowl.top-right {
104         top: 30px;
105         right: 15px;
106 }
107 div.jGrowl div.notice {
108         background: @NoticeBackgroundColor url("../../../images/icons/48/notice.png") no-repeat 5px center;
109         color:  @NoticeColor;
110         padding-left: 58px;
111 }
112 div.jGrowl div.info {
113         background: @InfoBackgroundColor url("../../../images/icons/48/info.png") no-repeat 5px center;
114         color:  @InfoColor;
115         padding-left: 58px;
116 }
117
118 /* notifications page */
119 .notif-item {
120         padding: 0.5em;
121         &:nth-child(even) { background-color: @NotificationsPageListEvenBackground; }
122         &:nth-child(odd) { background-color: @NotificationsPageListOddBackground; }
123         .notif-image { width: 16px; }
124 }
125
126
127 /* header */
128 header {
129         position: fixed; left: 43%; right: 43%; top: 0;
130         margin: 0; padding: 0;
131         /*width: 100%; height: 12px; */
132         z-index: 110;
133         color: @Grey1;
134         #site-location {
135                 display: none;
136         }
137
138         #banner {
139                 overflow: hidden;
140                 text-align: center;
141                 width: 100%;
142                 a, a:active, a:visited, a:link, a:hover { color: @Grey1; text-decoration: none; outline: none; vertical-align: bottom; }
143                 #logo-img { height: 22px; margin-top:5px;}
144                 #logo-text { font-size: 22px }
145         }
146 }
147 /* nav */
148 nav {
149         width: 100%; height: 32px;
150         position: fixed; left: 0; top: 0;
151         padding: 0;
152         background-color: @NavbarBackground;
153         color: @Grey1;
154         z-index: 100;
155         .shadow(0px, 0);
156
157                 a, a:active, a:visited, a:link, a:hover { color: @Banner; text-decoration: none; outline: none;  }
158
159                 ul {
160                         margin: 0;
161                         padding: 0 20px;
162                         li {
163                                 list-style: none;
164                                 margin: 0; padding: 0;
165                                 float: left;
166                                 .menu-popup{ left: 0; right: auto; }
167                         }
168
169                 }
170
171                 .nav-menu-icon {
172                         position: relative;
173                         height: 22px;
174                         padding: 5px;
175                         margin: 0 10px;
176                         .roundtop();
177
178                         &.selected {
179                                 background-color: @NavbarSelectedBg;
180                         }
181
182                                 img { width: 22px; height: 22px; }
183                                 .nav-notification { top: 3px; }
184                 }
185
186                 .nav-menu {
187                         position: relative;
188                         height: 16px;
189                         padding: 5px;
190                         margin: 3px 15px 0;
191                         font-size: 14px;
192                         border-bottom: 3px solid @NavbarBackground;
193                         &.selected {
194                                 border-bottom: 3px solid @NavbarSelectedBorder;
195                         }
196
197                 }
198
199                 .nav-notification {
200                         display: none;
201                         position: absolute;
202                         background-color: @NavbarNotifBg;
203                         .rounded();
204                         font-size: 10px;
205                         padding: 1px 3px;
206                         top: 0;
207                         right: -10px;
208                         min-width: 15px;
209                         text-align: right;
210
211                                 &.show{ display: block; }
212                 }
213
214
215                 #nav-help-link,
216                 #nav-search-link,
217                 #nav-directory-link,
218                 #nav-apps-link,
219                 #nav-site-linkmenu {
220                         float: right;
221                         .menu-popup{ right: 0; left: auto; }
222                 }
223
224                 #nav-notifications-linkmenu.on .icon.s22.notify,
225                 #nav-notifications-linkmenu.selected .icon.s22.notify   { background-image: url("../../../images/icons/22/notify_on.png") }
226                 #nav-introductions-link.on .icon.s22.intro,
227                 #nav-introductions-link.selected .icon.s22.intro        { background-image: url("icons/contacts_on.png") }
228                 #nav-messages-link.on .icon.s22.mail,
229                 #nav-messages-link.selected .icon.s22.mail              { background-image: url("icons/messages_on.png") }
230                 #nav-apps-link.selected { background-color: @NavbarSelectedBg; }
231 }
232
233
234 ul.menu-popup {
235         position: absolute;
236         display: none;
237         width: 10em;
238         background: @MenuBg;
239         color: @Menu;
240         margin: 0;
241         padding: 0;
242         list-style: none;
243         border: 3px solid @MenuBorder;
244         z-index: 100000;
245
246         .shadow();
247
248                 a { display: block; color: @MenuItem; padding: 5px 10px; text-decoration: none;}
249                 a:hover { background-color: @MenuItemHoverBg; }
250                 .menu-sep  { border-top: 1px solid @MenuItemSeparator; }
251                 li { float: none;  overflow: auto; height: auto; display: block; }
252                 li img { float: left; width: 16px; height: 16px; padding-right: 5px;}
253                 .empty {
254                         padding: 5px;
255                         text-align: center;
256                         color: @MenuEmpty;
257                 }
258                 .toolbar {
259                         background-color:  @MenuEmpty;
260                         height: auto; overflow: auto;
261                         a { float: right; }
262                         a:hover { background-color: @MenuBg; }
263                 }
264
265 }
266
267 /* autocomplete popup */
268 .autocomplete, .acpopup-mce { max-height:150px; }
269 .autocomplete,
270 .acpopup-mce,
271 .acpopup {
272         background-color:@MenuBg;
273         color: @Menu;
274         border:1px solid @MenuBorder;
275         overflow:auto;
276         z-index:100000;
277         .shadow();
278 }
279 .autocomplete > div,
280 .acpopupitem {
281         color: @MenuItem; padding: 4px;
282         clear:left;
283         overflow: auto;
284         height: auto;
285         img {
286                 float: left;
287                 margin-right: 4px;
288                 width: 16px !important;
289                 height: 16px !important;
290         }
291         &.selected{
292                 background-color: @MenuItemHoverBg;
293         }
294 }
295 .textcomplete-item {
296         color: @MenuItem;
297         a:hover{
298                 color: @MenuItem;
299         }
300         &.active{
301                 background-color: @MenuItemHoverBg;
302         }
303 }
304
305
306 #nav-notifications-menu {
307         width: 400px; max-height: 550px;
308         overflow: auto;
309         img { float: left; margin-right: 5px; }
310         .contactname { font-weight: bold; }
311         .notif-when { font-size: 10px; color: @MenuItemDetail; display: block; }
312 }
313
314 /* Contact-Header for the Network Stream */
315 #viewcontact_wrapper-network {
316         width: 100%;
317         min-height: 100px;
318         background-color: #eff0f1;
319         border-bottom: 1px solid #cccccc;
320         #contact-entry-wrapper-network {
321                 float: none;
322                 width: auto;
323                 height: auto;
324                 padding: 10px;
325                 #contact-entry-accounttype-network { font-size: 22px; }
326                 #contact-entry-name-network { font-size: 24.5px; font-weight: normal; }
327                 .contact-details { font-size: 12px; }
328         }
329 }
330
331
332 /* aside 230px*/
333 aside {
334         display: table-cell;
335         vertical-align: top;
336         width: 200px;
337         padding:0px 10px 0 20px;
338         border-right: 1px solid @AsideBorder;
339
340         .profile-edit-side-div { display: none; }
341
342         .vcard {
343                 .fn { font-size: 16px; font-weight: bold; margin-bottom: 5px; }
344                 .title { margin-bottom: 5px; }
345                 .p-addr { margin-bottom: 5px; }
346                 .account-type { font-size: 14px; margin-bottom: 13px; }
347                 dl { height: auto; overflow: auto; }
348                 dt {float: left; margin-left: 0; width: 35%; text-align: right; color: @VCardLabelColor; }
349                 dd {float: left; margin-left: 4px; width: 60%;}
350
351         }
352
353         #profile-extra-links {
354                 ul { padding: 0; margin: 0; }
355                 li { padding: 0.2em 0; margin: 0; list-style: none; }
356         }
357
358         #wallmessage-link {
359                 display: block;
360                 .rounded();
361                 color: @AsideConnect;
362                 background: @AsideConnectBg url('../../../images/connect-bg.png') no-repeat left center;
363                 font-weight: bold;
364                 text-transform:uppercase;
365                 padding: 4px 2px 2px 35px;
366                 margin-top: 3px;
367
368                 &:hover { text-decoration: none; background-color: @AsideConnectHoverBg; }
369         }
370         #dfrn-request-link {
371                 display: block;
372                 .rounded();
373                 color: @AsideConnect;
374                 background: @AsideConnectBg url('icons/connect-bg.png') no-repeat left center;
375                 font-weight: bold;
376                 text-transform:uppercase;
377                 padding: 4px 2px 2px 35px;
378
379                 &:hover { text-decoration: none; background-color: @AsideConnectHoverBg; }
380         }
381         #subscribe-feed-link {
382                 display: block;
383                 .rounded();
384                 color: @AsideConnect;
385                 background: @AsideConnectBg url('icons/rss-bg.png') no-repeat left center;
386                 font-weight: bold;
387                 text-transform:uppercase;
388                 padding: 4px 2px 2px 35px;
389
390                 &:hover { text-decoration: none; background-color: @AsideConnectHoverBg; }
391         }
392
393         #profiles-menu { width: 20em; }
394
395         .posted-date-selector-months { margin-left: 10px; }
396 }
397
398 #contact-block {
399         overflow: auto; height: auto;
400         .contact-block-h4 { float: left; margin: 5px 0; }
401         .allcontact-link { float: right; margin: 5px 0; }
402         .contact-block-content {
403                 clear: both;
404                 overflow: hidden;
405                 height: auto;
406         }
407         /*.contact-block-div { width:60px; height: 60px; }*/
408         .contact-block-link {
409                 float: left;
410                 margin: 0 2px 2px 0;
411                 img { width: 48px; height: 48px; }
412         }
413 }
414
415 /* group member */
416 #contact-edit-drop-link,
417 .mail-list-delete-wrapper,
418 .group-delete-wrapper {
419         float: right;
420         margin-right: 50px;
421         .drophide {
422                 background-image: url('../../../images/icons/22/delete.png');
423                 display: block; width: 22px; height: 22px;
424                 opacity: 0.3;
425                 position: relative;
426                 top: -50px;
427         }
428         .drop {
429                 background-image: url('../../../images/icons/22/delete.png');
430                 display: block; width: 22px; height: 22px;
431                 position: relative;
432                 top: -50px;
433         }
434 }
435 /*
436 #group-members {
437         margin-top: 20px;
438         padding: 10px;
439         height: 250px;
440         overflow: auto;
441         border: 1px solid #ddd;
442 }
443 #group-members-end {
444         clear: both;
445 }
446 #group-all-contacts {
447         padding: 10px;
448         height: 450px;
449         overflow: auto;
450         border: 1px solid #ddd;
451 }
452 #group-all-contacts-end {
453         clear: both;
454         margin-bottom: 10px;
455 }
456 .contact-block-div {
457         float: left;
458         width: 60px;
459         height: 60px;
460 }*/
461
462 /* widget */
463 .widget {
464         margin-bottom: 2em;
465
466         h3 { padding: 0; margin: 2px;}
467         .action { .opaque(0.1); }
468         input.action { .opaque(0.5); }
469         &:hover .title .action { .opaque(1); }
470         .tool:hover .action { .opaque(1); }
471         .tool:hover .action.ticked { .opaque(1); }
472
473         ul { padding: 0;}
474         ul li {padding-left: 16px; min-height: 16px; list-style: none; }
475
476         .tool.selected {
477                 background: url('../../../images/selected.png') no-repeat left center;
478         }
479
480         /*.action .s10 { width: 10px; overflow: hidden; padding: 0;}
481         .action .s16 { width: 16px; overflow: hidden; padding: 0;}*/
482
483         .notify {
484                 display: none;
485                 background-color: #19AEFF;
486                 border-radius: 5px;
487                 font-size: 10px;
488                 padding: 1px 3px;
489                 min-width: 15px;
490                 text-align: right;
491                 float: right;
492                 color: rgb(255, 255, 255);
493                 margin-right: 10px;
494
495                 &.on { display: block; }
496         }
497 }
498
499 /* widget: search */
500 #add-search-popup {
501         width: 200px;
502         top: 18px;
503 }
504
505
506 /* section 800px */
507 section {
508         display: table-cell;
509         vertical-align: top;
510         width: 770px;
511         padding:0px 20px 0 10px;
512 }
513
514 .sparkle {
515         cursor: url('icons/lock.cur'), pointer;
516 }
517
518 /* wall item */
519 .tread-wrapper {
520         background-color: @ThreadBackgroundColor;
521         position: relative;
522         padding: 10px;
523         margin-bottom: 20px;
524         width: 750px;
525         border-bottom: 1px solid @ThreadBottomBorderColor;
526 }
527 .wall-item-decor { position: absolute; left: 97%; top: -10px;  width: 16px;}
528 .unstarred { display: none; }
529
530 .wall-item-container {
531         display: table;
532         width: 750px;
533
534         .wall-item-item,
535         .wall-item-bottom { display: table-row; }
536
537         .wall-item-bottom { .opaque(0.5); }
538         &:hover .wall-item-bottom { .opaque(1); }
539         .wall-item-info {
540                 display: table-cell;
541                 vertical-align: top;
542                 text-align: left;
543                 width: 60px;
544
545         }
546         .wall-item-location {
547                 word-wrap: break-word;
548                 width: 50px;
549         }
550         .wall-item-content {
551                 display: table-cell;
552                 font-size: 12px;
553                 max-width: 720px;
554                 word-wrap: break-word;
555         }
556         .wall-item-content img { max-width: 700px; }
557         .wall-item-links,
558         .wall-item-actions {
559                 display: table-cell;
560                 vertical-align: middle;
561
562                 .icon {
563                         .opaque(0.5);
564                 }
565                 .icon:hover  {
566                         .opaque(1.0);
567                 }
568         }
569
570         .wall-item-ago { padding-right: 40px; }
571         .wall-item-name { font-weight: bold; }
572
573         .wall-item-actions-author { float: left; width: 20em; margin-top: 0.5em; }
574         .wall-item-actions-events { float: left; margin-top: 0.5em;
575                 a { margin-right: 3em; }
576          }
577         .wall-item-actions-social { float: left; margin-top: 0.5em;
578                 a { margin-right: 3em;
579                         &.active { font-weight: bold;}
580                 }
581          }
582         .wall-item-actions-tools { float: right; width: 15%;
583                 a { float: right; }
584                 input { float: right; }
585         }
586
587 }
588
589
590 .wall-item-container.comment {
591         .contact-photo-wrapper { margin-left: 16px; }
592         .contact-photo {
593                 width: 32px; height: 32px;
594         }
595
596         .contact-photo-menu-button {
597                 top: 15px !important;
598                 left: 0 !important;
599         }
600         .wall-item-links { padding-left: 12px; }
601
602         .commentbox {
603                 height: 0;
604                 overflow: hidden;
605                 .wall-item-comment-wrapper {
606                         border-top: 1px solid @CommentBoxEmptyBorderColor;
607                         height: 0; overflow: hidden;
608                 }
609                 .transition();
610         }
611
612         &:hover .commentbox {
613                 height:auto; overflow: visible;
614                 .wall-item-comment-wrapper {
615                         border-top: 0;
616                         height:auto;overflow: visible;
617                 }
618                 .transition();
619         }
620 }
621
622 /* 'tag' item type */
623 .wall-item-container.item-tag {
624         .wall-item-content {
625                 .opaque(0.5);
626         }
627         .contact-photo-wrapper { margin-left: 32px; }
628         .contact-photo {
629                 width: 16px; height: 16px;
630         }
631         .contact-photo-menu-button {
632                 top: 15px !important;
633                 left: 15px !important;
634         }
635 }
636
637
638 .wall-item-comment-wrapper {
639         margin: 1em 2em 1em 60px;
640         .comment-edit-photo { display: none; }
641
642         textarea {
643                 height: 1em; width: 100%; font-size: 10px;
644                 color: @CommentBoxEmptyColor;
645                 border: 1px solid @CommentBoxEmptyBorderColor;
646                 padding:0.3em;
647         }
648         .comment-edit-text-full {
649                 height: 4em;
650                 color: @CommentBoxFullColor;
651                 border: 1px solid @CommentBoxFullBorderColor;
652         }
653
654         &.photo {
655                 margin: 1em 2em 1em 0;
656         }
657 }
658
659 .threaded .wall-item-comment-wrapper { margin-left: 0; }
660
661 .comment-edit-preview {
662         width: 710px;
663         border: 1px solid @Grey5;
664         margin-top: 10px;
665         background-color: @JotPreviewBackgroundColor;
666
667         .contact-photo { width: 32px; height: 32px; margin-left: 16px;
668                 /*background: url(../../../images/icons/22/user.png) no-repeat center center;*/
669         }
670         .contact-photo-menu-button {
671                 top: 15px !important;
672                 left: 15px !important;
673         }
674         .wall-item-links { padding-left: 12px; }
675
676         .wall-item-container { width: 90%; }
677         .tread-wrapper {
678                 width: 90%; padding: 0; margin: 10px 0;
679                 background-color: @JotPreviewBackgroundColor;
680                 border-bottom: 0;
681         }
682         .wall-item-conv { display: none; }
683 }
684
685 .shiny { border-right:10px solid @ShinyBorderColor; }
686 #jot-preview-content .tread-wrapper { background-color: @JotPreviewBackgroundColor; }
687
688 .hide-comments-outer {margin-bottom: 0.8em; }
689
690 .wall-item-tags { padding-top: 5px; }
691 .tag {
692         background: url("icons/tag.png") no-repeat center right;
693         color: @TagColor;
694         padding-right: 8px;
695         padding-left: 3px;
696         a { color: @TagColor;   }
697 }
698 .mention {
699         background: url("icons/men.png") no-repeat 1px center;
700         color: @MentionColor;
701         padding-right: 3px;
702         padding-left: 18px;
703         a { color: @MentionColor;       }
704 }
705 .folder {
706         background: url("icons/folder.png") no-repeat 1px center;
707         color: @MentionColor;
708         padding-right: 3px;
709         padding-left: 15px;
710         a { color: @MentionColor;       }
711 }
712 .category {
713         background: url("icons/category.png") no-repeat 1px center;
714         color: @MentionColor;
715         padding-right: 3px;
716         padding-left: 15px;
717         a { color: @MentionColor;       }
718 }
719 /*.filesavetags {
720     padding: 3px 0 3px 0;
721     opacity: 0.5;
722 }*/
723
724 .wwto {
725         position: absolute !important;
726         background: #FFFFFF;
727         border: 2px solid @Metalic3;
728         height: 25px;
729         width: 25px;
730         overflow: hidden;
731         padding: 1px;
732         top: 40px;
733         left: 30px;
734
735         .shadow(0px, 0);
736 }
737 .wwto .contact-photo { width: 25px; height: 25px; }
738
739 /* reshare e embed */
740 .wall-item-container .wall-item-content .type-link img,
741 .type-link img {
742         max-width: 160px;
743         max-height: 160px;
744         float: left;
745         margin-right: 10px;
746
747             &.attachment-image {
748                     max-width: 650px;
749                     max-height: inital;
750                     float: none;
751                     margin-right: 0;
752             }
753
754 }
755 .type-link {
756         blockquote {
757             margin: 1em 0;
758             max-height: 160px;
759             overflow: hidden;
760             padding-left: 1em;
761         }
762         .oembed {}
763 }
764
765 .type-video blockquote { padding-left: 1em; }
766
767 .shared_header {
768         height: 32px;
769         color: #999;
770         border-top: 1px solid @ThreadBottomBorderColor;
771         padding-top: 5px;
772         margin-top: 5px;
773 }
774
775 .oembed.video {
776         > a.embed_video {
777                 display: block;
778                 position: relative;
779                 > div {
780             position: absolute; top: 0px; left: 0px;
781                         background:
782                                 rgba(255, 255, 255, 0.36)
783                                 url(../../../images/icons/48/play.png)
784                                 no-repeat center center
785                                 !important;
786                 }
787         }
788 }
789
790 /* threaded comments */
791 .children {
792         margin-top: 1em;
793         .hide-comments-outer { margin-left:60px; }
794
795         .wwto { display: none; }
796
797         .comment-edit-preview { width: 660px;
798                 .wall-item-container { width: 610px; }
799          }
800
801         & .children {
802
803                 margin-left: 40px;
804                 .wall-item-container { width: 710px; }
805                 .comment-edit-preview { width: 620px;
806                         .wall-item-container { width: 620px; }
807                  }
808
809                 & .children {
810                         .wall-item-container { width: 670px; }
811                         .comment-edit-preview { width: 580px;
812                                 .wall-item-container { width: 580px; }
813                         }
814
815                         & .children {
816                                 .wall-item-container { width: 630px; }
817                                 .comment-edit-preview { width: 540px;
818                                         .wall-item-container { width: 540px; }
819                                 }
820
821                                 & .children {
822                                         .wall-item-container { width: 590px; }
823                                         .comment-edit-preview { width: 500px;
824                                                 .wall-item-container { width: 500px; }
825                                         }
826
827                                         .children {
828                                                 margin-left: 0;
829                                                 .hide-comments-outer { margin-left: 0; }
830                                         }
831                                 }
832                         }
833                 }
834         }
835 }
836 /*.threaded .hide-comments-outer { margin-left: 20px; }*/
837
838 span[id^="showmore-teaser"]{
839         background: url("showmore-bg.jpg") no-repeat center bottom;
840 }
841 span[id^="showmore-wrap"] {
842         border-top: 1px solid #999999;
843         color: #999999;
844         display: block;
845         text-align: center;
846         background-color: @ThreadBackgroundColor;
847 }
848
849
850 #pause {
851         position: fixed;
852         bottom: 5px;
853         right: 5px;
854 }
855
856
857 .contact-photo-wrapper { position: relative; }
858 .contact-select {       position: absolute; top:64px; left:64px; display:none; }
859 .contact-select:checked,
860 .contact-photo:hover .contact-select {  display:block; }
861 #contacts-actions {
862         position: absolute;
863         left: 800px;
864         width: 200px;
865         background-color: @MenuBg;
866         border: 2px solid @MenuBorder;
867         .batch-action {
868                 display: block;
869                 width: 100%;
870                 background-color: @MenuBg;
871                 border: 0;
872                 color: @MenuItem;
873                 text-align: left;
874                 padding: 5px 10px;
875                 font-size: 11px;
876         }
877         .batch-action:hover {
878                 background-color: @MenuItemHoverBg;
879         }
880         display: none;
881 }
882 @media (max-width: 1000px) {
883         #contacts-actions { left: 40px; }
884 }
885
886 .contact-photo {
887         width: 48px; height: 48px;
888         img { width: 48px; height: 48px; }
889         overflow: hidden;
890         display: block;
891  }
892 .contact-photo-menu-button {
893         display: none;
894         position: absolute;
895         left: -2px;
896         top: 31px;
897 }
898
899 .contact-wrapper {
900         float: left;
901         width: 300px;
902         height: 90px;
903         padding-right: 10px;
904         margin: 0 10px 10px 0;
905         .contact-photo-wrapper {
906                 float: left;
907                 margin-right: 10px;
908         }
909         .contact-photo {
910                 width: 80px; height: 80px;
911                 img { width: 80px; height: 80px; }
912         }
913         .contact-photo-menu-button {
914                 left: 0;
915                 top: 63px;
916         }
917         .drop {
918                 background-image: url('../../../images/icons/22/delete.png');
919                 display: block; width: 22px; height: 22px;
920                 position: relative;
921                 top: 10px;
922                 left: -10px;
923                 z-index: 99;
924         }
925         .drophide {
926                 background-image: url('../../../images/icons/22/delete.png');
927                 display: block; width: 22px; height: 22px;
928                 opacity: 0.3;
929                 position: relative;
930                 top: 10px;
931                 left: -10px;
932                 z-index: 99;
933         }
934         .contact-entry-connect {
935                 padding-top: 5px;
936                 font-weight: bold;
937         }
938 }
939 .directory-item {
940         float: left;
941         width: 200px;
942         height: 200px;
943         .contact-photo {
944                 width: 175px; height: 175px;
945                 img { width: 175px; height: 175px; }
946         }
947 }
948 .contact-name { font-weight: bold; /* padding-top: 15px; */}
949 .contact-details {
950         color: @Grey3; white-space: nowrap;
951         overflow: hidden;
952         text-overflow: ellipsis;
953 }
954
955 #contact-edit-status-wrapper { border-color: @JotToolsOverBackgroundColor;}
956 /* editor */
957 .jothidden { display: none; }
958 #jot {
959
960         width: 100%;
961         margin: 0 2em 20px 0;
962
963         .profile-jot-text {
964                 height: 1em; width: 99%; font-size: 10px;
965                 color: @CommentBoxEmptyColor;
966                 border: 1px solid @CommentBoxEmptyBorderColor;
967                 padding:0.3em;
968         }
969
970         #jot-tools {
971                 margin: 0; padding: 0;
972                 height: 40px; overflow: none;
973                 width: 770px;
974                 background-color: @JotToolsBackgroundColor;
975                 border-bottom: 2px solid @JotToolsBorderColor;
976                 li {
977                         list-style: none;
978                         float: left;
979                         width: 80px;
980                         height: 40px;
981                         border-bottom: 2px solid @JotToolsBorderColor;
982                         a {
983                                 display: block;
984                                 color: @JotToolsText;
985                                 width: 100%;
986                                 height:40px;
987                                 text-align: center;
988                                 line-height: 40px;
989                                 overflow: hidden;
990                         }
991                 }
992                 li:hover {
993                         background-color: @JotToolsOverBackgroundColor;
994                         border-bottom: 2px solid @JotToolsOverBorderColor;
995                 }
996                 li.perms {
997                         float: right;
998                         width: 40px;
999                         a.unlock {
1000                                 width: 30px;
1001                                 border-left: 10px solid @JotPermissionUnlockBackgroundColor;
1002                                 background-color: @JotPermissionUnlockBackgroundColor;
1003                         }
1004                         a.lock {
1005                                 width: 30px;
1006                                 border-left: 10px solid @JotPermissionLockBackgroundColor;
1007                                 background-color: @JotPermissionLockBackgroundColor;
1008                         }
1009
1010                 }
1011                 li.submit {
1012                         float: right;
1013                         background-color: @JotSubmitBackgroundColor;
1014                         border-bottom: 2px solid @JotSubmitBackgroundColor;
1015                         border-right: 1px solid @Grey4;
1016                         border-left: 1px solid @Grey4;
1017                         input {
1018                                 border: 0; margin: 0; padding: 0;
1019                                 background-color: @JotSubmitBackgroundColor;
1020                                 color: @JotSubmitText;
1021                                 width: 80px; height: 40px;
1022                                 line-height: 40px;
1023                         }
1024                         input:hover {
1025                                 background-color: @JotSubmitOverBackgroundColor;
1026                                 color: @JotSubmitOverText;
1027                         }
1028                 }
1029                 li.loading {
1030                         float: right;
1031                         background-color: @JotLoadingBackgroundColor;
1032                         width:  20px;
1033                         vertical-align: center;
1034                         text-align: center;
1035                         img { margin-top: 10px; }
1036                         border-top: 2px solid @JotToolsBorderColor;
1037                         height: 38px;
1038                 }
1039         }
1040
1041         #jot-title {
1042                 border: 0;
1043                 margin: 0;
1044                 height: 20px;
1045                 width: 500px;
1046                 font-weight: bold;
1047                 border: 1px solid @BodyBackground;
1048
1049                 &:-webkit-input-placeholder {
1050                         font-weight: normal;
1051                 }
1052
1053                 &:-moz-placeholder {
1054                         font-weight: normal;
1055                 }
1056
1057                 &:hover { border: 1px solid @CommentBoxEmptyBorderColor }
1058                 &:focus { border: 1px solid @CommentBoxEmptyBorderColor }
1059         }
1060
1061         #character-counter {
1062                 width: 40px;
1063                 float: right;
1064                 text-align: right;
1065                 height: 20px;
1066                 line-height: 20px;
1067                 padding-right: 20px;
1068         }
1069
1070         #jot-category {
1071                 border: 0;
1072                 margin: 0;
1073                 height: 20px;
1074                 width: 200px;
1075                 border: 1px solid @BodyBackground;
1076                 &:hover { border: 1px solid @CommentBoxEmptyBorderColor }
1077                 &:focus { border: 1px solid @CommentBoxEmptyBorderColor }
1078         }
1079 }
1080
1081
1082 /** buttons **/
1083 /*input[type="submit"] {
1084         border: 0;
1085     background-color: @ButtonBackgroundColor;
1086     color: @ButtonColor;
1087     padding: 0 10px;
1088         .rounded(5px);
1089     height: 18px;
1090 }*/
1091
1092 a.actionbutton {
1093         border: 1px solid @Grey3;
1094         background-color: @Grey2;
1095         color: @Grey5;
1096         font-size: 8pt;
1097         padding: 2pt;
1098         .rounded();
1099
1100         i.icon {
1101                 display: inline-block;
1102                 vertical-align: baseline;
1103                 padding: 0;
1104         }
1105
1106         &:hover {
1107                 text-decoration: none;
1108                 background-color: @Grey1;
1109         }
1110 }
1111 h2 > .actionbutton { float: right; }
1112
1113
1114 /** acl **/
1115 #photo-edit-perms-select,
1116 #photos-upload-permissions-wrapper,
1117 #profile-jot-acl-wrapper{
1118         display:block!important;
1119 }
1120
1121 #acl-wrapper {
1122         width: 690px;
1123         float:left;
1124 }
1125 #acl-wrapper a:hover {
1126         text-decoration: none;
1127         color:#000000;
1128 }
1129 /** /acl **/
1130
1131 /** tab buttons **/
1132 ul.tabs {
1133     list-style-type: none;
1134     padding-bottom: 10px;
1135
1136     li {
1137         float: left;
1138         margin-left: 20px;
1139
1140         .active {
1141                         border-bottom: 1px solid @LinkVisited;
1142         }
1143     }
1144
1145 }
1146
1147
1148 /** group editor **/
1149 #group-edit-desc { margin-top: 1em; color: @FieldHelpColor; }
1150 #group-update-wrapper{
1151         height: auto; overflow: auto;
1152         #group {
1153                 width:300px;
1154                 float:left;
1155                 margin-right:20px;
1156         }
1157         #contacts {
1158                 width:300px;
1159                 float:left;
1160         }
1161         #group-separator { display: none; }
1162         .contact_list {
1163                 height: 300px;
1164                 border: 1px solid @MenuBorder;
1165                 overflow: auto;
1166                 .contact-block-div  {
1167                         width: 50px; height: 50px;
1168                         float: left;
1169                 }
1170         }
1171 }
1172
1173 /**
1174  * Form fields
1175  */
1176 .field {
1177         margin-bottom: 10px;
1178         padding-bottom: 10px;
1179         overflow: auto;
1180         width: 100%;
1181
1182
1183         label {
1184                 float: left;
1185                 width: 200px;
1186         }
1187
1188         input,
1189         textarea {
1190                 width: 400px;
1191         }
1192         input[type="checkbox"], input[type="radio"]{
1193                 width: auto;
1194         }
1195
1196         textarea { height: 100px; }
1197         .field_help {
1198                 display: block;
1199                 margin-left: 200px;
1200                 color: @FieldHelpColor;
1201         }
1202
1203         .hidden { display: none!important; }
1204
1205         &.radio .field_help { margin-left: 0; }
1206 }
1207
1208
1209 #profile-edit-links li {
1210         list-style: none;
1211         margin-top: 10px;
1212 }
1213
1214 #profile-menu {
1215         display: none;
1216 }
1217
1218 #profile-edit-default-desc {
1219         color: #FF0000;
1220         border: 1px solid #FF8888;
1221         background-color: #FFEEEE;
1222         padding: 7px;
1223 }
1224 #profile-edit-name-label,
1225 #profile-edit-about-label,
1226 #profile-edit-dob-label,
1227 #profile-edit-address-label,
1228 #profile-edit-locality-label,
1229 #profile-edit-region-label,
1230 #profile-edit-postal-code-label,
1231 #profile-edit-country-name-label,
1232 #profile-edit-pubkeywords-label,
1233 #profile-edit-prvkeywords-label,
1234 #profile-edit-homepage-label {
1235         float: left;
1236         width: 175px;
1237         padding-top: 7px;
1238 }
1239 #profile-edit-name,
1240 #profile-edit-about,
1241 #profile-edit-dob,
1242 #profile-edit-address,
1243 #profile-edit-locality,
1244 #profile-edit-region,
1245 #profile-edit-postal-code,
1246 #profile-edit-country-name,
1247 #profile-edit-pubkeywords,
1248 #profile-edit-prvkeywords,
1249 #profile-edit-homepage {
1250         margin-top: 5px;
1251 }
1252
1253 /* oauth */
1254 .oauthapp {
1255         height: auto; overflow: auto;
1256         border-bottom: 2px solid #cccccc;
1257         padding-bottom: 1em;
1258         margin-bottom: 1em;
1259 }
1260 .oauthapp img {
1261         float: left;
1262         width: 48px; height: 48px;
1263         margin: 10px;
1264 }
1265 .oauthapp img.noicon {
1266         background-image: url("../../../images/icons/48/plugin.png");
1267         background-position: center center;
1268         background-repeat: no-repeat;
1269 }
1270 .oauthapp a {
1271         float: left;
1272 }
1273
1274 /* contacts */
1275 .contact-entry-wrapper {
1276         width: 50px; float: left;
1277 }
1278
1279 /* manage page */
1280 .identity-match-photo {
1281         position: relative;
1282         .delegation-notify {
1283                 background-color: #19AEFF;
1284                 border-radius: 5px;
1285                 font-size: 10px;
1286                 padding: 1px 3px;
1287                 min-width: 15px;
1288                 text-align: right;
1289                 position: absolute;
1290                 right: 10px;
1291                 top: -5px;
1292                 color: rgb(255, 255, 255);
1293         }
1294 }
1295
1296
1297 /* videos page */
1298 .videos {
1299         .video-top-wrapper {
1300                 width: 200px; float: left;
1301                 margin: 0 10px 10px 0;
1302                 position: relative;
1303
1304                 .video-delete {
1305                         position: absolute;
1306                         opacity: 0;
1307                         right: 0;
1308                         top: 0;
1309                         transition: opacity 0.5s;
1310                 }
1311
1312                 &:hover .video-delete {
1313                         opacity: 1;
1314                 }
1315         }
1316 }
1317
1318 /* photo albums */
1319 @photosize: 150px;
1320
1321 #photo-edit-link-wrap { margin-bottom: 10px; }
1322
1323 #album-edit-link {
1324         border-right: 1px solid @MenuBorder;
1325         float: left;
1326         padding-right: 5px;
1327         margin-right: 5px;
1328 }
1329 #photo-edit-link,
1330 #album-edit-link a {
1331         background: url("../../../images/icons/16/edit.png") no-repeat left center;
1332         padding-left: 18px;
1333 }
1334 #photo-toprofile-link {
1335         background: url("../../../images/icons/16/user.png") no-repeat left center;
1336         padding-left: 18px;
1337 }
1338
1339 #photo-top-upload-link,
1340 .photos-upload-link { margin: 1em 0; display: block; }
1341 .photos-upload-link a,
1342 #photo-top-upload-link {
1343         background: url("../../../images/icons/16/add.png") no-repeat left center;
1344         padding-left: 18px;
1345 }
1346
1347
1348 .photo-top-image-wrapper,
1349 .photo-album-image-wrapper {
1350         float: left;
1351         margin: 0 10px 10px 0;
1352         width:@photosize; height: @photosize;
1353         position: relative;
1354         overflow: hidden;
1355
1356         img { width: @photosize; }
1357
1358         .photo-top-album-name,
1359         .caption{
1360                 position: absolute;
1361                 color: @Menu;
1362                 background-color: @MenuBg;
1363
1364                 width: 100%;
1365                 .shadow(0px, 5px);
1366                 .transition(0.5s);
1367                 bottom: -@photosize;
1368         }
1369
1370         &:hover .photo-top-album-name,
1371         &:hover .caption {
1372                 bottom: 0;
1373                 .shadow(0px, 0);
1374                 .transition(0.5s);
1375         }
1376 }
1377
1378 #photo-photo {
1379         display: block; width: 660px;
1380         padding: 50px; margin-bottom: 0;
1381         text-align: center;
1382         background-color: @Grey3;
1383         img { max-width: 560px; }
1384 }
1385 #photo-album-title {
1386         background: url("../../../images/icons/22/image.png") no-repeat top left;
1387         padding-left: 23px;
1388         min-height: 22px;
1389         padding-top: 6px;
1390         /* a { display: block;}*/
1391 }
1392
1393 #photo-caption {
1394         display: block; width: 660px;
1395         min-height: 55px;
1396         background-color:  @Grey2;
1397         padding:0 50px 0 50px;
1398 }
1399 #photo-next-link > a > div {
1400         background: url("icons/next.png") no-repeat center center;
1401         float: right;
1402         width: 50px; height: 50px;
1403 }
1404 #photo-prev-link > a > div {
1405         background: url("icons/prev.png") no-repeat center center;
1406         float: left;
1407         width: 50px; height: 50px;
1408 }
1409 #photo-like-div {
1410         display: block; width: 660px;
1411         height: 30px;
1412         background-color:  @Grey2;
1413         padding:0 50px 0 50px;
1414         .icon {float: left;}
1415         .like-rotator {float: right;}
1416 }
1417
1418 #photo_edit_form {
1419         padding: 1em;
1420 }
1421
1422 /* profile match wrapper */
1423 .profile-match-wrapper {
1424         float: left;
1425         width: 110px;
1426         height: 110px;
1427         margin-bottom: 20px;
1428         .drop {
1429             background-image: url('../../../images/icons/22/delete.png');
1430             display: block; width: 22px; height: 22px;
1431             position: relative;
1432             top: 10px;
1433             left: -10px;
1434         }
1435         .drophide {
1436             background-image: url('../../../images/icons/22/delete.png');
1437             display: block; width: 22px; height: 22px;
1438             opacity: 0.3;
1439             position: relative;
1440             top: 10px;
1441             left: -10px;
1442         }
1443         .contact-photo {
1444                 width: 80px; height: 80px;
1445                 img { width: 80px; height: 80px; }
1446         }
1447         .contact-photo-menu-button {
1448                 left: 0;
1449                 top: 63px;
1450         }
1451 }
1452
1453 /* messages */
1454 #message-new {
1455         background: @MessageNewBackgroundColor;
1456         border: 1px solid @MessageNewBorderColor;
1457         width: 150px;
1458         a {
1459                 color: @MessageNewColor;
1460                 text-align: center;
1461                 display: block;
1462                 font-weight: bold;
1463                 padding: 1em 0;
1464         }
1465 }
1466
1467 .mail-list-wrapper {
1468         background-color: @MailListBackgroundColor;
1469         margin-bottom: 5px;
1470         width: 100%; height: auto; overflow: hidden;
1471
1472         span { display: block; float: left; width: 20%; overflow: hidden;}
1473
1474         .mail-subject {
1475                 width: 30%;
1476                 padding:4px 0 0 4px;
1477                 a { display: block; }
1478                 &.unseen a { font-weight: bold; }
1479         }
1480         .mail-date { padding: 4px 4px 0 4px; }
1481         .mail-from { padding: 4px 4px 0 4px; }
1482         .mail-count { padding: 4px 4px 0 4px; text-align: right;}
1483
1484         .mail-delete { float: right; }
1485 }
1486
1487 #message-preview {
1488         margin-top: 1em;
1489         box-sizing: border-box;
1490         * {  box-sizing: border-box;    white-space: nowrap;}
1491         .mail-list-wrapper {
1492                 .mail-subject {
1493                         width: 100%;
1494                 }
1495                 .mail-date  { font-size: 0.8em; width: 25%; text-align: right}
1496                 .mail-from  { font-size: 0.8em; width: 75%;}
1497                 .mail-count { font-size: 0.8em; width: 100%;}
1498                 .mail-delete { display: none;}
1499
1500                 & .mail-date, & .mail-from, & .mail-count { .opaque(0.5); }
1501                 &:hover .mail-date, &:hover .mail-from, &:hover .mail-count { .opaque(1); }
1502         }
1503 }
1504
1505
1506 #mail-display-subject {
1507         background-color: @MailDisplaySubjectBackgroundColor;
1508         color: @MailDisplaySubjectColor;
1509         margin-bottom: 10px;
1510         width: 100%; height: auto; overflow: hidden;
1511         span { float: left; overflow: hidden; padding: 4px 0 0 10px;}
1512         .mail-delete { float: right;  .opaque(0.5);}
1513         &:hover .mail-delete { .opaque(1); }
1514
1515 }
1516
1517 /* theme screenshot */
1518 .screenshot, #theme-preview {
1519         position: absolute;
1520         width:202px;
1521         left: 70%;
1522         top: 50px;
1523         img { width: 200px; height: 150px; }
1524 }
1525
1526 /* page footer */
1527 footer { height: 100px; display: table-row; }
1528
1529 .pager {
1530         margin-top: 25px;
1531         clear: both;
1532 }
1533 .pager .disabled {
1534         display: none;
1535 }
1536
1537 /**
1538  * ADMIN
1539  */
1540 #pending-update {
1541         float:right;
1542         color: #ffffff;
1543         font-weight: bold;
1544         background-color: #FF0000;
1545         padding: 0em 0.3em;
1546
1547 }
1548 #adminpage {
1549     dl {
1550         clear: left;
1551         margin-bottom: 2px;
1552         padding-bottom: 2px;
1553         border-bottom: 1px solid black;
1554     }
1555     dt {
1556         width: 200px;
1557         float: left;
1558         font-weight: bold;
1559     }
1560     dd {
1561         margin-left: 200px;
1562     }
1563     h3 {
1564         border-bottom: 1px solid #cccccc;
1565     }
1566     .field label {
1567         font-weight: bold;
1568     }
1569     .submit {
1570         clear:left;
1571         text-align: right;
1572     }
1573     #addonslist {
1574         margin: 0; padding: 0;
1575     }
1576     .addon {
1577         list-style: none;
1578         display: block;
1579         border: 1px solid #888888;
1580         padding: 1em;
1581         margin-bottom: 5px;
1582         clear: left;
1583         desc {
1584             margin-left: 2.5em;
1585         }
1586     }
1587     .toggleaddon {
1588         float:left;
1589         margin-right: 1em;
1590     }
1591     table {
1592         width:100%;
1593         border-bottom: 1px solid #000000;
1594         margin: 5px 0;
1595         th {
1596             text-align: left;
1597         }
1598         td .icon {
1599             float: left;
1600         }
1601         tr:hover {
1602             background-color: #bbc7d7;
1603         }
1604     }
1605     table#users img {
1606             width: 16px; height: 16px;
1607     }
1608     .selectall { text-align: right; }
1609     .settings-block {
1610       border-bottom: 1px solid #cccccc;
1611     }
1612 }
1613
1614 /* edit buttons for comments */
1615
1616 .icon.dim { opacity: 0.3;filter:alpha(opacity=30); }
1617 .comment-edit-bb {
1618         list-style: none;
1619         display: none;
1620         margin: 0;
1621         padding: 0;
1622         width: 75%;
1623 }
1624 .comment-edit-bb > li {
1625         display: inline-block;
1626         margin: 10px 10px 0 0;
1627         visibility: none;
1628 }
1629
1630 .editicon {
1631         display: inline-block;
1632         width: 16px;
1633         height: 16px;
1634         background-image: url(icons/bbedit.png);
1635         text-decoration: none;
1636         :hover {background-color: #ccc;}
1637 }
1638 .boldbb { background-position: 0 0; }
1639 .boldbb:hover { background-position: 0 -16px; }
1640 .italicbb { background-position: -16px 0; }
1641 .italicbb:hover { background-position: -16px -16px; }
1642 .underlinebb { background-position: -32px 0; }
1643 .underlinebb:hover { background-position: -32px -16px; }
1644 .quotebb { background-position: -48px 0; }
1645 .quotebb:hover { background-position: -48px -16px; }
1646 .codebb { background-position: -64px 0; }
1647 .codebb:hover { background-position: -64px -16px; }
1648 .imagebb { background-position: -80px 0; }
1649 .imagebb:hover { background-position: -80px -16px; }
1650 .urlbb { background-position: -96px 0; }
1651 .urlbb:hover { background-position: -96px -16px; }
1652 .videobb { background-position: -112px 0; }
1653 .videobb:hover { background-position: -112px -16px; }
1654
1655 /* buttons for the event view */
1656 .plink-event-link {
1657         float: left;
1658         margin-left: 2px;
1659 }
1660
1661 /* upload/select popup */
1662 .fbrowser {
1663         overflow: auto;
1664         position: absolute;
1665         top: 0;
1666         width: 100%;
1667         height: 100%;
1668 }
1669 .fbrowser .path {
1670         background-color: @NavbarBackground;
1671         a {     padding: 5px; margin: 0 2px; display: inline-block; }
1672         a, a:active, a:visited, a:link, a:hover { color: @Banner; text-decoration: none; outline: none;  }
1673 }
1674 .fbrowser .folders ul { list-style: url("icons/folder.png"); padding-left: 22px;}
1675 .fbrowser .list { padding: 10px; }
1676 .fbrowser.photo .photo-album-image-wrapper { width: 48px; height: 48px; }
1677 .fbrowser.photo a img { width: auto; height: 48px; }
1678 .fbrowser.photo a p { display: none;}
1679 .fbrowser.attachment .photo-album-image-wrapper { float:none;  white-space: nowrap; width: 100%; height: auto; }
1680 .fbrowser.attachment img { display: inline; width: 16px; height: 16px}
1681 .fbrowser.attachment p  { display: inline; white-space: nowrap; }
1682
1683 .fbrowser .upload { clear: both; padding-top: 1em;}