1 /* General style rules .*/
2 .pull-right { float: right }
8 /* General design elements */
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;
16 border: 1px solid #dcdcdc;
17 display: inline-block;
23 text-decoration: none;
27 .menu-popup .divider {
31 background-color: #2d2d2d;
35 text-decoration: overline;
43 /* List of social Networks */
44 img.connector, img.connector-disabled {
50 img.connector-disabled {
55 display: inline-block;
56 vertical-align: bottom;
59 vertical-align: super;
62 /* Embedded link information */
63 .type-link, .type-video {
64 border-top: 1px solid #D2D2D2;
65 border-bottom: 1px solid #D2D2D2;
72 .type-link:after, .type-video:after,
81 .type-video .oembed.video:after {
85 .wall-item-container .wall-item-content .type-link img,
86 .type-link img, .type-video img, img.attachment-preview {
93 .wall-item-container .wall-item-content .type-link img.attachment-image,
94 .type-link img.attachment-image, .type-video img.attachment-image {
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 {
113 .wall-item-response {
116 text-overflow: ellipsis;
119 .type-link blockquote, .type-video blockquote {
129 .type-link .oembed, .type-video .oembed {
134 .type-link img, .type-video img {
137 .type-video .embed_video {
141 .type-link span.oembed + br, .type-video span.oembed + br,
142 .type-link a + br, .type-video a + br,
143 .type-link img + br, .type-video img + br{
153 .embed_video.active {
157 .oembed.video .embed_video > div {
164 transition: height .75s;
167 /* Shared Messages */
171 justify-content: space-between;
174 border-top: 1px solid #D2D2D2;
178 .shared_header > .avatar {
181 margin-inline-end: 9px;
183 .shared_header > .avatar > img {
184 -webkit-border-radius: 4px;
185 -moz-border-radius: 4px;
188 .shared_header > .metadata {
191 .shared_header > .metadata > p {
194 .shared_header > .preferences {
200 -webkit-transition: all 0.2s ease-in-out;
201 -moz-transition: all 0.2s ease-in-out;
202 -o-transition: all 0.2s ease-in-out;
203 -ms-transition: all 0.2s ease-in-out;
204 transition: all 0.2s ease-in-out;
207 blockquote.shared_content {
208 margin-inline-start: 32px;
215 margin: 0px 0px 10px 0px;
219 .vevent .event-summary {
220 margin: 0px 0px 10px 0px;
223 .vevent .event-description {
231 .settings-heading a:after{
235 #profile-photo-wrapper {
246 h1, h2, h3, h4, h5, h6 {
247 margin: 5px 0px 5px 0px;
250 text-rendering: optimizelegibility;
278 margin: 0px 0px 0px 0px;
283 background-color: #eee;
287 font-family: monospace;
290 /* fields help text */
295 /* notifications unseen */
296 .notification-unseen { background-color: #cceeFF; }
298 /* autocomplete popup */
319 vertical-align: middle;
321 .acpopup-contactname {
327 text-overflow: ellipsis;
335 text-overflow: ellipsis;
338 .textcomplete-item a {
341 text-overflow: ellipsis;
347 .textcomplete-item a:hover {
348 text-decoration: none;
351 /* plain text editor upload/select popup */
353 .fbrowser .path a, .fbrowser .path .btn-link { padding: 5px; }
354 .fbrowser .path a:before, .fbrowser .path .btn-link:before { content: "/"; padding-right: 5px;}
355 .fbrowser .folders ul { list-style-type: none; padding-left: 10px;}
356 .fbrowser .list { height: auto; overflow-y: hidden; margin: 10px 0px; }
357 .fbrowser.photo .photo-album-image-wrapper { float: left; }
358 .fbrowser.photo a img, .fbrowser.photo .btn-link img { height: 48px; }
359 .fbrowser.photo a p, .fbrowser.photo .btn-link p { display: none;}
360 .fbrowser.attachment .photo-album-image-wrapper { float:none; white-space: nowrap; }
361 .fbrowser.attachment img { display: inline; }
362 .fbrowser.attachment p { display: inline; white-space: nowrap; }
363 .fbrowser .upload { clear: both; padding-top: 1em;}
364 .fbrowser .error { background: #ffeeee; border: 1px solid #994444; color: #994444; padding: 0.5em;}
365 .fbrowser .error .close { float: right; font-weight: bold; }
366 .fbrowser .error.hidden { display: none; }
383 .identity-match-wrapper {
391 .identity-match-photo {
397 .identity-match-name {
401 .identity-match-details {
411 .identity-match-break, .identity-match-end {
415 .identity-match-photo button {
425 .selected-identity img {
426 border: 2px solid #ff0000;
436 .federation-network-graph {
444 ul.federation-stats li,
449 table#federation-stats {
453 border-bottom: 1px solid #000;
456 .contact-entry-photo img {
461 /* group list widget */
465 vertical-align: middle;
468 #group-widget-collapse {
473 aside .help-aside-wrapper ul {
477 aside .help-aside-wrapper h1 {
483 border: #ff0000 solid 2px;
484 background-color: #f9a3a3;
488 #group-widget-collapse:hover {
492 .contact-advanced-label {
498 .contact-advanced-input {
517 #contact-edit-status-wrapper {
521 #contact-edit-actions {
523 display: inline-block;
526 #contact-edit-actions > .menu-popup {
531 #contact-edit-settings-label:after {
535 #contact-edit-settings {
541 #settings-form .pageflags {
542 margin: 0 0 20px 30px;
545 /* admin pending user notes */
550 td.pendingnote > p > span {
554 /* warning message */
555 .contact-advanced-error-message,
559 border-left: 5px solid #f00;
563 /* src/href attributes filter error display */
564 .invalid-src { border: 1px dotted red;}
565 .invalid-href { border-bottom: 1px dotted red;}
567 .invalid-href:after { content: '⚠️'}
568 img.invalid-src:after { vertical-align: top;}
601 color: DarkGoldenRod;
607 .tag10 .tag10:hover {
612 text-decoration: underline;
615 word-wrap: break-word;
618 #register-explicit-content {
622 span.emoji.mastodon img {
624 vertical-align: middle;
631 background-image: url('../images/friendica-404_svg_hare-bottom-light-inside.png');
632 background-position: 50px bottom;
633 background-repeat: no-repeat;
640 @media screen and (max-width: 600px) {
646 /* Profile Settings Custom Fields */
647 body.dragging, body.dragging * {
648 cursor: ns-resize !important;
657 #profile-custom-fields > fieldset > legend {
661 #profile-custom-fields div.placeholder {
665 border-top: 1px dotted black;
667 #profile-custom-fields div.placeholder:before {
675 border: 7px solid transparent;
676 border-left-color: black;
689 * Image grid settings START
692 display: -ms-flexbox; /* IE10 */
699 -ms-flex: 50%; /* IE10 */
701 display: -ms-flexbox; /* IE10 */
703 flex-direction: column;
707 .imagegrid-column img {
708 -ms-flex: 50%; /* IE10 */
712 * Image grid settings END
715 /* This helps allocating space for image before they are loaded, preventing content shifting once they are.
716 * Inspired by https://www.smashingmagazine.com/2016/08/ways-to-reduce-content-shifting-on-page-load/
717 * Please note: The space is effectively allocated using padding-bottom using the image ratio as a value.
718 * This ratio is never known in advance so no value is set in the stylesheet.
720 figure.img-allocated-height {
722 background: center / auto rgba(0, 0, 0, 0.05) url(/images/icons/image.png) no-repeat;
725 figure.img-allocated-height img{
735 * Horizontal masonry settings START
738 display: -ms-flexbox; /* IE10 */
740 /* Both the following values should be the same to ensure consistent margins between images in the grid */
745 * Horizontal masonry settings AND
748 #contactblock .icon {