Commit 7df9394c authored by webchick's avatar webchick

#844734 by Jeff Burnz, tim.plunkett, dead_arm: Catch preview.css up to...

#844734 by Jeff Burnz, tim.plunkett, dead_arm: Catch preview.css up to style.css changes so color.module changes are accurately reflected.
parent 818de3a6
/* $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;
}
<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>
......@@ -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);
......@@ -2,8 +2,7 @@
/* ---------- Overall Specifications ---------- */
body,
#preview {
body {
background-color: #fff;
line-height: 1.5;
font-size: 87.5%;
......@@ -27,27 +26,18 @@ h2,
h3,
h4,
h5,
h6,
#preview h1,
#preview h2,
#preview h3,
#preview h4,
#preview h5,
#preview h6 {
h6 {
margin: 1.0em 0 0.5em;
font-weight: inherit;
}
h1,
#preview h1 {
h1 {
font-size: 1.357em;
color: #000;
}
h2,
#preview h2 {
h2 {
font-size: 1.143em;
}
p,
#preview p {
p {
margin: 0 0 1.2em;
}
del {
......@@ -56,22 +46,19 @@ del {
tr.odd {
background-color: #dddddd;
}
img,
#preview img {
img {
outline: 0;
}
/* ------------------ Fonts ------------------ */
body,
#preview,
#header #site-slogan,
#site-slogan,
.ui-widget {
font-family: Georgia, "Times New Roman", Times, serif;
}
#header,
#footer-wrapper,
#preview #preview-header,
#skip-link,
ul.contextual-links,
ul.links,
......@@ -250,31 +237,26 @@ ul.tips {
#skip-link a:focus {
outline: 0;
}
#logo,
#preview #preview-header #preview-logo {
#logo {
float: left; /* LTR */
padding: 15px 30px 15px 10px; /* LTR */
}
#name-and-slogan {
float: left; /* LTR */
}
#name-and-slogan,
#preview #preview-header #preview-name-and-slogan {
#name-and-slogan {
padding-top: 34px;
margin-bottom: 30px;
}
#site-name,
#preview #preview-header #preview-site-name {
#site-name {
font-size: 1.821em;
color: #686868;
line-height: 1;
}
h1#site-name,
#preview #preview-header h1#preview-site-name {
h1#site-name {
margin: 0;
}
#site-name a,
#preview-header #preview-site-name a {
#site-name a {
font-weight: normal;
}
#site-slogan {
......@@ -490,8 +472,7 @@ h1#site-name,
/* ------------------- Main ------------------- */
#main,
#preview #preview-main {
#main {
margin-top: 20px;
margin-bottom: 40px;
}
......@@ -523,16 +504,11 @@ h1#site-name,
.content {
margin-top: 10px;
}
#preview #preview-block-system-main {
line-height: 1.5;
}
h1#page-title,
#preview h1#preview-page-title {
h1#page-title {
font-size: 2em;
line-height: 1;
}
#content h2,
#preview #preview-block-system-main h2 {
#content h2 {
margin-bottom: 2px;
font-size: 1.429em;
line-height: 1.4;
......@@ -673,8 +649,7 @@ ul.links {
padding: 15px 20px;
margin: 0 0 20px;
}
.sidebar h2,
#preview .sidebar h2 {
.sidebar h2 {
margin: 0 0 0.5em;
border-bottom: 1px solid #d6d6d6;
padding-bottom: 5px;
......@@ -1465,47 +1440,3 @@ div.admin-panel .description {
#footer-wrapper .poll .bar .foreground {
background-color: #ddd;
}
/* ---------- Color Form ----------- */
.color-form #placeholder {
position: static;
width: 195px;
}
.overlay .color-form #placeholder {
position: absolute;
}
.color-form #palette {
margin-left: 20px; /* LTR */
}
.color-form .form-item {
border: 1px solid #fbfbfb;
margin: 0;
padding: .5em;
position: relative;
max-width: 350px;
-khtml-border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.color-form .form-item label {
float: left; /* LTR */
font-size: 1em;
width: 150px;
}
.color-form .form-item.item-selected {
background-color: #eeeeee;
border: 1px solid #cfcfcf;
}
.color-form #palette .lock {
position: absolute;
top: 5px;
left: -20px; /* LTR */
}
.color-form #preview {
font-size: 0.857em;
}
.overlay #preview #footer-wrapper {
display: block;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment