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