MINOR Install screen visual tweaks, more visible disabled state on install button, conditional version number (to avoid it showing without a version), referencing new theme in install screen, using new layout in install progress screen as well

admin/css/screen.css

@@ -354,6 +354,13 @@ body.cms { overflow: hidden; }
 .cms-content-tools .cms-panel-header { clear: both; margin: 0 0 7px; line-height: 24px; border-bottom: 1px solid rgba(201, 205, 206, 0.8); -webkit-box-shadow: 0 1px 0 rgba(228, 230, 230, 0.8); -moz-box-shadow: 0 1px 0 rgba(228, 230, 230, 0.8); -o-box-shadow: 0 1px 0 rgba(228, 230, 230, 0.8); box-shadow: 0 1px 0 rgba(228, 230, 230, 0.8); }
 .cms-content-tools .cms-panel-content { width: 176px; padding: 8px 8px; overflow: auto; height: 100%; }
 .cms-content-tools .cms-panel-content .dropdown select { width: 160px; }
+.cms-content-tools .cms-panel-content #LastEditedFrom { -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; }
+.cms-content-tools .cms-panel-content #LastEditedFrom input { width: 160px; }
+.cms-content-tools .cms-panel-content #LastEditedFrom input.hasDatepicker { max-width: 160px; }
+.cms-content-tools .cms-panel-content #LastEditedTo { -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; }
+.cms-content-tools .cms-panel-content #LastEditedTo input { width: 160px; }
+.cms-content-tools .cms-panel-content #LastEditedTo input.hasDatepicker { max-width: 160px; }
+.cms-content-tools .cms-panel-content .Actions .ss-ui-action-constructive { margin-right: 5px; }
 .cms-content-tools .cms-content-header { background-color: #748d9d; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2IwYmVjNyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzc0OGQ5ZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #b0bec7), color-stop(100%, #748d9d)); background-image: -webkit-linear-gradient(#b0bec7, #748d9d); background-image: -moz-linear-gradient(#b0bec7, #748d9d); background-image: -o-linear-gradient(#b0bec7, #748d9d); background-image: -ms-linear-gradient(#b0bec7, #748d9d); background-image: linear-gradient(#b0bec7, #748d9d); }
 .cms-content-tools .cms-content-header h2 { text-shadow: #5c7382 -1px -1px 0; width: 176px; color: white; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; o-text-overflow: ellipsis; }
 .cms-content-tools h3, .cms-content-tools h4, .cms-content-tools h5 { font-weight: bold; line-height: 16px; }
@@ -552,9 +559,7 @@ form.import-form label.left { width: 250px; }
 
 /** This file defines the jstree base styling (see http://jstree.com), as well as any customizations (see bottom of file).  The styles are usually added through jstree.js on DOM load,  but we need it earlier in order to correctly display the uninitialized tree. */
 .cms .jstree ul, .TreeDropdownField .treedropdownfield-panel .jstree ul { display: block; margin: 0; padding: 0; background: none; list-style-type: none; }
-.cms .jstree li, .TreeDropdownField .treedropdownfield-panel .jstree li { display: block; margin: 0; padding: 0; list-style-type: none; display: block; min-height: 18px; line-height: 18px; white-space: nowrap; min-width: 18px; }
+.cms .jstree li, .TreeDropdownField .treedropdownfield-panel .jstree li { display: block; margin: 0; padding: 0; list-style-type: none; display: block; min-height: 18px; line-height: 18px; white-space: nowrap; margin-left: 18px; min-width: 18px; }
-.cms .jstree li li, .TreeDropdownField .treedropdownfield-panel .jstree li li { margin: 0; }
-.cms .jstree li li li, .TreeDropdownField .treedropdownfield-panel .jstree li li li { margin-left: 10px; }
 .cms .jstree ins, .TreeDropdownField .treedropdownfield-panel .jstree ins { display: inline-block; text-decoration: none; width: 18px; height: 18px; margin: 0 0 0 0; padding: 0; float: left; }
 .cms .jstree a, .TreeDropdownField .treedropdownfield-panel .jstree a { display: inline-block; line-height: 16px; height: 16px; color: black; white-space: nowrap; text-decoration: none; padding: 1px 2px; margin: 0; border: 1px solid #fff; }
 .cms .jstree a:focus, .cms .jstree a:active, .cms .jstree a:hover, .TreeDropdownField .treedropdownfield-panel .jstree a:focus, .TreeDropdownField .treedropdownfield-panel .jstree a:active, .TreeDropdownField .treedropdownfield-panel .jstree a:hover { outline: none; text-decoration: none; cursor: pointer; text-shadow: none; }
@@ -594,7 +599,7 @@ form.import-form label.left { width: 250px; }
 .cms .jstree a > ins, .TreeDropdownField .treedropdownfield-panel .jstree a > ins { height: 16px; width: 16px; }
 .cms .jstree a > .jstree-icon, .TreeDropdownField .treedropdownfield-panel .jstree a > .jstree-icon { margin-right: 3px; }
 .cms .jstree-rtl a > .jstree-icon, .TreeDropdownField .treedropdownfield-panel .jstree-rtl a > .jstree-icon { margin-left: 3px; margin-right: 0; }
-.cms li.jstree-open > ul, .TreeDropdownField .treedropdownfield-panel li.jstree-open > ul { display: block; }
+.cms li.jstree-open > ul, .TreeDropdownField .treedropdownfield-panel li.jstree-open > ul { display: block; margin-left: -13px; }
 .cms li.jstree-open > ul li ul, .TreeDropdownField .treedropdownfield-panel li.jstree-open > ul li ul { margin-left: 2px; }
 .cms li.jstree-closed > ul, .TreeDropdownField .treedropdownfield-panel li.jstree-closed > ul { display: none; }
 .cms #vakata-dragged ins, .TreeDropdownField .treedropdownfield-panel #vakata-dragged ins { display: block; text-decoration: none; width: 16px; height: 16px; margin: 0 0 0 0; padding: 0; position: absolute; top: 4px; left: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-border-radius: 4px; }

dev/install/config-form.html

@@ -17,7 +17,7 @@
 				<div id="Header">
 					<h1>SilverStripe</h1>
 					<div class="left">
-						<h2>CMS / Framework Installation <small>Version <?php echo $silverstripe_version; ?></small></h2>
+						<h2>CMS / Framework Installation <?php if($silverstripe_version) echo "<small>Version $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>
@@ -250,7 +250,7 @@
 							<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>
 							<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="simple" id="Simple" <?php if(!isset($_POST['template']) || $_POST['template'] == 'simple') {?>checked="checked"<?php }?>><label for="Simple"><a href="https://github.com/silverstripe-themes/silverstripe-simple">Simple</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>

dev/install/css/install.css

@@ -48,7 +48,7 @@ body .typography #install_button { font-size: 20px; color: #fff; border-color: #
 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)); */ }
+body .typography #install_button[disabled=disabled] { border: 1px solid #aaa; border-color: #bbb #bbb #aaa; color: #999; 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; }

dev/install/install.css

@@ -1,392 +0,0 @@
-.header {
-	padding-bottom:10px;
-}
-
-.header p {
-	color:#fff;
-}
-
-.install-header
-{
-	padding-bottom:10px;
-	background:#161616;
-}
-
-.install-header .inner{
-	padding-top:55px; 
-	position:relative;
-}
-
-.brand {
-	float:none;
-}
-
-.brand h1 {
-	float:left;
-}
-
-.brand .logo {
-	float:left;
-	margin-right:15px;
-	height:55px;
-	width:55px;
-	background:url(../install/images/ss-logo.png) center center no-repeat;
-}
-
-#Navigation {
-	display:none;
-}
-
-.main .inner ul {
-	padding-left:20px;
-}
-
-ul#Themes{
-	list-style: none;
-	margin: 0 5px 20px 5px;
-	float: left;
-	width: 320px;
-	padding:0;
-}
-	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;
-	}
-
-h1.sectionHeading {
-	margin-top: 20px;
-}
-
-.error {
-	padding: 0.5em;
-	background-color: #fdf5f5;
-	border: 1px #ff8e8e solid;
-	border-radius:4px;
-	color: #f03838;
-}
-	.main p.error { color: #f03838;}
-.warning {
-	padding: 0.5em;
-	background-color: #fcf8f2;
-	border-radius:4px;
-	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:0;
-	padding: 4px;
-	float:right;
-}
-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;
-}
-
-.main h2 {
-	margin: 36px 0 18px 0;
-	font-weight: bold;
-	clear: left;
-	text-indent: 5px;
-	width: 100%;
-	overflow: hidden;
-	border-top:1px solid #E5E5E5;
-}
-	.main h2 span {
-		float: right;
-		font-size: 0.8em;
-		padding: 10px 10px 0 0;
-		font-weight: normal;
-		color: #888;
-	}
-
-	.main h2.no-line {
-		border-top:none;
-	}
-
-/**
- * Requirements and test results
- * ------------------------------------------------ */
-table.testResults {
-	border-collapse: collapse;
-	width: 100%;
-	margin: -1px 0px 10px 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-radius:4px 4px 0 0;
-	border-width: 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: 13px;
-		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;
-}
-
-.main .helpText {
-	float: right;
-	width: 350px;
-	padding-right: 10px;
-}
-
-.section {
-	overflow: hidden;
-}
-
-.fields {
-	float: left;
-	width: 450px;
-}
-
-#devHelp,
-#devSection {
-	height: 18em;
-}
-
-.main .action input{
-	cursor:pointer;
-	text-align:center;
-	color:#fff;
-	background-color:#EF7F24;
-	border:none;
-	border-radius:4px;
-	font-size: 13px;
-	width: 220px;
-	font-weight: bold;
-	margin: 5px 0;
-	padding:5px;
-	font-family:"HelveticaNeueLTPro-Bd", "Helvetica Neue LT Pro Bold", "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "Helvetica Neue LT Pro", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
-}
-
-#use_environment_field {
-	margin: 20px 0 10px;
-}
-
-#use_environment_field input {
-	float: left;
-	margin-right: 5px;
-}
-
-.dbfields {
-	margin: 10px 10px 10px 0;
-}
-
-#database_credentials {
-	margin: 0;
-	line-height: 1;
-}
-
-#database_selection {
-	overflow: hidden;
-	margin: 0;
-	padding-left:5px;
-}
-	#database_selection li {
-		margin-left: 0;
-		padding-left: 0;
-		list-style-type:none;
-	}
-		#database_selection li input {
-			margin-right: 5px;
-			border-radius:4px;
-			background:#ededed;
-		}
-
-		#database_selection li .databaseClass {
-			background:none;
-		}
-
-		#database_selection li input:focus{
-			outline:none; background-color:#fff;
-		}
-
-		#database_selection li .field label {
-			float:left;
-			margin-top:15px;
-		}
-
-#AdminAccount input {
-	border-radius:4px;
-	background:#ededed;
-}
-
-#AdminAccount select {
-	border-radius:4px;
-	background:none;
-	margin-top:5px;
-}
-
-#AdminAccount select:focus{
-	outline:none;
-}
-
-#AdminAccount input:focus{
-	outline:none; background-color:#fff;
-}
-
-#AdminAccount .field label {
-	float:left;
-	margin-top:15px;
-}
-
-.databaseError {
-	clear:both;
-	overflow: hidden;
-	width: 290px;
-	line-height: 1.2;
-	margin: 10px 0 20px;
-	display: none;
-	border-radius:4px;
-}
-
-	.databaseError ul {
-		margin-bottom: 0;
-	}
-	.databaseError ul, .databaseError li {
-		margin-left: 0;
-		padding-left: 0;
-	}
-
-input#install_button {
-	cursor:pointer;
-	text-align:center;
-	color:#fff;
-	background-color:#359318;
-	border:none;
-	border-radius:4px;
-	font-size: 13px;
-	width: 220px;
-	font-weight: bold;
-	margin: 5px 0;
-	padding:5px;
-	font-family:"HelveticaNeueLTPro-Bd", "Helvetica Neue LT Pro Bold", "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "Helvetica Neue LT Pro", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
-}
-
-.goodInstall {
-	padding: 0.5em;
-	background-color: #e2fee1;
-	border: 1px #43cb3e solid;
-	color: #359318;
-	overflow: hidden;
-	line-height: 18px;
-	padding: 10px;
-}
-	.main 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;
-}

dev/install/install.php5

@@ -944,10 +944,7 @@ class Installer extends InstallRequirements {
 <html>
 	<head>
 		<title>Installing SilverStripe...</title>
-		<link rel="stylesheet" type="text/css" href="themes/simple/css/layout.css" />
+		<link rel="stylesheet" type="text/css" href="sapphire/dev/install/css/install.css" />
-		<link rel="stylesheet" type="text/css" href="themes/simple/css/typography.css" />
-		<link rel="stylesheet" type="text/css" href="themes/simple/css/form.css" />
-		<link rel="stylesheet" type="text/css" href="sapphire/dev/install/install.css" />
 		<script src="sapphire/thirdparty/jquery/jquery.js"></script>
 	</head>
 	<body>
@@ -957,7 +954,6 @@ class Installer extends InstallRequirements {
 					<span class="logo"></span>
 					<h1>SilverStripe</h1>
 				</div>
-				<p>Version <?php echo $silverstripe_version; ?></p>
 			</div>	
 		</div>
 
@@ -966,7 +962,7 @@ class Installer extends InstallRequirements {
 
 		<div class="main">
 			<div class="inner">
-				<h1>Installing SilverStripe...</h1>
+				<h2>Installing SilverStripe...</h2>
 				<p>I am now running through the installation steps (this should take about 30 seconds)</p>
 				<p>If you receive a fatal error, refresh this page to continue the installation</p>
 				<ul>

dev/install/scss/install.scss

@@ -351,7 +351,7 @@ body {
 			&[disabled=disabled] {
 				border: 1px solid #aaa;
 				border-color: #bbb #bbb #aaa;
-				color: #222;
+				color: #999;
 				text-shadow: 0 1px 0 #eee;
 				@include topGradient (#fbfbfb, #bbb);
 				&:hover {