Elastic: Add style for HTML editor content (use embed.css for this)

program/include/rcmail.php

@@ -1978,6 +1978,7 @@ class rcmail extends rcube
 
         $lang_codes = array($_SESSION['language']);
         $assets_dir = $this->config->get('assets_dir') ?: INSTALL_PATH;
+        $skin_path  = $this->output->get_skin_path();
 
         if ($pos = strpos($_SESSION['language'], '_')) {
             $lang_codes[] = substr($_SESSION['language'], 0, $pos);
@@ -1997,15 +1998,20 @@ class rcmail extends rcube
         $config = array(
             'mode'       => $mode,
             'lang'       => $lang,
-            'skin_path'  => $this->output->get_skin_path(),
+            'skin_path'  => $skin_path,
             'spellcheck' => $spellcheck, // deprecated
             'spelldict'  => $spelldict,
+            'content_css'      => 'program/resources/tinymce/content.css',
             'disabled_plugins' => $hook['disabled_plugins'],
             'disabled_buttons' => $hook['disabled_buttons'],
             'extra_plugins'    => $hook['extra_plugins'],
             'extra_buttons'    => $hook['extra_buttons'],
         );
 
+        if ($path = $this->config->get('editor_css_location')) {
+            $config['content_css'] = $skin_path . $path;
+        }
+
         $this->output->add_label('selectimage', 'addimage', 'selectmedia', 'addmedia');
         $this->output->set_env('editor_config', $config);
 

program/js/editor.js

@@ -42,7 +42,7 @@ function rcube_text_editor(config, id)
       cache_suffix: 's=4080200',
       theme: 'modern',
       language: config.lang,
-      content_css: rcmail.assets_path('program/resources/tinymce/content.css'),
+      content_css: rcmail.assets_path(config.content_css),
       menubar: false,
       statusbar: false,
       toolbar_items_size: 'small',

program/resources/tinymce/content.css

@@ -6,7 +6,7 @@ body, td, pre {
 }
 
 body {
-	background-color: #FFFFFF;
+	background-color: #fff;
 	margin: 4px;
 }
 

skins/elastic/meta.json

@@ -7,6 +7,7 @@
 		"layout": "widescreen",
 		"jquery_ui_colors_theme": "bootstrap",
 		"embed_css_location": "/styles/embed.css",
+		"editor_css_location": "/styles/embed.css",
 		"media_browser_css_location": "none"
 	}
 }

skins/elastic/styles/embed.less

@@ -9,34 +9,23 @@
  * See http://creativecommons.org/licenses/by-sa/3.0/ for details.
  */
 
-/* Style for embedded inline warning */
+/* Style for embedded pages and TinyMCE editor content page */
 
-@import (reference) "variables";
+@import "global";
-@import (reference) "mixins";
 
-@font-face {
+.mce-content-body {
-  font-family: 'Icons';
+    margin: 4px;
-  font-style: normal;
+    color: @color-input;
-  font-weight: 900;
-  src: url("../fonts/fa-solid-900.woff2") format('woff2'),
-       url("../fonts/fa-solid-900.woff") format('woff');
-}
 
-@font-face {
+    div.pre {
-  font-family: 'Icons';
+        font-family: monospace;
-  font-style: normal;
+    }
-  font-weight: 400;
-  src: url("../fonts/fa-regular-400.woff2") format('woff2'),
-       url("../fonts/fa-regular-400.woff") format('woff');
-}
 
-@font-face {
+    blockquote {
-  font-family: 'Roboto';
+        border-left: #1010ff 2px solid;
-  font-style: normal;
+        margin: 0;
-  font-weight: 400;
+        padding: 0 0.4em;
-  src: local('Roboto'), local('Roboto-Regular'),
+    }
-       url('../fonts/roboto-v18-greek-ext_cyrillic-ext_cyrillic_greek_latin-ext_latin-regular.woff2') format('woff2'), // Chrome 26+, Opera 23+, Firefox 39+
-       url('../fonts/roboto-v18-greek-ext_cyrillic-ext_cyrillic_greek_latin-ext_latin-regular.woff') format('woff'); // Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+
 }
 
 .rcmail-inline-message {

skins/elastic/styles/global.less

@@ -0,0 +1,121 @@
+/**
+ * Roundcube webmail styles for the Elastic skin
+ *
+ * Copyright (c) 2017-2018, The Roundcube Dev Team
+ *
+ * The contents are subject to the Creative Commons Attribution-ShareAlike
+ * License. It is allowed to copy, distribute, transmit and to adapt the work
+ * by keeping credits to the original authors in the README.md file.
+ * See http://creativecommons.org/licenses/by-sa/3.0/ for details.
+ */
+
+@import (reference) "variables";
+@import (reference) "mixins";
+
+/*** Fonts ***/
+
+@font-face {
+  font-family: 'Icons';
+  font-style: normal;
+  font-weight: 900;
+  src: url("../fonts/fa-solid-900.woff2") format('woff2'),
+       url("../fonts/fa-solid-900.woff") format('woff');
+}
+
+@font-face {
+  font-family: 'Icons';
+  font-style: normal;
+  font-weight: 400;
+  src: url("../fonts/fa-regular-400.woff2") format('woff2'),
+       url("../fonts/fa-regular-400.woff") format('woff');
+}
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'),
+       url('../fonts/roboto-v18-greek-ext_cyrillic-ext_cyrillic_greek_latin-ext_latin-regular.woff2') format('woff2'), // Chrome 26+, Opera 23+, Firefox 39+
+       url('../fonts/roboto-v18-greek-ext_cyrillic-ext_cyrillic_greek_latin-ext_latin-regular.woff') format('woff'); // Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+
+}
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 400;
+  src: local('Roboto Italic'), local('Roboto-Italic'),
+       url('../fonts/roboto-v18-greek-ext_cyrillic-ext_cyrillic_greek_latin-ext_latin-italic.woff2') format('woff2'), // Chrome 26+, Opera 23+, Firefox 39+
+       url('../fonts/roboto-v18-greek-ext_cyrillic-ext_cyrillic_greek_latin-ext_latin-italic.woff') format('woff'); // Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+
+}
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Roboto Bold'), local('Roboto-Bold'),
+       url('../fonts/roboto-v18-greek-ext_cyrillic-ext_cyrillic_greek_latin-ext_latin-700.woff2') format('woff2'), // Chrome 26+, Opera 23+, Firefox 39+
+       url('../fonts/roboto-v18-greek-ext_cyrillic-ext_cyrillic_greek_latin-ext_latin-700.woff') format('woff'); // Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+
+}
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 700;
+  src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'),
+       url('../fonts/roboto-v18-greek-ext_cyrillic-ext_cyrillic_greek_latin-ext_latin-700italic.woff2') format('woff2'), // Chrome 26+, Opera 23+, Firefox 39+
+       url('../fonts/roboto-v18-greek-ext_cyrillic-ext_cyrillic_greek_latin-ext_latin-700italic.woff') format('woff'); // Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+
+}
+
+/* E.g. for animated 'loading' icon */
+
+@-webkit-keyframes fa-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+@keyframes fa-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+
+
+/* Reset some Bootstrap style */
+
+body, button, input, optgroup, select, textarea, .popover {
+    .font-family;
+}
+
+button, input, select, textarea {
+    line-height: initial;
+}
+
+input {
+    vertical-align: middle;
+}
+
+a {
+    color: @color-link;
+
+    &:hover {
+        color: @color-link-hover;
+    }
+
+    &.disabled {
+        pointer-events: none;
+    }
+
+    &.disabled:not(.btn) {
+        opacity: .5;
+    }
+}

skins/elastic/styles/styles.less

@@ -9,117 +9,7 @@
  * See http://creativecommons.org/licenses/by-sa/3.0/ for details.
  */
 
-@import (reference) "variables";
+@import "global";
-@import (reference) "mixins";
-
-/*** Fonts ***/
-
-@font-face {
-  font-family: 'Icons';
-  font-style: normal;
-  font-weight: 900;
-  src: url("../fonts/fa-solid-900.woff2") format('woff2'),
-       url("../fonts/fa-solid-900.woff") format('woff');
-}
-
-@font-face {
-  font-family: 'Icons';
-  font-style: normal;
-  font-weight: 400;
-  src: url("../fonts/fa-regular-400.woff2") format('woff2'),
-       url("../fonts/fa-regular-400.woff") format('woff');
-}
-
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Roboto'), local('Roboto-Regular'),
-       url('../fonts/roboto-v18-greek-ext_cyrillic-ext_cyrillic_greek_latin-ext_latin-regular.woff2') format('woff2'), // Chrome 26+, Opera 23+, Firefox 39+
-       url('../fonts/roboto-v18-greek-ext_cyrillic-ext_cyrillic_greek_latin-ext_latin-regular.woff') format('woff'); // Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+
-}
-
-@font-face {
-  font-family: 'Roboto';
-  font-style: italic;
-  font-weight: 400;
-  src: local('Roboto Italic'), local('Roboto-Italic'),
-       url('../fonts/roboto-v18-greek-ext_cyrillic-ext_cyrillic_greek_latin-ext_latin-italic.woff2') format('woff2'), // Chrome 26+, Opera 23+, Firefox 39+
-       url('../fonts/roboto-v18-greek-ext_cyrillic-ext_cyrillic_greek_latin-ext_latin-italic.woff') format('woff'); // Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+
-}
-
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 700;
-  src: local('Roboto Bold'), local('Roboto-Bold'),
-       url('../fonts/roboto-v18-greek-ext_cyrillic-ext_cyrillic_greek_latin-ext_latin-700.woff2') format('woff2'), // Chrome 26+, Opera 23+, Firefox 39+
-       url('../fonts/roboto-v18-greek-ext_cyrillic-ext_cyrillic_greek_latin-ext_latin-700.woff') format('woff'); // Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+
-}
-
-@font-face {
-  font-family: 'Roboto';
-  font-style: italic;
-  font-weight: 700;
-  src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'),
-       url('../fonts/roboto-v18-greek-ext_cyrillic-ext_cyrillic_greek_latin-ext_latin-700italic.woff2') format('woff2'), // Chrome 26+, Opera 23+, Firefox 39+
-       url('../fonts/roboto-v18-greek-ext_cyrillic-ext_cyrillic_greek_latin-ext_latin-700italic.woff') format('woff'); // Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+
-}
-
-/* E.g. for animated 'loading' icon */
-
-@-webkit-keyframes fa-spin {
-  0% {
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-  100% {
-    -webkit-transform: rotate(359deg);
-    transform: rotate(359deg);
-  }
-}
-@keyframes fa-spin {
-  0% {
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-  100% {
-    -webkit-transform: rotate(359deg);
-    transform: rotate(359deg);
-  }
-}
-
-
-/* Reset some Bootstrap style */
-
-body, button, input, optgroup, select, textarea, .popover {
-    .font-family;
-}
-
-button, input, select, textarea {
-    line-height: initial;
-}
-
-input {
-    vertical-align: middle;
-}
-
-a {
-    color: @color-link;
-
-    &:hover {
-        color: @color-link-hover;
-    }
-
-    &.disabled {
-        pointer-events: none;
-    }
-
-    &.disabled:not(.btn) {
-        opacity: .5;
-    }
-}
-
 @import "layout";
 @import "widgets/common";
 @import "widgets/buttons";