mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-12-03 18:15:49 +00:00
Add light theme first pass
Toggle is only temp to test. Need to move in nav for final. Will need further adjusting colors.
This commit is contained in:
Jake
@@ -3,7 +3,6 @@
|
||||
// These styles control the display of diagrams in page contents.
|
||||
|
||||
.content {
|
||||
|
||||
// Shrink images that would overflow the main column.
|
||||
img {
|
||||
max-width: 100%;
|
||||
@@ -19,6 +18,9 @@
|
||||
svg {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.dark .content {
|
||||
|
||||
// Recolor UMLet diagrams for dark theme -------------------------------------
|
||||
svg[fill="black"] {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
/* Edit on GitHub link ------------------------------------------------------ */
|
||||
.github-edit-wrap .github-edit {
|
||||
background-image: url(../vendor/github-marks/GitHub-Mark-Light-32px.png);
|
||||
background: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' 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;
|
||||
|
||||
@@ -66,7 +66,7 @@ aside .active-parent > a {
|
||||
margin-left: -1px;
|
||||
}
|
||||
|
||||
.active > .nav-link, {
|
||||
.active > .nav-link {
|
||||
border-left: 2px solid $primary;
|
||||
margin-left: -1px;
|
||||
padding-left: calc(1rem - 1px);
|
||||
|
||||
170
styles/light/_light-theme.scss
Normal file
170
styles/light/_light-theme.scss
Normal file
@@ -0,0 +1,170 @@
|
||||
$light-theme: #F9FAF8;
|
||||
body {
|
||||
background: $light-theme;
|
||||
background-color: $light-theme;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6,
|
||||
.h1, .h2, .h3, .h4, .h5, .h6 {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
// Colors
|
||||
$navbar-light-color: $dark;
|
||||
$navbar-light-hover-color: $secondary;
|
||||
$navbar-light-active-color: $primary;
|
||||
|
||||
// Nav logo.
|
||||
|
||||
.logo {
|
||||
content: url(/assets/img/XRPLedger_DevPortal-black.svg);
|
||||
}
|
||||
|
||||
// Content
|
||||
/* Site-wide header link styles --------------------------------------------- */
|
||||
h1 a,
|
||||
h2 a,
|
||||
h3 a {
|
||||
color: $dark;
|
||||
text-decoration: none;
|
||||
}
|
||||
h1 a:hover,
|
||||
h2 a:hover,
|
||||
h3 a:hover,
|
||||
.xrpl-footer h5 a:hover {
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
.curated-links a,
|
||||
.children-display a,
|
||||
a.card,
|
||||
.xrpl-footer a {
|
||||
color: $dark;
|
||||
|
||||
&:hover {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
|
||||
//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
|
||||
.breadcrumb {
|
||||
background: $light-theme;
|
||||
}
|
||||
.breadcrumb-item a {
|
||||
color: $gray-600;
|
||||
|
||||
&:hover {
|
||||
color: $primary
|
||||
}
|
||||
}
|
||||
|
||||
// Top Nav
|
||||
.top-nav {
|
||||
.navbar-nav {
|
||||
.nav-link {
|
||||
color: $black;
|
||||
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
box-shadow: inset 0 -1px 0 0 $light-theme;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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 {
|
||||
color: $black;
|
||||
}
|
||||
.page-toc .level-1 a,
|
||||
.command-list .separator {
|
||||
color: $black;
|
||||
}
|
||||
|
||||
.dactyl-tree-nav {
|
||||
nav {
|
||||
border-left: 1px solid $black;
|
||||
}
|
||||
}
|
||||
|
||||
.page-toc,
|
||||
.command-list {
|
||||
border-left: 1px solid $black;
|
||||
|
||||
.level-3 {
|
||||
border-left: 1px solid $black;
|
||||
}
|
||||
}
|
||||
|
||||
// Code / rfs
|
||||
code {
|
||||
color: $orange-500;
|
||||
}
|
||||
|
||||
// code-tabs
|
||||
.multicode {
|
||||
a {
|
||||
color: $black;
|
||||
&.current {
|
||||
color: $white;
|
||||
}
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
background-color: $gray-900;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
5
styles/light/_mixins.scss
Normal file
5
styles/light/_mixins.scss
Normal file
@@ -0,0 +1,5 @@
|
||||
@mixin prefers-color-scheme( $scheme: dark ) {
|
||||
@media (prefers-color-scheme: #{$scheme}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@@ -5,7 +5,8 @@
|
||||
},
|
||||
"scripts": {
|
||||
"build-css": "node-sass --include-path scss xrpl.scss ../assets/css/devportal2021.css --output-style compressed",
|
||||
"build-css-out": "node-sass --include-path scss xrpl.scss ../out/assets/css/devportal2021.css --output-style compressed --source-map true"
|
||||
"build-css-out": "node-sass --include-path scss xrpl.scss ../out/assets/css/devportal2021.css --output-style compressed --source-map true",
|
||||
"build-css-watch-out": "node-sass --recursive --watch --include-path scss xrpl.scss ../out/assets/css/devportal2021.css --output-style compressed --source-map true"
|
||||
},
|
||||
"dependencies": {
|
||||
"sass": "^1.26.10"
|
||||
|
||||
@@ -67,3 +67,20 @@ $line-height-base: 1.5;
|
||||
@import "_rpc-tool.scss";
|
||||
@import "_blog.scss";
|
||||
@import "_feedback.scss";
|
||||
|
||||
// Light/Dark theme settings ---------------------------------------------------
|
||||
// Option to only change theme on user system settings. No toggle.
|
||||
|
||||
//Mixin to conditionaly include other themes
|
||||
// @import "light/_mixins.scss";
|
||||
|
||||
// Default to dark theme with light being alt
|
||||
// $color-scheme-alt: light;
|
||||
|
||||
// @include prefers-color-scheme($color-scheme-alt) {
|
||||
// @import "light/_light-theme.scss";
|
||||
// }
|
||||
|
||||
html.light {
|
||||
@import "light/_light-theme.scss";
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user