mirror of
https://github.com/TryGhost/Ghost.git
synced 2023-12-13 21:00:40 +01:00
New onboarding markup and styles
This commit is contained in:
John O'Nolan
Hannah Wolfe
parent
53b758d127
commit
1daee7cff1
|
|
@ -69,7 +69,8 @@ var _ = require('lodash'),
|
|||
'content/themes/casper/assets/js/*.js',
|
||||
'core/client/dist/*.js',
|
||||
'core/client/dist/*.css',
|
||||
'core/built/scripts/*.js'
|
||||
'core/built/scripts/*.js',
|
||||
'core/client/app/html/*.html'
|
||||
],
|
||||
options: {
|
||||
livereload: true
|
||||
|
|
|
|||
47
core/client/app/html/install1.html
Normal file
47
core/client/app/html/install1.html
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
<!doctype html>
|
||||
<!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="en"><![endif]-->
|
||||
<!--[if (gte IE 9)| IEMobile |!(IE)]><!--><html class="no-js" lang="en"><!--<![endif]-->
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
<title>Ghost Admin</title>
|
||||
<meta name="HandheldFriendly" content="True" />
|
||||
<meta name="MobileOptimized" content="320" />
|
||||
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1, minimal-ui" />
|
||||
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:400,300,700" />
|
||||
<link rel="stylesheet" href="file:///Users/John/Sites/Ghost/core/built/assets/vendor.css" />
|
||||
<link rel="stylesheet" href="file:///Users/John/Sites/Ghost/core/built/assets/ghost.css" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<div class="gh-setup">
|
||||
<header class="gh-setup-head">
|
||||
<nav class="gh-setup-nav">
|
||||
<ol>
|
||||
<li class="current"><a class="step" href="#"><i class="icon-check"></i><span class="num">1</span></a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a class="step" href="#"><i class="icon-check"></i><span class="num">2</span></a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a class="step" href="#"><i class="icon-check"></i><span class="num">3</span></a></li>
|
||||
</ol>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div class="gh-setup-content-wrap">
|
||||
<section class="gh-setup-content">
|
||||
<header>
|
||||
<h1>Welcome to <strong>Ghost</strong>!</h1>
|
||||
<p>So far there have been <em>542,952</em> Ghost blogs made by people all over the world. Today we’re making yours.</p>
|
||||
</header>
|
||||
|
||||
<img class="gh-setup-screenshot" src="file:///Users/John/Sites/Ghost/core/shared/img/install-welcome.png" alt="Ghost screenshot" />
|
||||
|
||||
<a class="btn btn-green btn-lg" href="#">Create your account <i class="icon-chevron"></i></a>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
86
core/client/app/html/install2.html
Normal file
86
core/client/app/html/install2.html
Normal file
|
|
@ -0,0 +1,86 @@
|
|||
<!doctype html>
|
||||
<!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="en"><![endif]-->
|
||||
<!--[if (gte IE 9)| IEMobile |!(IE)]><!--><html class="no-js" lang="en"><!--<![endif]-->
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
<title>Ghost Admin</title>
|
||||
<meta name="HandheldFriendly" content="True" />
|
||||
<meta name="MobileOptimized" content="320" />
|
||||
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1, minimal-ui" />
|
||||
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:400,300,700" />
|
||||
<link rel="stylesheet" href="file:///Users/John/Sites/Ghost/core/built/assets/vendor.css" />
|
||||
<link rel="stylesheet" href="file:///Users/John/Sites/Ghost/core/built/assets/ghost.css" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<div class="gh-setup">
|
||||
<header class="gh-setup-head">
|
||||
<nav class="gh-setup-nav">
|
||||
<a class="gh-setup-back" href="#"><i class="icon-chevron-left"></i> Back</a>
|
||||
<ol>
|
||||
<li><a class="step" href="#"><i class="icon-check"></i><span class="num">1</span></a></li>
|
||||
<li class="divider"></li>
|
||||
<li class="current"><a class="step" href="#"><i class="icon-check"></i><span class="num">2</span></a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a class="step" href="#"><i class="icon-check"></i><span class="num">3</span></a></li>
|
||||
</ol>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div class="gh-setup-content-wrap">
|
||||
<section class="gh-setup-content">
|
||||
<header>
|
||||
<h1>Create your account</h1>
|
||||
</header>
|
||||
|
||||
<form class="gh-setup-create">
|
||||
<figure class="account-image">
|
||||
<div id="account-image" class="img" style="background-image: url(http://www.gravatar.com/avatar/75e958a6674a7d68fe0d575fb235116c?d=404&s=250)">
|
||||
<!-- fallback to: Ghost/core/shared/img/ghosticon.jpg -->
|
||||
<span class="sr-only">User imge</span>
|
||||
</div>
|
||||
<a class="edit-account-image" href="#"><i class="icon-image "><span class="sr-only">Upload an image</span></i></a>
|
||||
</figure>
|
||||
<div class="form-group">
|
||||
<label for="email-address">Email address</label>
|
||||
<span class="input-icon icon-mail">
|
||||
<input id="email-address" class="ember-view ember-text-field" type="email" placeholder="Eg. john@example.com">
|
||||
</span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="full-name">Full name</label>
|
||||
<span class="input-icon icon-user">
|
||||
<input id="full-name" class="ember-view ember-text-field" type="text" placeholder="Eg. John Smith">
|
||||
</span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="password">Password</label>
|
||||
<span class="input-icon icon-lock">
|
||||
<input id="password" class="ember-view ember-text-field" type="password" placeholder="At least 7 characters">
|
||||
<div class="pw-strength">
|
||||
<div class="pw-strength-dot"></div>
|
||||
<div class="pw-strength-dot"></div>
|
||||
<div class="pw-strength-dot"></div>
|
||||
<div class="pw-strength-dot"></div>
|
||||
<div class="pw-strength-dot <!--pw-strength-activedot-->"></div>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="blog-title">Blog title</label>
|
||||
<span class="input-icon icon-content">
|
||||
<input id="blog-title" class="ember-view ember-text-field" type="text" placeholder="Eg. The Daily Awesome">
|
||||
</span>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<a class="btn btn-green btn-lg btn-block" href="#">Last step: Invite your team <i class="icon-chevron"></i></a>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
90
core/client/app/html/install3.html
Normal file
90
core/client/app/html/install3.html
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
<!doctype html>
|
||||
<!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="en"><![endif]-->
|
||||
<!--[if (gte IE 9)| IEMobile |!(IE)]><!--><html class="no-js" lang="en"><!--<![endif]-->
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
<title>Ghost Admin</title>
|
||||
<meta name="HandheldFriendly" content="True" />
|
||||
<meta name="MobileOptimized" content="320" />
|
||||
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1, minimal-ui" />
|
||||
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:400,300,700" />
|
||||
<link rel="stylesheet" href="file:///Users/John/Sites/Ghost/core/built/assets/vendor.css" />
|
||||
<link rel="stylesheet" href="file:///Users/John/Sites/Ghost/core/built/assets/ghost.css" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<div class="gh-setup">
|
||||
<header class="gh-setup-head">
|
||||
<nav class="gh-setup-nav">
|
||||
<a class="gh-setup-back" href="#"><i class="icon-chevron-left"></i> Back</a>
|
||||
<ol>
|
||||
<li><a class="step" href="#"><i class="icon-check"></i><span class="num">1</span></a></li>
|
||||
<li class="divider"></li>
|
||||
<li class="current"><a class="step" href="#"><i class="icon-check"></i><span class="num">2</span></a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a class="step" href="#"><i class="icon-check"></i><span class="num">3</span></a></li>
|
||||
</ol>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div class="gh-setup-content-wrap">
|
||||
<section class="gh-setup-content">
|
||||
<header>
|
||||
<h1>Create your account</h1>
|
||||
</header>
|
||||
|
||||
<form class="gh-setup-create">
|
||||
<figure class="account-image">
|
||||
<div id="account-image" class="img" style="background-image: url(http://www.gravatar.com/avatar/75e958a6674a7d68fe0d575fb235116c?d=404&s=250)">
|
||||
<!-- fallback to: Ghost/core/shared/img/ghosticon.jpg -->
|
||||
<span class="sr-only">User imge</span>
|
||||
</div>
|
||||
<a class="edit-account-image" href="#"><i class="icon-image "><span class="sr-only">Upload an image</span></i></a>
|
||||
</figure>
|
||||
<div class="form-group success">
|
||||
<label for="email-address">Email address</label>
|
||||
<span class="input-icon icon-mail">
|
||||
<input id="email-address" class="ember-view ember-text-field" type="email" placeholder="Eg. john@example.com">
|
||||
</span>
|
||||
<p class="response">Lookin' good</p>
|
||||
</div>
|
||||
<div class="form-group success">
|
||||
<label for="full-name">Full name</label>
|
||||
<span class="input-icon icon-user">
|
||||
<input id="full-name" class="ember-view ember-text-field" type="text" placeholder="Eg. John Smith">
|
||||
</span>
|
||||
<p class="response">Nice to meet you, John! <a href="#">Upload a photo?</a></p>
|
||||
</div>
|
||||
<div class="form-group error">
|
||||
<label for="password">Password</label>
|
||||
<span class="input-icon icon-lock">
|
||||
<input id="password" class="ember-view ember-text-field" type="password" placeholder="At least 7 characters">
|
||||
<div class="pw-strength">
|
||||
<div class="pw-strength-dot"></div>
|
||||
<div class="pw-strength-dot"></div>
|
||||
<div class="pw-strength-dot"></div>
|
||||
<div class="pw-strength-dot"></div>
|
||||
<span class="pw-strength-dot pw-strength-activedot"></span>
|
||||
</div>
|
||||
</span>
|
||||
<p class="response">Too short, dear</p>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="blog-title">Blog title</label>
|
||||
<span class="input-icon icon-content">
|
||||
<input id="blog-title" class="ember-view ember-text-field" type="text" placeholder="Eg. The Daily Awesome">
|
||||
</span>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<a class="btn btn-green btn-lg btn-block" href="#">Last step: Invite your team <i class="icon-chevron"></i></a>
|
||||
<p class="main-error">The password fairy does not approve</p>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
54
core/client/app/html/install4.html
Normal file
54
core/client/app/html/install4.html
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
<!doctype html>
|
||||
<!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="en"><![endif]-->
|
||||
<!--[if (gte IE 9)| IEMobile |!(IE)]><!--><html class="no-js" lang="en"><!--<![endif]-->
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
<title>Ghost Admin</title>
|
||||
<meta name="HandheldFriendly" content="True" />
|
||||
<meta name="MobileOptimized" content="320" />
|
||||
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1, minimal-ui" />
|
||||
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:400,300,700" />
|
||||
<link rel="stylesheet" href="file:///Users/John/Sites/Ghost/core/built/assets/vendor.css" />
|
||||
<link rel="stylesheet" href="file:///Users/John/Sites/Ghost/core/built/assets/ghost.css" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<div class="gh-setup">
|
||||
<header class="gh-setup-head">
|
||||
<nav class="gh-setup-nav">
|
||||
<a class="gh-setup-back" href="#"><i class="icon-chevron-left"></i> Back</a>
|
||||
<ol>
|
||||
<li><a class="step" href="#"><i class="icon-check"></i><span class="num">1</span></a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a class="step" href="#"><i class="icon-check"></i><span class="num">2</span></a></li>
|
||||
<li class="divider"></li>
|
||||
<li class="current"><span class="step" href="#"><i class="icon-check"></i><span class="num">3</span></span></li>
|
||||
</ol>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div class="gh-setup-content-wrap">
|
||||
<section class="gh-setup-content">
|
||||
<header>
|
||||
<h1>Invite your team</h1>
|
||||
<p>Ghost works best when shared with others. Collaborate, get feedback on your posts & work together on ideas.</p>
|
||||
</header>
|
||||
|
||||
<img class="gh-setup-faces" src="file:///Users/John/Sites/Ghost/core/shared/img/users.png" alt="" />
|
||||
|
||||
<form class="gh-setup-invite">
|
||||
<label>Enter one email address per line, we’ll handle the rest! <i class="icon-mail"></i></label>
|
||||
<textarea placeholder="john@example.com
|
||||
sally.sanders@example.com"></textarea>
|
||||
</form>
|
||||
|
||||
<a class="btn btn-default btn-minor btn-lg btn-block" href="#">I'll do this later, take me to my blog!</a>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,7 +1,6 @@
|
|||
// ------------------------------------------------------------
|
||||
// Setup
|
||||
//
|
||||
// Styles for the Tag Management screen
|
||||
// Slug: /ghost/setup/
|
||||
//
|
||||
// * Page
|
||||
|
|
@ -11,140 +10,381 @@
|
|||
|
||||
|
||||
//
|
||||
// Page
|
||||
// --------------------------------------------------
|
||||
// Applied to the <body> element
|
||||
// Layout
|
||||
// ------------------------------------------------------------
|
||||
|
||||
.ghost-setup {
|
||||
color: $midgrey;
|
||||
background: $darkgrey;
|
||||
.gh-setup {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@media (max-width: 550px) {
|
||||
background: darken($darkgrey, 5%);
|
||||
.gh-setup-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-top: 4vh;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.gh-setup-content-wrap {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-bottom: 8vh;
|
||||
margin: 0 5%;
|
||||
}
|
||||
|
||||
//
|
||||
// Header
|
||||
// ------------------------------------------------------------
|
||||
.gh-setup-back {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border: transparent 1px solid;
|
||||
padding: 2px 9px 2px 5px;
|
||||
margin: 0 0 0 3%;
|
||||
font-weight: 100;
|
||||
color: #7d878a;
|
||||
border-radius: 4px;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
border: #DAE1E3 1px solid;
|
||||
}
|
||||
}
|
||||
|
||||
.gh-setup-nav {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
|
||||
ol {
|
||||
width: 160px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
list-style: none;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
main {
|
||||
padding-top: 15px;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
li {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 550px) {
|
||||
top: 0;
|
||||
// Set the default divider to green, and then override it to
|
||||
// grey using the next~sibling selector. Means that all
|
||||
// dividers before .current will be automatically green.
|
||||
.divider {
|
||||
align-self: center;
|
||||
width: 22px;
|
||||
height: 2px;
|
||||
background-image: linear-gradient(to right, $green 33%, rgba(255,255,255,0) 0%);
|
||||
background-position: bottom;
|
||||
background-size: 6px 2px;
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
.current ~ .divider {
|
||||
background-image: linear-gradient(to right, #E3E3E3 33%, rgba(255,255,255,0) 0%);
|
||||
}
|
||||
|
||||
.step {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border: transparent 2px solid;
|
||||
font-size: 1.3rem;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background: $green;
|
||||
border-radius: 100%;
|
||||
|
||||
.num {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.current ~ li:not(divider) .step {
|
||||
border: #E3E3E3 2px solid;
|
||||
color: #CDCDCD;
|
||||
background: transparent;
|
||||
|
||||
//
|
||||
// Wrapper
|
||||
// --------------------------------------------------
|
||||
// Centered in the middle of the screen
|
||||
|
||||
.setup-box {
|
||||
display: table;
|
||||
max-width: 500px;
|
||||
height: 90%;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Form
|
||||
// --------------------------------------------------
|
||||
|
||||
.setup-form {
|
||||
max-width: 530px;
|
||||
padding: 40px;
|
||||
color: lighten($midgrey, 15%);
|
||||
border-radius: 2px;
|
||||
|
||||
@media (max-width: 400px) {
|
||||
padding: 15px;
|
||||
.num {
|
||||
display: block;
|
||||
}
|
||||
i {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 551px) {
|
||||
background: darken($darkgrey, 5%);
|
||||
.current .step {
|
||||
border: $green 2px solid;
|
||||
color: $green;
|
||||
font-weight: bold;
|
||||
background: transparent;
|
||||
cursor: default;
|
||||
|
||||
.num {
|
||||
display: block;
|
||||
}
|
||||
i {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.done {
|
||||
background: $green;
|
||||
border: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.gh-setup-content {
|
||||
width: 100%;
|
||||
max-width: 700px;
|
||||
font-size: 1.9rem;
|
||||
line-height: 1.5em;
|
||||
font-weight: 100;
|
||||
color: $midgrey;
|
||||
text-align: center;
|
||||
|
||||
@media (max-width: 500px) {
|
||||
font-size: 4vw;
|
||||
}
|
||||
|
||||
header {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
label {
|
||||
color: $lightgrey;
|
||||
font-weight: 300;
|
||||
|
||||
@media (max-width: 550px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.form-group input {
|
||||
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;
|
||||
max-width: 520px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 4.2rem;
|
||||
font-weight: 100;
|
||||
letter-spacing: -1px;
|
||||
|
||||
@media (max-width: 600px) {
|
||||
font-size: 7vw;
|
||||
}
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
em {
|
||||
color: $blue;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.gh-setup-screenshot {
|
||||
position: relative;
|
||||
left: -38px;
|
||||
|
||||
@media (max-width: 860px) {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: block;
|
||||
max-width: 400px;
|
||||
margin: 20px auto 0;
|
||||
}
|
||||
|
||||
//
|
||||
// Create your account
|
||||
// ------------------------------------------------------------
|
||||
|
||||
.gh-setup-create {
|
||||
position: relative;
|
||||
max-width: 400px;
|
||||
padding: 50px 40px 25px;
|
||||
margin: 70px auto 30px;
|
||||
border: #DAE1E3 1px solid;
|
||||
text-align: left;
|
||||
background: #F8FBFD;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.account-image {
|
||||
position: absolute;
|
||||
top: -50px;
|
||||
left: 50%;
|
||||
margin: 0;
|
||||
font-weight: 200;
|
||||
font-size: 26px;
|
||||
letter-spacing: 0;
|
||||
color: $lightgrey;
|
||||
margin-left: -50px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
padding: 4px;
|
||||
border: #D1D9DB 1px solid;
|
||||
text-align: center;
|
||||
background: #fff;
|
||||
border-radius: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
@media (max-width: 400px) {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
@media (max-width: 550px) {
|
||||
font-size: 20px;
|
||||
&:hover {
|
||||
.edit-account-image {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 6px 0 0 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
font-weight: 200;
|
||||
font-size: 16px;
|
||||
letter-spacing: 0;
|
||||
color: $midgrey;
|
||||
.edit-account-image {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
bottom: 4px;
|
||||
left: 4px;
|
||||
border-radius: 100%;
|
||||
width: calc(100% - 8px);
|
||||
background: rgba(87,163,232,0.7);
|
||||
opacity: 0;
|
||||
color: #fff;
|
||||
font-size: 3rem;
|
||||
line-height: 90px;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
@media (max-width: 400px) {
|
||||
font-size: 12px;
|
||||
.img {
|
||||
display: block;
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
background-color: #F8FBFD;
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
border-radius: 100%;
|
||||
animation: fade-in 1s;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 2.5rem;
|
||||
|
||||
label {
|
||||
margin: 0;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
@media (max-width: 550px) {
|
||||
font-size: 14px;
|
||||
a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 12px;
|
||||
|
||||
input {
|
||||
padding: 10px;
|
||||
border: #DAE1E3 1px solid;
|
||||
font-size: 1.6rem;
|
||||
line-height: 1.4em;
|
||||
color: $midgrey;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin: 30px 0 5px 0;
|
||||
.pw-strength {
|
||||
padding: 0 10px;
|
||||
height: 24px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 1px;
|
||||
margin-top: -11px;
|
||||
background: rgba(255,255,255,0.9);
|
||||
}
|
||||
|
||||
.btn-green {
|
||||
.pw-strength-dot {
|
||||
display: block;
|
||||
height: 3px;
|
||||
width: 3px;
|
||||
margin-top: 2px;
|
||||
background-color: #D9E0E3;
|
||||
border-radius: 100%;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.pw-strength-activedot {
|
||||
background-color: $red;
|
||||
}
|
||||
|
||||
// @TODO hack - replace with proper icon input
|
||||
.input-icon[class*='icon-']:before {
|
||||
transform: translateY(-49%);
|
||||
}
|
||||
|
||||
.gh-setup-invite {
|
||||
width: 100%;
|
||||
padding: 0.9em 1.8em;
|
||||
font-size: 13px;
|
||||
max-width: 400px;
|
||||
margin: 0 auto;
|
||||
text-align: left;
|
||||
|
||||
@media (max-width: 460px) {
|
||||
label i {display: none;}
|
||||
}
|
||||
}
|
||||
}//.setup-form
|
||||
|
||||
.gh-setup-faces {
|
||||
margin-bottom: 3vw;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
height: 160px;
|
||||
margin-bottom: 40px;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 100;
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
margin-bottom: 3vw;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Validation
|
||||
// ------------------------------------------------------------
|
||||
|
||||
.response {
|
||||
position: absolute;
|
||||
bottom: -25px;
|
||||
right: 0;
|
||||
margin: 0;
|
||||
text-align: right;
|
||||
font-size: 1.2rem;
|
||||
color: #A6B0B3;
|
||||
}
|
||||
|
||||
.success {
|
||||
.input-icon:before {
|
||||
color: $green;
|
||||
}
|
||||
}
|
||||
|
||||
.error {
|
||||
input {
|
||||
border-color: $red;
|
||||
}
|
||||
.input-icon:before {
|
||||
color: $red;
|
||||
}
|
||||
.response {
|
||||
color: $red;
|
||||
}
|
||||
}
|
||||
|
||||
// Appears under submit button
|
||||
.main-error {
|
||||
color: $red;
|
||||
font-size: 1.3rem;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -30,7 +30,6 @@ html {
|
|||
body {
|
||||
color: lighten($darkgrey, 10%);
|
||||
font-size: 1.4rem;
|
||||
font-feature-settings: "kern" 1;
|
||||
|
||||
// Prevent elastic scrolling on the whole page
|
||||
height: 100%;
|
||||
|
|
@ -54,7 +53,6 @@ h4, h5, h6 {
|
|||
line-height: 1.15em;
|
||||
color: $darkgrey;
|
||||
text-rendering: optimizeLegibility;
|
||||
font-feature-settings: "dlig" 1, "liga" 1, "lnum" 1, "kern" 1;
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
|
|
|||
BIN
core/shared/img/ghosticon.jpg
Normal file
BIN
core/shared/img/ghosticon.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
BIN
core/shared/img/install-welcome.png
Normal file
BIN
core/shared/img/install-welcome.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 235 KiB |
BIN
core/shared/img/users.png
Normal file
BIN
core/shared/img/users.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
Loading…
Reference in a new issue