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

Merge pull request #1269 from lbryio/dark

Browse source 
Dark
This commit is contained in:
Sean Yesmunt 2018-04-17 02:32:41 -04:00 • committed by GitHub
commit baff4e3c61
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
17 changed files with 209 additions and 133 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
CHANGELOG.md
View file

@ -10,14 +10,18 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/).
* Build for both architectures (x86 and x64) for Windows ([#1262](https://github.com/lbryio/lbry-app/pull/1262)) * Build for both architectures (x86 and x64) for Windows ([#1262](https://github.com/lbryio/lbry-app/pull/1262))
* Add referral FAQ to Invites screen([#1314](https://github.com/lbryio/lbry-app/pull/1314)) * Add referral FAQ to Invites screen([#1314](https://github.com/lbryio/lbry-app/pull/1314))
* Show exact wallet balance on mouse hover over ([#1305](https://github.com/lbryio/lbry-app/pull/1305)) * Show exact wallet balance on mouse hover over ([#1305](https://github.com/lbryio/lbry-app/pull/1305))
* New dark mode ([#1269](https://github.com/lbryio/lbry-app/pull/1269))
### Changed ### Changed
* Add flair to snackbar ([#1313](https://github.com/lbryio/lbry-app/pull/1313)) * Add flair to snackbar ([#1313](https://github.com/lbryio/lbry-app/pull/1313))
### Fixed ### Fixed
* Black screen on macOS after maximizing LBRY and then closing ([#1235](https://github.com/lbryio/lbry-app/pull/1235)) * Black screen on macOS after maximizing LBRY and then closing ([#1235](https://github.com/lbryio/lbry-app/pull/1235))
### Fixed
* Black screen on macOS after maximizing LBRY and then closing ([#1235](https://github.com/lbryio/lbry-app/pull/1235))
* Fix dark theme ([#1034](https://github.com/lbryio/lbry-app/issues/1034))
* Fix download percentage indicator overlay ([#1271](https://github.com/lbryio/lbry-app/issues/1271))
## [0.21.2] - 2018-03-22 ## [0.21.2] - 2018-03-22

1
src/renderer/component/common/icon.jsx
View file

@ -8,7 +8,6 @@ const RED_COLOR = '#e2495e';
type Props = { type Props = {
icon: string, icon: string,
size?: number,
}; };
class IconComponent extends React.PureComponent<Props> { class IconComponent extends React.PureComponent<Props> {

1
src/renderer/component/header/view.jsx
View file

@ -53,6 +53,7 @@ const Header = (props: Props) => {
<Button <Button
uppercase uppercase
button="primary" button="primary"
className="btn--header-publish"
onClick={() => navigate('/publish')} onClick={() => navigate('/publish')}
icon={icons.UPLOAD} icon={icons.UPLOAD}
label={isUpgradeAvailable ? '' : __('Publish')} label={isUpgradeAvailable ? '' : __('Publish')}

12
src/renderer/component/theme/view.jsx
View file

@ -3,15 +3,11 @@ import React from 'react';
const Theme = props => { const Theme = props => {
const { themePath } = props; const { themePath } = props;
// Force light mode while until dark mode is ready if (!themePath) {
// This is so we don't have to change users settings for them return null;
return null; }
// if (!themePath) { return <link href={themePath} rel="stylesheet" type="text/css" media="screen,print" />;
// return null;
// }
//
// return <link href={themePath} rel="stylesheet" type="text/css" media="screen,print" />;
}; };
export default Theme; export default Theme;

48
src/renderer/page/settings/view.jsx
View file

@ -274,31 +274,29 @@ class SettingsPage extends React.PureComponent<Props, State> {
</div> </div>
</section> </section>
{ {
// Hiding this for now until we update the dark mode styles <section className="card card--section">
// <section className="card card--section"> <div className="card__title">{__('Theme')}</div>
// <div className="card__title">{__('Theme')}</div> <FormField
// <FormField name="theme_select"
// name="theme_select" type="select"
// type="select" onChange={this.onThemeChange}
// onChange={this.onThemeChange} value={currentTheme}
// value={currentTheme} disabled={automaticDarkModeEnabled}
// disabled={automaticDarkModeEnabled} >
// > {themes.map(theme => (
// {themes.map(theme => ( <option key={theme} value={theme}>
// <option key={theme} value={theme}> {theme}
// {theme} </option>
// </option> ))}
// ))} </FormField>
// </FormField> <FormField
// type="checkbox"
// <FormField name="automatic_dark_mode"
// type="checkbox" onChange={e => this.onAutomaticDarkModeChange(e.target.checked)}
// name="automatic_dark_mode" checked={automaticDarkModeEnabled}
// onChange={e => this.onAutomaticDarkModeChange(e.target.checked)} postfix={__('Automatic dark mode (9pm to 8am)')}
// checked={automaticDarkModeEnabled} />
// postfix={__('Automatic dark mode (9pm to 8am)')} </section>
// />
// </section>
} }
<section className="card card--section"> <section className="card card--section">
<div className="card__title">{__('Application Cache')}</div> <div className="card__title">{__('Application Cache')}</div>

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

@ -95,7 +95,10 @@ input {
border: 1px dashed var(--input-copyable-border); border: 1px dashed var(--input-copyable-border);
} }
&:not(.input-copyable):not(.wunderbar__input):not(:placeholder-shown) { &:not(.input-copyable):not(.wunderbar__input):not(:placeholder-shown):not(:disabled) {
&:hover {
border-color: var(--input-hover-border-color);
}
border-bottom: var(--input-border-size) solid var(--input-border-color); border-bottom: var(--input-border-size) solid var(--input-border-color);
} }
@ -107,6 +110,7 @@ input {
} }
input::placeholder { input::placeholder {
color: var(--input-placeholder-color);
opacity: 0.5; opacity: 0.5;
} }

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

@ -16,7 +16,7 @@ $large-breakpoint: 1760px;
--video-aspect-ratio: 56.25%; // 9 x 16 --video-aspect-ratio: 56.25%; // 9 x 16
--snack-bar-width: 756px; --snack-bar-width: 756px;
/* Colors */ /* Colors: Brand */
--color-white: #fff; --color-white: #fff;
--color-black: #000; --color-black: #000;
--color-grey: #d6d6d6; --color-grey: #d6d6d6;
@ -34,28 +34,27 @@ $large-breakpoint: 1760px;
--color-green: #399483; --color-green: #399483;
--color-green-light: #effbe4; --color-green-light: #effbe4;
--color-green-blue: #2ec1a8; --color-green-blue: #2ec1a8;
/* Colors */
--color-divider: #e3e3e3; --color-divider: #e3e3e3;
--text-color: var(--color-black);
--text-color-inverse: var(--color-white);
--color-dark-overlay: rgba(32, 32, 32, 0.9);
--color-help: rgba(0, 0, 0, 0.54); --color-help: rgba(0, 0, 0, 0.54);
--color-error: #a94442; --color-error: #a94442;
--color-download: var(--color-white); --color-download: var(--color-white);
--color-download-overlay: var(--color-black); --color-download-overlay: var(--color-black);
--color-bg: #fafafa; --color-bg: #fafafa;
--color-bg-alt: var(--color-grey-light); --color-bg-alt: var(--color-grey-light);
--color-placeholder: #ececec; --color-placeholder: var(--color-grey);
--color-nav-bg: var(--color-grey-light); --color-search-placeholder: var(--color-placeholder);
/* Shadows */ /* Shadows */
--box-shadow-layer: 0 4px 9px -2px var(--color-grey); --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: 0px 10px 20px rgba(0, 0, 0, 0.03); --box-shadow-wunderbar: 0 10px 20px rgba(0, 0, 0, 0.03);
/* Text */ /* Text */
--text-help-color: #eee; --text-color: var(--color-black);
--text-color-inverse: var(--color-white);
--text-help-color: var(--color-help);
--text-max-width: 660px; --text-max-width: 660px;
--text-link-padding: 4px; --text-link-padding: 4px;
--text-selection-bg: rgba(saturate(lighten(#155b4a, 20%), 20%), 1); // temp color --text-selection-bg: rgba(saturate(lighten(#155b4a, 20%), 20%), 1); // temp color
@ -70,7 +69,7 @@ $large-breakpoint: 1760px;
--input-color: var(--text-color); --input-color: var(--text-color);
--input-border-size: 1px; --input-border-size: 1px;
--input-border-color: var(--color-grey-dark); --input-border-color: var(--color-grey-dark);
--input-copyable-bg: var(--color-grey-light); --input-copyable-bg: #f6f6f6;
--input-copyable-color: var(--color-grey-dark); --input-copyable-color: var(--color-grey-dark);
--input-copyable-border: var(--color-grey); --input-copyable-border: var(--color-grey);
@ -80,8 +79,9 @@ $large-breakpoint: 1760px;
/* 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: rgba(0, 0, 0, 0.42); --input-placeholder-color: var(--color-help);
--input-placeholder-opacity: 1; --input-placeholder-opacity: 1;
/* Select */ /* Select */
@ -99,6 +99,7 @@ $large-breakpoint: 1760px;
--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-radius: 20px; --btn-radius: 20px;
--btn-height: 36px; --btn-height: 36px;
@ -113,20 +114,30 @@ $large-breakpoint: 1760px;
--header-height: $spacing-width * 3; --header-height: $spacing-width * 3;
--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 -> search */ /* Header -> search */
--search-color: #666; --search-color: #666;
--search-bg-color: #fff; --search-bg-color: #fff;
--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-active-color: var(--color-black);
--search-modal-input-height: 70px; --search-modal-input-height: 70px;
/* Nav */
--nav-color: var(--color-grey-dark);
--nav-bg-color: var(--color-grey-light);
/* Table */ /* Table */
--table-border: 1px solid #e2e2e2; --table-border: 1px solid var(--color-grey-light);
--table-item-even: white; --table-item-odd: var(--color-grey-light);
--table-item-odd: #f4f4f4; --table-item-even: transparent;
/* Card */ /* Card */
--card-bg: var(--color-white);
--card-text-color: var(--color-grey-dark);
--card-radius: 2px; --card-radius: 2px;
--card-margin: $spacing-vertical * 2/3; --card-margin: $spacing-vertical * 2/3;
--card-wallet-color: var(--text-color-inverse); --card-wallet-color: var(--text-color-inverse);
@ -140,8 +151,10 @@ $large-breakpoint: 1760px;
/* Modal */ /* Modal */
--modal-width: 440px; --modal-width: 440px;
--modal-bg: var(--color-bg); --modal-bg: var(--color-bg);
--modal-overlay-bg: rgba(#f5f5f5, 0.75); // --color-canvas: #F5F5F5 --modal-fullscreen-bg: var(--color-bg);
--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);
// /* Tooltip */ // /* Tooltip */
--tooltip-width: 300px; --tooltip-width: 300px;

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

@ -135,6 +135,7 @@ button:disabled {
*/ */
.btn.btn--home-nav { .btn.btn--home-nav {
background-color: var(--btn-home-bg-color);
box-shadow: none; box-shadow: none;
.btn__content { .btn__content {
@ -145,6 +146,10 @@ button:disabled {
.btn.btn--arrow { .btn.btn--arrow {
width: var(--btn-arrow-width); width: var(--btn-arrow-width);
&:hover:not(:disabled) {
color: var(--text-color);
}
&:disabled { &:disabled {
opacity: 0.3; opacity: 0.3;
} }
@ -158,9 +163,14 @@ button:disabled {
} }
} }
.btn.btn--header-publish {
background-color: var(--header-primary-color);
}
.btn.btn--header-balance { .btn.btn--header-balance {
font-family: 'metropolis-medium'; font-family: 'metropolis-medium';
font-size: 13px; font-size: 13px;
color: var(--header-primary-color);
@media only screen and (min-width: $medium-breakpoint) { @media only screen and (min-width: $medium-breakpoint) {
font-size: 18px; font-size: 18px;
@ -171,15 +181,14 @@ button:disabled {
} }
.btn__label--balance { .btn__label--balance {
color: var(--color-grey-dark); color: var(--text-help-color);
&:hover {
color: var(--text-color);
}
} }
&:hover { &:hover {
background-color: transparent; background-color: transparent;
.btn__label--balance {
color: var(--btn-primary-bg);
}
} }
} }
@ -188,6 +197,7 @@ button:disabled {
color: var(--color-white); color: var(--color-white);
opacity: 0.8; opacity: 0.8;
border-radius: var(--btn-radius); border-radius: var(--btn-radius);
width: var(--btn-height);
height: var(--btn-height); height: var(--btn-height);
padding: 10px; padding: 10px;
} }

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

@ -10,9 +10,10 @@
} }
.card--section { .card--section {
background-color: var(--color-white); background-color: var(--card-bg);
padding: $spacing-vertical; padding: $spacing-vertical;
margin-top: $spacing-vertical * 2/3; margin-top: $spacing-vertical * 2/3;
box-shadow: var(--box-shadow-layer);
} }
.card--small { .card--small {
@ -49,6 +50,7 @@
color: var(--card-wallet-color); color: var(--card-wallet-color);
justify-content: space-between; justify-content: space-between;
.card__title,
.card__subtitle { .card__subtitle {
color: var(--card-wallet-color); color: var(--card-wallet-color);
} }
@ -76,10 +78,13 @@
background-color: var(--color-error); background-color: var(--color-error);
} }
.card__title-identity {
color: var(--text-color);
}
.card__title-identity--file { .card__title-identity--file {
display: flex; display: flex;
align-items: center; align-items: center;
.credit-amount, .credit-amount,
.icon { .icon {
margin-top: $spacing-vertical * 1/3; margin-top: $spacing-vertical * 1/3;
@ -95,6 +100,7 @@
.card__title { .card__title {
font-size: 18px; font-size: 18px;
color: var(--text-color);
} }
.card__title--file { .card__title--file {
@ -116,9 +122,9 @@
} }
.card__subtitle { .card__subtitle {
color: var(--color-help);
font-size: 14px; font-size: 14px;
font-family: 'metropolis-medium'; font-family: 'metropolis-medium';
color: var(--card-text-color);
.icon { .icon {
margin-left: $spacing-vertical * 1/3; margin-left: $spacing-vertical * 1/3;
@ -175,7 +181,7 @@
} }
.card__subtext-title { .card__subtext-title {
color: var(--color-black); color: var(--text-color);
font-size: calc(var(--font-size-subtext-multiple) * 1.5em); font-size: calc(var(--font-size-subtext-multiple) * 1.5em);
&:not(:first-of-type) { &:not(:first-of-type) {
@ -184,7 +190,6 @@
} }
.card__subtext { .card__subtext {
color: var(--color-grey-dark);
font-size: calc(var(--font-size-subtext-multiple) * 1em); font-size: calc(var(--font-size-subtext-multiple) * 1em);
padding-top: $spacing-vertical * 1/3; padding-top: $spacing-vertical * 1/3;
word-break: break-word; word-break: break-word;

3
src/renderer/scss/component/_file-download.scss
View file

@ -5,8 +5,11 @@
.file-download { .file-download {
position: relative; position: relative;
background-color: var(--color-black);
border-radius: var(--btn-radius);
color: var(--color-download); color: var(--color-download);
font-size: 12px; font-size: 12px;
opacity: 0.8;
font-family: 'metropolis-medium'; font-family: 'metropolis-medium';
} }

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

@ -67,11 +67,11 @@
} }
.form-field__label { .form-field__label {
color: var(--color-black); color: var(--form-label-color);
} }
.form-field__help { .form-field__help {
color: var(--color-grey-dark); color: var(--color-help);
padding-top: $spacing-vertical * 1/3; padding-top: $spacing-vertical * 1/3;
} }

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

@ -22,7 +22,6 @@
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border: var(--modal-border); border: var(--modal-border);
background: var(--modal-bg); background: var(--modal-bg);
overflow: auto; overflow: auto;
@ -31,6 +30,11 @@
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 {
// Set modal buttons bg color
background-color: var(--modal-btn-bg-color);
}
} }
.modal--fullscreen { .modal--fullscreen {
@ -40,7 +44,7 @@
right: 0; right: 0;
bottom: 0; bottom: 0;
padding: $spacing-vertical; padding: $spacing-vertical;
background: var(--modal-bg); background: var(--modal-fullscreen-bg);
overflow-y: scroll; overflow-y: scroll;
.main { .main {
@ -54,7 +58,7 @@
// Slide down isn't possible without doing a lot of re-work to the modal component // Slide down isn't possible without doing a lot of re-work to the modal component
.ReactModal__Overlay { .ReactModal__Overlay {
.modal--fullscreen { .modal--fullscreen {
transition: height var(--animation-style) var(--animation-style); transition: height var(--animation-duration) var(--animation-style);
height: 0; height: 0;
} }

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

@ -1,13 +1,14 @@
.nav { .nav {
grid-area: nav; grid-area: nav;
background-color: var(--color-nav-bg); background-color: var(--nav-bg-color);
padding: $spacing-width; padding: $spacing-width;
color: var(--nav-color);
hr { hr {
width: 24px; width: 24px;
margin: 36px 0; margin: 36px 0;
// width: 40px; // width: 40px;
border: solid 1px var(--color-grey); border: solid 1px var(--color-divider);
margin: $spacing-vertical $spacing-vertical * 2/3; margin: $spacing-vertical $spacing-vertical * 2/3;
} }
} }
@ -28,7 +29,7 @@
.nav__link { .nav__link {
// padding-top: $spacing-vertical / 3; // padding-top: $spacing-vertical / 3;
color: var(--color-grey-dark); color: inherit;
white-space: nowrap; white-space: nowrap;
.btn__label { .btn__label {
@ -48,7 +49,7 @@
} }
.btn:hover { .btn:hover {
color: var(--color-black); color: var(--text-color);
} }
} }
@ -70,10 +71,11 @@
} }
.nav__link--active { .nav__link--active {
color: var(--color-black); color: var(--text-color);
} }
.nav__sub-links { .nav__sub-links {
color: var(--nav-color);
padding-bottom: $spacing-vertical * 1/3; padding-bottom: $spacing-vertical * 1/3;
} }

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

@ -1,5 +1,6 @@
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 8px; width: 8px;
height: 8px;
overflow: auto; overflow: auto;
} }

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

@ -31,21 +31,24 @@
border-bottom: none; border-bottom: none;
&:focus { &:focus {
background-color: var(--color-bg); background-color: var(--search-active-bg-color);
border-radius: 0; border-radius: 0;
border-bottom: 1px solid var(--color-grey); border-bottom: 1px solid var(--color-divider);
box-shadow: var(--box-shadow-button); box-shadow: var(--box-shadow-button);
} }
} }
.wunderbar__menu { .wunderbar__menu {
max-width: 100px; max-width: 100px;
border-radius: 0 0 3px 3px !important;
padding: 0 !important;
background: transparent !important;
overflow-x: hidden; overflow-x: hidden;
} }
.wunderbar__suggestion { .wunderbar__suggestion {
padding: 5px 10px; padding: 5px 10px;
background-color: var(--header-bg); background-color: var(--search-bg-color);
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-items: center; align-items: center;
@ -53,7 +56,7 @@
font-family: 'metropolis-medium'; font-family: 'metropolis-medium';
&:not(:first-of-type) { &:not(:first-of-type) {
border-top: 1px solid var(--color-divider); border-top: 1px solid var(--search-item-border-color);
} }
} }
@ -69,6 +72,7 @@
} }
.wunderbar__active-suggestion { .wunderbar__active-suggestion {
color: var(--search-item-active-color);
background-color: var(--color-secondary); background-color: var(--color-secondary);
} }
@ -80,10 +84,9 @@
.search__input { .search__input {
font-family: 'metropolis-bold'; font-family: 'metropolis-bold';
background: var(--color-black);
font-size: var(--search-modal-input-height); font-size: var(--search-modal-input-height);
color: var(--color-black); color: var(--search-color);
background: var(--modal-bg); background: transparent;
width: 100%; width: 100%;
} }
@ -93,5 +96,8 @@
.search-result__column { .search-result__column {
flex: 0 0 270px; flex: 0 0 270px;
.card__media {
background-color: var(--color-search-placeholder);
}
} }
} }

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

@ -15,12 +15,14 @@ table.table {
} }
thead { thead {
border-bottom: 1px solid var(--color-grey); color: var(--text-color);
border-bottom: var(--table-border);
} }
th, th,
td { td {
font-size: 13px; font-size: 13px;
padding: 8px 0;
} }
th { th {
@ -29,7 +31,7 @@ table.table {
td { td {
font-family: 'metropolis-medium'; font-family: 'metropolis-medium';
color: var(--color-grey-dark); color: var(--color-help);
padding: $spacing-vertical * 1/6 0; padding: $spacing-vertical * 1/6 0;
.btn:not(.btn--link) { .btn:not(.btn--link) {
@ -48,6 +50,8 @@ table.table {
tbody { tbody {
tr { tr {
border-bottom: var(--table-item-border);
padding: 8px 0;
&:nth-child(even):not(.odd) { &:nth-child(even):not(.odd) {
background-color: var(--table-item-odd); background-color: var(--table-item-odd);
} }
@ -70,7 +74,7 @@ table.table--stretch {
table.table--help { table.table--help {
td:nth-of-type(1) { td:nth-of-type(1) {
color: var(--color-black); color: var(--text-color);
font-family: 'metropolis-semibold'; font-family: 'metropolis-semibold';
min-width: 130px; min-width: 130px;
} }

126
static/themes/dark.css
View file

@ -1,65 +1,91 @@
:root { :root {
/* Colors */
--color-primary: #009688;
--color-canvas: #0f1517;
--color-bg: #1a2327;
--color-bg-alt: #314048;
--color-help: rgba(255,255,255, 0.5);
--color-error: #a94442;
--color-load-screen-text: #FFF;
--color-money: #1DE9B6;
--color-meta-light: #757575;
--color-dark-overlay: rgba(15, 21, 23, 0.85);
--color-download: rgba(255, 255, 255, 0.75);
/* Colors */
/* Text */ --color-divider: #53637C;;
--text-color: #FFF; --color-canvas: transparent;
--text-selection-bg: rgba(0,150,136, 0.95); --color-help: #8696AF;
--color-download: rgba(255, 255, 255, 0.75);
--color-download-overlay: var(--color-black);
--color-bg: #203049;
--color-bg-alt: #13233C;
--color-placeholder: var(--color-bg-alt);
/* Form */ /* Text */
--form-label-color: rgba(255, 255, 255, 0.70); --text-color: #FFF;
--text-help-color: var(--color-help);
--text-selection-color: #fff;
/* Input */ /* Form */
--input-bg: transparent; --form-label-color: #FFF;
--input-border-color: rgba(255,255,255, 0.70);
--input-hover-border-color: rgba(255, 255, 255, 1);
/* input:placeholder */ /* Input */
--input-placeholder-color: rgba(255,255,255, 0.5); --input-bg: transparent;
--input-label-color: var(--color-help);
--input-color: var(--text-color);
--input-border-size: 1px;
--input-border-color: rgba(255,255,255, 0.5);
--input-hover-border-color: rgba(255, 255, 255, 1);
--input-copyable-bg: #203049;
--input-copyable-color: #8696AF;
--input-copyable-border: #53637C;
/* input:disabled */ /* input:disabled */
--input-disabled-color: rgba(255, 255, 255, 0.50); --input-disabled-border-color: rgba(255, 255, 255, 0.42);
--input-disabled-border-color: rgba(255, 255, 255, 0.70); --input-disabled-color: rgba(255, 255, 255, 0.54);
/* Search */ /* Button */
--search-bg: rgba(0,0,0, 0.45); --btn-bg-primary: var(--color-primary);
--search-color: #757575; --btn-color-primary: var(--color-white);
--search-active-bg: rgba(0,0,0, 0.75); --btn-bg-primary-hover: var(--color-primary-light);
--search-border: 1px solid rgba(0,0,0, 0.25); --btn-bg-alt: #13233C;
--btn-color-alt: var(--text-color);
--btn-home-bg-color: #44548F;
/* Tab */ /* Header */
--tab-color: rgba(255,255,255, 0.5) ; --header-bg: var(--color-white);
--tab-active-color: rgba(255,255,255, 0.75); --header-color: var(--color-text);
--header-active-color: rgba(0, 0, 0, 0.85);
--header-button-bg: transparent;
--header-button-hover-bg: rgba(100, 100, 100, 0.15);
--header-primary-color: #8165B0;
/* Header */ /* Header */
--header-color: #CCC; --header-color: #CCC;
--header-active-color: #FFF; --header-active-color: var(--color-white);
--header-button-hover-bg: var(--color-bg-alt); --header-button-hover-bg: var(--color-bg-alt);
/* Table */ /* Header -> search */
--table-border: 0; --search-color: var(--color-white);
--table-item-even: var(--color-bg-alt); --search-bg-color: rgb(58, 74, 99);
--table-item-odd: transparent; --search-active-bg-color: #13233C;
--search-active-shadow: 0 6px 9px -2px var(--color-grey--dark);
--search-modal-input-height: 70px;
/* Modal */ /* Nav */
--modal-overlay-bg: var(--color-dark-overlay); --nav-color: #44548F;
--modal-border: 1px solid rgba(0, 0, 0, 0.25); --nav-bg-color: #0D102F;
/* Scrollbar */ /* Table */
--scrollbar-thumb-bg: rgba(255, 255, 255, 0.20); --table-border: 1px solid var(--color-bg-alt);
--scrollbar-thumb-hover-bg: rgba(255, 255, 255, 0.35); --table-item-odd: var(--color-bg-alt);
/* Divider */ /* Card */
--divider: 1px solid rgba(255, 225, 225, 0.12); --card-bg: #13233C;
--card-radius: 3px;
--card-text-color: var(--color-help);
--card-wallet-color: var(--text-color-inverse);
--success-msg-color: var(--color-primary-light);
--success-msg-border:var(--color-primary);
--success-msg-bg: var(--color-bg);
/* Modal */
--modal-bg: var(--card-bg);
--modal-overlay-bg: rgba(32,48,73, 0.75);
--modal-border: 1px solid rgba(0, 0, 0, 0.25);
--modal-btn-bg-color: #2D3D56;
/* Scrollbar */
--scrollbar-thumb-bg: rgba(255, 255, 255, 0.20);
--scrollbar-thumb-hover-bg: #8696AF;
} }