tonyair/silverstripe-framework
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-framework synced 2024-10-22 12:05:37 +00:00
Code Issues Projects Releases Wiki Activity

ENHANCEMENT Installer styling, moving away from blackcandy

Browse Source
This commit is contained in:
Paul Clarke 2012-04-11 12:21:56 +12:00 committed by Stig Lindqvist
parent 6f76d42bb2
commit 4f23ac1722
8 changed files with 752 additions and 366 deletions

87
dev/install/config-form.html

@ -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 @@
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 @@
<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 @@
"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 @@
</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 Normal file

@ -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 Normal file

@ -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

@ -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

@ -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

@ -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>";

38
dev/install/php5-required.html

@ -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>
</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>
<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">
</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 Normal file

@ -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;
}
}