integrate styles for remote images

customize.dist/src/less2/include/markdown.less

@@ -156,21 +156,37 @@
     }
 
     div.cp-inline-img-warning {
+        @cryptpad_test_red_fader: fade(@cryptpad_color_red, 15%); // XXX
         display: inline-block;
         padding: 10px;
 
-        color: @cryptpad_text_col;
+        color: @cryptpad_text_col; // XXX
-        background-color: @cryptpad_color_red_fader;
+        background-color: @cryptpad_test_red_fader; // XXX @cryptpad_color_red_fader;
         border: 1px solid @cryptpad_color_red;
 
         .cp-inline-img {
             display: flex;
-            margin-bottom:10px;
+            margin-bottom: 10px;
         }
         .cp-alt-txt {
             margin-left: 10px;
             font-family: monospace;
             font-size: 0.8em;
+            color: fade(@cryptpad_text_col, 90%);
+        }
+        a {
+            color: @cryptpad_text_col;
+            font-size: 0.8em;
+            &.cp-remote-img::before {
+                font-family: FontAwesome;
+                //content: "\f08e\00a0";
+                content: "\f08e\00a0\00a0";
+            }
+            &.cp-learn-more::before {
+                font-family: FontAwesome;
+                content: "\f059\00a0";
+                //content: "\f059\00a0\00a0";
+            }
         }
     }
 }

www/common/diffMarked.js

@@ -314,11 +314,17 @@ define([
             h('br'),
             h('a.cp-remote-img', {
                 href: qualifiedHref(href),
-            }, Messages.resources_openInNewTab),
+            }, [
+                //h('i.fa.fa-external-link'), // XXX
+                Messages.resources_openInNewTab
+            ]),
             h('br'),
             h('a.cp-learn-more', {
                 href: 'https://docs.cryptpad.fr/en/user_guide/index.html?placeholder=remote_images', // XXX point to an actual page
-            }, Messages.resources_learnWhy),
+            }, [
+                //h('i.fa.fa-question-circle'), // XXX
+                Messages.resources_learnWhy
+            ]),
         ]);
 
         return warning.outerHTML;