From 2d8696a2e397aab56dc54a2da1caaf6aba885e53 Mon Sep 17 00:00:00 2001 From: Sean Yesmunt Date: Fri, 28 Jun 2019 18:21:21 -0400 Subject: [PATCH 1/3] pauls dark mode commit --- src/ui/scss/component/_badge.scss | 2 +- src/ui/scss/component/_card.scss | 4 +- src/ui/scss/component/_claim-list.scss | 22 +++++++- src/ui/scss/component/_expandable.scss | 8 +-- src/ui/scss/component/_file-properties.scss | 2 +- src/ui/scss/component/_file-render.scss | 4 +- src/ui/scss/component/_form-field.scss | 4 +- src/ui/scss/component/_header.scss | 12 ++--- src/ui/scss/component/_item-list.scss | 4 +- src/ui/scss/component/_main.scss | 2 +- src/ui/scss/component/_markdown-editor.scss | 6 +-- src/ui/scss/component/_markdown-preview.scss | 8 --- src/ui/scss/component/_media.scss | 10 ++-- src/ui/scss/component/_modal.scss | 6 +-- src/ui/scss/component/_navigation.scss | 6 +-- src/ui/scss/component/_spinner.scss | 4 ++ src/ui/scss/component/_tags.scss | 2 +- src/ui/scss/component/_wunderbar.scss | 10 ++-- src/ui/scss/init/_gui.scss | 53 +++++++++++++++++--- src/ui/scss/init/_mixins.scss | 4 ++ static/locales/en.json | 2 +- 21 files changed, 115 insertions(+), 60 deletions(-) diff --git a/src/ui/scss/component/_badge.scss b/src/ui/scss/component/_badge.scss index 874ee2822..9c00dc082 100644 --- a/src/ui/scss/component/_badge.scss +++ b/src/ui/scss/component/_badge.scss @@ -9,7 +9,7 @@ } [data-mode='dark'] & { - color: lighten($lbry-teal-5, 60%); + color: #ddd; background-color: rgba($lbry-teal-5, 0.3); } } diff --git a/src/ui/scss/component/_card.scss b/src/ui/scss/component/_card.scss index e22e168d9..93ac1f190 100644 --- a/src/ui/scss/component/_card.scss +++ b/src/ui/scss/component/_card.scss @@ -7,8 +7,8 @@ overflow: hidden; font-size: 1.25rem; - html[data-mode='dark'] & { - background-color: lighten($lbry-black, 5%); + [data-mode='dark'] & { + background-color: #353434; box-shadow: var(--card-box-shadow) darken($lbry-gray-1, 80%); } } diff --git a/src/ui/scss/component/_claim-list.scss b/src/ui/scss/component/_claim-list.scss index 67fd90b6a..1789927a8 100644 --- a/src/ui/scss/component/_claim-list.scss +++ b/src/ui/scss/component/_claim-list.scss @@ -30,6 +30,10 @@ checkbox-element input[type='checkbox']:checked + label { color: $lbry-white; } + + [data-mode='dark'] & { + color: #ddd; + } } .claim-list__header--small { @@ -51,6 +55,10 @@ border: 1px solid $lbry-white; color: $lbry-white; background-color: lighten($lbry-black, 10%); + + [data-mode='dark'] & { + color: #ddd; + } } .claim-list__header, @@ -58,7 +66,7 @@ background-color: lighten($lbry-black, 10%); [data-mode='dark'] & { - background-color: darken($lbry-black, 10%); + background-color: #252424; } } @@ -85,7 +93,7 @@ background-color: darken($lbry-white, 5%); [data-mode='dark'] & { - background-color: lighten($lbry-black, 10%); + background-color: #555254; } } @@ -94,11 +102,21 @@ flex-shrink: 0; margin-right: var(--spacing-medium); } + + ul & { + &:first-of-type { + border-top: none; + } + } } .claim-preview--injected, .claim-preview { border-bottom: 1px solid rgba($lbry-teal-5, 0.1); + + [data-mode='dark'] & { + border-bottom: 1px solid #555254; + } } .claim-preview--large { diff --git a/src/ui/scss/component/_expandable.scss b/src/ui/scss/component/_expandable.scss index ab82b45e2..d788870f7 100644 --- a/src/ui/scss/component/_expandable.scss +++ b/src/ui/scss/component/_expandable.scss @@ -3,8 +3,8 @@ margin-bottom: var(--spacing-medium); padding-bottom: var(--spacing-medium); - html[data-mode='dark'] & { - border-color: rgba($lbry-gray-5, 0.2); + [data-mode='dark'] & { + border-color: #555254; } } @@ -33,8 +33,8 @@ content: ''; position: absolute; - html[data-mode='dark'] & { - background-image: linear-gradient(to bottom, transparent 0%, $lbry-black 90%); + [data-mode='dark'] & { + background-image: linear-gradient(to bottom, transparent 0%, #1e1e1e 90%); } } } diff --git a/src/ui/scss/component/_file-properties.scss b/src/ui/scss/component/_file-properties.scss index 17ed0c04a..791c19b80 100644 --- a/src/ui/scss/component/_file-properties.scss +++ b/src/ui/scss/component/_file-properties.scss @@ -6,7 +6,7 @@ .icon { stroke: rgba($lbry-black, 0.5); - html[data-mode='dark'] & { + [data-mode='dark'] & { stroke: rgba($lbry-white, 0.7); } } diff --git a/src/ui/scss/component/_file-render.scss b/src/ui/scss/component/_file-render.scss index dda85388b..6e4da3c8e 100644 --- a/src/ui/scss/component/_file-render.scss +++ b/src/ui/scss/component/_file-render.scss @@ -7,7 +7,7 @@ overflow: hidden; position: absolute; - html[data-mode='dark'] & { + [data-mode='dark'] & { border: 1px solid rgba($lbry-gray-1, 0.3); } } @@ -16,7 +16,7 @@ .document-viewer { background-color: $lbry-white; - html[data-mode='dark'] & { + [data-mode='dark'] & { background-color: transparent; } } diff --git a/src/ui/scss/component/_form-field.scss b/src/ui/scss/component/_form-field.scss index 2ce6642de..23ce502fc 100644 --- a/src/ui/scss/component/_form-field.scss +++ b/src/ui/scss/component/_form-field.scss @@ -255,7 +255,7 @@ fieldset-section { input:not(:focus):not(.form-field--copyable), textarea:not(:focus), select:not(:focus) { - border-color: $lbry-gray-4; + border-color: #555254; } } } @@ -270,7 +270,7 @@ fieldset-section { user-select: text; cursor: default; - html[data-mode='dark'] & { + [data-mode='dark'] & { background-color: rgba($lbry-white, 0.3); border-color: $lbry-gray-5; color: inherit; diff --git a/src/ui/scss/component/_header.scss b/src/ui/scss/component/_header.scss index f2fcadc5a..cb759b94b 100644 --- a/src/ui/scss/component/_header.scss +++ b/src/ui/scss/component/_header.scss @@ -9,9 +9,9 @@ padding-left: var(--spacing-large); padding-right: var(--spacing-large); - html[data-mode='dark'] & { - background-color: mix($lbry-black, $lbry-gray-3, 90%); - color: $lbry-white; + [data-mode='dark'] & { + background-color: #353434; + color: #ddd; border-bottom: none; box-shadow: var(--card-box-shadow) $lbry-black; } @@ -71,14 +71,14 @@ content: ''; position: absolute; - html[data-mode='dark'] & { + [data-mode='dark'] & { background-color: $lbry-teal-3; } } } // TODO: dark - html[data-mode='dark'] & { + [data-mode='dark'] & { &:hover { color: $lbry-teal-3; @@ -88,7 +88,7 @@ } svg { - stroke: $lbry-white; + stroke: #ddd; } } } diff --git a/src/ui/scss/component/_item-list.scss b/src/ui/scss/component/_item-list.scss index 32eb24e35..dd2f6e73d 100644 --- a/src/ui/scss/component/_item-list.scss +++ b/src/ui/scss/component/_item-list.scss @@ -3,7 +3,7 @@ margin-bottom: var(--spacing-large); padding: var(--spacing-large); - html[data-mode='dark'] & { + [data-mode='dark'] & { background-color: rgba($lbry-white, 0.1); } @@ -37,7 +37,7 @@ .item-list__row--selected { background-color: rgba($lbry-black, 0.1); - html[data-mode='dark'] & { + [data-mode='dark'] & { background-color: rgba($lbry-black, 0.5); } } diff --git a/src/ui/scss/component/_main.scss b/src/ui/scss/component/_main.scss index 1d8e42b65..86ccf7d8a 100644 --- a/src/ui/scss/component/_main.scss +++ b/src/ui/scss/component/_main.scss @@ -9,7 +9,7 @@ display: flex; [data-mode='dark'] & { - background-color: $lbry-black; + background-color: #1e1e1e; } } diff --git a/src/ui/scss/component/_markdown-editor.scss b/src/ui/scss/component/_markdown-editor.scss index a215394b3..690cc1ff5 100644 --- a/src/ui/scss/component/_markdown-editor.scss +++ b/src/ui/scss/component/_markdown-editor.scss @@ -22,7 +22,7 @@ text-decoration-style: dotted; } - html[data-mode='dark'] & { + [data-mode='dark'] & { border-left: 1px solid rgba($lbry-white, 0.2); border-right: 1px solid rgba($lbry-white, 0.2); border-bottom: 1px solid rgba($lbry-white, 0.2); @@ -93,7 +93,7 @@ border: none; } - html[data-mode='dark'] & { + [data-mode='dark'] & { background-color: rgba($lbry-white, 0.2); button { @@ -126,7 +126,7 @@ font-size: 1rem; padding: var(--spacing-medium) 0; // overriding styles from elsewhere - html[data-mode='dark'] & { + [data-mode='dark'] & { color: inherit; } } diff --git a/src/ui/scss/component/_markdown-preview.scss b/src/ui/scss/component/_markdown-preview.scss index e898e5ae7..ebc1119ee 100644 --- a/src/ui/scss/component/_markdown-preview.scss +++ b/src/ui/scss/component/_markdown-preview.scss @@ -57,17 +57,9 @@ // Horizontal Rule hr { - width: 100%; - height: 1px; - - background-color: $lbry-gray-1; margin-bottom: 2rem; position: relative; top: 1rem; - - html[data-mode='dark'] & { - background-color: rgba($lbry-gray-5, 0.2); - } } // Code diff --git a/src/ui/scss/component/_media.scss b/src/ui/scss/component/_media.scss index 48c85fc26..c79bed5e0 100644 --- a/src/ui/scss/component/_media.scss +++ b/src/ui/scss/component/_media.scss @@ -34,8 +34,8 @@ background-repeat: no-repeat; background-size: cover; - html[data-mode='dark'] & { - background-color: rgba($lbry-white, 0.1); + [data-mode='dark'] & { + background-color: #555254; } } } @@ -173,7 +173,7 @@ .media__info { word-wrap: break-word; - html[data-mode='dark'] & { + [data-mode='dark'] & { border-color: rgba($lbry-gray-5, 0.2); } } @@ -182,7 +182,7 @@ border-top: 1px solid $lbry-gray-1; margin-top: var(--spacing-medium); - html[data-mode='dark'] & { + [data-mode='dark'] & { border-color: rgba($lbry-gray-5, 0.2); } } @@ -231,7 +231,7 @@ .media__text { font-size: 2.5rem; - html[data-mode='dark'] & { + [data-mode='dark'] & { color: $lbry-white; } } diff --git a/src/ui/scss/component/_modal.scss b/src/ui/scss/component/_modal.scss index 41b0b772d..a6dbc31e3 100644 --- a/src/ui/scss/component/_modal.scss +++ b/src/ui/scss/component/_modal.scss @@ -11,7 +11,7 @@ position: fixed; z-index: 9999; - html[data-mode='dark'] & { + [data-mode='dark'] & { background-color: rgba($lbry-black, 0.7); } } @@ -29,7 +29,7 @@ min-width: 500px; } - html[data-mode='dark'] & { + [data-mode='dark'] & { background-color: $lbry-black; border-color: $lbry-gray-5; } @@ -41,7 +41,7 @@ .button.button--alt { background-color: $lbry-white; // Set modal buttons bg color - html[data-mode='dark'] & { + [data-mode='dark'] & { background-color: transparent; } } diff --git a/src/ui/scss/component/_navigation.scss b/src/ui/scss/component/_navigation.scss index e098bf8ff..3981cd687 100644 --- a/src/ui/scss/component/_navigation.scss +++ b/src/ui/scss/component/_navigation.scss @@ -55,9 +55,9 @@ } [data-mode='dark'] & { - color: $lbry-gray-1; + color: #ddd; svg { - color: $lbry-gray-1; + color: #ddd; } &:hover, @@ -111,7 +111,7 @@ &::before { background-color: $lbry-black; - html[data-mode='dark'] & { + [data-mode='dark'] & { color: $lbry-gray-1; } } diff --git a/src/ui/scss/component/_spinner.scss b/src/ui/scss/component/_spinner.scss index 38c2405d8..9b63c3c59 100644 --- a/src/ui/scss/component/_spinner.scss +++ b/src/ui/scss/component/_spinner.scss @@ -41,6 +41,10 @@ .spinner--light { .rect { background-color: $lbry-white; + + [data-mode='dark'] & { + background-color: #ddd; + } } } diff --git a/src/ui/scss/component/_tags.scss b/src/ui/scss/component/_tags.scss index fccd36b4d..17db46b35 100644 --- a/src/ui/scss/component/_tags.scss +++ b/src/ui/scss/component/_tags.scss @@ -74,7 +74,7 @@ $main: $lbry-teal-5; padding-left: 0.5rem; padding-top: 0.7rem; - html[data-mode='dark'] & { + [data-mode='dark'] & { border-color: rgba($lbry-white, 0.1); } } diff --git a/src/ui/scss/component/_wunderbar.scss b/src/ui/scss/component/_wunderbar.scss index f58e10173..58045012c 100644 --- a/src/ui/scss/component/_wunderbar.scss +++ b/src/ui/scss/component/_wunderbar.scss @@ -26,7 +26,7 @@ background-color: $lbry-blue-2; color: $lbry-black; - html[data-mode='dark'] & { + [data-mode='dark'] & { background-color: $lbry-blue-4; color: inherit; } @@ -57,12 +57,12 @@ opacity: 0.9; } - html[data-mode='dark'] & { + [data-mode='dark'] & { + background-color: #6a6a6a; color: $lbry-white; - background-color: darken($lbry-gray-5, 20%); &::placeholder { - color: $lbry-gray-1; + color: #90908f; } } } @@ -73,7 +73,7 @@ min-width: 100%; overflow: hidden; - html[data-mode='dark'] & { + [data-mode='dark'] & { background-color: $lbry-gray-5; color: $lbry-white; } diff --git a/src/ui/scss/init/_gui.scss b/src/ui/scss/init/_gui.scss index 8661e2bbb..505e99795 100644 --- a/src/ui/scss/init/_gui.scss +++ b/src/ui/scss/init/_gui.scss @@ -7,6 +7,10 @@ html { font-size: 12px; height: 100%; overflow-x: hidden; + + &[data-mode='dark'] { + background-color: #1e1e1e; + } } body { @@ -19,9 +23,9 @@ body { overflow: hidden; background-color: mix($lbry-white, $lbry-gray-1, 70%); - html[data-mode='dark'] & { - background-color: $lbry-black; - color: mix($lbry-white, $lbry-gray-3, 50%); + [data-mode='dark'] & { + background-color: #1e1e1e; + color: #ddd; } } @@ -44,6 +48,16 @@ code { font-size: 1.5rem; } +hr { + width: 100%; + height: 1px; + background-color: $lbry-gray-1; + + [data-mode='dark'] & { + background-color: #555254; + } +} + .columns { display: flex; justify-content: space-between; @@ -111,7 +125,7 @@ code { color: $lbry-red-3; font-weight: 600; - html[data-mode='dark'] & { + [data-mode='dark'] & { color: $lbry-red-1; } } @@ -132,7 +146,8 @@ code { margin-bottom: var(--spacing-medium); border-radius: 5px; - html[data-mode='dark'] & { + [data-mode='dark'] & { + background-color: #2e2d2e; color: inherit; } } @@ -156,7 +171,7 @@ code { color: $altered-hover-color; } - html[data-mode='dark'] & { + [data-mode='dark'] & { color: $altered-color; border-bottom: 1px solid $altered-color; @@ -167,7 +182,7 @@ code { } } - html[data-mode='dark'] & { + [data-mode='dark'] & { background-color: $lbry-yellow-3; color: $lbry-black; } @@ -177,7 +192,7 @@ code { color: $lbry-gray-5; font-style: italic; - html[data-mode='dark'] & { + [data-mode='dark'] & { color: inherit; } } @@ -212,3 +227,25 @@ code { background-repeat: no-repeat; background-size: cover; } + +fieldset, +.fieldset { + [data-mode='dark'] & { + border-top-color: #555254; + } +} + +legend { + [data-mode='dark'] & { + border-color: transparent; + } +} + +checkbox-toggle, +.checkbox-toggle, +radio-toggle, +.radio-toggle { + [data-mode='dark'] & { + border-color: #555254; + } +} diff --git a/src/ui/scss/init/_mixins.scss b/src/ui/scss/init/_mixins.scss index b4d4f339a..bcaf2be8e 100644 --- a/src/ui/scss/init/_mixins.scss +++ b/src/ui/scss/init/_mixins.scss @@ -2,6 +2,10 @@ animation: pulse 2s infinite ease-in-out; background-color: $lbry-gray-1; border-radius: var(--card-radius); + + [data-mode='dark'] & { + background-color: #555254; + } } @mixin mediaThumbHoverZoom { diff --git a/static/locales/en.json b/static/locales/en.json index 95d6cdd28..95f23dcce 100644 --- a/static/locales/en.json +++ b/static/locales/en.json @@ -462,4 +462,4 @@ "Path copied.": "Path copied.", "Open Folder": "Open Folder", "Create Backup": "Create Backup" -} \ No newline at end of file +} -- 2.45.3 From e20c8e6b953d3fdb7f08b5929848cb4f021d0fed Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?netop=3A//=E3=82=A6=E3=82=A8=E3=83=8F?= Date: Mon, 1 Jul 2019 13:42:32 -0500 Subject: [PATCH 2/3] Replaced raw values with variables --- src/ui/scss/component/_badge.scss | 2 +- src/ui/scss/component/_card.scss | 2 +- src/ui/scss/component/_claim-list.scss | 10 +++++----- src/ui/scss/component/_expandable.scss | 4 ++-- src/ui/scss/component/_form-field.scss | 2 +- src/ui/scss/component/_header.scss | 6 +++--- src/ui/scss/component/_main.scss | 2 +- src/ui/scss/component/_media.scss | 2 +- src/ui/scss/component/_navigation.scss | 6 ++++-- src/ui/scss/component/_spinner.scss | 2 +- src/ui/scss/component/_wunderbar.scss | 4 ++-- src/ui/scss/init/_gui.scss | 14 +++++++------- src/ui/scss/init/_mixins.scss | 2 +- src/ui/scss/init/_vars.scss | 10 ++++++++++ static/locales/en.json | 1 - 15 files changed, 40 insertions(+), 29 deletions(-) diff --git a/src/ui/scss/component/_badge.scss b/src/ui/scss/component/_badge.scss index 9c00dc082..4ca0e8ba6 100644 --- a/src/ui/scss/component/_badge.scss +++ b/src/ui/scss/component/_badge.scss @@ -9,7 +9,7 @@ } [data-mode='dark'] & { - color: #ddd; + color: var(--dm-color-01); background-color: rgba($lbry-teal-5, 0.3); } } diff --git a/src/ui/scss/component/_card.scss b/src/ui/scss/component/_card.scss index 93ac1f190..0832d00f4 100644 --- a/src/ui/scss/component/_card.scss +++ b/src/ui/scss/component/_card.scss @@ -8,7 +8,7 @@ font-size: 1.25rem; [data-mode='dark'] & { - background-color: #353434; + background-color: var(--dm-color-05); box-shadow: var(--card-box-shadow) darken($lbry-gray-1, 80%); } } diff --git a/src/ui/scss/component/_claim-list.scss b/src/ui/scss/component/_claim-list.scss index 1789927a8..952ab0fa6 100644 --- a/src/ui/scss/component/_claim-list.scss +++ b/src/ui/scss/component/_claim-list.scss @@ -32,7 +32,7 @@ } [data-mode='dark'] & { - color: #ddd; + color: var(--dm-color-01); } } @@ -57,7 +57,7 @@ background-color: lighten($lbry-black, 10%); [data-mode='dark'] & { - color: #ddd; + color: var(--dm-color-01); } } @@ -66,7 +66,7 @@ background-color: lighten($lbry-black, 10%); [data-mode='dark'] & { - background-color: #252424; + background-color: var(--dm-color-07); } } @@ -93,7 +93,7 @@ background-color: darken($lbry-white, 5%); [data-mode='dark'] & { - background-color: #555254; + background-color: var(--dm-color-04); } } @@ -115,7 +115,7 @@ border-bottom: 1px solid rgba($lbry-teal-5, 0.1); [data-mode='dark'] & { - border-bottom: 1px solid #555254; + border-top: 1px solid var(--dm-color-04); } } diff --git a/src/ui/scss/component/_expandable.scss b/src/ui/scss/component/_expandable.scss index d788870f7..fde9977d5 100644 --- a/src/ui/scss/component/_expandable.scss +++ b/src/ui/scss/component/_expandable.scss @@ -4,7 +4,7 @@ padding-bottom: var(--spacing-medium); [data-mode='dark'] & { - border-color: #555254; + border-color: var(--dm-color-04); } } @@ -34,7 +34,7 @@ position: absolute; [data-mode='dark'] & { - background-image: linear-gradient(to bottom, transparent 0%, #1e1e1e 90%); + background-image: linear-gradient(to bottom, transparent 0%, var(--dm-color-08) 90%); } } } diff --git a/src/ui/scss/component/_form-field.scss b/src/ui/scss/component/_form-field.scss index 23ce502fc..f8bddebba 100644 --- a/src/ui/scss/component/_form-field.scss +++ b/src/ui/scss/component/_form-field.scss @@ -255,7 +255,7 @@ fieldset-section { input:not(:focus):not(.form-field--copyable), textarea:not(:focus), select:not(:focus) { - border-color: #555254; + border-color: var(--dm-color-04); } } } diff --git a/src/ui/scss/component/_header.scss b/src/ui/scss/component/_header.scss index cb759b94b..95e7e663d 100644 --- a/src/ui/scss/component/_header.scss +++ b/src/ui/scss/component/_header.scss @@ -10,8 +10,8 @@ padding-right: var(--spacing-large); [data-mode='dark'] & { - background-color: #353434; - color: #ddd; + background-color: var(--dm-color-05); + color: var(--dm-color-01); border-bottom: none; box-shadow: var(--card-box-shadow) $lbry-black; } @@ -88,7 +88,7 @@ } svg { - stroke: #ddd; + stroke: var(--dm-color-01); } } } diff --git a/src/ui/scss/component/_main.scss b/src/ui/scss/component/_main.scss index 86ccf7d8a..f996e5a0e 100644 --- a/src/ui/scss/component/_main.scss +++ b/src/ui/scss/component/_main.scss @@ -9,7 +9,7 @@ display: flex; [data-mode='dark'] & { - background-color: #1e1e1e; + background-color: var(--dm-color-08); } } diff --git a/src/ui/scss/component/_media.scss b/src/ui/scss/component/_media.scss index c79bed5e0..bf9cbed3a 100644 --- a/src/ui/scss/component/_media.scss +++ b/src/ui/scss/component/_media.scss @@ -35,7 +35,7 @@ background-size: cover; [data-mode='dark'] & { - background-color: #555254; + background-color: var(--dm-color-04); } } } diff --git a/src/ui/scss/component/_navigation.scss b/src/ui/scss/component/_navigation.scss index 3981cd687..c1bf90836 100644 --- a/src/ui/scss/component/_navigation.scss +++ b/src/ui/scss/component/_navigation.scss @@ -55,14 +55,16 @@ } [data-mode='dark'] & { - color: #ddd; + color: var(--dm-color-01); + svg { - color: #ddd; + color: var(--dm-color-01); } &:hover, &.navigation__link--active { color: $lbry-teal-4; + .icon { color: $lbry-teal-4; } diff --git a/src/ui/scss/component/_spinner.scss b/src/ui/scss/component/_spinner.scss index 9b63c3c59..d9e3bf3b8 100644 --- a/src/ui/scss/component/_spinner.scss +++ b/src/ui/scss/component/_spinner.scss @@ -43,7 +43,7 @@ background-color: $lbry-white; [data-mode='dark'] & { - background-color: #ddd; + background-color: var(--dm-color-01); } } } diff --git a/src/ui/scss/component/_wunderbar.scss b/src/ui/scss/component/_wunderbar.scss index 58045012c..e3266c463 100644 --- a/src/ui/scss/component/_wunderbar.scss +++ b/src/ui/scss/component/_wunderbar.scss @@ -58,11 +58,11 @@ } [data-mode='dark'] & { - background-color: #6a6a6a; + background-color: var(--dm-color-03); color: $lbry-white; &::placeholder { - color: #90908f; + color: var(--dm-color-02); } } } diff --git a/src/ui/scss/init/_gui.scss b/src/ui/scss/init/_gui.scss index 505e99795..10d2d6534 100644 --- a/src/ui/scss/init/_gui.scss +++ b/src/ui/scss/init/_gui.scss @@ -9,7 +9,7 @@ html { overflow-x: hidden; &[data-mode='dark'] { - background-color: #1e1e1e; + background-color: var(--dm-color-08); } } @@ -24,8 +24,8 @@ body { background-color: mix($lbry-white, $lbry-gray-1, 70%); [data-mode='dark'] & { - background-color: #1e1e1e; - color: #ddd; + background-color: var(--dm-color-08); + color: var(--dm-color-01); } } @@ -54,7 +54,7 @@ hr { background-color: $lbry-gray-1; [data-mode='dark'] & { - background-color: #555254; + background-color: var(--dm-color-04); } } @@ -147,7 +147,7 @@ hr { border-radius: 5px; [data-mode='dark'] & { - background-color: #2e2d2e; + background-color: var(--dm-color-06); color: inherit; } } @@ -231,7 +231,7 @@ hr { fieldset, .fieldset { [data-mode='dark'] & { - border-top-color: #555254; + border-top-color: var(--dm-color-04); } } @@ -246,6 +246,6 @@ checkbox-toggle, radio-toggle, .radio-toggle { [data-mode='dark'] & { - border-color: #555254; + border-color: var(--dm-color-04); } } diff --git a/src/ui/scss/init/_mixins.scss b/src/ui/scss/init/_mixins.scss index bcaf2be8e..b00476aa7 100644 --- a/src/ui/scss/init/_mixins.scss +++ b/src/ui/scss/init/_mixins.scss @@ -4,7 +4,7 @@ border-radius: var(--card-radius); [data-mode='dark'] & { - background-color: #555254; + background-color: var(--dm-color-04); } } diff --git a/src/ui/scss/init/_vars.scss b/src/ui/scss/init/_vars.scss index bc7fb44aa..68ed9c726 100644 --- a/src/ui/scss/init/_vars.scss +++ b/src/ui/scss/init/_vars.scss @@ -26,6 +26,16 @@ $large-breakpoint: 1921px; // Color --color-background: #270f34; + // Dark Mode + --dm-color-01: #ddd; + --dm-color-02: #90908f; + --dm-color-03: #6a6a6a; + --dm-color-04: #555254; + --dm-color-05: #353434; + --dm-color-06: #2e2d2e; + --dm-color-07: #252424; + --dm-color-08: #1e1e1e; + // Text --text-max-width: 660px; --text-link-padding: 4px; diff --git a/static/locales/en.json b/static/locales/en.json index 95f23dcce..0572b956c 100644 --- a/static/locales/en.json +++ b/static/locales/en.json @@ -458,7 +458,6 @@ "This will appear as a tip for \"Original LBRY porn - Nude Hot Girl masturbates FREE\".": "This will appear as a tip for \"Original LBRY porn - Nude Hot Girl masturbates FREE\".", "You sent 25 LBC as a tip, Mahalo!": "You sent 25 LBC as a tip, Mahalo!", "LBRY names cannot contain that symbol ($, #, @)": "LBRY names cannot contain that symbol ($, #, @)", - "Invalid character %s in name: %s.": "Invalid character %s in name: %s.", "Path copied.": "Path copied.", "Open Folder": "Open Folder", "Create Backup": "Create Backup" -- 2.45.3 From da5f23967256c022977a9310590c5a997ddad744 Mon Sep 17 00:00:00 2001 From: Sean Yesmunt Date: Tue, 2 Jul 2019 00:02:45 -0400 Subject: [PATCH 3/3] fix claim preview tooltip on dark mode --- src/ui/scss/component/_claim-list.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/ui/scss/component/_claim-list.scss b/src/ui/scss/component/_claim-list.scss index 952ab0fa6..4db23e906 100644 --- a/src/ui/scss/component/_claim-list.scss +++ b/src/ui/scss/component/_claim-list.scss @@ -115,7 +115,9 @@ border-bottom: 1px solid rgba($lbry-teal-5, 0.1); [data-mode='dark'] & { + color: $lbry-white; border-top: 1px solid var(--dm-color-04); + background-color: var(--dm-color-05); } } -- 2.45.3