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

adds more light mode styles and overrides

Browse Source
This commit is contained in:
akcodez
2023-11-06 06:31:43 -08:00
parent 3c58d03112
commit fecdb5d1ab
3 changed files with 183 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
assets/css/devportal2022-v25.css
View File

File diff suppressed because one or more lines are too long

2
styles/_contribute.scss
View File

@@ -561,9 +561,7 @@
height: 291px; height: 291px;
position: absolute; position: absolute;
width: 205px; width: 205px;
background-color: #232325;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
@media (max-width: 768px) { @media (max-width: 768px) {
width: 99%; width: 99%;
} }

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

@@ -1,8 +1,9 @@
// General color elements ------------------------------------------------------ // General color elements ------------------------------------------------------
.content { .content {
p code, p code,
table code, table code,
li > code { li>code {
background-color: $gray-200; background-color: $gray-200;
color: $gray-900; color: $gray-900;
} }
@@ -12,6 +13,7 @@ body {
background-color: $light-bg; background-color: $light-bg;
color: $light-fg; color: $light-fg;
} }
#topnav-theme .custom-theme-toggle { #topnav-theme .custom-theme-toggle {
.custom-control-label::before { .custom-control-label::before {
background-color: transparent; background-color: transparent;
@@ -35,6 +37,7 @@ h6,
&:not(.chip) { &:not(.chip) {
color: $light-fg; color: $light-fg;
} }
&.green-500 { &.green-500 {
color: $green-700; color: $green-700;
text-shadow: white 0 0 2px, white -1px -1px 2px, white 1px 1px 2px; text-shadow: white 0 0 2px, white -1px -1px 2px, white 1px 1px 2px;
@@ -44,6 +47,7 @@ h6,
.bg-grey-800 { .bg-grey-800 {
background-color: $light-standout-bg; background-color: $light-standout-bg;
} }
.grey-400 { .grey-400 {
color: $gray-600; color: $gray-600;
} }
@@ -51,12 +55,15 @@ h6,
.text-muted { .text-muted {
color: $light-fg-muted !important; color: $light-fg-muted !important;
} }
.longform { .longform {
color: $light-fg-muted; color: $light-fg-muted;
} }
.numbers { .numbers {
color: $black; color: $black;
} }
.stat-highlight, .stat-highlight,
.eyebrow { .eyebrow {
color: $gray-900; color: $gray-900;
@@ -115,88 +122,115 @@ h6,
.DocSearch-Modal { .DocSearch-Modal {
background: $white; background: $white;
} }
.DocSearch-Prefill{
.DocSearch-Prefill {
color: $blue-purple-500; color: $blue-purple-500;
} }
.DocSearch-Button { .DocSearch-Button {
background: var(--docsearch-searchbox-background); background: var(--docsearch-searchbox-background);
} }
.DocSearch-Button:hover { .DocSearch-Button:hover {
box-shadow: inset 0 0 0 2px $blue-purple-500; box-shadow: inset 0 0 0 2px $blue-purple-500;
border-radius: 40px; border-radius: 40px;
background: var(--docsearch-searchbox-background); background: var(--docsearch-searchbox-background);
.DocSearch-Button-Placeholder { .DocSearch-Button-Placeholder {
color: var(--docsearch-text-color); color: var(--docsearch-text-color);
} }
} }
.DocSearch-Search-Icon { .DocSearch-Search-Icon {
color: var(--docsearch-text-color) !important; color: var(--docsearch-text-color) !important;
} }
.DocSearch-Input{
.DocSearch-Input {
color: $gray-900; color: $gray-900;
} }
.DocSearch-Hit-Select-Icon{
.DocSearch-Hit-Select-Icon {
color: $gray-900; color: $gray-900;
} }
.DocSearch-Form { .DocSearch-Form {
box-shadow: inset 0 0 0 2px $blue-purple-500; box-shadow: inset 0 0 0 2px $blue-purple-500;
background-color: var(--docsearch-searchbox-focus-background); background-color: var(--docsearch-searchbox-focus-background);
} }
.DocSearch-Hit-source { .DocSearch-Hit-source {
color: $blue-purple-500; color: $blue-purple-500;
background: $white; background: $white;
} }
.DocSearch-Hits mark { .DocSearch-Hits mark {
color: $blue-purple-500; color: $blue-purple-500;
} }
.DocSearch-Hit-Container { .DocSearch-Hit-Container {
background: $white; background: $white;
} }
.DocSearch-Hit a { .DocSearch-Hit a {
background-color: $white; background-color: $white;
} }
.DocSearch-Hit-content-wrapper { .DocSearch-Hit-content-wrapper {
.DocSearch-Hit-title { .DocSearch-Hit-title {
color: $black !important; color: $black !important;
} }
.DocSearch-Hit-path { .DocSearch-Hit-path {
color: $black-60 !important; color: $black-60 !important;
} }
} }
.DocSearch-Logo svg{
.cls-1, .cls-2{ .DocSearch-Logo svg {
fill:var(--docsearch-logo-color);;
.cls-1,
.cls-2 {
fill: var(--docsearch-logo-color);
;
} }
} }
.DocSearch-Hit-title, .DocSearch-Hit-title,
.DocSearch-Hit-path, .DocSearch-Hit-path,
.DocSearch-Label, .DocSearch-Label,
.DocSearch-Help { .DocSearch-Help {
color: $black-60 !important; color: $black-60 !important;
} }
.DocSearch-Hit[aria-selected="true"] a { .DocSearch-Hit[aria-selected="true"] a {
background: $black-10; background: $black-10;
.DocSearch-Hit-Container { .DocSearch-Hit-Container {
background-color: $black-10; background-color: $black-10;
} }
.DocSearch-Hit-content-wrapper { .DocSearch-Hit-content-wrapper {
.DocSearch-Hit-title { .DocSearch-Hit-title {
color: $black !important; color: $black !important;
} }
.DocSearch-Hit-path { .DocSearch-Hit-path {
color: $black-60 !important; color: $black-60 !important;
} }
} }
.DocSearch-Hit-icon svg { .DocSearch-Hit-icon svg {
color: $black !important; color: $black !important;
} }
.DocSearch-Hit-action .DocSearch-Hit-action-button svg { .DocSearch-Hit-action .DocSearch-Hit-action-button svg {
color: $black !important; color: $black !important;
} }
mark { mark {
color: $blue-purple-500 !important; color: $blue-purple-500 !important;
} }
} }
.DocSearch-Footer { .DocSearch-Footer {
background: var(--docsearch-footer-background); background: var(--docsearch-footer-background);
} }
@@ -206,37 +240,40 @@ h6,
.ds-dropdown-menu [class^="ds-dataset-"] { .ds-dropdown-menu [class^="ds-dataset-"] {
background-color: $light-standout-bg; background-color: $light-standout-bg;
} }
.ds-dropdown-menu::before { .ds-dropdown-menu::before {
background-color: $light-standout-bg; background-color: $light-standout-bg;
} }
.algolia-docsearch-suggestion { .algolia-docsearch-suggestion {
background-color: $light-standout-bg; background-color: $light-standout-bg;
} }
.algolia-docsearch-suggestion--category-header { .algolia-docsearch-suggestion--category-header {
color: $black; color: $black;
border-bottom-color: $blue-purple-500; border-bottom-color: $blue-purple-500;
} }
.algolia-docsearch-suggestion--subcategory-column { .algolia-docsearch-suggestion--subcategory-column {
color: $black; color: $black;
} }
.algolia-docsearch-suggestion--title { .algolia-docsearch-suggestion--title {
color: $black; color: $black;
} }
.algolia-docsearch-suggestion--text { .algolia-docsearch-suggestion--text {
color: $light-fg-muted; color: $light-fg-muted;
} }
.algolia-docsearch-suggestion--highlight { .algolia-docsearch-suggestion--highlight {
color: $black; color: $black;
background-color: $gray-300; background-color: $gray-300;
} }
.algolia-docsearch-suggestion--category-header
.algolia-docsearch-suggestion--category-header-lvl0 .algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--category-header-lvl0 .algolia-docsearch-suggestion--highlight,
.algolia-docsearch-suggestion--highlight, .algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--category-header-lvl1 .algolia-docsearch-suggestion--highlight,
.algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--text .algolia-docsearch-suggestion--highlight {
.algolia-docsearch-suggestion--category-header-lvl1
.algolia-docsearch-suggestion--highlight,
.algolia-docsearch-suggestion--text
.algolia-docsearch-suggestion--highlight {
background-color: $gray-300; background-color: $gray-300;
} }
} }
@@ -298,6 +335,7 @@ a.card:hover,
.breadcrumb { .breadcrumb {
background: $light-bg; background: $light-bg;
} }
.breadcrumb-item a { .breadcrumb-item a {
color: $gray-600; color: $gray-600;
@@ -326,6 +364,7 @@ a.card:hover,
#top-nav-hero-docs { #top-nav-hero-docs {
content: url(../img/icons/lightmode/docs.svg); content: url(../img/icons/lightmode/docs.svg);
} }
#top-nav-hero-contribute { #top-nav-hero-contribute {
content: url(../img/icons/lightmode/contribute.svg); content: url(../img/icons/lightmode/contribute.svg);
} }
@@ -341,13 +380,15 @@ a.card:hover,
} }
.dropdown-item.dropdown-hero { .dropdown-item.dropdown-hero {
> img { >img {
background-color: $gray-050; background-color: $gray-050;
} }
p { p {
color: $gray-700; color: $gray-700;
} }
} }
.dropdown-item.active { .dropdown-item.active {
color: $light-link-hover-color; color: $light-link-hover-color;
} }
@@ -368,6 +409,7 @@ a.card:hover,
@include media-breakpoint-down(md) { @include media-breakpoint-down(md) {
.navbar-toggler { .navbar-toggler {
.navbar-toggler-icon { .navbar-toggler-icon {
&::after, &::after,
&::before, &::before,
div { div {
@@ -377,7 +419,7 @@ a.card:hover,
} }
.navbar-nav .nav-link, .navbar-nav .nav-link,
.navbar-collapse > .nav-item { .navbar-collapse>.nav-item {
background: $gray-200; background: $gray-200;
} }
} }
@@ -387,16 +429,18 @@ a.card:hover,
aside .sidenav_cat_title { aside .sidenav_cat_title {
color: $black; color: $black;
} }
.page-toc .level-1 a, .page-toc .level-1 a,
.command-list .separator { .command-list .separator {
color: $black; color: $black;
} }
aside a:hover, aside a:hover,
aside .sidenav_cat_title:hover, aside .sidenav_cat_title:hover,
aside a.active, aside a.active,
aside a.active:hover, aside a.active:hover,
aside .active > a, aside .active>a,
aside .active > a:hover { aside .active>a:hover {
color: $light-link-hover-color; color: $light-link-hover-color;
} }
@@ -409,7 +453,7 @@ aside .active > a:hover {
border-left-color: $light-link-hover-color; border-left-color: $light-link-hover-color;
} }
.active > .nav-link { .active>.nav-link {
border-left-color: $light-link-hover-color; border-left-color: $light-link-hover-color;
} }
} }
@@ -424,6 +468,7 @@ aside .active > a:hover {
} }
li a { li a {
&:hover, &:hover,
.active { .active {
border-left-color: $light-link-hover-color; border-left-color: $light-link-hover-color;
@@ -456,14 +501,17 @@ a.osano-cm-link {
background-color: $light-standout-bg; background-color: $light-standout-bg;
box-shadow: $light-box-shadow; box-shadow: $light-box-shadow;
} }
#code-samples-deck { #code-samples-deck {
.card { .card {
box-shadow: $light-box-shadow; box-shadow: $light-box-shadow;
} }
.card-header { .card-header {
border-bottom: none; border-bottom: none;
background-color: $light-standout-bg; background-color: $light-standout-bg;
} }
.card-footer { .card-footer {
background-color: $light-standout-bg; background-color: $light-standout-bg;
} }
@@ -483,16 +531,25 @@ a.osano-cm-link {
color: $light-fg; color: $light-fg;
box-shadow: $light-box-shadow; box-shadow: $light-box-shadow;
> h4 a.expander:hover { >h4 a.expander:hover {
color: $light-fg; color: $light-fg;
} }
} }
} }
.page-community { .page-community {
.com-card {
background: #FFFFFF;
}
.project-description {
color: #343437;
}
#platform-stack-overflow { #platform-stack-overflow {
content: url("../img/logos/lightmode/stack-overflow.svg"); content: url("../img/logos/lightmode/stack-overflow.svg");
} }
#platform-discord { #platform-discord {
content: url("../img/logos/lightmode/discord.svg"); content: url("../img/logos/lightmode/discord.svg");
} }
@@ -533,7 +590,7 @@ a.osano-cm-link {
.devportal-callout.注意 { .devportal-callout.注意 {
border-color: $yellow-700; border-color: $yellow-700;
> strong:first-child::before { >strong:first-child::before {
color: $yellow-700; color: $yellow-700;
} }
} }
@@ -542,7 +599,7 @@ a.osano-cm-link {
.devportal-callout.ヒント { .devportal-callout.ヒント {
border-color: $green-600; border-color: $green-600;
> strong:first-child::before { >strong:first-child::before {
color: $green-600; color: $green-600;
} }
} }
@@ -562,14 +619,17 @@ pre code {
.multicode { .multicode {
a { a {
color: $black; color: $black;
&.current { &.current {
color: $white; color: $white;
} }
&:hover { &:hover {
text-decoration: none; text-decoration: none;
background-color: $light-form-bg; background-color: $light-form-bg;
color: $white; color: $white;
} }
&:focus { &:focus {
background-color: $gray-800; background-color: $gray-800;
} }
@@ -614,6 +674,7 @@ pre code {
#benefits-list { #benefits-list {
@each $benefit in "public", "streamlined", "performance", "low-cost", @each $benefit in "public", "streamlined", "performance", "low-cost",
"community", "reliability" "community", "reliability"
{ {
##{$benefit} { ##{$benefit} {
content: url("../img/icons/lightmode/#{$benefit}.svg"); content: url("../img/icons/lightmode/#{$benefit}.svg");
@@ -633,15 +694,19 @@ pre code {
#wallet-xumm { #wallet-xumm {
content: url("../img/wallets/lightmode/xumm.svg"); content: url("../img/wallets/lightmode/xumm.svg");
} }
#wallet-bitfrost { #wallet-bitfrost {
content: url("../img/wallets/lightmode/bitfrost.png"); content: url("../img/wallets/lightmode/bitfrost.png");
} }
#wallet-towo { #wallet-towo {
content: url("../img/wallets/lightmode/towo.svg"); content: url("../img/wallets/lightmode/towo.svg");
} }
#wallet-keystone { #wallet-keystone {
content: url("../img/wallets/lightmode/keystone.svg"); content: url("../img/wallets/lightmode/keystone.svg");
} }
#wallet-dcent { #wallet-dcent {
content: url("../img/wallets/lightmode/dcent.svg"); content: url("../img/wallets/lightmode/dcent.svg");
} }
@@ -715,11 +780,12 @@ pre code {
background: #D2B2FF; background: #D2B2FF;
color: #350080; color: #350080;
} }
.section-text-title { .section-text-title {
color: #000; color: #000;
} }
@each $company,$type in (
'bitgo': 'svg', @each $company, $type in ('bitgo': 'svg',
'sologenic-nft': 'svg', 'sologenic-nft': 'svg',
'carbonland-trust': 'svg', 'carbonland-trust': 'svg',
'x-tokenize': 'svg', 'x-tokenize': 'svg',
@@ -737,8 +803,8 @@ pre code {
'xumm-wallet': 'svg', 'xumm-wallet': 'svg',
'sologenic-dex': 'svg', 'sologenic-dex': 'svg',
'Crossmark': 'png' 'Crossmark': 'png'
)
{ ) {
#use_case_companies_list { #use_case_companies_list {
##{$company} { ##{$company} {
.biz-logo { .biz-logo {
@@ -754,8 +820,7 @@ pre code {
// #coil, // #coil,
#forte, #forte,
#xrplorer, #xrplorer,
#gatehub #gatehub {
{
.biz-logo { .biz-logo {
filter: invert(100%); filter: invert(100%);
} }
@@ -765,13 +830,16 @@ pre code {
.landing-bg { .landing-bg {
opacity: 0.4; opacity: 0.4;
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
opacity: 1; opacity: 1;
} }
} }
.landing-builtin-bg { .landing-builtin-bg {
&::before { &::before {
opacity: 0.4; opacity: 0.4;
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
opacity: 1; opacity: 1;
} }
@@ -822,13 +890,16 @@ pre code {
.card:nth-child(1) .card-footer { .card:nth-child(1) .card-footer {
background-image: url(../img/cards/lightmode/4col-green.svg); background-image: url(../img/cards/lightmode/4col-green.svg);
} }
.card:nth-child(2) .card-footer { .card:nth-child(2) .card-footer {
background-image: url(../img/cards/lightmode/4col-light-blue.svg); background-image: url(../img/cards/lightmode/4col-light-blue.svg);
} }
.card:nth-child(4) .card-footer { .card:nth-child(4) .card-footer {
background-image: url(../img/cards/lightmode/4col-yellow.svg); background-image: url(../img/cards/lightmode/4col-yellow.svg);
} }
} }
#doc-types .card-deck { #doc-types .card-deck {
.card:nth-child(4) .card-footer { .card:nth-child(4) .card-footer {
background-image: url(../img/cards/lightmode/4col-light-blue-2.svg); background-image: url(../img/cards/lightmode/4col-light-blue-2.svg);
@@ -838,29 +909,54 @@ pre code {
.page-docs-index, .page-docs-index,
.page-community { .page-community {
.main-title{ #community-table table{
border: 1px solid #34343740;
}
#community-table tr{
border-bottom: 1px solid #34343740;
}
.card-description {
color: #343437 !important;
}
.card-subtitle {
color: #111112 !important;
}
.card-title {
color: #111112 !important;
}
.main-title {
color: #111112; color: #111112;
} }
.event-location{
.event-location {
color: #232325 !important; color: #232325 !important;
} }
.event-details{
.event-details {
color: #232325 !important; color: #232325 !important;
} }
.upcoming-event{
.event-name{ .upcoming-event {
.event-name {
color: #111112; color: #111112;
} }
} }
.upcoming-label{
.upcoming-label {
color: #232325 !important; color: #232325 !important;
} }
.description{
.description {
color: #232325; color: #232325;
} }
.events-text{
.events-text {
color: #111112; color: #111112;
} }
.discord-icon { .discord-icon {
content: url(../img/community/ic_Discord_light.png) content: url(../img/community/ic_Discord_light.png)
} }
@@ -876,6 +972,7 @@ pre code {
.xrpl-icon { .xrpl-icon {
content: url(../img/community/ic_XRPL_light.png); content: url(../img/community/ic_XRPL_light.png);
} }
.github-icon { .github-icon {
content: url(../img/community/ic_GitHub_light.png); content: url(../img/community/ic_GitHub_light.png);
} }
@@ -883,11 +980,13 @@ pre code {
.stackoverflow-icon { .stackoverflow-icon {
content: url(../img/community/ic_StackOverflow_light.png); content: url(../img/community/ic_StackOverflow_light.png);
} }
#run-a-network-node .card-deck { #run-a-network-node .card-deck {
.card:nth-child(4) .card-footer { .card:nth-child(4) .card-footer {
background-image: url(../img/cards/lightmode/4col-light-green.svg); background-image: url(../img/cards/lightmode/4col-light-green.svg);
} }
} }
#run-a-network-node .text-cards a { #run-a-network-node .text-cards a {
color: $black; color: $black;
} }
@@ -920,6 +1019,7 @@ pre code {
background-image: url(../img/cards/lightmode/3col-green-2.svg); background-image: url(../img/cards/lightmode/3col-green-2.svg);
} }
} }
#xrpl-protocol .card-deck { #xrpl-protocol .card-deck {
.card:nth-child(1) .card-footer { .card:nth-child(1) .card-footer {
background-image: url(../img/cards/lightmode/4col-light-blue-4.svg); background-image: url(../img/cards/lightmode/4col-light-blue-4.svg);
@@ -929,19 +1029,23 @@ pre code {
// Placeholder text colors (search bars, etc.) // Placeholder text colors (search bars, etc.)
$placeholder-color: $gray-600; $placeholder-color: $gray-600;
::-webkit-input-placeholder { ::-webkit-input-placeholder {
/* Chrome */ /* Chrome */
color: $placeholder-color; color: $placeholder-color;
} }
:-ms-input-placeholder { :-ms-input-placeholder {
/* IE 10+ */ /* IE 10+ */
color: $placeholder-color; color: $placeholder-color;
} }
::-moz-placeholder { ::-moz-placeholder {
/* Firefox 19+ */ /* Firefox 19+ */
color: $placeholder-color; color: $placeholder-color;
opacity: 1; opacity: 1;
} }
:-moz-placeholder { :-moz-placeholder {
/* Firefox 4 - 18 */ /* Firefox 4 - 18 */
color: $placeholder-color; color: $placeholder-color;
@@ -959,6 +1063,7 @@ $placeholder-color: $gray-600;
background-color: $gray-050; background-color: $gray-050;
box-shadow: 0px 5px 20px 0px $gray-300; box-shadow: 0px 5px 20px 0px $gray-300;
} }
a.event-card:hover { a.event-card:hover {
color: $black; color: $black;
} }
@@ -1010,6 +1115,7 @@ $placeholder-color: $gray-600;
.events-filter[type="checkbox"]:not(:disabled):hover::before { .events-filter[type="checkbox"]:not(:disabled):hover::before {
background-color: $gray-100; background-color: $gray-100;
} }
.events-filter[type="checkbox"]:not(:disabled):hover::after { .events-filter[type="checkbox"]:not(:disabled):hover::after {
background-color: $gray-100; background-color: $gray-100;
} }
@@ -1019,6 +1125,7 @@ $placeholder-color: $gray-600;
#benefits-list { #benefits-list {
@each $benefits in "benefits-01", "benefits-02", "benefits-03", @each $benefits in "benefits-01", "benefits-02", "benefits-03",
"benefits-04", "benefits-05", "benefits-06" "benefits-04", "benefits-05", "benefits-06"
{ {
##{$benefits} { ##{$benefits} {
content: url("../img/ambassadors/lightmode/#{$benefits}.svg"); content: url("../img/ambassadors/lightmode/#{$benefits}.svg");
@@ -1029,6 +1136,7 @@ $placeholder-color: $gray-600;
#eligibility-list { #eligibility-list {
@each $eligibility in "eligibility-01", "eligibility-02", "eligibility-03", @each $eligibility in "eligibility-01", "eligibility-02", "eligibility-03",
"eligibility-04", "eligibility-05" "eligibility-04", "eligibility-05"
{ {
##{$eligibility} { ##{$eligibility} {
content: url("../img/ambassadors/lightmode/#{$eligibility}.svg"); content: url("../img/ambassadors/lightmode/#{$eligibility}.svg");
@@ -1050,6 +1158,7 @@ $placeholder-color: $gray-600;
filter: invert(100%) brightness(0.8); filter: invert(100%) brightness(0.8);
} }
} }
.page-impact { .page-impact {
.connect-list { .connect-list {
@@ -1063,6 +1172,7 @@ $placeholder-color: $gray-600;
#map-light { #map-light {
display: block; display: block;
} }
#map-dark { #map-dark {
display: none; display: none;
} }
@@ -1079,8 +1189,8 @@ $placeholder-color: $gray-600;
} }
} }
.footer-nav{ .footer-nav {
.nav-item{ .nav-item {
text-shadow: #F5F5F7 0px 0px 2px, #F5F5F7 1px 1px 2px, #F5F5F7 2px 2px 3px, text-shadow: #F5F5F7 0px 0px 2px, #F5F5F7 1px 1px 2px, #F5F5F7 2px 2px 3px,
#F5F5F7 2px 2px 4px, #F5F5F7 2px 2px 5px, #F5F5F7 2px 2px 6px, #F5F5F7 -1px -1px 2px, #F5F5F7 2px 2px 4px, #F5F5F7 2px 2px 5px, #F5F5F7 2px 2px 6px, #F5F5F7 -1px -1px 2px,
#F5F5F7 -2px -2px 3px, #F5F5F7 -2px -2px 4px; #F5F5F7 -2px -2px 3px, #F5F5F7 -2px -2px 4px;