mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-11-04 11:55:50 +00:00
251 lines
7.0 KiB
CSS
251 lines
7.0 KiB
CSS
html.light pre code {
|
|
color: var(--code-block-controls-text-color) !important;
|
|
}
|
|
|
|
ul.nav.navbar-nav {
|
|
align-items: center;
|
|
width: 100%;
|
|
}
|
|
|
|
@media (min-width: 992px) and (min-width: 1200px) {
|
|
.top-nav .topnav-search {
|
|
margin-left: 3.5rem;
|
|
margin-right: 0.5rem;
|
|
}
|
|
}
|
|
|
|
.top-nav .topnav-search {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
:root {
|
|
/* XRPL color palette; match to styles/_colors.scss
|
|
Some colors don't have a 10 equivalent so 9 is repeated.
|
|
|
|
Note, at present these variables are mostly overridden by
|
|
styled-components variables which are in reverse order, so
|
|
we can't actually use these variables as-is.
|
|
*/
|
|
/* Redocly doesn't have vars for grays by default */
|
|
--color-gray-1: #F5F5F7;
|
|
--color-gray-2: #E0E0E1;
|
|
--color-gray-3: #C1C1C2;
|
|
--color-gray-4: #A2A2A4;
|
|
--color-gray-5: #838386;
|
|
--color-gray-6: #454549;
|
|
--color-gray-7: #343437;
|
|
--color-gray-8: #232325;
|
|
--color-gray-9: #111112;
|
|
--color-gray-10: var(--color-gray9);
|
|
|
|
/* color-red = XRPL $magenta */
|
|
--color-red-1: #FFE5F2;
|
|
--color-red-2: #FFB2D8;
|
|
--color-red-3: #FF80BF;
|
|
--color-red-4: #FF4BA4;
|
|
--color-red-5: #FF198B;
|
|
--color-red-6: #E50071;
|
|
--color-red-7: #B20058;
|
|
--color-red-8: #80003F;
|
|
--color-red-9: #4C0026;
|
|
--color-red-10: #4C0026;
|
|
|
|
/* color-green = XRPL $green */
|
|
--color-green-1: #D6FAE7;
|
|
--color-green-2: #ADF5CE;
|
|
--color-green-3: #84F0B6;
|
|
--color-green-4: #5BEB9D;
|
|
--color-green-5: #32E685;
|
|
--color-green-6: #2DCF78;
|
|
--color-green-7: #28B86A;
|
|
--color-green-8: #1E8A50;
|
|
--color-green-9: #145C35;
|
|
--color-green-10: #0A2E1B;
|
|
|
|
/* color-gold = XRPL $yellow */
|
|
--color-gold-1: #FEFFE5;
|
|
--color-gold-2: #FDFFB2;
|
|
--color-gold-3: #FCFF80;
|
|
--color-gold-4: #FBFF4C;
|
|
--color-gold-5: #FAFF19;
|
|
--color-gold-6: #E0E500;
|
|
--color-gold-7: #AEB200;
|
|
--color-gold-8: #7D8000;
|
|
--color-gold-9: #4B4C00;
|
|
--color-gold-10: #4B4C00;
|
|
|
|
/* color-blue = XRPL $blue */
|
|
--color-blue-1: #E5F5FF;
|
|
--color-blue-2: #B2E0FF;
|
|
--color-blue-3: #80CCFF;
|
|
--color-blue-4: #4BB7FF;
|
|
--color-blue-5: #19A3FF;
|
|
--color-blue-6: #008AE5;
|
|
--color-blue-7: #006BB2;
|
|
--color-blue-8: #004D80;
|
|
--color-blue-9: #002E4C;
|
|
--color-blue-10: #001133;
|
|
|
|
/* color purple = XRPL $blue-purple */
|
|
--color-purple-1: #F0E5FF;
|
|
--color-purple-2: #D2B2FF;
|
|
--color-purple-3: #B480FF;
|
|
--color-purple-4: #9A52FF;
|
|
--color-purple-5: #7919FF;
|
|
--color-purple-6: #5F00E5;
|
|
--color-purple-7: #4A00B2;
|
|
--color-purple-8: #350080;
|
|
--color-purple-9: #20004C;
|
|
--color-purple-10: #20004C;
|
|
|
|
/* color-magenta = XRPL $red-purple */
|
|
--color-magenta-1: #FBE5FF;
|
|
--color-magenta-2: #F2B2FF;
|
|
--color-magenta-3: #EA80FF;
|
|
--color-magenta-4: #E24CFF;
|
|
--color-magenta-5: #D919FF;
|
|
--color-magenta-6: #C000E5;
|
|
--color-magenta-7: #9500B2;
|
|
--color-magenta-8: #6B0080;
|
|
--color-magenta-9: #40004C;
|
|
--color-magenta-10: #40004C;
|
|
|
|
/* XRPL doesn't have a color-cyan equivalent
|
|
--color-cyan-1: #e6fffb;
|
|
--color-cyan-2: #b5f5ec;
|
|
--color-cyan-3: #87e8de;
|
|
--color-cyan-4: #5cdbd3;
|
|
--color-cyan-5: #36cfc9;
|
|
--color-cyan-6: #13c2c2;
|
|
--color-cyan-7: #08979c;
|
|
--color-cyan-8: #006d75;
|
|
--color-cyan-9: #00474f;
|
|
--color-cyan-10: #002329; */
|
|
|
|
/* color-yellow = XRPL $yellow */
|
|
--color-yellow-1: #FEFFE5;
|
|
--color-yellow-2: #FDFFB2;
|
|
--color-yellow-3: #FCFF80;
|
|
--color-yellow-4: #FBFF4C;
|
|
--color-yellow-5: #FAFF19;
|
|
--color-yellow-6: #E0E500;
|
|
--color-yellow-7: #AEB200;
|
|
--color-yellow-8: #7D8000;
|
|
--color-yellow-9: #4B4C00;
|
|
--color-yellow-10: #4B4C00;
|
|
|
|
/* XRPL doesn't have a color-lime equivalent
|
|
--color-lime-1: #fcffe6;
|
|
--color-lime-2: #f4ffb8;
|
|
--color-lime-3: #eaff8f;
|
|
--color-lime-4: #d3f261;
|
|
--color-lime-5: #bae637;
|
|
--color-lime-6: #a0d911;
|
|
--color-lime-7: #7cb305;
|
|
--color-lime-8: #5b8c00;
|
|
--color-lime-9: #3f6600;
|
|
--color-lime-10: #254000; */
|
|
|
|
/* XRPL doesn't have a color-geekblue equivalent
|
|
--color-geekblue-1: #f0f5ff;
|
|
--color-geekblue-2: #d6e4ff;
|
|
--color-geekblue-3: #adc6ff;
|
|
--color-geekblue-4: #85a5ff;
|
|
--color-geekblue-5: #597ef7;
|
|
--color-geekblue-6: #2f54eb;
|
|
--color-geekblue-7: #1d39c4;
|
|
--color-geekblue-8: #10239e;
|
|
--color-geekblue-9: #061178;
|
|
--color-geekblue-10: #030852; */
|
|
|
|
/* Dark mode colors by default */
|
|
--color-primary-bg: var(--color-gray-9);
|
|
/* --color-primary-bg-hover: #d6dfff;
|
|
--color-primary-border: #adbcff;
|
|
--color-primary-border-hover: #8a99ff;
|
|
--color-primary-hover: #6678ff;
|
|
--color-primary-base: #434dfa;
|
|
--color-primary-active: #2f31d4;
|
|
--color-primary-text-hover: #201dad;
|
|
--color-primary-text: #161087;
|
|
--color-primary-text-active: #0d086e;*/
|
|
|
|
--link-text-color: #fff;
|
|
--link-decoration: underline;
|
|
--link-font-weight: var(--font-weight-regular);
|
|
|
|
--link-hover-text-color: #9a52ff;
|
|
--link-hover-decoration: underline;
|
|
|
|
--link-active-decoration: underline;
|
|
--link-active-text-color: var(--color-blue-7);
|
|
|
|
--link-visited-text-color: #fff;
|
|
--link-visited-decoration: underline;
|
|
|
|
--bg-base: var(--color-gray-9);
|
|
--bg-raised: var(--color-gray-8);
|
|
--background-color: var(--bg-base);
|
|
|
|
--font-family-base: 'Work Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
|
--heading-font-family: var(--font-family-base);
|
|
|
|
--inline-code-font-family: "Space Mono", monospace;
|
|
--inline-code-text-color: #5beb9d; /* $green-400 */
|
|
--inline-code-background-color: #0a2e1b; /* $green-1000 */
|
|
--inline-code-border-radius: 0;
|
|
|
|
--heading-anchor-color: #9a52ff;
|
|
--sidebar-border-color: transparent;
|
|
--sidebar-background-color: transparent;
|
|
|
|
--border-radius-md: 4px;
|
|
|
|
--code-block-background-color: #232325;
|
|
--code-block-controls-background-color: #232325;
|
|
--code-block-controls-border: none;
|
|
--code-block-border-color: #232325;
|
|
--code-block-padding: 0 2rem 1.5rem 2rem;
|
|
--code-block-border-radius: 4px;
|
|
|
|
--breadcrumbs-margin-bottom: 0.5rem;
|
|
--breadcrumbs-text-color: var(--color-gray-4);
|
|
--breadcrumbs-gap: 0 8px;
|
|
--breadcrumbs-font-size: 0.833em;
|
|
|
|
--language-picker-min-height: 38px;
|
|
|
|
--footer-background-color: transparent;
|
|
--footer-dividing-border-color: transparent;
|
|
--footer-border-color: transparent;
|
|
--footer-title-font-weight: 600;
|
|
--footer-title-font-size: 1rem;
|
|
--footer-title-text-color: #A2A2A4;
|
|
}
|
|
|
|
:root.light {
|
|
--link-hover-text-color: #4A00B2;
|
|
--link-visited-text-color: #000;
|
|
--text-secondary: #000;
|
|
--code-block-background-color: #E0E0E1;
|
|
--code-block-controls-background-color: #E0E0E1;
|
|
--code-block-controls-border: none;
|
|
--code-block-border-color: #E0E0E1;
|
|
|
|
--code-block-tokens-function-color: #B23C00;
|
|
--code-block-tokens-operator-color: #000;
|
|
--code-block-tokens-comment-color: #343437;
|
|
--code-block-tokens-string-color: #145C35;
|
|
--inline-code-background-color: #E0E0E1;
|
|
|
|
--search-trigger-background-color: #E0E0E1;
|
|
--search-trigger-text-color: #838386;
|
|
--language-picker-border-color: #C1C1C2;
|
|
--language-picker-background-color: #E0E0E1;
|
|
--select-list-background-color: #E0E0E1;
|
|
|
|
--footer-title-text-color: #000;
|
|
--bg-raised: var(--color-gray-2);
|
|
--button-background-color: var(--color-gray-2);
|
|
}
|