Files
xrpl-dev-portal/styles/_dev-tools.scss
2026-08-31 15:36:06 -07:00

149 lines
3.0 KiB
SCSS

/* Dev Tool styles stuff ---------------------------------------------------- */
.command-list-wrapper {
// WebSocket Tool right sidebar
position: sticky;
top: calc(var(--navbar-height) + var(--toc-offset-top));
max-height: calc(100vh - var(--navbar-height) - var(--toc-offset-top));
overflow-y: auto;
width: var(--toc-width);
}
#tx-sender-history .list-group-item {
font-size: small;
color: $gray-600;
}
.response-metadata .timestamp {
color: $gray-600;
}
.throbber {
width: 24px;height:24px;
}
#connection-status .card-body {
border-left: 0;
}
#connection-status-item.active {
background-color: $xrpl-green-dark-6;
}
// The WebSocket tool's selected-command heading is a Link for its neutral
// color, but it reads as a heading: no underline, the h3's own weight, and no
// horizontal padding so it stays flush with the description below.
h3 > .selected_command.xrpl-link {
padding: 0;
font-weight: inherit;
text-decoration: none;
}
.api-input-area .btn-group > .send-request.btn {
// This button is part of a toolbar with a loader animation, which causes the
// right edges to not be rounded even though the loader is usually invisible.
// So, this forces the button's corners to be consistently rounded.
border-bottom-right-radius: $border-radius-sm;
border-top-right-radius: $border-radius-sm;
}
#tx-sender-history ul {
overflow: auto;
height: 220px;
border: 1px solid $gray-200;
}
.page-tx-sender .tx-sender-progress {
position: relative;
height: 1.35rem;
}
.page-tx-sender .tx-sender-progress-label {
display: flex;
align-items: center;
justify-content: center;
margin: 0;
min-height: 1.35rem;
font-size: 0.7rem;
line-height: 1;
color: $white;
text-shadow: 0 0 4px rgba(0, 0, 0, 0.9), 0 1px 2px rgba(0, 0, 0, 0.8);
}
.page-tx-sender .tx-sender-progress .tx-sender-progress-label {
position: absolute;
inset: 0;
min-height: 0;
pointer-events: none;
z-index: 1;
}
.page-tx-sender .input-group .form-control,
.interactive-block-ui .input-group .form-control {
flex: 1 1 20%;
height: auto;
}
.bootstrap-growl {
max-width: 90vw !important;
overflow: hidden;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.25);
.btn-close {
top: 8px;
right: 8px;
padding: 0;
}
}
.list-group-item-danger,
#tx-sender-history .list-group-item-danger {
background-color: $magenta-300;
color: $black;
a {
color: $black;
&:hover {
color: $black;
text-decoration: underline;
}
}
}
.rpc-tool .main {
h1::before, h2::before, h3::before {
// These aren't anchors, and the placement of the anchor fix thing
// causes things above them to be unclickable
display: none;
}
}
.form-text {
color: $gray-500;
:root.dark & {
color: $gray-400;
}
}
.form-text a {
text-decoration: underline;
}
.page-faucet {
input:invalid {
box-shadow: inset 0 0 5px 5px $danger;
}
h3 {
font-size: 1.5rem;
line-height: 1;
margin-top: 1.5rem;
}
.right-sidebar .quick-ref-card {
margin-left: 0;
}
}