/* Generic styles and colors not in the bootstrap files --------------------- */ th, td { padding: 0.2em; vertical-align: text-top; padding: 12px; } td:nth-child(1) { font-weight: bold; } /* Reduce external link icon size */ .fa.fa-external-link:before { font-size: 80%; } /* Top navigation ----------------------------------------------------------- */ .navbar.fixed-top { font-weight: 400; padding: 0; margin: 0 48px; } @media (max-width: 1090px) { .navbar.fixed-top { margin: 0 20px; } .navbar .navbar-nav .nav-link { padding-right: 5px; } } .navbar-brand { text-decoration: none; white-space: pre; -webkit-transition: opacity 200ms ease, color 200ms ease; transition: opacity 200ms ease, color 200ms ease; } .navbar-brand:hover { opacity: 0.5; } @media (max-width: 1010px) { .navbar-brand { margin-right: 5px; } } .navbar .navbar-nav .nav-link { font-size: 1rem; line-height: 52px; text-decoration: none; font-family: 'Space Mono', monospace; } .navbar .navbar-nav .nav-link:hover { background-color: transparent; box-shadow: inset 0 -1px 0 0 #000; text-decoration: none; } .navbar .navbar-nav .active a { font-weight: 700; box-shadow: inset 0 -1px 0 0 #000; } .navbar .active-parent a { font-weight: 700; box-shadow: inset 0 -1px 0 0 #000; } #navbar-search { position: relative; margin-right: 0.375rem; } #navbar-search .form-inline { min-width: 224px; /* more room for placeholder text */ } #topsearchbar { padding-right: 40px; width: 100%; font-size: 0.875rem; } #navbar-search .btn { position: absolute; right: 0; } /* Top navigation Mobile ----------------------------------------------------------- */ @media (max-width: 991px) { .navbar .navbar-nav .nav-link { height: 48px; } .github-edit-wrap { margin: 20px 10px 20px 0; } #navbar-search .btn::after { display: none; } .navbar-collapse { background-color: white; position: absolute; top: 200px; right: 0; overflow: scroll; width: 260px; max-height: 60vh; margin-right: 24px; margin-bottom: 108px; padding: 24px; -webkit-box-flex: 1; z-index: 10; transform: translateX(1000px); transition-duration: 1s; } .navbar-collapse.show { transform: translateX(0px); transition-duration: 0.5s; } .menu-overlay.active { transform: translateX(0px); transition-duration: 0.5s; } .menu-overlay { background-color: black; bottom: 0; left: 0; opacity: 0.88; filter: alpha(opacity=80); /* IE7 & 8 */ position: fixed; right: 0; top: 0; z-index: 5; transform: translateX(1000px); transition-duration: 0.5s; } } body { font-feature-settings: "liga", "kern"; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; font-size: 0.9375rem; } .row { margin: 0 -1px; } /* Push content below fixed header ------------------------------------------ */ #main_content_wrapper { margin-top: 68px; padding: 0 48px; } /* Fix so anchors don't jump under the fixed header ------------------------- */ .main h1:before, .main h2:before, .main h3:before, .main h4:before, .main h5:before, .main h6:before, #main_content_wrapper:before, .interactive-block:before { display: block; content: " "; margin-top: -67px; height: 67px; visibility: hidden; } .card h1:before, .card h2:before, .card h3:before, .card h4:before, .card h5:before, .card h6:before { display: none; } /* Content text styling ----------------------------------------------------- */ .content { padding-bottom: 50px; } /* Images should not exceed the main column */ .content img { max-width: 100%; height: auto; } /* But badge images shouldn't be resized */ .content img.dactyl_badge { width: initial; } .content a, .blurb a { text-decoration: underline; } .content h1 { margin-top: 32px; line-height: 1.2; font-weight: 400; } .content h1:first-child, .landing section:first-of-type h1:first-child { margin-top: 0; line-height: 1.2; } .content h1:first-child:before { margin-top: -80px; } .content h2 { margin-top: 72px; margin-bottom: 24px; font-weight: 400; line-height: 1.2; } .content h3 { margin-top: 24px; line-height: 1.2; } .content h4 { margin-top: 20px; line-height: 1.2; } .content h5 { margin-top: 16px; line-height: 1.2; font-weight: 700; } .content h6 { margin-top: 12px; line-height: 1.2; font-weight: 700; } /* Some list items contain
tags, some don't. These styles make sure both kinds are spaced consistently. */ .content li { margin: 6px; margin-top: 24px; } .content li p { margin: 0; } /* "Source" links float right */ .content a[title="Source"] { float: right; padding-left: 20px; } .content table { clear: right; margin-bottom: 48px; } .content table code { word-break: normal; white-space: nowrap; } .content .children-display li a { /* Category landing pages */ font-family: 'Space Mono', monospace; font-weight: 700; font-size: 1.25rem; text-decoration: none; } .content .children-display li a:hover { text-decoration: underline; } .landing { padding: 0 2px; } .card-grid .section-hero.card { padding-left: 0; } .container-fluid.section-hero { padding: 48px 0; } .doc-index { padding: 48px 0; } @media (max-width: 991px) { .landing .card-grid .card, .landing .card-grid .card-body, .landing .card-grid .card-header { padding-left: 0; } .landing .doc-index { padding-left: 0; } } /* Vertical numbers --------------------------------------------------------- */ .flag-vertical { position: absolute; top: 2em; right: 3em; width: 20px; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; transform-origin: 100% 100%; font-size: 0.833em; letter-spacing: 2px; } /* Footer ------------------------------------------------------------------- */ .xrpl-footer { margin: 0 48px; } .xrpl-footer .card-body { margin-top: -15px; } .xrpl-footer .card { padding-top: 24px; } .xrpl-footer h5 { font-size: 1rem; } .xrpl-footer li { font-size: 0.75rem; } .absolute_bottom_footer span { margin-right: 25px; font-size: 0.75rem; } .xrpl-footer .card-header h5 i { margin-left: 0.2em; } .xrpl-footer .card-grid .card { padding: 24px 48px 48px 48px; } .xrpl-footer .card-grid .card:first-child { padding-left: 0; } @media (max-width: 991px) { .xrpl-footer .card-grid .card { padding-left: 0; } } /* Callouts ----------------------------------------------------------------- */ .devportal-callout { border-style: solid; border-radius: 0; border-width: 1px; border-left-width: 4px; padding: 5px; padding-left: 25px; page-break-inside: avoid; } .devportal-callout > strong:first-child { display: block; page-break-after: avoid; } .devportal-callout.tip > strong:first-child:before { content: "\f058"; /* fontawesome check-circle icon */ font-family: FontAwesome; /* color in scss */ margin-left: -20px; padding-right: 5px; } .devportal-callout.note > strong:first-child:before { content: "\f05a"; /* fontawesome (i) info-circle icon */ font-family: FontAwesome; /* color in scss */ margin-left: -20px; padding-right: 5px; } .devportal-callout.caution > strong:first-child:before { content: "\f071"; /* fontawesome /!\ exclamation-triangle icon */ font-family: FontAwesome; /* color in scss */ margin-left: -20px; padding-right: 5px; } .devportal-callout.warning > strong:first-child:before { content: "\f057"; /* fontawesome (x) times-circle icon */ font-family: FontAwesome; /* color in scss */ margin-left: -20px; padding-right: 5px; } /* Button styling ----------------------------------------------------------- */ p + .readmore { margin-top: 12px; } .readmore .btn { transition: 0.5s; white-space: normal; } .readmore .btn i, .card-header a i { margin: 0 0.2em 0 0.8em; } .btn-primary code, .btn-secondary code { color: inherit; } a.button { cursor: pointer; text-decoration: none !important; } /* Code Tabs ---------------------------------------------------------------- */ pre { overflow: visible; word-wrap: normal; } pre code { white-space: pre; } .code_sample pre { background: none; border: none; border-radius: 0; } .code_sample pre code { overflow: auto; max-height: 24em; border-radius: 4px; display: block; padding: 24px; } .code_sample pre code.expanded { overflow: visible; max-height: none; position: absolute; } .code_sample .code_toggler { position: absolute; bottom: 0; right: 0; } .multicode { margin: 12px 0px 0px 0px; padding: 0 0 0 0; z-index: 1; padding-left: 10px; position: relative; } .multicode ul { margin: 0 !important; padding: 0; } .multicode pre { padding-top: 0; clear: both; } .multicode li { display: block; float: left; list-style-type: none; margin-right: 0px; margin-left: 0px; border-style: none solid; border-width: 0.5px; } .multicode ul > li:before { background: none; border: none; } .multicode a, a.current { padding-right: 32px; padding-left: 32px; padding-bottom: 10px; padding-top: 10px; margin: 0px; text-decoration: none; } .multicode a.current:hover { border-bottom: none; padding-bottom: 10px; } .multicode li:first-child { border-left: none; } .multicode li:last-child { border-right: none; } /* Common list modules (children, curated links) ---------------------------- */ .curated-links ul, .curated-links ol, .children-display ul { padding-left: 0; margin-bottom: 0; } .card .curated-links a:hover, .card .children-display a:hover { text-decoration: none; } .level-1, .curated-links ul li { list-style-type: disc; } .level-1, .curated-links li { margin-top: 12px; margin-left: 16px; } .landing .level-1, .landing .level-2, .landing .curated-links li { margin-top: 0; } .landing .card .level-1 a, .landing .card .curated-links li a { padding: 8px; display: block; margin: 0 -8px 0 -8px; } .landing .card .level-2 { position: relative; } .landing .card .level-2 a { padding: 8px 8px 8px 28px; display: block; margin: 0 -8px 0 -8px; } .landing .card .blurb + .children-display, .landing .card .blurb + .curated-links { margin-top: 1rem; } .section-hero .blurb { font-size: 1.2em; line-height: 1.71em; } .level-2 { list-style-type: circle; margin-left: 30px; } .level-3 { list-style-type: square; margin-left: 45px; } .level-4 { margin-left: 60px; } .level-5 { margin-left: 75px; list-style-type: circle; } .level-6 { /* Probably not used */ margin-left: 90px; list-style-type: square; } @media (max-width: 991px) { .landing .card { padding-left: 0px; } } /* (Jump to) "Top" button --------------------------------------------------- */ .jump-to-top { display: none; position: fixed; bottom: 15px; right: 30px; font-weight: 700; z-index: 1000; color: white; } @media screen and (max-width: 767px) { .jump-to-top { bottom: 40px; right: 40px; } } /* Breadcrumbs -------------------------------------------------------------- */ .breadcrumb-item + .breadcrumb-item:before { content: "\f105"; /* fontawesome angle-right */ font-family: FontAwesome; padding-right: 5px; } .breadcrumbs-wrap .breadcrumb { padding: 0; margin-bottom: 0; font-size: 0.833em; } .breadcrumb-item a { color: hsla(14.999999999999947, 1.98%, 39.61%, 1.00); text-decoration: none; } .breadcrumb-item a:hover { color: #000; } /* Left navigation ---------------------------------------------------------- */ .tree_nav { top: 48px; padding: 44px 24px 48px 0; background-color: white; } .sidebar_pagelist { margin-bottom: 12px; margin-left: 24px; padding-left: 16px; list-style-type: none; } #sidenav a, .sidenav_parent a { text-decoration: none; line-height: 24px; } #sidenav a.active-parent { font-weight: 700; } #sidenav a:hover, .sidenav_parent a:hover { text-decoration: none; } #sidenav .card + .card { margin: 0; } #sidenav .card { border-width: 0; } #sidenav .card-body { padding: 0; padding-left: 15px; } #sidenav .card-body-single { margin-left: -25px; } #sidenav .collapse { padding-bottom: 0; } #sidenav .card-header { padding: 0; background-color: transparent; border-bottom: 0; } #sidenav .card { padding: 0; border-radius: 0; } #sidenav .card:only-child { border-top: 0; background: none; } #sidenav .card-header h5 { margin-bottom: 0; text-transform: none; font-size: 1.05rem; } #sidenav .card-header h5 .sidenav_cat_title { display: block; padding: 11px 10px 11px 40px; } #sidenav .card-header .sidenav_cat_toggler { position: absolute; left: 0; padding: 10px 12px 12px 12px; line-height: 0; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); transition-duration: 0.3s; } #sidenav .card-header .sidenav_cat_toggler { width: 24px; height: 24px; display: block; -webkit-mask-image: url(../img/icon-arrow.svg); mask-image: url(../img/icon-arrow.svg); -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 24px 24px; mask-size: 24px 24px; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; border: 12px solid transparent; } #sidenav .card-header .sidenav_cat_toggler.collapsed { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); transition-duration: 0.3s; } .xrp-ledger-dev-portal.sidebar-primary .main { z-index: 5; padding: 44px 24px 48px; min-height: 700px; } /* Right navigation --------------------------------------------------------- */ .right-sidebar .card { position: sticky; max-height: 85vh; top: 48px; overflow: auto; padding: 44px 0 48px 24px; border: none; } .right-sidebar .card-header { border-bottom: none; background-color: white; padding: 10px 0; } .right-sidebar .card-header h4 { line-height: 20px; font-size: 1.2em; padding: 0; margin: 0; } .right-sidebar .card-body { padding: 0 0 0 16px; list-style-type: none; } .right-sidebar ul li { list-style-type: none; margin-bottom: 8px; margin-left: 0; } .right-sidebar .level-1 a, .right-sidebar .separator { font-weight: 700; font-family: "Space Mono", monospace; } .right-sidebar .level-2, .right-sidebar .method { margin-left: 0; } /* Use Cases ---------------------------------------------------------------- */ .use-case-step-num { margin-top: 64px; margin-bottom: 24px; color: #eae7e6; font-size: 5.16em; font-weight: 400; font-family: 'Space Mono', sans-serif; } .use-case-step-length { float: right; color: #888; font-size: 1rem; } .use-case-steps h2 { margin-top: 10px; margin-bottom: 10px; font-size: 1.728em; line-height: 32px; font-weight: 700; } .use-case-steps h2 a { text-decoration: none; } .use-case-steps h2:first-of-type:before { display: none; } .use-case h1 { font-size: 2.4em; padding-bottom: 10px; } .use-case-steps h2:before { margin-top: -30px; height: 0; } .use-case-steps h2:first-of-type { margin-top: -30px; } .related-tasks-links ul { list-style-type: none; padding-left: 0; } .related-tasks-links ul li { margin: 0px; padding-top: 2px; } .related-tasks-links a:hover::after { padding-left: .5em; } .related-tasks-links a::after { content: " ➝"; padding-left: 0; transition: all .2s ease-in-out; } /* Landing Pages ------------------------------------------------------------ */ .landing .display-4 { margin-bottom: 1.5rem; } .landing h3, #test-net-servers h3 { font-size: 1.4rem; font-weight: 700; } .card-header h3.card-title { margin-bottom: 0; } #test-net-servers pre { overflow-x: auto; } .landing .card li, .xrpl-footer .card li { list-style-type: none; margin-left: 0; } .landing section:first-of-type { padding-top: 0; border-top-width: 0; } .card-grid .card-body { padding: 8px; padding-bottom: 24px; } .landing .card-header, .landing .card-footer, .xrpl-footer .card-header { background: none; border-bottom: none; border-top: none; } .landing .card-header, .xrpl-footer .card-header { padding: 8px; } .landing .card-footer { padding: 8px; } .landing .card-body > p { padding: 0; margin-bottom: 0; } .btn-outline-secondary { padding: 9px 16px; transition: box-shadow 200ms ease, background-color 200ms ease, color 200ms ease; background-color: transparent; } #main_content_wrapper { border-bottom: none; } .content a.button { /* should match the bootstrap buttons */ display: inline-block; font-weight: 400; text-align: center; vertical-align: middle; text-decoration: none; line-height: 1.5; padding: 9px 16px; transition: 0.5s; } .content a.button::after { content: " ➝"; padding-left: 7px; transition: all .2s ease-in-out; display: inline-block; text-decoration: none; } .content a.button:hover::after { padding-left: 14px; } .btn:not(.external-link)::after, .landing .card .level-1 a::after, .landing .card .level-2 a::after, .landing .card .curated-links li a::after, .content .children-display li a::after { content: " ➝"; padding-left: 7px; transition: all .2s ease-in-out; display: inline-block; text-decoration: none; } .btn.jump-to-top::after { content: " ↑" } .btn:not(.external-link):hover::after, .landing .card .level-1 a:hover::after, .landing .card .level-2 a:hover::after, .landing .card .curated-links li a:hover::after, .landing a.card:hover .btn::after, .content .children-display li a:hover::after { padding-left: 14px; text-decoration: none; } .btn.fa-search::after, .btn.fa-search:hover::after, .request-options .btn::after, .request-options .btn:hover::after, .response-options .btn::after, .response-options .btn:hover::after { content: ""; padding: 0; } .external-link .fa-external-link, .related-projects a .fa-external-link { transition: all .2s ease-in-out; display: inline-block; padding-left: 7px; } .external-link:hover .fa-external-link, .related-projects a:hover .fa-external-link { padding-left: 14px; } /* Avoid shifting other text over */ .content .external-link .fa-external-link { padding-left: 1px; padding-right: 7px; } .content .external-link:hover .fa-external-link { padding-left: 7px; padding-right: 1px; } .landing .card .card-img-top { width: 60px; height: 60px; margin-left: 0; margin-right: auto; } .image-icon { width: 60px; height: 60px; margin-bottom: 16px; } /* Full-link cards */ .landing a.card { border: 1px solid transparent; } .landing a.card:hover { text-decoration: none; } .landing a.card:hover h3 { text-decoration: underline; } /* "Related Projects" boxes -------------- */ .interledger-link .project-icon { width: 80px; } .xpring-link .project-icon { height: 60px; width: 100px; line-height: 20px; vertical-align: middle; margin: 9px 0; } /* Interactive blocks in tutorial contents ---------------------------------- */ /* I don't get it, but apparently setting padding or border on .interactive-block breaks the fixed-header anchor fix from lines 90-104. So the visual styles go on this inner div. */ .interactive-block-inner { border: 1px dashed #25A768; padding: 10px; margin: 5px; } .interactive-block-ui > button { margin: 10px 0; } .interactive-block .breadcrumb-wrap { margin-bottom: 5px; } .interactive-block .breadcrumb-item a { text-decoration: none; } .interactive-block .breadcrumb-item.current a { font-weight: bold; } .interactive-block .breadcrumb-item.active a { color: #43bded; /* TODO: adjust this color */ } .interactive-block .breadcrumb-item.disabled a { color: #6B7075; /* TODO: adjust this color */ } .interactive-block .breadcrumb-item.done a:after { content: "\f058"; /* fontawesome check-circle icon */ font-family: FontAwesome; color: #6B7075; /* TODO: adjust this color */ padding-right: 5px; padding-left: 5px; } .ws-console { height: 200px; overflow: auto; } /* Status labels ("DEV" etc) for non-enabled features ----------------------- */ .status { cursor: help; padding: 1px 2px; font-weight: normal; text-indent: 0; } /* Responsive design for different viewscreens ------------------------------ */ @media (max-width: 991px) { #main_content_wrapper { padding: 0 24px; } .navbar-brand img { width: 120px; } .landing section:first-of-type h1:first-child { font-size: 3em; font-weight: 400; } .section-hero .blurb { font-size: 0.95em; } .sidebar-primary .main { border-left: none; border-right: none; } .right-sidebar .card { padding-left: 0; } #main_content_body { padding: 0; border: none; } #main_content_body .container-fluid { padding-left: 0; } .xrpl-footer { margin: 0 24px; } #page-toc-wrapper { position: static; display: block; clear: both; overflow-y: inherit; max-width: 100%; max-height: inherit; word-break: break-all; } .main { overflow-wrap: break-word; word-wrap: break-word; overflow: hidden; } } @media (max-width: 480px) { html { overflow-x: hidden !important; } } @media (max-width: 400px) { .navbar .navbar-brand .brand-text { margin-right: 0; letter-spacing: -0.08rem; } .navbar .navbar-brand { margin-right: 0; } .navbar .navbar-brand .logo { margin-right: 0; margin-left: -1rem; } .btn { white-space: normal; } } /* 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, .page-tx-sender .throbber, .interactive-block .throbber { width: 24px;height:24px; } #connection-status-item.active { background-color: #2BCB96; /* TODO: adjust this color */ border-color: #2BCB96; /* TODO: adjust this color */ } #tx-sender-history ul { overflow: auto; height: 220px; border: 1px solid rgba(0, 0, 0, 0.125) } .page-tx-sender .input-group .form-control { flex: 1 1 20%; } .bootstrap-growl { max-width: 90vw !important; overflow: hidden; } /* Print styles ------------------------------------------------------------- */ @media print { /* undo code tabs */ .multicode > div { display: block !important; } .multicode > ul { display: none !important; } .multicode > em, .multicode > p > em { display: block !important; page-break-after: avoid; } .multicode > p { display: block !important; } /* wrap code, not scroll */ pre { white-space: pre-wrap; max-height: none !important; overflow: visible; page-break-inside: auto; word-wrap: break-word; } pre code { white-space: pre-wrap !important; } .content a[title="Source"] { float: none; } /* Drop header, footer, sidebars */ header, footer, aside { display: none; } /* Full-width content body */ .content, #main_content_body { position: static; display: block; width: auto; height: auto; max-width: 100%; } #main_content_wrapper { margin-top: 0; } #main_content_body::before { display: none; } .xrp-ledger-dev-portal.sidebar-primary .main { border: 0; } .sidebar-primary .row { display: block; } }