Change link text for installing starter kit thumbnail & update styles
This commit is contained in:
Lynne Finnigan
committed by
Sebastiaan Janssen
Sebastiaan Janssen
parent
362fb7722d
commit
327764d366
@@ -1,23 +1,27 @@
|
||||
<div ng-controller="Umbraco.Installer.PackagesController" id="starterKits">
|
||||
<h1>Install a starter website</h1>
|
||||
<div ng-controller="Umbraco.Installer.PackagesController" id="starterKits">
|
||||
<h1>Install a starter website</h1>
|
||||
|
||||
<p>
|
||||
Installing a starter website helps you learn how Umbraco works, and
|
||||
gives you a solid and simple foundation to build on top of.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Installing a starter website helps you learn how Umbraco works, and gives you a solid
|
||||
and simple foundation to build on top of.
|
||||
</p>
|
||||
|
||||
<small ng-if="!packages || packages.length == 0">Loading...</small>
|
||||
|
||||
<ul class="thumbnails">
|
||||
<ul class="thumbnails">
|
||||
<li class="span3" ng-repeat="pck in packages">
|
||||
<a href ng-click="setPackageAndContinue(pck.id)" class="thumbnail">
|
||||
<small>Loading...</small>
|
||||
<img ng-src="https://our.umbraco.com{{pck.thumbnail}}?width=170" alt="{{pck.name}}">
|
||||
<a ng-click="setPackageAndContinue(pck.id)" class="thumbnail">
|
||||
<img ng-src="https://our.umbraco.com{{
|
||||
pck.thumbnail
|
||||
}}?width=170"
|
||||
alt="{{ pck.name }}" />
|
||||
<small>Install starter website</small>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a href ng-click="setPackageAndContinue('00000000-0000-0000-0000-000000000000')" class="btn btn-link btn-link-reverse">
|
||||
<a href ng-click="setPackageAndContinue('00000000-0000-0000-0000-000000000000')"
|
||||
class="btn btn-link btn-link-reverse">
|
||||
No thanks, I do not want to install a starter website
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
// Core variables and mixins
|
||||
// Core variables and mixins
|
||||
@import "fonts.less"; // Loading fonts
|
||||
@import "variables.less"; // Modify this for custom colors, font-sizes, etc
|
||||
@import "mixins.less";
|
||||
@@ -18,154 +18,172 @@
|
||||
|
||||
|
||||
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
|
||||
display: none !important;
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
|
||||
html {
|
||||
background: url('../img/installer.jpg') no-repeat center center fixed;
|
||||
background-size: cover;
|
||||
background: url('../img/installer.jpg') no-repeat center center fixed;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
font-family: @baseFontFamily;
|
||||
font-size: @baseFontSize;
|
||||
line-height: @baseLineHeight;
|
||||
color: @textColor;
|
||||
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
|
||||
// better font rendering
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
font-family: @baseFontFamily;
|
||||
font-size: @baseFontSize;
|
||||
line-height: @baseLineHeight;
|
||||
color: @textColor;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
// better font rendering
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
#logo{
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
opacity: 0.8;
|
||||
z-index: 777;
|
||||
#logo {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
opacity: 0.8;
|
||||
z-index: 777;
|
||||
}
|
||||
|
||||
#installer{
|
||||
margin: auto;
|
||||
#installer {
|
||||
margin: auto;
|
||||
background: @white;
|
||||
width: 750px;
|
||||
height: 600px;
|
||||
text-align: left;
|
||||
padding: 30px;
|
||||
overflow:hidden;
|
||||
z-index: 667;
|
||||
width: 750px;
|
||||
height: 600px;
|
||||
text-align: left;
|
||||
padding: 30px;
|
||||
overflow: hidden;
|
||||
z-index: 667;
|
||||
}
|
||||
|
||||
#overlay{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background: @purple-d2;
|
||||
z-index: 666;
|
||||
#overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background: @purple-d2;
|
||||
z-index: 666;
|
||||
}
|
||||
|
||||
.loading #overlay{
|
||||
.loading #overlay {
|
||||
opacity: 0.5;
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
|
||||
#fact{
|
||||
color: @white;
|
||||
text-shadow: 0px 0px 4px @black;
|
||||
font-size: 25px;
|
||||
text-align: left;
|
||||
line-height: 35px;
|
||||
z-index: 667;
|
||||
height: 600px;
|
||||
width: 750px;
|
||||
#fact {
|
||||
color: @white;
|
||||
text-shadow: 0px 0px 4px @black;
|
||||
font-size: 25px;
|
||||
text-align: left;
|
||||
line-height: 35px;
|
||||
z-index: 667;
|
||||
height: 600px;
|
||||
width: 750px;
|
||||
|
||||
h2 {
|
||||
font-size: 35px;
|
||||
border-bottom: 1px solid @white;
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 20px;
|
||||
color: @white;
|
||||
}
|
||||
|
||||
a {
|
||||
color: @white;
|
||||
}
|
||||
}
|
||||
|
||||
#fact h2{
|
||||
font-size: 35px;
|
||||
border-bottom: 1px solid @white;
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 20px;
|
||||
color: @white;
|
||||
}
|
||||
|
||||
#fact a{color: @white;}
|
||||
|
||||
#feedback{
|
||||
color: @white;
|
||||
text-shadow: 0px 0px 4px @black;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
z-index: 667;
|
||||
bottom: 20px;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: 25px;
|
||||
position: absolute;
|
||||
#feedback {
|
||||
color: @white;
|
||||
text-shadow: 0px 0px 4px @black;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
z-index: 667;
|
||||
bottom: 20px;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: 25px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
|
||||
h1{
|
||||
border-bottom: 1px solid @gray-10;
|
||||
padding-bottom: 10px;
|
||||
color: @gray-2;
|
||||
h1 {
|
||||
border-bottom: 1px solid @gray-10;
|
||||
padding-bottom: 10px;
|
||||
color: @gray-2;
|
||||
}
|
||||
|
||||
.error h1, .error .message, span.error{ color: @red;}
|
||||
.error h1, .error .message, span.error {
|
||||
color: @red;
|
||||
}
|
||||
|
||||
legend{font-size: 14px; font-weight: bold}
|
||||
legend {
|
||||
font-size: 14px;
|
||||
font-weight: bold
|
||||
}
|
||||
|
||||
input.ng-dirty.ng-invalid{border-color: #b94a48; color: #b94a48;}
|
||||
.disabled{
|
||||
opacity: 0.6;
|
||||
input.ng-dirty.ng-invalid {
|
||||
border-color: #b94a48;
|
||||
color: #b94a48;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
|
||||
#installer label.control-label,
|
||||
#installer label.control-label,
|
||||
#installer .constrol-label {
|
||||
padding-top: 5px !important;
|
||||
}
|
||||
|
||||
.controls{
|
||||
text-align: left
|
||||
}
|
||||
.controls {
|
||||
text-align: left;
|
||||
|
||||
.controls small{display: block; color: @gray-3;}
|
||||
small {
|
||||
display: block;
|
||||
color: @gray-3;
|
||||
}
|
||||
}
|
||||
|
||||
.absolute-center {
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
top: 0; left: 0; bottom: 0; right: 0;
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.fade-hide, .fade-show {
|
||||
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
|
||||
}
|
||||
.fade-hide {
|
||||
opacity:1;
|
||||
}
|
||||
.fade-hide.fade-hide-active {
|
||||
opacity:0;
|
||||
}
|
||||
.fade-hide,
|
||||
.fade-show {
|
||||
opacity:0;
|
||||
transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
|
||||
}
|
||||
|
||||
.fade-hide {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.fade-hide.fade-hide-active {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.fade-show {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.fade-show.fade-show-active {
|
||||
opacity:1;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.umb-installer-loader {
|
||||
@@ -180,49 +198,60 @@ input.ng-dirty.ng-invalid{border-color: #b94a48; color: #b94a48;}
|
||||
}
|
||||
|
||||
.permissions-report {
|
||||
overflow:auto;
|
||||
height:320px;
|
||||
margin:0;
|
||||
display:block;
|
||||
padding:0;
|
||||
overflow: auto;
|
||||
height: 320px;
|
||||
margin: 0;
|
||||
display: block;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.permissions-report > li {
|
||||
list-style:none;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.permissions-report h4 {
|
||||
margin:7px;
|
||||
margin: 7px;
|
||||
}
|
||||
|
||||
.upgrade-report {
|
||||
overflow:auto;
|
||||
height:280px;
|
||||
display:block;
|
||||
overflow: auto;
|
||||
height: 280px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
select {
|
||||
width:320px;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
#ysod {
|
||||
height:500px;
|
||||
width:100%;
|
||||
overflow:auto;
|
||||
border:none;
|
||||
height: 500px;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
border: none;
|
||||
}
|
||||
#starterKits .thumbnails{
|
||||
min-height:128px;
|
||||
}
|
||||
#starterKits a.thumbnail {
|
||||
position:relative;
|
||||
height:98px;
|
||||
}
|
||||
#starterKits a.thumbnail small {
|
||||
position:absolute;
|
||||
z-index: 50;
|
||||
top:10px;
|
||||
left:10px;
|
||||
}
|
||||
#starterKits a.thumbnail img {
|
||||
position:relative;
|
||||
z-index:100;
|
||||
|
||||
#starterKits {
|
||||
.thumbnails {
|
||||
min-height: 128px;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
small {
|
||||
padding: 10px 10px 5px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
img {
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-link {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user