#844734 by Jeff Burnz, tim.plunkett, dead_arm: Catch preview.css up to style.css changes so color.module changes are accurately reflected.

3 files changed, 232 insertions, 137 deletions

diff --git a/themes/bartik/color/preview.css b/themes/bartik/color/preview.css
index cb95c1960..6315f77a3 100644
--- a/themes/bartik/color/preview.css
+++ b/themes/bartik/color/preview.css
@@ -1,62 +1,198 @@
 /* $Id$ */
 
-/* Bring in the rest of the theme's CSS styles. */
-@import url("../css/style.css");
-
-/* From color.css. */
-#preview, #preview-header {
-  background-color: #000000;
+/* ---------- Color form ----------- */
+#color_scheme_form #palette .form-item {
+  width: 25em;
 }
-/* Undoing Seven's reset. */
-#preview #preview-header #preview-logo img {
-  border: 0;
+#color_scheme_form #palette .form-item label {
+  width: 15em;
 }
 
-/* ---------- Basic Preview Styles ----------- */
+/* ---------- Preview Styles ----------- */
 
+html.js #preview {
+  clear: both;
+  float: none !important;
+}
 #preview {
-  width: 640px;
+  background-color: #fff;
+  font-family: Georgia, "Times New Roman", Times, serif;
+  font-size: 14px;
+  line-height: 1.5;
   overflow: hidden;
-  font-size: 1em;
+  word-wrap: break-word;
 }
-#preview #preview-header div.section,
-#preview #preview-navigation div.section,
-#preview #preview-featured div.section,
-#preview #preview-main {
-  width: 960px;
-  margin-left: auto;
-  margin-right: auto;
-  padding: 0 20px;
+#preview #preview-header {
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  position: relative;
+}
+#preview #preview-logo {
+  float: left;
+  padding: 15px 30px 15px 10px;
+}
+#preview #preview-site-name {
+  color: #686868;
+  font-weight: normal;
+  line-height: 1;
+  margin-bottom: 30px;
+  padding-top: 34px;
+}
+#preview #main-menu {
+  clear: both;
+  padding: 0 15px 3px;
+}
+#preview #main-menu-links a {
+  color: #d9d9d9;
+  padding: 0.6em 1em 0.4em;
+}
+#preview #main-menu-links {
+  font-size: 0.929em;
+  margin: 0;
+  padding: 0;
 }
-#preview #preview-content,
-#preview .sidebar {
+#preview #main-menu-links a {
+  color: #333;
+  background: #ccc;
+  background: rgba(255, 255, 255, 0.7);
+  text-shadow: 0 1px #eee;
+  -khtml-border-radius-topleft: 8px;
+  -moz-border-radius-topleft: 8px;
+  -webkit-border-top-left-radius: 8px;
+  border-top-left-radius: 8px;
+  -khtml-border-radius-topright: 8px;
+  -moz-border-radius-topright: 8px;
+  -webkit-border-top-right-radius: 8px;
+  border-top-right-radius: 8px;
+}
+#preview #main-menu-links a:hover,
+#preview #main-menu-links a:focus {
+  background: #fff;
+  background: rgba(255, 255, 255, 0.95);
+}
+#preview #main-menu-links a:active {
+  background: #b3b3b3;
+  background: rgba(255, 255, 255, 1);
+}
+#preview #main-menu-links li a.active {
+  border-bottom: none;
+}
+#preview #main-menu-links li {
   display: inline;
-  float: left; /* LTR */
+  list-style-type: none;
+  padding: 0.6em 0 0.4em;
+}
+#preview #preview-sidebar,
+#preview #preview-content {
+  display: inline;
+  float: left;
   position: relative;
 }
+#preview #preview-sidebar {
+  margin-left: 15px;
+  width: 210px;
+}
 #preview #preview-content {
-  width: 720px;
+  margin-left: 30px;
+  width: 26.5em;
 }
-#preview .sidebar {
-  width: 240px;
+#preview #preview-sidebar .preview-block {
+  border: 1px solid;
+  margin: 20px 0;
+  padding: 15px 20px;
 }
-#preview #preview-content .section,
-.sidebar .section {
-  padding: 0 10px;
+#preview #preview-sidebar h2 {
+  border-bottom: 1px solid #d6d6d6;
+  font-size: 1.071em;
+  font-weight: normal;
+  line-height: 1.2;
+  margin: 0 0 0.5em;
+  padding-bottom: 5px;
+  text-shadow: 0 1px 0 #fff;
+}
+#preview .preview-block .preview-content {
+  margin-top: 1em;
+}
+#preview .preview-block-menu .preview-content,
+#preview .preview-block-menu .preview-content ul {
+  margin-top: 0;
+}
+#preview #preview-main {
+  margin-bottom: 40px;
+  margin-top: 20px;
+}
+#preview #preview-page-title {
+  font-size: 2em;
+  font-weight: normal;
+  line-height: 1;
+  margin: 1em 0 0.5em;
 }
 #preview #footer-wrapper {
-  padding: 35px 20px 30px;
+  color: #c0c0c0;
+  color: rgba(255, 255, 255, 0.65);
+  display: block !important;
+  font-size: 0.857em;
+  padding: 20px 20px 25px;
 }
-#preview #footer-firstcolumn,
-#preview #footer-secondcolumn,
-#preview #footer-thirdcolumn,
-#preview #footer-fourthcolumn {
-  padding: 0 10px;
-  width: 220px;
+#preview #footer-wrapper a {
+  color: #fcfcfc;
+  color: rgba(255, 255, 255, 0.8);
+}
+#preview #footer-wrapper a:hover,
+#preview #footer-wrapper a:focus {
+  color: #fefefe;
+  color: rgba(255, 255, 255, 0.95);
+  text-decoration: underline;
+}
+#preview #footer-wrapper .footer-column {
   display: inline;
-  float: left; /* LTR */
+  float: left;
+  padding: 0 10px;
   position: relative;
+  width: 220px;
+}
+#preview #footer-wrapper .preview-block {
+  border: 1px solid #444;
+  border-color: rgba(255,255,255,0.1);
+  margin: 20px 0;
+  padding: 10px;
+}
+#preview #footer-columns .preview-block-menu {
+  border: none;
+  margin: 0;
+  padding: 0;
+}
+#preview #footer-columns h2 {
+  border-bottom: 1px solid #555;
+  border-color: rgba(255, 255, 255, 0.15);
+  font-size: 1em;
+  margin-bottom: 0;
+  padding-bottom: 3px;
+  text-transform: uppercase;
+}
+#preview #footer-columns .preview-content {
+  margin-top: 0;
+}
+#preview #footer-columns .preview-content ul {
+  margin-left: 0;
+  padding-left: 0;
+}
+#preview #footer-columns .preview-content li {
+  list-style: none;
+  list-style-image: none;
+  margin: 0;
+  padding: 0;
+}
+#preview #footer-columns .preview-content li a {
+  border-bottom: 1px solid #555;
+  border-color: rgba(255, 255, 255, 0.15);
+  display: block;
+  line-height: 1.2;
+  padding: 0.8em 2px 0.8em 20px;
+  text-indent: -15px;
 }
-#preview #footer {
-  width: 940px;
+#preview #footer-columns .preview-content li a:hover,
+#preview #footer-columns .preview-content li a:focus {
+  background-color: #1f1f21;
+  background-color: rgba(255,255,255,.05);
+  text-decoration: none;
 }
diff --git a/themes/bartik/color/preview.html b/themes/bartik/color/preview.html
index 13537edad..0bb18db41 100644
--- a/themes/bartik/color/preview.html
+++ b/themes/bartik/color/preview.html
@@ -1,105 +1,65 @@
 <div id="preview">
+
   <div id="preview-header">
-    <div class="section clearfix">
-      <a href="/" title="Home" rel="home" id="preview-logo" name="logo"><img src="../../../themes/bartik/logo.png" alt="Home" /></a>
-      <div id="preview-name-and-slogan">
-        <div id="preview-site-name">
-          <strong><a href="#" title="Home" rel="home"><span>Bartik</span></a></strong>
-        </div>
-      </div><!-- /#name-and-slogan -->
+    <div id="preview-logo"><img src="../../../themes/bartik/logo.png" alt="Site Logo" /></div>
+    <div id="preview-site-name">Bartik</div>
+    <div id="main-menu">
+      <ul id="main-menu-links">
+        <li><a>Home</a></li>
+        <li><a>Te Quidne</a></li>
+        <li><a>Vel Torqueo Quae Erat</a></li>
+      </ul>
     </div>
-  </div><!-- /.section, /#header -->
-  <div id="preview-main-wrapper">
-    <div id="preview-main" class="clearfix">
-      <div id="preview-sidebar-first" class="column sidebar">
-        <div class="section">
-          <div class="region region-sidebar-first">
-            <div id="preview-block-user-login" class="block block-user first last even">
-              <h2>
-                Etiam est risus
-              </h2>
-              <div class="content">
-                <p>
-                  Maecenas id porttitor felis. Pellentesque mollis urna in nibh pharetra semper. Nulla erat odio, imperdiet quis cursus vitae, ultricies
-                  at diam.
-                </p>
-              </div>
-            </div>
-          </div>
+  </div>
+
+  <div id="preview-main" class="clearfix">
+    <div id="preview-sidebar">
+      <div id="preview-block" class="preview-block">
+        <h2>Etiam est risus</h2>
+        <div class="preview-content">
+          Maecenas id porttitor Ut enim ad minim veniam, quis nostrudfelis.
+          Laboris nisi ut aliquip ex ea.
         </div>
-      </div><!-- /.section, /#sidebar-first -->
-      <div id="preview-content" class="column">
-        <div class="section">
-          <a id="preview-main-content" name="main-content"></a>
-          <h1 class="title" id="preview-page-title">
-            Lorem ipsum dolor
-          </h1>
-          <div class="region region-content">
-            <div id="preview-block-system-main" class="block block-system first last even">
-              <div class="content">
-                <div id="preview-node-1" class="node node-page clearfix" about="/node/1" typeof="foaf:Document">
-                  <div class="content clearfix">
-                    <div class="field field-name-body field-type-text-with-summary field-label-hidden clearfix">
-                      <div class="field-items">
-                        <div class="field-item even" property="content:encoded">
-                          <p>
-                            Sit amet, <a href="#">consectetur adipisicing elit</a>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-                            veniam, quis nostrud <a href="#">exercitation ullamco</a> laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
-                            in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
-                            sunt in culpa qui officia deserunt mollit anim id est laborum.
-                          </p>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
+      </div>
+    </div>
+    <div id="preview-content">
+      <h1 id="preview-page-title">Lorem ipsum dolor</h1>
+      <div id="preview-node">
+        <div class="preview-content">
+          Sit amet, <a>consectetur adipisicing elit</a>, sed do eiusmod tempor
+          incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
+          nostrud <a>exercitation ullamco</a> laboris nisi ut aliquip ex ea
+          commodo consequat. Maecenas id porttitor Ut enim ad minim veniam, quis nostr udfelis.
         </div>
-      </div><!-- /.section, /#content -->
+      </div>
     </div>
-  </div><!-- /#main, /#main-wrapper -->
+  </div>
 
-  <div id="footer-wrapper"><div class="section">
-      <div id="footer-columns" class="clearfix">
-          <div id="footer-firstcolumn" class="region sitemap"><div class="section">
+  <div id="footer-wrapper">
+    <div id="footer-columns" class="clearfix">
+      <div class="footer-column">
+        <div class="preview-block">
+          <h2>Etiam est risus</h2>
+          <div class="content">
+            Maecenas id porttitor Ut enim ad minim veniam, quis nostrudfelis.
+            Laboris nisi ut aliquip ex ea.
+          </div>
+        </div>
+      </div>
+      <div class="footer-column">
+        <div class="preview-block preview-block-menu">
+          <h2>Erisus dolor</h2>
+          <div class="preview-content">
             <ul>
               <li><a>Donec placerat</a></li>
               <li><a>Nullam nibh dolor</a></li>
               <li><a>Blandit sed</a></li>
               <li><a>Fermentum id</a></li>
             </ul>
-          </div></div> <!-- /.section, /#footer-firstcolumn -->
-          <div id="footer-secondcolumn" class="region sitemap"><div class="section">
-            <ul>
-              <li><a>Imperdiet sit amet</a></li>
-              <li><a>Nam mollis</a></li>
-              <li><a>Ultrices justo</a></li>
-              <li><a>Sed tempor</a></li>
-              </ul>
-            <ul>
-          </div></div> <!-- /.section, /#footer-secondcolumn -->
-          <div id="footer-thirdcolumn" class="region sitemap"><div class="section">
-           <ul>
-              <li><a>Sit amet</a></li>
-              <li><a>Gravida eget</a></li>
-              <li><a>Porta at</a></li>
-              <li><a>Nam non</a></li>
-            </ul>
-          </div></div> <!-- /.section, /#footer-thirdcolumn -->
-          <div id="footer-fourthcolumn" class="region sitemap"><div class="section">
-            <ul>
-              <li><a>Sed vitae</a></li>
-              <li><a>Tellus</a></li>
-              <li><a>Etiam sem</a></li>
-              <li><a>Arcu eleifend</a></li>
-            </ul>
-          </div></div> <!-- /.section, /#footer-fourthcolumn -->
-      </div><!-- /#footer-columns -->
-      <div id="footer" class="clearfix">
-        Aliquam aliquet, est <a>a ullamcorper</a> condimentum.
-    </div><!-- /#footer -->
-  </div></div> <!-- /.section, /#footer-wrapper -->
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 
-</div><!-- /#preview -->
+</div>
diff --git a/themes/bartik/color/preview.js b/themes/bartik/color/preview.js
index 7365f6f55..00923c302 100644
--- a/themes/bartik/color/preview.js
+++ b/themes/bartik/color/preview.js
@@ -14,24 +14,23 @@
       $('#preview', form).css('backgroundColor', $('#palette input[name="palette[bg]"]', form).val());
 
       // Text preview.
-      $('#preview #preview-main h2, #preview #preview-main p', form).css('color', $('#palette input[name="palette[text]"]', form).val());
+      $('#preview #preview-main h2, #preview .preview-content', form).css('color', $('#palette input[name="palette[text]"]', form).val());
       $('#preview #preview-content a', form).css('color', $('#palette input[name="palette[link]"]', form).val());
 
-      // Sidebar background.
-      $('#preview .sidebar .block', form).css('background-color', $('#palette input[name="palette[sidebar]"]', form).val());
+      // Sidebar block.
+      $('#preview #preview-sidebar #preview-block', form).css('background-color', $('#palette input[name="palette[sidebar]"]', form).val());
+      $('#preview #preview-sidebar #preview-block', form).css('border-color', $('#palette input[name="palette[sidebarborders]"]', form).val());
 
-      // Footer background.
+      // Footer wrapper background.
       $('#preview #footer-wrapper', form).css('background-color', $('#palette input[name="palette[footer]"]', form).val());
 
-      $('#preview .sidebar .block', form).css('border-color', $('#palette input[name="palette[sidebarborders]"]', form).val());
-
       // CSS3 Gradients.
       var gradient_start = $('#palette input[name="palette[top]"]', form).val();
       var gradient_end = $('#palette input[name="palette[bottom]"]', form).val();
 
       $('#preview #preview-header', form).attr('style', "background-color: " + gradient_start + "; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(" + gradient_start + "), to(" + gradient_end + ")); background-image: -moz-linear-gradient(-90deg, " + gradient_start + ", " + gradient_end + ");");
 
-      $('#preview #preview-name-and-slogan a', form).css('color', $('#palette input[name="palette[titleslogan]"]', form).val());
+      $('#preview #preview-site-name', form).css('color', $('#palette input[name="palette[titleslogan]"]', form).val());
     }
   };
 })(jQuery);