Some style chages on first/second step.
This commit is contained in:
parent
c3c9696799
commit
6a05569ab5
|
@ -33,6 +33,14 @@
|
||||||
<path fill="none" d="M0 0h24v24H0z"/>
|
<path fill="none" d="M0 0h24v24H0z"/>
|
||||||
<path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
|
<path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
|
||||||
</g>
|
</g>
|
||||||
|
<g id="svg-checked">
|
||||||
|
<path d="M0 0h24v24H0z" fill="none"/>
|
||||||
|
<path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
|
||||||
|
</g>
|
||||||
|
<g id="svg-unchecked">
|
||||||
|
<path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/>
|
||||||
|
<path d="M0 0h24v24H0z" fill="none"/>
|
||||||
|
</g>
|
||||||
</defs>
|
</defs>
|
||||||
</svg>
|
</svg>
|
||||||
<div class="column-container wide">
|
<div class="column-container wide">
|
||||||
|
@ -98,37 +106,58 @@
|
||||||
<!-- Step 2 Create Account -->
|
<!-- Step 2 Create Account -->
|
||||||
<form class="js-acme-form js-acme-form-account">
|
<form class="js-acme-form js-acme-form-account">
|
||||||
<h1><label>What's your email?</label></h1>
|
<h1><label>What's your email?</label></h1>
|
||||||
<input class="js-acme-account-email" type="email" placeholder="john@doe.family" required>
|
<input class="js-acme-account-email acme-account-email" type="email" placeholder="john@doe.family" required>
|
||||||
<br>
|
<div class="checkbox-array">
|
||||||
<br>
|
<label>
|
||||||
<label><input class="js-acme-account-tos" type="checkbox" required>
|
<input class="js-acme-account-tos" type="checkbox" required>
|
||||||
Agree to <a class="js-acme-tos-url" target="acme-tos">Let's Encrypt™ Terms of Service</a>?</label>
|
<svg class="icon-checked-box" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||||
<br>
|
<use xlink:href="#svg-checked"></use>
|
||||||
<br>
|
</svg>
|
||||||
<label><input class="js-greenlock-account-tos" type="checkbox" required>
|
<svg class="icon-unchecked-box" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||||
Agree to <a class="js-gl-tos" target="_blank" href="./legal.html">Greenlock™ Terms of Service</a>?</label>
|
<use xlink:href="#svg-unchecked"></use>
|
||||||
<br>
|
</svg>
|
||||||
<br>
|
Agree to  <a class="js-acme-tos-url" target="acme-tos">Let's Encrypt™ Terms of Service</a>?
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<input class="js-greenlock-account-tos" type="checkbox" required>
|
||||||
|
<svg class="icon-checked-box" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||||
|
<use xlink:href="#svg-checked"></use>
|
||||||
|
</svg>
|
||||||
|
<svg class="icon-unchecked-box" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||||
|
<use xlink:href="#svg-unchecked"></use>
|
||||||
|
</svg>
|
||||||
|
Agree to  <a class="js-gl-tos" target="_blank" href="./legal.html">Greenlock™ Terms of Service</a>?
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
<!--
|
<!--
|
||||||
<a href="#">advanced (use existing account)</a>
|
<a href="#">advanced (use existing account)</a>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
-->
|
-->
|
||||||
<button type="submit">Next</button>
|
<button class="button-next" type="submit">Next</button>
|
||||||
|
<div class="email-usage">
|
||||||
|
Why do we need your email? We link your SSL certificates to the
|
||||||
|
email you use so you can manage your certificates in the future,
|
||||||
|
and get important email updates about them.
|
||||||
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
<!-- Step 3 Set Challanges -->
|
<!-- Step 3 Set Challanges -->
|
||||||
<form class="js-acme-form js-acme-form-challenges">
|
<form class="js-acme-form js-acme-form-challenges">
|
||||||
|
|
||||||
<h1>How will you validate your domain?</h1>
|
<h1>Let's verify your domain</h1>
|
||||||
<br>
|
<div class="tabbed-selector">
|
||||||
<label><input class="js-acme-challenge-type" name="acme-challenge-type" type="radio" value="http-01" checked required>
|
<label>
|
||||||
File Upload to HTTP Web Server</label>
|
<input class="js-acme-challenge-type" name="acme-challenge-type" type="radio" value="http-01" checked required>
|
||||||
<br>
|
File Upload
|
||||||
<label><input class="js-acme-challenge-type" name="acme-challenge-type" type="radio" value="dns-01" required>
|
<div></div>
|
||||||
TXT Records on DNS Name Server</label>
|
</label>
|
||||||
<br>
|
<label>
|
||||||
|
<input class="js-acme-challenge-type" name="acme-challenge-type" type="radio" value="dns-01" required>
|
||||||
|
DNS Record
|
||||||
|
<div></div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
<div class="js-acme-challenges">
|
<div class="js-acme-challenges">
|
||||||
|
|
||||||
<h2>Verify Domains & Sub-Domains</h2>
|
<h2>Verify Domains & Sub-Domains</h2>
|
||||||
|
|
|
@ -68,6 +68,7 @@ body {
|
||||||
font-family: Source Sans Pro, sans-serif;
|
font-family: Source Sans Pro, sans-serif;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
line-height: 1.33;
|
line-height: 1.33;
|
||||||
|
color: #1a1a1a;
|
||||||
}
|
}
|
||||||
|
|
||||||
.greenlock-name {
|
.greenlock-name {
|
||||||
|
@ -84,7 +85,93 @@ body {
|
||||||
display: initial;
|
display: initial;
|
||||||
}
|
}
|
||||||
|
|
||||||
svg {
|
svg {}
|
||||||
}
|
|
||||||
|
|
||||||
.js-progress-step-complete > .circle {}
|
.js-progress-step-complete > .circle {}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 1.77777778em;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=email], input[type=text] {
|
||||||
|
font-size: 1em;
|
||||||
|
padding: 0.444444444em 0.888889em;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox-array {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: start;
|
||||||
|
padding: 1em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox-array input[type=checkbox] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox-array input[type=checkbox] ~ .icon-checked-box {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox-array input[type=checkbox] ~ .icon-unchecked-box {
|
||||||
|
display: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.checkbox-array input[type=checkbox]:checked ~ .icon-checked-box {
|
||||||
|
display: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox-array input[type=checkbox]:checked ~ .icon-unchecked-box {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox-array .icon-checked-box, .checkbox-array .icon-unchecked-box {
|
||||||
|
width: 1.333333333em;
|
||||||
|
fill: #5bc17f;
|
||||||
|
margin-right: 0.666666667em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox-array label {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: 1.333333333em;
|
||||||
|
font-size: 0.833333333em;
|
||||||
|
margin: 0.4em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #1a1a1a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.email-usage {
|
||||||
|
color: #666666;
|
||||||
|
text-align: start;
|
||||||
|
font-size: 0.833333333em;
|
||||||
|
margin: 2em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-next {
|
||||||
|
width: 100%;
|
||||||
|
background-color: #5bc17f;
|
||||||
|
border: none;
|
||||||
|
font-size: 1em;
|
||||||
|
color: white;
|
||||||
|
padding: 0.44444em;
|
||||||
|
margin: 1em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabbed-selector label {
|
||||||
|
width: 50%;
|
||||||
|
padding: 0.5em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabbed-selector {
|
||||||
|
display: flex;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabbed-selector input[type=radio] {
|
||||||
|
display: none;
|
||||||
|
}
|
Loading…
Reference in New Issue