]> git.mxchange.org Git - friendica.git/blob - view/global.css
Updated logging
[friendica.git] / view / global.css
1 /* General style rules .*/
2 .pull-right { float: right }
3
4 details > summary {
5   cursor: pointer;
6 }
7
8 /* General design elements */
9 .btn {
10   outline: none;
11   -moz-box-shadow: inset 0px 1px 0px 0px #ffffff;
12   -webkit-box-shadow: inset 0px 1px 0px 0px #ffffff;
13   box-shadow: inset 0px 1px 0px 0px #ffffff;
14   background-color: #ededed;
15   text-indent: 0;
16   border: 1px solid #dcdcdc;
17   display: inline-block;
18   color: #777777;
19   padding: 5px 10px;
20   text-align: center;
21 }
22 a.btn, a.btn:hover {
23   text-decoration: none;
24   color: inherit;
25 }
26
27 .menu-popup .divider {
28   height: 1px;
29   margin: 3px 0;
30   overflow: hidden;
31   background-color: #2d2d2d;
32 }
33
34 .overline {
35   text-decoration: overline;
36 }
37
38 .template-icon {
39         width: 24px;
40         height: 24px;
41 }
42
43 /* List of social Networks */
44 img.connector, img.connector-disabled {
45   height: 40px;
46   margin-right: 10px;
47   border-radius: 10px;
48 }
49
50 img.connector-disabled {
51   opacity: 0.5;
52 }
53
54 h3.connector {
55   display: inline-block;
56   vertical-align: bottom;
57 }
58 span.connector {
59   vertical-align: super;
60 }
61
62 /* Embedded link information */
63 .type-link, .type-video {
64   border-top: 1px solid #D2D2D2;
65   border-bottom: 1px solid #D2D2D2;
66   display: block;
67   padding-top: 5px;
68   padding-bottom: 5px;
69   margin-top: 10px;
70 }
71
72 .type-link:after, .type-video:after,
73 .oembed.video:after {
74   content: ".";
75   display: block;
76   height: 0;
77   clear: both;
78   visibility: hidden;
79 }
80
81 .type-video .oembed.video:after {
82   float: left;
83 }
84
85 .wall-item-container .wall-item-content .type-link img,
86 .type-link img, .type-video img, img.attachment-preview {
87   max-width: 160px;
88   max-height: 160px;
89   float: left;
90   margin-right: 10px;
91 }
92
93 .wall-item-container .wall-item-content .type-link img.attachment-image,
94 .type-link img.attachment-image, .type-video img.attachment-image  {
95   max-width: 100%;
96   max-height: initial;
97   float: initial;
98   margin-right: 0px;
99 }
100
101
102 .wall-item-like-expanded,
103 .wall-item-dislike-expanded,
104 .wall-item-attendyes-expanded,
105 .wall-item-attendno-expanded,
106 .wall-item-attendmaybe-expanded {
107   margin: 0;
108 }
109
110 .type-link blockquote, .type-video blockquote {
111   margin-left: 0px;
112   max-height: 160px;
113   overflow: hidden;
114   border-left: 0px;
115   padding-left: 0px;
116   font-size: 13px;
117   line-height: normal;
118 }
119
120 .type-link .oembed, .type-video .oembed {
121   font-size: 18px;
122   font-weight: 300;
123   line-height: normal;
124 }
125 .type-link img, .type-video img {
126 }
127
128 .type-video .embed_video {
129   margin: 0em;
130 }
131
132 .type-link span.oembed + br, .type-video span.oembed + br,
133 .type-link a + br, .type-video a + br,
134 .type-link img + br, .type-video img + br{
135   display: none;
136 }
137
138 .embed_video {
139   float:left;
140   margin: 1em;
141   position: relative;
142 }
143
144 .embed_video.active {
145   float: none;
146 }
147
148 .oembed.video .embed_video > div {
149   position: absolute;
150   top: 0px;
151   left: 0px;
152 }
153 .embed_rich {
154   display: block;
155   transition: height .75s;
156 }
157
158 /* Shared Messages */
159
160 .shared_header {
161   display: flex;
162   justify-content: space-between;
163   min-height: 32px;
164   color: #999;
165   border-top: 1px solid #D2D2D2;
166   padding-top: 5px;
167   margin-top: 5px;
168 }
169 .shared_header > .avatar {
170   display: block;
171   flex: 0 0 41px;
172   margin-inline-end: 9px;
173 }
174 .shared_header > .avatar > img {
175   -webkit-border-radius: 4px;
176   -moz-border-radius: 4px;
177   border-radius: 4px;
178 }
179 .shared_header > .metadata {
180   flex: 1 0 auto;
181 }
182 .shared_header > .metadata > p {
183   margin: 0;
184 }
185 .shared_header > .preferences {
186   position: static;
187   flex: 0 0 auto;
188 }
189
190 .shared_header a {
191   -webkit-transition: all 0.2s ease-in-out;
192   -moz-transition: all 0.2s ease-in-out;
193   -o-transition: all 0.2s ease-in-out;
194   -ms-transition: all 0.2s ease-in-out;
195   transition: all 0.2s ease-in-out;
196 }
197
198 blockquote.shared_content {
199   margin-inline-start: 32px;
200   color: #000;
201   border: none;
202 }
203
204 /* Events */
205 .event-summary {
206   margin: 0px 0px 10px 0px;
207   font-weight: bold;
208 }
209
210 .vevent .event-summary {
211   margin: 0px 0px 10px 0px;
212 }
213
214 .vevent .event-description {
215   padding: 10px 0;
216 }
217
218 .event-label {
219   font-weight: bold;
220 }
221
222 .settings-heading a:after{
223   content: ' »';
224 }
225
226 #profile-photo-wrapper {
227   clear: both;
228   overflow: hidden;
229 }
230
231 #newmember-tips {
232   margin-top: -3px;
233   font-size: 1.2em;
234 }
235
236 /* headers */
237 h1, h2, h3, h4, h5, h6 {
238   margin: 5px 0px 5px 0px;
239   font-weight: normal;
240   line-height: normal;
241   text-rendering: optimizelegibility;
242 }
243
244 h1 {
245   font-size: 31.5px;
246 }
247
248 h2 {
249   font-size: 24.5px;
250 }
251
252 h3 {
253   font-size: 20.5px;
254 }
255
256 h4 {
257   font-size: 18px;
258 }
259
260 h5 {
261   font-size: 16.5px;
262 }
263
264 h6 {
265   font-size: 14.95px;
266 }
267
268 span.oembed, h4 {
269   margin: 0px 0px 0px 0px;
270 }
271
272 code, key {
273   display: inline;
274   background-color: #eee;
275   color: #666;
276   padding: 0.2em;
277   font-size: 0.85em;
278   font-family: monospace;
279 }
280
281 /* fields help text */
282 .field .field_help {
283   clear: left;
284 }
285
286 /* notifications unseen */
287 .notification-unseen { background-color: #cceeFF; }
288
289 /* autocomplete popup */
290 ul.acpopup {
291   list-style: none;
292   float: left;
293   min-width: 160px;
294   padding: 5px 0;
295   margin: 2px 0 0;
296 }
297 nav .acpopup {
298   width: 290px;
299   max-height: 450px;
300   max-width: 300px;
301   overflow-y: auto;
302   overflow-x: hidden;
303   margin-top: 0px;
304 }
305 img.acpopup-img {
306   float: left;
307   width: 36px;
308   height: 36px;
309   margin-right: 5px;
310   vertical-align: middle;
311 }
312 .acpopup-contactname {
313   padding-top: 2px;
314   font-weight: bold;
315   line-height: 1em;
316   white-space: nowrap;
317   overflow: hidden;
318   text-overflow: ellipsis;
319   display: block;
320 }
321 .acpopup-sub-text {
322   color: #777;
323   font-size: 0.833em;
324   line-height: 1em;
325   overflow: hidden;
326   text-overflow: ellipsis;
327   display: block;
328 }
329 .textcomplete-item a {
330   color: inherit;
331   overflow: hidden;
332   text-overflow: ellipsis;
333   clear: both;
334   white-space: nowrap;
335   padding: 3px 20px;
336   display: block;
337 }
338 .textcomplete-item a:hover {
339   text-decoration: none;
340 }
341
342 /* plain text editor upload/select popup */
343
344 .fbrowser .path a, .fbrowser .path .btn-link { padding: 5px; }
345 .fbrowser .path a:before, .fbrowser .path .btn-link:before { content: "/"; padding-right: 5px;}
346 .fbrowser .folders ul { list-style-type: none; padding-left: 10px;}
347 .fbrowser .list { height: auto; overflow-y: hidden; margin: 10px 0px; }
348 .fbrowser.photo .photo-album-image-wrapper { float: left; }
349 .fbrowser.photo a img, .fbrowser.photo .btn-link img { height: 48px; }
350 .fbrowser.photo a p, .fbrowser.photo .btn-link p { display: none;}
351 .fbrowser.attachment .photo-album-image-wrapper { float:none;  white-space: nowrap; }
352 .fbrowser.attachment img { display: inline; }
353 .fbrowser.attachment p  { display: inline; white-space: nowrap; }
354 .fbrowser .upload { clear: both; padding-top: 1em;}
355 .fbrowser .error { background: #ffeeee; border: 1px solid #994444; color: #994444; padding: 0.5em;}
356 .fbrowser .error .close { float: right; font-weight: bold; }
357 .fbrowser .error.hidden { display: none; }
358
359 a {
360   cursor: pointer;
361 }
362
363 .sr-only {
364   position: absolute;
365   width: 1px;
366   height: 1px;
367   padding: 0;
368   margin: -1px;
369   overflow: hidden;
370   clip: rect(0,0,0,0);
371   border: 0;
372 }
373
374 .itentity-match-wrapper {
375   float: left;
376   padding: 10px;
377   width: 120px;
378   height: 140px;
379   margin-bottom: 20px;
380 }
381
382 .identity-match-photo {
383   float: left;
384   text-align: center;
385   width: 120px;
386 }
387
388 .identity-match-name {
389   text-align: center;
390 }
391
392 .identity-match-details {
393   float: left;
394   text-align: center;
395   width: 120px;
396   overflow: hidden;
397   font-size: 10px;
398   font-weight: 500;
399   color: #999999;
400 }
401
402 .identity-match-break, .identity-match-end {
403   clear: both;
404 }
405
406 .identity-match-photo button {
407   border: none;
408   padding: 0;
409   margin: 0;
410   background: none;
411   height: 80px;
412   width: 80px;
413   cursor: pointer;
414 }
415
416 .selected-identity img {
417   border: 2px solid #ff0000;
418 }
419 .version-match {
420   font-weight: bold;
421   color: #00a700;
422 }
423 .federation-graph {
424   margin: 0 auto;
425   float: right;
426 }
427 .federation-network-graph {
428   float: left;
429   margin: 20px;
430 }
431 ul.federation-stats,
432 ul.credits {
433   list-style: none;
434 }
435 ul.federation-stats li,
436 ul.credits li {
437   float: left;
438   width: 240px;
439 }
440 table#federation-stats {
441   width: 100%;
442 }
443 td.federation-data {
444   border-bottom: 1px solid #000;
445 }
446
447 .contact-entry-photo img {
448   max-width: 80px;
449   max-height: 80px;
450 }
451
452 /* forumlist widget */
453 .forumlist-img {
454   height: 20px;
455   width: 20px;
456   vertical-align: middle;
457 }
458
459 #forum-widget-collapse {
460   opacity: 0.3;
461 }
462
463 /* help widget */
464 aside .help-aside-wrapper ul {
465   padding-left: 1em;
466 }
467
468 aside .help-aside-wrapper h1 {
469   font-size:2em
470 }
471
472 .md_warning {
473   padding: 1em;
474   border: #ff0000 solid 2px;
475   background-color: #f9a3a3;
476   color: #ffffff;
477 }
478
479 #forum-widget-collapse:hover {
480   opacity: 1.0;
481 }
482
483 .contact-advanced-label {
484   margin-top: 10px;
485   float: left;
486   width: 250px;
487 }
488
489 .contact-advanced-input {
490   margin-top: 10px;
491   float: left;
492   width: 200px;
493 }
494
495 .renderinfo {
496   clear: both;
497 }
498
499 .p-addr {
500   clear: both;
501 }
502
503 #live-community {
504   clear: both;
505 }
506
507 /* contact-edit */
508 #contact-edit-status-wrapper {
509   border: 1px solid;
510   padding: 10px;
511 }
512 #contact-edit-actions {
513   float: right;
514   display: inline-block;
515   position: relative;
516 }
517 #contact-edit-actions > .menu-popup {
518   right: 0;
519   left: auto;
520 }
521
522 #contact-edit-settings-label:after {
523   content: ' »';
524 }
525
526 #contact-edit-settings {
527   display: none;
528   margin: 10px 0;
529 }
530
531 /* settings page */
532 #settings-form .pageflags {
533     margin: 0 0 20px 30px;
534 }
535
536 /* admin pending user notes */
537 td.pendingnote {
538   padding-left: 20px;
539   padding-right: 20px;
540 }
541 td.pendingnote > p > span {
542   font-weight: bold;
543 }
544
545 /* warning message */
546 .contact-advanced-error-message,
547 .warning-message {
548   padding: 10px;
549   margin: 5px;
550   border-left: 5px solid #f00;
551   font-weight: bold;
552 }
553
554 /* src/href attributes filter error display */
555 .invalid-src { border: 1px dotted red;}
556 .invalid-href { border-bottom: 1px dotted red;}
557 .invalid-src:after,
558 .invalid-href:after { content: '⚠️'}
559 img.invalid-src:after { vertical-align: top;}
560
561 /* Tag cloud */
562 .tag1, .tag1:hover {
563   font-size: 0.9em ;
564   color: DarkGray;
565 }
566 .tag2, .tag2:hover {
567   font-size: 1.0em;
568   color: LawnGreen;
569 }
570 .tag3, .tag3:hover {
571   font-size: 1.1em;
572   color: DarkOrange;
573 }
574 .tag4, .tag4:hover {
575   font-size: 1.2em;
576   color: Red;
577 }
578 .tag5, .tag5:hover {
579   font-size: 1.3em;
580   color: Gold;
581 }
582 .tag6, .tag6:hover {
583   font-size: 1.4em;
584   color: Teal;
585 }
586 .tag7, .tag7:hover {
587   font-size: 1.5em;
588   color: DarkMagenta;
589 }
590 .tag8, .tag8:hover {
591   font-size: 1.6em;
592   color: DarkGoldenRod;
593 }
594 .tag9, .tag9:hover {
595   font-size: 1.7em;
596   color: DarkBlue;
597 }
598 .tag10 .tag10:hover {
599   font-size: 1.8em;
600   color: DeepPink;
601 }
602 .tags > a:hover {
603   text-decoration: underline;
604 }
605 .tag-cloud {
606   word-wrap: break-word;
607 }
608
609 #register-explicid-content {
610   font-weight: bold;
611 }
612
613 span.emoji.mastodon img {
614   height: 1.2em;
615   vertical-align: middle;
616 }
617
618 /* Exception page */
619
620 #exception {
621   overflow: hidden;
622   background-image: url('../images/friendica-404_svg_hare-bottom-light-inside.png');
623   background-position: 50px bottom;
624   background-repeat: no-repeat;
625 }
626
627 #exception .hare {
628   float: right;
629 }
630
631 @media screen and (max-width: 600px) {
632   #exception .hare {
633     display: none;
634   }
635 }
636
637 /* Profile Settings Custom Fields */
638 body.dragging, body.dragging * {
639         cursor: ns-resize !important;
640 }
641
642 .dragged {
643         position: absolute;
644         opacity: 0.5;
645         z-index: 2000;
646 }
647
648 #profile-custom-fields > fieldset > legend {
649         cursor: ns-resize;
650 }
651
652 #profile-custom-fields div.placeholder {
653         position: relative;
654         margin: 0;
655         padding: 0;
656         border-top: 1px dotted black;
657 }
658 #profile-custom-fields div.placeholder:before {
659         position: absolute;
660         content: "";
661         width: 0;
662         height: 0;
663         margin-top: -7px;
664         left: -7px;
665         top: -1px;
666         border: 7px solid transparent;
667         border-left-color: black;
668         border-right: none;
669 }
670
671 span.required {
672         color: #c80000;
673 }
674
675 audio {
676   width: 100%;
677 }
678
679 /**
680  * Image grid settings START
681  **/
682 .imagegrid-row {
683         display: -ms-flexbox; /* IE10 */
684         display: flex;
685         margin-top: 1em;
686         column-gap: 5px;
687 }
688
689 .imagegrid-column {
690         -ms-flex: 50%; /* IE10 */
691         flex: 50%;
692         display: -ms-flexbox; /* IE10 */
693         display: flex;
694         flex-direction: column;
695         row-gap: 5px;
696 }
697
698 .imagegrid-column img {
699         -ms-flex: 50%; /* IE10 */
700         flex: 50%;
701 }
702 /**
703  * Image grid settings END
704  **/
705
706 #contactblock .icon {
707         width: 48px;
708         height: 48px;
709 }