mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-11-05 04:15:50 +00:00
Light mode updates for 2021 theme
This commit is contained in:
mDuo13
File diff suppressed because one or more lines are too long
@@ -105,7 +105,7 @@ $danger: $magenta-500; // "warning" callout style
|
|||||||
$body-bg: $gray-900;
|
$body-bg: $gray-900;
|
||||||
$navbar-light-color: $gray-600;
|
$navbar-light-color: $gray-600;
|
||||||
$code-color: $secondary;
|
$code-color: $secondary;
|
||||||
$body-color: $white;
|
$body-color: $gray-200;
|
||||||
$headings-color: $white;
|
$headings-color: $white;
|
||||||
$text-muted: $gray-200;
|
$text-muted: $gray-200;
|
||||||
$link-hover-color: $purple;
|
$link-hover-color: $purple;
|
||||||
|
|||||||
@@ -99,25 +99,10 @@ h6, .h6 {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
p {
|
p {
|
||||||
color: $gray-200;
|
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
// a {
|
|
||||||
// color: inherit;
|
|
||||||
// &:hover {
|
|
||||||
// text-decoration: none;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// p a {
|
|
||||||
// color: $blue-purple-400;
|
|
||||||
// &:hover {
|
|
||||||
// color: $blue-purple-400;
|
|
||||||
// text-decoration: none;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
.fs-base {
|
.fs-base {
|
||||||
font-size: $base-size;
|
font-size: $base-size;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -14,10 +14,7 @@
|
|||||||
|
|
||||||
.logo {
|
.logo {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
}
|
content: url(../img/XRPLedger_DevPortal-white.svg);
|
||||||
|
|
||||||
.logo {
|
|
||||||
content: url(/assets/img/XRPLedger_DevPortal-white.svg);
|
|
||||||
width: 177px;
|
width: 177px;
|
||||||
height: 44px;
|
height: 44px;
|
||||||
display: block;
|
display: block;
|
||||||
@@ -596,6 +593,28 @@ a {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Theme toggler
|
||||||
|
.custom-theme-toggle {
|
||||||
|
.custom-control-label {
|
||||||
|
}
|
||||||
|
.custom-control-label::before {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.custom-control-label::after {
|
||||||
|
position: static;
|
||||||
|
content: "\f186"; // moon
|
||||||
|
font-family: FontAwesome;
|
||||||
|
color: $blue-purple-200;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
html.light .custom-theme-toggle {
|
||||||
|
.custom-control-label::after {
|
||||||
|
content: "\f185"; // sun
|
||||||
|
color: $yellow-700;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Fix dropdown box-shadows on mobile (language selector's shadow overlaps the
|
// Fix dropdown box-shadows on mobile (language selector's shadow overlaps the
|
||||||
// rest of the menu, so it's offset more with a negative spread)
|
// rest of the menu, so it's offset more with a negative spread)
|
||||||
@include media-breakpoint-down(md) {
|
@include media-breakpoint-down(md) {
|
||||||
|
|||||||
@@ -1,13 +1,22 @@
|
|||||||
$light-theme: #F9FAF8;
|
$light-bg: $gray-100;
|
||||||
|
$light-fg: $black;
|
||||||
|
$light-primary-text: $blue-purple-400;
|
||||||
|
$light-box-shadow: 0px 5px 20px 0px $gray-400;
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background: $light-theme;
|
background: $light-bg;
|
||||||
background-color: $light-theme;
|
background-color: $light-bg;
|
||||||
color: #000;
|
color: $light-fg;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1, h2, h3, h4, h5, h6,
|
h1, h2, h3, h4, h5, h6,
|
||||||
.h1, .h2, .h3, .h4, .h5, .h6 {
|
.h1, .h2, .h3, .h4, .h5, .h6 {
|
||||||
color: #000;
|
&:not(.chip) {
|
||||||
|
color: $light-fg;
|
||||||
|
}
|
||||||
|
&.green-500 {
|
||||||
|
color: $green-700;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Colors
|
// Colors
|
||||||
@@ -16,32 +25,69 @@ $navbar-light-hover-color: $secondary;
|
|||||||
$navbar-light-active-color: $primary;
|
$navbar-light-active-color: $primary;
|
||||||
|
|
||||||
|
|
||||||
// Content
|
.search, .input-group {
|
||||||
/* Site-wide header link styles --------------------------------------------- */
|
.input-group-text {
|
||||||
h1 a,
|
background-color: $gray-200;
|
||||||
h2 a,
|
color: $gray-800;
|
||||||
h3 a {
|
}
|
||||||
color: $dark;
|
|
||||||
text-decoration: none;
|
.form-control {
|
||||||
}
|
border-color: $gray-300;
|
||||||
h1 a:hover,
|
}
|
||||||
h2 a:hover,
|
|
||||||
h3 a:hover,
|
label .input-group-text,
|
||||||
.xrpl-footer h5 a:hover {
|
.form-control {
|
||||||
color: $primary;
|
color: $light-fg;
|
||||||
|
background-color: $gray-300;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ds-input {
|
||||||
|
color: $light-fg;
|
||||||
|
background-color: $gray-300;
|
||||||
|
border-color: $gray-300;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
border-color: $blue-purple-400;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.curated-links a,
|
.bg-grey-800 {
|
||||||
.children-display a,
|
background-color: $white;
|
||||||
a.card,
|
}
|
||||||
.xrpl-footer a {
|
|
||||||
color: $dark;
|
// Content
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: $light-fg;
|
||||||
|
|
||||||
|
&.btn-primary {
|
||||||
|
// undo this for buttons
|
||||||
|
color: $white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.longform {
|
||||||
|
color: $gray-900;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav a {
|
||||||
|
color: $light-fg;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: $primary;
|
color: $light-primary-text;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.container-new .col-new-card {
|
||||||
|
box-shadow: $light-box-shadow;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
background-color: $white;
|
||||||
|
box-shadow: $light-box-shadow;
|
||||||
|
}
|
||||||
|
|
||||||
// Buttons
|
// Buttons
|
||||||
.btn-outline-secondary,
|
.btn-outline-secondary,
|
||||||
.content a.button,
|
.content a.button,
|
||||||
@@ -56,31 +102,9 @@ a.card,
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
//most will be set further down the line.
|
|
||||||
.btn {
|
|
||||||
color: $black;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* (Jump to) "Top" button */
|
|
||||||
.jump-to-top {
|
|
||||||
color: $black;
|
|
||||||
background-color: transparent;
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
content: " ↑"
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: $black;
|
|
||||||
background-color: #00f26f;
|
|
||||||
border-color: #00e56a;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Breadcrumbs
|
// Breadcrumbs
|
||||||
.breadcrumb {
|
.breadcrumb {
|
||||||
background: $light-theme;
|
background: $light-bg;
|
||||||
}
|
}
|
||||||
.breadcrumb-item a {
|
.breadcrumb-item a {
|
||||||
color: $gray-600;
|
color: $gray-600;
|
||||||
@@ -92,42 +116,62 @@ a.card,
|
|||||||
|
|
||||||
// Top Nav
|
// Top Nav
|
||||||
.top-nav {
|
.top-nav {
|
||||||
|
background: $light-bg;
|
||||||
|
|
||||||
// Logo
|
#topnav-pages .nav-link {
|
||||||
|
color: $light-fg;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Logo
|
||||||
.navbar-brand {
|
.navbar-brand {
|
||||||
.logo {
|
.logo {
|
||||||
content: url(/assets/img/XRPLedger_DevPortal-black.svg);
|
content: url(../img/XRPLedger_DevPortal-black.svg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
//
|
||||||
|
// .navbar-nav {
|
||||||
|
// .nav-link {
|
||||||
|
// color: $black;
|
||||||
|
//
|
||||||
|
// &:hover {
|
||||||
|
// background-color: transparent;
|
||||||
|
// box-shadow: inset 0 -1px 0 0 $light-bg;
|
||||||
|
// text-decoration: none;
|
||||||
|
// }
|
||||||
|
//
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
.navbar-nav {
|
.dropdown-menu {
|
||||||
.nav-link {
|
background-color: $white;
|
||||||
color: $black;
|
border-color: $white;
|
||||||
|
box-shadow: $light-box-shadow;
|
||||||
|
|
||||||
&:hover {
|
.dropdown-item.dropdown-hero {
|
||||||
background-color: transparent;
|
> img {
|
||||||
box-shadow: inset 0 -1px 0 0 $light-theme;
|
background-color: $gray-200;
|
||||||
text-decoration: none;
|
|
||||||
}
|
}
|
||||||
|
p {
|
||||||
|
color: $gray-700;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.dropdown-item.active {
|
||||||
|
color: $light-primary-text;
|
||||||
|
}
|
||||||
|
|
||||||
|
h5 {
|
||||||
|
color: $gray-600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-for-popular-pages,
|
||||||
|
.col-for-人気ページ,
|
||||||
|
.col-for-questions,
|
||||||
|
.col-for-質問 {
|
||||||
|
background-color: $gray-200;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.github-edit-wrap .github-edit.nav-link {
|
|
||||||
background: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") no-repeat;
|
|
||||||
background-size: 24px 24px;
|
|
||||||
background-position: left 12px center;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
padding-left: 48px;
|
|
||||||
text-decoration: none;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
// side Nav
|
|
||||||
aside li a {
|
|
||||||
color: $black;
|
|
||||||
}
|
|
||||||
aside .sidenav_cat_title {
|
aside .sidenav_cat_title {
|
||||||
color: $black;
|
color: $black;
|
||||||
}
|
}
|
||||||
@@ -153,7 +197,7 @@ aside .sidenav_cat_title {
|
|||||||
|
|
||||||
// Code / rfs
|
// Code / rfs
|
||||||
code {
|
code {
|
||||||
color: $orange-500;
|
color: $light-fg;
|
||||||
}
|
}
|
||||||
|
|
||||||
// code-tabs
|
// code-tabs
|
||||||
@@ -169,5 +213,72 @@ code {
|
|||||||
color: $white;
|
color: $white;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.code_toggler {
|
||||||
|
background-color: $gray-800;
|
||||||
|
color: $gray-100;
|
||||||
|
border-color: $gray-100;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.pg-category {
|
||||||
|
color: $gray-600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.landing {
|
||||||
|
.nav .nav-link {
|
||||||
|
color: $gray-900;
|
||||||
|
border-bottom-color: $gray-300;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circled-logo {
|
||||||
|
background-color: $gray-300;
|
||||||
|
|
||||||
|
img[src="assets/img/logos/globe.svg"] {
|
||||||
|
filter: invert(100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Callouts
|
||||||
|
.devportal-callout.caution, .devportal-callout.注意 {
|
||||||
|
border-color: $yellow-700;
|
||||||
|
|
||||||
|
> strong:first-child::before {
|
||||||
|
color: $yellow-700;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// feedback widget
|
||||||
|
#feedback-content {
|
||||||
|
.docked-widget {
|
||||||
|
|
||||||
|
.widget-header {
|
||||||
|
background-color: $light-bg !important;
|
||||||
|
color: $light-fg !important;
|
||||||
|
}
|
||||||
|
.widget-header-icon {
|
||||||
|
filter: invert(100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// 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;
|
||||||
|
}
|
||||||
|
|||||||
@@ -9,9 +9,9 @@ $nav-link-padding-y: 1rem;
|
|||||||
$navbar-brand-padding-y: 1.25rem;
|
$navbar-brand-padding-y: 1.25rem;
|
||||||
$navbar-nav-link-padding-x: $nav-link-padding-x;
|
$navbar-nav-link-padding-x: $nav-link-padding-x;
|
||||||
$navbar-nav-link-padding-y: $nav-link-padding-y;
|
$navbar-nav-link-padding-y: $nav-link-padding-y;
|
||||||
$border-radius: 0;
|
|
||||||
$border-radius-lg: 8px;
|
$border-radius-lg: 8px;
|
||||||
$border-radius-sm: 4px;
|
$border-radius-sm: 4px;
|
||||||
|
$border-radius: $border-radius-sm;
|
||||||
$dropdown-border-width: 1px;
|
$dropdown-border-width: 1px;
|
||||||
$enable-shadows: true;
|
$enable-shadows: true;
|
||||||
$dropdown-box-shadow: 0px 5px 40px $black;
|
$dropdown-box-shadow: 0px 5px 40px $black;
|
||||||
|
|||||||
@@ -83,13 +83,6 @@
|
|||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body class="xrp-ledger-dev-portal {% if currentpage.sidebar is undefined or currentpage.sidebar != "disabled" %}sidebar-primary {% endif %}lang-{{target.lang}} {% block bodyclasses %}{% endblock %}" data-spy="scroll" data-target=".page-toc" data-offset="0">
|
<body class="xrp-ledger-dev-portal {% if currentpage.sidebar is undefined or currentpage.sidebar != "disabled" %}sidebar-primary {% endif %}lang-{{target.lang}} {% block bodyclasses %}{% endblock %}" data-spy="scroll" data-target=".page-toc" data-offset="0">
|
||||||
<form class="form-inline">
|
|
||||||
<div class="custom-control custom-switch" title="" data-toggle="tooltip" data-placement="left" data-original-title="Toggle Dark Mode">
|
|
||||||
<input type="checkbox" class="custom-control-input" id="css-toggle-btn">
|
|
||||||
<label class="custom-control-label" for="css-toggle-btn"></label>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<!-- Google Tag Manager (noscript) -->
|
<!-- Google Tag Manager (noscript) -->
|
||||||
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KCQZ3L8"
|
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KCQZ3L8"
|
||||||
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
|
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<nav class="top-nav navbar navbar-expand-lg navbar-dark fixed-top">
|
<nav class="top-nav navbar navbar-expand-lg navbar-dark fixed-top">
|
||||||
<a href="{% if target.prefix %}{{target.prefix}}{% else %}/{% endif %}" class="navbar-brand"><img src="{{currentpage.prefix}}assets/img/XRPLedger_DevPortal-white.svg" class="logo" height="40" alt="{{target.display_name}}" /></a>
|
<a href="{% if target.prefix %}{{target.prefix}}{% else %}/{% endif %}" class="navbar-brand"><img class="logo" height="40" alt="{{target.display_name}}" /></a>
|
||||||
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#top-main-nav" aria-controls="navbarHolder" aria-expanded="false" aria-label="Toggle navigation">
|
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#top-main-nav" aria-controls="navbarHolder" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
<span class="navbar-toggler-icon"><div></div></span>
|
<span class="navbar-toggler-icon"><div></div></span>
|
||||||
</button>
|
</button>
|
||||||
@@ -89,5 +89,14 @@
|
|||||||
</div><!--/.dropdown-->
|
</div><!--/.dropdown-->
|
||||||
</div><!--/.language-selector-->
|
</div><!--/.language-selector-->
|
||||||
#}-->
|
#}-->
|
||||||
|
|
||||||
|
<div class="nav-item" id="topnav-theme">
|
||||||
|
<form class="form-inline">
|
||||||
|
<div class="custom-control custom-theme-toggle" title="" data-toggle="tooltip" data-placement="left" data-original-title="Toggle Dark Mode">
|
||||||
|
<input type="checkbox" class="custom-control-input" id="css-toggle-btn">
|
||||||
|
<label class="custom-control-label" for="css-toggle-btn"></label>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div><!--/#topnav-theme-->
|
||||||
</div><!--/#top-main-nav-->
|
</div><!--/#top-main-nav-->
|
||||||
</nav>
|
</nav>
|
||||||
|
|||||||
Reference in New Issue
Block a user