Minor tool styling cleanup

This commit is contained in:
mDuo13
2018-05-07 14:11:49 -07:00
parent 278974841c
commit 4a784ba586
6 changed files with 65 additions and 105 deletions

View File

@@ -794,16 +794,21 @@ a.current {
font-size: 32px;
}
.landing h3 {
.landing h3,
#test-net-servers h3 {
font-size: 20px;
line-height: 20px;
font-weight: 700;
}
.landing h3.card-title {
.card-header.bg-dark h3.card-title {
margin-bottom: 0;
}
#test-net-servers pre {
overflow-x: auto;
}
.landing a.card,
.landing .card {
color: #212529;
@@ -840,7 +845,7 @@ a.current {
padding: 16px;
}
.landing .card-header + .card-body {
.landing .card-header:not(.bg-dark) + .card-body {
padding: 0 12px 12px 12px;
}
@@ -856,7 +861,7 @@ a.current {
transition: 0.5s;
}
.landing .card-header.bg-dark {
.card-header.bg-dark {
color: white;
}
@@ -990,6 +995,52 @@ a.current {
}
}
/* Test Net Faucet stuff ---------------------------------------------------- */
/* Progress spinner animation */
@keyframes rotating {
from {
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
}
to {
transform: rotate(360deg);
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
}
}
@-webkit-keyframes rotating /* Safari and Chrome */ {
from {
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
}
to {
transform: rotate(360deg);
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
}
}
.page-test-net .throbber {
-webkit-animation: rotating 1s linear infinite;
-moz-animation: rotating 1s linear infinite;
-ms-animation: rotating 1s linear infinite;
-o-animation: rotating 1s linear infinite;
animation: rotating 1s linear infinite;
width: 25px;height:25px;
}
/* Print styles ------------------------------------------------------------- */
@media print {
{

View File

@@ -1,6 +1,7 @@
input#domain {
padding: 10px 20px;
width: 255px;
margin-bottom: 16px;
width: 100%;
}
.result-title {

View File

@@ -1,93 +0,0 @@
.cta_readmore {
background-color: #27a2db;
color: white;
border-radius: 5px;
padding: 10px 50px;
border: none;
outline: 0;
}
.cta_readmore:hover,
.cta_readmore:active,
.cta_readmore:focus {
background-color: #43bded;
color: white;
outline: 0;
border: none;
}
#your-credentials {
display: none;
margin: 15px 0 30px;
}
#loader {
display: none;
}
#loader img {
margin: 0 10px 0 20px;
width: 25px;
height: auto;
}
#test-net-servers {
font-size: 15px;
border-radius: 5px;
border: 1px solid #27a2db;
width: 350px;
float: right;
margin-left: 15px;
}
#test-net-servers pre {
overflow-x: auto;
}
.page-test-net .container {
margin-left: 15px;
margin-right: 15px;
width: auto;
}
@media (min-width: 1600px) {
.page-test-net .container {
margin-left: auto;
margin-right: auto;
width: 1500px;
}
}
@media (max-width: 992px) {
#test-net-servers {
position: static;
float: none;
max-width: none;
width: auto;
margin: 0 0 30px 0;
}
}
h2 {
font-size: 36px;
color: #066b98;
line-height: 1.2em;
margin-top: 0;
}
#test-net-servers h5 {
letter-spacing: .04em;
font-family: 'open_sansbold', sans-serif;
text-transform: uppercase;
color: #344e5a;
clear: both;
margin-top: 20px !important;
}
#test-net-servers .panel-heading {
margin-top: 0;
padding: 0;
font-size: 21px;
font-family: "open_sanslight", sans-serif;
color: #27a2db;
line-height: 1.2em;
margin-bottom: 20px;
}

View File

@@ -35,5 +35,5 @@ function rippleTestNetCredentials() {
}
$(document).ready(function() {
$('.cta_readmore').click(rippleTestNetCredentials);
$('#generate-creds-button').click(rippleTestNetCredentials);
});

View File

@@ -11,7 +11,7 @@
<form id="domain-entry">
<fieldset>
<input id="domain" type="text" required
placeholder="Domain name, e.g.example.com"
placeholder="example.com (Domain name to check)"
pattern="^([a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,6}$"><br>
<button class="btn btn-primary">Verify ripple.txt</button>
</fieldset>

View File

@@ -3,16 +3,18 @@
{% block bodyclasses %}page-test-net{% endblock %}
{% block right_sidebar %}
<aside id="test-net-servers" class="card">
<div id="test-net-servers" class="card">
<div class="card-header bg-dark">
<h3 class="card-title">Test Net Servers</h3>
</div><!--/.card-header-->
<div class="card-body">
<div class="card-header">Test Net Servers</div>
<p>Use the following addresses to connect to the XRP Test Net and send transactions from your account.</p>
<h5>Websockets and Ripple API</h4>
<pre><code>wss://s.altnet.rippletest.net:51233</code></pre>
<h5>JSON-RPC</h4>
<pre><code>https://s.altnet.rippletest.net:51234</code></pre>
</div>
</aside>
</div>
{% endblock %}
{% block main %}
@@ -22,7 +24,7 @@
<div class="content">
<p>Ripple has created this alternative XRP Ledger test network with nodes in every region of the world to provide a testing platform for any software products built on the XRP Ledger without using real funds.</p>
<p>Test Net funds are intended for <strong>testing</strong> only. The Test Net ledger and balances will be reset on a regular basis.</p>
<button class="btn btn-primary">Generate credentials</button>
<button id="generate-creds-button" class="btn btn-primary">Generate credentials</button>
<div id='your-credentials'></div>
<div id='loader' style="display: none;"><img class='throbber' src="assets/img/rippleThrobber.png"> Generating Keys...</div>
<div id='address'></div>
@@ -33,6 +35,5 @@
{% endblock %}
{% block endbody %}
<link rel='stylesheet' type='text/css' href='assets/css/test-net.css'/>
<script type='text/javascript' src='assets/js/test-net.js'></script>
{% endblock %}