From 473ed4cc897fe0771d4c5c8e80e9a7af619bf37b Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Tue, 1 Apr 2014 16:54:19 -0400 Subject: [PATCH] Studio: syncing up font-based styling between TinyMCE editing view and Studio HTML xmodule preview Separating and documenting tinyMCE font imports from customized vendor code and customized render styling css files (because font must load first in iframe). Add the TinyMCE font file to the CMS pipeline. --- cms/envs/common.py | 1 + common/static/css/tinymce-studio-content-fonts.css | 2 ++ common/static/css/tinymce-studio-content.css | 7 +++---- .../tinymce/js/tinymce/skins/studio-tmce4/content.min.css | 1 + 4 files changed, 7 insertions(+), 4 deletions(-) create mode 100644 common/static/css/tinymce-studio-content-fonts.css diff --git a/cms/envs/common.py b/cms/envs/common.py index a8b2fc1276..817fe27594 100644 --- a/cms/envs/common.py +++ b/cms/envs/common.py @@ -316,6 +316,7 @@ PIPELINE_CSS = { }, 'style-vendor-tinymce-content': { 'source_filenames': [ + 'css/tinymce-studio-content-fonts.css', 'js/vendor/tinymce/js/tinymce/skins/studio-tmce4/content.min.css', 'css/tinymce-studio-content.css' ], diff --git a/common/static/css/tinymce-studio-content-fonts.css b/common/static/css/tinymce-studio-content-fonts.css new file mode 100644 index 0000000000..0fc13697a4 --- /dev/null +++ b/common/static/css/tinymce-studio-content-fonts.css @@ -0,0 +1,2 @@ +/* NOTE: This file, which loads all necessary fonts for rendering Studio UI, is 1 of 3 CSS files compiled in our production pipeline */ +@import url(//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700); diff --git a/common/static/css/tinymce-studio-content.css b/common/static/css/tinymce-studio-content.css index 81598f8d01..cfe542239b 100644 --- a/common/static/css/tinymce-studio-content.css +++ b/common/static/css/tinymce-studio-content.css @@ -1,10 +1,9 @@ -@import url(//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700); - +/* NOTE: This file, which customizes mid-editing styling to match xmodule preview rendering, is 3 of 3 CSS files compiled in our production pipeline */ .mce-content-body { padding: 10px; background-color: #fff; font-family: 'Open Sans', Verdana, Arial, Helvetica, sans-serif; - font-size: 14px; + font-size: 16px; line-height: 1.6; color: #3c3c3c; scrollbar-3dlight-color: #F0F0EE; @@ -28,7 +27,7 @@ .mce-content-body h2 { color: #646464; - font-weight: normal; + font-weight: 300; font-size: 1.2em; line-height: 1.2em; letter-spacing: 1px; diff --git a/common/static/js/vendor/tinymce/js/tinymce/skins/studio-tmce4/content.min.css b/common/static/js/vendor/tinymce/js/tinymce/skins/studio-tmce4/content.min.css index c2e367f5b2..214e570d69 100755 --- a/common/static/js/vendor/tinymce/js/tinymce/skins/studio-tmce4/content.min.css +++ b/common/static/js/vendor/tinymce/js/tinymce/skins/studio-tmce4/content.min.css @@ -1 +1,2 @@ +/* NOTE: This file, which based off of TinyMCE's vendor content styling (but customized to help with scoping), is 2 of 3 CSS files compiled in our production pipeline */ .mce-content-body{background-color:#fff;font-family:Verdana,Arial,Helvetica,sans-serif;font-size:14px;scrollbar-3dlight-color:#f0f0ee;scrollbar-arrow-color:#676662;scrollbar-base-color:#f0f0ee;scrollbar-darkshadow-color:#ddd;scrollbar-face-color:#e0e0dd;scrollbar-highlight-color:#f0f0ee;scrollbar-shadow-color:#f0f0ee;scrollbar-track-color:#f5f5f5}.mce-content-body td,.mce-content-body th{font-family:Verdana,Arial,Helvetica,sans-serif;font-size:11px}.mce-content-body .mce-object{border:1px dotted #3a3a3a;background:#d5d5d5 url(img/object.gif) no-repeat center}.mce-content-body .mce-pagebreak{cursor:default;display:block;width:100%;height:5px;border:1px dashed #666;margin-top:15px}.mce-content-body .mce-item-anchor{cursor:default;display:inline-block;-webkit-user-select:all;-webkit-user-modify:read-only;-moz-user-select:all;-moz-user-modify:read-only;user-select:all;user-modify:read-only;width:9px!important;height:9px!important;border:1px dotted #3a3a3a;background:#d5d5d5 url(img/anchor.gif) no-repeat center}.mce-content-body .mce-nbsp{background:#AAA}.mce-content-body hr{cursor:default}.mce-content-body .mce-match-marker{background:#AAA;color:#fff}.mce-content-body .mce-match-marker-selected{background:#39f;color:#fff}.mce-content-body .mce-spellchecker-word{background:url(img/wline.gif) repeat-x bottom left;cursor:default}.mce-content-body .mce-item-table,.mce-content-body .mce-item-table caption,.mce-content-body .mce-item-table td,.mce-content-body .mce-item-table th{border:1px dashed #BBB}.mce-content-body td.mce-item-selected,.mce-content-body th.mce-item-selected{background-color:#39f!important}.mce-content-body .mce-edit-focus{outline:1px dotted #333}