studio html editor - revised header styles for editing/displaying HTML…

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;

cms/templates/edit-static-page.html

@@ -20,7 +20,7 @@
     </div>
     <div class="sidebar">
       <div class="unit-settings window">
-        <h4>Page Settings</h4>
+        <h4 class="header">Page Settings</h4>
         <div class="window-contents">
           <div class="row visibility">
             <label class="inline-label">Visibility:</label>

cms/templates/edit_subsection.html

@@ -48,7 +48,7 @@
 
     <div class="sidebar">
       <div class="unit-settings window id-holder" data-id="${subsection.location}">
-    <h4>Subsection Settings</h4>
+    <h4 class="header">Subsection Settings</h4>
     <div class="window-contents">
       <div class="scheduled-date-input row">
         <label>Release date:<!-- <span class="description">Determines when this subsection and the units within it will be released publicly.</span>--></label>

cms/templates/unit.html

@@ -98,7 +98,7 @@
 
       <div class="sidebar">
         <div class="unit-settings window">
-          <h4>Unit Settings</h4>
+          <h4 class="header">Unit Settings</h4>
           <div class="window-contents">
             <div class="row visibility">
               <label class="inline-label">Visibility:</label>
@@ -126,7 +126,7 @@
           </div>
         </div>
         <div class="window unit-location">
-          <h4>Unit Location</h4>
+          <h4 class="header">Unit Location</h4>
           <div class="window-contents">
             <div><input type="text" class="url" value="/courseware/${section.url_name}/${subsection.url_name}" disabled /></div>
             <ol>

common/lib/xmodule/xmodule/css/html/display.scss

@@ -7,6 +7,7 @@ h1 {
     color: $baseFontColor;
     font: normal 2em/1.4em $sans-serif;
     letter-spacing: 1px;
+    margin: 0 0 1.416em 0;
   }
 
 h2 {
@@ -18,9 +19,25 @@ 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 {
@@ -74,4 +91,23 @@ code {
   color: $baseFontColor;
   font-family: monospace, serif;
   background: none;
+}
+
+table {
+  width: 100%; 
+  border-collapse: collapse;
+  font-size: 16px;
+}
+
+th { 
+  background: #eee; 
+  font-weight: bold; 
+}
+
+table td, th { 
+  margin: 20px 0;
+  padding: 10px; 
+  border: 1px solid #ccc !important; 
+  text-align: left;
+  font-size: 14px;
 }
\ No newline at end of file