mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-11-04 20:05:50 +00:00
1000 lines
19 KiB
SCSS
1000 lines
19 KiB
SCSS
$light-bg: $gray-100;
|
|
$light-fg: $black;
|
|
$light-fg-muted: $gray-800;
|
|
$light-fg-disabled: $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: $gray-050;
|
|
|
|
// General color elements ------------------------------------------------------
|
|
|
|
body {
|
|
background-color: $light-bg;
|
|
color: $light-fg;
|
|
}
|
|
#topnav-theme .custom-theme-toggle {
|
|
.custom-control-label::before {
|
|
background-color: transparent;
|
|
background-position: bottom right;
|
|
transform: rotate(-15deg);
|
|
}
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6,
|
|
.h1,
|
|
.h2,
|
|
.h3,
|
|
.h4,
|
|
.h5,
|
|
.h6 {
|
|
&:not(.chip) {
|
|
color: $light-fg;
|
|
}
|
|
&.green-500 {
|
|
color: $green-700;
|
|
text-shadow: white 0 0 2px, white -1px -1px 2px, white 1px 1px 2px;
|
|
}
|
|
}
|
|
|
|
.bg-grey-800 {
|
|
background-color: $light-standout-bg;
|
|
}
|
|
.grey-400 {
|
|
color: $gray-600;
|
|
}
|
|
|
|
.text-muted {
|
|
color: $light-fg-muted !important;
|
|
}
|
|
.longform {
|
|
color: $light-fg-muted;
|
|
}
|
|
.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 {
|
|
background-color: $gray-200;
|
|
color: $gray-800;
|
|
}
|
|
|
|
label .input-group-text,
|
|
.form-control:not(.btn) {
|
|
color: $light-fg;
|
|
background-color: $light-form-bg;
|
|
border-color: $light-form-bg;
|
|
}
|
|
|
|
.ds-input {
|
|
color: $light-fg;
|
|
background-color: $light-form-bg;
|
|
border-color: $light-form-bg;
|
|
|
|
&:focus {
|
|
border-color: $blue-purple-400;
|
|
}
|
|
}
|
|
}
|
|
|
|
.list-group-item {
|
|
border-color: $light-fg-muted;
|
|
background-color: $light-bg;
|
|
|
|
&.disabled {
|
|
color: $light-fg-disabled;
|
|
}
|
|
}
|
|
|
|
.progress {
|
|
background-color: $light-form-bg;
|
|
}
|
|
|
|
// Algolia search results
|
|
.xrp-ledger-dev-portal {
|
|
.DocSearch-Modal {
|
|
background: $white;
|
|
}
|
|
.DocSearch-Prefill{
|
|
color: $blue-purple-500;
|
|
}
|
|
.DocSearch-Button {
|
|
background: var(--docsearch-searchbox-background);
|
|
}
|
|
.DocSearch-Button:hover {
|
|
box-shadow: inset 0 0 0 2px $blue-purple-500;
|
|
border-radius: 40px;
|
|
background: var(--docsearch-searchbox-background);
|
|
.DocSearch-Button-Placeholder {
|
|
color: var(--docsearch-text-color);
|
|
}
|
|
}
|
|
.DocSearch-Search-Icon {
|
|
color: var(--docsearch-text-color) !important;
|
|
}
|
|
.DocSearch-Input{
|
|
color: $gray-900;
|
|
}
|
|
.DocSearch-Hit-Select-Icon{
|
|
color: $gray-900;
|
|
}
|
|
.DocSearch-Form {
|
|
box-shadow: inset 0 0 0 2px $blue-purple-500;
|
|
background-color: var(--docsearch-searchbox-focus-background);
|
|
}
|
|
.DocSearch-Hit-source {
|
|
color: $blue-purple-500;
|
|
background: $white;
|
|
}
|
|
.DocSearch-Hits mark {
|
|
color: $blue-purple-500;
|
|
}
|
|
.DocSearch-Hit-Container {
|
|
background: $white;
|
|
}
|
|
.DocSearch-Hit a {
|
|
background-color: $white;
|
|
}
|
|
.DocSearch-Hit-content-wrapper {
|
|
.DocSearch-Hit-title {
|
|
color: $black !important;
|
|
}
|
|
.DocSearch-Hit-path {
|
|
color: $black-60 !important;
|
|
}
|
|
}
|
|
.DocSearch-Logo svg{
|
|
.cls-1, .cls-2{
|
|
fill:var(--docsearch-logo-color);;
|
|
}
|
|
}
|
|
.DocSearch-Hit-title,
|
|
.DocSearch-Hit-path,
|
|
.DocSearch-Label,
|
|
.DocSearch-Help {
|
|
color: $black-60 !important;
|
|
}
|
|
.DocSearch-Hit[aria-selected="true"] a {
|
|
background: $black-10;
|
|
.DocSearch-Hit-Container {
|
|
background-color: $black-10;
|
|
}
|
|
.DocSearch-Hit-content-wrapper {
|
|
.DocSearch-Hit-title {
|
|
color: $black !important;
|
|
}
|
|
.DocSearch-Hit-path {
|
|
color: $black-60 !important;
|
|
}
|
|
}
|
|
.DocSearch-Hit-icon svg {
|
|
color: $black !important;
|
|
}
|
|
.DocSearch-Hit-action .DocSearch-Hit-action-button svg {
|
|
color: $black !important;
|
|
}
|
|
mark {
|
|
color: $blue-purple-500 !important;
|
|
}
|
|
}
|
|
.DocSearch-Footer {
|
|
background: var(--docsearch-footer-background);
|
|
}
|
|
|
|
// The extra specificity makes this override the default Algolia styles.
|
|
.algolia-autocomplete {
|
|
.ds-dropdown-menu [class^="ds-dataset-"] {
|
|
background-color: $light-standout-bg;
|
|
}
|
|
.ds-dropdown-menu::before {
|
|
background-color: $light-standout-bg;
|
|
}
|
|
.algolia-docsearch-suggestion {
|
|
background-color: $light-standout-bg;
|
|
}
|
|
.algolia-docsearch-suggestion--category-header {
|
|
color: $black;
|
|
border-bottom-color: $blue-purple-500;
|
|
}
|
|
.algolia-docsearch-suggestion--subcategory-column {
|
|
color: $black;
|
|
}
|
|
.algolia-docsearch-suggestion--title {
|
|
color: $black;
|
|
}
|
|
.algolia-docsearch-suggestion--text {
|
|
color: $light-fg-muted;
|
|
}
|
|
.algolia-docsearch-suggestion--highlight {
|
|
color: $black;
|
|
background-color: $gray-300;
|
|
}
|
|
.algolia-docsearch-suggestion--category-header
|
|
.algolia-docsearch-suggestion--category-header-lvl0
|
|
.algolia-docsearch-suggestion--highlight,
|
|
.algolia-docsearch-suggestion--category-header
|
|
.algolia-docsearch-suggestion--category-header-lvl1
|
|
.algolia-docsearch-suggestion--highlight,
|
|
.algolia-docsearch-suggestion--text
|
|
.algolia-docsearch-suggestion--highlight {
|
|
background-color: $gray-300;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Navigation ------------------------------------------------------------------
|
|
|
|
a,
|
|
nav a {
|
|
color: $light-fg;
|
|
|
|
&.btn-primary {
|
|
// undo this for buttons
|
|
color: $white;
|
|
|
|
&:hover {
|
|
color: $white;
|
|
}
|
|
}
|
|
|
|
&:hover,
|
|
&:active,
|
|
&.active {
|
|
color: $light-link-hover-color;
|
|
}
|
|
|
|
&:not(.btn):focus {
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
// Buttons
|
|
.btn-outline-secondary,
|
|
.content a.button,
|
|
.navbar-dark .navbar-nav .nav-link.btn-outline-secondary {
|
|
color: $dark;
|
|
border-color: $dark;
|
|
|
|
&:not(:disabled):not(.disabled):hover,
|
|
&:not(:disabled):not(.disabled):active {
|
|
color: $primary;
|
|
border-color: $primary;
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
// Breadcrumbs
|
|
.breadcrumb {
|
|
background: $light-bg;
|
|
}
|
|
.breadcrumb-item a {
|
|
color: $gray-600;
|
|
|
|
&:hover {
|
|
color: $primary;
|
|
}
|
|
}
|
|
|
|
// Top Nav
|
|
.top-nav {
|
|
background: $light-bg;
|
|
|
|
#topnav-pages .nav-link {
|
|
color: $light-fg;
|
|
}
|
|
|
|
// Logo
|
|
.navbar-brand {
|
|
.logo {
|
|
content: url(../img/XRPLedger_DevPortal-black.svg);
|
|
height: 40px;
|
|
}
|
|
}
|
|
|
|
// 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: $gray-100;
|
|
border-color: $gray-100;
|
|
box-shadow: $light-box-shadow;
|
|
|
|
a:hover,
|
|
a.active {
|
|
color: $light-link-hover-color;
|
|
}
|
|
|
|
.dropdown-item.dropdown-hero {
|
|
> img {
|
|
background-color: $gray-050;
|
|
}
|
|
p {
|
|
color: $gray-700;
|
|
}
|
|
}
|
|
.dropdown-item.active {
|
|
color: $light-link-hover-color;
|
|
}
|
|
|
|
h5 {
|
|
color: $gray-600;
|
|
}
|
|
|
|
.col-for-popular-pages,
|
|
.col-for-人気ページ,
|
|
.col-for-questions,
|
|
.col-for-質問 {
|
|
background-color: $gray-200;
|
|
}
|
|
}
|
|
|
|
// Top nav mobile
|
|
@include media-breakpoint-down(md) {
|
|
.navbar-toggler {
|
|
.navbar-toggler-icon {
|
|
&::after,
|
|
&::before,
|
|
div {
|
|
background-color: $gray-900;
|
|
}
|
|
}
|
|
}
|
|
|
|
.navbar-nav .nav-link,
|
|
.navbar-collapse > .nav-item {
|
|
background: $gray-200;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Left/right nav
|
|
aside .sidenav_cat_title {
|
|
color: $black;
|
|
}
|
|
.page-toc .level-1 a,
|
|
.command-list .separator {
|
|
color: $black;
|
|
}
|
|
aside a:hover,
|
|
aside .sidenav_cat_title:hover,
|
|
aside a.active,
|
|
aside a.active:hover,
|
|
aside .active > a,
|
|
aside .active > a:hover {
|
|
color: $light-link-hover-color;
|
|
}
|
|
|
|
.dactyl-tree-nav {
|
|
nav {
|
|
border-left: 1px solid $black;
|
|
|
|
.nav-link:hover,
|
|
.nav-link:active {
|
|
border-left-color: $light-link-hover-color;
|
|
}
|
|
|
|
.active > .nav-link {
|
|
border-left-color: $light-link-hover-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
.page-toc,
|
|
.command-list {
|
|
border-left: 1px solid $black;
|
|
|
|
.level-3 {
|
|
border-left: 1px solid $black;
|
|
}
|
|
|
|
li a {
|
|
&:hover,
|
|
.active {
|
|
border-left-color: $light-link-hover-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Footer
|
|
.footer-brand {
|
|
.logo {
|
|
filter: invert(100%);
|
|
}
|
|
}
|
|
|
|
.copyright-license {
|
|
text-shadow: white 0px 0px 2px, white 1px 1px 2px, white 2px 2px 3px,
|
|
white 2px 2px 4px, white 2px 2px 5px, white 2px 2px 6px, white -1px -1px 2px,
|
|
white -2px -2px 3px, white -2px -2px 4px;
|
|
}
|
|
|
|
// Osano cookie consent overrides
|
|
a.osano-cm-link {
|
|
color: #ffffff;
|
|
}
|
|
|
|
// Layout elements -------------------------------------------------------------
|
|
.card,
|
|
.cta-card {
|
|
color: $light-fg;
|
|
background-color: $light-standout-bg;
|
|
box-shadow: $light-box-shadow;
|
|
}
|
|
#code-samples-deck {
|
|
.card {
|
|
box-shadow: $light-box-shadow;
|
|
}
|
|
.card-header {
|
|
border-bottom: none;
|
|
background-color: $light-standout-bg;
|
|
}
|
|
.card-footer {
|
|
background-color: $light-standout-bg;
|
|
}
|
|
}
|
|
|
|
// FAQ
|
|
.page-faq,
|
|
.mini-faq {
|
|
&.landing-builtin-bg::before {
|
|
// Lighten the background image for legibility, since this one
|
|
// runs under a significant amount of the header text.
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.q-wrapper {
|
|
background-color: $light-standout-bg;
|
|
color: $light-fg;
|
|
box-shadow: $light-box-shadow;
|
|
|
|
> h4 a.expander:hover {
|
|
color: $light-fg;
|
|
}
|
|
}
|
|
}
|
|
|
|
.page-community {
|
|
#platform-stack-overflow {
|
|
content: url("../img/logos/lightmode/stack-overflow.svg");
|
|
}
|
|
#platform-discord {
|
|
content: url("../img/logos/lightmode/discord.svg");
|
|
}
|
|
}
|
|
|
|
// Status labels
|
|
.status.not_enabled {
|
|
color: $yellow-700;
|
|
}
|
|
|
|
// Parent ("category") page in label landings
|
|
.pg-category {
|
|
color: $gray-600;
|
|
}
|
|
|
|
.landing {
|
|
.nav .nav-link {
|
|
color: $light-fg-muted;
|
|
border-bottom-color: $gray-300;
|
|
}
|
|
|
|
.circled-logo {
|
|
background-color: $gray-200;
|
|
|
|
img[src="assets/img/logos/globe.svg"] {
|
|
filter: invert(100%);
|
|
}
|
|
}
|
|
|
|
p a,
|
|
.longform a {
|
|
color: $light-link-hover-color;
|
|
}
|
|
}
|
|
|
|
// Callouts
|
|
.devportal-callout.caution,
|
|
.devportal-callout.注意 {
|
|
border-color: $yellow-700;
|
|
|
|
> strong:first-child::before {
|
|
color: $yellow-700;
|
|
}
|
|
}
|
|
|
|
.devportal-callout.tip,
|
|
.devportal-callout.ヒント {
|
|
border-color: $green-600;
|
|
|
|
> strong:first-child::before {
|
|
color: $green-600;
|
|
}
|
|
}
|
|
|
|
// Code ------------------------------------------------------------------------
|
|
// Inline code font
|
|
code {
|
|
color: $light-fg;
|
|
}
|
|
|
|
// Code blocks
|
|
pre code {
|
|
color: $gray-050;
|
|
}
|
|
|
|
// Code tabs
|
|
.multicode {
|
|
a {
|
|
color: $black;
|
|
&.current {
|
|
color: $white;
|
|
}
|
|
&:hover {
|
|
text-decoration: none;
|
|
background-color: $light-form-bg;
|
|
color: $white;
|
|
}
|
|
&:focus {
|
|
background-color: $gray-800;
|
|
}
|
|
}
|
|
}
|
|
|
|
.codehilite .btn-outline-secondary {
|
|
background-color: $gray-800;
|
|
color: $gray-100;
|
|
border-color: $gray-100;
|
|
}
|
|
|
|
.interactive-block {
|
|
.breadcrumb-item.done a::after {
|
|
color: $green-900;
|
|
}
|
|
}
|
|
|
|
// Dev tools -------------------------------------------------------------------
|
|
.modal-content {
|
|
background-color: $light-standout-bg;
|
|
}
|
|
|
|
.rpc-tool {
|
|
pre .toggle {
|
|
color: $white;
|
|
|
|
&:hover {
|
|
color: $blue-purple-300;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 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");
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// XRPL Overview
|
|
#validator-graphic {
|
|
content: url("../img/lightmode/validators.svg");
|
|
}
|
|
|
|
// XRP Overview
|
|
|
|
#wallets {
|
|
#wallet-xumm {
|
|
content: url("../img/wallets/lightmode/xumm.svg");
|
|
}
|
|
}
|
|
|
|
#top-exchanges {
|
|
// Kraken, eToro are OK on both light and dark
|
|
|
|
// Vector logos
|
|
@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", "lmax" {
|
|
#exch-#{$exchange} {
|
|
content: url("../img/exchanges/lightmode/#{$exchange}.png");
|
|
}
|
|
}
|
|
}
|
|
|
|
// History page
|
|
.timeline-dot {
|
|
background-color: $light-bg;
|
|
}
|
|
|
|
// Use Cases & Featured Projects page
|
|
.page-uses {
|
|
|
|
.card-body {
|
|
background: $white;
|
|
color: $gray-700;
|
|
}
|
|
|
|
.modal-footer,
|
|
.modal-header {
|
|
background-color: $gray-050;
|
|
}
|
|
|
|
|
|
|
|
@each $usecase in "infrastructure",
|
|
"developer_tooling",
|
|
"interoperability",
|
|
"wallet",
|
|
"nfts",
|
|
"exchanges",
|
|
"gaming",
|
|
"security",
|
|
"payments",
|
|
"web_monetization",
|
|
"sustainability",
|
|
"cbdc",
|
|
"custody",
|
|
"other",
|
|
"carbon_markets",
|
|
"defi" {
|
|
##{$usecase} {
|
|
content: url("../img/icons/usecases/lightmode/ic_#{$usecase}.png");
|
|
}
|
|
}
|
|
|
|
.category-header {
|
|
color: $gray-700;
|
|
}
|
|
|
|
.category_count {
|
|
background: #D2B2FF;
|
|
color: #350080;
|
|
}
|
|
|
|
@each $company,$type in (
|
|
'bitgo': 'svg',
|
|
'sologenic-nft': 'svg',
|
|
'carbonland-trust': 'svg',
|
|
'x-tokenize': 'svg',
|
|
'casino-coin': 'svg',
|
|
'xrp-cafe': 'svg',
|
|
'coil': 'svg',
|
|
'xrp-toolkit': 'svg',
|
|
'cryptum': 'svg',
|
|
'xrpl-org-ledger-explorer': 'svg',
|
|
'evernode': 'svg',
|
|
'xrpl-rosetta': 'svg',
|
|
'ripples-cbdc-platform': 'svg',
|
|
'xrpscan': 'svg',
|
|
'ripples-on-demand-liquidity': 'svg',
|
|
'xumm-wallet': 'svg',
|
|
'sologenic-dex': 'svg',
|
|
'Crossmark': 'png'
|
|
)
|
|
{
|
|
#use_case_companies_list {
|
|
##{$company} {
|
|
.biz-logo {
|
|
max-height: 40px;
|
|
content: url("../img/uses/lightmode/#{$company}.#{$type}");
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Monochrome logos; invert.
|
|
#bitpay,
|
|
// #coil,
|
|
#forte,
|
|
#xrplorer,
|
|
#gatehub
|
|
{
|
|
.biz-logo {
|
|
filter: invert(100%);
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.landing-bg {
|
|
opacity: 0.4;
|
|
@include media-breakpoint-up(md) {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.landing-builtin-bg {
|
|
&::before {
|
|
opacity: 0.4;
|
|
@include media-breakpoint-up(md) {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
// feedback widget
|
|
#feedback-content {
|
|
.docked-widget {
|
|
.widget-header {
|
|
background-color: $light-bg !important;
|
|
color: $light-fg !important;
|
|
}
|
|
.widget-header-icon {
|
|
filter: invert(100%);
|
|
}
|
|
}
|
|
}
|
|
|
|
// 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);
|
|
}
|
|
}
|
|
#run-a-network-node .text-cards a {
|
|
color: $black;
|
|
}
|
|
|
|
#xrpl-blog .blog-graphic {
|
|
content: url(../img/community/lightmode/community-blog@2x.png);
|
|
}
|
|
|
|
#xrpl-events .text-light {
|
|
color: $black !important;
|
|
}
|
|
|
|
#xrplGrantsDark,
|
|
#xrplGrantsDark-small,
|
|
#careersDark,
|
|
#careersDark-small {
|
|
filter: invert(100%) brightness(0.8);
|
|
}
|
|
}
|
|
|
|
#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;
|
|
::-webkit-input-placeholder {
|
|
/* Chrome */
|
|
color: $placeholder-color;
|
|
}
|
|
:-ms-input-placeholder {
|
|
/* IE 10+ */
|
|
color: $placeholder-color;
|
|
}
|
|
::-moz-placeholder {
|
|
/* Firefox 19+ */
|
|
color: $placeholder-color;
|
|
opacity: 1;
|
|
}
|
|
:-moz-placeholder {
|
|
/* Firefox 4 - 18 */
|
|
color: $placeholder-color;
|
|
opacity: 1;
|
|
}
|
|
|
|
// Events page
|
|
.page-events {
|
|
label {
|
|
color: $gray-900;
|
|
}
|
|
|
|
.event-card {
|
|
color: $black;
|
|
background-color: $gray-050;
|
|
box-shadow: 0px 5px 20px 0px $gray-300;
|
|
}
|
|
a.event-card:hover {
|
|
color: $black;
|
|
}
|
|
|
|
.event-hero {
|
|
color: $gray-900;
|
|
}
|
|
|
|
.event-save-date {
|
|
color: $gray-900;
|
|
}
|
|
|
|
.event-small-gray {
|
|
color: $gray-600;
|
|
}
|
|
|
|
#event-hero-image {
|
|
height: 100%;
|
|
min-height: 209px;
|
|
background: url(../img/events/event-hero1-light@2x.png);
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
|
|
.icon-date::before {
|
|
background: url(../img/events/event-date-light.svg);
|
|
}
|
|
|
|
.icon-location::before {
|
|
background: url(../img/events/event-location-light.svg);
|
|
}
|
|
|
|
.events-filter[type="checkbox"]::before {
|
|
background-color: $gray-100;
|
|
}
|
|
|
|
.events-filter[type="checkbox"]:not(:disabled):checked:hover::after {
|
|
background-image: url(../img/events/event-check.svg);
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-color: $blue-purple-600;
|
|
border-width: 2px;
|
|
border-style: solid;
|
|
border-color: $blue-purple-600;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.events-filter[type="checkbox"]:not(:disabled):hover::before {
|
|
background-color: $gray-100;
|
|
}
|
|
.events-filter[type="checkbox"]:not(:disabled):hover::after {
|
|
background-color: $gray-100;
|
|
}
|
|
}
|
|
|
|
.page-ambassadors {
|
|
#benefits-list {
|
|
@each $benefits in "benefits-01", "benefits-02", "benefits-03",
|
|
"benefits-04", "benefits-05", "benefits-06"
|
|
{
|
|
##{$benefits} {
|
|
content: url("../img/ambassadors/lightmode/#{$benefits}.svg");
|
|
}
|
|
}
|
|
}
|
|
|
|
#eligibility-list {
|
|
@each $eligibility in "eligibility-01", "eligibility-02", "eligibility-03",
|
|
"eligibility-04", "eligibility-05"
|
|
{
|
|
##{$eligibility} {
|
|
content: url("../img/ambassadors/lightmode/#{$eligibility}.svg");
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.page-funding {
|
|
.funding-list {
|
|
@each $funding in "funding-01", "funding-02", "funding-03", "funding-04" {
|
|
##{$funding} {
|
|
content: url("../img/funding/lightmode/#{$funding}.svg");
|
|
}
|
|
}
|
|
}
|
|
|
|
#xrplGrantsDark {
|
|
filter: invert(100%) brightness(0.8);
|
|
}
|
|
}
|
|
|
|
.page-impact {
|
|
|
|
.connect-list {
|
|
@each $connect in "connect-01", "connect-02", "connect-03", "connect-04" {
|
|
##{$connect} {
|
|
content: url("../img/impact/lightmode/#{$connect}.svg");
|
|
}
|
|
}
|
|
}
|
|
|
|
#map-light {
|
|
display: block;
|
|
}
|
|
#map-dark {
|
|
display: none;
|
|
}
|
|
|
|
}
|
|
|
|
.tutorial-card-grid {
|
|
code {
|
|
background-color: $green-100;
|
|
}
|
|
|
|
.card-icon-container {
|
|
background: $gray-300;
|
|
}
|
|
}
|
|
|
|
|