diff --git a/program/include/rcmail.php b/program/include/rcmail.php index 5c37fdc89..c1c08e4c5 100644 --- a/program/include/rcmail.php +++ b/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); diff --git a/program/js/editor.js b/program/js/editor.js index ee5d935fe..91123defd 100644 --- a/program/js/editor.js +++ b/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', diff --git a/program/resources/tinymce/content.css b/program/resources/tinymce/content.css index 0ad246ea0..a3bb5aada 100644 --- a/program/resources/tinymce/content.css +++ b/program/resources/tinymce/content.css @@ -6,7 +6,7 @@ body, td, pre { } body { - background-color: #FFFFFF; + background-color: #fff; margin: 4px; } diff --git a/skins/elastic/meta.json b/skins/elastic/meta.json index a4cf87034..c35c85f8b 100644 --- a/skins/elastic/meta.json +++ b/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" } } diff --git a/skins/elastic/styles/embed.less b/skins/elastic/styles/embed.less index e37a530a1..58a2fff02 100644 --- a/skins/elastic/styles/embed.less +++ b/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 (reference) "mixins"; +@import "global"; -@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'); -} +.mce-content-body { + margin: 4px; + color: @color-input; -@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'); -} + div.pre { + font-family: monospace; + } -@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+ + blockquote { + border-left: #1010ff 2px solid; + margin: 0; + padding: 0 0.4em; + } } .rcmail-inline-message { diff --git a/skins/elastic/styles/global.less b/skins/elastic/styles/global.less new file mode 100644 index 000000000..30e62c3ca --- /dev/null +++ b/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; + } +} diff --git a/skins/elastic/styles/styles.less b/skins/elastic/styles/styles.less index 8a7766d46..591220a64 100644 --- a/skins/elastic/styles/styles.less +++ b/skins/elastic/styles/styles.less @@ -9,117 +9,7 @@ * 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; - } -} - +@import "global"; @import "layout"; @import "widgets/common"; @import "widgets/buttons";