diff --git a/core/client/assets/sass/layouts/setup.scss b/core/client/assets/sass/layouts/setup.scss new file mode 100644 index 0000000000..2ad0e2b8a8 --- /dev/null +++ b/core/client/assets/sass/layouts/setup.scss @@ -0,0 +1,127 @@ +// +// 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 { + top: 15px; + @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 { + // padding-left: 110px; + + // @media (max-width: 550px) { + // padding-left: 0; + // } + // } + + input { + // width: 300px; + padding: 7px; + border: none; + color: #fff; + background: lighten($darkgrey, 10%); + @include transition(background ease 0.25s); + + // @media (max-width: 550px) { + // width: 100%; + // } + + &: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; + 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; + color: $midgrey; + + @media (max-width: 550px) { + font-size: 14px; + } + } + + p { + font-size: 12px; + line-height: 1.4em; + color: $midgrey; + } + + footer { + margin: 30px 0 5px 0; + } + + .button-add { + width: 100%; + padding: 0.9em 1.8em; + font-size: 13px; + } +} \ No newline at end of file