Improved shared Posts CSS

Fix Preview CSS

app/widgets/Post/_post_reply.tpl

@@ -1,3 +1,4 @@
+<br />
 <hr />
 {if="$reply != null"}
     <ul class="list thick active recessed"
@@ -5,24 +6,24 @@
         <li>
             {if="$reply->picture"}
                 <span
-                    class="primary icon bubble color white"
+                    class="primary icon gray"
                     style="background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 100%), url({$reply->picture});">
-                    <i class="material-icons">share</i>
+                    <i class="material-icons flip-hor">reply</i>
                 </span>
             {elseif="$reply->isMicroblog() && $reply->contact"}
                 {$url = $reply->contact->getPhoto('l')}
                 {if="$url"}
-                    <span class="primary icon bubble color white" style="background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 100%), url({$url});">
-                        <i class="material-icons">share</i>
+                    <span class="primary icon gray" style="background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 100%), url({$url});">
+                        <i class="material-icons">reply</i>
                     </span>
                 {else}
-                    <span class="primary icon bubble color {$reply->contact->jid|stringToColor}">
-                        <i class="material-icons">share</i>
+                    <span class="primary icon gray {$reply->contact->jid|stringToColor}">
+                        <i class="material-icons">reply</i>
                     </span>
                 {/if}
             {/if}
             <span class="control icon gray">
-                <i class="material-icons">chevron-right</i>
+                <i class="material-icons">chevron_right</i>
             </span>
             <p class="normal line">{$reply->title}</p>
             <p>{$reply->getContent()|html_entity_decode|stripTags}</p>

app/widgets/Preview/preview.css

@@ -29,8 +29,9 @@
 
 /* Previewable */
 .previewable {
-    display: inline-block;
+    display: block;
     position: relative;
+    overflow: hidden;
 }
 
 .previewable img {
@@ -39,6 +40,10 @@
     overflow: hidden;
 }
 
+article section content .previewable img.big_picture {
+    margin-bottom: 0;
+}
+
 .previewable:hover img {
     opacity: 0.6;
 }

public/theme/css/style.css

@@ -395,7 +395,7 @@ img.avatar:not([src=""]) + .placeholder {
 }
 
 .recessed {
-    opacity: 0.75;
+    opacity: 0.9;
 }
 
 .disabled {

public/theme/fonts/MaterialIcons/font.css

@@ -37,3 +37,15 @@
   /* Support for IE. */
   font-feature-settings: 'liga';
 }
+
+.material-icons.flip-hor {
+  transform: scale(-1, 1);
+}
+
+.material-icons.flip-vert {
+  transform: scale(1, -1);
+}
+
+.material-icons.flip-hor.flip-vert {
+  transform: scale(-1, -1);
+}