mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-11-19 19:25:51 +00:00
Style fixes for tools & 404 page:
- Set Bootstrap colors for background colors - Adjust button padding to work in more contexts - Removed unused tool CSS. Migrated some styles to SCSS. - Fix sticky overlap in faucets sidebar - Make 404 page inherit from base template
This commit is contained in:
mDuo13
@@ -1,18 +1,16 @@
|
||||
// Button styling --------------------------------------------------------------
|
||||
|
||||
.btn, .content a.button {
|
||||
padding: 16px 24px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
line-height: 1.25;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.form-group .btn {
|
||||
// Fix spacing issues caused by default padding
|
||||
padding: inherit;
|
||||
.content a.button {
|
||||
padding: .5rem 1rem;
|
||||
margin: 0 0.5rem;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.btn.disabled,
|
||||
|
||||
@@ -129,7 +129,7 @@ $input-disabled-bg: $gray-800;
|
||||
$input-color: $white;
|
||||
$input-border-color: transparent;
|
||||
$input-box-shadow: inset 0 1px 1px rgba($primary, .075);
|
||||
$input-placeholder-color: $gray-200;
|
||||
$input-placeholder-color: $gray-400;
|
||||
$input-group-addon-bg: $gray-600;
|
||||
$input-group-addon-color: $white;
|
||||
|
||||
@@ -138,3 +138,7 @@ $list-group-border-color: $gray-800;
|
||||
$list-group-disabled-color: $gray-200;
|
||||
|
||||
$progress-bg: $gray-900;
|
||||
|
||||
$modal-content-bg: $black;
|
||||
$modal-content-border-color: $gray-200;
|
||||
$close-color: $magenta-500;
|
||||
|
||||
@@ -131,10 +131,10 @@ td:nth-child(1) {
|
||||
|
||||
&-50 {
|
||||
flex-basis: calc(50% - 30px);
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
flex-basis: calc(25% - 30px);
|
||||
@include media-breakpoint-up(lg) {
|
||||
flex-basis: calc(50% - 30px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -11,44 +11,7 @@
|
||||
top: 16px;
|
||||
}
|
||||
|
||||
/* 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,
|
||||
.page-tx-sender .throbber,
|
||||
.interactive-block .throbber {
|
||||
.throbber {
|
||||
width: 24px;height:24px;
|
||||
}
|
||||
|
||||
@@ -94,3 +57,45 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#rest_url_wrapper p {
|
||||
margin: 0;
|
||||
border-radius: 4px;
|
||||
// $code-bg and $code-padding are from _code-tabs.scss
|
||||
background-color: $code-bg;
|
||||
padding: $code-padding;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#rest_url {
|
||||
width: auto;
|
||||
border: 0;
|
||||
background: none;
|
||||
font-size:13px;
|
||||
vertical-align: top;
|
||||
|
||||
.editable {
|
||||
color: $white;
|
||||
font-weight: bold;
|
||||
font-family: $font-family-monospace;
|
||||
border-width: 0 0px 1px 0;
|
||||
border-style: dotted;
|
||||
border-color: $gray-200;
|
||||
min-width: 5em;
|
||||
background: none;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.non_editable {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
div {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
input {
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
96
styles/_rpc-tool.scss
Normal file
96
styles/_rpc-tool.scss
Normal file
@@ -0,0 +1,96 @@
|
||||
// Styles for the legacy XRP Ledger RPC Tool. Minimally maintained.
|
||||
|
||||
.rpc-tool {
|
||||
|
||||
#result {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#log {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.content .json li {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.json .name {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.json ul {
|
||||
margin: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.json li {
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.json .type-string .val {
|
||||
color: $green-700;
|
||||
}
|
||||
|
||||
.json .type-number .val {
|
||||
color: $blue-500;
|
||||
}
|
||||
|
||||
.json a.toggle:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.json > a.toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.json a.toggle:after {
|
||||
content: " +\0000a0";
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.json > ul,
|
||||
.json .expanded > ul {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.json .ellipsis {
|
||||
color: $gray-500;
|
||||
}
|
||||
|
||||
.json > .ellipsis,
|
||||
.json .expanded > .ellipsis {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.json .expanded > a.toggle:after {
|
||||
content: " \2212\0000a0";
|
||||
}
|
||||
|
||||
.json .indentafter {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.json .expanded > .indentafter {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.tools {
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
font-size: 0.8em;
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
|
||||
.tools>li>a {
|
||||
cursor: pointer;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
padding: 6px 9px;
|
||||
}
|
||||
}
|
||||
@@ -13,7 +13,9 @@ aside .sidenav_cat_title:hover {
|
||||
}
|
||||
|
||||
aside a.active,
|
||||
aside a.active:hover {
|
||||
aside a.active:hover,
|
||||
aside .active > a,
|
||||
aside .active > a:hover {
|
||||
color: $primary;
|
||||
font-weight: 700;
|
||||
}
|
||||
@@ -26,7 +28,8 @@ aside a.active-parent {
|
||||
border-left: 1px solid $white;
|
||||
}
|
||||
.sidebar_pagelist a,
|
||||
.right-sidebar li a {
|
||||
.command-list li a,
|
||||
.page-toc li a {
|
||||
display: block;
|
||||
margin-top: 5px;
|
||||
margin-left: -17px;
|
||||
@@ -69,7 +72,8 @@ aside a.active-parent {
|
||||
background-color: $primary;
|
||||
}
|
||||
|
||||
.right-sidebar .card-body {
|
||||
#page-toc-wrapper .card-body,
|
||||
.command-list {
|
||||
border-left: 1px solid $white;
|
||||
}
|
||||
|
||||
@@ -81,32 +85,40 @@ aside a.active-parent {
|
||||
padding: 15px 16px 15px 10px;
|
||||
}
|
||||
|
||||
.right-sidebar .level-1 a {
|
||||
.page-toc .level-1 a {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.right-sidebar .level-3 {
|
||||
.page-toc .level-3 {
|
||||
padding-left: 16px;
|
||||
border-left: 1px solid $white;
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.right-sidebar .level-3 a {
|
||||
.page-toc .level-3 a {
|
||||
margin-top: 0;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.right-sidebar li a:hover {
|
||||
.command-list li a:hover,
|
||||
.page-toc li a:hover {
|
||||
text-decoration: none;
|
||||
border-left: 1px solid $primary;
|
||||
padding-left: 34px;
|
||||
}
|
||||
.command-list .active a {
|
||||
border-left: 2px solid $primary;
|
||||
padding-left: 33px;
|
||||
}
|
||||
|
||||
.right-sidebar {
|
||||
padding: 44px 0 24px 48px;
|
||||
}
|
||||
|
||||
/* Left navigation ---------------------------------------------------------- */
|
||||
|
||||
.tree_nav {
|
||||
top: 48px;
|
||||
.sidebar {
|
||||
padding: 44px 24px 48px 0;
|
||||
}
|
||||
|
||||
@@ -214,7 +226,7 @@ aside a.active-parent {
|
||||
|
||||
/* Right navigation --------------------------------------------------------- */
|
||||
|
||||
.right-sidebar .card {
|
||||
#page-toc-wrapper .card {
|
||||
position: sticky;
|
||||
max-height: 85vh;
|
||||
top: 48px;
|
||||
@@ -222,38 +234,42 @@ aside a.active-parent {
|
||||
padding: 44px 0 48px 24px;
|
||||
border: none;
|
||||
}
|
||||
.command-list {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.right-sidebar .card-header {
|
||||
#page-toc-wrapper .card-header {
|
||||
border-bottom: none;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.right-sidebar .card-header h4 {
|
||||
#page-toc-wrapper .card-header h4 {
|
||||
line-height: 20px;
|
||||
font-size: 1.2em;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.right-sidebar .card-body {
|
||||
#page-toc-wrapper .card-body {
|
||||
padding: 0 0 0 16px;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.right-sidebar ul li {
|
||||
.page-toc li,
|
||||
.command-list li {
|
||||
list-style-type: none;
|
||||
margin-bottom: 8px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.right-sidebar .level-1 a,
|
||||
.right-sidebar .separator {
|
||||
.page-toc .level-1 a,
|
||||
.command-list .separator {
|
||||
font-weight: 700;
|
||||
font-family: "Space Mono", monospace;
|
||||
}
|
||||
.right-sidebar .level-2,
|
||||
.right-sidebar .method {
|
||||
.page-toc .level-2,
|
||||
.command-list .method {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
@@ -47,7 +47,7 @@
|
||||
.btn-outline-secondary {
|
||||
font-size: 14px;
|
||||
line-height: 125%;
|
||||
margin-top: .5rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
@include media-breakpoint-down(md) {
|
||||
.wrap-button {
|
||||
|
||||
@@ -3,12 +3,21 @@
|
||||
@import "_colors.scss";
|
||||
|
||||
$navbar-padding-y: 0;
|
||||
$nav-link-padding-x: 1.25rem;
|
||||
$nav-link-padding-y: 1rem;
|
||||
$navbar-nav-link-padding-x: 1.25rem;
|
||||
$navbar-nav-link-padding-y: 1rem;
|
||||
$border-radius: 0;
|
||||
$border-radius-lg: 0;
|
||||
$border-radius-sm: 0;
|
||||
$dropdown-border-width: 1px;
|
||||
|
||||
$input-btn-padding-y: 1rem;
|
||||
$input-btn-padding-x: 1.5rem;
|
||||
$input-btn-font-size: 14px;
|
||||
$input-btn-line-height: 1.25;
|
||||
$input-font-size: 1rem;
|
||||
|
||||
// @import "_font-face.scss";
|
||||
$font-family-monospace: 'Space Mono', monospace;
|
||||
$font-family-sans-serif: -apple-system, system-ui, 'Roboto', sans-serif;
|
||||
@@ -40,3 +49,4 @@ $font-family-sans-serif: -apple-system, system-ui, 'Roboto', sans-serif;
|
||||
@import "_dev-tools.scss";
|
||||
@import "_print.scss";
|
||||
@import "_pages.scss";
|
||||
@import "_rpc-tool.scss";
|
||||
|
||||
Reference in New Issue
Block a user