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

Replacing existing colors with npm module, and refactoring Sass

Browse source
This commit is contained in:
ポール ウェッブ 2018-10-16 17:29:55 -05:00 committed by Sean Yesmunt
parent 7fd598360f
commit ca35e1f15d
31 changed files with 665 additions and 652 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -87,6 +87,7 @@
"y18n": "^4.0.0" "y18n": "^4.0.0"
}, },
"devDependencies": { "devDependencies": {
"@lbry/color": "^1.0.2",
"axios": "^0.18.0", "axios": "^0.18.0",
"babel-eslint": "^8.2.2", "babel-eslint": "^8.2.2",
"babel-plugin-module-resolver": "^3.1.1", "babel-plugin-module-resolver": "^3.1.1",
@ -123,6 +124,7 @@
"node-loader": "^0.6.0", "node-loader": "^0.6.0",
"node-sass": "^4.7.2", "node-sass": "^4.7.2",
"prettier": "^1.11.1", "prettier": "^1.11.1",
"sass": "^1.14.2",
"sass-loader": "^6.0.7", "sass-loader": "^6.0.7",
"webpack": "^3.10.0", "webpack": "^3.10.0",
"webpack-build-notifier": "^0.1.23", "webpack-build-notifier": "^0.1.23",

57
src/renderer/scss/_gui.scss
View file

@ -35,6 +35,7 @@
} }
html { html {
background-color: $lbry-white;
height: 100%; height: 100%;
} }
@ -43,7 +44,7 @@ body {
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 16px;
line-height: 1.5; line-height: 1.5;
color: var(--text-color); color: $lbry-black;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
} }
@ -54,7 +55,7 @@ body {
code { code {
font: 1.5em Consolas, 'Lucida Console', 'Source Sans', monospace; font: 1.5em Consolas, 'Lucida Console', 'Source Sans', monospace;
background-color: var(--color-bg-alt); background-color: $lbry-gray-1;
} }
// Without this buttons don't have the Metropolis font // Without this buttons don't have the Metropolis font
@ -69,8 +70,8 @@ ul {
} }
input { input {
border-bottom: var(--input-border-size) dotted var(--input-border-color); border-bottom: var(--input-border-size) dotted $lbry-gray-5;
color: var(--input-color); color: $lbry-black;
line-height: 1; line-height: 1;
cursor: text; cursor: text;
background-color: transparent; background-color: transparent;
@ -87,36 +88,36 @@ input {
} }
&.input-copyable { &.input-copyable {
flex: 1; flex: 1;
background: var(--input-copyable-bg); background-color: $lbry-gray-1;
color: var(--input-copyable-color); color: $lbry-gray-5;
padding: 10px 16px; padding: 10px 16px;
border: 1px dashed var(--input-copyable-border); border: 1px dashed $lbry-gray-3;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
&:not(.input-copyable):not(.wunderbar__input):not(:placeholder-shown):not(:disabled) { &:not(.input-copyable):not(.wunderbar__input):not(:placeholder-shown):not(:disabled) {
&:hover { &:hover {
border-color: var(--input-hover-border-color); border-color: rgba($lbry-black, 0.8);
} }
border-bottom: var(--input-border-size) solid var(--input-border-color); border-bottom: var(--input-border-size) solid $lbry-gray-5;
} }
&:disabled { &:disabled {
color: var(--input-disabled-color); color: $lbry-gray-3;
border-bottom: var(--input-border-size) solid var(--input-disabled-color); border-bottom: var(--input-border-size) solid $lbry-gray-3;
cursor: default; cursor: default;
} }
} }
textarea { textarea {
border: 1px solid var(--color-divider); border: 1px solid $lbry-gray-2;
font-size: 0.8em; font-size: 0.8em;
width: 100%; width: 100%;
padding: $spacing-vertical * 1/3; padding: $spacing-vertical * 1/3;
} }
input::placeholder { input::placeholder {
color: var(--input-placeholder-color); color: $lbry-gray-5;
opacity: 0.5; opacity: 0.5;
} }
@ -164,7 +165,7 @@ p {
right: 0; right: 0;
bottom: 0; bottom: 0;
display: flex; display: flex;
background-color: var(--color-bg); background-color: rgba($lbry-gray-1, 0.3);
@media only screen and (min-width: $medium-breakpoint) { @media only screen and (min-width: $medium-breakpoint) {
grid-template-columns: var(--side-nav-width-m) auto; grid-template-columns: var(--side-nav-width-m) auto;
@ -253,8 +254,8 @@ p {
/* Custom text selection */ /* Custom text selection */
*::selection { *::selection {
background: var(--text-selection-bg); background: $lbry-teal-1;
color: var(--text-selection-color); color: $lbry-white;
} }
.credit-amount { .credit-amount {
@ -274,20 +275,20 @@ p {
} }
.credit-amount--free { .credit-amount--free {
color: var(--color-credit-free); color: $lbry-blue-5;
&.credit-amount--file-page { &.credit-amount--file-page {
color: var(--color-dark-blue); color: $lbry-blue-5;
background-color: var(--color-secondary); background-color: $lbry-blue-2;
} }
} }
.credit-amount--cost { .credit-amount--cost {
color: var(--color-credit-price); color: $lbry-gray-5;
&.credit-amount--file-page { &.credit-amount--file-page {
color: var(--color-black); color: $lbry-black;
background-color: var(--color-yellow); background-color: $lbry-yellow-3;
} }
} }
@ -300,7 +301,7 @@ p {
} }
.divider__horizontal { .divider__horizontal {
border-top: var(--color-divider); border-top: $lbry-gray-2;
margin: 16px 0; margin: 16px 0;
} }
@ -346,7 +347,7 @@ p {
.help { .help {
font-size: 12px; font-size: 12px;
color: var(--color-help); color: $lbry-gray-5;
} }
.help--padded { .help--padded {
@ -355,16 +356,16 @@ p {
.meta { .meta {
font-size: 0.8em; font-size: 0.8em;
color: var(--color-meta-light); color: $lbry-gray-1; // "--color-meta-light" does not exist
} }
.empty { .empty {
color: var(--color-meta-light); color: $lbry-gray-1;
font-style: italic; font-style: italic;
} }
.qr-code { .qr-code {
border: 3px solid var(--color-white); border: 3px solid $lbry-white;
height: 134px; height: 134px;
width: 134px; width: 134px;
&.qr-code--right-padding { &.qr-code--right-padding {
@ -376,7 +377,7 @@ p {
} }
.error-text { .error-text {
color: var(--color-error); color: $lbry-red-5;
} }
.thumbnail-preview { .thumbnail-preview {

130
src/renderer/scss/_vars.scss
View file

@ -18,7 +18,8 @@ $large-breakpoint: 1921px;
--snack-bar-width: 756px; --snack-bar-width: 756px;
/* Colors: Brand */ /* Colors: Brand */
--color-white: #fff; /*
--color-white: $lbry-white;
--color-black: #000; --color-black: #000;
--color-grey: #d6d6d6; --color-grey: #d6d6d6;
--color-grey-light: #f6f6f6; --color-grey-light: #f6f6f6;
@ -38,131 +39,166 @@ $large-breakpoint: 1921px;
--color-purple: #8165b0; --color-purple: #8165b0;
--color-blue-grey: #203049; --color-blue-grey: #203049;
--color-red-light: #fff6f6; --color-red-light: #fff6f6;
*/
/* Colors */ /* Colors */
/*
--color-divider: #e3e3e3; --color-divider: #e3e3e3;
--color-help: rgba(0, 0, 0, 0.54); --color-help: rgba(0, 0, 0, 0.54);
--color-error: #a94442; --color-error: #a94442;
--color-nsfw: #bf4440; --color-nsfw: #bf4440;
--color-download: var(--color-white); --color-download: $lbry-white;
--color-download-overlay: var(--color-black); --color-download-overlay: $lbry-black;
--color-bg: #fafafa; --color-bg: #fafafa;
--color-bg-alt: var(--color-grey-light); --color-bg-alt: var(--color-grey-light);
--color-placeholder: var(--color-grey); --color-placeholder: var(--color-grey);
--color-search-placeholder: var(--color-placeholder); --color-search-placeholder: $lbry-gray-3;
--color-credit-free: var(--color-dark-blue); --color-credit-free: $lbry-blue-5;
--color-credit-price: var(--card-text-color); --color-credit-price: $lbry-gray-5;
--color-text-black: #444; --color-text-black: #444;
--color-text-white: #efefef; --color-text-white: #efefef;
*/
/* Shadows */ /* Shadows */
/*
--box-shadow-layer: transparent; // 0 2px 4px rgba(0,0,0,0.25); --box-shadow-layer: transparent; // 0 2px 4px rgba(0,0,0,0.25);
--box-shadow-button: 0 10px 20px rgba(0, 0, 0, 0.1); --box-shadow-button: 0 10px 20px rgba(0, 0, 0, 0.1);
--box-shadow-wunderbar: 0 10px 20px rgba(0, 0, 0, 0.03); --box-shadow-wunderbar: 0 10px 20px rgba(0, 0, 0, 0.03);
--box-shadow-header: 0px 6px 20px 1px rgba(0, 0, 0, 0.05); --box-shadow-header: 0 6px 20px 1px rgba(0, 0, 0, 0.05);
*/
/* Text */ /* Text */
/*
--text-color: var(--color-text-black); --text-color: var(--color-text-black);
--text-color-inverse: var(--color-text-white); --text-color-inverse: var(--color-text-white);
--text-help-color: var(--color-help); --text-help-color: $lbry-gray-5;
*/
--text-max-width: 660px; --text-max-width: 660px;
--text-link-padding: 4px; --text-link-padding: 4px;
/* Text Selectiom */ /* Text Selectiom */
/*
--text-selection-bg: var(--color-primary-light); --text-selection-bg: var(--color-primary-light);
--text-selection-color: var(--color-white); --text-selection-color: $lbry-white;
--editor-text-selection-bg: rgba(57, 148, 131, 0.8); --editor-text-selection-bg: rgba(57, 148, 131, 0.8);
*/
/* Form */ /* Form */
--form-label-color: rgba(0, 0, 0, 0.54); // --form-label-color: rgba(0, 0, 0, 0.54);
/* Input */ /* Input */
/*
--input-bg: transparent; --input-bg: transparent;
--input-label-color: var(--color-grey-dark); --input-label-color: $lbry-gray-5;
--input-color: var(--text-color); --input-color: $lbry-black;
--input-border-size: 1px; --input-border-size: 1px;
--input-border-color: var(--color-grey-dark); --input-border-color: $lbry-gray-5;
--input-copyable-bg: #f6f6f6; --input-copyable-bg: #f6f6f6;
--input-copyable-color: var(--color-grey-dark); --input-copyable-color: $lbry-gray-5;
--input-copyable-border: var(--color-grey); --input-copyable-border: var(--color-grey);
--input-select-bg-color: var(--color-grey); --input-select-bg-color: var(--color-grey);
--input-select-color: var(--text-color); --input-select-color: $lbry-black;
--input-switch-color: var(--color-teal); --input-switch-color: var(--color-teal);
*/
/* input:disabled */ /* input:disabled */
/*
--input-disabled-border-color: rgba(0, 0, 0, 0.42); --input-disabled-border-color: rgba(0, 0, 0, 0.42);
--input-disabled-color: rgba(0, 0, 0, 0.54); --input-disabled-color: rgba(0, 0, 0, 0.54);
*/
/* input:hover */ /* input:hover */
--input-hover-border-color: rgba(0, 0, 0, 0.87); // --input-hover-border-color: rgba(0, 0, 0, 0.87);
/* input:placeholder */ /* input:placeholder */
--input-placeholder-color: var(--color-help); /*
--input-placeholder-color: $lbry-gray-5;
--input-placeholder-opacity: 1; --input-placeholder-opacity: 1;
*/
/* Select */ /* Select */
--select-bg: var(--color-bg-alt); /*
--select-color: var(--text-color); --select-bg: $lbry-gray-1;
--select-color: $lbry-black;
*/
--select-height: 30px; --select-height: 30px;
/* Button */ /* Button */
--btn-bg-primary: var(--color-primary); /*
--btn-color-primary: var(--color-white); --btn-bg-primary: $lbry-teal-3;
--btn-color-primary: $lbry-white;
--btn-bg-primary-hover: var(--color-primary-light); --btn-bg-primary-hover: var(--color-primary-light);
--btn-bg-alt: var(--color-white); --btn-bg-alt: $lbry-white;
--btn-color-alt: var(--text-color); --btn-color-alt: $lbry-black;
--btn-color-inverse: var(--color-primary); --btn-color-inverse: $lbry-teal-3;
--btn-external-color: var(--color-light-blue); --btn-external-color: var(--color-light-blue);
--btn-bg-secondary: var(--color-teal); --btn-bg-secondary: var(--color-teal);
--btn-bg-danger: var(--color-red); --btn-bg-danger: var(--color-red);
--btn-home-bg-color: var(--color-white); --btn-home-bg-color: $lbry-white;
*/
--btn-radius: 20px; --btn-radius: 20px;
--btn-height: 36px; --btn-height: 36px;
/* SnackBar */ /* SnackBar */
--snackbar-bg-primary: var(--color-primary); /*
--snackbar-color-primary: var(--text-color-inverse); --snackbar-bg-primary: $lbry-teal-3;
--snackbar-color-primary: $lbry-white;
*/
/* Header */ /* Header */
--header-bg: var(--color-white); /*
--header-bg: $lbry-white;
--header-color: var(--color-text); --header-color: var(--color-text);
--header-active-color: rgba(0, 0, 0, 0.85); --header-active-color: rgba(0, 0, 0, 0.85);
*/
--header-height: 60px; --header-height: 60px;
/*
--header-button-bg: transparent; --header-button-bg: transparent;
--header-button-hover-bg: rgba(100, 100, 100, 0.15); --header-button-hover-bg: rgba(100, 100, 100, 0.15);
--header-primary-color: var(--color-primary); --header-primary-color: $lbry-teal-3;
*/
/* Header -> search */ /* Header -> search */
/*
--search-color: #666; --search-color: #666;
--search-bg-color: #fff; --search-bg-color: $lbry-white;
--search-active-bg-color: var(--color-grey-light); --search-active-bg-color: var(--color-grey-light);
--search-active-color: var(--header-active-color); --search-active-color: var(--header-active-color);
--search-active-shadow: 0 6px 9px -2px var(--color-grey--dark); --search-active-shadow: 0 6px 9px -2px var(--color-grey--dark);
--search-item-border-color: transparent; --search-item-border-color: transparent;
--search-item-active-color: var(--color-black); --search-item-active-color: $lbry-black;
*/
--search-modal-input-height: 70px; --search-modal-input-height: 70px;
--search-exact-result: #eaeaea; // --search-exact-result: #eaeaea;
/* Nav */ /* Nav */
--nav-color: var(--color-grey-dark); /*
--nav-color: $lbry-gray-5;
--nav-bg-color: var(--color-grey-light); --nav-bg-color: var(--color-grey-light);
*/
/* Table */ /* Table */
/*
--table-border: 1px solid var(--color-grey-light); --table-border: 1px solid var(--color-grey-light);
--table-item-odd: var(--color-grey-light); --table-item-odd: var(--color-grey-light);
--table-item-even: transparent; --table-item-even: transparent;
*/
/* Card */ /* Card */
--card-bg: var(--color-white); /*
--card-text-color: var(--color-grey-dark); --card-bg: $lbry-white;
--card-text-color: $lbry-gray-5;
*/
--card-radius: 2px; --card-radius: 2px;
--card-max-width: 1000px; --card-max-width: 1000px;
--card-wallet-color: var(--text-color-inverse); /*
--card-wallet-color: $lbry-white;
--success-msg-color: var(--color-green); --success-msg-color: var(--color-green);
--success-msg-border: var(--color-green-blue); --success-msg-border: mix($lbry-green-3, $lbry-blue-3, 50%);
--success-msg-bg: var(--color-green-light); --success-msg-bg: var(--color-green-light);
--error-msg-color: var(--color-error); --error-msg-color: $lbry-red-5;
--error-msg-border: var(--color-error); --error-msg-border: $lbry-red-5;
--error-msg-bg: var(--color-red-light); --error-msg-bg: var(--color-red-light);
*/
/* File */ /* File */
--file-tile-media-height: 125px; --file-tile-media-height: 125px;
@ -177,22 +213,28 @@ $large-breakpoint: 1921px;
/* Modal */ /* Modal */
--modal-width: 440px; --modal-width: 440px;
--modal-bg: var(--color-bg); /*
--modal-fullscreen-bg: var(--color-bg); --modal-bg: rgba($lbry-gray-1, 0.5);
--modal-fullscreen-bg: rgba($lbry-gray-1, 0.5);
--modal-overlay-bg: rgba(246, 246, 246, 0.75); --modal-overlay-bg: rgba(246, 246, 246, 0.75);
--modal-border: 1px solid rgb(204, 204, 204); --modal-border: 1px solid rgb(204, 204, 204);
--modal-btn-bg-color: var(--btn-bg-alt); --modal-btn-bg-color: $lbry-white;
*/
// /* Tooltip */ // /* Tooltip */
/*
--tooltip-bg: #555; --tooltip-bg: #555;
--tooltip-color: var(--color-white); --tooltip-color: $lbry-white;
*/
/* Scrollbar */ /* Scrollbar */
/*
--scrollbar-radius: 10px; --scrollbar-radius: 10px;
--scrollbar-thumb-bg: rgba(0, 0, 0, 0.2); --scrollbar-thumb-bg: rgba(0, 0, 0, 0.2);
--scrollbar-thumb-hover-bg: rgba(0, 0, 0, 0.35); --scrollbar-thumb-hover-bg: rgba(0, 0, 0, 0.35);
--scrollbar-thumb-active-bg: var(--color-primary); --scrollbar-thumb-active-bg: $lbry-teal-3;
--scrollbar-track-bg: transparent; --scrollbar-track-bg: transparent;
*/
// /* Animation :) */ // /* Animation :) */
--animation-duration: 0.3s; --animation-duration: 0.3s;

46
src/renderer/scss/all.scss
View file

@ -1,35 +1,11 @@
@charset "UTF-8"; @charset "utf-8";
@import '_reset.scss';
@import '_vars.scss'; @import '~@lbry/color/lbry-color', 'reset', 'vars', 'gui', 'component/syntax-highlighter',
@import '_gui.scss'; 'component/table', 'component/button', 'component/card', 'component/file-download',
@import 'component/_syntax-highlighter.scss'; 'component/form-field', 'component/header', 'component/menu', 'component/tooltip',
@import 'component/_table.scss'; 'component/load-screen', 'component/channel-indicator', 'component/notice', 'component/modal',
@import 'component/_button.scss'; 'component/snack-bar', 'component/content', 'component/pagination', 'component/markdown-preview',
@import 'component/_card.scss'; 'component/markdown-editor', 'component/scrollbar', 'component/spinner', 'component/nav',
@import 'component/_file-download.scss'; 'component/file-list', 'component/file-render', 'component/search', 'component/toggle',
@import 'component/_form-field.scss'; 'component/search', 'component/dat-gui', 'component/item-list', 'component/time', 'component/icon',
@import 'component/_header.scss'; 'component/placeholder';
@import 'component/_menu.scss';
@import 'component/_tooltip.scss';
@import 'component/_load-screen.scss';
@import 'component/_channel-indicator.scss';
@import 'component/_notice.scss';
@import 'component/_modal.scss';
@import 'component/_snack-bar.scss';
@import 'component/_content.scss';
@import 'component/_pagination.scss';
@import 'component/_markdown-preview.scss';
@import 'component/_markdown-editor.scss';
@import 'component/_scrollbar.scss';
@import 'component/_spinner.scss';
@import 'component/_nav.scss';
@import 'component/_file-list.scss';
@import 'component/_file-render.scss';
@import 'component/_search.scss';
@import 'component/_toggle.scss';
@import 'component/_search.scss';
@import 'component/_dat-gui.scss';
@import 'component/_item-list.scss';
@import 'component/_time.scss';
@import 'component/_icon.scss';
@import 'component/_placeholder.scss';

46
src/renderer/scss/component/_button.scss
View file

@ -11,8 +11,8 @@ button:disabled {
height: var(--btn-height); height: var(--btn-height);
min-width: var(--btn-height); min-width: var(--btn-height);
border-radius: var(--btn-radius); border-radius: var(--btn-radius);
background-color: var(--btn-bg-primary); background-color: $lbry-teal-3;
color: var(--btn-color-primary); color: $lbry-white;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -21,12 +21,12 @@ button:disabled {
transition: all var(--animation-duration) var(--animation-style); transition: all var(--animation-duration) var(--animation-style);
&:not(:disabled) { &:not(:disabled) {
box-shadow: var(--box-shadow-button); // box-shadow: var(--box-shadow-button);
} }
&:hover { &:hover {
box-shadow: none; // box-shadow: none;
background-color: var(--btn-bg-primary-hover); background-color: $lbry-teal-1;
} }
.icon + .btn__label { .icon + .btn__label {
@ -35,23 +35,23 @@ button:disabled {
} }
.btn.btn--alt { .btn.btn--alt {
color: var(--btn-color-alt); color: $lbry-black;
background-color: var(--btn-bg-alt); background-color: $lbry-white;
&:disabled { &:disabled {
color: var(--color-help); color: $lbry-gray-5;
background-color: transparent; background-color: transparent;
} }
} }
.btn.btn--danger { .btn.btn--danger {
background-color: var(--btn-bg-danger); background-color: $lbry-red-3;
} }
.btn.btn--inverse { .btn.btn--inverse {
background-color: transparent; background-color: transparent;
box-shadow: none; box-shadow: none;
color: var(--btn-color-inverse); color: $lbry-teal-3;
} }
.btn.btn--link { .btn.btn--link {
@ -59,7 +59,7 @@ button:disabled {
margin: 0; margin: 0;
background-color: inherit; background-color: inherit;
font-size: 1em; font-size: 1em;
color: var(--btn-color-inverse); color: $lbry-teal-3;
border-radius: 0; border-radius: 0;
display: inline; display: inline;
min-width: 0; min-width: 0;
@ -68,11 +68,11 @@ button:disabled {
} }
.btn.btn--external-link { .btn.btn--external-link {
color: var(--btn-external-color); color: $lbry-blue-1;
} }
.btn.btn--secondary { .btn.btn--secondary {
background-color: var(--btn-bg-secondary); background-color: $lbry-teal-3;
} }
.btn.btn--tourniquet { .btn.btn--tourniquet {
@ -108,7 +108,7 @@ button:disabled {
cursor: default; cursor: default;
&.btn--primary { &.btn--primary {
background-color: rgba(0, 0, 0, 0.5); background-color: rgba($lbry-black, 0.5);
} }
&:hover { &:hover {
@ -141,7 +141,7 @@ button:disabled {
*/ */
.btn.btn--home-nav { .btn.btn--home-nav {
background-color: var(--btn-home-bg-color); background-color: $lbry-white;
box-shadow: none; box-shadow: none;
.btn__content { .btn__content {
@ -151,7 +151,7 @@ button:disabled {
.btn.btn--arrow { .btn.btn--arrow {
width: var(--btn-arrow-width); width: var(--btn-arrow-width);
color: var(--text-color); color: $lbry-black;
&:disabled { &:disabled {
opacity: 0.3; opacity: 0.3;
@ -163,38 +163,38 @@ button:disabled {
display: inline-block; display: inline-block;
&:hover { &:hover {
color: var(--btn-color-inverse); color: $lbry-teal-3;
} }
} }
.btn.btn--header-publish { .btn.btn--header-publish {
background-color: var(--header-primary-color); background-color: $lbry-teal-3;
} }
.btn.btn--header-balance { .btn.btn--header-balance {
font-size: 14px; font-size: 14px;
color: var(--header-primary-color); color: $lbry-teal-3;
@media only screen and (min-width: $large-breakpoint) { @media only screen and (min-width: $large-breakpoint) {
font-size: 18px; font-size: 18px;
} }
.btn__label--balance { .btn__label--balance {
color: var(--text-help-color); color: $lbry-gray-5;
} }
&:hover { &:hover {
background-color: transparent; background-color: transparent;
.btn__label--balance { .btn__label--balance {
color: var(--header-primary-color); color: $lbry-teal-3;
} }
} }
} }
.btn.btn--file-actions { .btn.btn--file-actions {
background-color: var(--color-black); background-color: $lbry-black;
color: var(--color-white); color: $lbry-white;
opacity: 0.8; opacity: 0.8;
border-radius: var(--btn-radius); border-radius: var(--btn-radius);
width: var(--btn-height); width: var(--btn-height);

32
src/renderer/scss/component/_card.scss
View file

@ -21,10 +21,10 @@
} }
.card--section { .card--section {
background-color: var(--card-bg); background-color: $lbry-white;
padding: $spacing-vertical; padding: $spacing-vertical;
margin-top: $spacing-vertical * 2/3; margin-top: $spacing-vertical * 2/3;
box-shadow: var(--box-shadow-layer); // box-shadow: var(--box-shadow-layer);
} }
.card--small { .card--small {
@ -35,7 +35,7 @@
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 50% 50%; background-position: 50% 50%;
background-color: var(--color-placeholder); background-color: $lbry-gray-3;
} }
.card__media--no-img { .card__media--no-img {
@ -46,7 +46,7 @@
} }
.card__media--nsfw { .card__media--nsfw {
background-color: var(--color-error); background-color: $lbry-red-5;
} }
.card--link { .card--link {
@ -60,12 +60,12 @@
.card--wallet-balance { .card--wallet-balance {
background: url('../../../static/img/stripe-background.png') no-repeat; background: url('../../../static/img/stripe-background.png') no-repeat;
background-size: cover; background-size: cover;
color: var(--card-wallet-color); color: $lbry-white;
justify-content: space-between; justify-content: space-between;
.card__title, .card__title,
.card__subtitle { .card__subtitle {
color: var(--card-wallet-color); color: $lbry-white;
} }
} }
@ -76,7 +76,7 @@
.card__title { .card__title {
font-size: 1.5em; font-size: 1.5em;
color: var(--text-color); color: $lbry-black;
padding-top: $spacing-vertical * 1/3; padding-top: $spacing-vertical * 1/3;
@media (min-width: $large-breakpoint) { @media (min-width: $large-breakpoint) {
@ -107,7 +107,7 @@
} }
.card__subtitle { .card__subtitle {
color: var(--card-text-color); color: $lbry-gray-5;
font-size: 1em; font-size: 1em;
line-height: 1em; line-height: 1em;
padding-top: $spacing-vertical * 1/3; padding-top: $spacing-vertical * 1/3;
@ -131,7 +131,7 @@
} }
.card__meta { .card__meta {
color: var(--color-help); color: $lbry-gray-5;
font-size: 14px; font-size: 14px;
font-family: 'metropolis-medium'; font-family: 'metropolis-medium';
padding-top: $spacing-vertical * 2/3; padding-top: $spacing-vertical * 2/3;
@ -140,7 +140,7 @@
.card__file-properties { .card__file-properties {
display: flex; display: flex;
align-items: center; align-items: center;
color: var(--card-text-color); color: $lbry-gray-5;
.icon + .icon { .icon + .icon {
margin-left: $spacing-vertical * 1/3; margin-left: $spacing-vertical * 1/3;
@ -356,17 +356,17 @@
} }
.card__success-msg { .card__success-msg {
border-left: 2px solid var(--success-msg-border); border-left: 2px solid mix($lbry-green-3, $lbry-blue-3, 50%);
color: var(--success-msg-color); color: $lbry-green-3;
background-color: var(--success-msg-bg); background-color: $lbry-green-1;
padding: $spacing-vertical * 1/3; padding: $spacing-vertical * 1/3;
margin: $spacing-vertical * 1/3 0; margin: $spacing-vertical * 1/3 0;
} }
.card__error-msg { .card__error-msg {
border-left: 2px solid var(--error-msg-border); border-left: 2px solid $lbry-red-5;
color: var(--error-msg-color); color: $lbry-red-5;
background-color: var(--error-msg-bg); background-color: $lbry-red-1;
padding: $spacing-vertical * 1/3; padding: $spacing-vertical * 1/3;
margin: $spacing-vertical * 1/3 0; margin: $spacing-vertical * 1/3 0;
} }

14
src/renderer/scss/component/_content.scss
View file

@ -4,7 +4,7 @@
} }
.content__embedded { .content__embedded {
background-color: var(--color-black); background-color: $lbry-black;
width: 100%; width: 100%;
padding-top: var(--video-aspect-ratio); padding-top: var(--video-aspect-ratio);
position: relative; position: relative;
@ -40,7 +40,7 @@
justify-content: center; justify-content: center;
&:not(.card__media--nsfw) { &:not(.card__media--nsfw) {
background-color: var(--color-black); background-color: $lbry-black;
} }
&:hover { &:hover {
@ -62,7 +62,7 @@
.content__view--container { .content__view--container {
iframe { iframe {
background: #fff; background: $lbry-white;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
@ -74,13 +74,13 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 0 20px; padding: 0 20px;
background-color: rgba(0, 0, 0, 0.5); background-color: rgba($lbry-black, 0.5);
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
.content__loading-text { .content__loading-text {
color: var(--color-white); color: $lbry-white;
} }
.content__empty { .content__empty {
@ -90,10 +90,10 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: var(--color-white); color: $lbry-white;
&.content__empty--nsfw { &.content__empty--nsfw {
background-color: var(--color-nsfw); background-color: $lbry-grape-3;
} }
} }

2
src/renderer/scss/component/_file-list.scss
View file

@ -73,5 +73,5 @@
} }
.file-tile__uri { .file-tile__uri {
color: var(--color-grey-dark); color: $lbry-gray-5;
} }

10
src/renderer/scss/component/_file-render.scss
View file

@ -15,7 +15,7 @@
margin: 0; margin: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: black; background-color: $lbry-black;
iframe, iframe,
webview { webview {
@ -26,7 +26,7 @@
.document-viewer { .document-viewer {
overflow: auto; overflow: auto;
background-color: var(--card-bg); background-color: $lbry-white;
font-size: calc(var(--font-size-subtext-multiple) * 1em); font-size: calc(var(--font-size-subtext-multiple) * 1em);
} }
@ -64,7 +64,7 @@
} }
.CodeMirror-linenumber { .CodeMirror-linenumber {
color: var(--card-text-color); color: $lbry-gray-5;
} }
.CodeMirror .CodeMirror-lines { .CodeMirror .CodeMirror-lines {
@ -76,8 +76,8 @@
} }
.CodeMirror-gutters { .CodeMirror-gutters {
border-right: 1px solid var(--color-divider); border-right: 1px solid $lbry-gray-2;
background: var(--color-bg-alt); background: $lbry-gray-1;
padding-right: 8px; padding-right: 8px;
} }

10
src/renderer/scss/component/_form-field.scss
View file

@ -92,16 +92,16 @@
} }
.form-field__label { .form-field__label {
color: var(--form-label-color); color: rgba($lbry-black, 0.5);
} }
.form-field__help { .form-field__help {
color: var(--color-help); color: $lbry-gray-5;
padding-top: $spacing-vertical * 1/3; padding-top: $spacing-vertical * 1/3;
} }
.form-field__error { .form-field__error {
color: var(--color-error); color: $lbry-red-5;
} }
.form-field__prefix, .form-field__prefix,
@ -129,9 +129,9 @@
min-width: 60px; min-width: 60px;
height: 30px; height: 30px;
border-radius: 8px; border-radius: 8px;
background-color: var(--input-select-bg-color); background-color: $lbry-gray-3;
font: normal 12px/30px 'metropolis-medium'; font: normal 12px/30px 'metropolis-medium';
color: var(--input-select-color); color: $lbry-black;
&:disabled { &:disabled {
opacity: 0.5; opacity: 0.5;

4
src/renderer/scss/component/_header.scss
View file

@ -7,8 +7,8 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 0 $spacing-width * 1/3; padding: 0 $spacing-width * 1/3;
background-color: var(--color-bg); background-color: $lbry-white;
box-shadow: var(--box-shadow-header); // box-shadow: var(--box-shadow-header);
@media (min-width: $medium-breakpoint) { @media (min-width: $medium-breakpoint) {
padding: 0 $spacing-width; padding: 0 $spacing-width;

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

@ -1,5 +1,5 @@
.item-list { .item-list {
background-color: var(--card-bg); background-color: $lbry-white;
margin-top: $spacing-vertical; margin-top: $spacing-vertical;
} }
@ -15,7 +15,7 @@
} }
.item-list__item--selected { .item-list__item--selected {
background-color: var(--table-item-odd); background-color: $lbry-gray-1;
} }
.item-list__item--cutoff { .item-list__item--cutoff {

2
src/renderer/scss/component/_load-screen.scss
View file

@ -1,6 +1,6 @@
.load-screen { .load-screen {
color: white; color: white;
background: var(--color-primary); background: $lbry-teal-3;
background-size: cover; background-size: cover;
min-height: 100vh; min-height: 100vh;
min-width: 100vw; min-width: 100vw;

142
src/renderer/scss/component/_markdown-editor.scss
View file

@ -1,91 +1,95 @@
.CodeMirror { .CodeMirror {
border: 0px; border: 0;
border-radius: 0px; border-radius: 0;
background: var(--card-bg); background: $lbry-white;
color: var(--text-color); color: $lbry-black;
.CodeMirror-cursor {
border-color: $lbry-teal-3;
}
.CodeMirror-placeholder {
opacity: 0.5;
}
.CodeMirror-selected {
background-color: transparent;
}
.CodeMirror-selectedtext {
background-color: rgba($lbry-teal-3, 0.3);
color: $lbry-white;
}
.cm-spell-error:not(.cm-url):not(.cm-comment):not(.cm-tag):not(.cm-word) {
background: none;
text-decoration: underline;
text-decoration-color: $lbry-red-3;
text-decoration-style: dotted;
}
}
// Fix selection
.CodeMirror-line::selection,
.CodeMirror-line > span::selection,
.CodeMirror-line > span > span::selection {
background-color: $lbry-teal-1;
} }
.editor-toolbar { .editor-toolbar {
opacity: 1; opacity: 1; // ?
border: 0; border: 0;
background: var(--color-bg-alt); background-color: $lbry-gray-1;
border-radius: 0; border-radius: 0;
box-shadow: var(--box-shadow-layer); // box-shadow: var(--box-shadow-layer);
}
.editor-toolbar:hover { &:hover {
opacity: 1; opacity: 1; // ?
} }
.editor-toolbar i.separator { &.disabled-for-preview a:not(.no-disable) {
border: 0; background-color: $lbry-gray-1;
} border-color: transparent;
opacity: 0.3;
}
.editor-toolbar.fullscreen { &.fullscreen {
background: var(--color-bg-alt); background-color: $lbry-gray-1;
}
.editor-toolbar.fullscreen::before, &::before,
.editor-toolbar.fullscreen::after { &::after {
display: none; display: none;
} }
}
.editor-toolbar a { a {
opacity: 0.6; color: $lbry-black !important;
color: var(--text-color) !important; transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
}
.editor-toolbar a.active, &:not(.active),
.editor-toolbar a:hover { &:not(:hover) {
opacity: 1; opacity: 0.6;
background: var(--button-bg); }
border-color: transparent;
}
.editor-toolbar.disabled-for-preview a:not(.no-disable) { &.active,
background: var(--color-bg-alt); &:hover {
border-color: transparent; opacity: 1;
opacity: 0.3; // background-color: var(--button-bg); // "--button-bg" does not exist
} border-color: transparent;
}
}
.editor-statusbar { i.separator {
color: var(--form-label-color); border: 0;
}
} }
.editor-preview { .editor-preview {
font-size: calc(var(--font-size-subtext-multiple) * 1em); font-size: calc(var(--font-size-subtext-multiple) * 1em);
background: var(--color-bg); background-color: rgba($lbry-gray-1, 0.5);
border: 0; border: 0;
} }
.CodeMirror .CodeMirror-cursor { .editor-statusbar {
border-color: var(--color-primary); color: rgba($lbry-black, 0.5);
}
.CodeMirror .CodeMirror-placeholder {
opacity: 0.5;
}
/* Fix selection */
.CodeMirror-line::selection,
.CodeMirror-line > span::selection,
.CodeMirror-line > span > span::selection {
background: var(--text-selection-bg);
}
.CodeMirror .CodeMirror-selected {
background: transparent;
}
.CodeMirror .CodeMirror-selectedtext {
background: var(--editor-text-selection-bg) !important;
color: var(--text-selection-color) !important;
}
.CodeMirror .cm-spell-error:not(.cm-url):not(.cm-comment):not(.cm-tag):not(.cm-word) {
background: none;
text-decoration: underline;
text-decoration-color: #f00;
text-decoration-style: dotted;
} }

61
src/renderer/scss/component/_markdown-preview.scss
View file

@ -1,7 +1,7 @@
.markdown-preview { .markdown-preview {
margin: 0; margin: 0;
/* Headers */ // Headers
h1, h1,
h2, h2,
h3, h3,
@ -34,66 +34,72 @@
h6 { h6 {
font-size: 0.84em; font-size: 0.84em;
color: var(--color-help); color: $lbry-gray-5;
} }
/* Paragraphs */ // Paragraphs
p { p {
white-space: pre-line; white-space: pre-line;
} }
/* Strikethrough text */ // Strikethrough text
del { del {
color: var(--color-help); color: $lbry-gray-5;
} }
/* Tables */ // Tables
table { table {
padding: 8px; padding: 8px;
margin: 16px 0; margin: 16px 0;
background-color: var(--card-bg); background-color: $lbry-white;
tr td, tr {
tr th, td,
tr td:first-of-type, th,
tr th:first-of-type, td:first-of-type,
tr td:last-of-type, th:first-of-type,
tr th:last-of-type { td:last-of-type,
padding: 8px; th:last-of-type {
padding: 8px;
}
} }
} }
/* Image */ // Image
img { img {
margin: 16px 0; margin: 16px 0;
} }
/* Horizontal Rule */ // Horizontal Rule
hr { hr {
border: 1px solid var(--color-divider); border: 1px solid $lbry-gray-2;
} }
/* Code */ // Code
code { code {
display: block; display: block;
padding: 8px; padding: 8px;
margin: 16px 0; margin: 16px 0;
background-color: var(--color-bg-alt); background-color: $lbry-gray-1;
color: var(--color-help); color: $lbry-gray-5;
font-size: 1em; font-size: 1em;
font-family: Consolas, 'Lucida Console', 'Source Sans', monospace; font-family: Consolas, 'Lucida Console', 'Source Sans', monospace;
} }
a { a {
font-size: 1em; font-size: 1em;
color: var(--btn-external-color); color: $lbry-blue-1;
display: inline-block; display: inline-block;
} }
/* Lists */ // Lists
ul, ul,
ol { ol {
margin-bottom: 2em; margin-bottom: 2em;
> li {
list-style-position: outside;
}
} }
ul { ul {
@ -106,17 +112,12 @@
display: inline-block; display: inline-block;
} }
} }
ol > li,
ul > li {
list-style-position: outside;
}
} }
blockquote { blockquote {
padding: 8px; padding: 8px;
margin: 16px 0; margin: 16px 0;
color: var(--color-help); color: $lbry-gray-5;
border-left: 2px solid var(--color-help); border-left: 2px solid $lbry-gray-5;
background-color: var(--color-bg-alt); background-color: $lbry-gray-1;
} }

13
src/renderer/scss/component/_menu.scss
View file

@ -1,4 +1,4 @@
$border-radius-menu: 2px; // $border-radius-menu: 2px; // unused
.menu-container { .menu-container {
display: inline-block; display: inline-block;
@ -7,17 +7,18 @@ $border-radius-menu: 2px;
.menu { .menu {
position: absolute; position: absolute;
white-space: nowrap; white-space: nowrap;
background-color: var(--menu-bg); // background-color: var(--menu-bg); // "--menu-bg" does not exist
box-shadow: var(--box-shadow-layer); // box-shadow: var(--box-shadow-layer);
border-radius: var(--menu-radius); // border-radius: var(--menu-radius); // "--menu-radius" does not exist
padding-top: ($spacing-vertical / 5) 0px; padding-top: ($spacing-vertical / 5) 0;
z-index: 1; z-index: 1;
} }
.menu__menu-item { .menu__menu-item {
display: block; display: block;
padding: ($spacing-vertical / 4) ($spacing-vertical / 2); padding: ($spacing-vertical / 4) ($spacing-vertical / 2);
&:hover { &:hover {
background: var(--menu-item-hover-bg); // background: var(--menu-item-hover-bg); // "--menu-item-hover-bg" does not exist
} }
} }

32
src/renderer/scss/component/_modal.scss
View file

@ -5,11 +5,11 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
top: 0px; top: 0;
left: 0px; left: 0;
right: 0px; right: 0;
bottom: 0px; bottom: 0;
background-color: var(--modal-overlay-bg); background-color: rgba($lbry-white, 0.7);
z-index: 9999; z-index: 9999;
} }
@ -21,18 +21,18 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
border: var(--modal-border); border: $lbry-gray-1;
background: var(--modal-bg); background-color: rgba($lbry-gray-1, 0.5);
overflow: auto; overflow: auto;
border-radius: 4px; border-radius: 4px;
padding: $spacing-vertical; padding: $spacing-vertical;
box-shadow: var(--box-shadow-layer); // box-shadow: var(--box-shadow-layer);
max-width: var(--modal-width); max-width: var(--modal-width);
word-break: break-word; word-break: break-word;
.btn.btn--alt { .btn.btn--alt {
// Set modal buttons bg color // Set modal buttons bg color
background-color: var(--modal-btn-bg-color); background-color: $lbry-white;
} }
} }
@ -43,7 +43,7 @@
right: 0; right: 0;
bottom: 0; bottom: 0;
padding: $spacing-vertical; padding: $spacing-vertical;
background: var(--modal-fullscreen-bg); background: rgba($lbry-gray-1, 0.5);
overflow-y: scroll; overflow-y: scroll;
.main { .main {
@ -84,7 +84,7 @@
} }
.modal__button { .modal__button {
margin: 0px $spacing-vertical * 1/3; margin: 0 $spacing-vertical * 1/3;
&.btn--link { &.btn--link {
// So the text isn't bigger than the text inside the button // So the text isn't bigger than the text inside the button
@ -93,12 +93,12 @@
} }
.error-modal-overlay { .error-modal-overlay {
background: var(--modal-overlay-bg); background: rgba($lbry-white, 0.7);
} }
.error-modal__content { .error-modal__content {
display: flex; display: flex;
padding: 0px 8px 10px 10px; padding: 0 8px 10px 10px;
} }
.error-modal__warning-symbol { .error-modal__warning-symbol {
@ -122,7 +122,7 @@
max-height: 400px; max-height: 400px;
max-width: var(--modal-width); max-width: var(--modal-width);
overflow-y: scroll; overflow-y: scroll;
color: #a94442; color: $lbry-red-5;
background-color: #ffe0df; background-color: $lbry-red-1;
border-left: 2px solid #a94442; border-left: 2px solid $lbry-red-5;
} }

12
src/renderer/scss/component/_nav.scss
View file

@ -1,13 +1,13 @@
.nav { .nav {
min-width: var(--side-nav-width); min-width: var(--side-nav-width);
background-color: var(--nav-bg-color); background-color: rgba($lbry-gray-1, 0.7);
padding: $spacing-width * 1/3; padding: $spacing-width * 1/3;
color: var(--nav-color); color: $lbry-gray-5;
hr { hr {
width: 24px; width: 24px;
margin: 36px 0; margin: 36px 0;
border: solid 1px var(--color-divider); border: solid 1px $lbry-gray-2;
margin: $spacing-vertical $spacing-vertical * 2/3; margin: $spacing-vertical $spacing-vertical * 2/3;
} }
@ -48,7 +48,7 @@
} }
.btn:hover { .btn:hover {
color: var(--text-color); color: $lbry-black;
} }
} }
@ -70,11 +70,11 @@
} }
.nav__link--active { .nav__link--active {
color: var(--text-color); color: $lbry-black;
} }
.nav__sub-links { .nav__sub-links {
color: var(--nav-color); color: $lbry-gray-5;
padding-bottom: $spacing-vertical * 1/3; padding-bottom: $spacing-vertical * 1/3;
} }

16
src/renderer/scss/component/_notice.scss
View file

@ -1,16 +1,16 @@
.notice { .notice {
padding: 10px 20px; padding: 10px 20px;
border: 1px solid #000; border: 1px solid $lbry-black;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); text-shadow: 0 1px 0 rgba($lbry-white, 0.5);
border-radius: 5px; border-radius: 5px;
color: #468847; color: $lbry-green-3;
background-color: #dff0d8; background-color: $lbry-green-1;
border-color: #d6e9c6; border-color: $lbry-green-2;
} }
.notice--error { .notice--error {
color: #b94a48; color: $lbry-red-3;
background-color: #f2dede; background-color: $lbry-red-1;
border-color: #eed3d7; border-color: $lbry-red-2;
} }

20
src/renderer/scss/component/_pagination.scss
View file

@ -2,6 +2,14 @@
display: block; display: block;
padding: 0; padding: 0;
text-align: center; text-align: center;
+ .form-field {
margin: 0 $spacing-width * 2/3;
.form-field__input {
padding: 0;
}
}
} }
.pagination__item { .pagination__item {
@ -11,7 +19,7 @@
border-radius: 2px; border-radius: 2px;
&:not(.pagination__item--selected):not(.pagination__item--break):not(.disabled):hover { &:not(.pagination__item--selected):not(.pagination__item--break):not(.disabled):hover {
background: rgba(0, 0, 0, 0.2); background: rgba($lbry-black, 0.2);
cursor: pointer; cursor: pointer;
} }
@ -32,13 +40,5 @@
.pagination__item--selected { .pagination__item--selected {
color: white; color: white;
background: var(--color-primary); background: $lbry-teal-3;
}
.pagination + .form-field {
margin: 0 $spacing-width * 2/3;
.form-field__input {
padding: 0;
}
} }

4
src/renderer/scss/component/_placeholder.scss
View file

@ -2,9 +2,11 @@
0% { 0% {
opacity: 1; opacity: 1;
} }
50% { 50% {
opacity: 0.7; opacity: 0.7;
} }
100% { 100% {
opacity: 1; opacity: 1;
} }
@ -12,7 +14,7 @@
.card--placeholder { .card--placeholder {
animation: pulse 2s infinite ease-in-out; animation: pulse 2s infinite ease-in-out;
background: var(--color-placeholder); background-color: $lbry-gray-3;
} }
// Individual items we need a placeholder for // Individual items we need a placeholder for

26
src/renderer/scss/component/_scrollbar.scss
View file

@ -1,25 +1,19 @@
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 8px; width: 5px;
height: 8px; height: 5px;
background-color: transparent;
overflow: auto; overflow: auto;
} }
::-webkit-scrollbar-track {
background: var(--scrollbar-track-bg);
border-radius: var(--scrollbar-radius);
margin: 4px;
}
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
border-radius: var(--scrollbar-radius); background-color: $lbry-gray-3;
background-color: var(--scrollbar-thumb-bg);
transition: background-color 0.3s ease;
}
::-webkit-scrollbar-thumb:hover {
background-color: var(--scrollbar-thumb-hover-bg);
} }
::-webkit-scrollbar-thumb:active { ::-webkit-scrollbar-thumb:active {
background-color: var(--scrollbar-thumb-active-bg); background-color: $lbry-teal-3;
}
::-webkit-scrollbar-track {
background-color: transparent;
} }

26
src/renderer/scss/component/_search.scss
View file

@ -16,11 +16,11 @@
.wunderbar__input { .wunderbar__input {
height: var(--btn-height); height: var(--btn-height);
border-radius: var(--btn-radius); // border-radius: var(--btn-radius);
width: 100%; width: 100%;
color: var(--search-color); color: $lbry-gray-5;
background-color: var(--search-bg-color); background-color: rgba($lbry-gray-1, 0.3);
box-shadow: var(--box-shadow-wunderbar); // box-shadow: var(--box-shadow-wunderbar);
padding: 10px; padding: 10px;
padding-left: 30px; padding-left: 30px;
font-size: 13px; font-size: 13px;
@ -30,10 +30,10 @@
border-bottom: none; border-bottom: none;
&:focus { &:focus {
background-color: var(--search-active-bg-color); background-color: rgba($lbry-gray-1, 0.5);
border-radius: 0; // border-radius: 0;
border-bottom: 1px solid var(--color-divider); // border-bottom: 1px solid $lbry-gray-2;
box-shadow: var(--box-shadow-button); // box-shadow: var(--box-shadow-button);
} }
} }
@ -47,7 +47,7 @@
.wunderbar__suggestion { .wunderbar__suggestion {
padding: 5px 10px; padding: 5px 10px;
background-color: var(--search-bg-color); background-color: $lbry-gray-5;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -55,7 +55,7 @@
align-items: center; align-items: center;
&:not(:first-of-type) { &:not(:first-of-type) {
border-top: 1px solid var(--search-item-border-color); border-top: 1px solid transparent;
} }
.icon { .icon {
@ -78,13 +78,13 @@
} }
.wunderbar__active-suggestion { .wunderbar__active-suggestion {
color: var(--search-item-active-color); color: $lbry-black;
background-color: var(--color-secondary); background-color: $lbry-blue-2;
} }
.search__top { .search__top {
padding: 0 $spacing-width $spacing-width; padding: 0 $spacing-width $spacing-width;
background-color: var(--search-exact-result); background-color: $lbry-gray-2;
} }
.search__content { .search__content {

13
src/renderer/scss/component/_snack-bar.scss
View file

@ -1,8 +1,8 @@
.snack-bar { .snack-bar {
background-color: var(--snackbar-bg-primary); background-color: $lbry-teal-3;
border-radius: 10px; border-radius: 10px;
box-shadow: var(--box-shadow-layer); // box-shadow: var(--box-shadow-layer);
color: var(--snackbar-color-primary); color: $lbry-white;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-left: auto; margin-left: auto;
@ -25,10 +25,8 @@
min-width: min-content; min-width: min-content;
text-transform: uppercase; text-transform: uppercase;
span { span:hover {
&:hover { text-decoration: underline;
text-decoration: underline;
}
} }
} }
@ -42,6 +40,7 @@
font-size: 30px; font-size: 30px;
margin-right: 20px; margin-right: 20px;
} }
&:nth-of-type(2) { &:nth-of-type(2) {
font-size: 16px; font-size: 16px;
margin-bottom: 4px; margin-bottom: 4px;

7
src/renderer/scss/component/_spinner.scss
View file

@ -32,13 +32,13 @@
.spinner--light { .spinner--light {
.rect { .rect {
background-color: var(--color-white); background-color: $lbry-white;
} }
} }
.spinner--dark { .spinner--dark {
.rect { .rect {
background-color: var(--color-black); background-color: $lbry-black;
} }
} }
@ -46,7 +46,7 @@
margin-top: $spacing-vertical; margin-top: $spacing-vertical;
.rect { .rect {
background-color: var(--color-white); background-color: $lbry-white;
} }
} }
@ -70,6 +70,7 @@
100% { 100% {
transform: scaleY(0.4); transform: scaleY(0.4);
} }
20% { 20% {
transform: scaleY(1); transform: scaleY(1);
} }

258
src/renderer/scss/component/_syntax-highlighter.scss
View file

@ -1,147 +1,121 @@
/* /*!
Name: one-dark 1.1.1 Name: one-dark 1.1.1
Author: Török Ádám (http://github.com/Aerobird98) Author: Török Ádám (http://github.com/Aerobird98)
Original Atom One Dark Theme (https://github.com/atom/one-dark-ui & https://github.com/atom/one-dark-syntax) Original Atom One Dark Theme (https://github.com/atom/one-dark-ui & https://github.com/atom/one-dark-syntax)
*/ */
/* basic */ /* basic */
.CodeMirror.cm-s-one-dark { .CodeMirror {
color: #abb2bf; &.cm-s-one-dark {
} color: #abb2bf;
.CodeMirror.cm-s-one-dark .CodeMirror-lines { .CodeMirror-cursor {
color: #abb2bf !important; border-left: 2px solid #56b6c2;
background-color: transparent; }
}
.CodeMirror.cm-s-one-dark .CodeMirror-cursor { .CodeMirror-lines {
border-left: 2px solid #56b6c2 !important; background-color: transparent;
} }
/* addon: edit/machingbrackets.js & addon: edit/matchtags.js */
.CodeMirror.cm-s-one-dark .CodeMirror-matchingbracket, // addon: edit/machingbrackets.js & addon: edit/matchtags.js
.CodeMirror.cm-s-one-dark .CodeMirror-matchingtag { .CodeMirror-matchingbracket,
border-bottom: 2px solid #56b6c2; .CodeMirror-matchingtag {
color: #abb2bf !important; border-bottom: 2px solid #56b6c2;
background-color: transparent; color: #abb2bf !important;
} background-color: transparent;
.CodeMirror.cm-s-one-dark .CodeMirror-nonmatchingbracket { }
border-bottom: 2px solid #e06c75;
color: #abb2bf !important; .CodeMirror-nonmatchingbracket {
background-color: transparent; border-bottom: 2px solid #e06c75;
} color: #abb2bf !important;
/* addon: fold/foldgutter.js */ background-color: transparent;
.CodeMirror.cm-s-one-dark .CodeMirror-foldmarker, }
.CodeMirror.cm-s-one-dark .CodeMirror-foldgutter,
.CodeMirror.cm-s-one-dark .CodeMirror-foldgutter-open, // addon: fold/foldgutter.js
.CodeMirror.cm-s-one-dark .CodeMirror-foldgutter-folded { .CodeMirror-foldmarker,
border: none; .CodeMirror-foldgutter,
text-shadow: none; .CodeMirror-foldgutter-open,
color: #5c6370 !important; .CodeMirror-foldgutter-folded {
background-color: transparent; border: none;
} text-shadow: none;
/* addon: selection/active-line.js */ color: #5c6370 !important;
.CodeMirror.cm-s-one-dark .CodeMirror-activeline-background { background-color: transparent;
background-color: rgba(153, 187, 255, 0.04); }
}
/* basic syntax */ // addon: selection/active-line.js
.CodeMirror.cm-s-one-dark .cm-header { .CodeMirror-activeline-background {
color: #e06c75; background-color: rgba(153, 187, 255, 0.04);
} }
.CodeMirror.cm-s-one-dark .cm-quote {
color: #5c6370; // basic syntax
font-style: italic; .cm-atom,
} .cm-attribute,
.CodeMirror.cm-s-one-dark .cm-negative { .cm-number,
color: #e06c75; .cm-qualifier,
} .cm-strong {
.CodeMirror.cm-s-one-dark .cm-positive { color: #d19a66;
color: #e06c75; }
}
.CodeMirror.cm-s-one-dark .cm-strong { .cm-bracket,
color: #d19a66; .cm-meta,
font-weight: bold; .cm-punctuation,
} .cm-m-css.cm-property {
.CodeMirror.cm-s-one-dark .cm-header .cm-strong { color: #abb2bf;
color: #d19a66; }
font-weight: bold;
} .cm-builtin,
.CodeMirror.cm-s-one-dark .cm-em { .cm-error,
color: #c678dd; .cm-header,
font-style: italic; .cm-negative,
} .cm-positive,
.CodeMirror.cm-s-one-dark .cm-header .cm-em { .cm-tag,
color: #c678dd; .cm-variable {
font-style: italic; color: #e06c75;
} }
.CodeMirror.cm-s-one-dark .cm-tag {
color: #e06c75; .cm-comment,
} .cm-quote {
.CodeMirror.cm-s-one-dark .cm-attribute { color: #5c6370;
color: #d19a66; }
}
.CodeMirror.cm-s-one-dark .cm-link { .cm-def {
color: #98c379; color: #e5c07b;
border-bottom: solid 1px #98c379; }
}
.CodeMirror.cm-s-one-dark .cm-builtin { .cm-em,
color: #e06c75; .cm-keyword {
} color: #c678dd;
.CodeMirror.cm-s-one-dark .cm-keyword { }
color: #c678dd;
} .cm-comment,
.CodeMirror.cm-s-one-dark .cm-def { .cm-em,
color: #e5c07b; .cm-quote {
} /* original: #d19a66; */ font-style: italic;
.CodeMirror.cm-s-one-dark .cm-atom { }
color: #d19a66;
} .cm-link,
.CodeMirror.cm-s-one-dark .cm-number { .cm-string {
color: #d19a66; color: #98c379;
} }
.CodeMirror.cm-s-one-dark .cm-property {
color: #56b6c2; .cm-link {
} /* original: #abb2bf */ border-bottom: 1px solid #98c379;
.CodeMirror.cm-s-one-dark .cm-qualifier { }
color: #d19a66;
} .cm-operator,
.CodeMirror.cm-s-one-dark .cm-variable { .cm-property,
color: #e06c75; .cm-m-css.cm-atom,
} .cm-m-css.cm-builtin,
.CodeMirror.cm-s-one-dark .cm-string { .cm-m-lua.cm-variable {
color: #98c379; color: #56b6c2;
} }
.CodeMirror.cm-s-one-dark .cm-punctuation {
color: #abb2bf; .cm-strong {
} font-weight: bold;
.CodeMirror.cm-s-one-dark .cm-operator { }
color: #56b6c2;
} /* original: #abb2bf */ .cm-m-css.cm-variable {
.CodeMirror.cm-s-one-dark .cm-meta { color: #828997;
color: #abb2bf; }
} }
.CodeMirror.cm-s-one-dark .cm-bracket {
color: #abb2bf;
}
.CodeMirror.cm-s-one-dark .cm-comment {
color: #5c6370;
font-style: italic;
}
.CodeMirror.cm-s-one-dark .cm-error {
color: #e06c75;
}
/* css syntax corrections */
.CodeMirror.cm-s-one-dark .cm-m-css.cm-variable {
color: #828997;
}
.CodeMirror.cm-s-one-dark .cm-m-css.cm-property {
color: #abb2bf;
}
.CodeMirror.cm-s-one-dark .cm-m-css.cm-atom {
color: #56b6c2;
}
.CodeMirror.cm-s-one-dark .cm-m-css.cm-builtin {
color: #56b6c2;
}
/* lua syntax corrections */
.CodeMirror.cm-s-one-dark .cm-m-lua.cm-variable {
color: #56b6c2;
} }

109
src/renderer/scss/component/_table.scss
View file

@ -4,19 +4,21 @@ table.table,
max-width: 100%; max-width: 100%;
text-align: left; text-align: left;
tr td:first-of-type, tr {
tr th:first-of-type { td:first-of-type,
padding-left: $spacing-vertical * 2/3; th:first-of-type {
} padding-left: $spacing-vertical * 2/3;
}
tr td:last-of-type, td:last-of-type,
tr th:last-of-type { th:last-of-type {
padding-right: $spacing-vertical * 2/3; padding-right: $spacing-vertical * 2/3;
} }
tr th, th,
tr td { td {
font-size: 13px; font-size: 13px;
}
} }
th { th {
@ -27,7 +29,7 @@ table.table,
td { td {
font-family: 'metropolis-medium'; font-family: 'metropolis-medium';
color: var(--color-help); color: $lbry-gray-5;
padding: $spacing-vertical * 1/6 $spacing-vertical * 1/3; padding: $spacing-vertical * 1/6 $spacing-vertical * 1/3;
.btn:not(.btn--link) { .btn:not(.btn--link) {
@ -45,23 +47,27 @@ table.table,
} }
thead { thead {
color: var(--text-color); color: $lbry-black;
border-bottom: var(--table-border); border-bottom: 1px solid $lbry-gray-1;
} }
tbody { tbody {
tr { tr {
border-bottom: var(--table-item-border); border-bottom: 1px solid $lbry-gray-1; // "--table-item-border" does not exist
padding: 8px 0; padding: 8px 0;
&:nth-child(even) { &:nth-child(even) {
background-color: var(--table-item-odd); background-color: $lbry-gray-1;
} }
&:nth-child(odd) { &:nth-child(odd) {
background-color: var(--table-item-even); background-color: transparent;
} }
&.thead { &.thead {
background: none; background: none;
} }
td { td {
border: 0 none; border: 0 none;
} }
@ -69,40 +75,47 @@ table.table,
} }
} }
table.table--stretch { table {
width: 100%; &.table--help {
} td:nth-of-type(1) {
color: $lbry-black;
font-family: 'metropolis-semibold';
min-width: 130px;
}
table.table--help { td:nth-of-type(2) {
td:nth-of-type(1) { // Tourniquets text over 20vw
color: var(--text-color); max-width: 20vw;
font-family: 'metropolis-semibold'; overflow: hidden;
min-width: 130px; white-space: nowrap;
text-overflow: ellipsis;
color: $lbry-gray-5;
}
} }
td:nth-of-type(2) {
/*Tourniquets text over 20VW*/
max-width: 20vw;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: var(--color-help);
}
}
table.table--transactions { &.table--stretch {
td:nth-of-type(1) { width: 100%;
width: 25%;
} }
td:nth-of-type(2) {
width: 20%; &.table--transactions {
} td:nth-of-type(1) {
td:nth-of-type(3) { width: 25%;
width: 22.5%; }
}
td:nth-of-type(4) { td:nth-of-type(2) {
width: 17.5%; width: 20%;
} }
td:nth-of-type(5) {
width: 15%; td:nth-of-type(3) {
width: 22.5%;
}
td:nth-of-type(4) {
width: 17.5%;
}
td:nth-of-type(5) {
width: 15%;
}
} }
} }

2
src/renderer/scss/component/_time.scss
View file

@ -1,7 +1,7 @@
// All CSS for date & time ui // All CSS for date & time ui
.time { .time {
color: var(--color-help); color: $lbry-gray-5;
} }
.time--ago { .time--ago {

155
src/renderer/scss/component/_toggle.scss
View file

@ -10,6 +10,48 @@
user-select: none; user-select: none;
margin-bottom: auto; margin-bottom: auto;
margin-top: 2px; margin-top: 2px;
&:hover {
&:not(.react-toggle--disabled) {
.react-toggle-track {
background-color: $lbry-black;
}
}
}
}
.react-toggle--checked {
&:hover {
&:not(.react-toggle--disabled) {
.react-toggle-track {
background-color: $lbry-teal-5;
}
}
}
.react-toggle-track {
background-color: $lbry-teal-3;
}
.react-toggle-track-check {
opacity: 1;
transition: opacity 0.25s ease;
}
.react-toggle-track-x {
opacity: 0;
}
.react-toggle-thumb {
left: 22px;
border-color: $lbry-teal-3;
}
}
.react-toggle--disabled {
cursor: not-allowed;
opacity: 0.5;
transition: opacity 0.25s;
} }
.react-toggle-screenreader-only { .react-toggle-screenreader-only {
@ -23,77 +65,6 @@
width: 1px; width: 1px;
} }
.react-toggle--disabled {
cursor: not-allowed;
opacity: 0.5;
-webkit-transition: opacity 0.25s;
transition: opacity 0.25s;
}
.react-toggle-track {
width: 40px;
height: 19px;
padding: 0;
border-radius: 30px;
background-color: #4d4d4d;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
background-color: #000000;
}
.react-toggle--checked .react-toggle-track {
background-color: var(--input-switch-color);
}
.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
background-color: #158a88;
}
.react-toggle-track-check {
position: absolute;
width: 14px;
height: 10px;
top: 0px;
bottom: 0px;
margin-top: auto;
margin-bottom: auto;
line-height: 0;
left: 6px;
opacity: 0;
-webkit-transition: opacity 0.25s ease;
-moz-transition: opacity 0.25s ease;
transition: opacity 0.25s ease;
}
.react-toggle--checked .react-toggle-track-check {
opacity: 1;
-webkit-transition: opacity 0.25s ease;
-moz-transition: opacity 0.25s ease;
transition: opacity 0.25s ease;
}
.react-toggle-track-x {
position: absolute;
width: 10px;
height: 10px;
top: 0px;
bottom: 0px;
margin-top: auto;
margin-bottom: auto;
line-height: 0;
right: 10px;
opacity: 1;
transition: opacity 0.25s ease;
}
.react-toggle--checked .react-toggle-track-x {
opacity: 0;
}
.react-toggle-thumb { .react-toggle-thumb {
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0ms; transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0ms;
position: absolute; position: absolute;
@ -101,14 +72,46 @@
left: 1px; left: 1px;
width: 17px; width: 17px;
height: 17px; height: 17px;
border: 1px solid #4d4d4d; border: 1px solid $lbry-gray-5;
border-radius: 50%; border-radius: 50%;
background-color: #fafafa; background-color: $lbry-gray-1;
box-sizing: border-box; box-sizing: border-box;
transition: all 0.25s ease; transition: all 0.25s ease;
} }
.react-toggle--checked .react-toggle-thumb { .react-toggle-track {
left: 22px; width: 40px;
border-color: var(--input-switch-color); height: 19px;
padding: 0;
border-radius: 30px;
background-color: $lbry-gray-5;
transition: all 0.2s ease;
}
.react-toggle-track-check {
position: absolute;
width: 14px;
height: 10px;
top: 0;
bottom: 0;
margin-top: auto;
margin-bottom: auto;
line-height: 0;
left: 6px;
opacity: 0;
transition: opacity 0.25s ease;
}
.react-toggle-track-x {
position: absolute;
width: 10px;
height: 10px;
top: 0;
bottom: 0;
margin-top: auto;
margin-bottom: auto;
line-height: 0;
right: 10px;
opacity: 1;
transition: opacity 0.25s ease;
} }

12
src/renderer/scss/component/_tooltip.scss
View file

@ -20,10 +20,10 @@
/* Tooltip text */ /* Tooltip text */
.tooltip { .tooltip {
.tooltip__body { .tooltip__body {
background-color: var(--tooltip-bg); background-color: $lbry-gray-5;
font-family: 'metropolis-medium'; font-family: 'metropolis-medium';
font-size: 12px; font-size: 12px;
color: var(--tooltip-color); color: $lbry-white;
border-radius: 8px; border-radius: 8px;
position: absolute; position: absolute;
z-index: 1; z-index: 1;
@ -68,7 +68,7 @@
top: 100%; top: 100%;
left: 50%; left: 50%;
margin-left: -5px; margin-left: -5px;
border-color: var(--tooltip-bg) transparent transparent transparent; border-color: $lbry-gray-5 transparent transparent transparent;
} }
} }
} }
@ -82,7 +82,7 @@
top: 17px; top: 17px;
right: 100%; /* To the left of the tooltip */ right: 100%; /* To the left of the tooltip */
margin-top: -5px; margin-top: -5px;
border-color: transparent var(--tooltip-bg) transparent transparent; border-color: transparent $lbry-gray-5 transparent transparent;
} }
} }
} }
@ -101,7 +101,7 @@
bottom: 100%; bottom: 100%;
left: 50%; left: 50%;
margin-left: -5px; margin-left: -5px;
border-color: transparent transparent var(--tooltip-bg) transparent; border-color: transparent transparent $lbry-gray-5 transparent;
} }
} }
} }
@ -114,7 +114,7 @@
top: 17px; top: 17px;
left: 100%; left: 100%;
margin-top: -5px; margin-top: -5px;
border-color: transparent transparent transparent var(--tooltip-bg); border-color: transparent transparent transparent $lbry-gray-5;
} }
} }

50
static/themes/dark.css
View file

@ -5,46 +5,46 @@
--color-canvas: transparent; --color-canvas: transparent;
--color-help: #8696AF; --color-help: #8696AF;
--color-download: rgba(255, 255, 255, 0.75); --color-download: rgba(255, 255, 255, 0.75);
--color-download-overlay: var(--color-black); --color-download-overlay: $lbry-black;
--color-bg: var(--color-blue-grey); --color-bg: var(--color-blue-grey);
--color-bg-alt: #2D3D56; --color-bg-alt: #2D3D56;
--color-placeholder: var(--color-bg-alt); --color-placeholder: $lbry-gray-1;
--color-credit-free: var(--color-secondary); --color-credit-free: $lbry-blue-2;
/* Text */ /* Text */
--text-color: var(--color-text-white); --text-color: var(--color-text-white);
--text-help-color: var(--color-help); --text-help-color: $lbry-gray-5;
/* Form */ /* Form */
--form-label-color: var(--color-white); --form-label-color: $lbry-white;
/* Input */ /* Input */
--input-bg: transparent; --input-bg: transparent;
--input-label-color: var(--color-help); --input-label-color: $lbry-gray-5;
--input-color: var(--text-color); --input-color: $lbry-black;
--input-border-size: 1px; --input-border-size: 1px;
--input-border-color: rgba(255,255,255, 0.5); --input-border-color: rgba(255,255,255, 0.5);
--input-hover-border-color: rgba(255, 255, 255, 1); --input-hover-border-color: rgba(255, 255, 255, 1);
--input-copyable-bg: var(--color-blue-grey); --input-copyable-bg: var(--color-blue-grey);
--input-copyable-color: #8696AF; --input-copyable-color: #8696AF;
--input-copyable-border: #53637C; --input-copyable-border: #53637C;
--input-select-bg-color: var(--color-bg-alt); --input-select-bg-color: $lbry-gray-1;
--input-select-color: var(--color-white); --input-select-color: $lbry-white;
/* input:disabled */ /* input:disabled */
--input-disabled-border-color: rgba(255, 255, 255, 0.42); --input-disabled-border-color: rgba(255, 255, 255, 0.42);
--input-disabled-color: rgba(255, 255, 255, 0.54); --input-disabled-color: rgba(255, 255, 255, 0.54);
/* Button */ /* Button */
--btn-bg-primary: var(--color-primary); --btn-bg-primary: $lbry-teal-3;
--btn-color-primary: var(--color-white); --btn-color-primary: $lbry-white;
--btn-bg-primary-hover: var(--color-primary-light); --btn-bg-primary-hover: var(--color-primary-light);
--btn-bg-alt: #13233C; --btn-bg-alt: #13233C;
--btn-color-alt: var(--text-color); --btn-color-alt: $lbry-black;
--btn-home-bg-color: #44548F; --btn-home-bg-color: #44548F;
/* Header */ /* Header */
--header-bg: var(--color-white); --header-bg: $lbry-white;
--header-color: var(--color-text); --header-color: var(--color-text);
--header-active-color: rgba(0, 0, 0, 0.85); --header-active-color: rgba(0, 0, 0, 0.85);
--header-button-bg: transparent; --header-button-bg: transparent;
@ -53,11 +53,11 @@
/* Header */ /* Header */
--header-color: #CCC; --header-color: #CCC;
--header-active-color: var(--color-white); --header-active-color: $lbry-white;
--header-button-hover-bg: var(--color-bg-alt); --header-button-hover-bg: $lbry-gray-1;
/* Header -> search */ /* Header -> search */
--search-color: var(--color-white); --search-color: $lbry-white;
--search-bg-color: rgb(58, 74, 99); --search-bg-color: rgb(58, 74, 99);
--search-active-bg-color: #13233C; --search-active-bg-color: #13233C;
--search-active-shadow: 0 6px 9px -2px var(--color-grey--dark); --search-active-shadow: 0 6px 9px -2px var(--color-grey--dark);
@ -69,28 +69,28 @@
--nav-bg-color: #0D102F; --nav-bg-color: #0D102F;
/* Table */ /* Table */
--table-border: 1px solid var(--color-bg-alt); --table-border: 1px solid $lbry-gray-1;
--table-item-odd: var(--color-bg-alt); --table-item-odd: $lbry-gray-1;
/* Card */ /* Card */
--card-bg: #13233C; --card-bg: #13233C;
--card-radius: 3px; --card-radius: 3px;
--card-text-color: var(--color-help); --card-text-color: $lbry-gray-5;
--card-wallet-color: var(--text-color-inverse); --card-wallet-color: $lbry-white;
--success-msg-color: var(--color-primary-light); --success-msg-color: var(--color-primary-light);
--success-msg-border:var(--color-primary); --success-msg-border:$lbry-teal-3;
--success-msg-bg: var(--color-bg); --success-msg-bg: rgba($lbry-gray-1, 0.5);
/* Modal */ /* Modal */
--modal-bg: var(--card-bg); --modal-bg: $lbry-white;
--modal-overlay-bg: rgba(32,48,73, 0.75); --modal-overlay-bg: rgba(32,48,73, 0.75);
--modal-border: 1px solid rgba(0, 0, 0, 0.25); --modal-border: 1px solid rgba(0, 0, 0, 0.25);
--modal-btn-bg-color: var(--color-bg-alt); --modal-btn-bg-color: $lbry-gray-1;
/* Scrollbar */ /* Scrollbar */
--scrollbar-thumb-bg: rgba(255, 255, 255, 0.20); --scrollbar-thumb-bg: rgba(255, 255, 255, 0.20);
--scrollbar-thumb-hover-bg: #8696AF; --scrollbar-thumb-hover-bg: #8696AF;
/* Shadows */ /* Shadows */
--box-shadow-header: 0px 6px 20px 1px rgba(0, 0, 0, 0.2); --box-shadow-header: 0 6px 20px 1px rgba(0, 0, 0, 0.2);
} }