From ce71393d83858058f430accc0fa2e8ac6fe44d82 Mon Sep 17 00:00:00 2001 From: Sean Yesmunt Date: Fri, 30 Apr 2021 11:42:18 -0400 Subject: [PATCH] theme orginization and cleanup --- ui/component/common/unsupported-on-web.jsx | 22 --- ui/modal/modalWalletEncrypt/view.jsx | 10 +- ui/scss/all.scss | 2 +- ui/scss/component/_badge.scss | 7 - ui/scss/component/_button.scss | 2 +- ui/scss/component/_header.scss | 10 +- ui/scss/component/_table.scss | 4 - ui/scss/component/menu-button.scss | 2 +- ui/scss/component/section.scss | 6 - ui/scss/init/_base-theme.scss | 193 +++++++++++++++++++ ui/scss/themes/dark.scss | 204 ++++++++++----------- ui/scss/themes/light.scss | 129 ------------- 12 files changed, 301 insertions(+), 290 deletions(-) delete mode 100644 ui/component/common/unsupported-on-web.jsx create mode 100644 ui/scss/init/_base-theme.scss diff --git a/ui/component/common/unsupported-on-web.jsx b/ui/component/common/unsupported-on-web.jsx deleted file mode 100644 index d3667a0e5..000000000 --- a/ui/component/common/unsupported-on-web.jsx +++ /dev/null @@ -1,22 +0,0 @@ -// @flow -import React from 'react'; -import Button from 'component/button'; - -type Props = { - type?: string, -}; - -export default function UnsupportedOnWeb(props: Props) { - const { type = 'page' } = props; - - return ( - IS_WEB && ( -
- {type === 'page' && __('This page is not currently supported on the web')} - {type === 'feature' && __('This feature is not currently supported on the web')}.{' '} -
- ) - ); -} diff --git a/ui/modal/modalWalletEncrypt/view.jsx b/ui/modal/modalWalletEncrypt/view.jsx index f4f7746a2..80d64375e 100644 --- a/ui/modal/modalWalletEncrypt/view.jsx +++ b/ui/modal/modalWalletEncrypt/view.jsx @@ -127,7 +127,7 @@ class ModalWalletEncrypt extends React.PureComponent { placeholder={__('Shh...')} type="password" name="wallet-new-password" - onChange={event => this.onChangeNewPassword(event)} + onChange={(event) => this.onChangeNewPassword(event)} /> @@ -137,7 +137,7 @@ class ModalWalletEncrypt extends React.PureComponent { placeholder={__('Your eyes only')} type="password" name="wallet-new-password-confirm" - onChange={event => this.onChangeNewPasswordConfirm(event)} + onChange={(event) => this.onChangeNewPasswordConfirm(event)} /> @@ -145,12 +145,12 @@ class ModalWalletEncrypt extends React.PureComponent { label={__('Remember Password')} type="checkbox" name="wallet-remember-password" - onChange={event => this.onChangeRememberPassword(event)} + onChange={(event) => this.onChangeRememberPassword(event)} checked={this.state.rememberPassword} /> -
+
{__( 'If your password is lost, it cannot be recovered. You will not be able to access your wallet without a password.' )} @@ -166,7 +166,7 @@ class ModalWalletEncrypt extends React.PureComponent { placeholder={__('Type "%acknowledgement_text%"', { acknowledgement_text: acknowledgementText })} type="text" name="wallet-understand" - onChange={event => this.onChangeUnderstandConfirm(event)} + onChange={(event) => this.onChangeUnderstandConfirm(event)} /> {failMessage &&
{__(failMessage)}
} diff --git a/ui/scss/all.scss b/ui/scss/all.scss index c6588e0ba..2b88d2873 100644 --- a/ui/scss/all.scss +++ b/ui/scss/all.scss @@ -4,7 +4,7 @@ @import 'init/vars'; @import 'init/mixins'; @import 'init/gui'; -@import 'init/color'; +@import 'init/base-theme'; @import 'themes/light.scss'; @import 'themes/dark.scss'; @import 'component/ads'; diff --git a/ui/scss/component/_badge.scss b/ui/scss/component/_badge.scss index 53c92d5d8..0baeab65b 100644 --- a/ui/scss/component/_badge.scss +++ b/ui/scss/component/_badge.scss @@ -26,13 +26,6 @@ color: var(--color-tertiary); } -.badge--cost { - @extend .badge; - background-color: var(--color-cost); - color: var(--color-black); - line-height: 1; -} - .badge--free { @extend .badge; background-color: var(--color-secondary-alt); diff --git a/ui/scss/component/_button.scss b/ui/scss/component/_button.scss index 96c91525b..35fb45512 100644 --- a/ui/scss/component/_button.scss +++ b/ui/scss/component/_button.scss @@ -556,7 +556,7 @@ svg + .button__label { &:hover { cursor: default; text-decoration: none; - background-color: var(--color-primary-alt); + background-color: var(--color-button-toggle-bg); } } diff --git a/ui/scss/component/_header.scss b/ui/scss/component/_header.scss index 6a5d89749..0c1d0fbd8 100644 --- a/ui/scss/component/_header.scss +++ b/ui/scss/component/_header.scss @@ -65,14 +65,6 @@ svg { stroke: var(--color-text); } - - &:hover { - color: var(--color-link-active); - - svg { - stroke: var(--color-link-active); - } - } } .header__navigation-item--back, @@ -84,7 +76,7 @@ margin-right: var(--spacing-s); &:hover { - background-color: var(--color-primary-alt); + background-color: var(--color-header-button-hover); } @media (min-width: $breakpoint-small) { diff --git a/ui/scss/component/_table.scss b/ui/scss/component/_table.scss index 99171c794..db8ac028d 100644 --- a/ui/scss/component/_table.scss +++ b/ui/scss/component/_table.scss @@ -30,10 +30,6 @@ border-bottom: 1px solid var(--color-border); } } - - &:nth-child(2n) { - background-color: var(--color-table-highlight); - } } th, diff --git a/ui/scss/component/menu-button.scss b/ui/scss/component/menu-button.scss index ddfdaad37..cb96d4c81 100644 --- a/ui/scss/component/menu-button.scss +++ b/ui/scss/component/menu-button.scss @@ -54,7 +54,7 @@ .menu__title { &[aria-expanded='true'] { - background-color: var(--color-primary-alt); + background-color: var(--color-header-button-active); } } diff --git a/ui/scss/component/section.scss b/ui/scss/component/section.scss index 5eae20b0e..ece1ca22e 100644 --- a/ui/scss/component/section.scss +++ b/ui/scss/component/section.scss @@ -90,12 +90,6 @@ font-size: var(--font-body); } -.section__subtitle--status { - @extend .section__subtitle; - padding: var(--spacing-s); - background-color: var(--color-text-warning); -} - .section__divider { display: flex; align-items: center; diff --git a/ui/scss/init/_base-theme.scss b/ui/scss/init/_base-theme.scss new file mode 100644 index 000000000..c518969d5 --- /dev/null +++ b/ui/scss/init/_base-theme.scss @@ -0,0 +1,193 @@ +// +// Colors are taken from this color pallette +// https://tailwindcss.com/docs/customizing-colors +// New colors should be also taken from the same color palette (if possible) +// +:root { + // Generic colors + --color-primary: #047857; + --color-primary-alt: #e4f4ef; + --color-primary-alt-2: #065f46; + --color-primary-alt-3: #10b981; + --color-secondary: #1e3a8a; + --color-secondary-alt: #dbeafe; + --color-secondary-alt-2: #bfdbfe; + --color-secondary-alt-3: #1e40af; + --color-tertiary: #5b21b6; + --color-tertiary-alt: #f5f3ff; + --color-danger: #991b1b; + --color-danger-alt: #fecaca; + --color-warning: #fff58c; + --color-black: #111; + --color-white: #fdfdfd; + --color-white-alt: #fafafa; + --color-gray-1: #f3f4f6; + --color-gray-2: #e5e7eb; + --color-gray-3: #d1d5db; + --color-gray-4: #9ca3af; + --color-gray-5: #6b7280; + --color-gray-6: #4b5563; + --color-gray-7: #374151; + --color-gray-8: #1f2937; + --color-gray-9: #1f2c47; + --color-gray-10: #111827; + --color-amber: #f26522; + + // Structure + --color-text: var(--color-black); + --color-text-subtitle: var(--color-gray-5); + --color-text-inverse: #fdfdfd; + --color-background: #fafafa; + --color-background--splash: #212529; + --color-border: #ededed; + --color-background-overlay: #21252980; + --color-card-background: #ffffff; + --color-card-background-highlighted: #f1f7fe; + + // Text + --color-text-selection-bg: var(--color-secondary-alt); + --color-text-selection: var(--color-secondary); + --color-text-empty: #999999; + --color-text-help: #999999; + --color-text-subtitle: #767676; + --color-text-warning: #212529; + --color-help-warning-bg: #fef3c7; + --color-help-warning-text: #555555; + --color-text-warning--background: var(--lbry-yellow-1); + --color-blockquote: var(--color-gray-3); + --color-blockquote-bg: var(--color-gray-1); + --color-text-error: var(--color-danger); + --color-error: var(--color-danger-alt); + --color-tooltip-bg: #222; + --color-tooltip-text: #fafafa; + + // Header + --color-header-background: #ffffff; + --color-header-button: var(--color-button-alt-bg); + --color-header-button-active: var(--color-primary-alt); + --color-header-button-hover: var(--color-primary-alt); + + // Button + --color-button-primary-bg: var(--color-primary); + --color-button-primary-text: var(--color-primary-alt); + --color-button-primary-bg-hover: var(--color-primary-alt-2); + --color-button-primary-hover-text: var(--color-primary-alt); + --color-button-secondary-bg: var(--color-secondary-alt); + --color-button-secondary-border: var(--color-secondary-alt); + --color-button-secondary-text: var(--color-secondary); + --color-button-secondary-bg-hover: var(--color-secondary-alt-2); + --color-button-alt-bg: var(--color-gray-1); + --color-button-alt-text: var(--color-text); + --color-button-alt-bg-hover: var(--color-gray-2); + --color-button-toggle-text: var(--color-primary); + --color-button-toggle-bg: var(--color-primary-alt); + --color-button-border: var(--color-gray-3); + --color-link: var(--color-primary); + --color-link-hover: var(--color-black); + --color-link-focus-bg: var(--color-gray-1); + + // Input + --color-input-color: var(--color-black); + --color-input-label: var(--color-gray-5); + --color-input-placeholder: var(--color-gray-8); + --color-input-bg: var(--color-gray-1); + --color-input-border: var(--color-border); + --color-input-border-active: var(--color-secondary); + --color-input-toggle: var(--color-secondary); + --color-input-toggle-bg: var(--color-gray-1); + --color-input-toggle-bg-hover: var(--color-secondary-alt); + --color-input-prefix-bg: var(--color-gray-2); + --color-input-prefix-border: var(--color-gray-5); + --color-input-bg-selected: var(--color-primary-alt); + --select-toggle-background: url("data:image/svg+xml,%3Csvg viewBox='0 0 96 96' xmlns='http://www.w3.org/2000/svg' fill='%23212529'%3E%3Cpath d='M17.172, 31.172c1.562, -1.562 4.095, -1.562 5.656, 0l25.172, 25.171l25.172, -25.171c1.562, -1.562 4.095, -1.562 5.656, 0c1.562, 1.562 1.562, 4.095 0, 5.656l-28, 28c-1.562, 1.562 -4.095, 1.562 -5.656, 0l-28, -28c-0.781, -0.781 -1.172, -1.805 -1.172, -2.828c0, -1.023 0.391, -2.047 1.172, -2.828Z'/%3E%3C/svg%3E%0A"); + + // Navigation + --color-navigation-icon: var(--color-gray-5); + --color-navigation-link: var(--color-gray-5); + --color-navigation-active: var(--color-primary-alt); + --color-navigation-active-text: var(--color-primary); + --color-navigation-hover: var(--color-gray-1); + --color-navigation-hover-text: var(--color-primary); + + // Tags + --color-tag: var(--color-gray-5); + --color-tag-bg: var(--color-button-alt-bg); + --color-tag-hover: var(--color-primary-alt); + --color-tag-bg-hover: var(--color-button-primary-bg); + + // Menu + --color-menu-background: var(--color-header-background); + --color-menu-background--active: var(--color-card-background-highlighted); + --color-menu-icon: var(--color-navigation-link); + + // Comments + --color-comment-menu: var(--color-gray-3); + --color-comment-menu-hovering: var(--color-gray-6); + --color-comment-highlighted: #fff2d9; + --color-comment-threadline: var(--color-gray-1); + --color-comment-threadline-hover: var(--color-gray-4); + + // Icons + --color-follow-bg: #ffd4da; + --color-follow-icon: #e2495e; + --color-view-bg: var(--color-secondary-alt); + --color-view-icon: var(--color-secondary); + + // Snack + --color-snack-bg: var(--color-primary); + --color-snack: var(--color-white); + --color-snack-bg-error: var(--color-danger); + --color-snack-upgrade: var(--color-tertiary); + + // Superchat + --color-superchat-text: var(--color-black); + --color-superchat: var(--color-cost); + --color-superchat__light: #fcd34d50; + --color-superchat-2: #fde68a; + --color-superchat-3: #fef3c7; + --color-superchat-3__light: #fef3c750; + --color-superchat-4: #fffbeb; + + // Editor + --color-editor-cursor: var(--color-text); + --color-editor-quote: #707070; + --color-editor-tag: #ea9400; + --color-editor-attr: #04b0f4; + --color-editor-string: #ff7451; + --color-editor-inline-code-fg: var(--color-text); + --color-editor-inline-code-fg-preview: #2e3439; + --color-editor-inline-code-bg: rgba(157, 161, 165, 0.3); + --color-editor-inline-code-bg-preview: #d0e8ff; + --color-editor-selected: #add6ff; + --color-editor-link: var(--color-link); + --color-editor-url: var(--color-editor-string); + --color-editor-hr: var(--color-editor-tag); + --color-editor-hr-preview: #cccccc; + + // Other + --color-focus: #bfdbfe; + --color-notification: #cc190f; + --color-live: #cc190f; + --color-nag: var(--color-orange); + --color-cost: #fcd34d; + --color-notice: #fef3ca; + --color-purchased: var(--color-cost); + --color-purchased-alt: #ffebc2; + --color-purchased-text: var(--color-gray-5); + --color-thumbnail-background: var(--color-gray-1); + --color-spinner-light: var(--color-white); + --color-spinner-dark: var(--color-black); + --color-placeholder-background: var(--color-gray-1); + --color-file-viewer-background: var(--color-card-background); + --color-tabs-background: var(--color-card-background); + --color-tab-divider: var(--color-primary); + --color-modal-background: var(--color-card-background); + + // Ads + --color-ads-background: #fae5ff; + --color-ads-link: var(--color-link); + + // Scrollbar + --color-scrollbar-thumb-bg: rgba(0, 0, 0, 0.2); + --color-scrollbar-track-bg: transparent; +} diff --git a/ui/scss/themes/dark.scss b/ui/scss/themes/dark.scss index 4926db6dd..d7c96aafe 100644 --- a/ui/scss/themes/dark.scss +++ b/ui/scss/themes/dark.scss @@ -1,89 +1,58 @@ -/* #2c3237 - 5% */ -/* #383f45 - 10% */ -/* #434b53; - 15% */ -/* #4e5862; - 20% */ -/* #5a6570; - 25% */ - [theme='dark'] { - --color-primary-alt: #3e675d; - --color-primary: #2bbb90; + // Color overides + --color-secondary: #1d3b63; + --color-secondary-alt: #dbeafe; + --color-secondary-alt-2: #bfdbfe; + --color-secondary-alt-3: #172f4f; - // Button - --color-link: var(--color-primary); - --color-link-hover: #60e1ba; - --color-link-active: #60e1ba; - - --color-navigation-icon: #76808a; - --color-navigation-link: #b9c3ce; - --color-navigation-active: #333a41; - --color-navigation-active-text: #bac5d0; - --color-navigation-hover: #272c32; - --color-navigation-hover-text: #bac5d0; - - --color-button-primary-bg: var(--color-primary-alt); - --color-button-primary-bg-hover: #44796c; - --color-button-primary-text: white; - --color-button-primary-hover-text: var(--color-text); - --color-button-secondary-bg: #395877; - --color-button-secondary-border: #395877; - --color-button-secondary-bg-hover: #4b6d8f; - --color-button-secondary-text: #a3c1e0; - --color-button-alt-bg: #33383d; - --color-button-alt-bg-hover: #3e464d; - --color-button-alt-text: #e2e9f0; - --color-header-button: #434b54; - --color-button-border: var(--color-gray-5); - --color-link-focus-bg: #333a41; - --color-button-toggle-text: var(--color-primary); - --color-button-toggle-bg: var(--color-primary-alt); - --color-button-toggle-bg-hover: var(--color-primary-alt); - - // Color - --color-focus: #2d69a5; - --color-background-overlay: #212529d7; - --color-background: #1c1f22; - --color-background-overlay: #21252999; - --color-border: #2f3337; - --color-card-background: #232629; - --color-card-background-highlighted: #384046; - --color-header-background: #2a2e32; - --color-tab-text: var(--color-white); - --color-tabs-background: var(--color-card-background); - --color-tab-divider: var(--color-white); - --color-modal-background: var(--color-card-background); - --color-comment-menu: #6a6a6a; - --color-comment-menu-hovering: #e0e0e0; - --color-notice: #58563b; - --color-error: #61373f; - --color-purchased: #ffd580; - --color-purchased-alt: var(--color-purchased); - --color-purchased-text: var(--color-gray-5); - --color-comment-highlighted: #484734; - --color-thumbnail-background: var(--color-gray-5); - --color-comment-threadline: #434b54; - --color-comment-threadline-hover: var(--color-gray-4); - --color-tooltip-bg: #2f3337; + // Structure + --color-background: var(--color-gray-10); + --color-background-overlay: #11182795; + --color-border: var(--color-gray-7); + --color-card-background: var(--color-gray-8); + --color-card-background-highlighted: var(--color-gray-9); // Text - --color-text: #d8d8d8; - --color-text-error: #f5748c; - --color-help-warning-bg: #fbbf2450; - --color-help-warning-text: white; + --color-text: var(--color-white); + --color-text-subtitle: var(--color-gray-4); --color-text-empty: var(--color-text-subtitle); - --color-text-help: #bbbbbb; - --color-text-subtitle: #9fafc0; --color-text-warning: #212529; --color-text-warning--background: var(--lbry-yellow-1); - --color-blockquote: var(--color-gray-5); - --color-blockquote-bg: var(--color-card-background-highlighted); + --color-text-error: var(--color-danger); + --color-error: var(--color-danger-alt); + + // Header + --color-header-background: var(--color-gray-8); + --color-header-button: var(--color-gray-7); + --color-header-button-hover: var(--color-gray-6); + --color-header-button-active: var(--color-gray-6); + + // Button + --color-button-primary-bg: var(--color-primary); + --color-button-primary-bg-hover: var(--color-primary-alt-2); + --color-button-primary-text: var(--color-primary-alt); + --color-button-primary-hover-text: var(--color-primary-alt); + --color-button-secondary-bg: var(--color-secondary); + --color-button-secondary-border: var(--color-secondary); + --color-button-secondary-bg-hover: var(--color-secondary-alt-3); + --color-button-secondary-text: var(--color-secondary-alt); + --color-button-alt-bg: var(--color-gray-7); + --color-button-alt-bg-hover: var(--color-gray-6); + --color-button-alt-text: var(--color-gray-1); + --color-button-border: var(--color-gray-5); + --color-button-toggle-bg: var(--color-secondary); + --color-button-toggle-text: var(--color-text); + --color-link: var(--color-primary-alt-3); + --color-link-hover: var(--color-text); + --color-link-focus-bg: var(--color-gray-7); // Input - --color-input: #f4f4f5; - --color-input-label: #a7a7a7; - --color-input-placeholder: #f4f4f5; - --color-input-bg: #464d53; - --color-input-bg-copyable: #4f5861; + --color-input: var(--color-white); + --color-input-label: var(--color-gray-3); + --color-input-placeholder: var(--color-gray-1); + --color-input-bg: var(--color-gray-7); + --color-input-bg-copyable: var(--color-gray-6); --color-input-border: var(--color-border); --color-input-border-active: var(--color-secondary); --color-input-toggle: var(--color-primary); @@ -94,32 +63,67 @@ --color-input-prefix-border: var(--color-gray-4); --select-toggle-background: url("data:image/svg+xml,%3Csvg viewBox='0 0 96 96' xmlns='http://www.w3.org/2000/svg' fill='%23ffffff'%3E%3Cpath d='M17.172, 31.172c1.562, -1.562 4.095, -1.562 5.656, 0l25.172, 25.171l25.172, -25.171c1.562, -1.562 4.095, -1.562 5.656, 0c1.562, 1.562 1.562, 4.095 0, 5.656l-28, 28c-1.562, 1.562 -4.095, 1.562 -5.656, 0l-28, -28c-0.781, -0.781 -1.172, -1.805 -1.172, -2.828c0, -1.023 0.391, -2.047 1.172, -2.828Z'/%3E%3C/svg%3E%0A"); - // Menu - --color-menu-background: var(--color-header-background); - --color-menu-background--active: #3a4045; - --color-menu-icon: #a7a7a7; - --color-menu-icon-active: #464d53; - - // Table - --color-table-highlight: #3a444e; - - // Search - --color-search-suggestion: var(--color-text); - --color-search-suggestion-background: #313d46; - --color-placeholder-background: #4e5862; - --color-spinner-light: #5a6570; - --color-spinner-dark: #212529; - --color-wunderbar: #89939e; + // Navigation + --color-navigation-icon: var(--color-gray-4); + --color-navigation-link: var(--color-gray-4); + --color-navigation-active: var(--color-gray-7); + --color-navigation-active-text: var(--color-gray-3); + --color-navigation-hover: var(--color-gray-6); + --color-navigation-hover-text: var(--color-gray-3); // Tags - --color-tag: var(--color-primary); - --color-tag-bg: var(--color-primary-alt); + --color-tag: var(--color-primary-alt-3); + --color-tag-bg: var(--color-gray-6); --color-tag-hover: var(--color-white); - --color-tag-bg-hover: var(--color-primary-alt-2); + --color-tag-bg-hover: var(--color-primary); + + // Menu + --color-menu-background: var(--color-header-background); + --color-menu-background--active: var(--color-gray-7); + --color-menu-icon: var(--color-gray-4); + + // Comments + --color-comment-menu: var(--color-gray-5); + --color-comment-menu-hovering: var(--color-gray-2); + --color-comment-threadline: #434b54; + --color-comment-threadline-hover: var(--color-gray-4); + --color-comment-highlighted: #484734; // Snack --color-snack-bg: var(--color-secondary); + // Superchat + --color-superchat-text: var(--color-black); + --color-superchat-text__light: var(--color-text); + --color-superchat: #fcd34d; + --color-superchat__light: #ef4e1647; + --color-superchat-2: #fde68a; + --color-superchat-3: #fef3c7; + --color-superchat-3__light: #58066087; + --color-superchat-4: #fffbeb; + + // Other + --color-focus: #93c5fd50; + --color-nag: var(--color-orange); + --color-tab-text: var(--color-white); + --color-tabs-background: var(--color-card-background); + --color-tab-divider: var(--color-white); + --color-modal-background: var(--color-card-background); + --color-notice: #58563b; + --color-error: #61373f; + --color-purchased: #ffd580; + --color-purchased-alt: var(--color-purchased); + --color-purchased-text: var(--color-gray-5); + --color-thumbnail-background: var(--color-gray-5); + --color-tooltip-bg: #2f3337; + --color-help-warning-bg: #d97706; + --color-help-warning-text: white; + --color-blockquote: var(--color-gray-5); + --color-blockquote-bg: var(--color-card-background-highlighted); + --color-placeholder-background: #4e5862; + --color-spinner-light: #5a6570; + --color-spinner-dark: #212529; + // Editor --color-editor-cursor: var(--color-text); --color-editor-quote: #d3d3d3; @@ -144,14 +148,4 @@ // Scrollbar --color-scrollbar-thumb-bg: rgba(255, 255, 255, 0.2); --color-scrollbar-track-bg: transparent; - - // Superchat - --color-superchat-text: var(--color-black); - --color-superchat-text__light: var(--color-text); - --color-superchat: #fcd34d; - --color-superchat__light: #ef4e1647; - --color-superchat-2: #fde68a; - --color-superchat-3: #fef3c7; - --color-superchat-3__light: #58066087; - --color-superchat-4: #fffbeb; } diff --git a/ui/scss/themes/light.scss b/ui/scss/themes/light.scss index 8a94b691b..5a4260fca 100644 --- a/ui/scss/themes/light.scss +++ b/ui/scss/themes/light.scss @@ -1,131 +1,2 @@ :root { - --color-navigation-icon: var(--color-gray-5); - --color-link-active: var(--color-primary); - --color-navigation-link: var(--color-gray-5); - --color-navigation-active: var(--color-primary-alt); - --color-navigation-active-text: var(--color-primary); - --color-navigation-hover: var(--color-gray-1); - --color-navigation-hover-text: #3f3f3f; - --color-link-focus-bg: #f1f1f1; - - --color-header-button: var(--color-button-alt-bg); - --color-button-border: var(--color-gray-3); - - // Color - --color-background: #fafafa; - --color-background--splash: #212529; - --color-border: #ededed; - --color-background-overlay: #21252980; - --color-nag: #f26522; - --color-error: #fcafca; - --color-comment-menu: #e0e0e0; - --color-comment-menu-hovering: #6a6a6a; - --color-notice: #fef3ca; - --color-purchased: var(--color-cost); - --color-purchased-alt: #ffebc2; - --color-purchased-text: var(--color-gray-5); - --color-comment-highlighted: #fff2d9; - --color-comment-threadline: var(--color-gray-1); - --color-comment-threadline-hover: var(--color-gray-4); - --color-thumbnail-background: var(--color-gray-1); - --color-button-toggle-text: var(--color-primary); - --color-button-toggle-bg: var(--color-primary-alt); - --color-button-toggle-bg-hover: var(--color-primary-alt); - --color-tooltip-bg: #222; - --color-tooltip-text: #fafafa; - - // Icons - --color-follow-bg: #ffd4da; - --color-follow-icon: #e2495e; - --color-view-bg: var(--color-secondary-alt); - --color-view-icon: var(--color-secondary); - - // Text - --color-text-selection-bg: var(--color-secondary-alt); - --color-text-selection: var(--color-secondary); - --color-text-error: var(--color-danger); - --color-text-empty: #999999; - --color-text-help: #999999; - --color-text-subtitle: #767676; - --color-text-warning: #212529; - --color-help-warning-bg: #fef3c7; - --color-help-warning-text: #555555; - --color-text-warning--background: var(--lbry-yellow-1); - --color-blockquote: var(--color-gray-3); - --color-blockquote-bg: var(--color-gray-1); - --color-input-color: #111111; - --color-input-label: var(--color-gray-5); - --color-input-placeholder: #212529; - --color-input-bg: var(--color-gray-1); - --color-input-border: var(--color-border); - --color-input-border-active: var(--color-secondary); - --color-input-toggle: var(--color-secondary); - --color-input-toggle-bg: var(--color-gray-1); - --color-input-toggle-bg-hover: var(--color-secondary-alt); - --color-input-prefix-bg: var(--color-gray-2); - --color-input-prefix-border: var(--color-gray-5); - --color-input-bg-selected: var(--color-primary-alt); - --select-toggle-background: url("data:image/svg+xml,%3Csvg viewBox='0 0 96 96' xmlns='http://www.w3.org/2000/svg' fill='%23212529'%3E%3Cpath d='M17.172, 31.172c1.562, -1.562 4.095, -1.562 5.656, 0l25.172, 25.171l25.172, -25.171c1.562, -1.562 4.095, -1.562 5.656, 0c1.562, 1.562 1.562, 4.095 0, 5.656l-28, 28c-1.562, 1.562 -4.095, 1.562 -5.656, 0l-28, -28c-0.781, -0.781 -1.172, -1.805 -1.172, -2.828c0, -1.023 0.391, -2.047 1.172, -2.828Z'/%3E%3C/svg%3E%0A"); - - --color-spinner-light: #ffffff; - --color-spinner-dark: #212529; - --color-placeholder-background: #f0f0f0; - --color-header-background: #ffffff; - --color-card-background: #ffffff; - --color-card-background-highlighted: #f1f7fe; - --color-list-header: #fff; - --color-file-viewer-background: var(--color-card-background); - --color-tabs-background: var(--color-card-background); - --color-tab-divider: var(--color-primary); - --color-modal-background: var(--color-card-background); - - // Menu - --color-menu-background: var(--color-header-background); - --color-menu-background--selected: var(--color-secondary-alt); - --color-menu-background--active: #f0f7ff; - --color-menu-icon: var(--color-navigation-link); - --color-menu-icon-active: var(--color-navigation-link); - - // Search - --color-search-suggestion: #212529; - --color-search-suggestion-background: #cce6fb; - - // Snack - --color-snack-bg: var(--color-primary); - --color-snack: var(--color-white); - --color-snack-bg-error: var(--color-danger); - --color-snack-upgrade: var(--color-tertiary); - - // Editor - --color-editor-cursor: var(--color-text); - --color-editor-quote: #707070; - --color-editor-tag: #ea9400; - --color-editor-attr: #04b0f4; - --color-editor-string: #ff7451; - --color-editor-inline-code-fg: var(--color-text); - --color-editor-inline-code-fg-preview: #2e3439; - --color-editor-inline-code-bg: rgba(157, 161, 165, 0.3); - --color-editor-inline-code-bg-preview: #d0e8ff; - --color-editor-selected: #add6ff; - --color-editor-link: var(--color-link); - --color-editor-url: var(--color-editor-string); - --color-editor-hr: var(--color-editor-tag); - --color-editor-hr-preview: #cccccc; - - // Ads - --color-ads-background: #fae5ff; - --color-ads-link: var(--color-link); - - // Scrollbar - --color-scrollbar-thumb-bg: rgba(0, 0, 0, 0.2); - --color-scrollbar-track-bg: transparent; - - // Superchat - --color-superchat-text: var(--color-black); - --color-superchat: #fcd34d; - --color-superchat__light: #fcd34d50; - --color-superchat-2: #fde68a; - --color-superchat-3: #fef3c7; - --color-superchat-3__light: #fef3c750; - --color-superchat-4: #fffbeb; }