mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-12-03 10:05:49 +00:00
Merge branch 'light_mode_revised'
This commit is contained in:
mDuo13
@@ -1,3 +1,7 @@
|
||||
.card, .cta-card, .q-wrapper {
|
||||
box-shadow: $dropdown-box-shadow;
|
||||
}
|
||||
|
||||
.card-body > p,
|
||||
.card-body > p:not(:last-child) {
|
||||
padding: 0;
|
||||
@@ -26,22 +30,33 @@ a.card:hover h3 {
|
||||
img {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
display: inline-block; // fix sizing in Chrome
|
||||
}
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.card-deck {
|
||||
margin-top: 2.5rem;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
margin-left: (-$card-deck-margin);
|
||||
margin-right: (-$card-deck-margin);
|
||||
margin-bottom: 5rem;
|
||||
flex-grow: 1;
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
margin-top: 5rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
flex-grow: 0;
|
||||
flex-basis: 100%;
|
||||
margin: 0 $card-deck-margin (4 * $card-deck-margin) $card-deck-margin;
|
||||
background-position: bottom;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
&.row-cols-1 .card {
|
||||
flex-basis: 100%;
|
||||
// Give cards some breathing room (but not in the 2×2 ones)
|
||||
min-height: 264px;
|
||||
@include media-breakpoint-up(md) {
|
||||
@@ -49,6 +64,29 @@ a.card:hover h3 {
|
||||
}
|
||||
}
|
||||
|
||||
&.row-cols-lg-3 {
|
||||
@include media-breakpoint-up(xl) {
|
||||
// Double the card deck margin on larger desktops
|
||||
margin-left: (-2 * $card-deck-margin);
|
||||
margin-right: (-2 * $card-deck-margin);
|
||||
}
|
||||
.card {
|
||||
@include media-breakpoint-up(lg) {
|
||||
flex-basis: calc(33% - #{(2 * $card-deck-margin)} );
|
||||
}
|
||||
@include media-breakpoint-up(xl) {
|
||||
margin: 0 (2 * $card-deck-margin) (4 * $card-deck-margin) (2 * $card-deck-margin);
|
||||
flex-basis: calc(33% - #{(4 * $card-deck-margin)} );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.row-cols-lg-4 .card {
|
||||
@include media-breakpoint-up(lg) {
|
||||
flex-basis: calc(25% - #{(2 * $card-deck-margin)} );
|
||||
}
|
||||
}
|
||||
|
||||
a.card {
|
||||
transition: all 0.35s ease-out;
|
||||
cursor: pointer;
|
||||
@@ -77,7 +115,7 @@ a.card:hover h3 {
|
||||
padding: 1rem;
|
||||
}
|
||||
&.row-cols-1 .card {
|
||||
margin: .75rem;
|
||||
margin: .75rem .75rem (4 * $card-deck-margin) .75rem;
|
||||
max-width: calc(100% - 1.5rem);
|
||||
}
|
||||
&.row-cols-2 .card {
|
||||
@@ -86,3 +124,8 @@ a.card:hover h3 {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cta-card {
|
||||
text-align: center;
|
||||
background-color: $gray-800;
|
||||
}
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
// XRP Visual Guidelines 2020 palette
|
||||
// XRP Visual Guidelines 2021 palette
|
||||
|
||||
// Full color palette first ----------------------------------------------------
|
||||
$white: #FFFFFF;
|
||||
$gray-050: #FCFCFD;
|
||||
$gray-100: #F5F5F7;
|
||||
$gray-200: #E0E0E1;
|
||||
$gray-300: #C1C1C2;
|
||||
|
||||
@@ -151,7 +151,7 @@ p {
|
||||
text-decoration: none;
|
||||
}
|
||||
.arrow-link:after {
|
||||
content: url(../img/icon-green-arrow.svg);
|
||||
content: url(../img/icon-long-arrow.svg);
|
||||
width: 28px;
|
||||
padding-left: 7px;
|
||||
transition: all .2s ease-in-out;
|
||||
|
||||
@@ -361,13 +361,7 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.top-10 {
|
||||
top: 2.5rem;
|
||||
}
|
||||
.top-20 {
|
||||
top: 5rem;
|
||||
}
|
||||
.top-24 {
|
||||
.floating-nav {
|
||||
top: 6rem;
|
||||
}
|
||||
.last-section {
|
||||
@@ -447,16 +441,14 @@
|
||||
.grey-700 {
|
||||
color: $gray-700;
|
||||
}
|
||||
.bg-grey-800 {
|
||||
background-color: $gray-800;
|
||||
}
|
||||
.green-500 {
|
||||
color: $green-500;
|
||||
}
|
||||
.white {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.stat-highlight {
|
||||
color: $green-500;
|
||||
}
|
||||
|
||||
/* ETC */
|
||||
.br-8 {
|
||||
border-radius: 8px;
|
||||
|
||||
@@ -1,3 +1,9 @@
|
||||
// Variables
|
||||
$grid-gap: 40px;
|
||||
$grid-gap-lg: 80px;
|
||||
|
||||
// General stuff ---------------------------------------------------------------
|
||||
|
||||
body {
|
||||
position: relative; // Makes scrollspy work better
|
||||
}
|
||||
@@ -73,7 +79,7 @@ section {
|
||||
@include media-breakpoint-up(lg) {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
grid-column-gap: 80px;
|
||||
grid-column-gap: $grid-gap-lg;
|
||||
|
||||
.nav-grid-head {
|
||||
margin-top: 0;
|
||||
@@ -96,36 +102,40 @@ section {
|
||||
}
|
||||
|
||||
|
||||
// Card Grid styles ------------------------------------------------------------
|
||||
// Grid styles (often not for cards) -------------------------------------------
|
||||
|
||||
.card-grid {
|
||||
display: grid;
|
||||
grid-gap: 40px;
|
||||
grid-gap: $grid-gap;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
grid-template-columns: 1fr; // Default to 1 big column on smaller screens
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
grid-gap: $grid-gap-lg;
|
||||
}
|
||||
|
||||
.col {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
&.card-grid-3xN {
|
||||
/* 3 equal columns and any number of auto-sized rows. */
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-auto-rows: auto;
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
/* Switch to 1-column layout on smaller widths */
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.card-new {
|
||||
min-height: 264px;
|
||||
@include media-breakpoint-up(md) {
|
||||
min-height: 347px;
|
||||
}
|
||||
@include media-breakpoint-up(lg) {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
// @include media-breakpoint-up(lg) {
|
||||
// margin-left: (-2 * $grid-gap-lg);
|
||||
// margin-right: (-2 * $grid-gap-lg);
|
||||
// }
|
||||
}
|
||||
|
||||
&.card-grid-2xN {
|
||||
/* 2 equal columns and any number of auto-sized rows. */
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-auto-rows: auto;
|
||||
gap: 40px;
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
/* Switch to 1-column layout on smaller widths */
|
||||
@@ -142,16 +152,21 @@ section {
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
/* Switch to 1-column layout on smaller widths */
|
||||
grid-template-columns: 1fr;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 40px;
|
||||
border: 0;
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
padding: 20px;
|
||||
.card {
|
||||
padding: 20px;
|
||||
border: 0;
|
||||
min-height: 264px;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
min-height: 347px;
|
||||
}
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
@@ -167,7 +182,6 @@ section {
|
||||
}
|
||||
|
||||
// New Page Layouts ---------------------------------------------------------------
|
||||
$columns: 12; // Number of columns in the grid system
|
||||
|
||||
.container-new {
|
||||
display: flex;
|
||||
@@ -180,65 +194,11 @@ $columns: 12; // Number of columns in the grid system
|
||||
max-width: 608px;
|
||||
}
|
||||
@include media-breakpoint-up(lg) {
|
||||
max-width: 832px;
|
||||
max-width: 942px;
|
||||
}
|
||||
@include media-breakpoint-up(xl) {
|
||||
max-width: 1280px;
|
||||
}
|
||||
// create columns
|
||||
@for $width from 1 through $columns {
|
||||
.col-new-#{$width} {
|
||||
flex-basis: $width / $columns * 100%;
|
||||
}
|
||||
}
|
||||
.margin-col {
|
||||
@include media-breakpoint-down(lg) {
|
||||
margin: 24px 0;
|
||||
}
|
||||
@include media-breakpoint-down(sm) {
|
||||
margin: 0 0 40px;
|
||||
}
|
||||
@include media-breakpoint-up(lg) {
|
||||
margin: 40px;
|
||||
}
|
||||
}
|
||||
.col-new {
|
||||
background-position: bottom;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
overflow: hidden;
|
||||
max-width: 100%;
|
||||
margin: 0 0 40px;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
margin: 24px 0;
|
||||
}
|
||||
@include media-breakpoint-up(lg) {
|
||||
margin: 24px;
|
||||
}
|
||||
@include media-breakpoint-up(xl) {
|
||||
margin: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.card-new {
|
||||
padding: 32px;
|
||||
--width: 4;
|
||||
}
|
||||
.col-new-card {
|
||||
transition: all 0.15s ease-out;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
box-shadow: 0px 5px 40px 0px $black;
|
||||
color: $white;
|
||||
&:hover {
|
||||
-webkit-transform: translateY(-16px);
|
||||
-moz-transform: translateY(-16px);
|
||||
-ms-transform: translateY(-16px);
|
||||
-o-transform: translateY(-16px);
|
||||
transform: translateY(-16px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 3-column layout for docs pages ----------------------------------------------
|
||||
|
||||
@@ -9,13 +9,6 @@
|
||||
right: -3px;
|
||||
top: 60px;
|
||||
}
|
||||
#home-hero-graphic {
|
||||
margin-left: auto;
|
||||
width: 856px;
|
||||
margin-right: auto;
|
||||
margin-bottom: 24px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.sidelinks {
|
||||
&:hover {
|
||||
@@ -28,10 +21,19 @@
|
||||
}
|
||||
|
||||
.page-home {
|
||||
#home-hero-graphic {
|
||||
content: url("../img/home-hero.svg");
|
||||
margin-left: auto;
|
||||
width: 856px;
|
||||
margin-right: auto;
|
||||
margin-bottom: 24px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
#benefits-list {
|
||||
@each $benefit in "public", "streamlined", "performance", "low-cost", "community", "reliability" {
|
||||
##{$benefit} {
|
||||
content: url("../img/icons/#{$benefit}.svg")
|
||||
content: url("../img/icons/#{$benefit}.svg");
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -39,8 +41,8 @@
|
||||
#advanced-features {
|
||||
$feature-cards: ["pink-purple", "neutral-blue", "light-green", "orange", "purple-blue-2"];
|
||||
@for $i from 1 through 5 {
|
||||
.col-new-card:nth-child(#{$i}) {
|
||||
background-image: url("../img/cards/3col-#{nth($feature-cards, $i)}.svg")
|
||||
.card:nth-child(#{$i}) .card-footer {
|
||||
background-image: url("../img/cards/3col-#{nth($feature-cards, $i)}.svg");
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -48,8 +50,8 @@
|
||||
#get-started {
|
||||
$gs-cards: ["orange-yellow", "magenta-orange", "purple-blue-green", "light-blue", "green-blue"];
|
||||
@for $i from 1 through 5 {
|
||||
.col-new-card:nth-child(#{$i}) {
|
||||
background-image: url("../img/cards/3col-#{nth($gs-cards, $i)}.svg")
|
||||
.card:nth-child(#{$i}) .card-footer {
|
||||
background-image: url("../img/cards/3col-#{nth($gs-cards, $i)}.svg");
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -187,14 +189,18 @@
|
||||
"xrplorer": "green-purple"
|
||||
) {
|
||||
##{$company} {
|
||||
background-image: url("../img/cards/3col-#{$card-graphic}.svg");
|
||||
.card-footer {
|
||||
background-image: url("../img/cards/3col-#{$card-graphic}.svg");
|
||||
}
|
||||
.biz-logo {
|
||||
content: url("../img/uses/#{$company}.svg");
|
||||
}
|
||||
}
|
||||
}
|
||||
#raisedinspace {
|
||||
background-image: url(../img/cards/3col-orange-yellow-2.svg);
|
||||
.card-footer {
|
||||
background-image: url(../img/cards/3col-orange-yellow-2.svg);
|
||||
}
|
||||
.biz-logo {
|
||||
content: url(../img/uses/raised.png);
|
||||
}
|
||||
@@ -360,11 +366,15 @@
|
||||
border-radius: $border-radius-sm;
|
||||
padding: 2rem;
|
||||
padding-right: 3rem; // don't overlap chevron
|
||||
margin-bottom: 1.5rem;
|
||||
// margin-bottom: 1.5rem; // this is enough space when a banner isn't active
|
||||
margin-bottom: 3.5rem; // give space so anchor-fix doesn't block clicks
|
||||
|
||||
width: 100%;
|
||||
|
||||
> a {
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
@@ -392,6 +402,16 @@
|
||||
font-size: 1rem;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
// Stop anchor-fix from blocking clicks on earlier FAQ items
|
||||
&::before {
|
||||
position: relative;
|
||||
z-index: -1;
|
||||
}
|
||||
> a {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
}
|
||||
}
|
||||
|
||||
.chevron {
|
||||
|
||||
@@ -91,6 +91,23 @@
|
||||
background-color: $blue-purple-200;
|
||||
}
|
||||
}
|
||||
|
||||
html.light & {
|
||||
background-color: $blue-purple-200;
|
||||
color: $blue-purple-800;
|
||||
.badge-pill {
|
||||
color: $blue-purple-200;
|
||||
background-color: $blue-purple-800;
|
||||
}
|
||||
&:hover {
|
||||
background-color: $blue-purple-300;
|
||||
color: $blue-purple-900;
|
||||
.badge-pill {
|
||||
color: $blue-purple-300;
|
||||
background-color: $blue-purple-900;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin chip-green {
|
||||
@@ -108,6 +125,23 @@
|
||||
color: $green-800;
|
||||
}
|
||||
}
|
||||
|
||||
html.light & {
|
||||
background-color: $green-200;
|
||||
color: $green-900;
|
||||
.badge-pill {
|
||||
color: $green-200;
|
||||
background-color: $green-900;
|
||||
}
|
||||
&:hover {
|
||||
background-color: $green-300;
|
||||
color: $black;
|
||||
.badge-pill {
|
||||
color: $green-300;
|
||||
background-color: $black;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin chip-purple {
|
||||
@@ -125,6 +159,23 @@
|
||||
color: $red-purple-800;
|
||||
}
|
||||
}
|
||||
|
||||
html.light & {
|
||||
background-color: $red-purple-200;
|
||||
color: $red-purple-800;
|
||||
.badge-pill {
|
||||
color: $red-purple-200;
|
||||
background-color: $red-purple-800;
|
||||
}
|
||||
&:hover {
|
||||
background-color: $red-purple-300;
|
||||
color: $red-purple-900;
|
||||
.badge-pill {
|
||||
color: $red-purple-300;
|
||||
background-color: $red-purple-900;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin chip-yellow {
|
||||
@@ -142,6 +193,23 @@
|
||||
color: $yellow-800;
|
||||
}
|
||||
}
|
||||
|
||||
html.light & {
|
||||
background-color: $yellow-200;
|
||||
color: $yellow-800;
|
||||
.badge-pill {
|
||||
color: $yellow-200;
|
||||
background-color: $yellow-800;
|
||||
}
|
||||
&:hover {
|
||||
background-color: $yellow-300;
|
||||
color: $yellow-900;
|
||||
.badge-pill {
|
||||
color: $yellow-300;
|
||||
background-color: $yellow-900;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin chip-blue {
|
||||
@@ -159,6 +227,23 @@
|
||||
color: $blue-800;
|
||||
}
|
||||
}
|
||||
|
||||
html.light & {
|
||||
background-color: $blue-200;
|
||||
color: $blue-800;
|
||||
.badge-pill {
|
||||
color: $blue-200;
|
||||
background-color: $blue-800;
|
||||
}
|
||||
&:hover {
|
||||
background-color: $blue-300;
|
||||
color: $blue-900;
|
||||
.badge-pill {
|
||||
color: $blue-300;
|
||||
background-color: $blue-900;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin chip-orange {
|
||||
@@ -176,6 +261,23 @@
|
||||
color: $orange-800;
|
||||
}
|
||||
}
|
||||
|
||||
html.light & {
|
||||
background-color: $orange-200;
|
||||
color: $orange-800;
|
||||
.badge-pill {
|
||||
color: $orange-200;
|
||||
background-color: $orange-800;
|
||||
}
|
||||
&:hover {
|
||||
background-color: $orange-300;
|
||||
color: $orange-900;
|
||||
.badge-pill {
|
||||
color: $orange-300;
|
||||
background-color: $orange-900;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin chip-magenta {
|
||||
@@ -193,6 +295,23 @@
|
||||
color: $magenta-800;
|
||||
}
|
||||
}
|
||||
|
||||
html.light & {
|
||||
background-color: $magenta-200;
|
||||
color: $magenta-800;
|
||||
.badge-pill {
|
||||
color: $magenta-200;
|
||||
background-color: $magenta-800;
|
||||
}
|
||||
&:hover {
|
||||
background-color: $magenta-300;
|
||||
color: $magenta-900;
|
||||
.badge-pill {
|
||||
color: $magenta-300;
|
||||
background-color: $magenta-900;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.label-accounts,
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
background: url(../img/backgrounds/bg-apex-banner.svg);
|
||||
background-position: center;
|
||||
background-color: #7919FF;
|
||||
background-size: cover;
|
||||
padding: 2px 8px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
@@ -57,6 +58,10 @@ body {
|
||||
|
||||
$banner-top-offset: 146px;
|
||||
|
||||
.floating-nav {
|
||||
top: $banner-top-offset;
|
||||
}
|
||||
|
||||
.main h1:before,
|
||||
.main h2:before,
|
||||
.main h3:before,
|
||||
@@ -88,6 +93,17 @@ html.light {
|
||||
border-color: #E0E0E1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-faq,
|
||||
.mini-faq {
|
||||
.q-wrapper .chevron {
|
||||
top: $banner-top-offset;
|
||||
}
|
||||
}
|
||||
|
||||
.page-calculator #calculator-mobile-toggle.show {
|
||||
top: ($banner-top-offset + 4px)
|
||||
}
|
||||
|
||||
@@ -524,6 +524,15 @@
|
||||
}
|
||||
|
||||
} // end mobile specific styles ----------------------------------------------
|
||||
|
||||
// nav "hero" images
|
||||
#top-nav-hero-docs {
|
||||
content: url("../img/icons/docs.svg");
|
||||
}
|
||||
#top-nav-hero-contribute {
|
||||
content: url("../img/icons/contribute.svg");
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -2,10 +2,10 @@ $light-bg: $gray-100;
|
||||
$light-fg: $black;
|
||||
$light-fg-muted: $gray-800;
|
||||
$light-fg-disabled: $gray-400;
|
||||
$light-form-bg: $gray-300;
|
||||
$light-box-shadow: 0px 5px 20px 0px $gray-400;
|
||||
$light-form-bg: $gray-200;
|
||||
$light-box-shadow: 0px 5px 20px 0px $gray-300;
|
||||
$light-link-hover-color: $blue-purple-500;
|
||||
$light-standout-bg: $white;
|
||||
$light-standout-bg: $gray-050;
|
||||
|
||||
// General color elements ------------------------------------------------------
|
||||
|
||||
@@ -48,11 +48,19 @@ h1, h2, h3, h4, h5, h6,
|
||||
.numbers {
|
||||
color: $black;
|
||||
}
|
||||
.stat-highlight,
|
||||
.eyebrow {
|
||||
color: $gray-900;
|
||||
}
|
||||
|
||||
.invertible-img {
|
||||
filter: invert(100%);
|
||||
}
|
||||
|
||||
.arrow-link::after {
|
||||
content: url("../img/lightmode/icon-long-arrow.svg");
|
||||
}
|
||||
|
||||
// Forms and inputs ------------------------------------------------------------
|
||||
.search, .input-group, .form-group {
|
||||
.input-group-text {
|
||||
@@ -150,6 +158,11 @@ a, nav a {
|
||||
}
|
||||
}
|
||||
|
||||
a.card:hover, &:active, &.active {
|
||||
// Don't turn link-card text purple on hover
|
||||
color: $light-fg;
|
||||
}
|
||||
|
||||
.landing-table tbody td {
|
||||
color: $light-fg-muted;
|
||||
}
|
||||
@@ -197,9 +210,17 @@ a, nav a {
|
||||
}
|
||||
}
|
||||
|
||||
// nav "hero" images
|
||||
#top-nav-hero-docs {
|
||||
content: url(../img/icons/lightmode/docs.svg);
|
||||
}
|
||||
#top-nav-hero-contribute {
|
||||
content: url(../img/icons/lightmode/contribute.svg);
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
background-color: $white;
|
||||
border-color: $white;
|
||||
background-color: $gray-100;
|
||||
border-color: $gray-100;
|
||||
box-shadow: $light-box-shadow;
|
||||
|
||||
a:hover, a.active {
|
||||
@@ -208,7 +229,7 @@ a, nav a {
|
||||
|
||||
.dropdown-item.dropdown-hero {
|
||||
> img {
|
||||
background-color: $gray-200;
|
||||
background-color: $gray-050;
|
||||
}
|
||||
p {
|
||||
color: $gray-700;
|
||||
@@ -244,7 +265,7 @@ a, nav a {
|
||||
|
||||
.navbar-nav .nav-link,
|
||||
.navbar-collapse > .nav-item {
|
||||
background: $gray-100;
|
||||
background: $gray-200;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -314,12 +335,7 @@ aside .active > a:hover {
|
||||
}
|
||||
|
||||
// Layout elements -------------------------------------------------------------
|
||||
.container-new .col-new-card {
|
||||
box-shadow: $light-box-shadow;
|
||||
color: $light-fg;
|
||||
}
|
||||
|
||||
.card {
|
||||
.card, .cta-card {
|
||||
color: $light-fg;
|
||||
background-color: $light-standout-bg;
|
||||
box-shadow: $light-box-shadow;
|
||||
@@ -335,8 +351,9 @@ aside .active > a:hover {
|
||||
}
|
||||
|
||||
.q-wrapper {
|
||||
background-color: $gray-200;
|
||||
background-color: $light-standout-bg;
|
||||
color: $light-fg;
|
||||
box-shadow: $light-box-shadow;
|
||||
|
||||
> a.expander:hover {
|
||||
color: $light-fg;
|
||||
@@ -346,7 +363,7 @@ aside .active > a:hover {
|
||||
|
||||
.page-community {
|
||||
#platform-stack-overflow {
|
||||
content: url("../img/logos/lightmode/stack-overflow.svg")
|
||||
content: url("../img/logos/lightmode/stack-overflow.svg");
|
||||
}
|
||||
}
|
||||
|
||||
@@ -367,7 +384,7 @@ aside .active > a:hover {
|
||||
}
|
||||
|
||||
.circled-logo {
|
||||
background-color: $gray-300;
|
||||
background-color: $gray-200;
|
||||
|
||||
img[src="assets/img/logos/globe.svg"] {
|
||||
filter: invert(100%);
|
||||
@@ -405,7 +422,7 @@ code {
|
||||
|
||||
// Code blocks
|
||||
pre code {
|
||||
color: $white;
|
||||
color: $gray-050;
|
||||
}
|
||||
|
||||
// Code tabs
|
||||
@@ -458,12 +475,15 @@ pre code {
|
||||
// Individual page styles ------------------------------------------------------
|
||||
|
||||
// Homepage
|
||||
|
||||
.page-home {
|
||||
#home-hero-graphic {
|
||||
content: url("../img/lightmode/home-hero.svg");
|
||||
}
|
||||
|
||||
#benefits-list {
|
||||
@each $benefit in "public", "streamlined", "performance", "low-cost", "community", "reliability" {
|
||||
##{$benefit} {
|
||||
content: url("../img/icons/lightmode/#{$benefit}.svg")
|
||||
content: url("../img/icons/lightmode/#{$benefit}.svg");
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -471,7 +491,7 @@ pre code {
|
||||
|
||||
// XRPL Overview
|
||||
#validator-graphic {
|
||||
content: url(../img/lightmode/validators.svg);
|
||||
content: url("../img/lightmode/validators.svg");
|
||||
}
|
||||
|
||||
// XRP Overview
|
||||
@@ -486,14 +506,14 @@ pre code {
|
||||
// Kraken, eToro are OK on both light and dark
|
||||
|
||||
// Vector logos
|
||||
@each $exchange in "bitstamp", "cex-io", "liquid", "bitfinex", "lmax" {
|
||||
@each $exchange in "bitstamp", "cex-io", "liquid", "bitfinex" {
|
||||
#exch-#{$exchange} {
|
||||
content: url("../img/exchanges/lightmode/#{$exchange}.svg");
|
||||
}
|
||||
}
|
||||
|
||||
// PNG logos
|
||||
@each $exchange in "bittrex", "currency-com", "ftx" {
|
||||
@each $exchange in "bittrex", "currency-com", "ftx", "lmax" {
|
||||
#exch-#{$exchange} {
|
||||
content: url("../img/exchanges/lightmode/#{$exchange}.png");
|
||||
}
|
||||
@@ -536,6 +556,19 @@ pre code {
|
||||
}
|
||||
}
|
||||
|
||||
// darkened card graphics
|
||||
@each $company,$card-graphic in (
|
||||
"bitpay": "blue-green",
|
||||
"exodus": "green",
|
||||
"forte": "light-blue-2",
|
||||
"ripple": "blue-light-blue",
|
||||
"xrplorer": "green-purple"
|
||||
) {
|
||||
##{$company} .card-footer {
|
||||
background-image: url("../img/cards/lightmode/3col-#{$card-graphic}.svg");
|
||||
}
|
||||
}
|
||||
|
||||
// Monochrome logos; invert.
|
||||
#bitpay, #coil, #forte, #xrplorer, #gatehub {
|
||||
.biz-logo {
|
||||
@@ -552,13 +585,16 @@ pre code {
|
||||
}
|
||||
// non-SVG logos:
|
||||
#raisedinspace {
|
||||
.card-footer {
|
||||
background-image: url("../img/cards/lightmode/3col-orange-yellow-2.svg");
|
||||
}
|
||||
.biz-logo {
|
||||
content: url(../img/uses/lightmode/raised.png);
|
||||
content: url("../img/uses/lightmode/raised.png");
|
||||
}
|
||||
}
|
||||
#towo {
|
||||
.biz-logo {
|
||||
content: url(../img/uses/lightmode/towo.png);
|
||||
content: url("../img/uses/lightmode/towo.png");
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -593,6 +629,53 @@ pre code {
|
||||
}
|
||||
}
|
||||
|
||||
// Docs landing page
|
||||
.page-docs-index {
|
||||
#software-and-sdks .card-deck {
|
||||
.card:nth-child(1) .card-footer {
|
||||
background-image: url(../img/cards/lightmode/4col-green.svg);
|
||||
}
|
||||
.card:nth-child(2) .card-footer {
|
||||
background-image: url(../img/cards/lightmode/4col-light-blue.svg);
|
||||
}
|
||||
.card:nth-child(4) .card-footer {
|
||||
background-image: url(../img/cards/lightmode/4col-yellow.svg);
|
||||
}
|
||||
}
|
||||
#doc-types .card-deck {
|
||||
.card:nth-child(4) .card-footer {
|
||||
background-image: url(../img/cards/lightmode/4col-light-blue-2.svg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-docs-index,
|
||||
.page-community {
|
||||
#run-a-network-node .card-deck {
|
||||
.card:nth-child(4) .card-footer {
|
||||
background-image: url(../img/cards/lightmode/4col-light-green.svg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#find-us-on-platforms .card-deck {
|
||||
.card:nth-child(2) .card-footer {
|
||||
background-image: url(../img/cards/lightmode/4col-light-blue-3.svg);
|
||||
}
|
||||
}
|
||||
|
||||
.page-references {
|
||||
#refs-types .card-deck {
|
||||
.card:nth-child(2) .card-footer {
|
||||
background-image: url(../img/cards/lightmode/3col-green-2.svg);
|
||||
}
|
||||
}
|
||||
#xrpl-protocol .card-deck {
|
||||
.card:nth-child(1) .card-footer {
|
||||
background-image: url(../img/cards/lightmode/4col-light-blue-4.svg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Placeholder text colors (search bars, etc.)
|
||||
$placeholder-color: $gray-600;
|
||||
|
||||
Reference in New Issue
Block a user