Index: themes/bartik/color/preview.css =================================================================== RCS file: /cvs/drupal/drupal/themes/bartik/color/preview.css,v retrieving revision 1.1 diff -u -r1.1 preview.css --- themes/bartik/color/preview.css 6 Jul 2010 05:25:51 -0000 1.1 +++ themes/bartik/color/preview.css 6 Oct 2010 02:41:45 -0000 @@ -1,62 +1,200 @@ /* $Id: preview.css,v 1.1 2010/07/06 05:25:51 webchick Exp $ */ -/* Bring in the rest of the theme's CSS styles. */ -@import url("../css/style.css"); - -/* From color.css. */ -#preview, #preview-header { - background-color: #000000; -} -/* Undoing Seven's reset. */ -#preview #preview-header #preview-logo img { - border: 0; +/* ---------- Color form ----------- */ +#color_scheme_form #palette .form-item { + width: 25em; +} +#color_scheme_form #palette .form-item label { + width: 15em; } -/* ---------- Basic Preview Styles ----------- */ +/* ---------- Preview Styles ----------- */ +html.js #preview { + float: none !important; + clear: both; +} #preview { - width: 640px; overflow: hidden; - font-size: 1em; + font-size: 14px; + background-color: #fff; + line-height: 1.5; + word-wrap: break-word; + font-family: Georgia, "Times New Roman", Times, serif; } -#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 { + padding-top: 34px; + margin-bottom: 30px; + font-size: 1.821em; + color: #686868; + line-height: 1; + font-weight: normal; +} +#preview #main-menu { + padding: 0 15px 3px; + clear: both; +} +#preview #main-menu-links a { + color: #d9d9d9; + padding: 0.6em 1em 0.4em; +} +#preview #main-menu-links { + font-size: 0.929em; + margin: 0; + padding: 2px 0; + padding: 0; +} +#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 #preview-content, -#preview .sidebar { +#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 { + width: 210px; + margin-left: 15px; +} #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-sidebar h2 { + margin: 0 0 0.5em; + border-bottom: 1px solid #d6d6d6; + padding-bottom: 5px; + text-shadow: 0 1px 0 #fff; + font-size: 1.071em; + line-height: 1.2; + font-weight: normal; +} +#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-content .section, -.sidebar .section { - padding: 0 10px; +#preview #preview-main { + margin-top: 20px; + margin-bottom: 40px; +} +#preview #preview-page-title { + font-size: 2em; + line-height: 1; + font-weight: normal; + margin: 1em 0 0.5em; } #preview #footer-wrapper { - padding: 35px 20px 30px; + display: block !important; + padding: 20px 20px 25px; + color: #c0c0c0; + color: rgba(255,255,255,0.65); + font-size: 0.857em; +} +#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-firstcolumn, -#preview #footer-secondcolumn, -#preview #footer-thirdcolumn, -#preview #footer-fourthcolumn { +#preview #footer-wrapper .footer-column { padding: 0 10px; width: 220px; display: inline; - float: left; /* LTR */ + float: left; position: relative; } -#preview #footer { - width: 940px; +#preview #footer-wrapper .preview-block { + margin: 20px 0; + border: 1px solid #444; + border-color: rgba(255,255,255,0.1); + padding: 10px; +} +#preview #footer-columns .preview-block-menu { + margin: 0; + padding: 0; + border: none; +} +#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 { + padding-left: 0; + margin-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 { + display: block; + border-bottom: 1px solid #555; + border-color: rgba(255,255,255,0.15); + line-height: 1.2; + padding: 0.8em 2px 0.8em 20px; + text-indent: -15px; +} +#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; } Index: themes/bartik/color/preview.js =================================================================== RCS file: /cvs/drupal/drupal/themes/bartik/color/preview.js,v retrieving revision 1.1 diff -u -r1.1 preview.js --- themes/bartik/color/preview.js 6 Jul 2010 05:25:51 -0000 1.1 +++ themes/bartik/color/preview.js 6 Oct 2010 02:41:45 -0000 @@ -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); Index: themes/bartik/color/preview.html =================================================================== RCS file: /cvs/drupal/drupal/themes/bartik/color/preview.html,v retrieving revision 1.1 diff -u -r1.1 preview.html --- themes/bartik/color/preview.html 6 Jul 2010 05:25:51 -0000 1.1 +++ themes/bartik/color/preview.html 6 Oct 2010 02:41:45 -0000 @@ -1,105 +1,65 @@
+
-
- -
-
- Bartik + +
Bartik
+ +
+ +
+
+
+

Etiam est risus

+
+ Maecenas id porttitor Ut enim ad minim veniam, quis nostrudfelis. + Laboris nisi ut aliquip ex ea.
-
+
-
-
-
- -
+
Index: themes/bartik/css/style.css =================================================================== RCS file: /cvs/drupal/drupal/themes/bartik/css/style.css,v retrieving revision 1.22 diff -u -r1.22 style.css --- themes/bartik/css/style.css 5 Oct 2010 01:48:11 -0000 1.22 +++ themes/bartik/css/style.css 6 Oct 2010 02:41:45 -0000 @@ -2,8 +2,7 @@ /* ---------- Overall Specifications ---------- */ -body, -#preview { +body { background-color: #fff; line-height: 1.5; font-size: 87.5%; @@ -27,27 +26,18 @@ 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 @@ 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, @@ -255,31 +242,26 @@ position: static; width: auto; } -#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 @@ /* ------------------- Main ------------------- */ -#main, -#preview #preview-main { +#main { margin-top: 20px; margin-bottom: 40px; } @@ -523,16 +504,11 @@ .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; @@ -674,8 +650,7 @@ 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; @@ -1403,47 +1378,3 @@ #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; -}