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'] & { [data-mode='dark'] & {
color: lighten($lbry-teal-5, 60%); color: var(--dm-color-01);
background-color: rgba($lbry-teal-5, 0.3); background-color: rgba($lbry-teal-5, 0.3);
} }
} }

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

@ -7,8 +7,8 @@
overflow: hidden; overflow: hidden;
font-size: 1.25rem; font-size: 1.25rem;
html[data-mode='dark'] & { [data-mode='dark'] & {
background-color: lighten($lbry-black, 5%); background-color: var(--dm-color-05);
box-shadow: var(--card-box-shadow) darken($lbry-gray-1, 80%); 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 { checkbox-element input[type='checkbox']:checked + label {
color: $lbry-white; color: $lbry-white;
} }
[data-mode='dark'] & {
color: var(--dm-color-01);
}
} }
.claim-list__header--small { .claim-list__header--small {
@ -51,6 +55,10 @@
border: 1px solid $lbry-white; border: 1px solid $lbry-white;
color: $lbry-white; color: $lbry-white;
background-color: lighten($lbry-black, 10%); background-color: lighten($lbry-black, 10%);
[data-mode='dark'] & {
color: var(--dm-color-01);
}
} }
.claim-list__header, .claim-list__header,
@ -58,7 +66,7 @@
background-color: lighten($lbry-black, 10%); background-color: lighten($lbry-black, 10%);
[data-mode='dark'] & { [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%); background-color: darken($lbry-white, 5%);
[data-mode='dark'] & { [data-mode='dark'] & {
background-color: lighten($lbry-black, 10%); background-color: var(--dm-color-04);
} }
} }
@ -94,11 +102,23 @@
flex-shrink: 0; flex-shrink: 0;
margin-right: var(--spacing-medium); margin-right: var(--spacing-medium);
} }
ul & {
&:first-of-type {
border-top: none;
}
}
} }
.claim-preview--injected, .claim-preview--injected,
.claim-preview { .claim-preview {
border-bottom: 1px solid rgba($lbry-teal-5, 0.1); 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 { .claim-preview--large {

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

@ -3,8 +3,8 @@
margin-bottom: var(--spacing-medium); margin-bottom: var(--spacing-medium);
padding-bottom: var(--spacing-medium); padding-bottom: var(--spacing-medium);
html[data-mode='dark'] & { [data-mode='dark'] & {
border-color: rgba($lbry-gray-5, 0.2); border-color: var(--dm-color-04);
} }
} }
@ -33,8 +33,8 @@
content: ''; content: '';
position: absolute; position: absolute;
html[data-mode='dark'] & { [data-mode='dark'] & {
background-image: linear-gradient(to bottom, transparent 0%, $lbry-black 90%); 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 { .icon {
stroke: rgba($lbry-black, 0.5); stroke: rgba($lbry-black, 0.5);
html[data-mode='dark'] & { [data-mode='dark'] & {
stroke: rgba($lbry-white, 0.7); stroke: rgba($lbry-white, 0.7);
} }
} }

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

@ -7,7 +7,7 @@
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
html[data-mode='dark'] & { [data-mode='dark'] & {
border: 1px solid rgba($lbry-gray-1, 0.3); border: 1px solid rgba($lbry-gray-1, 0.3);
} }
} }
@ -16,7 +16,7 @@
.document-viewer { .document-viewer {
background-color: $lbry-white; background-color: $lbry-white;
html[data-mode='dark'] & { [data-mode='dark'] & {
background-color: transparent; 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), input:not(:focus):not(.form-field--copyable),
textarea:not(:focus), textarea:not(:focus),
select: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; user-select: text;
cursor: default; cursor: default;
html[data-mode='dark'] & { [data-mode='dark'] & {
background-color: rgba($lbry-white, 0.3); background-color: rgba($lbry-white, 0.3);
border-color: $lbry-gray-5; border-color: $lbry-gray-5;
color: inherit; color: inherit;

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

@ -9,9 +9,9 @@
padding-left: var(--spacing-large); padding-left: var(--spacing-large);
padding-right: var(--spacing-large); padding-right: var(--spacing-large);
html[data-mode='dark'] & { [data-mode='dark'] & {
background-color: mix($lbry-black, $lbry-gray-3, 90%); background-color: var(--dm-color-05);
color: $lbry-white; color: var(--dm-color-01);
border-bottom: none; border-bottom: none;
box-shadow: var(--card-box-shadow) $lbry-black; box-shadow: var(--card-box-shadow) $lbry-black;
} }
@ -71,14 +71,14 @@
content: ''; content: '';
position: absolute; position: absolute;
html[data-mode='dark'] & { [data-mode='dark'] & {
background-color: $lbry-teal-3; background-color: $lbry-teal-3;
} }
} }
} }
// TODO: dark // TODO: dark
html[data-mode='dark'] & { [data-mode='dark'] & {
&:hover { &:hover {
color: $lbry-teal-3; color: $lbry-teal-3;
@ -88,7 +88,7 @@
} }
svg { 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); margin-bottom: var(--spacing-large);
padding: var(--spacing-large); padding: var(--spacing-large);
html[data-mode='dark'] & { [data-mode='dark'] & {
background-color: rgba($lbry-white, 0.1); background-color: rgba($lbry-white, 0.1);
} }
@ -37,7 +37,7 @@
.item-list__row--selected { .item-list__row--selected {
background-color: rgba($lbry-black, 0.1); background-color: rgba($lbry-black, 0.1);
html[data-mode='dark'] & { [data-mode='dark'] & {
background-color: rgba($lbry-black, 0.5); background-color: rgba($lbry-black, 0.5);
} }
} }

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

@ -9,7 +9,7 @@
display: flex; display: flex;
[data-mode='dark'] & { [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; text-decoration-style: dotted;
} }
html[data-mode='dark'] & { [data-mode='dark'] & {
border-left: 1px solid rgba($lbry-white, 0.2); border-left: 1px solid rgba($lbry-white, 0.2);
border-right: 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); border-bottom: 1px solid rgba($lbry-white, 0.2);
@ -93,7 +93,7 @@
border: none; border: none;
} }
html[data-mode='dark'] & { [data-mode='dark'] & {
background-color: rgba($lbry-white, 0.2); background-color: rgba($lbry-white, 0.2);
button { button {
@ -126,7 +126,7 @@
font-size: 1rem; font-size: 1rem;
padding: var(--spacing-medium) 0; // overriding styles from elsewhere padding: var(--spacing-medium) 0; // overriding styles from elsewhere
html[data-mode='dark'] & { [data-mode='dark'] & {
color: inherit; color: inherit;
} }
} }

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

@ -57,17 +57,9 @@
// Horizontal Rule // Horizontal Rule
hr { hr {
width: 100%;
height: 1px;
background-color: $lbry-gray-1;
margin-bottom: 2rem; margin-bottom: 2rem;
position: relative; position: relative;
top: 1rem; top: 1rem;
html[data-mode='dark'] & {
background-color: rgba($lbry-gray-5, 0.2);
}
} }
// Code // Code

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

@ -34,8 +34,8 @@
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
html[data-mode='dark'] & { [data-mode='dark'] & {
background-color: rgba($lbry-white, 0.1); background-color: var(--dm-color-04);
} }
} }
} }
@ -173,7 +173,7 @@
.media__info { .media__info {
word-wrap: break-word; word-wrap: break-word;
html[data-mode='dark'] & { [data-mode='dark'] & {
border-color: rgba($lbry-gray-5, 0.2); border-color: rgba($lbry-gray-5, 0.2);
} }
} }
@ -182,7 +182,7 @@
border-top: 1px solid $lbry-gray-1; border-top: 1px solid $lbry-gray-1;
margin-top: var(--spacing-medium); margin-top: var(--spacing-medium);
html[data-mode='dark'] & { [data-mode='dark'] & {
border-color: rgba($lbry-gray-5, 0.2); border-color: rgba($lbry-gray-5, 0.2);
} }
} }
@ -231,7 +231,7 @@
.media__text { .media__text {
font-size: 2.5rem; font-size: 2.5rem;
html[data-mode='dark'] & { [data-mode='dark'] & {
color: $lbry-white; color: $lbry-white;
} }
} }

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

@ -11,7 +11,7 @@
position: fixed; position: fixed;
z-index: 9999; z-index: 9999;
html[data-mode='dark'] & { [data-mode='dark'] & {
background-color: rgba($lbry-black, 0.7); background-color: rgba($lbry-black, 0.7);
} }
} }
@ -29,7 +29,7 @@
min-width: 500px; min-width: 500px;
} }
html[data-mode='dark'] & { [data-mode='dark'] & {
background-color: $lbry-black; background-color: $lbry-black;
border-color: $lbry-gray-5; border-color: $lbry-gray-5;
} }
@ -41,7 +41,7 @@
.button.button--alt { .button.button--alt {
background-color: $lbry-white; // Set modal buttons bg color background-color: $lbry-white; // Set modal buttons bg color
html[data-mode='dark'] & { [data-mode='dark'] & {
background-color: transparent; background-color: transparent;
} }
} }

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

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

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

@ -41,6 +41,10 @@
.spinner--light { .spinner--light {
.rect { .rect {
background-color: $lbry-white; 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-left: 0.5rem;
padding-top: 0.7rem; padding-top: 0.7rem;
html[data-mode='dark'] & { [data-mode='dark'] & {
border-color: rgba($lbry-white, 0.1); 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; background-color: $lbry-blue-2;
color: $lbry-black; color: $lbry-black;
html[data-mode='dark'] & { [data-mode='dark'] & {
background-color: $lbry-blue-4; background-color: $lbry-blue-4;
color: inherit; color: inherit;
} }
@ -57,12 +57,12 @@
opacity: 0.9; opacity: 0.9;
} }
html[data-mode='dark'] & { [data-mode='dark'] & {
background-color: var(--dm-color-03);
color: $lbry-white; color: $lbry-white;
background-color: darken($lbry-gray-5, 20%);
&::placeholder { &::placeholder {
color: $lbry-gray-1; color: var(--dm-color-02);
} }
} }
} }
@ -73,7 +73,7 @@
min-width: 100%; min-width: 100%;
overflow: hidden; overflow: hidden;
html[data-mode='dark'] & { [data-mode='dark'] & {
background-color: $lbry-gray-5; background-color: $lbry-gray-5;
color: $lbry-white; color: $lbry-white;
} }

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

@ -7,6 +7,10 @@ html {
font-size: 12px; font-size: 12px;
height: 100%; height: 100%;
overflow-x: hidden; overflow-x: hidden;
&[data-mode='dark'] {
background-color: var(--dm-color-08);
}
} }
body { body {
@ -19,9 +23,9 @@ body {
overflow: hidden; overflow: hidden;
background-color: mix($lbry-white, $lbry-gray-1, 70%); background-color: mix($lbry-white, $lbry-gray-1, 70%);
html[data-mode='dark'] & { [data-mode='dark'] & {
background-color: $lbry-black; background-color: var(--dm-color-08);
color: mix($lbry-white, $lbry-gray-3, 50%); color: var(--dm-color-01);
} }
} }
@ -44,6 +48,16 @@ code {
font-size: 1.5rem; font-size: 1.5rem;
} }
hr {
width: 100%;
height: 1px;
background-color: $lbry-gray-1;
[data-mode='dark'] & {
background-color: var(--dm-color-04);
}
}
.columns { .columns {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -111,7 +125,7 @@ code {
color: $lbry-red-3; color: $lbry-red-3;
font-weight: 600; font-weight: 600;
html[data-mode='dark'] & { [data-mode='dark'] & {
color: $lbry-red-1; color: $lbry-red-1;
} }
} }
@ -132,7 +146,8 @@ code {
margin-bottom: var(--spacing-medium); margin-bottom: var(--spacing-medium);
border-radius: 5px; border-radius: 5px;
html[data-mode='dark'] & { [data-mode='dark'] & {
background-color: var(--dm-color-06);
color: inherit; color: inherit;
} }
} }
@ -156,7 +171,7 @@ code {
color: $altered-hover-color; color: $altered-hover-color;
} }
html[data-mode='dark'] & { [data-mode='dark'] & {
color: $altered-color; color: $altered-color;
border-bottom: 1px solid $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; background-color: $lbry-yellow-3;
color: $lbry-black; color: $lbry-black;
} }
@ -177,7 +192,7 @@ code {
color: $lbry-gray-5; color: $lbry-gray-5;
font-style: italic; font-style: italic;
html[data-mode='dark'] & { [data-mode='dark'] & {
color: inherit; color: inherit;
} }
} }
@ -212,3 +227,25 @@ code {
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; 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; animation: pulse 2s infinite ease-in-out;
background-color: $lbry-gray-1; background-color: $lbry-gray-1;
border-radius: var(--card-radius); border-radius: var(--card-radius);
[data-mode='dark'] & {
background-color: var(--dm-color-04);
}
} }
@mixin mediaThumbHoverZoom { @mixin mediaThumbHoverZoom {

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

@ -26,6 +26,16 @@ $large-breakpoint: 1921px;
// Color // Color
--color-background: #270f34; --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
--text-max-width: 660px; --text-max-width: 660px;
--text-link-padding: 4px; --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\".", "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!", "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 ($, #, @)", "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.", "Path copied.": "Path copied.",
"Open Folder": "Open Folder", "Open Folder": "Open Folder",
"Create Backup": "Create Backup" "Create Backup": "Create Backup"
} }