integrate styles for remote images

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

@@ -156,11 +156,12 @@
     }
 
     div.cp-inline-img-warning {
+        @cryptpad_test_red_fader: fade(@cryptpad_color_red, 15%); // XXX
         display: inline-block;
         padding: 10px;
 
-        color: @cryptpad_text_col;
-        background-color: @cryptpad_color_red_fader;
+        color: @cryptpad_text_col; // XXX
+        background-color: @cryptpad_test_red_fader; // XXX @cryptpad_color_red_fader;
         border: 1px solid @cryptpad_color_red;
 
         .cp-inline-img {
@@ -171,6 +172,21 @@
             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;