From aec7692d27d98cb0db0e5221631c889a74c3c0c8 Mon Sep 17 00:00:00 2001
From: Brian Talbot <btalbot@edx.org>
Date: Tue, 22 Jan 2013 15:51:12 -0500
Subject: [PATCH] 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                   | 23 ++++++++++-
 cms/static/sass/_base.scss                    |  2 +-
 cms/templates/edit-static-page.html           |  2 +-
 cms/templates/edit_subsection.html            |  2 +-
 cms/templates/unit.html                       |  4 +-
 .../lib/xmodule/xmodule/css/html/display.scss | 38 ++++++++++++++++++-
 6 files changed, 63 insertions(+), 8 deletions(-)

diff --git a/cms/static/css/tiny-mce.css b/cms/static/css/tiny-mce.css
index 35526f5192..5ded7b84ac 100644
--- a/cms/static/css/tiny-mce.css
+++ b/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 {
diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss
index c79458dbe0..6e5c547b87 100644
--- a/cms/static/sass/_base.scss
+++ b/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;
diff --git a/cms/templates/edit-static-page.html b/cms/templates/edit-static-page.html
index 04740a74af..02fe2308fa 100644
--- a/cms/templates/edit-static-page.html
+++ b/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>
diff --git a/cms/templates/edit_subsection.html b/cms/templates/edit_subsection.html
index d3b6f73f13..6ca4b95844 100644
--- a/cms/templates/edit_subsection.html
+++ b/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>
diff --git a/cms/templates/unit.html b/cms/templates/unit.html
index ef94d51576..f3a779604e 100644
--- a/cms/templates/unit.html
+++ b/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>
diff --git a/common/lib/xmodule/xmodule/css/html/display.scss b/common/lib/xmodule/xmodule/css/html/display.scss
index 0604e880e4..6b653f496e 100644
--- a/common/lib/xmodule/xmodule/css/html/display.scss
+++ b/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