ARCHIVE/xrpl-dev-portal
1
0
Fork 0
mirror of https://github.com/XRPLF/xrpl-dev-portal.git synced 2025-11-19 19:25:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

Light mode: chips, off-white cards

Browse Source
This commit is contained in:
mDuo13
2021-08-20 17:17:13 -07:00
parent 35f61c5842
commit 27409bb5f3
4 changed files with 127 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
assets/css/devportal2021.css
View File

File diff suppressed because one or more lines are too long

3
styles/_colors.scss
View File

@@ -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;

119
styles/_status-labels.scss
View File

@@ -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,

10
styles/light/_light-theme.scss
View File

@@ -5,7 +5,7 @@ $light-fg-disabled: $gray-400;
$light-form-bg: $gray-200;
$light-box-shadow: 0px 5px 20px 0px $gray-400;
$light-link-hover-color: $blue-purple-500;
$light-standout-bg: $white;
$light-standout-bg: $gray-050;
// General color elements ------------------------------------------------------
@@ -50,7 +50,7 @@ h1, h2, h3, h4, h5, h6,
}
.stat-highlight,
.eyebrow {
color: $green-900;
color: $gray-900;
}
.invertible-img {
@@ -225,7 +225,7 @@ a, nav a {
.dropdown-item.dropdown-hero {
> img {
background-color: $white;
background-color: $gray-050;
}
p {
color: $gray-700;
@@ -243,7 +243,7 @@ a, nav a {
.col-for-人気ページ,
.col-for-questions,
.col-for-質問 {
background-color: $white;
background-color: $gray-050;
}
}
@@ -422,7 +422,7 @@ code {
// Code blocks
pre code {
color: $white;
color: $gray-050;
}
// Code tabs