Ghost/ghost/admin/assets/sass/layouts/setup.scss
2014-09-27 10:44:54 +01:00

122 lines
2.3 KiB
SCSS

//
// Setup
// --------------------------------------------------
// Slug: /ghost/setup/
// --------------------------------------------------
// These styles cover /ghost/setup/ which is the first
// screen that appears on a new Ghost install
.ghost-setup {
color: $midgrey;
background: $darkgrey;
@media (max-width: 550px) {
background: darken($darkgrey, 5%);
}
main {
padding-top: 15px;
overflow: auto;
-webkit-overflow-scrolling: touch;
@media (max-width: 550px) {
top: 0;
}
}
}
// The wrapper to center the form in all ways
.setup-box {
display: table;
max-width: 500px;
height: 90%;
margin: 0 auto;
padding: 0;
}
// The form itself with the dark background
.setup-form {
max-width: 530px;
padding: 40px;
color: lighten($midgrey, 15%);
background: darken($darkgrey, 5%);
border-radius: 2px;
@media (max-width: 400px) {
padding: 15px;
}
header {
margin-bottom: 30px;
}
label {
// width: 90px;
color: $lightgrey;
font-weight: 300;
@media (max-width: 550px) {
width: 100%;
}
}
.form-group input {
// width: 300px;
padding: 7px;
border: none;
color: #fff;
background: lighten($darkgrey, 10%);
transition: background 0.25s ease;
&:focus {
border:none;
background: lighten($darkgrey, 15%);
}
}
// Chrome auto-fill style
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px $lightgrey inset !important;
}
h1 {
margin: 0;
font-weight: 200;
font-size: 26px;
letter-spacing: 0;
color: $lightgrey;
@media (max-width: 550px) {
font-size: 20px;
}
}
h2 {
margin: 6px 0 0 0;
padding: 0;
border: none;
font-weight: 200;
font-size: 16px;
letter-spacing: 0;
color: $midgrey;
white-space: nowrap;
@media (max-width: 550px) {
font-size: 14px;
}
}
p {
font-size: 12px;
line-height: 1.4em;
color: $midgrey;
}
footer {
margin: 30px 0 5px 0;
}
.btn-green {
width: 100%;
padding: 0.9em 1.8em;
font-size: 13px;
}
}