studio html editor - revised header styles for editing/displaying HTML components (including separating studio editing chrome from style rules)

cms/static/css/tiny-mce.css

@@ -21,6 +21,7 @@ h1 {
   font-size: 2em;
   line-height: 1.4em;
   letter-spacing: 1px;
+  margin: 0 0 1.416em 0;
 }
 
 h2 {
@@ -34,16 +35,32 @@ h2 {
   -webkit-font-smoothing: antialiased;
 }
 
+h3, h4, h5, h6 {
+  margin: 0 0 10px 0;
+  font-weight: 600;
+}
+
 h3 {
   font-size: 1.2em;
-  font-weight: 600;
+}
+
+h4 {
+  font-size: 1em;
+}
+
+h5 {
+  font-size: .83em;
+}
+
+h6 {
+  font-size: 0.75em;
 }
 
 p {
   margin-bottom: 1.416em;
   font-size: 1em;
   line-height: 1.6em !important;
-  color: $baseFontColor;
+  color: #3c3c3c;
 }
 
 em, i {
@@ -61,6 +78,7 @@ p + p, ul + p, ol + p {
 ol, ul {
   margin: 1em 0;
   padding: 0 0 0 1em;
+  color: #3c3c3c;
 }
 
 ol li, ul li {
@@ -86,6 +104,7 @@ img {
 code {
   font-family: monospace, serif;
   background: none;
+  color: #3c3c3c;
 }
 
 table {

cms/static/sass/_base.scss

@@ -199,7 +199,7 @@ code {
         padding: 20px;
     }
 
-    h4 {
+    .header {
         padding: 6px 14px;
         border-bottom: 1px solid $mediumGrey;
         border-radius: 2px 2px 0 0;