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