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