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