Minor tool styling cleanup

assets/css/devportal.css

@@ -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 {
   {

assets/css/ripple-txt-validator.css

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

assets/css/test-net.css

@@ -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;
-}

assets/js/test-net.js

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

tool/template-ripple-txt-validator.html

@@ -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>

tool/template-test-net.html

@@ -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 %}