mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-11-20 03:35:51 +00:00
delete center search bar, adjust dark mode and modal position
This commit is contained in:
jonathanlei
File diff suppressed because one or more lines are too long
@@ -93,6 +93,23 @@
|
||||
box-shadow: none;
|
||||
background-color: $gray-700;
|
||||
}
|
||||
.DocSearch-Button {
|
||||
background: $gray-800;
|
||||
width: 700px;
|
||||
}
|
||||
.DocSearch-Button:hover {
|
||||
background: $gray-800;
|
||||
.DocSearch-Button-Placeholder {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
.DocSearch-Search-Icon {
|
||||
color: $white !important;
|
||||
}
|
||||
.DocSearch-Modal{
|
||||
max-width: 700px;
|
||||
margin-right: 7em;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
.algolia-autocomplete .ds-dropdown-menu {
|
||||
|
||||
@@ -21,8 +21,18 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6,
|
||||
.h1, .h2, .h3, .h4, .h5, .h6 {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
.h1,
|
||||
.h2,
|
||||
.h3,
|
||||
.h4,
|
||||
.h5,
|
||||
.h6 {
|
||||
&:not(.chip) {
|
||||
color: $light-fg;
|
||||
}
|
||||
@@ -62,7 +72,9 @@ h1, h2, h3, h4, h5, h6,
|
||||
}
|
||||
|
||||
// Forms and inputs ------------------------------------------------------------
|
||||
.search, .input-group, .form-group {
|
||||
.search,
|
||||
.input-group,
|
||||
.form-group {
|
||||
.input-group-text {
|
||||
background-color: $gray-200;
|
||||
color: $gray-800;
|
||||
@@ -101,6 +113,18 @@ h1, h2, h3, h4, h5, h6,
|
||||
|
||||
// Algolia search results
|
||||
.xrp-ledger-dev-portal {
|
||||
.DocSearch-Button {
|
||||
background: var(--docsearch-searchbox-background);
|
||||
}
|
||||
.DocSearch-Button:hover {
|
||||
background: var(--docsearch-searchbox-background);
|
||||
.DocSearch-Button-Placeholder {
|
||||
color: var(--docsearch-text-color);
|
||||
}
|
||||
}
|
||||
.DocSearch-Search-Icon {
|
||||
color: var(--docsearch-text-color) !important;
|
||||
}
|
||||
// The extra specificity makes this override the default Algolia styles.
|
||||
.algolia-autocomplete {
|
||||
.ds-dropdown-menu [class^="ds-dataset-"] {
|
||||
@@ -129,7 +153,14 @@ h1, h2, h3, h4, h5, h6,
|
||||
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 {
|
||||
.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;
|
||||
}
|
||||
}
|
||||
@@ -137,7 +168,8 @@ h1, h2, h3, h4, h5, h6,
|
||||
|
||||
// Navigation ------------------------------------------------------------------
|
||||
|
||||
a, nav a {
|
||||
a,
|
||||
nav a {
|
||||
color: $light-fg;
|
||||
|
||||
&.btn-primary {
|
||||
@@ -149,7 +181,9 @@ a, nav a {
|
||||
}
|
||||
}
|
||||
|
||||
&:hover, &:active, &.active {
|
||||
&:hover,
|
||||
&:active,
|
||||
&.active {
|
||||
color: $light-link-hover-color;
|
||||
}
|
||||
|
||||
@@ -158,7 +192,9 @@ a, nav a {
|
||||
}
|
||||
}
|
||||
|
||||
a.card:hover, &:active, &.active {
|
||||
a.card:hover,
|
||||
&:active,
|
||||
&.active {
|
||||
// Don't turn link-card text purple on hover
|
||||
color: $light-fg;
|
||||
}
|
||||
@@ -167,7 +203,6 @@ a.card:hover, &:active, &.active {
|
||||
color: $light-fg-muted;
|
||||
}
|
||||
|
||||
|
||||
// Buttons
|
||||
.btn-outline-secondary,
|
||||
.content a.button,
|
||||
@@ -175,7 +210,8 @@ a.card:hover, &:active, &.active {
|
||||
color: $dark;
|
||||
border-color: $dark;
|
||||
|
||||
&:not(:disabled):not(.disabled):hover, &:not(:disabled):not(.disabled):active {
|
||||
&:not(:disabled):not(.disabled):hover,
|
||||
&:not(:disabled):not(.disabled):active {
|
||||
color: $primary;
|
||||
border-color: $primary;
|
||||
background-color: transparent;
|
||||
@@ -190,7 +226,7 @@ a.card:hover, &:active, &.active {
|
||||
color: $gray-600;
|
||||
|
||||
&:hover {
|
||||
color: $primary
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -223,7 +259,8 @@ a.card:hover, &:active, &.active {
|
||||
border-color: $gray-100;
|
||||
box-shadow: $light-box-shadow;
|
||||
|
||||
a:hover, a.active {
|
||||
a:hover,
|
||||
a.active {
|
||||
color: $light-link-hover-color;
|
||||
}
|
||||
|
||||
@@ -302,7 +339,6 @@ aside .active > a:hover {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.page-toc,
|
||||
.command-list {
|
||||
border-left: 1px solid $black;
|
||||
@@ -327,15 +363,14 @@ aside .active > a:hover {
|
||||
}
|
||||
|
||||
.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,
|
||||
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;
|
||||
}
|
||||
|
||||
// Layout elements -------------------------------------------------------------
|
||||
.card, .cta-card {
|
||||
.card,
|
||||
.cta-card {
|
||||
color: $light-fg;
|
||||
background-color: $light-standout-bg;
|
||||
box-shadow: $light-box-shadow;
|
||||
@@ -353,7 +388,6 @@ aside .active > a:hover {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// FAQ
|
||||
.page-faq,
|
||||
.mini-faq {
|
||||
@@ -414,7 +448,8 @@ aside .active > a:hover {
|
||||
}
|
||||
|
||||
// Callouts
|
||||
.devportal-callout.caution, .devportal-callout.注意 {
|
||||
.devportal-callout.caution,
|
||||
.devportal-callout.注意 {
|
||||
border-color: $yellow-700;
|
||||
|
||||
> strong:first-child::before {
|
||||
@@ -422,7 +457,8 @@ aside .active > a:hover {
|
||||
}
|
||||
}
|
||||
|
||||
.devportal-callout.tip, .devportal-callout.ヒント {
|
||||
.devportal-callout.tip,
|
||||
.devportal-callout.ヒント {
|
||||
border-color: $green-600;
|
||||
|
||||
> strong:first-child::before {
|
||||
@@ -465,7 +501,6 @@ pre code {
|
||||
border-color: $gray-100;
|
||||
}
|
||||
|
||||
|
||||
.interactive-block {
|
||||
.breadcrumb-item.done a::after {
|
||||
color: $green-900;
|
||||
@@ -477,7 +512,6 @@ pre code {
|
||||
background-color: $light-standout-bg;
|
||||
}
|
||||
|
||||
|
||||
.rpc-tool {
|
||||
pre .toggle {
|
||||
color: $white;
|
||||
@@ -488,7 +522,6 @@ pre code {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Individual page styles ------------------------------------------------------
|
||||
|
||||
// Homepage
|
||||
@@ -498,7 +531,9 @@ pre code {
|
||||
}
|
||||
|
||||
#benefits-list {
|
||||
@each $benefit in "public", "streamlined", "performance", "low-cost", "community", "reliability" {
|
||||
@each $benefit in "public", "streamlined", "performance", "low-cost",
|
||||
"community", "reliability"
|
||||
{
|
||||
##{$benefit} {
|
||||
content: url("../img/icons/lightmode/#{$benefit}.svg");
|
||||
}
|
||||
@@ -515,7 +550,7 @@ pre code {
|
||||
|
||||
#wallets {
|
||||
#wallet-xumm {
|
||||
content: url("../img/wallets/lightmode/xumm.svg")
|
||||
content: url("../img/wallets/lightmode/xumm.svg");
|
||||
}
|
||||
}
|
||||
|
||||
@@ -544,7 +579,8 @@ pre code {
|
||||
|
||||
// Carbon calculator
|
||||
.page-calculator {
|
||||
#co2Animation, #gasAnimation {
|
||||
#co2Animation,
|
||||
#gasAnimation {
|
||||
//filter: invert(100%) hue-rotate(200deg) brightness(1.8);
|
||||
// Leave these dark for now
|
||||
background: $body-bg;
|
||||
@@ -567,27 +603,36 @@ pre code {
|
||||
|
||||
// Use Cases & Featured Projects page
|
||||
.page-uses {
|
||||
@each $usecase in "micropayments", "wallets", "exchanges", "stablecoins", "nft", "defi", "cbdc" {
|
||||
@each $usecase in "micropayments", "wallets", "exchanges", "stablecoins",
|
||||
"nft", "defi", "cbdc"
|
||||
{
|
||||
##{$usecase} {
|
||||
content: url("../img/icons/lightmode/#{$usecase}.svg");
|
||||
}
|
||||
}
|
||||
|
||||
// darkened card graphics
|
||||
@each $company,$card-graphic in (
|
||||
@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 {
|
||||
#bitpay,
|
||||
#coil,
|
||||
#forte,
|
||||
#xrplorer,
|
||||
#gatehub {
|
||||
.biz-logo {
|
||||
filter: invert(100%);
|
||||
}
|
||||
@@ -619,23 +664,21 @@ pre code {
|
||||
.landing-bg {
|
||||
opacity: 0.4;
|
||||
@include media-breakpoint-up(md) {
|
||||
opacity: 1.0;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.landing-builtin-bg {
|
||||
&::before {
|
||||
opacity: 0.4;
|
||||
@include media-breakpoint-up(md) {
|
||||
opacity: 1.0;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// feedback widget
|
||||
#feedback-content {
|
||||
.docked-widget {
|
||||
|
||||
.widget-header {
|
||||
background-color: $light-bg !important;
|
||||
color: $light-fg !important;
|
||||
@@ -672,7 +715,6 @@ pre code {
|
||||
.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;
|
||||
@@ -715,25 +757,27 @@ pre code {
|
||||
|
||||
// Placeholder text colors (search bars, etc.)
|
||||
$placeholder-color: $gray-600;
|
||||
::-webkit-input-placeholder { /* Chrome */
|
||||
::-webkit-input-placeholder {
|
||||
/* Chrome */
|
||||
color: $placeholder-color;
|
||||
}
|
||||
:-ms-input-placeholder { /* IE 10+ */
|
||||
:-ms-input-placeholder {
|
||||
/* IE 10+ */
|
||||
color: $placeholder-color;
|
||||
}
|
||||
::-moz-placeholder { /* Firefox 19+ */
|
||||
::-moz-placeholder {
|
||||
/* Firefox 19+ */
|
||||
color: $placeholder-color;
|
||||
opacity: 1;
|
||||
}
|
||||
:-moz-placeholder { /* Firefox 4 - 18 */
|
||||
:-moz-placeholder {
|
||||
/* Firefox 4 - 18 */
|
||||
color: $placeholder-color;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
// Events page
|
||||
.page-events {
|
||||
|
||||
label {
|
||||
color: $gray-900;
|
||||
}
|
||||
@@ -776,12 +820,10 @@ $placeholder-color: $gray-600;
|
||||
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;
|
||||
@@ -799,14 +841,13 @@ $placeholder-color: $gray-600;
|
||||
.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" {
|
||||
@each $benefits in "benefits-01", "benefits-02", "benefits-03",
|
||||
"benefits-04", "benefits-05", "benefits-06"
|
||||
{
|
||||
##{$benefits} {
|
||||
content: url("../img/ambassadors/lightmode/#{$benefits}.svg");
|
||||
}
|
||||
@@ -814,7 +855,9 @@ $placeholder-color: $gray-600;
|
||||
}
|
||||
|
||||
#eligibility-list {
|
||||
@each $eligibility in "eligibility-01", "eligibility-02", "eligibility-03", "eligibility-04", "eligibility-05" {
|
||||
@each $eligibility in "eligibility-01", "eligibility-02", "eligibility-03",
|
||||
"eligibility-04", "eligibility-05"
|
||||
{
|
||||
##{$eligibility} {
|
||||
content: url("../img/ambassadors/lightmode/#{$eligibility}.svg");
|
||||
}
|
||||
|
||||
@@ -127,6 +127,7 @@
|
||||
|
||||
<!-- Algolia DocSearch -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
|
||||
<meta name="docsearch:language" content="en" />
|
||||
<script type="text/javascript">
|
||||
$(document).ready(() => {
|
||||
const ds = docsearch({
|
||||
|
||||
@@ -11,16 +11,6 @@
|
||||
<h1 class="mb-18">{% trans %}What Would You Like to Learn?{% endtrans %}</h1>
|
||||
<h6 class="eyebrow mb-3">{% trans %}XRP Ledger Documentation{% endtrans %}</h6>
|
||||
</div>
|
||||
<div class="center-search search">
|
||||
<form role="search">
|
||||
<div class="form-group">
|
||||
<div class="input-group" id="centersearchboxcontainer">
|
||||
<label class="input-group-prepend" for="centersearchboxcontainer"><i class="fa fa-search input-group-text"></i><span class="sr-only">{% trans %}Search{% endtrans %}</span></label>
|
||||
<input id="centersearchboxcontainer" type="text" class="form-control searchinput" placeholder="{% trans %}Search for articles, training, and code samples...{% endtrans %}">
|
||||
</div><!--/.form-group-->
|
||||
</div>
|
||||
</form>
|
||||
</div><!--/.center-search-->
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -128,15 +118,7 @@
|
||||
{% endblock %}
|
||||
|
||||
{% block endbody %}
|
||||
<script type="text/javascript"> docsearch({
|
||||
apiKey: '3431349deec23b0bc3dcd3424beb9a6e',
|
||||
indexName: 'xrpl',
|
||||
container: '#centersearchboxcontainer',
|
||||
appId: 'R39QY3MZC7',
|
||||
algoliaOptions: { 'facetFilters': ["lang:en"] },
|
||||
debug: false
|
||||
});
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user