Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

ENHANCEMENT Installer styling, moving away from blackcandy

  • Loading branch information...
commit 4f23ac1722f7b2d9a23c02492353ca524c39b784 1 parent 6f76d42
Paul clarkepaul authored stojg committed
87 dev/install/config-form.html
View
@@ -1,36 +1,42 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
-<html>
+<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
+<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
+<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
+<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<title>SilverStripe CMS / Framework Installation</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<script type="text/javascript" src="sapphire/thirdparty/jquery/jquery.js"></script>
<script type="text/javascript" src="sapphire/dev/install/install.js"></script>
- <link rel="stylesheet" type="text/css" href="themes/blackcandy/css/layout.css">
- <link rel="stylesheet" type="text/css" href="themes/blackcandy/css/typography.css">
- <link rel="stylesheet" type="text/css" href="themes/blackcandy/css/form.css">
- <link rel="stylesheet" type="text/css" href="sapphire/dev/install/install.css">
+ <link rel="stylesheet" type="text/css" href="sapphire/dev/install/css/install.css">
<link rel="shortcut icon" href="favicon.ico">
</head>
<body>
<div id="BgContainer">
<div id="Container">
<div id="Header">
- <h1>SilverStripe CMS / Framework Installation</h1>
- <p>Version <?php echo $silverstripe_version; ?></p>
+ <h1>SilverStripe</h1>
+ <div class="left">
+ <h2>CMS / Framework Installation <small>Version <?php echo $silverstripe_version; ?></small></h2>
+ <p>Thanks for choosing to use SilverStripe! Please follow the instructions below and you should be up in running in no time.<br>
+ If you get stuck, head over to the <a href="http://silverstripe.org/installing-silverstripe" target="_blank">installation forum</a>, or check out our list of <a href="http://doc.silverstripe.org/doku.php?id=suggested-web-hosts" target="_blank">suggested web hosts</a> known to work with SilverStripe.
+ </p>
+ </div>
</div>
-
<div id="Navigation">&nbsp;</div>
<div class="clear"><!-- --></div>
<div id="Layout">
<div class="typography">
- <p>Thanks for choosing to use SilverStripe! Please follow the instructions below and you should be up in running in no time.<br>
- If you get stuck, head over to the <a href="http://silverstripe.org/installing-silverstripe" target="_blank">installation forum</a>, or check out our <a href="http://doc.silverstripe.org/doku.php?id=suggested-web-hosts" target="_blank">list of suggested web hosts</a> known to work with SilverStripe.
+ <!--
+<p>Thanks for choosing to use SilverStripe! Please follow the instructions below and you should be up in running in no time.<br>
+ If you get stuck, head over to the <a href="http://silverstripe.org/installing-silverstripe" target="_blank">installation forum</a>, or check out our list of <a href="http://doc.silverstripe.org/doku.php?id=suggested-web-hosts" target="_blank">suggested web hosts</a> known to work with SilverStripe.
</p>
+-->
<form action="install.php" method="post">
<?php if(isset($hasErrorOtherThanDatabase)) { ?>
- <p class="error">
+ <p class="message error">
You aren't currently able to install the software. Please <a href="#requirements">see below</a> for details.<br>
If you are having problems meeting the requirements, see the <a href="http://doc.silverstripe.org/doku.php?id=server-requirements">server requirements wiki page</a>.
</p>
@@ -39,47 +45,46 @@
<?php } ?>
<?php } else { ?>
<?php if($alreadyInstalled) { ?>
- <div class="warning">
+ <div class="message warning">
<p><strong>Note:</strong> SilverStripe is already installed here.<br>
If you wish to reinstall SilverStripe, please delete the <strong>mysite/_config.php</strong> file first.</p>
</div>
<?php } else if($req->hasWarnings()) { ?>
- <p class="warning">
- There are some issues that we recommend you look at before installing, however, you are still able to install the software.
- Please see below for details.<br>
- If you are having problems meeting the requirements, see the <a href="http://doc.silverstripe.org/doku.php?id=server-requirements">server requirements wiki page</a>.
- </p>
+ <div class="message warning">
+ <p>There are some issues that we recommend you look at before installing, however, you are still able to install the software. Please see below for details.<br>
+ If you are having problems meeting the requirements, see the <a href="http://doc.silverstripe.org/doku.php?id=server-requirements">server requirements wiki page</a>.</p>
+ </div>
<?php } else if(!$dbReq->hasErrors() && !$adminReq->hasErrors()) { ?>
- <p class="goodInstall"><em class="inlineBarText">You're ready to install! Please confirm the configuration options below.</em> <a href="#install">Install SilverStripe</a></p>
+ <div class="message goodInstall"><p>You're ready to install! Please confirm the configuration options below. <a href="#install">Install SilverStripe</a></p>
+ </div>
<?php } ?>
<?php if($dbReq->hasErrors()) { ?>
- <p class="error">
- The database details don't appear to be correct. Please <a href="#database_credentials">review and correct</a> before installing.
- </p>
+ <div class="message error">
+ <p>The database details don't appear to be correct. Please <a href="#database_credentials">review and correct</a> before installing.</p>
+ </div>
<?php } ?>
<?php if($adminReq->hasErrors()) { ?>
- <p class="error">
- Please <a href="#AdminAccount">enter an email address and password</a> for the default administrator account before installing.
- </p>
+ <div class="message error">
+ <p>Please <a href="#AdminAccount">enter an email address and password</a> for the default administrator account before installing.</p>
+ </div>
<?php } ?>
<?php } ?>
-
- <h4 id="requirements"><em class="inlineBarText">Requirements</em> <span>Step: 1 of 5</span></h4>
+ <h3 class="sectionHeading" id="requirements">Requirements <small>Step 1 of 5</small></h3>
<?php $req->showTable(); ?>
<?php $dbReq->showTable(); ?>
- <p>
+ <p class="helpText requirementsHelpText">
Read more about our <a href="http://doc.silverstripe.org/doku.php?id=server-requirements" target="_blank">server requirements</a>.
</p>
<div class="action">
<input type="submit" class="action" value="Re-check requirements">
</div>
-
- <h4 class="sectionHeading"><em class="inlineBarText">Database</em> <span>Step: 2 of 5</span></h4>
+ <div class="clear"><!-- --></div>
+ <h3 class="sectionHeading">Database Configuration <small>Step 2 of 5</small></h3>
<div id="database_credentials" class="section">
<?php $dbReq->showTable("Database Configuration"); ?>
@@ -126,7 +131,7 @@ <h4 class="sectionHeading"><em class="inlineBarText">Database</em> <span>Step: 2
echo "<input id=\"$class\" class=\"databaseClass\" type=\"radio\" name=\"db[type]\" value=\"$class\"$checked $disabled>";
echo "<label class=\"left\" ".($help || $disabled ? 'style="font-weight:normal;color:grey" ' : 'style="color:green"')."for=\"$class\">{$details['title']}</label>";
if ($help) {
- echo '<div class="error databaseError">'.$help.'</div>';
+ echo '<div class="message error databaseError"><p>'.$help.'</p></div>';
}
// generate db-specific config fields
@@ -193,7 +198,7 @@ <h4 class="sectionHeading"><em class="inlineBarText">Database</em> <span>Step: 2
<div class="clear"><!-- --></div>
- <h4><em class="inlineBarText">CMS Admin Account</em> <span>Step: 3 of 5</span></h4>
+ <h3 class="sectionHeading">CMS Admin Account <small>Step 3 of 5</small></h3>
<div id="AdminAccount" class="section">
@@ -220,8 +225,8 @@ <h4 class="sectionHeading"><em class="inlineBarText">Database</em> <span>Step: 2
"Default language" determines the default locale settings
(for dates, currencies, etc.), as well as the default language
of the CMS interface. This can be changed for each user.
- <br><br>
- Warning: The CMS interface may be missing translations in certain locales.
+ <br>
+ <strong>Warning:</strong> The CMS interface may be missing translations in certain locales.
</p>
<div class="field">
@@ -238,19 +243,17 @@ <h4 class="sectionHeading"><em class="inlineBarText">Database</em> <span>Step: 2
</select>
</span>
</div>
+ <div class="clear"><!-- --></div>
</div>
</div>
- <h4><em class="inlineBarText">Theme</em> <span>Step: 4 of 5</span></h4>
+ <h3 class="sectionHeading">Theme selection <small>Step 4 of 5</small></h3>
<p class="helpText">You can change the theme or <a href="http://silverstripe.org/themes">download</a> another from the SilverStripe website after installation.</p>
- <div class="field">
- <ul id="Themes">
- <li><input type="radio" name="template" value="blackcandy" id="BlackCandy" <?php if(!isset($_POST['template']) || $_POST['template'] == 'blackcandy') {?>checked="checked"<?php }?>><label for="BlackCandy"><a href="http://silverstripe.org/blackcandy/">BlackCandy</a> - our default theme ready to use.</label></li>
- <li><input type="radio" name="template" value="tutorial" id="EmptyTemplate" <?php if(isset($_POST['template']) && $_POST['template'] == 'tutorial') {?>checked="checked"<?php }?>><label for="EmptyTemplate">Empty template - ready to begin the <a href="http://doc.silverstripe.org/doku.php?id=tutorials" target="_blank">tutorial</a>.</label></li>
- </ul>
- </div>
-
- <h4 id="install"><em class="inlineBarText">Confirm Install</em> <span>Step: 5 of 5</span></h4>
+ <ul id="Themes">
+ <li><input type="radio" name="template" value="blackcandy" id="BlackCandy" <?php if(!isset($_POST['template']) || $_POST['template'] == 'blackcandy') {?>checked="checked"<?php }?>><label for="BlackCandy"><a href="http://silverstripe.org/blackcandy/">BlackCandy</a> - our default theme ready to use.</label></li>
+ <li><input type="radio" name="template" value="tutorial" id="EmptyTemplate" <?php if(isset($_POST['template']) && $_POST['template'] == 'tutorial') {?>checked="checked"<?php }?>><label for="EmptyTemplate">Empty template - ready to begin the <a href="http://doc.silverstripe.org/doku.php?id=tutorials" target="_blank">tutorial</a>.</label></li>
+ </ul>
+ <h3 class="sectionHeading" id="install">Confirm Install <small>Step 5 of 5</small></h3>
<?php if(isset($hasErrorOtherThanDatabase)) { ?>
<p class="error">
15 dev/install/config.rb
View
@@ -0,0 +1,15 @@
+# Require any additional compass plugins here.
+require 'compass-colors'
+
+project_type = :stand_alone
+# Set this to the root of your project when deployed:
+http_path = "/"
+css_dir = "css"
+sass_dir = "scss"
+images_dir = "images"
+javascripts_dir = "javascript"
+output_style = :compact
+# To enable relative paths to assets via compass helper functions. Uncomment:
+# relative_assets = true
+
+asset_cache_buster = :none
101 dev/install/css/install.css
View
@@ -0,0 +1,101 @@
+body { font-family: Arial, san-serif; font-size: 13px; line-height: 18px; margin-bottom: 18px; color: #333; width: 940px; margin: 0 auto 18px; /* background: url(../../../admin/images/textures/bg_cms_main_content.png) repeat scroll left top #F0F3F4; */ background-color: #f4f4f4; /* Typography */ /* Helpers */ /* Messages */ /* Custom styles */ }
+body p { font-size: 13px; line-height: 18px; margin-bottom: 18px; color: #333; }
+body a { color: #0973a6; }
+body h1, body h2, body h3, body h4, body h5, body h6 { color: #222; font-family: inherit; font-weight: bold; margin: 0; margin: 27px 0 9px; text-rendering: optimizelegibility; clear: both; text-shadow: 0 1px 0 #fff; }
+body h1 small, body h2 small, body h3 small, body h4 small, body h5 small, body h6 small { font-weight: normal; font-size: 12px; color: #666; }
+body h1 { font-size: 36px; line-height: 36px; letter-spacing: -0.5px; }
+body h1 { background: transparent url(../../../admin/images/logo.gif) no-repeat left top; text-indent: -9999px; height: 164px; width: 161px; float: left; padding-right: 40px; border-right: 1px solid #b1c0c5; margin-right: 40px; }
+body h2 { font-size: 34px; line-height: 36px; letter-spacing: -0.5px; }
+body h3 { font-size: 18px; line-height: 27px; }
+body h4 { font-size: 14px; line-height: 18px; margin: 18px 0 9px; }
+body h5 { font-size: 12px; line-height: 18px; margin: 18px 0 0; }
+body .clear { clear: both; }
+body .left { float: left; }
+body .message { padding: 2px 18px; margin-bottom: 18px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px; -moz-border-radius-bottomright: 3px; -moz-border-radius-bottomleft: 3px; -webkit-border-radius: 3px 3px 3px 3px; border-radius: 3px 3px 3px 3px; }
+body .message p { margin: 11px 0 13px; }
+.lt-ie8 body .message p { /* margin-top: 7px; */ /* margin-bottom: 10px; */ }
+body .message.warning { background-color: #fcf8f2; border: 1px #ffc28b solid; }
+body .message.error { background-color: #fdf1f3; border: 1px solid #f8c3cd; }
+body .message ul { margin-left: 18px; margin-top: -9px; }
+body .helpText { float: right; width: 425px; padding-left: 20px; color: #666; margin-top: 0; background: transparent url(../../../admin/images/question.png) no-repeat left 1px; }
+body .helpText.requirementsHelpText { margin-top: 17px; }
+body .typography table { margin: 9px 0 27px; border-collapse: collapse; width: 100%; }
+body .typography table thead tr td, body .typography table thead tr th { font-weight: bold; vertical-align: bottom; padding: 12px; }
+body .typography table th, body .typography table td { padding: 8px 12px; text-align: left; }
+body .typography table td { vertical-align: top; border-top: none; background-color: #fff; }
+body .typography table th + th, body .typography table td + td, body .typography table th + td { /* border-left: 1px solid #ddd; */ }
+body .typography table tbody tr:nth-child(odd) td, body .typography table tbody tr:nth-child(odd) th { background-color: #fcfcfc; }
+body .typography table tbody tr:hover td, body .typography table tbody tr:hover th { background-color: #f6f6f6; }
+body .typography table tfoot { font-style: italic; color: #888; }
+body .typography input, body .typography textarea, body .typography select { width: 420px; margin-bottom: 9px; color: #707070; border: 1px solid #ddd; display: inline-block; height: 18px; padding: 4px 6px; line-height: 18px; font-size: 13px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px; -moz-border-radius-bottomright: 3px; -moz-border-radius-bottomleft: 3px; -webkit-border-radius: 3px 3px 3px 3px; border-radius: 3px 3px 3px 3px; }
+body .typography input, body .typography textarea { -webkit-transition: border linear 0.2s, box-shadow linear 0.2s; -moz-transition: border linear 0.2s, box-shadow linear 0.2s; -ms-transition: border linear 0.2s, box-shadow linear 0.2s; -o-transition: border linear 0.2s, box-shadow linear 0.2s; transition: border linear 0.2s, box-shadow linear 0.2s; -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); }
+body .typography input:focus, body .typography textarea:focus { outline: 0; border-color: rgba(82, 168, 236, 0.8); -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 4px rgba(82, 168, 236, 0.6); -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 4px rgba(82, 168, 236, 0.6); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 4px rgba(82, 168, 236, 0.6); }
+body .typography input[type=file]:focus, body .typography input[type=checkbox]:focus, body .typography select:focus { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; outline: 1px dotted #666; }
+body .typography select { height: 26px; }
+body .typography option { line-height: 27px; font-size: 12px; padding: 2px 6px; color: #666; }
+body .typography label { width: auto; float: none; padding-top: 0; margin: 0 0 5px 0; text-align: left; display: block; }
+body .typography .fields { float: left; }
+body .typography input.action { text-align: center; font-weight: bold; margin: 9px 0 27px; padding: 6px 8px; width: 200px; width: auto; color: #222; border: 1px solid #aaa; text-shadow: 0 1px 0 #eee; font-size: 13px; float: none; height: auto; background: #fbfbfb; /* Old browszzzzzers */ background: -moz-linear-gradient(top, #fbfbfb 0%, #bbbbbb 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fbfbfb), color-stop(100%, #bbbbbb)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #fbfbfb 0%, #bbbbbb 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #fbfbfb 0%, #bbbbbb 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, #fbfbfb 0%, #bbbbbb 100%); /* IE10+ */ background: linear-gradient(top, #fbfbfb 0%, #bbbbbb 100%); /* W3C */ /* @include background-image(linear-gradient(top, $topColor,$bottomColor)); */ -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px; -moz-border-radius-bottomright: 3px; -moz-border-radius-bottomleft: 3px; -webkit-border-radius: 3px 3px 3px 3px; border-radius: 3px 3px 3px 3px; -webkit-box-shadow: 0 1px 0 0 white; -moz-box-shadow: 0 1px 0 0 white; box-shadow: 0 1px 0 0 white; background-color: #ddd; }
+.lt-ie9 body .typography input.action { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbfbfb', endColorstr='#bbbbbb',GradientType=0 ); /* IE6-9 */ }
+body .typography input.action:hover { -webkit-box-shadow: 0 1px 2px 0 #cccccc; -moz-box-shadow: 0 1px 2px 0 #cccccc; box-shadow: 0 1px 2px 0 #cccccc; background: #fbfbfb; /* Old browszzzzzers */ background: -moz-linear-gradient(top, #fbfbfb 0%, #cccccc 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fbfbfb), color-stop(100%, #cccccc)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #fbfbfb 0%, #cccccc 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #fbfbfb 0%, #cccccc 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, #fbfbfb 0%, #cccccc 100%); /* IE10+ */ background: linear-gradient(top, #fbfbfb 0%, #cccccc 100%); /* W3C */ /* @include background-image(linear-gradient(top, $topColor,$bottomColor)); */ }
+.lt-ie9 body .typography input.action:hover { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbfbfb', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */ }
+body .typography input.action:focus, body .typography input.action:active { -webkit-box-shadow: 0 1px 0 0 white; -moz-box-shadow: 0 1px 0 0 white; box-shadow: 0 1px 0 0 white; background: #fbfbfb; /* Old browszzzzzers */ background: -moz-linear-gradient(top, #fbfbfb 0%, #bbbbbb 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fbfbfb), color-stop(100%, #bbbbbb)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #fbfbfb 0%, #bbbbbb 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #fbfbfb 0%, #bbbbbb 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, #fbfbfb 0%, #bbbbbb 100%); /* IE10+ */ background: linear-gradient(top, #fbfbfb 0%, #bbbbbb 100%); /* W3C */ /* @include background-image(linear-gradient(top, $topColor,$bottomColor)); */ }
+.lt-ie9 body .typography input.action:focus, .lt-ie9 body .typography input.action:active { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbfbfb', endColorstr='#bbbbbb',GradientType=0 ); /* IE6-9 */ }
+body .typography input.action:hover, body .typography input.action:focus { cursor: pointer; }
+body .typography input[type="checkbox"], body .typography input[type="radio"] { border: medium none; height: auto; line-height: normal; padding: 0; width: auto; margin-right: 6px; float: left; margin-top: 3px; }
+body .typography #install_button { font-size: 20px; color: #fff; border-color: #78A127 #78A127 #59781D; text-shadow: 0 1px 1px #4D7326; padding: 8px 14px; background-color: green; background: #80bf40; /* Old browszzzzzers */ background: -moz-linear-gradient(top, #80bf40 0%, #59862d 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #80bf40), color-stop(100%, #59862d)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #80bf40 0%, #59862d 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #80bf40 0%, #59862d 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, #80bf40 0%, #59862d 100%); /* IE10+ */ background: linear-gradient(top, #80bf40 0%, #59862d 100%); /* W3C */ /* @include background-image(linear-gradient(top, $topColor,$bottomColor)); */ -webkit-box-shadow: 0 1px 0 0 white; -moz-box-shadow: 0 1px 0 0 white; box-shadow: 0 1px 0 0 white; }
+.lt-ie9 body .typography #install_button { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80bf40', endColorstr='#59862d',GradientType=0 ); /* IE6-9 */ }
+body .typography #install_button:hover { -webkit-box-shadow: 0 1px 3px 0 #bbbbbb; -moz-box-shadow: 0 1px 3px 0 #bbbbbb; box-shadow: 0 1px 3px 0 #bbbbbb; }
+body .typography #install_button:focus, body .typography #install_button:active { -webkit-box-shadow: 0 1px 0 0 white; -moz-box-shadow: 0 1px 0 0 white; box-shadow: 0 1px 0 0 white; background: #80bf40; /* Old browszzzzzers */ background: -moz-linear-gradient(top, #80bf40 0%, #59862d 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #80bf40), color-stop(100%, #59862d)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #80bf40 0%, #59862d 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #80bf40 0%, #59862d 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, #80bf40 0%, #59862d 100%); /* IE10+ */ background: linear-gradient(top, #80bf40 0%, #59862d 100%); /* W3C */ /* @include background-image(linear-gradient(top, $topColor,$bottomColor)); */ }
+.lt-ie9 body .typography #install_button:focus, .lt-ie9 body .typography #install_button:active { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80bf40', endColorstr='#59862d',GradientType=0 ); /* IE6-9 */ }
+body .typography #install_button[disabled=disabled] { border: 1px solid #aaa; border-color: #bbb #bbb #aaa; color: #222; text-shadow: 0 1px 0 #eee; background: #fbfbfb; /* Old browszzzzzers */ background: -moz-linear-gradient(top, #fbfbfb 0%, #bbbbbb 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fbfbfb), color-stop(100%, #bbbbbb)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #fbfbfb 0%, #bbbbbb 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #fbfbfb 0%, #bbbbbb 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, #fbfbfb 0%, #bbbbbb 100%); /* IE10+ */ background: linear-gradient(top, #fbfbfb 0%, #bbbbbb 100%); /* W3C */ /* @include background-image(linear-gradient(top, $topColor,$bottomColor)); */ }
+.lt-ie9 body .typography #install_button[disabled=disabled] { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbfbfb', endColorstr='#bbbbbb',GradientType=0 ); /* IE6-9 */ }
+body .typography #install_button[disabled=disabled]:hover { -webkit-box-shadow: 0 1px 0 0 white; -moz-box-shadow: 0 1px 0 0 white; box-shadow: 0 1px 0 0 white; }
+body #Container { margin-bottom: 40px; }
+body #Container h3.sectionHeading { padding-top: 27px; border-top: 1px solid #b1c0c5; clear: both; }
+body #Container #Header { margin-bottom: 30px; height: 200px; }
+body #Container #Header div.left { width: 698px; margin-top: 47px; }
+body #Container #Navigation { display: none; }
+body h5.requirement { padding: 12px 18px; font-size: 14px; border: 1px solid #798c93; border-top: 1px solid #8d9da3; margin: 0; color: #fff; position: relative; text-shadow: 0 -1px 0 #71858c; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px; -moz-border-radius-bottomright: 3px; -moz-border-radius-bottomleft: 3px; -webkit-border-radius: 3px 3px 3px 3px; border-radius: 3px 3px 3px 3px; -webkit-box-shadow: 0 1px 0 0 white; -moz-box-shadow: 0 1px 0 0 white; box-shadow: 0 1px 0 0 white; background-color: #eee; background: #b1c0c5; /* Old browszzzzzers */ background: -moz-linear-gradient(top, #b1c0c5 0%, #7f9198 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b1c0c5), color-stop(100%, #7f9198)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #b1c0c5 0%, #7f9198 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #b1c0c5 0%, #7f9198 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, #b1c0c5 0%, #7f9198 100%); /* IE10+ */ background: linear-gradient(top, #b1c0c5 0%, #7f9198 100%); /* W3C */ /* @include background-image(linear-gradient(top, $topColor,$bottomColor)); */ }
+.lt-ie9 body h5.requirement { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b1c0c5', endColorstr='#7f9198',GradientType=0 ); /* IE6-9 */ }
+body h5.requirement span { font-weight: normal; font-size: 12px; padding: 3px 6px; margin-left: 5px; text-shadow: none; background-color: #fafbfb; -moz-border-radius-topleft: 2px; -moz-border-radius-topright: 2px; -moz-border-radius-bottomright: 2px; -moz-border-radius-bottomleft: 2px; -webkit-border-radius: 2px 2px 2px 2px; border-radius: 2px 2px 2px 2px; -webkit-box-shadow: 0 0 2px 0 #7f9198; -moz-box-shadow: 0 0 2px 0 #7f9198; box-shadow: 0 0 2px 0 #7f9198; }
+body h5.requirement.good span { color: #359318; }
+body h5.requirement.warning span { color: #e07127; }
+body h5.requirement.error span { color: #c61414; }
+body h5.requirement a { font-size: 11px; right: 9px; position: absolute; line-height: 19px; margin: 0 0 0 30px; color: #fff; text-decoration: none; font-weight: normal; padding-right: 21px; background: transparent url(../../../admin/images/arrows.png) no-repeat right top; }
+body h5.requirement a:hover { background: transparent url(../../../admin/images/arrows.png) no-repeat right -40px; }
+body table.testResults { border-top: none; margin-top: -1px; margin-bottom: 9px; -webkit-box-shadow: 0 1px 0 0 white; -moz-box-shadow: 0 1px 0 0 white; box-shadow: 0 1px 0 0 white; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px; -moz-border-radius-bottomright: 3px; -moz-border-radius-bottomleft: 3px; -webkit-border-radius: 3px 3px 3px 3px; border-radius: 3px 3px 3px 3px; overflow: hidden; }
+body table.testResults tr.good { display: none; border: none; }
+body table.testResults tr.good td { color: #359318; }
+body table.testResults tr.warning { border: none; }
+body table.testResults tr.warning td { color: #e07127; }
+body table.testResults tr.error { border: none; color: #c61414; }
+body table.testResults td { border: 1px solid #ddd; width: 50%; }
+body #database_selection, body #Themes { list-style: none; margin: 0; margin-bottom: 18px; padding-left: 0; }
+body #database_selection li, body #Themes li { clear: left; padding: 3px 0; }
+body #database_selection li .dbfields, body #Themes li .dbfields { padding: 12px; border: 1px solid #ddd; background-color: #fafafa; margin-bottom: 9px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px; -moz-border-radius-bottomright: 3px; -moz-border-radius-bottomleft: 3px; -webkit-border-radius: 3px 3px 3px 3px; border-radius: 3px 3px 3px 3px; -webkit-box-shadow: inset 0 0 3px 0 #dddddd; -moz-box-shadow: inset 0 0 3px 0 #dddddd; box-shadow: inset 0 0 3px 0 #dddddd; -webkit-box-shadow: 0 1px 0 0 white; -moz-box-shadow: 0 1px 0 0 white; box-shadow: 0 1px 0 0 white; }
+body ul#Themes { float: left; width: 445px; }
+body .databaseError { width: 422px; }
+body #Footer { margin-top: 67px; margin-bottom: 18px; }
+body #Footer p { font-size: 12px; color: #999; }
+
+body #Header h1 { margin-top: 45px; margin-bottom: 27px; }
+body #Header h3 { margin-top: -10px; }
+
+.lt-ie8 #database_credentials, .lt-ie8 #AdminAccount { float: left; }
+
+/* styles not tested */
+#adminAcc, #devHelp, #localeHelp { padding-top: 20px; }
+
+#devHelp, #devSection { height: 18em; }
+
+#use_environment_field { margin-bottom: 25px; background-color: #FAFAFA; border: 1px solid #DDDDDD; border-radius: 3px 3px 3px 3px; box-shadow: 0 1px 0 0 white; margin-bottom: 9px; padding: 10px 10px 8px; }
+#use_environment_field input { float: left; margin-right: 5px; }
+
+.databaseError ul { margin-bottom: 0; }
+.databaseError ul, .databaseError li { margin-left: 0; padding-left: 0; }
+
+#Layout p.goodInstall { color: #359318; }
+
+.goodInstall { padding: 0.5em; background-color: #e2fee1; border: 1px #43cb3e solid; color: #359318; overflow: hidden; line-height: 18px; padding: 10px; }
+.goodInstall a { float: right; font-size: 18px; padding: 0 2px 2px 0; font-weight: bold; }
302 dev/install/install.css
View
@@ -1,302 +0,0 @@
-body {
- text-align: center;
-}
-
-#Container .typography p {
- margin-left: 0;
- margin-right: 0;
-}
-
-#Container * {
- text-align: left;
-}
-
-#Header p {
- margin-left: 30px;
-}
-
-ul#Themes{
- list-style: none;
- margin: 0 5px 20px 5px;
- float: left;
- width: 320px;
-}
- ul#Themes li {
- clear: both;
- padding: 3px 0;
- margin-left: 0;
- padding-left: 0;
- }
- ul#Themes input {
- float: left;
- margin-right: 5px;
- }
- ul#Themes label {
- margin: -2px 5px 0 15px;
- }
-
-h4.sectionHeading {
- margin-top: 20px;
-}
-
-.error {
- padding: 0.5em;
- background-color: #fdf5f5;
- border: 1px #ff8e8e solid;
- color: #f03838;
-}
- #Container p.error { color: #f03838;}
-.warning {
- padding: 0.5em;
- background-color: #fcf8f2;
- border: 1px #ffc28b solid;
- color: #cb6a1c;
-}
- .warning label {
- display: inline;
- margin-left: 5px;
- color: #cb6a1c
- }
- .warning p {
- font-size: 12px;
- margin-bottom: 0;
- }
- .warning .warning_actions {
- margin: 5px 0 5px 0;
- }
-.good {
- padding: 0.5em;
- background-color: #e2fee1;
- border: 1px #43cb3e solid;
- color: #359318;
-}
-.error a,
-.warning a,
-.good a {
- color: inherit;
- text-decoration: underline;
-}
-p.error a:hover {
- text-decoration: none;
-}
-span.middleColumn {
- width: 297px;
- margin-right: 0;
- margin-top: 5px;
- padding: 4px;
-}
-input.text, textarea, select {
- padding: 2px;
- border: 1px solid #A7A7A7;
- color: #000;
- font-size: 1.2em;
- font-weight: bold;
- width: 290px;
-}
-#stats-container label {
- display: inline;
-}
-#stats {
- margin-right: 5px;
-}
-table.testResults {
- border-collapse: collapse;
- width: 100%;
- margin: 10px 0;
-}
-#Layout h4 {
- font-size: 2em;
- margin: 36px 0 18px 0;
- font-weight: bold;
- line-height: 1.8;
- clear: left;
- border-top: 2px solid #888;
- text-indent: 5px;
- width: 100%;
- overflow: hidden;
-}
- #Layout h4 span {
- float: right;
- font-size: 10px;
- padding: 10px 10px 0 0;
- font-weight: normal;
- color: #888;
- }
-
-/**
- * Requirements and test results
- * ------------------------------------------------ */
-table.testResults {
- margin-top: 0;
-}
- table.testResults td {
- border: 1px #CCC solid;
- width: 400px;
- line-height: 15px;
- padding: 6px;
- }
- table.testResults tr.good {
- display: none;
- border: none;
- }
- table.testResults tr.good td {
- color: green;
- }
-
- table.testResults tr.warning {
- border: none;
- }
- table.testResults tr.warning td {
- color: #ef7f24;
- }
- table.testResults tr.error {
- border: none;
- }
- table.testResult tr.error {
- color: red;
- }
-
-h5.requirement {
- padding: 10px;
- background: #f1f1f1;
- border: 1px solid #ccc;
- border-width: 0 1px 1px 1px;
- margin: 0;
- overflow: hidden;
-}
- h5.requirement span {
- float: right;
- }
- h5.requirement.good {
- color: #359318;
- }
- h5.requirement.warning {
- color: #cb6a1c;
- }
- h5.requirement.error {
- color: #F03838;
- }
- h5.requirement a {
- font-size: 10px;
- float: right;
- line-height: 19px;
- margin: 0 0 0 30px;
- color: #666;
- text-decoration: none;
- font-weight: normal;
- }
-.clear {
- clear: both;
-}
-#adminAcc,
-#devHelp,
-#localeHelp {
- padding-top: 20px;
-}
-
-.typography label {
- margin-bottom: 0;
-}
-
-#Layout .helpText {
- float: right;
- width: 370px;
- padding-right: 10px;
-}
-
-.section {
- overflow: hidden;
-}
-
-.fields {
- float: left;
- width: 330px;
-}
-
-#devHelp,
-#devSection {
- height: 18em;
-}
-
-#Layout input.action {
- text-align: center;
- font-size: 13px;
- width: 220px;
- font-weight: bold;
- margin: 5px 0;
-}
-
-#use_environment_field {
- margin-bottom: 25px;
-}
-
-#use_environment_field input {
- float: left;
- margin-right: 5px;
-}
-
-.dbfields {
- margin: 10px;
-}
-
-#database_credentials {
- margin: 0;
- line-height: 1;
-}
-
-#database_selection {
- overflow: hidden;
- margin: 0;
-}
- #database_selection li {
- margin-left: 0;
- padding-left: 0;
- }
- #database_selection li input {
- margin-right: 5px;
- }
- #database_selection li label {
- display: inline;
- }
-
-.databaseError {
- clear:both;
- overflow: hidden;
- width: 290px;
- line-height: 1.2;
- margin: 10px;
- margin-bottom: 0;
- display: none;
-}
-
- .databaseError ul {
- margin-bottom: 0;
- }
- .databaseError ul, .databaseError li {
- margin-left: 0;
- padding-left: 0;
- }
-
-.goodInstall {
- padding: 0.5em;
- background-color: #e2fee1;
- border: 1px #43cb3e solid;
- color: #359318;
- overflow: hidden;
- line-height: 18px;
- padding: 10px;
-}
- #Layout p.goodInstall {
- color: #359318;
- }
- .goodInstall a {
- float: right;
- font-size: 18px;
- padding: 0 2px 2px 0;
- font-weight: bold;
- }
-
-em.inlineBarText {
- float: left;
- font-style: normal;
-}
2  dev/install/install.js
View
@@ -45,7 +45,7 @@ $(document).ready(function() {
if($(this).text() == 'Hide All Requirements') {
// hide the shown requirements
$(this).parents('h5').next('table.testResults').find('.good').hide();
- $(this).text('See All Requirements');
+ $(this).text('Show All Requirements');
}
else {
// show the requirements.
2  dev/install/install.php5
View
@@ -525,7 +525,7 @@ class InstallRequirements {
$text = "All Requirements Pass but ". $warningRequirements . ' '. $pluralWarnings;
}
- echo "<h5 class='requirement $className'><em class='inlineBarText'>$section</em> <a href='#'>See All Requirements</a> <span>$text</span></h5>";
+ echo "<h5 class='requirement $className'>$section <a href='#'>Show All Requirements</a> <span>$text</span></h5>";
echo "<table class=\"testResults\">";
echo $output;
echo "</table>";
32 dev/install/php5-required.html
View
@@ -1,38 +1,36 @@
<html>
<head>
- <title>PHP 5 is required</title>
- <link rel="stylesheet" type="text/css" href="themes/blackcandy/css/layout.css" />
- <link rel="stylesheet" type="text/css" href="themes/blackcandy/css/typography.css" />
- <link rel="stylesheet" type="text/css" href="themes/blackcandy/css/form.css" />
- <link rel="stylesheet" type="text/css" href="sapphire/dev/install/install.css" />
+ <title>PHP 5.3 is required</title>
+ <link rel="stylesheet" type="text/css" href="sapphire/dev/install/css/install.css">
</head>
<body>
<div id="BgContainer">
<div id="Container">
<div id="Header">
- <h1>SilverStripe CMS Installation</h1>
+ <h1>PHP 5.3 required</h1>
+ <div class="left">
+ <h3>To run SilverStripe, please install PHP 5.3 or greater.</h3>
+
+ <p>We have detected that you are running PHP version <b>$PHPVersion</b>. In order to run SilverStripe,
+ you must have PHP version 5.3 or greater, and for best results we recommend PHP 5.3.8 or greater.<p/>
+
+ <p>If you are running on a shared host, you may need to ask your hosting provider how to do this.</p>
+ </div>
</div>
-
+
<div id="Navigation">&nbsp;</div>
<div class="clear"><!-- --></div>
-
+
<div id="Layout">
<div class="typography">
- <h1>PHP 5 required</h1>
- <h2>To run SilverStripe, please install PHP 5.3 or greater.</h2>
-
- <p>We have detected that you are running PHP version <b>$PHPVersion</b>. In order to run SilverStripe,
- you must have PHP version 5.3 or greater.</p>
-
- <p>If you are running on a shared host, you may need to ask your hosting provider how to do this.</p>
</div>
</div>
<div class="clear"><!-- --></div>
</div>
-
+
<div id="Footer">
<div class="footerTop"><!-- --></div>
- <p><a href="http://silverstripe.org">SilverStripe Open Source CMS</a> | Copyright &copy; 2008 SilverStripe Limited</p>
+ <p><a href="http://silverstripe.org">SilverStripe Open Source CMS</a> | Copyright &copy; 2012 SilverStripe Limited</p>
</div>
</div>
</body>
571 dev/install/scss/install.scss
View
@@ -0,0 +1,571 @@
+//Color Variables
+$message: #BDBD00; // blue
+$good: #359318; // green
+
+$warning: #E07127; // orange
+$warningBg: #fcf8f2;
+$warningBorder: #ffc28b;
+
+$error: #C61414 /* #E21607 */; // red
+$errorBg: #FDF1F3;
+$errorBorder: #F8C3CD;
+
+$link: #0973A6;
+$gradientTop: #B1C0C5;
+$gradientBottom: #7F9198;
+
+//Mixin to create a gradient from top to bottom
+@mixin topGradient($topColor, $bottomColor){
+ background: $topColor; /* Old browszzzzzers */
+ background: -moz-linear-gradient(top, $topColor 0%, $bottomColor 100%); /* FF3.6+ */
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$topColor), color-stop(100%,$bottomColor)); /* Chrome,Safari4+ */
+ background: -webkit-linear-gradient(top, $topColor 0%,$bottomColor 100%); /* Chrome10+,Safari5.1+ */
+ background: -o-linear-gradient(top, $topColor 0%,$bottomColor 100%); /* Opera11.10+ */
+ background: -ms-linear-gradient(top, $topColor 0%,$bottomColor 100%); /* IE10+ */
+ background: linear-gradient(top, $topColor 0%,$bottomColor 100%); /* W3C */
+ .lt-ie9 &{
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$topColor}', endColorstr='#{$bottomColor}',GradientType=0 ); /* IE6-9 */
+ }
+ $experimental-support-for-svg: true;
+ /* @include background-image(linear-gradient(top, $topColor,$bottomColor)); */
+}
+
+//Mixin to create rounded corners. Takes a value for each of the 4 corners
+@mixin roundedCorners($topLeft, $topRight, $bottomRight, $bottomLeft){
+ -moz-border-radius-topleft: $topLeft;
+ -moz-border-radius-topright: $topRight;
+ -moz-border-radius-bottomright: $bottomRight;
+ -moz-border-radius-bottomleft: $bottomLeft;
+ -webkit-border-radius: $topLeft $topRight $bottomRight $bottomLeft;
+ border-radius: $topLeft $topRight $bottomRight $bottomLeft;
+}
+
+//Mixin to create a regular box shadow
+@mixin boxShadow($horizontal, $vertical, $blur, $spread, $color){
+ -webkit-box-shadow: $horizontal $vertical $blur $spread $color;
+ -moz-box-shadow: $horizontal $vertical $blur $spread $color;
+ box-shadow: $horizontal $vertical $blur $spread $color;
+}
+
+// Drop shadows
+@mixin box-shadow($shadow: 0 1px 3px rgba(0,0,0,.15)) {
+ -webkit-box-shadow: $shadow;
+ -moz-box-shadow: $shadow;
+ box-shadow: $shadow;
+
+}
+
+//Mixin to create an inset box shadow
+@mixin boxShadowInset($horizontal, $vertical, $blur, $spread, $color){
+ -webkit-box-shadow: inset $horizontal $vertical $blur $spread $color;
+ -moz-box-shadow: inset $horizontal $vertical $blur $spread $color;
+ box-shadow: inset $horizontal $vertical $blur $spread $color;
+}
+
+// Transitions
+@mixin transition($transition) {
+ -webkit-transition: $transition;
+ -moz-transition: $transition;
+ -ms-transition: $transition;
+ -o-transition: $transition;
+ transition: $transition;
+}
+
+
+body {
+ font-family: Arial, san-serif;
+ font-size: 13px;
+ line-height: 18px;
+ margin-bottom: 18px;
+ color: #333;
+ width: 940px;
+ margin: 0 auto 18px;
+ /* background: url(../../../admin/images/textures/bg_cms_main_content.png) repeat scroll left top #F0F3F4; */
+ background-color: #f4f4f4;
+
+ /* Typography */
+ p {
+ font-size: 13px;
+ line-height: 18px;
+ margin-bottom: 18px;
+ color: #333;
+ }
+ a {
+ color: $link;
+ }
+ h1, h2, h3, h4, h5, h6 {
+ color: #222;
+ font-family: inherit;
+ font-weight: bold;
+ margin: 0;
+ margin: 27px 0 9px;
+ text-rendering: optimizelegibility;
+ clear: both;
+ text-shadow: 0 1px 0 #fff;
+ small {
+ font-weight: normal;
+ font-size: 12px;
+ color: #666;
+ }
+ }
+ h1 {
+ font-size: 36px;
+ line-height: 36px;
+ letter-spacing: -0.5px;
+ }
+ h1 {
+ background: transparent url(../../../admin/images/logo.gif) no-repeat left top;
+ text-indent: -9999px;
+ height: 164px;
+ width: 161px;
+ float: left;
+ padding-right: 40px;
+ border-right: 1px solid $gradientTop;
+ margin-right: 40px;
+ }
+ h2 {
+ font-size: 34px;
+ line-height: 36px;
+ letter-spacing: -0.5px;
+ }
+ h3 {
+ font-size: 18px;
+ line-height: 27px;
+ }
+ h4 {
+ font-size: 14px;
+ line-height: 18px;
+ margin: 18px 0 9px;
+ }
+ h5 {
+ font-size: 12px;
+ line-height: 18px;
+ margin: 18px 0 0;
+ }
+
+ /* Helpers */
+ .clear {
+ clear: both;
+ }
+ .left {
+ float: left;
+ }
+
+ /* Messages */
+ .message {
+ padding: 2px 18px;
+ margin-bottom: 18px;
+ @include roundedCorners(3px, 3px, 3px, 3px);
+ p {
+ margin: 11px 0 13px;
+ }
+ .lt-ie8 & p {
+ /* margin-top: 7px; */
+ /* margin-bottom: 10px; */
+ }
+ &.warning {
+ background-color: $warningBg;
+ border: 1px $warningBorder solid;
+ }
+ &.error {
+ background-color: #FDF1F3 /* #fdf5f5 */;
+ border: 1px solid $errorBorder;
+ }
+ ul {
+ margin-left: 18px;
+ margin-top: -9px;
+ li {
+
+ }
+ }
+ }
+ .helpText {
+ float: right;
+ width: 425px;
+ padding-left: 20px;
+ color: #666;
+ margin-top: 0;
+ background: transparent url(../../../admin/images/question.png) no-repeat left 1px;
+ &.requirementsHelpText {
+ margin-top: 17px;
+ }
+ }
+
+ .typography {
+ // General tables
+ table {
+ margin: 9px 0 27px;
+ border-collapse: collapse;
+ width: 100%;
+ thead{
+ tr {
+ td, th {
+ font-weight: bold;
+ vertical-align: bottom;
+ padding: 12px;
+ }
+ }
+ }
+ th, td {
+ padding: 8px 12px;
+ text-align: left;
+ }
+ td {
+ vertical-align: top;
+ border-top: none;
+ background-color: #fff;
+ }
+ th + th,
+ td + td,
+ th + td {
+ /* border-left: 1px solid #ddd; */
+ }
+ tbody{
+ tr:nth-child(odd) td,
+ tr:nth-child(odd) th{
+ background-color: #fcfcfc;
+ }
+ tr:hover td,
+ tr:hover th{
+ background-color: #f6f6f6;
+ }
+ }
+ tfoot {
+ font-style: italic;
+ color: #888;
+ }
+ }
+
+ // Forms
+ input, textarea, select {
+ width: 420px;
+ margin-bottom: 9px;
+ color: #707070;
+ border: 1px solid #ddd;
+ display: inline-block;
+ height: 18px;
+ padding: 4px 6px;
+ line-height: 18px;
+ font-size: 13px;
+ @include roundedCorners(3px,3px,3px,3px);
+ }
+
+ // Focus states
+ input,
+ textarea {
+ $transition: border linear .2s, box-shadow linear .2s;
+ @include transition($transition);
+ @include box-shadow(inset 0 1px 3px rgba(0,0,0,.1));
+ }
+ input:focus,
+ textarea:focus {
+ outline: 0;
+ border-color: rgba(82,168,236,.8);
+ $shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 4px rgba(82,168,236,.6);
+ @include box-shadow($shadow);
+ }
+ input[type=file]:focus,
+ input[type=checkbox]:focus,
+ select:focus {
+ @include box-shadow(none); // override for file inputs
+ outline: 1px dotted #666; // Select elements don't get box-shadow styles, so instead we do outline
+ }
+ // End Focus states
+
+ select {
+ height: 26px;
+ }
+ option {
+ line-height: 27px;
+ font-size: 12px;
+ padding: 2px 6px;
+ color:#666;
+ }
+ label {
+ width: auto;
+ float: none;
+ padding-top: 0;
+ margin: 0 0 5px 0;
+ text-align: left;
+ display: block;
+ }
+ .fields {
+ float: left;
+ }
+ input.action {
+ text-align: center;
+ font-weight: bold;
+ margin: 9px 0 27px;
+ padding: 6px 8px;
+ width: 200px;
+ width: auto;
+ color: #222;
+ border: 1px solid #aaa;
+ text-shadow: 0 1px 0 #eee;
+ font-size: 13px;
+ float: none;
+ height: auto;
+ @include topGradient (#fbfbfb, #bbb);
+ @include roundedCorners(3px,3px,3px,3px);
+ @include boxShadow(0, 1px, 0, 0, #fff);
+ background-color: #ddd;
+ &:hover {
+ @include boxShadow(0, 1px, 2px, 0, #ccc);
+ @include topGradient (#fbfbfb, #ccc);
+ }
+ &:focus, &:active {
+ @include boxShadow(0, 1px, 0, 0, #fff);
+ @include topGradient (#fbfbfb, #bbb);
+ }
+ }
+ input.action:hover,
+ input.action:focus {
+ cursor: pointer;
+ }
+ input[type="checkbox"], input[type="radio"] {
+ border: medium none;
+ height: auto;
+ line-height: normal;
+ padding: 0;
+ width: auto;
+ margin-right: 6px;
+ float: left;
+ margin-top: 3px;
+ }
+ #install_button {
+ font-size: 20px;
+ color: #fff;
+ border-color: #78A127 #78A127 #59781D;
+ text-shadow: 0 1px 1px #4D7326;
+ padding: 8px 14px;
+ background-color: green;
+ @include topGradient(#80BF40, #59862D);
+ @include boxShadow(0, 1px, 0, 0, #fff);
+ &:hover {
+ @include boxShadow(0, 1px, 3px, 0, #bbb);
+ }
+ &:focus, &:active {
+ @include boxShadow(0, 1px, 0, 0, #fff);
+ @include topGradient(#80BF40, #59862D);
+ }
+ &[disabled=disabled] {
+ border: 1px solid #aaa;
+ border-color: #bbb #bbb #aaa;
+ color: #222;
+ text-shadow: 0 1px 0 #eee;
+ @include topGradient (#fbfbfb, #bbb);
+ &:hover {
+ @include boxShadow(0, 1px, 0, 0, #fff);
+ }
+ }
+ }
+ }
+
+ /* Custom styles */
+ #Container {
+ margin-bottom: 40px;
+ h3.sectionHeading {
+ padding-top: 27px;
+ border-top: 1px solid $gradientTop;
+ clear: both;
+ }
+ #Header {
+ margin-bottom: 30px;
+ height: 200px;
+ div.left {
+ width: 698px;
+ margin-top: 47px;
+ }
+ }
+ #Navigation {
+ display: none;
+ }
+ }
+ h5.requirement {
+ padding: 12px 18px;
+ font-size: 14px;
+ border: 1px solid darken($gradientBottom,2%);
+ border-top: 1px solid lighten($gradientBottom,5%);
+ margin: 0;
+ color: #fff;
+ position: relative;
+ text-shadow: 0 -1px 0 darken($gradientBottom, 5%);
+ @include roundedCorners(3px, 3px, 3px, 3px);
+ @include boxShadow(0, 1px, 0, 0, #fff);
+ background-color: #eee;
+ @include topGradient($gradientTop,$gradientBottom);
+ span {
+ font-weight: normal;
+ font-size: 12px;
+ padding: 3px 6px;
+ margin-left: 5px;
+ text-shadow: none;
+ background-color: lighten($gradientTop, 25%);
+ @include roundedCorners(2px, 2px, 2px, 2px);
+ @include boxShadow(0,0,2px,0,$gradientBottom);
+ }
+ &.good span{
+ color: $good /* #359318 */;
+ }
+ &.warning span{
+ color: $warning;
+ }
+ &.error span{
+ color: $error;
+ }
+ a {
+ font-size: 11px;
+ right: 9px;
+ position: absolute;
+ line-height: 19px;
+ margin: 0 0 0 30px;
+ color: #fff;
+ text-decoration: none;
+ font-weight: normal;
+ padding-right: 21px;
+ background: transparent url(../../../admin/images/arrows.png) no-repeat right top;
+ &:hover {
+ background: transparent url(../../../admin/images/arrows.png) no-repeat right -40px;
+ }
+ }
+ }
+ table.testResults {
+ border-top: none;
+ margin-top: -1px;
+ margin-bottom: 9px;
+ @include boxShadow(0, 1px, 0, 0, #fff);
+ @include roundedCorners(3px,3px,3px,3px);
+ overflow: hidden;
+ tr {
+ &.good {
+ display: none;
+ border: none;
+ td {
+ color: $good;
+ }
+ }
+ &.warning {
+ border: none;
+ td {
+ color: $warning;
+ }
+ }
+ &.error {
+ border: none;
+ color: $error;
+ }
+ }
+ td {
+ border: 1px solid #ddd;
+ width: 50%;
+ }
+ }
+ #database_selection, #Themes {
+ list-style: none;
+ margin: 0;
+ margin-bottom: 18px;
+ padding-left: 0;
+ li {
+ clear: left;
+ padding: 3px 0;
+ .dbfields {
+ padding: 12px;
+ border: 1px solid #ddd;
+ background-color: #fafafa;
+ margin-bottom: 9px;
+ @include roundedCorners(3px,3px,3px,3px);
+ @include boxShadowInset(0,0,3px,0,#ddd);
+ @include boxShadow(0,1px,0,0,#fff);
+ }
+ }
+ }
+ ul#Themes {
+ float: left;
+ width: 445px;
+ }
+ .databaseError {
+ width: 422px;
+ }
+ #Footer {
+ margin-top: 67px;
+ margin-bottom: 18px;
+ p {
+ font-size: 12px;
+ color: #999;
+ }
+ }
+}
+
+//PHP5 required screen
+body {
+ #Header {
+ h1 {
+ margin-top: 45px;
+ margin-bottom: 27px;
+ }
+ h3 {
+ margin-top: -10px;
+ }
+ }
+}
+
+
+// IE overides
+.lt-ie8 {
+ #database_credentials, #AdminAccount {
+ float: left;
+ }
+}
+
+
+/* styles not tested */
+
+#adminAcc,
+#devHelp,
+#localeHelp {
+ padding-top: 20px;
+}
+#devHelp,
+#devSection {
+ height: 18em;
+}
+#use_environment_field {
+ margin-bottom: 25px;
+ background-color: #FAFAFA;
+ border: 1px solid #DDDDDD;
+ border-radius: 3px 3px 3px 3px;
+ box-shadow: 0 1px 0 0 white;
+ margin-bottom: 9px;
+ padding: 10px 10px 8px;
+ input {
+ float: left;
+ margin-right: 5px;
+ }
+}
+.databaseError {
+ ul {
+ margin-bottom: 0;
+ }
+ ul, li {
+ margin-left: 0;
+ padding-left: 0;
+ }
+}
+#Layout p.goodInstall {
+ color: #359318;
+}
+.goodInstall {
+ padding: 0.5em;
+ background-color: #e2fee1;
+ border: 1px #43cb3e solid;
+ color: #359318;
+ overflow: hidden;
+ line-height: 18px;
+ padding: 10px;
+ a {
+ float: right;
+ font-size: 18px;
+ padding: 0 2px 2px 0;
+ font-weight: bold;
+ }
+}
Please sign in to comment.
Something went wrong with that request. Please try again.