LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Dark mode (improved) #2586

Merged
NetOpWibby merged 3 commits from dark_mode into master 2019-07-02 06:13:35 +02:00
Conversation 2 Commits 3 Files changed 22 +129 -61
22 changed files with 129 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/ui/scss/component/_badge.scss
View file

@ -9,7 +9,7 @@
}
[data-mode='dark'] & {
color: lighten($lbry-teal-5, 60%);
color: var(--dm-color-01);
background-color: rgba($lbry-teal-5, 0.3);
}
}

4
src/ui/scss/component/_card.scss
View file

@ -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: var(--dm-color-05);
box-shadow: var(--card-box-shadow) darken($lbry-gray-1, 80%);
}
}

24
src/ui/scss/component/_claim-list.scss
View file

@ -30,6 +30,10 @@
checkbox-element input[type='checkbox']:checked + label {
color: $lbry-white;
}
[data-mode='dark'] & {
color: var(--dm-color-01);
}
}
.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: var(--dm-color-01);
}
}
.claim-list__header,
@ -58,7 +66,7 @@
background-color: lighten($lbry-black, 10%);
[data-mode='dark'] & {
background-color: darken($lbry-black, 10%);
background-color: var(--dm-color-07);
}
}
@ -85,7 +93,7 @@
background-color: darken($lbry-white, 5%);
[data-mode='dark'] & {
background-color: lighten($lbry-black, 10%);
background-color: var(--dm-color-04);
}
}
@ -94,11 +102,23 @@
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'] & {
color: $lbry-white;
border-top: 1px solid var(--dm-color-04);
background-color: var(--dm-color-05);
}
}
.claim-preview--large {

8
src/ui/scss/component/_expandable.scss
View file

@ -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: var(--dm-color-04);
}
}
@ -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%, var(--dm-color-08) 90%);
}
}
}

2
src/ui/scss/component/_file-properties.scss
View file

@ -6,7 +6,7 @@
.icon {
stroke: rgba($lbry-black, 0.5);
html[data-mode='dark'] & {
[data-mode='dark'] & {
stroke: rgba($lbry-white, 0.7);
}
}

4
src/ui/scss/component/_file-render.scss
View file

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

4
src/ui/scss/component/_form-field.scss
View file

@ -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: var(--dm-color-04);
}
}
}
@ -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;

12
src/ui/scss/component/_header.scss
View file

@ -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: var(--dm-color-05);
color: var(--dm-color-01);
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: var(--dm-color-01);
}
}
}

4
src/ui/scss/component/_item-list.scss
View file

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

2
src/ui/scss/component/_main.scss
View file

@ -9,7 +9,7 @@
display: flex;
[data-mode='dark'] & {
background-color: $lbry-black;
background-color: var(--dm-color-08);
}
}

6
src/ui/scss/component/_markdown-editor.scss
View file

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

8
src/ui/scss/component/_markdown-preview.scss
View file

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

10
src/ui/scss/component/_media.scss
View file

@ -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: var(--dm-color-04);
}
}
}
@ -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;
}
}

6
src/ui/scss/component/_modal.scss
View file

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

8
src/ui/scss/component/_navigation.scss
View file

@ -55,14 +55,16 @@
}
[data-mode='dark'] & {
color: $lbry-gray-1;
color: var(--dm-color-01);
svg {
color: $lbry-gray-1;
color: var(--dm-color-01);
}
&:hover,
&.navigation__link--active {
color: $lbry-teal-4;
.icon {
color: $lbry-teal-4;
}
@ -111,7 +113,7 @@
&::before {
background-color: $lbry-black;
html[data-mode='dark'] & {
[data-mode='dark'] & {
color: $lbry-gray-1;
}
}

4
src/ui/scss/component/_spinner.scss
View file

@ -41,6 +41,10 @@
.spinner--light {
.rect {
background-color: $lbry-white;
[data-mode='dark'] & {
background-color: var(--dm-color-01);
}
}
}

2
src/ui/scss/component/_tags.scss
View file

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

10
src/ui/scss/component/_wunderbar.scss
View file

@ -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: var(--dm-color-03);
color: $lbry-white;
background-color: darken($lbry-gray-5, 20%);
&::placeholder {
color: $lbry-gray-1;
color: var(--dm-color-02);
}
}
}
@ -73,7 +73,7 @@
min-width: 100%;
overflow: hidden;
html[data-mode='dark'] & {
[data-mode='dark'] & {
background-color: $lbry-gray-5;
color: $lbry-white;
}

53
src/ui/scss/init/_gui.scss
View file

@ -7,6 +7,10 @@ html {
font-size: 12px;
height: 100%;
overflow-x: hidden;
&[data-mode='dark'] {
background-color: var(--dm-color-08);
}
}
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: var(--dm-color-08);
color: var(--dm-color-01);
}
}
@ -44,6 +48,16 @@ code {
font-size: 1.5rem;
}
hr {
width: 100%;
height: 1px;
background-color: $lbry-gray-1;
[data-mode='dark'] & {
background-color: var(--dm-color-04);
}
}
.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: var(--dm-color-06);
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: var(--dm-color-04);
}
}
legend {
[data-mode='dark'] & {
border-color: transparent;
}
}
checkbox-toggle,
.checkbox-toggle,
radio-toggle,
.radio-toggle {
[data-mode='dark'] & {
border-color: var(--dm-color-04);
}
}

4
src/ui/scss/init/_mixins.scss
View file

@ -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: var(--dm-color-04);
}
}
@mixin mediaThumbHoverZoom {

10
src/ui/scss/init/_vars.scss
View file

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

3
static/locales/en.json
View file

@ -458,8 +458,7 @@
"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"
}
}