commit
baff4e3c61
17 changed files with 209 additions and 133 deletions
|
@ -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))
|
||||
* 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))
|
||||
* New dark mode ([#1269](https://github.com/lbryio/lbry-app/pull/1269))
|
||||
|
||||
### Changed
|
||||
|
||||
* Add flair to snackbar ([#1313](https://github.com/lbryio/lbry-app/pull/1313))
|
||||
|
||||
### Fixed
|
||||
* 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
|
||||
|
|
|
@ -8,7 +8,6 @@ const RED_COLOR = '#e2495e';
|
|||
|
||||
type Props = {
|
||||
icon: string,
|
||||
size?: number,
|
||||
};
|
||||
|
||||
class IconComponent extends React.PureComponent<Props> {
|
||||
|
|
|
@ -53,6 +53,7 @@ const Header = (props: Props) => {
|
|||
<Button
|
||||
uppercase
|
||||
button="primary"
|
||||
className="btn--header-publish"
|
||||
onClick={() => navigate('/publish')}
|
||||
icon={icons.UPLOAD}
|
||||
label={isUpgradeAvailable ? '' : __('Publish')}
|
||||
|
|
|
@ -3,15 +3,11 @@ import React from 'react';
|
|||
const Theme = props => {
|
||||
const { themePath } = props;
|
||||
|
||||
// Force light mode while until dark mode is ready
|
||||
// This is so we don't have to change users settings for them
|
||||
return null;
|
||||
if (!themePath) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// if (!themePath) {
|
||||
// return null;
|
||||
// }
|
||||
//
|
||||
// return <link href={themePath} rel="stylesheet" type="text/css" media="screen,print" />;
|
||||
return <link href={themePath} rel="stylesheet" type="text/css" media="screen,print" />;
|
||||
};
|
||||
|
||||
export default Theme;
|
||||
|
|
|
@ -274,31 +274,29 @@ class SettingsPage extends React.PureComponent<Props, State> {
|
|||
</div>
|
||||
</section>
|
||||
{
|
||||
// Hiding this for now until we update the dark mode styles
|
||||
// <section className="card card--section">
|
||||
// <div className="card__title">{__('Theme')}</div>
|
||||
// <FormField
|
||||
// name="theme_select"
|
||||
// type="select"
|
||||
// onChange={this.onThemeChange}
|
||||
// value={currentTheme}
|
||||
// disabled={automaticDarkModeEnabled}
|
||||
// >
|
||||
// {themes.map(theme => (
|
||||
// <option key={theme} value={theme}>
|
||||
// {theme}
|
||||
// </option>
|
||||
// ))}
|
||||
// </FormField>
|
||||
//
|
||||
// <FormField
|
||||
// type="checkbox"
|
||||
// name="automatic_dark_mode"
|
||||
// onChange={e => this.onAutomaticDarkModeChange(e.target.checked)}
|
||||
// checked={automaticDarkModeEnabled}
|
||||
// postfix={__('Automatic dark mode (9pm to 8am)')}
|
||||
// />
|
||||
// </section>
|
||||
<section className="card card--section">
|
||||
<div className="card__title">{__('Theme')}</div>
|
||||
<FormField
|
||||
name="theme_select"
|
||||
type="select"
|
||||
onChange={this.onThemeChange}
|
||||
value={currentTheme}
|
||||
disabled={automaticDarkModeEnabled}
|
||||
>
|
||||
{themes.map(theme => (
|
||||
<option key={theme} value={theme}>
|
||||
{theme}
|
||||
</option>
|
||||
))}
|
||||
</FormField>
|
||||
<FormField
|
||||
type="checkbox"
|
||||
name="automatic_dark_mode"
|
||||
onChange={e => this.onAutomaticDarkModeChange(e.target.checked)}
|
||||
checked={automaticDarkModeEnabled}
|
||||
postfix={__('Automatic dark mode (9pm to 8am)')}
|
||||
/>
|
||||
</section>
|
||||
}
|
||||
<section className="card card--section">
|
||||
<div className="card__title">{__('Application Cache')}</div>
|
||||
|
|
|
@ -95,7 +95,10 @@ input {
|
|||
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);
|
||||
}
|
||||
|
||||
|
@ -107,6 +110,7 @@ input {
|
|||
}
|
||||
|
||||
input::placeholder {
|
||||
color: var(--input-placeholder-color);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
|
|
|
@ -16,7 +16,7 @@ $large-breakpoint: 1760px;
|
|||
--video-aspect-ratio: 56.25%; // 9 x 16
|
||||
--snack-bar-width: 756px;
|
||||
|
||||
/* Colors */
|
||||
/* Colors: Brand */
|
||||
--color-white: #fff;
|
||||
--color-black: #000;
|
||||
--color-grey: #d6d6d6;
|
||||
|
@ -34,28 +34,27 @@ $large-breakpoint: 1760px;
|
|||
--color-green: #399483;
|
||||
--color-green-light: #effbe4;
|
||||
--color-green-blue: #2ec1a8;
|
||||
|
||||
/* Colors */
|
||||
--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-error: #a94442;
|
||||
--color-download: var(--color-white);
|
||||
--color-download-overlay: var(--color-black);
|
||||
--color-bg: #fafafa;
|
||||
--color-bg-alt: var(--color-grey-light);
|
||||
--color-placeholder: #ececec;
|
||||
--color-nav-bg: var(--color-grey-light);
|
||||
--color-placeholder: var(--color-grey);
|
||||
--color-search-placeholder: var(--color-placeholder);
|
||||
|
||||
/* 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-wunderbar: 0px 10px 20px rgba(0, 0, 0, 0.03);
|
||||
--box-shadow-wunderbar: 0 10px 20px rgba(0, 0, 0, 0.03);
|
||||
|
||||
/* 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-link-padding: 4px;
|
||||
--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-border-size: 1px;
|
||||
--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-border: var(--color-grey);
|
||||
|
||||
|
@ -80,8 +79,9 @@ $large-breakpoint: 1760px;
|
|||
|
||||
/* input:hover */
|
||||
--input-hover-border-color: rgba(0, 0, 0, 0.87);
|
||||
|
||||
/* input:placeholder */
|
||||
--input-placeholder-color: rgba(0, 0, 0, 0.42);
|
||||
--input-placeholder-color: var(--color-help);
|
||||
--input-placeholder-opacity: 1;
|
||||
|
||||
/* Select */
|
||||
|
@ -99,6 +99,7 @@ $large-breakpoint: 1760px;
|
|||
--btn-external-color: var(--color-light-blue);
|
||||
--btn-bg-secondary: var(--color-teal);
|
||||
--btn-bg-danger: var(--color-red);
|
||||
--btn-home-bg-color: var(--color-white);
|
||||
--btn-radius: 20px;
|
||||
--btn-height: 36px;
|
||||
|
||||
|
@ -113,20 +114,30 @@ $large-breakpoint: 1760px;
|
|||
--header-height: $spacing-width * 3;
|
||||
--header-button-bg: transparent;
|
||||
--header-button-hover-bg: rgba(100, 100, 100, 0.15);
|
||||
--header-primary-color: var(--color-primary);
|
||||
|
||||
/* Header -> search */
|
||||
--search-color: #666;
|
||||
--search-bg-color: #fff;
|
||||
--search-active-bg-color: var(--color-grey-light);
|
||||
--search-active-color: var(--header-active-color);
|
||||
--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;
|
||||
|
||||
/* Nav */
|
||||
--nav-color: var(--color-grey-dark);
|
||||
--nav-bg-color: var(--color-grey-light);
|
||||
|
||||
/* Table */
|
||||
--table-border: 1px solid #e2e2e2;
|
||||
--table-item-even: white;
|
||||
--table-item-odd: #f4f4f4;
|
||||
--table-border: 1px solid var(--color-grey-light);
|
||||
--table-item-odd: var(--color-grey-light);
|
||||
--table-item-even: transparent;
|
||||
|
||||
/* Card */
|
||||
--card-bg: var(--color-white);
|
||||
--card-text-color: var(--color-grey-dark);
|
||||
--card-radius: 2px;
|
||||
--card-margin: $spacing-vertical * 2/3;
|
||||
--card-wallet-color: var(--text-color-inverse);
|
||||
|
@ -140,8 +151,10 @@ $large-breakpoint: 1760px;
|
|||
/* Modal */
|
||||
--modal-width: 440px;
|
||||
--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-btn-bg-color: var(--btn-bg-alt);
|
||||
|
||||
// /* Tooltip */
|
||||
--tooltip-width: 300px;
|
||||
|
|
|
@ -135,6 +135,7 @@ button:disabled {
|
|||
*/
|
||||
|
||||
.btn.btn--home-nav {
|
||||
background-color: var(--btn-home-bg-color);
|
||||
box-shadow: none;
|
||||
|
||||
.btn__content {
|
||||
|
@ -145,6 +146,10 @@ button:disabled {
|
|||
.btn.btn--arrow {
|
||||
width: var(--btn-arrow-width);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
@ -158,9 +163,14 @@ button:disabled {
|
|||
}
|
||||
}
|
||||
|
||||
.btn.btn--header-publish {
|
||||
background-color: var(--header-primary-color);
|
||||
}
|
||||
|
||||
.btn.btn--header-balance {
|
||||
font-family: 'metropolis-medium';
|
||||
font-size: 13px;
|
||||
color: var(--header-primary-color);
|
||||
|
||||
@media only screen and (min-width: $medium-breakpoint) {
|
||||
font-size: 18px;
|
||||
|
@ -171,15 +181,14 @@ button:disabled {
|
|||
}
|
||||
|
||||
.btn__label--balance {
|
||||
color: var(--color-grey-dark);
|
||||
color: var(--text-help-color);
|
||||
&:hover {
|
||||
color: var(--text-color);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
|
||||
.btn__label--balance {
|
||||
color: var(--btn-primary-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -188,6 +197,7 @@ button:disabled {
|
|||
color: var(--color-white);
|
||||
opacity: 0.8;
|
||||
border-radius: var(--btn-radius);
|
||||
width: var(--btn-height);
|
||||
height: var(--btn-height);
|
||||
padding: 10px;
|
||||
}
|
||||
|
|
|
@ -10,9 +10,10 @@
|
|||
}
|
||||
|
||||
.card--section {
|
||||
background-color: var(--color-white);
|
||||
background-color: var(--card-bg);
|
||||
padding: $spacing-vertical;
|
||||
margin-top: $spacing-vertical * 2/3;
|
||||
box-shadow: var(--box-shadow-layer);
|
||||
}
|
||||
|
||||
.card--small {
|
||||
|
@ -49,6 +50,7 @@
|
|||
color: var(--card-wallet-color);
|
||||
justify-content: space-between;
|
||||
|
||||
.card__title,
|
||||
.card__subtitle {
|
||||
color: var(--card-wallet-color);
|
||||
}
|
||||
|
@ -76,10 +78,13 @@
|
|||
background-color: var(--color-error);
|
||||
}
|
||||
|
||||
.card__title-identity {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.card__title-identity--file {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.credit-amount,
|
||||
.icon {
|
||||
margin-top: $spacing-vertical * 1/3;
|
||||
|
@ -95,6 +100,7 @@
|
|||
|
||||
.card__title {
|
||||
font-size: 18px;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.card__title--file {
|
||||
|
@ -116,9 +122,9 @@
|
|||
}
|
||||
|
||||
.card__subtitle {
|
||||
color: var(--color-help);
|
||||
font-size: 14px;
|
||||
font-family: 'metropolis-medium';
|
||||
color: var(--card-text-color);
|
||||
|
||||
.icon {
|
||||
margin-left: $spacing-vertical * 1/3;
|
||||
|
@ -175,7 +181,7 @@
|
|||
}
|
||||
|
||||
.card__subtext-title {
|
||||
color: var(--color-black);
|
||||
color: var(--text-color);
|
||||
font-size: calc(var(--font-size-subtext-multiple) * 1.5em);
|
||||
|
||||
&:not(:first-of-type) {
|
||||
|
@ -184,7 +190,6 @@
|
|||
}
|
||||
|
||||
.card__subtext {
|
||||
color: var(--color-grey-dark);
|
||||
font-size: calc(var(--font-size-subtext-multiple) * 1em);
|
||||
padding-top: $spacing-vertical * 1/3;
|
||||
word-break: break-word;
|
||||
|
|
|
@ -5,8 +5,11 @@
|
|||
|
||||
.file-download {
|
||||
position: relative;
|
||||
background-color: var(--color-black);
|
||||
border-radius: var(--btn-radius);
|
||||
color: var(--color-download);
|
||||
font-size: 12px;
|
||||
opacity: 0.8;
|
||||
font-family: 'metropolis-medium';
|
||||
}
|
||||
|
||||
|
|
|
@ -67,11 +67,11 @@
|
|||
}
|
||||
|
||||
.form-field__label {
|
||||
color: var(--color-black);
|
||||
color: var(--form-label-color);
|
||||
}
|
||||
|
||||
.form-field__help {
|
||||
color: var(--color-grey-dark);
|
||||
color: var(--color-help);
|
||||
padding-top: $spacing-vertical * 1/3;
|
||||
}
|
||||
|
||||
|
|
|
@ -22,7 +22,6 @@
|
|||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
border: var(--modal-border);
|
||||
background: var(--modal-bg);
|
||||
overflow: auto;
|
||||
|
@ -31,6 +30,11 @@
|
|||
box-shadow: var(--box-shadow-layer);
|
||||
max-width: var(--modal-width);
|
||||
word-break: break-word;
|
||||
|
||||
.btn.btn--alt {
|
||||
// Set modal buttons bg color
|
||||
background-color: var(--modal-btn-bg-color);
|
||||
}
|
||||
}
|
||||
|
||||
.modal--fullscreen {
|
||||
|
@ -40,7 +44,7 @@
|
|||
right: 0;
|
||||
bottom: 0;
|
||||
padding: $spacing-vertical;
|
||||
background: var(--modal-bg);
|
||||
background: var(--modal-fullscreen-bg);
|
||||
overflow-y: scroll;
|
||||
|
||||
.main {
|
||||
|
@ -54,7 +58,7 @@
|
|||
// Slide down isn't possible without doing a lot of re-work to the modal component
|
||||
.ReactModal__Overlay {
|
||||
.modal--fullscreen {
|
||||
transition: height var(--animation-style) var(--animation-style);
|
||||
transition: height var(--animation-duration) var(--animation-style);
|
||||
height: 0;
|
||||
}
|
||||
|
||||
|
|
|
@ -1,13 +1,14 @@
|
|||
.nav {
|
||||
grid-area: nav;
|
||||
background-color: var(--color-nav-bg);
|
||||
background-color: var(--nav-bg-color);
|
||||
padding: $spacing-width;
|
||||
color: var(--nav-color);
|
||||
|
||||
hr {
|
||||
width: 24px;
|
||||
margin: 36px 0;
|
||||
// width: 40px;
|
||||
border: solid 1px var(--color-grey);
|
||||
border: solid 1px var(--color-divider);
|
||||
margin: $spacing-vertical $spacing-vertical * 2/3;
|
||||
}
|
||||
}
|
||||
|
@ -28,7 +29,7 @@
|
|||
|
||||
.nav__link {
|
||||
// padding-top: $spacing-vertical / 3;
|
||||
color: var(--color-grey-dark);
|
||||
color: inherit;
|
||||
white-space: nowrap;
|
||||
|
||||
.btn__label {
|
||||
|
@ -48,7 +49,7 @@
|
|||
}
|
||||
|
||||
.btn:hover {
|
||||
color: var(--color-black);
|
||||
color: var(--text-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -70,10 +71,11 @@
|
|||
}
|
||||
|
||||
.nav__link--active {
|
||||
color: var(--color-black);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.nav__sub-links {
|
||||
color: var(--nav-color);
|
||||
padding-bottom: $spacing-vertical * 1/3;
|
||||
}
|
||||
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
|
|
|
@ -31,21 +31,24 @@
|
|||
border-bottom: none;
|
||||
|
||||
&:focus {
|
||||
background-color: var(--color-bg);
|
||||
background-color: var(--search-active-bg-color);
|
||||
border-radius: 0;
|
||||
border-bottom: 1px solid var(--color-grey);
|
||||
border-bottom: 1px solid var(--color-divider);
|
||||
box-shadow: var(--box-shadow-button);
|
||||
}
|
||||
}
|
||||
|
||||
.wunderbar__menu {
|
||||
max-width: 100px;
|
||||
border-radius: 0 0 3px 3px !important;
|
||||
padding: 0 !important;
|
||||
background: transparent !important;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.wunderbar__suggestion {
|
||||
padding: 5px 10px;
|
||||
background-color: var(--header-bg);
|
||||
background-color: var(--search-bg-color);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
@ -53,7 +56,7 @@
|
|||
font-family: 'metropolis-medium';
|
||||
|
||||
&: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 {
|
||||
color: var(--search-item-active-color);
|
||||
background-color: var(--color-secondary);
|
||||
}
|
||||
|
||||
|
@ -80,10 +84,9 @@
|
|||
|
||||
.search__input {
|
||||
font-family: 'metropolis-bold';
|
||||
background: var(--color-black);
|
||||
font-size: var(--search-modal-input-height);
|
||||
color: var(--color-black);
|
||||
background: var(--modal-bg);
|
||||
color: var(--search-color);
|
||||
background: transparent;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
@ -93,5 +96,8 @@
|
|||
|
||||
.search-result__column {
|
||||
flex: 0 0 270px;
|
||||
.card__media {
|
||||
background-color: var(--color-search-placeholder);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -15,12 +15,14 @@ table.table {
|
|||
}
|
||||
|
||||
thead {
|
||||
border-bottom: 1px solid var(--color-grey);
|
||||
color: var(--text-color);
|
||||
border-bottom: var(--table-border);
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
font-size: 13px;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
th {
|
||||
|
@ -29,7 +31,7 @@ table.table {
|
|||
|
||||
td {
|
||||
font-family: 'metropolis-medium';
|
||||
color: var(--color-grey-dark);
|
||||
color: var(--color-help);
|
||||
padding: $spacing-vertical * 1/6 0;
|
||||
|
||||
.btn:not(.btn--link) {
|
||||
|
@ -48,6 +50,8 @@ table.table {
|
|||
|
||||
tbody {
|
||||
tr {
|
||||
border-bottom: var(--table-item-border);
|
||||
padding: 8px 0;
|
||||
&:nth-child(even):not(.odd) {
|
||||
background-color: var(--table-item-odd);
|
||||
}
|
||||
|
@ -70,7 +74,7 @@ table.table--stretch {
|
|||
|
||||
table.table--help {
|
||||
td:nth-of-type(1) {
|
||||
color: var(--color-black);
|
||||
color: var(--text-color);
|
||||
font-family: 'metropolis-semibold';
|
||||
min-width: 130px;
|
||||
}
|
||||
|
|
|
@ -1,65 +1,91 @@
|
|||
: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 */
|
||||
--text-color: #FFF;
|
||||
--text-selection-bg: rgba(0,150,136, 0.95);
|
||||
--color-divider: #53637C;;
|
||||
--color-canvas: transparent;
|
||||
--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 */
|
||||
--form-label-color: rgba(255, 255, 255, 0.70);
|
||||
/* Text */
|
||||
--text-color: #FFF;
|
||||
--text-help-color: var(--color-help);
|
||||
--text-selection-color: #fff;
|
||||
|
||||
/* Input */
|
||||
--input-bg: transparent;
|
||||
--input-border-color: rgba(255,255,255, 0.70);
|
||||
--input-hover-border-color: rgba(255, 255, 255, 1);
|
||||
/* Form */
|
||||
--form-label-color: #FFF;
|
||||
|
||||
/* input:placeholder */
|
||||
--input-placeholder-color: rgba(255,255,255, 0.5);
|
||||
/* Input */
|
||||
--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-color: rgba(255, 255, 255, 0.50);
|
||||
--input-disabled-border-color: rgba(255, 255, 255, 0.70);
|
||||
/* input:disabled */
|
||||
--input-disabled-border-color: rgba(255, 255, 255, 0.42);
|
||||
--input-disabled-color: rgba(255, 255, 255, 0.54);
|
||||
|
||||
/* Search */
|
||||
--search-bg: rgba(0,0,0, 0.45);
|
||||
--search-color: #757575;
|
||||
--search-active-bg: rgba(0,0,0, 0.75);
|
||||
--search-border: 1px solid rgba(0,0,0, 0.25);
|
||||
/* Button */
|
||||
--btn-bg-primary: var(--color-primary);
|
||||
--btn-color-primary: var(--color-white);
|
||||
--btn-bg-primary-hover: var(--color-primary-light);
|
||||
--btn-bg-alt: #13233C;
|
||||
--btn-color-alt: var(--text-color);
|
||||
--btn-home-bg-color: #44548F;
|
||||
|
||||
/* Tab */
|
||||
--tab-color: rgba(255,255,255, 0.5) ;
|
||||
--tab-active-color: rgba(255,255,255, 0.75);
|
||||
/* Header */
|
||||
--header-bg: var(--color-white);
|
||||
--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-color: #CCC;
|
||||
--header-active-color: #FFF;
|
||||
--header-button-hover-bg: var(--color-bg-alt);
|
||||
/* Header */
|
||||
--header-color: #CCC;
|
||||
--header-active-color: var(--color-white);
|
||||
--header-button-hover-bg: var(--color-bg-alt);
|
||||
|
||||
/* Table */
|
||||
--table-border: 0;
|
||||
--table-item-even: var(--color-bg-alt);
|
||||
--table-item-odd: transparent;
|
||||
/* Header -> search */
|
||||
--search-color: var(--color-white);
|
||||
--search-bg-color: rgb(58, 74, 99);
|
||||
--search-active-bg-color: #13233C;
|
||||
--search-active-shadow: 0 6px 9px -2px var(--color-grey--dark);
|
||||
--search-modal-input-height: 70px;
|
||||
|
||||
/* Modal */
|
||||
--modal-overlay-bg: var(--color-dark-overlay);
|
||||
--modal-border: 1px solid rgba(0, 0, 0, 0.25);
|
||||
/* Nav */
|
||||
--nav-color: #44548F;
|
||||
--nav-bg-color: #0D102F;
|
||||
|
||||
/* Scrollbar */
|
||||
--scrollbar-thumb-bg: rgba(255, 255, 255, 0.20);
|
||||
--scrollbar-thumb-hover-bg: rgba(255, 255, 255, 0.35);
|
||||
/* Table */
|
||||
--table-border: 1px solid var(--color-bg-alt);
|
||||
--table-item-odd: var(--color-bg-alt);
|
||||
|
||||
/* Divider */
|
||||
--divider: 1px solid rgba(255, 225, 225, 0.12);
|
||||
/* Card */
|
||||
--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;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue