X-Git-Url: https://git.mxchange.org/?a=blobdiff_plain;f=view%2Fglobal.css;h=aab6e8d67d0e3011399a1cef4ad9fea9ac44a6ff;hb=f23ecaff6af1982112469f90d6bcdf0408b0f22e;hp=874b1d6e98a6bfa1a953509336aa01a317f8e79f;hpb=dc42dbb68a50fb2c60f439393eb6d1fe80b327cf;p=friendica.git

diff --git a/view/global.css b/view/global.css
index 874b1d6e98..aab6e8d67d 100644
--- a/view/global.css
+++ b/view/global.css
@@ -35,6 +35,11 @@ a.btn, a.btn:hover {
   text-decoration: overline;
 }
 
+.template-icon {
+	width: 24px;
+	height: 24px;
+}
+
 /* List of social Networks */
 img.connector, img.connector-disabled {
   height: 40px;
@@ -93,6 +98,9 @@ span.connector {
   margin-right: 0px;
 }
 
+.wall-item-emoji {
+  margin-right: 5px;
+}
 
 .wall-item-like-expanded,
 .wall-item-dislike-expanded,
@@ -102,6 +110,12 @@ span.connector {
   margin: 0;
 }
 
+.wall-item-response {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .type-link blockquote, .type-video blockquote {
   margin-left: 0px;
   max-height: 160px;
@@ -151,16 +165,38 @@ span.connector {
 }
 
 /* Shared Messages */
+
 .shared_header {
+  display: flex;
+  justify-content: space-between;
   min-height: 32px;
   color: #999;
   border-top: 1px solid #D2D2D2;
   padding-top: 5px;
   margin-top: 5px;
 }
+.shared_header > .avatar {
+  display: block;
+  flex: 0 0 41px;
+  margin-inline-end: 9px;
+}
+.shared_header > .avatar > img {
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+}
+.shared_header > .metadata {
+  flex: 1 0 auto;
+}
+.shared_header > .metadata > p {
+  margin: 0;
+}
+.shared_header > .preferences {
+  position: static;
+  flex: 0 0 auto;
+}
 
 .shared_header a {
-  color: black;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
@@ -168,20 +204,8 @@ span.connector {
   transition: all 0.2s ease-in-out;
 }
 
-.shared_header a:hover {
-  color: #36c;
-}
-
-.shared_header img {
-  -webkit-border-radius: 4px;
-  -moz-border-radius: 4px;
-  border-radius: 4px;
-  float: left;
-  margin-right: 9px;
-}
-
 blockquote.shared_content {
-  margin-left: 32px;
+  margin-inline-start: 32px;
   color: #000;
   border: none;
 }
@@ -330,12 +354,12 @@ img.acpopup-img {
 .fbrowser .path a:before, .fbrowser .path .btn-link:before { content: "/"; padding-right: 5px;}
 .fbrowser .folders ul { list-style-type: none; padding-left: 10px;}
 .fbrowser .list { height: auto; overflow-y: hidden; margin: 10px 0px; }
-.fbrowser.image .photo-album-image-wrapper { float: left; }
-.fbrowser.image a img, .fbrowser.image .btn-link img { height: 48px; }
-.fbrowser.image a p, .fbrowser.image .btn-link p { display: none;}
-.fbrowser.file .photo-album-image-wrapper { float:none;  white-space: nowrap; }
-.fbrowser.file img { display: inline; }
-.fbrowser.file p  { display: inline; white-space: nowrap; }
+.fbrowser.photo .photo-album-image-wrapper { float: left; }
+.fbrowser.photo a img, .fbrowser.photo .btn-link img { height: 48px; }
+.fbrowser.photo a p, .fbrowser.photo .btn-link p { display: none;}
+.fbrowser.attachment .photo-album-image-wrapper { float:none;  white-space: nowrap; }
+.fbrowser.attachment img { display: inline; }
+.fbrowser.attachment p  { display: inline; white-space: nowrap; }
 .fbrowser .upload { clear: both; padding-top: 1em;}
 .fbrowser .error { background: #ffeeee; border: 1px solid #994444; color: #994444; padding: 0.5em;}
 .fbrowser .error .close { float: right; font-weight: bold; }
@@ -356,7 +380,7 @@ a {
   border: 0;
 }
 
-.itentity-match-wrapper {
+.identity-match-wrapper {
   float: left;
   padding: 10px;
   width: 120px;
@@ -434,14 +458,14 @@ td.federation-data {
   max-height: 80px;
 }
 
-/* forumlist widget */
-.forumlist-img {
+/* group list widget */
+.group-list-img {
   height: 20px;
   width: 20px;
   vertical-align: middle;
 }
 
-#forum-widget-collapse {
+#group-widget-collapse {
   opacity: 0.3;
 }
 
@@ -461,7 +485,7 @@ aside .help-aside-wrapper h1 {
   color: #ffffff;
 }
 
-#forum-widget-collapse:hover {
+#group-widget-collapse:hover {
   opacity: 1.0;
 }
 
@@ -591,7 +615,7 @@ img.invalid-src:after { vertical-align: top;}
   word-wrap: break-word;
 }
 
-#register-explicid-content {
+#register-explicit-content {
   font-weight: bold;
 }
 
@@ -652,3 +676,76 @@ body.dragging, body.dragging * {
 	border-left-color: black;
 	border-right: none;
 }
+
+span.required {
+	color: #c80000;
+}
+
+audio {
+  width: 100%;
+}
+
+/**
+ * Image grid settings START
+ **/
+.imagegrid-row {
+	display: -ms-flexbox; /* IE10 */
+	display: flex;
+	margin-top: 1em;
+	column-gap: 5px;
+}
+
+.imagegrid-column {
+	-ms-flex: 50%; /* IE10 */
+	flex: 50%;
+	display: -ms-flexbox; /* IE10 */
+	display: flex;
+	flex-direction: column;
+	row-gap: 5px;
+}
+
+.imagegrid-column img {
+	-ms-flex: 50%; /* IE10 */
+	flex: 50%;
+}
+/**
+ * Image grid settings END
+ **/
+
+/* This helps allocating space for image before they are loaded, preventing content shifting once they are.
+ * Inspired by https://www.smashingmagazine.com/2016/08/ways-to-reduce-content-shifting-on-page-load/
+ * Please note: The space is effectively allocated using padding-bottom using the image ratio as a value.
+ * This ratio is never known in advance so no value is set in the stylesheet.
+ */
+figure.img-allocated-height {
+	position: relative;
+	background: center / auto rgba(0, 0, 0, 0.05) url(/images/icons/image.png) no-repeat;
+	margin: 0;
+}
+figure.img-allocated-height img{
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	width: 100%;
+}
+
+/**
+ * Horizontal masonry settings START
+ **/
+.masonry-row {
+	display: -ms-flexbox; /* IE10 */
+	display: flex;
+	/* Both the following values should be the same to ensure consistent margins between images in the grid */
+	column-gap: 5px;
+	margin-top: 5px;
+}
+/**
+ * Horizontal masonry settings AND
+ **/
+
+#contactblock .icon {
+	width: 48px;
+	height: 48px;
+}